astralis-ui 0.1.0

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

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as M } from "react/jsx-runtime";
+import { useCallback as N } from "react";
+import { astralisMerge as V } from "../../../../utils/astralis-merge.js";
+import { useTabsContext as j } from "../tabs.context.js";
+import { tabsTriggerVariants as q } from "../tabs.styles.js";
+function E({ value: r, disabled: m = !1, className: p, children: y, onClick: h, onKeyDown: c, ...T }) {
+  const { value: A, setValue: i, orientation: s, variant: k, size: v, fitted: w, rounded: x, activationMode: f, loop: l, baseId: d } = j(), a = r === A, I = `${d}-trigger-${r}`, $ = `${d}-panel-${r}`, z = N(
+    (t) => {
+      c?.(t);
+      const g = t.currentTarget.closest('[role="tablist"]');
+      if (!g) return;
+      const o = Array.from(g.querySelectorAll('[role="tab"]:not([disabled])')), n = o.indexOf(t.currentTarget);
+      if (n === -1) return;
+      const u = s === "horizontal", C = u ? "ArrowRight" : "ArrowDown", D = u ? "ArrowLeft" : "ArrowUp";
+      let e = n;
+      if (t.key === C) e = n + 1;
+      else if (t.key === D) e = n - 1;
+      else if (t.key === "Home") e = 0;
+      else if (t.key === "End") e = o.length - 1;
+      else return;
+      t.preventDefault(), e >= o.length && (e = l ? 0 : o.length - 1), e < 0 && (e = l ? o.length - 1 : 0);
+      const b = o[e];
+      b.focus(), f === "automatic" && i(b.dataset.value ?? r);
+    },
+    [c, s, l, f, i, r]
+  );
+  return /* @__PURE__ */ M(
+    "button",
+    {
+      id: I,
+      role: "tab",
+      type: "button",
+      "data-value": r,
+      "data-state": a ? "active" : "inactive",
+      "data-orientation": s,
+      "aria-selected": a,
+      "aria-controls": $,
+      tabIndex: a ? 0 : -1,
+      disabled: m,
+      className: V(q({ size: v, variant: k, fitted: w, rounded: x, active: a }), p),
+      onClick: (t) => {
+        i(r), h?.(t);
+      },
+      onKeyDown: z,
+      ...T,
+      children: y
+    }
+  );
+}
+E.displayName = "Tabs.Trigger";
+export {
+  E as TabsTrigger
+};

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

@@ -0,0 +1,16 @@
+"use client";
+import { TabsRoot as t } from "./components/tabs-root.js";
+import { TabsList as o } from "./components/tabs-list.js";
+import { TabsTrigger as r } from "./components/tabs-trigger.js";
+import { TabsContent as s } from "./components/tabs-content.js";
+const T = Object.assign(t, {
+  List: o,
+  Trigger: r,
+  Content: s
+});
+export {
+  T as Tabs,
+  s as TabsContent,
+  o as TabsList,
+  r as TabsTrigger
+};

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

@@ -0,0 +1,12 @@
+"use client";
+import { useContext as e, createContext as o } from "react";
+const n = o(null);
+function r() {
+  const t = e(n);
+  if (!t) throw new Error("Tabs sub-components must be used within <Tabs.Root>");
+  return t;
+}
+export {
+  n as TabsContext,
+  r as useTabsContext
+};

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

