astralis-ui 0.1.0

package/dist/components/feedback/skeleton/skeleton.styles.js

@@ -0,0 +1,20 @@
+"use client";
+import { cva as a } from "class-variance-authority";
+const e = a("astralis:bg-surface-emphasized", {
+  variants: {
+    variant: {
+      text: "astralis:h-4 astralis:w-full astralis:rounded-md",
+      circle: "astralis:rounded-full",
+      rect: "astralis:rounded-lg"
+    },
+    animated: {
+      // motion-reduce pauses the pulse for users who asked for less motion.
+      true: "astralis:animate-pulse astralis:motion-reduce:animate-none",
+      false: ""
+    }
+  },
+  defaultVariants: { variant: "text", animated: !0 }
+});
+export {
+  e as skeletonVariants
+};

package/dist/components/feedback/spinner/spinner.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { spinnerVariants as m } from "./spinner.styles.js";
+import { astralisMerge as o } from "../../../utils/astralis-merge.js";
+import { accentClass as p } from "../../../const/color-schemes.js";
+import { SpinnerIcon as c } from "../../icon/internal-icons.js";
+function f({
+  size: a = "md",
+  colorScheme: n = "brand",
+  label: s = "Loading…",
+  className: i = "",
+  ref: e,
+  ...t
+}) {
+  return /* @__PURE__ */ l(
+    "span",
+    {
+      ref: e,
+      role: "status",
+      className: o(m({ size: a }), p(n), i),
+      ...t,
+      children: [
+        /* @__PURE__ */ r(c, { className: "astralis:size-full astralis:animate-spin" }),
+        s ? /* @__PURE__ */ r("span", { className: "astralis:sr-only", children: s }) : null
+      ]
+    }
+  );
+}
+f.displayName = "Spinner";
+export {
+  f as Spinner
+};

package/dist/components/feedback/spinner/spinner.styles.js

