astralis-ui 0.1.0

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

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as a, jsxs as M } from "react/jsx-runtime";
+import { useMemo as S, useEffect as U } from "react";
+import { usePopover as $ } from "../popover.context.js";
+import { popoverArrowClasses as k, popoverContentClasses as q } from "../popover.styles.js";
+import { Portal as z } from "../../portal.js";
+import { usePresence as B } from "../../../../hooks/use-presence.js";
+import { useDismiss as F } from "../../../../hooks/use-dismiss.js";
+import { useAnchorPosition as G } from "../../../../hooks/use-anchor-position.js";
+import { astralisMerge as H } from "../../../../utils/astralis-merge.js";
+const l = 160;
+function _({ children: n, className: f = "", withArrow: c = !1, ...p }) {
+  const {
+    open: o,
+    close: m,
+    triggerRef: s,
+    contentRef: t,
+    arrowRef: d,
+    contentId: u,
+    titleId: v,
+    descriptionId: g,
+    hasTitle: h,
+    hasDescription: y,
+    side: O,
+    align: b,
+    sideOffset: R,
+    alignOffset: P,
+    avoidCollisions: x,
+    closeOnEsc: C,
+    closeOnOutsidePointer: I
+  } = $(), { mounted: w, state: D } = B(o, l), { x: T, y: A, side: r, arrow: i } = G({
+    open: o,
+    anchorRef: s,
+    floatingRef: t,
+    side: O,
+    align: b,
+    sideOffset: R,
+    alignOffset: P,
+    avoidCollisions: x
+  }), E = S(() => [s, t], [s, t]);
+  if (F(o, m, { refs: E, closeOnEscape: C, closeOnOutsidePointer: I }), U(() => {
+    if (!o) return;
+    const j = setTimeout(() => t.current?.focus(), 0);
+    return () => {
+      clearTimeout(j), s.current?.focus();
+    };
+  }, [o, t, s]), !w) return null;
+  const N = D === "open", e = {};
+  return r === "bottom" ? (e.top = -4, e.left = i.left) : r === "top" ? (e.bottom = -4, e.left = i.left) : r === "right" ? (e.left = -4, e.top = i.top) : (e.right = -4, e.top = i.top), /* @__PURE__ */ a(z, { children: /* @__PURE__ */ M(
+    "div",
+    {
+      ref: t,
+      id: u,
+      role: "dialog",
+      "aria-labelledby": h ? v : void 0,
+      "aria-describedby": y ? g : void 0,
+      tabIndex: -1,
+      "data-side": r,
+      style: { left: T, top: A, transitionDuration: `${l}ms` },
+      className: H(
+        q,
+        "astralis:p-4 astralis:transition-all",
+        N ? "astralis:opacity-100 astralis:scale-100" : "astralis:opacity-0 astralis:scale-95",
+        f
+      ),
+      ...p,
+      children: [
+        n,
+        c && /* @__PURE__ */ a("div", { ref: d, className: k, style: e })
+      ]
+    }
+  ) });
+}
+export {
+  _ as PopoverContent
+};

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

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { useEffect as a } from "react";
+import { usePopover as o } from "../popover.context.js";
+import { astralisMerge as l } from "../../../../utils/astralis-merge.js";
+function c({ children: e, className: s = "" }) {
+  const { titleId: r, setHasTitle: t } = o();
+  return a(() => (t(!0), () => t(!1)), [t]), /* @__PURE__ */ i("h3", { id: r, className: l("astralis:text-sm astralis:font-semibold astralis:text-label-base", s), children: e });
+}
+function f({ children: e, className: s = "" }) {
+  const { descriptionId: r, setHasDescription: t } = o();
+  return a(() => (t(!0), () => t(!1)), [t]), /* @__PURE__ */ i("p", { id: r, className: l("astralis:mt-1 astralis:text-sm astralis:text-label-muted", s), children: e });
+}
+export {
+  f as PopoverDescription,
+  c as PopoverTitle
+};

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

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as S } from "react/jsx-runtime";
+import { cloneElement as I, useId as j, useRef as p, useState as k, useCallback as x, useMemo as w } from "react";
+import { usePopover as P, PopoverContext as M } from "../popover.context.js";
+import { useControllableState as V } from "../../../../hooks/use-controllable-state.js";
+function B({
+  children: e,
+  open: n,
+  defaultOpen: o = !1,
+  onOpenChange: a,
+  side: r = "bottom",
+  align: s = "center",
+  sideOffset: u = 8,
+  alignOffset: i = 0,
+  avoidCollisions: f = !0,
+  closeOnEsc: m = !0,
+  closeOnOutsidePointer: g = !0
+}) {
+  const [c, t] = V({ value: n, defaultValue: o, onChange: a }), l = j(), b = p(null), T = p(null), $ = p(null), [d, h] = k(!1), [v, D] = k(!1), C = x(() => t(!1), [t]), R = x(() => t(!c), [t, c]), H = w(
+    () => ({
+      open: c,
+      setOpen: t,
+      toggle: R,
+      close: C,
+      triggerRef: b,
+      contentRef: T,
+      arrowRef: $,
+      contentId: `${l}-content`,
+      titleId: `${l}-title`,
+      descriptionId: `${l}-desc`,
+      hasTitle: d,
+      setHasTitle: h,
+      hasDescription: v,
+      setHasDescription: D,
+      side: r,
+      align: s,
+      sideOffset: u,
+      alignOffset: i,
+      avoidCollisions: f,
+      closeOnEsc: m,
+      closeOnOutsidePointer: g
+    }),
+    [c, t, R, C, l, d, v, r, s, u, i, f, m, g]
+  );
+  return /* @__PURE__ */ S(M.Provider, { value: H, children: e });
+}
+function E({ children: e }) {
+  const { toggle: n, open: o, triggerRef: a, contentId: r } = P();
+  return I(e, {
+    ref: a,
+    onClick: (s) => {
+      e.props.onClick?.(s), n();
+    },
+    "aria-haspopup": "dialog",
+    "aria-expanded": o,
+    "aria-controls": o ? r : void 0
+  });
+}
+function F({ children: e }) {
+  const { close: n } = P();
+  return I(e, {
+    onClick: (o) => {
+      e.props.onClick?.(o), n();
+    }
+  });
+}
+export {
+  F as PopoverClose,
+  B as PopoverRoot,
+  E as PopoverTrigger
+};

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

