astralis-ui 0.1.0

package/dist/components/data-entry/multi-select/components/multi-select.js

@@ -0,0 +1,301 @@
+"use client";
+import { jsxs as c, jsx as l, Fragment as he } from "react/jsx-runtime";
+import { forwardRef as xe, useState as v, useMemo as k, useRef as T, useImperativeHandle as ge, useCallback as we, useLayoutEffect as ye, useEffect as X } from "react";
+import { createPortal as Ne } from "react-dom";
+import { useFieldContext as ke } from "../../field/field.context.js";
+import { msContainer as Ie, msTagSizes as Ce, msOptionClasses as De, msInputText as Se, msFocusRing as Le } from "../multi-select.styles.js";
+import { astralisMerge as f } from "../../../../utils/astralis-merge.js";
+import { flattenOptions as $, isGroup as J } from "../../shared/options.js";
+import { accentClass as Q } from "../../../../const/color-schemes.js";
+import { SpinnerIcon as Me, XIcon as Z, ChevronDownIcon as Oe, CheckIcon as Re } from "../../../icon/internal-icons.js";
+function W(r) {
+  return r.searchLabel ?? String(r.label);
+}
+function Ee({
+  label: r,
+  onRemove: m,
+  disabled: d,
+  size: u
+}) {
+  return /* @__PURE__ */ c(
+    "span",
+    {
+      className: f(
+        Ce[u],
+        "astralis:inline-flex astralis:items-center astralis:gap-1 astralis:rounded-sm astralis:font-medium astralis:bg-accent-subtle astralis:text-accent-label astralis:transition-colors"
+      ),
+      children: [
+        /* @__PURE__ */ l("span", { className: "astralis:truncate astralis:max-w-32", children: r }),
+        !d && /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-label": "Remove",
+            onMouseDown: (h) => {
+              h.preventDefault(), m();
+            },
+            className: "astralis:flex astralis:items-center astralis:shrink-0 astralis:transition-colors astralis:hover:text-accent-emphasized",
+            children: /* @__PURE__ */ l(Z, { className: "astralis:h-2.5 astralis:w-2.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function Y({
+  option: r,
+  isActive: m,
+  isSelected: d,
+  onToggle: u
+}) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      role: "option",
+      "aria-selected": d,
+      "aria-disabled": r.disabled,
+      onMouseDown: (h) => {
+        h.preventDefault(), r.disabled || u(r.value);
+      },
+      className: f(
+        "astralis:flex astralis:items-center astralis:justify-between astralis:gap-2",
+        "astralis:px-3 astralis:py-2 astralis:rounded-lg astralis:text-sm astralis:cursor-pointer astralis:transition-colors",
+        De(m, !!r.disabled),
+        d && "astralis:font-medium"
+      ),
+      children: [
+        /* @__PURE__ */ l("span", { className: "astralis:truncate", children: r.label }),
+        d && /* @__PURE__ */ l(Re, { className: "astralis:h-3.5 astralis:w-3.5 astralis:shrink-0 astralis:text-accent-solid" })
+      ]
+    }
+  );
+}
+const Ae = xe(
+  ({
+    options: r = [],
+    value: m,
+    defaultValue: d = [],
+    onChange: u,
+    placeholder: h = "Select options…",
+    size: M = "md",
+    variant: B = "outline",
+    colorScheme: V = "brand",
+    disabled: _,
+    invalid: ee,
+    readOnly: se,
+    clearable: ae = !1,
+    max: I,
+    emptyText: te = "No options",
+    loading: le = !1,
+    name: P,
+    className: re = "",
+    id: ie
+  }, ne) => {
+    const x = ke(), b = _ ?? x?.disabled, O = ee ?? x?.invalid, i = se ?? x?.readOnly, oe = ie ?? x?.id, [n, o] = v(!1), [C, j] = v(""), [g, w] = v(-1), [ce, z] = v(!1), D = m !== void 0, [de, R] = v(d), a = D ? m ?? [] : de, q = k(() => $(r), [r]), ue = k(
+      () => q.filter((e) => a.includes(e.value)),
+      [q, a]
+    ), S = k(() => {
+      const e = C.toLowerCase().trim();
+      return e ? r.map((s) => {
+        if (J(s)) {
+          const t = s.options.filter((F) => W(F).toLowerCase().includes(e));
+          return t.length ? { ...s, options: t } : null;
+        }
+        return W(s).toLowerCase().includes(e) ? s : null;
+      }).filter((s) => s !== null) : r;
+    }, [r, C]), K = k(() => $(S), [S]), y = k(() => K.filter((e) => !e.disabled), [K]), L = I != null && a.length >= I, N = T(null), G = T(null), H = T(null);
+    ge(ne, () => N.current, []);
+    const [E, fe] = v({ top: 0, left: 0, width: 0 }), p = we(() => {
+      if (!N.current) return;
+      const e = N.current.getBoundingClientRect();
+      fe({ top: e.bottom + 4, left: e.left, width: e.width });
+    }, []);
+    ye(() => {
+      if (n)
+        return p(), window.addEventListener("scroll", p, !0), window.addEventListener("resize", p), () => {
+          window.removeEventListener("scroll", p, !0), window.removeEventListener("resize", p);
+        };
+    }, [n, p]), X(() => {
+      n ? (w(-1), requestAnimationFrame(() => H.current?.focus())) : (j(""), w(-1));
+    }, [n]), X(() => {
+      if (!n) return;
+      const e = (s) => {
+        const t = s.target;
+        !N.current?.contains(t) && !G.current?.contains(t) && o(!1);
+      };
+      return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    }, [n]);
+    const A = (e) => {
+      if (i) return;
+      const s = a.includes(e) ? a.filter((t) => t !== e) : L ? a : [...a, e];
+      D || R(s), u?.(s);
+    }, U = (e) => {
+      if (i) return;
+      const s = a.filter((t) => t !== e);
+      D || R(s), u?.(s);
+    }, me = (e) => {
+      e.stopPropagation(), !i && (D || R([]), u?.([]));
+    }, be = () => {
+      !b && !i && o((e) => !e);
+    }, pe = (e) => {
+      if (i) {
+        e.key === "Tab" ? o(!1) : e.preventDefault();
+        return;
+      }
+      switch (e.key) {
+        case "Backspace":
+          !C && a.length > 0 && U(a[a.length - 1]);
+          break;
+        case "Escape":
+          o(!1);
+          break;
+        case "ArrowDown":
+          e.preventDefault(), n ? w((s) => Math.min(s + 1, y.length - 1)) : o(!0);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), w((s) => Math.max(s - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault(), n ? g >= 0 && y[g] && A(y[g].value) : o(!0);
+          break;
+        case "Tab":
+          o(!1);
+          break;
+      }
+    }, ve = ae && a.length > 0 && !b && !i;
+    return /* @__PURE__ */ c("div", { className: f("astralis:relative astralis:w-full", Q(V), re), children: [
+      P != null && a.map((e) => /* @__PURE__ */ l("input", { type: "hidden", name: P, value: e, disabled: !!b }, String(e))),
+      /* @__PURE__ */ c(
+        "div",
+        {
+          ref: N,
+          id: oe,
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-expanded": n,
+          "aria-invalid": O || void 0,
+          "aria-describedby": x?.describedBy,
+          "aria-readonly": i || void 0,
+          onClick: be,
+          className: f(
+            Ie({ size: M, variant: B, invalid: !!O }),
+            ce && !i && Le(B, !!O),
+            b && "astralis:cursor-not-allowed astralis:opacity-moderate astralis:pointer-events-none",
+            i && "astralis:cursor-default astralis:bg-surface-muted"
+          ),
+          children: [
+            ue.map((e) => /* @__PURE__ */ l(
+              Ee,
+              {
+                label: e.label,
+                size: M,
+                disabled: !!b || !!i,
+                onRemove: () => U(e.value)
+              },
+              String(e.value)
+            )),
+            /* @__PURE__ */ l(
+              "input",
+              {
+                ref: H,
+                "aria-label": "Search options",
+                type: "text",
+                placeholder: a.length === 0 ? h : "",
+                value: C,
+                onChange: (e) => {
+                  i || (j(e.target.value), w(-1), n || o(!0));
+                },
+                onKeyDown: pe,
+                onFocus: () => {
+                  z(!0), i || o(!0);
+                },
+                onBlur: () => z(!1),
+                disabled: !!b,
+                readOnly: i,
+                "aria-readonly": i || void 0,
+                className: f(
+                  "astralis:flex-1 astralis:min-w-16 astralis:bg-transparent astralis:outline-none astralis:text-label-base astralis:placeholder:text-label-subtle",
+                  Se[M]
+                )
+              }
+            ),
+            /* @__PURE__ */ l("span", { className: "astralis:flex astralis:items-center astralis:gap-1 astralis:shrink-0 astralis:ml-auto astralis:text-label-subtle", children: le ? /* @__PURE__ */ l(Me, {}) : /* @__PURE__ */ c(he, { children: [
+              ve && /* @__PURE__ */ l(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-label": "Clear all",
+                  onMouseDown: me,
+                  className: "astralis:flex astralis:items-center astralis:rounded-sm astralis:p-0.5 astralis:transition-colors astralis:hover:text-label-base",
+                  children: /* @__PURE__ */ l(Z, { className: "astralis:h-3.5 astralis:w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ l(
+                Oe,
+                {
+                  className: f(
+                    "astralis:h-4 astralis:w-4 astralis:shrink-0 astralis:transition-transform",
+                    n && "astralis:rotate-180"
+                  )
+                }
+              )
+            ] }) })
+          ]
+        }
+      ),
+      n && Ne(
+        /* @__PURE__ */ c(
+          "div",
+          {
+            ref: G,
+            role: "listbox",
+            "aria-multiselectable": "true",
+            style: { position: "fixed", top: E.top, left: E.left, width: E.width, zIndex: 9999 },
+            className: f(
+              "astralis:bg-surface-base astralis:border-normal astralis:border-stroke-subtle astralis:rounded-xl astralis:shadow-lg astralis:overflow-hidden",
+              Q(V)
+            ),
+            children: [
+              L && /* @__PURE__ */ c("div", { className: "astralis:px-3 astralis:py-1.5 astralis:text-xs astralis:text-label-subtle astralis:border-b astralis:border-stroke-subtle astralis:bg-surface-muted", children: [
+                "Maximum ",
+                I,
+                " item",
+                I !== 1 ? "s" : "",
+                " selected"
+              ] }),
+              /* @__PURE__ */ l("div", { className: "astralis:max-h-60 astralis:overflow-y-auto astralis:p-1.5", children: S.length === 0 ? /* @__PURE__ */ l("div", { className: "astralis:px-3 astralis:py-4 astralis:text-sm astralis:text-label-subtle astralis:text-center", children: te }) : S.map((e, s) => J(e) ? /* @__PURE__ */ c("div", { children: [
+                /* @__PURE__ */ l("div", { className: "astralis:px-2 astralis:pt-2 astralis:pb-1 astralis:text-xs astralis:font-semibold astralis:uppercase astralis:tracking-wider astralis:text-label-subtle", children: e.group }),
+                e.options.map((t) => /* @__PURE__ */ l(
+                  Y,
+                  {
+                    option: L && !a.includes(t.value) ? { ...t, disabled: !0 } : t,
+                    isActive: y.findIndex((F) => F.value === t.value) === g,
+                    isSelected: a.includes(t.value),
+                    onToggle: A
+                  },
+                  String(t.value)
+                ))
+              ] }, `g-${s}`) : /* @__PURE__ */ l(
+                Y,
+                {
+                  option: L && !a.includes(e.value) ? { ...e, disabled: !0 } : e,
+                  isActive: y.findIndex((t) => t.value === e.value) === g,
+                  isSelected: a.includes(e.value),
+                  onToggle: A
+                },
+                String(e.value)
+              )) })
+            ]
+          }
+        ),
+        document.body
+      )
+    ] });
+  }
+);
+Ae.displayName = "MultiSelect";
+export {
+  Ae as MultiSelectBase
+};

package/dist/components/data-entry/multi-select/multi-select.styles.js

@@ -0,0 +1,47 @@
+"use client";
+import { cva as t } from "class-variance-authority";
+const l = t(
+  "astralis:w-full astralis:flex astralis:items-center astralis:flex-wrap astralis:gap-1.5 astralis:cursor-text astralis:transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "astralis:min-h-8 astralis:px-2 astralis:py-1",
+        md: "astralis:min-h-10 astralis:px-3 astralis:py-1.5",
+        lg: "astralis:min-h-12 astralis:px-3 astralis:py-2"
+      },
+      variant: {
+        outline: "astralis:border-normal astralis:border-stroke-base astralis:bg-surface-base astralis:rounded-lg astralis:hover:border-stroke-emphasized",
+        filled: "astralis:border-normal astralis:border-transparent astralis:bg-surface-muted astralis:rounded-lg astralis:hover:bg-surface-subtle"
+      },
+      invalid: { true: "", false: "" }
+    },
+    compoundVariants: [
+      { invalid: !0, variant: "outline", className: "astralis:border-red-solid astralis:hover:border-red-solid" },
+      { invalid: !0, variant: "filled", className: "astralis:border-red-solid astralis:hover:border-red-solid" }
+    ],
+    defaultVariants: { size: "md", variant: "outline", invalid: !1 }
+  }
+);
+function e(s, a) {
+  const r = s === "filled" ? "astralis:bg-surface-base " : "";
+  return a ? r + "astralis:border-red-solid astralis:ring-2 astralis:ring-red-muted" : r + "astralis:border-accent-stroke astralis:ring-2 astralis:ring-accent-ring";
+}
+const n = {
+  sm: "astralis:text-xs astralis:h-5 astralis:px-1.5",
+  md: "astralis:text-xs astralis:h-6 astralis:px-2",
+  lg: "astralis:text-sm astralis:h-7 astralis:px-2.5"
+}, o = {
+  sm: "astralis:text-xs",
+  md: "astralis:text-sm",
+  lg: "astralis:text-base"
+};
+function d(s, a) {
+  return a ? "astralis:cursor-not-allowed astralis:opacity-moderate astralis:text-label-subtle" : s ? "astralis:bg-accent-subtle astralis:text-accent-label" : "astralis:text-label-base astralis:hover:bg-surface-muted";
+}
+export {
+  l as msContainer,
+  e as msFocusRing,
+  o as msInputText,
+  d as msOptionClasses,
+  n as msTagSizes
+};

package/dist/components/data-entry/number-input/number-input.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsxs as w, jsx as o } from "react/jsx-runtime";
+import { useState as x, useRef as G, useEffect as J } from "react";
+import { inputVariants as L } from "../input/input.styles.js";
+import { useFieldContext as Q } from "../field/field.context.js";
+import { astralisMerge as g } from "../../../utils/astralis-merge.js";
+import { ChevronUpIcon as W, ChevronDownIcon as X } from "../../icon/internal-icons.js";
+const k = "astralis:flex astralis:flex-1 astralis:items-center astralis:justify-center astralis:cursor-pointer astralis:text-label-subtle astralis:transition-colors astralis:hover:text-label-base astralis:hover:bg-surface-subtle astralis:disabled:opacity-moderate astralis:disabled:pointer-events-none astralis:outline-none astralis:focus-visible:outline-2 astralis:focus-visible:outline-offset-[-2px] astralis:focus-visible:outline-accent-ring";
+function Y({
+  value: v,
+  defaultValue: C = null,
+  onChange: D,
+  min: l,
+  max: a,
+  step: f = 1,
+  precision: p,
+  size: I = "md",
+  variant: M = "outline",
+  invalid: O,
+  disabled: j,
+  readOnly: E,
+  hideSteppers: y = !1,
+  className: R = "",
+  id: S,
+  onKeyDown: q,
+  onBlur: A,
+  ref: B,
+  ...F
+}) {
+  const r = Q(), h = O ?? r?.invalid, u = j ?? r?.disabled, d = E ?? r?.readOnly, K = S ?? r?.id, N = v !== void 0, [U, V] = x(C), s = N ? v ?? null : U, b = G(s);
+  b.current = s;
+  const [i, m] = x(s == null ? "" : String(s));
+  J(() => {
+    m(s == null ? "" : String(s));
+  }, [s]);
+  const H = (e) => {
+    let t = e;
+    return l != null && (t = Math.max(l, t)), a != null && (t = Math.min(a, t)), p != null && (t = Number(t.toFixed(p))), t;
+  }, n = (e) => {
+    const t = e == null || Number.isNaN(e) ? null : H(e);
+    N || V(t), b.current = t, m(t == null ? "" : String(t)), D?.(t);
+  }, c = (e) => {
+    if (u || d) return;
+    const z = b.current ?? (e === 1 ? (l ?? 0) - f : (a ?? 0) + f);
+    n(z + e * f);
+  }, T = (e) => {
+    q?.(e), e.key === "ArrowUp" ? (e.preventDefault(), c(1)) : e.key === "ArrowDown" ? (e.preventDefault(), c(-1)) : e.key === "Home" && l != null ? (e.preventDefault(), n(l)) : e.key === "End" && a != null ? (e.preventDefault(), n(a)) : e.key === "Enter" && n(i.trim() === "" ? null : Number(i));
+  };
+  return /* @__PURE__ */ w("div", { className: "astralis:relative astralis:w-full", children: [
+    /* @__PURE__ */ o(
+      "input",
+      {
+        ref: B,
+        id: K,
+        type: "text",
+        inputMode: "decimal",
+        autoComplete: "off",
+        role: "spinbutton",
+        "aria-valuemin": l,
+        "aria-valuemax": a,
+        "aria-valuenow": s ?? void 0,
+        "aria-invalid": h || void 0,
+        "aria-describedby": r?.describedBy,
+        disabled: u,
+        readOnly: d,
+        required: r?.required,
+        value: i,
+        onChange: (e) => m(e.target.value),
+        onKeyDown: T,
+        onBlur: (e) => {
+          A?.(e), n(i.trim() === "" ? null : Number(i));
+        },
+        className: g(
+          L({ size: I, variant: M, invalid: !!h }),
+          !y && "astralis:pr-8",
+          R
+        ),
+        ...F
+      }
+    ),
+    !y && /* @__PURE__ */ w(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "astralis:absolute astralis:inset-y-1 astralis:right-1 astralis:flex astralis:w-6 astralis:flex-col astralis:overflow-hidden astralis:rounded-md astralis:border-normal astralis:border-stroke-subtle",
+        children: [
+          /* @__PURE__ */ o("button", { type: "button", tabIndex: -1, disabled: u || d, onClick: () => c(1), className: k, children: /* @__PURE__ */ o(W, { className: "astralis:h-3 astralis:w-3" }) }),
+          /* @__PURE__ */ o("button", { type: "button", tabIndex: -1, disabled: u || d, onClick: () => c(-1), className: g(k, "astralis:border-t astralis:border-stroke-subtle"), children: /* @__PURE__ */ o(X, { className: "astralis:h-3 astralis:w-3" }) })
+        ]
+      }
+    )
+  ] });
+}
+Y.displayName = "NumberInput";
+export {
+  Y as NumberInput
+};

