@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/dist/shared/{components-8tt3xbb5.js → components-5xc2j8jz.js}

@@ -1,17 +1,16 @@
-"use client";
 import {
-  useReduceMotion2
-} from "./components-de99ykt7.js";
+  useReduceMotion
+} from "./components-men63rwj.js";
 import {
-  spring2
-} from "./components-3ey0hzpb.js";
+  GOO_BLUR_RATIO
+} from "./components-hqeq3w9q.js";
 import {
-  GOO_BLUR_RATIO2
-} from "./components-awra5sff.js";
+  union,
+  GooLayer
+} from "./components-chacnk61.js";
 import {
-  union2,
-  GooLayer2
-} from "./components-pw06rbxq.js";
+  spring2
+} from "./components-1v7rxytx.js";
 
 // lib/use-merge-split.tsx
 import { AnimatePresence, motion } from "motion/react";
@@ -20,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
 var mergeSpring = spring2.moderate;
 var settleMs = mergeSpring.duration * 1000 + 80;
 var SEED = 0.5;
-function useSelectionRuns2(checkedIndices) {
+function useSelectionRuns(checkedIndices) {
   const prevGroupMap = useRef(new Map);
   const groupIdCounter = useRef(0);
   const runs = [];
@@ -52,7 +51,7 @@ function useSelectionRuns2(checkedIndices) {
   prevGroupMap.current = nextGroupMap;
   return result;
 }
-function useMergeSplitBlocks2(runs, itemRects, R) {
+function useMergeSplitBlocks(runs, itemRects, R) {
   const blocks = [];
   for (const run of runs) {
     const first = itemRects[run.start];
@@ -108,8 +107,8 @@ var variants = (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 SelectionBackgrounds2({ blocks }) {
-  const reduced = useReduceMotion2();
+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);
@@ -128,16 +127,16 @@ function SelectionBackgrounds2({ blocks }) {
     timer.current = setTimeout(() => setMelting(false), settleMs);
   }, [rows, mode]);
   useEffect(() => () => clearTimeout(timer.current), []);
-  const box = blocks.reduce(union2, null);
+  const box = blocks.reduce(union, null);
   const changing = melting || rows !== shown.current;
   if (!changing)
     covered.current = box;
   else if (box)
-    covered.current = union2(covered.current, box);
+    covered.current = union(covered.current, box);
   radius.current = Math.max(changing ? radius.current : 0, ...blocks.flatMap((b) => b.radii));
-  return /* @__PURE__ */ jsx(GooLayer2, {
+  return /* @__PURE__ */ jsx(GooLayer, {
     active: melting,
-    blur: radius.current * GOO_BLUR_RATIO2,
+    blur: radius.current * GOO_BLUR_RATIO,
     box: covered.current,
     fill: "bg-active",
     children: /* @__PURE__ */ jsx(AnimatePresence, {
@@ -157,4 +156,4 @@ function SelectionBackgrounds2({ blocks }) {
   });
 }
 
-export { useSelectionRuns2, useMergeSplitBlocks2, SelectionBackgrounds2 };
+export { useSelectionRuns, useMergeSplitBlocks, SelectionBackgrounds };

package/dist/shared/{components-jymmaevv.js → components-6p8tfcd6.js}

@@ -1,51 +1,35 @@
-"use client";
 import {
-  defaultLocale2,
-  fieldLabel2,
-  resolveLocale2
-} from "./components-54nq988h.js";
+  defaultLocale,
+  fieldLabel,
+  dividedColumns,
+  ScrollColumn
+} from "./components-gz8zf3ec.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 import {
-  dividedColumns2,
-  ScrollColumn2
-} from "./components-qqcmtrbv.js";
+  useControllableState
+} from "./components-n7mjr357.js";
 import {
-  useControllableState2
-} from "./components-tz1fv35x.js";
-import {
-  invalidOf,
-  controlAttributes,
   PickerShell,
   PickerInput
-} from "./components-fejdzvqc.js";
+} from "./components-s5ngg32c.js";
 import {
   pad
-} from "./components-6b0zb8z3.js";
+} from "./components-mjthm1kf.js";
 
 // components/inputs/date-time/duration-picker/index.tsx
 import { formatDuration } from "date-fns";
-import {
-  forwardRef,
-  useMemo,
-  useRef
-} from "react";
+import { useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var TYPED = /^\s*(\d{1,3})(?::(\d{1,2}))?\s*$/;
-var DurationPicker2 = forwardRef(function DurationPicker({
+function DurationPicker2({
   value: valueProp,
   defaultValue = null,
   onValueChange,
-  minHours = 0,
   maxHours = 99,
-  hourStep = 1,
   minuteStep = 1,
-  locale: localeProp = defaultLocale2,
-  formatValue,
-  labels,
-  readOnly = false,
-  name,
+  locale = defaultLocale,
   placeholder,
   disabled,
   variant,
@@ -59,17 +43,14 @@ var DurationPicker2 = forwardRef(function DurationPicker({
   effect,
   hideSource,
   tier,
-  className,
-  ...control
-}, ref) {
-  const [value, setValue] = useControllableState2(valueProp, defaultValue, onValueChange);
-  const [open, setOpen] = useControllableState2(openProp, defaultOpen, onOpenChange);
+  className
+}) {
+  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
+  const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange);
   const input = useRef(null);
-  const locale = resolveLocale2(localeProp);
-  const hours = value?.hours ?? minHours;
+  const hours = value?.hours ?? 0;
   const minutes = value?.minutes ?? 0;
-  const spelled = () => hours || minutes ? formatDuration({ hours, minutes }, { locale, format: ["hours", "minutes"] }) : formatDuration({ minutes: 0 }, { locale, format: ["minutes"], zero: true });
-  const display = value ? formatValue?.({ hours, minutes }) ?? spelled() : "";
+  const display = value ? hours || minutes ? formatDuration({ hours, minutes }, { locale, format: ["hours", "minutes"] }) : formatDuration({ minutes: 0 }, { locale, format: ["minutes"], zero: true }) : "";
   const readDuration = (text) => {
     if (!text.trim()) {
       setValue(null);
@@ -78,15 +59,12 @@ var DurationPicker2 = forwardRef(function DurationPicker({
     const match = TYPED.exec(text);
     const h = Number(match?.[1]);
     const m = Number(match?.[2] ?? 0);
-    if (!match || h < minHours || h > maxHours || m > 59)
+    if (!match || h > maxHours || m > 59)
       return false;
     setValue({ hours: h, minutes: m });
     return true;
   };
-  const hourOptions = useMemo(() => Array.from({ length: Math.floor((maxHours - minHours) / Math.max(1, hourStep)) + 1 }, (_, i) => {
-    const h = minHours + i * Math.max(1, hourStep);
-    return { value: h, label: String(h) };
-  }), [minHours, maxHours, hourStep]);
+  const hourOptions = useMemo(() => Array.from({ length: maxHours + 1 }, (_, h) => ({ value: h, label: String(h) })), [maxHours]);
   const minuteOptions = useMemo(() => Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => ({
     value: i * minuteStep,
     label: pad(i * minuteStep)
@@ -96,20 +74,14 @@ var DurationPicker2 = forwardRef(function DurationPicker({
     onOpenChange: setOpen,
     size,
     variant,
-    invalid: invalidOf(invalid, control["aria-invalid"]),
+    invalid,
     disabled,
-    readOnly,
     icon: "clock",
     display,
     placeholder,
-    closeLabel: labels?.close,
-    controlRef: ref,
-    controlProps: controlAttributes(control),
-    formValues: [{ slot: "value", name, value: value ? `PT${hours}H${minutes}M` : "" }],
-    required: control.required,
     header: /* @__PURE__ */ jsx(PickerInput, {
       ref: input,
-      "aria-label": labels?.duration || placeholder || "Duration",
+      "aria-label": placeholder ?? "Duration",
       placeholder: "0:00",
       formatted: value ? `${hours}:${pad(minutes)}` : "",
       onText: readDuration,
@@ -125,17 +97,17 @@ var DurationPicker2 = forwardRef(function DurationPicker({
     tier,
     className,
     children: /* @__PURE__ */ jsxs("div", {
-      className: cn2(dividedColumns2, "h-56"),
+      className: cn2(dividedColumns, "h-56"),
       children: [
-        /* @__PURE__ */ jsx(ScrollColumn2, {
-          label: labels?.hour ?? fieldLabel2(locale, "hour"),
+        /* @__PURE__ */ jsx(ScrollColumn, {
+          label: fieldLabel(locale, "hour"),
           options: hourOptions,
           value: value ? hours : null,
           onValueChange: (h) => setValue({ hours: h, minutes }),
           className: "min-w-0 flex-1"
         }),
-        /* @__PURE__ */ jsx(ScrollColumn2, {
-          label: labels?.minute ?? fieldLabel2(locale, "minute"),
+        /* @__PURE__ */ jsx(ScrollColumn, {
+          label: fieldLabel(locale, "minute"),
           options: minuteOptions,
           value: value ? minutes : null,
           onValueChange: (m) => setValue({ hours, minutes: m }),
@@ -144,7 +116,7 @@ var DurationPicker2 = forwardRef(function DurationPicker({
       ]
     })
   });
-});
+}
 var duration_picker_default = DurationPicker2;
 
 export { DurationPicker2, duration_picker_default };

package/dist/shared/{components-4nck8acq.js → components-7r3etddy.js}

@@ -1,29 +1,64 @@
-"use client";
 import {
-  useReduceMotion2
-} from "./components-de99ykt7.js";
+  useReduceMotion
+} from "./components-men63rwj.js";
 import {
-  useShape2
-} from "./components-71nbt03m.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
   useSizeVariant2
-} from "./components-h83az0bz.js";
-import {
-  spring2
-} from "./components-3ey0hzpb.js";
+} from "./components-0sn7ypjw.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 import {
-  badgeColors2,
-  badgeVariants2,
-  legacySizeAliases3
-} from "./components-c9yr4ed1.js";
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/badge/index.tsx
+import { cva } from "class-variance-authority";
 import { AnimatePresence, animate, motion } from "motion/react";
 import { forwardRef, useLayoutEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var badgeColors2 = {
+  gray: "var(--badge-gray)",
+  red: "var(--badge-red)",
+  orange: "var(--badge-orange)",
+  amber: "var(--badge-amber)",
+  yellow: "var(--badge-yellow)",
+  lime: "var(--badge-lime)",
+  green: "var(--badge-green)",
+  emerald: "var(--badge-emerald)",
+  teal: "var(--badge-teal)",
+  cyan: "var(--badge-cyan)",
+  blue: "var(--badge-blue)",
+  indigo: "var(--badge-indigo)",
+  violet: "var(--badge-violet)",
+  purple: "var(--badge-purple)",
+  fuchsia: "var(--badge-fuchsia)",
+  pink: "var(--badge-pink)",
+  rose: "var(--badge-rose)"
+};
+var badgeVariants2 = cva("inline-flex items-center weight-medium whitespace-nowrap", {
+  variants: {
+    variant: {
+      solid: "",
+      dot: "border border-border text-foreground"
+    },
+    size: {
+      default: "h-6 px-2.5 text-caption gap-1.5",
+      compact: "h-5 px-2 text-caption-compact gap-1"
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "default"
+  }
+});
+var legacySizeAliases = {
+  sm: "compact",
+  md: "default",
+  lg: "default"
+};
 var { exit: _exit, ...enter } = spring2.moderate;
 function textOf(node) {
   const parts = Array.isArray(node) ? node : [node];
@@ -34,7 +69,7 @@ function useWidthMorph(change) {
   const content = useRef(null);
   const rest = useRef(0);
   const live = useRef(null);
-  const reduced = useReduceMotion2();
+  const reduced = useReduceMotion();
   useLayoutEffect(() => {
     const el = content.current;
     if (!el)
@@ -75,9 +110,9 @@ function useWidthMorph(change) {
   return content;
 }
 var Badge2 = forwardRef(({ className, variant = "solid", size: sizeProp, color = "gray", children, style, ...props }, ref) => {
-  const shape = useShape2();
+  const shape = useShape();
   const contextSize = useSizeVariant2();
-  const size = sizeProp ? legacySizeAliases3[sizeProp] ?? sizeProp : contextSize === "compact" ? "compact" : "default";
+  const size = sizeProp ? legacySizeAliases[sizeProp] ?? sizeProp : contextSize === "compact" ? "compact" : "default";
   const colorValue = badgeColors2[color];
   const isSolid = variant === "solid";
   const dotSize = size === "compact" ? 6 : 7;
@@ -100,7 +135,7 @@ var Badge2 = forwardRef(({ className, variant = "solid", size: sizeProp, color =
         /* @__PURE__ */ jsx(AnimatePresence, {
           mode: "popLayout",
           initial: false,
-          children: variant === "dot" && /* @__PURE__ */ jsx(motion.span, {
+          children: !isSolid && /* @__PURE__ */ jsx(motion.span, {
             className: "shrink-0 rounded-full transition-[background-color] duration-moderate",
             style: {
               width: dotSize,
@@ -133,4 +168,4 @@ var Badge2 = forwardRef(({ className, variant = "solid", size: sizeProp, color =
 Badge2.displayName = "Badge";
 var badge_default = Badge2;
 
-export { Badge2, badge_default };
+export { badgeColors2, badgeVariants2, Badge2, badge_default };

package/dist/shared/{components-skfd7kff.js → components-8snj490h.js}

@@ -1,36 +1,35 @@
-"use client";
-import {
-  spring2
-} from "./components-3ey0hzpb.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 import {
-  GooIndicator2
-} from "./components-pw06rbxq.js";
+  GooIndicator
+} from "./components-chacnk61.js";
 import {
   FluidHoverHighlight2
-} from "./components-qdm3yh26.js";
+} from "./components-kvr7f9hy.js";
 import {
-  IndexedRows2,
-  useRowIndex2
-} from "./components-r8eqs7gz.js";
+  IndexedRows,
+  useRowIndex
+} from "./components-ta7shw28.js";
 import {
-  useShape2
-} from "./components-71nbt03m.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
   useSize2
-} from "./components-h83az0bz.js";
+} from "./components-0sn7ypjw.js";
 import {
-  useControllableState2
-} from "./components-tz1fv35x.js";
+  useControllableState
+} from "./components-n7mjr357.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-yhgq0qxx.js";
+} from "./components-59efxjd9.js";
 import {
   SizeProvider2
-} from "./components-dcc02hs2.js";
+} from "./components-jjw69c4c.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/inputs/switch/index.tsx
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
@@ -76,15 +75,12 @@ var Switch2 = forwardRef(({
   onToggle,
   onCheckedChange,
   disabled = false,
-  name,
-  value,
-  required = false,
   thumbTransition,
   size,
   className,
   ...props
 }, ref) => {
-  const [isChecked, setChecked] = useControllableState2(checked, defaultChecked, onCheckedChange);
+  const [isChecked, setChecked] = useControllableState(checked, defaultChecked, onCheckedChange);
   const toggle = useCallback(() => {
     setChecked((prev) => !prev);
     onToggle?.();
@@ -92,7 +88,7 @@ var Switch2 = forwardRef(({
   const labelId = useId();
   const descriptionId = useId();
   const group = useContext(SwitchGroupContext);
-  const index = useRowIndex2();
+  const index = useRowIndex();
   const rowRef = useRef(null);
   useRegisterFluidHoverItem2(disabled ? undefined : group?.registerItem, index, rowRef);
   const end = trackSide === "end" || !!group;
@@ -178,53 +174,6 @@ var Switch2 = forwardRef(({
     }
     pointerStart.current = null;
   }, [setDragX]);
-  const trackClass = cn2("relative shrink-0 rounded-full outline-none cursor-pointer", "transition-colors duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", isChecked ? hovered ? "bg-brand-hover" : "bg-brand" : hovered ? "bg-accent-hover" : "bg-accent");
-  const thumbElement = /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
-    className: "pointer-events-none absolute inset-0",
-    children: /* @__PURE__ */ jsx(GooIndicator2, {
-      rect: thumb,
-      className: "rounded-full bg-thumb",
-      shadow: "shadow-thumb",
-      transition: dragX === null ? thumbTransition ?? spring2.moderate : false
-    })
-  });
-  if (label === undefined && !group) {
-    return /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
-      ref: (node) => {
-        rowRef.current = node;
-        if (typeof ref === "function")
-          ref(node);
-        else if (ref)
-          ref.current = node;
-      },
-      checked: isChecked,
-      onCheckedChange: () => {
-        if (didDrag.current)
-          return;
-        toggle();
-      },
-      disabled,
-      name,
-      value,
-      required,
-      onPointerEnter: (e) => {
-        if (e.pointerType === "mouse")
-          setHovered(true);
-      },
-      onPointerLeave: () => setHovered(false),
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      onPointerCancel: handlePointerCancel,
-      className: cn2(trackClass, "touch-none", disabled && "opacity-50 pointer-events-none", className),
-      style: {
-        width: m.trackWidth,
-        height: m.trackHeight
-      },
-      ...props,
-      children: thumbElement
-    });
-  }
   return /* @__PURE__ */ jsxs("div", {
     ref: (node) => {
       rowRef.current = node;
@@ -252,20 +201,25 @@ var Switch2 = forwardRef(({
     children: [
       /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
         checked: isChecked,
-        "aria-labelledby": label === undefined ? undefined : labelId,
+        "aria-labelledby": labelId,
         "aria-describedby": description ? descriptionId : undefined,
         disabled,
-        name,
-        value,
-        required,
         tabIndex: 0,
-        className: cn2(trackClass, end && "order-last"),
+        className: cn2("relative shrink-0 rounded-full outline-none cursor-pointer", end && "order-last", "transition-colors duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", isChecked ? hovered ? "bg-brand-hover" : "bg-brand" : hovered ? "bg-accent-hover" : "bg-accent"),
         style: {
           width: m.trackWidth,
           height: m.trackHeight
         },
         onClick: (e) => e.stopPropagation(),
-        children: thumbElement
+        children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
+          className: "pointer-events-none absolute inset-0",
+          children: /* @__PURE__ */ jsx(GooIndicator, {
+            rect: thumb,
+            className: "rounded-full bg-thumb",
+            shadow: "shadow-thumb",
+            transition: dragX === null ? thumbTransition ?? spring2.moderate : false
+          })
+        })
       }),
       /* @__PURE__ */ jsxs("span", {
         className: cn2("flex min-w-0 flex-col gap-1", end && "flex-1"),
@@ -293,7 +247,7 @@ Switch2.displayName = "Switch";
 var SwitchGroup2 = forwardRef(({ children, size, className, ...props }, ref) => {
   const containerRef = useRef(null);
   const hover = useFluidHover2(containerRef, { gapClick: false });
-  const shape = useShape2();
+  const shape = useShape();
   const count = Children.toArray(children).filter(isValidElement).length;
   const group = /* @__PURE__ */ jsx(SwitchGroupContext.Provider, {
     value: { registerItem: hover.registerItem, activeIndex: hover.activeIndex, count },
@@ -316,7 +270,7 @@ var SwitchGroup2 = forwardRef(({ children, size, className, ...props }, ref) =>
           hover,
           className: cn2("z-0", shape.container)
         }),
-        /* @__PURE__ */ jsx(IndexedRows2, {
+        /* @__PURE__ */ jsx(IndexedRows, {
           children
         })
       ]

package/dist/shared/{components-ctqmge8t.js → components-b0eac83j.js}

@@ -1,13 +1,9 @@
-"use client";
 import {
-  useShape2
-} from "./components-71nbt03m.js";
-import {
-  useTouchPrimary2
-} from "./components-drxrtnp2.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 
 // primitives/scroll-area/index.tsx
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
@@ -16,10 +12,35 @@ import {
   forwardRef,
   useContext
 } from "react";
+
+// lib/use-touch-primary.tsx
+import { useEffect, useState } from "react";
+function useTouchPrimary() {
+  const [isTouchPrimary, setIsTouchPrimary] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined")
+      return;
+    const controller = new AbortController;
+    const { signal } = controller;
+    const handleTouch = () => {
+      const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+      const prefersTouch = window.matchMedia("(pointer: coarse)").matches;
+      setIsTouchPrimary(hasTouch && prefersTouch);
+    };
+    const mq = window.matchMedia("(pointer: coarse)");
+    mq.addEventListener("change", handleTouch, { signal });
+    window.addEventListener("pointerdown", handleTouch, { signal });
+    handleTouch();
+    return () => controller.abort();
+  }, []);
+  return isTouchPrimary;
+}
+
+// primitives/scroll-area/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var ScrollAreaContext = createContext(false);
 var ScrollArea2 = forwardRef(({ className, children, viewportClassName, orientation = "vertical", ...props }, ref) => {
-  const isTouch = useTouchPrimary2();
+  const isTouch = useTouchPrimary();
   return /* @__PURE__ */ jsx(ScrollAreaContext.Provider, {
     value: isTouch,
     children: isTouch ? /* @__PURE__ */ jsx("div", {
@@ -63,7 +84,7 @@ var ScrollArea2 = forwardRef(({ className, children, viewportClassName, orientat
 ScrollArea2.displayName = "ScrollArea";
 var ScrollBar2 = forwardRef(({ className, orientation = "vertical", ...props }, ref) => {
   const isTouch = useContext(ScrollAreaContext);
-  const shape = useShape2();
+  const shape = useShape();
   if (isTouch)
     return null;
   return /* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, {