@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-7gv95yfy.js

@@ -0,0 +1,496 @@
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  POPUP_NAV_KEYS,
+  isDisabledRow,
+  popupScrollAreaClass,
+  popupViewportClass
+} from "./components-jw16snbn.js";
+import {
+  ScrollArea
+} from "./components-ed7cmssr.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  SurfaceProvider,
+  useSurface
+} from "./components-csxz9f52.js";
+import {
+  MorphSurface
+} from "./components-jxgznftn.js";
+import {
+  FluidHoverHighlight
+} from "./components-r22vtgqc.js";
+import {
+  useFluidHover,
+  useRegisterFluidHoverItem
+} from "./components-e46kf6cp.js";
+import {
+  shapeMap,
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  inPlaceOffset,
+  opensInPlace,
+  useMorph,
+  useMorphOrigin
+} from "./components-7nww01w4.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.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,
+  useContext,
+  useEffect as useEffect2,
+  useImperativeHandle,
+  useMemo,
+  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);
+function useSelectContext() {
+  const ctx = useContext(SelectContext);
+  if (!ctx)
+    throw new Error("Select compound components must be inside <Select>");
+  return ctx;
+}
+var SelectContentContext = createContext(null);
+var popupShape = shapeMap.rounded;
+function collectSelectItems(node, out = []) {
+  Children.forEach(node, (child) => {
+    if (!isValidElement(child))
+      return;
+    const props = child.props;
+    if (typeof props.value === "string") {
+      out.push({
+        value: props.value,
+        label: typeof props.children === "string" ? props.children : props.value
+      });
+    } else if (props.children) {
+      collectSelectItems(props.children, out);
+    }
+  });
+  return out;
+}
+function Select({ children, value, defaultValue, onValueChange, disabled = false, name, required, size }) {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const [open, setOpen] = useState(false);
+  const { origin, capture } = useMorphOrigin();
+  const currentValue = value !== undefined ? value : internalValue;
+  const items = useMemo(() => collectSelectItems(children), [children]);
+  const handleValueChange = useCallback2((next) => {
+    const v = next ?? "";
+    if (value === undefined)
+      setInternalValue(v);
+    onValueChange?.(v);
+  }, [value, onValueChange]);
+  const ackTimeoutRef = useRef2(null);
+  const cancelAckClose = useCallback2(() => {
+    if (ackTimeoutRef.current !== null) {
+      clearTimeout(ackTimeoutRef.current);
+      ackTimeoutRef.current = null;
+    }
+  }, []);
+  useEffect2(() => cancelAckClose, [cancelAckClose]);
+  const handleOpenChange = useCallback2((nextOpen, eventDetails) => {
+    if (nextOpen)
+      capture(eventDetails);
+    if (!nextOpen && eventDetails.reason === "item-press") {
+      cancelAckClose();
+      ackTimeoutRef.current = window.setTimeout(() => {
+        ackTimeoutRef.current = null;
+        setOpen(false);
+      }, selectionAckMs);
+      return;
+    }
+    cancelAckClose();
+    setOpen(nextOpen);
+  }, [cancelAckClose, capture]);
+  const ctx = useMemo(() => ({ value: currentValue, open, origin }), [currentValue, open, origin]);
+  const root = /* @__PURE__ */ jsx(SelectContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(SelectPrimitive.Root, {
+      value: currentValue === "" ? null : currentValue,
+      onValueChange: handleValueChange,
+      open,
+      onOpenChange: handleOpenChange,
+      items,
+      disabled,
+      name,
+      required,
+      modal: false,
+      children
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+    size,
+    children: root
+  }) : root;
+}
+Select.displayName = "Select";
+var triggerVariants = 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 SelectTrigger = forwardRef(({ className, variant, icon: Icon, placeholder = "Select…", error, size, ...props }, ref) => {
+  const shape = useShape();
+  const sizeClasses = useSize(size);
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex flex-col gap-1",
+    children: [
+      /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
+        ref,
+        "aria-invalid": !!error || undefined,
+        className: cn(triggerVariants({ 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,
+        children: [
+          /* @__PURE__ */ jsxs("span", {
+            className: cn("flex items-center min-w-0 flex-1", sizeClasses.gap),
+            children: [
+              Icon && /* @__PURE__ */ jsx(Icon, {
+                size: sizeClasses.icon,
+                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"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("svg", {
+            width: sizeClasses.icon,
+            height: sizeClasses.icon,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "shrink-0 text-muted-foreground transition-colors duration-fast group-hover:text-foreground",
+            children: /* @__PURE__ */ jsx("path", {
+              d: "M6 9l6 6 6-6"
+            })
+          })
+        ]
+      }),
+      error && /* @__PURE__ */ jsx("span", {
+        className: "text-caption text-destructive pl-3",
+        children: error
+      })
+    ]
+  });
+});
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = forwardRef(({ from, effect, hideSource, tier = "moderate", className, children }, ref) => {
+  const { open, value, origin } = useSelectContext();
+  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
+  useImperativeHandle(ref, () => morph.popup, [morph.popup]);
+  const level = Math.min(useSurface() + 2, 8);
+  const shape = popupShape;
+  const containerRef = useRef2(null);
+  const hover = useFluidHover(containerRef, { isItemDisabled: isDisabledRow });
+  const { activeIndex, setActiveIndex, itemRects, isMeasured, handlers, registerItem, remeasure } = hover;
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const { keyboardNavRef, trackKeyboardNav } = useKeyboardNavGate(open);
+  const [checkedIndex, setCheckedIndex] = useState(undefined);
+  useEffect2(() => {
+    if (!open)
+      return;
+    remeasure();
+  }, [open, remeasure]);
+  useEffect2(() => {
+    if (!open)
+      return;
+    let inner;
+    const outer = requestAnimationFrame(() => {
+      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);
+        }
+      });
+    });
+    return () => {
+      cancelAnimationFrame(outer);
+      cancelAnimationFrame(inner);
+    };
+  }, [open, value]);
+  useEffect2(() => {
+    if (open)
+      return;
+    setCheckedIndex(undefined);
+    setActiveIndex(null);
+    setFocusedIndex(null);
+  }, [open, setActiveIndex]);
+  const checkedRect = isMeasured && checkedIndex != null ? itemRects[checkedIndex] : null;
+  const focusRect = isMeasured && focusedIndex !== null ? itemRects[focusedIndex] : null;
+  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,
+      alignItemWithTrigger: false,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsx(SelectContentContext.Provider, {
+        value: contentCtx,
+        children: /* @__PURE__ */ jsx(SelectPrimitive.Popup, {
+          ref: morph.popupRef,
+          onKeyDownCapture: trackKeyboardNav,
+          onMouseEnter: () => {
+            handlers.onMouseEnter();
+            setFocusedIndex(null);
+          },
+          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(keyboardNavRef.current && e.target.matches(":focus-visible") ? idx : null);
+            }
+          },
+          onBlur: (e) => {
+            if (e.currentTarget.contains(e.relatedTarget))
+              return;
+            setFocusedIndex(null);
+            setActiveIndex(null);
+          },
+          className: "relative select-none outline-none",
+          children: /* @__PURE__ */ jsx(SurfaceProvider, {
+            value: level,
+            children: /* @__PURE__ */ jsx(MorphSurface, {
+              morph,
+              bg: SURFACE_BG[level],
+              shadow: SURFACE_SHADOW[3],
+              radius: shape.container,
+              className: cn(`flex flex-col min-w-[var(--anchor-width)] max-h-[min(300px,var(--available-height))] overflow-hidden ${shape.container}`, className),
+              children: /* @__PURE__ */ jsx(ScrollArea, {
+                className: popupScrollAreaClass,
+                viewportClassName: cn(popupViewportClass, "scroll-fade"),
+                children: /* @__PURE__ */ jsxs("div", {
+                  ref: containerRef,
+                  className: "relative flex flex-col p-1",
+                  children: [
+                    open && /* @__PURE__ */ jsx(AnimatePresence, {
+                      children: checkedRect && /* @__PURE__ */ jsx(motion.div, {
+                        className: `absolute ${shape.bg} bg-active pointer-events-none`,
+                        initial: false,
+                        animate: {
+                          top: checkedRect.top,
+                          left: checkedRect.left,
+                          width: checkedRect.width,
+                          height: checkedRect.height,
+                          opacity: 1
+                        },
+                        exit: { opacity: 0, transition: spring.moderate.exit },
+                        transition: {
+                          ...spring.moderate,
+                          opacity: { duration: spring.fast.duration }
+                        }
+                      })
+                    }),
+                    /* @__PURE__ */ jsx(FluidHoverHighlight, {
+                      hover,
+                      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: spring.fast.exit },
+                        transition: {
+                          ...spring.fast,
+                          opacity: { duration: spring.fast.duration }
+                        }
+                      })
+                    }),
+                    children
+                  ]
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+});
+SelectContent.displayName = "SelectContent";
+var SelectItem = forwardRef(({ className, children, icon: Icon, value, index, disabled = false, ...props }, ref) => {
+  const selectCtx = useSelectContext();
+  const contentCtx = useContext(SelectContentContext);
+  const internalRef = useRef2(null);
+  const shape = popupShape;
+  const sizeClasses = useSize();
+  const compact = sizeClasses.variant === "compact";
+  const hasMounted = useRef2(false);
+  useEffect2(() => {
+    hasMounted.current = true;
+  }, []);
+  const registerItem = contentCtx?.registerItem;
+  useRegisterFluidHoverItem(registerItem, index, internalRef);
+  const isActive = contentCtx?.activeIndex === index;
+  const isChecked = selectCtx.value === value;
+  const skipAnimation = !hasMounted.current;
+  return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
+    value,
+    disabled,
+    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: cn(`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, {
+        size: sizeClasses.icon,
+        strokeWidth: isActive || isChecked ? 2 : 1.5,
+        className: "shrink-0 transition-[color,stroke-width] duration-fast"
+      }),
+      /* @__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"
+        }),
+        children
+      }),
+      /* @__PURE__ */ jsx("span", {
+        "aria-hidden": true,
+        className: cn("shrink-0", compact ? "w-3.5 h-3.5" : "w-4 h-4"),
+        children: /* @__PURE__ */ jsx(AnimatePresence, {
+          children: isChecked && /* @__PURE__ */ jsx(motion.svg, {
+            width: sizeClasses.icon,
+            height: sizeClasses.icon,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "text-foreground",
+            initial: { opacity: 1 },
+            animate: { opacity: 1 },
+            exit: { opacity: 1 },
+            children: /* @__PURE__ */ jsx(motion.path, {
+              d: "M4 12L9 17L20 6",
+              initial: { pathLength: skipAnimation ? 1 : 0 },
+              animate: {
+                pathLength: 1,
+                transition: { duration: spring.fast.duration, ease: "easeOut" }
+              },
+              exit: {
+                pathLength: 0,
+                transition: { duration: 0.04, ease: "easeIn" }
+              }
+            })
+          }, "check")
+        })
+      })
+    ]
+  });
+});
+SelectItem.displayName = "SelectItem";
+function SelectGroup({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    role: "group",
+    className,
+    ...props,
+    children
+  });
+}
+SelectGroup.displayName = "SelectGroup";
+var SelectLabel = forwardRef(({ className, ...props }, ref) => {
+  const compact = useSize().variant === "compact";
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    className: cn("px-2 py-1.5 shrink-0 text-muted-foreground", compact ? "text-caption-compact" : "text-caption", className),
+    ...props
+  });
+});
+SelectLabel.displayName = "SelectLabel";
+var SelectSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  role: "separator",
+  className: cn("my-1 -mx-1 h-px shrink-0 bg-border/60", className),
+  ...props
+}));
+SelectSeparator.displayName = "SelectSeparator";
+Select.Trigger = SelectTrigger;
+Select.Content = SelectContent;
+Select.Item = SelectItem;
+Select.Group = SelectGroup;
+Select.Label = SelectLabel;
+Select.Separator = SelectSeparator;
+var select_default = Select;
+
+export { Select, triggerVariants, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, select_default };