astralis-ui 0.1.0

package/dist/components/data-display/tag/components/checkable-tag-group.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { CheckableTag as x } from "./checkable-tag.js";
+import { astralisMerge as h } from "../../../../utils/astralis-merge.js";
+function j({
+  value: a = [],
+  onChange: s,
+  options: c,
+  multiple: i = !1,
+  size: f = "md",
+  colorScheme: m = "brand",
+  className: n = "",
+  style: o,
+  ...g
+}) {
+  const u = (r, e) => {
+    s && s(i ? e ? [...a, r] : a.filter((l) => l !== r) : e ? [r] : []);
+  };
+  return /* @__PURE__ */ t("div", { className: h("astralis:flex astralis:flex-wrap astralis:gap-2", n), style: o, role: "group", ...g, children: c.map((r) => {
+    const e = typeof r == "object" && r !== null, l = e ? r.value : r, b = e ? r.label : r, d = a.includes(l);
+    return /* @__PURE__ */ t(
+      x,
+      {
+        size: f,
+        colorScheme: m,
+        checked: d,
+        onChange: (p) => u(l, p),
+        children: b
+      },
+      String(l)
+    );
+  }) });
+}
+j.displayName = "Tag.Group";
+export {
+  j as CheckableTagGroup
+};

package/dist/components/data-display/tag/components/checkable-tag.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as f } from "react/jsx-runtime";
+import { TagRoot as m } from "./tag-root.js";
+import { astralisMerge as b } from "../../../../utils/astralis-merge.js";
+function p({
+  children: t,
+  checked: a = !1,
+  onChange: s,
+  colorScheme: r = "brand",
+  size: e = "md",
+  startElement: l,
+  endElement: o,
+  className: n = "",
+  ref: c,
+  ...u
+}) {
+  return /* @__PURE__ */ f(
+    m,
+    {
+      ref: c,
+      size: e,
+      variant: a ? "solid" : "subtle",
+      colorScheme: a ? r : "gray",
+      role: "checkbox",
+      "aria-checked": a,
+      tabIndex: 0,
+      onClick: () => s?.(!a),
+      onKeyDown: (i) => {
+        (i.key === "Enter" || i.key === " ") && (i.preventDefault(), s?.(!a));
+      },
+      startElement: l,
+      endElement: o,
+      className: b(
+        "astralis:cursor-pointer astralis:transition-all astralis:hover:opacity-90 astralis:active:scale-95 astralis:outline-none astralis:focus-visible:outline-2 astralis:focus-visible:outline-offset-2 astralis:focus-visible:outline-accent-ring",
+        n
+      ),
+      ...u,
+      children: t
+    }
+  );
+}
+p.displayName = "Tag.Checkable";
+export {
+  p as CheckableTag
+};

package/dist/components/data-display/tag/components/tag-root.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
+import { closeIconSize as d, tagVariants as g } from "../tag.styles.js";
+import { astralisMerge as b } from "../../../../utils/astralis-merge.js";
+import { accentClass as v } from "../../../../const/color-schemes.js";
+import x from "../../../icon/icon.js";
+import { XIcon as y } from "../../../icon/internal-icons.js";
+function N({
+  children: o,
+  size: a = "md",
+  variant: n = "subtle",
+  colorScheme: e = "gray",
+  startElement: i,
+  endElement: r,
+  closable: t,
+  onClose: c,
+  className: p = "",
+  style: m,
+  ref: u,
+  ...f
+}) {
+  return /* @__PURE__ */ h(
+    "span",
+    {
+      ref: u,
+      className: b(g({ size: a, variant: n }), v(e), p),
+      style: m,
+      ...f,
+      children: [
+        i && /* @__PURE__ */ s("span", { className: "astralis:shrink-0 astralis:inline-flex", children: i }),
+        /* @__PURE__ */ s("span", { className: "astralis:truncate", children: o }),
+        r && !t && /* @__PURE__ */ s("span", { className: "astralis:shrink-0 astralis:inline-flex", children: r }),
+        t && /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Remove",
+            onClick: (l) => {
+              l.preventDefault(), l.stopPropagation(), c?.();
+            },
+            className: "astralis:shrink-0 astralis:inline-flex astralis:rounded-sm astralis:opacity-70 astralis:cursor-pointer astralis:transition-opacity astralis:hover:opacity-100 astralis:outline-none astralis:focus-visible:outline-2 astralis:focus-visible:outline-offset-1 astralis:focus-visible:outline-accent-ring",
+            children: /* @__PURE__ */ s(x, { size: d[a], children: /* @__PURE__ */ s(y, {}) })
+          }
+        )
+      ]
+    }
+  );
+}
+N.displayName = "Tag";
+export {
+  N as TagRoot
+};

