@timmbr/ui 1.11.1 → 1.13.0

package/dist/components/Inline/Inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,oFAoDlB,CAAC"}
+{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,oFAqDlB,CAAC"}

package/dist/components/Inline/Inline.js

@@ -17,11 +17,12 @@ const Inline = React.forwardRef(
     justify = "start",
     wrap = true,
     divider,
+    as,
     asChild = false,
     children,
     ...props
   }, ref) => {
-    const Component = asChild ? Slot : "div";
+    const Component = asChild ? Slot : as ?? "div";
     const gapClass = formatGap(gap);
     const renderChildren = () => {
       if (!divider) return children;

package/dist/components/Inline/Inline.types.d.ts

@@ -14,6 +14,11 @@ export interface InlineProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * Optional divider element rendered between each inline child.
      */
     divider?: React.ReactNode;
+    /**
+     * Renders as a different HTML element or component while keeping Inline styles.
+     * e.g. `as="nav"`, `as="footer"`. Ignored when `asChild` is true.
+     */
+    as?: React.ElementType;
     /**
      * If true, renders child element via Radix Slot.
      */

package/dist/components/Inline/Inline.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Inline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EACvD,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC;IAC7B;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,8DAA8D;IAC9D,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"Inline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EACvD,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC;IAC7B;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,8DAA8D;IAC9D,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/ScrollRail/ScrollRail.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { ScrollRailProps } from './ScrollRail.types';
+export declare const ScrollRail: React.ForwardRefExoticComponent<ScrollRailProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ScrollRail.d.ts.map

package/dist/components/ScrollRail/ScrollRail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollRail.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollRail/ScrollRail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAI1D,eAAO,MAAM,UAAU,wFA+GtB,CAAC"}

package/dist/components/ScrollRail/ScrollRail.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { tapGestures, hoverGestures, Presence, motion, fadeVariants } from '@timmbr/motion';
+import { scrollRailVariants, scrollRailChevronVariants, scrollRailWrapperVariants } from './ScrollRail.styles.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const SCROLL_THRESHOLD = 4;
+const ScrollRail = React.forwardRef(
+  ({
+    gap,
+    scrollAmount,
+    hideChevrons = false,
+    labelPrev = "Scroll left",
+    labelNext = "Scroll right",
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const globalMotion = useGlobalAnimation();
+    const trackRef = React.useRef(null);
+    const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+    const [canScrollRight, setCanScrollRight] = React.useState(false);
+    const updateScrollState = React.useCallback(() => {
+      const t = trackRef.current;
+      if (!t) return;
+      setCanScrollLeft(t.scrollLeft > SCROLL_THRESHOLD);
+      setCanScrollRight(t.scrollLeft + t.clientWidth < t.scrollWidth - SCROLL_THRESHOLD);
+    }, []);
+    React.useLayoutEffect(() => {
+      updateScrollState();
+    }, [updateScrollState]);
+    React.useEffect(() => {
+      const t = trackRef.current;
+      if (!t || typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(updateScrollState);
+      ro.observe(t);
+      return () => ro.disconnect();
+    }, [updateScrollState]);
+    const getScrollAmount = () => scrollAmount ?? (trackRef.current?.clientWidth ?? 320) * 0.8;
+    const gestureProps = globalMotion ? { whileHover: hoverGestures.scale, whileTap: tapGestures.compress } : {};
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "scroll-rail",
+        className: cn(scrollRailWrapperVariants(), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: trackRef,
+              "data-slot": "scroll-rail-track",
+              className: scrollRailVariants({ gap }),
+              onScroll: updateScrollState,
+              children
+            }
+          ),
+          !hideChevrons && /* @__PURE__ */ jsx(Presence, { initial: false, children: canScrollLeft && /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              type: "button",
+              "aria-label": labelPrev,
+              "data-slot": "scroll-rail-prev",
+              className: scrollRailChevronVariants({ side: "left" }),
+              initial: "hidden",
+              animate: "visible",
+              exit: "exit",
+              variants: fadeVariants,
+              onClick: () => trackRef.current?.scrollBy({ left: -getScrollAmount(), behavior: "smooth" }),
+              ...gestureProps,
+              children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "size-5" })
+            },
+            "scroll-rail-prev"
+          ) }),
+          !hideChevrons && /* @__PURE__ */ jsx(Presence, { initial: false, children: canScrollRight && /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              type: "button",
+              "aria-label": labelNext,
+              "data-slot": "scroll-rail-next",
+              className: scrollRailChevronVariants({ side: "right" }),
+              initial: "hidden",
+              animate: "visible",
+              exit: "exit",
+              variants: fadeVariants,
+              onClick: () => trackRef.current?.scrollBy({ left: getScrollAmount(), behavior: "smooth" }),
+              ...gestureProps,
+              children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-5" })
+            },
+            "scroll-rail-next"
+          ) })
+        ]
+      }
+    );
+  }
+);
+ScrollRail.displayName = "ScrollRail";
+
+export { ScrollRail };

