astralis-ui 0.1.0

package/dist/components/navigation/breadcrumb/breadcrumb.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import { Children as p, isValidElement as h, Fragment as x } from "react";
+import { astralisMerge as i } from "../../../utils/astralis-merge.js";
+import { ChevronRightIcon as g } from "../../icon/internal-icons.js";
+function c({
+  separator: e,
+  className: r = "",
+  children: s,
+  ref: t,
+  ...l
+}) {
+  const n = p.toArray(s).filter(h), d = e ?? /* @__PURE__ */ a(g, { className: "astralis:h-3.5 astralis:w-3.5" });
+  return /* @__PURE__ */ a("nav", { ref: t, "aria-label": "Breadcrumb", className: i("astralis:text-sm", r), ...l, children: /* @__PURE__ */ a("ol", { className: "astralis:flex astralis:flex-wrap astralis:items-center astralis:gap-1.5", children: n.map((b, m) => /* @__PURE__ */ f(x, { children: [
+    b,
+    m < n.length - 1 && /* @__PURE__ */ a("li", { "aria-hidden": "true", className: "astralis:flex astralis:items-center astralis:text-label-subtle", children: d })
+  ] }, m)) }) });
+}
+c.displayName = "Breadcrumb";
+function o({ className: e = "", children: r, ...s }) {
+  return /* @__PURE__ */ a("li", { className: i("astralis:inline-flex astralis:items-center astralis:gap-1.5", e), ...s, children: r });
+}
+o.displayName = "Breadcrumb.Item";
+function u({
+  as: e,
+  isCurrent: r = !1,
+  className: s = "",
+  children: t,
+  ...l
+}) {
+  return r ? /* @__PURE__ */ a("span", { "aria-current": "page", className: i("astralis:font-medium astralis:text-label-base", s), children: t }) : /* @__PURE__ */ a(
+    e || "a",
+    {
+      className: i(
+        "astralis:text-label-muted astralis:transition-colors astralis:hover:text-label-base astralis:focus-visible:outline-2 astralis:focus-visible:outline-offset-2 astralis:focus-visible:outline-brand-ring astralis:rounded-sm",
+        s
+      ),
+      ...l,
+      children: t
+    }
+  );
+}
+u.displayName = "Breadcrumb.Link";
+const I = Object.assign(c, {
+  Item: o,
+  Link: u
+});
+export {
+  I as Breadcrumb
+};

package/dist/components/navigation/steps/components/steps-completed.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { astralisMerge as a } from "../../../../utils/astralis-merge.js";
+import { useStepsContext as i } from "../steps.context.js";
+function p({ children: e, className: s, ...r }) {
+  const { step: l, count: t } = i();
+  return t === 0 || l < t ? null : /* @__PURE__ */ o("div", { className: a("astralis:w-full astralis:text-label-base", s), ...r, children: e });
+}
+p.displayName = "Steps.Completed";
+export {
+  p as StepsCompleted
+};

package/dist/components/navigation/steps/components/steps-content.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { astralisMerge as n } from "../../../../utils/astralis-merge.js";
+import { useStepsContext as o } from "../steps.context.js";
+function i({ index: t, children: e, className: s, ...r }) {
+  const { step: a } = o();
+  return a !== t ? null : /* @__PURE__ */ l("div", { role: "tabpanel", className: n("astralis:w-full astralis:text-label-base", s), ...r, children: e });
+}
+i.displayName = "Steps.Content";
+export {
+  i as StepsContent
+};

package/dist/components/navigation/steps/components/steps-description.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { useStepsContext as i } from "../steps.context.js";
+import { stepSizeClasses as r } from "../steps.styles.js";
+import p from "../../../typography/text/text.js";
+function m({ children: e, className: t }) {
+  const { size: s } = i();
+  return /* @__PURE__ */ o(p, { size: r[s].descSize, color: "muted", className: t, children: e });
+}
+m.displayName = "Steps.Description";
+export {
+  m as StepsDescription
+};

