mada-design-system 0.0.11 → 0.1.1

package/index.es51.js

@@ -1,40 +1,240 @@
-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.es76.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,
+import { jsx as a, jsxs as L } from "react/jsx-runtime";
+import H from "./index.es150.js";
+import * as r from "react";
+import { Button as T } from "./index.es22.js";
+import J from "./index.es107.js";
+import O from "./index.es108.js";
+import { cn as h } from "./index.es78.js";
+const j = r.createContext(null);
+function Q() {
+  const o = r.useContext(j);
+  if (!o)
+    throw new Error("useCarousel must be used within a <Carousel />");
+  return o;
+}
+const D = r.forwardRef(
+  ({ orientation: o = "horizontal", opts: c, setApi: C, plugins: w, className: y, children: u, ...$ }, I) => {
+    const [R, t] = H(
       {
-        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,
+        ...c,
+        axis: o === "horizontal" ? "x" : "y"
+      },
+      w
+    ), [b, P] = r.useState(!1), [z, e] = r.useState(!1), S = r.useCallback((f) => {
+      f && (P(f.canScrollPrev()), e(f.canScrollNext()));
+    }, []), s = r.useCallback(() => {
+      t == null || t.scrollPrev();
+    }, [t]), p = r.useCallback(() => {
+      t == null || t.scrollNext();
+    }, [t]), n = r.useCallback(
+      (f) => {
+        f.key === "ArrowLeft" ? (f.preventDefault(), s()) : f.key === "ArrowRight" && (f.preventDefault(), p());
+      },
+      [s, p]
+    );
+    return r.useEffect(() => {
+      !t || !C || C(t);
+    }, [t, C]), r.useEffect(() => {
+      if (t)
+        return S(t), t.on("reInit", S), t.on("select", S), () => {
+          t == null || t.off("select", S);
+        };
+    }, [t, S]), /* @__PURE__ */ a(
+      j.Provider,
+      {
+        value: {
+          carouselRef: R,
+          api: t,
+          opts: c,
+          orientation: o || ((c == null ? void 0 : c.axis) === "y" ? "vertical" : "horizontal"),
+          scrollPrev: s,
+          scrollNext: p,
+          canScrollPrev: b,
+          canScrollNext: z
+        },
+        children: /* @__PURE__ */ a(
+          "div",
           {
-            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)}%)`
-            }
+            ref: I,
+            onKeyDownCapture: n,
+            className: h("relative", y),
+            role: "region",
+            "aria-roledescription": "carousel",
+            ...$,
+            children: u
           }
         )
       }
-    ),
-    !!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;
+D.displayName = "CarouselPrimitive";
+const G = r.forwardRef(({ className: o, ...c }, C) => {
+  const { carouselRef: w, orientation: y } = Q();
+  return /* @__PURE__ */ a("div", { ref: w, className: "overflow-hidden", children: /* @__PURE__ */ a("div", { ref: C, className: h("flex", y === "horizontal" ? "ml-4" : "-mt-4 flex-col", o), ...c }) });
+});
+G.displayName = "CarouselContent";
+const K = r.forwardRef(({ className: o, ...c }, C) => /* @__PURE__ */ a("div", { ref: C, role: "group", "aria-roledescription": "slide", className: h("min-w-0 shrink-0 grow-0 basis-full", o), ...c }));
+K.displayName = "CarouselItem";
+function ee({
+  children: o,
+  className: c,
+  itemClassName: C,
+  showDots: w = !0,
+  showArrows: y = !0,
+  loop: u = !0,
+  autoplay: $ = !1,
+  autoplayInterval: I = 5e3,
+  containerClassName: R,
+  maxDots: t = null,
+  itemWidth: b = 230,
+  slidesToShow: P,
+  showPartial: z = !0
+}) {
+  const [e, S] = r.useState(), [s, p] = r.useState(0), [n, f] = r.useState(0), [d, N] = r.useState(!1), [B, F] = r.useState(!0), E = r.useId(), M = r.useMemo(() => P ? `calc(${100 / P}% - ${z ? "1rem" : "0px"})` : typeof b == "number" ? `${b}px` : b, [b, P, z]), x = r.useCallback(
+    (l) => {
+      if (!e || d)
+        return;
+      N(!0);
+      const m = e.selectedScrollSnap();
+      if (m === l) {
+        N(!1);
+        return;
+      }
+      const g = m < l ? 1 : -1;
+      if (Math.abs(m - l) === 1) {
+        g > 0 ? e.scrollNext() : e.scrollPrev(), setTimeout(() => N(!1), 300);
+        return;
+      }
+      let v = 0;
+      const i = Math.abs(m - l), k = () => {
+        v < i ? (g > 0 ? e.scrollNext() : e.scrollPrev(), v++, setTimeout(k, 150)) : N(!1);
+      };
+      k();
+    },
+    [e, d]
+  ), A = r.useCallback(() => {
+    !e || d || (u && s === n - 1 ? x(0) : (N(!0), e.scrollNext(), setTimeout(() => N(!1), 300)));
+  }, [e, d, u, s, n, x]), _ = r.useCallback(() => {
+    !e || d || (N(!0), u && s === 0 ? x(n - 1) : (e.scrollPrev(), setTimeout(() => N(!1), 300)));
+  }, [e, d, u, s, n, x]);
+  r.useEffect(() => {
+    if (!e)
+      return;
+    f(e.scrollSnapList().length);
+    const l = () => {
+      p(e.selectedScrollSnap());
+    };
+    return p(e.selectedScrollSnap()), e.on("select", l), e.on("reInit", l), () => {
+      e.off("select", l), e.off("reInit", l);
+    };
+  }, [e]), r.useEffect(() => {
+    if (!e)
+      return;
+    const l = e.scrollSnapList().length, m = e.canScrollNext(), g = e.canScrollPrev();
+    F(m || g || l > 1);
+  }, [e, n, s]), r.useEffect(() => {
+    if (!e || !$)
+      return;
+    const l = setInterval(() => {
+      d || A();
+    }, I);
+    return () => clearInterval(l);
+  }, [e, $, I, d, A]);
+  const q = () => {
+    if (!t || n <= t)
+      return Array.from({ length: n }).map((v, i) => /* @__PURE__ */ a(
+        "button",
+        {
+          className: `size-space-04 rounded-full transition-colors focus:outline-none ${s === i ? "bg-primary" : "bg-background-neutral-200"}`,
+          onClick: () => x(i),
+          disabled: d,
+          "aria-label": `Go to slide ${i + 1}`
+        },
+        `${E}-dot-${i}`
+      ));
+    const l = [], m = n - (t - 1), g = Math.max(1, m);
+    for (let v = 0; v < t; v++) {
+      let i, k;
+      v === t - 1 ? (i = n - 1, k = s >= n - g) : (i = v, k = s === v), l.push(
+        /* @__PURE__ */ a(
+          "button",
+          {
+            className: `size-space-04 rounded-full transition-colors focus:outline-none ${k ? "bg-primary" : "bg-background-neutral-200"}`,
+            onClick: () => x(i),
+            disabled: d,
+            "aria-label": `Go to slide ${i + 1}`
+          },
+          `${E}-dot-${v}`
+        )
+      );
+    }
+    return l;
+  };
+  return /* @__PURE__ */ a("div", { className: h("w-full overflow-hidden", R), children: /* @__PURE__ */ L(
+    D,
+    {
+      dir: "rtl",
+      setApi: S,
+      opts: {
+        align: "start",
+        loop: !1,
+        skipSnaps: !1,
+        containScroll: "trimSnaps",
+        dragFree: !1,
+        direction: "rtl",
+        slidesToScroll: 1
+      },
+      className: h("w-full", c),
+      children: [
+        /* @__PURE__ */ a(G, { className: "gap-space-04", children: r.Children.map(o, (l, m) => /* @__PURE__ */ a(
+          K,
+          {
+            className: h("transition-transform duration-300", C),
+            style: {
+              flex: `0 0 ${M}`,
+              maxWidth: M
+            },
+            children: l
+          },
+          `${E}-item-${m}`
+        )) }),
+        B && /* @__PURE__ */ L("div", { className: "container mt-space-05 flex items-center justify-between", children: [
+          y && /* @__PURE__ */ L("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ a(
+              T,
+              {
+                onClick: _,
+                colors: "primary",
+                variant: !u && s === 0 ? "outline" : "default",
+                size: "icon",
+                "aria-label": "Previous slide",
+                className: h(!u && s === 0 && "!pointer-events-none"),
+                children: /* @__PURE__ */ a(J, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ a(
+              T,
+              {
+                onClick: A,
+                colors: "primary",
+                variant: !u && s === n - 1 ? "outline" : "default",
+                size: "icon",
+                "aria-label": "Next slide",
+                className: h(!u && s === n - 1 && "!pointer-events-none"),
+                children: /* @__PURE__ */ a(O, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          w && n > 0 && /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: q() })
+        ] })
+      ]
+    }
+  ) });
+}
 export {
-  c as Progress
+  ee as Carousel,
+  G as CarouselContent,
+  K as CarouselItem,
+  D as CarouselPrimitive
 };

package/index.es52.js

@@ -1,41 +1,25 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-radio-group";
-import * as t from "react";
-import { cva as p } from "./index.es102.js";
-import { cn as s } from "./index.es76.js";
-import m from "./index.es126.js";
-const h = p(
-  "flex aspect-square h-space-05 w-space-05 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",
+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.es78.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: {
-      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
-                `
-      }
-    },
-    defaultVariants: {
-      colors: "primary"
-    }
+    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
   }
