@codraoss/ui 0.9.4

package/dist/components/motion/index.js

@@ -0,0 +1,643 @@
+import {
+  cn
+} from "../../chunk-HCQJTSV3.js";
+import {
+  useIsDarkMode
+} from "../../chunk-TXNSYK4G.js";
+import "../../chunk-PZ5AY32C.js";
+
+// src/components/motion/shared-layout-bg.tsx
+import {
+  AnimatePresence,
+  domMax,
+  LazyMotion,
+  m,
+  useReducedMotion
+} from "motion/react";
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useId,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SPRING_LAYOUT = {
+  type: "spring",
+  stiffness: 400,
+  damping: 40,
+  mass: 0.6
+};
+var variants = {
+  initial: { opacity: 0, filter: "blur(6px)" },
+  animate: { opacity: 1, filter: "blur(0px)" },
+  exit: (isActive) => !isActive ? { opacity: 0, filter: "blur(6px)" } : {}
+};
+var reducedVariants = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: (isActive) => !isActive ? { opacity: 0 } : {}
+};
+function SharedLayoutBg({
+  children,
+  className,
+  pillClassName,
+  inset = 0
+}) {
+  const [activeId, setActiveId] = useState(null);
+  const uid = useId();
+  const reduce = useReducedMotion();
+  const rows = [];
+  for (const child of Children.toArray(children)) {
+    if (!isValidElement(child)) continue;
+    const el = child;
+    const childKey = el.key ? String(el.key) : `item-${rows.length}`;
+    rows.push(
+      cloneElement(
+        el,
+        {
+          key: childKey,
+          className: cn("relative z-10", el.props.className),
+          onMouseEnter: (e) => {
+            el.props.onMouseEnter?.(e);
+            setActiveId(childKey);
+          }
+        },
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-0", children: /* @__PURE__ */ jsx(AnimatePresence, { custom: activeId !== null, children: activeId !== null ? /* @__PURE__ */ jsx(
+            m.div,
+            {
+              variants: reduce ? reducedVariants : variants,
+              initial: "initial",
+              animate: "animate",
+              exit: "exit",
+              custom: activeId !== null,
+              className: "absolute inset-0",
+              style: { left: -inset, right: -inset, top: 0, bottom: 0 },
+              children: activeId === childKey ? /* @__PURE__ */ jsx(
+                m.div,
+                {
+                  layoutId: `shared-bg-${uid}`,
+                  transition: reduce ? { duration: 0 } : SPRING_LAYOUT,
+                  className: cn(
+                    "pointer-events-none h-full w-full rounded-lg",
+                    pillClassName
+                  )
+                }
+              ) : null
+            }
+          ) : null }) }),
+          el
+        ] })
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, children: /* @__PURE__ */ jsx(
+    m.div,
+    {
+      layoutRoot: true,
+      onMouseLeave: () => setActiveId(null),
+      className: cn("flex w-full flex-col", className),
+      children: rows
+    }
+  ) });
+}
+
+// src/components/motion/smooth-scroll.tsx
+import { ReactLenis, useLenis } from "lenis/react";
+import { useMotionValue, useReducedMotion as useReducedMotion2 } from "motion/react";
+import {
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef
+} from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var EASE_SCROLL = (t) => Math.min(1, 1.001 - 2 ** (-10 * t));
+var SmoothScrollContext = createContext(null);
+function readMetrics(target) {
+  if (target instanceof Window) {
+    const max = Math.max(
+      0,
+      document.documentElement.scrollHeight - window.innerHeight
+    );
+    return { y: window.scrollY, max };
+  }
+  return {
+    y: target.scrollTop,
+    max: Math.max(0, target.scrollHeight - target.clientHeight)
+  };
+}
+function resolveTop(target, source, offset = 0) {
+  if (typeof target === "number") return target + offset;
+  if (source instanceof Window) {
+    const el2 = typeof target === "string" ? document.querySelector(target) : target;
+    if (!el2) return window.scrollY;
+    return el2.getBoundingClientRect().top + window.scrollY + offset;
+  }
+  const el = typeof target === "string" ? source.querySelector(target) : target;
+  if (!(el instanceof HTMLElement)) return source.scrollTop;
+  return el.offsetTop + offset;
+}
+function LenisBridge({
+  scrollY,
+  progress,
+  velocity,
+  lenisRef
+}) {
+  const lenis = useLenis((instance) => {
+    scrollY.set(instance.scroll);
+    progress.set(instance.progress);
+    velocity.set(instance.velocity);
+  });
+  useEffect(() => {
+    lenisRef.current = lenis ?? null;
+    return () => {
+      lenisRef.current = null;
+    };
+  }, [lenis, lenisRef]);
+  return null;
+}
+function useNativeScrollSync(enabled, getTarget, scrollY, progress, velocity) {
+  useEffect(() => {
+    if (!enabled) return;
+    const target = getTarget();
+    if (!target) return;
+    let lastY = readMetrics(target).y;
+    let lastT = performance.now();
+    const onScroll = () => {
+      const { y, max } = readMetrics(target);
+      const now = performance.now();
+      const dt = now - lastT || 16;
+      scrollY.set(y);
+      progress.set(max > 0 ? y / max : 0);
+      velocity.set((y - lastY) / dt * 16);
+      lastY = y;
+      lastT = now;
+    };
+    onScroll();
+    target.addEventListener("scroll", onScroll, { passive: true });
+    return () => target.removeEventListener("scroll", onScroll);
+  }, [enabled, getTarget, scrollY, progress, velocity]);
+}
+function SmoothScroll({
+  children,
+  root = true,
+  lerp = 0.1,
+  duration = 1.2,
+  orientation = "vertical",
+  wheelMultiplier = 1,
+  touch = false,
+  className
+}) {
+  const reduce = useReducedMotion2();
+  const scrollY = useMotionValue(0);
+  const progress = useMotionValue(0);
+  const velocity = useMotionValue(0);
+  const lenisRef = useRef(null);
+  const containerRef = useRef(null);
+  const nativeSource = useCallback(
+    () => root ? window : containerRef.current,
+    [root]
+  );
+  const scrollTo = useCallback(
+    (target, options) => {
+      const lenis = lenisRef.current;
+      if (lenis && !reduce) {
+        lenis.scrollTo(target, {
+          offset: options?.offset,
+          duration: options?.duration,
+          immediate: options?.immediate
+        });
+        return;
+      }
+      const source = nativeSource();
+      const behavior = reduce || options?.immediate ? "auto" : "smooth";
+      const top = resolveTop(target, source ?? window, options?.offset);
+      (source ?? window).scrollTo({ top, behavior });
+    },
+    [reduce, nativeSource]
+  );
+  useNativeScrollSync(!!reduce, nativeSource, scrollY, progress, velocity);
+  const api = useMemo(
+    () => ({ lenis: lenisRef.current, scrollY, progress, velocity, scrollTo }),
+    [scrollY, progress, velocity, scrollTo]
+  );
+  if (reduce) {
+    return /* @__PURE__ */ jsx2(SmoothScrollContext.Provider, { value: api, children: /* @__PURE__ */ jsx2("div", { ref: containerRef, className, children }) });
+  }
+  return /* @__PURE__ */ jsx2(SmoothScrollContext.Provider, { value: api, children: /* @__PURE__ */ jsxs2(
+    ReactLenis,
+    {
+      root,
+      className,
+      options: {
+        lerp,
+        duration,
+        orientation,
+        wheelMultiplier,
+        smoothWheel: true,
+        syncTouch: touch,
+        easing: EASE_SCROLL,
+        // Without this, Lenis preventDefault()s every wheel event, blocking nested scrollable
+        // elements (log panes, drawers, option lists). Escape hatch: `data-lenis-prevent`.
+        allowNestedScroll: true
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          LenisBridge,
+          {
+            scrollY,
+            progress,
+            velocity,
+            lenisRef
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+}
+
+// src/components/motion/stepped-slider.tsx
+import {
+  domAnimation,
+  LazyMotion as LazyMotion2,
+  m as m2,
+  useMotionTemplate,
+  useMotionValue as useMotionValue2,
+  useReducedMotion as useReducedMotion3,
+  useSpring,
+  useTransform
+} from "motion/react";
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5 };
+var SPRING_BOUNCY = { type: "spring", stiffness: 500, damping: 14, mass: 0.7 };
+function seedFromId(id) {
+  if (!id) return 0;
+  let hash = 0;
+  for (let i = 0; i < id.length; i += 1) {
+    hash = hash * 31 + id.charCodeAt(i) >>> 0;
+  }
+  return hash % 997 / 997;
+}
+var clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+function SteppedSlider({
+  id,
+  value,
+  defaultValue = 0,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  steps = [],
+  formatValue,
+  disabled = false,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  const reduce = useReducedMotion3();
+  const isDark = useIsDarkMode();
+  const seed = useMemo2(() => seedFromId(id), [id]);
+  const trackRef = useRef2(null);
+  const [internal, setInternal] = useState2(defaultValue);
+  const [active, setActive] = useState2(false);
+  const [dragValue, setDragValue] = useState2(null);
+  const dragValueRef = useRef2(null);
+  const controlled = value !== void 0;
+  const committedValue = clamp(controlled ? value : internal, min, max);
+  const current = active && dragValue !== null ? clamp(dragValue, min, max) : committedValue;
+  const percent = (current - min) / (max - min) * 100;
+  const isMaxed = current === max;
+  const hue = 185 + (seed - 0.5) * 16;
+  const glowColor = isDark ? `oklch(68% 0.14 ${hue})` : `oklch(52% 0.13 ${hue})`;
+  const fillGradient = isDark ? `linear-gradient(90deg, oklch(28% 0.08 ${hue}), oklch(62% 0.12 ${hue}))` : `linear-gradient(90deg, oklch(93% 0.03 ${hue}), oklch(56% 0.13 ${hue}))`;
+  const dotDriftDuration = 1.4 + seed * 0.5;
+  const glowDuration = 1.6 + seed * 0.6;
+  const target = useMotionValue2(percent);
+  useEffect2(() => {
+    target.set(percent);
+  }, [percent, target]);
+  const smooth = useSpring(target, SPRING_GLIDE);
+  const pos = reduce ? target : smooth;
+  const left = useMotionTemplate`${pos}%`;
+  const thumbX = useTransform(pos, (p) => `${-p}%`);
+  const snapValue = useCallback2(
+    (next) => clamp(Math.round((next - min) / step) * step + min, min, max),
+    [min, max, step]
+  );
+  const commit = useCallback2(
+    (next) => {
+      const snapped = snapValue(next);
+      if (!controlled) setInternal(snapped);
+      onValueChange?.(snapped);
+    },
+    [controlled, onValueChange, snapValue]
+  );
+  const valueFromX = useCallback2(
+    (clientX) => {
+      const rect = trackRef.current?.getBoundingClientRect();
+      if (!rect) return committedValue;
+      const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
+      return min + ratio * (max - min);
+    },
+    [committedValue, min, max]
+  );
+  const trackDragValue = useCallback2((next) => {
+    dragValueRef.current = next;
+    setDragValue(next);
+  }, []);
+  const onPointerDown = useCallback2(
+    (event) => {
+      if (disabled) return;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setActive(true);
+      trackDragValue(snapValue(valueFromX(event.clientX)));
+    },
+    [disabled, valueFromX, snapValue, trackDragValue]
+  );
+  const onPointerMove = useCallback2(
+    (event) => {
+      if (!active || disabled) return;
+      trackDragValue(snapValue(valueFromX(event.clientX)));
+    },
+    [active, disabled, valueFromX, snapValue, trackDragValue]
+  );
+  const endDrag = useCallback2(
+    (event) => {
+      event.currentTarget.releasePointerCapture?.(event.pointerId);
+      setActive(false);
+      const pending = dragValueRef.current;
+      trackDragValue(null);
+      if (pending !== null) commit(pending);
+    },
+    [commit, trackDragValue]
+  );
+  const onKeyDown = useCallback2(
+    (event) => {
+      if (disabled) return;
+      const map = {
+        ArrowRight: committedValue + step,
+        ArrowUp: committedValue + step,
+        ArrowLeft: committedValue - step,
+        ArrowDown: committedValue - step,
+        Home: min,
+        End: max
+      };
+      if (event.key in map) {
+        event.preventDefault();
+        commit(map[event.key]);
+      }
+    },
+    [disabled, committedValue, step, min, max, commit]
+  );
+  const valueLabel = formatValue ? formatValue(current) : String(current);
+  return /* @__PURE__ */ jsx3(LazyMotion2, { features: domAnimation, children: /* @__PURE__ */ jsxs3("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx3("div", { className: "mb-1.5 flex justify-end", children: /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-foreground tabular-nums", children: valueLabel }) }),
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref: trackRef,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+        className: cn(
+          "relative flex h-10 w-full touch-none select-none items-center overflow-hidden rounded-lg bg-muted",
+          disabled ? "pointer-events-none opacity-50" : "cursor-grab active:cursor-grabbing"
+        ),
+        children: [
+          /* @__PURE__ */ jsx3(m2.div, { className: "absolute inset-y-0 left-0 overflow-hidden", style: { width: left }, children: isMaxed ? /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: "absolute inset-0",
+              style: { backgroundImage: fillGradient },
+              children: /* @__PURE__ */ jsx3(
+                m2.div,
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.85) 1.3px, transparent 1.3px)",
+                    backgroundSize: "10px 10px"
+                  },
+                  animate: reduce ? void 0 : { backgroundPositionX: ["0px", "10px"] },
+                  transition: { duration: dotDriftDuration, repeat: Infinity, ease: "linear" }
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 bg-foreground/15" }) }),
+          /* @__PURE__ */ jsx3("div", { className: "pointer-events-none absolute inset-x-2 inset-y-0", children: steps.map((tick) => {
+            const tp = (tick.value - min) / (max - min) * 100;
+            return /* @__PURE__ */ jsx3(
+              "span",
+              {
+                className: cn(
+                  "absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",
+                  isMaxed ? "size-1.5 bg-white shadow-[0_0_0_1.5px_rgba(0,0,0,0.35)]" : "size-1 bg-foreground/25"
+                ),
+                style: { left: `${tp}%` }
+              },
+              tick.value
+            );
+          }) }),
+          isMaxed && !reduce && /* @__PURE__ */ jsx3(
+            m2.div,
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute top-1/2 h-5 w-1.5 rounded-sm",
+              style: { left, x: thumbX, y: "-50%", boxShadow: `0 0 9px 3px ${glowColor}` },
+              animate: { opacity: [0.25, 0.9, 0.25], scale: [1, 1.15, 1] },
+              transition: { duration: glowDuration, repeat: Infinity, ease: "easeInOut", delay: seed * 0.5 }
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            m2.div,
+            {
+              id,
+              role: "slider",
+              tabIndex: disabled ? -1 : 0,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-valuemin": min,
+              "aria-valuemax": max,
+              "aria-valuenow": Math.round(current),
+              "aria-valuetext": valueLabel,
+              "aria-disabled": disabled || void 0,
+              onKeyDown,
+              animate: reduce ? void 0 : { scaleY: active ? 1.35 : 1 },
+              transition: SPRING_BOUNCY,
+              className: cn(
+                "absolute top-1/2 h-5 w-1.5 rounded-sm bg-foreground shadow-sm outline-none ring-foreground/30 focus-visible:ring-4",
+                // Background-colored ring keeps the thumb legible against the accent fill at any position.
+                isMaxed && "ring-2 ring-background"
+              ),
+              style: { left, x: thumbX, y: "-50%" }
+            }
+          )
+        ]
+      }
+    ),
+    steps.length > 0 && /* @__PURE__ */ jsx3("div", { className: "relative mt-1.5 h-4", children: /* @__PURE__ */ jsx3("div", { className: "absolute inset-x-2 inset-y-0", children: steps.map((tick, index) => {
+      const isFirst = index === 0;
+      const isLast = index === steps.length - 1;
+      const tp = (tick.value - min) / (max - min) * 100;
+      return /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: cn(
+            "absolute text-[10px] font-medium text-muted-foreground",
+            isFirst && "left-0",
+            isLast && "right-0",
+            !isFirst && !isLast && "-translate-x-1/2"
+          ),
+          style: !isFirst && !isLast ? { left: `${tp}%` } : void 0,
+          children: tick.label
+        },
+        tick.value
+      );
+    }) }) })
+  ] }) });
+}
+
+// src/components/motion/tabs.tsx
+import { LazyMotion as LazyMotion3, m as m3, domMax as domMax2, MotionConfig, useReducedMotion as useReducedMotion4 } from "motion/react";
+import {
+  createContext as createContext2,
+  useCallback as useCallback3,
+  useContext,
+  useId as useId2,
+  useMemo as useMemo3,
+  useState as useState3
+} from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var TabsCtx = createContext2(null);
+function useTabs() {
+  const ctx = useContext(TabsCtx);
+  if (!ctx) throw new Error("Tabs.* must be used inside <Tabs>");
+  return ctx;
+}
+var transition = {
+  type: "spring",
+  stiffness: 170,
+  damping: 24,
+  mass: 1.2
+};
+function Tabs({
+  defaultValue,
+  value,
+  onValueChange,
+  variant = "pill",
+  children,
+  className
+}) {
+  const [internal, setInternal] = useState3(defaultValue ?? "");
+  const layoutId = useId2();
+  const reduce = useReducedMotion4();
+  const controlled = value !== void 0;
+  const current = controlled ? value : internal;
+  const setValue = useCallback3(
+    (v) => {
+      if (!controlled) setInternal(v);
+      onValueChange?.(v);
+    },
+    [controlled, onValueChange]
+  );
+  const ctx = useMemo3(
+    () => ({ value: current, setValue, layoutId, variant }),
+    [current, setValue, layoutId, variant]
+  );
+  return /* @__PURE__ */ jsx4(MotionConfig, { transition: reduce ? { duration: 0 } : transition, children: /* @__PURE__ */ jsx4(TabsCtx.Provider, { value: ctx, children: /* @__PURE__ */ jsx4(LazyMotion3, { features: domMax2, children: /* @__PURE__ */ jsx4(m3.div, { layoutRoot: true, className, children }) }) }) });
+}
+var listClasses = {
+  pill: "inline-flex items-center gap-1 rounded-full bg-card p-1",
+  underline: "inline-flex items-center gap-1 border-b border-border",
+  segment: "inline-flex items-center gap-0 rounded-md border border-ui-line bg-ui-fill/40 p-0.5"
+};
+function TabsList({ children, className }) {
+  const { variant } = useTabs();
+  return /* @__PURE__ */ jsx4("div", { role: "tablist", className: cn(listClasses[variant], className), children });
+}
+function TabsTrigger({
+  value,
+  children,
+  className,
+  indicatorClassName
+}) {
+  const { value: current, setValue, layoutId, variant } = useTabs();
+  const active = current === value;
+  if (variant === "underline") {
+    return /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": active,
+        onClick: () => setValue(value),
+        className: cn(
+          "relative isolate px-3 pb-2.5 pt-1 -mb-px text-sm font-medium transition-colors min-h-[44px] inline-flex items-center",
+          active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
+          className
+        ),
+        children: [
+          children,
+          active ? /* @__PURE__ */ jsx4(
+            m3.span,
+            {
+              layoutId,
+              className: cn("absolute -bottom-px left-0 right-0 h-px bg-primary", indicatorClassName)
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+  const isSegment = variant === "segment";
+  const radius = variant === "pill" ? "rounded-full" : "rounded-[5px]";
+  const indicatorBg = isSegment ? "bg-ui-base shadow-sm ring-1 ring-ui-line" : "bg-primary";
+  const activeText = isSegment ? "text-ui-strong" : "text-primary-foreground";
+  const inactiveText = isSegment ? "text-ui-subtle hover:text-ui-default" : "text-muted-foreground hover:text-foreground";
+  return /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+    active ? /* @__PURE__ */ jsx4(
+      m3.span,
+      {
+        layoutId,
+        style: { borderRadius: variant === "pill" ? 9999 : 5 },
+        className: cn("absolute inset-0", indicatorBg, radius, indicatorClassName)
+      }
+    ) : null,
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": active,
+        onClick: () => setValue(value),
+        className: cn(
+          "relative z-10 inline-flex items-center justify-center whitespace-nowrap bg-transparent px-3.5 py-1.5 text-sm font-medium capitalize transition-colors outline-none",
+          active ? activeText : inactiveText,
+          radius,
+          className
+        ),
+        children
+      }
+    )
+  ] });
+}
+export {
+  SharedLayoutBg,
+  SmoothScroll,
+  SteppedSlider,
+  Tabs,
+  TabsList,
+  TabsTrigger
+};
+//# sourceMappingURL=index.js.map