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

package/dist/shared/{components-xxvdw7k1.js → components-65vwfjs6.js}

@@ -1,42 +1,45 @@
+"use client";
 import {
-  useIcon
-} from "./components-zrkzcayz.js";
+  useIcon2
+} from "./components-jqpefjsn.js";
 import {
-  useReduceMotion
-} from "./components-men63rwj.js";
+  useReduceMotion2
+} from "./components-de99ykt7.js";
 import {
-  MorphSurface
-} from "./components-0q0sqfh4.js";
+  spring2
+} from "./components-3ey0hzpb.js";
 import {
-  useMorph
-} from "./components-hqeq3w9q.js";
+  useMorph2
+} from "./components-awra5sff.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
+import {
+  MorphSurface2
+} from "./components-4y816hwp.js";
 import {
-  shapeMap,
-  useShape
-} from "./components-cv16mryv.js";
+  shapeMap2,
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
+import {
+  SURFACE_BG2,
+  SURFACE_SHADOW2
+} from "./components-vf45j12c.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
   useSurface2,
   SurfaceProvider2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.js";
 import {
-  useControllableState
-} from "./components-n7mjr357.js";
+  useControllableState2
+} from "./components-tz1fv35x.js";
 import {
   CommandListRoot2,
   CommandShortcut2,
   CommandList2
-} from "./components-39vmfq9s.js";
-import {
-  spring2
-} from "./components-1v7rxytx.js";
+} from "./components-vsa625vk.js";
 
 // components/inputs/search/index.tsx
 import { Autocomplete } from "@base-ui/react/autocomplete";
