nextuiq/dist/index18.mjs

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

import { j as jsxRuntimeExports } from './index46.mjs';
import { useRef, useCallback } from 'react';
import { cn } from './index38.mjs';

const Tabs = ({
  options,
  value,
  onChange,
  className
}) => {
  const tabsRef = useRef(null);
  const handleKeyDown = useCallback((e, option) => {
    const currentIndex = options.findIndex((opt) => opt.value === value);
    switch (e.key) {
      case "ArrowLeft":
      case "ArrowUp":
        e.preventDefault();
        const prevIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
        onChange(options[prevIndex].value);
        break;
      case "ArrowRight":
      case "ArrowDown":
        e.preventDefault();
        const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
        onChange(options[nextIndex].value);
        break;
      case " ":
      case "Enter":
        e.preventDefault();
        onChange(option.value);
        break;
    }
  }, [options, value, onChange]);
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    "div",
    {
      ref: tabsRef,
      role: "tablist",
      "aria-orientation": "horizontal",
      className: cn(
        "inline-flex h-10 items-center justify-center rounded-md bg-[oklch(var(--theme-muted))] p-1",
        className
      ),
      children: options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
        "button",
        {
          role: "tab",
          "aria-selected": value === option.value,
          "aria-controls": `panel-${option.id}`,
          id: `tab-${option.id}`,
          tabIndex: value === option.value ? 0 : -1,
          onClick: () => onChange(option.value),
          onKeyDown: (e) => handleKeyDown(e, option),
          className: 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))]",
            value === option.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: option.label
        },
        option.id
      ))
    }
  );
};

export { Tabs };