@@ -0,0 +1,17 @@
+"use client";
+import { cva as s } from "class-variance-authority";
+const i = s("astralis:inline-flex astralis:shrink-0 astralis:text-accent-solid", {
+  variants: {
+    size: {
+      xs: "astralis:h-3 astralis:w-3",
+      sm: "astralis:h-4 astralis:w-4",
+      md: "astralis:h-5 astralis:w-5",
+      lg: "astralis:h-6 astralis:w-6",
+      xl: "astralis:h-8 astralis:w-8"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+export {
+  i as spinnerVariants
+};

package/dist/components/feedback/status.js

@@ -0,0 +1,18 @@
+"use client";
+import { CircleAlertIcon as e, TriangleAlertIcon as n, CircleCheckIcon as o, InfoIcon as c } from "../icon/internal-icons.js";
+const t = {
+  info: "blue",
+  success: "green",
+  warning: "orange",
+  error: "red"
+}, i = {
+  info: c,
+  success: o,
+  warning: n,
+  error: e
+}, l = (r) => r === "error" || r === "warning" ? "alert" : "status";
+export {
+  i as STATUS_ICON,
+  t as STATUS_SCHEME,
+  l as statusRole
+};

package/dist/components/feedback/toast/toast-store.js

@@ -0,0 +1,35 @@
+"use client";
+let e = [], c = 0;
+const o = /* @__PURE__ */ new Set();
+function r() {
+  for (const t of o) t();
+}
+function f(t) {
+  return o.add(t), () => o.delete(t);
+}
+function d() {
+  return e;
+}
+function i(t) {
+  const s = `astralis-toast-${++c}`;
+  return e = [...e, { duration: 5e3, status: "info", closable: !0, ...t, id: s, open: !0 }], r(), s;
+}
+function u(t) {
+  e = e.map((s) => t === void 0 || s.id === t ? { ...s, open: !1 } : s), r();
+}
+function l(t) {
+  e = e.filter((s) => s.id !== t), r();
+}
+const n = (t) => (s, a) => i({ ...a, title: s, status: t }), m = Object.assign((t) => i(t), {
+  info: n("info"),
+  success: n("success"),
+  warning: n("warning"),
+  error: n("error"),
+  dismiss: u
+});
+export {
+  d as getToasts,
+  l as removeToast,
+  f as subscribeToasts,
+  m as toast
+};

package/dist/components/feedback/toast/toast.styles.js

@@ -0,0 +1,20 @@
+"use client";
+const a = {
+  "top-start": "astralis:top-4 astralis:left-4 astralis:items-start",
+  "top-center": "astralis:top-4 astralis:left-1/2 astralis:-translate-x-1/2 astralis:items-center",
+  "top-end": "astralis:top-4 astralis:right-4 astralis:items-end",
+  "bottom-start": "astralis:bottom-4 astralis:left-4 astralis:items-start",
+  "bottom-center": "astralis:bottom-4 astralis:left-1/2 astralis:-translate-x-1/2 astralis:items-center",
+  "bottom-end": "astralis:bottom-4 astralis:right-4 astralis:items-end"
+}, l = "astralis:fixed astralis:z-highest astralis:flex astralis:flex-col astralis:gap-3 astralis:pointer-events-none astralis:max-w-[calc(100vw-2rem)]", i = "astralis:pointer-events-auto astralis:flex astralis:items-start astralis:gap-3 astralis:w-80 astralis:max-w-full astralis:rounded-xl astralis:border-normal astralis:border-stroke-subtle astralis:bg-surface-panel astralis:shadow-lg astralis:px-4 astralis:py-3 astralis:text-sm astralis:transition-all astralis:duration-moderate", r = (s, t) => s ? "astralis:opacity-100 astralis:translate-y-0" : t.startsWith("top") ? "astralis:opacity-0 astralis:-translate-y-2" : "astralis:opacity-0 astralis:translate-y-2", e = "astralis:h-5 astralis:w-5 astralis:shrink-0 astralis:mt-0.5 astralis:text-accent-solid", o = "astralis:font-semibold astralis:text-label-base", n = "astralis:mt-0.5 astralis:text-label-muted", c = "astralis:shrink-0 astralis:cursor-pointer astralis:self-center astralis:rounded-md astralis:px-2 astralis:py-1 astralis:text-sm astralis:font-medium astralis:text-accent-label astralis:transition-colors astralis:hover:bg-accent-subtle astralis:focus-visible:outline-2 astralis:focus-visible:outline-offset-2 astralis:focus-visible:outline-accent-ring", m = "astralis:shrink-0 astralis:cursor-pointer astralis:rounded-md astralis:p-1 astralis:-m-1 astralis:text-label-subtle astralis:transition-colors astralis:hover:text-label-base astralis:focus-visible:outline-2 astralis:focus-visible:outline-offset-2 astralis:focus-visible:outline-accent-ring";
+export {
+  c as toastActionClasses,
+  m as toastCloseClasses,
+  n as toastDescriptionClasses,
+  e as toastIconClasses,
+  r as toastMotionClasses,
+  i as toastPanelClasses,
+  o as toastTitleClasses,
+  l as toasterBaseClasses,
+  a as toasterRegionClasses
+};

package/dist/components/feedback/toast/toaster.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { useSyncExternalStore as g, useRef as m, useEffect as d, useState as D } from "react";
+import { Portal as w } from "../../overlay/portal.js";
+import { astralisMerge as S } from "../../../utils/astralis-merge.js";
+import { accentClass as k } from "../../../const/color-schemes.js";
+import { XIcon as y } from "../../icon/internal-icons.js";
+import { STATUS_ICON as F, statusRole as U, STATUS_SCHEME as _ } from "../status.js";
+import { subscribeToasts as j, getToasts as N, removeToast as q, toast as v } from "./toast-store.js";
+import { toastIconClasses as O, toastTitleClasses as P, toastDescriptionClasses as X, toastActionClasses as z, toastCloseClasses as B, toastMotionClasses as H, toastPanelClasses as L, toasterRegionClasses as W, toasterBaseClasses as G } from "./toast.styles.js";
+const J = 200;
+function K({ data: r, placement: l }) {
+  const { id: e, open: s, status: a = "info", colorScheme: n, title: A, description: f, duration: i = 5e3, closable: E = !0, action: c } = r, I = F[a], p = m(i ?? 0), C = m(0), o = m(null), T = () => {
+    o.current != null && (clearTimeout(o.current), o.current = null, p.current -= Date.now() - C.current);
+  }, h = () => {
+    i == null || !s || o.current != null || (C.current = Date.now(), o.current = setTimeout(() => v.dismiss(e), Math.max(0, p.current)));
+  };
+  d(() => {
+    if (!(i == null || !s))
+      return h(), T;
+  }, [s, i, e]);
+  const [R, x] = D(!1);
+  d(() => {
+    const u = requestAnimationFrame(() => requestAnimationFrame(() => x(!0)));
+    return () => cancelAnimationFrame(u);
+  }, []), d(() => {
+    if (s) return;
+    const u = setTimeout(() => q(e), J);
+    return () => clearTimeout(u);
+  }, [s, e]);
+  const M = s && R;
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      role: U(a),
+      onMouseEnter: T,
+      onMouseLeave: h,
+      className: S(L, H(M, l), k(n ?? _[a])),
+      children: [
+        /* @__PURE__ */ t("span", { "aria-hidden": "true", className: O, children: /* @__PURE__ */ t(I, { className: "astralis:size-full" }) }),
+        /* @__PURE__ */ b("div", { className: "astralis:flex-1 astralis:min-w-0", children: [
+          /* @__PURE__ */ t("div", { className: P, children: A }),
+          f && /* @__PURE__ */ t("div", { className: X, children: f })
+        ] }),
+        c && /* @__PURE__ */ t("button", { type: "button", onClick: c.onClick, className: z, children: c.label }),
+        E && /* @__PURE__ */ t("button", { type: "button", "aria-label": "Dismiss notification", onClick: () => v.dismiss(e), className: B, children: /* @__PURE__ */ t(y, { className: "astralis:h-4 astralis:w-4" }) })
+      ]
+    }
+  );
+}
+function at({ placement: r = "bottom-end", max: l = 5 }) {
+  const s = g(j, N, N).slice(-l), a = r.startsWith("top") ? [...s].reverse() : s;
+  return /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(
+    "div",
+    {
+      role: "region",
+      "aria-label": "Notifications",
+      className: S("astralis", G, W[r]),
+      children: a.map((n) => /* @__PURE__ */ t(K, { data: n, placement: r }, n.id))
+    }
+  ) });
+}
+export {
+  at as Toaster
+};

