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

package/dist/shared/components-q03cktx8.js

@@ -0,0 +1,246 @@
+"use client";
+import {
+  useMorphOrigin2,
+  useMorph2
+} from "./components-awra5sff.js";
+import {
+  cn2
+} from "./components-jcnjay5g.js";
+import {
+  MorphSurface2
+} from "./components-4y816hwp.js";
+import {
+  useShape2
+} from "./components-78x40gee.js";
+import {
+  slotRender2
+} from "./components-vfjc9jzz.js";
+
+// components/overlays/tooltip/index.tsx
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { motion, useMotionValue } from "motion/react";
+import {
+  cloneElement,
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TooltipPortalContainerContext = createContext(null);
+function TooltipPortalContainer2({ value, children }) {
+  return /* @__PURE__ */ jsx(TooltipPortalContainerContext.Provider, {
+    value,
+    children
+  });
+}
+var DEFAULT_DELAY = 200;
+var DEFAULT_TIMEOUT = 300;
+var TooltipGroupContext = createContext(false);
+function TooltipProvider2({
+  children,
+  delay,
+  closeDelay,
+  timeout,
+  delayDuration,
+  skipDelayDuration
+}) {
+  return /* @__PURE__ */ jsx(TooltipGroupContext.Provider, {
+    value: true,
+    children: /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+      delay: delay ?? delayDuration ?? DEFAULT_DELAY,
+      closeDelay,
+      timeout: Math.max(0, timeout ?? skipDelayDuration ?? DEFAULT_TIMEOUT),
+      children
+    })
+  });
+}
+var TooltipStateContext = createContext(null);
+function useTooltipState(part) {
+  const state = useContext(TooltipStateContext);
+  if (!state)
+    throw new Error(`${part} must be used inside a Tooltip (or Tooltip.Root).`);
+  return state;
+}
+function TooltipRoot2({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  delay: delayProp,
+  delayDuration,
+  closeDelay,
+  followCursor,
+  children
+}) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = openProp ?? internalOpen;
+  const hasAmbientProvider = useContext(TooltipGroupContext);
+  const { origin, capture } = useMorphOrigin2();
+  const handedOff = useRef(false);
+  const delay = delayProp ?? delayDuration;
+  const followOffset = useMotionValue(0);
+  useEffect(() => {
+    if (openProp && followCursor)
+      followOffset.set(0);
+  }, [openProp, followCursor, followOffset]);
+  const state = useMemo(() => ({ open, origin, handedOff, delay, closeDelay, followCursor, followOffset }), [open, origin, delay, closeDelay, followCursor, followOffset]);
+  const root = /* @__PURE__ */ jsx(TooltipStateContext.Provider, {
+    value: state,
+    children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, {
+      open,
+      onOpenChange: (next, details) => {
+        if (next)
+          capture(details);
+        handedOff.current = !next && details.reason === "none";
+        setInternalOpen(next);
+        onOpenChange?.(next);
+      },
+      children
+    })
+  });
+  if (hasAmbientProvider)
+    return root;
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+    delay: delay ?? DEFAULT_DELAY,
+    children: root
+  });
+}
+var TooltipTrigger2 = forwardRef(({ render, asChild, children, onPointerMove, ...props }, ref) => {
+  const { delay, closeDelay, followCursor, followOffset } = useTooltipState("Tooltip.Trigger");
+  const el = slotRender2(render, asChild, children);
+  const handleMove = (event) => {
+    onPointerMove?.(event);
+    if (!followCursor)
+      return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    followOffset.set(followCursor === "y" ? event.clientY - (rect.top + rect.height / 2) : event.clientX - (rect.left + rect.width / 2));
+  };
+  const shared = { ref, delay, closeDelay, onPointerMove: followCursor ? handleMove : onPointerMove, ...props };
+  return el ? /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
+    ...shared,
+    render: el
+  }) : /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
+    ...shared,
+    children
+  });
+});
+TooltipTrigger2.displayName = "TooltipTrigger";
+var TooltipContent2 = forwardRef(({
+  children,
+  side = "top",
+  align = "center",
+  sideOffset = 8,
+  alignOffset = 0,
+  className,
+  positionerClassName,
+  from,
+  effect = "goo",
+  tier = "moderate",
+  render,
+  asChild,
+  style,
+  ...props
+}, ref) => {
+  const { open, origin, handedOff, followCursor, followOffset } = useTooltipState("Tooltip.Content");
+  const shape = useShape2();
+  const portalContainer = useContext(TooltipPortalContainerContext);
+  const morph = useMorph2(open, origin, {
+    from,
+    effect: followCursor ? "fade" : effect,
+    tier,
+    instant: (popup) => handedOff.current || popup.dataset.instant === "delay"
+  });
+  useImperativeHandle(ref, () => morph.popup, [morph.popup]);
+  const label = render ? children === undefined ? render : cloneElement(render, undefined, children) : slotRender2(undefined, asChild, children) ?? children;
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, {
+    container: portalContainer ?? undefined,
+    children: /* @__PURE__ */ jsx(TooltipPrimitive.Positioner, {
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      className: cn2("z-50", positionerClassName),
+      children: /* @__PURE__ */ jsx(TooltipPrimitive.Popup, {
+        ...props,
+        ref: morph.popupRef,
+        className: "relative outline-none",
+        render: /* @__PURE__ */ jsx(motion.div, {
+          style: { ...style, ...followCursor ? { [followCursor]: followOffset } : {} }
+        }),
+        children: /* @__PURE__ */ jsx(MorphSurface2, {
+          morph,
+          bg: "bg-foreground",
+          radius: shape.bg,
+          className: cn2("text-background text-caption px-2 py-1", "[text-box:trim-both_cap_alphabetic] supports-[text-box:trim-both]:py-2", "weight-medium", className),
+          children: label
+        })
+      })
+    })
+  });
+});
+TooltipContent2.displayName = "TooltipContent";
+function Tooltip2({
+  content,
+  children,
+  side,
+  align,
+  sideOffset,
+  delayDuration,
+  delay,
+  closeDelay,
+  className,
+  contentClassName,
+  forceOpen,
+  open,
+  defaultOpen,
+  onOpenChange,
+  followCursor,
+  from,
+  effect,
+  tier
+}) {
+  const root = {
+    open: forceOpen ?? open,
+    defaultOpen,
+    onOpenChange,
+    delay: delay ?? delayDuration,
+    closeDelay,
+    followCursor
+  };
+  if (content === undefined)
+    return /* @__PURE__ */ jsx(TooltipRoot2, {
+      ...root,
+      children
+    });
+  return /* @__PURE__ */ jsxs(TooltipRoot2, {
+    ...root,
+    children: [
+      /* @__PURE__ */ jsx(TooltipTrigger2, {
+        render: children
+      }),
+      /* @__PURE__ */ jsx(TooltipContent2, {
+        side,
+        align,
+        sideOffset,
+        className,
+        positionerClassName: contentClassName,
+        from,
+        effect,
+        tier,
+        children: content
+      })
+    ]
+  });
+}
+Tooltip2.Root = TooltipRoot2;
+Tooltip2.Trigger = TooltipTrigger2;
+Tooltip2.Content = TooltipContent2;
+Tooltip2.Provider = TooltipProvider2;
+Tooltip2.PortalContainer = TooltipPortalContainer2;
+var tooltip_default = Tooltip2;
+
+export { TooltipPortalContainer2, TooltipProvider2, TooltipRoot2, TooltipTrigger2, TooltipContent2, Tooltip2, tooltip_default };

