@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-jw16snbn.js

@@ -0,0 +1,19 @@
+// lib/popup.ts
+var popupScrollAreaClass = "min-h-0 flex-1 max-h-[inherit]";
+var popupViewportClass = "!h-auto max-h-[inherit] [&>div[style]]:!block [&>div[style]]:!min-w-0 [--scroll-fade-size:32px]";
+var POPUP_NAV_KEYS = [
+  "ArrowDown",
+  "ArrowUp",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+  "Tab"
+];
+function isDisabledRow(el) {
+  return el.getAttribute("aria-disabled") === "true" || el.hasAttribute("data-disabled");
+}
+
+export { popupScrollAreaClass, popupViewportClass, POPUP_NAV_KEYS, isDisabledRow };

package/dist/shared/components-jxgznftn.js

@@ -0,0 +1,146 @@
+import {
+  GOO_MATRIX
+} from "./components-7nww01w4.js";
+import {
+  useReduceMotion
+} from "./components-nnnd2xef.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  cn
+} from "./components-0f0as45n.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 } = spring.slow;
+function MorphPart({ 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: cn("absolute", bg)
+          }),
+          /* @__PURE__ */ jsx2("div", {
+            ref: refs.shape,
+            className: cn("absolute", bg)
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        ref: refs.bg,
+        "aria-hidden": true,
+        className: cn("pointer-events-none absolute inset-0", bg, radius)
+      }),
+      shadow && /* @__PURE__ */ jsx2("div", {
+        ref: refs.shadow,
+        "aria-hidden": true,
+        className: cn("pointer-events-none absolute inset-0", shadow, radius)
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        ref: refs.content,
+        className: cn("relative", className),
+        children: /* @__PURE__ */ jsx2(MorphPartInOverlay.Provider, {
+          value: true,
+          children
+        })
+      })
+    ]
+  });
+}
+
+export { MorphPartScope, MorphPart, GooFilter, MorphSurface };

package/dist/shared/components-kf2ehztc.js

