mada-design-system 0.9.1 → 1.0.1

package/index.es60.js

@@ -1,37 +1,41 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as e from "@radix-ui/react-popover";
-import { cn as d } from "./index.es89.js";
-function s({ ...o }) {
-  return /* @__PURE__ */ t(e.Root, { "data-slot": "popover", ...o });
-}
-function l({ ...o }) {
-  return /* @__PURE__ */ t(e.Trigger, { "data-slot": "popover-trigger", ...o });
-}
-function m({ className: o, align: r = "center", sideOffset: a = 4, ...n }) {
-  return /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ t(
-    e.Content,
-    {
-      "data-slot": "popover-content",
-      align: r,
-      sideOffset: a,
-      className: d(
-        "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",
-        o
-      ),
-      ...n
+import { jsxs as s, Fragment as f, jsx as t } from "react/jsx-runtime";
+import { cva as y } from "./index.es113.js";
+import { forwardRef as g } from "react";
+import { cn as c } from "./index.es94.js";
+/* empty css          */
+import { ShouldRender as p } from "./index.es19.js";
+const u = y("text-body-02", {
+  variants: {
+    variant: {
+      ordered: "list-decimal rtl:[&>ol]:list-[arabic-letters] [&>ol]:list-[lower-alpha] [&>ol]:list-inside ",
+      unordered: "list-disc [&>ul]:list-[circle] [&>ul]:list-inside ",
+      "with-icon": "list-none [&>li>svg]:size-space-04  [&>li]:gap-space-02 [&>ul]:list-inside [&>li]:flex [&>li]:items-center"
+    },
+    colors: {
+      primary: "text-text-primary",
+      neutral: "text-text-default",
+      onColor: "text-text-oncolor-primary"
     }
-  ) });
-}
-function c({ ...o }) {
-  return /* @__PURE__ */ t(e.Close, { "data-slot": "popover-close", ...o });
-}
-function f({ ...o }) {
-  return /* @__PURE__ */ t(e.Anchor, { "data-slot": "popover-anchor", ...o });
-}
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    variant: "ordered",
+    colors: "primary"
+  }
+}), L = ({ children: o, variant: l, colors: e, items: r, icon: i, className: n, ...a }) => {
+  const d = l === "ordered" ? "ol" : "ul";
+  return /* @__PURE__ */ s(f, { children: [
+    /* @__PURE__ */ t(p, { shouldRender: !!(r != null && r.length), children: /* @__PURE__ */ t(d, { className: c(u({ variant: l, colors: e, className: n })), ...a, children: r == null ? void 0 : r.map((m, x) => /* @__PURE__ */ s(h, { children: [
+      !!i && l === "with-icon" && i,
+      m
+    ] }, x)) }) }),
+    /* @__PURE__ */ t(p, { shouldRender: !(r != null && r.length), children: /* @__PURE__ */ t(d, { className: c(u({ variant: l, colors: e, className: n })), ...a, children: o }) })
+  ] });
+};
+L.displayName = "List";
+const h = g(({ children: o, ...l }, e) => /* @__PURE__ */ t("li", { ref: e, ...l, className: "", children: o }));
+h.displayName = "ListItem";
 export {
-  s as Popover,
-  f as PopoverAnchor,
-  c as PopoverClose,
-  m as PopoverContent,
-  l as PopoverTrigger
+  L as List,
+  h as ListItem
 };

package/index.es61.js

