mada-design-system 0.0.9

package/index.es40.js

@@ -0,0 +1,20 @@
+import { jsx as x } from "react/jsx-runtime";
+import { clsx as c } from "./index.es86.js";
+const u = ({
+  minChildWidth: r,
+  cols: e = 12,
+  // Default to 12 columns
+  gap: p = "gap-space-05",
+  // Default spacing
+  gapX: a = "",
+  gapY: m = "",
+  className: o,
+  children: s,
+  ...t
+}) => {
+  const f = r ? `repeat(auto-fill, minmax(${typeof r == "number" ? `${r}px` : r}, 1fr))` : `repeat(${e}, minmax(0, 1fr))`;
+  return /* @__PURE__ */ x("div", { className: c("grid", p, a, m, o), style: { gridTemplateColumns: f }, ...t, children: s });
+};
+export {
+  u as SimpleGrid
+};

package/index.es41.js

@@ -0,0 +1,118 @@
+import { jsx as y } from "react/jsx-runtime";
+import { cva as m } from "./index.es89.js";
+import { clsx as l } from "./index.es86.js";
+const u = m("flex", {
+  variants: {
+    direction: {
+      row: "flex-row",
+      "row-reverse": "flex-row-reverse",
+      col: "flex-col",
+      "col-reverse": "flex-col-reverse"
+    },
+    gap: {
+      none: "",
+      small: "gap-space-04",
+      medium: "gap-space-05",
+      1: "gap-space-01",
+      2: "gap-space-02",
+      3: "gap-space-03",
+      4: "gap-space-04",
+      5: "gap-space-05",
+      6: "gap-space-06",
+      7: "gap-space-07",
+      8: "gap-space-08",
+      9: "gap-space-09",
+      10: "gap-space-10",
+      11: "gap-space-11",
+      12: "gap-space-12"
+    },
+    gapX: {
+      none: "",
+      small: "gap-x-space-04",
+      medium: "gap-x-space-05",
+      1: "gap-x-space-01",
+      2: "gap-x-space-02",
+      3: "gap-x-space-03",
+      4: "gap-x-space-04",
+      5: "gap-x-space-05",
+      6: "gap-x-space-06",
+      7: "gap-x-space-07",
+      8: "gap-x-space-08",
+      9: "gap-x-space-09",
+      10: "gap-x-space-10",
+      11: "gap-x-space-11",
+      12: "gap-x-space-12"
+    },
+    gapY: {
+      none: "",
+      small: "gap-y-space-04",
+      medium: "gap-y-space-05",
+      1: "gap-y-space-01",
+      2: "gap-y-space-02",
+      3: "gap-y-space-03",
+      4: "gap-y-space-04",
+      5: "gap-y-space-05",
+      6: "gap-y-space-06",
+      7: "gap-y-space-07",
+      8: "gap-y-space-08",
+      9: "gap-y-space-09",
+      10: "gap-y-space-10",
+      11: "gap-y-space-11",
+      12: "gap-y-space-12"
+    },
+    alignItems: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
+    },
+    justifyItems: {
+      start: "justify-items-start",
+      center: "justify-items-center",
+      end: "justify-items-end",
+      stretch: "justify-items-stretch"
+    },
+    alignContent: {
+      start: "content-start",
+      center: "content-center",
+      end: "content-end",
+      between: "content-between",
+      around: "content-around",
+      evenly: "content-evenly"
+    },
+    justifyContent: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    }
+  },
+  defaultVariants: {
+    direction: "row",
+    gap: "medium"
+  }
+}), j = ({
+  direction: e,
+  gap: a,
+  gapX: s,
+  gapY: p,
+  justifyContent: t,
+  justifyItems: c,
+  alignContent: n,
+  alignItems: r,
+  className: g,
+  children: i,
+  ...o
+}) => /* @__PURE__ */ y(
+  "div",
+  {
+    className: l(u({ direction: e, gap: a, gapX: s, gapY: p, justifyContent: t, justifyItems: c, alignContent: n, alignItems: r }), g),
+    ...o,
+    children: i
+  }
+);
+export {
+  j as Stack
+};

package/index.es42.js

