laif-ds/dist/components/ui/tabs.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsx as s } from "react/jsx-runtime";
import { Root as o, Content as r, List as i, Trigger as c } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
import { designTokens as a } from "../design-tokens.js";
import { cn as n } from "../../lib/utils.js";
function u({
  className: t,
  ...e
}) {
  return /* @__PURE__ */ s(
    o,
    {
      "data-slot": "tabs",
      className: n("flex flex-col gap-2", t),
      ...e
    }
  );
}
function p({
  className: t,
  ...e
}) {
  return /* @__PURE__ */ s(
    i,
    {
      "data-slot": "tabs-list",
      className: n(
        "bg-d-secondary text-d-secondary-foreground inline-flex h-9 w-fit items-center justify-center p-[3px]",
        a.radius.lg,
        t
      ),
      ...e
    }
  );
}
function b({
  className: t,
  ...e
}) {
  return /* @__PURE__ */ s(
    c,
    {
      "data-slot": "tabs-trigger",
      className: n(
        "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border-transparent px-2 py-1 whitespace-nowrap transition-[color,box-shadow]",
        a.text.base,
        a.radius.default,
        a.focusRing,
        a.interaction.disabled,
        // Active state
        "data-[state=active]:bg-d-background data-[state=active]:text-d-foreground data-[state=active]:shadow-sm",
        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        t
      ),
      ...e
    }
  );
}
function m({
  className: t,
  ...e
}) {
  return /* @__PURE__ */ s(
    r,
    {
      "data-slot": "tabs-content",
      className: n("flex-1 outline-none", t),
      ...e
    }
  );
}
export {
  u as Tabs,
  m as TabsContent,
  p as TabsList,
  b as TabsTrigger
};