@yewdiel21/motion-kit 0.9.1 → 0.10.0

package/dist/react/index.js

@@ -7,6 +7,7 @@ import {
 } from "../chunk-J6OCFNGU.js";
 import {
   captureLayout,
+  createActionButton,
   createCardDock,
   createCascade,
   createContrast,
@@ -16,12 +17,18 @@ import {
   createDetails,
   createDockPill,
   createDragRuler,
+  createEditorialReveal,
   createFillText,
+  createFilmHero,
   createFitText,
   createFlow,
+  createFontCycle,
   createFrameZoom,
+  createImageZoom,
   createInfiniteReel,
+  createJoinedCta,
   createLetters,
+  createLocalClock,
   createMarquee,
   createMaskText,
   createParallax,
@@ -32,20 +39,24 @@ import {
   createRepelBento,
   createReveal,
   createRotator,
+  createScrollDock,
   createSlotText,
   createSnapStrip,
   createSortable,
   createSpringCards,
+  createSticker,
   createStretchFooter,
   createTabs,
   createTextRoll,
+  createThumbnailNav,
   createTicketMenu,
+  createWeightHover,
   createWords,
   moveItem,
   pileLayers,
   pileStyle,
   reflowLayout
-} from "../chunk-XDWBVFHQ.js";
+} from "../chunk-XAKC2QY7.js";
 import {
   ICON_PATHS,
   NAV_STYLES,
@@ -63,12 +74,20 @@ import {
   morphPendingToReply,
   revealShell,
   toast
-} from "../chunk-BFC27F2G.js";
+} from "../chunk-IKQ5FODN.js";
 import {
+  createCalendar,
   createDialog,
+  createHoverCard,
+  createInputOtp,
   createMenu,
+  createPagination,
+  createQuantity,
+  createSlotPicker,
+  createStudioDock,
+  createTrailer,
   tweenNumber
-} from "../chunk-JQMJQSXD.js";
+} from "../chunk-TFNRIZHU.js";
 import {
   DEFAULT_THEME,
   MK_THEME_HEAD_SCRIPT,
@@ -888,15 +907,325 @@ function Island({
     ] })
   ] });
 }
