astralis-ui 0.1.0

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

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

package/dist/components/data-entry/field/components/field-error-text.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useEffect as o } from "react";
+import { useFieldContext as m } from "../field.context.js";
+import { astralisMerge as n } from "../../../../utils/astralis-merge.js";
+function x({
+  children: t,
+  className: a = "",
+  ref: s,
+  ...i
+}) {
+  const r = m();
+  return o(() => {
+    if (r)
+      return r.setHasErrorText(!0), () => r.setHasErrorText(!1);
+  }, [r]), /* @__PURE__ */ l(
+    "p",
+    {
+      ref: s,
+      id: r?.errorTextId,
+      role: "alert",
+      "aria-live": "polite",
+      className: n(
+        "astralis:flex astralis:items-center astralis:gap-1 astralis:text-xs astralis:text-label-error",
+        a
+      ),
+      ...i,
+      children: [
+        /* @__PURE__ */ e(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "astralis:h-3.5 astralis:w-3.5 astralis:shrink-0",
+            viewBox: "0 0 16 16",
+            fill: "currentColor",
+            children: /* @__PURE__ */ e("path", { d: "M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm-.75 3.75a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0v-3.5Zm.75 7a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Z" })
+          }
+        ),
+        t
+      ]
+    }
+  );
+}
+x.displayName = "Field.ErrorText";
+export {
+  x as FieldErrorText
+};

package/dist/components/data-entry/field/components/field-help-text.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { useEffect as a } from "react";
+import { useFieldContext as o } from "../field.context.js";
+import { astralisMerge as p } from "../../../../utils/astralis-merge.js";
+function m({
+  children: t,
+  className: r = "",
+  ref: s,
+  ...l
+}) {
+  const e = o();
+  return a(() => {
+    if (e)
+      return e.setHasHelpText(!0), () => e.setHasHelpText(!1);
+  }, [e]), /* @__PURE__ */ i(
+    "p",
+    {
+      ref: s,
+      id: e?.helpTextId,
+      className: p("astralis:text-xs astralis:text-label-muted", r),
+      ...l,
+      children: t
+    }
+  );
+}
+m.displayName = "Field.HelpText";
+export {
+  m as FieldHelpText
+};

package/dist/components/data-entry/field/components/field-label.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { useFieldContext as d } from "../field.context.js";
+import { astralisMerge as o } from "../../../../utils/astralis-merge.js";
+function n({
+  children: e,
+  className: l = "",
+  ref: s,
+  ...i
+}) {
+  const a = d();
+  return /* @__PURE__ */ t(
+    "label",
+    {
+      ref: s,
+      htmlFor: a?.id,
+      "data-invalid": a?.invalid ? "" : void 0,
+      "data-disabled": a?.disabled ? "" : void 0,
+      className: o(
+        "astralis:text-sm astralis:font-medium astralis:select-none",
+        a?.disabled ? "astralis:text-label-subtle" : "astralis:text-label-base",
+        l
+      ),
+      ...i,
+      children: [
+        e,
+        a?.required && /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "astralis:ml-0.5 astralis:text-label-error", children: "*" })
+      ]
+    }
+  );
+}
+n.displayName = "Field.Label";
+export {
+  n as FieldLabel
+};

package/dist/components/data-entry/field/components/field-root.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as d } from "react/jsx-runtime";
+import { useId as I, useState as c, useMemo as g } from "react";
+import F from "../field.context.js";
+import { astralisMerge as j } from "../../../../utils/astralis-merge.js";
+function B({
+  children: x,
+  invalid: t,
+  disabled: o,
+  required: a,
+  readOnly: l,
+  id: m,
+  className: p = "",
+  ...f
+}) {
+  const u = I(), e = m ?? u, [i, T] = c(!1), [n, h] = c(!1), r = `${e}-help`, s = `${e}-error`, v = g(() => {
+    const H = [n ? s : null, i ? r : null].filter(Boolean).join(" ") || void 0;
+    return {
+      id: e,
+      invalid: t,
+      disabled: o,
+      required: a,
+      readOnly: l,
+      helpTextId: r,
+      errorTextId: s,
+      describedBy: H,
+      setHasHelpText: T,
+      setHasErrorText: h
+    };
+  }, [e, t, o, a, l, r, s, i, n]);
+  return /* @__PURE__ */ d(F.Provider, { value: v, children: /* @__PURE__ */ d(
+    "div",
+    {
+      "data-invalid": t ? "" : void 0,
+      "data-disabled": o ? "" : void 0,
+      className: j("astralis:flex astralis:flex-col astralis:gap-1.5", p),
+      ...f,
+      children: x
+    }
+  ) });
+}
+B.displayName = "Field";
+export {
+  B as FieldRoot
+};

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

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

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