@@ -0,0 +1,19 @@
+"use client";
+import { PopoverRoot as o, PopoverClose as e, PopoverTrigger as r } from "./components/popover-root.js";
+import { PopoverContent as t } from "./components/popover-content.js";
+import { PopoverDescription as i, PopoverTitle as p } from "./components/popover-parts.js";
+const P = Object.assign(o, {
+  Trigger: r,
+  Content: t,
+  Title: p,
+  Description: i,
+  Close: e
+});
+export {
+  P as Popover,
+  e as PopoverClose,
+  t as PopoverContent,
+  i as PopoverDescription,
+  p as PopoverTitle,
+  r as PopoverTrigger
+};

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

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

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

@@ -0,0 +1,6 @@
+"use client";
+const s = "astralis:fixed astralis:z-higher astralis:min-w-48 astralis:max-w-xs astralis:rounded-lg astralis:border-normal astralis:border-stroke-subtle astralis:bg-surface-base astralis:text-label-base astralis:shadow-lg astralis:outline-none", a = "astralis:absolute astralis:size-2.5 astralis:rotate-45 astralis:bg-surface-base astralis:border-stroke-subtle";
+export {
+  a as popoverArrowClasses,
+  s as popoverContentClasses
+};

package/dist/components/overlay/portal.js

