mada-design-system 0.5.10 → 0.5.12

package/index.es74.js

@@ -1,103 +1,77 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-toast";
-import { cva as l } from "./index.es105.js";
-import * as r from "react";
-import { cn as i } from "./index.es85.js";
-import { Button as p } from "./index.es22.js";
-import c from "./index.es108.js";
-import m from "./index.es171.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`,
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { cva as b } from "./index.es105.js";
+import * as m from "react";
+import { cn as h } from "./index.es86.js";
+import { ShouldRender as x } from "./index.es15.js";
+import "./index.es36.js";
+import { useFormContext as v } from "./index.es37.js";
+const w = b(
+  `flex relative overflow-hidden min-h-[10rem] w-full   ps-space-04 text-body-02 overflow-hidden text-form-field-text-filled
+     aria-[disabled=true]:cursor-not-allowed aria-[disabled=true]:text-disabled-text-default-disabled
+     aria-[invalid=true]:border-form-field-border-error  focus-within:aria-[invalid=true]:after:bg-form-field-border-error focus-within:shadow-md
+     after:absolute after:bottom-0 after:w-0 after:h-[2px] ltr:after:-translate-x-1/2 rtl:after:translate-x-1/2 after:start-1/2 after:bg-form-field-border-pressed after:ease-in-out after:transition-all focus-within:after:w-full
+    `,
   {
     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"
+        default: "bg-form-field-background-darker  hover:aria-[disabled=false]:border-form-field-border-default",
+        outline: "bg-form-field-background-default aria-[disabled=false]:hover:border-form-field-border-hovered border border-form-field-border-default aria-[disabled=true]:border-border-disabled",
+        lighter: "bg-form-field-background-lighter  aria-[disabled=false]:hover:border-form-field-border-default"
       },
-      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"
+      rounded: {
+        default: "rounded",
+        full: "rounded-4"
+      },
+      colors: {
+        default: "hover:aria-[disabled=false]:border",
+        success: "border-success",
+        destructive: "border-form-field-border-error "
       }
     },
     defaultVariants: {
-      variant: "default",
-      position: "bottom"
+      variant: "outline",
+      rounded: "default",
+      colors: "default"
     }
   }
-), 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
+), g = m.forwardRef(
+  ({ className: f, variant: s, rounded: n, startAdornment: t, colors: c, endAdornment: i, maxLength: l, ...e }, u) => {
+    var o;
+    const a = v();
+    return /* @__PURE__ */ d("div", { className: "relative flex flex-col gap-space-01", children: [
+      /* @__PURE__ */ d(
+        "div",
+        {
+          className: h(w({ variant: s, rounded: n, colors: c }), f),
+          "aria-invalid": e["aria-invalid"],
+          "aria-disabled": e.disabled,
+          children: [
+            t && /* @__PURE__ */ r("div", { className: "mr-space-02 mt-space-04 h-[2rem] w-[2rem] ", children: t }),
+            /* @__PURE__ */ r(
+              "textarea",
+              {
+                className: "placeholder:text-form-field-text-placeholder w-full resize-none bg-transparent py-space-02 outline-none",
+                ref: u,
+                maxLength: l,
+                ...e
+              }
+            ),
+            i && /* @__PURE__ */ r("div", { className: "ml-space-02 h-[2rem] w-[2rem]", children: i })
+          ]
+        }
       ),
-      ...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, {})
+      /* @__PURE__ */ r(x, { shouldRender: !!(e != null && e.name) && !!a && !!l, children: /* @__PURE__ */ d("span", { className: "absolute -bottom-[20px] end-0 flex flex-row-reverse text-caption-01 text-foreground", children: [
+        /* @__PURE__ */ d("span", { className: "text-foreground-secondary", children: [
+          " ",
+          l
+        ] }),
+        "/",
+        /* @__PURE__ */ r("span", { children: (o = a == null ? void 0 : a.watch(String(e == null ? void 0 : e.name))) == null ? void 0 : o.length })
+      ] }) })
+    ] });
   }
 );
-h.displayName = "ToastIcon";
+g.displayName = "Textarea";
 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
+  g as Textarea
 };

package/index.es75.js

