@amsterdamdatalabs/enact-design-system 0.1.1

package/dist/index.js

@@ -0,0 +1,749 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useState as W } from "react";
+function l(...t) {
+  return t.filter(Boolean).join(" ");
+}
+const A = "_avatar_yqge8_1", C = "_hasImage_yqge8_15", F = "_img_yqge8_19", U = "_sm_yqge8_26", R = "_md_yqge8_31", T = "_lg_yqge8_36", D = "_xl_yqge8_41", x = {
+  avatar: A,
+  hasImage: C,
+  img: F,
+  sm: U,
+  md: R,
+  lg: T,
+  xl: D
+}, E = /\s+/;
+function O(t) {
+  return t.split(E).filter(Boolean).slice(0, 2).map((n) => n[0].toUpperCase()).join("");
+}
+function te({
+  name: t = "",
+  src: n,
+  size: a = "md",
+  className: s,
+  ...c
+}) {
+  const o = O(t);
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      className: l(
+        x.avatar,
+        x[a],
+        n && x.hasImage,
+        s
+      ),
+      title: t,
+      ...c,
+      children: n ? /* @__PURE__ */ e("img", { alt: t, className: x.img, src: n }) : o || "•"
+    }
+  );
+}
+const P = "_badge_1ndhf_1", H = "_dot_1ndhf_15", G = "_neutral_1ndhf_23", J = "_brand_1ndhf_27", K = "_info_1ndhf_31", Q = "_success_1ndhf_35", V = "_warning_1ndhf_39", X = "_danger_1ndhf_43", L = {
+  badge: P,
+  dot: H,
+  neutral: G,
+  brand: J,
+  info: K,
+  success: Q,
+  warning: V,
+  danger: X
+};
+function ne({
+  tone: t = "neutral",
+  dot: n = !1,
+  className: a,
+  children: s,
+  ...c
+}) {
+  return /* @__PURE__ */ r("span", { className: l(L.badge, L[t], a), ...c, children: [
+    n && /* @__PURE__ */ e("span", { className: L.dot }),
+    s
+  ] });
+}
+const Y = "_btn_1m6dq_1", Z = "_fullWidth_1m6dq_20", tt = "_sm_1m6dq_26", nt = "_md_1m6dq_32", et = "_lg_1m6dq_38", st = "_primary_1m6dq_46", at = "_secondary_1m6dq_57", ct = "_ghost_1m6dq_71", ot = "_danger_1m6dq_82", j = {
+  btn: Y,
+  fullWidth: Z,
+  sm: tt,
+  md: nt,
+  lg: et,
+  primary: st,
+  secondary: at,
+  ghost: ct,
+  danger: ot
+};
+function ee({
+  variant: t = "primary",
+  size: n = "md",
+  iconLeft: a,
+  iconRight: s,
+  fullWidth: c = !1,
+  disabled: o = !1,
+  className: i,
+  children: d,
+  ...p
+}) {
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      className: l(
+        j.btn,
+        j[t],
+        j[n],
+        c && j.fullWidth,
+        i
+      ),
+      disabled: o,
+      type: "button",
+      ...p,
+      children: [
+        a,
+        d,
+        s
+      ]
+    }
+  );
+}
+const lt = "_card_1tzae_1", rt = "_padNone_1tzae_9", it = "_padSm_1tzae_12", _t = "_padMd_1tzae_15", dt = "_padLg_1tzae_18", ut = "_raised_1tzae_28", ht = "_sunken_1tzae_33", pt = "_inverse_1tzae_38", mt = "_interactive_1tzae_49", M = {
+  card: lt,
+  padNone: rt,
+  padSm: it,
+  padMd: _t,
+  padLg: dt,
+  default: "_default_1tzae_23",
+  raised: ut,
+  sunken: ht,
+  inverse: pt,
+  interactive: mt
+}, gt = {
+  none: "padNone",
+  sm: "padSm",
+  md: "padMd",
+  lg: "padLg"
+};
+function se({
+  variant: t = "default",
+  padding: n = "md",
+  interactive: a = !1,
+  className: s,
+  children: c,
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: l(
+        M.card,
+        M[t],
+        M[gt[n]],
+        a && M.interactive,
+        s
+      ),
+      ...o,
+      children: c
+    }
+  );
+}
+const ft = "_btn_2g73d_1", vt = "_sm_2g73d_17", bt = "_md_2g73d_21", kt = "_lg_2g73d_25", Nt = "_ghost_2g73d_31", $t = "_outline_2g73d_39", yt = "_primary_2g73d_48", z = {
+  btn: ft,
+  sm: vt,
+  md: bt,
+  lg: kt,
+  ghost: Nt,
+  outline: $t,
+  primary: yt
+};
+function ae({
+  label: t,
+  size: n = "md",
+  variant: a = "ghost",
+  disabled: s = !1,
+  className: c,
+  children: o,
+  ...i
+}) {
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      "aria-label": t,
+      className: l(z.btn, z[a], z[n], c),
+      disabled: s,
+      title: t,
+      type: "button",
+      ...i,
+      children: o
+    }
+  );
+}
+const wt = "_stat_1uc8c_1", xt = "_label_1uc8c_7", jt = "_valueRow_1uc8c_16", Mt = "_value_1uc8c_16", qt = "_delta_1uc8c_31", Lt = "_deltaUp_1uc8c_40", zt = "_deltaDown_1uc8c_43", Bt = "_deltaFlat_1uc8c_46", St = "_flip_1uc8c_50", Wt = "_caption_1uc8c_54", h = {
+  stat: wt,
+  label: xt,
+  valueRow: jt,
+  value: Mt,
+  delta: qt,
+  deltaUp: Lt,
+  deltaDown: zt,
+  deltaFlat: Bt,
+  flip: St,
+  caption: Wt
+}, It = {
+  up: "deltaUp",
+  down: "deltaDown",
+  flat: "deltaFlat"
+};
+function ce({
+  label: t,
+  value: n,
+  delta: a,
+  deltaDirection: s = "up",
+  caption: c,
+  className: o,
+  ...i
+}) {
+  return /* @__PURE__ */ r("div", { className: l(h.stat, o), ...i, children: [
+    /* @__PURE__ */ e("span", { className: h.label, children: t }),
+    /* @__PURE__ */ r("span", { className: h.valueRow, children: [
+      /* @__PURE__ */ e("span", { className: h.value, children: n }),
+      a != null && /* @__PURE__ */ r(
+        "span",
+        {
+          className: l(h.delta, h[It[s]]),
+          children: [
+            s !== "flat" && /* @__PURE__ */ e(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: s === "down" ? h.flip : void 0,
+                fill: "none",
+                height: "10",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "1.6",
+                viewBox: "0 0 10 10",
+                width: "10",
+                children: /* @__PURE__ */ e("path", { d: "M1.5 8.5l7-7M3.5 1.5h5v5" })
+              }
+            ),
+            a
+          ]
+        }
+      )
+    ] }),
+    c != null && /* @__PURE__ */ e("span", { className: h.caption, children: c })
+  ] });
+}
+const At = "_tag_11jaq_1", Ct = "_remove_11jaq_18", I = {
+  tag: At,
+  remove: Ct
+};
+function oe({ onRemove: t, className: n, children: a, ...s }) {
+  return /* @__PURE__ */ r("span", { className: l(I.tag, n), ...s, children: [
+    a,
+    t && /* @__PURE__ */ e(
+      "button",
+      {
+        "aria-label": "Remove",
+        className: I.remove,
+        onClick: t,
+        type: "button",
+        children: /* @__PURE__ */ e(
+          "svg",
+          {
+            "aria-hidden": "true",
+            fill: "none",
+            height: "9",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeWidth: "1.6",
+            viewBox: "0 0 10 10",
+            width: "9",
+            children: /* @__PURE__ */ e("path", { d: "M1.5 1.5l7 7M8.5 1.5l-7 7" })
+          }
+        )
+      }
+    )
+  ] });
+}
+const Ft = "_alert_1217n_1", Ut = "_icon_1217n_16", Rt = "_body_1217n_22", Tt = "_title_1217n_26", Dt = "_titleSpaced_1217n_29", Et = "_dismiss_1217n_33", Ot = "_info_1217n_45", Pt = "_success_1217n_50", Ht = "_warning_1217n_55", Gt = "_danger_1217n_60", m = {
+  alert: Ft,
+  icon: Ut,
+  body: Rt,
+  title: Tt,
+  titleSpaced: Dt,
+  dismiss: Et,
+  info: Ot,
+  success: Pt,
+  warning: Ht,
+  danger: Gt
+}, Jt = {
+  info: "M12 16v-4M12 8h.01M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0z",
+  success: "M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4L12 14.01l-3-3",
+  warning: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01",
+  danger: "M12 8v4M12 16h.01M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0z"
+};
+function le({
+  tone: t = "info",
+  title: n,
+  onDismiss: a,
+  className: s,
+  children: c,
+  ...o
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: l(m.alert, m[t], s),
+      role: "status",
+      ...o,
+      children: [
+        /* @__PURE__ */ e(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: m.icon,
+            fill: "none",
+            height: "18",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "2",
+            viewBox: "0 0 24 24",
+            width: "18",
+            children: /* @__PURE__ */ e("path", { d: Jt[t] })
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: m.body, children: [
+          n && /* @__PURE__ */ e(
+            "div",
+            {
+              className: l(
+                m.title,
+                !!c && m.titleSpaced
+              ),
+              children: n
+            }
+          ),
+          c
+        ] }),
+        a && /* @__PURE__ */ e(
+          "button",
+          {
+            "aria-label": "Dismiss",
+            className: m.dismiss,
+            onClick: a,
+            type: "button",
+            children: /* @__PURE__ */ e(
+              "svg",
+              {
+                "aria-hidden": "true",
+                fill: "none",
+                height: "14",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                width: "14",
+                children: /* @__PURE__ */ e("path", { d: "M18 6L6 18M6 6l12 12" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+const Kt = "_progress_tptlj_1", Qt = "_header_tptlj_7", Vt = "_percent_tptlj_16", Xt = "_track_tptlj_20", Yt = "_fill_tptlj_27", Zt = "_brand_tptlj_34", tn = "_success_tptlj_37", nn = "_warning_tptlj_40", en = "_danger_tptlj_43", sn = "_accent_tptlj_46", f = {
+  progress: Kt,
+  header: Qt,
+  percent: Vt,
+  track: Xt,
+  fill: Yt,
+  brand: Zt,
+  success: tn,
+  warning: nn,
+  danger: en,
+  accent: sn
+};
+function re({
+  value: t = 0,
+  max: n = 100,
+  tone: a = "brand",
+  label: s,
+  showValue: c = !1,
+  className: o,
+  ...i
+}) {
+  const d = Math.min(100, Math.max(0, t / n * 100));
+  return /* @__PURE__ */ r("div", { className: l(f.progress, o), ...i, children: [
+    (s || c) && /* @__PURE__ */ r("div", { className: f.header, children: [
+      /* @__PURE__ */ e("span", { children: s }),
+      c && /* @__PURE__ */ r("span", { className: f.percent, children: [
+        Math.round(d),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        "aria-valuemax": n,
+        "aria-valuenow": t,
+        className: f.track,
+        role: "progressbar",
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: l(f.fill, f[a]),
+            style: { width: `${d}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+const an = "_wrap_82rh0_1", cn = "_tip_82rh0_6", on = "_top_82rh0_34", ln = "_bottom_82rh0_39", rn = "_left_82rh0_44", _n = "_right_82rh0_49", B = {
+  wrap: an,
+  tip: cn,
+  top: on,
+  bottom: ln,
+  left: rn,
+  right: _n
+};
+function ie({
+  content: t,
+  placement: n = "top",
+  className: a,
+  children: s,
+  ...c
+}) {
+  return /* @__PURE__ */ r("span", { className: l(B.wrap, a), ...c, children: [
+    s,
+    /* @__PURE__ */ e("span", { className: l(B.tip, B[n]), role: "tooltip", children: t })
+  ] });
+}
+const dn = "_root_1t9ke_1", un = "_disabled_1t9ke_12", hn = "_input_1t9ke_18", pn = "_box_1t9ke_25", mn = "_checked_1t9ke_40", N = {
+  root: dn,
+  disabled: un,
+  input: hn,
+  box: pn,
+  checked: mn
+};
+function _e({
+  checked: t,
+  defaultChecked: n = !1,
+  onChange: a,
+  label: s,
+  disabled: c = !1,
+  className: o,
+  ...i
+}) {
+  const [d, p] = W(n), _ = t === void 0 ? d : t, k = (g) => {
+    c || (t === void 0 && p(!_), a == null || a(!_, g));
+  };
+  return /* @__PURE__ */ r(
+    "label",
+    {
+      className: l(N.root, c && N.disabled, o),
+      ...i,
+      children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            checked: _,
+            className: N.input,
+            disabled: c,
+            onChange: k,
+            type: "checkbox"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: l(N.box, _ && N.checked),
+            children: _ && /* @__PURE__ */ e(
+              "svg",
+              {
+                "aria-hidden": "true",
+                fill: "none",
+                height: "11",
+                stroke: "var(--text-on-brand)",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "3.2",
+                viewBox: "0 0 24 24",
+                width: "11",
+                children: /* @__PURE__ */ e("path", { d: "M20 6L9 17l-5-5" })
+              }
+            )
+          }
+        ),
+        s
+      ]
+    }
+  );
+}
+const gn = "_field_1d54c_1", fn = "_label_1d54c_7", vn = "_required_1d54c_14", bn = "_error_1d54c_18", kn = "_hint_1d54c_23", w = {
+  field: gn,
+  label: fn,
+  required: vn,
+  error: bn,
+  hint: kn
+};
+function Nn({ error: t, hint: n }) {
+  return t ? /* @__PURE__ */ e("span", { className: w.error, children: t }) : n ? /* @__PURE__ */ e("span", { className: w.hint, children: n }) : null;
+}
+function de({
+  label: t,
+  hint: n,
+  error: a,
+  required: s = !1,
+  htmlFor: c,
+  className: o,
+  children: i,
+  ...d
+}) {
+  return /* @__PURE__ */ r("div", { className: l(w.field, o), ...d, children: [
+    t && /* @__PURE__ */ r("label", { className: w.label, htmlFor: c, children: [
+      t,
+      s && /* @__PURE__ */ e("span", { className: w.required, children: " *" })
+    ] }),
+    i,
+    /* @__PURE__ */ e(Nn, { error: a, hint: n })
+  ] });
+}
+const $n = "_input_nhfx3_1", yn = "_invalid_nhfx3_31", wn = "_sm_nhfx3_37", xn = "_md_nhfx3_41", jn = "_lg_nhfx3_45", S = {
+  input: $n,
+  invalid: yn,
+  sm: wn,
+  md: xn,
+  lg: jn
+};
+function ue({
+  size: t = "md",
+  invalid: n = !1,
+  disabled: a = !1,
+  className: s,
+  ...c
+}) {
+  return /* @__PURE__ */ e(
+    "input",
+    {
+      "aria-invalid": n || void 0,
+      className: l(
+        S.input,
+        S[t],
+        n && S.invalid,
+        s
+      ),
+      disabled: a,
+      ...c
+    }
+  );
+}
+const Mn = "_wrap_1nxaj_1", qn = "_select_1nxaj_7", Ln = "_invalid_1nxaj_36", zn = "_chevron_1nxaj_41", Bn = "_sm_1nxaj_51", Sn = "_md_1nxaj_55", Wn = "_lg_1nxaj_59", $ = {
+  wrap: Mn,
+  select: qn,
+  invalid: Ln,
+  chevron: zn,
+  sm: Bn,
+  md: Sn,
+  lg: Wn
+};
+function he({
+  size: t = "md",
+  invalid: n = !1,
+  disabled: a = !1,
+  className: s,
+  children: c,
+  ...o
+}) {
+  return /* @__PURE__ */ r("span", { className: $.wrap, children: [
+    /* @__PURE__ */ e(
+      "select",
+      {
+        "aria-invalid": n || void 0,
+        className: l(
+          $.select,
+          $[t],
+          n && $.invalid,
+          s
+        ),
+        disabled: a,
+        ...o,
+        children: c
+      }
+    ),
+    /* @__PURE__ */ e(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className: $.chevron,
+        fill: "none",
+        height: "14",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2",
+        viewBox: "0 0 24 24",
+        width: "14",
+        children: /* @__PURE__ */ e("path", { d: "M6 9l6 6 6-6" })
+      }
+    )
+  ] });
+}
+const In = "_root_ctdye_1", An = "_disabled_ctdye_12", Cn = "_input_ctdye_17", Fn = "_track_ctdye_24", Un = "_on_ctdye_34", Rn = "_knob_ctdye_38", v = {
+  root: In,
+  disabled: An,
+  input: Cn,
+  track: Fn,
+  on: Un,
+  knob: Rn
+};
+function pe({
+  checked: t,
+  defaultChecked: n = !1,
+  onChange: a,
+  label: s,
+  disabled: c = !1,
+  className: o,
+  ...i
+}) {
+  const [d, p] = W(n), _ = t === void 0 ? d : t, k = (g) => {
+    c || (t === void 0 && p(!_), a == null || a(!_, g));
+  };
+  return /* @__PURE__ */ r(
+    "label",
+    {
+      className: l(v.root, c && v.disabled, o),
+      ...i,
+      children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            "aria-checked": _,
+            checked: _,
+            className: v.input,
+            disabled: c,
+            onChange: k,
+            role: "switch",
+            type: "checkbox"
+          }
+        ),
+        /* @__PURE__ */ e("span", { "aria-hidden": "true", className: l(v.track, _ && v.on), children: /* @__PURE__ */ e("span", { className: v.knob }) }),
+        s
+      ]
+    }
+  );
+}
+const Tn = "_list_1e7it_1", Dn = "_item_1e7it_12", En = "_current_1e7it_18", On = "_link_1e7it_23", Pn = "_sep_1e7it_34", y = {
+  list: Tn,
+  item: Dn,
+  current: En,
+  link: On,
+  sep: Pn
+};
+function me({ items: t, className: n, ...a }) {
+  return /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", className: n, ...a, children: /* @__PURE__ */ e("ol", { className: y.list, children: t.map((s, c) => {
+    const o = c === t.length - 1;
+    return /* @__PURE__ */ r(
+      "li",
+      {
+        className: y.item,
+        children: [
+          o ? /* @__PURE__ */ e("span", { "aria-current": "page", className: y.current, children: s.label }) : /* @__PURE__ */ e(
+            "a",
+            {
+              className: y.link,
+              href: s.href || "#",
+              onClick: s.onClick,
+              children: s.label
+            }
+          ),
+          !o && /* @__PURE__ */ e(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: y.sep,
+              fill: "none",
+              height: "12",
+              stroke: "currentColor",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              viewBox: "0 0 24 24",
+              width: "12",
+              children: /* @__PURE__ */ e("path", { d: "M9 18l6-6-6-6" })
+            }
+          )
+        ]
+      },
+      `${s.label}:${s.href ?? ""}`
+    );
+  }) }) });
+}
+const Hn = "_tablist_1khzs_1", Gn = "_tab_1khzs_1", Jn = "_active_1khzs_24", Kn = "_sm_1khzs_34", Qn = "_md_1khzs_38", Vn = "_count_1khzs_44", Xn = "_countActive_1khzs_53", b = {
+  tablist: Hn,
+  tab: Gn,
+  active: Jn,
+  sm: Kn,
+  md: Qn,
+  count: Vn,
+  countActive: Xn
+};
+function ge({
+  items: t,
+  active: n,
+  defaultActive: a,
+  onChange: s,
+  size: c = "md",
+  className: o,
+  ...i
+}) {
+  var g;
+  const [d, p] = W(a ?? ((g = t[0]) == null ? void 0 : g.id)), _ = n === void 0 ? d : n, k = (u) => {
+    n === void 0 && p(u), s == null || s(u);
+  };
+  return /* @__PURE__ */ e("div", { className: l(b.tablist, o), role: "tablist", ...i, children: t.map((u) => {
+    const q = u.id === _;
+    return /* @__PURE__ */ r(
+      "button",
+      {
+        "aria-selected": q,
+        className: l(b.tab, b[c], q && b.active),
+        onClick: () => k(u.id),
+        role: "tab",
+        type: "button",
+        children: [
+          u.label,
+          u.count !== void 0 && /* @__PURE__ */ e(
+            "span",
+            {
+              className: l(b.count, q && b.countActive),
+              children: u.count
+            }
+          )
+        ]
+      },
+      u.id
+    );
+  }) });
+}
+export {
+  le as Alert,
+  te as Avatar,
+  ne as Badge,
+  me as Breadcrumb,
+  ee as Button,
+  se as Card,
+  _e as Checkbox,
+  de as Field,
+  ae as IconButton,
+  ue as Input,
+  re as Progress,
+  he as Select,
+  ce as Stat,
+  pe as Switch,
+  ge as Tabs,
+  oe as Tag,
+  ie as Tooltip
+};