@@ -0,0 +1,80 @@
+"use client";
+import { cva as a } from "class-variance-authority";
+const t = a("astralis:flex astralis:relative astralis:gap-1", {
+  variants: {
+    orientation: {
+      horizontal: "astralis:flex-row astralis:items-center",
+      vertical: "astralis:flex-col astralis:items-stretch"
+    },
+    variant: { line: "", subtle: "", segmented: "astralis:p-1", outline: "", plain: "" },
+    rounded: { true: "", false: "" }
+  },
+  compoundVariants: [
+    // line + outline sit on a track border
+    { orientation: "horizontal", variant: "line", class: "astralis:border-b astralis:border-stroke-base" },
+    { orientation: "vertical", variant: "line", class: "astralis:border-e astralis:border-stroke-base" },
+    { orientation: "horizontal", variant: "outline", class: "astralis:border-b astralis:border-stroke-base" },
+    { orientation: "vertical", variant: "outline", class: "astralis:border-e astralis:border-stroke-base" },
+    // segmented is a filled container
+    { variant: "segmented", class: "astralis:bg-surface-subtle" },
+    { variant: "segmented", rounded: !1, class: "astralis:rounded-md" },
+    { variant: "segmented", rounded: !0, class: "astralis:rounded-full" }
+  ],
+  defaultVariants: { orientation: "horizontal", variant: "line", rounded: !1 }
+}), e = a(
+  "astralis:absolute astralis:bg-accent-solid astralis:rounded-full astralis:transition-all astralis:duration-fast astralis:pointer-events-none",
+  {
+    variants: {
+      orientation: {
+        horizontal: "astralis:bottom-0 astralis:h-0.5",
+        vertical: "astralis:end-0 astralis:w-0.5"
+      }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+), r = a(
+  "astralis:inline-flex astralis:items-center astralis:justify-center astralis:gap-2 astralis:whitespace-nowrap astralis:font-medium astralis:transition-colors astralis:cursor-pointer astralis:outline-none astralis:disabled:opacity-moderate astralis:disabled:cursor-not-allowed astralis:focus-visible:outline-2 astralis:focus-visible:outline-offset-2 astralis:focus-visible:outline-accent-ring astralis:focus-visible:rounded-sm",
+  {
+    variants: {
+      size: {
+        sm: "astralis:text-xs astralis:px-3 astralis:py-1.5",
+        md: "astralis:text-sm astralis:px-4 astralis:py-2",
+        lg: "astralis:text-md astralis:px-5 astralis:py-2.5"
+      },
+      // `outline` reserves a transparent border so the layout doesn't shift when active.
+      variant: { line: "", subtle: "", segmented: "", outline: "astralis:border-normal astralis:border-transparent", plain: "astralis:rounded-md" },
+      active: { true: "", false: "" },
+      fitted: { true: "astralis:flex-1", false: "" },
+      rounded: { true: "", false: "" }
+    },
+    compoundVariants: [
+      // --- radius per variant (default vs rounded) ---
+      { variant: "subtle", rounded: !1, class: "astralis:rounded-md" },
+      { variant: "subtle", rounded: !0, class: "astralis:rounded-full" },
+      { variant: "segmented", rounded: !1, class: "astralis:rounded-md" },
+      { variant: "segmented", rounded: !0, class: "astralis:rounded-full" },
+      { variant: "outline", rounded: !1, class: "astralis:rounded-t-md" },
+      { variant: "outline", rounded: !0, class: "astralis:rounded-t-xl" },
+      // --- active / inactive colours (active = accent text everywhere) ---
+      { variant: "line", active: !0, class: "astralis:text-accent-solid" },
+      { variant: "line", active: !1, class: "astralis:text-label-muted astralis:hover:text-label-base" },
+      { variant: "subtle", active: !0, class: "astralis:bg-surface-subtle astralis:text-accent-solid" },
+      { variant: "subtle", active: !1, class: "astralis:text-label-muted astralis:hover:bg-surface-subtle astralis:hover:text-label-base" },
+      { variant: "segmented", active: !0, class: "astralis:bg-surface-base astralis:shadow-sm astralis:text-accent-solid" },
+      { variant: "segmented", active: !1, class: "astralis:text-label-muted astralis:hover:text-label-base" },
+      { variant: "outline", active: !0, class: "astralis:bg-surface-base astralis:border-stroke-base astralis:border-b-transparent astralis:text-accent-solid astralis:-mb-px" },
+      { variant: "outline", active: !1, class: "astralis:text-label-muted astralis:hover:text-label-base" },
+      { variant: "plain", active: !0, class: "astralis:text-accent-solid" },
+      { variant: "plain", active: !1, class: "astralis:text-label-muted astralis:hover:text-label-base" }
+    ],
+    defaultVariants: { size: "md", variant: "line", active: !1, fitted: !1, rounded: !1 }
+  }
+), i = a(
+  "astralis:flex-1 astralis:text-label-base astralis:outline-none astralis:focus-visible:outline-2 astralis:focus-visible:outline-offset-2 astralis:focus-visible:outline-accent-ring astralis:focus-visible:rounded-sm"
+);
+export {
+  i as tabsContentVariants,
+  e as tabsIndicatorVariants,
+  t as tabsListVariants,
+  r as tabsTriggerVariants
+};

package/dist/components/overlay/drawer/components/drawer-content.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsxs as w, jsx as s } from "react/jsx-runtime";
+import { useDrawer as D } from "../drawer.context.js";
+import { SCRIM_COLOR as h, drawerBackdropClasses as x, drawerSizeStyle as I, drawerPanelVariants as k, drawerClosedTransform as R } from "../drawer.styles.js";
+import { Portal as $ } from "../../portal.js";
+import { usePresence as g } from "../../../../hooks/use-presence.js";
+import { useOverlayBehavior as N } from "../../../../hooks/use-overlay-behavior.js";
+import { astralisMerge as P } from "../../../../utils/astralis-merge.js";
+const a = 250;
+function E({ children: i, className: o = "", ...n }) {
+  const { open: e, setOpen: l, close: c, titleId: d, descriptionId: m, hasTitle: p, hasDescription: u, placement: r, size: f, closeOnOverlayClick: y, closeOnEsc: O } = D(), { mounted: v, state: C } = g(e, a), { containerRef: b } = N(e, l, { closeOnEsc: O });
+  if (!v) return null;
+  const t = C === "open";
+  return /* @__PURE__ */ w($, { children: [
+    /* @__PURE__ */ s(
+      "div",
+      {
+        "aria-hidden": !0,
+        onClick: y ? c : void 0,
+        className: `${x} astralis:transition-opacity ${t ? "astralis:opacity-100" : "astralis:opacity-0"}`,
+        style: { backgroundColor: h, transitionDuration: `${a}ms` }
+      }
+    ),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        ref: b,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": p ? d : void 0,
+        "aria-describedby": u ? m : void 0,
+        tabIndex: -1,
+        className: P(
+          k({ placement: r }),
+          "astralis:transition-transform astralis:ease-out",
+          t ? "astralis:translate-x-0 astralis:translate-y-0" : R[r],
+          o
+        ),
+        style: { ...I(r, f), transitionDuration: `${a}ms` },
+        ...n,
+        children: i
+      }
+    )
+  ] });
+}
+export {
+  E as DrawerContent
+};

