mada-design-system 0.9.1 → 1.0.1

package/index.es45.js

@@ -1,16 +1,247 @@
-import { useLayoutEffect as s, useEffect as f } from "react";
-import { setLanguage as o } from "./index.es101.js";
-import "./index.es2.js";
-import u from "./index.es93.js";
-const w = ({ children: c, onLanguageChange: t, onDirChange: r }) => {
-  const { lang: i, dir: e } = u();
-  return s(() => {
-    var m;
-    document.dir = e, navigator.userAgent.indexOf("iPhone") > -1 && ((m = document == null ? void 0 : document.querySelector("[name=viewport]")) == null || m.setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1")), r == null || r();
-  }, [e, r]), f(() => {
-    i && (o(i), t == null || t());
-  }, [i, t]), c;
-};
+import { jsx as l } from "react/jsx-runtime";
+import { cva as n } from "./index.es113.js";
+import { clsx as x } from "./index.es137.js";
+const y = n("grid", {
+  variants: {
+    cols: {
+      1: "grid-cols-1",
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      4: "grid-cols-4",
+      5: "grid-cols-5",
+      6: "grid-cols-6",
+      7: "grid-cols-7",
+      8: "grid-cols-8",
+      9: "grid-cols-9",
+      10: "grid-cols-10",
+      11: "grid-cols-11",
+      12: "grid-cols-12"
+    },
+    gap: {
+      none: "",
+      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: "",
+      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: "",
+      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"
+    },
+    autoFlow: {
+      row: "grid-flow-row",
+      col: "grid-flow-col",
+      dense: "grid-flow-dense",
+      rowDense: "grid-flow-row-dense",
+      colDense: "grid-flow-col-dense"
+    },
+    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: {
+    cols: 12,
+    gap: 1,
+    gapX: "none",
+    gapY: "none",
+    autoFlow: "row",
+    alignItems: "stretch",
+    justifyItems: "stretch",
+    alignContent: "start",
+    justifyContent: "start"
+  }
+}), b = ({
+  cols: s,
+  gap: a,
+  gapX: p,
+  gapY: c,
+  autoFlow: e,
+  alignItems: o,
+  justifyItems: t,
+  alignContent: g,
+  justifyContent: r,
+  className: i,
+  children: d,
+  ...m
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: y({
+      cols: s,
+      gap: a,
+      gapX: p,
+      gapY: c,
+      autoFlow: e,
+      alignItems: o,
+      justifyItems: t,
+      alignContent: g,
+      justifyContent: r,
+      className: i
+    }),
+    ...m,
+    children: d
+  }
+), f = n("", {
+  variants: {
+    base: {
+      1: "col-span-1",
+      2: "col-span-2",
+      3: "col-span-3",
+      4: "col-span-4",
+      5: "col-span-5",
+      6: "col-span-6",
+      7: "col-span-7",
+      8: "col-span-8",
+      9: "col-span-9",
+      10: "col-span-10",
+      11: "col-span-11",
+      12: "col-span-12"
+    },
+    sm: {
+      1: "sm:col-span-1",
+      2: "sm:col-span-2",
+      3: "sm:col-span-3",
+      4: "sm:col-span-4",
+      5: "sm:col-span-5",
+      6: "sm:col-span-6",
+      7: "sm:col-span-7",
+      8: "sm:col-span-8",
+      9: "sm:col-span-9",
+      10: "sm:col-span-10",
+      11: "sm:col-span-11",
+      12: "sm:col-span-12"
+    },
+    md: {
+      1: "md:col-span-1",
+      2: "md:col-span-2",
+      3: "md:col-span-3",
+      4: "md:col-span-4",
+      5: "md:col-span-5",
+      6: "md:col-span-6",
+      7: "md:col-span-7",
+      8: "md:col-span-8",
+      9: "md:col-span-9",
+      10: "md:col-span-10",
+      11: "md:col-span-11",
+      12: "md:col-span-12"
+    },
+    lg: {
+      1: "lg:col-span-1",
+      2: "lg:col-span-2",
+      3: "lg:col-span-3",
+      4: "lg:col-span-4",
+      5: "lg:col-span-5",
+      6: "lg:col-span-6",
+      7: "lg:col-span-7",
+      8: "lg:col-span-8",
+      9: "lg:col-span-9",
+      10: "lg:col-span-10",
+      11: "lg:col-span-11",
+      12: "lg:col-span-12"
+    },
+    xl: {
+      1: "xl:col-span-1",
+      2: "xl:col-span-2",
+      3: "xl:col-span-3",
+      4: "xl:col-span-4",
+      5: "xl:col-span-5",
+      6: "xl:col-span-6",
+      7: "xl:col-span-7",
+      8: "xl:col-span-8",
+      9: "xl:col-span-9",
+      10: "xl:col-span-10",
+      11: "xl:col-span-11",
+      12: "xl:col-span-12"
+    },
+    "2xl": {
+      1: "2xl:col-span-1",
+      2: "2xl:col-span-2",
+      3: "2xl:col-span-3",
+      4: "2xl:col-span-4",
+      5: "2xl:col-span-5",
+      6: "2xl:col-span-6",
+      7: "2xl:col-span-7",
+      8: "2xl:col-span-8",
+      9: "2xl:col-span-9",
+      10: "2xl:col-span-10",
+      11: "2xl:col-span-11",
+      12: "2xl:col-span-12"
+    }
+  },
+  defaultVariants: {
+    base: 1
+  }
+}), v = ({ columns: s, children: a, className: p, ...c }) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: x(
+      f(typeof s == "number" ? { base: s } : typeof s == "object" && s !== null ? s : {}),
+      p
+    ),
+    ...c,
+    children: a
+  }
+);
 export {
-  w as Bootstrap
+  b as Grid,
+  v as GridItem
 };