-), l = t.createContext({
-  colors: "primary"
-}), u = t.forwardRef(({ className: a, colors: o, children: c, ...d }, n) => /* @__PURE__ */ e(r.Root, { className: s("grid gap-2", a), ...d, ref: n, children: /* @__PURE__ */ i(l.Provider, { value: { colors: o }, children: [
-  " ",
-  c
-] }) }));
-u.displayName = r.Root.displayName;
-const b = t.forwardRef(({ className: a, ...o }, c) => {
-  const d = t.useContext(l);
-  return /* @__PURE__ */ e("div", { className: "flex size-space-06 items-center justify-center", children: /* @__PURE__ */ e(r.Item, { ref: c, className: s(h({ colors: d.colors, className: a })), ...o, children: /* @__PURE__ */ e(r.Indicator, { className: "flex h-full w-full items-center justify-center rounded-full", children: /* @__PURE__ */ e(m, { className: "h-[15px] w-[15px]" }) }) }) });
-});
-b.displayName = r.Item.displayName;
+) }));
+m.displayName = o.Content.displayName;
 export {
-  u as RadioGroup,
-  b as RadioGroupItem
+  f as Popover,
+  v as PopoverArrow,
+  g as PopoverClose,
+  m as PopoverContent,
+  c as PopoverTrigger
 };