package/dist/components/data-display/tag/index.js

@@ -0,0 +1,14 @@
+"use client";
+import { CheckableTag as o } from "./components/checkable-tag.js";
+import { CheckableTagGroup as e } from "./components/checkable-tag-group.js";
+import { TagRoot as r } from "./components/tag-root.js";
+const m = Object.assign(r, {
+  Checkable: o,
+  Group: e
+});
+export {
+  o as CheckableTag,
+  e as CheckableTagGroup,
+  m as Tag,
+  r as TagRoot
+};

package/dist/components/data-display/tag/tag.styles.js

@@ -0,0 +1,27 @@
+"use client";
+import { cva as s } from "class-variance-authority";
+const t = s(
+  "astralis:inline-flex astralis:items-center astralis:justify-center astralis:gap-1 astralis:font-medium astralis:rounded-md astralis:whitespace-nowrap astralis:transition-colors",
+  {
+    variants: {
+      size: {
+        // xs aligns the chip scale with Badge (both are xs–lg).
+        xs: "astralis:h-4 astralis:px-1.5 astralis:text-2xs",
+        sm: "astralis:h-5 astralis:px-2 astralis:text-xs",
+        md: "astralis:h-6 astralis:px-2.5 astralis:text-xs",
+        lg: "astralis:h-7 astralis:px-3 astralis:text-sm"
+      },
+      variant: {
+        solid: "astralis:bg-accent-solid astralis:text-accent-contrast",
+        subtle: "astralis:bg-accent-subtle astralis:text-accent-label",
+        surface: "astralis:bg-accent-subtle astralis:text-accent-label astralis:border-normal astralis:border-accent-stroke",
+        outline: "astralis:bg-transparent astralis:border-normal astralis:border-accent-stroke astralis:text-accent-label"
+      }
+    },
+    defaultVariants: { size: "md", variant: "subtle" }
+  }
+), r = { xs: "xs", sm: "xs", md: "xs", lg: "sm" };
+export {
+  r as closeIconSize,
+  t as tagVariants
+};

package/dist/components/data-display/timeline/components/timeline-content.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { useTimeline as l } from "../timeline.context.js";
+import { timelineTitleSize as n } from "../timeline.styles.js";
+import { astralisMerge as s } from "../../../../utils/astralis-merge.js";
+function r({ children: e, className: i = "" }) {
+  return /* @__PURE__ */ t("div", { className: s("astralis:flex astralis:flex-col astralis:gap-0.5 astralis:pt-0.5", i), children: e });
+}
+r.displayName = "Timeline.Content";
+function m({ children: e, className: i = "" }) {
+  const { size: a } = l();
+  return /* @__PURE__ */ t("span", { className: s("astralis:font-medium astralis:text-label-base", n[a], i), children: e });
+}
+m.displayName = "Timeline.Title";
+function o({ children: e, className: i = "" }) {
+  return /* @__PURE__ */ t("span", { className: s("astralis:text-sm astralis:text-label-muted", i), children: e });
+}
+o.displayName = "Timeline.Description";
+export {
+  r as TimelineContent,
+  o as TimelineDescription,
+  m as TimelineTitle
+};

package/dist/components/data-display/timeline/components/timeline-indicator.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { useTimeline as n } from "../timeline.context.js";
+import { timelineIndicatorVariants as s } from "../timeline.styles.js";
+import { astralisMerge as c } from "../../../../utils/astralis-merge.js";
+import { accentClass as l } from "../../../../const/color-schemes.js";
+function p({ children: i, colorScheme: e, className: r = "" }) {
+  const { size: o, variant: t, colorScheme: a } = n();
+  return /* @__PURE__ */ m(
+    "span",
+    {
+      "aria-hidden": i ? void 0 : !0,
+      className: c(s({ size: o, variant: t }), l(e ?? a), r),
+      children: i
+    }
+  );
+}
+p.displayName = "Timeline.Indicator";
+export {
+  p as TimelineIndicator
+};

