@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-tqvarbfv.js

@@ -0,0 +1,288 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  GooIndicator
+} from "./components-chacnk61.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2
+} from "./components-zx6b6yby.js";
+import {
+  useFluidHover2
+} from "./components-59efxjd9.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// components/navigation/tabs/index.tsx
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  Children,
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TabsValueOrderContext = createContext(null);
+var TabsListContext = createContext(null);
+function useTabsList() {
+  const ctx = useContext(TabsListContext);
+  if (!ctx)
+    throw new Error("TabItem must be used within a TabsList");
+  return ctx;
+}
+var Tabs2 = forwardRef(({ value, onValueChange, selectedIndex, onSelect, defaultValue, defaultSelectedIndex, size, children, ...props }, ref) => {
+  const [valueOrder, setValueOrder] = useState([]);
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const updateValueOrder = useCallback((order) => {
+    setValueOrder((current) => {
+      if (current.length === order.length && current.every((v, i) => v === order[i])) {
+        return current;
+      }
+      return order;
+    });
+  }, []);
+  const resolvedValue = value ?? (selectedIndex != null ? valueOrder[selectedIndex] : uncontrolledValue ?? valueOrder[defaultSelectedIndex ?? 0]);
+  const handleValueChange = useCallback((newValue) => {
+    const v = newValue;
+    if (value === undefined && selectedIndex == null) {
+      setUncontrolledValue(v);
+    }
+    onValueChange?.(v);
+    if (onSelect) {
+      const idx = valueOrder.indexOf(v);
+      if (idx !== -1)
+        onSelect(idx);
+    }
+  }, [onValueChange, onSelect, valueOrder, value, selectedIndex]);
+  const root = /* @__PURE__ */ jsx(TabsValueOrderContext.Provider, {
+    value: {
+      valueOrder,
+      setValueOrder: updateValueOrder,
+      selectedValue: resolvedValue
+    },
+    children: /* @__PURE__ */ jsx(TabsPrimitive.Root, {
+      ref,
+      value: resolvedValue ?? "",
+      onValueChange: handleValueChange,
+      ...props,
+      children
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: root
+  }) : root;
+});
+Tabs2.displayName = "Tabs";
+var TabsList2 = forwardRef(({ children, className, ...props }, ref) => {
+  const containerRef = useRef(null);
+  const isMouseInside = useRef(false);
+  const shape = useShape();
+  const sizeClasses = useSize2();
+  const substrate = useSurface2();
+  const indicatorLevel = Math.min(substrate + 3, 8);
+  const valueOrderCtx = useContext(TabsValueOrderContext);
+  const [optimisticIdx, setOptimisticIdx] = useState(null);
+  const values = Children.toArray(children).filter(isValidElement).map((child) => child.props.value).filter((v) => typeof v === "string");
+  const valueOrderKey = values.join(",");
+  const setValueOrder = valueOrderCtx?.setValueOrder;
+  useLayoutEffect(() => {
+    setValueOrder?.(values);
+  }, [setValueOrder, valueOrderKey]);
+  const {
+    activeIndex: hoveredIndex,
+    setActiveIndex: setHoveredIndex,
+    itemRects,
+    handlers,
+    registerItem,
+    measureItems
+  } = useFluidHover2(containerRef, { axis: "x" });
+  const registerTab = useCallback((index, _value, el) => {
+    registerItem(index, el);
+  }, [registerItem]);
+  useEffect(() => {
+    measureItems();
+  }, [measureItems, children]);
+  const handleMouseMove = useCallback((e) => {
+    isMouseInside.current = true;
+    handlers.onMouseMove(e);
+  }, [handlers]);
+  const handleMouseLeave = useCallback(() => {
+    isMouseInside.current = false;
+    handlers.onMouseLeave();
+  }, [handlers]);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const selectedValue = valueOrderCtx?.selectedValue;
+  const selectedIdx = selectedValue !== undefined ? values.indexOf(selectedValue) : -1;
+  useEffect(() => {
+    setOptimisticIdx(selectedIdx >= 0 ? selectedIdx : null);
+  }, [selectedIdx]);
+  const activeSelectedIdx = optimisticIdx;
+  const selectedRect = activeSelectedIdx !== null ? itemRects[activeSelectedIdx] : null;
+  const hoverRect = hoveredIndex !== null ? itemRects[hoveredIndex] : null;
+  const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+  const isHoveringSelected = hoveredIndex === activeSelectedIdx;
+  const isHovering = hoveredIndex !== null && !isHoveringSelected;
+  const indexedChildren = Children.map(children, (child, i) => {
+    if (isValidElement(child) && typeof child.type !== "string") {
+      return cloneElement(child, { _index: i });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx(TabsListContext.Provider, {
+    value: {
+      registerTab,
+      hoveredIndex,
+      selectedValue,
+      setOptimisticIdx
+    },
+    children: /* @__PURE__ */ jsxs(TabsPrimitive.List, {
+      activateOnFocus: true,
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      onFocus: (e) => {
+        const trigger = e.target.closest('[role="tab"]');
+        if (!trigger)
+          return;
+        const indexAttr = trigger.getAttribute("data-fluid-hover-index");
+        if (indexAttr != null) {
+          const idx = Number(indexAttr);
+          setHoveredIndex(idx);
+          setFocusedIndex(e.target.matches(":focus-visible") ? idx : null);
+        }
+      },
+      onBlur: (e) => {
+        if (containerRef.current?.contains(e.relatedTarget))
+          return;
+        setFocusedIndex(null);
+        if (isMouseInside.current)
+          return;
+        setHoveredIndex(null);
+      },
+      className: cn2("relative inline-flex items-center select-none bg-muted", sizeClasses.segmentPad, shape.container, className),
+      ...props,
+      children: [
+        selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+          rect: selectedRect,
+          className: cn2(SURFACE_BG[indicatorLevel], shape.bg),
+          shadow: SURFACE_SHADOW[indicatorLevel],
+          opacity: isHovering ? 0.85 : 1
+        }),
+        selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+          rect: isHovering && hoverRect ? hoverRect : selectedRect,
+          className: cn2("bg-hover", shape.bg),
+          transition: spring2.fast,
+          opacity: isHovering ? 0.4 : 0
+        }),
+        /* @__PURE__ */ jsx(AnimatePresence, {
+          children: focusRect && /* @__PURE__ */ jsx(motion.div, {
+            className: cn2("absolute pointer-events-none z-20 border border-focus-ring", shape.focusRing),
+            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 }
+            }
+          })
+        }),
+        indexedChildren
+      ]
+    })
+  });
+});
+TabsList2.displayName = "TabsList";
+var TabItem2 = forwardRef(({ value, icon: Icon, label, _index = 0, className, onClick, ...props }, ref) => {
+  const internalRef = useRef(null);
+  const sizeClasses = useSize2();
+  const { registerTab, hoveredIndex, selectedValue, setOptimisticIdx } = useTabsList();
+  useEffect(() => {
+    registerTab(_index, value, internalRef.current);
+    return () => registerTab(_index, value, null);
+  }, [_index, value, registerTab]);
+  const isSelected = selectedValue === value;
+  const isActive = hoveredIndex === _index || isSelected;
+  return /* @__PURE__ */ jsxs(TabsPrimitive.Tab, {
+    onClick: (e) => {
+      setOptimisticIdx(_index);
+      onClick?.(e);
+    },
+    ref: (node) => {
+      internalRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    value,
+    "data-fluid-hover-index": _index,
+    className: cn2("relative z-10 flex items-center px-3 cursor-pointer bg-transparent border-none outline-none", sizeClasses.segmentItem, sizeClasses.gap, className),
+    ...props,
+    children: [
+      Icon && /* @__PURE__ */ jsx(Icon, {
+        size: sizeClasses.icon,
+        strokeWidth: isActive ? 2 : 1.5,
+        className: cn2("transition-[color,stroke-width] duration-fast", isActive ? "text-foreground" : "text-muted-foreground")
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        className: cn2("inline-grid whitespace-nowrap", 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", {
+            className: cn2("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", isActive ? "text-foreground" : "text-muted-foreground", isSelected ? "weight-semibold" : "weight-normal"),
+            children: label
+          })
+        ]
+      })
+    ]
+  });
+});
+TabItem2.displayName = "TabItem";
+var TabPanel2 = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(TabsPrimitive.Panel, {
+    ref,
+    className: cn2("outline-none", className),
+    ...props
+  });
+});
+TabPanel2.displayName = "TabPanel";
+Object.assign(Tabs2, { List: TabsList2, Item: TabItem2, Panel: TabPanel2 });
+var tabs_default = Tabs2;
+
+export { Tabs2, TabsList2, TabItem2, TabPanel2, tabs_default };