@@ -0,0 +1,10 @@
+"use client";
+import { useState as u, useEffect as n } from "react";
+import { createPortal as f } from "react-dom";
+function m({ children: t, container: e }) {
+  const [o, r] = u(!1);
+  return n(() => r(!0), []), o ? f(t, e ?? document.body) : null;
+}
+export {
+  m as Portal
+};

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

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as l, jsxs as k } from "react/jsx-runtime";
+import { useEffect as A } from "react";
+import { useTooltip as N } from "../tooltip.context.js";
+import { tooltipArrowClasses as O, tooltipContentClasses as P } from "../tooltip.styles.js";
+import { Portal as T } from "../../portal.js";
+import { usePresence as b } from "../../../../hooks/use-presence.js";
+import { useAnchorPosition as j } from "../../../../hooks/use-anchor-position.js";
+import { astralisMerge as D } from "../../../../utils/astralis-merge.js";
+const a = 140;
+function z({ children: f, className: p = "", withArrow: m = !1 }) {
+  const { open: o, hide: s, triggerRef: c, contentRef: r, tooltipId: d, side: u, align: y, sideOffset: g, avoidCollisions: h } = N(), { mounted: v, state: w } = b(o, a), { x: C, y: R, side: e, arrow: i } = j({
+    open: o,
+    anchorRef: c,
+    floatingRef: r,
+    side: u,
+    align: y,
+    sideOffset: g,
+    avoidCollisions: h
+  });
+  if (A(() => {
+    if (!o) return;
+    const n = (E) => {
+      E.key === "Escape" && s();
+    };
+    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [o, s]), !v) return null;
+  const x = w === "open", t = {};
+  return e === "bottom" ? (t.top = -3, t.left = i.left) : e === "top" ? (t.bottom = -3, t.left = i.left) : e === "right" ? (t.left = -3, t.top = i.top) : (t.right = -3, t.top = i.top), /* @__PURE__ */ l(T, { children: /* @__PURE__ */ k(
+    "div",
+    {
+      ref: r,
+      id: d,
+      role: "tooltip",
+      "data-side": e,
+      style: { left: C, top: R, transitionDuration: `${a}ms` },
+      className: D(
+        P,
+        "astralis:transition-opacity",
+        x ? "astralis:opacity-100" : "astralis:opacity-0",
+        p
+      ),
+      children: [
+        f,
+        m && /* @__PURE__ */ l("div", { className: O, style: t })
+      ]
+    }
+  ) });
+}
+export {
+  z as TooltipContent
+};

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

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as d } from "react/jsx-runtime";
+import { cloneElement as h, useId as C, useRef as a, useCallback as f, useMemo as E } from "react";
+import { useTooltip as I, TooltipContext as B } from "../tooltip.context.js";
+import { useControllableState as F } from "../../../../hooks/use-controllable-state.js";
+function P({
+  children: e,
+  open: p,
+  defaultOpen: c = !1,
+  onOpenChange: r,
+  side: n = "top",
+  align: u = "center",
+  sideOffset: s = 6,
+  delay: o = 300,
+  avoidCollisions: m = !0
+}) {
+  const [T, t] = F({ value: p, defaultValue: c, onChange: r }), g = C(), R = a(null), b = a(null), l = a(null), i = () => {
+    l.current && clearTimeout(l.current);
+  }, w = f(() => {
+    i(), l.current = setTimeout(() => t(!0), o);
+  }, [t, o]), v = f(() => {
+    i(), t(!0);
+  }, [t]), M = f(() => {
+    i(), t(!1);
+  }, [t]), x = E(
+    () => ({ open: T, show: w, showNow: v, hide: M, triggerRef: R, contentRef: b, tooltipId: `${g}-tip`, side: n, align: u, sideOffset: s, avoidCollisions: m }),
+    [T, w, v, M, g, n, u, s, m]
+  );
+  return /* @__PURE__ */ d(B.Provider, { value: x, children: e });
+}
+function S({ children: e }) {
+  const { show: p, showNow: c, hide: r, open: n, triggerRef: u, tooltipId: s } = I();
+  return h(e, {
+    ref: u,
+    onMouseEnter: (o) => {
+      e.props.onMouseEnter?.(o), p();
+    },
+    onMouseLeave: (o) => {
+      e.props.onMouseLeave?.(o), r();
+    },
+    onFocus: (o) => {
+      e.props.onFocus?.(o), c();
+    },
+    onBlur: (o) => {
+      e.props.onBlur?.(o), r();
+    },
+    "aria-describedby": n ? s : void 0
+  });
+}
+export {
+  P as TooltipRoot,
+  S as TooltipTrigger
+};

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

