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

package/dist/shared/components-52ngsgca.js

@@ -0,0 +1,399 @@
+"use client";
+import {
+  useReduceMotion2
+} from "./components-de99ykt7.js";
+import {
+  spring2
+} from "./components-3ey0hzpb.js";
+import {
+  cn2
+} from "./components-jcnjay5g.js";
+import {
+  FluidHoverHighlight2
+} from "./components-qdm3yh26.js";
+import {
+  useIcon2
+} from "./components-jqpefjsn.js";
+import {
+  isDisabledRow2
+} from "./components-h6p86be3.js";
+import {
+  IndexedRows2,
+  useRowIndex2
+} from "./components-r8eqs7gz.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 {
+  useSelectionRuns2,
+  useMergeSplitBlocks2,
+  SelectionBackgrounds2
+} from "./components-8tt3xbb5.js";
+import {
+  SizeProvider2
+} from "./components-dcc02hs2.js";
+
+// components/inputs/checkbox/index.tsx
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var CheckboxGroupContext = createContext(null);
+var CheckboxGroup2 = forwardRef(({
+  children,
+  checkedIndices: checkedIndicesProp,
+  defaultCheckedIndices,
+  onCheckedIndicesChange,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const containerRef = useRef(null);
+  const [checkedIndices, setCheckedIndices] = useControllableState2(checkedIndicesProp, new Set(defaultCheckedIndices), onCheckedIndicesChange);
+  const setItemChecked = useCallback((index, checked) => {
+    setCheckedIndices((prev) => {
+      if (prev.has(index) === checked)
+        return prev;
+      const next = new Set(prev);
+      if (checked)
+        next.add(index);
+      else
+        next.delete(index);
+      return next;
+    });
+  }, [setCheckedIndices]);
+  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow2 });
+  const { activeIndex, setActiveIndex, itemRects, handlers, registerItem } = hover;
+  const checkedGroups = useSelectionRuns2([...checkedIndices]);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+  const shape = useShape2();
+  const blocks = useMergeSplitBlocks2(checkedGroups, itemRects, shape.mergedRadius);
+  const group = /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
+    value: { registerItem, activeIndex, checkedIndices, setItemChecked },
+    children: /* @__PURE__ */ jsxs("div", {
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      onMouseEnter: handlers.onMouseEnter,
+      onMouseMove: handlers.onMouseMove,
+      onMouseLeave: handlers.onMouseLeave,
+      onClick: handlers.onClick,
+      onFocus: (e) => {
+        const indexAttr = e.target.closest("[data-fluid-hover-index]")?.getAttribute("data-fluid-hover-index");
+        if (indexAttr != null) {
+          const idx = Number(indexAttr);
+          setActiveIndex(idx);
+          setFocusedIndex(e.target.matches(":focus-visible") ? idx : null);
+        }
+      },
+      onBlur: (e) => {
+        if (containerRef.current?.contains(e.relatedTarget))
+          return;
+        setFocusedIndex(null);
+        setActiveIndex(null);
+      },
+      onKeyDown: (e) => {
+        const items = Array.from(containerRef.current?.querySelectorAll('[data-fluid-hover-index]:not([aria-disabled="true"])') ?? []);
+        const currentIdx = items.indexOf(e.target);
+        if (currentIdx === -1)
+          return;
+        if (["ArrowDown", "ArrowUp"].includes(e.key)) {
+          e.preventDefault();
+          const next = e.key === "ArrowDown" ? (currentIdx + 1) % items.length : (currentIdx - 1 + items.length) % items.length;
+          items[next]?.focus();
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          items[0]?.focus();
+        } else if (e.key === "End") {
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+        }
+      },
+      role: "group",
+      className: cn2("relative flex flex-col w-72 max-w-full select-none", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectionBackgrounds2, {
+          blocks
+        }),
+        /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+          hover,
+          className: shape.bg
+        }),
+        /* @__PURE__ */ jsx(AnimatePresence, {
+          children: focusRect && /* @__PURE__ */ jsx(motion.div, {
+            className: `absolute ${shape.focusRing} pointer-events-none z-20 border border-focus-ring`,
+            initial: false,
+            animate: {
+              left: focusRect.left - 2,
+              top: focusRect.top - 2,
+              width: focusRect.width + 4,
+              height: focusRect.height + 4
+            },
+            exit: { opacity: 0, transition: spring2.fast.exit },
+            transition: {
+              ...spring2.fast,
+              opacity: { duration: spring2.fast.duration }
+            }
+          })
+        }),
+        /* @__PURE__ */ jsx(IndexedRows2, {
+          children
+        })
+      ]
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: group
+  }) : group;
+});
+CheckboxGroup2.displayName = "CheckboxGroup";
+var SHOWN = { opacity: 1, scale: 1, filter: "blur(0px)" };
+var HIDDEN = { opacity: 0, scale: 0.6, filter: "blur(4px)" };
+var SHOWN_REDUCED = { opacity: 1 };
+var HIDDEN_REDUCED = { opacity: 0 };
+var swapEnter = { type: "tween", duration: spring2.fast.duration, ease: "easeOut" };
+var swapLeave = { type: "tween", ...spring2.fast.exit, ease: "easeIn" };
+function CheckboxBox({ checked, indeterminate, active, compact, skipAnimation, bare }) {
+  const Minus = useIcon2("minus");
+  const reduced = useReduceMotion2();
+  const marked = checked || indeterminate;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: cn2("absolute inset-0 border-solid transition-all duration-fast", compact ? "rounded-sm" : "rounded-box", marked ? bare ? "border-[1.5px] border-control" : "border-[1.5px] border-transparent" : active ? "border-[1.5px] border-control" : "border-[1.5px] border-border")
+      }),
+      /* @__PURE__ */ jsx(AnimatePresence, {
+        children: checked && !indeterminate && /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+          keepMounted: true,
+          render: (indicatorProps) => {
+            const {
+              style: _s,
+              onDrag: _onDrag,
+              onDragStart: _onDragStart,
+              onDragEnd: _onDragEnd,
+              onAnimationStart: _onAnimationStart,
+              onAnimationEnd: _onAnimationEnd,
+              onAnimationIteration: _onAnimationIteration,
+              ...rest
+            } = indicatorProps;
+            return /* @__PURE__ */ jsx(motion.svg, {
+              ...rest,
+              width: compact ? 16 : 18,
+              height: compact ? 16 : 18,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-foreground",
+              initial: { opacity: 1 },
+              animate: { opacity: 1 },
+              exit: { opacity: 1 },
+              children: /* @__PURE__ */ jsx(motion.path, {
+                d: "M6 12L10 16L18 8",
+                initial: { pathLength: skipAnimation ? 1 : 0 },
+                animate: {
+                  pathLength: 1,
+                  transition: { duration: spring2.fast.duration, ease: "easeOut" }
+                },
+                exit: {
+                  pathLength: 0,
+                  transition: { duration: 0.04, ease: "easeIn" }
+                }
+              })
+            });
+          }
+        })
+      }),
+      /* @__PURE__ */ jsx(motion.span, {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute inset-0 flex items-center justify-center text-foreground",
+        initial: false,
+        animate: indeterminate ? reduced ? SHOWN_REDUCED : SHOWN : reduced ? HIDDEN_REDUCED : HIDDEN,
+        transition: indeterminate ? swapEnter : swapLeave,
+        children: /* @__PURE__ */ jsx(Minus, {
+          size: compact ? 14 : 16,
+          strokeWidth: 2
+        })
+      })
+    ]
+  });
+}
+var Checkbox2 = forwardRef(({
+  label,
+  checked: checkedProp,
+  defaultChecked = false,
+  indeterminate: indeterminateProp = false,
+  onCheckedChange,
+  onToggle: onToggleProp,
+  disabled = false,
+  name,
+  value,
+  required = false,
+  index: indexProp,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const internalRef = useRef(null);
+  const hasMounted = useRef(false);
+  const group = useContext(CheckboxGroupContext);
+  const index = useRowIndex2(indexProp);
+  const labelId = useId();
+  const explicit = checkedProp === "indeterminate" ? false : checkedProp;
+  const [ownChecked, setOwnChecked] = useControllableState2(explicit, defaultChecked, onCheckedChange);
+  const [hovered, setHovered] = useState(false);
+  const checked = explicit ?? (group ? group.checkedIndices.has(index) : ownChecked);
+  const indeterminate = indeterminateProp || checkedProp === "indeterminate";
+  const onToggle = () => {
+    if (disabled)
+      return;
+    const next = indeterminate || !checked;
+    onToggleProp?.();
+    group?.setItemChecked(index, next);
+    if (next === checked)
+      onCheckedChange?.(next);
+    else
+      setOwnChecked(next);
+  };
+  useRegisterFluidHoverItem2(group?.registerItem, index, internalRef);
+  useEffect(() => {
+    hasMounted.current = true;
+  }, []);
+  const isActive = group ? group.activeIndex === index : hovered;
+  const skipAnimation = !hasMounted.current;
+  const shape = useShape2();
+  const sizeClasses = useSize2(size);
+  const compact = sizeClasses.variant === "compact";
+  const setRef = (node) => {
+    internalRef.current = node;
+    if (typeof ref === "function")
+      ref(node);
+    else if (ref)
+      ref.current = node;
+  };
+  const box = /* @__PURE__ */ jsx(CheckboxBox, {
+    checked,
+    indeterminate,
+    active: isActive,
+    compact,
+    skipAnimation,
+    bare: label === undefined && !group
+  });
+  if (label === undefined && !group) {
+    return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
+      ref: setRef,
+      render: /* @__PURE__ */ jsx("div", {}),
+      checked,
+      indeterminate,
+      onCheckedChange: () => onToggle(),
+      disabled,
+      name,
+      value,
+      required,
+      onPointerEnter: (e) => {
+        if (e.pointerType === "mouse")
+          setHovered(true);
+      },
+      onPointerLeave: () => setHovered(false),
+      className: cn2("relative inline-flex shrink-0 cursor-pointer outline-none transition-[opacity] duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", compact ? "size-3.5 rounded-sm" : "size-4 rounded-box", disabled && "opacity-50 pointer-events-none", className),
+      ...props,
+      children: box
+    });
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ref: setRef,
+    "data-fluid-hover-index": index,
+    "data-disabled": disabled || undefined,
+    tabIndex: disabled ? -1 : 0,
+    role: "checkbox",
+    "aria-checked": indeterminate ? "mixed" : checked,
+    "aria-disabled": disabled || undefined,
+    "aria-label": typeof label === "string" ? label : undefined,
+    "aria-labelledby": label !== undefined && typeof label !== "string" ? labelId : undefined,
+    onClick: onToggle,
+    onPointerEnter: (e) => {
+      if (e.pointerType === "mouse")
+        setHovered(true);
+    },
+    onPointerLeave: () => setHovered(false),
+    onMouseDown: (e) => {
+      const interactive = e.target.closest('button:not([tabindex="-1"]), a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (interactive && interactive !== e.currentTarget)
+        return;
+      e.preventDefault();
+      e.currentTarget.focus();
+    },
+    onKeyDown: (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        onToggle();
+      }
+    },
+    className: cn2(`relative z-10 flex ${sizeClasses.control} items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} cursor-pointer outline-none transition-[opacity] duration-fast`, !group && "focus-visible:ring-1 focus-visible:ring-focus-ring", disabled && "opacity-50 pointer-events-none", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
+        checked,
+        indeterminate,
+        onCheckedChange: () => onToggle(),
+        disabled,
+        name,
+        value,
+        required,
+        tabIndex: -1,
+        "aria-hidden": true,
+        className: cn2("relative shrink-0 appearance-none bg-transparent p-0 border-0 outline-none cursor-pointer", compact ? "w-[14px] h-[14px]" : "w-[16px] h-[16px]"),
+        onClick: (e) => e.stopPropagation(),
+        children: box
+      }),
+      label !== undefined && /* @__PURE__ */ jsxs("span", {
+        className: cn2("inline-grid", sizeClasses.text),
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: "col-start-1 row-start-1 invisible [text-box:trim-both_cap_alphabetic] weight-semibold",
+            "aria-hidden": "true",
+            children: label
+          }),
+          /* @__PURE__ */ jsx("span", {
+            id: labelId,
+            className: cn2("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", checked || indeterminate || isActive ? "text-foreground" : "text-muted-foreground", checked ? "weight-semibold" : "weight-normal"),
+            children: label
+          })
+        ]
+      })
+    ]
+  });
+});
+Checkbox2.displayName = "Checkbox";
+Object.assign(Checkbox2, { Group: CheckboxGroup2 });
+var checkbox_default = Checkbox2;
+
+export { CheckboxGroup2, Checkbox2, checkbox_default };