package/dist/shared/components-v6xp325t.js

@@ -0,0 +1,304 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  GooIndicator
+} from "./components-chacnk61.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  useFluidHover2
+} from "./components-59efxjd9.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// components/navigation/tabs-subtle/index.tsx
+import { Tabs } from "@base-ui/react/tabs";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TabsSubtleContext = createContext(null);
+var isPanel = (child) => isValidElement(child) && child.type === TabsSubtlePanel2;
+function useTabsSubtle() {
+  const ctx = useContext(TabsSubtleContext);
+  if (!ctx)
+    throw new Error("useTabsSubtle must be used within a TabsSubtle");
+  return ctx;
+}
+var TabsSubtle2 = forwardRef(({
+  children,
+  selectedIndex: selectedIndexProp,
+  defaultSelectedIndex = 0,
+  onSelect: onSelectProp,
+  idPrefix,
+  activeLabel = false,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const [selectedIndex, onSelect] = useControllableState(selectedIndexProp, defaultSelectedIndex, onSelectProp);
+  const childList = Children.toArray(children);
+  const panels = childList.filter(isPanel);
+  const tabs = childList.filter((child) => !isPanel(child));
+  const generatedIdPrefix = useId();
+  const resolvedIdPrefix = idPrefix ?? (panels.length > 0 ? generatedIdPrefix : undefined);
+  const containerRef = useRef(null);
+  const isMouseInside = useRef(false);
+  const shape = useShape();
+  const {
+    activeIndex: hoveredIndex,
+    setActiveIndex: setHoveredIndex,
+    itemRects: tabRects,
+    handlers,
+    registerItem,
+    measureItems: measureTabs
+  } = useFluidHover2(containerRef, { axis: "x" });
+  const tabElementsRef = useRef(new Map);
+  const registerTab = useCallback((index, element) => {
+    registerItem(index, element);
+    if (element) {
+      tabElementsRef.current.set(index, element);
+    } else {
+      tabElementsRef.current.delete(index);
+    }
+  }, [registerItem]);
+  useEffect(() => {
+    measureTabs();
+  }, [measureTabs, children]);
+  useEffect(() => {
+    const elements = tabElementsRef.current;
+    if (elements.size === 0)
+      return;
+    const ro = new ResizeObserver(() => measureTabs());
+    elements.forEach((el) => ro.observe(el));
+    return () => ro.disconnect();
+  }, [measureTabs, children]);
+  const handleMouseMove = useCallback((e) => {
+    isMouseInside.current = true;
+    handlers.onMouseMove(e);
+  }, [handlers]);
+  const handleMouseLeave = useCallback(() => {
+    isMouseInside.current = false;
+    handlers.onMouseLeave();
+  }, [handlers]);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const selectedRect = tabRects[selectedIndex];
+  const hoverRect = hoveredIndex !== null ? tabRects[hoveredIndex] : null;
+  const focusRect = focusedIndex !== null ? tabRects[focusedIndex] : null;
+  const isHoveringSelected = hoveredIndex === selectedIndex;
+  const isHovering = hoveredIndex !== null && !isHoveringSelected;
+  const root = /* @__PURE__ */ jsxs(TabsSubtleContext.Provider, {
+    value: {
+      registerTab,
+      hoveredIndex,
+      selectedIndex,
+      idPrefix: resolvedIdPrefix,
+      activeLabel
+    },
+    children: [
+      /* @__PURE__ */ jsx(Tabs.Root, {
+        value: selectedIndex,
+        onValueChange: (value) => {
+          if (typeof value === "number")
+            onSelect(value);
+        },
+        render: /* @__PURE__ */ jsxs(Tabs.List, {
+          activateOnFocus: false,
+          ref: (node) => {
+            containerRef.current = node;
+            if (typeof ref === "function")
+              ref(node);
+            else if (ref)
+              ref.current = node;
+          },
+          onMouseMove: handleMouseMove,
+          onMouseLeave: handleMouseLeave,
+          onFocus: (e) => {
+            const indexAttr = e.target.closest("[data-fluid-hover-index]")?.getAttribute("data-fluid-hover-index");
+            if (indexAttr != null) {
+              const idx = Number(indexAttr);
+              setHoveredIndex(idx);
+              setFocusedIndex(e.target.matches(":focus-visible") ? idx : null);
+            }
+          },
+          onBlur: (e) => {
+            if (containerRef.current?.contains(e.relatedTarget))
+              return;
+            setFocusedIndex(null);
+            if (isMouseInside.current)
+              return;
+            setHoveredIndex(null);
+          },
+          className: cn2("relative flex items-center select-none overflow-x-auto max-w-[calc(100%_+_8px)] scrollbar-hide -mx-1 px-1 -my-1 py-1", className),
+          ...props,
+          children: [
+            selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+              rect: selectedRect,
+              className: cn2("bg-active", shape.bg),
+              opacity: isHovering ? 0.8 : 1
+            }),
+            selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+              rect: isHovering && hoverRect ? hoverRect : selectedRect,
+              className: cn2("bg-active", shape.bg),
+              transition: spring2.fast,
+              opacity: isHovering ? 0.4 : 0
+            }),
+            /* @__PURE__ */ jsx(AnimatePresence, {
+              children: focusRect && /* @__PURE__ */ jsx(motion.div, {
+                className: cn2("absolute pointer-events-none z-20 border border-focus-ring", shape.focusRing),
+                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 }
+                }
+              })
+            }),
+            tabs
+          ]
+        })
+      }),
+      panels
+    ]
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: root
+  }) : root;
+});
+TabsSubtle2.displayName = "TabsSubtle";
+var TabsSubtleItem2 = forwardRef(({ icon: Icon, label, index, className, ...props }, ref) => {
+  const internalRef = useRef(null);
+  const [labelWidth, setLabelWidth] = useState(null);
+  const labelRoRef = useRef(null);
+  const measureLabel = useCallback((el) => {
+    labelRoRef.current?.disconnect();
+    labelRoRef.current = null;
+    if (!el)
+      return;
+    const update = () => setLabelWidth(el.offsetWidth);
+    update();
+    labelRoRef.current = new ResizeObserver(update);
+    labelRoRef.current.observe(el);
+  }, []);
+  const shape = useShape();
+  const sizeClasses = useSize2();
+  const { registerTab, hoveredIndex, selectedIndex, idPrefix, activeLabel } = useTabsSubtle();
+  useEffect(() => {
+    registerTab(index, internalRef.current);
+    return () => registerTab(index, null);
+  }, [index, registerTab]);
+  const isSelected = selectedIndex === index;
+  const isActive = hoveredIndex === index || isSelected;
+  const collapseLabel = activeLabel && !!Icon;
+  const showLabel = !collapseLabel || isSelected;
+  const labelContent = /* @__PURE__ */ jsxs("span", {
+    ref: measureLabel,
+    className: cn2("inline-grid whitespace-nowrap", 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", {
+        className: cn2("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", isActive ? "text-foreground" : "text-muted-foreground", isSelected ? "weight-semibold" : "weight-normal"),
+        children: label
+      })
+    ]
+  });
+  return /* @__PURE__ */ jsxs(Tabs.Tab, {
+    ref: (node) => {
+      const button = node;
+      internalRef.current = button;
+      if (typeof ref === "function")
+        ref(button);
+      else if (ref)
+        ref.current = button;
+    },
+    value: index,
+    "data-fluid-hover-index": index,
+    id: idPrefix ? `${idPrefix}-tab-${index}` : undefined,
+    "aria-controls": idPrefix ? `${idPrefix}-panel-${index}` : undefined,
+    "aria-label": collapseLabel && !showLabel ? label : undefined,
+    className: cn2("relative z-10 flex items-center cursor-pointer bg-transparent border-none outline-none", sizeClasses.control, sizeClasses.px, !collapseLabel && sizeClasses.gap, shape.bg, className),
+    ...props,
+    children: [
+      Icon && /* @__PURE__ */ jsx(Icon, {
+        size: sizeClasses.icon,
+        strokeWidth: isActive ? 2 : 1.5,
+        className: cn2("shrink-0 transition-[color,stroke-width] duration-fast", isActive ? "text-foreground" : "text-muted-foreground")
+      }),
+      collapseLabel ? /* @__PURE__ */ jsx(AnimatePresence, {
+        initial: false,
+        children: showLabel && /* @__PURE__ */ jsx(motion.span, {
+          className: "overflow-hidden",
+          style: labelWidth == null ? { width: "auto" } : undefined,
+          initial: { width: 0, opacity: 0, marginLeft: 0 },
+          animate: {
+            ...labelWidth != null ? { width: labelWidth } : null,
+            opacity: 1,
+            marginLeft: sizeClasses.variant === "compact" ? 6 : 8
+          },
+          exit: { width: 0, opacity: 0, marginLeft: 0 },
+          transition: {
+            ...spring2.fast,
+            opacity: { duration: spring2.fast.exit.duration }
+          },
+          children: labelContent
+        }, "label")
+      }) : labelContent
+    ]
+  });
+});
+TabsSubtleItem2.displayName = "TabsSubtleItem";
+var TabsSubtlePanel2 = forwardRef(({ index, selectedIndex, idPrefix, children, className, ...props }, ref) => {
+  const ctx = useContext(TabsSubtleContext);
+  const resolvedSelectedIndex = selectedIndex ?? ctx?.selectedIndex ?? -1;
+  const resolvedIdPrefix = idPrefix ?? ctx?.idPrefix;
+  const isSelected = resolvedSelectedIndex === index;
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    id: resolvedIdPrefix ? `${resolvedIdPrefix}-panel-${index}` : undefined,
+    role: "tabpanel",
+    "aria-labelledby": resolvedIdPrefix ? `${resolvedIdPrefix}-tab-${index}` : undefined,
+    hidden: !isSelected,
+    tabIndex: -1,
+    className: cn2("outline-none", className),
+    ...props,
+    children: isSelected && children
+  });
+});
+TabsSubtlePanel2.displayName = "TabsSubtlePanel";
+Object.assign(TabsSubtle2, { Item: TabsSubtleItem2, Panel: TabsSubtlePanel2 });
+var tabs_subtle_default = TabsSubtle2;
+
+export { TabsSubtle2, TabsSubtleItem2, TabsSubtlePanel2, tabs_subtle_default };