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 a } from "react/jsx-runtime";
import { Root as n, List as o, Trigger as r, Content as i } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
import { cn as s } from "../../lib/utils.js";
function u({
  className: t,
  ...e
}) {
  return /* @__PURE__ */ a(
    n,
    {
      "data-slot": "tabs",
      className: s("flex flex-col gap-2", t),
      ...e
    }
  );
}
function f({
  className: t,
  ...e
}) {
  return /* @__PURE__ */ a(
    o,
    {
      "data-slot": "tabs-list",
      className: s(
        "bg-d-secondary text-d-secondary-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
        t
      ),
      ...e
    }
  );
}
function g({
  className: t,
  ...e
}) {
  return /* @__PURE__ */ a(
    r,
    {
      "data-slot": "tabs-trigger",
      className: s(
        "data-[state=active]:bg-d-background dark:data-[state=active]:text-d-foreground focus-visible:border-d-ring focus-visible:ring-d-ring/50 focus-visible:outline-d-ring dark:data-[state=active]:border-d-input dark:data-[state=active]:bg-d-background text-d-foreground dark:text-d-secondary-foreground d-border inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        t
      ),
      ...e
    }
  );
}
function b({
  className: t,
  ...e
}) {
  return /* @__PURE__ */ a(
    i,
    {
      "data-slot": "tabs-content",
      className: s("flex-1 outline-none", t),
      ...e
    }
  );
}
export {
  u as Tabs,
  b as TabsContent,
  f as TabsList,
  g as TabsTrigger
};