package/dist/components/navigation/steps/components/steps-indicator.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { astralisMerge as n } from "../../../../utils/astralis-merge.js";
+import { useStepsContext as p, useStepItemContext as u } from "../steps.context.js";
+import { stepDotVariants as m, stepIndicatorVariants as l } from "../steps.styles.js";
+const f = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 20 20", fill: "none", className: "astralis:size-[1.1em]", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M5 10.5l3.5 3.5L15 6.5", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function v({ children: i, className: r, ...s }) {
+  const { variant: a, size: o } = p(), { index: c, status: t } = u();
+  if (a === "dot")
+    return /* @__PURE__ */ e(
+      "span",
+      {
+        "data-status": t,
+        "aria-current": t === "active" ? "step" : void 0,
+        className: n(m({ size: o, status: t }), r),
+        ...s
+      }
+    );
+  const d = i ?? (t === "error" ? "!" : t === "completed" ? /* @__PURE__ */ e(f, {}) : c + 1);
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      "data-status": t,
+      "aria-current": t === "active" ? "step" : void 0,
+      className: n(l({ size: o, variant: a, status: t }), r),
+      ...s,
+      children: d
+    }
+  );
+}
+v.displayName = "Steps.Indicator";
+export {
+  v as StepsIndicator
+};

package/dist/components/navigation/steps/components/steps-item.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as a, jsxs as r, Fragment as g } from "react/jsx-runtime";
+import { useMemo as G, Children as M, isValidElement as A } from "react";
+import { astralisMerge as e } from "../../../../utils/astralis-merge.js";
+import { useStepsContext as F, StepItemContext as L } from "../steps.context.js";
+import { stepConnectorVariants as m, stepSizeClasses as T, stepTriggerVariants as $ } from "../steps.styles.js";
+function q(d) {
+  let s = null;
+  const o = [];
+  return M.toArray(d).forEach((l) => {
+    (A(l) ? l.type?.displayName : void 0) === "Steps.Indicator" && s === null ? s = l : o.push(l);
+  }), { indicator: s, rest: o };
+}
+function B({
+  children: d,
+  index: s = 0,
+  disabled: o = !1,
+  error: l = !1,
+  className: N,
+  ...S
+}) {
+  const { step: i, count: z, orientation: b, labelPlacement: y, size: I, linear: w, clickable: P, setStep: V } = F(), p = y === "bottom", n = l ? "error" : s < i ? "completed" : s === i ? "active" : "upcoming", f = o || w && s > i, t = s === z - 1, j = G(
+    () => ({ index: s, status: n, disabled: f, isLast: t }),
+    [s, n, f, t]
+  ), { indicator: u, rest: x } = q(d), k = T[I], h = (C) => P ? /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      disabled: f,
+      onClick: () => V(s),
+      "aria-current": n === "active" ? "step" : void 0,
+      "aria-label": `Go to step ${s + 1}`,
+      className: $(),
+      children: C
+    }
+  ) : C, v = x.length > 0 ? /* @__PURE__ */ a(
+    "div",
+    {
+      className: e(
+        "astralis:flex astralis:flex-col astralis:gap-0.5",
+        p && "astralis:items-center astralis:text-center"
+      ),
+      children: x
+    }
+  ) : null;
+  let c;
+  b === "vertical" ? c = /* @__PURE__ */ r("div", { className: "astralis:flex astralis:gap-3 astralis:w-full", children: [
+    /* @__PURE__ */ r("div", { className: "astralis:flex astralis:flex-col astralis:items-center", children: [
+      h(u),
+      !t && /* @__PURE__ */ a(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: m({ orientation: "vertical", done: n === "completed" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: e("astralis:flex-1", !t && "astralis:pb-6"), children: v })
+  ] }) : p ? c = /* @__PURE__ */ r(g, { children: [
+    /* @__PURE__ */ r("div", { className: "astralis:flex astralis:items-center astralis:w-full", children: [
+      /* @__PURE__ */ a(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: e(
+            m({ orientation: "horizontal", done: s <= i }),
+            "astralis:mr-2",
+            s === 0 && "astralis:invisible"
+          )
+        }
+      ),
+      h(u),
+      /* @__PURE__ */ a(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: e(
+            m({ orientation: "horizontal", done: s < i }),
+            "astralis:ml-2",
+            t && "astralis:invisible"
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: "astralis:mt-2", children: v })
+  ] }) : c = /* @__PURE__ */ r(g, { children: [
+    /* @__PURE__ */ r("div", { className: e("astralis:flex astralis:items-center", k.rowGap), children: [
+      h(u),
+      v
+    ] }),
+    !t && /* @__PURE__ */ a(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: e(
+          m({ orientation: "horizontal", done: s < i }),
+          "astralis:mx-3"
+        )
+      }
+    )
+  ] });
+  const E = e(
+    "astralis:flex",
+    b === "vertical" ? "astralis:w-full" : p ? "astralis:flex-col astralis:items-center astralis:flex-1" : t ? "astralis:items-center" : "astralis:items-center astralis:flex-1",
+    N
+  );
+  return /* @__PURE__ */ a(L.Provider, { value: j, children: /* @__PURE__ */ a("li", { role: "listitem", "data-status": n, "data-index": s, className: E, ...S, children: c }) });
+}
+B.displayName = "Steps.Item";
+export {
+  B as StepsItem
+};

package/dist/components/navigation/steps/components/steps-list.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { Children as u, isValidElement as x, useEffect as d, cloneElement as C } from "react";
+import { astralisMerge as l } from "../../../../utils/astralis-merge.js";
+import { useStepsContext as h } from "../steps.context.js";
+function E({ children: i, className: r, ...o }) {
+  const { orientation: a, labelPlacement: n, setCount: t } = h(), e = u.toArray(i).filter(x), s = e.length;
+  d(() => {
+    t(s);
+  }, [s, t]);
+  const m = l(
+    "astralis:flex",
+    a === "vertical" ? "astralis:flex-col" : l("astralis:w-full", n === "bottom" ? "astralis:items-start" : "astralis:items-center"),
+    r
+  );
+  return /* @__PURE__ */ p("ol", { role: "list", className: m, ...o, children: e.map((c, f) => C(c, { index: f })) });
+}
+E.displayName = "Steps.List";
+export {
+  E as StepsList
+};

package/dist/components/navigation/steps/components/steps-next.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as c } from "react/jsx-runtime";
+import { astralisMerge as l } from "../../../../utils/astralis-merge.js";
+import { useStepsContext as u } from "../steps.context.js";
+import { stepNavVariants as x } from "../steps.styles.js";
+function N({ children: e, className: s, disabled: o, onClick: r, ...i }) {
+  const { step: t, count: n, setStep: p } = u(), a = o ?? t >= n;
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      type: "button",
+      disabled: a,
+      onClick: (m) => {
+        p(t + 1), r?.(m);
+      },
+      className: l(x(), s),
+      ...i,
+      children: e ?? "Next"
+    }
+  );
+}
+N.displayName = "Steps.Next";
+export {
+  N as StepsNext
+};

package/dist/components/navigation/steps/components/steps-prev.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { astralisMerge as c } from "../../../../utils/astralis-merge.js";
+import { useStepsContext as l } from "../steps.context.js";
+import { stepNavVariants as u } from "../steps.styles.js";
+function d({ children: e, className: s, disabled: r, onClick: o, ...i }) {
+  const { step: t, setStep: p } = l(), a = r ?? t <= 0;
+  return /* @__PURE__ */ m(
+    "button",
+    {
+      type: "button",
+      disabled: a,
+      onClick: (n) => {
+        p(t - 1), o?.(n);
+      },
+      className: c(u(), s),
+      ...i,
+      children: e ?? "Back"
+    }
+  );
+}
+d.displayName = "Steps.Prev";
+export {
+  d as StepsPrev
+};

package/dist/components/navigation/steps/components/steps-root.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as f } from "react/jsx-runtime";
+import { useState as x, useCallback as w, useMemo as y } from "react";
+import { astralisMerge as z } from "../../../../utils/astralis-merge.js";
+import { StepsContext as U } from "../steps.context.js";
+function k({
+  step: r,
+  defaultStep: S = 0,
+  onStepChange: c,
+  count: h,
+  orientation: t = "horizontal",
+  variant: l = "solid",
+  size: i = "md",
+  linear: s = !1,
+  labelPlacement: n = "inline",
+  clickable: m = !1,
+  className: M,
+  children: v,
+  ...C
+}) {
+  const a = r !== void 0, [N, R] = x(S), o = a ? r : N, [e, g] = x(h ?? 0), d = w(
+    (p) => {
+      if (s && p > o + 1) return;
+      const u = Math.max(0, Math.min(p, e));
+      a || R(u), c?.(u);
+    },
+    [s, o, e, a, c]
+  ), j = y(
+    () => ({
+      step: o,
+      setStep: d,
+      count: e,
+      setCount: g,
+      orientation: t,
+      variant: l,
+      size: i,
+      linear: s,
+      labelPlacement: n,
+      clickable: m
+    }),
+    [o, d, e, t, l, i, s, n, m]
+  );
+  return /* @__PURE__ */ f(U.Provider, { value: j, children: /* @__PURE__ */ f(
+    "div",
+    {
+      "data-orientation": t,
+      "data-variant": l,
+      className: z(
+        "astralis:flex astralis:flex-col astralis:gap-6",
+        t === "horizontal" && "astralis:w-full",
+        M
+      ),
+      ...C,
+      children: v
+    }
+  ) });
+}
+k.displayName = "Steps.Root";
+export {
+  k as StepsRoot
+};

