@yewdiel21/motion-kit 0.17.0 → 0.19.0

package/dist/react/index.js

@@ -3,7 +3,7 @@ import {
   ANIMATIONS,
   animate,
   leave
-} from "../chunk-QP4QJOEN.js";
+} from "../chunk-H4STLMCM.js";
 import {
   captureLayout,
   createActionButton,
@@ -55,9 +55,8 @@ import {
   pileLayers,
   pileStyle,
   reflowLayout
-} from "../chunk-BZLMCHUD.js";
+} from "../chunk-KDIJX6G4.js";
 import {
-  ICON_PATHS,
   NAV_STYLES,
   NAV_STYLE_ALIASES,
   PENDING_ID,
@@ -84,12 +83,15 @@ import {
   revealShell,
   toNavStyle,
   toast
-} from "../chunk-VJFPTLAK.js";
+} from "../chunk-PEDYJ2TV.js";
 import {
+  ICON_PATHS,
   confetti,
   createActivityFeed,
   createAddToCart,
   createAttachment,
+  createBadgeButton,
+  createBentoGrid,
   createBreadcrumb,
   createCalendar,
   createChart,
@@ -111,8 +113,10 @@ import {
   createDrilldownMenu,
   createEditableTable,
   createEmptyState,
+  createEqualizerSlider,
   createFileExplorer,
   createFilterBuilder,
+  createHandwritingText,
   createHoldConfirm,
   createHoverCard,
   createImagePreview,
@@ -120,21 +124,30 @@ import {
   createJsonViewer,
   createLikeButton,
   createLoadingButton,
+  createMagnetizeButton,
   createMenu,
+  createMorphingPageDots,
   createMultiSelect,
+  createNotFound,
   createNotificationBell,
+  createNotificationStack,
   createPagination,
+  createParticleButton,
   createPasswordStrength,
   createPopover,
   createProgress,
   createQuantity,
   createQuestionnaire,
+  createRadioGroup,
   createRangeCalendar,
   createRangeSlider,
+  createRatingScale,
   createResizablePanel,
   createRichTextEditor,
   createScratchCard,
+  createScrollArea,
   createScrollIsland,
+  createScrollPreviewDock,
   createSelect,
   createSignaturePad,
   createSkeleton,
@@ -142,10 +155,13 @@ import {
   createSplitView,
   createStarRating,
   createStatCard,
+  createStepper,
   createSteps,
+  createStickyHeader,
   createStudioDock,
   createSwipeActions,
   createTagInput,
+  createTemperatureSlider,
   createTimeField,
   createTimeline,
   createTooltip,
@@ -170,7 +186,7 @@ import {
   tokenLines,
   tokenize,
   tweenNumber
-} from "../chunk-7IQTMF7Y.js";
+} from "../chunk-Y4GIBTRG.js";
 import {
   DEFAULT_THEME,
   MK_THEME_HEAD_SCRIPT,
@@ -186,12 +202,12 @@ import {
   createParticleHero,
   createShaderBlur,
   createShaderGrain
-} from "../chunk-QFBOHPWZ.js";
+} from "../chunk-CQP66AZK.js";
 import "../chunk-34EZ7DF4.js";
 import {
   MK_HEAD_SCRIPT,
   TIMING
-} from "../chunk-DOOMULVV.js";
+} from "../chunk-OLT3CWDJ.js";
 import "../chunk-TGV27ZWM.js";
 
 // src/react/use-recipe.ts
@@ -3710,12 +3726,697 @@ function WheelPicker({ items, value, defaultValue, name, label, disabled, visibl
   delete domProps.dangerouslySetInnerHTML;
   return /* @__PURE__ */ jsx89("div", { ...domProps, ref, className: ["mk-wheel-picker", className].filter(Boolean).join(" ") });
 }
+
+// src/components/stepper/react.tsx
+import { useRef as useRef84 } from "react";
+import { jsx as jsx90 } from "react/jsx-runtime";
+function Stepper({ value, defaultValue, items, label, name, variant, linear, disabled, onChange, instanceRef, className, children: _children, dangerouslySetInnerHTML: _html, ...props }) {
+  const root = useRef84(null);
+  const engine = useRef84(null);
+  const latestValue = useLatest(value);
+  const change = useLatest(onChange);
+  const baseline = useRef84(value !== void 0 ? value : defaultValue);
+  const current = useRef84(baseline.current);
+  const reconcile = () => queueMicrotask(() => {
+    if (latestValue.current !== void 0) engine.current?.setValue(latestValue.current, false);
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = createStepper(root.current, {
+      items,
+      label,
+      name,
+      variant,
+      linear,
+      disabled,
+      value: latestValue.current !== void 0 ? latestValue.current : current.current,
+      defaultValue: baseline.current,
+      onChange: (next) => {
+        change.current?.(next);
+        reconcile();
+      }
+    });
+    engine.current = created;
+    const form = root.current?.closest("form");
+    const pending = /* @__PURE__ */ new Set();
+    const reset = (event) => {
+      const timer = setTimeout(() => {
+        pending.delete(timer);
+        if (!event.defaultPrevented && latestValue.current !== void 0) created.setValue(latestValue.current, false);
+      }, 0);
+      pending.add(timer);
+    };
+    form?.addEventListener("reset", reset);
+    return () => {
+      form?.removeEventListener("reset", reset);
+      pending.forEach((timer) => clearTimeout(timer));
+      current.current = created.value;
+      created.destroy();
+      engine.current = null;
+    };
+  }, [items, label, name, variant, linear, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0) engine.current?.setValue(value, false);
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!instanceRef) return;
+    instanceRef.current = engine.current;
+    return () => {
+      instanceRef.current = null;
+    };
+  }, [instanceRef, items, label, name, variant, linear, disabled]);
+  return /* @__PURE__ */ jsx90("div", { ...props, ref: root, className: ["mk-stepper", className].filter(Boolean).join(" ") });
+}
+
+// src/components/radio-group/react.tsx
+import { useRef as useRef85 } from "react";
+import { jsx as jsx91 } from "react/jsx-runtime";
+function RadioGroup({ value, defaultValue, items, name, label, disabled, required, error, variant, onChange, instanceRef, className, children: _children, dangerouslySetInnerHTML: _html, ...props }) {
+  const root = useRef85(null);
+  const engine = useRef85(null);
+  const latestValue = useLatest(value);
+  const change = useLatest(onChange);
+  const baseline = useRef85(value !== void 0 ? value : defaultValue);
+  const current = useRef85(baseline.current);
+  const reconcile = () => queueMicrotask(() => {
+    if (latestValue.current !== void 0) engine.current?.setValue(latestValue.current, false);
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = createRadioGroup(root.current, {
+      items,
+      name,
+      label,
+      disabled,
+      required,
+      error,
+      variant,
+      value: latestValue.current !== void 0 ? latestValue.current : current.current,
+      defaultValue: baseline.current,
+      onChange: (next) => {
+        change.current?.(next);
+        reconcile();
+      }
+    });
+    engine.current = created;
+    const form = root.current?.closest("form");
+    const pending = /* @__PURE__ */ new Set();
+    const reset = (event) => {
+      const timer = setTimeout(() => {
+        pending.delete(timer);
+        if (!event.defaultPrevented && latestValue.current !== void 0) created.setValue(latestValue.current, false);
+      }, 0);
+      pending.add(timer);
+    };
+    form?.addEventListener("reset", reset);
+    return () => {
+      form?.removeEventListener("reset", reset);
+      pending.forEach((timer) => clearTimeout(timer));
+      current.current = created.value;
+      created.destroy();
+      engine.current = null;
+    };
+  }, [items, name, label, disabled, required, error, variant]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0) engine.current?.setValue(value, false);
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!instanceRef) return;
+    instanceRef.current = engine.current;
+    return () => {
+      instanceRef.current = null;
+    };
+  }, [instanceRef, items, name, label, disabled, required, error, variant]);
+  return /* @__PURE__ */ jsx91("div", { ...props, ref: root, className: ["mk-radio-group", className].filter(Boolean).join(" ") });
+}
+
+// src/components/equalizer-slider/react.tsx
+import { useRef as useRef86 } from "react";
+import { jsx as jsx92 } from "react/jsx-runtime";
+function EqualizerSlider({ value, defaultValue, min, max, step, label, name, disabled, error, formatValue, waveform, bars, onChange, onInput, instanceRef, className, children: _children, dangerouslySetInnerHTML: _html, ...props }) {
+  const root = useRef86(null);
+  const engine = useRef86(null);
+  const latestValue = useLatest(value);
+  const change = useLatest(onChange);
+  const input = useLatest(onInput);
+  const baseline = useRef86(value !== void 0 ? value : defaultValue);
+  const current = useRef86(baseline.current);
+  const reconcile = () => queueMicrotask(() => {
+    if (latestValue.current !== void 0) engine.current?.setValue(latestValue.current, false);
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = createEqualizerSlider(root.current, {
+      min,
+      max,
+      step,
+      label,
+      name,
+      disabled,
+      error,
+      formatValue,
+      waveform,
+      bars,
+      value: latestValue.current !== void 0 ? latestValue.current : current.current,
+      defaultValue: baseline.current,
+      onChange: (next) => {
+        change.current?.(next);
+        reconcile();
+      },
+      onInput: (next) => {
+        input.current?.(next);
+        if (input.current || !change.current) reconcile();
+      }
+    });
+    engine.current = created;
+    const form = root.current?.closest("form");
+    const pending = /* @__PURE__ */ new Set();
+    const reset = (event) => {
+      const timer = setTimeout(() => {
+        pending.delete(timer);
+        if (!event.defaultPrevented && latestValue.current !== void 0) created.setValue(latestValue.current, false);
+      }, 0);
+      pending.add(timer);
+    };
+    form?.addEventListener("reset", reset);
+    return () => {
+      form?.removeEventListener("reset", reset);
+      pending.forEach((timer) => clearTimeout(timer));
+      current.current = created.value;
+      created.destroy();
+      engine.current = null;
+    };
+  }, [min, max, step, label, name, disabled, error, formatValue, waveform, bars]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0) engine.current?.setValue(value, false);
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!instanceRef) return;
+    instanceRef.current = engine.current;
+    return () => {
+      instanceRef.current = null;
+    };
+  }, [instanceRef, min, max, step, label, name, disabled, error, formatValue, waveform, bars]);
+  return /* @__PURE__ */ jsx92("div", { ...props, ref: root, className: ["mk-equalizer-slider", className].filter(Boolean).join(" ") });
+}
+
+// src/components/temperature-slider/react.tsx
+import { useRef as useRef87 } from "react";
+import { jsx as jsx93 } from "react/jsx-runtime";
+function TemperatureSlider({ value, defaultValue, min, max, step, label, name, disabled, error, formatValue, unit, onChange, onInput, instanceRef, className, children: _children, dangerouslySetInnerHTML: _html, ...props }) {
+  const root = useRef87(null);
+  const engine = useRef87(null);
+  const latestValue = useLatest(value);
+  const change = useLatest(onChange);
+  const input = useLatest(onInput);
+  const baseline = useRef87(value !== void 0 ? value : defaultValue);
+  const current = useRef87(baseline.current);
+  const reconcile = () => queueMicrotask(() => {
+    if (latestValue.current !== void 0) engine.current?.setValue(latestValue.current, false);
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = createTemperatureSlider(root.current, {
+      min,
+      max,
+      step,
+      label,
+      name,
+      disabled,
+      error,
+      formatValue,
+      unit,
+      value: latestValue.current !== void 0 ? latestValue.current : current.current,
+      defaultValue: baseline.current,
+      onChange: (next) => {
+        change.current?.(next);
+        reconcile();
+      },
+      onInput: (next) => {
+        input.current?.(next);
+        if (input.current || !change.current) reconcile();
+      }
+    });
+    engine.current = created;
+    const form = root.current?.closest("form");
+    const pending = /* @__PURE__ */ new Set();
+    const reset = (event) => {
+      const timer = setTimeout(() => {
+        pending.delete(timer);
+        if (!event.defaultPrevented && latestValue.current !== void 0) created.setValue(latestValue.current, false);
+      }, 0);
+      pending.add(timer);
+    };
+    form?.addEventListener("reset", reset);
+    return () => {
+      form?.removeEventListener("reset", reset);
+      pending.forEach((timer) => clearTimeout(timer));
+      current.current = created.value;
+      created.destroy();
+      engine.current = null;
+    };
+  }, [min, max, step, label, name, disabled, error, formatValue]);
+  useIsomorphicLayoutEffect(() => {
+    const next = unit === "F" ? "F" : "C";
+    if (engine.current && engine.current.unit !== next) engine.current.setUnit(next, { min, max, step });
+  }, [unit]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0) engine.current?.setValue(value, false);
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!instanceRef) return;
+    instanceRef.current = engine.current;
+    return () => {
+      instanceRef.current = null;
+    };
+  }, [instanceRef, min, max, step, label, name, disabled, error, formatValue]);
+  return /* @__PURE__ */ jsx93("div", { ...props, ref: root, className: ["mk-temperature-slider", className].filter(Boolean).join(" ") });
+}
+
+// src/components/rating-scale/react.tsx
+import { useRef as useRef88 } from "react";
+import { jsx as jsx94 } from "react/jsx-runtime";
+function RatingScale({ value, defaultValue, min, max, variant, labels, label, name, disabled, required, error, onChange, instanceRef, className, children: _children, dangerouslySetInnerHTML: _html, ...props }) {
+  const root = useRef88(null);
+  const engine = useRef88(null);
+  const latestValue = useLatest(value);
+  const change = useLatest(onChange);
+  const baseline = useRef88(value !== void 0 ? value : defaultValue);
+  const current = useRef88(baseline.current);
+  const reconcile = () => queueMicrotask(() => {
+    if (latestValue.current !== void 0) engine.current?.setValue(latestValue.current, false);
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = createRatingScale(root.current, {
+      min,
+      max,
+      variant,
+      labels,
+      label,
+      name,
+      disabled,
+      required,
+      error,
+      value: latestValue.current !== void 0 ? latestValue.current : current.current,
+      defaultValue: baseline.current,
+      onChange: (next) => {
+        change.current?.(next);
+        reconcile();
+      }
+    });
+    engine.current = created;
+    const form = root.current?.closest("form");
+    const pending = /* @__PURE__ */ new Set();
+    const reset = (event) => {
+      const timer = setTimeout(() => {
+        pending.delete(timer);
+        if (!event.defaultPrevented && latestValue.current !== void 0) created.setValue(latestValue.current, false);
+      }, 0);
+      pending.add(timer);
+    };
+    form?.addEventListener("reset", reset);
+    return () => {
+      form?.removeEventListener("reset", reset);
+      pending.forEach((timer) => clearTimeout(timer));
+      current.current = created.value;
+      created.destroy();
+      engine.current = null;
+    };
+  }, [min, max, variant, labels, label, name, disabled, required, error]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0) engine.current?.setValue(value, false);
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!instanceRef) return;
+    instanceRef.current = engine.current;
+    return () => {
+      instanceRef.current = null;
+    };
+  }, [instanceRef, min, max, variant, labels, label, name, disabled, required, error]);
+  return /* @__PURE__ */ jsx94("div", { ...props, ref: root, className: ["mk-rating-scale", className].filter(Boolean).join(" ") });
+}
+
+// src/components/notification-stack/react.tsx
+import { useRef as useRef89 } from "react";
+import { jsx as jsx95 } from "react/jsx-runtime";
+function NotificationStack({ items, expanded, direction, duration, disabled, label, labels, onDismiss, onAction, onExpandedChange, instanceRef, className, children, dangerouslySetInnerHTML: _html, ...props }) {
+  const root = useRef89(null);
+  const instance = useRef89(null);
+  const onDismissRef = useLatest(onDismiss);
+  const onActionRef = useLatest(onAction);
+  const onExpandedChangeRef = useLatest(onExpandedChange);
+  useIsomorphicLayoutEffect(() => {
+    const created = createNotificationStack(root.current, { items, expanded, direction, duration, disabled, label, labels, onDismiss: (...args) => onDismissRef.current?.(...args), onAction: (...args) => onActionRef.current?.(...args), onExpandedChange: (...args) => onExpandedChangeRef.current?.(...args) });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setOptions({ items, expanded, direction, duration, disabled, label, labels });
+  }, [items, expanded, direction, duration, disabled, label, labels]);
+  useIsomorphicLayoutEffect(() => {
+    if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef]);
+  return /* @__PURE__ */ jsx95("div", { ...props, ref: root, className: ["mk-notification-stack", className].filter(Boolean).join(" ") });
+}
+
+// src/components/bento-grid/react.tsx
+import { useRef as useRef90 } from "react";
+import { jsx as jsx96 } from "react/jsx-runtime";
+function BentoGrid({ columns, gap, filter, duration, onChange, instanceRef, className, children, ...props }) {
+  const root = useRef90(null);
+  const instance = useRef90(null);
+  const onChangeRef = useLatest(onChange);
+  useIsomorphicLayoutEffect(() => {
+    const created = createBentoGrid(root.current, { columns, gap, filter, duration, onChange: (...args) => onChangeRef.current?.(...args) });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setOptions({ columns, gap, filter, duration });
+  }, [columns, gap, filter, duration]);
+  useIsomorphicLayoutEffect(() => {
+    if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef]);
+  return /* @__PURE__ */ jsx96("div", { ...props, ref: root, className: ["mk-bento-grid", className].filter(Boolean).join(" "), children });
+}
+
+// src/components/scroll-preview-dock/react.tsx
+import { useRef as useRef91 } from "react";
+import { jsx as jsx97 } from "react/jsx-runtime";
+function ScrollPreviewDock({ items, scroller, offset, label, disabled, onChange, instanceRef, className, children, dangerouslySetInnerHTML: _html, ...props }) {
+  const root = useRef91(null);
+  const instance = useRef91(null);
+  const onChangeRef = useLatest(onChange);
+  useIsomorphicLayoutEffect(() => {
+    const created = createScrollPreviewDock(root.current, { items, scroller, offset, label, disabled, onChange: (...args) => onChangeRef.current?.(...args) });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setOptions({ items, scroller, offset, label, disabled });
+  }, [items, scroller, offset, label, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef]);
+  return /* @__PURE__ */ jsx97("div", { ...props, ref: root, className: ["mk-scroll-preview-dock", className].filter(Boolean).join(" ") });
+}
+
+// src/components/sticky-header/react.tsx
+import { useRef as useRef92 } from "react";
+import { jsx as jsx98 } from "react/jsx-runtime";
+function StickyHeader({ scroller, expandedHeight, compactHeight, threshold, range, top, disabled, onChange, instanceRef, className, children, ...props }) {
+  const root = useRef92(null);
+  const instance = useRef92(null);
+  const onChangeRef = useLatest(onChange);
+  useIsomorphicLayoutEffect(() => {
+    const created = createStickyHeader(root.current, { scroller, expandedHeight, compactHeight, threshold, range, top, disabled, onChange: (...args) => onChangeRef.current?.(...args) });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setOptions({ scroller, expandedHeight, compactHeight, threshold, range, top, disabled });
+  }, [scroller, expandedHeight, compactHeight, threshold, range, top, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef]);
+  return /* @__PURE__ */ jsx98("div", { ...props, ref: root, className: ["mk-sticky-header", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx98("div", { "data-mk-sticky-surface": "", className: "mk-sticky-header__surface", children }) });
+}
+
+// src/components/handwriting-text/react.tsx
+import { useRef as useRef93 } from "react";
+import { jsx as jsx99 } from "react/jsx-runtime";
+function HandwritingText({ text = "make it move.", duration, autoplay, onComplete, instanceRef, className, ...props }) {
+  const { children: _children, dangerouslySetInnerHTML: _html, ...safe } = props;
+  const root = useRef93(null);
+  const instance = useRef93(null);
+  const latest = useLatest({ text, onComplete });
+  useIsomorphicLayoutEffect(() => {
+    const created = createHandwritingText(root.current, { text: latest.current.text, duration, autoplay, onComplete: () => latest.current.onComplete?.() });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [duration, autoplay]);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setText(text, autoplay !== false);
+  }, [text, autoplay]);
+  useIsomorphicLayoutEffect(() => {
+    if (typeof instanceRef === "function") instanceRef(instance.current);
+    else if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (typeof instanceRef === "function") instanceRef(null);
+      else if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef, duration, autoplay]);
+  return /* @__PURE__ */ jsx99("span", { ...safe, ref: root, role: "img", "aria-label": text, className: ["mk-handwriting-text", className].filter(Boolean).join(" ") });
+}
+
+// src/components/particle-button/react.tsx
+import { useRef as useRef94 } from "react";
+import { jsx as jsx100 } from "react/jsx-runtime";
+function ParticleButton({ label = "Celebrar", count, distance, onAction, instanceRef, type = "button", className, ...props }) {
+  const { children: _children, dangerouslySetInnerHTML: _html, ...safe } = props;
+  const root = useRef94(null);
+  const instance = useRef94(null);
+  const action = useLatest(onAction);
+  useIsomorphicLayoutEffect(() => {
+    const created = createParticleButton(root.current, { label, count, distance, onAction: () => action.current?.() });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [label, count, distance]);
+  useIsomorphicLayoutEffect(() => {
+    if (typeof instanceRef === "function") instanceRef(instance.current);
+    else if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (typeof instanceRef === "function") instanceRef(null);
+      else if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef, label, count, distance]);
+  return /* @__PURE__ */ jsx100("button", { ...safe, type, ref: root, className: ["mk-particle-button", className].filter(Boolean).join(" ") });
+}
+
+// src/components/magnetize-button/react.tsx
+import { useRef as useRef95 } from "react";
+import { jsx as jsx101 } from "react/jsx-runtime";
+function MagnetizeButton({ label = "Reunir ideas", count, reach, onAction, instanceRef, type = "button", className, ...props }) {
+  const { children: _children, dangerouslySetInnerHTML: _html, ...safe } = props;
+  const root = useRef95(null);
+  const instance = useRef95(null);
+  const action = useLatest(onAction);
+  useIsomorphicLayoutEffect(() => {
+    const created = createMagnetizeButton(root.current, { label, count, reach, onAction: () => action.current?.() });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [label, count, reach]);
+  useIsomorphicLayoutEffect(() => {
+    if (typeof instanceRef === "function") instanceRef(instance.current);
+    else if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (typeof instanceRef === "function") instanceRef(null);
+      else if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef, label, count, reach]);
+  return /* @__PURE__ */ jsx101("button", { ...safe, type, ref: root, className: ["mk-magnetize-button", className].filter(Boolean).join(" ") });
+}
+
+// src/components/badge-button/react.tsx
+import { useRef as useRef96 } from "react";
+import { jsx as jsx102 } from "react/jsx-runtime";
+function BadgeButton({ label = "Guardar", count, defaultCount = 0, step, hideZero, max, onChange, instanceRef, type = "button", className, ...props }) {
+  const { children: _children, dangerouslySetInnerHTML: _html, ...safe } = props;
+  const root = useRef96(null);
+  const instance = useRef96(null);
+  const current = useLatest({ count, onChange });
+  const retained = useRef96(defaultCount);
+  useIsomorphicLayoutEffect(() => {
+    let created;
+    created = createBadgeButton(root.current, {
+      label,
+      count: current.current.count ?? retained.current,
+      step,
+      hideZero,
+      max,
+      onChange: (next) => {
+        current.current.onChange?.(next);
+        if (current.current.count !== void 0) created.setCount(current.current.count);
+      }
+    });
+    instance.current = created;
+    return () => {
+      retained.current = created.count;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [label, step, hideZero, max]);
+  useIsomorphicLayoutEffect(() => {
+    if (count !== void 0) instance.current?.setCount(count);
+  }, [count]);
+  useIsomorphicLayoutEffect(() => {
+    if (typeof instanceRef === "function") instanceRef(instance.current);
+    else if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (typeof instanceRef === "function") instanceRef(null);
+      else if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef, label, step, hideZero, max]);
+  return /* @__PURE__ */ jsx102("button", { ...safe, type, ref: root, className: ["mk-badge-button", className].filter(Boolean).join(" ") });
+}
+
+// src/components/morphing-page-dots/react.tsx
+import { useRef as useRef97 } from "react";
+import { jsx as jsx103 } from "react/jsx-runtime";
+function MorphingPageDots({ count, value, defaultValue = 0, label, labels, pageIds, disabled, onChange, instanceRef, className, ...props }) {
+  const { children: _children, dangerouslySetInnerHTML: _html, ...safe } = props;
+  const root = useRef97(null);
+  const instance = useRef97(null);
+  const current = useLatest({ value, onChange });
+  const retained = useRef97(defaultValue);
+  const labelsKey = JSON.stringify(labels);
+  const pagesKey = JSON.stringify(pageIds);
+  useIsomorphicLayoutEffect(() => {
+    let created;
+    created = createMorphingPageDots(root.current, {
+      count,
+      value: current.current.value ?? retained.current,
+      label,
+      labels,
+      pageIds,
+      disabled,
+      onChange: (next) => {
+        current.current.onChange?.(next);
+        if (current.current.value !== void 0) created.setValue(current.current.value);
+      }
+    });
+    instance.current = created;
+    return () => {
+      retained.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [count, label, labelsKey, pagesKey, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0) instance.current?.setValue(value);
+  }, [value]);
+  useIsomorphicLayoutEffect(() => {
+    if (typeof instanceRef === "function") instanceRef(instance.current);
+    else if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (typeof instanceRef === "function") instanceRef(null);
+      else if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef, count, label, labelsKey, pagesKey, disabled]);
+  return /* @__PURE__ */ jsx103("div", { ...safe, ref: root, className: ["mk-morphing-page-dots", className].filter(Boolean).join(" ") });
+}
+
+// src/components/not-found/react.tsx
+import { useRef as useRef98 } from "react";
+import { jsx as jsx104 } from "react/jsx-runtime";
+function NotFound({ brand, title, description, homeHref, homeLabel, backLabel, showBack, onBack, instanceRef, className, ...props }) {
+  const { children: _children, dangerouslySetInnerHTML: _html, ...safe } = props;
+  const root = useRef98(null);
+  const instance = useRef98(null);
+  const current = useLatest(onBack);
+  const hasBack = Boolean(onBack);
+  useIsomorphicLayoutEffect(() => {
+    const created = createNotFound(root.current, { brand, title, description, homeHref, homeLabel, backLabel, showBack, onBack: hasBack ? () => current.current?.() : void 0 });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [brand, title, description, homeHref, homeLabel, backLabel, showBack, hasBack]);
+  useIsomorphicLayoutEffect(() => {
+    if (typeof instanceRef === "function") instanceRef(instance.current);
+    else if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (typeof instanceRef === "function") instanceRef(null);
+      else if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef, brand, title, description, homeHref, homeLabel, backLabel, showBack, hasBack]);
+  return /* @__PURE__ */ jsx104("div", { ...safe, ref: root, className: ["mk-not-found", className].filter(Boolean).join(" ") });
+}
+
+// src/components/scroll-area/react.tsx
+import { useRef as useRef99 } from "react";
+import { jsx as jsx105 } from "react/jsx-runtime";
+function ScrollArea({
+  visibility,
+  axis,
+  idle,
+  fade,
+  backToTop,
+  label,
+  focusable,
+  decorative,
+  onScroll,
+  viewportClassName,
+  viewportStyle,
+  unstyled,
+  instanceRef,
+  className,
+  children,
+  ...props
+}) {
+  const ref = useRef99(null);
+  const viewport = useRef99(null);
+  const scrolled = useLatest(onScroll);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createScrollArea(ref.current, {
+      visibility,
+      axis,
+      idle,
+      fade,
+      backToTop,
+      label,
+      focusable,
+      decorative,
+      viewport: viewport.current,
+      onScroll: (progress) => scrolled.current?.(progress)
+    });
+    if (instanceRef) instanceRef.current = instance;
+    return () => {
+      instance.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [visibility, axis, idle, fade, backToTop, label, focusable, decorative]);
+  const classes = [unstyled ? null : "mk-scroll-area", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx105("div", { ...props, ref, className: classes || void 0, children: /* @__PURE__ */ jsx105("div", { ref: viewport, "data-mk-scroll-viewport": "", className: viewportClassName, style: viewportStyle, children }) });
+}
 export {
   ANIMATIONS,
   ActivityFeed,
   AddToCart,
   AnimatedNumber,
   Attachment,
+  BadgeButton,
+  BentoGrid,
   BidirectionalSlider,
   Breadcrumb,
   Calendar,
@@ -3740,10 +4441,12 @@ export {
   DrilldownMenu,
   EditableTable,
   EmptyState,
+  EqualizerSlider,
   FileExplorer,
   FilterBuilder,
   FlipGroup,
   Frost,
+  HandwritingText,
   HeatmapChart,
   HoldConfirm,
   HoverCard,
@@ -3757,15 +4460,20 @@ export {
   LoadingButton,
   MK_HEAD_SCRIPT,
   MK_THEME_HEAD_SCRIPT,
+  MagnetizeButton,
   Menu,
   MkIcon,
+  MorphingPageDots,
   MultiSelect,
   NAV_STYLES,
   NAV_STYLE_ALIASES,
   Nav,
+  NotFound,
   NotificationBell,
+  NotificationStack,
   OrbitMenu,
   Pagination,
+  ParticleButton,
   PasswordStrength,
   PieChart,
   PillButton,
@@ -3775,13 +4483,17 @@ export {
   Questionnaire,
   RadarChart,
   RadialChart,
+  RadioGroup,
   RangeCalendar,
   RangeSlider,
+  RatingScale,
   ResizablePanel,
   RichTextEditor,
   SankeyChart,
   ScratchCard,
+  ScrollArea,
   ScrollIsland,
+  ScrollPreviewDock,
   Select,
   SignaturePad,
   Skeleton,
@@ -3790,10 +4502,13 @@ export {
   SplitView,
   StarRating,
   StatCard,
+  Stepper,
   Steps,
+  StickyHeader,
   StudioDock,
   SwipeActions,
   TagInput,
+  TemperatureSlider,
   ThemePicker,
   ThemeProvider,
   TimeField,