@@ -0,0 +1,216 @@
+import {
+  GOO_BLUR_RATIO,
+  GOO_MATRIX
+} from "./components-7nww01w4.js";
+import {
+  useReduceMotion
+} from "./components-nnnd2xef.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// lib/goo-indicator.tsx
+import { animate, motion, useMotionValue } from "motion/react";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var COVERAGE = "0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 255 0";
+var NECK = 0.5;
+function union(a, b) {
+  if (!a)
+    return b;
+  const left = Math.min(a.left, b.left);
+  const top = Math.min(a.top, b.top);
+  return {
+    left,
+    top,
+    width: Math.max(a.left + a.width, b.left + b.width) - left,
+    height: Math.max(a.top + a.height, b.top + b.height) - top
+  };
+}
+function pad(rect, by) {
+  return { left: rect.left - by, top: rect.top - by, width: rect.width + by * 2, height: rect.height + by * 2 };
+}
+function center(rect) {
+  return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+}
+function travels(from, to) {
+  const a = center(from);
+  const b = center(to);
+  return Math.abs(b.x - a.x) > Math.min(from.width, to.width) / 2 || Math.abs(b.y - a.y) > Math.min(from.height, to.height) / 2;
+}
+function retract(from, to) {
+  const axis = (start, size, toStart, toSize) => {
+    const delta = toStart + toSize / 2 - (start + size / 2);
+    if (Math.abs(delta) < 1)
+      return [start + size * (1 - NECK) / 2, size * NECK];
+    return [delta > 0 ? toStart : toStart + toSize, 0];
+  };
+  const [left, width] = axis(from.left, from.width, to.left, to.width);
+  const [top, height] = axis(from.top, from.height, to.top, to.height);
+  return { left, top, width, height };
+}
+function toTarget(rect) {
+  return { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+}
+function blurOf(el, rect) {
+  const r = Number.parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0;
+  return Math.min(r, rect.width / 2, rect.height / 2) * GOO_BLUR_RATIO;
+}
+function GooLayer({ active, blur, box, fill, children }) {
+  const id = `goo-${useId().replace(/:/g, "")}`;
+  const flood = useRef(null);
+  const probe = useRef(null);
+  const layer = box ? pad(box, blur * 3) : { left: 0, top: 0, width: 0, height: 0 };
+  useLayoutEffect(() => {
+    if (!active || !probe.current)
+      return;
+    flood.current?.setAttribute("flood-color", getComputedStyle(probe.current).backgroundColor);
+  }, [active]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx("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__ */ jsx("feColorMatrix", {
+              in: "SourceGraphic",
+              values: COVERAGE,
+              result: "coverage"
+            }),
+            /* @__PURE__ */ jsx("feGaussianBlur", {
+              in: "coverage",
+              stdDeviation: blur,
+              result: "blur"
+            }),
+            /* @__PURE__ */ jsx("feColorMatrix", {
+              in: "blur",
+              values: GOO_MATRIX,
+              result: "goo"
+            }),
+            /* @__PURE__ */ jsx("feFlood", {
+              ref: flood
+            }),
+            /* @__PURE__ */ jsx("feComposite", {
+              in2: "goo",
+              operator: "in"
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute",
+        style: { ...layer, filter: active ? `url(#${id})` : undefined },
+        children: /* @__PURE__ */ jsx("div", {
+          ref: probe,
+          className: cn(fill, "absolute"),
+          style: { left: -layer.left, top: -layer.top },
+          children
+        })
+      })
+    ]
+  });
+}
+function GooIndicator({
+  rect,
+  from,
+  className,
+  shadow,
+  transition = spring.moderate,
+  opacity = 1
+}) {
+  const reduced = useReduceMotion();
+  const start = from ?? rect;
+  const x = useMotionValue(start.left);
+  const y = useMotionValue(start.top);
+  const width = useMotionValue(start.width);
+  const height = useMotionValue(start.height);
+  const lead = useRef(null);
+  const [trails, setTrails] = useState([]);
+  const [blur, setBlur] = useState(0);
+  const ids = useRef(0);
+  const travel = transition === false || reduced ? false : transition;
+  const travelRef = useRef(travel);
+  travelRef.current = travel;
+  const read = () => ({ left: x.get(), top: y.get(), width: width.get(), height: height.get() });
+  useLayoutEffect(() => {
+    const move = travelRef.current;
+    const current = read();
+    if (!move) {
+      x.jump(rect.left);
+      y.jump(rect.top);
+      width.jump(rect.width);
+      height.jump(rect.height);
+      return;
+    }
+    const goo = lead.current && travels(current, rect) ? blurOf(lead.current, current) : 0;
+    if (goo >= 1) {
+      setBlur(goo);
+      setTrails((list) => [...list, { id: ++ids.current, from: current, to: retract(current, rect) }]);
+    }
+    animate(x, rect.left, move);
+    animate(y, rect.top, move);
+    animate(width, rect.width, move);
+    animate(height, rect.height, move);
+  }, [rect.left, rect.top, rect.width, rect.height]);
+  const melting = trails.length > 0;
+  const linger = travel ? { ...travel, delay: (travel.duration ?? 0) / 3 } : undefined;
+  const shape = cn("pointer-events-none absolute top-0 left-0", className);
+  const box = trails.reduce((all, trail) => union(all, trail.from), union(read(), rect));
+  const drop = (trail) => setTrails((list) => list.filter((t) => t.id !== trail.id));
+  return /* @__PURE__ */ jsxs(motion.div, {
+    "aria-hidden": true,
+    className: "pointer-events-none absolute top-0 left-0",
+    initial: false,
+    animate: { opacity },
+    transition: { duration: spring.fast.duration },
+    children: [
+      shadow && /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          trails.map((trail) => /* @__PURE__ */ jsx(motion.div, {
+            className: cn(shape, shadow),
+            initial: { ...toTarget(trail.from), opacity: 1 },
+            animate: { ...toTarget(trail.to), opacity: 0 },
+            transition: linger
+          }, trail.id)),
+          /* @__PURE__ */ jsx(motion.div, {
+            className: cn(shape, shadow, !melting && "invisible"),
+            style: { x, y, width, height }
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs(GooLayer, {
+        active: melting,
+        blur,
+        box,
+        fill: className ?? "",
+        children: [
+          trails.map((trail) => /* @__PURE__ */ jsx(motion.div, {
+            className: shape,
+            initial: toTarget(trail.from),
+            animate: toTarget(trail.to),
+            transition: linger,
+            onAnimationComplete: () => drop(trail)
+          }, trail.id)),
+          /* @__PURE__ */ jsx(motion.div, {
+            ref: lead,
+            className: cn(shape, !melting && shadow),
+            style: { x, y, width, height }
+          })
+        ]
+      })
+    ]
+  });
+}
+
+export { union, GooLayer, GooIndicator };

package/dist/shared/components-kpbcms10.js

@@ -0,0 +1,9 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+export { __require };

package/dist/shared/components-m5br529r.js

@@ -0,0 +1,141 @@
+// lib/icon-context.tsx
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  Bell,
+  Brain,
+  Calendar,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ChevronsUpDown,
+  Circle,
+  Clock,
+  Copy,
+  CornerDownLeft,
+  CornerDownRight,
+  Dot,
+  Ellipsis,
+  EllipsisVertical,
+  Folder,
+  Globe,
+  Heart,
+  Home,
+  ImageIcon,
+  Inbox,
+  Lightbulb,
+  Link,
+  Loader,
+  Lock,
+  Mail,
+  Menu,
+  MessageCircle,
+  Monitor,
+  Moon,
+  Paintbrush,
+  Palette,
+  PanelLeft,
+  PanelLeftDashed,
+  PanelRight,
+  PanelRightDashed,
+  Pause,
+  Pencil,
+  Pipette,
+  Play,
+  Plus,
+  RectangleHorizontal,
+  Rocket,
+  RotateCcw,
+  Scaling,
+  Search,
+  Settings,
+  Shield,
+  SkipForward,
+  SlidersHorizontal,
+  SquareLibrary,
+  Star,
+  Sun,
+  User,
+  Users,
+  X
+} from "lucide-react";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var defaultIcons = {
+  "chevron-right": ChevronRight,
+  "chevron-down": ChevronDown,
+  pipette: Pipette,
+  x: X,
+  copy: Copy,
+  menu: Menu,
+  dot: Dot,
+  monitor: Monitor,
+  sun: Sun,
+  moon: Moon,
+  "rectangle-horizontal": RectangleHorizontal,
+  circle: Circle,
+  "square-library": SquareLibrary,
+  clock: Clock,
+  star: Star,
+  settings: Settings,
+  plus: Plus,
+  "arrow-left": ArrowLeft,
+  "arrow-right": ArrowRight,
+  "arrow-up": ArrowUp,
+  "arrow-down": ArrowDown,
+  search: Search,
+  loader: Loader,
+  users: Users,
+  lock: Lock,
+  mail: Mail,
+  bell: Bell,
+  shield: Shield,
+  palette: Palette,
+  lightbulb: Lightbulb,
+  rocket: Rocket,
+  heart: Heart,
+  paintbrush: Paintbrush,
+  brain: Brain,
+  globe: Globe,
+  user: User,
+  image: ImageIcon,
+  link: Link,
+  check: Check,
+  "rotate-ccw": RotateCcw,
+  play: Play,
+  pause: Pause,
+  home: Home,
+  "message-circle": MessageCircle,
+  inbox: Inbox,
+  pencil: Pencil,
+  scaling: Scaling,
+  "skip-forward": SkipForward,
+  "corner-down-right": CornerDownRight,
+  "corner-down-left": CornerDownLeft,
+  "panel-left": PanelLeft,
+  "panel-left-dashed": PanelLeftDashed,
+  "panel-right": PanelRight,
+  "panel-right-dashed": PanelRightDashed,
+  "chevrons-up-down": ChevronsUpDown,
+  "more-horizontal": Ellipsis,
+  "more-vertical": EllipsisVertical,
+  calendar: Calendar,
+  folder: Folder,
+  "sliders-horizontal": SlidersHorizontal
+};
+var IconContext = createContext(null);
+function useIcon(name) {
+  const icons = useContext(IconContext);
+  return (icons ?? defaultIcons)[name];
+}
+function IconProvider({ children, icons }) {
+  const value = useMemo(() => ({ ...defaultIcons, ...icons }), [icons]);
+  return /* @__PURE__ */ jsx(IconContext.Provider, {
+    value,
+    children
+  });
+}
+
+export { useIcon, IconProvider };