mada-design-system 0.2.7 → 0.2.8

package/index.es62.js

@@ -1,14 +1,20 @@
-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.es79.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" })
-  ] })
+import { jsx as e } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-separator";
+import * as i from "react";
+import { cn as l } from "./index.es82.js";
+const s = i.forwardRef(
+  ({ className: a, orientation: r = "horizontal", decorative: t = !0, ...m }, p) => /* @__PURE__ */ e(
+    o.Root,
+    {
+      ref: p,
+      decorative: t,
+      orientation: r,
+      className: l("shrink-0 bg-border", r === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", a),
+      ...m
+    }
+  )
 );
-t.displayName = e.Root.displayName;
+s.displayName = o.Root.displayName;
 export {
-  t as Slider
+  s as Separator
 };

package/index.es63.js

@@ -1,40 +1,136 @@
-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.es79.js";
-const s = o.forwardRef(
-  ({ className: c, ...e }, d) => /* @__PURE__ */ a(
-    t.Root,
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-dialog";
+import { cva as v } from "./index.es107.js";
+import l from "react";
+import { clsx as w } from "./index.es98.js";
+import { useMediaQuery as C } from "./index.es105.js";
+import { create as S } from "./index.es161.js";
+import { cn as r } from "./index.es82.js";
+import R from "./index.es83.js";
+import { ShouldRender as z } from "./index.es14.js";
+import { Button as h } from "./index.es22.js";
+import k from "./index.es162.js";
+import T from "./index.es163.js";
+import D from "./index.es110.js";
+const b = S((t) => ({
+  isCenter: !1,
+  setIsCenter: (e) => t((o) => ({ isCenter: e ?? !o.isCenter }))
+})), Z = s.Root, $ = s.Trigger, F = s.Close, I = s.Portal, x = l.forwardRef(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ a(
+    s.Overlay,
     {
       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
+        "fixed inset-0 z-50 bg-background-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        t
       ),
       ...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-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) && "✓"
-        }
-      )
+      ref: o
     }
   )
 );
-s.displayName = t.Root.displayName;
+x.displayName = s.Overlay.displayName;
+const O = v(
+  "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-secondary 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: {
+      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: {
+      side: "right"
+    }
+  }
+), _ = l.forwardRef(
+  ({ className: t, side: e, ignoreInteractOutside: o = !1, hideOverlay: d = !1, overlayClassName: n, children: c, ...i }, y) => {
+    const g = R((m) => m.isActive), p = C("(min-width: 600px)"), { isCenter: u, setIsCenter: N } = b();
+    return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(
+      x,
+      {
+        className: w(n, {
+          "bg-transparent": d
+        }),
+        children: /* @__PURE__ */ a(
+          s.Content,
+          {
+            "aria-describedby": void 0,
+            onInteractOutside: (m) => o && m.preventDefault(),
+            onCloseAutoFocus: () => N(!1),
+            ref: y,
+            className: r(
+              O({ side: e || (p ? u ? "center" : "left" : "bottom") }),
+              { grayscale: g },
+              t
+            ),
+            "data-side": e || (p ? u ? "center" : "left" : "bottom"),
+            ...i,
+            children: c
+          }
+        )
+      }
+    ) });
+  }
+);
+_.displayName = s.Content.displayName;
+const j = ({ className: t, title: e, hideCenter: o, children: d, ...n }) => {
+  const { setIsCenter: c, isCenter: i } = b();
+  return /* @__PURE__ */ f("div", { className: r("flex flex-row items-center gap-space-02 px-space-05 py-space-04", t), ...n, children: [
+    d,
+    /* @__PURE__ */ a("h1", { className: "text-body-01 font-semibold", children: e }),
+    /* @__PURE__ */ f("div", { className: "ms-auto flex items-center gap-space-01", children: [
+      /* @__PURE__ */ a(z, { shouldRender: !o, children: /* @__PURE__ */ f(h, { variant: "text", colors: "neutral", size: "icon-sm", onClick: () => c(), className: "hidden sm:inline-flex", children: [
+        !i && /* @__PURE__ */ a(k, { size: 20, className: "-scale-100" }),
+        i && /* @__PURE__ */ a(T, { size: 20 })
+      ] }) }),
+      /* @__PURE__ */ a(F, { className: "p-space-01", "data-testid": "sheetClose", asChild: !0, children: /* @__PURE__ */ a(h, { variant: "text", colors: "neutral", size: "icon-sm", children: /* @__PURE__ */ a(D, { className: "size-[20px]" }) }) })
+    ] })
+  ] });
+};
+j.displayName = "SheetHeader";
+const A = ({ className: t, ...e }) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: r(
+      "mt-auto flex w-full flex-col-reverse bg-background-secondary p-space-04 sm:flex-row sm:justify-end sm:space-x-2 sm:p-space-05",
+      t
+    ),
+    ...e
+  }
+);
+A.displayName = "SheetFooter";
+const B = l.forwardRef(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ a(s.Title, { ref: o, className: r("text-body-01 font-semibold", t), ...e })
+);
+B.displayName = s.Title.displayName;
+const P = l.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ a(s.Description, { ref: o, className: r("text-sm text-muted-foreground", t), ...e }));
+P.displayName = s.Description.displayName;
+const V = l.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: o,
+    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",
+      "h-full overflow-auto rounded-4 border border-border-neutral-secondary bg-card p-space-04 text-foreground lg:p-space-05",
+      t
+    ),
+    ...e
+  }
+));
+V.displayName = "SheetBody";
 export {
-  s as Switch
+  Z as Sheet,
+  V as SheetBody,
+  F as SheetClose,
+  _ as SheetContent,
+  P as SheetDescription,
+  A as SheetFooter,
+  j as SheetHeader,
+  x as SheetOverlay,
+  I as SheetPortal,
+  B as SheetTitle,
+  $ as SheetTrigger
 };