@@ -0,0 +1,17 @@
+"use client";
+import { FieldRoot as e } from "./components/field-root.js";
+import { FieldLabel as r } from "./components/field-label.js";
+import { FieldHelpText as o } from "./components/field-help-text.js";
+import { FieldErrorText as t } from "./components/field-error-text.js";
+const d = Object.assign(e, {
+  Label: r,
+  HelpText: o,
+  ErrorText: t
+});
+export {
+  d as Field,
+  t as FieldErrorText,
+  o as FieldHelpText,
+  r as FieldLabel,
+  e as FieldRoot
+};

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as s, jsxs as r } from "react/jsx-runtime";
+import i from "../input.context.js";
+import { astralisMerge as n } from "../../../../utils/astralis-merge.js";
+function o({ prefix: a, suffix: t, children: e, className: l = "" }) {
+  return /* @__PURE__ */ s(i.Provider, { value: { hasPrefix: !!a, hasSuffix: !!t }, children: /* @__PURE__ */ r("div", { className: n("astralis:relative astralis:flex astralis:items-center", l), children: [
+    a && /* @__PURE__ */ s("span", { className: "astralis:absolute astralis:left-3 astralis:z-10 astralis:flex astralis:items-center astralis:text-label-subtle astralis:pointer-events-none", children: a }),
+    /* @__PURE__ */ s("div", { className: "astralis:w-full", children: e }),
+    t && /* @__PURE__ */ s("span", { className: "astralis:absolute astralis:right-3 astralis:z-10 astralis:flex astralis:items-center astralis:text-label-subtle", children: t })
+  ] }) });
+}
+o.displayName = "InputGroup";
+export {
+  o as InputGroup
+};

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { InputBase as m } from "./input.js";
+import { astralisMerge as c } from "../../../../utils/astralis-merge.js";
+import { EyeOffIcon as p, EyeIcon as u } from "../../../icon/internal-icons.js";
+function f({
+  className: r = "",
+  disabled: t,
+  ref: e,
+  ...i
+}) {
+  const [a, l] = d(!1);
+  return /* @__PURE__ */ n("div", { className: "astralis:relative astralis:flex astralis:items-center", children: [
+    /* @__PURE__ */ s("div", { className: "astralis:w-full", children: /* @__PURE__ */ s(
+      m,
+      {
+        ref: e,
+        type: a ? "text" : "password",
+        disabled: t,
+        className: c("astralis:pr-10", r),
+        ...i
+      }
+    ) }),
+    /* @__PURE__ */ s(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        disabled: t,
+        "aria-label": a ? "Hide password" : "Show password",
+        onClick: () => l((o) => !o),
+        className: "astralis:absolute astralis:right-3 astralis:z-10 astralis:flex astralis:items-center astralis:text-label-subtle astralis:transition-colors astralis:hover:text-label-muted astralis:disabled:cursor-not-allowed astralis:disabled:opacity-moderate",
+        children: a ? /* @__PURE__ */ s(p, { className: "astralis:h-4 astralis:w-4", "aria-hidden": "true" }) : /* @__PURE__ */ s(u, { className: "astralis:h-4 astralis:w-4", "aria-hidden": "true" })
+      }
+    )
+  ] });
+}
+f.displayName = "Input.Password";
+export {
+  f as InputPassword
+};

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