package/index.es46.js

@@ -1,309 +1,20 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import W from "./index.es3.js";
-import { Button as E } from "./index.es23.js";
-import { useState as O, useId as X, useRef as Y, useEffect as ee, useCallback as c } from "react";
-import { strings as s } from "./index.es101.js";
-import { ShouldRender as S } from "./index.es15.js";
-import te from "./index.es148.js";
-import re from "./index.es149.js";
-import ae from "./index.es150.js";
-import se from "./index.es114.js";
-import { cn as m } from "./index.es89.js";
-const ie = {
-  "image/png": [".png"],
-  "image/jpeg": [".jpg", ".jpeg"],
-  "application/pdf": [".pdf"]
+import { jsx as x } from "react/jsx-runtime";
+import { clsx as c } from "./index.es137.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 });
 };
-function le({ file: r, onRemove: a }) {
-  return /* @__PURE__ */ f(
-    "li",
-    {
-      className: m("flex flex-col rounded border border-border-neutral-primary bg-background-neutral-100", {
-        "border-border-error": r.status === "error"
-      }),
-      children: [
-        /* @__PURE__ */ f("div", { className: "flex items-center justify-between truncate p-space-02", children: [
-          /* @__PURE__ */ f("div", { className: "flex gap-space-02", children: [
-            r.status === "uploading" && /* @__PURE__ */ t(W, {}),
-            r.status === "success" && /* @__PURE__ */ t(re, { className: "text-icon-success" }),
-            r.status === "error" && /* @__PURE__ */ t(ae, { className: "text-icon-error" }),
-            /* @__PURE__ */ t("span", { className: "text-body-01 font-medium text-text-default", children: r.file.name })
-          ] }),
-          /* @__PURE__ */ t(
-            E,
-            {
-              variant: "text",
-              size: "icon-xs",
-              rounded: "default",
-              colors: "neutral",
-              onClick: () => a(r.id),
-              "aria-label": `remove file ${r.file.name}`,
-              className: "mix-blend-multiply dark:mix-blend-normal",
-              children: /* @__PURE__ */ t(se, {})
-            }
-          )
-        ] }),
-        r.status === "error" && /* @__PURE__ */ t("div", { className: "border-t border-border-primary p-space-02", children: /* @__PURE__ */ t("span", { className: "text-caption-01 text-text-error", children: r.error }) })
-      ]
-    }
-  );
-}
-function ne({ files: r, onRemove: a }) {
-  return /* @__PURE__ */ t("ul", { className: "space-y-space-01", children: r.map((o) => /* @__PURE__ */ t(le, { file: o, onRemove: a }, o.id)) });
-}
-function oe({
-  isDragging: r,
-  disabled: a,
-  acceptedExtensions: o,
-  maxSize: h,
-  onDragEnter: p,
-  onDragLeave: F,
-  onDragOver: g,
-  onDrop: b,
-  onSelectFiles: v,
-  browseLabel: j,
-  description: y
-}) {
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      role: "button",
-      className: m(
-        "group rounded border border-dashed bg-background-neutral-100 p-space-05 text-center hover:border-border-success hover:bg-background-success-25",
-        {
-          "border-border-success bg-background-success-25": r,
-          "pointer-events-none cursor-not-allowed border-border-disabled": a
-        }
-      ),
-      onDragEnter: p,
-      onDragLeave: F,
-      onDragOver: g,
-      onDrop: b,
-      children: /* @__PURE__ */ f("label", { htmlFor: "fileInput", className: "flex cursor-pointer flex-col items-center gap-space-05", children: [
-        /* @__PURE__ */ t(te, { className: m("size-space-05 text-icon-default group-hover:text-icon-success", { "text-disabled": a }) }),
-        /* @__PURE__ */ t(
-          "span",
-          {
-            id: "dragDropLabel",
-            className: m("text-body-02 font-medium text-text-display group-hover:text-text-success", {
-              "text-disabled-text-default-disabled": a
-            }),
-            children: s.Attachments.dragFiles
-          }
-        ),
-        /* @__PURE__ */ t(
-          "span",
-          {
-            className: m("text-caption-01 text-text-paragraph-primary group-hover:text-text-success", {
-              "text-disabled-text-default-disabled": a
-            }),
-            children: y || `${s.formatString(s.Attachments.maxSize, h || 0)}${s.Shared.comma} ${s.formatString(s.Attachments.allowedFormats, o.join(", "))}`
-          }
-        ),
-        /* @__PURE__ */ t(
-          E,
-          {
-            variant: "text",
-            colors: "neutral",
-            size: "sm",
-            rounded: "default",
-            disabled: r || a,
-            onClick: v,
-            "aria-label": "browse files",
-            children: j ?? s.Attachments.browseFile
-          }
-        )
-      ] })
-    }
-  );
-}
-function ye({
-  acceptedFormats: r = ie,
-  onFileSelect: a,
-  multiple: o,
-  disabled: h,
-  maxSize: p = 1,
-  maxFiles: F = 1 / 0,
-  customError: g,
-  isInvalid: b,
-  isRequired: v,
-  label: j,
-  browseLabel: y,
-  description: L,
-  value: x = [],
-  onChange: N
-}) {
-  const [i, D] = O({
-    validFiles: x,
-    invalidFiles: []
-  }), U = X(), [T, z] = O(!1), A = Y(null), $ = i.validFiles.length >= F, C = Object.values(r).flat(), _ = C.join(",");
-  ee(() => {
-    x.length && D((e) => ({
-      validFiles: x,
-      invalidFiles: e.invalidFiles
-    }));
-  }, [x]);
-  const P = c(
-    (e) => e.size > p * 1024 * 1024 || !r[e.type] ? {
-      isValid: !1,
-      error: s.Attachments.error
-    } : { isValid: !0 },
-    [r, p]
-  ), k = c(
-    (e) => {
-      const u = [], l = [];
-      e.forEach((n) => {
-        const w = n.name.replace(/[^a-zA-Z0-9\u0600-\u06FF ._-]/g, "_"), R = P(n);
-        if (!R.isValid) {
-          l.push({
-            id: `${n.name}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-            file: new File([n], w, { type: n.type }),
-            progress: 0,
-            status: "error",
-            error: R.error
-          });
-          return;
-        }
-        u.push({
-          id: `${n.name}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-          file: new File([n], w, { type: n.type }),
-          progress: 0,
-          status: a ? "uploading" : "success"
-        });
-      });
-      const d = [...i.validFiles, ...u];
-      D({
-        validFiles: d,
-        invalidFiles: [...i.invalidFiles, ...l]
-      }), N(d), a && u.length && a(u, (n, w, R = "uploading", Q) => {
-        const M = d.map((I) => I.id === n ? { ...I, progress: w, status: R, error: Q } : I);
-        D((I) => ({
-          validFiles: M,
-          invalidFiles: I.invalidFiles
-        })), N(M);
-      }), A.current && (A.current.value = "");
-    },
-    [i.validFiles, i.invalidFiles, N, P, a]
-  ), B = c((e) => {
-    e.preventDefault(), e.stopPropagation(), z(!0);
-  }, []), Z = c((e) => {
-    e.preventDefault(), e.stopPropagation(), z(!1);
-  }, []), q = c((e) => {
-    e.preventDefault(), e.stopPropagation();
-  }, []), G = c(
-    (e) => {
-      e.preventDefault(), e.stopPropagation(), z(!1), k(Array.from(e.dataTransfer.files));
-    },
-    [k]
-  ), H = c(
-    (e) => {
-      e.target.files && k(Array.from(e.target.files));
-    },
-    [k]
-  ), V = c(() => {
-    var e, u;
-    $ || ((e = A.current) == null || e.click(), (u = A.current) == null || u.focus());
-  }, [$]), J = c(
-    (e) => {
-      if (i.invalidFiles.some((l) => l.id === e))
-        D((l) => ({
-          validFiles: l.validFiles,
-          invalidFiles: l.invalidFiles.filter((d) => d.id !== e)
-        }));
-      else {
-        const l = i.validFiles.filter((d) => d.id !== e);
-        D((d) => ({
-          validFiles: l,
-          invalidFiles: d.invalidFiles
-        })), N(l);
-      }
-    },
-    [i.validFiles, i.invalidFiles, N]
-  ), K = [...i.validFiles, ...i.invalidFiles];
-  return /* @__PURE__ */ f("div", { className: m("mx-auto flex w-full flex-col gap-space-02", { "rounded-1 border border-error p-space-02": b }), children: [
-    /* @__PURE__ */ t(S, { shouldRender: o, children: /* @__PURE__ */ t(
-      oe,
-      {
-        isDragging: T,
-        disabled: h || $,
-        acceptedExtensions: C,
-        onDragEnter: B,
-        onDragLeave: Z,
-        onDragOver: q,
-        onDrop: G,
-        onSelectFiles: V,
-        maxSize: p,
-        browseLabel: y,
-        description: L
-      }
-    ) }),
-    /* @__PURE__ */ t(S, { shouldRender: !o, children: /* @__PURE__ */ t(
-      de,
-      {
-        disabled: h || $,
-        acceptedExtensions: C,
-        onSelectFiles: V,
-        isSelectedFile: !!x.length || !!i.invalidFiles.length,
-        maxSize: p,
-        isRequired: v,
-        label: j,
-        browseLabel: y,
-        description: L
-      }
-    ) }),
-    /* @__PURE__ */ t(
-      "input",
-      {
-        type: "file",
-        accept: _,
-        ref: A,
-        onChange: H,
-        className: "hidden",
-        id: `fileInput-${U}`,
-        disabled: h || $,
-        "aria-describedby": "fileInputDescription"
-      }
-    ),
-    /* @__PURE__ */ t(ne, { files: K, onRemove: J }),
-    /* @__PURE__ */ t(S, { shouldRender: !x.length && !!g, children: /* @__PURE__ */ t("div", { className: "text-caption-01 text-text-error", children: g }) })
-  ] });
-}
-const de = ({
-  disabled: r,
-  acceptedExtensions: a,
-  isSelectedFile: o,
-  onSelectFiles: h,
-  maxSize: p,
-  isRequired: F,
-  label: g,
-  browseLabel: b,
-  description: v
-}) => /* @__PURE__ */ f("div", { className: "space-y-space-04", children: [
-  /* @__PURE__ */ f("div", { className: "space-y-space-02", children: [
-    /* @__PURE__ */ f(
-      "div",
-      {
-        className: m("text-body-02 text-form-field-text-label", {
-          "text-disabled-text-default-disabled": r
-        }),
-        children: [
-          g ?? s.Attachments.uploadFiles,
-          /* @__PURE__ */ t(S, { shouldRender: F, children: /* @__PURE__ */ t("span", { className: "ms-space-01 text-error", children: "*" }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ t(
-      "p",
-      {
-        className: m("text-caption-01 text-text-paragraph-primary group-hover:text-text-success", {
-          "text-disabled-text-default-disabled": r
-        }),
-        children: v || `${s.formatString(s.Attachments.maxSize, p || 0)}${s.Shared.comma} ${s.formatString(s.Attachments.allowedFormats, a.join(", "))}`
-      }
-    )
-  ] }),
-  /* @__PURE__ */ t(S, { shouldRender: !o, children: /* @__PURE__ */ t(E, { onClick: h, colors: "neutral", rounded: "default", type: "button", size: "sm", disabled: r, children: b ?? s.Attachments.browseFile }) })
-] });
 export {
-  ye as FileUpload
+  u as SimpleGrid
 };