@tokyo3rdhq/magi-design-system 0.2.0 → 0.3.1

package/dist/index.js

@@ -1,289 +1,316 @@
-import { jsx as r, jsxs as f, Fragment as h } from "react/jsx-runtime";
-import { forwardRef as b, useId as N } from "react";
-function o(...n) {
+import { jsx as o, jsxs as p, Fragment as y } from "react/jsx-runtime";
+import { forwardRef as v, useId as N, isValidElement as P, cloneElement as $, useMemo as x, useInsertionEffect as C, createContext as k } from "react";
+function l(...n) {
   return n.filter(Boolean).join(" ");
 }
-function x({
+function E({
   size: n = "xl",
-  as: a,
-  className: e,
-  children: t,
-  ...i
-}) {
-  const c = a ?? "div", s = o("magi-container", `magi-container--${n}`, e);
-  return /* @__PURE__ */ r(c, { className: s, ...i, children: t });
-}
-function C({
-  spacing: n = "lg",
-  surface: a = "default",
-  fullWidth: e = !1,
   as: t,
-  className: i,
+  className: a,
   children: c,
   ...s
 }) {
-  const m = t ?? "section", g = o(
+  const e = t ?? "div", i = l("magi-container", `magi-container--${n}`, a);
+  return /* @__PURE__ */ o(e, { className: i, ...s, children: c });
+}
+function j({
+  spacing: n = "lg",
+  surface: t = "default",
+  fullWidth: a = !1,
+  as: c,
+  className: s,
+  children: e,
+  ...i
+}) {
+  const r = c ?? "section", m = l(
     "magi-section",
     `magi-section--${n}`,
-    `magi-section--${a}`,
-    e && "magi-section--fullWidth",
-    i
+    `magi-section--${t}`,
+    a && "magi-section--fullWidth",
+    s
   );
-  return /* @__PURE__ */ r(m, { className: g, ...s, children: c });
+  return /* @__PURE__ */ o(r, { className: m, ...i, children: e });
 }
-function w({
+function T({
   direction: n = "column",
-  gap: a = "4",
-  align: e = "stretch",
-  wrap: t = !0,
-  as: i,
-  className: c,
-  style: s,
-  children: m,
-  ...g
+  gap: t = "4",
+  align: a = "stretch",
+  wrap: c = !0,
+  as: s,
+  className: e,
+  style: i,
+  children: r,
+  ...m
 }) {
-  const d = i ?? "div", l = n === "row" && !t ? { flexWrap: "nowrap" } : void 0, u = o(
+  const g = s ?? "div", d = n === "row" && !c ? { flexWrap: "nowrap" } : void 0, u = l(
     "magi-stack",
     n === "row" && "magi-stack--row",
-    `magi-stack--gap-${a}`,
-    `magi-stack--align-${e}`,
-    c
+    `magi-stack--gap-${t}`,
+    `magi-stack--align-${a}`,
+    e
   );
-  return /* @__PURE__ */ r(d, { className: u, style: { ...l, ...s }, ...g, children: m });
+  return /* @__PURE__ */ o(g, { className: u, style: { ...d, ...i }, ...m, children: r });
 }
-const B = b(
+const V = v(
   function({
-    variant: a = "primary",
-    size: e = "md",
-    loading: t = !1,
-    disabled: i,
-    className: c,
-    children: s,
-    type: m,
-    ...g
-  }, d) {
-    const l = o(
+    variant: t = "primary",
+    size: a = "md",
+    loading: c = !1,
+    disabled: s,
+    className: e,
+    children: i,
+    type: r,
+    ...m
+  }, g) {
+    const d = l(
       "magi-button",
+      `magi-button--${t}`,
       `magi-button--${a}`,
-      `magi-button--${e}`,
-      t && "magi-button--loading",
-      c
+      c && "magi-button--loading",
+      e
     );
-    return /* @__PURE__ */ r(
+    return /* @__PURE__ */ o(
       "button",
       {
-        ref: d,
-        className: l,
-        type: m ?? "button",
-        disabled: i || t,
-        "aria-busy": t || void 0,
-        ...g,
-        children: s
+        ref: g,
+        className: d,
+        type: r ?? "button",
+        disabled: s || c,
+        "aria-busy": c || void 0,
+        ...m,
+        children: i
       }
     );
   }
-), S = b(function({ variant: a = "default", padding: e = "md", className: t, children: i, ...c }, s) {
-  const m = o(
+), F = v(function({ variant: t = "default", padding: a = "md", className: c, children: s, ...e }, i) {
+  const r = l(
     "magi-card",
-    `magi-card--${a}`,
-    `magi-card--padding-${e}`,
-    t
+    `magi-card--${t}`,
+    `magi-card--padding-${a}`,
+    c
   );
-  return /* @__PURE__ */ r("div", { ref: s, className: m, ...c, children: i });
-}), I = b(function({ variant: a = "neutral", dot: e = !1, className: t, children: i, ...c }, s) {
-  const m = o(
+  return /* @__PURE__ */ o("div", { ref: i, className: r, ...e, children: s });
+}), R = v(function({ variant: t = "neutral", dot: a = !1, className: c, children: s, ...e }, i) {
+  const r = l(
     "magi-badge",
-    `magi-badge--${a}`,
-    t
+    `magi-badge--${t}`,
+    c
   );
-  return /* @__PURE__ */ f("span", { ref: s, className: m, ...c, children: [
-    e ? /* @__PURE__ */ r("span", { className: "magi-badge__dot", "aria-hidden": "true" }) : null,
-    i
+  return /* @__PURE__ */ p("span", { ref: i, className: r, ...e, children: [
+    a ? /* @__PURE__ */ o("span", { className: "magi-badge__dot", "aria-hidden": "true" }) : null,
+    s
   ] });
-}), E = b(
+}), _ = v(
   function({
-    children: a,
-    labelPosition: e = "right",
-    className: t,
-    disabled: i,
-    ...c
-  }, s) {
-    const m = /* @__PURE__ */ r(
+    children: t,
+    labelPosition: a = "right",
+    className: c,
+    disabled: s,
+    ...e
+  }, i) {
+    const r = /* @__PURE__ */ o(
       "input",
       {
-        ref: s,
+        ref: i,
         type: "checkbox",
-        className: o("magi-checkbox", t),
-        disabled: i,
-        ...c
+        className: l("magi-checkbox", c),
+        disabled: s,
+        ...e
       }
     );
-    return a == null ? m : /* @__PURE__ */ r(
+    return t == null ? r : /* @__PURE__ */ o(
       "label",
       {
-        className: o(
+        className: l(
           "magi-checkbox-label",
-          i && "magi-checkbox-label--disabled"
+          s && "magi-checkbox-label--disabled"
         ),
-        children: e === "left" ? /* @__PURE__ */ f(h, { children: [
-          /* @__PURE__ */ r("span", { children: a }),
-          m
-        ] }) : /* @__PURE__ */ f(h, { children: [
-          m,
-          /* @__PURE__ */ r("span", { children: a })
+        children: a === "left" ? /* @__PURE__ */ p(y, { children: [
+          /* @__PURE__ */ o("span", { children: t }),
+          r
+        ] }) : /* @__PURE__ */ p(y, { children: [
+          r,
+          /* @__PURE__ */ o("span", { children: t })
         ] })
       }
     );
   }
-), j = b(function({ inputSize: a = "md", invalid: e = !1, className: t, ...i }, c) {
-  const s = o(
+), H = v(function({ inputSize: t = "md", invalid: a = !1, className: c, ...s }, e) {
+  const i = l(
     "magi-input",
-    `magi-input--${a}`,
-    e && "magi-input--invalid",
-    t
+    `magi-input--${t}`,
+    a && "magi-input--invalid",
+    c
   );
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "input",
     {
-      ref: c,
-      className: s,
-      "aria-invalid": e || void 0,
-      ...i
+      ref: e,
+      className: i,
+      "aria-invalid": a || void 0,
+      ...s
     }
   );
 });
-function F({
+function h(...n) {
+  const t = n.filter(
+    (a) => typeof a == "string" && a.length > 0
+  );
+  return t.length > 0 ? t.join(" ") : void 0;
+}
+function M({
   label: n,
-  helper: a,
-  error: e,
-  children: t,
-  align: i = "stretch",
-  className: c,
-  helperId: s
+  helper: t,
+  error: a,
+  children: c,
+  align: s = "stretch",
+  className: e,
+  helperId: i
 }) {
-  const m = N(), g = s ?? `magi-field-${m}`;
-  return /* @__PURE__ */ f(
+  const m = `magi-field-${N()}`, g = `${m}-label`, d = i ?? `${m}-helper`, u = !!(a || t);
+  let b = c;
+  if (P(c)) {
+    const f = c.props;
+    b = $(c, {
+      id: f.id ?? m,
+      // MERGE with consumer-supplied IDs. The order is: consumer's first,
+      // then FormField's. This matches ARIA's "consumer-supplied IDs win
+      // for ordering" intuition — FormField's helpers are appended.
+      "aria-describedby": h(
+        f["aria-describedby"],
+        u ? d : void 0
+      ),
+      "aria-labelledby": h(
+        f["aria-labelledby"],
+        g
+      ),
+      // aria-invalid: when FormField has an error, force true (overriding
+      // consumer). When no error, preserve consumer's setting.
+      "aria-invalid": a ? !0 : f["aria-invalid"] ?? void 0
+    });
+  }
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: o(
+      className: l(
         "magi-field",
-        `magi-field--align-${i}`,
-        c
+        `magi-field--align-${s}`,
+        e
       ),
       children: [
-        /* @__PURE__ */ r("label", { className: "magi-field-label", children: n }),
-        t,
-        (e || a) && /* @__PURE__ */ r(
+        /* @__PURE__ */ o("label", { id: g, className: "magi-field-label", children: n }),
+        b,
+        u && /* @__PURE__ */ o(
           "span",
           {
-            id: g,
-            className: o(
+            id: d,
+            className: l(
               "magi-field-helper",
-              e && "magi-field-helper--error"
+              a && "magi-field-helper--error"
             ),
-            children: e || a
+            children: a || t
           }
         )
       ]
     }
   );
 }
-function T({
+function W({
   value: n,
-  options: a,
-  onChange: e,
-  accent: t = !1,
-  size: i = "md",
-  disabled: c = !1,
-  id: s,
-  className: m,
-  "aria-label": g,
-  children: d
+  options: t,
+  onChange: a,
+  accent: c = !1,
+  size: s = "md",
+  disabled: e = !1,
+  id: i,
+  className: r,
+  "aria-label": m,
+  children: g
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "div",
     {
       role: "radiogroup",
-      id: s,
-      "aria-label": g,
-      className: o(
+      id: i,
+      "aria-label": m,
+      className: l(
         "magi-segmented",
-        `magi-segmented--${i}`,
-        c && "magi-segmented--disabled",
-        m
+        `magi-segmented--${s}`,
+        e && "magi-segmented--disabled",
+        r
       ),
-      children: a.map((l) => {
-        const u = l.value === n, p = !!(c || l.disabled), v = () => {
-          p || u || e(l.value);
+      children: t.map((d) => {
+        const u = d.value === n, b = !!(e || d.disabled), f = () => {
+          b || u || a(d.value);
         };
-        return d ? /* @__PURE__ */ r("div", { children: d(l, { active: u, disabled: p, onSelect: v }) }, l.value) : /* @__PURE__ */ r(
+        return g ? /* @__PURE__ */ o("div", { children: g(d, { active: u, disabled: b, onSelect: f }) }, d.value) : /* @__PURE__ */ o(
           "button",
           {
             type: "button",
             role: "radio",
             "aria-checked": u,
-            disabled: p,
-            onClick: v,
-            className: o(
+            disabled: b,
+            onClick: f,
+            className: l(
               "magi-segmented-item",
               u && "magi-segmented-item--active",
-              t && "magi-segmented-item--accent"
+              c && "magi-segmented-item--accent"
             ),
-            children: l.label
+            children: d.label
           },
-          l.value
+          d.value
         );
       })
     }
   );
 }
-function _({
+function A({
   variant: n = "warning",
-  className: a,
-  children: e,
-  ...t
+  className: t,
+  children: a,
+  ...c
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "div",
     {
       role: n === "error" || n === "warning" ? "alert" : "status",
-      className: o(
+      className: l(
         "magi-banner",
         `magi-banner--${n}`,
-        a
+        t
       ),
-      ...t,
-      children: e
+      ...c,
+      children: a
     }
   );
 }
-function P({
+function D({
   title: n,
-  description: a,
-  action: e,
-  children: t,
-  className: i,
-  ...c
+  description: t,
+  action: a,
+  children: c,
+  className: s,
+  ...e
 }) {
-  const s = !!(n || a || e), m = a ?? t;
-  return /* @__PURE__ */ r(
+  const i = !!(n || t || a), r = t ?? c;
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: o(
+      className: l(
         "magi-empty",
-        s && "magi-empty--structured",
-        i
+        i && "magi-empty--structured",
+        s
       ),
-      ...c,
-      children: s ? /* @__PURE__ */ f(h, { children: [
-        n ? /* @__PURE__ */ r("p", { className: "magi-empty-title", children: n }) : null,
-        m != null ? /* @__PURE__ */ r("p", { className: "magi-empty-description", children: m }) : null,
-        e ? /* @__PURE__ */ r("div", { className: "magi-empty-action", children: e }) : null
-      ] }) : t
+      ...e,
+      children: i ? /* @__PURE__ */ p(y, { children: [
+        n ? /* @__PURE__ */ o("p", { className: "magi-empty-title", children: n }) : null,
+        r != null ? /* @__PURE__ */ o("p", { className: "magi-empty-description", children: r }) : null,
+        a ? /* @__PURE__ */ o("div", { className: "magi-empty-action", children: a }) : null
+      ] }) : c
     }
   );
 }
-const y = {
+const I = {
   green: {
     "--magi-accent": "#00c853",
     "--magi-accent-hover": "#00e676",
@@ -314,29 +341,43 @@ const y = {
     "--magi-accent-soft": "rgba(255, 255, 255, 0.08)",
     "--magi-accent-contrast": "#050505"
   }
-};
-function R({
+}, S = k(null);
+function O({
   accent: n = "green",
-  name: a,
-  tokens: e,
-  children: t
+  name: t,
+  children: a
 }) {
-  const c = { ...y[n], ...e };
-  return /* @__PURE__ */ r("div", { "data-magi-product": a, style: c, children: t });
+  const c = x(() => ({ accent: n }), [n]);
+  return C(() => {
+    if (typeof document > "u") return;
+    const s = I[n], e = document.documentElement, i = {
+      accent: e.style.getPropertyValue("--magi-accent"),
+      accentHover: e.style.getPropertyValue("--magi-accent-hover"),
+      accentSoft: e.style.getPropertyValue("--magi-accent-soft"),
+      accentContrast: e.style.getPropertyValue("--magi-accent-contrast"),
+      product: e.dataset.magiProduct
+    };
+    return e.style.setProperty("--magi-accent", s["--magi-accent"]), e.style.setProperty("--magi-accent-hover", s["--magi-accent-hover"]), e.style.setProperty("--magi-accent-soft", s["--magi-accent-soft"]), e.style.setProperty("--magi-accent-contrast", s["--magi-accent-contrast"]), t ? e.dataset.magiProduct = t : delete e.dataset.magiProduct, () => {
+      const r = (m, g) => {
+        g ? e.style.setProperty(m, g) : e.style.removeProperty(m);
+      };
+      r("--magi-accent", i.accent), r("--magi-accent-hover", i.accentHover), r("--magi-accent-soft", i.accentSoft), r("--magi-accent-contrast", i.accentContrast), i.product !== void 0 ? e.dataset.magiProduct = i.product : e.dataset.magiProduct !== void 0 && delete e.dataset.magiProduct;
+    };
+  }, [n, t]), /* @__PURE__ */ o(S.Provider, { value: c, children: a });
 }
 export {
-  I as Badge,
-  _ as Banner,
-  B as Button,
-  S as Card,
-  E as Checkbox,
-  x as Container,
-  P as EmptyState,
-  F as FormField,
-  j as Input,
-  R as ProductTheme,
-  C as Section,
-  T as Segmented,
-  w as Stack
+  R as Badge,
+  A as Banner,
+  V as Button,
+  F as Card,
+  _ as Checkbox,
+  E as Container,
+  D as EmptyState,
+  M as FormField,
+  H as Input,
+  O as ProductTheme,
+  j as Section,
+  W as Segmented,
+  T as Stack
 };
 //# sourceMappingURL=index.js.map