@vela-ui/react/dist/chunk-P5JMNOQK.mjs

Vela UI React components

import {
  createContext
} from "./chunk-UHLSIXAN.mjs";

// src/components/tabs.tsx
import {
  Tab as AriaTab,
  TabList as AriaTabList,
  TabPanel as AriaTabPanel,
  Tabs as AriaTabs,
  composeRenderProps
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { jsx } from "react/jsx-runtime";
var tabsVariants = tv({
  slots: {
    root: "group/tabs",
    list: "relative isolate inline-flex",
    tab: "text-foreground/75 relative inline-flex cursor-pointer items-center justify-center gap-2 px-3 py-1 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
    panel: ""
  },
  variants: {
    variant: {
      default: {
        list: "bg-muted text-muted-foreground rounded-lg p-1",
        tab: "dark:text-muted-foreground data-[selected=true]:bg-background data-[selected=true]:dark:text-foreground data-[selected=true]:dark:border-input data-[selected=true]:dark:bg-input/30 rounded-md border border-transparent whitespace-nowrap transition-[color,box-shadow] data-[selected=true]:shadow-sm"
      },
      underline: {
        list: "border-input flex",
        tab: "data-[selected=true]:border-foreground data-[selected=true]:text-foreground border-transparent"
      },
      pills: {
        tab: "data-[selected=true]:bg-muted data-[selected=true]:text-foreground rounded-md"
      }
    },
    size: {
      sm: {
        tab: "h-9 text-sm"
      },
      md: {
        tab: "h-10 text-sm"
      },
      lg: {
        tab: "h-11 text-base"
      }
    },
    orientation: {
      horizontal: {
        root: "block",
        list: "flex-row",
        panel: "w-full pt-4"
      },
      vertical: {
        root: "flex",
        list: "flex-col",
        panel: "ps-4"
      }
    },
    fitted: {
      true: {
        list: "flex",
        tab: "flex-1 justify-center text-center"
      }
    },
    isDisabled: {
      true: {
        tab: "cursor-not-allowed opacity-50"
      }
    },
    isFocusVisible: {
      true: {
        tab: "border-ring ring-ring/50 outline-ring ring-[3px] outline-1",
        panel: "border-ring ring-ring/50 outline-ring ring-[3px] outline-1"
      }
    }
  },
  compoundVariants: [
    {
      orientation: "horizontal",
      variant: "underline",
      className: {
        list: "border-b",
        tab: "-mb-px border-b-2"
      }
    },
    {
      orientation: "vertical",
      variant: "underline",
      className: {
        list: "border-r",
        tab: "-mr-px border-r-2"
      }
    }
  ],
  defaultVariants: {
    variant: "default",
    size: "md"
  }
});
var { root, list, tab, panel } = tabsVariants();
var [TabsProvider, useTabsContext] = createContext({
  name: "TabsContext"
});
function Tabs({
  className,
  variant = "default",
  size = "md",
  fitted = false,
  children,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    AriaTabs,
    {
      "data-slot": "tabs",
      className: composeRenderProps(
        className,
        (className2, { orientation }) => root({ orientation, className: className2 })
      ),
      ...props,
      children: composeRenderProps(children, (children2, { orientation }) => /* @__PURE__ */ jsx(TabsProvider, { value: { orientation, variant, size, fitted }, children: children2 }))
    }
  );
}
function TabList({ className, ...props }) {
  const { orientation, variant, fitted } = useTabsContext();
  return /* @__PURE__ */ jsx(
    AriaTabList,
    {
      "data-slot": "tab-list",
      className: composeRenderProps(
        className,
        (className2) => list({ orientation, variant, fitted, className: className2 })
      ),
      ...props
    }
  );
}
function Tab({ className, ...props }) {
  const { orientation, variant, size, fitted } = useTabsContext();
  return /* @__PURE__ */ jsx(
    AriaTab,
    {
      "data-slot": "tab",
      className: composeRenderProps(
        className,
        (className2, renderProps) => tab({
          ...renderProps,
          orientation,
          variant,
          size,
          fitted,
          className: className2
        })
      ),
      ...props
    }
  );
}
function TabPanel({ className, ...props }) {
  const { orientation, variant, size } = useTabsContext();
  return /* @__PURE__ */ jsx(
    AriaTabPanel,
    {
      "data-slot": "tab-panel",
      className: composeRenderProps(
        className,
        (className2, renderProps) => panel({ ...renderProps, orientation, variant, size, className: className2 })
      ),
      ...props
    }
  );
}

export {
  Tabs,
  TabList,
  Tab,
  TabPanel
};