@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/shared/components-4bwsd46w.js

@@ -0,0 +1,71 @@
+"use client";
+// lib/row-order.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState
+} from "react";
+var EMPTY = new Map;
+var RowOrderContext2 = createContext(null);
+var before = (a, b) => a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+function number(slots) {
+  let next = 0;
+  for (const slot of slots.values())
+    if (slot.explicit !== undefined)
+      next = Math.max(next, slot.explicit + 1);
+  const order = new Map;
+  let first;
+  for (const [id, slot] of [...slots].sort(([, a], [, b]) => before(a, b))) {
+    if (slot.explicit !== undefined)
+      continue;
+    if (!slot.gap)
+      first ??= next;
+    order.set(id, next++);
+  }
+  return { order, first };
+}
+function same({ order: a, first: firstA }, { order: b, first: firstB }) {
+  if (firstA !== firstB || a.size !== b.size)
+    return false;
+  for (const [id, index] of a)
+    if (b.get(id) !== index)
+      return false;
+  return true;
+}
+function useRowOrder2() {
+  const slots = useRef(new Map);
+  const [numbering, setNumbering] = useState({ order: EMPTY });
+  const [, changed] = useReducer((n) => n + 1, 0);
+  const register = useCallback((id, slot) => {
+    slots.current.set(id, slot);
+    changed();
+    return () => {
+      slots.current.delete(id);
+      changed();
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const next = number(slots.current);
+    setNumbering((prev) => same(prev, next) ? prev : next);
+  });
+  return useMemo(() => ({ register, ...numbering }), [register, numbering]);
+}
+function useRowSlot2(ref, explicit, gap) {
+  const ctx = useContext(RowOrderContext2);
+  const id = useId();
+  const register = ctx?.register;
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!register || !element)
+      return;
+    return register(id, { element, explicit, gap });
+  }, [register, id, explicit, gap, ref]);
+  return { index: explicit ?? ctx?.order.get(id), firstRow: ctx?.first };
+}
+export { RowOrderContext2, useRowOrder2, useRowSlot2 };

package/dist/shared/components-4n4f5m3e.js