package/dist/shared/{components-kvr7f9hy.js → components-qdm3yh26.js}

@@ -1,18 +1,27 @@
+"use client";
 import {
-  cn2
-} from "./components-ezxhrmer.js";
+  spring2
+} from "./components-3ey0hzpb.js";
 import {
-  GooIndicator
-} from "./components-chacnk61.js";
+  cn2
+} from "./components-jcnjay5g.js";
 import {
-  spring2
-} from "./components-1v7rxytx.js";
+  GooIndicator2
+} from "./components-pw06rbxq.js";
 
 // lib/fluid-hover-highlight.tsx
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { jsx } from "react/jsx-runtime";
 var fade = { duration: 0.08 };
-function resolveHighlightSource(props) {
+var snap = { duration: 0 };
+function toTarget2(rect) {
+  return { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+}
+function resolveHighlightTransition2(transition, reduceMotion) {
+  const positional = transition === false || reduceMotion ? snap : transition ?? spring2.fast;
+  return { ...positional, opacity: fade };
+}
+function resolveHighlightSource2(props) {
   if (props.hover) {
     const { activeIndex, itemRects, isMeasured, sessionRef } = props.hover;
     const rect = !props.hidden && isMeasured && activeIndex !== null ? itemRects[activeIndex] ?? null : null;
@@ -22,7 +31,7 @@ function resolveHighlightSource(props) {
 }
 function FluidHoverHighlight2(props) {
   const { from, className, transition } = props;
-  const { rect, session } = resolveHighlightSource(props);
+  const { rect, session } = resolveHighlightSource2(props);
   const reduceMotion = useReducedMotion() ?? false;
   return /* @__PURE__ */ jsx(AnimatePresence, {
     children: rect && /* @__PURE__ */ jsx(motion.div, {
@@ -32,7 +41,7 @@ function FluidHoverHighlight2(props) {
       animate: { opacity: 1 },
       exit: { opacity: 0, transition: spring2.fast.exit },
       transition: fade,
-      children: /* @__PURE__ */ jsx(GooIndicator, {
+      children: /* @__PURE__ */ jsx(GooIndicator2, {
         rect,
         from,
         className: cn2("bg-hover", className),
@@ -42,4 +51,4 @@ function FluidHoverHighlight2(props) {
   });
 }
 
-export { FluidHoverHighlight2 };
+export { toTarget2, resolveHighlightTransition2, resolveHighlightSource2, FluidHoverHighlight2 };

package/dist/shared/{components-27nnvrwe.js → components-qs4rkqsj.js}

@@ -1,21 +1,22 @@
+"use client";
 import {
-  useReduceMotion
-} from "./components-men63rwj.js";
+  useReduceMotion2
+} from "./components-de99ykt7.js";
 import {
-  GooFilter
-} from "./components-0q0sqfh4.js";
+  spring2
+} from "./components-3ey0hzpb.js";
 import {
-  GOO_BLUR_RATIO
-} from "./components-hqeq3w9q.js";
+  GOO_BLUR_RATIO2
+} from "./components-awra5sff.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
-  useSize2
-} from "./components-0sn7ypjw.js";
+  GooFilter2
+} from "./components-4y816hwp.js";
 import {
-  spring2
-} from "./components-1v7rxytx.js";
+  useSize2
+} from "./components-h83az0bz.js";
 
 // components/AI/thinking-indicator/index.tsx
 import { AnimatePresence, motion } from "motion/react";
@@ -38,9 +39,9 @@ function GooDots({ step, still }) {
     "aria-hidden": true,
     className: cn2("relative shrink-0", box),
     children: [
-      /* @__PURE__ */ jsx(GooFilter, {
+      /* @__PURE__ */ jsx(GooFilter2, {
         id: gooId,
-        blur: radius * GOO_BLUR_RATIO
+        blur: radius * GOO_BLUR_RATIO2
       }),
       /* @__PURE__ */ jsx("span", {
         className: "absolute inset-0 flex items-center justify-center",
@@ -58,7 +59,7 @@ var ThinkingIndicator2 = forwardRef(({ className, variant = "shimmer", showIcon
   const step = useSize2(size).variant;
   const compactStep = step === "compact";
   const [index, setIndex] = useState(0);
-  const reduceMotion = useReduceMotion();
+  const reduceMotion = useReduceMotion2();
   const label = variant === "goo" ? "text-muted-foreground" : "shimmer-text";
   useEffect(() => {
     if (reduceMotion)

package/dist/shared/{components-s083f38z.js → components-r6gbmkew.js}

@@ -1,30 +1,31 @@
+"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 {
-  GooFilter
-} from "./components-0q0sqfh4.js";
+  spring2
+} from "./components-3ey0hzpb.js";
 import {
-  GOO_BLUR_RATIO
-} from "./components-hqeq3w9q.js";
+  GOO_BLUR_RATIO2
+} from "./components-awra5sff.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
+import {
+  GooFilter2
+} from "./components-4y816hwp.js";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
 import {
   Tooltip2
-} from "./components-ng72k97e.js";
-import {
-  spring2
-} from "./components-1v7rxytx.js";
+} from "./components-q03cktx8.js";
 
 // components/copy/index.tsx
 import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
@@ -45,7 +46,7 @@ var sheet = (at) => ({ x: at * UNIT, y: at * UNIT, w: 14 * UNIT, h: 14 * UNIT, r
 var BACK = sheet(2);
 var FRONT = sheet(8);
 var DISC_RECT = { x: (GLYPH - DISC) / 2, y: (GLYPH - DISC) / 2, w: DISC, h: DISC, r: DISC / 2 };
-var BLUR = DISC / 2 * GOO_BLUR_RATIO;
+var BLUR = DISC / 2 * GOO_BLUR_RATIO2;
 var LAYER = { at: DISC_RECT.x - BLUR * 3, size: DISC + BLUR * 6 };
 var TONE_BG = { copied: "bg-status-success", error: "bg-status-error" };
 var TONE_TEXT = { copied: "text-status-success", error: "text-status-error" };
@@ -71,7 +72,7 @@ function CopyDisc({ status }) {
   const back = useRef(null);
   const front = useRef(null);
   const progress = useMotionValue(0);
-  const reduced = useReduceMotion();
+  const reduced = useReduceMotion2();
   const gooId = `copy-goo-${useId().replace(/:/g, "")}`;
   const tone = useRef("copied");
   const on = status !== "idle";
@@ -99,7 +100,7 @@ function CopyDisc({ status }) {
     className: "pointer-events-none absolute",
     style: { left: LAYER.at, top: LAYER.at, width: LAYER.size, height: LAYER.size },
     children: [
-      /* @__PURE__ */ jsx(GooFilter, {
+      /* @__PURE__ */ jsx(GooFilter2, {
         id: gooId,
         blur: BLUR
       }),
@@ -177,14 +178,14 @@ function CopyGlyph({
   });
 }
 var Copy2 = forwardRef(({ value, label, onCopy, disabled, variant = "icon", align = "right", size, className, ...props }, ref) => {
-  const CopyIcon = useIcon("copy");
+  const CopyIcon = useIcon2("copy");
   const [status, setStatus] = useState("idle");
   const [copyCount, setCopyCount] = useState(0);
   const [tooltipState, setTooltipState] = useState("idle");
   const timeoutRef = useRef(null);
   const tooltipVisibleRef = useRef(false);
   const tooltipWasVisibleRef = useRef(false);
-  const shape = useShape();
+  const shape = useShape2();
   const sizeClasses = useSize2(size);
   const rowPy = sizeClasses.variant === "compact" ? "py-1" : "py-2";
   const generatedId = useId();

package/dist/shared/{components-ta7shw28.js → components-r8eqs7gz.js}

@@ -1,8 +1,9 @@
+"use client";
 // lib/row-index.tsx
 import { Children, createContext, isValidElement, useContext } from "react";
 import { jsx, Fragment } from "react/jsx-runtime";
 var RowIndexContext = createContext(0);
-function IndexedRows({ children }) {
+function IndexedRows2({ children }) {
   let index = 0;
   return /* @__PURE__ */ jsx(Fragment, {
     children: Children.map(children, (child) => isValidElement(child) ? /* @__PURE__ */ jsx(RowIndexContext.Provider, {
@@ -11,9 +12,8 @@ function IndexedRows({ children }) {
     }) : child)
   });
 }
-function useRowIndex(own) {
+function useRowIndex2(own) {
   const position = useContext(RowIndexContext);
   return own ?? position;
 }
-
-export { IndexedRows, useRowIndex };
+export { IndexedRows2, useRowIndex2 };

package/dist/shared/{components-sn1rxx1d.js → components-rm02h9nt.js}

@@ -1,17 +1,18 @@
+"use client";
 import {
-  defaultLocale,
-  parseDateText
-} from "./components-gz8zf3ec.js";
+  defaultLocale2,
+  parseDateText2
+} from "./components-559tf7yb.js";
 import {
-  useControllableState
-} from "./components-n7mjr357.js";
+  useControllableState2
+} from "./components-tz1fv35x.js";
 import {
   calendar_default
-} from "./components-1z6tdadk.js";
+} from "./components-k74j4hwh.js";
 import {
   PickerShell,
   PickerInput
-} from "./components-s5ngg32c.js";
+} from "./components-paa08427.js";
 
 // components/inputs/date-time/date-range-picker/index.tsx
 import { endOfMonth, format } from "date-fns";
@@ -22,7 +23,7 @@ function DateRangePicker2({
   value: valueProp,
   defaultValue = null,
   onValueChange,
-  locale = defaultLocale,
+  locale = defaultLocale2,
   placeholder,
   disabled,
   startMonth,
@@ -42,8 +43,8 @@ function DateRangePicker2({
   tier,
   className
 }) {
-  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
-  const [open, setOpenState] = useControllableState(openProp, defaultOpen, onOpenChange);
+  const [value, setValue] = useControllableState2(valueProp, defaultValue, onValueChange);
+  const [open, setOpenState] = useControllableState2(openProp, defaultOpen, onOpenChange);
   const [picking, setPicking] = useState(false);
   const fromInput = useRef(null);
   const off = typeof disabled === "boolean" && disabled;
@@ -69,7 +70,7 @@ function DateRangePicker2({
       setValue(end === "from" ? null : from ? { from, to: undefined } : null);
       return true;
     }
-    const date = parseDateText(text, locale, (end === "from" ? from : to) ?? undefined);
+    const date = parseDateText2(text, locale, (end === "from" ? from : to) ?? undefined);
     if (!date || !allowed(date))
       return false;
     if (end === "from")

package/dist/shared/{components-c6s6b43g.js → components-rrbpmfx4.js}

@@ -1,6 +1,7 @@
+"use client";
 // lib/use-is-mobile.ts
 import { useEffect, useState } from "react";
-function useIsMobile(breakpoint) {
+function useIsMobile2(breakpoint) {
   const [isMobile, setIsMobile] = useState(undefined);
   useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
@@ -12,4 +13,4 @@ function useIsMobile(breakpoint) {
   return !!isMobile;
 }
 
-export { useIsMobile };
+export { useIsMobile2 };

package/dist/shared/{components-n7mjr357.js → components-tz1fv35x.js}

@@ -1,6 +1,7 @@
+"use client";
 // lib/use-controllable-state.ts
 import { useCallback, useRef, useState } from "react";
-function useControllableState(value, defaultValue, onChange) {
+function useControllableState2(value, defaultValue, onChange) {
   const [internal, setInternal] = useState(defaultValue);
   const controlled = value !== undefined;
   const current = controlled ? value : internal;
@@ -23,4 +24,4 @@ function useControllableState(value, defaultValue, onChange) {
   return [current, setValue];
 }
 
-export { useControllableState };
+export { useControllableState2 };

package/dist/shared/components-tz4gaf1v.js

@@ -0,0 +1,23 @@
+"use client";
+import {
+  POPUP_NAV_KEYS2
+} from "./components-h6p86be3.js";
+
+// lib/use-keyboard-nav-gate.ts
+import { useCallback, useEffect, useRef } from "react";
+function useKeyboardNavGate2(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_KEYS2.includes(e.key))
+      keyboardNavRef.current = true;
+  }, []);
+  return { keyboardNavRef, trackKeyboardNav };
+}
+
+export { useKeyboardNavGate2 };

package/dist/shared/{components-zx6b6yby.js → components-vf45j12c.js}

@@ -1,5 +1,5 @@
 // lib/surface-classes.ts
-var SURFACE_BG = {
+var SURFACE_BG2 = {
   1: "bg-surface-1",
   2: "bg-surface-2",
   3: "bg-surface-3",
@@ -9,7 +9,7 @@ var SURFACE_BG = {
   7: "bg-surface-7",
   8: "bg-surface-8"
 };
-var SURFACE_SHADOW = {
+var SURFACE_SHADOW2 = {
   1: "shadow-surface-1",
   2: "shadow-surface-2",
   3: "shadow-surface-3",
@@ -22,21 +22,7 @@ var SURFACE_SHADOW = {
 function surfaceClasses2(bgLevel, shadowLevel = bgLevel) {
   const bg = Math.round(Math.max(1, Math.min(8, bgLevel)));
   const shadow = Math.round(Math.max(1, Math.min(8, shadowLevel)));
-  return `${SURFACE_BG[bg]} ${SURFACE_SHADOW[shadow]}`;
+  return `${SURFACE_BG2[bg]} ${SURFACE_SHADOW2[shadow]}`;
 }
 
-// lib/surface-context.tsx
-import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
-var SurfaceContext = createContext(1);
-function useSurface2() {
-  return useContext(SurfaceContext);
-}
-function SurfaceProvider2({ value, children }) {
-  return /* @__PURE__ */ jsx(SurfaceContext.Provider, {
-    value: Math.max(1, Math.min(8, value)),
-    children
-  });
-}
-
-export { SURFACE_BG, SURFACE_SHADOW, surfaceClasses2, useSurface2, SurfaceProvider2 };
+export { SURFACE_BG2, SURFACE_SHADOW2, surfaceClasses2 };

package/dist/shared/{components-3ky44908.js → components-vfjc9jzz.js}

@@ -1,9 +1,8 @@
 // lib/slot.ts
 import { isValidElement } from "react";
-function slotRender(render, asChild, children) {
+function slotRender2(render, asChild, children) {
   if (render)
     return render;
   return asChild && isValidElement(children) ? children : undefined;
 }
-
-export { slotRender };
+export { slotRender2 };