@yewdiel21/motion-kit 0.16.0 → 0.18.0

package/dist/react/index.js

@@ -55,7 +55,7 @@ import {
   pileLayers,
   pileStyle,
   reflowLayout
-} from "../chunk-NFZIX3IA.js";
+} from "../chunk-EDMXWUW3.js";
 import {
   ICON_PATHS,
   NAV_STYLES,
@@ -84,12 +84,14 @@ import {
   revealShell,
   toNavStyle,
   toast
-} from "../chunk-RBEKR5UZ.js";
+} from "../chunk-AWDEKDEJ.js";
 import {
   confetti,
   createActivityFeed,
   createAddToCart,
   createAttachment,
+  createBadgeButton,
+  createBentoGrid,
   createBreadcrumb,
   createCalendar,
   createChart,
@@ -108,10 +110,13 @@ import {
   createDateTimePicker,
   createDialog,
   createDrawer,
+  createDrilldownMenu,
   createEditableTable,
   createEmptyState,
+  createEqualizerSlider,
   createFileExplorer,
   createFilterBuilder,
+  createHandwritingText,
   createHoldConfirm,
   createHoverCard,
   createImagePreview,
@@ -119,37 +124,52 @@ 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,
   createScrollIsland,
+  createScrollPreviewDock,
   createSelect,
+  createSignaturePad,
   createSkeleton,
   createSlotPicker,
   createSplitView,
   createStarRating,
   createStatCard,
+  createStepper,
   createSteps,
+  createStickyHeader,
   createStudioDock,
   createSwipeActions,
   createTagInput,
+  createTemperatureSlider,
   createTimeField,
   createTimeline,
   createTooltip,
   createTrailer,
   createTreeView,
   createVirtualList,
+  createVoiceMessageBubble,
+  createWaveformPlayer,
+  createWheelPicker,
   dateTimeKey,
   flowLines,
   languageFamily,
@@ -165,7 +185,7 @@ import {
   tokenLines,
   tokenize,
   tweenNumber
-} from "../chunk-SDQ776LG.js";
+} from "../chunk-Q7IW4FV3.js";
 import {
   DEFAULT_THEME,
   MK_THEME_HEAD_SCRIPT,
@@ -3491,12 +3511,864 @@ function OrbitMenu({ items, label = "Men\xFA", radius, start, closeOnSelect, onT
     items.map((item) => /* @__PURE__ */ jsx84("button", { type: "button", "data-mk-orbit-item": "", "data-mk-value": item.value, "aria-label": item.label, children: item.icon }, item.value))
   ] });
 }
