astralis-ui 0.1.0

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

@@ -0,0 +1,80 @@
+"use client";
+import { jsxs as G, jsx as l } from "react/jsx-runtime";
+import { useState as M, useEffect as V } from "react";
+import { useRadioGroupContext as w } from "../radio.context.js";
+import { useFieldContext as E } from "../../field/field.context.js";
+import { radioSizes as F, radioControlColor as I, radioControl as L } from "../radio.styles.js";
+import { astralisMerge as o } from "../../../../utils/astralis-merge.js";
+import { accentClass as q } from "../../../../const/color-schemes.js";
+function A({
+  children: m,
+  size: C = "md",
+  colorScheme: h,
+  invalid: g,
+  disabled: y,
+  checked: e,
+  defaultChecked: x = !1,
+  onChange: N,
+  readOnly: v,
+  value: s,
+  name: S,
+  className: O = "",
+  ref: R,
+  ...k
+}) {
+  const a = w(), i = E(), [j, u] = M(x), f = a != null && s != null, r = e !== void 0, n = f ? a.groupValue === String(s) : r ? e : j, p = y ?? a?.disabled ?? i?.disabled, b = g ?? i?.invalid, t = v ?? i?.readOnly, z = S ?? a?.name, B = h ?? a?.colorScheme ?? "brand", D = (c) => {
+    if (t) {
+      c.preventDefault();
+      return;
+    }
+    f ? a.selectValue(String(s)) : r || u(c.target.checked), N?.(c);
+  };
+  V(() => {
+    r && u(e);
+  }, [r, e]);
+  const d = F[C];
+  return /* @__PURE__ */ G(
+    "label",
+    {
+      className: o(
+        "astralis:inline-flex astralis:items-center astralis:gap-2",
+        q(B),
+        p ? "astralis:cursor-not-allowed astralis:opacity-moderate" : t ? "astralis:cursor-default" : "astralis:cursor-pointer",
+        O
+      ),
+      children: [
+        /* @__PURE__ */ l(
+          "input",
+          {
+            ref: R,
+            type: "radio",
+            name: z,
+            value: s,
+            checked: n,
+            disabled: p,
+            readOnly: t,
+            "aria-invalid": b || void 0,
+            "aria-describedby": i?.describedBy,
+            "aria-readonly": t || void 0,
+            onChange: D,
+            className: "astralis:sr-only astralis:peer",
+            ...k
+          }
+        ),
+        /* @__PURE__ */ l(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: o(d.circle, L, I(n, !!b)),
+            children: n && /* @__PURE__ */ l("span", { "aria-hidden": "true", className: o(d.dot, "astralis:rounded-full astralis:bg-accent-contrast") })
+          }
+        ),
+        m && /* @__PURE__ */ l("span", { className: o(d.label, "astralis:text-label-base astralis:select-none"), children: m })
+      ]
+    }
+  );
+}
+A.displayName = "Radio";
+export {
+  A as RadioBase
+};

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

@@ -0,0 +1,11 @@
+"use client";
+import { RadioBase as o } from "./components/radio.js";
+import { RadioGroup as i } from "./components/radio-group.js";
+const a = Object.assign(o, {
+  Group: i
+});
+export {
+  a as Radio,
+  o as RadioBase,
+  i as RadioGroup
+};

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

@@ -0,0 +1,10 @@
+"use client";
+import { useContext as t, createContext as e } from "react";
+const o = e(null);
+function u() {
+  return t(o);
+}
+export {
+  o as default,
+  u as useRadioGroupContext
+};

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

