mada-design-system 0.0.9 → 0.0.11

package/index.es55.js

@@ -1,52 +1,144 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as t from "react";
-import { cn as l } from "./index.es69.js";
-const s = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ r("table", { ref: o, className: l("w-full caption-bottom text-body-01", e), ...a }) }));
-s.displayName = "Table";
-const b = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r("thead", { ref: o, className: l("", e), ...a }));
-b.displayName = "TableHeader";
-const c = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r("tbody", { ref: o, className: l("[&_tr:last-child]:border-0", e), ...a }));
-c.displayName = "TableBody";
-const n = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r("tfoot", { ref: o, className: l("bg-primary  text-primary-foreground", e), ...a }));
-n.displayName = "TableFooter";
-const m = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r("tr", { ref: o, className: l("transition-colors data-[state=selected]:bg-background-brand hover:bg-card-hover", e), ...a }));
-m.displayName = "TableRow";
-const f = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
-  "th",
+import { jsx as a, jsxs as n } from "react/jsx-runtime";
+import * as d from "react";
+import * as e from "@radix-ui/react-select";
+import { cva as u } from "./index.es102.js";
+import { cn as s } from "./index.es76.js";
+import b from "./index.es98.js";
+import h from "./index.es151.js";
+import x from "./index.es128.js";
+import g from "./index.es152.js";
+const w = u(
+  ` placeholder:text-form-field-text-placeholder data-[placeholder]:text-form-field-text-placeholder  text-form-field-text-filled after:bg-form-field-border-pressed group relative
+    flex w-full items-center justify-between gap-space-01 whitespace-nowrap overflow-hidden min-w-fit
+    aria-[invalid=true]:border-form-field-border-error  data-[state=open]:aria-[invalid=true]:after:bg-form-field-border-error
+    ps-space-03 pe-space-02  after:absolute after:bottom-0 after:start-1/2 after:h-[2px]  focus-visible:after:w-full focus:outline-none focus:shadow-md
+    after:w-0 after:transition-all after:ease-in-out data-[state=open]:after:w-full  disabled:cursor-not-allowed disabled:border-border-disabled disabled:text-disabled-text-default-disabled ltr:after:-translate-x-1/2 rtl:after:translate-x-1/2 [&>span]:line-clamp-1
+    `,
   {
-    ref: o,
-    className: l(
-      "bg-background px-space-03 py-space-04 text-center align-middle text-body-01 font-normal text-foreground-secondary [&:has([role=checkbox])]:pr-0",
-      e
+    variants: {
+      variant: {
+        default: "bg-form-field-background-darker  enabled:hover:border-form-field-border-default",
+        outline: "bg-form-field-background-default enabled:hover:border-form-field-border-hovered border border-form-field-border-default disabled:border-border-disabled",
+        lighter: "bg-form-field-background-lighter  enabled:hover:border-form-field-border-default"
+      },
+      rounded: {
+        default: "rounded",
+        full: "rounded-4"
+      },
+      colors: {
+        default: "hover:enabled:border",
+        success: "border-success",
+        destructive: "border-form-field-border-error "
+      },
+      size: {
+        default: "py-space-02 text-body-02 h-[40px]",
+        sm: "py-space-01 text-body-01 h-[32px]"
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      rounded: "default",
+      colors: "default",
+      size: "default"
+    }
+  }
+), c = d.createContext({
+  variant: "outline",
+  rounded: "default",
+  colors: "default",
+  size: "default"
+}), D = ({
+  variant: r,
+  size: o,
+  colors: t,
+  rounded: i,
+  children: l,
+  ...m
+}) => /* @__PURE__ */ a(e.Root, { ...m, children: /* @__PURE__ */ a(c.Provider, { value: { variant: r, size: o, colors: t, rounded: i }, children: l }) }), T = e.Group, U = e.Value, y = d.forwardRef(({ className: r, children: o, ...t }, i) => {
+  const l = d.useContext(c);
+  return /* @__PURE__ */ n(
+    e.Trigger,
+    {
+      ref: i,
+      "aria-label": t.placeholder || "select",
+      className: s(
+        w({ variant: l.variant, size: l.size, colors: l.colors, rounded: l.rounded, className: r })
+      ),
+      ...t,
+      children: [
+        o,
+        /* @__PURE__ */ a(e.Icon, { asChild: !0, children: /* @__PURE__ */ a(b, { className: "!size-[20px] shrink-0  transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180" }) })
+      ]
+    }
+  );
+});
+y.displayName = e.Trigger.displayName;
+const f = d.forwardRef(({ className: r, ...o }, t) => /* @__PURE__ */ a(e.ScrollUpButton, { ref: t, className: s("flex cursor-default items-center justify-center py-1", r), ...o, children: /* @__PURE__ */ a(h, {}) }));
+f.displayName = e.ScrollUpButton.displayName;
+const p = d.forwardRef(({ className: r, ...o }, t) => /* @__PURE__ */ a(e.ScrollDownButton, { ref: t, className: s("flex cursor-default items-center justify-center py-1", r), ...o, children: /* @__PURE__ */ a(x, {}) }));
+p.displayName = e.ScrollDownButton.displayName;
+const v = d.forwardRef(({ className: r, children: o, position: t = "popper", ...i }, l) => /* @__PURE__ */ a(e.Portal, { children: /* @__PURE__ */ n(
+  e.Content,
+  {
+    ref: l,
+    className: s(
+      "relative z-50 max-h-96  overflow-hidden rounded-2 border bg-card p-space-02 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      r
     ),
-    ...a
+    position: t,
+    ...i,
+    children: [
+      /* @__PURE__ */ a(f, {}),
+      /* @__PURE__ */ a(
+        e.Viewport,
+        {
+          className: s(
+            "p-1",
+            t === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[calc(var(--radix-select-trigger-width)_-_16px)]"
+          ),
+          children: o
+        }
+      ),
+      /* @__PURE__ */ a(p, {})
+    ]
   }
-));
-f.displayName = "TableHead";
-const p = t.forwardRef(
-  ({ isLast: e, className: a, ...o }, d) => /* @__PURE__ */ r(
-    "td",
+) }));
+v.displayName = e.Content.displayName;
+const N = d.forwardRef(
+  ({ className: r, ...o }, t) => /* @__PURE__ */ a(e.Label, { ref: t, className: s("py-1.5 pl-8 pr-2 text-xs font-bold ", r), ...o })
+);
+N.displayName = e.Label.displayName;
+const S = d.forwardRef(
+  ({ className: r, children: o, ...t }, i) => /* @__PURE__ */ n(
+    e.Item,
     {
-      ref: d,
-      className: l(
-        "border-b border-border p-space-03 py-space-04 text-center align-middle text-body-01 font-normal text-foreground [&:has([role=checkbox])]:pr-0",
-        a,
-        e && "border-b-transparent"
+      ref: i,
+      className: s(
+        "relative flex w-full cursor-default select-none items-center rounded-1 py-space-02 pe-space-02 ps-space-05 text-sm leading-[2.2rem] outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-card-hover focus:bg-accent focus:text-accent-foreground",
+        r
       ),
-      ...o
+      ...t,
+      children: [
+        /* @__PURE__ */ a("span", { className: "absolute start-space-01 flex h-space-04 w-space-04 items-baseline justify-center", children: /* @__PURE__ */ a(e.ItemIndicator, { children: /* @__PURE__ */ a(g, { className: "h-space-04 w-space-04" }) }) }),
+        /* @__PURE__ */ a(e.ItemText, { children: o })
+      ]
     }
   )
 );
-p.displayName = "TableCell";
-const i = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r("caption", { ref: o, className: l("mt-4 text-body-01 text-muted-foreground", e), ...a }));
-i.displayName = "TableCaption";
+S.displayName = e.Item.displayName;
+const z = d.forwardRef(({ className: r, ...o }, t) => /* @__PURE__ */ a(e.Separator, { ref: t, className: s("-mx-1 my-1 h-px bg-muted", r), ...o }));
+z.displayName = e.Separator.displayName;
 export {
-  s as Table,
-  c as TableBody,
-  i as TableCaption,
-  p as TableCell,
-  n as TableFooter,
-  f as TableHead,
-  b as TableHeader,
-  m as TableRow
+  D as Select,
+  v as SelectContent,
+  T as SelectGroup,
+  S as SelectItem,
+  N as SelectLabel,
+  p as SelectScrollDownButton,
+  f as SelectScrollUpButton,
+  z as SelectSeparator,
+  y as SelectTrigger,
+  U as SelectValue,
+  w as selectVariants
 };

package/index.es56.js

@@ -1,56 +1,20 @@
-import { jsx as s } from "react/jsx-runtime";
-import * as e from "@radix-ui/react-tabs";
-import { cva as b } from "./index.es89.js";
+import { jsx as e } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-separator";
 import * as i from "react";
-import { cn as n } from "./index.es69.js";
-const d = b(
-  `inline-flex items-center justify-center whitespace-nowrap text-body-02
-text-foreground-secondary ring-offset-background transition-all hover:data-[state=inactive]:text-primary-dark focus-visible:ring-2 focus-visible:ring-ring
-focus-visible:ring-offset-2 disabled:pointer-events-none disabled:text-disabled
-data-[state=active]:font-semibold`,
-  {
-    variants: {
-      container: {
-        filled: "inline-flex  items-center justify-center gap-space-01  rounded-full border border-input bg-muted p-space-01",
-        underline: "",
-        transparent: "inline-flex items-center justify-center gap-space-01 rounded-full"
-      },
-      variant: {
-        filled: "hover:bg-card-hover rounded-full py-space-01 px-space-04 focus-visible:outline-none data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm hover:data-[state=active]:bg-primary-dark data-[state=active]:disabled:bg-disabled",
-        underline: "hover:bg-card-hover py-space-02 px-space-04 data-[state=active]:text-primary border-b-2 border-b-transparent data-[state=active]:border-b-primary data-[state=active]:hover:border-b-primary-dark data-[state=active]:hover:text-primary-dark data-[state=active]:disabled:border-b-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"
-      }
-    }
-  }
-), y = e.Root, c = i.createContext({
-  variant: "filled"
-}), v = i.forwardRef(({ className: t, variant: a = "filled", children: r, ...o }, l) => /* @__PURE__ */ s(e.List, { ref: l, className: n(d({ container: a }), t), ...o, children: /* @__PURE__ */ s(c.Provider, { value: { variant: a }, children: r }) }));
-v.displayName = e.List.displayName;
-const f = i.forwardRef(
-  ({ className: t, ...a }, r) => {
-    const o = i.useContext(c);
-    return /* @__PURE__ */ s(e.Trigger, { ref: r, className: n(d({ variant: o.variant }), t), ...a });
-  }
-);
-f.displayName = e.Trigger.displayName;
-const p = i.forwardRef(
-  ({ className: t, ...a }, r) => /* @__PURE__ */ s(
-    e.Content,
+import { cn as l } from "./index.es76.js";
+const s = i.forwardRef(
+  ({ className: a, orientation: r = "horizontal", decorative: t = !0, ...m }, p) => /* @__PURE__ */ e(
+    o.Root,
     {
-      ref: r,
-      className: n(
-        "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",
-        t
-      ),
-      ...a
+      ref: p,
+      decorative: t,
+      orientation: r,
+      className: l("shrink-0 bg-border", r === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", a),
+      ...m
     }
   )
 );
-p.displayName = e.Content.displayName;
+s.displayName = o.Root.displayName;
 export {
-  y as Tabs,
-  p as TabsContent,
-  v as TabsList,
-  f as TabsTrigger,
-  d as tabVariants
+  s as Separator
 };

package/index.es57.js

@@ -1,64 +1,143 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { cva as f } from "./index.es89.js";
-import * as x from "react";
-import { cn as v } from "./index.es69.js";
-import { ShouldRender as h } from "./index.es14.js";
-import "./index.es34.js";
-import { useFormContext as b } from "./index.es35.js";
-const g = f(
-  "flex relative min-h-[10rem] w-full border ps-space-04 text-base hover:border-foreground   disabled:cursor-not-allowed disabled:text-disabled aria-[invalid=true]:border-error",
+import { jsx as s, jsxs as f } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-dialog";
+import { cva as N } from "./index.es102.js";
+import i, { useEffect as v } from "react";
+import { clsx as w } from "./index.es92.js";
+import { useMediaQuery as C } from "./index.es100.js";
+import { create as S } from "./index.es153.js";
+import { cn as r } from "./index.es76.js";
+import F from "./index.es77.js";
+import { Button as h } from "./index.es22.js";
+import z from "./index.es154.js";
+import R from "./index.es155.js";
+import k from "./index.es105.js";
+const n = S((a) => ({
+  isCenter: !1,
+  isFooterUsed: !1,
+  setIsCenter: (e) => a((t) => ({ isCenter: e ?? !t.isCenter })),
+  setIsFooterUsed: (e) => a(() => ({ isFooterUsed: e }))
+})), L = o.Root, X = o.Trigger, I = o.Close, T = o.Portal, b = i.forwardRef(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ s(
+    o.Overlay,
+    {
+      className: r(
+        "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        a
+      ),
+      ...e,
+      ref: t
+    }
+  )
+);
+b.displayName = o.Overlay.displayName;
+const D = N(
+  "flex flex-col data-[side=bottom]:max-md:h-[93%] sm:max-w-[60rem] md:rounded-tl-none md:rounded-tr-none fixed z-50 bg-background overflow-y-auto p-space-00 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
-      variant: {
-        default: "bg-muted",
-        outline: "bg-transparent"
-      },
-      rounded: {
-        default: "rounded-2",
-        full: "rounded-4"
-      },
-      colors: {
-        default: "border-input",
-        success: "border-success",
-        destructive: "border-error"
+      side: {
+        center: "top-space-03 md:!rounded-4 inset-1/2 w-3/4 h-[calc(100%_-_24px)] ltr:-translate-x-1/2 rtl:translate-x-1/2",
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 h-full border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r ltr:data-[state=closed]:slide-out-to-right data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left ltr:data-[state=open]:slide-in-from-right ",
+        right: "inset-y-0 right-0 h-full w-3/4  border-l ltr:data-[state=closed]:slide-out-to-left data-[state=closed]:slide-out-to-right ltr:data-[state=open]:slide-in-from-left data-[state=open]:slide-in-from-right "
       }
     },
     defaultVariants: {
-      variant: "default",
-      rounded: "default",
-      colors: "default"
+      side: "right"
     }
   }
-), w = x.forwardRef(
-  ({ className: o, variant: s, rounded: c, startAdornment: l, colors: u, endAdornment: n, maxLength: d, ...e }, m) => {
-    var i;
-    const a = b();
-    return /* @__PURE__ */ t("div", { className: "flex flex-col gap-space-01", children: [
-      /* @__PURE__ */ t("div", { className: v(g({ variant: s, rounded: c, colors: u }), o), "aria-invalid": e["aria-invalid"], children: [
-        l && /* @__PURE__ */ r("div", { className: "mr-space-02 mt-space-04 h-[2rem] w-[2rem] ", children: l }),
-        /* @__PURE__ */ r(
-          "textarea",
+), U = i.forwardRef(
+  ({ className: a, side: e, ignoreInteractOutside: t = !1, hideOverlay: l = !1, children: c, ...d }, x) => {
+    const y = F((m) => m.isActive), p = C("(min-width: 600px)"), { isCenter: u, setIsCenter: g } = n();
+    return /* @__PURE__ */ s(T, { children: /* @__PURE__ */ s(
+      b,
+      {
+        className: w({
+          "bg-transparent": l
+        }),
+        children: /* @__PURE__ */ s(
+          o.Content,
           {
-            className: "w-full resize-none bg-transparent py-space-03 outline-none placeholder:text-foreground-secondary",
-            ref: m,
-            maxLength: d,
-            ...e
+            "aria-describedby": void 0,
+            onInteractOutside: (m) => t && m.preventDefault(),
+            onCloseAutoFocus: () => g(!1),
+            ref: x,
+            className: r(
+              D({ side: e || (p ? u ? "center" : "left" : "bottom") }),
+              { grayscale: y },
+              a
+            ),
+            "data-side": e || (p ? u ? "center" : "left" : "bottom"),
+            ...d,
+            children: c
           }
-        ),
-        n && /* @__PURE__ */ r("div", { className: "ml-space-02 h-[2rem] w-[2rem]", children: n })
-      ] }),
-      /* @__PURE__ */ r(h, { shouldRender: !!(e != null && e.name) && !!a && !!d, children: /* @__PURE__ */ t("span", { className: "flex flex-row-reverse text-caption-01 text-foreground", children: [
-        /* @__PURE__ */ t("span", { className: "text-foreground-secondary", children: [
-          " ",
-          d
-        ] }),
-        "/",
-        /* @__PURE__ */ r("span", { children: (i = a == null ? void 0 : a.watch(String(e == null ? void 0 : e.name))) == null ? void 0 : i.length })
-      ] }) })
-    ] });
+        )
+      }
+    ) });
   }
 );
-w.displayName = "Textarea";
+U.displayName = o.Content.displayName;
+const O = ({ className: a, title: e, children: t, ...l }) => {
+  const { setIsCenter: c, isCenter: d } = n();
+  return /* @__PURE__ */ f("div", { className: r("flex flex-row items-center gap-space-02 px-space-05 py-space-04", a), ...l, children: [
+    t,
+    /* @__PURE__ */ s("h1", { className: "text-body-01 font-semibold", children: e }),
+    /* @__PURE__ */ f("div", { className: "ms-auto flex items-center gap-space-01 ", children: [
+      /* @__PURE__ */ f(h, { variant: "text", colors: "neutral", size: "icon-sm", onClick: () => c(), className: "hidden sm:inline-flex", children: [
+        !d && /* @__PURE__ */ s(z, { size: 20, className: "-scale-100" }),
+        d && /* @__PURE__ */ s(R, { size: 20 })
+      ] }),
+      /* @__PURE__ */ s(I, { className: "p-space-01", "data-testid": "sheetClose", asChild: !0, children: /* @__PURE__ */ s(h, { variant: "text", colors: "neutral", size: "icon-sm", children: /* @__PURE__ */ s(k, { className: "size-[20px]" }) }) })
+    ] })
+  ] });
+};
+O.displayName = "SheetHeader";
+const _ = ({ className: a, ...e }) => {
+  const { setIsFooterUsed: t } = n();
+  return v(() => (t(!0), () => t(!1)), [t]), /* @__PURE__ */ s(
+    "div",
+    {
+      className: r(
+        "absolute bottom-0 left-0 z-20 mt-auto flex w-full flex-col-reverse bg-background p-space-04 sm:flex-row sm:justify-end sm:space-x-2 sm:p-space-05",
+        a
+      ),
+      ...e
+    }
+  );
+};
+_.displayName = "SheetFooter";
+const j = i.forwardRef(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ s(o.Title, { ref: t, className: r("text-body-01 font-semibold", a), ...e })
+);
+j.displayName = o.Title.displayName;
+const A = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ s(o.Description, { ref: t, className: r("text-sm text-muted-foreground", a), ...e }));
+A.displayName = o.Description.displayName;
+const B = i.forwardRef(({ className: a, ...e }, t) => {
+  const { isFooterUsed: l } = n();
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: t,
+      className: r(
+        "scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-2.5 scrollbar-h-2.5 scrollbar scrollbar-track-transparent scrollbar-thumb-border",
+        `${l ? "mb-space-11" : ""} h-full overflow-auto rounded-4 bg-card p-space-05 text-foreground`,
+        a
+      ),
+      ...e
+    }
+  );
+});
+B.displayName = "SheetBody";
 export {
-  w as Textarea
+  L as Sheet,
+  B as SheetBody,
+  I as SheetClose,
+  U as SheetContent,
+  A as SheetDescription,
+  _ as SheetFooter,
+  O as SheetHeader,
+  b as SheetOverlay,
+  T as SheetPortal,
+  j as SheetTitle,
+  X as SheetTrigger
 };