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

package/dist/shared/{components-wqrvqq5p.js → components-2ecg8svx.js}

@@ -1,89 +1,87 @@
-"use client";
 import {
-  spring2
-} from "./components-3ey0hzpb.js";
-import {
-  opensInPlace2,
-  inPlaceOffset2,
-  useMorphOrigin2,
-  useMorph2
-} from "./components-awra5sff.js";
+  opensInPlace,
+  inPlaceOffset,
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 import {
   FluidHoverHighlight2
-} from "./components-qdm3yh26.js";
-import {
-  shapeMap2,
-  useShape2
-} from "./components-71nbt03m.js";
+} from "./components-kvr7f9hy.js";
 import {
-  FocusRing2
-} from "./components-wbbckbw8.js";
+  MorphSurface
+} from "./components-0q0sqfh4.js";
 import {
-  MorphSurface2
-} from "./components-4y816hwp.js";
-import {
-  popupScrollAreaClass2,
-  popupViewportClass2,
-  isDisabledRow2
-} from "./components-h6p86be3.js";
-import {
-  RowOrderContext2,
-  useRowOrder2,
-  useRowSlot2
-} from "./components-krtx3m5b.js";
+  shapeMap,
+  useShape
+} from "./components-cv16mryv.js";
 import {
   useSize2
-} from "./components-h83az0bz.js";
-import {
-  slotRender2,
-  slotId2
-} from "./components-mrbaxt8q.js";
-import {
-  SURFACE_BG2,
-  SURFACE_SHADOW2
-} from "./components-vf45j12c.js";
+} from "./components-0sn7ypjw.js";
 import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
   useSurface2,
   SurfaceProvider2
-} from "./components-dhgk6mbt.js";
+} from "./components-zx6b6yby.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-yhgq0qxx.js";
-import {
-  useKeyboardNavGate2
-} from "./components-tz4gaf1v.js";
+} from "./components-59efxjd9.js";
 import {
   ScrollArea2
-} from "./components-ctqmge8t.js";
+} from "./components-b0eac83j.js";
 import {
   SizeProvider2
-} from "./components-dcc02hs2.js";
+} from "./components-jjw69c4c.js";
+import {
+  popupScrollAreaClass,
+  popupViewportClass,
+  POPUP_NAV_KEYS,
+  isDisabledRow
+} from "./components-vynjtrk6.js";
 import {
-  triggerVariants2
-} from "./components-xdqmt6ed.js";
+  spring2
+} from "./components-1v7rxytx.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,
-  cloneElement,
   createContext,
   forwardRef,
   isValidElement,
-  useCallback,
+  useCallback as useCallback2,
   useContext,
-  useEffect,
+  useEffect as useEffect2,
   useImperativeHandle,
   useMemo,
-  useRef,
-  useState,
-  version
+  useRef as useRef2,
+  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);
@@ -94,20 +92,7 @@ function useSelectContext() {
   return ctx;
 }
 var SelectContentContext = createContext(null);