package/dist/components/data-display/timeline/components/timeline-item.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { Children as c, isValidElement as f } from "react";
+import { useTimeline as p, useTimelineItem as d } from "../timeline.context.js";
+import { timelineColumnWidth as x } from "../timeline.styles.js";
+import { astralisMerge as l } from "../../../../utils/astralis-merge.js";
+function b({ children: r, className: m = "" }) {
+  const { size: n } = p(), { isLast: o } = d();
+  let i = null;
+  const a = [];
+  return c.forEach(r, (s) => {
+    f(s) && s.type?.displayName === "Timeline.Indicator" ? i = s : a.push(s);
+  }), /* @__PURE__ */ e("div", { className: l("astralis:flex astralis:gap-3", m), children: [
+    /* @__PURE__ */ e("div", { className: l("astralis:flex astralis:flex-col astralis:items-center astralis:shrink-0", x[n]), children: [
+      i,
+      !o && /* @__PURE__ */ t("div", { className: "astralis:w-px astralis:flex-1 astralis:min-h-6 astralis:bg-stroke-base astralis:mt-1" })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "astralis:flex-1 astralis:min-w-0 astralis:pb-6", children: a })
+  ] });
+}
+export {
+  b as TimelineItem
+};

package/dist/components/data-display/timeline/components/timeline-root.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { Children as d } from "react";
+import { TimelineContext as c, TimelineItemContext as f } from "../timeline.context.js";
+import { astralisMerge as x } from "../../../../utils/astralis-merge.js";
+function C({ children: t, size: o = "md", variant: l = "solid", colorScheme: n = "brand", className: s = "" }) {
+  const r = d.toArray(t), m = r.length - 1;
+  return /* @__PURE__ */ e(c.Provider, { value: { size: o, variant: l, colorScheme: n }, children: /* @__PURE__ */ e("div", { className: x("astralis:flex astralis:flex-col", s), children: r.map((a, i) => /* @__PURE__ */ e(f.Provider, { value: { isLast: i === m }, children: a }, i)) }) });
+}
+export {
+  C as TimelineRoot
+};

package/dist/components/data-display/timeline/index.js

@@ -0,0 +1,20 @@
+"use client";
+import { TimelineRoot as i } from "./components/timeline-root.js";
+import { TimelineItem as e } from "./components/timeline-item.js";
+import { TimelineIndicator as t } from "./components/timeline-indicator.js";
+import { TimelineDescription as n, TimelineTitle as o, TimelineContent as m } from "./components/timeline-content.js";
+const p = Object.assign(i, {
+  Item: e,
+  Indicator: t,
+  Content: m,
+  Title: o,
+  Description: n
+});
+export {
+  p as Timeline,
+  m as TimelineContent,
+  n as TimelineDescription,
+  t as TimelineIndicator,
+  e as TimelineItem,
+  o as TimelineTitle
+};

package/dist/components/data-display/timeline/timeline.context.js

@@ -0,0 +1,18 @@
+"use client";
+import { useContext as t, createContext as n } from "react";
+const i = n(null);
+function m() {
+  const e = t(i);
+  if (!e) throw new Error("Timeline sub-components must be used within <Timeline>");
+  return e;
+}
+const o = n({ isLast: !1 });
+function r() {
+  return t(o);
+}
+export {
+  i as TimelineContext,
+  o as TimelineItemContext,
+  m as useTimeline,
+  r as useTimelineItem
+};

package/dist/components/data-display/timeline/timeline.styles.js

@@ -0,0 +1,33 @@
+"use client";
+import { cva as s } from "class-variance-authority";
+const a = s(
+  "astralis:inline-flex astralis:items-center astralis:justify-center astralis:rounded-full astralis:shrink-0 astralis:font-medium",
+  {
+    variants: {
+      size: {
+        sm: "astralis:size-5 astralis:text-xs",
+        md: "astralis:size-6 astralis:text-xs",
+        lg: "astralis:size-8 astralis:text-sm"
+      },
+      variant: {
+        solid: "astralis:bg-accent-solid astralis:text-accent-contrast",
+        subtle: "astralis:bg-accent-subtle astralis:text-accent-label",
+        outline: "astralis:bg-surface-base astralis:border-normal astralis:border-accent-stroke astralis:text-accent-label"
+      }
+    },
+    defaultVariants: { size: "md", variant: "solid" }
+  }
+), i = {
+  sm: "astralis:w-5",
+  md: "astralis:w-6",
+  lg: "astralis:w-8"
+}, e = {
+  sm: "astralis:text-sm",
+  md: "astralis:text-sm",
+  lg: "astralis:text-base"
+};
+export {
+  i as timelineColumnWidth,
+  a as timelineIndicatorVariants,
+  e as timelineTitleSize
+};

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

@@ -0,0 +1,12 @@
+"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 useCheckboxGroupContext
+};

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

