@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-7nww01w4.js

@@ -0,0 +1,375 @@
+import {
+  useReduceMotion
+} from "./components-nnnd2xef.js";
+import {
+  exitFallbackMs,
+  spring
+} from "./components-vc1k7yv2.js";
+
+// lib/use-morph.ts
+import { animate, clamp, useMotionValue } from "motion/react";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+var GOO_MATRIX = "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10";
+var GOO_BLUR_RATIO = 0.5;
+var GOO_SURFACE_BLUR = 8;
+var GOO_RELEASE = 0.3;
+var GOO_SETTLE = 0.1;
+var lerp = (a, b, t) => a + (b - a) * t;
+var drawsShape = (effect) => effect === "goo" || effect === "morph";
+function lerpRect(a, b, t) {
+  return {
+    x: lerp(a.x, b.x, t),
+    y: lerp(a.y, b.y, t),
+    w: lerp(a.w, b.w, t),
+    h: lerp(a.h, b.h, t),
+    r: lerp(a.r, b.r, t)
+  };
+}
+function clampRect(rect) {
+  const w = Math.max(0, rect.w);
+  const h = Math.max(0, rect.h);
+  return { x: rect.x, y: rect.y, w, h, r: Math.max(0, Math.min(rect.r, w / 2, h / 2)) };
+}
+function roundedRectPath({ x, y, w, h, r }) {
+  const n = (value) => value.toFixed(3);
+  const arc = `A${n(r)} ${n(r)} 0 0 1`;
+  return `M${n(x + r)} ${n(y)}` + `H${n(x + w - r)}${arc} ${n(x + w)} ${n(y + r)}` + `V${n(y + h - r)}${arc} ${n(x + w - r)} ${n(y + h)}` + `H${n(x + r)}${arc} ${n(x)} ${n(y + h - r)}` + `V${n(y + r)}${arc} ${n(x + r)} ${n(y)}Z`;
+}
+function radiusOf(el, width, height) {
+  const value = getComputedStyle(el).borderTopLeftRadius;
+  const r = value.endsWith("%") ? Number.parseFloat(value) / 100 * width : Number.parseFloat(value);
+  return Math.min(r || 0, width / 2, height / 2);
+}
+function onScreen(rect) {
+  return rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.right > 0 && rect.top < innerHeight && rect.left < innerWidth;
+}
+function sourceElement(from, origin) {
+  if (from === "trigger")
+    return origin.trigger;
+  if (typeof from === "object")
+    return from.current ?? undefined;
+}
+function sourceRect(from, origin, box, target) {
+  const local = (x, y, w, h, r) => ({
+    x: x - box.left,
+    y: y - box.top,
+    w,
+    h,
+    r
+  });
+  const center = { x: target.w / 2, y: target.h / 2, w: 0, h: 0, r: target.r };
+  if (from === "center")
+    return center;
+  if (from === "top")
+    return local(box.left, 0, box.width, 0, 0);
+  if (from === "bottom")
+    return local(box.left, innerHeight, box.width, 0, 0);
+  if (from === "left")
+    return local(0, box.top, 0, box.height, 0);
+  if (from === "right")
+    return local(innerWidth, box.top, 0, box.height, 0);
+  if (from === "pointer") {
+    const trigger = origin.trigger?.getBoundingClientRect();
+    const point = origin.point ?? (trigger && { x: trigger.left + trigger.width / 2, y: trigger.top + trigger.height / 2 });
+    const d = target.r;
+    return point ? local(point.x - d / 2, point.y - d / 2, d, d, d / 2) : center;
+  }
+  const el = sourceElement(from, origin);
+  if (!el)
+    return center;
+  const rect = el.getBoundingClientRect();
+  if (!onScreen(rect))
+    return center;
+  return local(rect.left, rect.top, rect.width, rect.height, radiusOf(el, rect.width, rect.height));
+}
+function slideOffset(from, source, target, box) {
+  if (from === "left")
+    return { x: -box.right, y: 0 };
+  if (from === "right")
+    return { x: innerWidth - box.left, y: 0 };
+  if (from === "top")
+    return { x: 0, y: -box.bottom };
+  if (from === "bottom")
+    return { x: 0, y: innerHeight - box.top };
+  return { x: source.x + source.w / 2 - target.w / 2, y: source.y + source.h / 2 - target.h / 2 };
+}
+function layerBox(source, target, pad) {
+  const x = Math.min(source.x, target.x) - pad;
+  const y = Math.min(source.y, target.y) - pad;
+  const w = Math.max(source.x + source.w, target.x + target.w) + pad - x;
+  const h = Math.max(source.y + source.h, target.y + target.h) + pad - y;
+  return { x, y, w, h, r: 0 };
+}
+function overlaps(a, b) {
+  return a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
+}
+function place(el, { x, y, w, h, r }) {
+  if (!el)
+    return;
+  el.style.inset = "auto";
+  el.style.left = `${x}px`;
+  el.style.top = `${y}px`;
+  el.style.width = `${w}px`;
+  el.style.height = `${h}px`;
+  el.style.borderRadius = `${r}px`;
+}
+function within(rect, layer) {
+  return { ...rect, x: rect.x - layer.x, y: rect.y - layer.y };
+}
+function insetClip(rect, box) {
+  const right = box.w - rect.x - rect.w;
+  const bottom = box.h - rect.y - rect.h;
+  return `inset(${rect.y}px ${right}px ${bottom}px ${rect.x}px round ${rect.r}px)`;
+}
+function opensInPlace({ effect, hideSource = false }) {
+  return effect === "morph" && hideSource;
+}
+function inPlaceOffset({ side, anchor }) {
+  return side === "top" || side === "bottom" ? -anchor.height : -anchor.width;
+}
+function holdExit(el, tier) {
+  return el.animate(null, { duration: exitFallbackMs(spring[tier]) });
+}
+function returnFocus(trigger) {
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    const active = document.activeElement;
+    if (!trigger.isConnected || active === trigger)
+      return;
+    if (active && active !== document.body && !active.contains(trigger))
+      return;
+    trigger.focus({ preventScroll: true });
+  }));
+}
+function pressPoint(event) {
+  if (event && "touches" in event) {
+    const { touches, changedTouches } = event;
+    const touch = touches[0] ?? changedTouches[0];
+    return touch && { x: touch.clientX, y: touch.clientY };
+  }
+  if (!(event instanceof MouseEvent))
+    return;
+  if (event.type === "click" && event.detail === 0)
+    return;
+  return { x: event.clientX, y: event.clientY };
+}
+function useMorphOrigin() {
+  const origin = useRef({});
+  const capture = useCallback((details) => {
+    const { trigger, event } = details;
+    origin.current = {
+      trigger: trigger instanceof HTMLElement ? trigger : origin.current.trigger,
+      point: pressPoint(event)
+    };
+  }, []);
+  return { origin, capture };
+}
+function useMorph(open, origin, { from = "trigger", effect = "goo", hideSource = false, tier = "slow", exit, instant } = {}, onExited) {
+  const reduced = useReduceMotion();
+  const resolve = (wanted) => reduced ? "fade" : wanted;
+  const resolved = resolve(effect);
+  const timing = (effect2) => effect2 === "goo" ? "goo" : tier;
+  const progress = useMotionValue(0);
+  const gooId = `morph-goo-${useId().replace(/:/g, "")}`;
+  const geometry = useRef(null);
+  const run = useRef({ effect: resolved, from });
+  const targetRadius = useRef(0);
+  const hidden = useRef(null);
+  const exited = useRef(onExited);
+  exited.current = onExited;
+  const returnTo = useRef(null);
+  const [popup, setPopup] = useState(null);
+  const refs = {
+    popup: useRef(null),
+    shapes: useRef(null),
+    blur: useRef(null),
+    outline: useRef(null),
+    copy: useRef(null),
+    shape: useRef(null),
+    bg: useRef(null),
+    shadow: useRef(null),
+    content: useRef(null)
+  };
+  const render = (p) => {
+    const g = geometry.current;
+    if (!g)
+      return;
+    const { bg, content, shadow, popup: popup2, shape } = refs;
+    const { effect: effect2 } = run.current;
+    const shaped = drawsShape(effect2);
+    const slide = { ...g.target, x: g.offset.x * (1 - p), y: g.offset.y * (1 - p) };
+    const rect = clampRect(shaped ? lerpRect(g.source, g.target, p) : effect2 === "slide" ? slide : g.target);
+    place(shaped ? shape.current : bg.current, shaped ? within(rect, g.layer) : rect);
+    place(shadow.current, rect);
+    const melting = effect2 === "goo" ? clamp(0, 1, (1 - p) / GOO_RELEASE) : 0;
+    refs.blur.current?.setAttribute("stdDeviation", String(g.blur * melting));
+    refs.outline.current?.setAttribute("flood-opacity", String(melting * clamp(0, 1, p / GOO_SETTLE)));
+    if (shadow.current)
+      shadow.current.style.opacity = String(effect2 === "goo" ? 1 - melting : clamp(0, 1, p));
+    if (content.current) {
+      content.current.style.clipPath = shaped ? insetClip(rect, g.target) : "";
+      content.current.style.transform = effect2 === "slide" ? `translate(${rect.x}px, ${rect.y}px)` : "";
+    }
+    if (popup2.current)
+      popup2.current.style.opacity = effect2 === "fade" ? String(p) : "";
+  };
+  const rest = () => {
+    refs.bg.current?.removeAttribute("style");
+    refs.shadow.current?.removeAttribute("style");
+    if (refs.shapes.current)
+      refs.shapes.current.style.display = "";
+    if (refs.content.current) {
+      refs.content.current.style.clipPath = "";
+      refs.content.current.style.transform = "";
+    }
+    if (refs.popup.current)
+      refs.popup.current.style.opacity = "";
+  };
+  const measure = () => {
+    const el = refs.popup.current;
+    if (!el)
+      return;
+    const { effect: effect2, from: from2 } = run.current;
+    const shaped = drawsShape(effect2);
+    const box = el.getBoundingClientRect();
+    const target = { x: 0, y: 0, w: box.width, h: box.height, r: targetRadius.current };
+    const source = sourceRect(from2, origin.current ?? {}, box, target);
+    const blur = effect2 === "goo" ? Math.max(GOO_SURFACE_BLUR, target.r * GOO_BLUR_RATIO) : 0;
+    const layer = layerBox(source, target, blur * 3);
+    geometry.current = { source, target, layer, offset: slideOffset(from2, source, target, box), blur };
+    const { shapes, copy, bg } = refs;
+    if (bg.current)
+      bg.current.style.opacity = shaped ? "0" : "";
+    if (!shapes.current)
+      return;
+    shapes.current.style.display = shaped ? "block" : "";
+    if (!shaped)
+      return;
+    place(shapes.current, { ...layer, r: 0 });
+    if (effect2 === "goo")
+      place(copy.current, within(source, layer));
+    const cut = source.w > 0 && source.h > 0 && !hideSource && !overlaps(source, target);
+    shapes.current.style.clipPath = cut ? `path(evenodd, "${roundedRectPath({ ...layer, x: 0, y: 0 })} ${roundedRectPath(within(source, layer))}")` : "";
+  };
+  const reveal = () => {
+    if (!hidden.current)
+      return;
+    hidden.current.el.style.opacity = hidden.current.opacity;
+    hidden.current = null;
+  };
+  const hide = (el) => {
+    if (!hideSource || !el || hidden.current?.el === el)
+      return;
+    reveal();
+    hidden.current = { el, opacity: el.style.opacity };
+    el.style.opacity = "0";
+  };
+  const skip = (el) => instant?.(el);
+  const opening = (popup2) => {
+    returnTo.current = null;
+    run.current = { effect: resolved, from };
+    const first = !geometry.current;
+    if (first && refs.bg.current) {
+      const box = popup2.getBoundingClientRect();
+      targetRadius.current = radiusOf(refs.bg.current, box.width, box.height);
+    }
+    let controls;
+    const begin = () => {
+      measure();
+      hide(sourceElement(from, origin.current ?? {}));
+      if (skip(popup2)) {
+        progress.jump(1);
+        rest();
+        return;
+      }
+      render(progress.get());
+      const { exit: _, ...enter } = spring[timing(run.current.effect)];
+      controls = animate(progress, 1, {
+        ...enter,
+        onUpdate: (p) => {
+          if (skip(popup2))
+            controls?.complete();
+          render(p);
+        },
+        onComplete: rest
+      });
+    };
+    if (!first || skip(popup2) || !refs.bg.current) {
+      begin();
+      return () => controls?.stop();
+    }
+    refs.bg.current.style.opacity = "0";
+    if (refs.shadow.current)
+      refs.shadow.current.style.opacity = "0";
+    if (refs.content.current)
+      refs.content.current.style.clipPath = "inset(50%)";
+    const frame = requestAnimationFrame(begin);
+    return () => {
+      cancelAnimationFrame(frame);
+      controls?.stop();
+    };
+  };
+  const closing = (popup2) => {
+    returnTo.current = popup2.contains(document.activeElement) ? origin.current?.trigger ?? null : null;
+    if (!geometry.current) {
+      exited.current?.();
+      return;
+    }
+    const done = () => {
+      reveal();
+      geometry.current = null;
+      exited.current?.();
+    };
+    if (skip(popup2)) {
+      progress.jump(0);
+      popup2.style.opacity = "0";
+      done();
+      return;
+    }
+    run.current = { effect: resolve(exit?.effect ?? effect), from: exit?.from ?? from };
+    if (exit)
+      progress.jump(1);
+    const hold = holdExit(popup2, timing(run.current.effect));
+    measure();
+    render(progress.get());
+    let controls;
+    controls = animate(progress, 0, {
+      ...spring[timing(run.current.effect)].exit,
+      onUpdate: (p) => {
+        if (skip(popup2))
+          controls?.complete();
+        render(p);
+      },
+      onComplete: () => {
+        hold.finish();
+        done();
+      }
+    });
+    return () => {
+      controls?.stop();
+      hold.cancel();
+    };
+  };
+  useLayoutEffect(() => {
+    if (!popup) {
+      reveal();
+      progress.jump(0);
+      if (geometry.current && !open)
+        exited.current?.();
+      geometry.current = null;
+      return;
+    }
+    return open ? opening(popup) : closing(popup);
+  }, [open, popup]);
+  useEffect(() => reveal, []);
+  const popupRef = useCallback((node) => {
+    refs.popup.current = node;
+    setPopup(node);
+    if (node || !returnTo.current)
+      return;
+    returnFocus(returnTo.current);
+    returnTo.current = null;
+  }, []);
+  return { refs, popupRef, popup, gooId, effect: resolved, progress };
+}
+
+export { GOO_MATRIX, GOO_BLUR_RATIO, opensInPlace, inPlaceOffset, holdExit, useMorphOrigin, useMorph };