package/dist/components/navigation/steps/components/steps-title.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { useStepsContext as m, useStepItemContext as p } from "../steps.context.js";
+import { stepSizeClasses as n } from "../steps.styles.js";
+import u from "../../../typography/text/text.js";
+function c({ children: t, className: s }) {
+  const { size: o } = m(), { status: e } = p(), r = e === "error" ? "error" : e === "upcoming" ? "muted" : "base";
+  return /* @__PURE__ */ i(u, { as: "p", size: n[o].titleSize, weight: "medium", color: r, className: s, children: t });
+}
+c.displayName = "Steps.Title";
+export {
+  c as StepsTitle
+};

package/dist/components/navigation/steps/index.js

@@ -0,0 +1,34 @@
+"use client";
+import { StepsRoot as t } from "./components/steps-root.js";
+import { StepsList as o } from "./components/steps-list.js";
+import { StepsItem as e } from "./components/steps-item.js";
+import { StepsIndicator as r } from "./components/steps-indicator.js";
+import { StepsTitle as p } from "./components/steps-title.js";
+import { StepsDescription as m } from "./components/steps-description.js";
+import { StepsContent as i } from "./components/steps-content.js";
+import { StepsCompleted as s } from "./components/steps-completed.js";
+import { StepsPrev as n } from "./components/steps-prev.js";
+import { StepsNext as S } from "./components/steps-next.js";
+const L = Object.assign(t, {
+  List: o,
+  Item: e,
+  Indicator: r,
+  Title: p,
+  Description: m,
+  Content: i,
+  Completed: s,
+  Prev: n,
+  Next: S
+});
+export {
+  L as Steps,
+  s as StepsCompleted,
+  i as StepsContent,
+  m as StepsDescription,
+  r as StepsIndicator,
+  e as StepsItem,
+  o as StepsList,
+  S as StepsNext,
+  n as StepsPrev,
+  p as StepsTitle
+};

