@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-asr5pg50.js

@@ -0,0 +1,191 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  GooIndicator
+} from "./components-chacnk61.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// components/inputs/switch/index.tsx
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { forwardRef, useCallback, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var METRICS = {
+  default: {
+    trackWidth: 34,
+    trackHeight: 20,
+    thumbSize: 16,
+    pillExtend: 2,
+    pressExtend: 4,
+    pressShrink: 4
+  },
+  compact: {
+    trackWidth: 28,
+    trackHeight: 16,
+    thumbSize: 12,
+    pillExtend: 2,
+    pressExtend: 3,
+    pressShrink: 3
+  }
+};
+var THUMB_OFFSET = 2;
+var DRAG_DEAD_ZONE = 2;
+var Switch2 = forwardRef(({
+  label,
+  checked,
+  defaultChecked = false,
+  onToggle,
+  onCheckedChange,
+  disabled = false,
+  thumbTransition,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const [isChecked, setChecked] = useControllableState(checked, defaultChecked, onCheckedChange);
+  const toggle = useCallback(() => {
+    setChecked((prev) => !prev);
+    onToggle?.();
+  }, [setChecked, onToggle]);
+  const labelId = useId();
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const sizeClasses = useSize2(size);
+  const m = METRICS[sizeClasses.variant];
+  const thumbTravel = m.trackWidth - m.thumbSize - THUMB_OFFSET * 2;
+  const dragging = useRef(false);
+  const didDrag = useRef(false);
+  const pointerStart = useRef(null);
+  const [dragX, setDragXState] = useState(null);
+  const dragXRef = useRef(null);
+  const setDragX = useCallback((x) => {
+    dragXRef.current = x;
+    setDragXState(x);
+  }, []);
+  const thumbWidth = pressed ? m.thumbSize + m.pressExtend : hovered ? m.thumbSize + m.pillExtend : m.thumbSize;
+  const thumbHeight = pressed ? m.thumbSize - m.pressShrink : m.thumbSize;
+  const thumbY = pressed ? THUMB_OFFSET + m.pressShrink / 2 : THUMB_OFFSET;
+  const extraWidth = thumbWidth - m.thumbSize;
+  const thumbX = isChecked ? THUMB_OFFSET + thumbTravel - extraWidth : THUMB_OFFSET;
+  const thumb = { left: dragX ?? thumbX, top: thumbY, width: thumbWidth, height: thumbHeight };
+  const handlePointerDown = useCallback((e) => {
+    if (disabled)
+      return;
+    if (e.pointerType === "mouse" && e.button !== 0)
+      return;
+    setPressed(true);
+    dragging.current = false;
+    didDrag.current = false;
+    pointerStart.current = {
+      clientX: e.clientX,
+      originX: isChecked ? THUMB_OFFSET + thumbTravel - m.pressExtend : THUMB_OFFSET
+    };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  }, [disabled, isChecked, thumbTravel, m]);
+  const handlePointerMove = useCallback((e) => {
+    if (!pointerStart.current)
+      return;
+    const delta = e.clientX - pointerStart.current.clientX;
+    if (!dragging.current) {
+      if (Math.abs(delta) < DRAG_DEAD_ZONE)
+        return;
+      dragging.current = true;
+    }
+    const dragMin = THUMB_OFFSET;
+    const pressedThumbWidth = m.thumbSize + m.pressExtend;
+    const dragMax = m.trackWidth - THUMB_OFFSET - pressedThumbWidth;
+    const rawX = pointerStart.current.originX + delta;
+    setDragX(Math.max(dragMin, Math.min(dragMax, rawX)));
+  }, [setDragX, m]);
+  const handlePointerUp = useCallback(() => {
+    if (!pointerStart.current)
+      return;
+    setPressed(false);
+    if (dragging.current) {
+      didDrag.current = true;
+      dragging.current = false;
+      const currentX = dragXRef.current ?? pointerStart.current.originX;
+      const dragMin = THUMB_OFFSET;
+      const pressedThumbWidth = m.thumbSize + m.pressExtend;
+      const dragMax = m.trackWidth - THUMB_OFFSET - pressedThumbWidth;
+      const midpoint = (dragMin + dragMax) / 2;
+      const shouldBeOn = currentX > midpoint;
+      if (shouldBeOn !== isChecked)
+        toggle();
+      setDragX(null);
+      requestAnimationFrame(() => {
+        didDrag.current = false;
+      });
+    }
+    pointerStart.current = null;
+  }, [isChecked, toggle, setDragX, m]);
+  const handlePointerCancel = useCallback(() => {
+    if (!pointerStart.current)
+      return;
+    setPressed(false);
+    if (dragging.current) {
+      dragging.current = false;
+      setDragX(null);
+    }
+    pointerStart.current = null;
+  }, [setDragX]);
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: cn2("relative z-10 flex items-center cursor-pointer select-none touch-none", sizeClasses.gap, sizeClasses.px, sizeClasses.variant === "compact" ? "py-1" : "py-2", disabled && "opacity-50 pointer-events-none", className),
+    onPointerEnter: (e) => {
+      if (e.pointerType === "mouse")
+        setHovered(true);
+    },
+    onPointerLeave: () => setHovered(false),
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerCancel,
+    onClick: () => {
+      if (disabled || didDrag.current)
+        return;
+      toggle();
+    },
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
+        checked: isChecked,
+        "aria-labelledby": labelId,
+        disabled,
+        tabIndex: 0,
+        className: cn2("relative shrink-0 rounded-full outline-none cursor-pointer", "transition-colors duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", isChecked ? hovered ? "bg-brand-hover" : "bg-brand" : hovered ? "bg-accent-hover" : "bg-accent"),
+        style: {
+          width: m.trackWidth,
+          height: m.trackHeight
+        },
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
+          className: "pointer-events-none absolute inset-0",
+          children: /* @__PURE__ */ jsx(GooIndicator, {
+            rect: thumb,
+            className: "rounded-full bg-thumb",
+            shadow: "shadow-thumb",
+            transition: dragX === null ? thumbTransition ?? spring2.moderate : false
+          })
+        })
+      }),
+      /* @__PURE__ */ jsx("span", {
+        id: labelId,
+        className: cn2("[text-box:trim-both_cap_alphabetic] transition-[color] duration-fast", sizeClasses.text, isChecked ? "text-foreground" : "text-muted-foreground"),
+        children: label
+      })
+    ]
+  });
+});
+Switch2.displayName = "Switch";
+var switch_default = Switch2;
+
+export { Switch2, switch_default };