package/dist/components/overlay/drawer/components/drawer-parts.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { useEffect as o } from "react";
+import { useDrawer as l } from "../drawer.context.js";
+import { astralisMerge as e } from "../../../../utils/astralis-merge.js";
+import n from "../../../icon/icon.js";
+import { XIcon as u } from "../../../icon/internal-icons.js";
+function x({ children: s, className: t = "" }) {
+  return /* @__PURE__ */ a("div", { className: e("astralis:flex astralis:items-center astralis:justify-between astralis:gap-4 astralis:px-6 astralis:py-4 astralis:border-b astralis:border-stroke-subtle", t), children: s });
+}
+function v({ children: s, className: t = "" }) {
+  return /* @__PURE__ */ a("div", { className: e("astralis:flex-1 astralis:overflow-y-auto astralis:px-6 astralis:py-4 astralis:text-label-muted", t), children: s });
+}
+function w({ children: s, className: t = "" }) {
+  return /* @__PURE__ */ a("div", { className: e("astralis:flex astralis:items-center astralis:justify-end astralis:gap-3 astralis:px-6 astralis:py-4 astralis:border-t astralis:border-stroke-subtle", t), children: s });
+}
+function y({ children: s, className: t = "" }) {
+  const { titleId: i, setHasTitle: r } = l();
+  return o(() => (r(!0), () => r(!1)), [r]), /* @__PURE__ */ a("h2", { id: i, className: e("astralis:text-lg astralis:font-semibold astralis:text-label-base", t), children: s });
+}
+function D({ children: s, className: t = "" }) {
+  const { descriptionId: i, setHasDescription: r } = l();
+  return o(() => (r(!0), () => r(!1)), [r]), /* @__PURE__ */ a("p", { id: i, className: e("astralis:text-sm astralis:text-label-muted", t), children: s });
+}
+function g({ className: s = "" }) {
+  const { close: t } = l();
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Close",
+      onClick: t,
+      className: e(
+        "astralis:inline-flex astralis:items-center astralis:justify-center astralis:size-8 astralis:rounded-md astralis:text-label-muted astralis:cursor-pointer astralis:transition-colors astralis:hover:bg-surface-muted astralis:hover:text-label-base astralis:outline-none astralis:focus-visible:outline-2 astralis:focus-visible:outline-offset-2 astralis:focus-visible:outline-accent-ring",
+        s
+      ),
+      children: /* @__PURE__ */ a(n, { size: "sm", children: /* @__PURE__ */ a(u, {}) })
+    }
+  );
+}
+export {
+  v as DrawerBody,
+  g as DrawerCloseButton,
+  D as DrawerDescription,
+  w as DrawerFooter,
+  x as DrawerHeader,
+  y as DrawerTitle
+};