package/dist/components/navigation/steps/steps.context.js

@@ -0,0 +1,20 @@
+"use client";
+import { useContext as e, createContext as n } from "react";
+const o = n(null);
+function u() {
+  const t = e(o);
+  if (!t) throw new Error("Steps sub-components must be used within <Steps.Root>");
+  return t;
+}
+const s = n(null);
+function p() {
+  const t = e(s);
+  if (!t) throw new Error("This step part must be used within <Steps.Item>");
+  return t;
+}
+export {
+  s as StepItemContext,
+  o as StepsContext,
+  p as useStepItemContext,
+  u as useStepsContext
+};

package/dist/components/navigation/steps/steps.styles.js

@@ -0,0 +1,97 @@
+"use client";
+import { cva as s } from "class-variance-authority";
+const t = {
+  sm: {
+    circle: "astralis:size-6 astralis:text-xs",
+    dot: "astralis:size-2.5",
+    rowGap: "astralis:gap-2.5",
+    titleSize: "sm",
+    descSize: "xs"
+  },
+  md: {
+    circle: "astralis:size-8 astralis:text-sm",
+    dot: "astralis:size-3",
+    rowGap: "astralis:gap-3",
+    titleSize: "md",
+    descSize: "sm"
+  },
+  lg: {
+    circle: "astralis:size-10 astralis:text-md",
+    dot: "astralis:size-4",
+    rowGap: "astralis:gap-3.5",
+    titleSize: "lg",
+    descSize: "sm"
+  }
+}, r = s(
+  "astralis:flex astralis:items-center astralis:justify-center astralis:rounded-full astralis:border-moderate astralis:font-medium astralis:shrink-0 astralis:transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "astralis:size-6 astralis:text-xs",
+        md: "astralis:size-8 astralis:text-sm",
+        lg: "astralis:size-10 astralis:text-md"
+      },
+      variant: { solid: "", subtle: "" },
+      status: { upcoming: "", active: "", completed: "", error: "" }
+    },
+    compoundVariants: [
+      // solid
+      { variant: "solid", status: "upcoming", class: "astralis:bg-transparent astralis:text-label-subtle astralis:border-stroke-base" },
+      { variant: "solid", status: "active", class: "astralis:bg-brand-solid astralis:text-brand-contrast astralis:border-brand-solid" },
+      { variant: "solid", status: "completed", class: "astralis:bg-brand-solid astralis:text-brand-contrast astralis:border-brand-solid" },
+      { variant: "solid", status: "error", class: "astralis:bg-surface-error astralis:text-label-error astralis:border-stroke-error" },
+      // subtle
+      { variant: "subtle", status: "upcoming", class: "astralis:bg-transparent astralis:text-label-subtle astralis:border-stroke-base" },
+      { variant: "subtle", status: "active", class: "astralis:bg-brand-subtle astralis:text-brand-label astralis:border-brand-solid" },
+      { variant: "subtle", status: "completed", class: "astralis:bg-brand-subtle astralis:text-brand-label astralis:border-brand-subtle" },
+      { variant: "subtle", status: "error", class: "astralis:bg-surface-error astralis:text-label-error astralis:border-stroke-error" }
+    ],
+    defaultVariants: { size: "md", variant: "solid", status: "upcoming" }
+  }
+), i = s(
+  "astralis:rounded-full astralis:shrink-0 astralis:transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "astralis:size-2.5",
+        md: "astralis:size-3",
+        lg: "astralis:size-4"
+      },
+      status: {
+        upcoming: "astralis:bg-surface-emphasized",
+        active: "astralis:bg-brand-solid",
+        completed: "astralis:bg-brand-solid",
+        error: "astralis:bg-label-error"
+      }
+    },
+    defaultVariants: { size: "md", status: "upcoming" }
+  }
+), l = s(
+  "astralis:rounded-full astralis:transition-colors",
+  {
+    variants: {
+      orientation: {
+        horizontal: "astralis:h-0.5 astralis:flex-1",
+        vertical: "astralis:w-0.5 astralis:flex-1 astralis:min-h-6 astralis:my-1"
+      },
+      done: {
+        true: "astralis:bg-brand-solid",
+        false: "astralis:bg-stroke-base"
+      }
+    },
+    defaultVariants: { orientation: "horizontal", done: !1 }
+  }
+), e = s(
+  // Hover feedback via opacity keeps it legible on any indicator colour.
+  "astralis:rounded-full astralis:cursor-pointer astralis:transition-opacity astralis:hover:opacity-higher astralis:disabled:cursor-not-allowed astralis:disabled:opacity-moderate"
+), o = s(
+  "astralis:inline-flex astralis:items-center astralis:justify-center astralis:gap-2 astralis:rounded-md astralis:border-normal astralis:border-stroke-base astralis:bg-surface-base astralis:text-label-base astralis:px-4 astralis:py-2 astralis:text-sm astralis:font-medium astralis:transition-colors astralis:cursor-pointer astralis:hover:bg-surface-muted astralis:disabled:opacity-moderate astralis:disabled:cursor-not-allowed astralis:disabled:pointer-events-none"
+);
+export {
+  l as stepConnectorVariants,
+  i as stepDotVariants,
+  r as stepIndicatorVariants,
+  o as stepNavVariants,
+  t as stepSizeClasses,
+  e as stepTriggerVariants
+};