package/index.es53.js

@@ -1,30 +1,40 @@
-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.es76.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,
-  {
-    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
+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.es78.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,
+          {
+            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)}%)`
+            }
+          }
+        )
+      }
     ),
-    ...a,
-    children: /* @__PURE__ */ e(r.ScrollAreaThumb, { className: s("relative rounded-full bg-border", l === "vertical" && "flex-1") })
-  }
-));
-d.displayName = r.ScrollAreaScrollbar.displayName;
+    !!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 {
-  m as ScrollArea,
-  d as ScrollBar
+  c as Progress
 };

package/index.es54.js

@@ -1,72 +1,41 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import y, { useState as B, useRef as g, useEffect as m } from "react";
-import { debounce as w, cn as v } from "./index.es76.js";
-import { strings as R } from "./index.es88.js";
-import { Button as j } from "./index.es22.js";
-import { Input as z } from "./index.es35.js";
-import d from "./index.es122.js";
-import { Stack as A } from "./index.es40.js";
-import D from "./index.es105.js";
-const E = y.forwardRef(
-  ({ placeholder: f = "Search...", value: a = "", type: e, validationMessage: c, onSearch: n, disabled: h = !1, debounceTime: u = 600, className: x = "", ...N }, b) => {
-    const [o, s] = B(a), l = g();
-    m(() => {
-      s(a);
-    }, [a]), m(() => {
-      l.current = w((r) => n(r), u);
-    }, [n, u]);
-    const C = (r) => {
-      r.key === "Enter" && n(o.trim());
-    }, I = (r) => {
-      const i = r.target.value;
-      s(i), e === "onType" && l.current && l.current(i);
-    }, S = () => {
-      s(""), n("");
-    }, k = () => {
-      e === "onButton" && n(o);
-    };
-    return /* @__PURE__ */ p("div", { className: "space-y-space-01", children: [
-      /* @__PURE__ */ t(
-        z,
-        {
-          rounded: "full",
-          type: "text",
-          variant: "outline",
-          placeholder: f,
-          value: o,
-          disabled: h,
-          ...N,
-          onKeyDown: C,
-          onChange: I,
-          className: v("w-full ", { "pe-space-04": e === "onType", "pe-space-01": e === "onButton" }, x),
-          "aria-invalid": !!c,
-          "data-testid": "search-input",
-          startAdornment: e === "onType" && /* @__PURE__ */ t(d, { className: "text-icon-default" }),
-          endAdornment: /* @__PURE__ */ p(A, { gap: 1, alignItems: "center", children: [
-            o && /* @__PURE__ */ t("button", { type: "button", className: "text-text-default", onClick: S, children: /* @__PURE__ */ t(D, { size: 20 }) }),
-            o && e === "onButton" && /* @__PURE__ */ t("span", { className: "mx-space-01 block h-space-05 border" }),
-            e === "onButton" && /* @__PURE__ */ t(
-              j,
-              {
-                variant: "outline",
-                rounded: "full",
-                size: "icon-sm",
-                type: "button",
-                tooltip: R.Shared.Search,
-                className: "h-auto rounded-full border !p-space-01",
-                onClick: k,
-                children: /* @__PURE__ */ t(d, {})
-              }
-            )
-          ] }),
-          ref: b
-        }
-      ),
-      c && /* @__PURE__ */ t("p", { className: "text-caption-01 text-error", children: c })
-    ] });
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-radio-group";
+import * as t from "react";
+import { cva as p } from "./index.es98.js";
+import { cn as s } from "./index.es78.js";
+import m from "./index.es123.js";
+const h = p(
+  "flex aspect-square h-space-05 w-space-05 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
+                `
+      }
+    },
+    defaultVariants: {
+      colors: "primary"
+    }
   }
-);
-E.displayName = "SearchInput";
+), l = t.createContext({
+  colors: "primary"
+}), u = t.forwardRef(({ className: a, colors: o, children: c, ...d }, n) => /* @__PURE__ */ e(r.Root, { className: s("grid gap-2", a), ...d, ref: n, children: /* @__PURE__ */ i(l.Provider, { value: { colors: o }, children: [
+  " ",
+  c
+] }) }));
+u.displayName = r.Root.displayName;
+const b = t.forwardRef(({ className: a, ...o }, c) => {
+  const d = t.useContext(l);
+  return /* @__PURE__ */ e("div", { className: "flex size-space-06 items-center justify-center", children: /* @__PURE__ */ e(r.Item, { ref: c, className: s(h({ colors: d.colors, className: a })), ...o, children: /* @__PURE__ */ e(r.Indicator, { className: "flex h-full w-full items-center justify-center rounded-full", children: /* @__PURE__ */ e(m, { className: "h-[15px] w-[15px]" }) }) }) });
+});
+b.displayName = r.Item.displayName;
 export {
-  E as SearchInput
+  u as RadioGroup,
+  b as RadioGroupItem
 };