@@ -0,0 +1,14 @@
+"use client";
+const r = {
+  sm: { circle: "astralis:h-3.5 astralis:w-3.5", dot: "astralis:h-1.5 astralis:w-1.5", label: "astralis:text-xs" },
+  md: { circle: "astralis:h-4 astralis:w-4", dot: "astralis:h-2 astralis:w-2", label: "astralis:text-sm" },
+  lg: { circle: "astralis:h-5 astralis:w-5", dot: "astralis:h-2.5 astralis:w-2.5", label: "astralis:text-base" }
+}, i = "astralis:shrink-0 astralis:rounded-full astralis:border-normal astralis:flex astralis:items-center astralis:justify-center astralis:transition-colors astralis:peer-focus-visible:ring-2 astralis:peer-focus-visible:ring-accent-ring astralis:peer-focus-visible:ring-offset-2 astralis:peer-focus-visible:ring-offset-surface-base";
+function t(s, a) {
+  return a ? s ? "astralis:bg-red-solid astralis:border-red-solid" : "astralis:bg-surface-base astralis:border-red-solid" : s ? "astralis:bg-accent-solid astralis:border-accent-solid" : "astralis:bg-surface-base astralis:border-stroke-emphasized";
+}
+export {
+  i as radioControl,
+  t as radioControlColor,
+  r as radioSizes
+};

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

