@dillingerstaffing/strand-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1364 @@
+import { jsxs as _, jsx as s } from "preact/jsx-runtime";
+import { forwardRef as p } from "preact/compat";
+import { useRef as k, useCallback as b, useEffect as x, useState as B, useContext as R } from "preact/hooks";
+import { createContext as I } from "preact";
+const E = p(
+  ({
+    variant: a = "primary",
+    size: t = "md",
+    loading: e = !1,
+    iconOnly: n = !1,
+    fullWidth: i = !1,
+    disabled: o = !1,
+    className: r = "",
+    children: l,
+    onClick: c,
+    type: u = "button",
+    ...d
+  }, h) => {
+    const m = o || e, f = [
+      "strand-btn",
+      `strand-btn--${a}`,
+      `strand-btn--${t}`,
+      n && "strand-btn--icon-only",
+      i && "strand-btn--full-width",
+      e && "strand-btn--loading",
+      r
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _(
+      "button",
+      {
+        ref: h,
+        type: u,
+        className: f,
+        disabled: m,
+        "aria-disabled": m ? "true" : void 0,
+        "aria-busy": e ? "true" : void 0,
+        onClick: m ? void 0 : c,
+        ...d,
+        children: [
+          e && /* @__PURE__ */ s("span", { className: "strand-btn__spinner", "aria-hidden": "true" }),
+          /* @__PURE__ */ s(
+            "span",
+            {
+              className: "strand-btn__content",
+              style: e ? { visibility: "hidden" } : void 0,
+              children: l
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+E.displayName = "Button";
+const K = p(
+  ({
+    type: a = "text",
+    error: t = !1,
+    leadingAddon: e,
+    trailingAddon: n,
+    className: i = "",
+    disabled: o,
+    ...r
+  }, l) => {
+    const c = [
+      "strand-input",
+      t && "strand-input--error",
+      o && "strand-input--disabled",
+      e && "strand-input--has-leading",
+      n && "strand-input--has-trailing",
+      i
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("div", { className: c, children: [
+      e && /* @__PURE__ */ s("span", { className: "strand-input__leading", "aria-hidden": "true", children: e }),
+      /* @__PURE__ */ s(
+        "input",
+        {
+          ref: l,
+          type: a,
+          className: "strand-input__field",
+          disabled: o,
+          "aria-invalid": t ? "true" : void 0,
+          ...r
+        }
+      ),
+      n && /* @__PURE__ */ s("span", { className: "strand-input__trailing", "aria-hidden": "true", children: n })
+    ] });
+  }
+);
+K.displayName = "Input";
+const A = p(
+  ({
+    autoResize: a = !1,
+    showCount: t = !1,
+    error: e = !1,
+    maxLength: n,
+    disabled: i,
+    className: o = "",
+    value: r,
+    onInput: l,
+    ...c
+  }, u) => {
+    const d = k(null), h = b(
+      (g) => {
+        d.current = g, typeof u == "function" ? u(g) : u && (u.current = g);
+      },
+      [u]
+    ), m = b(
+      (g) => {
+        a && d.current && (d.current.style.height = "auto", d.current.style.height = `${d.current.scrollHeight}px`), l && l(g);
+      },
+      [a, l]
+    ), f = [
+      "strand-textarea",
+      e && "strand-textarea--error",
+      i && "strand-textarea--disabled",
+      a && "strand-textarea--auto-resize",
+      o
+    ].filter(Boolean).join(" "), N = typeof r == "string" ? r.length : 0;
+    return /* @__PURE__ */ _("div", { className: f, children: [
+      /* @__PURE__ */ s(
+        "textarea",
+        {
+          ref: h,
+          className: "strand-textarea__field",
+          disabled: i,
+          "aria-invalid": e ? "true" : void 0,
+          maxLength: n,
+          value: r,
+          onInput: m,
+          ...c
+        }
+      ),
+      t && n != null && /* @__PURE__ */ _("span", { className: "strand-textarea__count", "aria-live": "polite", children: [
+        N,
+        "/",
+        n
+      ] })
+    ] });
+  }
+);
+A.displayName = "Textarea";
+const L = p(
+  ({
+    options: a,
+    value: t,
+    onChange: e,
+    disabled: n,
+    error: i = !1,
+    placeholder: o,
+    className: r = "",
+    ...l
+  }, c) => {
+    const u = [
+      "strand-select",
+      i && "strand-select--error",
+      n && "strand-select--disabled",
+      r
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("div", { className: u, children: [
+      /* @__PURE__ */ _(
+        "select",
+        {
+          ref: c,
+          className: "strand-select__field",
+          value: t,
+          onChange: e,
+          disabled: n,
+          "aria-invalid": i ? "true" : void 0,
+          ...l,
+          children: [
+            o && /* @__PURE__ */ s("option", { value: "", disabled: !0, children: o }),
+            a.map((d) => /* @__PURE__ */ s("option", { value: d.value, children: d.label }, d.value))
+          ]
+        }
+      ),
+      /* @__PURE__ */ s("span", { className: "strand-select__arrow", "aria-hidden": "true" })
+    ] });
+  }
+);
+L.displayName = "Select";
+const M = p(
+  ({
+    checked: a = !1,
+    indeterminate: t = !1,
+    onChange: e,
+    disabled: n = !1,
+    label: i,
+    className: o = "",
+    ...r
+  }, l) => {
+    const c = k(null);
+    x(() => {
+      const f = typeof l == "function" ? c.current : (l == null ? void 0 : l.current) ?? c.current;
+      f && (f.indeterminate = t);
+    }, [t, l]);
+    const u = [
+      "strand-checkbox",
+      a && "strand-checkbox--checked",
+      t && "strand-checkbox--indeterminate",
+      n && "strand-checkbox--disabled",
+      o
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _(
+      "label",
+      {
+        className: u,
+        onKeyDown: (f) => {
+          if (f.key === " " && !n) {
+            f.preventDefault();
+            const N = c.current;
+            N && N.click();
+          }
+        },
+        children: [
+          /* @__PURE__ */ s(
+            "input",
+            {
+              ref: (f) => {
+                c.current = f, typeof l == "function" ? l(f) : l && (l.current = f);
+              },
+              type: "checkbox",
+              className: "strand-checkbox__native",
+              checked: a,
+              disabled: n,
+              onChange: n ? void 0 : e,
+              "aria-checked": t ? "mixed" : a ? "true" : "false",
+              role: "checkbox",
+              ...r
+            }
+          ),
+          /* @__PURE__ */ s("span", { className: "strand-checkbox__control", "aria-hidden": "true", children: t ? /* @__PURE__ */ s(
+            "svg",
+            {
+              className: "strand-checkbox__icon",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              children: /* @__PURE__ */ s(
+                "line",
+                {
+                  x1: "4",
+                  y1: "8",
+                  x2: "12",
+                  y2: "8",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round"
+                }
+              )
+            }
+          ) : a ? /* @__PURE__ */ s(
+            "svg",
+            {
+              className: "strand-checkbox__icon",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              children: /* @__PURE__ */ s(
+                "path",
+                {
+                  d: "M3.5 8L6.5 11L12.5 5",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }
+              )
+            }
+          ) : null }),
+          i && /* @__PURE__ */ s("span", { className: "strand-checkbox__label", children: i })
+        ]
+      }
+    );
+  }
+);
+M.displayName = "Checkbox";
+const P = p(
+  ({
+    checked: a = !1,
+    onChange: t,
+    disabled: e = !1,
+    label: n,
+    name: i,
+    value: o,
+    className: r = "",
+    ...l
+  }, c) => {
+    const u = [
+      "strand-radio",
+      a && "strand-radio--checked",
+      e && "strand-radio--disabled",
+      r
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("label", { className: u, children: [
+      /* @__PURE__ */ s(
+        "input",
+        {
+          ref: c,
+          type: "radio",
+          className: "strand-radio__native",
+          checked: a,
+          disabled: e,
+          onChange: e ? void 0 : t,
+          name: i,
+          value: o,
+          ...l
+        }
+      ),
+      /* @__PURE__ */ s("span", { className: "strand-radio__control", "aria-hidden": "true", children: /* @__PURE__ */ s("span", { className: "strand-radio__dot" }) }),
+      n && /* @__PURE__ */ s("span", { className: "strand-radio__label", children: n })
+    ] });
+  }
+);
+P.displayName = "Radio";
+const F = p(
+  ({
+    checked: a = !1,
+    onChange: t,
+    disabled: e = !1,
+    label: n,
+    className: i = "",
+    ...o
+  }, r) => {
+    const l = [
+      "strand-switch",
+      a && "strand-switch--checked",
+      e && "strand-switch--disabled",
+      i
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("label", { className: l, children: [
+      /* @__PURE__ */ s(
+        "button",
+        {
+          ref: r,
+          type: "button",
+          role: "switch",
+          className: "strand-switch__track",
+          "aria-checked": a ? "true" : "false",
+          disabled: e,
+          onClick: () => {
+            !e && t && t(!a);
+          },
+          onKeyDown: (d) => {
+            (d.key === " " || d.key === "Enter") && !e && (d.preventDefault(), t && t(!a));
+          },
+          ...o,
+          children: /* @__PURE__ */ s("span", { className: "strand-switch__thumb", "aria-hidden": "true" })
+        }
+      ),
+      n && /* @__PURE__ */ s("span", { className: "strand-switch__label", children: n })
+    ] });
+  }
+);
+F.displayName = "Switch";
+const q = p(
+  ({
+    min: a = 0,
+    max: t = 100,
+    step: e = 1,
+    value: n,
+    onChange: i,
+    disabled: o,
+    className: r = "",
+    ...l
+  }, c) => {
+    const u = [
+      "strand-slider",
+      o && "strand-slider--disabled",
+      r
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s("div", { className: u, children: /* @__PURE__ */ s(
+      "input",
+      {
+        ref: c,
+        type: "range",
+        className: "strand-slider__field",
+        min: a,
+        max: t,
+        step: e,
+        value: n,
+        onChange: i,
+        disabled: o,
+        "aria-valuemin": a,
+        "aria-valuemax": t,
+        "aria-valuenow": n,
+        ...l
+      }
+    ) });
+  }
+);
+q.displayName = "Slider";
+const G = p(
+  ({
+    label: a,
+    htmlFor: t,
+    hint: e,
+    error: n,
+    required: i = !1,
+    className: o = "",
+    children: r
+  }, l) => {
+    const c = [
+      "strand-form-field",
+      n && "strand-form-field--error",
+      o
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("div", { ref: l, className: c, children: [
+      /* @__PURE__ */ _("label", { className: "strand-form-field__label", htmlFor: t, children: [
+        a,
+        i && /* @__PURE__ */ s("span", { className: "strand-form-field__required", "aria-hidden": "true", children: "*" })
+      ] }),
+      /* @__PURE__ */ s("div", { className: "strand-form-field__control", children: r }),
+      n ? /* @__PURE__ */ s(
+        "p",
+        {
+          className: "strand-form-field__error",
+          id: `${t}-error`,
+          role: "alert",
+          children: n
+        }
+      ) : e ? /* @__PURE__ */ s("p", { className: "strand-form-field__hint", id: `${t}-hint`, children: e }) : null
+    ] });
+  }
+);
+G.displayName = "FormField";
+const H = p(
+  ({
+    variant: a = "elevated",
+    padding: t = "md",
+    className: e = "",
+    children: n,
+    ...i
+  }, o) => {
+    const r = [
+      "strand-card",
+      `strand-card--${a}`,
+      `strand-card--pad-${t}`,
+      e
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s("div", { ref: o, className: r, ...i, children: n });
+  }
+);
+H.displayName = "Card";
+const U = p(
+  ({
+    variant: a = "count",
+    status: t = "default",
+    count: e,
+    maxCount: n = 99,
+    className: i = "",
+    children: o,
+    ...r
+  }, l) => {
+    const c = o != null && o !== !1, u = a === "count" ? e != null && e > n ? `${n}+` : e : null, d = a === "dot" ? "Status indicator" : e != null ? `${e} notifications` : void 0, h = [
+      "strand-badge__indicator",
+      `strand-badge--${a}`,
+      `strand-badge--${t}`
+    ].filter(Boolean).join(" "), m = /* @__PURE__ */ s("span", { className: h, "aria-label": d, role: "status", children: u });
+    if (!c) {
+      const N = [
+        "strand-badge",
+        "strand-badge--inline",
+        i
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ s("span", { ref: l, className: N, ...r, children: m });
+    }
+    const f = ["strand-badge", i].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("span", { ref: l, className: f, ...r, children: [
+      o,
+      m
+    ] });
+  }
+);
+U.displayName = "Badge";
+const V = p(
+  ({
+    src: a,
+    alt: t = "",
+    initials: e = "",
+    size: n = "md",
+    className: i = "",
+    ...o
+  }, r) => {
+    const [l, c] = B(!1), u = b(() => {
+      c(!0);
+    }, []), d = a && !l, h = e.slice(0, 2).toUpperCase(), m = [
+      "strand-avatar",
+      `strand-avatar--${n}`,
+      i
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s("div", { ref: r, className: m, role: "img", "aria-label": t || h, ...o, children: d ? /* @__PURE__ */ s(
+      "img",
+      {
+        className: "strand-avatar__img",
+        src: a,
+        alt: t,
+        onError: u
+      }
+    ) : /* @__PURE__ */ s("span", { className: "strand-avatar__initials", "aria-hidden": "true", children: h }) });
+  }
+);
+V.displayName = "Avatar";
+const z = p(
+  ({
+    variant: a = "solid",
+    status: t = "default",
+    removable: e = !1,
+    onRemove: n,
+    className: i = "",
+    children: o,
+    ...r
+  }, l) => {
+    const c = [
+      "strand-tag",
+      `strand-tag--${a}`,
+      `strand-tag--${t}`,
+      i
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("span", { ref: l, className: c, ...r, children: [
+      /* @__PURE__ */ s("span", { className: "strand-tag__text", children: o }),
+      e && /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          className: "strand-tag__remove",
+          "aria-label": "Remove",
+          onClick: n,
+          children: /* @__PURE__ */ s(
+            "svg",
+            {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ s(
+                "path",
+                {
+                  d: "M3 3l6 6M9 3l-6 6",
+                  stroke: "currentColor",
+                  "stroke-width": "1.5",
+                  "stroke-linecap": "round"
+                }
+              )
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+z.displayName = "Tag";
+const O = p(
+  ({ columns: a, data: t, onSort: e, className: n = "", ...i }, o) => {
+    const [r, l] = B(null), [c, u] = B("asc"), d = b(
+      (m) => {
+        const f = r === m && c === "asc" ? "desc" : "asc";
+        l(m), u(f), e == null || e(m, f);
+      },
+      [r, c, e]
+    ), h = ["strand-table-wrapper", n].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s("div", { ref: o, className: h, ...i, children: /* @__PURE__ */ _("table", { className: "strand-table", children: [
+      /* @__PURE__ */ s("thead", { className: "strand-table__head", children: /* @__PURE__ */ s("tr", { children: a.map((m) => /* @__PURE__ */ s(
+        "th",
+        {
+          className: "strand-table__th",
+          style: m.width ? { width: m.width } : void 0,
+          children: m.sortable ? /* @__PURE__ */ _(
+            "button",
+            {
+              type: "button",
+              className: "strand-table__sort-btn",
+              onClick: () => d(m.key),
+              "aria-label": `Sort by ${m.header}`,
+              children: [
+                m.header,
+                /* @__PURE__ */ s(
+                  "span",
+                  {
+                    className: "strand-table__sort-indicator",
+                    "aria-hidden": "true",
+                    children: r === m.key ? c === "asc" ? "↑" : "↓" : "↕"
+                  }
+                )
+              ]
+            }
+          ) : m.header
+        },
+        m.key
+      )) }) }),
+      /* @__PURE__ */ s("tbody", { className: "strand-table__body", children: t.map((m, f) => /* @__PURE__ */ s("tr", { className: "strand-table__row", children: a.map((N) => /* @__PURE__ */ s("td", { className: "strand-table__td", children: m[N.key] }, N.key)) }, f)) })
+    ] }) });
+  }
+);
+O.displayName = "Table";
+const W = p(
+  ({ label: a, value: t, className: e = "", ...n }, i) => {
+    const o = ["strand-data-readout", e].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("div", { ref: i, className: o, ...n, children: [
+      /* @__PURE__ */ s("span", { className: "strand-data-readout__label", children: a }),
+      /* @__PURE__ */ s("span", { className: "strand-data-readout__value", children: t })
+    ] });
+  }
+);
+W.displayName = "DataReadout";
+const Z = p(
+  ({
+    direction: a = "vertical",
+    gap: t = 4,
+    align: e = "stretch",
+    wrap: n = !1,
+    justify: i,
+    className: o = "",
+    style: r,
+    children: l,
+    ...c
+  }, u) => {
+    const d = [
+      "strand-stack",
+      `strand-stack--${a}`,
+      e !== "stretch" && `strand-stack--align-${e}`,
+      i && `strand-stack--justify-${i}`,
+      n && "strand-stack--wrap",
+      o
+    ].filter(Boolean).join(" "), h = {
+      gap: `var(--strand-space-${t})`
+    };
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: u,
+        className: d,
+        style: { ...h, ...r },
+        ...c,
+        children: l
+      }
+    );
+  }
+);
+Z.displayName = "Stack";
+const J = p(
+  ({
+    columns: a = 1,
+    gap: t = 4,
+    className: e = "",
+    style: n,
+    children: i,
+    ...o
+  }, r) => {
+    const l = ["strand-grid", e].filter(Boolean).join(" "), c = {
+      gridTemplateColumns: `repeat(${a}, 1fr)`,
+      gap: `var(--strand-space-${t})`
+    };
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: r,
+        className: l,
+        style: { ...c, ...n },
+        ...o,
+        children: i
+      }
+    );
+  }
+);
+J.displayName = "Grid";
+const Q = p(
+  ({
+    size: a = "default",
+    className: t = "",
+    children: e,
+    ...n
+  }, i) => {
+    const o = [
+      "strand-container",
+      `strand-container--${a}`,
+      t
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s("div", { ref: i, className: o, ...n, children: e });
+  }
+);
+Q.displayName = "Container";
+const X = p(
+  ({ direction: a = "horizontal", label: t, className: e = "" }, n) => {
+    if (a === "vertical") {
+      const r = [
+        "strand-divider",
+        "strand-divider--vertical",
+        e
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ s(
+        "div",
+        {
+          ref: n,
+          role: "separator",
+          "aria-orientation": "vertical",
+          className: r
+        }
+      );
+    }
+    if (t) {
+      const r = [
+        "strand-divider",
+        "strand-divider--horizontal",
+        "strand-divider--labeled",
+        e
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ _(
+        "div",
+        {
+          ref: n,
+          role: "separator",
+          "aria-orientation": "horizontal",
+          className: r,
+          children: [
+            /* @__PURE__ */ s("span", { className: "strand-divider__line" }),
+            /* @__PURE__ */ s("span", { className: "strand-divider__label", children: t }),
+            /* @__PURE__ */ s("span", { className: "strand-divider__line" })
+          ]
+        }
+      );
+    }
+    const o = [
+      "strand-divider",
+      "strand-divider--horizontal",
+      e
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s(
+      "hr",
+      {
+        ref: n,
+        role: "separator",
+        "aria-orientation": "horizontal",
+        className: o
+      }
+    );
+  }
+);
+X.displayName = "Divider";
+const Y = p(
+  ({
+    variant: a = "standard",
+    background: t = "primary",
+    className: e = "",
+    children: n,
+    ...i
+  }, o) => {
+    const r = [
+      "strand-section",
+      `strand-section--${a}`,
+      `strand-section--bg-${t}`,
+      e
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s("section", { ref: o, className: r, ...i, children: n });
+  }
+);
+Y.displayName = "Section";
+const aa = p(
+  ({ href: a, external: t = !1, className: e = "", children: n, ...i }, o) => {
+    const r = ["strand-link", e].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s(
+      "a",
+      {
+        ref: o,
+        href: a,
+        className: r,
+        ...t && { target: "_blank", rel: "noopener noreferrer" },
+        ...i,
+        children: n
+      }
+    );
+  }
+);
+aa.displayName = "Link";
+const ea = p(
+  ({ tabs: a, activeTab: t, onChange: e, className: n = "", ...i }, o) => {
+    const r = k(null), l = ["strand-tabs", n].filter(Boolean).join(" "), c = b(
+      (d) => {
+        var m, f;
+        const h = a[d];
+        if (h) {
+          e(h.id);
+          const N = (m = r.current) == null ? void 0 : m.querySelectorAll(
+            '[role="tab"]'
+          );
+          (f = N == null ? void 0 : N[d]) == null || f.focus();
+        }
+      },
+      [a, e]
+    ), u = b(
+      (d) => {
+        const h = a.findIndex((f) => f.id === t);
+        let m = null;
+        switch (d.key) {
+          case "ArrowRight":
+            m = (h + 1) % a.length;
+            break;
+          case "ArrowLeft":
+            m = (h - 1 + a.length) % a.length;
+            break;
+          case "Home":
+            m = 0;
+            break;
+          case "End":
+            m = a.length - 1;
+            break;
+          default:
+            return;
+        }
+        d.preventDefault(), c(m);
+      },
+      [a, t, c]
+    );
+    return /* @__PURE__ */ _("div", { ref: o, className: l, ...i, children: [
+      /* @__PURE__ */ s(
+        "div",
+        {
+          ref: r,
+          role: "tablist",
+          onKeyDown: u,
+          children: a.map((d) => {
+            const h = d.id === t, m = [
+              "strand-tabs__tab",
+              h && "strand-tabs__tab--active"
+            ].filter(Boolean).join(" ");
+            return /* @__PURE__ */ s(
+              "button",
+              {
+                id: `tab-${d.id}`,
+                role: "tab",
+                type: "button",
+                className: m,
+                "aria-selected": h ? "true" : "false",
+                "aria-controls": `panel-${d.id}`,
+                tabIndex: h ? 0 : -1,
+                onClick: () => e(d.id),
+                children: d.label
+              },
+              d.id
+            );
+          })
+        }
+      ),
+      a.map((d) => {
+        const h = d.id === t;
+        return /* @__PURE__ */ s(
+          "div",
+          {
+            id: `panel-${d.id}`,
+            role: "tabpanel",
+            "aria-labelledby": `tab-${d.id}`,
+            hidden: !h,
+            tabIndex: 0,
+            children: d.content
+          },
+          d.id
+        );
+      })
+    ] });
+  }
+);
+ea.displayName = "Tabs";
+const sa = p(
+  ({ items: a, separator: t = "/", className: e = "", ...n }, i) => {
+    const o = ["strand-breadcrumb", e].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s("nav", { ref: i, "aria-label": "Breadcrumb", className: o, ...n, children: /* @__PURE__ */ s("ol", { className: "strand-breadcrumb__list", children: a.map((r, l) => {
+      const c = l === a.length - 1;
+      return /* @__PURE__ */ _("li", { className: "strand-breadcrumb__item", children: [
+        l > 0 && /* @__PURE__ */ s("span", { className: "strand-breadcrumb__separator", "aria-hidden": "true", children: t }),
+        c ? /* @__PURE__ */ s(
+          "span",
+          {
+            className: "strand-breadcrumb__current",
+            "aria-current": "page",
+            children: r.label
+          }
+        ) : /* @__PURE__ */ s("a", { href: r.href, className: "strand-breadcrumb__link", children: r.label })
+      ] }, `${r.label}-${l}`);
+    }) }) });
+  }
+);
+sa.displayName = "Breadcrumb";
+const ta = p(
+  ({ logo: a, items: t = [], actions: e, className: n = "", ...i }, o) => {
+    const [r, l] = B(!1), c = b(() => {
+      l((d) => !d);
+    }, []), u = ["strand-nav", n].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("nav", { ref: o, className: u, "aria-label": "Main navigation", ...i, children: [
+      /* @__PURE__ */ _("div", { className: "strand-nav__inner", children: [
+        a && /* @__PURE__ */ s("div", { className: "strand-nav__logo", children: a }),
+        /* @__PURE__ */ s("div", { className: "strand-nav__items", children: t.map((d) => {
+          const h = [
+            "strand-nav__link",
+            d.active && "strand-nav__link--active"
+          ].filter(Boolean).join(" ");
+          return /* @__PURE__ */ s(
+            "a",
+            {
+              href: d.href,
+              className: h,
+              "aria-current": d.active ? "page" : void 0,
+              children: d.label
+            },
+            d.href
+          );
+        }) }),
+        e && /* @__PURE__ */ s("div", { className: "strand-nav__actions", children: e }),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: "strand-nav__hamburger",
+            "aria-expanded": r ? "true" : "false",
+            "aria-label": r ? "Close menu" : "Menu",
+            onClick: c,
+            children: /* @__PURE__ */ s("span", { className: "strand-nav__hamburger-icon", "aria-hidden": "true" })
+          }
+        )
+      ] }),
+      r && /* @__PURE__ */ s("div", { className: "strand-nav__mobile-menu", children: t.map((d) => {
+        const h = [
+          "strand-nav__mobile-link",
+          d.active && "strand-nav__mobile-link--active"
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ s(
+          "a",
+          {
+            href: d.href,
+            className: h,
+            "aria-current": d.active ? "page" : void 0,
+            children: d.label
+          },
+          d.href
+        );
+      }) })
+    ] });
+  }
+);
+ta.displayName = "Nav";
+const S = I(null);
+function ya() {
+  const a = R(S);
+  if (!a)
+    throw new Error("useToast must be used within a ToastProvider");
+  return a;
+}
+let na = 0;
+const ra = ({ children: a, className: t = "" }) => {
+  const [e, n] = B([]), i = b((l) => {
+    n((c) => c.filter((u) => u.id !== l));
+  }, []), o = b((l) => {
+    const c = {
+      id: ++na,
+      message: l.message,
+      status: l.status ?? "info",
+      duration: l.duration ?? 5e3
+    };
+    n((u) => [...u, c]);
+  }, []), r = ["strand-toast__container", t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ _(S.Provider, { value: { toast: o }, children: [
+    a,
+    e.length > 0 && /* @__PURE__ */ s("div", { className: r, children: e.map((l) => /* @__PURE__ */ s(
+      la,
+      {
+        entry: l,
+        onDismiss: () => i(l.id)
+      },
+      l.id
+    )) })
+  ] });
+};
+ra.displayName = "ToastProvider";
+function la({ entry: a, onDismiss: t }) {
+  const e = k(null);
+  x(() => (a.duration > 0 && (e.current = setTimeout(t, a.duration)), () => {
+    e.current !== null && clearTimeout(e.current);
+  }), [a.duration, t]);
+  const n = a.status === "error" || a.status === "warning", i = ["strand-toast", `strand-toast--${a.status}`].filter(Boolean).join(" ");
+  return /* @__PURE__ */ _(
+    "div",
+    {
+      className: i,
+      role: "status",
+      "aria-live": n ? "assertive" : "polite",
+      children: [
+        /* @__PURE__ */ s("span", { className: "strand-toast__message", children: a.message }),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: "strand-toast__dismiss",
+            "aria-label": "Dismiss",
+            onClick: t,
+            children: "×"
+          }
+        )
+      ]
+    }
+  );
+}
+const ia = p(
+  ({ status: a = "info", message: t, onDismiss: e, className: n = "", ...i }, o) => {
+    const r = a === "error" || a === "warning", l = [
+      "strand-toast",
+      `strand-toast--${a}`,
+      n
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _(
+      "div",
+      {
+        ref: o,
+        className: l,
+        role: "status",
+        "aria-live": r ? "assertive" : "polite",
+        ...i,
+        children: [
+          /* @__PURE__ */ s("span", { className: "strand-toast__message", children: t }),
+          e && /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              className: "strand-toast__dismiss",
+              "aria-label": "Dismiss",
+              onClick: e,
+              children: "×"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ia.displayName = "Toast";
+const oa = p(
+  ({
+    status: a = "info",
+    dismissible: t = !1,
+    onDismiss: e,
+    className: n = "",
+    children: i,
+    ...o
+  }, r) => {
+    const l = a === "error" || a === "warning" ? "alert" : "status", c = [
+      "strand-alert",
+      `strand-alert--${a}`,
+      n
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("div", { ref: r, className: c, role: l, ...o, children: [
+      /* @__PURE__ */ s("div", { className: "strand-alert__content", children: i }),
+      t && /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          className: "strand-alert__dismiss",
+          "aria-label": "Dismiss",
+          onClick: e,
+          children: "×"
+        }
+      )
+    ] });
+  }
+);
+oa.displayName = "Alert";
+const T = 'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])';
+let da = 0;
+const ca = p(
+  ({
+    open: a,
+    onClose: t,
+    title: e,
+    closeOnOutsideClick: n = !0,
+    closeOnEscape: i = !0,
+    className: o = "",
+    children: r,
+    ...l
+  }, c) => {
+    const u = k(null), d = k(null), m = k(`strand-dialog-title-${++da}`).current;
+    x(() => {
+      if (!a) return;
+      d.current = document.activeElement;
+      const v = requestAnimationFrame(() => {
+        const y = u.current;
+        if (!y) return;
+        const w = y.querySelectorAll(T);
+        w.length > 0 ? w[0].focus() : y.focus();
+      });
+      return () => {
+        cancelAnimationFrame(v);
+        const y = d.current;
+        y && y instanceof HTMLElement && y.focus();
+      };
+    }, [a]), x(() => {
+      if (!a) return;
+      const v = document.body.style.overflow;
+      return document.body.style.overflow = "hidden", () => {
+        document.body.style.overflow = v;
+      };
+    }, [a]);
+    const f = b(
+      (v) => {
+        if (v.key === "Escape" && i) {
+          v.stopPropagation(), t();
+          return;
+        }
+        if (v.key === "Tab") {
+          const y = u.current;
+          if (!y) return;
+          const w = Array.from(
+            y.querySelectorAll(T)
+          );
+          if (w.length === 0) return;
+          const j = w[0], C = w[w.length - 1];
+          v.shiftKey ? document.activeElement === j && (v.preventDefault(), C.focus()) : document.activeElement === C && (v.preventDefault(), j.focus());
+        }
+      },
+      [i, t]
+    ), N = b(
+      (v) => {
+        n && v.target === v.currentTarget && t();
+      },
+      [n, t]
+    );
+    if (!a) return null;
+    const g = ["strand-dialog__panel", o].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        className: "strand-dialog__backdrop",
+        onClick: N,
+        onKeyDown: f,
+        children: /* @__PURE__ */ _(
+          "div",
+          {
+            ref: (v) => {
+              u.current = v, typeof c == "function" ? c(v) : c && (c.current = v);
+            },
+            className: g,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": e ? m : void 0,
+            tabIndex: -1,
+            ...l,
+            children: [
+              e && /* @__PURE__ */ s("div", { className: "strand-dialog__header", children: /* @__PURE__ */ s("h2", { id: m, className: "strand-dialog__title", children: e }) }),
+              /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  className: "strand-dialog__close",
+                  "aria-label": "Close",
+                  onClick: t,
+                  children: "×"
+                }
+              ),
+              /* @__PURE__ */ s("div", { className: "strand-dialog__body", children: r })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ca.displayName = "Dialog";
+let ua = 0;
+const ma = p(
+  ({
+    content: a,
+    position: t = "top",
+    delay: e = 200,
+    className: n = "",
+    children: i,
+    ...o
+  }, r) => {
+    const [l, c] = B(!1), u = k(null), h = k(`strand-tooltip-${++ua}`).current, m = b(() => {
+      u.current = setTimeout(() => {
+        c(!0);
+      }, e);
+    }, [e]), f = b(() => {
+      u.current !== null && (clearTimeout(u.current), u.current = null), c(!1);
+    }, []), N = ["strand-tooltip__wrapper", n].filter(Boolean).join(" "), g = [
+      "strand-tooltip",
+      `strand-tooltip--${t}`,
+      l && "strand-tooltip--visible"
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _(
+      "span",
+      {
+        ref: r,
+        className: N,
+        onMouseEnter: m,
+        onMouseLeave: f,
+        onFocus: m,
+        onBlur: f,
+        "aria-describedby": h,
+        ...o,
+        children: [
+          i,
+          /* @__PURE__ */ s(
+            "span",
+            {
+              id: h,
+              className: g,
+              role: "tooltip",
+              "aria-hidden": !l,
+              children: a
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ma.displayName = "Tooltip";
+const D = { sm: 24, md: 40, lg: 56 }, $ = 3, ha = p(
+  ({
+    variant: a = "bar",
+    value: t,
+    size: e = "md",
+    className: n = "",
+    ...i
+  }, o) => {
+    const r = t != null, l = [
+      "strand-progress",
+      `strand-progress--${a}`,
+      `strand-progress--${e}`,
+      !r && "strand-progress--indeterminate",
+      n
+    ].filter(Boolean).join(" "), c = {
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    };
+    if (r && (c["aria-valuenow"] = t), a === "ring") {
+      const u = D[e] ?? D.md, d = (u - $) / 2, h = 2 * Math.PI * d, m = r ? h - h * t / 100 : 0;
+      return /* @__PURE__ */ s("div", { ref: o, className: l, ...c, ...i, children: /* @__PURE__ */ _(
+        "svg",
+        {
+          width: u,
+          height: u,
+          viewBox: `0 0 ${u} ${u}`,
+          className: "strand-progress__ring",
+          children: [
+            /* @__PURE__ */ s(
+              "circle",
+              {
+                cx: u / 2,
+                cy: u / 2,
+                r: d,
+                fill: "none",
+                "stroke-width": $,
+                className: "strand-progress__track"
+              }
+            ),
+            /* @__PURE__ */ s(
+              "circle",
+              {
+                cx: u / 2,
+                cy: u / 2,
+                r: d,
+                fill: "none",
+                "stroke-width": $,
+                "stroke-dasharray": h,
+                "stroke-dashoffset": r ? m : void 0,
+                "stroke-linecap": "round",
+                className: "strand-progress__fill",
+                transform: `rotate(-90 ${u / 2} ${u / 2})`
+              }
+            )
+          ]
+        }
+      ) });
+    }
+    return /* @__PURE__ */ s("div", { ref: o, className: l, ...c, ...i, children: /* @__PURE__ */ s(
+      "div",
+      {
+        className: "strand-progress__fill",
+        style: r ? { width: `${t}%` } : void 0
+      }
+    ) });
+  }
+);
+ha.displayName = "Progress";
+const pa = p(
+  ({
+    size: a = "md",
+    className: t = "",
+    ...e
+  }, n) => {
+    const i = [
+      "strand-spinner",
+      `strand-spinner--${a}`,
+      t
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("span", { ref: n, className: i, role: "status", ...e, children: [
+      /* @__PURE__ */ s("span", { className: "strand-spinner__ring", "aria-hidden": "true" }),
+      /* @__PURE__ */ s("span", { className: "strand-spinner__sr-only", children: "Loading" })
+    ] });
+  }
+);
+pa.displayName = "Spinner";
+const fa = p(
+  ({
+    variant: a = "text",
+    width: t,
+    height: e,
+    className: n = "",
+    ...i
+  }, o) => {
+    const r = t ?? (a === "text" ? "100%" : void 0), l = a === "circle" ? r : e, c = [
+      "strand-skeleton",
+      `strand-skeleton--${a}`,
+      "strand-skeleton--shimmer",
+      n
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: o,
+        className: c,
+        "aria-hidden": "true",
+        style: {
+          width: r,
+          height: l
+        },
+        ...i
+      }
+    );
+  }
+);
+fa.displayName = "Skeleton";
+export {
+  oa as Alert,
+  V as Avatar,
+  U as Badge,
+  sa as Breadcrumb,
+  E as Button,
+  H as Card,
+  M as Checkbox,
+  Q as Container,
+  W as DataReadout,
+  ca as Dialog,
+  X as Divider,
+  G as FormField,
+  J as Grid,
+  K as Input,
+  aa as Link,
+  ta as Nav,
+  ha as Progress,
+  P as Radio,
+  Y as Section,
+  L as Select,
+  fa as Skeleton,
+  q as Slider,
+  pa as Spinner,
+  Z as Stack,
+  F as Switch,
+  O as Table,
+  ea as Tabs,
+  z as Tag,
+  A as Textarea,
+  ia as Toast,
+  ra as ToastProvider,
+  ma as Tooltip,
+  ya as useToast
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@dillingerstaffing/strand-ui",
+  "version": "0.1.0",
+  "description": "Strand UI - Preact/React component library built on the Strand Design Language",
+  "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
+  "license": "MIT",
+  "homepage": "https://dillingerstaffing.com/labs/strand",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dillingerstaffing/strand",
+    "directory": "packages/strand-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/dillingerstaffing/strand/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./css/*": "./dist/css/*"
+  },
+  "files": [
+    "dist/"
+  ],
+  "sideEffects": [
+    "dist/css/*.css"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "peerDependencies": {
+    "preact": "^10.0.0"
+  },
+  "peerDependenciesMeta": {
+    "preact": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "@dillingerstaffing/strand": "workspace:*"
+  },
+  "devDependencies": {
+    "@testing-library/preact": "^3.2.0",
+    "@testing-library/jest-dom": "^6.6.0",
+    "jsdom": "^26.0.0",
+    "preact": "^10.25.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0"
+  }
+}