@@ -0,0 +1,82 @@
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-navigation-menu";
+import { cva as l } from "./index.es89.js";
+import * as r from "react";
+import { cn as n } from "./index.es69.js";
+import c from "./index.es118.js";
+const f = r.forwardRef(({ className: e, children: a, ...o }, d) => /* @__PURE__ */ s(t.Root, { ref: d, className: n("relative z-10 flex max-w-max flex-1 items-center justify-center", e), ...o, children: [
+  a,
+  /* @__PURE__ */ i(m, {})
+] }));
+f.displayName = t.Root.displayName;
+const u = r.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ i(
+  t.List,
+  {
+    ref: o,
+    className: n("group flex flex-1 list-none items-center justify-center space-x-1", e),
+    ...a
+  }
+));
+u.displayName = t.List.displayName;
+const b = t.Item, p = l(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+), g = r.forwardRef(({ className: e, children: a, ...o }, d) => /* @__PURE__ */ s(t.Trigger, { ref: d, className: n(p(), "group", e), ...o, children: [
+  a,
+  " ",
+  /* @__PURE__ */ i(
+    c,
+    {
+      className: "relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180",
+      "aria-hidden": "true"
+    }
+  )
+] }));
+g.displayName = t.Trigger.displayName;
+const v = r.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ i(
+  t.Content,
+  {
+    ref: o,
+    className: n(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      e
+    ),
+    ...a
+  }
+));
+v.displayName = t.Content.displayName;
+const M = t.Link, m = r.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ i("div", { className: n("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ i(
+  t.Viewport,
+  {
+    className: n(
+      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+      e
+    ),
+    ref: o,
+    ...a
+  }
+) }));
+m.displayName = t.Viewport.displayName;
+const N = r.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ i(
+  t.Indicator,
+  {
+    ref: o,
+    className: n(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      e
+    ),
+    ...a,
+    children: /* @__PURE__ */ i("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+  }
+));
+N.displayName = t.Indicator.displayName;
+export {
+  f as NavigationMenu,
+  v as NavigationMenuContent,
+  N as NavigationMenuIndicator,
+  b as NavigationMenuItem,
+  M as NavigationMenuLink,
+  u as NavigationMenuList,
+  g as NavigationMenuTrigger,
+  m as NavigationMenuViewport,
+  p as navigationMenuTriggerStyle
+};

package/index.es43.js

@@ -0,0 +1,25 @@
+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.es69.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,
+  {
+    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
+  }
+) }));
+m.displayName = o.Content.displayName;
+export {
+  f as Popover,
+  v as PopoverArrow,
+  g as PopoverClose,
+  m as PopoverContent,
+  c as PopoverTrigger
+};

package/index.es44.js

