@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-nnnd2xef.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-p2vmyfe1.js

@@ -0,0 +1,345 @@
+import {
+  Tooltip
+} from "./components-gndm6am4.js";
+import {
+  useIcon
+} from "./components-m5br529r.js";
+import {
+  GooFilter
+} from "./components-jxgznftn.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  GOO_BLUR_RATIO
+} from "./components-7nww01w4.js";
+import {
+  useReduceMotion
+} from "./components-nnnd2xef.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/inputs/input-copy/index.tsx
+import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var GLYPH = 14;
+var DISC = 20;
+var UNIT = GLYPH / 24;
+var sheet = (at) => ({ x: at * UNIT, y: at * UNIT, w: 14 * UNIT, h: 14 * UNIT, r: 2 * UNIT });
+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 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" };
+var CHECK_STROKE = {
+  icon: "[&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-fast group-hover:[&_svg]:stroke-[2]",
+  button: "[&_svg]:stroke-[2]"
+};
+var { exit: _exit, ...enter } = spring.slow;
+function placeSheet(el, a, b, p) {
+  if (!el)
+    return;
+  const lerp = (from, to) => from + (to - from) * p;
+  const w = Math.max(0, lerp(a.w, b.w));
+  const h = Math.max(0, lerp(a.h, b.h));
+  el.style.left = `${lerp(a.x, b.x) - LAYER.at}px`;
+  el.style.top = `${lerp(a.y, b.y) - LAYER.at}px`;
+  el.style.width = `${w}px`;
+  el.style.height = `${h}px`;
+  el.style.borderRadius = `${Math.min(Math.max(0, lerp(a.r, b.r)), w / 2, h / 2)}px`;
+}
+function CopyDisc({ status }) {
+  const layer = useRef(null);
+  const back = useRef(null);
+  const front = useRef(null);
+  const progress = useMotionValue(0);
+  const reduced = useReduceMotion();
+  const gooId = `copy-goo-${useId().replace(/:/g, "")}`;
+  const tone = useRef("copied");
+  const on = status !== "idle";
+  if (on)
+    tone.current = status;
+  useLayoutEffect(() => {
+    if (!on && progress.get() === 0)
+      return;
+    const render = (p) => {
+      if (layer.current)
+        layer.current.style.visibility = p > 0 ? "visible" : "hidden";
+      placeSheet(back.current, BACK, DISC_RECT, p);
+      placeSheet(front.current, FRONT, DISC_RECT, p);
+    };
+    const target = on ? 1 : 0;
+    if (reduced) {
+      progress.jump(target);
+      return render(target);
+    }
+    const controls = animate(progress, target, { ...on ? enter : spring.slow.exit, onUpdate: render });
+    return () => controls.stop();
+  }, [on, reduced]);
+  return /* @__PURE__ */ jsxs("span", {
+    "aria-hidden": true,
+    className: "pointer-events-none absolute",
+    style: { left: LAYER.at, top: LAYER.at, width: LAYER.size, height: LAYER.size },
+    children: [
+      /* @__PURE__ */ jsx(GooFilter, {
+        id: gooId,
+        blur: BLUR
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        ref: layer,
+        className: "invisible absolute inset-0 opacity-16",
+        style: { filter: `url(#${gooId})` },
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            ref: back,
+            className: cn("absolute", TONE_BG[tone.current])
+          }),
+          /* @__PURE__ */ jsx("span", {
+            ref: front,
+            className: cn("absolute", TONE_BG[tone.current])
+          })
+        ]
+      })
+    ]
+  });
+}
+var CHECK_PATH = "M6 12L10 16L18 8";
+var ERROR_PATH = "M9 9L15 15M15 9L9 15";
+function CopyGlyph({
+  status,
+  copyCount,
+  variant,
+  CopyIcon
+}) {
+  return /* @__PURE__ */ jsxs("span", {
+    className: "relative flex size-3.5 shrink-0 items-center justify-center",
+    children: [
+      /* @__PURE__ */ jsx(CopyDisc, {
+        status
+      }),
+      /* @__PURE__ */ jsx(AnimatePresence, {
+        initial: false,
+        children: status === "idle" ? /* @__PURE__ */ jsx(motion.span, {
+          initial: { opacity: 0, scale: 0.8 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.8, transition: spring.fast.exit },
+          transition: spring.fast,
+          className: "absolute inset-0 flex items-center justify-center",
+          children: /* @__PURE__ */ jsx(CopyIcon, {
+            size: 14,
+            strokeWidth: 1.5,
+            className: "transition-[stroke-width] duration-fast group-hover:stroke-[2]"
+          })
+        }, "copy") : /* @__PURE__ */ jsx(motion.span, {
+          initial: { opacity: 0, scale: 0.6 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.8, transition: spring.fast.exit },
+          transition: spring.fast,
+          className: cn("absolute inset-0 flex items-center justify-center", TONE_TEXT[status], CHECK_STROKE[variant]),
+          children: /* @__PURE__ */ jsx("svg", {
+            width: 14,
+            height: 14,
+            viewBox: "2 4 20 16",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx(motion.path, {
+              d: status === "error" ? ERROR_PATH : CHECK_PATH,
+              initial: { pathLength: 0 },
+              animate: {
+                pathLength: 1,
+                transition: { duration: spring.fast.duration, ease: "easeOut" }
+              }
+            })
+          })
+        }, `${status}-${copyCount}`)
+      })
+    ]
+  });
+}
+var InputCopy = forwardRef(({ value, label, onCopy, disabled, variant = "icon", align = "right", size, className, ...props }, ref) => {
+  const CopyIcon = useIcon("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 sizeClasses = useSize(size);
+  const rowPy = sizeClasses.variant === "compact" ? "py-1" : "py-2";
+  const generatedId = useId();
+  const labelId = label ? `${generatedId}-label` : undefined;
+  const buttonId = `${generatedId}-button`;
+  const handlePointerDown = useCallback(() => {
+    tooltipWasVisibleRef.current = tooltipVisibleRef.current;
+  }, []);
+  const copyViaExecCommand = useCallback(() => {
+    const textarea = document.createElement("textarea");
+    textarea.value = value;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+    let ok = false;
+    try {
+      ok = document.execCommand("copy");
+    } catch {
+      ok = false;
+    }
+    document.body.removeChild(textarea);
+    return ok;
+  }, [value]);
+  const handleCopy = useCallback(async () => {
+    if (disabled)
+      return;
+    let ok = true;
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+      ok = copyViaExecCommand();
+    }
+    setStatus(ok ? "copied" : "error");
+    setCopyCount((c) => c + 1);
+    setTooltipState(tooltipWasVisibleRef.current ? "copied" : "suppressed");
+    if (ok)
+      onCopy?.();
+    if (timeoutRef.current)
+      clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setStatus("idle");
+      setTooltipState("suppressed");
+    }, 2000);
+  }, [value, disabled, onCopy, copyViaExecCommand]);
+  const handleTooltipOpenChange = useCallback((open) => {
+    tooltipVisibleRef.current = open;
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current)
+        clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  const handleMouseEnter = useCallback(() => {
+    setTooltipState((prev) => prev === "suppressed" ? "idle" : prev);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setTooltipState((prev) => prev === "copied" ? "suppressed" : prev);
+  }, []);
+  const actionElement = variant === "button" ? /* @__PURE__ */ jsxs("span", {
+    className: cn("shrink-0 flex items-center gap-1.5 px-1.5 transition-colors duration-fast", rowPy, sizeClasses.text, "text-muted-foreground group-hover:text-foreground", "weight-normal"),
+    children: [
+      /* @__PURE__ */ jsx(CopyGlyph, {
+        status,
+        copyCount,
+        variant: "button",
+        CopyIcon
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        className: "select-none inline-grid text-left",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: "col-start-1 row-start-1 invisible",
+            "aria-hidden": "true",
+            children: "Copied"
+          }),
+          /* @__PURE__ */ jsx(AnimatePresence, {
+            mode: "wait",
+            initial: false,
+            children: /* @__PURE__ */ jsx(motion.span, {
+              className: cn("col-start-1 row-start-1", status === "error" && "text-destructive"),
+              initial: { opacity: 0, scale: 0.6 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.8, transition: spring.fast.exit },
+              transition: spring.fast,
+              children: status === "copied" ? "Copied" : status === "error" ? "Failed" : "Copy"
+            }, status)
+          })
+        ]
+      })
+    ]
+  }) : /* @__PURE__ */ jsx("span", {
+    className: cn("shrink-0 flex px-1.5 transition-colors duration-fast", rowPy, "text-muted-foreground group-hover:text-foreground"),
+    children: /* @__PURE__ */ jsx(CopyGlyph, {
+      status,
+      copyCount,
+      variant: "icon",
+      CopyIcon
+    })
+  });
+  const valueElement = /* @__PURE__ */ jsx("span", {
+    className: cn("flex-1 min-w-0 text-left text-foreground font-mono select-none truncate", sizeClasses.text, rowPy, align === "left" ? "pl-1" : "pl-0", "weight-normal"),
+    children: /* @__PURE__ */ jsx("mark", {
+      className: "bg-transparent text-foreground transition-colors duration-fast group-hover:bg-brand/20 group-hover:text-foreground",
+      children: value
+    })
+  });
+  const buttonContent = align === "left" ? /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      actionElement,
+      valueElement
+    ]
+  }) : /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      valueElement,
+      actionElement
+    ]
+  });
+  const button = /* @__PURE__ */ jsx("button", {
+    id: buttonId,
+    type: "button",
+    onPointerDown: handlePointerDown,
+    onClick: handleCopy,
+    disabled,
+    "aria-label": status === "copied" ? "Copied" : status === "error" ? "Copy failed" : label ? "Copy" : "Copy to clipboard",
+    "aria-labelledby": label ? `${buttonId} ${labelId}` : undefined,
+    className: cn("group flex items-center w-full cursor-pointer outline-none transition-all duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring", shape.input),
+    children: buttonContent
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: cn("flex flex-col gap-0.5", disabled && "opacity-50 pointer-events-none", className),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    ...props,
+    children: [
+      label && /* @__PURE__ */ jsx("span", {
+        id: labelId,
+        className: cn("text-muted-foreground", sizeClasses.text, align === "left" ? "pl-1" : "pl-0", "weight-normal"),
+        children: label
+      }),
+      variant === "icon" ? /* @__PURE__ */ jsx(Tooltip, {
+        content: tooltipState === "idle" ? "Copy to clipboard" : status === "error" ? "Copy failed" : "Copied",
+        delayDuration: 500,
+        sideOffset: 2,
+        forceOpen: tooltipState === "copied" ? true : tooltipState === "suppressed" ? false : undefined,
+        onOpenChange: handleTooltipOpenChange,
+        children: button
+      }) : button
+    ]
+  });
+});
+InputCopy.displayName = "InputCopy";
+var input_copy_default = InputCopy;
+
+export { InputCopy, input_copy_default };

