@justanarthur/modo-ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,124 @@
+import {
+  defaultLocale,
+  parseMonthText,
+  fieldLabel,
+  dividedColumns,
+  ScrollColumn
+} from "./components-9jvzzvt1.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  PickerShell,
+  PickerInput
+} from "./components-7btqt08d.js";
+
+// components/inputs/date-time/month-picker/index.tsx
+import { addYears, endOfYear, format, startOfMonth, startOfYear } from "date-fns";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MonthPicker2({
+  value: valueProp,
+  defaultValue = null,
+  onValueChange,
+  locale = defaultLocale,
+  placeholder,
+  startMonth,
+  endMonth,
+  disabled,
+  invalid,
+  size,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  id,
+  from,
+  effect,
+  hideSource,
+  tier,
+  className
+}) {
+  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
+  const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange);
+  const input = useRef(null);
+  const today = useMemo(() => new Date, []);
+  const start = startOfMonth(startMonth ?? startOfYear(addYears(today, -100)));
+  const end = startOfMonth(endMonth ?? endOfYear(addYears(today, 50)));
+  const year = value?.getFullYear() ?? today.getFullYear();
+  const formatted = value ? format(value, "LLLL y", { locale }) : "";
+  const pick = (date) => setValue(startOfMonth(date < start ? start : date > end ? end : date));
+  const readMonth = (text) => {
+    if (!text.trim()) {
+      setValue(null);
+      return true;
+    }
+    const read = parseMonthText(text, locale);
+    if (!read || read < start || read > end)
+      return false;
+    setValue(startOfMonth(read));
+    return true;
+  };
+  const months = useMemo(() => Array.from({ length: 12 }, (_, m) => ({
+    value: m,
+    label: format(new Date(2000, m, 1), "LLLL", { locale }),
+    disabled: new Date(year, m, 1) < start || new Date(year, m, 1) > end
+  })), [locale, year, start.getTime(), end.getTime()]);
+  const years = useMemo(() => Array.from({ length: end.getFullYear() - start.getFullYear() + 1 }, (_, i) => ({
+    value: start.getFullYear() + i,
+    label: String(start.getFullYear() + i)
+  })), [start.getFullYear(), end.getFullYear()]);
+  return /* @__PURE__ */ jsx(PickerShell, {
+    open,
+    onOpenChange: setOpen,
+    size,
+    invalid,
+    disabled,
+    icon: "calendar",
+    display: formatted,
+    placeholder,
+    header: /* @__PURE__ */ jsx(PickerInput, {
+      ref: input,
+      "aria-label": placeholder ?? "Month",
+      placeholder,
+      formatted,
+      onText: readMonth,
+      onEnter: () => setOpen(false),
+      className: "flex-1"
+    }),
+    initialFocus: input,
+    popupClassName: "w-[max(var(--anchor-width,0px),14rem)]",
+    id,
+    from,
+    effect,
+    hideSource,
+    tier,
+    className,
+    children: /* @__PURE__ */ jsxs("div", {
+      className: cn2(dividedColumns, "h-56"),
+      children: [
+        /* @__PURE__ */ jsx(ScrollColumn, {
+          label: fieldLabel(locale, "month"),
+          options: months,
+          value: value?.getMonth() ?? null,
+          follow: value?.getMonth() ?? today.getMonth(),
+          onValueChange: (m) => pick(new Date(year, m, 1)),
+          className: "min-w-0 flex-1"
+        }),
+        /* @__PURE__ */ jsx(ScrollColumn, {
+          label: fieldLabel(locale, "year"),
+          options: years,
+          value: value?.getFullYear() ?? null,
+          follow: year,
+          onValueChange: (y) => pick(new Date(y, value?.getMonth() ?? today.getMonth(), 1)),
+          className: "min-w-0 flex-1"
+        })
+      ]
+    })
+  });
+}
+var month_picker_default = MonthPicker2;
+
+export { MonthPicker2, month_picker_default };

package/dist/shared/components-59efxjd9.js