@@ -0,0 +1,12 @@
+"use client";
+import { TooltipRoot as o, TooltipTrigger as t } from "./components/tooltip-root.js";
+import { TooltipContent as i } from "./components/tooltip-content.js";
+const n = Object.assign(o, {
+  Trigger: t,
+  Content: i
+});
+export {
+  n as Tooltip,
+  i as TooltipContent,
+  t as TooltipTrigger
+};

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

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

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

@@ -0,0 +1,6 @@
+"use client";
+const s = "astralis:fixed astralis:z-highest astralis:pointer-events-none astralis:max-w-xs astralis:rounded-md astralis:bg-surface-inverted astralis:text-label-inverted astralis:px-2.5 astralis:py-1.5 astralis:text-xs astralis:font-medium astralis:shadow-md", a = "astralis:absolute astralis:size-2 astralis:rotate-45 astralis:bg-surface-inverted";
+export {
+  a as tooltipArrowClasses,
+  s as tooltipContentClasses
+};

package/dist/components/typography/blockquote/blockquote.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsxs as u, jsx as b } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { astralisMerge as V } from "../../../utils/astralis-merge.js";
+import { resolveStyleProps as a } from "../../../utils/responsive.js";
+import { splitVariantProps as k } from "../../../utils/split-variant-props.js";
+import { blockquoteVariantMap as r, blockquoteVariants as d } from "./blockquote.styles.js";
+import { boxVariantMap as q, boxVariants as N } from "../../layout/box/box.styles.js";
+import { BOX_VARIANT_KEYS as P } from "../../layout/box/box.js";
+const v = Object.keys(r), A = x(
+  ({ as: o, className: s, children: i, cite: t, citeUrl: e, ...l }, m) => {
+    const n = o || "blockquote", [p, c, f] = k(
+      l,
+      v,
+      P
+    );
+    return /* @__PURE__ */ u(
+      n,
+      {
+        cite: e,
+        className: V(
+          a(p, { maps: r, variants: d }),
+          a(c, { maps: q, variants: N }),
+          s
+        ),
+        ref: m,
+        ...f,
+        children: [
+          i,
+          t != null && /* @__PURE__ */ b("cite", { className: "astralis:mt-2 astralis:block astralis:text-sm astralis:not-italic astralis:text-label-muted", children: t })
+        ]
+      }
+    );
+  }
+);
+A.displayName = "Blockquote";
+export {
+  A as default
+};

package/dist/components/typography/blockquote/blockquote.styles.js

@@ -0,0 +1,21 @@
+"use client";
+import { cva as a } from "class-variance-authority";
+const s = {
+  variant: {
+    // Just an accent rule on the leading edge.
+    plain: "astralis:ps-4",
+    // Accent rule plus a tinted panel.
+    subtle: "astralis:ps-4 astralis:pe-4 astralis:py-3 astralis:rounded-e-md astralis:bg-surface-muted"
+  }
+}, r = a(
+  // Leading accent border; colour overridable via `borderColor`.
+  "astralis:border-s-4 astralis:border-stroke-emphasized",
+  {
+    variants: s,
+    defaultVariants: { variant: "plain" }
+  }
+);
+export {
+  s as blockquoteVariantMap,
+  r as blockquoteVariants
+};

package/dist/components/typography/code/code.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { astralisMerge as d } from "../../../utils/astralis-merge.js";
+import { resolveStyleProps as r } from "../../../utils/responsive.js";
+import { splitVariantProps as V } from "../../../utils/split-variant-props.js";
+import { codeVariantMap as o, codeVariants as x } from "./code.styles.js";
+import { boxVariantMap as P, boxVariants as b } from "../../layout/box/box.styles.js";
+import { BOX_VARIANT_KEYS as v } from "../../layout/box/box.js";
+const A = Object.keys(o), N = l(
+  ({ as: a, className: t, children: s, ...e }, m) => {
+    const i = a || "code", [p, n, f] = V(
+      e,
+      A,
+      v
+    );
+    return /* @__PURE__ */ c(
+      i,
+      {
+        className: d(
+          r(p, { maps: o, variants: x }),
+          r(n, { maps: P, variants: b }),
+          t
+        ),
+        ref: m,
+        ...f,
+        children: s
+      }
+    );
+  }
+);
+N.displayName = "Code";
+export {
+  N as default
+};

