@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-jwst3vtj.js

@@ -0,0 +1,346 @@
+import {
+  useReduceMotion
+} from "./components-men63rwj.js";
+import {
+  GooFilter
+} from "./components-0q0sqfh4.js";
+import {
+  GOO_BLUR_RATIO,
+  holdExit
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  sizeMap2
+} from "./components-0sn7ypjw.js";
+import {
+  slotRender
+} from "./components-3ky44908.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  button_default
+} from "./components-b2wyq2cq.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// components/overlays/toast/index.tsx
+import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import { ArrowRight, Check, CircleAlert, Info, LoaderCircle, X } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  cloneElement,
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICONS = {
+  success: Check,
+  loading: LoaderCircle,
+  error: X,
+  warning: CircleAlert,
+  info: Info,
+  action: ArrowRight
+};
+var TONES = {
+  success: "text-status-success bg-status-success/16",
+  loading: "text-status-loading bg-status-loading/16",
+  error: "text-status-error bg-status-error/16",
+  warning: "text-status-warning bg-status-warning/16",
+  info: "text-status-info bg-status-info/16",
+  action: "text-status-action bg-status-action/16"
+};
+var VIEWPORT = {
+  "top-left": "top-4 left-4 items-start",
+  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+  "top-right": "top-4 right-4 items-end",
+  "bottom-left": "bottom-4 left-4 flex-col-reverse items-start",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 flex-col-reverse items-center",
+  "bottom-right": "bottom-4 right-4 flex-col-reverse items-end"
+};
+var PILL = sizeMap2.default.controlHeight;
+var BLUR = PILL / 2 * GOO_BLUR_RATIO;
+var SNAP = { duration: 0 };
+var AUTO_EXPAND_MS = 150;
+var AUTO_COLLAPSE_BEFORE_MS = 2000;
+var ToastSettings = createContext({
+  position: "top-right",
+  timeout: 6000
+});
+function useToast2() {
+  const manager = ToastPrimitive.useToastManager();
+  return useMemo(() => {
+    const options = ({ action, ...rest }, type) => ({
+      ...rest,
+      type,
+      actionProps: action && { children: action.label, onClick: action.onClick }
+    });
+    const show = (o) => manager.add(options(o, o.type ?? "info"));
+    return {
+      show,
+      success: (o) => show({ ...o, type: "success" }),
+      error: (o) => show({ ...o, type: "error" }),
+      warning: (o) => show({ ...o, type: "warning" }),
+      info: (o) => show({ ...o, type: "info" }),
+      promise: (promise, o) => manager.promise(promise, {
+        loading: options(o.loading, "loading"),
+        success: options(o.success, "success"),
+        error: options(o.error, "error")
+      }),
+      close: manager.close
+    };
+  }, [manager]);
+}
+function Shape({ box, className, shapeRef }) {
+  const reduced = useReduceMotion();
+  return /* @__PURE__ */ jsx(motion.div, {
+    ref: shapeRef,
+    "aria-hidden": true,
+    className: cn2("pointer-events-none absolute top-0 left-0", className),
+    initial: false,
+    animate: { ...box },
+    transition: reduced ? SNAP : spring2.slow
+  });
+}
+function ToastItem({ toast }) {
+  const { position, timeout } = useContext(ToastSettings);
+  const shape = useShape();
+  const level = Math.min(useSurface2() + 2, 8);
+  const gooId = `toast-goo-${useId().replace(/:/g, "")}`;
+  const type = toast.type ?? "info";
+  const Icon = ICONS[type];
+  const top = position.startsWith("top");
+  const ending = toast.transitionStatus === "ending";
+  const hasBody = Boolean(toast.description || toast.actionProps);
+  const [hovered, setHovered] = useState(false);
+  const [auto, setAuto] = useState(false);
+  const expanded = hasBody && type !== "loading" && !ending && (hovered || auto);
+  const root = useRef(null);
+  const header = useRef(null);
+  const body = useRef(null);
+  const bodyShape = useRef(null);
+  const [size, setSize] = useState({ width: 0, pill: PILL, body: 0, radius: 0 });
+  useEffect(() => {
+    if (!hasBody || type === "loading")
+      return;
+    const life = toast.timeout ?? timeout;
+    const open = setTimeout(() => setAuto(true), AUTO_EXPAND_MS);
+    const close = life > 0 ? setTimeout(() => setAuto(false), Math.max(AUTO_EXPAND_MS, life - AUTO_COLLAPSE_BEFORE_MS)) : undefined;
+    return () => {
+      clearTimeout(open);
+      clearTimeout(close);
+    };
+  }, [hasBody, type, toast.timeout, timeout]);
+  useLayoutEffect(() => {
+    const measure = () => setSize({
+      width: root.current?.offsetWidth ?? 0,
+      pill: Math.max(PILL, header.current?.offsetWidth ?? 0),
+      body: body.current?.offsetHeight ?? 0,
+      radius: bodyShape.current ? Number.parseFloat(getComputedStyle(bodyShape.current).borderTopLeftRadius) || 0 : 0
+    });
+    const observer = new ResizeObserver(measure);
+    for (const el of [header.current, body.current])
+      if (el)
+        observer.observe(el);
+    measure();
+    return () => observer.disconnect();
+  }, [hasBody]);
+  useLayoutEffect(() => {
+    if (!ending || !root.current)
+      return;
+    const hold = holdExit(root.current, "moderate");
+    return () => hold.cancel();
+  }, [ending]);
+  const bodyHeight = expanded ? size.body : 0;
+  const height = PILL + bodyHeight;
+  const pillX = position.endsWith("left") ? 0 : position.endsWith("right") ? size.width - size.pill : (size.width - size.pill) / 2;
+  const pillHeight = PILL + Math.min(bodyHeight, size.radius);
+  const pill = { x: pillX, y: top ? 0 : height - pillHeight, width: size.pill, height: pillHeight };
+  const bodyBox = { x: 0, y: top ? PILL : 0, width: size.width, height: bodyHeight };
+  const reduced = useReduceMotion();
+  const away = reduced ? { opacity: 0 } : { opacity: 0, y: top ? -6 : 6, scale: 0.95 };
+  const move = reduced ? SNAP : spring2.slow;
+  return /* @__PURE__ */ jsxs(ToastPrimitive.Root, {
+    ref: root,
+    toast,
+    swipeDirection: [top ? "up" : "down", position.endsWith("left") ? "left" : "right"],
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
+    render: /* @__PURE__ */ jsx(motion.div, {
+      initial: { ...away, height: PILL },
+      animate: ending ? { ...away, height } : { opacity: 1, y: 0, scale: 1, height },
+      transition: ending ? spring2.moderate.exit : { ...spring2.moderate, height: move }
+    }),
+    className: "relative w-[min(22rem,calc(100vw-2rem))] select-none outline-none [translate:var(--toast-swipe-movement-x)_var(--toast-swipe-movement-y)]",
+    children: [
+      /* @__PURE__ */ jsx(GooFilter, {
+        id: gooId,
+        blur: BLUR
+      }),
+      /* @__PURE__ */ jsx(Shape, {
+        box: pill,
+        className: cn2("rounded-full", SURFACE_SHADOW[3])
+      }),
+      hasBody && /* @__PURE__ */ jsx(Shape, {
+        box: bodyBox,
+        className: cn2(shape.container, SURFACE_SHADOW[3])
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute inset-0",
+        style: { filter: `url(#${gooId})` },
+        children: [
+          /* @__PURE__ */ jsx(Shape, {
+            box: pill,
+            className: cn2("rounded-full", SURFACE_BG[level])
+          }),
+          hasBody && /* @__PURE__ */ jsx(Shape, {
+            box: bodyBox,
+            shapeRef: bodyShape,
+            className: cn2(shape.container, SURFACE_BG[level])
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs(SurfaceProvider2, {
+        value: level,
+        children: [
+          /* @__PURE__ */ jsx(motion.div, {
+            ref: header,
+            className: "absolute top-0 left-0 flex h-9 w-max items-center py-1.5 pr-4 pl-1.5",
+            initial: false,
+            animate: { x: pillX, y: top ? 0 : height - PILL },
+            transition: move,
+            children: /* @__PURE__ */ jsx(ToastPrimitive.Title, {
+              className: "relative inline-flex items-center whitespace-nowrap",
+              children: /* @__PURE__ */ jsx(AnimatePresence, {
+                mode: "popLayout",
+                initial: false,
+                children: /* @__PURE__ */ jsxs(motion.span, {
+                  className: "inline-flex items-center gap-2",
+                  initial: { opacity: 0, filter: "blur(4px)" },
+                  animate: { opacity: 1, filter: "blur(0px)" },
+                  exit: { opacity: 0, filter: "blur(4px)", transition: spring2.moderate.exit },
+                  transition: spring2.moderate,
+                  children: [
+                    /* @__PURE__ */ jsx("span", {
+                      className: cn2("flex size-6 items-center justify-center rounded-full", TONES[type]),
+                      children: /* @__PURE__ */ jsx(Icon, {
+                        size: 14,
+                        strokeWidth: 2.5,
+                        className: type === "loading" ? "animate-spin" : undefined
+                      })
+                    }),
+                    /* @__PURE__ */ jsx("span", {
+                      className: "text-body weight-medium text-foreground",
+                      children: toast.title
+                    })
+                  ]
+                }, `${type}-${toast.title}`)
+              })
+            })
+          }),
+          hasBody && /* @__PURE__ */ jsx(motion.div, {
+            className: "absolute top-0 left-0 w-full overflow-hidden",
+            initial: false,
+            animate: { y: bodyBox.y, height: bodyHeight, opacity: expanded ? 1 : 0 },
+            transition: { ...move, opacity: expanded ? spring2.slow : spring2.slow.exit },
+            children: /* @__PURE__ */ jsxs("div", {
+              ref: body,
+              className: cn2("flex flex-col items-start gap-3 p-4", top ? "pt-6" : "pb-6"),
+              children: [
+                /* @__PURE__ */ jsx(ToastPrimitive.Description, {
+                  className: "text-caption text-muted-foreground"
+                }),
+                toast.actionProps && /* @__PURE__ */ jsx(ToastPrimitive.Action, {
+                  render: /* @__PURE__ */ jsx(button_default, {
+                    size: "compact",
+                    variant: "secondary"
+                  })
+                })
+              ]
+            })
+          })
+        ]
+      })
+    ]
+  });
+}
+function ToastList() {
+  const { toasts } = ToastPrimitive.useToastManager();
+  return toasts.map((toast) => /* @__PURE__ */ jsx(ToastItem, {
+    toast
+  }, toast.id));
+}
+var ToastTrigger2 = forwardRef(({
+  title,
+  description,
+  type,
+  timeout,
+  action,
+  promise,
+  success,
+  error,
+  render,
+  asChild,
+  children,
+  onClick,
+  ...props
+}, ref) => {
+  const toast = useToast2();
+  const el = slotRender(render, asChild, children);
+  const press = (event) => {
+    onClick?.(event);
+    if (promise) {
+      toast.promise(promise(), { loading: { title, description }, success: success ?? {}, error: error ?? {} }).catch(() => {});
+      return;
+    }
+    toast.show({ title, description, type, timeout, action });
+  };
+  return el ? cloneElement(el, { ...props, ref, onClick: press }) : /* @__PURE__ */ jsx("button", {
+    ref,
+    type: "button",
+    ...props,
+    onClick: press,
+    children
+  });
+});
+ToastTrigger2.displayName = "ToastTrigger";
+function Toast2({ position = "top-right", limit = 3, timeout = 6000, children }) {
+  const settings = useMemo(() => ({ position, timeout }), [position, timeout]);
+  return /* @__PURE__ */ jsx(ToastPrimitive.Provider, {
+    limit,
+    timeout,
+    children: /* @__PURE__ */ jsxs(ToastSettings.Provider, {
+      value: settings,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ToastPrimitive.Portal, {
+          children: /* @__PURE__ */ jsx(ToastPrimitive.Viewport, {
+            className: cn2("fixed z-[60] flex flex-col gap-2 outline-none", VIEWPORT[position]),
+            children: /* @__PURE__ */ jsx(ToastList, {})
+          })
+        })
+      ]
+    })
+  });
+}
+Toast2.Trigger = ToastTrigger2;
+var toast_default = Toast2;
+
+export { useToast2, ToastTrigger2, Toast2, toast_default };

package/dist/shared/components-kvr7f9hy.js

@@ -0,0 +1,45 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  GooIndicator
+} from "./components-chacnk61.js";
+import {
+  spring2
+} from "./components-1v7rxytx.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) {
+  if (props.hover) {
+    const { activeIndex, itemRects, isMeasured, sessionRef } = props.hover;
+    const rect = !props.hidden && isMeasured && activeIndex !== null ? itemRects[activeIndex] ?? null : null;
+    return { rect, session: sessionRef.current };
+  }
+  return { rect: props.rect, session: props.session };
+}
+function FluidHoverHighlight2(props) {
+  const { from, className, transition } = props;
+  const { rect, session } = resolveHighlightSource(props);
+  const reduceMotion = useReducedMotion() ?? false;
+  return /* @__PURE__ */ jsx(AnimatePresence, {
+    children: rect && /* @__PURE__ */ jsx(motion.div, {
+      "data-slot": "fluid-hover-highlight",
+      className: "pointer-events-none absolute top-0 left-0",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0, transition: spring2.fast.exit },
+      transition: fade,
+      children: /* @__PURE__ */ jsx(GooIndicator, {
+        rect,
+        from,
+        className: cn2("bg-hover", className),
+        transition: transition === false || reduceMotion ? false : transition ?? spring2.fast
+      })
+    }, session)
+  });
+}
+
+export { FluidHoverHighlight2 };