package/dist/components/data-entry/pin-input/components/pin-input.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsx as y } from "react/jsx-runtime";
+import { useState as Z, useRef as _, useEffect as E } from "react";
+import { useFieldContext as S } from "../../field/field.context.js";
+import { pinCell as q } from "../pin-input.styles.js";
+import { astralisMerge as C } from "../../../../utils/astralis-merge.js";
+function p(a, n) {
+  return Array.from({ length: n }, (v, m) => a[m] ?? "");
+}
+function G(a, n) {
+  return a ? n === "numeric" ? /^\d$/.test(a) : n === "alpha" ? /^[a-zA-Z]$/.test(a) : !0 : !0;
+}
+function H({
+  length: a = 4,
+  value: n,
+  defaultValue: v = "",
+  onChange: m,
+  onComplete: g,
+  type: c = "numeric",
+  mask: w = !1,
+  size: k = "md",
+  variant: x = "outline",
+  disabled: A,
+  invalid: I,
+  readOnly: P,
+  placeholder: B = "○",
+  autoFocus: b = !1,
+  className: N = "",
+  id: O
+}) {
+  const l = S(), R = A ?? l?.disabled, D = I ?? l?.invalid, o = P ?? l?.readOnly, $ = O ?? l?.id, h = n !== void 0, [M, j] = Z(
+    () => p(v, a)
+  ), s = h ? p(n ?? "", a) : M, i = _([]);
+  E(() => {
+    b && i.current[0]?.focus();
+  }, [b]);
+  const u = (t) => {
+    h || j(t);
+    const e = t.join("");
+    m?.(e), t.every((r) => r !== "") && g?.(e);
+  }, z = (t, e) => {
+    if (o) return;
+    const f = e.target.value.slice(-1);
+    if (!G(f, c)) return;
+    const d = [...s];
+    d[t] = f, u(d), f && t < a - 1 && i.current[t + 1]?.focus();
+  }, F = (t, e) => {
+    if (o) {
+      (e.key === "Backspace" || e.key === "Delete") && e.preventDefault();
+      return;
+    }
+    switch (e.key) {
+      case "Backspace":
+        if (s[t]) {
+          const r = [...s];
+          r[t] = "", u(r);
+        } else if (t > 0) {
+          const r = [...s];
+          r[t - 1] = "", u(r), i.current[t - 1]?.focus();
+        }
+        e.preventDefault();
+        break;
+      case "Delete":
+        if (s[t]) {
+          const r = [...s];
+          r[t] = "", u(r), e.preventDefault();
+        }
+        break;
+      case "ArrowLeft":
+        t > 0 && (i.current[t - 1]?.focus(), e.preventDefault());
+        break;
+      case "ArrowRight":
+        t < a - 1 && (i.current[t + 1]?.focus(), e.preventDefault());
+        break;
+    }
+  }, K = (t) => {
+    if (t.preventDefault(), o) return;
+    const e = t.clipboardData.getData("text"), r = c === "numeric" ? e.replace(/\D/g, "") : c === "alpha" ? e.replace(/[^a-zA-Z]/g, "") : e, f = p(r, a);
+    u(f);
+    const d = Math.min(r.length, a - 1);
+    i.current[d]?.focus();
+  }, L = (t) => {
+    t.target.select();
+  }, T = w ? "password" : c === "numeric" ? "tel" : "text";
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      role: "group",
+      "aria-label": "PIN input",
+      className: C("astralis:flex astralis:items-center astralis:gap-2", N),
+      children: Array.from({ length: a }, (t, e) => /* @__PURE__ */ y(
+        "input",
+        {
+          ref: (r) => {
+            i.current[e] = r;
+          },
+          id: e === 0 ? $ : void 0,
+          type: T,
+          inputMode: c === "numeric" ? "numeric" : "text",
+          autoComplete: e === 0 ? "one-time-code" : "off",
+          maxLength: 2,
+          value: s[e],
+          placeholder: B,
+          disabled: !!R,
+          readOnly: o,
+          "aria-label": `Digit ${e + 1} of ${a}`,
+          "aria-invalid": D || void 0,
+          "aria-describedby": l?.describedBy,
+          "aria-readonly": o || void 0,
+          onChange: (r) => z(e, r),
+          onKeyDown: (r) => F(e, r),
+          onPaste: K,
+          onFocus: L,
+          className: C(
+            q({ size: k, variant: x, invalid: !!D }),
+            o && "astralis:bg-surface-muted astralis:cursor-default"
+          )
+        },
+        e
+      ))
+    }
+  );
+}
+H.displayName = "PinInput";
+export {
+  H as PinInputBase
+};