@@ -0,0 +1,298 @@
+// lib/use-fluid-hover.ts
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+function pickNearest({
+  axis,
+  point,
+  rects,
+  containerRect,
+  scroll,
+  border,
+  layoutSize,
+  isDisabled
+}) {
+  const scaleX = layoutSize.width > 0 ? containerRect.width / layoutSize.width : 1;
+  const scaleY = layoutSize.height > 0 ? containerRect.height / layoutSize.height : 1;
+  let closestIndex = null;
+  let closestDistance = Infinity;
+  let containingIndex = null;
+  for (let index = 0;index < rects.length; index++) {
+    const r = rects[index];
+    if (!r)
+      continue;
+    if (isDisabled?.(index))
+      continue;
+    if (axis === "xy") {
+      const left = containerRect.left + (border.x + r.left - scroll.x) * scaleX;
+      const top = containerRect.top + (border.y + r.top - scroll.y) * scaleY;
+      const width = r.width * scaleX;
+      const height = r.height * scaleY;
+      if (point.x >= left && point.x <= left + width && point.y >= top && point.y <= top + height) {
+        containingIndex = index;
+      }
+      const distance = Math.hypot(point.x - (left + width / 2), point.y - (top + height / 2));
+      if (distance < closestDistance) {
+        closestDistance = distance;
+        closestIndex = index;
+      }
+      continue;
+    }
+    const horizontal = axis === "x";
+    const mousePos = horizontal ? point.x : point.y;
+    const scale = horizontal ? scaleX : scaleY;
+    const itemStart = (horizontal ? containerRect.left : containerRect.top) + ((horizontal ? border.x : border.y) + (horizontal ? r.left : r.top) - (horizontal ? scroll.x : scroll.y)) * scale;
+    const itemSize = (horizontal ? r.width : r.height) * scale;
+    if (mousePos >= itemStart && mousePos <= itemStart + itemSize) {
+      containingIndex = index;
+    }
+    const distance = Math.abs(mousePos - (itemStart + itemSize / 2));
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestIndex = index;
+    }
+  }
+  return containingIndex ?? closestIndex;
+}
+var ACTIVE_ATTR = "data-fluid-hover-active";
+var ACTIVE_INDEX_ATTR = "data-fluid-hover-active-index";
+var ACTIVATOR_SELECTOR = "a[href], button, [role='menuitem'], [role='menuitemradio'], [role='menuitemcheckbox'], [role='option'], [role='radio'], [role='checkbox'], [role='tab'], [role='link'], [role='button']";
+function resolveActivator(element) {
+  if (element.matches(ACTIVATOR_SELECTOR) || element.hasAttribute("tabindex")) {
+    return element;
+  }
+  return element.querySelector(ACTIVATOR_SELECTOR) ?? element;
+}
+var measurementAttempts = 3;
+function useFluidHover2(containerRef, options = {}) {
+  const { axis = "y", isItemDisabled, gapClick = true } = options;
+  const gapClickMaxDistance = typeof gapClick === "object" ? gapClick.maxDistance ?? Infinity : Infinity;
+  const itemsRef = useRef(new Map);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const activeIndexRef = useRef(null);
+  activeIndexRef.current = activeIndex;
+  useEffect(() => {
+    const container = containerRef.current;
+    if (activeIndex === null)
+      container?.removeAttribute(ACTIVE_INDEX_ATTR);
+    else
+      container?.setAttribute(ACTIVE_INDEX_ATTR, String(activeIndex));
+    const active = activeIndex === null ? undefined : itemsRef.current.get(activeIndex);
+    active?.setAttribute(ACTIVE_ATTR, "");
+    return () => {
+      active?.removeAttribute(ACTIVE_ATTR);
+      if (activeIndex !== null)
+        itemsRef.current.get(activeIndex)?.removeAttribute(ACTIVE_ATTR);
+    };
+  }, [activeIndex, containerRef]);
+  const [itemRects, setItemRects] = useState([]);
+  const [isMeasured, setIsMeasured] = useState(false);
+  const itemRectsRef = useRef([]);
+  const sessionRef = useRef(0);
+  const rafIdRef = useRef(null);
+  const remeasureRafIdRef = useRef(null);
+  const runMeasurement = useCallback(() => {
+    const container = containerRef.current;
+    if (!container)
+      return false;
+    const rects = [];
+    let everyItemHasLayout = true;
+    itemsRef.current.forEach((element, index) => {
+      const hasLayoutBox = element.offsetParent !== null || element.offsetWidth > 0 || element.offsetHeight > 0;
+      if (!hasLayoutBox) {
+        everyItemHasLayout = false;
+        return;
+      }
+      let top = element.offsetTop;
+      let left = element.offsetLeft;
+      let ancestor = element.offsetParent;
+      while (ancestor && ancestor !== container && container.contains(ancestor)) {
+        top += ancestor.offsetTop + ancestor.clientTop;
+        left += ancestor.offsetLeft + ancestor.clientLeft;
+        ancestor = ancestor.offsetParent;
+      }
+      rects[index] = {
+        top,
+        height: element.offsetHeight,
+        left,
+        width: element.offsetWidth
+      };
+    });
+    if (!everyItemHasLayout)
+      return false;
+    const prev = itemRectsRef.current;
+    let changed = prev.length !== rects.length;
+    for (let i = 0;!changed && i < rects.length; i++) {
+      const p = prev[i];
+      const r = rects[i];
+      if (p === r)
+        continue;
+      changed = !p || !r || p.top !== r.top || p.left !== r.left || p.width !== r.width || p.height !== r.height;
+    }
+    if (changed) {
+      itemRectsRef.current = rects;
+      setItemRects(rects);
+    }
+    return true;
+  }, [containerRef]);
+  const measureItems = useCallback(() => {
+    runMeasurement();
+  }, [runMeasurement]);
+  const scheduleMeasurement = useCallback((attemptsLeft) => {
+    if (remeasureRafIdRef.current !== null) {
+      cancelAnimationFrame(remeasureRafIdRef.current);
+    }
+    remeasureRafIdRef.current = requestAnimationFrame(() => {
+      remeasureRafIdRef.current = null;
+      if (runMeasurement()) {
+        setIsMeasured(true);
+      } else if (attemptsLeft > 1) {
+        scheduleMeasurement(attemptsLeft - 1);
+      }
+    });
+  }, [runMeasurement]);
+  const remeasure = useCallback(() => {
+    setIsMeasured(false);
+    scheduleMeasurement(measurementAttempts);
+  }, [scheduleMeasurement]);
+  const itemRoRef = useRef(null);
+  const getItemRo = useCallback(() => {
+    if (itemRoRef.current === null && typeof ResizeObserver !== "undefined") {
+      itemRoRef.current = new ResizeObserver(() => scheduleMeasurement(measurementAttempts));
+    }
+    return itemRoRef.current;
+  }, [scheduleMeasurement]);
+  const registerItem = useCallback((index, element) => {
+    if (element) {
+      itemsRef.current.set(index, element);
+      getItemRo()?.observe(element);
+      if (index === activeIndexRef.current)
+        element.setAttribute(ACTIVE_ATTR, "");
+    } else {
+      const previous = itemsRef.current.get(index);
+      if (previous)
+        itemRoRef.current?.unobserve(previous);
+      previous?.removeAttribute(ACTIVE_ATTR);
+      itemsRef.current.delete(index);
+      if (index === activeIndexRef.current) {
+        setActiveIndex((current) => current === index && !itemsRef.current.has(index) ? null : current);
+      }
+    }
+    remeasure();
+  }, [remeasure, getItemRo]);
+  const handleMouseMove = useCallback((e) => {
+    const mouseX = e.clientX;
+    const mouseY = e.clientY;
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+    }
+    rafIdRef.current = requestAnimationFrame(() => {
+      rafIdRef.current = null;
+      const container = containerRef.current;
+      if (!container)
+        return;
+      setActiveIndex(pickNearest({
+        axis,
+        point: { x: mouseX, y: mouseY },
+        rects: itemRectsRef.current,
+        containerRect: container.getBoundingClientRect(),
+        scroll: { x: container.scrollLeft, y: container.scrollTop },
+        border: { x: container.clientLeft, y: container.clientTop },
+        layoutSize: { width: container.offsetWidth, height: container.offsetHeight },
+        isDisabled: isItemDisabled ? (index) => {
+          const el = itemsRef.current.get(index);
+          return !!el && isItemDisabled(el);
+        } : undefined
+      }));
+    });
+  }, [axis, containerRef, isItemDisabled]);
+  const handleMouseEnter = useCallback(() => {
+    sessionRef.current += 1;
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    setActiveIndex(null);
+  }, []);
+  const handleClick = useCallback((e) => {
+    const target = e.target;
+    if (!target)
+      return;
+    for (const element of itemsRef.current.values()) {
+      if (element.contains(target))
+        return;
+    }
+    if (!target.isConnected)
+      return;
+    const control = target.closest?.("input, textarea, select, button, a, summary, [contenteditable], [role='textbox'], [role='searchbox'], [role='button']");
+    if (control)
+      return;
+    if (gapClick === false)
+      return;
+    const index = activeIndexRef.current;
+    if (index === null)
+      return;
+    const element = itemsRef.current.get(index);
+    if (!element || isItemDisabled?.(element))
+      return;
+    if (gapClickMaxDistance !== Infinity) {
+      const r = element.getBoundingClientRect();
+      const dx = Math.max(r.left - e.clientX, 0, e.clientX - r.right);
+      const dy = Math.max(r.top - e.clientY, 0, e.clientY - r.bottom);
+      if (Math.hypot(dx, dy) > gapClickMaxDistance)
+        return;
+    }
+    resolveActivator(element).click();
+  }, [isItemDisabled, gapClick, gapClickMaxDistance]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || typeof ResizeObserver === "undefined")
+      return;
+    const ro = new ResizeObserver(() => scheduleMeasurement(measurementAttempts));
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [containerRef, scheduleMeasurement]);
+  useEffect(() => {
+    return () => {
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+      if (remeasureRafIdRef.current !== null) {
+        cancelAnimationFrame(remeasureRafIdRef.current);
+      }
+      itemRoRef.current?.disconnect();
+      itemRoRef.current = null;
+    };
+  }, []);
+  return {
+    activeIndex,
+    setActiveIndex,
+    itemRects,
+    isMeasured,
+    sessionRef,
+    handlers: {
+      onMouseMove: handleMouseMove,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick
+    },
+    registerItem,
+    remeasure,
+    measureItems
+  };
+}
+function useRegisterFluidHoverItem2(registerItem, index, ref) {
+  useEffect(() => {
+    if (!registerItem || index === undefined)
+      return;
+    registerItem(index, ref.current);
+    return () => registerItem(index, null);
+  }, [index, registerItem, ref]);
+}
+
+export { useFluidHover2, useRegisterFluidHoverItem2 };

