@yewdiel21/motion-kit 0.15.0 → 0.17.0

package/dist/react/index.js

@@ -55,7 +55,7 @@ import {
   pileLayers,
   pileStyle,
   reflowLayout
-} from "../chunk-6IRJYXJU.js";
+} from "../chunk-BZLMCHUD.js";
 import {
   ICON_PATHS,
   NAV_STYLES,
@@ -84,7 +84,7 @@ import {
   revealShell,
   toNavStyle,
   toast
-} from "../chunk-JXRS3OEA.js";
+} from "../chunk-VJFPTLAK.js";
 import {
   confetti,
   createActivityFeed,
@@ -108,6 +108,7 @@ import {
   createDateTimePicker,
   createDialog,
   createDrawer,
+  createDrilldownMenu,
   createEditableTable,
   createEmptyState,
   createFileExplorer,
@@ -135,6 +136,7 @@ import {
   createScratchCard,
   createScrollIsland,
   createSelect,
+  createSignaturePad,
   createSkeleton,
   createSlotPicker,
   createSplitView,
@@ -150,6 +152,9 @@ import {
   createTrailer,
   createTreeView,
   createVirtualList,
+  createVoiceMessageBubble,
+  createWaveformPlayer,
+  createWheelPicker,
   dateTimeKey,
   flowLines,
   languageFamily,
@@ -165,7 +170,7 @@ import {
   tokenLines,
   tokenize,
   tweenNumber
-} from "../chunk-A6QQCF6V.js";
+} from "../chunk-7IQTMF7Y.js";
 import {
   DEFAULT_THEME,
   MK_THEME_HEAD_SCRIPT,
@@ -1714,13 +1719,13 @@ function RangeSlider({ min, max, step, value, defaultValue, disabled, name, labe
 // src/components/chart/react.tsx
 import { useRef as useRef30 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
-function Chart({ type, labels, series, points, stacked, formatValue, label, height, emptyLabel, legend, tooltip, axis, endLabel, onSelect, instanceRef, className, ...props }) {
+function Chart({ type, labels, series, points, stacked, barStyle, barTrack, barFill, barWidth, curve, formatValue, label, height, emptyLabel, legend, tooltip, axis, endLabel, onSelect, instanceRef, className, ...props }) {
   const ref = useRef30(null);
   const instance = useRef30(null);
   const format = useLatest(formatValue);
   const select = useLatest(onSelect);
   const formatted = formatValue !== void 0;
-  const data = { type, labels, series, points, stacked, label, height, emptyLabel, legend, tooltip, axis, endLabel };
+  const data = { type, labels, series, points, stacked, barStyle, barTrack, barFill, barWidth, curve, label, height, emptyLabel, legend, tooltip, axis, endLabel };
   const key = JSON.stringify(data);
   const latest = useLatest(data);
   const options = () => ({
@@ -3251,27 +3256,33 @@ function AddToCart({ target, image, quantity, count, label, onAdd, onLand, insta
   const ref = useRef71(null);
   const add = useLatest(onAdd);
   const landed = useLatest(onLand);
+  const instance = useRef71(null);
   useIsomorphicLayoutEffect(() => {
     const created = createAddToCart(ref.current, { target, image, quantity, count, label, onAdd: (n) => add.current?.(n), onLand: (n) => landed.current?.(n) });
+    instance.current = created;
     if (instanceRef) instanceRef.current = created;
     return () => {
       created.destroy();
+      instance.current = null;
       if (instanceRef) instanceRef.current = null;
     };
   }, [typeof target === "string" ? target : null, typeof image === "string" ? image : null, quantity, label]);
+  useIsomorphicLayoutEffect(() => {
+    if (count !== void 0) instance.current?.setCount(count);
+  }, [count]);
   return /* @__PURE__ */ jsx73("div", { ...props, ref, className: ["mk-add-to-cart", className].filter(Boolean).join(" "), children });
 }
 
 // src/components/scroll-island/react.tsx
 import { useRef as useRef72 } from "react";
 import { jsx as jsx74 } from "react/jsx-runtime";
-function ScrollIsland({ sections, reach, idle, page, onSection, className, children, ...props }) {
+function ScrollIsland({ sections, reach, idle, persistent, page, onSection, className, children, ...props }) {
   const ref = useRef72(null);
   const section = useLatest(onSection);
   useIsomorphicLayoutEffect(() => {
-    const created = createScrollIsland(page ? document.documentElement : ref.current, { sections, reach, idle, page, onSection: (name) => section.current?.(name) });
+    const created = createScrollIsland(page ? document.documentElement : ref.current, { sections, reach, idle, persistent, page, onSection: (name) => section.current?.(name) });
     return () => created.destroy();
-  }, [sections, reach, idle, page]);
+  }, [sections, reach, idle, persistent, page]);
   if (page) return null;
   return /* @__PURE__ */ jsx74("div", { ...props, ref, className: ["mk-scroll-island", className].filter(Boolean).join(" "), children });
 }
@@ -3445,8 +3456,8 @@ function RadarChart({ axes, series, max, levels, grid, size, label, legend, empt
 
 // src/components/radial-chart/react.tsx
 import { jsx as jsx81 } from "react/jsx-runtime";
-function RadialChart({ data, max, sweep, size, thickness, label, totalLabel, legend, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }) {
-  const ref = useChart(createRadialChart, { data, max, sweep, size, thickness, label, totalLabel, legend, emptyLabel }, { formatValue, onSelect }, instanceRef);
+function RadialChart({ data, max, sweep, size, thickness, segments, center, label, totalLabel, legend, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }) {
+  const ref = useChart(createRadialChart, { data, max, sweep, size, thickness, segments, center, label, totalLabel, legend, emptyLabel }, { formatValue, onSelect }, instanceRef);
   return /* @__PURE__ */ jsx81("div", { ...props, ref, className: ["mk-chart mk-radial-chart", className].filter(Boolean).join(" ") });
 }
 
@@ -3485,6 +3496,220 @@ 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(" ") });
+}
 export {
   ANIMATIONS,
   ActivityFeed,
@@ -3512,6 +3737,7 @@ export {
   DateTimePicker,
   Dialog,
   Drawer,
+  DrilldownMenu,
   EditableTable,
   EmptyState,
   FileExplorer,
@@ -3557,6 +3783,7 @@ export {
   ScratchCard,
   ScrollIsland,
   Select,
+  SignaturePad,
   Skeleton,
   SlotPicker,
   SlotText,
@@ -3578,6 +3805,9 @@ export {
   TreeView,
   VirtualList,
   VoiceDots,
+  VoiceMessageBubble,
+  WaveformPlayer,
+  WheelPicker,
   animate,
   clearToasts,
   confetti,