@@ -67,17 +70,17 @@ function Search2({
   tier = "moderate",
   className
 }) {
-  const [query, setQuery] = useControllableState(value, defaultValue, onValueChange);
-  const [isExpanded, setExpanded] = useControllableState(expanded, defaultExpanded, onExpandedChange);
+  const [query, setQuery] = useControllableState2(value, defaultValue, onValueChange);
+  const [isExpanded, setExpanded] = useControllableState2(expanded, defaultExpanded, onExpandedChange);
   const [suggesting, setSuggesting] = useState(false);
   const [settled, setSettled] = useState(isExpanded);
   const [rest, setRest] = useState(0);
-  const reduced = useReduceMotion();
-  const shape = useShape();
+  const reduced = useReduceMotion2();
+  const shape = useShape2();
   const size = useSize2();
   const level = Math.min(useSurface2() + 2, 8);
-  const SearchIcon = useIcon("search");
-  const XIcon = useIcon("x");
+  const SearchIcon = useIcon2("search");
+  const XIcon = useIcon2("x");
   const button = useRef(null);
   const field = useRef(null);
   const input = useRef(null);
@@ -85,7 +88,7 @@ function Search2({
   const suggestions = useMemo(() => items?.map((item) => typeof item === "string" ? { label: item } : item), [items]);
   const open = suggesting && isExpanded && settled;
   const lifted = isExpanded || settled;
-  const morph = useMorph(open, origin, { from: field, effect, tier });
+  const morph = useMorph2(open, origin, { from: field, effect, tier });
   useLayoutEffect(() => {
     const el = button.current;
     if (!el)
@@ -175,7 +178,7 @@ function Search2({
         }),
         rest > 0 && /* @__PURE__ */ jsx(motion.div, {
           ref: field,
-          className: cn2("absolute top-0 h-full overflow-hidden ring-1 transition-[box-shadow] duration-moderate", align === "end" ? "right-0" : "left-0", shape.input, lifted ? cn2("z-10 ring-transparent", SURFACE_BG[level], SURFACE_SHADOW[3]) : "ring-border group-hover/search:bg-muted/50"),
+          className: cn2("absolute top-0 h-full overflow-hidden ring-1 transition-[box-shadow] duration-moderate", align === "end" ? "right-0" : "left-0", shape.input, lifted ? cn2("z-10 ring-transparent", SURFACE_BG2[level], SURFACE_SHADOW2[3]) : "ring-border group-hover/search:bg-muted/50"),
           initial: false,
           animate: { width: isExpanded ? width : rest },
           transition: reduced ? { duration: 0 } : isExpanded ? spring2.slow : spring2.slow.exit,
@@ -239,11 +242,11 @@ function Search2({
             className: "relative outline-none",
             children: /* @__PURE__ */ jsx(SurfaceProvider2, {
               value: level,
-              children: /* @__PURE__ */ jsx(MorphSurface, {
+              children: /* @__PURE__ */ jsx(MorphSurface2, {
                 morph,
-                bg: SURFACE_BG[level],
-                shadow: SURFACE_SHADOW[3],
-                radius: shapeMap.rounded.container,
+                bg: SURFACE_BG2[level],
+                shadow: SURFACE_SHADOW2[3],
+                radius: shapeMap2.rounded.container,
                 className: "flex max-h-[min(300px,var(--available-height))] w-[var(--anchor-width)] flex-col overflow-hidden",
                 children: /* @__PURE__ */ jsx(CommandList2, {
                   emptyMessage,

package/dist/shared/{components-frw34b65.js → components-6j2fh74k.js}

@@ -1,87 +1,83 @@
+"use client";
 import {
-  opensInPlace,
-  inPlaceOffset,
-  useMorphOrigin,
-  useMorph
-} from "./components-hqeq3w9q.js";
+  spring2
+} from "./components-3ey0hzpb.js";
+import {
+  opensInPlace2,
+  inPlaceOffset2,
+  useMorphOrigin2,
+  useMorph2
+} from "./components-awra5sff.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
   FluidHoverHighlight2
-} from "./components-kvr7f9hy.js";
+} from "./components-qdm3yh26.js";
+import {
+  shapeMap2,
+  useShape2
+} from "./components-78x40gee.js";
+import {
+  FocusRing2
+} from "./components-8nwsqjn8.js";
+import {
+  MorphSurface2
+} from "./components-4y816hwp.js";
 import {
-  MorphSurface
-} from "./components-0q0sqfh4.js";
+  popupScrollAreaClass2,
+  popupViewportClass2,
+  isDisabledRow2
+} from "./components-h6p86be3.js";
 import {
-  shapeMap,
-  useShape
-} from "./components-cv16mryv.js";
+  RowOrderContext2,
+  useRowOrder2,
+  useRowSlot2
+} from "./components-4bwsd46w.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
+import {
+  SURFACE_BG2,
+  SURFACE_SHADOW2
+} from "./components-vf45j12c.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
   useSurface2,
   SurfaceProvider2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-59efxjd9.js";
+} from "./components-yhgq0qxx.js";
+import {
+  useKeyboardNavGate2
+} from "./components-tz4gaf1v.js";
 import {
   ScrollArea2
-} from "./components-hawvy2qz.js";
+} from "./components-2z48g4fp.js";
 import {
   SizeProvider2
-} from "./components-jjw69c4c.js";
+} from "./components-dcc02hs2.js";
 import {
-  popupScrollAreaClass,
-  popupViewportClass,
-  POPUP_NAV_KEYS,
-  isDisabledRow
-} from "./components-vynjtrk6.js";
-import {
-  spring2
-} from "./components-1v7rxytx.js";
+  triggerVariants2
+} from "./components-xdqmt6ed.js";
 
 // components/inputs/select/index.tsx
 import { Select as SelectPrimitive } from "@base-ui/react/select";
-import { cva } from "class-variance-authority";
 import { AnimatePresence, motion } from "motion/react";
 import {
   Children,
   createContext,
   forwardRef,
   isValidElement,
-  useCallback as useCallback2,
+  useCallback,
   useContext,
-  useEffect as useEffect2,
+  useEffect,
   useImperativeHandle,
   useMemo,
-  useRef as useRef2,
+  useRef,
   useState
 } from "react";
-
-// lib/use-keyboard-nav-gate.ts
-import { useCallback, useEffect, useRef } from "react";
-function useKeyboardNavGate(open) {
-  const keyboardNavRef = useRef(false);
-  useEffect(() => {
-    if (!open)
-      return;
-    const active = document.activeElement;
-    keyboardNavRef.current = active instanceof HTMLElement && active.matches(":focus-visible");
-  }, [open]);
-  const trackKeyboardNav = useCallback((e) => {
-    if (POPUP_NAV_KEYS.includes(e.key))
-      keyboardNavRef.current = true;
-  }, []);
-  return { keyboardNavRef, trackKeyboardNav };
-}
-
-// components/inputs/select/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var selectionAckMs = 300;
 var SelectContext = createContext(null);
@@ -92,7 +88,7 @@ function useSelectContext() {
   return ctx;
 }
 var SelectContentContext = createContext(null);
-var popupShape = shapeMap.rounded;
+var popupShape = shapeMap2.rounded;
 function collectSelectItems(node, out = []) {
   Children.forEach(node, (child) => {
     if (!isValidElement(child))
@@ -101,7 +97,7 @@ function collectSelectItems(node, out = []) {
     if (typeof props.value === "string") {
       out.push({
         value: props.value,
-        label: typeof props.children === "string" ? props.children : props.value
+        label: props.children ?? props.value
       });
     } else if (props.children) {
       collectSelectItems(props.children, out);
@@ -112,24 +108,24 @@ function collectSelectItems(node, out = []) {
 function Select2({ children, value, defaultValue, onValueChange, disabled = false, name, required, size }) {
   const [internalValue, setInternalValue] = useState(defaultValue ?? "");
   const [open, setOpen] = useState(false);
-  const { origin, capture } = useMorphOrigin();
+  const { origin, capture } = useMorphOrigin2();
   const currentValue = value !== undefined ? value : internalValue;
   const items = useMemo(() => collectSelectItems(children), [children]);
-  const handleValueChange = useCallback2((next) => {
+  const handleValueChange = useCallback((next) => {
     const v = next ?? "";
     if (value === undefined)
       setInternalValue(v);
     onValueChange?.(v);
   }, [value, onValueChange]);
-  const ackTimeoutRef = useRef2(null);
-  const cancelAckClose = useCallback2(() => {
+  const ackTimeoutRef = useRef(null);
+  const cancelAckClose = useCallback(() => {
     if (ackTimeoutRef.current !== null) {
       clearTimeout(ackTimeoutRef.current);
       ackTimeoutRef.current = null;
     }
   }, []);
-  useEffect2(() => cancelAckClose, [cancelAckClose]);
-  const handleOpenChange = useCallback2((nextOpen, eventDetails) => {
+  useEffect(() => cancelAckClose, [cancelAckClose]);
+  const handleOpenChange = useCallback((nextOpen, eventDetails) => {
     if (nextOpen)
       capture(eventDetails);
     if (!nextOpen && eventDetails.reason === "item-press") {
@@ -143,7 +139,9 @@ function Select2({ children, value, defaultValue, onValueChange, disabled = fals
     cancelAckClose();
     setOpen(nextOpen);
   }, [cancelAckClose, capture]);
-  const ctx = useMemo(() => ({ value: currentValue, open, origin }), [currentValue, open, origin]);
+  const picked = items.find((item) => item.value === currentValue)?.label;
+  const textLabel = picked === undefined || typeof picked === "string" || typeof picked === "number";
+  const ctx = useMemo(() => ({ value: currentValue, open, origin, textLabel }), [currentValue, open, origin, textLabel]);
   const root = /* @__PURE__ */ jsx(SelectContext.Provider, {
     value: ctx,
     children: /* @__PURE__ */ jsx(SelectPrimitive.Root, {
@@ -165,24 +163,16 @@ function Select2({ children, value, defaultValue, onValueChange, disabled = fals
   }) : root;
 }
 Select2.displayName = "Select";
-var triggerVariants2 = cva([
-  "group inline-flex items-center justify-between outline-none cursor-pointer",
-  "transition-all duration-fast",
-  "disabled:opacity-50 disabled:pointer-events-none",
-  "focus-visible:ring-1 focus-visible:ring-focus-ring"
-], {
-  variants: {
-    variant: {
-      bordered: "border border-border bg-transparent text-foreground hover:bg-hover",
-      borderless: "border border-transparent bg-transparent text-foreground hover:bg-hover"
-    }
-  },
-  defaultVariants: {
-    variant: "bordered"
-  }
-});
-var SelectTrigger2 = forwardRef(({ className, variant, icon: Icon, placeholder = "Select…", error, size, ...props }, ref) => {
-  const shape = useShape();
+function SelectValue2({ placeholder = "Select…", className }) {
+  const { textLabel } = useSelectContext();
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, {
+    placeholder,
+    className: cn2("min-w-0 flex-1 text-left data-[placeholder]:text-muted-foreground", textLabel ? "truncate [text-box:trim-both_cap_alphabetic] py-1 -my-1" : "flex items-center", className)
+  });
+}
+SelectValue2.displayName = "SelectValue";
+var SelectTrigger2 = forwardRef(({ className, variant, icon: Icon, placeholder = "Select…", error, size, children, ...props }, ref) => {
+  const shape = useShape2();
   const sizeClasses = useSize2(size);
   const compact = sizeClasses.variant === "compact";
   return /* @__PURE__ */ jsxs("div", {
@@ -202,9 +192,8 @@ var SelectTrigger2 = forwardRef(({ className, variant, icon: Icon, placeholder =
                 strokeWidth: 1.5,
                 className: "shrink-0 text-muted-foreground transition-[color,stroke-width] duration-fast group-hover:text-foreground group-hover:stroke-[2]"
               }),
-              /* @__PURE__ */ jsx(SelectPrimitive.Value, {
-                placeholder,
-                className: "min-w-0 flex-1 text-left truncate [text-box:trim-both_cap_alphabetic] py-1 -my-1 data-[placeholder]:text-muted-foreground"
+              children ?? /* @__PURE__ */ jsx(SelectValue2, {
+                placeholder
               })
             ]
           }),
@@ -232,24 +221,35 @@ var SelectTrigger2 = forwardRef(({ className, variant, icon: Icon, placeholder =
   });
 });
 SelectTrigger2.displayName = "SelectTrigger";
-var SelectContent2 = forwardRef(({ from, effect, hideSource, tier = "moderate", className, children }, ref) => {
+var SelectContent2 = forwardRef(({
+  from,
+  effect,
+  hideSource,
+  tier = "moderate",
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  className,
+  children
+}, ref) => {
   const { open, value, origin } = useSelectContext();
-  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
+  const rowOrder = useRowOrder2();
+  const morph = useMorph2(open, origin, { from, effect, hideSource, tier });
   useImperativeHandle(ref, () => morph.popup, [morph.popup]);
   const level = Math.min(useSurface2() + 2, 8);
   const shape = popupShape;
-  const containerRef = useRef2(null);
-  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow });
+  const containerRef = useRef(null);
+  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow2 });
   const { activeIndex, setActiveIndex, itemRects, isMeasured, handlers, registerItem, remeasure } = hover;
   const [focusedIndex, setFocusedIndex] = useState(null);
-  const { keyboardNavRef, trackKeyboardNav } = useKeyboardNavGate(open);
+  const { keyboardNavRef, trackKeyboardNav } = useKeyboardNavGate2(open);
   const [checkedIndex, setCheckedIndex] = useState(undefined);
-  useEffect2(() => {
+  useEffect(() => {
     if (!open)
       return;
     remeasure();
   }, [open, remeasure]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!open)
       return;
     let inner;
@@ -257,9 +257,8 @@ var SelectContent2 = forwardRef(({ from, effect, hideSource, tier = "moderate",
       inner = requestAnimationFrame(() => {
         const container = containerRef.current;
         if (container) {
-          const items = Array.from(container.querySelectorAll("[data-fluid-hover-index]"));
-          const idx = items.findIndex((el) => el.getAttribute("data-value") === value);
-          setCheckedIndex(idx !== -1 ? idx : undefined);
+          const row = Array.from(container.querySelectorAll("[data-fluid-hover-index]")).find((el) => el.getAttribute("data-value") === value);
+          setCheckedIndex(row ? Number(row.getAttribute("data-fluid-hover-index")) : undefined);
         }
       });
     });
@@ -268,7 +267,7 @@ var SelectContent2 = forwardRef(({ from, effect, hideSource, tier = "moderate",
       cancelAnimationFrame(inner);
     };
   }, [open, value]);
-  useEffect2(() => {
+  useEffect(() => {
     if (open)
       return;
     setCheckedIndex(undefined);
@@ -280,9 +279,9 @@ var SelectContent2 = forwardRef(({ from, effect, hideSource, tier = "moderate",
   const contentCtx = useMemo(() => ({ registerItem, activeIndex, checkedIndex }), [registerItem, activeIndex, checkedIndex]);
   return /* @__PURE__ */ jsx(SelectPrimitive.Portal, {
     children: /* @__PURE__ */ jsx(SelectPrimitive.Positioner, {
-      side: "bottom",
-      align: "start",
-      sideOffset: opensInPlace({ effect, hideSource }) ? inPlaceOffset : 6,
+      side,
+      align,
+      sideOffset: opensInPlace2({ effect, hideSource }) ? inPlaceOffset2 : sideOffset,
       alignItemWithTrigger: false,
       className: "z-50 outline-none",
       children: /* @__PURE__ */ jsx(SelectContentContext.Provider, {
@@ -314,15 +313,15 @@ var SelectContent2 = forwardRef(({ from, effect, hideSource, tier = "moderate",
           className: "relative select-none outline-none",
           children: /* @__PURE__ */ jsx(SurfaceProvider2, {
             value: level,
-            children: /* @__PURE__ */ jsx(MorphSurface, {
+            children: /* @__PURE__ */ jsx(MorphSurface2, {
               morph,
-              bg: SURFACE_BG[level],
-              shadow: SURFACE_SHADOW[3],
+              bg: SURFACE_BG2[level],
+              shadow: SURFACE_SHADOW2[3],
               radius: shape.container,
               className: cn2(`flex flex-col min-w-[var(--anchor-width)] max-h-[min(300px,var(--available-height))] overflow-hidden ${shape.container}`, className),
               children: /* @__PURE__ */ jsx(ScrollArea2, {
-                className: popupScrollAreaClass,
-                viewportClassName: cn2(popupViewportClass, "scroll-fade"),
+                className: popupScrollAreaClass2,
+                viewportClassName: cn2(popupViewportClass2, "scroll-fade"),
                 children: /* @__PURE__ */ jsxs("div", {
                   ref: containerRef,
                   className: "relative flex flex-col p-1",
@@ -350,24 +349,14 @@ var SelectContent2 = forwardRef(({ from, effect, hideSource, tier = "moderate",
                       hidden: !open,
                       className: shape.bg
                     }),
-                    open && /* @__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 }
-                        }
-                      })
+                    open && /* @__PURE__ */ jsx(FocusRing2, {
+                      rect: focusRect,
+                      shape: "rounded"
                     }),
-                    children
+                    /* @__PURE__ */ jsx(RowOrderContext2.Provider, {
+                      value: rowOrder,
+                      children
+                    })
                   ]
                 })
               })
@@ -379,18 +368,19 @@ var SelectContent2 = forwardRef(({ from, effect, hideSource, tier = "moderate",
   });
 });
 SelectContent2.displayName = "SelectContent";
-var SelectItem2 = forwardRef(({ className, children, icon: Icon, value, index, disabled = false, ...props }, ref) => {
+var SelectItem2 = forwardRef(({ className, children, icon: Icon, value, index: indexProp, textValue, disabled = false, ...props }, ref) => {
   const selectCtx = useSelectContext();
   const contentCtx = useContext(SelectContentContext);
-  const internalRef = useRef2(null);
+  const internalRef = useRef(null);
   const shape = popupShape;
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
-  const hasMounted = useRef2(false);
-  useEffect2(() => {
+  const hasMounted = useRef(false);
+  useEffect(() => {
     hasMounted.current = true;
   }, []);
   const registerItem = contentCtx?.registerItem;
+  const { index } = useRowSlot2(internalRef, indexProp);
   useRegisterFluidHoverItem2(registerItem, index, internalRef);
   const isActive = contentCtx?.activeIndex === index;
   const isChecked = selectCtx.value === value;
@@ -398,7 +388,7 @@ var SelectItem2 = forwardRef(({ className, children, icon: Icon, value, index, d
   return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
     value,
     disabled,
-    label: typeof children === "string" ? children : undefined,
+    label: textValue ?? (typeof children === "string" ? children : undefined),
     render: /* @__PURE__ */ jsx("div", {
       ref: (node) => {
         internalRef.current = node;
@@ -420,7 +410,7 @@ var SelectItem2 = forwardRef(({ className, children, icon: Icon, value, index, d
       }),
       /* @__PURE__ */ jsx(SelectPrimitive.ItemText, {
         render: /* @__PURE__ */ jsx("span", {
-          className: "flex-1 min-w-0 truncate [text-box:trim-both_cap_alphabetic] py-1 -my-1"
+          className: cn2("flex-1 min-w-0", typeof children === "string" || typeof children === "number" ? "truncate [text-box:trim-both_cap_alphabetic] py-1 -my-1" : "flex items-center")
         }),
         children
       }),
@@ -486,6 +476,7 @@ var SelectSeparator2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__
 }));
 SelectSeparator2.displayName = "SelectSeparator";
 Select2.Trigger = SelectTrigger2;
+Select2.Value = SelectValue2;
 Select2.Content = SelectContent2;
 Select2.Item = SelectItem2;
 Select2.Group = SelectGroup2;
@@ -493,4 +484,4 @@ Select2.Label = SelectLabel2;
 Select2.Separator = SelectSeparator2;
 var select_default = Select2;
 
-export { Select2, triggerVariants2, SelectTrigger2, SelectContent2, SelectItem2, SelectGroup2, SelectLabel2, SelectSeparator2, select_default };
+export { Select2, SelectValue2, SelectTrigger2, SelectContent2, SelectItem2, SelectGroup2, SelectLabel2, SelectSeparator2, select_default };