package/dist/components/navigation/tabs/components/tabs-content.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { astralisMerge as d } from "../../../../utils/astralis-merge.js";
+import { useTabsContext as m } from "../tabs.context.js";
+import { tabsContentVariants as b } from "../tabs.styles.js";
+function c({ value: t, className: n, children: i, ...r }) {
+  const { value: o, keepMounted: s, baseId: a } = m(), e = t === o;
+  return !e && !s ? null : /* @__PURE__ */ l(
+    "div",
+    {
+      id: `${a}-panel-${t}`,
+      role: "tabpanel",
+      "aria-labelledby": `${a}-trigger-${t}`,
+      tabIndex: 0,
+      hidden: !e,
+      "data-state": e ? "active" : "inactive",
+      className: d(b(), n),
+      ...r,
+      children: i
+    }
+  );
+}
+c.displayName = "Tabs.Content";
+export {
+  c as TabsContent
+};

package/dist/components/navigation/tabs/components/tabs-list.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsxs as b, jsx as h } from "react/jsx-runtime";
+import { useRef as v, useState as y, useLayoutEffect as L } from "react";
+import { astralisMerge as x } from "../../../../utils/astralis-merge.js";
+import { useTabsContext as T } from "../tabs.context.js";
+import { tabsIndicatorVariants as g, tabsListVariants as w } from "../tabs.styles.js";
+function I({ children: f, className: l, ...u }) {
+  const { orientation: t, variant: i, rounded: d, value: m } = T(), s = v(null), [p, a] = y({ opacity: 0 }), o = i === "line";
+  return L(() => {
+    if (!o) return;
+    const r = s.current;
+    if (!r) return;
+    const n = () => {
+      const e = r.querySelector('[role="tab"][data-state="active"]');
+      if (!e) {
+        a({ opacity: 0 });
+        return;
+      }
+      a(
+        t === "horizontal" ? { opacity: 1, left: e.offsetLeft, width: e.offsetWidth } : { opacity: 1, top: e.offsetTop, height: e.offsetHeight }
+      );
+    };
+    n();
+    const c = new ResizeObserver(n);
+    return c.observe(r), () => c.disconnect();
+  }, [o, t, m]), /* @__PURE__ */ b(
+    "div",
+    {
+      ref: s,
+      role: "tablist",
+      "aria-orientation": t,
+      "data-orientation": t,
+      className: x(w({ orientation: t, variant: i, rounded: d }), l),
+      ...u,
+      children: [
+        f,
+        o && /* @__PURE__ */ h("span", { "aria-hidden": "true", style: p, className: g({ orientation: t }) })
+      ]
+    }
+  );
+}
+I.displayName = "Tabs.List";
+export {
+  I as TabsList
+};