@@ -0,0 +1,39 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-progress";
+import * as n from "react";
+import { cn as s } from "./index.es69.js";
+const c = n.forwardRef(
+  ({ className: d, value: a, colors: m = "bg-primary", rounded: r, icon: i, ...l }, o) => /* @__PURE__ */ f("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ t(
+      e.Root,
+      {
+        ref: o,
+        className: s("relative h-space-02 w-full overflow-hidden bg-background-secondary", r && "rounded-full", d),
+        ...l,
+        children: /* @__PURE__ */ t(
+          e.Indicator,
+          {
+            className: s("h-full w-full flex-1 transition-all", r && "rounded-full", m),
+            style: {
+              transform: (l == null ? void 0 : l.dir) === "rtl" ? `translateX(${100 - (a || 0)}%)` : `translateX(-${100 - (a || 0)}%)`
+            }
+          }
+        )
+      }
+    ),
+    !!i && /* @__PURE__ */ t(
+      "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
+};

package/index.es45.js

@@ -0,0 +1,27 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-radio-group";
+import * as s from "react";
+import { cn as t } from "./index.es69.js";
+import d from "./index.es116.js";
+const l = s.forwardRef(({ className: a, ...i }, o) => /* @__PURE__ */ e(r.Root, { className: t("grid gap-2", a), ...i, ref: o }));
+l.displayName = r.Root.displayName;
+const c = s.forwardRef(({ className: a, ...i }, o) => /* @__PURE__ */ e("div", { className: "flex size-space-06 items-center justify-center", children: /* @__PURE__ */ e(
+  r.Item,
+  {
+    ref: o,
+    className: t(
+      `flex aspect-square h-[20px] w-[20ps] rounded-full border-2 border-primary ring-offset-background data-[state=checked]:text-primary
+                  hover:border-primary-dark hover:data-[state=checked]:text-primary-dark focus:outline-none focus-visible:ring-2
+                focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed
+                disabled:border-disabled disabled:data-[state=checked]:text-disabled`,
+      a
+    ),
+    ...i,
+    children: /* @__PURE__ */ e(r.Indicator, { className: "flex h-full w-full items-center justify-center rounded-full", children: /* @__PURE__ */ e(d, { className: "h-[10px] w-[10px]" }) })
+  }
+) }));
+c.displayName = r.Item.displayName;
+export {
+  l as RadioGroup,
+  c as RadioGroupItem
+};

package/index.es46.js

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

package/index.es47.js

@@ -0,0 +1,79 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import I, { useState as w, useRef as v, useEffect as p } from "react";
+import { debounce as B, cn as S } from "./index.es69.js";
+import { Button as R } from "./index.es23.js";
+import { Input as j } from "./index.es36.js";
+import m from "./index.es113.js";
+import { Stack as A } from "./index.es41.js";
+import D from "./index.es92.js";
+const E = I.forwardRef(
+  ({ placeholder: f = "Search...", value: a = "", type: t, validationMessage: s, onSearch: r, disabled: h = !1, debounceTime: l = 600, className: b = "", ...x }, y) => {
+    const [n, c] = w(a), u = v();
+    p(() => {
+      c(a);
+    }, [a]), p(() => {
+      u.current = B((o) => r(o), l);
+    }, [r, l]);
+    const N = (o) => {
+      o.key === "Enter" && r(n.trim());
+    }, g = (o) => {
+      const i = o.target.value;
+      c(i), t === "onType" && u.current && u.current(i);
+    }, k = () => {
+      c(""), r("");
+    }, C = () => {
+      t === "onButton" && r(n);
+    };
+    return /* @__PURE__ */ d("div", { className: "space-y-space-01", children: [
+      /* @__PURE__ */ e(
+        j,
+        {
+          rounded: "full",
+          type: "text",
+          variant: "outline",
+          placeholder: f,
+          value: n,
+          disabled: h,
+          ...x,
+          onKeyDown: N,
+          onChange: g,
+          className: S("w-full pe-space-01 transition-all duration-200 focus-within:border-success hover:border-success", b),
+          "aria-invalid": !!s,
+          "data-testid": "search-input",
+          startAdornment: t === "onType" && /* @__PURE__ */ e(m, { className: "text-foreground-tertiary" }),
+          endAdornment: /* @__PURE__ */ d(A, { gap: 1, alignItems: "center", children: [
+            n && /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "rounded-full bg-background !p-space-01 text-foreground-tertiary",
+                onClick: k,
+                children: /* @__PURE__ */ e(D, {})
+              }
+            ),
+            n && t === "onButton" && /* @__PURE__ */ e("span", { className: "mx-space-01 block h-space-05 border" }),
+            t === "onButton" && /* @__PURE__ */ e(
+              R,
+              {
+                variant: "outline",
+                colors: "success",
+                rounded: "full",
+                size: "icon-sm",
+                type: "button",
+                className: "h-auto rounded-full border !p-space-01",
+                onClick: C,
+                children: /* @__PURE__ */ e(m, {})
+              }
+            )
+          ] }),
+          ref: y
+        }
+      ),
+      s && /* @__PURE__ */ e("p", { className: "text-caption-01 text-error", children: s })
+    ] });
+  }
+);
+E.displayName = "SearchInput";
+export {
+  E as SearchInput
+};

package/index.es48.js

@@ -0,0 +1,92 @@
+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,
+    {
+      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",
+        r
+      ),
+      ...t,
+      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 })
+      ]
+    }
+  )
+);
+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;
+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
+};

package/index.es49.js

@@ -0,0 +1,20 @@
+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
+    }
+  )
+);
+s.displayName = o.Root.displayName;
+export {
+  s as Separator
+};

package/index.es5.js

@@ -0,0 +1,9 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Slot as i } from "@radix-ui/react-slot";
+import { forwardRef as p } from "react";
+const o = p(({ as: t, children: n, asChild: r, ...e }, m) => /* @__PURE__ */ a(r ? i : t || "h1", { ref: m, ...e, children: n }));
+o.displayName = "Heading";
+const g = o;
+export {
+  g as default
+};