package/dist/components/overlay/drawer/components/drawer-root.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as k } from "react/jsx-runtime";
+import { cloneElement as C, useId as h, useState as m, useCallback as I, useMemo as T } from "react";
+import { useDrawer as D, DrawerContext as b } from "../drawer.context.js";
+import { useControllableState as v } from "../../../../hooks/use-controllable-state.js";
+function M({
+  children: e,
+  open: t,
+  defaultOpen: o = !1,
+  onOpenChange: s,
+  placement: a = "right",
+  size: i = "md",
+  closeOnOverlayClick: l = !0,
+  closeOnEsc: u = !0
+}) {
+  const [p, r] = v({ value: t, defaultValue: o, onChange: s }), n = h(), [c, g] = m(!1), [f, w] = m(!1), d = I(() => r(!1), [r]), x = T(
+    () => ({
+      open: p,
+      setOpen: r,
+      close: d,
+      titleId: `${n}-title`,
+      descriptionId: `${n}-desc`,
+      hasTitle: c,
+      setHasTitle: g,
+      hasDescription: f,
+      setHasDescription: w,
+      placement: a,
+      size: i,
+      closeOnOverlayClick: l,
+      closeOnEsc: u
+    }),
+    [p, r, d, n, c, f, a, i, l, u]
+  );
+  return /* @__PURE__ */ k(b.Provider, { value: x, children: e });
+}
+function P({ children: e }) {
+  const { setOpen: t, open: o } = D();
+  return C(e, {
+    onClick: (s) => {
+      e.props.onClick?.(s), t(!0);
+    },
+    "aria-haspopup": "dialog",
+    "aria-expanded": o
+  });
+}
+function R({ children: e }) {
+  const { close: t } = D();
+  return C(e, {
+    onClick: (o) => {
+      e.props.onClick?.(o), t();
+    }
+  });
+}
+export {
+  R as DrawerClose,
+  M as DrawerRoot,
+  P as DrawerTrigger
+};

package/dist/components/overlay/drawer/drawer.context.js

@@ -0,0 +1,12 @@
+"use client";
+import { useContext as t, createContext as r } from "react";
+const n = r(null);
+function s() {
+  const e = t(n);
+  if (!e) throw new Error("Drawer sub-components must be used within <Drawer>");
+  return e;
+}
+export {
+  n as DrawerContext,
+  s as useDrawer
+};

package/dist/components/overlay/drawer/drawer.styles.js