package/dist/components/navigation/tabs/components/tabs-root.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as x } from "react/jsx-runtime";
+import { useState as g, useId as j, useCallback as w, useMemo as y } from "react";
+import { astralisMerge as z } from "../../../../utils/astralis-merge.js";
+import { accentClass as S } from "../../../../const/color-schemes.js";
+import { TabsContext as U } from "../tabs.context.js";
+function k({
+  value: t,
+  defaultValue: p,
+  onValueChange: o,
+  orientation: s = "horizontal",
+  variant: a = "line",
+  colorScheme: v = "brand",
+  size: r = "md",
+  fitted: e = !1,
+  rounded: c = !1,
+  activationMode: m = "automatic",
+  keepMounted: i = !1,
+  loop: f = !0,
+  className: C,
+  children: T,
+  ...h
+}) {
+  const l = t !== void 0, [I, N] = g(p), n = l ? t : I, u = j(), d = w(
+    (b) => {
+      l || N(b), o?.(b);
+    },
+    [l, o]
+  ), R = y(
+    () => ({ value: n, setValue: d, orientation: s, variant: a, size: r, fitted: e, rounded: c, activationMode: m, keepMounted: i, loop: f, baseId: u }),
+    [n, d, s, a, r, e, c, m, i, f, u]
+  );
+  return /* @__PURE__ */ x(U.Provider, { value: R, children: /* @__PURE__ */ x(
+    "div",
+    {
+      "data-orientation": s,
+      "data-variant": a,
+      className: z(
+        "astralis:flex astralis:gap-4",
+        s === "horizontal" ? "astralis:flex-col" : "astralis:flex-row",
+        // Rebinds the accent channel for the whole subtree — the indicator
+        // and active-trigger styles paint with accent-* tokens.
+        S(v),
+        C
+      ),
+      ...h,
+      children: T
+    }
+  ) });
+}
+k.displayName = "Tabs.Root";
+export {
+  k as TabsRoot
+};