package/dist/components/icon/icon.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as f } from "react/jsx-runtime";
+import { astralisMerge as d } from "../../utils/astralis-merge.js";
+import { textColors as g } from "../../const/color-mappings.js";
+import { iconVariants as y } from "./icon.styles.js";
+function x({
+  as: o,
+  children: n,
+  size: t = "md",
+  color: r,
+  strokeWidth: e,
+  className: p,
+  style: s,
+  ref: i,
+  ...a
+}) {
+  const l = typeof t == "string", m = d(
+    y({ size: l ? t : void 0 }),
+    r ? g[r] : "",
+    p
+  ), c = l ? s : { width: t, height: t, ...s }, u = a["aria-label"] ? { role: "img" } : { "aria-hidden": !0 };
+  return o ? /* @__PURE__ */ f(
+    o,
+    {
+      ref: i,
+      className: m,
+      style: c,
+      ...e != null ? { strokeWidth: e } : {},
+      ...u,
+      ...a
+    }
+  ) : n ? /* @__PURE__ */ f(
+    "span",
+    {
+      ref: i,
+      className: m,
+      style: c,
+      ...u,
+      ...a,
+      children: n
+    }
+  ) : null;
+}
+x.displayName = "Icon";
+export {
+  x as default
+};

package/dist/components/icon/icon.styles.js

