@astralui/core 0.1.0

package/dist/index.cjs

@@ -0,0 +1,621 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var chroma = require('chroma-js');
+var reactDom = require('react-dom');
+var iconsReact = require('@tabler/icons-react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var chroma__default = /*#__PURE__*/_interopDefault(chroma);
+
+// src/theme/ColorSchemeProvider.tsx
+var ColorSchemeContext = react.createContext({
+  colorScheme: "dark",
+  setColorScheme: () => {
+  },
+  toggle: () => {
+  }
+});
+function ColorSchemeProvider({ children, defaultScheme = "dark", storageKey = "astral-color-scheme" }) {
+  const [colorScheme, setScheme] = react.useState(() => {
+    try {
+      const v = localStorage.getItem(storageKey);
+      if (v === "light" || v === "dark") return v;
+    } catch {
+    }
+    return defaultScheme;
+  });
+  react.useEffect(() => {
+    const root = document.documentElement;
+    root.setAttribute("data-astral-scheme", colorScheme);
+    root.style.colorScheme = colorScheme;
+  }, [colorScheme]);
+  const setColorScheme = react.useCallback((scheme) => {
+    try {
+      localStorage.setItem(storageKey, scheme);
+    } catch {
+    }
+    setScheme(scheme);
+  }, [storageKey]);
+  const toggle = react.useCallback(() => {
+    setScheme((prev) => {
+      const next = prev === "dark" ? "light" : "dark";
+      try {
+        localStorage.setItem(storageKey, next);
+      } catch {
+      }
+      return next;
+    });
+  }, [storageKey]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ColorSchemeContext.Provider, { value: { colorScheme, setColorScheme, toggle }, children });
+}
+function useColorScheme() {
+  return react.useContext(ColorSchemeContext);
+}
+var LIGHTNESS_MAP = [0.96, 0.907, 0.805, 0.697, 0.605, 0.547, 0.518, 0.445, 0.395, 0.34];
+var SATURATION_MAP = [0.32, 0.16, 0.08, 0.04, 0, 0, 0.04, 0.08, 0.16, 0.32];
+function getClosestLightness(colorObject) {
+  const lightnessGoal = colorObject.get("hsl.l");
+  return LIGHTNESS_MAP.reduce(
+    (prev, curr) => Math.abs(curr - lightnessGoal) < Math.abs(prev - lightnessGoal) ? curr : prev
+  );
+}
+function generateColors(color) {
+  const colorObject = chroma__default.default(color);
+  const closestLightness = getClosestLightness(colorObject);
+  const baseColorIndex = LIGHTNESS_MAP.findIndex((l) => l === closestLightness);
+  const colors = LIGHTNESS_MAP.map((l) => colorObject.set("hsl.l", l)).map((c) => chroma__default.default(c)).map((c, i) => {
+    const saturationDelta = SATURATION_MAP[i] - SATURATION_MAP[baseColorIndex];
+    return saturationDelta >= 0 ? c.saturate(saturationDelta) : c.desaturate(saturationDelta * -1);
+  });
+  colors[baseColorIndex] = chroma__default.default(color);
+  return colors.map((c) => c.hex());
+}
+var ThemePreviewContext = react.createContext({
+  preview: null,
+  setPreview: () => {
+  }
+});
+function useThemePreview() {
+  return react.useContext(ThemePreviewContext);
+}
+var HEX_RE = /^#[0-9a-f]{6}$/i;
+var isValidHex = (v) => !!v && HEX_RE.test(v);
+function adjustHex(hex, amount) {
+  const c = hex.replace("#", "");
+  const r = Math.max(0, Math.min(255, parseInt(c.substring(0, 2), 16) + amount));
+  const g = Math.max(0, Math.min(255, parseInt(c.substring(2, 4), 16) + amount));
+  const b = Math.max(0, Math.min(255, parseInt(c.substring(4, 6), 16) + amount));
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
+function hexToRgba(hex, alpha) {
+  const c = hex.replace("#", "");
+  const r = parseInt(c.substring(0, 2), 16);
+  const g = parseInt(c.substring(2, 4), 16);
+  const b = parseInt(c.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function primaryVars(palette, scheme) {
+  if (scheme === "light") {
+    return [
+      `--astral-primary-color-filled:${palette[6]}`,
+      `--astral-primary-color-filled-hover:${palette[7]}`,
+      `--astral-primary-color-light:${hexToRgba(palette[6], 0.1)}`,
+      `--astral-primary-color-light-hover:${hexToRgba(palette[6], 0.12)}`,
+      `--astral-primary-color-light-color:${palette[6]}`
+    ];
+  }
+  return [
+    `--astral-primary-color-filled:${palette[8]}`,
+    `--astral-primary-color-filled-hover:${palette[9]}`,
+    `--astral-primary-color-light:${hexToRgba(palette[6], 0.15)}`,
+    `--astral-primary-color-light-hover:${hexToRgba(palette[6], 0.2)}`,
+    `--astral-primary-color-light-color:${palette[3]}`
+  ];
+}
+function safeGenerate(hex) {
+  try {
+    return generateColors(hex);
+  } catch {
+    return null;
+  }
+}
+function buildOrgCss(src) {
+  const brand = isValidHex(src.primary_color) ? safeGenerate(src.primary_color) : null;
+  const lightBrand = isValidHex(src.light_primary_color) ? safeGenerate(src.light_primary_color) : null;
+  const lightPalette = lightBrand ?? brand;
+  const noDarkBrand = !brand;
+  const vBg = isValidHex(src.background_color) ? src.background_color : "";
+  const vCard = isValidHex(src.card_color) ? src.card_color : "";
+  const vNav = isValidHex(src.navbar_color) ? src.navbar_color : "";
+  const vFont = isValidHex(src.font_color) ? src.font_color : "";
+  const vLBg = isValidHex(src.light_background_color) ? src.light_background_color : "";
+  const vLCard = isValidHex(src.light_card_color) ? src.light_card_color : "";
+  const vLNav = isValidHex(src.light_navbar_color) ? src.light_navbar_color : "";
+  const vLFont = isValidHex(src.light_font_color) ? src.light_font_color : "";
+  const dark = [];
+  const light = [];
+  if (brand) dark.push(...primaryVars(brand, "dark"));
+  if (vFont) {
+    dark.push(`--astral-color-dark-0:${vFont}`, `--astral-color-dark-1:${adjustHex(vFont, -30)}`, `--astral-color-dark-2:${adjustHex(vFont, -60)}`, `--astral-color-text:${vFont}`);
+  }
+  if (vCard) dark.push(`--astral-color-dark-6:${vCard}`);
+  if (vBg) dark.push(`--astral-color-dark-7:${vBg}`, `--astral-color-dark-9:${adjustHex(vBg, -10)}`, `--astral-color-body:${vBg}`, `--astral-app-bg:${vBg}`);
+  if (vNav) dark.push(`--astral-color-dark-8:${vNav}`, `--astral-app-nav:${vNav}`);
+  if (vCard) dark.push(`--astral-app-card:${vCard}`);
+  if (lightBrand && noDarkBrand) {
+    for (let i = 0; i < 10; i++) light.push(`--astral-color-violet-${i}:${lightBrand[i]}`);
+  }
+  if (lightPalette) light.push(...primaryVars(lightPalette, "light"));
+  if (vLFont) light.push(`--astral-color-text:${vLFont}`);
+  if (vLBg) light.push(`--astral-app-bg:${vLBg}`);
+  if (vLNav) light.push(`--astral-app-nav:${vLNav}`);
+  if (vLCard) light.push(`--astral-app-card:${vLCard}`);
+  let css = "";
+  if (dark.length) css += `html:root[data-astral-scheme="dark"]{${dark.join(";")}}`;
+  if (light.length) css += `html:root[data-astral-scheme="light"]{${light.join(";")}}`;
+  return css;
+}
+function AstralThemeProvider({ colors, children }) {
+  const [preview, setPreview] = react.useState(null);
+  const stableSetPreview = react.useCallback((c) => {
+    setPreview(c);
+  }, []);
+  const effective = preview ? { ...colors ?? {}, ...preview } : colors ?? null;
+  const orgCss = react.useMemo(
+    () => effective ? buildOrgCss(effective) : "",
+    [effective ? JSON.stringify(effective) : ""]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ThemePreviewContext.Provider, { value: { preview, setPreview: stableSetPreview }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { "data-astral-theme": true, children: orgCss }),
+    children
+  ] });
+}
+function useDismiss(opened, onClose) {
+  react.useEffect(() => {
+    if (!opened) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [opened, onClose]);
+}
+function AstralModal({ opened, onClose, title, brand, width = 460, zIndex, children }) {
+  useDismiss(opened, onClose);
+  if (!opened) return null;
+  const style = { maxWidth: width, ...brand ? { "--au-ic": brand } : {} };
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-modal-overlay", onMouseDown: onClose, style: zIndex != null ? { zIndex } : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-modal-panel", style, onMouseDown: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-modal-head", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-modal-title", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "au-modal-x", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-modal-body", children })
+    ] }) }),
+    document.body
+  );
+}
+function AstralDrawer({ opened, onClose, title, brand, width = 440, zIndex, children }) {
+  useDismiss(opened, onClose);
+  if (!opened) return null;
+  const style = { width, ...brand ? { "--au-ic": brand } : {} };
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-drawer-overlay", onMouseDown: onClose, style: zIndex != null ? { zIndex } : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-drawer-panel", style, onMouseDown: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-drawer-head", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-drawer-title", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "au-modal-x", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-drawer-body", children })
+    ] }) }),
+    document.body
+  );
+}
+function AstralPinInput({ length = 6, value, onChange, autoFocus }) {
+  const refs = react.useRef([]);
+  const digits = Array.from({ length }, (_, i) => value[i] ?? "");
+  const focusBox = (i) => {
+    refs.current[Math.max(0, Math.min(length - 1, i))]?.focus();
+  };
+  const handleChange = (i, raw) => {
+    const clean2 = raw.replace(/\D/g, "");
+    if (!clean2) return;
+    const arr = value.split("");
+    let pos = i;
+    for (const ch of clean2) {
+      if (pos >= length) break;
+      arr[pos] = ch;
+      pos++;
+    }
+    onChange(arr.join("").slice(0, length));
+    focusBox(pos);
+  };
+  const handleKeyDown = (i, e) => {
+    if (e.key === "Backspace") {
+      e.preventDefault();
+      const arr = value.split("");
+      if (arr[i]) {
+        arr[i] = "";
+        onChange(arr.join(""));
+      } else if (i > 0) {
+        arr[i - 1] = "";
+        onChange(arr.join(""));
+        focusBox(i - 1);
+      }
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      focusBox(i - 1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focusBox(i + 1);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-pin", children: digits.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref: (el) => {
+        refs.current[i] = el;
+      },
+      className: "au-pin-box",
+      inputMode: "numeric",
+      autoComplete: "one-time-code",
+      "aria-label": `Digit ${i + 1}`,
+      value: d,
+      autoFocus: autoFocus && i === 0,
+      onChange: (e) => handleChange(i, e.currentTarget.value),
+      onKeyDown: (e) => handleKeyDown(i, e),
+      onFocus: (e) => e.currentTarget.select()
+    },
+    i
+  )) });
+}
+function AstralSelect({ value, onChange, options, placeholder, disabled, searchable, searchPlaceholder, noResults, clearable, creatable }) {
+  const [open, setOpen] = react.useState(false);
+  const [q, setQ] = react.useState("");
+  const triggerRef = react.useRef(null);
+  const menuRef = react.useRef(null);
+  const [pos, setPos] = react.useState(null);
+  const reposition = react.useCallback(() => {
+    const el = triggerRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - r.bottom - 12;
+    const spaceAbove = r.top - 12;
+    const flipUp = spaceBelow < 200 && spaceAbove > spaceBelow;
+    setPos({
+      left: r.left,
+      width: r.width,
+      ...flipUp ? { bottom: window.innerHeight - r.top + 5, maxHeight: Math.max(140, Math.min(300, spaceAbove)) } : { top: r.bottom + 5, maxHeight: Math.max(140, Math.min(300, spaceBelow)) }
+    });
+  }, []);
+  react.useEffect(() => {
+    if (!open) return;
+    reposition();
+    const onScroll = () => reposition();
+    const onResize = () => setOpen(false);
+    const onDoc = (e) => {
+      if (triggerRef.current?.contains(e.target)) return;
+      if (menuRef.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    document.addEventListener("mousedown", onDoc, true);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+      document.removeEventListener("mousedown", onDoc, true);
+    };
+  }, [open, reposition]);
+  const selected = options.find((o) => o.value === value);
+  const hasValue = value != null && value !== "";
+  const display = selected ? selected.label : value ?? "";
+  const filtered = searchable && q.trim() ? options.filter((o) => o.label.toLowerCase().includes(q.trim().toLowerCase())) : options;
+  const showCreate = !!creatable && !!q.trim() && !options.some((o) => o.label.toLowerCase() === q.trim().toLowerCase());
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-select", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { ref: triggerRef, type: "button", className: "au-input au-select-trigger", disabled, onClick: () => setOpen((o) => !o), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: hasValue ? "" : "ph", children: hasValue ? display : placeholder }),
+      clearable && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "au-select-caret au-select-clear",
+          role: "button",
+          tabIndex: -1,
+          onClick: (e) => {
+            e.stopPropagation();
+            onChange("");
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: 14 })
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronDown, { size: 15, className: "au-select-caret" })
+    ] }),
+    open && !disabled && pos && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: menuRef,
+          className: "au-select-menu",
+          style: { left: pos.left, top: pos.top, bottom: pos.bottom, width: pos.width, maxHeight: pos.maxHeight },
+          children: [
+            searchable && /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                autoFocus: true,
+                className: "au-select-search",
+                placeholder: searchPlaceholder,
+                value: q,
+                onChange: (e) => setQ(e.currentTarget.value)
+              }
+            ),
+            filtered.length === 0 && !showCreate && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-select-empty", children: noResults }),
+            filtered.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: `au-select-opt${o.value === value ? " on" : ""}`,
+                onClick: () => {
+                  onChange(o.value);
+                  setOpen(false);
+                  setQ("");
+                },
+                children: o.label
+              },
+              o.value
+            )),
+            showCreate && /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                className: "au-select-opt au-select-create",
+                onClick: () => {
+                  onChange(q.trim());
+                  setOpen(false);
+                  setQ("");
+                },
+                children: [
+                  "+ ",
+                  q.trim()
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function AstralMenu({ trigger, items, align = "end", width = 220 }) {
+  const [open, setOpen] = react.useState(false);
+  const anchorRef = react.useRef(null);
+  const menuRef = react.useRef(null);
+  const [pos, setPos] = react.useState(null);
+  const reposition = react.useCallback(() => {
+    const el = anchorRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - r.bottom - 12;
+    const spaceAbove = r.top - 12;
+    const flipUp = spaceBelow < 220 && spaceAbove > spaceBelow;
+    const left = align === "end" ? Math.max(8, Math.min(r.right - width, window.innerWidth - width - 8)) : Math.min(r.left, window.innerWidth - width - 8);
+    setPos({
+      left,
+      minWidth: width,
+      ...flipUp ? { bottom: window.innerHeight - r.top + 5, maxHeight: Math.max(160, Math.min(380, spaceAbove)) } : { top: r.bottom + 5, maxHeight: Math.max(160, Math.min(380, spaceBelow)) }
+    });
+  }, [align, width]);
+  react.useEffect(() => {
+    if (!open) return;
+    reposition();
+    const onScroll = () => reposition();
+    const onResize = () => setOpen(false);
+    const onDoc = (e) => {
+      if (anchorRef.current?.contains(e.target)) return;
+      if (menuRef.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    document.addEventListener("mousedown", onDoc, true);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+      document.removeEventListener("mousedown", onDoc, true);
+    };
+  }, [open, reposition]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-menu-anchor", ref: anchorRef, onClick: () => setOpen((o) => !o), children: trigger }),
+    open && pos && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: menuRef, className: "au-menu", style: { left: pos.left, top: pos.top, bottom: pos.bottom, minWidth: pos.minWidth, maxHeight: pos.maxHeight }, children: items.map((it, i) => it.divider ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-menu-divider" }, it.key ?? `d${i}`) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: `au-menu-item${it.danger ? " danger" : ""}`,
+          disabled: it.disabled,
+          onClick: () => {
+            setOpen(false);
+            it.onClick?.();
+          },
+          children: [
+            it.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-menu-ic", children: it.icon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-menu-label", children: it.label })
+          ]
+        },
+        it.key ?? i
+      )) }),
+      document.body
+    )
+  ] });
+}
+var toasts = [];
+var listeners = /* @__PURE__ */ new Set();
+var timers = /* @__PURE__ */ new Map();
+var counter = 0;
+var emit = () => listeners.forEach((l) => l());
+function clearTimer(id) {
+  const x = timers.get(id);
+  if (x) {
+    clearTimeout(x);
+    timers.delete(id);
+  }
+}
+function scheduleAutoClose(t) {
+  clearTimer(t.id);
+  if (t.autoClose === false || t.loading) return;
+  const ms = typeof t.autoClose === "number" ? t.autoClose : 4e3;
+  timers.set(t.id, setTimeout(() => hide(t.id), ms));
+}
+function show(opts) {
+  const id = opts.id ?? `toast-${++counter}`;
+  const existing = toasts.find((t) => t.id === id);
+  const toast = { withCloseButton: true, ...existing, ...opts, id };
+  toasts = existing ? toasts.map((t) => t.id === id ? toast : t) : [...toasts, toast];
+  emit();
+  scheduleAutoClose(toast);
+  return id;
+}
+function update(opts) {
+  if (!opts.id) return show(opts);
+  const existing = toasts.find((t) => t.id === opts.id);
+  if (!existing) return show(opts);
+  const toast = { ...existing, ...opts, id: opts.id };
+  toasts = toasts.map((t) => t.id === opts.id ? toast : t);
+  emit();
+  scheduleAutoClose(toast);
+  return opts.id;
+}
+function hide(id) {
+  const t = toasts.find((x) => x.id === id);
+  clearTimer(id);
+  toasts = toasts.filter((x) => x.id !== id);
+  emit();
+  t?.onClose?.();
+}
+function clean() {
+  toasts.forEach((t) => clearTimer(t.id));
+  toasts = [];
+  emit();
+}
+var notifications = { show, update, hide, clean };
+var subscribe = (cb) => {
+  listeners.add(cb);
+  return () => {
+    listeners.delete(cb);
+  };
+};
+var getSnapshot = () => toasts;
+var DEFAULT_ICON = {
+  green: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { size: 16 }),
+  teal: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { size: 16 }),
+  red: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconExclamationCircle, { size: 16 }),
+  orange: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertTriangle, { size: 16 }),
+  yellow: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertTriangle, { size: 16 })
+};
+function Spinner() {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-toast-spin" });
+}
+function ToastCard({ t }) {
+  const accent = t.color ? `var(--astral-color-${t.color}-6)` : "var(--astral-color-default-border)";
+  const lead = t.loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : t.icon ? t.icon : t.color && DEFAULT_ICON[t.color] || /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconInfoCircle, { size: 16 });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-toast", style: { ["--au-toast-accent"]: accent }, role: "status", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-toast-lead", children: lead }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-toast-body", children: [
+      t.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-toast-title", children: t.title }),
+      t.message != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-toast-msg", children: t.message })
+    ] }),
+    t.withCloseButton !== false && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "au-toast-x", onClick: () => hide(t.id), "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: 14 }) })
+  ] });
+}
+function AstralToaster() {
+  const items = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  if (typeof document === "undefined") return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-toast-host", role: "region", "aria-live": "polite", "aria-label": "Notifications", children: items.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastCard, { t }, t.id)) }),
+    document.body
+  );
+}
+var pad2 = (n) => String(n).padStart(2, "0");
+var pad4 = (n) => String(n).padStart(4, "0");
+function dateToInputStr(d) {
+  if (!d || isNaN(d.getTime())) return "";
+  return `${pad4(d.getFullYear())}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+}
+function dateTimeToInputStr(d) {
+  if (!d || isNaN(d.getTime())) return "";
+  return `${dateToInputStr(d)}T${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+}
+function DateInput({ type = "date", value, onChange, min, max, className, style, disabled, "aria-label": ariaLabel }) {
+  const isTime = type === "datetime-local";
+  const fmt = isTime ? dateTimeToInputStr : dateToInputStr;
+  const [s, setS] = react.useState(() => fmt(value));
+  const t = value?.getTime();
+  react.useEffect(() => {
+    setS(fmt(value));
+  }, [t]);
+  const handle = (str) => {
+    setS(str);
+    if (str === "") {
+      onChange(null);
+      return;
+    }
+    const m = (isTime ? /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/ : /^(\d{4})-(\d{2})-(\d{2})$/).exec(str);
+    if (!m) return;
+    const y = Number(m[1]);
+    if (y < 1970 || y > 2100) return;
+    const d = isTime ? new Date(y, Number(m[2]) - 1, Number(m[3]), Number(m[4]), Number(m[5])) : new Date(y, Number(m[2]) - 1, Number(m[3]));
+    if (isNaN(d.getTime())) return;
+    onChange(d);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type,
+      className,
+      style,
+      disabled,
+      "aria-label": ariaLabel,
+      value: s,
+      min: min ? fmt(min) : void 0,
+      max: max ? fmt(max) : void 0,
+      onChange: (e) => handle(e.currentTarget.value)
+    }
+  );
+}
+function Spinner2({ size = 24, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: className ? `au-spinner ${className}` : "au-spinner",
+      style: { width: size, height: size, ...style },
+      role: "status",
+      "aria-label": "Loading"
+    }
+  );
+}
+
+exports.AstralDrawer = AstralDrawer;
+exports.AstralMenu = AstralMenu;
+exports.AstralModal = AstralModal;
+exports.AstralPinInput = AstralPinInput;
+exports.AstralSelect = AstralSelect;
+exports.AstralThemeProvider = AstralThemeProvider;
+exports.AstralToaster = AstralToaster;
+exports.ColorSchemeProvider = ColorSchemeProvider;
+exports.DateInput = DateInput;
+exports.Spinner = Spinner2;
+exports.buildOrgCss = buildOrgCss;
+exports.dateTimeToInputStr = dateTimeToInputStr;
+exports.dateToInputStr = dateToInputStr;
+exports.generateColors = generateColors;
+exports.notifications = notifications;
+exports.useColorScheme = useColorScheme;
+exports.useThemePreview = useThemePreview;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map