package/dist/components/data-entry/pin-input/pin-input.styles.js

@@ -0,0 +1,35 @@
+"use client";
+import { cva as s } from "class-variance-authority";
+const r = s(
+  "astralis:text-center astralis:text-label-base astralis:font-mono astralis:font-semibold astralis:transition-colors astralis:outline-none astralis:placeholder:text-label-subtle astralis:placeholder:font-normal astralis:disabled:cursor-not-allowed astralis:disabled:opacity-moderate",
+  {
+    variants: {
+      size: {
+        sm: "astralis:h-8 astralis:w-8 astralis:text-sm",
+        md: "astralis:h-10 astralis:w-10 astralis:text-base",
+        lg: "astralis:h-12 astralis:w-12 astralis:text-lg"
+      },
+      variant: {
+        outline: "astralis:border-normal astralis:border-stroke-base astralis:bg-surface-base astralis:rounded-lg astralis:hover:border-stroke-emphasized astralis:focus-visible:border-accent-stroke astralis:focus-visible:ring-2 astralis:focus-visible:ring-accent-ring",
+        filled: "astralis:border-normal astralis:border-transparent astralis:bg-surface-muted astralis:rounded-lg astralis:hover:bg-surface-subtle astralis:focus-visible:bg-surface-base astralis:focus-visible:border-accent-stroke astralis:focus-visible:ring-2 astralis:focus-visible:ring-accent-ring"
+      },
+      invalid: { true: "", false: "" }
+    },
+    compoundVariants: [
+      {
+        invalid: !0,
+        variant: "outline",
+        className: "astralis:border-red-solid astralis:hover:border-red-solid astralis:focus-visible:border-red-solid astralis:focus-visible:ring-red-muted"
+      },
+      {
+        invalid: !0,
+        variant: "filled",
+        className: "astralis:border-red-solid astralis:hover:border-red-solid astralis:focus-visible:border-red-solid astralis:focus-visible:ring-red-muted"
+      }
+    ],
+    defaultVariants: { size: "md", variant: "outline", invalid: !1 }
+  }
+);
+export {
+  r as pinCell
+};

package/dist/components/data-entry/radio/components/radio-group.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { useId as v, useState as G } from "react";
+import N from "../radio.context.js";
+import { astralisMerge as R } from "../../../../utils/astralis-merge.js";
+function h({
+  value: e,
+  defaultValue: t = "",
+  onChange: o,
+  name: s,
+  disabled: l,
+  colorScheme: i,
+  orientation: n = "vertical",
+  children: p,
+  className: u,
+  ...m
+}) {
+  const c = v(), d = s ?? c, [f, x] = G(t), g = e ?? f, V = (a) => {
+    x(a), o?.(a);
+  };
+  return /* @__PURE__ */ r(N.Provider, { value: { groupValue: g, selectValue: V, name: d, disabled: l, colorScheme: i }, children: /* @__PURE__ */ r(
+    "div",
+    {
+      role: "radiogroup",
+      className: R(
+        "astralis:flex",
+        n === "horizontal" ? "astralis:flex-row astralis:flex-wrap astralis:gap-x-6 astralis:gap-y-2" : "astralis:flex-col astralis:gap-2.5",
+        u
+      ),
+      ...m,
+      children: p
+    }
+  ) });
+}
+h.displayName = "Radio.Group";
+export {
+  h as RadioGroup
+};