mada-design-system 0.2.7 → 0.3.0

package/index.es58.js

@@ -1,20 +1,55 @@
-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.es79.js";
-const s = i.forwardRef(
-  ({ className: a, orientation: r = "horizontal", decorative: t = !0, ...m }, p) => /* @__PURE__ */ e(
-    o.Root,
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-radio-group";
+import * as a from "react";
+import { cva as h } from "./index.es103.js";
+import { cn as s } from "./index.es82.js";
+import m from "./index.es127.js";
+const u = h(
+  "flex aspect-square   rounded-full enabled:active:data-[state=unchecked]:bg-control-pressed border border-control-border enabled:hover:bg-control-ripple-effect focus:ring-2 focus:ring-border-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:border-border-disabled disabled:data-[state=checked]:text-control-disabled",
+  {
+    variants: {
+      colors: {
+        primary: `data-[state=checked]:border-control-primary-checked data-[state=checked]:text-control-primary-checked
+                enabled:hover:data-[state=checked]:border-control-primary-hovered enabled:hover:data-[state=checked]:text-control-primary-hovered
+                enabled:active:data-[state=checked]:border-control-primary-pressed active:data-[state=checked]:text-control-primary-pressed
+                `,
+        neutral: `data-[state=checked]:border-control-neutral-checked data-[state=checked]:text-control-neutral-checked
+                enabled:hover:data-[state=checked]:border-control-neutral-hovered enabled:hover:data-[state=checked]:text-control-neutral-hovered
+                enabled:active:data-[state=checked]:border-control-neutral-pressed enabled:active:data-[state=checked]:text-control-neutral-pressed
+                `
+      },
+      size: {
+        default: "h-space-05 w-space-05 [&>span>svg]:size-space-04",
+        sm: "h-[20px] w-[20px] [&>span>svg]:size-[14px]",
+        xs: "h-space-04 w-space-04 [&>span>svg]:size-space-03"
+      }
+    },
+    defaultVariants: {
+      colors: "primary",
+      size: "default"
+    }
+  }
+), l = a.createContext({
+  colors: "primary"
+}), b = a.forwardRef(({ className: o, colors: c, size: d, children: t, ...n }, i) => /* @__PURE__ */ e(r.Root, { className: s("grid gap-2", o), ...n, ref: i, children: /* @__PURE__ */ p(l.Provider, { value: { colors: c, size: d }, children: [
+  " ",
+  t
+] }) }));
+b.displayName = r.Root.displayName;
+const f = a.forwardRef(({ className: o, ...c }, d) => {
+  const t = a.useContext(l);
+  return /* @__PURE__ */ e("div", { className: "flex  items-center justify-center", children: /* @__PURE__ */ e(
+    r.Item,
     {
-      ref: p,
-      decorative: t,
-      orientation: r,
-      className: l("shrink-0 bg-border", r === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", a),
-      ...m
+      ref: d,
+      className: s(u({ colors: t.colors, size: t.size, className: o })),
+      ...c,
+      children: /* @__PURE__ */ e(r.Indicator, { className: "flex h-full w-full items-center justify-center rounded-full", children: /* @__PURE__ */ e(m, {}) })
     }
-  )
-);
-s.displayName = o.Root.displayName;
+  ) });
+});
+f.displayName = r.Item.displayName;
 export {
-  s as Separator
+  b as RadioGroup,
+  f as RadioGroupItem
 };

package/index.es59.js

@@ -1,136 +1,30 @@
-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.es99.js";
-import l from "react";
-import { clsx as w } from "./index.es96.js";
-import { useMediaQuery as C } from "./index.es97.js";
-import { create as S } from "./index.es154.js";
-import { cn as r } from "./index.es79.js";
-import R from "./index.es80.js";
-import { ShouldRender as z } from "./index.es14.js";
-import { Button as h } from "./index.es22.js";
-import k from "./index.es155.js";
-import T from "./index.es156.js";
-import D from "./index.es102.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(
-        "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: o
-    }
-  )
-);
-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",
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-scroll-area";
+import * as t from "react";
+import { cn as s } from "./index.es82.js";
+const m = t.forwardRef(({ className: o, children: l, ...a }, c) => /* @__PURE__ */ i(r.Root, { ref: c, className: s("relative overflow-hidden", o), ...a, children: [
+  /* @__PURE__ */ e(r.Viewport, { className: "h-full w-full rounded-[inherit]", children: l }),
+  /* @__PURE__ */ e(d, {}),
+  /* @__PURE__ */ e(r.Corner, {})
+] }));
+m.displayName = r.Root.displayName;
+const d = t.forwardRef(({ className: o, orientation: l = "vertical", ...a }, c) => /* @__PURE__ */ e(
+  r.ScrollAreaScrollbar,
   {
-    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
+    ref: c,
+    orientation: l,
+    className: s(
+      "flex touch-none select-none transition-colors",
+      l === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      l === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      o
     ),
-    ...e
+    ...a,
+    children: /* @__PURE__ */ e(r.ScrollAreaThumb, { className: s("relative rounded-full bg-border", l === "vertical" && "flex-1") })
   }
 ));
-V.displayName = "SheetBody";
+d.displayName = r.ScrollAreaScrollbar.displayName;
 export {
-  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
+  m as ScrollArea,
+  d as ScrollBar
 };