@@ -0,0 +1,32 @@
+"use client";
+import { cva as t } from "class-variance-authority";
+const e = "astralis:fixed astralis:inset-0 astralis:z-high astralis:backdrop-blur-sm", o = "rgba(0, 0, 0, 0.5)", n = t(
+  "astralis:fixed astralis:z-high astralis:flex astralis:flex-col astralis:bg-surface-base astralis:text-label-base astralis:shadow-xl astralis:border-stroke-subtle astralis:outline-none",
+  {
+    variants: {
+      placement: {
+        right: "astralis:top-0 astralis:right-0 astralis:h-full astralis:border-l",
+        left: "astralis:top-0 astralis:left-0 astralis:h-full astralis:border-r",
+        top: "astralis:top-0 astralis:inset-x-0 astralis:w-full astralis:border-b",
+        bottom: "astralis:bottom-0 astralis:inset-x-0 astralis:w-full astralis:border-t"
+      }
+    },
+    defaultVariants: { placement: "right" }
+  }
+), l = { sm: "18rem", md: "22rem", lg: "26rem", xl: "32rem", full: "100vw" }, r = { sm: "30vh", md: "45vh", lg: "60vh", xl: "80vh", full: "100vh" };
+function f(a, s) {
+  return a === "left" || a === "right" ? { width: l[s] } : { height: r[s] };
+}
+const h = {
+  right: "astralis:translate-x-full",
+  left: "astralis:-translate-x-full",
+  top: "astralis:-translate-y-full",
+  bottom: "astralis:translate-y-full"
+};
+export {
+  o as SCRIM_COLOR,
+  e as drawerBackdropClasses,
+  h as drawerClosedTransform,
+  n as drawerPanelVariants,
+  f as drawerSizeStyle
+};

package/dist/components/overlay/drawer/index.js

@@ -0,0 +1,27 @@
+"use client";
+import { DrawerRoot as r, DrawerClose as e, DrawerTrigger as o } from "./components/drawer-root.js";
+import { DrawerContent as t } from "./components/drawer-content.js";
+import { DrawerCloseButton as a, DrawerDescription as i, DrawerTitle as D, DrawerFooter as n, DrawerBody as w, DrawerHeader as s } from "./components/drawer-parts.js";
+const C = Object.assign(r, {
+  Trigger: o,
+  Content: t,
+  Header: s,
+  Body: w,
+  Footer: n,
+  Title: D,
+  Description: i,
+  Close: e,
+  CloseButton: a
+});
+export {
+  C as Drawer,
+  w as DrawerBody,
+  e as DrawerClose,
+  a as DrawerCloseButton,
+  t as DrawerContent,
+  i as DrawerDescription,
+  n as DrawerFooter,
+  s as DrawerHeader,
+  D as DrawerTitle,
+  o as DrawerTrigger
+};

package/dist/components/overlay/modal/components/modal-content.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import { useModal as I } from "../modal.context.js";
+import { SCRIM_COLOR as k, modalBackdropClasses as x, modalPanelVariants as D, modalViewportVariants as M } from "../modal.styles.js";
+import { Portal as N } from "../../portal.js";
+import { usePresence as R } from "../../../../hooks/use-presence.js";
+import { useOverlayBehavior as $ } from "../../../../hooks/use-overlay-behavior.js";
+import { astralisMerge as g } from "../../../../utils/astralis-merge.js";
+const s = 200;
+function A({ children: r, className: e = "", ...o }) {
+  const { open: t, setOpen: l, close: n, titleId: c, descriptionId: d, hasTitle: m, hasDescription: p, size: u, centered: y, closeOnOverlayClick: f, closeOnEsc: v } = I(), { mounted: O, state: C } = R(t, s), { containerRef: b } = $(t, l, { closeOnEsc: v });
+  if (!O) return null;
+  const i = C === "open";
+  return /* @__PURE__ */ a(N, { children: /* @__PURE__ */ h("div", { className: M({ centered: y }), children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        "aria-hidden": !0,
+        onClick: f ? n : void 0,
+        className: `${x} astralis:transition-opacity ${i ? "astralis:opacity-100" : "astralis:opacity-0"}`,
+        style: { backgroundColor: k, transitionDuration: `${s}ms` }
+      }
+    ),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: b,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": m ? c : void 0,
+        "aria-describedby": p ? d : void 0,
+        tabIndex: -1,
+        className: g(
+          D({ size: u }),
+          "astralis:outline-none astralis:transition-all",
+          i ? "astralis:opacity-100 astralis:scale-100 astralis:translate-y-0" : "astralis:opacity-0 astralis:scale-95 astralis:translate-y-2",
+          e
+        ),
+        style: { transitionDuration: `${s}ms` },
+        ...o,
+        children: r
+      }
+    )
+  ] }) });
+}
+export {
+  A as ModalContent
+};