package/dist/components/ScrollRail/ScrollRail.styles.d.ts

@@ -0,0 +1,10 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const scrollRailWrapperVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const scrollRailVariants: (props?: ({
+    gap?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const scrollRailChevronVariants: (props?: ({
+    side?: "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ScrollRailVariants = VariantProps<typeof scrollRailVariants>;
+//# sourceMappingURL=ScrollRail.styles.d.ts.map

package/dist/components/ScrollRail/ScrollRail.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollRail.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollRail/ScrollRail.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,yBAAyB,oFAAyB,CAAC;AAEhE,eAAO,MAAM,kBAAkB;;8EAc9B,CAAC;AAEF,eAAO,MAAM,yBAAyB;;8EAUrC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/ScrollRail/ScrollRail.styles.js

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+
+const scrollRailWrapperVariants = cva("relative w-full");
+const scrollRailVariants = cva(
+  "w-full overflow-x-auto pb-4 pt-1 px-1 flex snap-x snap-mandatory scroll-smooth focus:outline-none [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+  {
+    variants: {
+      gap: {
+        sm: "gap-3",
+        md: "gap-5 sm:gap-6",
+        lg: "gap-6 sm:gap-8"
+      }
+    },
+    defaultVariants: {
+      gap: "md"
+    }
+  }
+);
+const scrollRailChevronVariants = cva(
+  "absolute top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full bg-grey-50/70 text-grey-950 shadow-sm backdrop-blur-sm transition-colors hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:flex",
+  {
+    variants: {
+      side: {
+        left: "left-2",
+        right: "right-2"
+      }
+    }
+  }
+);
+
+export { scrollRailChevronVariants, scrollRailVariants, scrollRailWrapperVariants };

package/dist/components/ScrollRail/ScrollRail.types.d.ts

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import type { ScrollRailVariants } from './ScrollRail.styles';
+export interface ScrollRailProps extends React.HTMLAttributes<HTMLDivElement>, ScrollRailVariants {
+    gap?: 'sm' | 'md' | 'lg';
+    /** Override px amount scrolled per chevron click. Default: 80% of track clientWidth. */
+    scrollAmount?: number;
+    /** Suppress chevrons entirely (touch-only contexts). */
+    hideChevrons?: boolean;
+    /** Accessible label for the left button. @default 'Scroll left' */
+    labelPrev?: string;
+    /** Accessible label for the right button. @default 'Scroll right' */
+    labelNext?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+//# sourceMappingURL=ScrollRail.types.d.ts.map

package/dist/components/ScrollRail/ScrollRail.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollRail.types.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollRail/ScrollRail.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,kBAAkB;IACpB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,wFAAwF;IACxF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/ScrollRail/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ScrollRail';
+export * from './ScrollRail.styles';
+export * from './ScrollRail.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ScrollRail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollRail/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}

package/dist/components/Stack/Stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAqBhD,eAAO,MAAM,KAAK,mFA4CjB,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAqBhD,eAAO,MAAM,KAAK,mFA6CjB,CAAC"}

package/dist/components/Stack/Stack.js

@@ -29,11 +29,12 @@ const Stack = React.forwardRef(
     align = "stretch",
     justify = "start",
     divider,
+    as,
     asChild = false,
     children,
     ...props
   }, ref) => {
-    const Component = asChild ? Slot : "div";
+    const Component = asChild ? Slot : as ?? "div";
     const gapClass = formatGap(gap);
     const renderChildren = () => {
       if (!divider) return children;

package/dist/components/Stack/Stack.types.d.ts

@@ -22,6 +22,11 @@ export interface StackProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
      * Optional divider element rendered between each child in the stack.
      */
     divider?: React.ReactNode;
+    /**
+     * Renders as a different HTML element or component while keeping Stack styles.
+     * e.g. `as="article"`, `as="section"`, `as="header"`. Ignored when `asChild` is true.
+     */
+    as?: React.ElementType;
     /**
      * If true, renders child element via Radix Slot.
      */

package/dist/components/Stack/Stack.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,qDAAqD;AACrD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACxB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACtB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACtB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CACvB;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EACvD,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC;IAC5B;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,mBAAmB,CAAC;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"Stack.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,qDAAqD;AACrD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACxB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACtB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACtB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CACvB;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EACvD,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC;IAC5B;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,mBAAmB,CAAC;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/ZoneProgress/ZoneProgress.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare function ZoneProgress(): React.JSX.Element;
+export declare namespace ZoneProgress {
+    var displayName: string;
+}
+//# sourceMappingURL=ZoneProgress.d.ts.map

package/dist/components/ZoneProgress/ZoneProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZoneProgress.d.ts","sourceRoot":"","sources":["../../../src/components/ZoneProgress/ZoneProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0B/B,wBAAgB,YAAY,sBA2F3B;yBA3Fe,YAAY"}

package/dist/components/ZoneProgress/ZoneProgress.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { usePathname } from 'next/navigation';
+import { PageProgress } from '../PageProgress/PageProgress.js';
+
+function trickle(p) {
+  if (p < 20) return p + 5;
+  if (p < 50) return p + 3;
+  if (p < 70) return p + 2;
+  if (p < 85) return p + 1;
+  return p;
+}
+function ZoneProgress() {
+  const pathname = usePathname();
+  const [loading, setLoading] = React.useState(false);
+  const [progress, setProgress] = React.useState(void 0);
+  const tickRef = React.useRef(null);
+  const committedPathnameRef = React.useRef(pathname);
+  React.useLayoutEffect(() => {
+    committedPathnameRef.current = pathname;
+  });
+  const startProgress = React.useCallback(() => {
+    if (tickRef.current) clearInterval(tickRef.current);
+    setLoading(true);
+    setProgress(5);
+    tickRef.current = setInterval(() => {
+      setProgress((p) => p !== void 0 ? trickle(p) : p);
+    }, 200);
+  }, []);
+  const finishProgress = React.useCallback(() => {
+    if (tickRef.current) {
+      clearInterval(tickRef.current);
+      tickRef.current = null;
+    }
+    setProgress(100);
+    setTimeout(() => {
+      setLoading(false);
+      setProgress(void 0);
+    }, 400);
+  }, []);
+  React.useEffect(() => {
+    const handleClick = (e) => {
+      const anchor = e.target.closest("a");
+      if (!(anchor instanceof HTMLAnchorElement)) return;
+      if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+      if (anchor.target === "_blank") return;
+      const href = anchor.getAttribute("href");
+      if (!href || href.startsWith("#") || href.startsWith("javascript:")) return;
+      try {
+        const url = new URL(href, location.origin);
+        if (url.origin !== location.origin) return;
+        if (url.pathname + url.search === location.pathname + location.search) return;
+      } catch {
+        return;
+      }
+      startProgress();
+    };
+    const handlePopState = () => {
+      if (location.pathname !== committedPathnameRef.current) {
+        startProgress();
+      }
+    };
+    document.addEventListener("click", handleClick);
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      document.removeEventListener("click", handleClick);
+      window.removeEventListener("popstate", handlePopState);
+      if (tickRef.current) clearInterval(tickRef.current);
+    };
+  }, [startProgress]);
+  React.useEffect(() => {
+    if (loading) finishProgress();
+  }, [pathname, finishProgress]);
+  React.useEffect(() => {
+    const onHover = (e) => {
+      const a = e.target.closest('a[data-cross-zone="true"]');
+      if (!(a instanceof HTMLAnchorElement)) return;
+      const { href } = a;
+      if (!href) return;
+      const escaped = href.replace(/"/g, '\\"');
+      if (!document.querySelector(`link[rel="prefetch"][href="${escaped}"]`)) {
+        const el = document.createElement("link");
+        el.rel = "prefetch";
+        el.href = href;
+        document.head.appendChild(el);
+      }
+    };
+    document.addEventListener("mouseover", onHover);
+    return () => document.removeEventListener("mouseover", onHover);
+  }, []);
+  return /* @__PURE__ */ jsx(PageProgress, { loading, progress });
+}
+ZoneProgress.displayName = "ZoneProgress";
+
+export { ZoneProgress };

package/dist/components/ZoneProgress/index.d.ts

@@ -0,0 +1,2 @@
+export { ZoneProgress } from './ZoneProgress';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ZoneProgress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ZoneProgress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/Grid';
 export * from './components/Center';
 export * from './components/Stack';
 export * from './components/Inline';
+export * from './components/ScrollRail';
 export * from './components/Input';
 export * from './components/Textarea';
 export * from './components/Select';
@@ -49,6 +50,7 @@ export * from './components/Text';
 export * from './components/Alert';
 export * from './components/Progress';
 export * from './components/PageProgress';
+export * from './components/ZoneProgress';
 export * from './components/Spinner';
 export * from './components/Skeleton';
 export * from './components/EmptyState';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAC;AAC/B,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG3D,cAAc,aAAa,CAAC;AAG5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAC;AAC/B,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG3D,cAAc,aAAa,CAAC;AAG5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC"}

package/dist/index.js

@@ -81,6 +81,7 @@ export { RadioCard } from './components/RadioCard/RadioCard.js';
 export { RangeSlider } from './components/RangeSlider/RangeSlider.js';
 export { Rating } from './components/Rating/Rating.js';
 export { SNACKBAR_EXIT_MS, snackbar, snackbarStore } from './components/Snackbar/snackbarStore.js';
+export { ScrollRail } from './components/ScrollRail/ScrollRail.js';
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue } from './components/Select/Select.js';
 export { SideBarNavigation } from './components/SideBarNavigation/SideBarNavigation.js';
 export { SidebarBranding } from './components/SideBarNavigation/subcomponents/SidebarBranding.js';
@@ -113,6 +114,7 @@ export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastT
 export { ToastContainer } from './components/Toast/ToastContainer.js';
 export { Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from './components/Tooltip/Tooltip.js';
 export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.js';
+export { ZoneProgress } from './components/ZoneProgress/ZoneProgress.js';
 export { accordionContentVariants, accordionItemVariants, accordionTriggerVariants } from './components/Accordion/Accordion.styles.js';
 export { alertDialogBodyVariants, alertDialogContentVariants, alertDialogDescriptionVariants, alertDialogFooterVariants, alertDialogHeaderVariants, alertDialogMediaVariants, alertDialogOverlayVariants, alertDialogTitleVariants } from './components/AlertDialog/AlertDialog.styles.js';
 export { alertIconVariants, alertVariants } from './components/Alert/Alert.styles.js';
@@ -163,6 +165,7 @@ export { radioCardDotClass, radioCardMarkerClass, radioCardVariants } from './co
 export { radioIndicatorVariants, radioItemVariants } from './components/Radio/Radio.styles.js';
 export { rangeSliderRangeVariants, rangeSliderRootVariants, rangeSliderThumbVariants, rangeSliderTrackVariants } from './components/RangeSlider/RangeSlider.styles.js';
 export { ratingVariants } from './components/Rating/Rating.styles.js';
+export { scrollRailChevronVariants, scrollRailVariants, scrollRailWrapperVariants } from './components/ScrollRail/ScrollRail.styles.js';
 export { selectContentVariants, selectItemVariants, selectTriggerVariants } from './components/Select/Select.styles.js';
 export { skeletonVariants } from './components/Skeleton/Skeleton.styles.js';
 export { snackbarActionVariants, snackbarCloseVariants, snackbarHostVariants, snackbarIconVariants, snackbarVariants } from './components/Snackbar/Snackbar.styles.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmbr/ui",
-  "version": "1.11.1",
+  "version": "1.13.0",
   "description": "High-performance, Next.js App Router-compatible UI design system components for Timmbr",
   "type": "module",
   "main": "./dist/index.js",
@@ -44,8 +44,8 @@
     "input-otp": "^1.5.0",
     "@timmbr/icons": "1.6.0",
     "@timmbr/hooks": "1.1.0",
-    "@timmbr/utils": "1.6.0",
     "@timmbr/theme": "1.3.0",
+    "@timmbr/utils": "1.6.0",
     "@timmbr/motion": "1.2.5"
   },
   "peerDependencies": {