@@ -1,37 +1,103 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { ToastProvider as f, Toast as d, ToastIcon as p, ToastTitle as u, ToastDescription as T, ToastClose as v, ToastViewport as g } from "./index.es74.js";
-import { useToast as h } from "./index.es79.js";
-import x from "./index.es86.js";
-import w from "./index.es172.js";
-import N from "./index.es173.js";
-import n from "./index.es171.js";
-import b from "./index.es156.js";
-const y = {
-  destructive: /* @__PURE__ */ e(w, {}),
-  success: /* @__PURE__ */ e(N, {}),
-  default: /* @__PURE__ */ e(n, {}),
-  info: /* @__PURE__ */ e(n, {}),
-  warning: /* @__PURE__ */ e(b, {})
-};
-function O({ position: a = "bottom" }) {
-  const { toasts: l } = h(), m = x((s) => s.isActive);
-  return /* @__PURE__ */ r(f, { children: [
-    l.map(function({ id: s, title: i, description: t, action: c, ...o }) {
-      return /* @__PURE__ */ e(d, { ...o, className: `${m ? "grayscale" : "grayscale-0"}`, position: a, children: /* @__PURE__ */ r("div", { className: "flex grow flex-col justify-between gap-space-04", children: [
-        /* @__PURE__ */ r("div", { className: "flex w-full gap-space-03", children: [
-          /* @__PURE__ */ e(p, { icon: o.variant && y[o.variant] }),
-          /* @__PURE__ */ r("div", { className: "grid flex-1 items-center gap-space-01", children: [
-            i && /* @__PURE__ */ e(u, { children: i }),
-            t && /* @__PURE__ */ e(T, { children: t })
-          ] }),
-          /* @__PURE__ */ e(v, {})
-        ] }),
-        c && /* @__PURE__ */ e("div", { className: "mx-space-07", children: c })
-      ] }) }, s);
-    }),
-    /* @__PURE__ */ e(g, { position: a })
-  ] });
-}
+import { jsx as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-toast";
+import { cva as l } from "./index.es105.js";
+import * as r from "react";
+import { cn as i } from "./index.es86.js";
+import { Button as p } from "./index.es23.js";
+import c from "./index.es108.js";
+import m from "./index.es171.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";
 export {
-  O as Toaster
+  g as Toast,
+  x as ToastAction,
+  v as ToastClose,
+  y as ToastDescription,
+  h as ToastIcon,
+  C as ToastProvider,
+  w as ToastTitle,
+  f as ToastViewport
 };

package/index.es76.js

@@ -1,77 +1,37 @@
-import { jsx as s } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-toggle";
-import { cva as n } from "./index.es105.js";
-import * as i from "react";
-import { cn as b } from "./index.es85.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]
-                `
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      colors: "default",
-      rounded: "default"
-    }
-  }
-), 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;
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { ToastProvider as f, Toast as d, ToastIcon as p, ToastTitle as u, ToastDescription as T, ToastClose as v, ToastViewport as g } from "./index.es75.js";
+import { useToast as h } from "./index.es80.js";
+import x from "./index.es87.js";
+import w from "./index.es172.js";
+import N from "./index.es173.js";
+import n from "./index.es171.js";
+import b from "./index.es156.js";
+const y = {
+  destructive: /* @__PURE__ */ e(w, {}),
+  success: /* @__PURE__ */ e(N, {}),
+  default: /* @__PURE__ */ e(n, {}),
+  info: /* @__PURE__ */ e(n, {}),
+  warning: /* @__PURE__ */ e(b, {})
+};
+function O({ position: a = "bottom" }) {
+  const { toasts: l } = h(), m = x((s) => s.isActive);
+  return /* @__PURE__ */ r(f, { children: [
+    l.map(function({ id: s, title: i, description: t, action: c, ...o }) {
+      return /* @__PURE__ */ e(d, { ...o, className: `${m ? "grayscale" : "grayscale-0"}`, position: a, children: /* @__PURE__ */ r("div", { className: "flex grow flex-col justify-between gap-space-04", children: [
+        /* @__PURE__ */ r("div", { className: "flex w-full gap-space-03", children: [
+          /* @__PURE__ */ e(p, { icon: o.variant && y[o.variant] }),
+          /* @__PURE__ */ r("div", { className: "grid flex-1 items-center gap-space-01", children: [
+            i && /* @__PURE__ */ e(u, { children: i }),
+            t && /* @__PURE__ */ e(T, { children: t })
+          ] }),
+          /* @__PURE__ */ e(v, {})
+        ] }),
+        c && /* @__PURE__ */ e("div", { className: "mx-space-07", children: c })
+      ] }) }, s);
+    }),
+    /* @__PURE__ */ e(g, { position: a })
+  ] });
+}
 export {
-  l as Toggle,
-  c as toggleVariants
+  O as Toaster
 };

package/index.es77.js

@@ -1,39 +1,77 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-toggle-group";
-import * as r from "react";
-import { toggleVariants as f } from "./index.es76.js";
-import { cn as p } from "./index.es85.js";
-import { ResponsiveScroll as g } from "./index.es48.js";
-const u = r.createContext({
-  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,
-    {
-      ref: d,
-      className: p(
-        f({
-          variant: e.variant || i,
-          size: e.size || l,
-          colors: e.colors || n,
-          rounded: e.rounded || m
-        }),
-        "shrink-0",
-        a
-      ),
-      ...c,
-      children: s
+import { jsx as s } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-toggle";
+import { cva as n } from "./index.es105.js";
+import * as i from "react";
+import { cn as b } from "./index.es86.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]
+                `
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      colors: "default",
+      rounded: "default"
     }
-  );
-});
-x.displayName = t.Item.displayName;
+  }
+), 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;
 export {
-  v as ToggleGroup,
-  x as ToggleGroupItem
+  l as Toggle,
+  c as toggleVariants
 };

package/index.es78.js

@@ -1,23 +1,39 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-tooltip";
+import { jsx as o } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-toggle-group";
 import * as r from "react";
-import { cn as s } from "./index.es85.js";
-const l = o.Provider, f = o.Root, c = o.Trigger, m = r.forwardRef(({ className: t, sideOffset: e = 4, ...i }, d) => /* @__PURE__ */ a(
-  o.Content,
-  {
-    ref: d,
-    sideOffset: e,
-    className: s(
-      "z-[10000] overflow-hidden rounded-md border  bg-popover px-3 py-1.5 text-body-01 text-popover-foreground shadow-md  animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      t
-    ),
-    ...i
-  }
-));
-m.displayName = o.Content.displayName;
+import { toggleVariants as f } from "./index.es77.js";
+import { cn as p } from "./index.es86.js";
+import { ResponsiveScroll as g } from "./index.es49.js";
+const u = r.createContext({
+  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,
+    {
+      ref: d,
+      className: p(
+        f({
+          variant: e.variant || i,
+          size: e.size || l,
+          colors: e.colors || n,
+          rounded: e.rounded || m
+        }),
+        "shrink-0",
+        a
+      ),
+      ...c,
+      children: s
+    }
+  );
+});
+x.displayName = t.Item.displayName;
 export {
-  f as Tooltip,
-  m as TooltipContent,
-  l as TooltipProvider,
-  c as TooltipTrigger
+  v as ToggleGroup,
+  x as ToggleGroupItem
 };