@ansh-ui/react 0.2.0

package/dist/index.js

@@ -0,0 +1,956 @@
+'use client';
+export { useAnimate, useIsMounted, useMotionStyle, useMotionValue, useMotionValueState, useSpringValue } from './chunk-O2PX54KX.js';
+export { AspectRatio, Center, Container, Divider, Grid, GridItem, HStack, Resizable, ScrollArea, Spacer, Stack, VStack } from './chunk-EGG4CP7C.js';
+export { Calendar, Checkbox, ChoiceCard, ColorPicker, Combobox, DatePicker, DateRangePicker, Dropzone, Field, Fieldset, Input, NumberInput, OptionList, PinInput, Radio, RadioGroup, RangeSlider, Rating, Select, Slider, Switch, TagsInput, Textarea, VisuallyHidden, addDays, addMonths, filterOptions, firstEnabled, isSameDay, scoreOption, startOfDay, stepActive, useFieldContext, useFieldControl, useTypeahead } from './chunk-QO3E7TJS.js';
+export { AlertDialog, CommandPalette, ContextMenu, Dialog, DialogFooter, Drawer, DropdownMenu, HoverCard, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipProvider, useCommandShortcut } from './chunk-LDCZQP3R.js';
+export { Presence, Slot, getTabbable, slotted, useAutoFocus, useFocusRestore, useFocusTrap, usePresence, useRovingFocus } from './chunk-HO2YSF5O.js';
+export { Portal, computePosition, useAnchoredPosition, useDismiss, useScrollLock } from './chunk-XEP6P7E6.js';
+export { Avatar, AvatarGroup, Badge, CircularProgress, CodeBlock, DataTable, DescriptionList, EmptyState, Kbd, Meter, Pagination, Progress, Stat, Table, Timeline } from './chunk-HPGCILO4.js';
+export { Accordion, Breadcrumbs, Collapsible, DisclosureList, NavigationMenu, Stepper, Tabs } from './chunk-OLTS6G5M.js';
+export { AppShell, Sidebar } from './chunk-5CFQFMP5.js';
+export { useControllableState } from './chunk-LXCIXR5T.js';
+import { useBehaviour } from './chunk-T4AK2KLM.js';
+export { AnimatePresence, AnimatedText, Draggable, GradientText, MagneticButton, Marquee, Motion, MotionConfig, Parallax, Ripple, ScrollReveal, ThemeProvider, TiltCard, createBehaviourComponent, themeScript, useBehaviour, useMotionConfig, useTheme } from './chunk-T4AK2KLM.js';
+import { useMergedRef, useInView } from './chunk-IBXLC5IE.js';
+export { useElementSize, useFrameBudget, useInView, useMergedRef, usePointer, useReducedMotion, useScrollProgress, useTicker, useWindowScroll } from './chunk-IBXLC5IE.js';
+import { cx } from './chunk-H34OXXJU.js';
+export { composeEventHandlers, cx, mergeProps, mergeRefs } from './chunk-H34OXXJU.js';
+import { forwardRef, useRef, useEffect, createContext, useMemo, useState, useCallback, useContext, useId } from 'react';
+import { magnetic, ripple, getTicker, mountEffect, aurora, meshGradient, animatedGradient, particleField, constellation, meteors, rain, snow, fireflies, waves, blob, noiseLayer, spotlight, prefersReducedMotion } from '@ansh-ui/core';
+export { MotionValue, animate, checkContrast, createGradient, createNoise, createScale, createTimeline, cubicBezier, easings, ensureContrast, generatePalette, getRegistry, getTicker, mixColors, motionValue, palettes, parseColor, pickReadable, prefersReducedMotion, registerEasing, setReducedMotionMode, signature as signatureEasings, springs, stagger, toHex, toOklchString } from '@ansh-ui/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var HOST_STYLE = {
+  position: "relative",
+  isolation: "isolate",
+  overflow: "hidden"
+};
+var CONTENT_STYLE = {
+  position: "relative",
+  zIndex: 1
+};
+function createEffectComponent(definition, displayName) {
+  const optionKeys = new Set(Object.keys(definition.defaults));
+  function Render(props, forwardedRef) {
+    const { as: Component2 = "div", className, style, children, ...rest } = props;
+    const hostRef = useRef(null);
+    const handleRef = useRef(null);
+    const mergedRef = useMergedRef(hostRef, forwardedRef);
+    const options = {};
+    const domProps = {};
+    for (const [key, value] of Object.entries(rest)) {
+      if (optionKeys.has(key)) options[key] = value;
+      else domProps[key] = value;
+    }
+    const optionsKey = stableKey(options);
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    useEffect(() => {
+      const host = hostRef.current;
+      if (!host) return;
+      const handle = mountEffect(definition, host, optionsRef.current);
+      handleRef.current = handle;
+      return () => {
+        handle.destroy();
+        handleRef.current = null;
+      };
+    }, []);
+    useEffect(() => {
+      handleRef.current?.update(optionsRef.current);
+    }, [optionsKey]);
+    return /* @__PURE__ */ jsx(
+      Component2,
+      {
+        ref: mergedRef,
+        className,
+        style: { ...HOST_STYLE, ...style },
+        ...domProps,
+        children: children != null ? /* @__PURE__ */ jsx("div", { style: CONTENT_STYLE, children }) : null
+      }
+    );
+  }
+  const Component = forwardRef(Render);
+  Component.displayName = displayName ?? `Ansh(${definition.name})`;
+  return Component;
+}
+function stableKey(options) {
+  const keys = Object.keys(options).sort();
+  const parts = [];
+  for (const key of keys) {
+    const value = options[key];
+    if (typeof value === "function") {
+      parts.push(`${key}:fn`);
+    } else if (value === void 0) {
+      continue;
+    } else {
+      parts.push(`${key}:${JSON.stringify(value)}`);
+    }
+  }
+  return parts.join("|");
+}
+var AuroraBackground = createEffectComponent(aurora, "AuroraBackground");
+var MeshGradient = createEffectComponent(meshGradient, "MeshGradient");
+var AnimatedGradient = createEffectComponent(animatedGradient, "AnimatedGradient");
+var ParticleField = createEffectComponent(particleField, "ParticleField");
+var Constellation = createEffectComponent(constellation, "Constellation");
+var MeteorShower = createEffectComponent(meteors, "MeteorShower");
+var Rain = createEffectComponent(rain, "Rain");
+var Snow = createEffectComponent(snow, "Snow");
+var Fireflies = createEffectComponent(fireflies, "Fireflies");
+var Waves = createEffectComponent(waves, "Waves");
+var LiquidBlob = createEffectComponent(blob, "LiquidBlob");
+var NoiseLayer = createEffectComponent(noiseLayer, "NoiseLayer");
+var Spotlight = createEffectComponent(spotlight, "Spotlight");
+var Button = forwardRef(function Button2({
+  variant = "solid",
+  size = "md",
+  as: Component = "button",
+  magneticStrength = 0,
+  ripple: ripple$1 = false,
+  glowColors,
+  duration,
+  className,
+  style,
+  children,
+  ...rest
+}, forwardedRef) {
+  const localRef = useRef(null);
+  const mergedRef = useMergedRef(localRef, forwardedRef);
+  useBehaviour(localRef, magnetic, {
+    strength: magneticStrength,
+    disabled: magneticStrength <= 0,
+    scale: magneticStrength > 0 ? 1.03 : 1
+  });
+  useBehaviour(localRef, ripple, { disabled: !ripple$1 });
+  const classes = [
+    "ansh-btn",
+    `ansh-btn--${variant}`,
+    size !== "md" && `ansh-btn--${size}`,
+    "ansh-focusable",
+    className
+  ].filter(Boolean).join(" ");
+  const cssVars = {};
+  if (glowColors) {
+    cssVars["--ansh-glow-from"] = glowColors[0];
+    cssVars["--ansh-glow-via"] = glowColors[1];
+    cssVars["--ansh-glow-to"] = glowColors[0];
+  }
+  if (duration !== void 0) {
+    cssVars["--ansh-glow-duration"] = `${duration}s`;
+    cssVars["--ansh-shimmer-duration"] = `${duration}s`;
+  }
+  return /* @__PURE__ */ jsx(Component, { ref: mergedRef, className: classes, style: { ...cssVars, ...style }, ...rest, children });
+});
+var IconButton = forwardRef(function IconButton2({ label, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      "aria-label": label,
+      className: ["ansh-btn--icon", className].filter(Boolean).join(" "),
+      style: { padding: "var(--ansh-space-3)", aspectRatio: "1" },
+      ...rest
+    }
+  );
+});
+var SpotlightCard = forwardRef(function SpotlightCard2({ as: Component = "div", color, size, className, children, ...rest }, forwardedRef) {
+  const localRef = useRef(null);
+  const mergedRef = useMergedRef(localRef, forwardedRef);
+  useEffect(() => {
+    const node = localRef.current;
+    if (!node) return;
+    const onMove = (event) => {
+      const rect = node.getBoundingClientRect();
+      node.style.setProperty("--ansh-spot-x", `${event.clientX - rect.left}px`);
+      node.style.setProperty("--ansh-spot-y", `${event.clientY - rect.top}px`);
+    };
+    const onEnter = () => node.style.setProperty("--ansh-spot-opacity", "1");
+    const onLeave = () => node.style.setProperty("--ansh-spot-opacity", "0");
+    node.addEventListener("pointermove", onMove, { passive: true });
+    node.addEventListener("pointerenter", onEnter, { passive: true });
+    node.addEventListener("pointerleave", onLeave, { passive: true });
+    return () => {
+      node.removeEventListener("pointermove", onMove);
+      node.removeEventListener("pointerenter", onEnter);
+      node.removeEventListener("pointerleave", onLeave);
+    };
+  }, []);
+  const cssVars = {};
+  if (color) cssVars["--ansh-spot-color"] = color;
+  if (size) cssVars["--ansh-spot-size"] = `${size}px`;
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: mergedRef,
+      className: ["ansh-card", "ansh-card--spotlight", className].filter(Boolean).join(" "),
+      style: cssVars,
+      ...rest,
+      children
+    }
+  );
+});
+var GlowCard = forwardRef(function GlowCard2({ as: Component = "div", colors, duration, className, style, children, ...rest }, ref) {
+  const cssVars = {};
+  if (colors) {
+    cssVars["--ansh-glow-from"] = colors[0];
+    cssVars["--ansh-glow-via"] = colors[1];
+    cssVars["--ansh-glow-to"] = colors[0];
+  }
+  if (duration !== void 0) cssVars["--ansh-glow-duration"] = `${duration}s`;
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: ["ansh-card", "ansh-card--glow", className].filter(Boolean).join(" "),
+      style: { ...cssVars, ...style },
+      ...rest,
+      children
+    }
+  );
+});
+var TiltCard3D = forwardRef(function TiltCard3D2({ as: Component = "div", max = 12, className, style, children, ...rest }, forwardedRef) {
+  const localRef = useRef(null);
+  const mergedRef = useMergedRef(localRef, forwardedRef);
+  useEffect(() => {
+    const node = localRef.current;
+    if (!node) return;
+    let pending = null;
+    const onMove = (event) => {
+      const rect = node.getBoundingClientRect();
+      pending = {
+        nx: (event.clientX - rect.left) / rect.width - 0.5,
+        ny: (event.clientY - rect.top) / rect.height - 0.5
+      };
+    };
+    const onLeave = () => {
+      pending = { nx: 0, ny: 0 };
+    };
+    node.addEventListener("pointermove", onMove, { passive: true });
+    node.addEventListener("pointerleave", onLeave, { passive: true });
+    const stop = getTicker().add(
+      () => {
+        if (!pending) return;
+        const { nx, ny } = pending;
+        node.style.transform = `perspective(800px) rotateX(${(-ny * max).toFixed(2)}deg) rotateY(${(nx * max).toFixed(2)}deg)`;
+      },
+      { phase: "write", name: "TiltCard3D" }
+    );
+    return () => {
+      node.removeEventListener("pointermove", onMove);
+      node.removeEventListener("pointerleave", onLeave);
+      stop();
+    };
+  }, [max]);
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: mergedRef,
+      className: ["ansh-card", className].filter(Boolean).join(" "),
+      style: { transition: "transform 400ms ease-out", ...style },
+      ...rest,
+      children
+    }
+  );
+});
+function BentoGrid({ columns = 3, className, style, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["ansh-bento", className].filter(Boolean).join(" "),
+      style: { ["--ansh-bento-cols"]: columns, ...style },
+      ...rest,
+      children
+    }
+  );
+}
+function BentoItem({
+  span = 1,
+  rowSpan = 1,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["ansh-bento__item", "ansh-card", className].filter(Boolean).join(" "),
+      style: { ["--ansh-span"]: span, ["--ansh-row-span"]: rowSpan, ...style },
+      ...rest,
+      children
+    }
+  );
+}
+function Dock({
+  items,
+  size = 48,
+  magnification = 80,
+  distance = 140,
+  className,
+  ...rest
+}) {
+  const dockRef = useRef(null);
+  const itemRefs = useRef([]);
+  useEffect(() => {
+    const dock = dockRef.current;
+    if (!dock) return;
+    let pointerX = null;
+    const sizes = items.map(() => size);
+    const onMove = (event) => {
+      pointerX = event.clientX;
+    };
+    const onLeave = () => {
+      pointerX = null;
+    };
+    dock.addEventListener("pointermove", onMove, { passive: true });
+    dock.addEventListener("pointerleave", onLeave, { passive: true });
+    const stop = getTicker().add(
+      ({ delta }) => {
+        const retain = Math.pow(1e-4, delta);
+        for (let i = 0; i < itemRefs.current.length; i++) {
+          const node = itemRefs.current[i];
+          if (!node) continue;
+          let target = size;
+          if (pointerX !== null) {
+            const rect = node.getBoundingClientRect();
+            const centre = rect.left + rect.width / 2;
+            const gap = Math.abs(pointerX - centre);
+            if (gap < distance) {
+              const falloff = (Math.cos(gap / distance * Math.PI) + 1) / 2;
+              target = size + (magnification - size) * falloff;
+            }
+          }
+          sizes[i] = target + (sizes[i] - target) * retain;
+          if (Math.abs(sizes[i] - target) < 0.1) sizes[i] = target;
+          node.style.width = `${sizes[i].toFixed(1)}px`;
+          node.style.height = `${sizes[i].toFixed(1)}px`;
+        }
+      },
+      { phase: "write", name: "Dock" }
+    );
+    return () => {
+      dock.removeEventListener("pointermove", onMove);
+      dock.removeEventListener("pointerleave", onLeave);
+      stop();
+    };
+  }, [items, size, magnification, distance]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: dockRef,
+      className: ["ansh-dock", className].filter(Boolean).join(" "),
+      role: "toolbar",
+      "aria-label": "Dock",
+      ...rest,
+      children: items.map((item, index) => {
+        const Tag = item.href ? "a" : "button";
+        return /* @__PURE__ */ jsxs(
+          Tag,
+          {
+            ref: (node) => {
+              itemRefs.current[index] = node;
+            },
+            className: "ansh-dock__item ansh-focusable",
+            style: { ["--ansh-dock-size"]: `${size}px` },
+            "aria-label": item.label,
+            onClick: item.onClick,
+            ...item.href ? { href: item.href } : { type: "button" },
+            children: [
+              item.icon,
+              /* @__PURE__ */ jsx("span", { className: "ansh-dock__label", "aria-hidden": "true", children: item.label })
+            ]
+          },
+          item.label
+        );
+      })
+    }
+  );
+}
+function Typewriter({
+  words,
+  speed = 24,
+  deleteSpeed = 40,
+  pause = 1.6,
+  loop,
+  caret = true,
+  className,
+  ...rest
+}) {
+  const list = useMemo(() => typeof words === "string" ? [words] : words, [words]);
+  const shouldLoop = loop ?? list.length > 1;
+  const [visible, setVisible] = useState("");
+  const reduced = prefersReducedMotion();
+  useEffect(() => {
+    if (reduced || list.length === 0) return;
+    let wordIndex = 0;
+    let charCount = 0;
+    let phase = "typing";
+    let timer = 0;
+    const stop = getTicker().add(
+      ({ delta }) => {
+        timer += delta;
+        const current = list[wordIndex] ?? "";
+        switch (phase) {
+          case "typing": {
+            const target = Math.min(current.length, Math.floor(timer * speed));
+            if (target !== charCount) {
+              charCount = target;
+              setVisible(current.slice(0, charCount));
+            }
+            if (charCount >= current.length) {
+              phase = "holding";
+              timer = 0;
+            }
+            break;
+          }
+          case "holding": {
+            if (timer >= pause) {
+              if (!shouldLoop && list.length === 1) {
+                stop();
+                return;
+              }
+              phase = "deleting";
+              timer = 0;
+            }
+            break;
+          }
+          case "deleting": {
+            const target = Math.max(0, current.length - Math.floor(timer * deleteSpeed));
+            if (target !== charCount) {
+              charCount = target;
+              setVisible(current.slice(0, charCount));
+            }
+            if (charCount === 0) {
+              wordIndex = (wordIndex + 1) % list.length;
+              if (wordIndex === 0 && !shouldLoop) {
+                stop();
+                return;
+              }
+              phase = "typing";
+              timer = 0;
+            }
+            break;
+          }
+        }
+      },
+      { phase: "compute", name: "Typewriter" }
+    );
+    return stop;
+  }, [list, speed, deleteSpeed, pause, shouldLoop, reduced]);
+  return /* @__PURE__ */ jsxs("span", { className, ...rest, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          position: "absolute",
+          width: 1,
+          height: 1,
+          overflow: "hidden",
+          clipPath: "inset(50%)",
+          whiteSpace: "nowrap"
+        },
+        children: list.join(", ")
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+      reduced ? list[0] : visible,
+      caret && !reduced ? /* @__PURE__ */ jsx("span", { className: "ansh-caret" }) : null
+    ] })
+  ] });
+}
+function ShinyText({ duration, className, style, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: ["ansh-shiny", className].filter(Boolean).join(" "),
+      style: {
+        ...duration !== void 0 ? { ["--ansh-shiny-duration"]: `${duration}s` } : {},
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function NumberTicker({
+  value,
+  duration = 1.4,
+  decimals = 0,
+  prefix = "",
+  suffix = "",
+  whenInView = true,
+  className,
+  ...rest
+}) {
+  const [ref, inView] = useInView({ threshold: 0.3, once: true });
+  const displayRef = useRef(null);
+  const formatter = useRef(
+    new Intl.NumberFormat(void 0, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    })
+  );
+  useEffect(() => {
+    formatter.current = new Intl.NumberFormat(void 0, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    });
+  }, [decimals]);
+  useEffect(() => {
+    const node = displayRef.current;
+    if (!node) return;
+    const write = (n) => {
+      node.textContent = `${prefix}${formatter.current.format(n)}${suffix}`;
+    };
+    if (prefersReducedMotion()) {
+      write(value);
+      return;
+    }
+    if (whenInView && !inView) {
+      write(0);
+      return;
+    }
+    let elapsed = 0;
+    const stop = getTicker().add(
+      ({ delta }) => {
+        elapsed += delta;
+        const t = duration <= 0 ? 1 : Math.min(1, elapsed / duration);
+        const eased = t >= 1 ? 1 : 1 - Math.pow(2, -10 * t);
+        write(value * eased);
+        if (t >= 1) {
+          write(value);
+          stop();
+        }
+      },
+      { phase: "write", name: "NumberTicker" }
+    );
+    return stop;
+  }, [value, duration, prefix, suffix, whenInView, inView]);
+  return /* @__PURE__ */ jsxs("span", { ref, className, ...rest, children: [
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        style: {
+          position: "absolute",
+          width: 1,
+          height: 1,
+          overflow: "hidden",
+          clipPath: "inset(50%)"
+        },
+        children: [
+          prefix,
+          value,
+          suffix
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { ref: displayRef, "aria-hidden": "true" })
+  ] });
+}
+function Spinner({
+  size = 24,
+  thickness = 3,
+  label = "Loading",
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: ["ansh-spinner", className].filter(Boolean).join(" "),
+      style: {
+        ["--ansh-size"]: `${size}px`,
+        ["--ansh-thickness"]: `${thickness}px`,
+        ...style
+      },
+      ...label ? { role: "status", "aria-label": label } : { "aria-hidden": "true" },
+      ...rest
+    }
+  );
+}
+function LoadingDots({ size = 8, label = "Loading", className, style, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: ["ansh-dots", className].filter(Boolean).join(" "),
+      style: { ["--ansh-size"]: `${size}px`, ...style },
+      ...label ? { role: "status", "aria-label": label } : { "aria-hidden": "true" },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", {}),
+        /* @__PURE__ */ jsx("span", {}),
+        /* @__PURE__ */ jsx("span", {})
+      ]
+    }
+  );
+}
+function Skeleton({
+  width = "100%",
+  height = "1em",
+  circle = false,
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["ansh-skeleton", className].filter(Boolean).join(" "),
+      "aria-hidden": "true",
+      style: {
+        width,
+        height,
+        ...circle ? { borderRadius: "50%", aspectRatio: "1" } : {},
+        ...style
+      },
+      ...rest
+    }
+  );
+}
+var ToastContext = createContext(null);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const [closing, setClosing] = useState(/* @__PURE__ */ new Set());
+  const timers = useRef(/* @__PURE__ */ new Map());
+  const dismiss = useCallback((id) => {
+    setClosing((prev) => new Set(prev).add(id));
+    const timer = setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+      setClosing((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    }, 200);
+    timers.current.set(`${id}-exit`, timer);
+  }, []);
+  const toast = useCallback(
+    (input) => {
+      const id = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+      const next = { id, duration: 4500, variant: "info", ...input };
+      setToasts((prev) => [...prev, next]);
+      if (next.duration && next.duration > 0) {
+        timers.current.set(
+          id,
+          setTimeout(() => dismiss(id), next.duration)
+        );
+      }
+      return id;
+    },
+    [dismiss]
+  );
+  useEffect(() => {
+    const map = timers.current;
+    return () => {
+      for (const timer of map.values()) clearTimeout(timer);
+      map.clear();
+    };
+  }, []);
+  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ansh-toaster",
+        role: "region",
+        "aria-live": "polite",
+        "aria-label": "Notifications",
+        children: toasts.map((t) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `ansh-toast ansh-toast--${t.variant ?? "info"}`,
+            "data-state": closing.has(t.id) ? "closing" : "open",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "ansh-toast__dot", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 2 }, children: [
+                t.title ? /* @__PURE__ */ jsx("div", { className: "ansh-toast__title", children: t.title }) : null,
+                /* @__PURE__ */ jsx("div", { className: "ansh-toast__body", children: t.message })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => dismiss(t.id),
+                  "aria-label": "Dismiss notification",
+                  className: "ansh-focusable",
+                  style: {
+                    marginLeft: "auto",
+                    background: "none",
+                    border: 0,
+                    color: "inherit",
+                    cursor: "pointer",
+                    opacity: 0.6,
+                    padding: 4
+                  },
+                  children: "\u2715"
+                }
+              )
+            ]
+          },
+          t.id
+        ))
+      }
+    )
+  ] });
+}
+function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("[ansh] useToast() must be used inside a <ToastProvider>.");
+  }
+  return context;
+}
+function PricingTable({ plans, className }) {
+  return /* @__PURE__ */ jsx("div", { className: ["ansh-pricing", className].filter(Boolean).join(" "), children: plans.map((plan) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "ansh-card",
+        "ansh-plan",
+        plan.featured && "ansh-plan--featured",
+        plan.featured && "ansh-card--glow"
+      ].filter(Boolean).join(" "),
+      children: [
+        plan.featured ? /* @__PURE__ */ jsx("span", { className: "ansh-plan__badge", children: plan.badge ?? "Most popular" }) : null,
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "ansh-plan__name", children: plan.name }),
+          /* @__PURE__ */ jsxs("div", { className: "ansh-plan__price", children: [
+            /* @__PURE__ */ jsx("span", { children: plan.price }),
+            plan.period ? /* @__PURE__ */ jsx("span", { className: "ansh-plan__period", children: plan.period }) : null
+          ] })
+        ] }),
+        plan.description ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: 0,
+              fontSize: "var(--ansh-text-sm)",
+              color: "var(--ansh-content-secondary)"
+            },
+            children: plan.description
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("ul", { className: "ansh-plan__features", children: plan.features.map((feature) => /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: "var(--ansh-state-success)" }, children: "\u2713" }),
+          /* @__PURE__ */ jsx("span", { children: feature })
+        ] }, feature)) }),
+        plan.cta ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            as: plan.cta.href ? "a" : "button",
+            ...plan.cta.href ? { href: plan.cta.href } : {},
+            onClick: plan.cta.onClick,
+            variant: plan.cta.variant ?? (plan.featured ? "shimmer" : "ghost"),
+            style: { marginTop: "auto", width: "100%" },
+            children: plan.cta.label
+          }
+        ) : null
+      ]
+    },
+    plan.name
+  )) });
+}
+function FAQAccordion({
+  items,
+  multiple = false,
+  defaultOpen,
+  className
+}) {
+  const [open, setOpen] = useState(
+    () => new Set(defaultOpen === void 0 ? [] : [defaultOpen])
+  );
+  const baseId = useId();
+  const toggle = (index) => {
+    setOpen((prev) => {
+      const next = new Set(multiple ? prev : []);
+      if (prev.has(index)) next.delete(index);
+      else next.add(index);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsx("div", { className: ["ansh-accordion", className].filter(Boolean).join(" "), children: items.map((item, index) => {
+    const isOpen = open.has(index);
+    const triggerId = `${baseId}-trigger-${index}`;
+    const panelId = `${baseId}-panel-${index}`;
+    return /* @__PURE__ */ jsxs("div", { className: "ansh-accordion__item", children: [
+      /* @__PURE__ */ jsx("h3", { style: { margin: 0 }, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          id: triggerId,
+          type: "button",
+          className: "ansh-accordion__trigger ansh-focusable",
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: () => toggle(index),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: item.question }),
+            /* @__PURE__ */ jsx("span", { className: "ansh-accordion__icon", "aria-hidden": "true", children: "+" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: panelId,
+          role: "region",
+          "aria-labelledby": triggerId,
+          className: "ansh-accordion__panel",
+          "data-open": isOpen,
+          ...isOpen ? {} : { inert: true },
+          children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "ansh-accordion__body", children: item.answer }) })
+        }
+      )
+    ] }, item.question);
+  }) });
+}
+var ICONS = {
+  info: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      width: "18",
+      height: "18",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 9v4.5", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "6.5", r: "0.9", fill: "currentColor", stroke: "none" })
+      ]
+    }
+  ),
+  success: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      width: "18",
+      height: "18",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M6.5 10.3l2.4 2.4 4.6-5.2", strokeLinecap: "round", strokeLinejoin: "round" })
+      ]
+    }
+  ),
+  warning: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      width: "18",
+      height: "18",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8.6 3.2L1.9 14.6a1.6 1.6 0 001.4 2.4h13.4a1.6 1.6 0 001.4-2.4L11.4 3.2a1.6 1.6 0 00-2.8 0z",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "M10 7.5v3.5", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "13.6", r: "0.9", fill: "currentColor", stroke: "none" })
+      ]
+    }
+  ),
+  danger: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      width: "18",
+      height: "18",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M7.5 7.5l5 5M12.5 7.5l-5 5", strokeLinecap: "round" })
+      ]
+    }
+  ),
+  neutral: null
+};
+function Alert({
+  tone = "info",
+  title,
+  children,
+  icon,
+  dismissible = false,
+  onDismiss,
+  actions,
+  variant = "soft",
+  className
+}) {
+  const [visible, setVisible] = useState(true);
+  if (!visible) return null;
+  const urgent = tone === "danger" || tone === "warning";
+  const resolvedIcon = icon === void 0 ? ICONS[tone] : icon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("ansh-alert", `ansh-alert--${tone}`, `ansh-alert--${variant}`, className),
+      role: urgent ? "alert" : "status",
+      "aria-live": urgent ? "assertive" : "polite",
+      children: [
+        resolvedIcon ? /* @__PURE__ */ jsx("span", { className: "ansh-alert__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "ansh-alert__body", children: [
+          title ? /* @__PURE__ */ jsx("p", { className: "ansh-alert__title", children: title }) : null,
+          children ? /* @__PURE__ */ jsx("div", { className: "ansh-alert__message", children }) : null,
+          actions ? /* @__PURE__ */ jsx("div", { className: "ansh-alert__actions", children: actions }) : null
+        ] }),
+        dismissible ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ansh-alert__close ansh-focusable",
+            "aria-label": "Dismiss message",
+            onClick: () => {
+              setVisible(false);
+              onDismiss?.();
+            },
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M4 4l8 8M12 4l-8 8",
+                stroke: "currentColor",
+                strokeWidth: "1.75",
+                strokeLinecap: "round",
+                fill: "none"
+              }
+            ) })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function Banner({ sticky = false, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      variant: "solid",
+      className: cx("ansh-banner", sticky && "ansh-banner--sticky", className),
+      ...rest
+    }
+  );
+}
+function Callout({ label, tone = "info", icon, className, children }) {
+  return /* @__PURE__ */ jsxs("aside", { className: cx("ansh-callout", `ansh-callout--${tone}`, className), children: [
+    /* @__PURE__ */ jsx("span", { className: "ansh-callout__icon", "aria-hidden": "true", children: icon ?? ICONS[tone] }),
+    /* @__PURE__ */ jsxs("div", { className: "ansh-callout__body", children: [
+      label ? /* @__PURE__ */ jsx("p", { className: "ansh-callout__label", children: label }) : null,
+      /* @__PURE__ */ jsx("div", { className: "ansh-callout__content", children })
+    ] })
+  ] });
+}
+var VERSION = "0.1.0";
+
+export { Alert, AnimatedGradient, AuroraBackground, Banner, BentoGrid, BentoItem, Button, Callout, Constellation, Dock, FAQAccordion, Fireflies, GlowCard, IconButton, LiquidBlob, LoadingDots, MeshGradient, MeteorShower, NoiseLayer, NumberTicker, ParticleField, PricingTable, Rain, ShinyText, Skeleton, Snow, Spinner, Spotlight, SpotlightCard, TiltCard3D, ToastProvider, Typewriter, VERSION, Waves, createEffectComponent, useToast };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map