@spark-ui/components 13.1.4 → 13.2.0

package/dist/scrolling-list/index.mjs

@@ -1,415 +1,283 @@
-import {
-  IconButton
-} from "../chunk-DCXWGQVZ.mjs";
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
-import {
-  Button
-} from "../chunk-2YM6GKWW.mjs";
-import "../chunk-GAK4SC2F.mjs";
-import "../chunk-KEGAAGJW.mjs";
-import {
-  Slot
-} from "../chunk-6QCEPQ3U.mjs";
-
-// src/scrolling-list/ScrollingList.tsx
-import { useScrollOverflow } from "@spark-ui/hooks/use-scroll-overflow";
-import { cx } from "class-variance-authority";
-import {
-  createContext,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef
-} from "react";
-import { useSnapCarousel } from "react-snap-carousel";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ScrollingListContext = createContext(
+import { jsxs as V, jsx as c } from "react/jsx-runtime";
+import { useScrollOverflow as D } from "@spark-ui/hooks/use-scroll-overflow";
+import { cx as u } from "class-variance-authority";
+import { createContext as $, useRef as b, useCallback as j, useEffect as S, useLayoutEffect as K, useState as H, useContext as m, Children as W, cloneElement as q, isValidElement as G } from "react";
+import { useSnapCarousel as J } from "react-snap-carousel";
+import { a as M } from "../Slot-D2Bbf8Gw.mjs";
+import { ArrowVerticalRight as Q } from "@spark-ui/icons/ArrowVerticalRight";
+import { I as P } from "../Icon-Ck-dhfLd.mjs";
+import { I as L } from "../IconButton-C62-axzv.mjs";
+import { ArrowVerticalLeft as U } from "@spark-ui/icons/ArrowVerticalLeft";
+import { B as X } from "../Button-C3C0aixy.mjs";
+const d = $(
   null
-);
-var ScrollingList = ({
-  snapType = "none",
-  snapStop = "normal",
-  scrollBehavior = "smooth",
-  loop = false,
-  gap = 16,
-  withFade = false,
-  scrollPadding = 0,
-  children,
-  className,
-  ...rest
+), N = ({
+  snapType: s = "none",
+  snapStop: l = "normal",
+  scrollBehavior: e = "smooth",
+  loop: i = !1,
+  gap: o = 16,
+  withFade: n = !1,
+  scrollPadding: r = 0,
+  children: a,
+  className: p,
+  ...g
 }) => {
-  const scrollAreaRef = useRef(null);
-  const skipAnchorRef = useRef(null);
-  const snapCarouselAPI = useSnapCarousel();
-  const { overflow, refresh: refreshOverflow } = useScrollOverflow(scrollAreaRef, {
+  const t = b(null), f = b(null), h = J(), { overflow: F, refresh: y } = D(t, {
     precisionTreshold: 1
-  });
-  const { activePageIndex, pages, refresh } = snapCarouselAPI;
-  const visibleItems = pages[activePageIndex];
-  const visibleItemsRange = visibleItems ? [visibleItems[0] + 1, visibleItems[visibleItems.length - 1] + 1] : [0, 0];
-  const forceRefresh = useCallback(() => {
-    if (refresh && scrollAreaRef.current) {
-      setTimeout(() => {
-        refresh();
-      }, 0);
-    }
-  }, [refresh]);
-  useEffect(() => {
-    forceRefresh();
-  }, [children, forceRefresh]);
-  useLayoutEffect(() => {
-    if (scrollAreaRef.current) {
-      requestAnimationFrame(() => {
-        refreshOverflow();
-      });
-    }
-  }, [children, refreshOverflow]);
-  const skipKeyboardNavigation = () => {
-    skipAnchorRef.current?.focus();
-  };
-  const ctxValue = {
-    ...snapCarouselAPI,
-    snapType,
-    snapStop,
-    skipKeyboardNavigation,
-    scrollBehavior,
-    visibleItemsRange,
-    loop,
-    gap,
-    withFade,
-    scrollPadding,
-    scrollAreaRef,
-    overflow
+  }), { activePageIndex: E, pages: T, refresh: x } = h, v = T[E], O = v ? [v[0] + 1, v[v.length - 1] + 1] : [0, 0], w = j(() => {
+    x && t.current && setTimeout(() => {
+      x();
+    }, 0);
+  }, [x]);
+  S(() => {
+    w();
+  }, [a, w]), K(() => {
+    t.current && requestAnimationFrame(() => {
+      y();
+    });
+  }, [a, y]);
+  const z = {
+    ...h,
+    snapType: s,
+    snapStop: l,
+    skipKeyboardNavigation: () => {
+      f.current?.focus();
+    },
+    scrollBehavior: e,
+    visibleItemsRange: O,
+    loop: i,
+    gap: o,
+    withFade: n,
+    scrollPadding: r,
+    scrollAreaRef: t,
+    overflow: F
   };
-  return /* @__PURE__ */ jsxs(ScrollingListContext.Provider, { value: ctxValue, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ V(d.Provider, { value: z, children: [
+    /* @__PURE__ */ c(
       "div",
       {
         "data-spark-component": "scrolling-list",
-        className: cx(
+        className: u(
           "gap-lg group/scrolling-list relative flex flex-col default:w-full",
-          className
+          p
         ),
-        ...rest,
-        children
+        ...g,
+        children: a
       }
     ),
-    /* @__PURE__ */ jsx("span", { ref: skipAnchorRef, className: "size-0 overflow-hidden", tabIndex: -1 })
+    /* @__PURE__ */ c("span", { ref: f, className: "size-0 overflow-hidden", tabIndex: -1 })
   ] });
 };
-ScrollingList.displayName = "ScrollingList";
-
-// src/scrolling-list/ScrollingListControls.tsx
-import { cx as cx2 } from "class-variance-authority";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ScrollingListControls = ({
-  children,
-  visibility = "always",
-  className,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-spark-component": "scrolling-list-controls",
-      className: cx2(
-        "default:px-md pointer-events-none absolute inset-0 flex flex-row items-center justify-between overflow-hidden",
-        className
-      ),
-      style: {
-        "--scrolling-list-controls-opacity": visibility === "hover" ? "0" : "1"
-      },
-      "data-orientation": "horizontal",
-      ...rest,
-      children
-    }
-  );
-};
-ScrollingListControls.displayName = "ScrollingList.Controls";
-
-// src/scrolling-list/ScrollingListItem.tsx
-import { cx as cx3 } from "class-variance-authority";
-import { useContext, useRef as useRef2 } from "react";
-
-// src/scrolling-list/useFocusWithinScroll.tsx
-import { useEffect as useEffect2, useState } from "react";
-function useFocusWithinScroll(ref, scrollRef) {
-  const [isFocusWithin, setIsFocusWithin] = useState(false);
-  useEffect2(() => {
-    const handleFocusIn = (event) => {
-      setIsFocusWithin(true);
-      const focusedElement = event.target;
-      const scrollContainer = scrollRef.current;
-      if (focusedElement && scrollContainer) {
-        const focusRect = focusedElement.getBoundingClientRect();
-        const scrollRect = scrollContainer.getBoundingClientRect();
-        const isFullyVisible = focusRect.left >= scrollRect.left && focusRect.right <= scrollRect.right && focusRect.top >= scrollRect.top && focusRect.bottom <= scrollRect.bottom;
-        if (!isFullyVisible) {
-          focusedElement.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
-        }
-      }
-    };
-    const handleFocusOut = (event) => {
-      if (ref.current && !ref.current.contains(event.relatedTarget)) {
-        setIsFocusWithin(false);
-      }
-    };
-    const node = ref.current;
-    if (node) {
-      node.addEventListener("focusin", handleFocusIn);
-      node.addEventListener("focusout", handleFocusOut);
-    }
-    return () => {
-      if (node) {
-        node.removeEventListener("focusin", handleFocusIn);
-        node.removeEventListener("focusout", handleFocusOut);
+N.displayName = "ScrollingList";
+const I = ({
+  children: s,
+  visibility: l = "always",
+  className: e,
+  ...i
+}) => /* @__PURE__ */ c(
+  "div",
+  {
+    "data-spark-component": "scrolling-list-controls",
+    className: u(
+      "default:px-md pointer-events-none absolute inset-0 flex flex-row items-center justify-between overflow-hidden",
+      e
+    ),
+    style: {
+      "--scrolling-list-controls-opacity": l === "hover" ? "0" : "1"
+    },
+    "data-orientation": "horizontal",
+    ...i,
+    children: s
+  }
+);
+I.displayName = "ScrollingList.Controls";
+function Y(s, l) {
+  const [e, i] = H(!1);
+  return S(() => {
+    const o = (a) => {
+      i(!0);
+      const p = a.target, g = l.current;
+      if (p && g) {
+        const t = p.getBoundingClientRect(), f = g.getBoundingClientRect();
+        t.left >= f.left && t.right <= f.right && t.top >= f.top && t.bottom <= f.bottom || p.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
       }
+    }, n = (a) => {
+      s.current && !s.current.contains(a.relatedTarget) && i(!1);
+    }, r = s.current;
+    return r && (r.addEventListener("focusin", o), r.addEventListener("focusout", n)), () => {
+      r && (r.removeEventListener("focusin", o), r.removeEventListener("focusout", n));
     };
-  }, [ref, scrollRef]);
-  return isFocusWithin;
+  }, [s, l]), e;
 }
-
-// src/scrolling-list/ScrollingListItem.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var ScrollingListItem = ({
-  asChild = false,
-  children,
-  index = 0,
-  className = "",
-  ...rest
+const k = ({
+  asChild: s = !1,
+  children: l,
+  index: e = 0,
+  className: i = "",
+  ...o
 }) => {
-  const ctx = useContext(ScrollingListContext);
-  const itemRef = useRef2(null);
-  const isSnapPoint = ctx.snapPointIndexes.has(index);
-  useFocusWithinScroll(itemRef, ctx.scrollAreaRef);
-  const Component = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx3(
-    Component,
+  const n = m(d), r = b(null), a = n.snapPointIndexes.has(e);
+  return Y(r, n.scrollAreaRef), /* @__PURE__ */ c(
+    s ? M : "div",
     {
       "data-spark-component": "scrolling-list-item",
       role: "listitem",
-      ref: itemRef,
-      className: cx3(
+      ref: r,
+      className: u(
         "default:w-auto default:shrink-0",
         {
-          "snap-start": isSnapPoint,
-          "snap-normal": isSnapPoint && ctx.snapStop === "normal",
-          "snap-always": isSnapPoint && ctx.snapStop === "always"
+          "snap-start": a,
+          "snap-normal": a && n.snapStop === "normal",
+          "snap-always": a && n.snapStop === "always"
         },
-        className
+        i
       ),
-      ...rest,
-      children
+      ...o,
+      children: l
     }
   );
 };
-ScrollingListItem.displayName = "ScrollingList.Item";
-
-// src/scrolling-list/ScrollingListItems.tsx
-import { cx as cx4 } from "class-variance-authority";
-import {
-  Children,
-  cloneElement,
-  isValidElement,
-  useContext as useContext2
-} from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-function mergeRefs(...refs) {
-  return (value) => {
-    refs.forEach((ref) => {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref && typeof ref === "object" && "current" in ref) {
-        ;
-        ref.current = value;
-      }
+k.displayName = "ScrollingList.Item";
+function Z(...s) {
+  return (l) => {
+    s.forEach((e) => {
+      typeof e == "function" ? e(l) : e && typeof e == "object" && "current" in e && (e.current = l);
     });
   };
 }
-var ScrollingListItems = ({ children, ref, className = "", ...rest }) => {
-  const ctx = useContext2(ScrollingListContext);
-  const snapConfig = {
+const B = ({ children: s, ref: l, className: e = "", ...i }) => {
+  const o = m(d), n = {
     mandatory: "x mandatory",
     proximity: "x proximity",
     none: "none"
-  };
-  const handleLeftArrow = (event) => {
-    if (!ctx.loop && !ctx.hasPrevPage) return;
-    event.preventDefault();
-    ctx.goTo(ctx.hasPrevPage ? ctx.activePageIndex - 1 : ctx.pages.length - 1, {
-      behavior: ctx.scrollBehavior
-    });
-  };
-  const handleRightArrow = (event) => {
-    if (!ctx.loop && !ctx.hasNextPage) return;
-    event.preventDefault();
-    ctx.goTo(ctx.hasNextPage ? ctx.activePageIndex + 1 : 0, { behavior: ctx.scrollBehavior });
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "ArrowLeft") {
-      handleLeftArrow(event);
-    }
-    if (event.key === "ArrowRight") {
-      handleRightArrow(event);
-    }
-  };
-  const inlineStyles = {
-    scrollSnapType: snapConfig[ctx.snapType],
+  }, r = (t) => {
+    !o.loop && !o.hasPrevPage || (t.preventDefault(), o.goTo(o.hasPrevPage ? o.activePageIndex - 1 : o.pages.length - 1, {
+      behavior: o.scrollBehavior
+    }));
+  }, a = (t) => {
+    !o.loop && !o.hasNextPage || (t.preventDefault(), o.goTo(o.hasNextPage ? o.activePageIndex + 1 : 0, { behavior: o.scrollBehavior }));
+  }, p = (t) => {
+    t.key === "ArrowLeft" && r(t), t.key === "ArrowRight" && a(t);
+  }, g = {
+    scrollSnapType: n[o.snapType],
     scrollPaddingInline: "var(--scrolling-list-px)",
-    "--scrolling-list-px": `${ctx.scrollPadding}px`,
-    "--scrolling-list-gap": `${ctx.gap}px`,
-    ...ctx.withFade && {
+    "--scrolling-list-px": `${o.scrollPadding}px`,
+    "--scrolling-list-gap": `${o.gap}px`,
+    ...o.withFade && {
       maskImage: "linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
-      maskSize: `calc(100% + ${ctx.overflow.left ? "0px" : "44px"} + ${ctx.overflow.right ? "0px" : "44px"}) 100%`,
-      maskPosition: `${ctx.overflow.left ? "0px" : "-44px"} 0`
+      maskSize: `calc(100% + ${o.overflow.left ? "0px" : "44px"} + ${o.overflow.right ? "0px" : "44px"}) 100%`,
+      maskPosition: `${o.overflow.left ? "0px" : "-44px"} 0`
     }
   };
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ c(
     "div",
     {
       "data-spark-component": "scrolling-list-items",
       id: "scrolling-list-items",
       role: "list",
-      className: cx4(
+      className: u(
         "relative transition-all duration-300",
         "u-no-scrollbar overflow-x-auto scroll-smooth",
         "w-full gap-(--scrolling-list-gap) default:flex default:flex-row",
         "focus-visible:u-outline",
-        className
+        e
       ),
-      ref: mergeRefs(ctx.scrollAreaRef, ctx.scrollRef, ref),
-      style: inlineStyles,
-      onKeyDown: handleKeyDown,
-      ...rest,
-      children: Children.map(
-        children,
-        (child, index) => isValidElement(child) ? cloneElement(child, { index }) : child
+      ref: Z(o.scrollAreaRef, o.scrollRef, l),
+      style: g,
+      onKeyDown: p,
+      ...i,
+      children: W.map(
+        s,
+        (t, f) => G(t) ? q(t, { index: f }) : t
       )
     }
   );
 };
-ScrollingListItems.displayName = "ScrollingList.Items";
-
-// src/scrolling-list/ScrollingListNextButton.tsx
-import { ArrowVerticalRight } from "@spark-ui/icons/ArrowVerticalRight";
-import { cx as cx5 } from "class-variance-authority";
-import { useContext as useContext3 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var ScrollingListNextButton = ({ "aria-label": ariaLabel, ...rest }) => {
-  const ctx = useContext3(ScrollingListContext);
-  const handleNextPage = () => {
-    if (ctx.hasNextPage) {
-      ctx.next({ behavior: ctx.scrollBehavior });
-    } else {
-      ctx.goTo(0, { behavior: ctx.scrollBehavior });
-    }
-  };
-  const listHasOverflow = ctx.overflow.left || ctx.overflow.right;
-  const isDisabled = !listHasOverflow || !ctx.loop && !ctx.overflow.right;
-  return /* @__PURE__ */ jsx5(
-    IconButton,
+B.displayName = "ScrollingList.Items";
+const C = ({ "aria-label": s, ...l }) => {
+  const e = m(d), i = () => {
+    e.hasNextPage ? e.next({ behavior: e.scrollBehavior }) : e.goTo(0, { behavior: e.scrollBehavior });
+  }, n = !(e.overflow.left || e.overflow.right) || !e.loop && !e.overflow.right;
+  return /* @__PURE__ */ c(
+    L,
     {
       "data-spark-component": "scrolling-list-next-button",
       size: "sm",
       intent: "surface",
       design: "filled",
-      className: cx5(
+      className: u(
         "pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible",
         "group-hover/scrolling-list:opacity-none focus-visible:opacity-none"
       ),
-      onClick: handleNextPage,
-      disabled: isDisabled,
-      "aria-label": ariaLabel,
+      onClick: i,
+      disabled: n,
+      "aria-label": s,
       "aria-controls": "scrolling-list-items",
-      ...rest,
-      children: /* @__PURE__ */ jsx5(Icon, { children: /* @__PURE__ */ jsx5(ArrowVerticalRight, {}) })
+      ...l,
+      children: /* @__PURE__ */ c(P, { children: /* @__PURE__ */ c(Q, {}) })
     }
   );
 };
-ScrollingListNextButton.displayName = "ScrollingList.NextButton";
-
-// src/scrolling-list/ScrollingListPrevButton.tsx
-import { ArrowVerticalLeft } from "@spark-ui/icons/ArrowVerticalLeft";
-import { cx as cx6 } from "class-variance-authority";
-import { useContext as useContext4 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var ScrollingListPrevButton = ({
-  "aria-label": ariaLabel,
-  ...rest
+C.displayName = "ScrollingList.NextButton";
+const R = ({
+  "aria-label": s,
+  ...l
 }) => {
-  const ctx = useContext4(ScrollingListContext);
-  const handlePrevPage = () => {
-    const shouldSnapFirstPage = ctx.activePageIndex === 0 && (ctx.scrollAreaRef.current?.scrollLeft || 0) > 0;
-    if (shouldSnapFirstPage) {
-      ctx.goTo(0, { behavior: ctx.scrollBehavior });
-    } else if (ctx.hasPrevPage) {
-      ctx.prev({ behavior: ctx.scrollBehavior });
-    } else {
-      ctx.goTo(ctx.pages.length - 1, { behavior: ctx.scrollBehavior });
-    }
-  };
-  const listHasOverflow = ctx.overflow.left || ctx.overflow.right;
-  const isDisabled = !listHasOverflow || !ctx.loop && !ctx.overflow.left;
-  return /* @__PURE__ */ jsx6(
-    IconButton,
+  const e = m(d), i = () => {
+    e.activePageIndex === 0 && (e.scrollAreaRef.current?.scrollLeft || 0) > 0 ? e.goTo(0, { behavior: e.scrollBehavior }) : e.hasPrevPage ? e.prev({ behavior: e.scrollBehavior }) : e.goTo(e.pages.length - 1, { behavior: e.scrollBehavior });
+  }, n = !(e.overflow.left || e.overflow.right) || !e.loop && !e.overflow.left;
+  return /* @__PURE__ */ c(
+    L,
     {
       "data-spark-component": "scrolling-list-prev-button",
       size: "sm",
       intent: "surface",
       design: "filled",
-      className: cx6(
+      className: u(
         "pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible",
         "group-hover/scrolling-list:opacity-none focus-visible:opacity-none"
       ),
-      onClick: handlePrevPage,
-      disabled: isDisabled,
-      "aria-label": ariaLabel,
+      onClick: i,
+      disabled: n,
+      "aria-label": s,
       "aria-controls": "scrolling-list-items",
-      ...rest,
-      children: /* @__PURE__ */ jsx6(Icon, { children: /* @__PURE__ */ jsx6(ArrowVerticalLeft, {}) })
+      ...l,
+      children: /* @__PURE__ */ c(P, { children: /* @__PURE__ */ c(U, {}) })
     }
   );
 };
-ScrollingListPrevButton.displayName = "ScrollingList.PrevButton";
-
-// src/scrolling-list/ScrollingListSkipButton.tsx
-import { cx as cx7 } from "class-variance-authority";
-import { useContext as useContext5 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var ScrollingListSkipButton = ({ children, ...rest }) => {
-  const ctx = useContext5(ScrollingListContext);
-  return /* @__PURE__ */ jsx7(
-    Button,
+R.displayName = "ScrollingList.PrevButton";
+const A = ({ children: s, ...l }) => {
+  const e = m(d);
+  return /* @__PURE__ */ c(
+    X,
     {
       type: "button",
       design: "tinted",
       intent: "surface",
       tabIndex: 0,
-      className: cx7(
+      className: u(
         "z-raised absolute top-1/2 left-0 -translate-y-1/2",
         "not-focus-visible:pointer-events-none not-focus-visible:size-0 not-focus-visible:opacity-0"
       ),
-      onClick: ctx.skipKeyboardNavigation,
-      ...rest,
-      children
+      onClick: e.skipKeyboardNavigation,
+      ...l,
+      children: s
     }
   );
 };
-ScrollingListSkipButton.displayName = "ScrollingList.SkipButton";
-
-// src/scrolling-list/index.ts
-var ScrollingList2 = Object.assign(ScrollingList, {
-  Controls: ScrollingListControls,
-  NextButton: ScrollingListNextButton,
-  PrevButton: ScrollingListPrevButton,
-  Item: ScrollingListItem,
-  Items: ScrollingListItems,
-  SkipButton: ScrollingListSkipButton
+A.displayName = "ScrollingList.SkipButton";
+const _ = Object.assign(N, {
+  Controls: I,
+  NextButton: C,
+  PrevButton: R,
+  Item: k,
+  Items: B,
+  SkipButton: A
 });
-ScrollingList2.displayName = "ScrollingList";
+_.displayName = "ScrollingList";
 export {
-  ScrollingList2 as ScrollingList
+  _ as ScrollingList
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map