@@ -0,0 +1,48 @@
+"use client";
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { useRef as b } from "react";
+import { InputBase as y } from "./input.js";
+import { useFieldContext as x } from "../../field/field.context.js";
+import { astralisMerge as v } from "../../../../utils/astralis-merge.js";
+import { SearchIcon as N } from "../../../icon/internal-icons.js";
+function g({
+  onSearch: r,
+  showSearchButton: i = !1,
+  className: c = "",
+  onKeyDown: d,
+  ref: m,
+  ...s
+}) {
+  const u = b(null), l = m ?? u, n = x(), o = s.disabled ?? n?.disabled, t = s.readOnly ?? n?.readOnly, f = (e) => {
+    t || (e.key === "Enter" && r?.(e.currentTarget.value), d?.(e));
+  }, p = () => {
+    o || t || r?.(l.current?.value ?? "");
+  };
+  return /* @__PURE__ */ h("div", { className: "astralis:relative astralis:flex astralis:items-center", children: [
+    /* @__PURE__ */ a("span", { className: "astralis:absolute astralis:left-3 astralis:z-10 astralis:flex astralis:items-center astralis:text-label-subtle astralis:pointer-events-none", children: /* @__PURE__ */ a(N, { className: "astralis:h-4 astralis:w-4", "aria-hidden": "true" }) }),
+    /* @__PURE__ */ a("div", { className: "astralis:w-full", children: /* @__PURE__ */ a(
+      y,
+      {
+        ref: l,
+        type: "search",
+        onKeyDown: f,
+        className: v("astralis:pl-9", i && "astralis:rounded-r-none", c),
+        ...s
+      }
+    ) }),
+    i && /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        disabled: !!o || !!t,
+        onClick: p,
+        className: "astralis:h-10 astralis:shrink-0 astralis:rounded-r-lg astralis:bg-accent-solid astralis:px-4 astralis:text-sm astralis:font-medium astralis:text-accent-contrast astralis:transition-opacity astralis:hover:opacity-higher astralis:disabled:cursor-not-allowed astralis:disabled:opacity-moderate",
+        children: "Search"
+      }
+    )
+  ] });
+}
+g.displayName = "Input.Search";
+export {
+  g as InputSearch
+};

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

@@ -0,0 +1,53 @@
+"use client";
+import { jsxs as d, jsx as O } from "react/jsx-runtime";
+import { useFieldContext as h } from "../../field/field.context.js";
+import { textareaVariants as I } from "../input.styles.js";
+import { astralisMerge as j } from "../../../../utils/astralis-merge.js";
+function R({
+  size: n = "md",
+  variant: o = "outline",
+  invalid: c,
+  disabled: m,
+  readOnly: p,
+  showCount: x = !1,
+  maxLength: s,
+  value: a,
+  defaultValue: e,
+  className: b = "",
+  id: f,
+  rows: u = 4,
+  ref: y,
+  ...v
+}) {
+  const i = h(), r = c ?? i?.invalid, g = m ?? i?.disabled, t = p ?? i?.readOnly, l = i?.required, q = f ?? i?.id, N = typeof a == "string" ? a.length : typeof e == "string" ? e.length : 0;
+  return /* @__PURE__ */ d("div", { className: "astralis:flex astralis:flex-col astralis:gap-1", children: [
+    /* @__PURE__ */ O(
+      "textarea",
+      {
+        ref: y,
+        id: q,
+        disabled: g,
+        readOnly: t,
+        required: l,
+        "aria-invalid": r || void 0,
+        "aria-describedby": i?.describedBy,
+        "aria-required": l || void 0,
+        "aria-readonly": t || void 0,
+        maxLength: s,
+        value: a,
+        defaultValue: e,
+        rows: u,
+        className: j(I({ size: n, variant: o, invalid: !!r }), b),
+        ...v
+      }
+    ),
+    x && /* @__PURE__ */ d("span", { className: "astralis:self-end astralis:text-xs astralis:text-label-subtle astralis:tabular-nums", children: [
+      N,
+      s != null && `/${s}`
+    ] })
+  ] });
+}
+R.displayName = "Input.TextArea";
+export {
+  R as InputTextarea
+};

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

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as y } from "react/jsx-runtime";
+import { useFieldContext as b } from "../../field/field.context.js";
+import { useInputGroupContext as x } from "../input.context.js";
+import { inputVariants as q } from "../input.styles.js";
+import { astralisMerge as I } from "../../../../utils/astralis-merge.js";
+function O({
+  size: s = "md",
+  variant: n = "outline",
+  invalid: t,
+  disabled: o,
+  readOnly: l,
+  className: u = "",
+  id: p,
+  ref: m,
+  ...c
+}) {
+  const i = b(), r = x(), e = t ?? i?.invalid, f = o ?? i?.disabled, a = l ?? i?.readOnly, d = i?.required, v = p ?? i?.id;
+  return /* @__PURE__ */ y(
+    "input",
+    {
+      ref: m,
+      id: v,
+      disabled: f,
+      readOnly: a,
+      required: d,
+      "aria-invalid": e || void 0,
+      "aria-describedby": i?.describedBy,
+      "aria-required": d || void 0,
+      "aria-readonly": a || void 0,
+      className: I(
+        q({ size: s, variant: n, invalid: !!e }),
+        r.hasPrefix && "astralis:pl-9",
+        r.hasSuffix && "astralis:pr-9",
+        u
+      ),
+      ...c
+    }
+  );
+}
+O.displayName = "Input";
+export {
+  O as InputBase
+};

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