package/dist/shared/{components-y9y0g8er.js → components-52r5763g.js}

@@ -1,20 +1,23 @@
+"use client";
 import {
-  defaultLocale,
-  parseMonthText,
-  fieldLabel,
-  dividedColumns,
-  ScrollColumn
-} from "./components-gz8zf3ec.js";
+  defaultLocale2,
+  parseMonthText2,
+  fieldLabel2
+} from "./components-559tf7yb.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
-  useControllableState
-} from "./components-n7mjr357.js";
+  dividedColumns2,
+  ScrollColumn2
+} from "./components-1k0wv53d.js";
+import {
+  useControllableState2
+} from "./components-tz1fv35x.js";
 import {
   PickerShell,
   PickerInput
-} from "./components-s5ngg32c.js";
+} from "./components-paa08427.js";
 
 // components/inputs/date-time/month-picker/index.tsx
 import { addYears, endOfYear, format, startOfMonth, startOfYear } from "date-fns";
@@ -24,7 +27,7 @@ function MonthPicker2({
   value: valueProp,
   defaultValue = null,
   onValueChange,
-  locale = defaultLocale,
+  locale = defaultLocale2,
   placeholder,
   startMonth,
   endMonth,
@@ -42,8 +45,8 @@ function MonthPicker2({
   tier,
   className
 }) {
-  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
-  const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange);
+  const [value, setValue] = useControllableState2(valueProp, defaultValue, onValueChange);
+  const [open, setOpen] = useControllableState2(openProp, defaultOpen, onOpenChange);
   const input = useRef(null);
   const today = useMemo(() => new Date, []);
   const start = startOfMonth(startMonth ?? startOfYear(addYears(today, -100)));
@@ -56,7 +59,7 @@ function MonthPicker2({
       setValue(null);
       return true;
     }
-    const read = parseMonthText(text, locale);
+    const read = parseMonthText2(text, locale);
     if (!read || read < start || read > end)
       return false;
     setValue(startOfMonth(read));
@@ -99,18 +102,18 @@ function MonthPicker2({
     tier,
     className,
     children: /* @__PURE__ */ jsxs("div", {
-      className: cn2(dividedColumns, "h-56"),
+      className: cn2(dividedColumns2, "h-56"),
       children: [
-        /* @__PURE__ */ jsx(ScrollColumn, {
-          label: fieldLabel(locale, "month"),
+        /* @__PURE__ */ jsx(ScrollColumn2, {
+          label: fieldLabel2(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"),
+        /* @__PURE__ */ jsx(ScrollColumn2, {
+          label: fieldLabel2(locale, "year"),
           options: years,
           value: value?.getFullYear() ?? null,
           follow: year,

package/dist/shared/components-559tf7yb.js

@@ -0,0 +1,28 @@
+// lib/date-locale.ts
+import { isValid, parse } from "date-fns";
+import { enUS } from "react-day-picker/locale";
+var defaultLocale2 = enUS;
+function hourCycleOf2(locale) {
+  return new Intl.DateTimeFormat(locale.code, { hour: "numeric" }).resolvedOptions().hourCycle ?? "h23";
+}
+function parseWith(text, patterns, locale, reference) {
+  for (const pattern of patterns) {
+    const date = parse(text.trim(), pattern, reference, { locale });
+    if (isValid(date) && date.getFullYear() >= 1000)
+      return date;
+  }
+  return null;
+}
+function parseDateText2(text, locale, reference = new Date) {
+  return parseWith(text, ["P", "PP", "PPP", "PPPP"], locale, reference);
+}
+function parseTimeText2(text, locale, reference = new Date) {
+  return parseWith(text, ["p", "HH:mm", "H:mm"], locale, reference);
+}
+function parseMonthText2(text, locale, reference = new Date) {
+  return parseWith(text, ["LLLL y", "LLL y", "MM/y", "M/y", "MM.y"], locale, reference);
+}
+function fieldLabel2(locale, field) {
+  return new Intl.DisplayNames(locale.code, { type: "dateTimeField" }).of(field) ?? field;
+}
+export { defaultLocale2, hourCycleOf2, parseDateText2, parseTimeText2, parseMonthText2, fieldLabel2 };