+
+// src/components/signature-pad/react.tsx
+import { useReducer, useRef as useRef79 } from "react";
+import { jsx as jsx85 } from "react/jsx-runtime";
+function SignaturePad({ value, defaultValue, label, hint, placeholder, color, width, disabled, readOnly, toolbar, name, historyLimit, onChange, instanceRef, className, ...props }) {
+  const { children: _children, dangerouslySetInnerHTML: _html, ...rootProps } = props;
+  const ref = useRef79(null);
+  const instance = useRef79(null);
+  const edited = useRef79(value ?? defaultValue);
+  const current = useLatest(value);
+  const change = useLatest(onChange);
+  const [, refresh] = useReducer((revision) => revision + 1, 0);
+  useIsomorphicLayoutEffect(() => {
+    const created = createSignaturePad(ref.current, {
+      data: current.current ?? edited.current,
+      label,
+      hint,
+      placeholder,
+      color,
+      width,
+      disabled,
+      readOnly,
+      toolbar,
+      name,
+      historyLimit,
+      onChange: (data, detail) => {
+        edited.current = data;
+        change.current?.(data, detail);
+        if (current.current !== void 0) refresh();
+      }
+    });
+    instance.current = created;
+    return () => {
+      edited.current = created.exportData();
+      created.destroy();
+      instance.current = null;
+    };
+  }, [label, hint, placeholder, color, width, toolbar, name, historyLimit]);
+  useIsomorphicLayoutEffect(() => {
+    const created = instance.current;
+    if (!created) return;
+    created.setDisabled(Boolean(disabled));
+    created.setReadOnly(Boolean(readOnly));
+  }, [disabled, readOnly]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0) instance.current?.importData(value, false);
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef, label, hint, placeholder, color, width, toolbar, name, historyLimit]);
+  return /* @__PURE__ */ jsx85("div", { ...rootProps, ref, className: ["mk-signature-pad", className].filter(Boolean).join(" ") });
+}
+
+// src/components/waveform-player/react.tsx
+import { useRef as useRef80 } from "react";
+import { jsx as jsx86 } from "react/jsx-runtime";
+function WaveformPlayer({ src, peaks, label, disabled, playbackRates, onStateChange, onTimeUpdate, onPlay, onPause, onEnded, onError, instanceRef, className, ...props }) {
+  const { children: _children, dangerouslySetInnerHTML: _html, ...rootProps } = props;
+  const root = useRef80(null);
+  const instance = useRef80(null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createWaveformPlayer(root.current);
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.update({ src, peaks, label, disabled, playbackRates, onStateChange, onTimeUpdate, onPlay, onPause, onEnded, onError });
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef]);
+  return /* @__PURE__ */ jsx86("div", { ...rootProps, ref: root, className: ["mk-waveform-player", className].filter(Boolean).join(" ") });
+}
+
+// src/components/voice-message-bubble/react.tsx
+import { useRef as useRef81 } from "react";
+import { jsx as jsx87 } from "react/jsx-runtime";
+function VoiceMessageBubble({ src, peaks, label, disabled, playbackRates, onStateChange, onTimeUpdate, onPlay, onPause, onEnded, onError, direction, author, timestamp, dateTime, status, instanceRef, className, ...props }) {
+  const { children: _children, dangerouslySetInnerHTML: _html, ...rootProps } = props;
+  const root = useRef81(null);
+  const instance = useRef81(null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createVoiceMessageBubble(root.current);
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.update({ src, peaks, label, disabled, playbackRates, onStateChange, onTimeUpdate, onPlay, onPause, onEnded, onError, direction, author, timestamp, dateTime, status });
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef]);
+  return /* @__PURE__ */ jsx87("div", { ...rootProps, ref: root, className: ["mk-voice-message-bubble", className].filter(Boolean).join(" ") });
+}
+
+// src/components/drilldown-menu/react.tsx
+import { forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle12, useReducer as useReducer2, useRef as useRef82 } from "react";
+import { jsx as jsx88 } from "react/jsx-runtime";
+var DrilldownMenu = forwardRef12(function DrilldownMenu2({ items, path, defaultPath, label, backLabel, emptyText, onSelect, onPathChange, className, ...props }, handle) {
+  const { children: _children, dangerouslySetInnerHTML: _html, ...rootProps } = props;
+  const ref = useRef82(null);
+  const instance = useRef82(null);
+  const select = useLatest(onSelect);
+  const changed = useLatest(onPathChange);
+  const controlled = useLatest(path);
+  const [, refresh] = useReducer2((value) => value + 1, 0);
+  useImperativeHandle12(handle, () => ({
+    open: (id) => instance.current?.open(id) ?? false,
+    back: () => instance.current?.back() ?? false,
+    root: () => instance.current?.root(),
+    reset: () => instance.current?.reset(),
+    setPath: (next, notify) => {
+      instance.current?.setPath(next, notify);
+      if (controlled.current !== void 0) refresh();
+    },
+    focusItem: (id) => instance.current?.focusItem(id)
+  }), []);
+  const itemsKey = JSON.stringify(items);
+  useIsomorphicLayoutEffect(() => {
+    const created = createDrilldownMenu(ref.current, {
+      items,
+      path: path ?? defaultPath,
+      label,
+      backLabel,
+      emptyText,
+      onSelect: (item, selectedPath) => select.current?.(item, selectedPath),
+      onPathChange: (next) => {
+        changed.current?.(next);
+        if (controlled.current !== void 0) refresh();
+      }
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.update({ items, label, backLabel, emptyText, ...path !== void 0 ? { path } : {} });
+  }, [itemsKey, label, backLabel, emptyText]);
+  useIsomorphicLayoutEffect(() => {
+    if (path !== void 0) instance.current?.setPath(path);
+  });
+  return /* @__PURE__ */ jsx88("div", { ...rootProps, ref, className: ["mk-drilldown-menu", className].filter(Boolean).join(" ") });
+});
+
+// src/components/wheel-picker/react.tsx
+import { useReducer as useReducer3, useRef as useRef83 } from "react";
+import { jsx as jsx89 } from "react/jsx-runtime";
+function WheelPicker({ items, value, defaultValue, name, label, disabled, visibleItems, itemHeight, onInput, onChange, instanceRef, className, ...props }) {
+  const ref = useRef83(null), instance = useRef83(null);
+  const changed = useLatest(onChange), input = useLatest(onInput), latestItems = useLatest(items);
+  const controlled = useLatest(value);
+  const [, refresh] = useReducer3((revision) => revision + 1, 0);
+  const last = useRef83(value ?? defaultValue);
+  useIsomorphicLayoutEffect(() => {
+    const created = createWheelPicker(ref.current, {
+      items: latestItems.current,
+      value: value ?? last.current,
+      name,
+      label,
+      disabled,
+      visibleItems,
+      itemHeight,
+      onInput: (next) => {
+        last.current = next;
+        input.current?.(next);
+      },
+      onChange: (next) => {
+        last.current = next;
+        changed.current?.(next);
+        if (controlled.current !== void 0) refresh();
+      }
+    });
+    instance.current = created;
+    return () => {
+      last.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [name, label, disabled, visibleItems, itemHeight]);
+  const key = JSON.stringify(items ?? []);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setItems(items ?? []);
+  }, [key]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0) instance.current?.setValue(value);
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (instanceRef) instanceRef.current = instance.current;
+    return () => {
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [instanceRef, name, label, disabled, visibleItems, itemHeight]);
+  const domProps = { ...props };
+  delete domProps.children;
+  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(" ") });
+}
 export {
   ANIMATIONS,
   ActivityFeed,
   AddToCart,
   AnimatedNumber,
   Attachment,
+  BadgeButton,
+  BentoGrid,
   BidirectionalSlider,
   Breadcrumb,
   Calendar,
@@ -3518,12 +4390,15 @@ export {
   DateTimePicker,
   Dialog,
   Drawer,
+  DrilldownMenu,
   EditableTable,
   EmptyState,
+  EqualizerSlider,
   FileExplorer,
   FilterBuilder,
   FlipGroup,
   Frost,
+  HandwritingText,
   HeatmapChart,
   HoldConfirm,
   HoverCard,
@@ -3537,15 +4412,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,
@@ -3555,24 +4435,31 @@ export {
   Questionnaire,
   RadarChart,
   RadialChart,
+  RadioGroup,
   RangeCalendar,
   RangeSlider,
+  RatingScale,
   ResizablePanel,
   RichTextEditor,
   SankeyChart,
   ScratchCard,
   ScrollIsland,
+  ScrollPreviewDock,
   Select,
+  SignaturePad,
   Skeleton,
   SlotPicker,
   SlotText,
   SplitView,
   StarRating,
   StatCard,
+  Stepper,
   Steps,
+  StickyHeader,
   StudioDock,
   SwipeActions,
   TagInput,
+  TemperatureSlider,
   ThemePicker,
   ThemeProvider,
   TimeField,
@@ -3584,6 +4471,9 @@ export {
   TreeView,
   VirtualList,
   VoiceDots,
+  VoiceMessageBubble,
+  WaveformPlayer,
+  WheelPicker,
   animate,
   clearToasts,
   confetti,