@@ -0,0 +1,18 @@
+"use client";
+import { InputBase as r } from "./components/input.js";
+import { InputPassword as t } from "./components/input-password.js";
+import { InputSearch as e } from "./components/input-search.js";
+import { InputTextarea as a } from "./components/input-textarea.js";
+const n = Object.assign(r, {
+  Password: t,
+  Search: e,
+  TextArea: a
+});
+export {
+  n as Input,
+  r as InputBase,
+  t as InputPassword,
+  e as InputSearch,
+  a as InputTextarea,
+  a as Textarea
+};

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

@@ -0,0 +1,13 @@
+"use client";
+import { useContext as t, createContext as e } from "react";
+const n = e({
+  hasPrefix: !1,
+  hasSuffix: !1
+});
+function u() {
+  return t(n);
+}
+export {
+  n as default,
+  u as useInputGroupContext
+};

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

@@ -0,0 +1,48 @@
+"use client";
+import { cva as a } from "class-variance-authority";
+const r = "astralis:w-full astralis:font-normal astralis:text-label-base astralis:transition-colors astralis:outline-none astralis:placeholder:text-label-subtle astralis:disabled:cursor-not-allowed astralis:disabled:opacity-moderate astralis:disabled:bg-surface-muted", i = {
+  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",
+  underline: "astralis:border-0 astralis:border-b-2 astralis:border-stroke-base astralis:bg-transparent astralis:rounded-none astralis:px-0 astralis:hover:border-stroke-emphasized astralis:focus-visible:border-accent-stroke",
+  unstyled: "astralis:border-0 astralis:bg-transparent astralis:rounded-none"
+}, s = {
+  outline: "astralis:border-red-solid astralis:hover:border-red-solid astralis:focus-visible:border-red-solid astralis:focus-visible:ring-red-muted",
+  filled: "astralis:border-red-solid astralis:hover:border-red-solid astralis:focus-visible:border-red-solid astralis:focus-visible:ring-red-muted",
+  underline: "astralis:border-red-solid astralis:hover:border-red-solid astralis:focus-visible:border-red-solid"
+}, l = a(r, {
+  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: i,
+    invalid: { true: "", false: "" }
+  },
+  compoundVariants: [
+    { invalid: !0, variant: "outline", className: s.outline },
+    { invalid: !0, variant: "filled", className: s.filled },
+    { invalid: !0, variant: "underline", className: s.underline }
+  ],
+  defaultVariants: { size: "md", variant: "outline", invalid: !1 }
+}), t = a(r + " astralis:resize-y", {
+  variants: {
+    size: {
+      sm: "astralis:px-3 astralis:py-1.5 astralis:text-xs",
+      md: "astralis:px-3 astralis:py-2 astralis:text-sm",
+      lg: "astralis:px-4 astralis:py-3 astralis:text-base"
+    },
+    variant: i,
+    invalid: { true: "", false: "" }
+  },
+  compoundVariants: [
+    { invalid: !0, variant: "outline", className: s.outline },
+    { invalid: !0, variant: "filled", className: s.filled },
+    { invalid: !0, variant: "underline", className: s.underline }
+  ],
+  defaultVariants: { size: "md", variant: "outline", invalid: !1 }
+});
+export {
+  l as inputVariants,
+  t as textareaVariants
+};