@@ -0,0 +1,208 @@
+"use client";
+import { jsxs as d, jsx as a, Fragment as ue } from "react/jsx-runtime";
+import { forwardRef as fe, useState as h, useMemo as w, useRef as E, useImperativeHandle as pe, useCallback as be, useLayoutEffect as me, useEffect as V } from "react";
+import { createPortal as ve } from "react-dom";
+import { useFieldContext as he } from "../../field/field.context.js";
+import { selectTrigger as we } from "../select.styles.js";
+import { flattenOptions as G, isGroup as H, OptionRow as U } from "../../shared/options.js";
+import { astralisMerge as x } from "../../../../utils/astralis-merge.js";
+import { accentClass as X } from "../../../../const/color-schemes.js";
+import { SpinnerIcon as xe, XIcon as ge, ChevronDownIcon as ye, SearchIcon as ke } from "../../../icon/internal-icons.js";
+const Ne = fe(
+  ({
+    options: u = [],
+    value: L,
+    defaultValue: $ = null,
+    onChange: O,
+    onClear: J,
+    placeholder: Q = "Select an option",
+    size: W = "md",
+    variant: Y = "outline",
+    colorScheme: R = "brand",
+    disabled: Z,
+    invalid: _,
+    readOnly: ee,
+    clearable: se = !1,
+    searchable: f = !1,
+    loading: N = !1,
+    emptyText: ae = "No options",
+    name: A,
+    className: te = "",
+    id: re
+  }, le) => {
+    const p = he(), g = Z ?? p?.disabled, M = _ ?? p?.invalid, n = ee ?? p?.readOnly, ie = re ?? p?.id, [r, l] = h(!1), [y, P] = h(""), [b, m] = h(-1), S = L !== void 0, [ne, F] = h($), o = S ? L ?? null : ne, z = w(() => G(u), [u]), B = w(
+      () => z.find((e) => e.value === o) ?? null,
+      [z, o]
+    ), k = w(() => {
+      if (!f || !y.trim()) return u;
+      const e = y.toLowerCase();
+      return u.map((s) => {
+        if (H(s)) {
+          const t = s.options.filter((D) => String(D.label).toLowerCase().includes(e));
+          return t.length > 0 ? { ...s, options: t } : null;
+        }
+        return String(s.label).toLowerCase().includes(e) ? s : null;
+      }).filter((s) => s !== null);
+    }, [u, y, f]), K = w(() => G(k), [k]), v = w(() => K.filter((e) => !e.disabled), [K]), i = E(null), T = E(null), j = E(null);
+    pe(le, () => i.current, []);
+    const [C, oe] = h({ top: 0, left: 0, width: 0 }), c = be(() => {
+      if (!i.current) return;
+      const e = i.current.getBoundingClientRect();
+      oe({ top: e.bottom + 4, left: e.left, width: e.width });
+    }, []);
+    me(() => {
+      if (r)
+        return c(), window.addEventListener("scroll", c, !0), window.addEventListener("resize", c), () => {
+          window.removeEventListener("scroll", c, !0), window.removeEventListener("resize", c);
+        };
+    }, [r, c]), V(() => {
+      if (!r) return;
+      const e = (s) => {
+        const t = s.target;
+        !i.current?.contains(t) && !T.current?.contains(t) && l(!1);
+      };
+      return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    }, [r]), V(() => {
+      r ? (m(-1), f && requestAnimationFrame(() => j.current?.focus())) : (P(""), m(-1));
+    }, [r, f]);
+    const I = (e) => {
+      S || F(e), O?.(e), l(!1), i.current?.focus();
+    }, ce = (e) => {
+      e.stopPropagation(), !n && (S || F(null), O?.(null), J?.());
+    }, q = (e) => {
+      if (n) {
+        e.key === "Tab" ? l(!1) : e.preventDefault();
+        return;
+      }
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault(), r ? b >= 0 && v[b] && I(v[b].value) : l(!0);
+          break;
+        case "Escape":
+          l(!1), i.current?.focus();
+          break;
+        case "ArrowDown":
+          e.preventDefault(), r ? m((s) => Math.min(s + 1, v.length - 1)) : l(!0);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), m((s) => Math.max(s - 1, 0));
+          break;
+        case "Tab":
+          l(!1);
+          break;
+      }
+    }, de = se && o != null && !g && !n;
+    return /* @__PURE__ */ d("div", { className: x("astralis:relative astralis:w-full", X(R), te), children: [
+      A != null && /* @__PURE__ */ a("input", { type: "hidden", name: A, value: o ?? "", disabled: !!g }),
+      /* @__PURE__ */ d(
+        "button",
+        {
+          ref: i,
+          type: "button",
+          id: ie,
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-expanded": r,
+          "aria-invalid": M || void 0,
+          "aria-describedby": p?.describedBy,
+          "aria-readonly": n || void 0,
+          disabled: !!g || N,
+          onClick: () => {
+            !g && !n && !N && l((e) => !e);
+          },
+          onKeyDown: q,
+          className: x(
+            we({ size: W, variant: Y, invalid: !!M }),
+            n && "astralis:cursor-default astralis:bg-surface-muted"
+          ),
+          children: [
+            /* @__PURE__ */ a("span", { className: x("astralis:flex-1 astralis:truncate", B ? "astralis:text-label-base" : "astralis:text-label-subtle"), children: B?.label ?? Q }),
+            /* @__PURE__ */ a("span", { className: "astralis:flex astralis:items-center astralis:gap-1 astralis:shrink-0 astralis:text-label-subtle", children: N ? /* @__PURE__ */ a(xe, {}) : /* @__PURE__ */ d(ue, { children: [
+              de && /* @__PURE__ */ a(
+                "span",
+                {
+                  role: "button",
+                  "aria-label": "Clear selection",
+                  onMouseDown: ce,
+                  className: "astralis:flex astralis:items-center astralis:rounded-sm astralis:p-0.5 astralis:transition-colors astralis:hover:text-label-base",
+                  children: /* @__PURE__ */ a(ge, { className: "astralis:h-3.5 astralis:w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ a(
+                ye,
+                {
+                  className: x(
+                    "astralis:h-4 astralis:w-4 astralis:shrink-0 astralis:transition-transform",
+                    r && "astralis:rotate-180"
+                  )
+                }
+              )
+            ] }) })
+          ]
+        }
+      ),
+      r && ve(
+        /* @__PURE__ */ d(
+          "div",
+          {
+            ref: T,
+            role: "listbox",
+            style: { position: "fixed", top: C.top, left: C.left, width: C.width, zIndex: 9999 },
+            className: x(
+              "astralis:bg-surface-base astralis:border-normal astralis:border-stroke-subtle astralis:rounded-xl astralis:shadow-lg astralis:overflow-hidden",
+              X(R)
+            ),
+            children: [
+              f && /* @__PURE__ */ a("div", { className: "astralis:p-2 astralis:border-b astralis:border-stroke-subtle", children: /* @__PURE__ */ d("div", { className: "astralis:flex astralis:items-center astralis:gap-2 astralis:px-2.5 astralis:h-8 astralis:rounded-lg astralis:border-normal astralis:border-stroke-subtle astralis:bg-surface-muted", children: [
+                /* @__PURE__ */ a(ke, { className: "astralis:h-3.5 astralis:w-3.5 astralis:shrink-0 astralis:text-label-subtle" }),
+                /* @__PURE__ */ a(
+                  "input",
+                  {
+                    ref: j,
+                    "aria-label": "Search options",
+                    type: "text",
+                    placeholder: "Search…",
+                    value: y,
+                    onChange: (e) => {
+                      P(e.target.value), m(-1);
+                    },
+                    onKeyDown: q,
+                    className: "astralis:flex-1 astralis:text-sm astralis:bg-transparent astralis:outline-none astralis:text-label-base astralis:placeholder:text-label-subtle"
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ a("div", { className: "astralis:max-h-60 astralis:overflow-y-auto astralis:p-1.5", children: k.length === 0 ? /* @__PURE__ */ a("div", { className: "astralis:px-3 astralis:py-4 astralis:text-sm astralis:text-label-subtle astralis:text-center", children: ae }) : k.map((e, s) => H(e) ? /* @__PURE__ */ d("div", { children: [
+                /* @__PURE__ */ a("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__ */ a(
+                  U,
+                  {
+                    option: t,
+                    isActive: v.findIndex((D) => D.value === t.value) === b,
+                    isSelected: t.value === o,
+                    onPick: I
+                  },
+                  String(t.value)
+                ))
+              ] }, `g-${s}`) : /* @__PURE__ */ a(
+                U,
+                {
+                  option: e,
+                  isActive: v.findIndex((t) => t.value === e.value) === b,
+                  isSelected: e.value === o,
+                  onPick: I
+                },
+                String(e.value)
+              )) })
+            ]
+          }
+        ),
+        document.body
+      )
+    ] });
+  }
+);
+Ne.displayName = "Select";
+export {
+  Ne as SelectBase
+};

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

@@ -0,0 +1,35 @@
+"use client";
+import { cva as s } from "class-variance-authority";
+const r = s(
+  "astralis:w-full astralis:flex astralis:items-center astralis:gap-2 astralis:text-left astralis:transition-colors astralis:outline-none astralis:disabled:cursor-not-allowed astralis:disabled:opacity-moderate",
+  {
+    variants: {
+      size: {
+        sm: "astralis:h-8 astralis:px-3 astralis:text-xs",
+        md: "astralis:h-10 astralis:px-3 astralis:text-sm",
+        lg: "astralis:h-12 astralis:px-4 astralis:text-base"
+      },
+      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 selectTrigger
+};

package/dist/components/data-entry/shared/options.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { astralisMerge as o } from "../../../utils/astralis-merge.js";
+import { CheckIcon as u } from "../../icon/internal-icons.js";
+function c(a) {
+  return "group" in a;
+}
+function m(a) {
+  return a.flatMap((s) => c(s) ? s.options : [s]);
+}
+function d(a, s) {
+  return s ? "astralis:text-label-subtle astralis:cursor-not-allowed astralis:opacity-moderate" : a ? "astralis:bg-accent-subtle astralis:text-accent-label" : "astralis:text-label-base astralis:hover:bg-surface-subtle";
+}
+function x({
+  option: a,
+  isActive: s,
+  isSelected: t,
+  onPick: e,
+  id: l
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      id: l,
+      role: "option",
+      "aria-selected": t,
+      "aria-disabled": a.disabled,
+      onMouseDown: (i) => {
+        i.preventDefault(), a.disabled || e(a.value);
+      },
+      className: o(
+        "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",
+        d(s, !!a.disabled),
+        t && "astralis:font-medium"
+      ),
+      children: [
+        /* @__PURE__ */ r("span", { className: "astralis:truncate", children: a.label }),
+        t && /* @__PURE__ */ r(u, { className: "astralis:h-3.5 astralis:w-3.5 astralis:shrink-0 astralis:text-accent-solid" })
+      ]
+    }
+  );
+}
+export {
+  x as OptionRow,
+  m as flattenOptions,
+  c as isGroup,
+  d as optionRowClasses
+};