@@ -1,40 +1,62 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import * as e from "@radix-ui/react-progress";
-import * as n from "react";
-import { cn as s } from "./index.es89.js";
-const c = n.forwardRef(
-  ({ className: d, value: a, colors: o = "bg-primary", rounded: t, icon: i, ...l }, m) => /* @__PURE__ */ f("div", { className: "relative w-full", children: [
-    /* @__PURE__ */ r(
-      e.Root,
-      {
-        ref: m,
-        "aria-label": "progress",
-        className: s("relative h-space-02 w-full overflow-hidden bg-background-secondary", t && "rounded-full", d),
-        ...l,
-        children: /* @__PURE__ */ r(
-          e.Indicator,
+import { jsx as c, jsxs as p } from "react/jsx-runtime";
+import { useState as n } from "react";
+/* empty css          */
+import d from "./index.es174.js";
+import y from "./index.es175.js";
+import { Stack as x } from "./index.es47.js";
+import { cn as m } from "./index.es94.js";
+function B({ max: e = 5, onChange: a, value: l = 0, className: t, ...r }) {
+  const [s, i] = n(0);
+  return /* @__PURE__ */ c(x, { gap: "none", className: m(t), children: Array.from({ length: e }, (u, o) => /* @__PURE__ */ c(
+    g,
+    {
+      star: o + 1,
+      rating: l,
+      hoverRating: s,
+      onHover: (f) => !r.readOnly && i(f),
+      onClick: (f) => !r.readOnly && (a == null ? void 0 : a(f)),
+      ...r
+    },
+    o
+  )) });
+}
+function g({ star: e, rating: a, hoverRating: l, onHover: t, onClick: r, readOnly: s, variant: i = "default", size: u = "default" }) {
+  return /* @__PURE__ */ p(
+    "button",
+    {
+      onMouseEnter: () => t == null ? void 0 : t(e),
+      onMouseLeave: () => t == null ? void 0 : t(0),
+      onClick: () => r == null ? void 0 : r(e),
+      className: m("group relative flex   items-center justify-center", {
+        "size-space-08": u === "default",
+        "size-space-06": u === "sm",
+        "size-space-05": u === "xs",
+        "cursor-default": s
+      }),
+      children: [
+        /* @__PURE__ */ c(
+          d,
           {
-            className: s("h-full w-full flex-1 transition-all", t && "rounded-full", o),
-            style: {
-              transform: (l == null ? void 0 : l.dir) === "rtl" ? `translateX(${100 - (a || 0)}%)` : `translateX(-${100 - (a || 0)}%)`
-            }
+            className: m("absolute size-full   shrink-0 ", {
+              "group-hover:opacity-0": !s
+            })
+          }
+        ),
+        /* @__PURE__ */ c(
+          y,
+          {
+            className: m("absolute   size-full   shrink-0   opacity-0 transition-all", {
+              "opacity-100": e <= (l || a),
+              "group-hover:opacity-100": !s,
+              "text-secondary": i === "default",
+              "text-primary": i === "brand"
+            })
           }
         )
-      }
-    ),
-    !!i && /* @__PURE__ */ r(
-      "div",
-      {
-        className: "absolute top-1/2 -translate-y-1/2 duration-200",
-        style: {
-          [(l == null ? void 0 : l.dir) === "rtl" ? "right" : "left"]: `calc(${a}% + -12px)`
-        },
-        children: i
-      }
-    )
-  ] })
-);
-c.displayName = e.Root.displayName;
+      ]
+    }
+  );
+}
 export {
-  c as Progress
+  B as Rating
 };

package/index.es62.js

@@ -1,132 +1,91 @@
-import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { cva as c } from "./index.es111.js";
-import $ from "react";
-import { cn as s } from "./index.es89.js";
-import { strings as N } from "./index.es101.js";
-const w = c("relative flex gap-space-02 items-center", {
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import * as r from "react";
+import { cn as c } from "./index.es94.js";
+import { cva as v } from "./index.es113.js";
+import { ShouldRender as x } from "./index.es19.js";
+import h from "./index.es146.js";
+const f = v("group relative flex shrink-0 items-start justify-start ", {
   variants: {
-    colors: {
-      primary: "[&_.bg-circle]:stroke-background-neutral-200 [&_.progress-circle]:stroke-background-primary",
-      neutral: "[&_.bg-circle]:stroke-background-neutral-200 [&_.progress-circle]:stroke-background-black"
+    variant: {
+      circle: "peer border border-border-primary-default text-text-primary items-center justify-center rounded-full w-space-06 h-space-06 text-body-02 font-medium data-[state=upcoming]:border-border-neutral-primary data-[state=upcoming]:text-border-neutral-primary data-[state=complete]:bg-background-primary  data-[state=complete]:text-icon-oncolor",
+      dot: "peer items-center justify-center rounded-full w-space-06 h-space-06 "
     },
-    onColor: {
-      true: "[&_.progress-circle]:stroke-background-surface-oncolor",
-      false: ""
+    orientation: {
+      vertical: "flex-col   ",
+      horizontal: "flex-row  "
     }
-  },
-  defaultVariants: {
-    colors: "primary",
-    onColor: !1
   }
-}), V = c("", {
-  variants: {
-    size: {
-      120: "w-[120px] h-[120px] [&_.bg-circle]:stroke-[10px] [&_.progress-circle]:stroke-[10px]",
-      80: "w-[80px] h-[80px] [&_.bg-circle]:stroke-[8px] [&_.progress-circle]:stroke-[8px]",
-      64: "w-[64px] h-[64px] [&_.bg-circle]:stroke-[6px] [&_.progress-circle]:stroke-[6px]",
-      48: "w-[48px] h-[48px] [&_.bg-circle]:stroke-[5px] [&_.progress-circle]:stroke-[5px]",
-      40: "w-[40px] h-[40px] [&_.bg-circle]:stroke-[4px] [&_.progress-circle]:stroke-[4px]"
-    }
-  }
-}), z = c("", {
-  variants: {
-    size: {
-      120: "[&>h3]:text-subtitle-02 [&>h3]:font-semibold [&>p]:text-body-01 [&>span]:text-body-01",
-      80: "[&>h3]:text-body-02 [&>h3]:font-semibold [&>p]:text-body-01 [&>span]:text-body-01",
-      64: "[&>h3]:text-body-01 [&>h3]:font-semibold [&>p]:text-caption-01 [&>span]:text-caption-01",
-      48: "[&>h3]:text-body-01 [&>h3]:font-semibold [&>p]:text-caption-01 [&>span]:text-caption-01",
-      40: "[&>h3]:text-caption-01 [&>h3]:font-semibold [&>p]:text-caption-02 [&>span]:text-caption-02"
-    }
-  }
-}), R = c("", {
-  variants: {
-    size: {
-      120: "title-01",
-      80: "text-subtitle-01",
-      64: "text-body-01",
-      48: "text-[1.05rem]/[15px]",
-      40: "text-[0.875rem]/[12.5px]"
-    }
+}), g = r.createContext({
+  variant: "circle",
+  orientation: "horizontal",
+  activeStep: 0
+}), S = ({ activeStep: a, variant: t, orientation: o, children: e }) => {
+  const i = r.useMemo(() => ({ activeStep: a, variant: t, orientation: o }), [a, t, o]);
+  return /* @__PURE__ */ n(g.Provider, { value: i, children: e });
+}, w = r.forwardRef(
+  ({ activeStep: a = 0, orientation: t = "horizontal", variant: o = "circle", className: e, children: i, ...d }, l) => {
+    const p = r.useMemo(() => {
+      let s = 0;
+      const b = r.Children.count(i);
+      return r.Children.map(i, (m) => r.isValidElement(m) && m.type.displayName === "Step" ? r.cloneElement(m, {
+        "data-index": ++s,
+        lastStep: b === s
+      }) : m);
+    }, [i]);
+    return /* @__PURE__ */ n("div", { ref: l, className: c(f({ orientation: t }), e), ...d, "data-orientation": t, children: /* @__PURE__ */ n(S, { activeStep: a, variant: o, orientation: t, children: p }) });
   }
-}), j = $.forwardRef(
-  ({ className: b, steps: e, activeStep: a, colors: f, size: l = 120, onColor: k, dir: p = "ltr", showDetails: u = !0, ...y }, _) => {
-    const r = l || 120, n = e.length > 0 ? a / e.length : 0, x = r === 120 ? 50 : r === 80 ? 35 : r === 64 ? 28 : r === 48 ? 20 : 18, d = 2 * Math.PI * x, v = d, h = d * (1 - n), g = r === 120 ? 60 : r === 80 ? 40 : r === 64 ? 32 : r === 48 ? 24 : 20, m = r === 120 ? 60 : r === 80 ? 40 : r === 64 ? 32 : r === 48 ? 24 : 20, t = (e == null ? void 0 : e[a - 1]) || e[0];
-    return /* @__PURE__ */ o(
-      "div",
-      {
-        dir: p,
-        ref: _,
-        role: "progressbar",
-        "aria-label": `Step ${a} of ${e.length}`,
-        "aria-valuenow": a,
-        "aria-valuemin": 1,
-        "aria-valuemax": e.length,
-        "aria-valuetext": `Step ${a} of ${e.length}: ${(t == null ? void 0 : t.title) || ""}`,
-        className: s(w({ colors: f, onColor: k, className: b })),
-        ...y,
-        children: [
-          /* @__PURE__ */ o("div", { className: s("relative flex-shrink-0", V({ size: l })), children: [
-            /* @__PURE__ */ o(
-              "svg",
-              {
-                width: r,
-                height: r,
-                viewBox: `0 0 ${r} ${r}`,
-                className: "-rotate-90 transform",
-                role: "img",
-                "aria-label": `Progress circle showing ${Math.round(n * 100)}% completion`,
-                children: [
-                  /* @__PURE__ */ i("circle", { cx: g, cy: m, r: x, fill: "none", className: "bg-circle opacity-60", "aria-hidden": "true" }),
-                  /* @__PURE__ */ i(
-                    "circle",
-                    {
-                      cx: g,
-                      cy: m,
-                      r: x,
-                      fill: "none",
-                      strokeLinecap: "round",
-                      strokeDasharray: v,
-                      strokeDashoffset: p === "rtl" ? h : -h,
-                      className: "progress-circle transition-all duration-500 ease-in-out",
-                      "aria-label": `Progress: ${Math.round(n * 100)}%`
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ i("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ o(
-              "span",
-              {
-                className: s("font-bold text-text-paragraph-primary", R({ size: l })),
-                "aria-label": `Current step: ${a} of ${e.length}`,
-                children: [
-                  a,
-                  " ",
-                  N.Shared.Of,
-                  " ",
-                  e == null ? void 0 : e.length
-                ]
-              }
-            ) })
+);
+w.displayName = "Stepper";
+const N = r.forwardRef(({ className: a, children: t, progressClassName: o, ...e }, i) => {
+  const { activeStep: d, variant: l } = r.useContext(g), p = (e == null ? void 0 : e["data-index"]) ?? 0, s = c({
+    upcoming: d < p,
+    current: d === p,
+    complete: d > p
+  });
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: c(
+        "relative flex min-w-space-08 max-w-space-12 flex-col gap-space-02 group-data-[orientation=vertical]:min-h-space-08 group-data-[orientation=vertical]:flex-row",
+        a
+      ),
+      children: [
+        /* @__PURE__ */ u("div", { ref: i, "data-state": s, className: c(f({ variant: l }), o), ...e, children: [
+          /* @__PURE__ */ u(x, { shouldRender: l === "circle", children: [
+            s !== "complete" && /* @__PURE__ */ n("span", { children: p }),
+            s === "complete" && /* @__PURE__ */ n(h, { size: 20 })
           ] }),
-          t && u && /* @__PURE__ */ o(
-            "div",
-            {
-              className: s("flex flex-1 flex-col gap-space-01", z({ size: l })),
-              "aria-live": "polite",
-              "aria-label": `Step details for step ${a}`,
-              children: [
-                /* @__PURE__ */ i("h3", { className: "text-text-display", children: t == null ? void 0 : t.title }),
-                (t == null ? void 0 : t.description) && /* @__PURE__ */ i("p", { className: "text-text-paragraph-primary", children: t == null ? void 0 : t.description })
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
+          /* @__PURE__ */ n(x, { shouldRender: l === "dot", children: /* @__PURE__ */ n("div", { className: "size-space-02 rounded-full bg-border-neutral-primary group-data-[state=current]:border-2  group-data-[state=current]:border-primary   group-data-[state=complete]:bg-background-primary" }) })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "me-space-04 hidden flex-col gap-space-01 md:flex ", children: t }),
+        !e.lastStep && /* @__PURE__ */ n(y, {})
+      ]
+    }
+  );
+});
+N.displayName = "Step";
+const C = r.forwardRef(({ className: a, children: t, ...o }, e) => /* @__PURE__ */ n("span", { ref: e, className: c("text-body-02 font-medium text-text-display", a), ...o, children: t }));
+C.displayName = "StepTitle";
+const R = r.forwardRef(
+  ({ className: a, children: t, ...o }, e) => /* @__PURE__ */ n("p", { ref: e, className: c("text-wrap text-body-01 text-text-paragraph-primary", a), ...o, children: t })
 );
-j.displayName = "RadialStepper";
+R.displayName = "StepDescription";
+const y = r.forwardRef(({ className: a, children: t, ...o }, e) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: e,
+    className: c(
+      "absolute start-space-06 top-space-04 h-[2px] w-[calc(100%_-_32px)] bg-border-background-neutral group-data-[orientation=vertical]:start-space-04  group-data-[orientation=vertical]:top-space-06  group-data-[orientation=vertical]:h-[calc(100%_-_32px)] group-data-[orientation=vertical]:w-[2px] peer-data-[state=complete]:bg-background-primary",
+      a
+    ),
+    ...o,
+    children: t
+  }
+));
+y.displayName = "StepConnector";
 export {
-  j as RadialStepper
+  N as Step,
+  R as StepDescription,
+  C as StepTitle,
+  w as Stepper
 };