@@ -0,0 +1,297 @@
+"use client";
+import {
+  cn2
+} from "./components-jcnjay5g.js";
+import {
+  GooIndicator2
+} from "./components-pw06rbxq.js";
+import {
+  FluidHoverHighlight2
+} from "./components-qdm3yh26.js";
+import {
+  useIcon2
+} from "./components-jqpefjsn.js";
+import {
+  useShape2
+} from "./components-78x40gee.js";
+import {
+  useSize2
+} from "./components-h83az0bz.js";
+import {
+  useControllableState2
+} from "./components-tz1fv35x.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-yhgq0qxx.js";
+import {
+  SizeProvider2
+} from "./components-dcc02hs2.js";
+import {
+  button_default
+} from "./components-7d4r7hh1.js";
+import {
+  Input2
+} from "./components-y1w3a6wx.js";
+import {
+  select_default
+} from "./components-6j2fh74k.js";
+
+// components/navigation/pagination/index.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SQUARE = { default: "min-w-9", compact: "min-w-7" };
+var FIELD = { default: "w-14", compact: "w-12" };
+function slots(page, total, siblings) {
+  const shown = new Set([1, total]);
+  for (let p = page - siblings;p <= page + siblings; p++)
+    if (p >= 1 && p <= total)
+      shown.add(p);
+  const result = [];
+  let previous = 0;
+  for (const p of [...shown].sort((a, b) => a - b)) {
+    if (p - previous === 2)
+      result.push(p - 1);
+    else if (p - previous > 2)
+      result.push("gap");
+    result.push(p);
+    previous = p;
+  }
+  return result;
+}
+function PageButton({ page, index, current, lit, disabled, register, onSelect }) {
+  const ref = useRef(null);
+  const size = useSize2();
+  const shape = useShape2();
+  useRegisterFluidHoverItem2(register, index, ref);
+  return /* @__PURE__ */ jsx("button", {
+    ref,
+    type: "button",
+    "aria-current": current ? "page" : undefined,
+    disabled,
+    onClick: () => onSelect(page),
+    className: cn2("relative z-10 flex cursor-pointer items-center justify-center px-2 tabular-nums outline-none transition-[opacity] duration-fast focus-visible:ring-1 focus-visible:ring-focus-ring disabled:pointer-events-none disabled:opacity-50", size.control, SQUARE[size.variant], shape.button),
+    children: /* @__PURE__ */ jsxs("span", {
+      className: cn2("inline-grid", size.text),
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          "aria-hidden": "true",
+          className: "invisible col-start-1 row-start-1 weight-semibold",
+          children: page
+        }),
+        /* @__PURE__ */ jsx("span", {
+          className: cn2("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast", current || lit ? "text-foreground" : "text-muted-foreground", current ? "weight-semibold" : "weight-normal"),
+          children: page
+        })
+      ]
+    })
+  });
+}
+function PageStrip({ current, total, siblings, disabled, onSelect }) {
+  const size = useSize2();
+  const shape = useShape2();
+  const containerRef = useRef(null);
+  const hover = useFluidHover2(containerRef, { axis: "x" });
+  const list = slots(current, total, siblings);
+  const pages = list.filter((slot) => slot !== "gap");
+  const measured = hover.isMeasured ? hover.itemRects[pages.indexOf(current)] : undefined;
+  const lastRect = useRef(measured);
+  if (measured)
+    lastRect.current = measured;
+  return /* @__PURE__ */ jsxs("div", {
+    ref: containerRef,
+    ...hover.handlers,
+    className: "relative flex items-center gap-1",
+    children: [
+      lastRect.current && /* @__PURE__ */ jsx(GooIndicator2, {
+        rect: lastRect.current,
+        className: cn2("bg-accent", shape.bg),
+        opacity: disabled ? 0.5 : 1
+      }),
+      /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+        hover,
+        hidden: disabled,
+        className: shape.bg
+      }),
+      list.map((slot, i) => slot === "gap" ? /* @__PURE__ */ jsx("span", {
+        "aria-hidden": "true",
+        className: cn2("flex items-center justify-center text-muted-foreground", size.control, SQUARE[size.variant], size.text),
+        children: "…"
+      }, `gap-${i}`) : /* @__PURE__ */ jsx(PageButton, {
+        page: slot,
+        index: pages.indexOf(slot),
+        current: slot === current,
+        lit: hover.activeIndex === pages.indexOf(slot),
+        disabled,
+        register: hover.registerItem,
+        onSelect
+      }, slot))
+    ]
+  });
+}
+function PageField({ current, total, disabled, label, onSelect }) {
+  const size = useSize2();
+  const [draft, setDraft] = useState(String(current));
+  useEffect(() => setDraft(String(current)), [current]);
+  const commit = () => {
+    const page = Number(draft);
+    if (Number.isInteger(page) && page >= 1 && page <= total)
+      onSelect(page);
+    else
+      setDraft(String(current));
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Enter")
+      commit();
+    if (event.key === "Escape")
+      setDraft(String(current));
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn2("flex items-center", size.gap),
+    children: [
+      /* @__PURE__ */ jsx(Input2, {
+        variant: "bordered",
+        inputMode: "numeric",
+        "aria-label": label,
+        value: draft,
+        onChange: (value) => setDraft(value.replace(/\D/g, "")),
+        onKeyDown,
+        onBlur: commit,
+        disabled: disabled || total <= 1,
+        className: cn2("tabular-nums", FIELD[size.variant])
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        className: cn2("whitespace-nowrap tabular-nums text-muted-foreground", size.text),
+        children: [
+          "/ ",
+          total
+        ]
+      })
+    ]
+  });
+}
+function Step({ icon, label, disabled, onClick }) {
+  const size = useSize2();
+  const Icon = useIcon2(icon);
+  return /* @__PURE__ */ jsx(button_default, {
+    variant: "ghost",
+    size: size.variant === "compact" ? "icon-compact" : "icon",
+    "aria-label": label,
+    disabled,
+    onClick,
+    children: /* @__PURE__ */ jsx(Icon, {})
+  });
+}
+function Pagination2({
+  pageCount,
+  page,
+  defaultPage = 1,
+  onPageChange,
+  variant = "pages",
+  siblings = 1,
+  edges: edgesProp,
+  pageSize,
+  defaultPageSize,
+  pageSizes = [10, 20, 30, 40, 50],
+  onPageSizeChange,
+  disabled = false,
+  label = "Pagination",
+  firstLabel = "First page",
+  previousLabel = "Previous page",
+  nextLabel = "Next page",
+  lastLabel = "Last page",
+  pageLabel = "Page",
+  pageSizeLabel = "Rows per page",
+  size: sizeProp,
+  className
+}) {
+  const [requested, setCurrent] = useControllableState2(page, defaultPage, onPageChange);
+  const [rows, setRows] = useControllableState2(pageSize, defaultPageSize ?? pageSizes[0] ?? 10, onPageSizeChange);
+  const size = useSize2(sizeProp);
+  const total = Math.max(1, pageCount);
+  const current = Math.min(Math.max(1, requested), total);
+  const edges = edgesProp ?? variant === "input";
+  const withPageSize = pageSize !== undefined || defaultPageSize !== undefined;
+  const nav = /* @__PURE__ */ jsxs("nav", {
+    "aria-label": label,
+    className: cn2("flex flex-wrap items-center", size.gap, className),
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: cn2("flex items-center", size.gap),
+        children: [
+          edges && /* @__PURE__ */ jsx(Step, {
+            icon: "chevrons-left",
+            label: firstLabel,
+            disabled: disabled || current <= 1,
+            onClick: () => setCurrent(1)
+          }),
+          /* @__PURE__ */ jsx(Step, {
+            icon: "chevron-left",
+            label: previousLabel,
+            disabled: disabled || current <= 1,
+            onClick: () => setCurrent(current - 1)
+          }),
+          variant === "input" ? /* @__PURE__ */ jsx(PageField, {
+            current,
+            total,
+            disabled,
+            label: pageLabel,
+            onSelect: setCurrent
+          }) : /* @__PURE__ */ jsx(PageStrip, {
+            current,
+            total,
+            siblings,
+            disabled,
+            onSelect: setCurrent
+          }),
+          /* @__PURE__ */ jsx(Step, {
+            icon: "chevron-right",
+            label: nextLabel,
+            disabled: disabled || current >= total,
+            onClick: () => setCurrent(current + 1)
+          }),
+          edges && /* @__PURE__ */ jsx(Step, {
+            icon: "chevrons-right",
+            label: lastLabel,
+            disabled: disabled || current >= total,
+            onClick: () => setCurrent(total)
+          })
+        ]
+      }),
+      withPageSize && /* @__PURE__ */ jsxs("div", {
+        className: cn2("flex items-center", size.gap),
+        children: [
+          pageSizeLabel && /* @__PURE__ */ jsx("span", {
+            className: cn2("whitespace-nowrap text-muted-foreground", size.text),
+            children: pageSizeLabel
+          }),
+          /* @__PURE__ */ jsxs(select_default, {
+            value: String(rows),
+            onValueChange: (value) => setRows(Number(value)),
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx(select_default.Trigger, {
+                "aria-label": pageSizeLabel || undefined,
+                className: "min-w-0 tabular-nums"
+              }),
+              /* @__PURE__ */ jsx(select_default.Content, {
+                children: pageSizes.map((option, i) => /* @__PURE__ */ jsx(select_default.Item, {
+                  index: i,
+                  value: String(option),
+                  children: option
+                }, option))
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+  return sizeProp ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size: sizeProp,
+    children: nav
+  }) : nav;
+}
+var pagination_default = Pagination2;
+
+export { Pagination2, pagination_default };

package/dist/shared/{components-0q0sqfh4.js → components-4y816hwp.js}

@@ -1,40 +1,18 @@
+"use client";
 import {
-  useReduceMotion
-} from "./components-men63rwj.js";
+  MorphPartInOverlay2
+} from "./components-b1e239g3.js";
 import {
-  GOO_MATRIX
-} from "./components-hqeq3w9q.js";
+  GOO_MATRIX2
+} from "./components-awra5sff.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
-import {
-  spring2
-} from "./components-1v7rxytx.js";
-
-// lib/morph-part.tsx
-import { motion } from "motion/react";
-import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
-var MorphPartScope = createContext(null);
-var MorphPartInOverlay = createContext(false);
-var { exit: _exit, ...enter } = spring2.slow;
-function MorphPart2({ id, className, children }) {
-  const scope = useContext(MorphPartScope);
-  const inOverlay = useContext(MorphPartInOverlay);
-  const reduced = useReduceMotion();
-  const layoutId = scope && !reduced && (scope.open || !inOverlay) ? `${scope.id}-${id}` : undefined;
-  return /* @__PURE__ */ jsx(motion.div, {
-    layoutId,
-    transition: enter,
-    className,
-    children
-  });
-}
+} from "./components-jcnjay5g.js";
 
 // lib/morph-layers.tsx
-import { jsx as jsx2, jsxs, Fragment } from "react/jsx-runtime";
-function GooFilter({ id, blur, blurRef, outlineRef }) {
-  return /* @__PURE__ */ jsx2("svg", {
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function GooFilter2({ id, blur, blurRef, outlineRef }) {
+  return /* @__PURE__ */ jsx("svg", {
     "aria-hidden": true,
     className: "absolute size-0",
     children: /* @__PURE__ */ jsxs("filter", {
@@ -45,19 +23,19 @@ function GooFilter({ id, blur, blurRef, outlineRef }) {
       height: "200%",
       colorInterpolationFilters: "sRGB",
       children: [
-        /* @__PURE__ */ jsx2("feGaussianBlur", {
+        /* @__PURE__ */ jsx("feGaussianBlur", {
           ref: blurRef,
           in: "SourceGraphic",
           stdDeviation: blur,
           result: "blur"
         }),
-        /* @__PURE__ */ jsx2("feColorMatrix", {
+        /* @__PURE__ */ jsx("feColorMatrix", {
           in: "blur",
           mode: "matrix",
-          values: GOO_MATRIX,
+          values: GOO_MATRIX2,
           result: "goo"
         }),
-        /* @__PURE__ */ jsx2("feComposite", {
+        /* @__PURE__ */ jsx("feComposite", {
           in: "SourceGraphic",
           in2: "goo",
           operator: "atop",
@@ -65,27 +43,27 @@ function GooFilter({ id, blur, blurRef, outlineRef }) {
         }),
         outlineRef && /* @__PURE__ */ jsxs(Fragment, {
           children: [
-            /* @__PURE__ */ jsx2("feMorphology", {
+            /* @__PURE__ */ jsx("feMorphology", {
               in: "goo",
               operator: "dilate",
               radius: 1,
               result: "grown"
             }),
-            /* @__PURE__ */ jsx2("feFlood", {
+            /* @__PURE__ */ jsx("feFlood", {
               ref: outlineRef,
               className: "[flood-color:var(--shadow-color)]"
             }),
-            /* @__PURE__ */ jsx2("feComposite", {
+            /* @__PURE__ */ jsx("feComposite", {
               in2: "grown",
               operator: "in",
               result: "outline"
             }),
             /* @__PURE__ */ jsxs("feMerge", {
               children: [
-                /* @__PURE__ */ jsx2("feMergeNode", {
+                /* @__PURE__ */ jsx("feMergeNode", {
                   in: "outline"
                 }),
-                /* @__PURE__ */ jsx2("feMergeNode", {
+                /* @__PURE__ */ jsx("feMergeNode", {
                   in: "body"
                 })
               ]
@@ -96,11 +74,11 @@ function GooFilter({ id, blur, blurRef, outlineRef }) {
     })
   });
 }
-function MorphSurface({ morph, bg, shadow, radius, className, children }) {
+function MorphSurface2({ morph, bg, shadow, radius, className, children }) {
   const { refs, gooId, effect } = morph;
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      effect === "goo" && /* @__PURE__ */ jsx2(GooFilter, {
+      effect === "goo" && /* @__PURE__ */ jsx(GooFilter2, {
         id: gooId,
         blurRef: refs.blur,
         outlineRef: refs.outline
@@ -111,30 +89,30 @@ function MorphSurface({ morph, bg, shadow, radius, className, children }) {
         className: "pointer-events-none absolute hidden",
         style: effect === "goo" ? { filter: `url(#${gooId})` } : undefined,
         children: [
-          effect === "goo" && /* @__PURE__ */ jsx2("div", {
+          effect === "goo" && /* @__PURE__ */ jsx("div", {
             ref: refs.copy,
             className: cn2("absolute", bg)
           }),
-          /* @__PURE__ */ jsx2("div", {
+          /* @__PURE__ */ jsx("div", {
             ref: refs.shape,
             className: cn2("absolute", bg)
           })
         ]
       }),
-      /* @__PURE__ */ jsx2("div", {
+      /* @__PURE__ */ jsx("div", {
         ref: refs.bg,
         "aria-hidden": true,
         className: cn2("pointer-events-none absolute inset-0", bg, radius)
       }),
-      shadow && /* @__PURE__ */ jsx2("div", {
+      shadow && /* @__PURE__ */ jsx("div", {
         ref: refs.shadow,
         "aria-hidden": true,
         className: cn2("pointer-events-none absolute inset-0", shadow, radius)
       }),
-      /* @__PURE__ */ jsx2("div", {
+      /* @__PURE__ */ jsx("div", {
         ref: refs.content,
         className: cn2("relative", className),
-        children: /* @__PURE__ */ jsx2(MorphPartInOverlay.Provider, {
+        children: /* @__PURE__ */ jsx(MorphPartInOverlay2.Provider, {
           value: true,
           children
         })
@@ -143,4 +121,4 @@ function MorphSurface({ morph, bg, shadow, radius, className, children }) {
   });
 }
 
-export { MorphPartScope, MorphPart2, GooFilter, MorphSurface };
+export { GooFilter2, MorphSurface2 };