+
+// src/components/quantity/react.tsx
+import { useRef as useRef14 } from "react";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+function Quantity({ min, max, step, value, disabled, onChange, label = "Cantidad", decreaseLabel = "Disminuir", increaseLabel = "Aumentar", name, className, ...props }) {
+  const ref = useRef14(null);
+  const edited = useRef14(void 0);
+  const change = useLatest(onChange);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createQuantity(ref.current, { min, max, step, value: value ?? edited.current, disabled, onChange: (n) => change.current?.(n) });
+    return () => {
+      edited.current = instance.value;
+      instance.destroy();
+    };
+  }, [min, max, step, value, disabled]);
+  return /* @__PURE__ */ jsxs6("div", { ...props, ref, className: ["mk-quantity", className].filter(Boolean).join(" "), role: "group", "aria-label": label, children: [
+    /* @__PURE__ */ jsx16("button", { type: "button", "data-mk-quantity-decrease": true, "aria-label": decreaseLabel, children: "\u2212" }),
+    /* @__PURE__ */ jsx16("input", { "data-mk-quantity-input": true, type: "number", "aria-label": label, name, defaultValue: value ?? min ?? 1, disabled }),
+    /* @__PURE__ */ jsx16("button", { type: "button", "data-mk-quantity-increase": true, "aria-label": increaseLabel, children: "+" })
+  ] });
+}
+
+// src/components/pagination/react.tsx
+import { useRef as useRef15 } from "react";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+function Pagination({ totalPages, page, siblings, pageLabel, onChange, previousLabel = "P\xE1gina anterior", nextLabel = "P\xE1gina siguiente", className, ...props }) {
+  const ref = useRef15(null);
+  const selected = useRef15(void 0);
+  const change = useLatest(onChange);
+  const label = useLatest(pageLabel);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createPagination(ref.current, { totalPages, page: page ?? selected.current, siblings, pageLabel: (n) => label.current?.(n) ?? `P\xE1gina ${n}`, onChange: (n) => change.current?.(n) });
+    return () => {
+      selected.current = instance.page;
+      instance.destroy();
+    };
+  }, [totalPages, page, siblings, pageLabel]);
+  return /* @__PURE__ */ jsxs7("nav", { "aria-label": "Paginaci\xF3n", ...props, ref, className: ["mk-pagination", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx17("button", { type: "button", "data-mk-pagination-previous": true, "aria-label": previousLabel, children: "\u2190" }),
+    /* @__PURE__ */ jsx17("span", { "data-mk-pagination-pages": true }),
+    /* @__PURE__ */ jsx17("button", { type: "button", "data-mk-pagination-next": true, "aria-label": nextLabel, children: "\u2192" })
+  ] });
+}
+
+// src/components/hover-card/react.tsx
+import { useRef as useRef16 } from "react";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+function HoverCard({ trigger, children, triggerLabel, panelLabel = "Vista previa", openDelay, closeDelay, placement, onOpenChange, className, ...props }) {
+  const ref = useRef16(null);
+  const change = useLatest(onOpenChange);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createHoverCard(ref.current, { openDelay, closeDelay, placement, onOpenChange: (n) => change.current?.(n) });
+    return () => instance.destroy();
+  }, [openDelay, closeDelay, placement]);
+  return /* @__PURE__ */ jsxs8("div", { ...props, ref, className: ["mk-hover-card", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx18("button", { type: "button", className: "mk-button mk-button--tonal", "data-mk-hover-trigger": true, "aria-label": triggerLabel, "aria-expanded": "false", children: trigger }),
+    /* @__PURE__ */ jsx18("div", { "data-mk-hover-panel": true, role: "region", "aria-label": panelLabel, hidden: true, children })
+  ] });
+}
+
+// src/components/input-otp/react.tsx
+import { useRef as useRef17 } from "react";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+function InputOtp({ length, value, defaultValue, mask, onChange, onComplete, label = "C\xF3digo de verificaci\xF3n", name, disabled, required, invalid, className, ...props }) {
+  const ref = useRef17(null);
+  const edited = useRef17(void 0);
+  const change = useLatest(onChange);
+  const complete = useLatest(onComplete);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createInputOtp(ref.current, { length, value: value ?? edited.current, mask, onChange: (n) => change.current?.(n), onComplete: (n) => complete.current?.(n) });
+    return () => {
+      edited.current = instance.value;
+      instance.destroy();
+    };
+  }, [length, value, mask]);
+  return /* @__PURE__ */ jsxs9("div", { ...props, ref, className: ["mk-input-otp", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx19("span", { "data-mk-otp-slots": true, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx19("input", { "data-mk-otp-input": true, type: "text", "aria-label": label, name, defaultValue: value ?? defaultValue ?? "", disabled, required, "aria-invalid": invalid || void 0 })
+  ] });
+}
+
+// src/react/use-joined-cta.ts
+var useJoinedCta = (ref, options, deps) => useRecipe(ref, createJoinedCta, options, deps);
+
+// src/react/use-image-zoom.ts
+var useImageZoom = (ref, options, deps) => useRecipe(ref, createImageZoom, options, deps);
+
+// src/react/use-font-cycle.ts
+var useFontCycle = (ref, options, deps) => useRecipe(ref, createFontCycle, options, deps);
+
+// src/react/use-thumbnail-nav.ts
+var useThumbnailNav = (ref, options, deps) => useRecipe(ref, createThumbnailNav, options, deps);
+
+// src/react/use-action-button.ts
+var useActionButton = (ref, options, deps) => useRecipe(ref, createActionButton, options, deps);
+
+// src/react/use-film-hero.ts
+var useFilmHero = (ref, options, deps) => useRecipe(ref, createFilmHero, options, deps);
+
+// src/react/use-editorial-reveal.ts
+function useEditorialReveal(ref, options = {}, deps) {
+  return useRecipe(ref, createEditorialReveal, options, deps);
+}
+
+// src/react/use-studio-dock.ts
+function useStudioDock(ref, options = {}, deps) {
+  const change = useLatest(options.onChange);
+  return useRecipe(ref, createStudioDock, { ...options, onChange: (state) => change.current?.(state) }, deps);
+}
+
+// src/react/use-trailer.ts
+var useTrailer = (ref, options, deps) => useRecipe(ref, createTrailer, options, deps);
+
+// src/components/studio-dock/react.tsx
+import { useRef as useRef18 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+function StudioDock({ duration, ease, focusOnOpen, trapFocus, onChange, fixed = false, instanceRef, className, children, ...props }) {
+  const ref = useRef18(null);
+  const change = useLatest(onChange);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createStudioDock(ref.current, { duration, ease, focusOnOpen, trapFocus, onChange: (state) => change.current?.(state) });
+    if (instanceRef) instanceRef.current = instance;
+    return () => {
+      instance.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [duration, ease, focusOnOpen, trapFocus]);
+  return /* @__PURE__ */ jsx20("div", { ...props, ref, className: ["mk-studio-dock", fixed && "mk-studio-dock--fixed", className].filter(Boolean).join(" "), children });
+}
+
+// src/components/trailer/react.tsx
+import { useRef as useRef19 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+function Trailer({ options, className, children, ...props }) {
+  const ref = useRef19(null);
+  useRecipe(ref, createTrailer, options);
+  return /* @__PURE__ */ jsx21("dialog", { ...props, ref, className: ["mk-trailer", className].filter(Boolean).join(" "), children });
+}
+
+// src/components/calendar/react.tsx
+import { useRef as useRef20 } from "react";
+import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+function Calendar({
+  date,
+  view,
+  firstDay,
+  locale,
+  events,
+  maxEvents,
+  selected,
+  today,
+  labels,
+  onSelect,
+  onEventClick,
+  onNavigate,
+  hideViews,
+  className,
+  ...props
+}) {
+  const ref = useRef20(null);
+  const instance = useRef20(null);
+  const kept = useRef20({});
+  const select = useLatest(onSelect);
+  const eventClick = useLatest(onEventClick);
+  const navigate = useLatest(onNavigate);
+  useIsomorphicLayoutEffect(() => {
+    const created = createCalendar(ref.current, {
+      date: date ?? kept.current.date,
+      view: view ?? kept.current.view,
+      selected: selected !== void 0 ? selected : kept.current.selected,
+      firstDay,
+      locale,
+      events,
+      maxEvents,
+      today,
+      labels,
+      onSelect: (d) => select.current?.(d),
+      onEventClick: (e) => eventClick.current?.(e),
+      onNavigate: (r) => navigate.current?.(r)
+    });
+    instance.current = created;
+    return () => {
+      kept.current = { date: created.date, view: created.view, selected: created.selected };
+      created.destroy();
+      instance.current = null;
+    };
+  }, [date, view, firstDay, locale, maxEvents, today]);
+  const eventsKey = JSON.stringify(events ?? []);
+  const firstEvents = useRef20(true);
+  useIsomorphicLayoutEffect(() => {
+    if (firstEvents.current) {
+      firstEvents.current = false;
+      return;
+    }
+    instance.current?.setEvents(events ?? []);
+  }, [eventsKey]);
+  useIsomorphicLayoutEffect(() => {
+    if (selected !== void 0) instance.current?.select(selected, false);
+  }, [selected]);
+  return /* @__PURE__ */ jsxs10("div", { ...props, ref, className: ["mk-calendar", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs10("div", { className: "mk-calendar__header", children: [
+      /* @__PURE__ */ jsx22("h3", { className: "mk-calendar__title", "data-mk-calendar-title": true }),
+      !hideViews && /* @__PURE__ */ jsxs10("div", { className: "mk-calendar__views", role: "group", "aria-label": "Vista", children: [
+        /* @__PURE__ */ jsx22("button", { type: "button", "data-mk-calendar-view": "month", children: labels?.month ?? "Mes" }),
+        /* @__PURE__ */ jsx22("button", { type: "button", "data-mk-calendar-view": "week", children: labels?.week ?? "Semana" })
+      ] }),
+      /* @__PURE__ */ jsx22("button", { type: "button", className: "mk-calendar__nav", "data-mk-calendar-prev": true, "aria-label": labels?.previous ?? "Anterior", children: "\u2190" }),
+      /* @__PURE__ */ jsx22("button", { type: "button", className: "mk-calendar__nav", "data-mk-calendar-today": true, children: labels?.today ?? "Hoy" }),
+      /* @__PURE__ */ jsx22("button", { type: "button", className: "mk-calendar__nav", "data-mk-calendar-next": true, "aria-label": labels?.next ?? "Siguiente", children: "\u2192" })
+    ] }),
+    /* @__PURE__ */ jsx22("div", { "data-mk-calendar-grid": true })
+  ] });
+}
+
+// src/components/slot-picker/react.tsx
+import { useRef as useRef21 } from "react";
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+function SlotPicker({
+  date,
+  value,
+  slots,
+  min,
+  max,
+  closedDays,
+  isDisabled,
+  firstDay,
+  locale,
+  labels,
+  onChange,
+  onDateChange,
+  name,
+  actions,
+  className,
+  ...props
+}) {
+  const ref = useRef21(null);
+  const instance = useRef21(null);
+  const kept = useRef21(null);
+  const change = useLatest(onChange);
+  const dateChange = useLatest(onDateChange);
+  const disabledFn = useLatest(isDisabled);
+  const source = useLatest(slots);
+  const slotsKey = typeof slots === "function" ? "function" : JSON.stringify(slots ?? []);
+  const stable = () => {
+    const current = source.current;
+    return typeof current === "function" ? (d) => source.current(d) : current ?? [];
+  };
+  useIsomorphicLayoutEffect(() => {
+    const keep = kept.current;
+    const created = createSlotPicker(ref.current, {
+      date: date ?? (keep instanceof Date ? keep : void 0),
+      value: value !== void 0 ? value : typeof keep === "string" ? keep : void 0,
+      slots: stable(),
+      min,
+      max,
+      closedDays,
+      firstDay,
+      locale,
+      labels,
+      isDisabled: (d) => disabledFn.current?.(d) ?? false,
+      onChange: (v) => change.current?.(v),
+      onDateChange: (d) => dateChange.current?.(d)
+    });
+    instance.current = created;
+    return () => {
+      kept.current = created.value ?? created.date;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [date, value, min, max, firstDay, locale, JSON.stringify(closedDays ?? [])]);
+  const firstSlots = useRef21(true);
+  useIsomorphicLayoutEffect(() => {
+    if (firstSlots.current) {
+      firstSlots.current = false;
+      return;
+    }
+    instance.current?.setSlots(stable());
+  }, [slotsKey]);
+  return /* @__PURE__ */ jsxs11("div", { ...props, ref, className: ["mk-slot-picker", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs11("div", { className: "mk-slot-picker__calendar", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "mk-slot-picker__month", children: [
+        /* @__PURE__ */ jsx23("h3", { className: "mk-slot-picker__title", "data-mk-slot-title": true }),
+        /* @__PURE__ */ jsx23("button", { type: "button", className: "mk-slot-picker__nav", "data-mk-slot-prev": true, "aria-label": labels?.previous ?? "Mes anterior", children: "\u2190" }),
+        /* @__PURE__ */ jsx23("button", { type: "button", className: "mk-slot-picker__nav", "data-mk-slot-next": true, "aria-label": labels?.next ?? "Mes siguiente", children: "\u2192" })
+      ] }),
+      /* @__PURE__ */ jsx23("div", { "data-mk-slot-days": true })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: "mk-slot-picker__panel", children: [
+      /* @__PURE__ */ jsx23("p", { className: "mk-slot-picker__heading", "data-mk-slot-heading": true }),
+      /* @__PURE__ */ jsx23("div", { "data-mk-slot-times": true }),
+      name && /* @__PURE__ */ jsx23("input", { type: "hidden", name, "data-mk-slot-value": true }),
+      actions && /* @__PURE__ */ jsx23("div", { className: "mk-slot-picker__actions", children: actions })
+    ] })
+  ] });
+}
+
+// src/react/use-weight-hover.ts
+var useWeightHover = (ref, options, deps) => useRecipe(ref, createWeightHover, options, deps);
+
+// src/react/use-sticker.ts
+var useSticker = (ref, options, deps) => useRecipe(ref, createSticker, options, deps);
+
+// src/react/use-scroll-dock.ts
+var useScrollDock = (ref, options, deps) => useRecipe(ref, createScrollDock, options, deps);
+
+// src/react/use-local-clock.ts
+var useLocalClock = (ref, options, deps) => useRecipe(ref, createLocalClock, options, deps);
 export {
   ANIMATIONS,
   AnimatedNumber,
+  Calendar,
   Chat,
   ChatBackground,
   Cursor,
   Dialog,
   FlipGroup,
   Frost,
+  HoverCard,
+  InputOtp,
   Island,
   IslandDots,
   MK_HEAD_SCRIPT,
@@ -905,11 +1234,16 @@ export {
   MkIcon,
   NAV_STYLES,
   Nav,
+  Pagination,
+  Quantity,
+  SlotPicker,
   SlotText,
   Steps,
+  StudioDock,
   ThemePicker,
   ThemeProvider,
   Toaster,
+  Trailer,
   animate,
   clearToasts,
   confetti,
@@ -920,6 +1254,7 @@ export {
   pileStyle,
   themeHeadScript,
   toast,
+  useActionButton,
   useCardDock,
   useCascade,
   useChat,
@@ -931,15 +1266,21 @@ export {
   useDialog,
   useDockPill,
   useDragRuler,
+  useEditorialReveal,
   useFillText,
+  useFilmHero,
   useFitText,
   useFlow,
+  useFontCycle,
   useFrameZoom,
+  useImageZoom,
   useInfiniteReel,
   useIsomorphicLayoutEffect,
+  useJoinedCta,
   useLatest,
   useLetters,
   useLiquidBlend,
+  useLocalClock,
   useMarquee,
   useMaskText,
   useMatcap,
@@ -953,17 +1294,23 @@ export {
   useRepelBento,
   useReveal,
   useRotator,
+  useScrollDock,
   useShaderBlur,
   useShaderGrain,
   useSlotText,
   useSnapStrip,
   useSortable,
   useSpringCards,
+  useSticker,
   useStretchFooter,
+  useStudioDock,
   useTabs,
   useTextRoll,
   useTheme,
+  useThumbnailNav,
   useTicketMenu,
+  useTrailer,
+  useWeightHover,
   useWords
 };
 //# sourceMappingURL=index.js.map