mada-design-system 0.0.9 → 0.0.11

package/index.es48.js

@@ -1,92 +1,210 @@
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import * as l from "react";
-import * as e from "@radix-ui/react-select";
-import { cn as s } from "./index.es69.js";
-import m from "./index.es84.js";
-import f from "./index.es119.js";
-import u from "./index.es118.js";
-import y from "./index.es120.js";
-const B = e.Root, C = e.Group, z = e.Value, h = l.forwardRef(({ className: r, children: o, ...t }, d) => /* @__PURE__ */ c(
-  e.Trigger,
-  {
-    ref: d,
-    className: s(
-      "flex h-space-07 w-full items-center justify-between gap-space-01 whitespace-nowrap rounded-2 border border-input bg-transparent py-space-01 pe-space-02  ps-space-03 text-body-01  placeholder:text-foreground-secondary data-[placeholder]:text-foreground-secondary hover:border-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      r
-    ),
-    ...t,
-    children: [
-      o,
-      /* @__PURE__ */ a(e.Icon, { asChild: !0, children: /* @__PURE__ */ a(m, { className: "!size-[20px] shrink-0 text-foreground" }) })
-    ]
-  }
-));
-h.displayName = e.Trigger.displayName;
-const n = l.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(f, {}) }));
-n.displayName = e.ScrollUpButton.displayName;
-const i = l.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(u, {}) }));
-i.displayName = e.ScrollDownButton.displayName;
-const x = l.forwardRef(({ className: r, children: o, position: t = "popper", ...d }, p) => /* @__PURE__ */ a(e.Portal, { children: /* @__PURE__ */ c(
-  e.Content,
-  {
-    ref: p,
-    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
-    ),
-    position: t,
-    ...d,
-    children: [
-      /* @__PURE__ */ a(n, {}),
-      /* @__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(i, {})
-    ]
-  }
-) }));
-x.displayName = e.Content.displayName;
-const b = l.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 })
-);
-b.displayName = e.Label.displayName;
-const g = l.forwardRef(
-  ({ className: r, children: o, ...t }, d) => /* @__PURE__ */ c(
-    e.Item,
+import { jsx as o, jsxs as v, Fragment as P } from "react/jsx-runtime";
+import * as g from "react";
+import * as C from "recharts";
+import { cn as i } from "./index.es76.js";
+const I = { light: "", dark: ".dark" }, j = g.createContext(null);
+function $() {
+  const s = g.useContext(j);
+  if (!s)
+    throw new Error("useChart must be used within a <ChartContainer />");
+  return s;
+}
+const S = g.forwardRef(({ id: s, className: r, children: n, config: t, ...a }, f) => {
+  const l = g.useId(), c = `chart-${s || l.replace(/:/g, "")}`;
+  return /* @__PURE__ */ o(j.Provider, { value: { config: t }, children: /* @__PURE__ */ v(
+    "div",
     {
-      ref: d,
-      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",
+      "data-chart": c,
+      ref: f,
+      className: i(
+        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
         r
       ),
-      ...t,
+      ...a,
       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(y, { className: "h-space-04 w-space-04" }) }) }),
-        /* @__PURE__ */ a(e.ItemText, { children: o })
+        /* @__PURE__ */ o(E, { id: c, config: t }),
+        /* @__PURE__ */ o(C.ResponsiveContainer, { children: n })
       ]
     }
-  )
+  ) });
+});
+S.displayName = "Chart";
+const E = ({ id: s, config: r }) => {
+  const n = Object.entries(r).filter(
+    ([, t]) => t.theme || t.color
+  );
+  return n.length ? /* @__PURE__ */ o(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(I).map(
+          ([t, a]) => `
+${a} [data-chart=${s}] {
+${n.map(([f, l]) => {
+            var h;
+            const c = ((h = l.theme) == null ? void 0 : h[t]) || l.color;
+            return c ? `  --color-${f}: ${c};` : null;
+          }).join(`
+`)}
+}
+`
+        ).join(`
+`)
+      }
+    }
+  ) : null;
+}, q = C.Tooltip, K = g.forwardRef(
+  ({
+    active: s,
+    payload: r,
+    className: n,
+    indicator: t = "dot",
+    hideLabel: a = !1,
+    hideIndicator: f = !1,
+    label: l,
+    labelFormatter: c,
+    labelClassName: h,
+    formatter: u,
+    color: L,
+    nameKey: R,
+    labelKey: _
+  }, T) => {
+    const { config: p } = $(), N = g.useMemo(() => {
+      var x;
+      if (a || !(r != null && r.length))
+        return null;
+      const [e] = r, w = `${_ || (e == null ? void 0 : e.dataKey) || (e == null ? void 0 : e.name) || "value"}`, m = k(p, e, w), d = !_ && typeof l == "string" ? ((x = p[l]) == null ? void 0 : x.label) || l : m == null ? void 0 : m.label;
+      return c ? /* @__PURE__ */ o("div", { className: i("font-medium", h), children: c(d, r) }) : d ? /* @__PURE__ */ o("div", { className: i("font-medium", h), children: d }) : null;
+    }, [
+      l,
+      c,
+      r,
+      a,
+      h,
+      p,
+      _
+    ]);
+    if (!s || !(r != null && r.length))
+      return null;
+    const b = r.length === 1 && t !== "dot";
+    return /* @__PURE__ */ v(
+      "div",
+      {
+        ref: T,
+        className: i(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          n
+        ),
+        children: [
+          b ? null : N,
+          /* @__PURE__ */ o("div", { className: "grid gap-1.5", children: r.map((e, w) => {
+            const m = `${R || e.name || e.dataKey || "value"}`, d = k(p, e, m), x = L || e.payload.fill || e.color;
+            return /* @__PURE__ */ o(
+              "div",
+              {
+                className: i(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  t === "dot" && "items-center"
+                ),
+                children: u && (e == null ? void 0 : e.value) !== void 0 && e.name ? u(e.value, e.name, e, w, e.payload) : /* @__PURE__ */ v(P, { children: [
+                  d != null && d.icon ? /* @__PURE__ */ o(d.icon, {}) : !f && /* @__PURE__ */ o(
+                    "div",
+                    {
+                      className: i(
+                        "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                        {
+                          "h-2.5 w-2.5": t === "dot",
+                          "w-1": t === "line",
+                          "w-0 border-[1.5px] border-dashed bg-transparent": t === "dashed",
+                          "my-0.5": b && t === "dashed"
+                        }
+                      ),
+                      style: {
+                        "--color-bg": x,
+                        "--color-border": x
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ v(
+                    "div",
+                    {
+                      className: i(
+                        "flex flex-1 justify-between leading-none",
+                        b ? "items-end" : "items-center"
+                      ),
+                      children: [
+                        /* @__PURE__ */ v("div", { className: "grid gap-1.5", children: [
+                          b ? N : null,
+                          /* @__PURE__ */ o("span", { className: "text-muted-foreground", children: (d == null ? void 0 : d.label) || e.name })
+                        ] }),
+                        e.value && /* @__PURE__ */ o("span", { className: "font-mono font-medium tabular-nums text-foreground", children: e.value.toLocaleString() })
+                      ]
+                    }
+                  )
+                ] })
+              },
+              e.dataKey
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+K.displayName = "ChartTooltip";
+const y = C.Legend, M = g.forwardRef(
+  ({ className: s, hideIcon: r = !1, payload: n, verticalAlign: t = "bottom", nameKey: a }, f) => {
+    const { config: l } = $();
+    return n != null && n.length ? /* @__PURE__ */ o(
+      "div",
+      {
+        ref: f,
+        className: i(
+          "flex items-center justify-center gap-4",
+          t === "top" ? "pb-3" : "pt-3",
+          s
+        ),
+        children: n.map((c) => {
+          const h = `${a || c.dataKey || "value"}`, u = k(l, c, h);
+          return /* @__PURE__ */ v(
+            "div",
+            {
+              className: i(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              ),
+              children: [
+                u != null && u.icon && !r ? /* @__PURE__ */ o(u.icon, {}) : /* @__PURE__ */ o(
+                  "div",
+                  {
+                    className: "h-2 w-2 shrink-0 rounded-[2px]",
+                    style: {
+                      backgroundColor: c.color
+                    }
+                  }
+                ),
+                u == null ? void 0 : u.label
+              ]
+            },
+            c.value
+          );
+        })
+      }
+    ) : null;
+  }
 );
-g.displayName = e.Item.displayName;
-const w = l.forwardRef(({ className: r, ...o }, t) => /* @__PURE__ */ a(e.Separator, { ref: t, className: s("-mx-1 my-1 h-px bg-muted", r), ...o }));
-w.displayName = e.Separator.displayName;
+M.displayName = "ChartLegend";
+function k(s, r, n) {
+  if (typeof r != "object" || r === null)
+    return;
+  const t = "payload" in r && typeof r.payload == "object" && r.payload !== null ? r.payload : void 0;
+  let a = n;
+  return n in r && typeof r[n] == "string" ? a = r[n] : t && n in t && typeof t[n] == "string" && (a = t[n]), a in s ? s[a] : s[n];
+}
 export {
-  B as Select,
-  x as SelectContent,
-  C as SelectGroup,
-  g as SelectItem,
-  b as SelectLabel,
-  i as SelectScrollDownButton,
-  n as SelectScrollUpButton,
-  w as SelectSeparator,
-  h as SelectTrigger,
-  z as SelectValue
+  S as ChartContainer,
+  y as ChartLegend,
+  M as ChartLegendContent,
+  E as ChartStyle,
+  q as ChartTooltip,
+  K as ChartTooltipContent
 };

package/index.es49.js

@@ -1,20 +1,52 @@
-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.es69.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
+import { jsx as u } from "react/jsx-runtime";
+import { Slot as f } from "@radix-ui/react-slot";
+import { cva as p } from "./index.es102.js";
+import * as m from "react";
+import { cn as x } from "./index.es76.js";
+const v = p(
+  "inline-flex items-center gap-space-02 justify-center transition-colors focus:outline focus:outline-2 focus:outline-offset-1",
+  {
+    variants: {
+      size: {
+        default: "text-body-02 [&>svg]:size-[20px]",
+        sm: "text-body-01 [&>svg]:size-space-04"
+      },
+      colors: {
+        primary: "text-link-primary hover:text-link-primary-hovered focus:text-link-primary-focused active:text-link-primary-pressed visited:text-link-primary-visited focus:outline-border-black",
+        neutral: "text-link-neutral hover:text-link-neutral-hovered focus:text-link-neutral-focused active:text-link-neutral-pressed visited:text-link-neutral-visited focus:outline-border-black",
+        oncolor: "text-link-oncolor hover:text-link-oncolor-hovered focus:text-link-oncolor-focused active:text-link-oncolor-pressed visited:text-link-oncolor-visited focus:outline-border-white"
+      },
+      underline: {
+        hover: "underline-offset-2 hover:underline",
+        always: "underline-offset-2 underline"
+      },
+      disabled: {
+        true: "pointer-events-none cursor-not-allowed !text-disabled-text-default-disabled"
+      }
+    },
+    compoundVariants: [],
+    defaultVariants: {
+      size: "default",
+      colors: "primary",
+      underline: "hover"
     }
-  )
+  }
+), k = m.forwardRef(
+  ({ className: e, size: t, underline: o, target: r, colors: i, disabled: n = !1, asChild: l = !1, ...s }, a) => {
+    const d = l ? f : "a", c = r === "_blank" ? "noopener noreferrer" : "";
+    return /* @__PURE__ */ u(
+      d,
+      {
+        className: x("text-link-primary", v({ size: t, underline: o, disabled: n, colors: i, className: e })),
+        ref: a,
+        rel: c,
+        ...s
+      }
+    );
+  }
 );
-s.displayName = o.Root.displayName;
+k.displayName = "Link";
 export {
-  s as Separator
+  k as Link,
+  v as linkVariants
 };

package/index.es50.js

@@ -1,145 +1,25 @@
-import { jsx as s, jsxs as n } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-dialog";
-import { cva as N } from "./index.es89.js";
-import i, { useEffect as g } from "react";
-import { clsx as v } from "./index.es86.js";
-import { useMediaQuery as w } from "./index.es87.js";
-import { create as C } from "./index.es121.js";
-import { cn as r } from "./index.es69.js";
-import S from "./index.es70.js";
-import { Button as F } from "./index.es23.js";
-import z from "./index.es122.js";
-import R from "./index.es123.js";
-import k from "./index.es92.js";
-const c = C((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, h = 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
-    }
-  )
-);
-h.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",
+import { jsx as t } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-popover";
+import * as s from "react";
+import { cn as n } from "./index.es76.js";
+const f = o.Root, c = o.Trigger, v = o.Arrow, g = o.Close, m = s.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...d }, i) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
+  o.Content,
   {
-    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"
-    }
+    ref: i,
+    align: a,
+    sideOffset: r,
+    className: n(
+      "z-50 rounded-2 border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
+      e
+    ),
+    ...d
   }
-), U = i.forwardRef(
-  ({ className: a, side: e, ignoreInteractOutside: t = !1, hideOverlay: l = !1, children: m, ...d }, b) => {
-    const x = S((f) => f.isActive), p = w("(min-width: 600px)"), { isCenter: u, setIsCenter: y } = c();
-    return /* @__PURE__ */ n(T, { children: [
-      /* @__PURE__ */ s(
-        h,
-        {
-          className: v({
-            "opacity-0": l
-          })
-        }
-      ),
-      /* @__PURE__ */ s(
-        o.Content,
-        {
-          "aria-describedby": void 0,
-          onInteractOutside: (f) => t && f.preventDefault(),
-          onCloseAutoFocus: () => y(!1),
-          ref: b,
-          className: r(
-            D({ side: e || (p ? u ? "center" : "left" : "bottom") }),
-            { grayscale: x },
-            a
-          ),
-          "data-side": e || (p ? u ? "center" : "left" : "bottom"),
-          ...d,
-          children: m
-        }
-      )
-    ] });
-  }
-);
-U.displayName = o.Content.displayName;
-const O = ({ className: a, title: e, children: t, ...l }) => {
-  const { setIsCenter: m, isCenter: d } = c();
-  return /* @__PURE__ */ n("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__ */ n("div", { className: "ms-auto ", children: [
-      /* @__PURE__ */ n(F, { variant: "ghost", size: "icon-sm", onClick: () => m(), 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", children: /* @__PURE__ */ s(k, { className: "size-[20px]" }) })
-    ] })
-  ] });
-};
-O.displayName = "SheetHeader";
-const _ = ({ className: a, ...e }) => {
-  const { setIsFooterUsed: t } = c();
-  return g(() => (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 } = c();
-  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";
+) }));
+m.displayName = o.Content.displayName;
 export {
-  L as Sheet,
-  B as SheetBody,
-  I as SheetClose,
-  U as SheetContent,
-  A as SheetDescription,
-  _ as SheetFooter,
-  O as SheetHeader,
-  h as SheetOverlay,
-  T as SheetPortal,
-  j as SheetTitle,
-  X as SheetTrigger
+  f as Popover,
+  v as PopoverArrow,
+  g as PopoverClose,
+  m as PopoverContent,
+  c as PopoverTrigger
 };