package/dist/shared/components-men63rwj.js

@@ -0,0 +1,9 @@
+// lib/reduced-motion.ts
+import { useReducedMotion, useReducedMotionConfig } from "motion/react";
+function useReduceMotion() {
+  const os = useReducedMotion() ?? false;
+  const config = useReducedMotionConfig() ?? false;
+  return os || config;
+}
+
+export { useReduceMotion };

package/dist/shared/components-mhd39z7x.js

@@ -0,0 +1,22 @@
+// lib/field-classes.ts
+import { cva } from "class-variance-authority";
+var fieldVariants = cva([
+  "group/field ring-1 cursor-text transition-[background-color,box-shadow,opacity] duration-fast",
+  "hover:bg-muted/50 hover:ring-border data-[active]:bg-muted/50 data-[active]:ring-border",
+  "focus-within:!bg-card focus-within:ring-border",
+  "data-[invalid]:!ring-destructive/50 data-[invalid]:hover:bg-destructive-light/60 data-[invalid]:data-[active]:bg-destructive-light/60",
+  "data-[disabled]:ring-border data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
+], {
+  variants: {
+    variant: {
+      borderless: "bg-transparent ring-transparent",
+      bordered: "bg-transparent ring-border"
+    }
+  },
+  defaultVariants: {
+    variant: "borderless"
+  }
+});
+var fieldIconClasses = "shrink-0 text-muted-foreground transition-[color,stroke-width] duration-fast group-hover/field:text-foreground group-hover/field:stroke-[2] group-data-[active]/field:text-foreground group-data-[active]/field:stroke-[2] group-focus-within/field:text-foreground group-focus-within/field:stroke-[2]";
+
+export { fieldVariants, fieldIconClasses };