package/dist/shared/components-peg09pzs.js

@@ -0,0 +1,79 @@
+import {
+  button_default
+} from "./components-5pkcfprd.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// primitives/motion/index.tsx
+import { MotionConfig, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Motion({
+  tier = "moderate",
+  show,
+  defaultShow = true,
+  onShowChange,
+  sameExit = false,
+  reducedMotion = "user",
+  className,
+  children
+}) {
+  const [shown, setShown] = useControllableState(show, defaultShow, onShowChange);
+  const enter = spring[tier];
+  const leave = sameExit ? enter : enter.exit;
+  return /* @__PURE__ */ jsx(MotionConfig, {
+    reducedMotion,
+    children: /* @__PURE__ */ jsxs("div", {
+      className: cn("flex flex-col items-center gap-3", className),
+      children: [
+        /* @__PURE__ */ jsx(motion.div, {
+          initial: false,
+          "aria-hidden": shown ? undefined : true,
+          animate: shown ? { opacity: 1, scale: 1, y: 0, visibility: "visible", transition: enter } : {
+            opacity: 0,
+            scale: 0.95,
+            y: 6,
+            visibility: "visible",
+            transition: leave,
+            transitionEnd: { visibility: "hidden" }
+          },
+          children
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-1",
+          children: [
+            /* @__PURE__ */ jsx(button_default, {
+              variant: "tertiary",
+              size: "compact",
+              "aria-pressed": shown,
+              "aria-label": `${shown ? "Hide" : "Show"} (spring.${tier})`,
+              onClick: () => setShown((v) => !v),
+              children: shown ? "Hide" : "Show"
+            }),
+            /* @__PURE__ */ jsxs("span", {
+              className: "font-mono text-caption-compact text-muted-foreground",
+              children: [
+                "spring.",
+                tier,
+                " ",
+                enter.duration,
+                "s",
+                enter.bounce ? ` bounce ${enter.bounce}` : "",
+                " · exit ",
+                leave.duration,
+                "s"
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+export { Motion };

package/dist/shared/components-r22vtgqc.js

@@ -0,0 +1,45 @@
+import {
+  GooIndicator
+} from "./components-kf2ehztc.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  cn
+} from "./components-0f0as45n.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 FluidHoverHighlight(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: spring.fast.exit },
+      transition: fade,
+      children: /* @__PURE__ */ jsx(GooIndicator, {
+        rect,
+        from,
+        className: cn("bg-hover", className),
+        transition: transition === false || reduceMotion ? false : transition ?? spring.fast
+      })
+    }, session)
+  });
+}
+
+export { FluidHoverHighlight };