@@ -0,0 +1,14 @@
+"use client";
+const r = {
+  sm: { box: "astralis:h-3.5 astralis:w-3.5", icon: "astralis:h-3 astralis:w-3", label: "astralis:text-xs" },
+  md: { box: "astralis:h-4 astralis:w-4", icon: "astralis:h-3.5 astralis:w-3.5", label: "astralis:text-sm" },
+  lg: { box: "astralis:h-5 astralis:w-5", icon: "astralis:h-4 astralis:w-4", label: "astralis:text-base" }
+}, i = "astralis:shrink-0 astralis:rounded-sm 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 checkboxControl,
+  t as checkboxControlColor,
+  r as checkboxSizes
+};

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

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

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

@@ -0,0 +1,86 @@
+"use client";
+import { jsxs as w, jsx as s } from "react/jsx-runtime";
+import { useState as E, useEffect as C, useRef as F } from "react";
+import { useCheckboxGroupContext as L } from "../checkbox.context.js";
+import { useFieldContext as q } from "../../field/field.context.js";
+import { checkboxSizes as A, checkboxControlColor as H, checkboxControl as J } from "../checkbox.styles.js";
+import { astralisMerge as a } from "../../../../utils/astralis-merge.js";
+import { accentClass as K } from "../../../../const/color-schemes.js";
+import { MinusIcon as Q, CheckIcon as T } from "../../../icon/internal-icons.js";
+function U({
+  children: m,
+  size: g = "md",
+  colorScheme: k,
+  indeterminate: t = !1,
+  invalid: y,
+  disabled: v,
+  checked: o,
+  defaultChecked: N = !1,
+  onChange: S,
+  readOnly: O,
+  value: r,
+  className: R = "",
+  id: I,
+  ref: M,
+  ...j
+}) {
+  const e = L(), l = q(), [z, b] = E(N), p = e != null && r != null, i = o !== void 0, u = p ? e.groupValue.includes(String(r)) : i ? o : z, h = v ?? e?.disabled ?? l?.disabled, x = y ?? l?.invalid, n = O ?? l?.readOnly, B = k ?? e?.colorScheme ?? "brand", D = (f) => {
+    if (n) {
+      f.preventDefault();
+      return;
+    }
+    p ? e.toggleValue(String(r)) : i || b(f.target.checked), S?.(f);
+  };
+  C(() => {
+    i && b(o);
+  }, [i, o]);
+  const G = F(null), c = M ?? G;
+  C(() => {
+    c.current && (c.current.indeterminate = t);
+  }, [t, c]);
+  const d = A[g], V = u || t;
+  return /* @__PURE__ */ w(
+    "label",
+    {
+      className: a(
+        "astralis:inline-flex astralis:items-center astralis:gap-2",
+        K(B),
+        h ? "astralis:cursor-not-allowed astralis:opacity-moderate" : n ? "astralis:cursor-default" : "astralis:cursor-pointer",
+        R
+      ),
+      children: [
+        /* @__PURE__ */ s(
+          "input",
+          {
+            ref: c,
+            type: "checkbox",
+            id: I,
+            value: r,
+            checked: u,
+            disabled: h,
+            readOnly: n,
+            "aria-invalid": x || void 0,
+            "aria-describedby": l?.describedBy,
+            "aria-readonly": n || void 0,
+            onChange: D,
+            className: "astralis:sr-only astralis:peer",
+            ...j
+          }
+        ),
+        /* @__PURE__ */ s(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: a(d.box, J, H(V, !!x)),
+            children: t ? /* @__PURE__ */ s(Q, { className: a(d.icon, "astralis:text-accent-contrast") }) : u ? /* @__PURE__ */ s(T, { className: a(d.icon, "astralis:text-accent-contrast") }) : null
+          }
+        ),
+        m && /* @__PURE__ */ s("span", { className: a(d.label, "astralis:text-label-base astralis:select-none"), children: m })
+      ]
+    }
+  );
+}
+U.displayName = "Checkbox";
+export {
+  U as CheckboxBase
+};

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

@@ -0,0 +1,11 @@
+"use client";
+import { CheckboxBase as o } from "./components/checkbox.js";
+import { CheckboxGroup as e } from "./components/checkbox-group.js";
+const t = Object.assign(o, {
+  Group: e
+});
+export {
+  t as Checkbox,
+  o as CheckboxBase,
+  e as CheckboxGroup
+};