@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-0q0sqfh4.js

@@ -0,0 +1,146 @@
+import {
+  useReduceMotion
+} from "./components-men63rwj.js";
+import {
+  GOO_MATRIX
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// lib/morph-part.tsx
+import { motion } from "motion/react";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var MorphPartScope = createContext(null);
+var MorphPartInOverlay = createContext(false);
+var { exit: _exit, ...enter } = spring2.slow;
+function MorphPart2({ id, className, children }) {
+  const scope = useContext(MorphPartScope);
+  const inOverlay = useContext(MorphPartInOverlay);
+  const reduced = useReduceMotion();
+  const layoutId = scope && !reduced && (scope.open || !inOverlay) ? `${scope.id}-${id}` : undefined;
+  return /* @__PURE__ */ jsx(motion.div, {
+    layoutId,
+    transition: enter,
+    className,
+    children
+  });
+}
+
+// lib/morph-layers.tsx
+import { jsx as jsx2, jsxs, Fragment } from "react/jsx-runtime";
+function GooFilter({ id, blur, blurRef, outlineRef }) {
+  return /* @__PURE__ */ jsx2("svg", {
+    "aria-hidden": true,
+    className: "absolute size-0",
+    children: /* @__PURE__ */ jsxs("filter", {
+      id,
+      x: "-50%",
+      y: "-50%",
+      width: "200%",
+      height: "200%",
+      colorInterpolationFilters: "sRGB",
+      children: [
+        /* @__PURE__ */ jsx2("feGaussianBlur", {
+          ref: blurRef,
+          in: "SourceGraphic",
+          stdDeviation: blur,
+          result: "blur"
+        }),
+        /* @__PURE__ */ jsx2("feColorMatrix", {
+          in: "blur",
+          mode: "matrix",
+          values: GOO_MATRIX,
+          result: "goo"
+        }),
+        /* @__PURE__ */ jsx2("feComposite", {
+          in: "SourceGraphic",
+          in2: "goo",
+          operator: "atop",
+          result: "body"
+        }),
+        outlineRef && /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx2("feMorphology", {
+              in: "goo",
+              operator: "dilate",
+              radius: 1,
+              result: "grown"
+            }),
+            /* @__PURE__ */ jsx2("feFlood", {
+              ref: outlineRef,
+              className: "[flood-color:var(--shadow-color)]"
+            }),
+            /* @__PURE__ */ jsx2("feComposite", {
+              in2: "grown",
+              operator: "in",
+              result: "outline"
+            }),
+            /* @__PURE__ */ jsxs("feMerge", {
+              children: [
+                /* @__PURE__ */ jsx2("feMergeNode", {
+                  in: "outline"
+                }),
+                /* @__PURE__ */ jsx2("feMergeNode", {
+                  in: "body"
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+function MorphSurface({ morph, bg, shadow, radius, className, children }) {
+  const { refs, gooId, effect } = morph;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      effect === "goo" && /* @__PURE__ */ jsx2(GooFilter, {
+        id: gooId,
+        blurRef: refs.blur,
+        outlineRef: refs.outline
+      }),
+      (effect === "goo" || effect === "morph") && /* @__PURE__ */ jsxs("div", {
+        ref: refs.shapes,
+        "aria-hidden": true,
+        className: "pointer-events-none absolute hidden",
+        style: effect === "goo" ? { filter: `url(#${gooId})` } : undefined,
+        children: [
+          effect === "goo" && /* @__PURE__ */ jsx2("div", {
+            ref: refs.copy,
+            className: cn2("absolute", bg)
+          }),
+          /* @__PURE__ */ jsx2("div", {
+            ref: refs.shape,
+            className: cn2("absolute", bg)
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        ref: refs.bg,
+        "aria-hidden": true,
+        className: cn2("pointer-events-none absolute inset-0", bg, radius)
+      }),
+      shadow && /* @__PURE__ */ jsx2("div", {
+        ref: refs.shadow,
+        "aria-hidden": true,
+        className: cn2("pointer-events-none absolute inset-0", shadow, radius)
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        ref: refs.content,
+        className: cn2("relative", className),
+        children: /* @__PURE__ */ jsx2(MorphPartInOverlay.Provider, {
+          value: true,
+          children
+        })
+      })
+    ]
+  });
+}
+
+export { MorphPartScope, MorphPart2, GooFilter, MorphSurface };

package/dist/shared/components-0sn7ypjw.js

@@ -0,0 +1,61 @@
+// lib/size-context.tsx
+import { createContext, useContext } from "react";
+var sizeMap2 = {
+  default: {
+    variant: "default",
+    control: "h-9",
+    controlHeight: 36,
+    segmentItem: "h-7",
+    segmentPad: "p-1",
+    text: "text-body",
+    px: "px-3",
+    itemPx: "px-2",
+    gap: "gap-2",
+    icon: 16
+  },
+  compact: {
+    variant: "compact",
+    control: "h-7",
+    controlHeight: 28,
+    segmentItem: "h-6",
+    segmentPad: "p-0.5",
+    text: "text-body-compact",
+    px: "px-2.5",
+    itemPx: "px-1.5",
+    gap: "gap-1",
+    icon: 14
+  }
+};
+var typeScale2 = {
+  display: { default: 28, compact: 24 },
+  title: { default: 16, compact: 15 },
+  subtitle: { default: 14, compact: 13 },
+  body: { default: 13, compact: 12 },
+  caption: { default: 12, compact: 11 }
+};
+function useTypeScale2(override) {
+  const variant = useSizeVariant2(override);
+  return {
+    display: typeScale2.display[variant],
+    title: typeScale2.title[variant],
+    subtitle: typeScale2.subtitle[variant],
+    body: typeScale2.body[variant],
+    caption: typeScale2.caption[variant]
+  };
+}
+var SizeContext = createContext(null);
+function useSizeVariant2(override) {
+  const ctx = useContext(SizeContext);
+  return override ?? ctx?.size ?? "default";
+}
+function useSize2(override) {
+  return sizeMap2[useSizeVariant2(override)];
+}
+function useSizeContext2() {
+  const ctx = useContext(SizeContext);
+  if (!ctx)
+    throw new Error("useSizeContext must be used within a SizeProvider");
+  return ctx;
+}
+
+export { sizeMap2, typeScale2, useTypeScale2, SizeContext, useSizeVariant2, useSize2, useSizeContext2 };

package/dist/shared/components-1j9791sn.js

@@ -0,0 +1,345 @@
+import {
+  useIcon
+} from "./components-zrkzcayz.js";
+import {
+  useReduceMotion
+} from "./components-men63rwj.js";
+import {
+  GooFilter
+} from "./components-0q0sqfh4.js";
+import {
+  GOO_BLUR_RATIO
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  Tooltip2
+} from "./components-ng72k97e.js";
+import {
+  spring2
+} from "./components-1v7rxytx.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 } = spring2.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 : spring2.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: cn2("absolute", TONE_BG[tone.current])
+          }),
+          /* @__PURE__ */ jsx("span", {
+            ref: front,
+            className: cn2("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: spring2.fast.exit },
+          transition: spring2.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: spring2.fast.exit },
+          transition: spring2.fast,
+          className: cn2("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: spring2.fast.duration, ease: "easeOut" }
+              }
+            })
+          })
+        }, `${status}-${copyCount}`)
+      })
+    ]
+  });
+}
+var InputCopy2 = 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 = useSize2(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: cn2("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: cn2("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: spring2.fast.exit },
+              transition: spring2.fast,
+              children: status === "copied" ? "Copied" : status === "error" ? "Failed" : "Copy"
+            }, status)
+          })
+        ]
+      })
+    ]
+  }) : /* @__PURE__ */ jsx("span", {
+    className: cn2("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: cn2("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: cn2("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: cn2("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: cn2("text-muted-foreground", sizeClasses.text, align === "left" ? "pl-1" : "pl-0", "weight-normal"),
+        children: label
+      }),
+      variant === "icon" ? /* @__PURE__ */ jsx(Tooltip2, {
+        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
+    ]
+  });
+});
+InputCopy2.displayName = "InputCopy";
+var input_copy_default = InputCopy2;
+
+export { InputCopy2, input_copy_default };