@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/react/index.js

@@ -0,0 +1,969 @@
+"use client";
+import {
+  ANIMATIONS,
+  animate,
+  confetti,
+  leave
+} from "../chunk-2BQGFOA7.js";
+import {
+  captureLayout,
+  createCardDock,
+  createCascade,
+  createContrast,
+  createCounter,
+  createCurvedCarousel,
+  createDepthGrid,
+  createDetails,
+  createDockPill,
+  createDragRuler,
+  createFillText,
+  createFitText,
+  createFlow,
+  createFrameZoom,
+  createInfiniteReel,
+  createLetters,
+  createMarquee,
+  createMaskText,
+  createParallax,
+  createPile,
+  createPop,
+  createRadialMenu,
+  createReflow,
+  createRepelBento,
+  createReveal,
+  createRotator,
+  createSlotText,
+  createSnapStrip,
+  createSortable,
+  createSpringCards,
+  createStretchFooter,
+  createTabs,
+  createTextRoll,
+  createTicketMenu,
+  createWords,
+  moveItem,
+  pileLayers,
+  pileStyle,
+  reflowLayout
+} from "../chunk-FS2HJVVY.js";
+import {
+  ICON_PATHS,
+  NAV_STYLES,
+  PENDING_ID,
+  capturePending,
+  clearToasts,
+  createChat,
+  createChatBackground,
+  createCursor,
+  createIsland,
+  createSteps,
+  createThemePicker,
+  createToaster,
+  dismissToast,
+  morphPendingToReply,
+  revealShell,
+  toast
+} from "../chunk-Q4LVFNLN.js";
+import {
+  createDialog,
+  createMenu,
+  tweenNumber
+} from "../chunk-34XYOXHG.js";
+import {
+  DEFAULT_THEME,
+  MK_THEME_HEAD_SCRIPT,
+  THEME_EVENT,
+  initTheme,
+  setMode,
+  setTheme,
+  themeHeadScript
+} from "../chunk-J27KH2A2.js";
+import {
+  createLiquidBlend,
+  createMatcap,
+  createParticleHero,
+  createShaderBlur,
+  createShaderGrain
+} from "../chunk-6OJAP6ZL.js";
+import "../chunk-KLY5BRRI.js";
+import {
+  MK_HEAD_SCRIPT,
+  TIMING
+} from "../chunk-RFDIZYFX.js";
+import "../chunk-TGV27ZWM.js";
+
+// src/react/use-recipe.ts
+import { useEffect, useLayoutEffect, useRef } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function useRecipe(ref, factory, options, deps = []) {
+  const instance = useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    const created = factory(ref.current, options);
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, deps);
+  return instance;
+}
+function useLatest(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+// src/react/use-spring-cards.ts
+var useSpringCards = (ref, options, deps) => useRecipe(ref, createSpringCards, options, deps);
+
+// src/react/use-curved-carousel.ts
+function useCurvedCarousel(ref, options = {}, deps) {
+  const onSelect = useLatest(options.onSelect);
+  return useRecipe(ref, createCurvedCarousel, { ...options, onSelect: (index, slide) => onSelect.current?.(index, slide) }, deps);
+}
+
+// src/react/use-pile.ts
+var usePile = (ref, options, deps) => useRecipe(ref, createPile, options, deps);
+
+// src/react/use-words.ts
+var useWords = (ref, options, deps) => useRecipe(ref, createWords, options, deps);
+
+// src/react/use-flow.ts
+var useFlow = (ref, options, deps) => useRecipe(ref, createFlow, options, deps);
+
+// src/react/use-pop.ts
+var usePop = (ref, options, deps) => useRecipe(ref, createPop, options, deps);
+
+// src/react/use-fit-text.ts
+var useFitText = (ref, options, deps) => useRecipe(ref, createFitText, options, deps);
+
+// src/react/use-stretch-footer.ts
+function useStretchFooter(ref, options = {}, deps) {
+  const { phantomRef, titleRef, ...rest } = options;
+  return useRecipe(
+    ref,
+    (el) => createStretchFooter(el, { ...rest, phantom: phantomRef?.current ?? void 0, title: titleRef?.current ?? void 0 }),
+    void 0,
+    deps
+  );
+}
+
+// src/react/use-radial-menu.ts
+function useRadialMenu(ref, options = {}, deps) {
+  const onToggle = useLatest(options.onToggle);
+  return useRecipe(ref, createRadialMenu, { ...options, onToggle: (open) => onToggle.current?.(open) }, deps);
+}
+
+// src/react/use-tabs.ts
+function useTabs(ref, options = {}, deps) {
+  const onSelect = useLatest(options.onSelect);
+  return useRecipe(ref, createTabs, { ...options, onSelect: (index, tab) => onSelect.current?.(index, tab) }, deps);
+}
+
+// src/react/use-counter.ts
+var useCounter = (ref, options, deps) => useRecipe(ref, createCounter, options, deps);
+
+// src/react/use-details.ts
+var useDetails = (ref, deps) => useRecipe(ref, createDetails, void 0, deps);
+
+// src/react/use-reveal.ts
+var useReveal = (ref, options, deps) => useRecipe(ref, createReveal, options, deps);
+
+// src/react/use-reflow.ts
+var useReflow = (ref, options, deps) => useRecipe(ref, createReflow, options, deps);
+
+// src/react/use-slot-text.ts
+function useSlotText(ref, text, options = {}) {
+  const instance = useRecipe(ref, createSlotText, { ...options, text });
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.set(text);
+  }, [text]);
+  return instance;
+}
+
+// src/react/use-sortable.ts
+function useSortable(ref, options = {}, deps) {
+  const onReorder = useLatest(options.onReorder);
+  return useRecipe(ref, createSortable, { mutate: false, ...options, onReorder: (detail) => onReorder.current?.(detail) }, deps);
+}
+
+// src/react/use-mask-text.ts
+var useMaskText = (ref, options, deps) => useRecipe(ref, createMaskText, options, deps);
+
+// src/react/use-cascade.ts
+var useCascade = (ref, options, deps) => useRecipe(ref, createCascade, options, deps);
+
+// src/react/use-text-roll.ts
+var useTextRoll = (ref, options, deps) => useRecipe(ref, createTextRoll, options, deps);
+
+// src/react/use-letters.ts
+var useLetters = (ref, options, deps) => useRecipe(ref, createLetters, options, deps);
+
+// src/react/use-parallax.ts
+var useParallax = (ref, options, deps) => useRecipe(ref, createParallax, options, deps);
+
+// src/react/use-depth-grid.ts
+var useDepthGrid = (ref, options, deps) => useRecipe(ref, createDepthGrid, options, deps);
+
+// src/react/use-frame-zoom.ts
+var useFrameZoom = (ref, options, deps) => useRecipe(ref, createFrameZoom, options, deps);
+
+// src/react/use-contrast.ts
+var useContrast = (ref, options, deps) => useRecipe(ref, createContrast, options, deps);
+
+// src/react/use-marquee.ts
+var useMarquee = (ref, options, deps) => useRecipe(ref, createMarquee, options, deps);
+
+// src/react/use-card-dock.ts
+var useCardDock = (ref, options, deps) => useRecipe(ref, createCardDock, options, deps);
+
+// src/react/use-snap-strip.ts
+var useSnapStrip = (ref, options, deps) => useRecipe(ref, createSnapStrip, options, deps);
+
+// src/react/use-fill-text.ts
+var useFillText = (ref, options, deps) => useRecipe(ref, createFillText, options, deps);
+
+// src/react/use-ticket-menu.ts
+function useTicketMenu(ref, options = {}, deps) {
+  const latest = useLatest(options);
+  return useRecipe(ref, createTicketMenu, {
+    ...options,
+    onSelect: (value, item) => latest.current.onSelect?.(value, item),
+    onOpen: () => latest.current.onOpen?.(),
+    onClose: () => latest.current.onClose?.()
+  }, deps);
+}
+
+// src/react/use-infinite-reel.ts
+var useInfiniteReel = (ref, options, deps) => useRecipe(ref, createInfiniteReel, options, deps);
+
+// src/react/use-repel-bento.ts
+var useRepelBento = (ref, options, deps) => useRecipe(ref, createRepelBento, options, deps);
+
+// src/react/use-rotator.ts
+function useRotator(ref, options = {}, deps) {
+  const callback = useLatest(options.onChange);
+  return useRecipe(ref, createRotator, { ...options, onChange: (index) => callback.current?.(index) }, deps);
+}
+
+// src/react/use-drag-ruler.ts
+function useDragRuler(ref, options = {}, deps) {
+  const callback = useLatest(options.onChange);
+  return useRecipe(ref, createDragRuler, { ...options, onChange: (value) => callback.current?.(value) }, deps);
+}
+
+// src/react/use-dock-pill.ts
+function useDockPill(ref, options = {}, deps) {
+  const callback = useLatest(options.onSelect);
+  return useRecipe(ref, createDockPill, { ...options, onSelect: (index, item) => callback.current?.(index, item) }, deps);
+}
+
+// src/react/use-liquid-blend.ts
+var useLiquidBlend = (ref, options, deps) => useRecipe(ref, createLiquidBlend, options, deps);
+
+// src/react/use-matcap.ts
+var useMatcap = (ref, options, deps) => useRecipe(ref, createMatcap, options, deps);
+
+// src/react/use-shader-grain.ts
+var useShaderGrain = (ref, options, deps) => useRecipe(ref, createShaderGrain, options, deps);
+
+// src/react/use-shader-blur.ts
+var useShaderBlur = (ref, options, deps) => useRecipe(ref, createShaderBlur, options, deps);
+
+// src/react/use-particle-hero.ts
+var useParticleHero = (ref, options, deps) => useRecipe(ref, createParticleHero, options, deps);
+
+// src/react/theme-provider.tsx
+import { createContext, useContext, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(null);
+function ThemeProvider({ children, defaultTheme, mode, storageKey }) {
+  const [state, setState] = useState(() => ({ id: defaultTheme ?? DEFAULT_THEME, mode: mode ?? "system", resolved: "light" }));
+  useIsomorphicLayoutEffect(() => {
+    const onChange = (event) => setState(event.detail);
+    document.addEventListener(THEME_EVENT, onChange);
+    setState(initTheme({ default: defaultTheme, mode, storageKey }));
+    return () => document.removeEventListener(THEME_EVENT, onChange);
+  }, [defaultTheme, mode, storageKey]);
+  const value = useMemo(() => ({ ...state, setTheme, setMode }), [state]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const value = useContext(ThemeContext);
+  if (!value) throw new Error("useTheme() needs a <ThemeProvider> above it");
+  return value;
+}
+
+// src/components/theme-picker/react.tsx
+import { useRef as useRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ThemePicker({ className, style, unstyled, themes, showHidden, labels, onChange }) {
+  const ref = useRef2(null);
+  const change = useLatest(onChange);
+  const themeKey = themes?.join(",");
+  useIsomorphicLayoutEffect(() => {
+    const picker = createThemePicker(ref.current, {
+      themes: themeKey ? themeKey.split(",") : void 0,
+      showHidden,
+      labels,
+      onChange: (id) => change.current?.(id)
+    });
+    return () => picker.destroy();
+  }, [themeKey, showHidden, labels?.group]);
+  const classes = [unstyled ? null : "mk-theme-picker", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2("div", { ref, className: classes || void 0, style });
+}
+
+// src/react/slot-text.tsx
+import { useRef as useRef3, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var escapeHtml = (text) => text.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+function SlotText({ text, className, direction, duration, stagger, exitOffset, colorFade, maxTilt }) {
+  const ref = useRef3(null);
+  const instance = useRef3(null);
+  const [initial] = useState2(text);
+  const [html] = useState2(() => ({ __html: escapeHtml(text) }));
+  useIsomorphicLayoutEffect(() => {
+    const created = createSlotText(ref.current, { direction, duration, stagger, exitOffset, colorFade, maxTilt, text: initial, accessibleCopy: false });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.set(text);
+  }, [text]);
+  return /* @__PURE__ */ jsxs("span", { className, children: [
+    /* @__PURE__ */ jsx3("span", { className: "mk-sr-only", children: text }),
+    /* @__PURE__ */ jsx3("span", { ref, "aria-hidden": "true", dangerouslySetInnerHTML: html })
+  ] });
+}
+
+// src/react/animated-number.tsx
+import { useEffect as useEffect2, useRef as useRef4, useState as useState3 } from "react";
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+var whole = (shown) => String(Math.round(shown));
+function AnimatedNumber({ value, format = whole, duration }) {
+  const [shown, setShown] = useState3(value);
+  const current = useRef4(value);
+  useEffect2(() => {
+    const tween = tweenNumber(current.current, value, (next) => {
+      current.current = next;
+      setShown(next);
+    }, { duration });
+    return () => {
+      tween?.kill();
+    };
+  }, [value, duration]);
+  return /* @__PURE__ */ jsx4(Fragment, { children: format(shown) });
+}
+
+// src/react/flip-group.tsx
+import { Component } from "react";
+var FlipGroup = class extends Component {
+  flip = null;
+  getSnapshotBeforeUpdate(previous) {
+    const node = this.props.root.current;
+    if (previous.signature === this.props.signature || !node) return null;
+    return captureLayout(node, this.props.selector ?? "[data-flip-id]");
+  }
+  componentDidUpdate(_previous, _state, before) {
+    const node = this.props.root.current;
+    if (!before || !node) return;
+    this.flip?.kill();
+    this.flip = reflowLayout(node, this.props.selector ?? "[data-flip-id]", before);
+  }
+  componentWillUnmount() {
+    this.flip?.kill();
+  }
+  render() {
+    return this.props.children;
+  }
+};
+
+// src/components/dialog/react.tsx
+import {
+  createContext as createContext2,
+  useCallback,
+  useContext as useContext2,
+  useMemo as useMemo2,
+  useRef as useRef5,
+  useState as useState4
+} from "react";
+
+// src/components/icon.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function MkIcon({ name, size = 20 }) {
+  return /* @__PURE__ */ jsx5("svg", { "aria-hidden": "true", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: ICON_PATHS[name] }) });
+}
+
+// src/components/dialog/react.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function useSurfaceRoot({ open: controlled, defaultOpen = false, onOpenChange, children: _children, ...options }) {
+  const [uncontrolled, setUncontrolled] = useState4(defaultOpen);
+  const open = controlled ?? uncontrolled;
+  const current = useLatest(open);
+  const change = useLatest(onOpenChange);
+  const isControlled = controlled !== void 0;
+  const setOpen = useCallback(
+    (next) => {
+      if (next === current.current) return;
+      current.current = next;
+      if (!isControlled) setUncontrolled(next);
+      change.current?.(next);
+    },
+    [isControlled, current, change]
+  );
+  const origin = useRef5(null);
+  const instance = useRef5(null);
+  const optionKey = JSON.stringify(options);
+  const stable = useMemo2(() => options, [optionKey]);
+  return useMemo2(() => ({ open, setOpen, origin, instance, options: stable }), [open, setOpen, stable]);
+}
+var DialogContext = createContext2(null);
+function useDialogContext(part) {
+  const value = useContext2(DialogContext);
+  if (!value) throw new Error(`<Dialog.${part}> must be inside <Dialog.Root>`);
+  return value;
+}
+function Root(props) {
+  const value = useSurfaceRoot(props);
+  return /* @__PURE__ */ jsx6(DialogContext.Provider, { value, children: props.children });
+}
+function Trigger({ onClick, children, ...props }) {
+  const context = useDialogContext("Trigger");
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": context.open,
+      ...props,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        context.origin.current = event.currentTarget;
+        context.setOpen(!context.open);
+      },
+      children
+    }
+  );
+}
+function useSurfaceEngine(context, create) {
+  const ref = useRef5(null);
+  const setOpen = useLatest(context.setOpen);
+  useIsomorphicLayoutEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+    const created = create(dialog, { ...context.options, triggers: false, onClose: () => setOpen.current(false) });
+    context.instance.current = created;
+    if (context.open) created.open(context.origin.current ?? void 0);
+    return () => {
+      created.destroy();
+      context.instance.current = null;
+    };
+  }, [context.options]);
+  useIsomorphicLayoutEffect(() => {
+    const instance = context.instance.current;
+    if (!instance) return;
+    if (context.open && !instance.isOpen) {
+      instance.open(context.origin.current ?? void 0);
+      context.origin.current = null;
+    } else if (!context.open && instance.isOpen) instance.close();
+  }, [context.open]);
+  return ref;
+}
+function Content({ size = "md", unstyled, className, children, ...props }) {
+  const context = useDialogContext("Content");
+  const ref = useSurfaceEngine(context, createDialog);
+  const classes = [unstyled ? null : "mk-dialog", !unstyled && size !== "md" ? `mk-dialog--${size}` : null, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx6("dialog", { ref, className: classes || void 0, ...props, children });
+}
+var partOf = (name) => function Part({ children, ...props }) {
+  const Tag = name === "header" ? "header" : name === "footer" ? "footer" : name === "title" ? "h2" : name === "description" ? "p" : "div";
+  return /* @__PURE__ */ jsx6(Tag, { "data-mk-part": name, ...props, children });
+};
+function Close({ children, label = "Cerrar", ...props }) {
+  return /* @__PURE__ */ jsx6("button", { type: "button", "data-mk-part": "close", "aria-label": children ? void 0 : label, ...props, children: children ?? /* @__PURE__ */ jsx6(MkIcon, { name: "close" }) });
+}
+function Handle({ children, ...props }) {
+  return /* @__PURE__ */ jsx6("button", { type: "button", "data-mk-part": "handle", ...props, children: children ?? /* @__PURE__ */ jsx6(MkIcon, { name: "expand", size: 18 }) });
+}
+var Dialog = {
+  Root,
+  Trigger,
+  Content,
+  Header: partOf("header"),
+  Title: partOf("title"),
+  Description: partOf("description"),
+  Actions: partOf("actions"),
+  Body: partOf("body"),
+  Footer: partOf("footer"),
+  Close,
+  Handle
+};
+function useDialog() {
+  const context = useDialogContext("useDialog");
+  return { open: context.open, setOpen: context.setOpen, instance: context.instance };
+}
+
+// src/components/menu/react.tsx
+import { createContext as createContext3, useContext as useContext3, useRef as useRef6 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var MenuContext = createContext3(null);
+function useMenuContext(part) {
+  const value = useContext3(MenuContext);
+  if (!value) throw new Error(`<Menu.${part}> must be inside <Menu.Root>`);
+  return value;
+}
+function Root2({ onSelect, closeOnSelect = true, ticket = false, children, ...props }) {
+  const surface = useSurfaceRoot(props);
+  const select = useLatest(onSelect);
+  return /* @__PURE__ */ jsx7(MenuContext.Provider, { value: { ...surface, onSelect: select, closeOnSelect, ticket }, children });
+}
+function Trigger2({ onClick, children, ...props }) {
+  const context = useMenuContext("Trigger");
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "button",
+      "aria-haspopup": "menu",
+      "aria-expanded": context.open,
+      ...props,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        context.origin.current = event.currentTarget;
+        context.setOpen(!context.open);
+      },
+      children
+    }
+  );
+}
+function Content2({ className, children, ...props }) {
+  const context = useMenuContext("Content");
+  const closeOnSelect = useRef6(context.closeOnSelect);
+  closeOnSelect.current = context.closeOnSelect;
+  const ref = useSurfaceEngine(
+    context,
+    (dialog, options) => createMenu(dialog, { ...options, ticket: context.ticket, closeOnSelect: closeOnSelect.current, onSelect: (value, item) => context.onSelect.current?.(value, item) })
+  );
+  return /* @__PURE__ */ jsx7("dialog", { ref, className: ["mk-dialog mk-menu", className].filter(Boolean).join(" "), ...props, children });
+}
+function Item({ value, children, ...props }) {
+  return /* @__PURE__ */ jsx7("button", { type: "button", "data-mk-item": "", "data-mk-value": value, ...props, children });
+}
+function Separator() {
+  return /* @__PURE__ */ jsx7("hr", { "data-mk-separator": "" });
+}
+var Menu = { Root: Root2, Trigger: Trigger2, Content: Content2, Item, Separator };
+
+// src/components/toast/react.tsx
+import { useRef as useRef7 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Toaster({ labels }) {
+  const ref = useRef7(null);
+  const dismiss = labels?.dismiss;
+  useIsomorphicLayoutEffect(() => {
+    const toaster = createToaster(ref.current, { labels: { dismiss } });
+    return () => toaster.destroy();
+  }, [dismiss]);
+  return /* @__PURE__ */ jsx8("div", { ref, className: "mk-toaster" });
+}
+
+// src/components/chat-background/react.tsx
+import { useRef as useRef8 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function ChatBackground({ energy = 0, scale = 1, className, style }) {
+  const ref = useRef8(null);
+  const instance = useRef8(null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createChatBackground(ref.current, { energy, scale });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setEnergy(energy);
+  }, [energy]);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setScale(scale);
+  }, [scale]);
+  return /* @__PURE__ */ jsx9("div", { ref, className: ["mk-chat-background", className].filter(Boolean).join(" "), style });
+}
+
+// src/components/chat/react.tsx
+import {
+  Component as Component2,
+  createContext as createContext4,
+  useContext as useContext4,
+  useRef as useRef9
+} from "react";
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChatContext = createContext4(null);
+function Root3({ onSend, animateExisting, labels = {}, className, children, ...props }) {
+  const ref = useRef9(null);
+  const instance = useRef9(null);
+  const send = useLatest(onSend);
+  useIsomorphicLayoutEffect(() => {
+    const created = createChat(ref.current, { animateExisting, labels, onSend: (text) => send.current?.(text) });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, []);
+  return /* @__PURE__ */ jsx10(ChatContext.Provider, { value: { instance, labels }, children: /* @__PURE__ */ jsx10("div", { ref, className: ["mk-chat", className].filter(Boolean).join(" "), ...props, children }) });
+}
+var Messages = class extends Component2 {
+  static contextType = ChatContext;
+  state = { showPending: false };
+  list = null;
+  timer;
+  componentDidMount() {
+    if (this.props.pending) this.wait();
+  }
+  componentDidUpdate(previous, _state, snapshot) {
+    if (this.props.pending && !previous.pending) this.wait();
+    if (!this.props.pending && previous.pending) {
+      clearTimeout(this.timer);
+      if (this.state.showPending) this.setState({ showPending: false });
+    }
+    if (!snapshot || !this.list) return;
+    const answers = [...this.list.querySelectorAll('[data-mk-message][data-mk-role="assistant"]:not([data-mk-pending])')];
+    const reply = answers[answers.length - 1];
+    if (!reply) return;
+    this.context?.instance.current?.adopt(reply);
+    morphPendingToReply(snapshot, reply, this.list);
+  }
+  getSnapshotBeforeUpdate(previous) {
+    if (!previous.pending || this.props.pending || !this.state.showPending || !this.list) return null;
+    return capturePending(this.list.querySelector("[data-mk-pending]"));
+  }
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+  wait() {
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      if (this.props.pending) this.setState({ showPending: true });
+    }, TIMING.chat.pendingDelayMs);
+  }
+  render() {
+    const thinking = this.context?.labels.thinking ?? "Pensando...";
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: (node) => {
+          this.list = node;
+        },
+        "data-mk-part": "messages",
+        children: [
+          this.props.children,
+          this.props.pending && this.state.showPending ? /* @__PURE__ */ jsx10("div", { "data-mk-message": "", "data-mk-role": "assistant", "data-mk-pending": "", "data-flip-id": PENDING_ID, children: /* @__PURE__ */ jsxs2("span", { className: "mk-chat__thinking", children: [
+            /* @__PURE__ */ jsx10(MkIcon, { name: "sparkle", size: 18 }),
+            /* @__PURE__ */ jsx10("span", { children: thinking })
+          ] }) }) : null
+        ]
+      }
+    );
+  }
+};
+function Message({ role = "assistant", children, ...props }) {
+  return /* @__PURE__ */ jsx10("div", { "data-mk-message": "", "data-mk-role": role, ...props, children: /* @__PURE__ */ jsx10("div", { "data-mk-text": "", children }) });
+}
+function Composer({ actions, sendLabel = "Enviar", placeholder = "Escribe un mensaje...", ...props }) {
+  return /* @__PURE__ */ jsxs2("form", { "data-mk-part": "composer", children: [
+    /* @__PURE__ */ jsx10("textarea", { "data-mk-part": "input", rows: 1, placeholder, "aria-label": placeholder, ...props }),
+    /* @__PURE__ */ jsxs2("div", { "data-mk-part": "buttons", children: [
+      actions,
+      /* @__PURE__ */ jsx10("button", { type: "submit", "data-mk-part": "send", "aria-label": sendLabel, children: /* @__PURE__ */ jsx10(MkIcon, { name: "send", size: 22 }) })
+    ] })
+  ] });
+}
+function Confirm({ children, ...props }) {
+  const ref = useRef9(null);
+  const context = useContext4(ChatContext);
+  useIsomorphicLayoutEffect(() => {
+    if (ref.current) context?.instance.current?.confirm(ref.current);
+  }, []);
+  return /* @__PURE__ */ jsx10("div", { ref, "data-mk-part": "confirm", ...props, children });
+}
+var Chat = { Root: Root3, Messages, Message, Composer, Confirm };
+function useChat() {
+  const context = useContext4(ChatContext);
+  if (!context) throw new Error("useChat() needs a <Chat.Root> above it");
+  return context.instance;
+}
+
+// src/components/nav/react.tsx
+import { useRef as useRef10 } from "react";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+function Nav({
+  items,
+  active,
+  onSelect,
+  navStyle = "bonita",
+  accent = false,
+  reveal = false,
+  first,
+  actions,
+  className,
+  ...props
+}) {
+  const ref = useRef10(null);
+  useIsomorphicLayoutEffect(() => {
+    if (!reveal || !ref.current) return;
+    const handle = revealShell(ref.current);
+    return () => handle?.cancel();
+  }, []);
+  const classes = ["mk-nav", `mk-nav--${navStyle}`, accent && "mk-nav--accent", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs3("nav", { ref, "aria-label": "Principal", ...props, className: classes, children: [
+    first,
+    /* @__PURE__ */ jsx11("div", { className: "mk-nav__buttons", children: items.map((item) => {
+      const shared = {
+        className: "mk-nav__button",
+        "aria-current": item.value === active ? "page" : void 0,
+        "data-mk-value": item.value,
+        "data-mk-hide-mobile": item.hideOnMobile ? "" : void 0,
+        onClick: (event) => onSelect?.(item.value, event)
+      };
+      const content = /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        item.icon ? /* @__PURE__ */ jsx11("span", { className: "mk-nav__icon", "aria-hidden": "true", children: item.icon }) : null,
+        /* @__PURE__ */ jsx11("span", { className: "mk-nav__name", children: item.label })
+      ] });
+      return item.href ? /* @__PURE__ */ jsx11("a", { href: item.href, ...shared, children: content }, item.value) : /* @__PURE__ */ jsx11("button", { type: "button", ...shared, children: content }, item.value);
+    }) }),
+    actions ? /* @__PURE__ */ jsx11("div", { className: "mk-nav__actions", children: actions }) : null
+  ] });
+}
+
+// src/components/steps/react.tsx
+import {
+  Children,
+  createContext as createContext5,
+  isValidElement,
+  useContext as useContext5,
+  useRef as useRef11
+} from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var StepsContext = createContext5({ initial: 0 });
+var StepIndex = createContext5(-1);
+function Root4({ index = 0, onChange, busy = false, duration, className, children, ...props }) {
+  const ref = useRef11(null);
+  const instance = useRef11(null);
+  const initial = useRef11(index);
+  const change = useLatest(onChange);
+  useIsomorphicLayoutEffect(() => {
+    const created = createSteps(ref.current, { index: initial.current, duration, onChange: (i, previous) => change.current?.(i, previous) });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    void instance.current?.goTo(index);
+  }, [index]);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.busy(busy);
+  }, [busy]);
+  let count = 0;
+  const numbered = Children.map(
+    children,
+    (child) => isValidElement(child) && child.type === Step ? /* @__PURE__ */ jsx12(StepIndex.Provider, { value: count++, children: child }) : child
+  );
+  return /* @__PURE__ */ jsx12(StepsContext.Provider, { value: { initial: initial.current }, children: /* @__PURE__ */ jsx12("div", { ref, className: ["mk-steps", className].filter(Boolean).join(" "), ...props, children: numbered }) });
+}
+function Step({ children, ...props }) {
+  const { initial } = useContext5(StepsContext);
+  const index = useContext5(StepIndex);
+  return /* @__PURE__ */ jsx12("section", { "data-mk-step": "", hidden: index !== initial, ...props, children });
+}
+function Counter(props) {
+  const { initial } = useContext5(StepsContext);
+  return /* @__PURE__ */ jsx12("span", { "data-mk-counter": "", suppressHydrationWarning: true, ...props, children: initial + 1 });
+}
+var Steps = Object.assign(Root4, { Step, Counter });
+
+// src/components/cursor/react.tsx
+import { useRef as useRef12 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function Cursor({ variant = "chip", text, arrows, zone, className }) {
+  const ref = useRef12(null);
+  useIsomorphicLayoutEffect(() => {
+    const cursor = createCursor(ref.current, { variant, text, arrows, zone: zone ? document.querySelector(zone) : void 0 });
+    return () => cursor.destroy();
+  }, [variant, text, arrows, zone]);
+  return /* @__PURE__ */ jsx13("div", { ref, className });
+}
+
+// src/react/frost.tsx
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+function Frost({ position = "bottom", fixed = false, height, strength, className, style }) {
+  const vars = {};
+  if (height !== void 0) vars["--mk-frost-height"] = typeof height === "number" ? `${height}px` : height;
+  if (strength !== void 0) vars["--mk-frost-strength"] = String(strength);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: ["mk-frost", position === "top" && "mk-frost--top", fixed && "mk-frost--fixed", className].filter(Boolean).join(" "),
+      style: { ...style, ...vars },
+      children: [
+        /* @__PURE__ */ jsx14("i", {}),
+        /* @__PURE__ */ jsx14("i", {}),
+        /* @__PURE__ */ jsx14("i", {}),
+        /* @__PURE__ */ jsx14("i", {}),
+        /* @__PURE__ */ jsx14("i", {})
+      ]
+    }
+  );
+}
+
+// src/components/island/react.tsx
+import { useRef as useRef13 } from "react";
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+function IslandDots() {
+  return /* @__PURE__ */ jsx15("span", { className: "mk-island__dots", "aria-hidden": "true", children: Array.from({ length: 9 }, (_, i) => /* @__PURE__ */ jsx15("i", {}, i)) });
+}
+function Island({
+  brand,
+  cta,
+  panels,
+  contained = false,
+  entrance,
+  closeOnScroll,
+  closeOnNavigate,
+  focusOnOpen,
+  onChange,
+  instanceRef,
+  className,
+  ...props
+}) {
+  const ref = useRef13(null);
+  const change = useLatest(onChange);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createIsland(ref.current, {
+      entrance,
+      closeOnScroll,
+      closeOnNavigate,
+      focusOnOpen,
+      onChange: (active) => change.current?.(active)
+    });
+    if (instanceRef) instanceRef.current = instance;
+    return () => {
+      instance.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [panels.map((panel) => panel.name).join(), entrance, closeOnScroll, closeOnNavigate, focusOnOpen]);
+  const classes = ["mk-island", contained && "mk-island--contained", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs5("nav", { ref, "aria-label": "Principal", ...props, className: classes, children: [
+    /* @__PURE__ */ jsx15("button", { type: "button", className: "mk-island__backdrop", "data-mk-island-close": true, tabIndex: -1, "aria-label": "Cerrar" }),
+    /* @__PURE__ */ jsxs5("div", { className: "mk-island__shell", children: [
+      /* @__PURE__ */ jsx15("div", { className: "mk-island__glass", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs5("div", { className: "mk-island__header", children: [
+        brand ? /* @__PURE__ */ jsx15("span", { className: "mk-island__brand", children: brand }) : /* @__PURE__ */ jsx15("span", {}),
+        /* @__PURE__ */ jsxs5("div", { className: "mk-island__actions", children: [
+          cta ? /* @__PURE__ */ jsx15("a", { className: "mk-island__cta", href: cta.href, children: cta.label }) : null,
+          panels.map((panel, i) => /* @__PURE__ */ jsxs5("span", { style: { display: "contents" }, children: [
+            i > 0 ? /* @__PURE__ */ jsx15("span", { className: "mk-island__separator", "aria-hidden": "true" }) : null,
+            /* @__PURE__ */ jsx15(
+              "button",
+              {
+                type: "button",
+                className: panel.light ? "mk-island__button mk-island__button--light" : "mk-island__button",
+                "data-mk-island-toggle": panel.name,
+                "aria-label": panel.label,
+                children: panel.icon ?? /* @__PURE__ */ jsx15(IslandDots, {})
+              }
+            )
+          ] }, panel.name))
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx15("div", { className: "mk-island__content", children: /* @__PURE__ */ jsx15("div", { children: panels.map((panel) => /* @__PURE__ */ jsx15("section", { className: "mk-island__panel", "data-mk-island-panel": panel.name, "aria-label": panel.label, children: panel.content }, panel.name)) }) })
+    ] })
+  ] });
+}
+export {
+  ANIMATIONS,
+  AnimatedNumber,
+  Chat,
+  ChatBackground,
+  Cursor,
+  Dialog,
+  FlipGroup,
+  Frost,
+  Island,
+  IslandDots,
+  MK_HEAD_SCRIPT,
+  MK_THEME_HEAD_SCRIPT,
+  Menu,
+  MkIcon,
+  NAV_STYLES,
+  Nav,
+  SlotText,
+  Steps,
+  ThemePicker,
+  ThemeProvider,
+  Toaster,
+  animate,
+  clearToasts,
+  confetti,
+  dismissToast,
+  leave,
+  moveItem,
+  pileLayers,
+  pileStyle,
+  themeHeadScript,
+  toast,
+  useCardDock,
+  useCascade,
+  useChat,
+  useContrast,
+  useCounter,
+  useCurvedCarousel,
+  useDepthGrid,
+  useDetails,
+  useDialog,
+  useDockPill,
+  useDragRuler,
+  useFillText,
+  useFitText,
+  useFlow,
+  useFrameZoom,
+  useInfiniteReel,
+  useIsomorphicLayoutEffect,
+  useLatest,
+  useLetters,
+  useLiquidBlend,
+  useMarquee,
+  useMaskText,
+  useMatcap,
+  useParallax,
+  useParticleHero,
+  usePile,
+  usePop,
+  useRadialMenu,
+  useRecipe,
+  useReflow,
+  useRepelBento,
+  useReveal,
+  useRotator,
+  useShaderBlur,
+  useShaderGrain,
+  useSlotText,
+  useSnapStrip,
+  useSortable,
+  useSpringCards,
+  useStretchFooter,
+  useTabs,
+  useTextRoll,
+  useTheme,
+  useTicketMenu,
+  useWords
+};
+//# sourceMappingURL=index.js.map