@yewdiel21/motion-kit 0.14.0 → 0.16.0

package/dist/react/index.js

@@ -55,26 +55,40 @@ import {
   pileLayers,
   pileStyle,
   reflowLayout
-} from "../chunk-EY4BJKC4.js";
+} from "../chunk-NFZIX3IA.js";
 import {
   ICON_PATHS,
   NAV_STYLES,
+  NAV_STYLE_ALIASES,
   PENDING_ID,
+  PILL_ARROW,
   capturePending,
   clearToasts,
+  createBidirectionalSlider,
   createChat,
   createCursor,
+  createHeatmapChart,
   createIsland,
+  createOrbitMenu,
+  createPieChart,
+  createPillButton,
+  createRadarChart,
+  createRadialChart,
+  createSankeyChart,
   createThemePicker,
   createToaster,
+  createToolbar,
+  createVoiceDots,
   dismissToast,
   morphPendingToReply,
   revealShell,
+  toNavStyle,
   toast
-} from "../chunk-6P4P7NU6.js";
+} from "../chunk-RBEKR5UZ.js";
 import {
   confetti,
   createActivityFeed,
+  createAddToCart,
   createAttachment,
   createBreadcrumb,
   createCalendar,
@@ -119,6 +133,8 @@ import {
   createResizablePanel,
   createRichTextEditor,
   createScratchCard,
+  createScrollIsland,
+  createSelect,
   createSkeleton,
   createSlotPicker,
   createSplitView,
@@ -149,7 +165,7 @@ import {
   tokenLines,
   tokenize,
   tweenNumber
-} from "../chunk-CU6SXW3E.js";
+} from "../chunk-SDQ776LG.js";
 import {
   DEFAULT_THEME,
   MK_THEME_HEAD_SCRIPT,
@@ -787,7 +803,7 @@ function Nav({
   items,
   active,
   onSelect,
-  navStyle = "bonita",
+  navStyle = "pills",
   accent = false,
   reveal = false,
   first,
@@ -801,7 +817,7 @@ function Nav({
     const handle = revealShell(ref.current);
     return () => handle?.cancel();
   }, []);
-  const classes = ["mk-nav", `mk-nav--${navStyle}`, accent && "mk-nav--accent", className].filter(Boolean).join(" ");
+  const classes = ["mk-nav", `mk-nav--${toNavStyle(navStyle) ?? "pills"}`, 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) => {
@@ -1698,13 +1714,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, 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 };
+  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 = () => ({
@@ -1812,19 +1828,19 @@ function HoldConfirm({ duration, resetAfter, holdingLabel, doneLabel, hint, disa
 // src/components/image-preview/react.tsx
 import { useRef as useRef34 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
-function ImagePreview({ images, labels, loop, onChange, onOpenChange, instanceRef, className, ...props }) {
+function ImagePreview({ images, labels, loop, strip, onChange, onOpenChange, instanceRef, className, ...props }) {
   const ref = useRef34(null);
   const change = useLatest(onChange);
   const openChange = useLatest(onOpenChange);
   const key = JSON.stringify(labels ?? {});
   useIsomorphicLayoutEffect(() => {
-    const created = createImagePreview(ref.current, { labels, loop, onChange: (i) => change.current?.(i), onOpenChange: (open) => openChange.current?.(open) });
+    const created = createImagePreview(ref.current, { labels, loop, strip, onChange: (i) => change.current?.(i), onOpenChange: (open) => openChange.current?.(open) });
     if (instanceRef) instanceRef.current = created;
     return () => {
       created.destroy();
       if (instanceRef) instanceRef.current = null;
     };
-  }, [key, loop]);
+  }, [key, loop, strip]);
   return /* @__PURE__ */ jsx37("div", { ...props, ref, className: ["mk-image-preview", className].filter(Boolean).join(" "), children: images.map((image, i) => /* @__PURE__ */ jsx37("button", { type: "button", "data-mk-image": "", "data-mk-src": image.src, "data-mk-caption": image.caption, "aria-label": `Ver ${image.alt}`, children: /* @__PURE__ */ jsx37("img", { src: image.thumb ?? image.src, alt: image.alt, loading: "lazy", decoding: "async" }) }, `${image.src}-${i}`)) });
 }
 
@@ -2656,7 +2672,7 @@ var ActivityFeed = forwardRef2(function ActivityFeed2({ items, locale, label, em
 // src/components/tree-view/react.tsx
 import { forwardRef as forwardRef3, useImperativeHandle as useImperativeHandle3, useRef as useRef61 } from "react";
 import { jsx as jsx64 } from "react/jsx-runtime";
-var TreeView = forwardRef3(function TreeView2({ nodes, checkable, checked, expanded, selected, search, label, loadChildren, renderLabel, searchText, onSelect, onCheck, onExpand, className, ...props }, handle) {
+var TreeView = forwardRef3(function TreeView2({ nodes, checkable, checked, expanded, selected, search, label, loadChildren, renderLabel, searchText, icons, draggable, onSelect, onCheck, onExpand, onMove, className, ...props }, handle) {
   const ref = useRef61(null);
   const instance = useRef61(null);
   const select = useLatest(onSelect);
@@ -2665,6 +2681,7 @@ var TreeView = forwardRef3(function TreeView2({ nodes, checkable, checked, expan
   const load = useLatest(loadChildren);
   const draw = useLatest(renderLabel);
   const text = useLatest(searchText);
+  const moved = useLatest(onMove);
   useImperativeHandle3(
     handle,
     () => ({
@@ -2692,14 +2709,17 @@ var TreeView = forwardRef3(function TreeView2({ nodes, checkable, checked, expan
       searchText: searchText ? (node) => text.current?.(node) ?? node.label : void 0,
       onSelect: (node) => select.current?.(node),
       onCheck: (ids) => check.current?.(ids),
-      onExpand: (node, open) => expand.current?.(node, open)
+      onExpand: (node, open) => expand.current?.(node, open),
+      icons,
+      draggable,
+      onMove: (node, into) => moved.current?.(node, into)
     });
     instance.current = created;
     return () => {
       created.destroy();
       instance.current = null;
     };
-  }, [checkable, String(search), label, Boolean(loadChildren), Boolean(renderLabel), Boolean(searchText)]);
+  }, [checkable, String(search), label, Boolean(loadChildren), Boolean(renderLabel), Boolean(searchText), icons, draggable]);
   const first = useRef61(true);
   useIsomorphicLayoutEffect(() => {
     if (first.current) {
@@ -3199,11 +3219,285 @@ var RichTextEditor = forwardRef11(function RichTextEditor2({ value, placeholder,
   }, [value]);
   return /* @__PURE__ */ jsx71("div", { ...props, ref, className: ["mk-rich-text-editor", className].filter(Boolean).join(" ") });
 });
+
+// src/components/select/react.tsx
+import { useRef as useRef70 } from "react";
+import { jsx as jsx72 } from "react/jsx-runtime";
+function Select({ options, value, defaultValue, name, label, placeholder, disabled, onChange, className, ...props }) {
+  const ref = useRef70(null);
+  const instance = useRef70(null);
+  const change = useLatest(onChange);
+  const start = useRef70(value ?? defaultValue);
+  const key = JSON.stringify(options ?? null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createSelect(ref.current, { options, value: value ?? start.current, name, label, placeholder, disabled, onChange: (next) => change.current?.(next) });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [key, name, label, placeholder, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && instance.current.value !== value) instance.current.setValue(value, false);
+  }, [value]);
+  return /* @__PURE__ */ jsx72("div", { ...props, ref, className: ["mk-select", className].filter(Boolean).join(" ") });
+}
+
+// src/components/add-to-cart/react.tsx
+import { useRef as useRef71 } from "react";
+import { jsx as jsx73 } from "react/jsx-runtime";
+function AddToCart({ target, image, quantity, count, label, onAdd, onLand, instanceRef, className, children, ...props }) {
+  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, 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, persistent, page, onSection: (name) => section.current?.(name) });
+    return () => created.destroy();
+  }, [sections, reach, idle, persistent, page]);
+  if (page) return null;
+  return /* @__PURE__ */ jsx74("div", { ...props, ref, className: ["mk-scroll-island", className].filter(Boolean).join(" "), children });
+}
+
+// src/components/pill-button/react.tsx
+import { useRef as useRef73 } from "react";
+import { jsx as jsx75, jsxs as jsxs22 } from "react/jsx-runtime";
+function PillButton({ expand, icon, className, children, type = "button", ...props }) {
+  const ref = useRef73(null);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createPillButton(ref.current, { expand });
+    return () => instance.destroy();
+  }, [expand]);
+  return /* @__PURE__ */ jsxs22("button", { ...props, type, ref, className: ["mk-pill-button", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx75("span", { "data-mk-pill-label": "", children }),
+    icon ? /* @__PURE__ */ jsx75("span", { "data-mk-pill-icon": "", "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx75("span", { "data-mk-pill-icon": "", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: PILL_ARROW } })
+  ] });
+}
+
+// src/components/toolbar/react.tsx
+import { useRef as useRef74 } from "react";
+import { jsx as jsx76 } from "react/jsx-runtime";
+function Toolbar({ value, orientation, tips, onChange, instanceRef, className, children, ...props }) {
+  const ref = useRef74(null);
+  const changed = useLatest(onChange);
+  const instance = useRef74(null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createToolbar(ref.current, { value, orientation, tips, onChange: (next) => changed.current?.(next) });
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [orientation, tips]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && instance.current.value !== value) instance.current.setValue(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx76("div", { ...props, ref, className: ["mk-toolbar", className].filter(Boolean).join(" "), children });
+}
+
+// src/components/bidirectional-slider/react.tsx
+import { useRef as useRef75 } from "react";
+import { jsx as jsx77 } from "react/jsx-runtime";
+function BidirectionalSlider({ min, max, origin, step, value, disabled, name, label, icons, formatValue, onInput, onChange, instanceRef, className, ...props }) {
+  const ref = useRef75(null);
+  const input = useLatest(onInput);
+  const change = useLatest(onChange);
+  const format = useLatest(formatValue);
+  const instance = useRef75(null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createBidirectionalSlider(ref.current, {
+      min,
+      max,
+      origin,
+      step,
+      value,
+      disabled,
+      name,
+      label,
+      icons,
+      formatValue: formatValue ? (n) => format.current(n) : void 0,
+      onInput: (n) => input.current?.(n),
+      onChange: (n) => change.current?.(n)
+    });
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [min, max, origin, step, disabled, name, label, icons]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && instance.current.value !== value) instance.current.setValue(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx77("div", { ...props, ref, className: ["mk-bidirectional-slider", className].filter(Boolean).join(" ") });
+}
+
+// src/components/voice-dots/react.tsx
+import { useRef as useRef76 } from "react";
+import { jsx as jsx78 } from "react/jsx-runtime";
+function VoiceDots({ state = "idle", count, colorful, size, labels, source, level, instanceRef, className, ...props }) {
+  const ref = useRef76(null);
+  const instance = useRef76(null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createVoiceDots(ref.current, { state, count, colorful, size, labels });
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [count, colorful, size]);
+  useIsomorphicLayoutEffect(() => {
+    if (instance.current && instance.current.state !== state) instance.current.setState(state);
+  }, [state]);
+  useIsomorphicLayoutEffect(() => {
+    const dots = instance.current;
+    if (!dots || !source) return;
+    let stop = null;
+    let gone = false;
+    void dots.listen(source).then((done) => {
+      if (gone) done();
+      else stop = done;
+    }).catch((error) => {
+      if (!gone) ref.current?.dispatchEvent(new CustomEvent("mk:error", { bubbles: true, detail: { error } }));
+    });
+    return () => {
+      gone = true;
+      stop?.();
+    };
+  }, [source, count, colorful, size]);
+  useIsomorphicLayoutEffect(() => {
+    if (level !== void 0) instance.current?.setLevel(level);
+  }, [level]);
+  return /* @__PURE__ */ jsx78("div", { ...props, ref, className: ["mk-voice-dots", className].filter(Boolean).join(" ") });
+}
+
+// src/components/chart/use-chart.ts
+import { useRef as useRef77 } from "react";
+function useChart(create, data, callbacks, instanceRef) {
+  const ref = useRef77(null);
+  const instance = useRef77(null);
+  const format = useLatest(callbacks.formatValue);
+  const select = useLatest(callbacks.onSelect);
+  const formatted = callbacks.formatValue !== void 0;
+  const key = JSON.stringify(data);
+  const latest = useLatest(data);
+  const options = () => ({
+    ...latest.current,
+    formatValue: formatted ? (value) => format.current?.(value) ?? String(value) : void 0,
+    onSelect: (...args) => select.current?.(...args)
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = create(ref.current, options());
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, []);
+  const first = useRef77(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    instance.current?.update(options());
+  }, [key, formatted]);
+  return ref;
+}
+
+// src/components/pie-chart/react.tsx
+import { jsx as jsx79 } from "react/jsx-runtime";
+function PieChart({ data, donut, gap, size, label, totalLabel, legend, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }) {
+  const ref = useChart(createPieChart, { data, donut, gap, size, label, totalLabel, legend, emptyLabel }, { formatValue, onSelect }, instanceRef);
+  return /* @__PURE__ */ jsx79("div", { ...props, ref, className: ["mk-chart mk-pie-chart", className].filter(Boolean).join(" ") });
+}
+
+// src/components/radar-chart/react.tsx
+import { jsx as jsx80 } from "react/jsx-runtime";
+function RadarChart({ axes, series, max, levels, grid, size, label, legend, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }) {
+  const ref = useChart(createRadarChart, { axes, series, max, levels, grid, size, label, legend, emptyLabel }, { formatValue, onSelect }, instanceRef);
+  return /* @__PURE__ */ jsx80("div", { ...props, ref, className: ["mk-chart mk-radar-chart", className].filter(Boolean).join(" ") });
+}
+
+// src/components/radial-chart/react.tsx
+import { jsx as jsx81 } from "react/jsx-runtime";
+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(" ") });
+}
+
+// src/components/sankey-chart/react.tsx
+import { jsx as jsx82 } from "react/jsx-runtime";
+function SankeyChart({ nodes, links, height, nodeWidth, nodePadding, label, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }) {
+  const ref = useChart(createSankeyChart, { nodes, links, height, nodeWidth, nodePadding, label, emptyLabel }, { formatValue, onSelect }, instanceRef);
+  return /* @__PURE__ */ jsx82("div", { ...props, ref, className: ["mk-chart mk-sankey-chart", className].filter(Boolean).join(" ") });
+}
+
+// src/components/heatmap-chart/react.tsx
+import { jsx as jsx83 } from "react/jsx-runtime";
+function HeatmapChart({ data, end, weeks, firstDay, locale, levels, color, unit, label, legend, formatValue, emptyLabel, onSelect, instanceRef, className, ...props }) {
+  const ref = useChart(createHeatmapChart, { data, end, weeks, firstDay, locale, levels, color, unit, label, legend, emptyLabel }, { formatValue, onSelect }, instanceRef);
+  return /* @__PURE__ */ jsx83("div", { ...props, ref, className: ["mk-heatmap-chart", className].filter(Boolean).join(" ") });
+}
+
+// src/components/orbit-menu/react.tsx
+import { useRef as useRef78 } from "react";
+import { jsx as jsx84, jsxs as jsxs23 } from "react/jsx-runtime";
+function OrbitMenu({ items, label = "Men\xFA", radius, start, closeOnSelect, onToggle, onSelect, instanceRef, className, ...props }) {
+  const ref = useRef78(null);
+  const toggled = useLatest(onToggle);
+  const selected = useLatest(onSelect);
+  const keys = items.map((item) => item.value).join("\0");
+  useIsomorphicLayoutEffect(() => {
+    const created = createOrbitMenu(ref.current, { radius, start, closeOnSelect, onToggle: (open) => toggled.current?.(open), onSelect: (value) => selected.current?.(value) });
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [keys, radius, start, closeOnSelect]);
+  return /* @__PURE__ */ jsxs23("div", { ...props, ref, className: ["mk-orbit-menu", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx84("button", { type: "button", "data-mk-orbit-toggle": "", "aria-label": label }),
+    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))
+  ] });
+}
 export {
   ANIMATIONS,
   ActivityFeed,
+  AddToCart,
   AnimatedNumber,
   Attachment,
+  BidirectionalSlider,
   Breadcrumb,
   Calendar,
   Chart,
@@ -3230,6 +3524,7 @@ export {
   FilterBuilder,
   FlipGroup,
   Frost,
+  HeatmapChart,
   HoldConfirm,
   HoverCard,
   ImagePreview,
@@ -3246,19 +3541,28 @@ export {
   MkIcon,
   MultiSelect,
   NAV_STYLES,
+  NAV_STYLE_ALIASES,
   Nav,
   NotificationBell,
+  OrbitMenu,
   Pagination,
   PasswordStrength,
+  PieChart,
+  PillButton,
   Popover,
   Progress,
   Quantity,
   Questionnaire,
+  RadarChart,
+  RadialChart,
   RangeCalendar,
   RangeSlider,
   ResizablePanel,
   RichTextEditor,
+  SankeyChart,
   ScratchCard,
+  ScrollIsland,
+  Select,
   Skeleton,
   SlotPicker,
   SlotText,
@@ -3274,10 +3578,12 @@ export {
   TimeField,
   Timeline,
   Toaster,
+  Toolbar,
   Tooltip,
   Trailer,
   TreeView,
   VirtualList,
+  VoiceDots,
   animate,
   clearToasts,
   confetti,
@@ -3287,6 +3593,7 @@ export {
   pileLayers,
   pileStyle,
   themeHeadScript,
+  toNavStyle,
   toast,
   useActionButton,
   useCardDock,