@@ -0,0 +1,20 @@
+"use client";
+import { cva as s } from "class-variance-authority";
+const i = s(
+  "astralis:inline-block astralis:shrink-0 astralis:[&>svg]:block astralis:[&>svg]:size-full",
+  {
+    variants: {
+      size: {
+        xs: "astralis:size-4",
+        sm: "astralis:size-5",
+        md: "astralis:size-6",
+        lg: "astralis:size-8",
+        xl: "astralis:size-10"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+export {
+  i as iconVariants
+};

package/dist/components/icon/internal-icons.js

@@ -0,0 +1,143 @@
+"use client";
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+const t = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function o(r) {
+  return /* @__PURE__ */ n("svg", { ...t, ...r, children: /* @__PURE__ */ n("path", { d: "m6 9 6 6 6-6" }) });
+}
+function h(r) {
+  return /* @__PURE__ */ n("svg", { ...t, ...r, children: /* @__PURE__ */ n("path", { d: "m15 18-6-6 6-6" }) });
+}
+function i(r) {
+  return /* @__PURE__ */ n("svg", { ...t, ...r, children: /* @__PURE__ */ n("path", { d: "m9 18 6-6-6-6" }) });
+}
+function a(r) {
+  return /* @__PURE__ */ n("svg", { ...t, ...r, children: /* @__PURE__ */ n("path", { d: "m18 15-6-6-6 6" }) });
+}
+function d(r) {
+  return /* @__PURE__ */ c("svg", { ...t, ...r, children: [
+    /* @__PURE__ */ n("path", { d: "m11 17-5-5 5-5" }),
+    /* @__PURE__ */ n("path", { d: "m18 17-5-5 5-5" })
+  ] });
+}
+function s(r) {
+  return /* @__PURE__ */ c("svg", { ...t, ...r, children: [
+    /* @__PURE__ */ n("path", { d: "m6 17 5-5-5-5" }),
+    /* @__PURE__ */ n("path", { d: "m13 17 5-5-5-5" })
+  ] });
+}
+function l(r) {
+  return /* @__PURE__ */ n("svg", { viewBox: "0 0 24 24", fill: "currentColor", ...r, children: /* @__PURE__ */ n("path", { d: "M7 4v16l13-8z" }) });
+}
+function u(r) {
+  return /* @__PURE__ */ n("svg", { viewBox: "0 0 24 24", fill: "currentColor", ...r, children: /* @__PURE__ */ n("path", { d: "M6 4h4v16H6zM14 4h4v16h-4z" }) });
+}
+function p(r) {
+  return /* @__PURE__ */ c("svg", { ...t, ...r, children: [
+    /* @__PURE__ */ n("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ n("path", { d: "m6 6 12 12" })
+  ] });
+}
+function v(r) {
+  return /* @__PURE__ */ c("svg", { ...t, ...r, children: [
+    /* @__PURE__ */ n("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ n("path", { d: "M12 2v2" }),
+    /* @__PURE__ */ n("path", { d: "M12 20v2" }),
+    /* @__PURE__ */ n("path", { d: "m4.93 4.93 1.41 1.41" }),
+    /* @__PURE__ */ n("path", { d: "m17.66 17.66 1.41 1.41" }),
+    /* @__PURE__ */ n("path", { d: "M2 12h2" }),
+    /* @__PURE__ */ n("path", { d: "M20 12h2" }),
+    /* @__PURE__ */ n("path", { d: "m6.34 17.66-1.41 1.41" }),
+    /* @__PURE__ */ n("path", { d: "m19.07 4.93-1.41 1.41" })
+  ] });
+}
+function f(r) {
+  return /* @__PURE__ */ n("svg", { ...t, ...r, children: /* @__PURE__ */ n("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) });
+}
+function g(r) {
+  return /* @__PURE__ */ c("svg", { ...t, ...r, children: [
+    /* @__PURE__ */ n("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+    /* @__PURE__ */ n("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function m(r) {
+  return /* @__PURE__ */ c("svg", { ...t, ...r, children: [
+    /* @__PURE__ */ n("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }),
+    /* @__PURE__ */ n("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }),
+    /* @__PURE__ */ n("path", { d: "m1 1 22 22" })
+  ] });
+}
+function M(r) {
+  return /* @__PURE__ */ c("svg", { ...t, ...r, children: [
+    /* @__PURE__ */ n("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ n("path", { d: "m21 21-4.35-4.35" })
+  ] });
+}
+function I(r) {
+  return /* @__PURE__ */ n("svg", { ...t, ...r, children: /* @__PURE__ */ n("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function C(r) {
+  return /* @__PURE__ */ n("svg", { ...t, ...r, children: /* @__PURE__ */ n("path", { d: "M5 12h14" }) });
+}
+function x(r) {
+  return /* @__PURE__ */ c("svg", { "aria-hidden": "true", className: "astralis:h-4 astralis:w-4 astralis:shrink-0 astralis:animate-spin", viewBox: "0 0 24 24", fill: "none", ...r, children: [
+    /* @__PURE__ */ n("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", className: "astralis:opacity-lower" }),
+    /* @__PURE__ */ n("path", { d: "M4 12a8 8 0 018-8", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round", className: "astralis:opacity-high" })
+  ] });
+}
+function k(r) {
+  return /* @__PURE__ */ c("svg", { ...t, ...r, children: [
+    /* @__PURE__ */ n("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ n("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ n("path", { d: "M12 8h.01" })
+  ] });
+}
+function y(r) {
+  return /* @__PURE__ */ c("svg", { ...t, ...r, children: [
+    /* @__PURE__ */ n("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ n("path", { d: "m9 12 2 2 4-4" })
+  ] });
+}
+function w(r) {
+  return /* @__PURE__ */ c("svg", { ...t, ...r, children: [
+    /* @__PURE__ */ n("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+    /* @__PURE__ */ n("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ n("path", { d: "M12 17h.01" })
+  ] });
+}
+function A(r) {
+  return /* @__PURE__ */ c("svg", { ...t, ...r, children: [
+    /* @__PURE__ */ n("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ n("path", { d: "M12 8v4" }),
+    /* @__PURE__ */ n("path", { d: "M12 16h.01" })
+  ] });
+}
+export {
+  I as CheckIcon,
+  o as ChevronDownIcon,
+  h as ChevronLeftIcon,
+  i as ChevronRightIcon,
+  a as ChevronUpIcon,
+  d as ChevronsLeftIcon,
+  s as ChevronsRightIcon,
+  A as CircleAlertIcon,
+  y as CircleCheckIcon,
+  g as EyeIcon,
+  m as EyeOffIcon,
+  k as InfoIcon,
+  C as MinusIcon,
+  f as MoonIcon,
+  u as PauseIcon,
+  l as PlayIcon,
+  M as SearchIcon,
+  x as SpinnerIcon,
+  v as SunIcon,
+  w as TriangleAlertIcon,
+  p as XIcon
+};

package/dist/components/layout/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as R } from "react";
+import { astralisMerge as V } from "../../../utils/astralis-merge.js";
+import { resolveStyleProps as e } from "../../../utils/responsive.js";
+import { aspectRatioVariantMap as i, aspectRatioVariants as d } from "./aspect-ratio.styles.js";
+import { boxVariantMap as y, boxVariants as A } from "../box/box.styles.js";
+import { BOX_VARIANT_KEYS as b } from "../box/box.js";
+const u = Object.keys(i), v = R(
+  ({ children: n, as: m, className: c, ...a }, p) => {
+    const l = m || "div", o = {}, r = {}, s = {};
+    for (const t in a)
+      Object.prototype.hasOwnProperty.call(a, t) && (u.includes(t) ? o[t] = a[t] : b.includes(t) ? r[t] = a[t] : s[t] = a[t]);
+    return /* @__PURE__ */ f(
+      l,
+      {
+        className: V(
+          e(r, { maps: y, variants: A }),
+          e(o, { maps: i, variants: d }),
+          c
+        ),
+        ref: p,
+        ...s,
+        children: n
+      }
+    );
+  }
+);
+v.displayName = "AspectRatio";
+export {
+  v as default
+};

package/dist/components/layout/aspect-ratio/aspect-ratio.styles.js

@@ -0,0 +1,18 @@
+"use client";
+import { cva as t } from "class-variance-authority";
+import { aspectRatioTypes as a } from "../../../const/common-mappings.js";
+const s = {
+  ratio: a
+}, o = t(
+  // Lock the ratio + clip overflow, then stretch the single child to fill the box.
+  // Direct children are absolutely positioned to the frame; media defaults to cover.
+  "astralis:relative astralis:overflow-hidden astralis:[&>*:not(style)]:absolute astralis:[&>*:not(style)]:inset-0 astralis:[&>*:not(style)]:size-full astralis:[&>img]:object-cover astralis:[&>video]:object-cover",
+  {
+    variants: s,
+    defaultVariants: { ratio: "wide" }
+  }
+);
+export {
+  s as aspectRatioVariantMap,
+  o as aspectRatioVariants
+};

package/dist/components/layout/box/box.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { astralisMerge as p } from "../../../utils/astralis-merge.js";
+import { resolveStyleProps as x } from "../../../utils/responsive.js";
+import { boxVariantMap as s, boxVariants as y } from "./box.styles.js";
+const d = Object.keys(s), b = f(
+  ({ children: a, as: i, className: n, ...o }, m) => {
+    const l = i || "div", r = {}, e = {};
+    for (const t in o)
+      Object.prototype.hasOwnProperty.call(o, t) && (d.includes(t) ? r[t] = o[t] : e[t] = o[t]);
+    return /* @__PURE__ */ c(
+      l,
+      {
+        className: p(
+          x(r, { maps: s, variants: y }),
+          n
+        ),
+        ref: m,
+        ...e,
+        children: a
+      }
+    );
+  }
+);
+b.displayName = "Box";
+export {
+  d as BOX_VARIANT_KEYS,
+  b as default
+};

package/dist/components/layout/box/box.styles.js

@@ -0,0 +1,76 @@
+"use client";
+import { cva as o } from "class-variance-authority";
+import { borderColors as r, textColors as n, bgColors as i } from "../../../const/color-mappings.js";
+import { mrSpacing as e, mlSpacing as p, mbSpacing as s, mtSpacing as d, mxSpacing as t, mySpacing as m, mSpacing as a, prSpacing as l, plSpacing as c, pbSpacing as g, ptSpacing as S, pxSpacing as y, pySpacing as T, pSpacing as u } from "../../../const/spacing-mappings.js";
+import { sizeSizing as b, maxBlockSizing as x, minBlockSizing as z, blockSizing as f, maxInlineSizing as C, minInlineSizing as v, inlineSizing as w, maxWSizing as B, minWSizing as h, wSizing as k, maxHSizing as I, minHSizing as W, hSizing as H } from "../../../const/sizing-mappings.js";
+import { roundedBlCorners as R, roundedBrCorners as V, roundedTrCorners as E, roundedTlCorners as L, roundedLCorners as X, roundedBCorners as Y, roundedRCorners as M, roundedTCorners as j, roundedCorners as q } from "../../../const/rounded-mappings.js";
+import { borderStyleTypes as A, borderWidthTypes as D, shadowTypes as F, aspectRatioTypes as G, pointerEventsTypes as J, cursorTypes as K, overflowYTypes as N, overflowXTypes as O, overflowTypes as P, positionTypes as Q, zIndexTypes as U, opacityTypes as Z, displayTypes as _ } from "../../../const/common-mappings.js";
+import { leftTypes as $, bottomTypes as oo, rightTypes as ro, topTypes as no, insetTypes as io } from "../../../const/positioning-mappings.js";
+const eo = {
+  p: u,
+  py: T,
+  px: y,
+  pt: S,
+  pb: g,
+  pl: c,
+  pr: l,
+  m: a,
+  my: m,
+  mx: t,
+  mt: d,
+  mb: s,
+  ml: p,
+  mr: e,
+  h: H,
+  minH: W,
+  maxH: I,
+  w: k,
+  minW: h,
+  maxW: B,
+  inline: w,
+  minInline: v,
+  maxInline: C,
+  block: f,
+  minBlock: z,
+  maxBlock: x,
+  size: b,
+  display: _,
+  opacity: Z,
+  zIndex: U,
+  position: Q,
+  inset: io,
+  top: no,
+  right: ro,
+  bottom: oo,
+  left: $,
+  overflow: P,
+  overflowX: O,
+  overflowY: N,
+  cursor: K,
+  pointerEvents: J,
+  aspectRatio: G,
+  shadow: F,
+  border: D,
+  borderStyle: A,
+  rounded: q,
+  roundedT: j,
+  roundedR: M,
+  roundedB: Y,
+  roundedL: X,
+  roundedTl: L,
+  roundedTr: E,
+  roundedBr: V,
+  roundedBl: R,
+  bg: i,
+  color: n,
+  borderColor: r
+}, go = o("", {
+  variants: eo,
+  defaultVariants: {
+    // Transparent by default — primitives must composite cleanly when nested.
+  }
+});
+export {
+  eo as boxVariantMap,
+  go as boxVariants
+};

package/dist/components/layout/center/center.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { astralisMerge as c } from "../../../utils/astralis-merge.js";
+import { resolveStyleProps as p } from "../../../utils/responsive.js";
+import { boxVariantMap as x, boxVariants as y } from "../box/box.styles.js";
+import { BOX_VARIANT_KEYS as d } from "../box/box.js";
+const u = f(
+  ({ as: a, className: o, children: i, ...r }, n) => {
+    const m = a || "div", e = {}, s = {};
+    for (const t in r)
+      Object.prototype.hasOwnProperty.call(r, t) && (d.includes(t) ? e[t] = r[t] : s[t] = r[t]);
+    return /* @__PURE__ */ l(
+      m,
+      {
+        className: c(
+          p(e, { maps: x, variants: y }),
+          "astralis:flex astralis:items-center astralis:justify-center",
+          o
+        ),
+        ref: n,
+        ...s,
+        children: i
+      }
+    );
+  }
+);
+u.displayName = "Center";
+export {
+  u as default
+};

package/dist/components/layout/container/container.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { astralisMerge as u } from "../../../utils/astralis-merge.js";
+import { resolveStyleProps as d } from "../../../utils/responsive.js";
+import { boxVariantMap as y, boxVariants as b } from "../box/box.styles.js";
+import { BOX_VARIANT_KEYS as P } from "../box/box.js";
+const V = x(
+  ({
+    as: e,
+    className: s,
+    children: i,
+    centerContent: l = !1,
+    maxW: n = "5xl",
+    px: m = "4",
+    ...r
+  }, f) => {
+    const c = e || "div", a = { w: "full", maxW: n, px: m }, o = {};
+    for (const t in r)
+      Object.prototype.hasOwnProperty.call(r, t) && (P.includes(t) ? a[t] = r[t] : o[t] = r[t]);
+    return /* @__PURE__ */ p(
+      c,
+      {
+        className: u(
+          d(a, { maps: y, variants: b }),
+          "astralis:mx-auto",
+          l && "astralis:flex astralis:flex-col astralis:items-center",
+          s
+        ),
+        ref: f,
+        ...o,
+        children: i
+      }
+    );
+  }
+);
+V.displayName = "Container";
+export {
+  V as default
+};