nextuiq/dist/index18.js

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js"),t=require("react"),r=require("./index38.js");exports.Tabs=({options:n,value:a,onChange:o,className:i})=>{const s=t.useRef(null),l=t.useCallback(((e,t)=>{const r=n.findIndex((e=>e.value===a));switch(e.key){case"ArrowLeft":case"ArrowUp":e.preventDefault(),o(n[r>0?r-1:n.length-1].value);break;case"ArrowRight":case"ArrowDown":e.preventDefault(),o(n[r<n.length-1?r+1:0].value);break;case" ":case"Enter":e.preventDefault(),o(t.value)}}),[n,a,o]);return e.jsxRuntimeExports.jsx("div",{ref:s,role:"tablist","aria-orientation":"horizontal",className:r.cn("inline-flex h-10 items-center justify-center rounded-md bg-[oklch(var(--theme-muted))] p-1",i),children:n.map((t=>e.jsxRuntimeExports.jsx("button",{role:"tab","aria-selected":a===t.value,"aria-controls":`panel-${t.id}`,id:`tab-${t.id}`,tabIndex:a===t.value?0:-1,onClick:()=>o(t.value),onKeyDown:e=>l(e,t),className:r.cn("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[oklch(var(--theme-ring))] focus-visible:ring-offset-2","hover:text-[oklch(var(--theme-foreground))]",a===t.value?"bg-[oklch(var(--theme-background))] text-[oklch(var(--theme-foreground))] shadow-sm":"text-[oklch(var(--theme-muted-foreground)] hover:bg-[oklch(var(--theme-muted)/0.8)]"),children:t.label},t.id)))})};