package/dist/components/overlay/modal/components/modal-parts.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { useEffect as o } from "react";
+import { useModal as r } from "../modal.context.js";
+import { astralisMerge as i } from "../../../../utils/astralis-merge.js";
+import n from "../../../icon/icon.js";
+import { XIcon as u } from "../../../icon/internal-icons.js";
+function x({ children: s, className: t = "" }) {
+  return /* @__PURE__ */ a("div", { className: i("astralis:flex astralis:flex-col astralis:gap-1 astralis:px-6 astralis:pt-6 astralis:pb-2", t), children: s });
+}
+function v({ children: s, className: t = "" }) {
+  return /* @__PURE__ */ a("div", { className: i("astralis:px-6 astralis:py-4 astralis:text-label-muted", t), children: s });
+}
+function M({ children: s, className: t = "" }) {
+  return /* @__PURE__ */ a("div", { className: i("astralis:flex astralis:items-center astralis:justify-end astralis:gap-3 astralis:px-6 astralis:pt-2 astralis:pb-6", t), children: s });
+}
+function g({ children: s, className: t = "" }) {
+  const { titleId: l, setHasTitle: e } = r();
+  return o(() => (e(!0), () => e(!1)), [e]), /* @__PURE__ */ a("h2", { id: l, className: i("astralis:text-lg astralis:font-semibold astralis:text-label-base", t), children: s });
+}
+function h({ children: s, className: t = "" }) {
+  const { descriptionId: l, setHasDescription: e } = r();
+  return o(() => (e(!0), () => e(!1)), [e]), /* @__PURE__ */ a("p", { id: l, className: i("astralis:text-sm astralis:text-label-muted", t), children: s });
+}
+function N({ className: s = "" }) {
+  const { close: t } = r();
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Close",
+      onClick: t,
+      className: i(
+        "astralis:absolute astralis:top-4 astralis:right-4 astralis:inline-flex astralis:items-center astralis:justify-center astralis:size-8 astralis:rounded-md astralis:text-label-muted astralis:cursor-pointer astralis:transition-colors astralis:hover:bg-surface-muted astralis:hover:text-label-base astralis:outline-none astralis:focus-visible:outline-2 astralis:focus-visible:outline-offset-2 astralis:focus-visible:outline-accent-ring",
+        s
+      ),
+      children: /* @__PURE__ */ a(n, { size: "sm", children: /* @__PURE__ */ a(u, {}) })
+    }
+  );
+}
+export {
+  v as ModalBody,
+  N as ModalCloseButton,
+  h as ModalDescription,
+  M as ModalFooter,
+  x as ModalHeader,
+  g as ModalTitle
+};