-var popupShape = shapeMap2.rounded;
-function elementRef(el) {
-  if (!el)
-    return;
-  if (parseInt(version, 10) >= 19)
-    return el.props.ref;
-  return el.ref;
-}
-var ownChildren = (el) => el.props.children;
-function itemLabel(asChild, render, children) {
-  if (asChild && isValidElement(children))
-    return ownChildren(children);
-  return children === undefined && render ? ownChildren(render) : children;
-}
+var popupShape = shapeMap.rounded;
 function collectSelectItems(node, out = []) {
   Children.forEach(node, (child) => {
     if (!isValidElement(child))
@@ -116,7 +101,7 @@ function collectSelectItems(node, out = []) {
     if (typeof props.value === "string") {
       out.push({
         value: props.value,
-        label: itemLabel(props.asChild, props.render, props.children) ?? props.value
+        label: typeof props.children === "string" ? props.children : props.value
       });
     } else if (props.children) {
       collectSelectItems(props.children, out);
@@ -124,63 +109,41 @@ function collectSelectItems(node, out = []) {
   });
   return out;
 }
-function Select2({
-  children,
-  value,
-  defaultValue,
-  onValueChange,
-  open: openProp,
-  defaultOpen = false,
-  onOpenChange,
-  disabled = false,
-  name,
-  required,
-  size
-}) {
+function Select2({ children, value, defaultValue, onValueChange, disabled = false, name, required, size }) {
   const [internalValue, setInternalValue] = useState(defaultValue ?? "");
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const { origin, capture } = useMorphOrigin2();
+  const [open, setOpen] = useState(false);
+  const { origin, capture } = useMorphOrigin();
   const currentValue = value !== undefined ? value : internalValue;
-  const controlledOpen = openProp !== undefined;
-  const open = controlledOpen ? openProp : internalOpen;
   const items = useMemo(() => collectSelectItems(children), [children]);
-  const handleValueChange = useCallback((next) => {
+  const handleValueChange = useCallback2((next) => {
     const v = next ?? "";
     if (value === undefined)
       setInternalValue(v);
     onValueChange?.(v);
   }, [value, onValueChange]);
-  const ackTimeoutRef = useRef(null);
-  const cancelAckClose = useCallback(() => {
+  const ackTimeoutRef = useRef2(null);
+  const cancelAckClose = useCallback2(() => {
     if (ackTimeoutRef.current !== null) {
       clearTimeout(ackTimeoutRef.current);
       ackTimeoutRef.current = null;
     }
   }, []);
-  useEffect(() => cancelAckClose, [cancelAckClose]);
-  const onOpenChangeRef = useRef(onOpenChange);
-  onOpenChangeRef.current = onOpenChange;
-  const controlledOpenRef = useRef(controlledOpen);
-  controlledOpenRef.current = controlledOpen;
-  const handleOpenChange = useCallback((nextOpen, eventDetails) => {
+  useEffect2(() => cancelAckClose, [cancelAckClose]);
+  const handleOpenChange = useCallback2((nextOpen, eventDetails) => {
     if (nextOpen)
       capture(eventDetails);
-    cancelAckClose();
-    if (!nextOpen && eventDetails.reason === "item-press" && !controlledOpenRef.current) {
+    if (!nextOpen && eventDetails.reason === "item-press") {
+      cancelAckClose();
       ackTimeoutRef.current = window.setTimeout(() => {
         ackTimeoutRef.current = null;
-        setInternalOpen(false);
-        onOpenChangeRef.current?.(false, eventDetails);
+        setOpen(false);
       }, selectionAckMs);
       return;
     }
-    if (!controlledOpenRef.current)
-      setInternalOpen(nextOpen);
-    onOpenChangeRef.current?.(nextOpen, eventDetails);
+    cancelAckClose();
+    setOpen(nextOpen);
   }, [cancelAckClose, capture]);
-  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 ctx = useMemo(() => ({ value: currentValue, open, origin }), [currentValue, open, origin]);
   const root = /* @__PURE__ */ jsx(SelectContext.Provider, {
     value: ctx,
     children: /* @__PURE__ */ jsx(SelectPrimitive.Root, {
@@ -202,44 +165,34 @@ function Select2({
   }) : root;
 }
 Select2.displayName = "Select";
-var SelectValue2 = forwardRef(({ placeholder = "Select…", className, ...props }, ref) => {
-  const { textLabel } = useSelectContext();
-  return /* @__PURE__ */ jsx(SelectPrimitive.Value, {
-    ref,
-    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),
-    ...props
-  });
+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"
+  }
 });
-SelectValue2.displayName = "SelectValue";
-var SelectTrigger2 = forwardRef(({
-  className,
-  wrapperClassName,
-  variant,
-  icon: Icon,
-  placeholder = "Select…",
-  error,
-  size,
-  render,
-  asChild,
-  children,
-  ...props
-}, ref) => {
-  const shape = useShape2();
+var SelectTrigger2 = forwardRef(({ className, variant, icon: Icon, placeholder = "Select…", error, size, ...props }, ref) => {
+  const shape = useShape();
   const sizeClasses = useSize2(size);
   const compact = sizeClasses.variant === "compact";
-  const el = slotRender2(render, asChild, asChild ? children : undefined);
-  const content = el ? itemLabel(asChild, render, children) : children;
   return /* @__PURE__ */ jsxs("div", {
-    className: cn2("flex flex-col gap-1", wrapperClassName),
+    className: "flex flex-col gap-1",
     children: [
       /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
         ref,
-        render: el,
         "aria-invalid": !!error || undefined,
-        className: el ? cn2("group", className) : cn2(triggerVariants2({ variant }), sizeClasses.control, sizeClasses.text, sizeClasses.px, sizeClasses.gap, compact ? "min-w-[128px]" : "min-w-[160px]", shape.input, error && "border-destructive/50 hover:border-destructive/50", className),
+        className: cn2(triggerVariants2({ variant }), sizeClasses.control, sizeClasses.text, sizeClasses.px, sizeClasses.gap, compact ? "min-w-[128px]" : "min-w-[160px]", shape.input, error && "border-destructive/50 hover:border-destructive/50", className),
         ...props,
-        id: slotId2(el, props.id),
         children: [
           /* @__PURE__ */ jsxs("span", {
             className: cn2("flex items-center min-w-0 flex-1", sizeClasses.gap),
@@ -249,8 +202,9 @@ var SelectTrigger2 = forwardRef(({
                 strokeWidth: 1.5,
                 className: "shrink-0 text-muted-foreground transition-[color,stroke-width] duration-fast group-hover:text-foreground group-hover:stroke-[2]"
               }),
-              content ?? /* @__PURE__ */ jsx(SelectValue2, {
-                placeholder
+              /* @__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"
               })
             ]
           }),
@@ -278,45 +232,24 @@ var SelectTrigger2 = forwardRef(({
   });
 });
 SelectTrigger2.displayName = "SelectTrigger";
-var SelectContent2 = forwardRef(({
-  from,
-  effect,
-  hideSource,
-  tier = "moderate",
-  side = "bottom",
-  align = "start",
-  sideOffset = 6,
-  alignOffset,
-  collisionPadding,
-  finalFocus,
-  className,
-  children,
-  ...props
-}, ref) => {
+var SelectContent2 = forwardRef(({ from, effect, hideSource, tier = "moderate", className, children }, ref) => {
   const { open, value, origin } = useSelectContext();
-  const rowOrder = useRowOrder2();
-  const morph = useMorph2(open, origin, {
-    from,
-    effect,
-    hideSource,
-    tier,
-    returnFocus: typeof finalFocus === "boolean" ? finalFocus : finalFocus === undefined
-  });
+  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
   useImperativeHandle(ref, () => morph.popup, [morph.popup]);
   const level = Math.min(useSurface2() + 2, 8);
   const shape = popupShape;
-  const containerRef = useRef(null);
-  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow2 });
+  const containerRef = useRef2(null);
+  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow });
   const { activeIndex, setActiveIndex, itemRects, isMeasured, handlers, registerItem, remeasure } = hover;
   const [focusedIndex, setFocusedIndex] = useState(null);
-  const { keyboardNavRef, trackKeyboardNav } = useKeyboardNavGate2(open);
+  const { keyboardNavRef, trackKeyboardNav } = useKeyboardNavGate(open);
   const [checkedIndex, setCheckedIndex] = useState(undefined);
-  useEffect(() => {
+  useEffect2(() => {
     if (!open)
       return;
     remeasure();
   }, [open, remeasure]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!open)
       return;
     let inner;
@@ -324,8 +257,9 @@ var SelectContent2 = forwardRef(({
       inner = requestAnimationFrame(() => {
         const container = containerRef.current;
         if (container) {
-          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);
+          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);
         }
       });
     });
@@ -334,7 +268,7 @@ var SelectContent2 = forwardRef(({
       cancelAnimationFrame(inner);
     };
   }, [open, value]);
-  useEffect(() => {
+  useEffect2(() => {
     if (open)
       return;
     setCheckedIndex(undefined);
@@ -346,19 +280,15 @@ var SelectContent2 = forwardRef(({
   const contentCtx = useMemo(() => ({ registerItem, activeIndex, checkedIndex }), [registerItem, activeIndex, checkedIndex]);
   return /* @__PURE__ */ jsx(SelectPrimitive.Portal, {
     children: /* @__PURE__ */ jsx(SelectPrimitive.Positioner, {
-      side,
-      align,
-      sideOffset: opensInPlace2({ effect, hideSource }) ? inPlaceOffset2 : sideOffset,
-      alignOffset,
-      collisionPadding,
+      side: "bottom",
+      align: "start",
+      sideOffset: opensInPlace({ effect, hideSource }) ? inPlaceOffset : 6,
       alignItemWithTrigger: false,
       className: "z-50 outline-none",
       children: /* @__PURE__ */ jsx(SelectContentContext.Provider, {
         value: contentCtx,
         children: /* @__PURE__ */ jsx(SelectPrimitive.Popup, {
           ref: morph.popupRef,
-          finalFocus,
-          ...props,
           onKeyDownCapture: trackKeyboardNav,
           onMouseEnter: () => {
             handlers.onMouseEnter();
@@ -384,15 +314,15 @@ var SelectContent2 = forwardRef(({
           className: "relative select-none outline-none",
           children: /* @__PURE__ */ jsx(SurfaceProvider2, {
             value: level,
-            children: /* @__PURE__ */ jsx(MorphSurface2, {
+            children: /* @__PURE__ */ jsx(MorphSurface, {
               morph,
-              bg: SURFACE_BG2[level],
-              shadow: SURFACE_SHADOW2[3],
+              bg: SURFACE_BG[level],
+              shadow: SURFACE_SHADOW[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: popupScrollAreaClass2,
-                viewportClassName: cn2(popupViewportClass2, "scroll-fade"),
+                className: popupScrollAreaClass,
+                viewportClassName: cn2(popupViewportClass, "scroll-fade"),
                 children: /* @__PURE__ */ jsxs("div", {
                   ref: containerRef,
                   className: "relative flex flex-col p-1",
@@ -420,14 +350,24 @@ var SelectContent2 = forwardRef(({
                       hidden: !open,
                       className: shape.bg
                     }),
-                    open && /* @__PURE__ */ jsx(FocusRing2, {
-                      rect: focusRect,
-                      shape: "rounded"
+                    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 }
+                        }
+                      })
                     }),
-                    /* @__PURE__ */ jsx(RowOrderContext2.Provider, {
-                      value: rowOrder,
-                      children
-                    })
+                    children
                   ]
                 })
               })
@@ -439,60 +379,38 @@ var SelectContent2 = forwardRef(({
   });
 });
 SelectContent2.displayName = "SelectContent";
-var SelectItem2 = forwardRef(({
-  className,
-  children: childrenProp,
-  render,
-  asChild,
-  icon: Icon,
-  value,
-  index: indexProp,
-  textValue,
-  disabled = false,
-  ...props
-}, ref) => {
-  const el = slotRender2(render, asChild, asChild ? childrenProp : undefined);
-  const children = itemLabel(asChild, render, childrenProp);
+var SelectItem2 = forwardRef(({ className, children, icon: Icon, value, index, disabled = false, ...props }, ref) => {
   const selectCtx = useSelectContext();
   const contentCtx = useContext(SelectContentContext);
-  const internalRef = useRef(null);
+  const internalRef = useRef2(null);
   const shape = popupShape;
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
-  const hasMounted = useRef(false);
-  useEffect(() => {
+  const hasMounted = useRef2(false);
+  useEffect2(() => {
     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;
   const skipAnimation = !hasMounted.current;
-  const rowProps = {
-    ref: (node) => {
-      internalRef.current = node;
-      for (const r of [ref, elementRef(el)]) {
-        if (typeof r === "function")
-          r(node);
-        else if (r)
-          r.current = node;
-      }
-    },
-    "data-fluid-hover-index": index,
-    "data-value": value,
-    className: cn2(`relative z-10 flex ${sizeClasses.control} shrink-0 items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.itemPx} ${sizeClasses.text} cursor-pointer outline-none select-none`, "transition-[color] duration-fast", isActive || isChecked ? "text-foreground" : "text-muted-foreground", disabled && "opacity-50 pointer-events-none", className),
-    ...props
-  };
   return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
     value,
     disabled,
-    label: textValue ?? (typeof children === "string" ? children : undefined),
-    render: el ? cloneElement(el, {
-      ...rowProps,
-      className: cn2(rowProps.className, el.props.className)
-    }) : /* @__PURE__ */ jsx("div", {
-      ...rowProps
+    label: typeof children === "string" ? children : undefined,
+    render: /* @__PURE__ */ jsx("div", {
+      ref: (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      "data-fluid-hover-index": index,
+      "data-value": value,
+      className: cn2(`relative z-10 flex ${sizeClasses.control} shrink-0 items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.itemPx} ${sizeClasses.text} cursor-pointer outline-none select-none`, "transition-[color] duration-fast", isActive || isChecked ? "text-foreground" : "text-muted-foreground", disabled && "opacity-50 pointer-events-none", className),
+      ...props
     }),
     children: [
       Icon && /* @__PURE__ */ jsx(Icon, {
@@ -502,7 +420,7 @@ var SelectItem2 = forwardRef(({
       }),
       /* @__PURE__ */ jsx(SelectPrimitive.ItemText, {
         render: /* @__PURE__ */ jsx("span", {
-          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")
+          className: "flex-1 min-w-0 truncate [text-box:trim-both_cap_alphabetic] py-1 -my-1"
         }),
         children
       }),
@@ -542,13 +460,14 @@ var SelectItem2 = forwardRef(({
   });
 });
 SelectItem2.displayName = "SelectItem";
-var SelectGroup2 = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
-  ref,
-  role: "group",
-  className,
-  ...props,
-  children
-}));
+function SelectGroup2({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    role: "group",
+    className,
+    ...props,
+    children
+  });
+}
 SelectGroup2.displayName = "SelectGroup";
 var SelectLabel2 = forwardRef(({ className, ...props }, ref) => {
   const compact = useSize2().variant === "compact";
@@ -567,7 +486,6 @@ 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;
@@ -575,4 +493,4 @@ Select2.Label = SelectLabel2;
 Select2.Separator = SelectSeparator2;
 var select_default = Select2;
 
-export { Select2, SelectValue2, SelectTrigger2, SelectContent2, SelectItem2, SelectGroup2, SelectLabel2, SelectSeparator2, select_default };
+export { Select2, triggerVariants2, SelectTrigger2, SelectContent2, SelectItem2, SelectGroup2, SelectLabel2, SelectSeparator2, select_default };