package/dist/components/typography/code/code.styles.js

@@ -0,0 +1,26 @@
+"use client";
+import { cva as a } from "class-variance-authority";
+const s = {
+  variant: {
+    subtle: "astralis:bg-surface-muted astralis:text-label-base",
+    // Same-polarity surface — tracks the active theme instead of inverting.
+    solid: "astralis:bg-surface-subtle astralis:text-label-base",
+    outline: "astralis:border-normal astralis:border-stroke-base astralis:text-label-base"
+  },
+  size: {
+    sm: "astralis:text-xs",
+    md: "astralis:text-sm",
+    lg: "astralis:text-md"
+  }
+}, e = a(
+  // Inline, monospace, never wraps mid-token; padding/rounding keep it legible in prose.
+  "astralis:font-mono astralis:inline-flex astralis:items-center astralis:rounded-sm astralis:px-1.5 astralis:py-0.5 astralis:whitespace-nowrap",
+  {
+    variants: s,
+    defaultVariants: { variant: "subtle", size: "sm" }
+  }
+);
+export {
+  s as codeVariantMap,
+  e as codeVariants
+};

package/dist/components/typography/code-block/code-block.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { forwardRef as V } from "react";
+import { astralisMerge as x } from "../../../utils/astralis-merge.js";
+import { resolveStyleProps as r } from "../../../utils/responsive.js";
+import { splitVariantProps as y } from "../../../utils/split-variant-props.js";
+import { codeBlockBodyMap as i, codeBlockVariantMap as o, codeBlockBodyVariants as B, codeBlockVariants as h } from "./code-block.styles.js";
+import { boxVariantMap as _, boxVariants as v } from "../../layout/box/box.styles.js";
+import { BOX_VARIANT_KEYS as A } from "../../layout/box/box.js";
+const O = Object.keys(o), P = Object.keys(i), T = () => /* @__PURE__ */ t("span", { className: "astralis:flex astralis:items-center astralis:gap-1.5 astralis:me-1", "aria-hidden": "true", children: [
+  /* @__PURE__ */ s("span", { className: "astralis:block astralis:size-3 astralis:rounded-full astralis:bg-red-400" }),
+  /* @__PURE__ */ s("span", { className: "astralis:block astralis:size-3 astralis:rounded-full astralis:bg-yellow-400" }),
+  /* @__PURE__ */ s("span", { className: "astralis:block astralis:size-3 astralis:rounded-full astralis:bg-green-400" })
+] }), M = V(
+  ({ as: n, className: c, children: m, language: a, windowControls: l, highlightedHtml: e, ...p }, d) => {
+    const f = n || "div", [b, u, k, N] = y(
+      p,
+      O,
+      P,
+      A
+    );
+    return /* @__PURE__ */ t(
+      f,
+      {
+        className: x(
+          r(b, { maps: o, variants: h }),
+          r(k, { maps: _, variants: v }),
+          c
+        ),
+        ref: d,
+        ...N,
+        children: [
+          (a != null || l) && // Divider uses the semantic stroke (theme-aware); the label inherits the
+          // variant's own text colour, so it stays legible on every surface.
+          /* @__PURE__ */ t("div", { className: "astralis:flex astralis:items-center astralis:gap-2 astralis:px-4 astralis:py-2.5 astralis:text-xs astralis:font-mono astralis:font-medium astralis:border-b astralis:border-stroke-base astralis:select-none", children: [
+            l && /* @__PURE__ */ s(T, {}),
+            a != null && /* @__PURE__ */ s("span", { className: "astralis:opacity-higher", children: a })
+          ] }),
+          /* @__PURE__ */ s(
+            "pre",
+            {
+              className: r(u, {
+                maps: i,
+                variants: B
+              }),
+              children: e != null ? /* @__PURE__ */ s("code", { dangerouslySetInnerHTML: { __html: e } }) : /* @__PURE__ */ s("code", { children: m })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+M.displayName = "CodeBlock";
+export {
+  M as default
+};

package/dist/components/typography/code-block/code-block.styles.js

@@ -0,0 +1,36 @@
+"use client";
+import { cva as a } from "class-variance-authority";
+const s = {
+  variant: {
+    subtle: "astralis:bg-surface-muted astralis:text-label-base",
+    // Same-polarity surface — tracks the active theme (dark block in dark
+    // mode) rather than inverting against it.
+    solid: "astralis:bg-surface-subtle astralis:text-label-base",
+    outline: "astralis:border-normal astralis:border-stroke-base astralis:text-label-base"
+  }
+}, t = {
+  size: {
+    sm: "astralis:text-xs astralis:p-3",
+    md: "astralis:text-sm astralis:p-4",
+    lg: "astralis:text-md astralis:p-5"
+  }
+}, r = a(
+  "astralis:block astralis:w-full astralis:rounded-md astralis:overflow-hidden",
+  {
+    variants: s,
+    defaultVariants: { variant: "subtle" }
+  }
+), e = a(
+  // Whitespace preserved; long lines scroll horizontally rather than wrap.
+  "astralis:font-mono astralis:block astralis:m-0 astralis:overflow-x-auto astralis:whitespace-pre",
+  {
+    variants: t,
+    defaultVariants: { size: "md" }
+  }
+);
+export {
+  t as codeBlockBodyMap,
+  e as codeBlockBodyVariants,
+  s as codeBlockVariantMap,
+  r as codeBlockVariants
+};

package/dist/components/typography/heading/heading.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import a from "../text/text.js";
+const o = r(
+  ({ as: t, ...e }, i) => /* @__PURE__ */ n(
+    a,
+    {
+      as: t || "h2",
+      ref: i,
+      fontFamily: "heading",
+      lineHeight: "tight",
+      letterSpacing: "tight",
+      ...e
+    }
+  )
+);
+o.displayName = "Heading";
+export {
+  o as default
+};

package/dist/components/typography/highlight/highlight.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { Fragment as d } from "react";
+import { astralisMerge as E } from "../../../utils/astralis-merge.js";
+import { highlightMarkVariants as N } from "./highlight.styles.js";
+const k = (r) => r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function x({
+  children: r,
+  query: i,
+  ignoreCase: l = !0,
+  variant: o,
+  markClassName: g,
+  className: p,
+  ref: c,
+  ...h
+}) {
+  const n = (Array.isArray(i) ? i : [i]).filter(Boolean).map(k);
+  let a = r;
+  if (typeof r != "string")
+    process.env.NODE_ENV !== "production" && console.warn("[astralis-ui] <Highlight> only highlights plain-string children; received a non-string child, rendering it as-is.");
+  else if (n.length > 0) {
+    const m = new RegExp(`(${n.join("|")})`, l ? "gi" : "g"), f = r.split(m), u = E(N({ variant: o }), g);
+    a = f.map((t, e) => t ? e % 2 === 1 ? /* @__PURE__ */ s("mark", { className: u, children: t }, e) : /* @__PURE__ */ s(d, { children: t }, e) : null);
+  }
+  return /* @__PURE__ */ s("span", { ref: c, className: p, ...h, children: a });
+}
+x.displayName = "Highlight";
+export {
+  x as default
+};

package/dist/components/typography/highlight/highlight.styles.js

@@ -0,0 +1,18 @@
+"use client";
+import { cva as a } from "class-variance-authority";
+const t = {
+  variant: {
+    subtle: "astralis:bg-yellow-subtle astralis:text-yellow-label",
+    solid: "astralis:bg-yellow-solid astralis:text-yellow-contrast"
+  }
+}, l = a(
+  "astralis:rounded-xs astralis:px-1 astralis:font-medium",
+  {
+    variants: t,
+    defaultVariants: { variant: "subtle" }
+  }
+);
+export {
+  t as highlightMarkVariantMap,
+  l as highlightMarkVariants
+};