package/dist/shared/components-5xc2j8jz.js

@@ -0,0 +1,159 @@
+import {
+  useReduceMotion
+} from "./components-men63rwj.js";
+import {
+  GOO_BLUR_RATIO
+} from "./components-hqeq3w9q.js";
+import {
+  union,
+  GooLayer
+} from "./components-chacnk61.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// lib/use-merge-split.tsx
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var mergeSpring = spring2.moderate;
+var settleMs = mergeSpring.duration * 1000 + 80;
+var SEED = 0.5;
+function useSelectionRuns(checkedIndices) {
+  const prevGroupMap = useRef(new Map);
+  const groupIdCounter = useRef(0);
+  const runs = [];
+  const sorted = [...checkedIndices].sort((a, b) => a - b);
+  for (const idx of sorted) {
+    const last = runs[runs.length - 1];
+    if (last && idx === last.end + 1)
+      last.end = idx;
+    else
+      runs.push({ start: idx, end: idx });
+  }
+  const usedIds = new Set;
+  const nextGroupMap = new Map;
+  const result = runs.map((run) => {
+    let stableId = null;
+    for (let i = run.start;i <= run.end; i++) {
+      const prevId = prevGroupMap.current.get(i);
+      if (prevId !== undefined && !usedIds.has(prevId)) {
+        stableId = prevId;
+        break;
+      }
+    }
+    const id = stableId ?? ++groupIdCounter.current;
+    usedIds.add(id);
+    for (let i = run.start;i <= run.end; i++)
+      nextGroupMap.set(i, id);
+    return { ...run, id };
+  });
+  prevGroupMap.current = nextGroupMap;
+  return result;
+}
+function useMergeSplitBlocks(runs, itemRects, R) {
+  const blocks = [];
+  for (const run of runs) {
+    const first = itemRects[run.start];
+    const last = itemRects[run.end];
+    if (!first || !last)
+      continue;
+    const left = Math.min(first.left, last.left);
+    const width = Math.max(first.width, last.width);
+    for (let i = run.start;i <= run.end; i++) {
+      const row = itemRects[i];
+      if (!row)
+        continue;
+      const next = i < run.end ? itemRects[i + 1] : undefined;
+      const bottom = next?.top ?? row.top + row.height;
+      const top = i === run.start ? R : 0;
+      const end = i === run.end ? R : 0;
+      blocks.push({
+        key: `sel-${i}`,
+        top: row.top,
+        left,
+        width,
+        height: bottom - row.top,
+        radii: [top, top, end, end],
+        instant: false
+      });
+    }
+  }
+  return blocks;
+}
+var corners = ([tl, tr, br, bl]) => ({
+  borderTopLeftRadius: tl,
+  borderTopRightRadius: tr,
+  borderBottomRightRadius: br,
+  borderBottomLeftRadius: bl
+});
+var rest = (b) => ({
+  top: b.top,
+  left: b.left,
+  width: b.width,
+  height: b.height,
+  opacity: 1,
+  ...corners(b.radii)
+});
+var seed = (b) => ({
+  top: b.top + b.height / 2,
+  left: b.left + b.width * (1 - SEED) / 2,
+  width: b.width * SEED,
+  height: 0,
+  ...corners(b.radii)
+});
+var variants = (b) => ({
+  rest: rest(b),
+  enter: (mode) => mode === "goo" ? seed(b) : { ...rest(b), opacity: 0 },
+  leave: (mode) => mode === "goo" ? { ...seed(b), transition: mergeSpring.exit } : { opacity: 0, transition: mode === "fade" ? mergeSpring.exit : { duration: 0 } }
+});
+function SelectionBackgrounds({ blocks }) {
+  const reduced = useReduceMotion();
+  const mode = blocks.some((b) => b.instant) ? "snap" : reduced ? "fade" : "goo";
+  const rows = blocks.map((b) => b.key).join("|");
+  const [melting, setMelting] = useState(false);
+  const shown = useRef(rows);
+  const timer = useRef();
+  const covered = useRef(null);
+  const radius = useRef(0);
+  useLayoutEffect(() => {
+    if (rows === shown.current)
+      return;
+    shown.current = rows;
+    if (mode !== "goo")
+      return;
+    setMelting(true);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setMelting(false), settleMs);
+  }, [rows, mode]);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const box = blocks.reduce(union, null);
+  const changing = melting || rows !== shown.current;
+  if (!changing)
+    covered.current = box;
+  else if (box)
+    covered.current = union(covered.current, box);
+  radius.current = Math.max(changing ? radius.current : 0, ...blocks.flatMap((b) => b.radii));
+  return /* @__PURE__ */ jsx(GooLayer, {
+    active: melting,
+    blur: radius.current * GOO_BLUR_RATIO,
+    box: covered.current,
+    fill: "bg-active",
+    children: /* @__PURE__ */ jsx(AnimatePresence, {
+      initial: false,
+      custom: mode,
+      children: blocks.map((b) => /* @__PURE__ */ jsx(motion.div, {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute bg-active",
+        custom: mode,
+        variants: variants(b),
+        initial: mode === "snap" ? false : "enter",
+        animate: "rest",
+        exit: "leave",
+        transition: mode === "snap" ? { duration: 0 } : { ...mergeSpring, opacity: { duration: spring2.fast.duration } }
+      }, b.key))
+    })
+  });
+}
+
+export { useSelectionRuns, useMergeSplitBlocks, SelectionBackgrounds };