mada-design-system 0.9.0 → 1.0.0

package/index.es76.js

@@ -1,103 +1,14 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-toast";
-import { cva as l } from "./index.es111.js";
-import * as r from "react";
-import { cn as i } from "./index.es89.js";
-import { Button as p } from "./index.es23.js";
-import c from "./index.es114.js";
-import m from "./index.es182.js";
-const C = o.Provider, u = l("fixed z-[10000000000000] flex max-h-screen w-full flex-col p-4  lg:max-w-[500px] ", {
-  variants: {
-    position: {
-      top: "ltr:sm:right-1/2 ltr:sm:translate-x-1/2 rtl:sm:left-1/2 rtl:sm:-translate-x-1/2 sm:top-10 sm:bottom-auto top-space-05",
-      bottom: "ltr:sm:right-1/2 ltr:sm:translate-x-1/2 rtl:sm:left-1/2 rtl:sm:-translate-x-1/2 sm:bottom-10 sm:top-auto bottom-space-05",
-      "top-right": "end-0 sm:top-10 sm:bottom-auto top-space-05",
-      "top-left": "start-0 sm:top-10 sm:bottom-auto top-space-05",
-      "bottom-right": "end-0 sm:bottom-10 sm:top-auto bottom-space-05",
-      "bottom-left": "start-0 sm:bottom-10 sm:top-auto bottom-space-05"
-    }
-  },
-  defaultVariants: {
-    position: "bottom"
-  }
-}), f = r.forwardRef(({ className: t, position: e, ...s }, n) => /* @__PURE__ */ a(o.Viewport, { ref: n, className: i(u({ position: e }), t), ...s }));
-f.displayName = o.Viewport.displayName;
-const b = l(
-  `group pointer-events-auto gap-space-03 relative bg-background-notification-white flex sm:flex-row w-full items-center space-x-4 overflow-hidden
-     rounded-1 border border-border-primary  px-space-05 py-space-04 shadow-3xl transition-all data-[swipe=cancel]:translate-y-0 data-[swipe=end]:translate-y-[var(--radix-toast-swipe-end-x)]
-     data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out
-     data-[swipe=end]:animate-out data-[state=closed]:fade-out-80
-     before:w-space-02 before:top-0 before:bottom-0 before:absolute before:start-0 before:opacity-70`,
-  {
-    variants: {
-      variant: {
-        default: "before:bg-background-neutral-100",
-        destructive: "destructive group before:bg-background-error",
-        success: "success group before:bg-background-success",
-        info: "info group before:bg-background-info",
-        warning: "warning group before:bg-background-warning"
-      },
-      position: {
-        top: "data-[state=closed]:slide-out-to-top-full data-[state=open]:slide-in-from-top-full",
-        bottom: "data-[state=closed]:slide-out-to-bottom-full data-[state=open]:slide-in-from-bottom-full",
-        "top-right": "data-[state=closed]:slide-out-to-top-full data-[state=open]:slide-in-from-top-full",
-        "top-left": "data-[state=closed]:slide-out-to-top-full data-[state=open]:slide-in-from-top-full",
-        "bottom-right": "data-[state=closed]:slide-out-to-bottom-full data-[state=open]:slide-in-from-bottom-full",
-        "bottom-left": "data-[state=closed]:slide-out-to-bottom-full data-[state=open]:slide-in-from-bottom-full"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      position: "bottom"
-    }
-  }
-), g = r.forwardRef(({ className: t, variant: e, position: s, ...n }, d) => /* @__PURE__ */ a(o.Root, { ref: d, className: i(b({ variant: e, position: s }), t), ...n }));
-g.displayName = o.Root.displayName;
-const x = r.forwardRef(
-  ({ className: t, ...e }, s) => /* @__PURE__ */ a(
-    o.Action,
-    {
-      ref: s,
-      className: i(
-        "inline-flex h-[32px] items-center justify-center gap-space-01 rounded border-none bg-transparent px-space-03 py-[6px] text-body-01 font-medium text-text-default transition-colors hover:bg-button-background-neutral-hovered focus:bg-transparent focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-border-black active:bg-button-background-neutral-pressed disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-disabled-text-default-disabled [&>svg]:size-[20px]",
-        t
-      ),
-      ...e
-    }
-  )
-);
-x.displayName = o.Action.displayName;
-const v = r.forwardRef(
-  ({ ...t }, e) => /* @__PURE__ */ a(o.Close, { ref: e, asChild: !0, "toast-close": "", ...t, children: /* @__PURE__ */ a(p, { variant: "text", colors: "neutral", size: "icon-sm", rounded: "default", children: /* @__PURE__ */ a(c, {}) }) })
-);
-v.displayName = o.Close.displayName;
-const w = r.forwardRef(
-  ({ className: t, ...e }, s) => /* @__PURE__ */ a(o.Title, { ref: s, className: i("text-body-02 font-semibold text-text-display", t), ...e })
-);
-w.displayName = o.Title.displayName;
-const y = r.forwardRef(({ className: t, ...e }, s) => /* @__PURE__ */ a(o.Description, { ref: s, className: i("content-center text-body-01 text-text-paragraph-primary", t), ...e }));
-y.displayName = o.Description.displayName;
-const h = ({ icon: t }) => /* @__PURE__ */ a(
-  "div",
-  {
-    className: `flex size-space-07 items-center justify-center rounded-full bg-background-neutral-50 p-[10px]
-        group-[.destructive]:bg-icon-background-error-light  group-[.info]:bg-icon-background-info-light
-        group-[.success]:bg-icon-background-success-light group-[.warning]:bg-icon-background-warning-light
-        [&>svg]:size-[20px] [&>svg]:shrink-0
-        group-[.destructive]:[&>svg]:fill-icon-error group-[.info]:[&>svg]:fill-icon-info
-        group-[.success]:[&>svg]:fill-icon-success group-[.warning]:[&>svg]:fill-icon-warning
-        `,
-    children: t || /* @__PURE__ */ a(m, {})
-  }
-);
-h.displayName = "ToastIcon";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-slider";
+import * as a from "react";
+import { cn as n } from "./index.es94.js";
+const t = a.forwardRef(
+  ({ className: o, ...i }, s) => /* @__PURE__ */ l(e.Root, { ref: s, className: n("relative flex w-full touch-none select-none items-center", o), ...i, children: [
+    /* @__PURE__ */ r(e.Track, { className: "relative h-space-02 w-full grow overflow-hidden rounded-3 bg-background-secondary", children: /* @__PURE__ */ r(e.Range, { className: "absolute h-full bg-primary" }) }),
+    /* @__PURE__ */ r(e.Thumb, { className: "block  size-[20px] rounded-full border-2 border-primary-foreground bg-primary ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+  ] })
+);
+t.displayName = e.Root.displayName;
 export {
-  g as Toast,
-  x as ToastAction,
-  v as ToastClose,
-  y as ToastDescription,
-  h as ToastIcon,
-  C as ToastProvider,
-  w as ToastTitle,
-  f as ToastViewport
+  t as Slider
 };

package/index.es77.js

@@ -1,37 +1,40 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { ToastProvider as d, Toast as u, ToastIcon as T, ToastTitle as v, ToastDescription as g, ToastClose as h, ToastViewport as x } from "./index.es76.js";
-import { useToast as w } from "./index.es81.js";
-import y from "./index.es90.js";
-import N from "./index.es183.js";
-import b from "./index.es184.js";
-import l from "./index.es182.js";
-import A from "./index.es168.js";
-const P = {
-  destructive: /* @__PURE__ */ o(N, {}),
-  success: /* @__PURE__ */ o(b, {}),
-  default: /* @__PURE__ */ o(l, {}),
-  info: /* @__PURE__ */ o(l, {}),
-  warning: /* @__PURE__ */ o(A, {})
-};
-function V({ position: t = "bottom" }) {
-  const { toasts: r } = w(), m = y((i) => i.isActive), f = Array.from(new Set(r.map((i) => i.position || t)));
-  return /* @__PURE__ */ s(d, { children: [
-    r.map(function({ id: i, title: a, description: n, action: c, position: p, ...e }) {
-      return /* @__PURE__ */ o(u, { ...e, className: `${m ? "grayscale" : "grayscale-0"}`, position: p || t, children: /* @__PURE__ */ s("div", { className: "flex grow flex-col justify-between gap-space-04", children: [
-        /* @__PURE__ */ s("div", { className: "flex w-full gap-space-03", children: [
-          /* @__PURE__ */ o(T, { icon: e.variant && P[e.variant] }),
-          /* @__PURE__ */ s("div", { className: "grid flex-1 items-center gap-space-01", children: [
-            a && /* @__PURE__ */ o(v, { children: a }),
-            n && /* @__PURE__ */ o(g, { children: n })
-          ] }),
-          /* @__PURE__ */ o(h, {})
-        ] }),
-        c && /* @__PURE__ */ o("div", { className: "mx-space-07", children: c })
-      ] }) }, i);
-    }),
-    f.map((i) => /* @__PURE__ */ o(x, { position: i }, i))
-  ] });
-}
+import { jsx as a } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-switch";
+import * as o from "react";
+import { cn as r } from "./index.es94.js";
+const s = o.forwardRef(
+  ({ className: c, ...e }, d) => /* @__PURE__ */ a(
+    t.Root,
+    {
+      className: r(
+        `group inline-flex h-space-05 w-16 shrink-0 cursor-pointer items-center rounded-full border border-control-neutral-checked  transition-colors data-[state=checked]:border-none data-[state=checked]:bg-control-primary-checked  data-[state=unchecked]:bg-transparent
+                  hover:data-[state=unchecked]:border-control-neutral-hovered hover:data-[state=checked]:bg-control-primary-hovered
+                  focus:ring-2 focus:ring-border-black focus:ring-offset-2
+                  active:data-[state=unchecked]:border-control-neutral-pressed active:data-[state=checked]:bg-control-primary-pressed
+                  disabled:cursor-not-allowed disabled:border-control-border-disabled disabled:data-[state=checked]:bg-control-disabled  `,
+        c
+      ),
+      ...e,
+      ref: d,
+      children: /* @__PURE__ */ a(
+        t.Thumb,
+        {
+          className: r(
+            `pointer-events-none relative flex h-space-04 w-space-04 items-center justify-center rounded-full bg-control-neutral-checked text-xs shadow-[0px_0px_1px_0px_rgba(34,35,35,0.20)] ring-0 transition-transform
+                    data-[state=checked]:start-space-01 data-[state=checked]:-translate-x-space-04  data-[state=unchecked]:-translate-x-space-01
+                    data-[state=checked]:bg-background-card data-[state=checked]:text-control-primary-checked
+                    group-hover:data-[state=unchecked]:bg-control-neutral-hovered 
+                    group-hover:data-[state=checked]:text-control-primary-pressed group-active:data-[state=unchecked]:bg-control-neutral-pressed
+                    group-disabled:data-[state=unchecked]:bg-control-disabled
+                    ltr:data-[state=checked]:translate-x-space-04 ltr:data-[state=unchecked]:translate-x-space-01`
+          ),
+          children: (e == null ? void 0 : e.checked) && "✓"
+        }
+      )
+    }
+  )
+);
+s.displayName = t.Root.displayName;
 export {
-  V as Toaster
+  s as Switch
 };

package/index.es78.js

@@ -1,77 +1,88 @@
-import { jsx as s } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-toggle";
-import { cva as n } from "./index.es111.js";
-import * as i from "react";
-import { cn as b } from "./index.es89.js";
-const c = n(
-  `group inline-flex items-center justify-center gap-space-01 transition-colors text-text-default data-[state=on]:font-semibold
-     disabled:text-disabled-text-default-disabled  disabled:pointer-events-none disabled:cursor-not-allowed focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-black
-     `,
-  {
-    variants: {
-      variant: {
-        default: "",
-        outline: "border border-border-neutral-primary disabled:border-disabled disabled:data-[state=on]:bg-disabled-background-disabled disabled:data-[state=on]:border-none"
-      },
-      size: {
-        default: "px-space-04 py-space-02 h-[40px] text-body-02 font-medium [&>svg]:size-space-05",
-        sm: "px-space-03 py-space-01 h-[32px] text-body-01 [&>svg]:size-[20px]",
-        xs: "px-space-03 py-space-01  h-[24px] text-caption-01 [&>svg]:size-space-04",
-        icon: "p-space-02 size-[40px] [&>svg]:size-space-05",
-        "icon-sm": "p-space-02 size-[32px] [&>svg]:size-[20px]",
-        "icon-xs": "p-space-01 size-[24px] [&>svg]:size-space-04",
-        fit: ""
-      },
-      rounded: {
-        default: "rounded",
-        full: "rounded-full"
-      },
-      colors: {
-        default: `hover:bg-button-background-primary-light-hovered
-                         hover:border-button-background-primary-light-hovered
-                         hover:text-text-primary
-                         active:text-text-primary
-                         data-[state=on]:bg-button-background-primary
-                         data-[state=on]:text-text-oncolor-primary
-                         hover:data-[state=on]:bg-button-background-primary-hovered
-                         hover:data-[state=on]:border-button-background-primary-hovered
-                         hover:data-[state=on]:text-text-oncolor-primary
-                         active:data-[state=on]:text-text-oncolor-primary
-                         active:bg-button-background-primary-light-pressed
-                         active:border-button-background-primary-light-pressed
-                         active:data-[state=on]:bg-button-background-primary-pressed`,
-        gray: `hover:bg-button-background-neutral-pressed
-                       active:bg-button-background-neutral-selected
-                       active:data-[state=on]:bg-button-background-black-pressed
-                       data-[state=on]:bg-button-background-black
-                       data-[state=on]:text-text-oncolor-primary
-                       hover:data-[state=on]:bg-button-background-black-hovered
-                       hover:data-[state=on]:text-text-oncolor-primary
-                       `,
-        oncolor: `border-border-white-40 text-text-oncolor-primary
-                         hover:bg-button-background-transparent-hovered
-                         active:bg-button-background-transparent-pressed
-                         data-[state=on]:bg-button-background-oncolor
-                         data-[state=on]:text-text-default
-                         hover:data-[state=on]:bg-button-background-oncolor-hovered
-                         active:data-[state=on]:bg-button-background-oncolor-pressed
-                         disabled:text-disabled-text-default-oncolor-disabled
-                         disabled:border-disabled-icon-default-oncolor-disabled
-                         focus:data-[state=off]:outline-border-white-40
-                         focus:-outline-offset-[3px]
-                `
-      }
+import { jsx as r } from "react/jsx-runtime";
+import * as l from "react";
+import { cva as b } from "./index.es118.js";
+import { cn as o } from "./index.es94.js";
+const n = b("border-y-table-cell-border w-full caption-bottom border-y [&_td:last-child]:border-e-0 [&_th:last-child]:border-e-0", {
+  variants: {
+    variant: {
+      default: "[&_td]:py-space-04 [&_td]:px-space-04 [&_td]:h-space-09",
+      compact: "[&_td]:py-space-02 [&_td]:px-space-04 [&_td]:h-space-08"
+    },
+    alternating: {
+      true: "[&_tr:nth-child(even)>td]:bg-table-background-row-alt"
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      colors: "default",
-      rounded: "default"
+    contained: {
+      true: ""
     }
+  },
+  defaultVariants: {
+    variant: "default",
+    alternating: !1,
+    contained: !1
   }
-), l = i.forwardRef(({ className: e, variant: a, size: o, ...r }, d) => /* @__PURE__ */ s(t.Root, { ref: d, className: b(c({ variant: a, size: o, className: e })), ...r }));
-l.displayName = t.Root.displayName;
+}), i = b("relative w-full overflow-hidden overflow-x-auto", {
+  variants: {
+    contained: {
+      true: "border-x border-x-table-cell-border rounded-1"
+    }
+  }
+}), p = l.forwardRef(({ className: a, variant: e, alternating: t, contained: d, ...s }, c) => /* @__PURE__ */ r("div", { className: o(i({ contained: d })), children: /* @__PURE__ */ r("table", { ref: c, className: o(n({ className: a, variant: e, alternating: t, contained: d })), ...s }) }));
+p.displayName = "Table";
+const m = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("thead", { ref: t, className: o("bg-table-background-header", a), ...e }));
+m.displayName = "TableHeader";
+const f = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("tbody", { ref: t, className: o("[&_tr:last-child]:border-0", a), ...e }));
+f.displayName = "TableBody";
+const h = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("tfoot", { ref: t, className: o("bg-primary text-primary-foreground", a), ...e }));
+h.displayName = "TableFooter";
+const u = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
+  "tr",
+  {
+    ref: t,
+    className: o(
+      "transition-colors data-[state=selected]:bg-table-background-row-selected-hovered hover:bg-table-background-row-hovered",
+      e.onClick && "cursor-pointer",
+      a
+    ),
+    ...e
+  }
+));
+u.displayName = "TableRow";
+const x = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
+  "th",
+  {
+    ref: t,
+    className: o(
+      "h-space-08 border-b border-e border-b-table-cell-border border-e-table-cell-border px-space-04 py-space-02 text-center align-middle text-caption-01 font-medium text-table-text-head  [&:has([role=checkbox])]:w-[53px]",
+      a
+    ),
+    ...e
+  }
+));
+x.displayName = "TableHead";
+const y = l.forwardRef(
+  ({ isLast: a, className: e, ...t }, d) => /* @__PURE__ */ r(
+    "td",
+    {
+      ref: d,
+      className: o(
+        "border-b border-b-table-cell-border text-center align-middle text-body-02 font-normal text-foreground",
+        e,
+        a && "border-b-transparent"
+      ),
+      ...t
+    }
+  )
+);
+y.displayName = "TableCell";
+const w = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("caption", { ref: t, className: o("mt-4 text-body-01 text-muted-foreground", a), ...e }));
+w.displayName = "TableCaption";
 export {
-  l as Toggle,
-  c as toggleVariants
+  p as Table,
+  f as TableBody,
+  w as TableCaption,
+  y as TableCell,
+  h as TableFooter,
+  x as TableHead,
+  m as TableHeader,
+  u as TableRow
 };

package/index.es79.js

@@ -1,39 +1,137 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-toggle-group";
+import { jsx as n } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-tabs";
+import { cva as v } from "./index.es118.js";
 import * as r from "react";
-import { toggleVariants as f } from "./index.es78.js";
-import { cn as p } from "./index.es89.js";
-import { ResponsiveScroll as g } from "./index.es49.js";
-const u = r.createContext({
+import { cn as o } from "./index.es94.js";
+import { ResponsiveScroll as m } from "./index.es54.js";
+const d = v(
+  "relative inline-flex shrink-0  items-center justify-start   transition-all disabled:pointer-events-none  data-[state=active]:font-semibold",
+  {
+    variants: {
+      container: {
+        filled: " gap-space-01  rounded-full bg-background-muted p-space-01",
+        underline: "",
+        transparent: " gap-space-01 rounded-full"
+      },
+      variant: {
+        filled: "after:hidden hover:bg-button-background-neutral-hovered data-[state=inactive]:text-text-paragraph-primary rounded-full  data-[state=active]:bg-button-background-primary text-text-oncolor-primary data-[state=active]:shadow-sm hover:data-[state=active]:bg-button-background-primary-hovered  disabled:data-[state=active]:bg-disabled-background-disabled disabled:text-disabled-text-default-disabled",
+        underline: "relative  data-[state=inactive]:text-text-paragraph-primary after:z-[1]  hover:data-[state=inactive]:bg-button-background-neutral-hovered hover:text-text-default after:absolute after:block after:bottom-[1px] after:rounded-full after:start-1/2 after:-translate-x-1/2 rtl:after:translate-x-1/2 after:h-[3px] hover:after:bg-border-black hover:data-[state=active]:after:bg-border-primary-default data-[state=active]:after:bg-border-primary-default disabled:data-[state=active]:after:bg-border-disabled disabled:text-disabled-text-default-disabled",
+        transparent: "hover:bg-card-hover hover:data-[state=inactive]:text-card-foreground rounded-full py-space-02 px-space-04  focus-visible:outline-none data-[state=active]:bg-background data-[state=active]:text-card-foreground data-[state=active]:shadow-sm hover:data-[state=active]:bg-background data-[state=active]:disabled:bg-disabled"
+      },
+      size: {
+        default: "text-body-02   after:w-[calc(100%_-_32px)] [&>svg]:size-space-04 gap-space-01",
+        sm: "text-body-01  after:w-[calc(100%_-_24px)]  [&>svg]:size-space-04 gap-space-01"
+      },
+      disabled: {
+        false: null,
+        true: null
+      },
+      underline: {
+        false: null,
+        true: null
+      },
+      orientation: {
+        vertical: "flex-col items-start",
+        horizontal: "flex-row"
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "filled",
+        size: "sm",
+        className: "px-space-03 py-space-01"
+      },
+      {
+        variant: "underline",
+        size: "default",
+        className: "px-space-04 py-space-03"
+      },
+      {
+        variant: "underline",
+        size: "sm",
+        className: "px-space-03 py-space-02"
+      },
+      {
+        variant: "filled",
+        size: "default",
+        className: "px-space-04 py-space-02"
+      },
+      {
+        container: "underline",
+        underline: !0,
+        className: "justify-start w-full after:absolute after:bottom-0 after:start-0 after:z-0 after:h-[3px] after:w-full after:rounded-full after:bg-border-neutral-primary"
+      },
+      {
+        container: "underline",
+        underline: !0,
+        orientation: "vertical",
+        className: "after:absolute after:start-0 after:top-0  after:z-0 after:w-[3px] after:h-full after:rounded-full after:bg-border-neutral-primary"
+      },
+      {
+        container: "filled",
+        orientation: "vertical",
+        className: "bg-transparent"
+      },
+      {
+        variant: "underline",
+        orientation: "vertical",
+        className: "after:start-[2px] after:top-1/2 after:-translate-y-1/2 after:w-[3px] after:bottom-0"
+      },
+      {
+        variant: "underline",
+        orientation: "vertical",
+        size: "default",
+        className: "after:h-[calc(100%_-_24px)] py-space-03"
+      },
+      {
+        variant: "underline",
+        orientation: "vertical",
+        size: "sm",
+        className: "after:h-[calc(100%_-_16px)] py-space-02"
+      }
+    ]
+  }
+), w = t.Root, c = r.createContext({
+  variant: "filled",
   size: "default",
-  variant: "default",
-  colors: "default",
-  rounded: "default"
-}), v = r.forwardRef(({ className: a, variant: s, size: i, colors: l, rounded: n, children: m, ...c }, d) => /* @__PURE__ */ o(g, { buttonClassName: "bg-background", children: /* @__PURE__ */ o(t.Root, { ref: d, className: p("flex items-center justify-center gap-space-01", a), ...c, children: /* @__PURE__ */ o(u.Provider, { value: { variant: s, size: i, colors: l, rounded: n }, children: m }) }) }));
-v.displayName = t.Root.displayName;
-const x = r.forwardRef(({ className: a, children: s, variant: i, size: l, colors: n, rounded: m, ...c }, d) => {
-  const e = r.useContext(u);
-  return /* @__PURE__ */ o(
-    t.Item,
+  orientation: "horizontal"
+}), g = r.forwardRef(({ className: i, underline: s, orientation: a, variant: e = "filled", size: l = "default", children: f, ...u }, p) => {
+  const b = r.useMemo(() => ({ variant: e, size: l, orientation: a }), [e, l, a]);
+  return /* @__PURE__ */ n(m, { className: "py-2", buttonClassName: "bg-background", margin: 16, children: /* @__PURE__ */ n(t.List, { ref: p, className: o(d({ container: e, underline: s, size: l, orientation: a }), i), ...u, children: /* @__PURE__ */ n(c.Provider, { value: b, children: f }) }) });
+});
+g.displayName = t.List.displayName;
+const x = r.forwardRef(
+  ({ className: i, ...s }, a) => {
+    const e = r.useContext(c);
+    return /* @__PURE__ */ n(
+      t.Trigger,
+      {
+        ref: a,
+        className: o(d({ variant: e.variant, orientation: e.orientation, size: e.size }), i),
+        ...s
+      }
+    );
+  }
+);
+x.displayName = t.Trigger.displayName;
+const h = r.forwardRef(
+  ({ className: i, ...s }, a) => /* @__PURE__ */ n(
+    t.Content,
     {
-      ref: d,
-      className: p(
-        f({
-          variant: e.variant || i,
-          size: e.size || l,
-          colors: e.colors || n,
-          rounded: e.rounded || m
-        }),
-        "shrink-0",
-        a
+      ref: a,
+      className: o(
+        "mt-2 ring-offset-background data-[state=inactive]:hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        i
       ),
-      ...c,
-      children: s
+      ...s
     }
-  );
-});
-x.displayName = t.Item.displayName;
+  )
+);
+h.displayName = t.Content.displayName;
 export {
-  v as ToggleGroup,
-  x as ToggleGroupItem
+  w as Tabs,
+  h as TabsContent,
+  g as TabsList,
+  x as TabsTrigger,
+  d as tabVariants
 };