package/dist/components/overlay/modal/components/modal-root.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as I } from "react/jsx-runtime";
+import { cloneElement as C, useId as T, useState as m, useCallback as b, useMemo as h } from "react";
+import { useModal as M, ModalContext as v } from "../modal.context.js";
+import { useControllableState as D } from "../../../../hooks/use-controllable-state.js";
+function P({
+  children: o,
+  open: e,
+  defaultOpen: t = !1,
+  onOpenChange: n,
+  size: l = "md",
+  centered: r = !0,
+  closeOnOverlayClick: i = !0,
+  closeOnEsc: u = !0
+}) {
+  const [p, s] = D({ value: e, defaultValue: t, onChange: n }), a = T(), [c, x] = m(!1), [d, g] = m(!1), f = b(() => s(!1), [s]), k = h(
+    () => ({
+      open: p,
+      setOpen: s,
+      close: f,
+      titleId: `${a}-title`,
+      descriptionId: `${a}-desc`,
+      hasTitle: c,
+      setHasTitle: x,
+      hasDescription: d,
+      setHasDescription: g,
+      size: l,
+      centered: r,
+      closeOnOverlayClick: i,
+      closeOnEsc: u
+    }),
+    [p, s, f, a, c, d, l, r, i, u]
+  );
+  return /* @__PURE__ */ I(v.Provider, { value: k, children: o });
+}
+function R({ children: o }) {
+  const { setOpen: e, open: t } = M();
+  return C(o, {
+    onClick: (n) => {
+      o.props.onClick?.(n), e(!0);
+    },
+    "aria-haspopup": "dialog",
+    "aria-expanded": t
+  });
+}
+function V({ children: o }) {
+  const { close: e } = M();
+  return C(o, {
+    onClick: (t) => {
+      o.props.onClick?.(t), e();
+    }
+  });
+}
+export {
+  V as ModalClose,
+  P as ModalRoot,
+  R as ModalTrigger
+};

package/dist/components/overlay/modal/index.js

@@ -0,0 +1,27 @@
+"use client";
+import { ModalRoot as o, ModalClose as e, ModalTrigger as t } from "./components/modal-root.js";
+import { ModalContent as l } from "./components/modal-content.js";
+import { ModalCloseButton as r, ModalDescription as d, ModalTitle as a, ModalFooter as i, ModalBody as n, ModalHeader as M } from "./components/modal-parts.js";
+const C = Object.assign(o, {
+  Trigger: t,
+  Content: l,
+  Header: M,
+  Body: n,
+  Footer: i,
+  Title: a,
+  Description: d,
+  Close: e,
+  CloseButton: r
+});
+export {
+  C as Modal,
+  n as ModalBody,
+  e as ModalClose,
+  r as ModalCloseButton,
+  l as ModalContent,
+  d as ModalDescription,
+  i as ModalFooter,
+  M as ModalHeader,
+  a as ModalTitle,
+  t as ModalTrigger
+};

package/dist/components/overlay/modal/modal.context.js

@@ -0,0 +1,12 @@
+"use client";
+import { useContext as o, createContext as e } from "react";
+const n = e(null);
+function s() {
+  const t = o(n);
+  if (!t) throw new Error("Modal sub-components must be used within <Modal>");
+  return t;
+}
+export {
+  n as ModalContext,
+  s as useModal
+};

package/dist/components/overlay/modal/modal.styles.js

@@ -0,0 +1,31 @@
+"use client";
+import { cva as a } from "class-variance-authority";
+const t = a(
+  "astralis:fixed astralis:inset-0 astralis:z-high astralis:flex astralis:justify-center astralis:p-4 astralis:overflow-y-auto",
+  {
+    variants: {
+      centered: { true: "astralis:items-center", false: "astralis:items-start astralis:pt-16" }
+    },
+    defaultVariants: { centered: !0 }
+  }
+), r = "astralis:fixed astralis:inset-0 astralis:backdrop-blur-sm", l = "rgba(0, 0, 0, 0.5)", i = a(
+  "astralis:relative astralis:w-full astralis:my-auto astralis:bg-surface-base astralis:text-label-base astralis:rounded-xl astralis:border-normal astralis:border-stroke-subtle astralis:shadow-xl",
+  {
+    variants: {
+      size: {
+        sm: "astralis:max-w-sm",
+        md: "astralis:max-w-md",
+        lg: "astralis:max-w-lg",
+        xl: "astralis:max-w-2xl",
+        full: "astralis:max-w-[calc(100vw-2rem)]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+export {
+  l as SCRIM_COLOR,
+  r as modalBackdropClasses,
+  i as modalPanelVariants,
+  t as modalViewportVariants
+};