package/dist/shared/components-b2wyq2cq.js

@@ -0,0 +1,232 @@
+import {
+  useReduceMotion
+} from "./components-men63rwj.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSizeVariant2
+} from "./components-0sn7ypjw.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// components/button/index.tsx
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useLayoutEffect,
+  useRef
+} from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var buttonVariants2 = cva([
+  "group relative isolate inline-flex items-center justify-center outline-none cursor-pointer",
+  "transition-[color,opacity] duration-fast",
+  "disabled:opacity-50 disabled:pointer-events-none",
+  "focus-visible:ring-1 focus-visible:ring-focus-ring"
+], {
+  variants: {
+    variant: {
+      primary: "text-background",
+      secondary: "text-foreground",
+      tertiary: "text-foreground",
+      ghost: "text-muted-foreground hover:text-foreground"
+    },
+    size: {
+      default: "h-9 px-4 text-body gap-1.5",
+      compact: "h-7 px-3 text-body-compact gap-1",
+      icon: "h-9 w-9 p-0 [&_svg]:h-4 [&_svg]:w-4",
+      "icon-compact": "h-7 w-7 p-0 [&_svg]:h-3.5 [&_svg]:w-3.5"
+    },
+    iconLeft: { true: "" },
+    iconRight: { true: "" }
+  },
+  compoundVariants: [
+    { size: "compact", iconLeft: true, className: "pl-2" },
+    { size: "default", iconLeft: true, className: "pl-3" },
+    { size: "compact", iconRight: true, className: "pr-2" },
+    { size: "default", iconRight: true, className: "pr-3" }
+  ],
+  defaultVariants: {
+    variant: "primary",
+    size: "default"
+  }
+});
+var legacySizeAliases = {
+  sm: "compact",
+  md: "default",
+  lg: "default",
+  "icon-sm": "icon-compact",
+  "icon-lg": "icon"
+};
+var bgVariants = {
+  primary: "[--btn-bg:var(--foreground)] group-hover:[--btn-bg:color-mix(in_oklab,var(--foreground)_90%,var(--background))] group-active:[--btn-bg:color-mix(in_oklab,var(--foreground)_80%,var(--background))] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
+  secondary: "[--btn-bg:var(--accent)] group-hover:[--btn-bg:color-mix(in_oklab,var(--accent)_80%,var(--background))] group-active:[--btn-bg:var(--accent)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
+  tertiary: "bg-transparent shadow-[0_0_0_1px_var(--border),inset_0_0_0_0px_var(--border)] group-hover:bg-hover group-active:bg-active group-active:shadow-[0_0_0_0px_var(--border),inset_0_0_0_1px_var(--border)]",
+  ghost: "bg-transparent shadow-[0_0_0_1px_transparent] group-hover:bg-hover group-hover:shadow-[0_0_0_1px_var(--hover)] group-active:bg-active group-active:shadow-[0_0_0_0px_var(--active)]"
+};
+var activeBgVariants = {
+  primary: "[--btn-bg:color-mix(in_oklab,var(--foreground)_80%,var(--background))] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
+  secondary: "[--btn-bg:var(--accent)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
+  tertiary: "bg-active shadow-[0_0_0_1px_var(--border),inset_0_0_0_0px_var(--border)] group-active:shadow-[0_0_0_0px_var(--border),inset_0_0_0_1px_var(--border)]",
+  ghost: "bg-active shadow-[0_0_0_1px_var(--active)] group-active:shadow-[0_0_0_0px_var(--active)]"
+};
+var { exit: _exit, ...enter } = spring2.moderate;
+function useLoadingMorph(loading) {
+  const surface = useRef(null);
+  const progress = useMotionValue(loading ? 1 : 0);
+  const reduced = useReduceMotion();
+  useLayoutEffect(() => {
+    const el = surface.current;
+    const root = el?.parentElement;
+    if (!el || !root || !loading && progress.get() === 0)
+      return;
+    const height = root.offsetHeight;
+    const circle = height / 2 - 1;
+    const rest = Math.min(Number.parseFloat(getComputedStyle(root).borderTopLeftRadius) || 0, circle);
+    const render = (p) => {
+      const side = `calc(${50 * p}% + ${1 - height / 2 * p}px)`;
+      el.style.left = side;
+      el.style.right = side;
+      el.style.borderRadius = `${rest + (circle - rest) * p}px`;
+    };
+    const settle = () => el.removeAttribute("style");
+    const target = loading ? 1 : 0;
+    if (reduced || progress.get() === target) {
+      progress.jump(target);
+      return loading ? render(1) : settle();
+    }
+    const controls = animate(progress, target, {
+      ...enter,
+      onUpdate: render,
+      onComplete: loading ? undefined : settle
+    });
+    return () => controls.stop();
+  }, [loading, reduced]);
+  return surface;
+}
+var Button2 = forwardRef(({
+  className,
+  variant,
+  size,
+  asChild = false,
+  loading = false,
+  leadingIcon: LeadingIcon,
+  trailingIcon: TrailingIcon,
+  active = false,
+  disabled,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const asChildElement = asChild && isValidElement(children) ? children : null;
+  const label = asChildElement ? asChildElement.props.children : children;
+  const contextSize = useSizeVariant2();
+  const resolvedSize = size ? legacySizeAliases[size] ?? size : contextSize === "compact" ? "compact" : "default";
+  const isIconOnly = resolvedSize === "icon" || resolvedSize === "icon-compact";
+  const isCompact = resolvedSize === "compact" || resolvedSize === "icon-compact";
+  const iconSize = isCompact ? 14 : 16;
+  const spinnerSizeClass = isCompact ? "h-7 w-7" : "h-9 w-9";
+  const shape = useShape();
+  const bgClass = active ? activeBgVariants[variant ?? "primary"] : bgVariants[variant ?? "primary"];
+  const surface = useLoadingMorph(loading);
+  const internals = /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        ref: surface,
+        "aria-hidden": true,
+        className: cn2("absolute inset-px rounded-[inherit] transition-[box-shadow,background-color] [transition-duration:180ms,80ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1),ease] group-active:[transition-duration:80ms,80ms]", bgClass)
+      }),
+      /* @__PURE__ */ jsx(motion.span, {
+        className: "relative inline-flex items-center justify-center gap-[inherit]",
+        initial: false,
+        animate: { opacity: loading ? 0 : 1 },
+        transition: loading ? spring2.fast.exit : enter,
+        children: isIconOnly ? /* @__PURE__ */ jsx("span", {
+          className: "[&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-fast group-hover:[&_svg]:stroke-[2]",
+          children: label
+        }) : /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            LeadingIcon && /* @__PURE__ */ jsx(LeadingIcon, {
+              size: iconSize,
+              strokeWidth: 1.5,
+              className: "transition-[stroke-width] duration-fast group-hover:stroke-[2]"
+            }),
+            /* @__PURE__ */ jsx("span", {
+              className: "[text-box:trim-both_cap_alphabetic]",
+              children: label
+            }),
+            TrailingIcon && /* @__PURE__ */ jsx(TrailingIcon, {
+              size: iconSize,
+              strokeWidth: 1.5,
+              className: "transition-[stroke-width] duration-fast group-hover:stroke-[2]"
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx(AnimatePresence, {
+        initial: false,
+        children: loading && /* @__PURE__ */ jsx(motion.span, {
+          "aria-hidden": true,
+          className: "absolute inset-0 flex items-center justify-center",
+          initial: { opacity: 0, scale: 0.6 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.6, transition: spring2.fast.exit },
+          transition: enter,
+          children: /* @__PURE__ */ jsx("svg", {
+            className: spinnerSizeClass,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: /* @__PURE__ */ jsx("path", {
+              d: "M 12 12 C 14 8.5 19 8.5 19 12 C 19 15.5 14 15.5 12 12 C 10 8.5 5 8.5 5 12 C 5 15.5 10 15.5 12 12 Z",
+              stroke: "currentColor",
+              strokeWidth: "1.125",
+              strokeLinecap: "round",
+              pathLength: "100",
+              style: {
+                strokeDasharray: "15 85",
+                animation: "spinner-move 2s linear infinite, spinner-dash 4s ease-in-out infinite"
+              }
+            })
+          })
+        }, "spinner")
+      })
+    ]
+  });
+  const rootClassName = cn2(buttonVariants2({
+    variant,
+    size: resolvedSize,
+    iconLeft: !isIconOnly && !!LeadingIcon,
+    iconRight: !isIconOnly && !!TrailingIcon
+  }), shape.button, className);
+  if (asChildElement) {
+    const childProps = asChildElement.props;
+    return cloneElement(asChildElement, {
+      ...props,
+      ref,
+      "aria-busy": loading || undefined,
+      className: cn2(rootClassName, childProps.className),
+      style: { ...style, ...childProps.style }
+    }, internals);
+  }
+  return /* @__PURE__ */ jsx(ButtonPrimitive, {
+    ref,
+    className: rootClassName,
+    disabled: disabled || loading,
+    "aria-busy": loading || undefined,
+    style,
+    ...props,
+    children: internals
+  });
+});
+Button2.displayName = "Button";
+var button_default = Button2;
+
+export { buttonVariants2, Button2, button_default };

package/dist/shared/components-c6s6b43g.js

@@ -0,0 +1,15 @@
+// lib/use-is-mobile.ts
+import { useEffect, useState } from "react";
+function useIsMobile(breakpoint) {
+  const [isMobile, setIsMobile] = useState(undefined);
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const onChange = () => setIsMobile(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [breakpoint]);
+  return !!isMobile;
+}
+
+export { useIsMobile };