package/dist/shared/components-7zp99w5d.js

@@ -0,0 +1,62 @@
+// lib/shape-context.tsx
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var shapeMap = {
+  pill: {
+    variant: "pill",
+    item: "rounded-[20px]",
+    bg: "rounded-[20px]",
+    focusRing: "rounded-[22px]",
+    mergedBg: "rounded-2xl",
+    container: "rounded-3xl",
+    button: "rounded-[20px]",
+    input: "rounded-[20px]",
+    bgRadius: 20,
+    mergedRadius: 16
+  },
+  rounded: {
+    variant: "rounded",
+    item: "rounded-lg",
+    bg: "rounded-lg",
+    focusRing: "rounded-[10px]",
+    mergedBg: "rounded-lg",
+    container: "rounded-xl",
+    button: "rounded-lg",
+    input: "rounded-lg",
+    bgRadius: 8,
+    mergedRadius: 8
+  }
+};
+var ShapeContext = createContext(null);
+function useShape() {
+  const ctx = useContext(ShapeContext);
+  if (!ctx)
+    return shapeMap.rounded;
+  return ctx.classes;
+}
+function ShapeProvider({ children, defaultShape = "rounded" }) {
+  const [shape, setShapeState] = useState(defaultShape);
+  const transitionTimeoutRef = useRef(null);
+  const transitionShape = useCallback((callback) => {
+    const root = document.documentElement;
+    root.classList.add("transitioning");
+    root.offsetHeight;
+    callback();
+    if (transitionTimeoutRef.current)
+      clearTimeout(transitionTimeoutRef.current);
+    transitionTimeoutRef.current = setTimeout(() => root.classList.remove("transitioning"), 200);
+  }, []);
+  const setShape = useCallback((next) => {
+    transitionShape(() => setShapeState(next));
+  }, [transitionShape]);
+  useEffect(() => {
+    document.documentElement.style.setProperty("--shape-input-radius", `${shapeMap[shape].bgRadius}px`);
+  }, [shape]);
+  const value = useMemo(() => ({ shape, setShape, classes: shapeMap[shape] }), [shape, setShape]);
+  return /* @__PURE__ */ jsx(ShapeContext.Provider, {
+    value,
+    children
+  });
+}
+
+export { shapeMap, useShape, ShapeProvider };