package/dist/shared/components-n7mjr357.js

@@ -0,0 +1,26 @@
+// lib/use-controllable-state.ts
+import { useCallback, useRef, useState } from "react";
+function useControllableState(value, defaultValue, onChange) {
+  const [internal, setInternal] = useState(defaultValue);
+  const controlled = value !== undefined;
+  const current = controlled ? value : internal;
+  const currentRef = useRef(current);
+  currentRef.current = current;
+  const controlledRef = useRef(controlled);
+  controlledRef.current = controlled;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = useCallback((next) => {
+    const prev = currentRef.current;
+    const resolved = typeof next === "function" ? next(prev) : next;
+    if (Object.is(resolved, prev))
+      return;
+    currentRef.current = resolved;
+    if (!controlledRef.current)
+      setInternal(resolved);
+    onChangeRef.current?.(resolved);
+  }, []);
+  return [current, setValue];
+}
+
+export { useControllableState };

package/dist/shared/components-ng72k97e.js

@@ -0,0 +1,128 @@
+import {
+  MorphSurface
+} from "./components-0q0sqfh4.js";
+import {
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+
+// components/overlays/tooltip/index.tsx
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { motion, useMotionValue } from "motion/react";
+import { createContext, useContext, useEffect, 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 TooltipGroupContext = createContext(false);
+function TooltipProvider2({ children, delayDuration = DEFAULT_DELAY, skipDelayDuration = 300 }) {
+  return /* @__PURE__ */ jsx(TooltipGroupContext.Provider, {
+    value: true,
+    children: /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+      delay: delayDuration,
+      timeout: skipDelayDuration,
+      children
+    })
+  });
+}
+function Tooltip2({
+  content,
+  children,
+  side = "top",
+  sideOffset = 8,
+  delayDuration,
+  className,
+  contentClassName,
+  forceOpen,
+  onOpenChange: onOpenChangeProp,
+  followCursor,
+  from,
+  effect = "goo",
+  tier = "moderate"
+}) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = forceOpen !== undefined ? forceOpen : internalOpen;
+  const shape = useShape();
+  const portalContainer = useContext(TooltipPortalContainerContext);
+  const hasAmbientProvider = useContext(TooltipGroupContext);
+  const { origin, capture } = useMorphOrigin();
+  const handedOff = useRef(false);
+  const morph = useMorph(open, origin, {
+    from,
+    effect: followCursor ? "fade" : effect,
+    tier,
+    instant: (popup) => handedOff.current || popup.dataset.instant === "delay"
+  });
+  const followOffset = useMotionValue(0);
+  useEffect(() => {
+    if (forceOpen && followCursor)
+      followOffset.set(0);
+  }, [forceOpen, followCursor, followOffset]);
+  const handleFollowMove = (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 tooltip = /* @__PURE__ */ jsxs(TooltipPrimitive.Root, {
+    open,
+    onOpenChange: (v, details) => {
+      if (v)
+        capture(details);
+      handedOff.current = !v && details.reason === "none";
+      setInternalOpen(v);
+      onOpenChangeProp?.(v);
+    },
+    children: [
+      /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
+        render: children,
+        delay: delayDuration,
+        onPointerMove: followCursor ? handleFollowMove : undefined
+      }),
+      /* @__PURE__ */ jsx(TooltipPrimitive.Portal, {
+        container: portalContainer ?? undefined,
+        children: /* @__PURE__ */ jsx(TooltipPrimitive.Positioner, {
+          side,
+          sideOffset,
+          className: cn2("z-50", contentClassName),
+          children: /* @__PURE__ */ jsx(TooltipPrimitive.Popup, {
+            ref: morph.popupRef,
+            className: "relative outline-none",
+            render: /* @__PURE__ */ jsx(motion.div, {
+              style: followCursor ? { [followCursor]: followOffset } : {}
+            }),
+            children: /* @__PURE__ */ jsx(MorphSurface, {
+              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: content
+            })
+          })
+        })
+      })
+    ]
+  });
+  if (hasAmbientProvider)
+    return tooltip;
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+    delay: delayDuration ?? DEFAULT_DELAY,
+    children: tooltip
+  });
+}
+Tooltip2.Provider = TooltipProvider2;
+Tooltip2.PortalContainer = TooltipPortalContainer2;
+var tooltip_default = Tooltip2;
+
+export { TooltipPortalContainer2, TooltipProvider2, Tooltip2, tooltip_default };