@spark-ui/components 13.1.4 → 13.2.0

package/dist/scrolling-list/index.js

@@ -1,1428 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/scrolling-list/index.ts
-var scrolling_list_exports = {};
-__export(scrolling_list_exports, {
-  ScrollingList: () => ScrollingList2
-});
-module.exports = __toCommonJS(scrolling_list_exports);
-
-// src/scrolling-list/ScrollingList.tsx
-var import_use_scroll_overflow = require("@spark-ui/hooks/use-scroll-overflow");
-var import_class_variance_authority = require("class-variance-authority");
-var import_react = require("react");
-var import_react_snap_carousel = require("react-snap-carousel");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ScrollingListContext = (0, import_react.createContext)(
-  null
-);
-var ScrollingList = ({
-  snapType = "none",
-  snapStop = "normal",
-  scrollBehavior = "smooth",
-  loop = false,
-  gap = 16,
-  withFade = false,
-  scrollPadding = 0,
-  children,
-  className,
-  ...rest
-}) => {
-  const scrollAreaRef = (0, import_react.useRef)(null);
-  const skipAnchorRef = (0, import_react.useRef)(null);
-  const snapCarouselAPI = (0, import_react_snap_carousel.useSnapCarousel)();
-  const { overflow, refresh: refreshOverflow } = (0, import_use_scroll_overflow.useScrollOverflow)(scrollAreaRef, {
-    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 = (0, import_react.useCallback)(() => {
-    if (refresh && scrollAreaRef.current) {
-      setTimeout(() => {
-        refresh();
-      }, 0);
-    }
-  }, [refresh]);
-  (0, import_react.useEffect)(() => {
-    forceRefresh();
-  }, [children, forceRefresh]);
-  (0, import_react.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
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ScrollingListContext.Provider, { value: ctxValue, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        "data-spark-component": "scrolling-list",
-        className: (0, import_class_variance_authority.cx)(
-          "gap-lg group/scrolling-list relative flex flex-col default:w-full",
-          className
-        ),
-        ...rest,
-        children
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref: skipAnchorRef, className: "size-0 overflow-hidden", tabIndex: -1 })
-  ] });
-};
-ScrollingList.displayName = "ScrollingList";
-
-// src/scrolling-list/ScrollingListControls.tsx
-var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ScrollingListControls = ({
-  children,
-  visibility = "always",
-  className,
-  ...rest
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
-    {
-      "data-spark-component": "scrolling-list-controls",
-      className: (0, import_class_variance_authority2.cx)(
-        "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
-var import_class_variance_authority3 = require("class-variance-authority");
-var import_react4 = require("react");
-
-// src/slot/Slot.tsx
-var import_radix_ui = require("radix-ui");
-var import_react2 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Slottable = import_radix_ui.Slot.Slottable;
-var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
-};
-var wrapPolymorphicSlot = (asChild, children, callback) => {
-  if (!asChild) return callback(children);
-  return (0, import_react2.isValidElement)(children) ? (0, import_react2.cloneElement)(
-    children,
-    void 0,
-    callback(children.props.children)
-  ) : null;
-};
-
-// src/scrolling-list/useFocusWithinScroll.tsx
-var import_react3 = require("react");
-function useFocusWithinScroll(ref, scrollRef) {
-  const [isFocusWithin, setIsFocusWithin] = (0, import_react3.useState)(false);
-  (0, import_react3.useEffect)(() => {
-    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);
-      }
-    };
-  }, [ref, scrollRef]);
-  return isFocusWithin;
-}
-
-// src/scrolling-list/ScrollingListItem.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ScrollingListItem = ({
-  asChild = false,
-  children,
-  index = 0,
-  className = "",
-  ...rest
-}) => {
-  const ctx = (0, import_react4.useContext)(ScrollingListContext);
-  const itemRef = (0, import_react4.useRef)(null);
-  const isSnapPoint = ctx.snapPointIndexes.has(index);
-  useFocusWithinScroll(itemRef, ctx.scrollAreaRef);
-  const Component = asChild ? Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    Component,
-    {
-      "data-spark-component": "scrolling-list-item",
-      role: "listitem",
-      ref: itemRef,
-      className: (0, import_class_variance_authority3.cx)(
-        "default:w-auto default:shrink-0",
-        {
-          "snap-start": isSnapPoint,
-          "snap-normal": isSnapPoint && ctx.snapStop === "normal",
-          "snap-always": isSnapPoint && ctx.snapStop === "always"
-        },
-        className
-      ),
-      ...rest,
-      children
-    }
-  );
-};
-ScrollingListItem.displayName = "ScrollingList.Item";
-
-// src/scrolling-list/ScrollingListItems.tsx
-var import_class_variance_authority4 = require("class-variance-authority");
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("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;
-      }
-    });
-  };
-}
-var ScrollingListItems = ({ children, ref, className = "", ...rest }) => {
-  const ctx = (0, import_react5.useContext)(ScrollingListContext);
-  const snapConfig = {
-    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],
-    scrollPaddingInline: "var(--scrolling-list-px)",
-    "--scrolling-list-px": `${ctx.scrollPadding}px`,
-    "--scrolling-list-gap": `${ctx.gap}px`,
-    ...ctx.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`
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "div",
-    {
-      "data-spark-component": "scrolling-list-items",
-      id: "scrolling-list-items",
-      role: "list",
-      className: (0, import_class_variance_authority4.cx)(
-        "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
-      ),
-      ref: mergeRefs(ctx.scrollAreaRef, ctx.scrollRef, ref),
-      style: inlineStyles,
-      onKeyDown: handleKeyDown,
-      ...rest,
-      children: import_react5.Children.map(
-        children,
-        (child, index) => (0, import_react5.isValidElement)(child) ? (0, import_react5.cloneElement)(child, { index }) : child
-      )
-    }
-  );
-};
-ScrollingListItems.displayName = "ScrollingList.Items";
-
-// src/scrolling-list/ScrollingListNextButton.tsx
-var import_ArrowVerticalRight = require("@spark-ui/icons/ArrowVerticalRight");
-var import_class_variance_authority10 = require("class-variance-authority");
-var import_react8 = require("react");
-
-// src/icon/Icon.tsx
-var import_react6 = require("react");
-
-// src/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
-  const Component = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    Component,
-    {
-      ...props,
-      ref,
-      style: {
-        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
-        position: "absolute",
-        border: 0,
-        width: 1,
-        height: 1,
-        padding: 0,
-        margin: -1,
-        overflow: "hidden",
-        clip: "rect(0, 0, 0, 0)",
-        whiteSpace: "nowrap",
-        wordWrap: "normal",
-        ...props.style
-      }
-    }
-  );
-};
-VisuallyHidden.displayName = "VisuallyHidden";
-
-// src/icon/Icon.styles.tsx
-var import_internal_utils = require("@spark-ui/internal-utils");
-var import_class_variance_authority5 = require("class-variance-authority");
-var iconStyles = (0, import_class_variance_authority5.cva)(["fill-current shrink-0"], {
-  variants: {
-    /**
-     * Color scheme of the icon.
-     */
-    intent: (0, import_internal_utils.makeVariants)({
-      current: ["text-current"],
-      main: ["text-main"],
-      support: ["text-support"],
-      accent: ["text-accent"],
-      basic: ["text-basic"],
-      success: ["text-success"],
-      alert: ["text-alert"],
-      error: ["text-error"],
-      info: ["text-info"],
-      neutral: ["text-neutral"]
-    }),
-    /**
-     * Sets the size of the icon.
-     */
-    size: (0, import_internal_utils.makeVariants)({
-      current: ["u-current-font-size"],
-      sm: ["w-sz-16", "h-sz-16"],
-      md: ["w-sz-24", "h-sz-24"],
-      lg: ["w-sz-32", "h-sz-32"],
-      xl: ["w-sz-40", "h-sz-40"]
-    })
-  }
-});
-
-// src/icon/Icon.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Icon = ({
-  label,
-  className,
-  size = "current",
-  intent = "current",
-  children,
-  ...others
-}) => {
-  const child = import_react6.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    (0, import_react6.cloneElement)(child, {
-      className: iconStyles({ className, size, intent }),
-      "data-spark-component": "icon",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...others
-    }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisuallyHidden, { children: label })
-  ] });
-};
-Icon.displayName = "Icon";
-
-// src/button/Button.tsx
-var import_class_variance_authority8 = require("class-variance-authority");
-var import_react7 = require("react");
-
-// src/spinner/Spinner.styles.tsx
-var import_internal_utils2 = require("@spark-ui/internal-utils");
-var import_class_variance_authority6 = require("class-variance-authority");
-var defaultVariants = {
-  intent: "current",
-  size: "current",
-  isBackgroundVisible: false
-};
-var spinnerStyles = (0, import_class_variance_authority6.cva)(
-  ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
-  {
-    variants: {
-      /**
-       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.
-       */
-      size: {
-        current: ["u-current-font-size"],
-        sm: ["w-sz-20", "h-sz-20"],
-        md: ["w-sz-28", "h-sz-28"],
-        full: ["w-full", "h-full"]
-      },
-      /**
-       * Color scheme of the spinner.
-       */
-      intent: (0, import_internal_utils2.makeVariants)({
-        current: ["border-current"],
-        main: ["border-main"],
-        support: ["border-support"],
-        accent: ["border-accent"],
-        basic: ["border-basic"],
-        success: ["border-success"],
-        alert: ["border-alert"],
-        error: ["border-error"],
-        info: ["border-info"],
-        neutral: ["border-neutral"]
-      }),
-      /**
-       * Size of the button.
-       */
-      isBackgroundVisible: {
-        true: ["border-b-neutral-container", "border-l-neutral-container"],
-        false: ["border-b-transparent", "border-l-transparent"]
-      }
-    },
-    defaultVariants
-  }
-);
-
-// src/spinner/Spinner.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Spinner = ({
-  className,
-  size = "current",
-  intent = "current",
-  label,
-  isBackgroundVisible,
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "span",
-    {
-      role: "status",
-      "data-spark-component": "spinner",
-      ref,
-      className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
-      ...others,
-      children: label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VisuallyHidden, { children: label })
-    }
-  );
-};
-
-// src/button/Button.styles.tsx
-var import_internal_utils8 = require("@spark-ui/internal-utils");
-var import_class_variance_authority7 = require("class-variance-authority");
-
-// src/button/variants/filled.ts
-var import_internal_utils3 = require("@spark-ui/internal-utils");
-var filledVariants = [
-  // Main
-  {
-    intent: "main",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-main",
-      "text-on-main",
-      "hover:bg-main-hovered",
-      "enabled:active:bg-main-hovered",
-      "focus-visible:bg-main-hovered"
-    ])
-  },
-  // Support
-  {
-    intent: "support",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-support",
-      "text-on-support",
-      "hover:bg-support-hovered",
-      "enabled:active:bg-support-hovered",
-      "focus-visible:bg-support-hovered"
-    ])
-  },
-  // Accent
-  {
-    intent: "accent",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-accent",
-      "text-on-accent",
-      "hover:bg-accent-hovered",
-      "enabled:active:bg-accent-hovered",
-      "focus-visible:bg-accent-hovered"
-    ])
-  },
-  // Basic
-  {
-    intent: "basic",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-basic",
-      "text-on-basic",
-      "hover:bg-basic-hovered",
-      "enabled:active:bg-basic-hovered",
-      "focus-visible:bg-basic-hovered"
-    ])
-  },
-  // Success
-  {
-    intent: "success",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-success",
-      "text-on-success",
-      "hover:bg-success-hovered",
-      "enabled:active:bg-success-hovered",
-      "focus-visible:bg-success-hovered"
-    ])
-  },
-  // Alert
-  {
-    intent: "alert",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-alert",
-      "text-on-alert",
-      "hover:bg-alert-hovered",
-      "enabled:active:bg-alert-hovered",
-      "focus-visible:bg-alert-hovered"
-    ])
-  },
-  // Danger
-  {
-    intent: "danger",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "text-on-error bg-error",
-      "hover:bg-error-hovered enabled:active:bg-error-hovered",
-      "focus-visible:bg-error-hovered"
-    ])
-  },
-  // Info
-  {
-    intent: "info",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "text-on-error bg-info",
-      "hover:bg-info-hovered enabled:active:bg-info-hovered",
-      "focus-visible:bg-info-hovered"
-    ])
-  },
-  // Neutral
-  {
-    intent: "neutral",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-neutral",
-      "text-on-neutral",
-      "hover:bg-neutral-hovered",
-      "enabled:active:bg-neutral-hovered",
-      "focus-visible:bg-neutral-hovered"
-    ])
-  },
-  // Surface
-  {
-    intent: "surface",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-surface",
-      "text-on-surface",
-      "hover:bg-surface-hovered",
-      "enabled:active:bg-surface-hovered",
-      "focus-visible:bg-surface-hovered"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-surface-inverse",
-      "text-on-surface-inverse",
-      "hover:bg-surface-inverse-hovered",
-      "enabled:active:bg-surface-inverse-hovered",
-      "focus-visible:bg-surface-inverse-hovered"
-    ])
-  }
-];
-
-// src/button/variants/ghost.ts
-var import_internal_utils4 = require("@spark-ui/internal-utils");
-var ghostVariants = [
-  {
-    intent: "main",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-main-container",
-      "hover:bg-main/dim-5",
-      "enabled:active:bg-main/dim-5",
-      "focus-visible:bg-main/dim-5"
-    ])
-  },
-  {
-    intent: "support",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-support-container",
-      "hover:bg-support/dim-5",
-      "enabled:active:bg-support/dim-5",
-      "focus-visible:bg-support/dim-5"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-accent-container",
-      "hover:bg-accent/dim-5",
-      "enabled:active:bg-accent/dim-5",
-      "focus-visible:bg-accent/dim-5"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-basic-container",
-      "hover:bg-basic/dim-5",
-      "enabled:active:bg-basic/dim-5",
-      "focus-visible:bg-basic/dim-5"
-    ])
-  },
-  {
-    intent: "success",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-success-container",
-      "hover:bg-success/dim-5",
-      "enabled:active:bg-success/dim-5",
-      "focus-visible:bg-success/dim-5"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-alert-container",
-      "hover:bg-alert/dim-5",
-      "enabled:active:bg-alert/dim-5",
-      "focus-visible:bg-alert/dim-5"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-error-container",
-      "hover:bg-error/dim-5",
-      "enabled:active:bg-error/dim-5",
-      "focus-visible:bg-error/dim-5"
-    ])
-  },
-  {
-    intent: "info",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-info-container",
-      "hover:bg-info/dim-5",
-      "enabled:active:bg-info/dim-5",
-      "focus-visible:bg-info/dim-5"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-on-neutral-container",
-      "hover:bg-neutral/dim-5",
-      "enabled:active:bg-neutral/dim-5",
-      "focus-visible:bg-neutral/dim-5"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-surface",
-      "hover:bg-surface/dim-5",
-      "enabled:active:bg-surface/dim-5",
-      "focus-visible:bg-surface/dim-5"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-surface-inverse",
-      "hover:bg-surface-inverse/dim-5",
-      "enabled:active:bg-surface-inverse/dim-5",
-      "focus-visible:bg-surface-inverse/dim-5"
-    ])
-  }
-];
-
-// src/button/variants/outlined.ts
-var import_internal_utils5 = require("@spark-ui/internal-utils");
-var outlinedVariants = [
-  {
-    intent: "main",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-main/dim-5",
-      "enabled:active:bg-main/dim-5",
-      "focus-visible:bg-main/dim-5",
-      "text-main"
-    ])
-  },
-  {
-    intent: "support",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-support/dim-5",
-      "enabled:active:bg-support/dim-5",
-      "focus-visible:bg-support/dim-5",
-      "text-support"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-accent/dim-5",
-      "enabled:active:bg-accent/dim-5",
-      "focus-visible:bg-accent/dim-5",
-      "text-accent"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-basic/dim-5",
-      "enabled:active:bg-basic/dim-5",
-      "focus-visible:bg-basic/dim-5",
-      "text-basic"
-    ])
-  },
-  {
-    intent: "success",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-success/dim-5",
-      "enabled:active:bg-success/dim-5",
-      "focus-visible:bg-success/dim-5",
-      "text-success"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-alert/dim-5",
-      "enabled:active:bg-alert/dim-5",
-      "focus-visible:bg-alert/dim-5",
-      "text-alert"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-error/dim-5",
-      "enabled:active:bg-error/dim-5",
-      "focus-visible:bg-error/dim-5",
-      "text-error"
-    ])
-  },
-  {
-    intent: "info",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-info/dim-5",
-      "enabled:active:bg-info/dim-5",
-      "focus-visible:bg-info/dim-5",
-      "text-info"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-neutral/dim-5",
-      "enabled:active:bg-neutral/dim-5",
-      "focus-visible:bg-neutral/dim-5",
-      "text-neutral"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-surface/dim-5",
-      "enabled:active:bg-surface/dim-5",
-      "focus-visible:bg-surface/dim-5",
-      "text-surface"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-surface-inverse/dim-5",
-      "enabled:active:bg-surface-inverse/dim-5",
-      "focus-visible:bg-surface-inverse/dim-5",
-      "text-surface-inverse"
-    ])
-  }
-];
-
-// src/button/variants/tinted.ts
-var import_internal_utils6 = require("@spark-ui/internal-utils");
-var tintedVariants = [
-  {
-    intent: "main",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-main-container",
-      "text-on-main-container",
-      "hover:bg-main-container-hovered",
-      "enabled:active:bg-main-container-hovered",
-      "focus-visible:bg-main-container-hovered"
-    ])
-  },
-  {
-    intent: "support",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-support-container",
-      "text-on-support-container",
-      "hover:bg-support-container-hovered",
-      "enabled:active:bg-support-container-hovered",
-      "focus-visible:bg-support-container-hovered"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-accent-container",
-      "text-on-accent-container",
-      "hover:bg-accent-container-hovered",
-      "enabled:active:bg-accent-container-hovered",
-      "focus-visible:bg-accent-container-hovered"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-basic-container",
-      "text-on-basic-container",
-      "hover:bg-basic-container-hovered",
-      "enabled:active:bg-basic-container-hovered",
-      "focus-visible:bg-basic-container-hovered"
-    ])
-  },
-  {
-    intent: "success",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-success-container",
-      "text-on-success-container",
-      "hover:bg-success-container-hovered",
-      "enabled:active:bg-success-container-hovered",
-      "focus-visible:bg-success-container-hovered"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-alert-container",
-      "text-on-alert-container",
-      "hover:bg-alert-container-hovered",
-      "enabled:active:bg-alert-container-hovered",
-      "focus-visible:bg-alert-container-hovered"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-error-container",
-      "text-on-error-container",
-      "hover:bg-error-container-hovered",
-      "enabled:active:bg-error-container-hovered",
-      "focus-visible:bg-error-container-hovered"
-    ])
-  },
-  {
-    intent: "info",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-info-container",
-      "text-on-info-container",
-      "hover:bg-info-container-hovered",
-      "enabled:active:bg-info-container-hovered",
-      "focus-visible:bg-info-container-hovered"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-neutral-container",
-      "text-on-neutral-container",
-      "hover:bg-neutral-container-hovered",
-      "enabled:active:bg-neutral-container-hovered",
-      "focus-visible:bg-neutral-container-hovered"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-surface",
-      "text-on-surface",
-      "hover:bg-surface-hovered",
-      "enabled:active:bg-surface-hovered",
-      "focus-visible:bg-surface-hovered"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-surface-inverse",
-      "text-on-surface-inverse",
-      "hover:bg-surface-inverse-hovered",
-      "enabled:active:bg-surface-inverse-hovered",
-      "focus-visible:bg-surface-inverse-hovered"
-    ])
-  }
-];
-
-// src/button/variants/contrast.ts
-var import_internal_utils7 = require("@spark-ui/internal-utils");
-var contrastVariants = [
-  {
-    intent: "main",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-main-contaier bg-surface",
-      "hover:bg-main-container-hovered",
-      "enabled:active:bg-main-container-hovered",
-      "focus-visible:bg-main-container-hovered"
-    ])
-  },
-  {
-    intent: "support",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-support-container bg-surface",
-      "hover:bg-support-container-hovered",
-      "enabled:active:bg-support-container-hovered",
-      "focus-visible:bg-support-container-hovered"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-accent-container bg-surface",
-      "hover:bg-accent-container-hovered",
-      "enabled:active:bg-accent-container-hovered",
-      "focus-visible:bg-accent-container-hovered"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-basic-container bg-surface",
-      "hover:bg-basic-container-hovered",
-      "enabled:active:bg-basic-container-hovered",
-      "focus-visible:bg-basic-container-hovered"
-    ])
-  },
-  {
-    intent: "success",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-success-container bg-surface",
-      "hover:bg-success-container-hovered",
-      "enabled:active:bg-success-container-hovered",
-      "focus-visible:bg-success-container-hovered"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-alert-container bg-surface",
-      "hover:bg-alert-container-hovered",
-      "enabled:active:bg-alert-container-hovered",
-      "focus-visible:bg-alert-container-hovered"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-error-container bg-surface",
-      "hover:bg-error-container-hovered",
-      "enabled:active:bg-error-container-hovered",
-      "focus-visible:bg-error-container-hovered"
-    ])
-  },
-  {
-    intent: "info",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-info-container bg-surface",
-      "hover:bg-info-container-hovered",
-      "enabled:active:bg-info-container-hovered",
-      "focus-visible:bg-info-container-hovered"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-neutral-container bg-surface",
-      "hover:bg-neutral-container-hovered",
-      "enabled:active:bg-neutral-container-hovered",
-      "focus-visible:bg-neutral-container-hovered"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-surface bg-surface",
-      "hover:bg-surface-hovered",
-      "enabled:active:bg-surface-hovered",
-      "focus-visible:bg-surface-hovered"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-surface-inverse bg-surface-inverse",
-      "hover:bg-surface-inverse-hovered",
-      "enabled:active:bg-surface-inverse-hovered",
-      "focus-visible:bg-surface-inverse-hovered"
-    ])
-  }
-];
-
-// src/button/Button.styles.tsx
-var buttonStyles = (0, import_class_variance_authority7.cva)(
-  [
-    "u-shadow-border-transition",
-    "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
-    "default:px-lg",
-    "text-body-1 font-bold",
-    "focus-visible:u-outline"
-  ],
-  {
-    variants: {
-      /**
-       * Main style of the button.
-       *
-       * - `filled`: Button will be plain.
-       *
-       * - `outlined`: Button will be transparent with an outline.
-       *
-       * - `tinted`: Button will be filled but using a lighter color scheme.
-       *
-       * - `ghost`: Button will look like a link. No borders, plain text.
-       *
-       * - `contrast`: Button will be surface filled. No borders, plain text.
-       *
-       */
-      design: (0, import_internal_utils8.makeVariants)({
-        filled: [],
-        outlined: ["bg-transparent", "border-sm", "border-current"],
-        tinted: [],
-        ghost: ["default:-mx-md px-md hover:bg-main/dim-5"],
-        contrast: []
-      }),
-      underline: {
-        true: ["underline"]
-      },
-      /**
-       * Color scheme of the button.
-       */
-      intent: (0, import_internal_utils8.makeVariants)({
-        main: [],
-        support: [],
-        accent: [],
-        basic: [],
-        success: [],
-        alert: [],
-        danger: [],
-        info: [],
-        neutral: [],
-        surface: [],
-        surfaceInverse: []
-      }),
-      /**
-       * Size of the button.
-       */
-      size: (0, import_internal_utils8.makeVariants)({
-        sm: ["min-w-sz-32", "h-sz-32"],
-        md: ["min-w-sz-44", "h-sz-44"],
-        lg: ["min-w-sz-56", "h-sz-56"]
-      }),
-      /**
-       * Shape of the button.
-       */
-      shape: (0, import_internal_utils8.makeVariants)({
-        rounded: ["rounded-lg"],
-        square: ["rounded-0"],
-        pill: ["rounded-full"]
-      }),
-      /**
-       * Disable the button, preventing user interaction and adding opacity.
-       */
-      disabled: {
-        true: ["cursor-not-allowed", "opacity-dim-3"],
-        false: ["cursor-pointer"]
-      }
-    },
-    compoundVariants: [
-      ...filledVariants,
-      ...outlinedVariants,
-      ...tintedVariants,
-      ...ghostVariants,
-      ...contrastVariants
-    ],
-    defaultVariants: {
-      design: "filled",
-      intent: "main",
-      size: "md",
-      shape: "rounded"
-    }
-  }
-);
-
-// src/button/Button.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var blockedEventHandlers = [
-  "onClick",
-  "onMouseDown",
-  "onMouseUp",
-  "onMouseEnter",
-  "onMouseLeave",
-  "onMouseOver",
-  "onMouseOut",
-  "onKeyDown",
-  "onKeyPress",
-  "onKeyUp",
-  "onSubmit"
-];
-var Button = ({
-  children,
-  design = "filled",
-  disabled = false,
-  intent = "main",
-  isLoading = false,
-  loadingLabel,
-  loadingText,
-  shape = "rounded",
-  size = "md",
-  asChild,
-  className,
-  underline = false,
-  ref,
-  ...others
-}) => {
-  const Component = asChild ? Slot : "button";
-  const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react7.useMemo)(() => {
-    const result = {};
-    if (shouldNotInteract) {
-      blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
-    }
-    return result;
-  }, [shouldNotInteract]);
-  const spinnerProps = {
-    size: "current",
-    className: loadingText ? "inline-block" : "absolute",
-    ...loadingLabel && { "aria-label": loadingLabel }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    Component,
-    {
-      "data-spark-component": "button",
-      ...Component === "button" && { type: "button" },
-      ref,
-      className: buttonStyles({
-        className,
-        design,
-        disabled: shouldNotInteract,
-        intent,
-        shape,
-        size,
-        underline
-      }),
-      disabled: !!disabled,
-      "aria-busy": isLoading,
-      "aria-live": isLoading ? "assertive" : "off",
-      ...others,
-      ...disabledEventHandlers,
-      children: wrapPolymorphicSlot(
-        asChild,
-        children,
-        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, { ...spinnerProps }),
-          loadingText && loadingText,
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "div",
-            {
-              "aria-hidden": true,
-              className: (0, import_class_variance_authority8.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
-              children: slotted
-            }
-          )
-        ] }) : slotted
-      )
-    }
-  );
-};
-Button.displayName = "Button";
-
-// src/icon-button/IconButton.styles.tsx
-var import_internal_utils9 = require("@spark-ui/internal-utils");
-var import_class_variance_authority9 = require("class-variance-authority");
-var iconButtonStyles = (0, import_class_variance_authority9.cva)(["pl-0 pr-0"], {
-  variants: {
-    /**
-     * Sets the size of the icon.
-     */
-    size: (0, import_internal_utils9.makeVariants)({
-      sm: ["text-body-1"],
-      md: ["text-body-1"],
-      lg: ["text-display-3"]
-    })
-  }
-});
-
-// src/icon-button/IconButton.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var IconButton = ({
-  design = "filled",
-  disabled = false,
-  intent = "main",
-  shape = "rounded",
-  size = "md",
-  className,
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    Button,
-    {
-      "data-spark-component": "icon-button",
-      ref,
-      className: iconButtonStyles({ size, className }),
-      design,
-      disabled,
-      intent,
-      shape,
-      size,
-      ...others
-    }
-  );
-};
-IconButton.displayName = "IconButton";
-
-// src/scrolling-list/ScrollingListNextButton.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var ScrollingListNextButton = ({ "aria-label": ariaLabel, ...rest }) => {
-  const ctx = (0, import_react8.useContext)(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__ */ (0, import_jsx_runtime11.jsx)(
-    IconButton,
-    {
-      "data-spark-component": "scrolling-list-next-button",
-      size: "sm",
-      intent: "surface",
-      design: "filled",
-      className: (0, import_class_variance_authority10.cx)(
-        "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,
-      "aria-controls": "scrolling-list-items",
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ArrowVerticalRight.ArrowVerticalRight, {}) })
-    }
-  );
-};
-ScrollingListNextButton.displayName = "ScrollingList.NextButton";
-
-// src/scrolling-list/ScrollingListPrevButton.tsx
-var import_ArrowVerticalLeft = require("@spark-ui/icons/ArrowVerticalLeft");
-var import_class_variance_authority11 = require("class-variance-authority");
-var import_react9 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var ScrollingListPrevButton = ({
-  "aria-label": ariaLabel,
-  ...rest
-}) => {
-  const ctx = (0, import_react9.useContext)(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__ */ (0, import_jsx_runtime12.jsx)(
-    IconButton,
-    {
-      "data-spark-component": "scrolling-list-prev-button",
-      size: "sm",
-      intent: "surface",
-      design: "filled",
-      className: (0, import_class_variance_authority11.cx)(
-        "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,
-      "aria-controls": "scrolling-list-items",
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ArrowVerticalLeft.ArrowVerticalLeft, {}) })
-    }
-  );
-};
-ScrollingListPrevButton.displayName = "ScrollingList.PrevButton";
-
-// src/scrolling-list/ScrollingListSkipButton.tsx
-var import_class_variance_authority12 = require("class-variance-authority");
-var import_react10 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var ScrollingListSkipButton = ({ children, ...rest }) => {
-  const ctx = (0, import_react10.useContext)(ScrollingListContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    Button,
-    {
-      type: "button",
-      design: "tinted",
-      intent: "surface",
-      tabIndex: 0,
-      className: (0, import_class_variance_authority12.cx)(
-        "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
-    }
-  );
-};
-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
-});
-ScrollingList2.displayName = "ScrollingList";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ScrollingList
-});
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),T=require("@spark-ui/hooks/use-scroll-overflow"),p=require("class-variance-authority"),l=require("react"),O=require("react-snap-carousel"),V=require("../Slot-DQ8z2zsy.js"),z=require("@spark-ui/icons/ArrowVerticalRight"),w=require("../Icon-CF0W0LKr.js"),S=require("../IconButton-D3g86WpZ.js"),D=require("@spark-ui/icons/ArrowVerticalLeft"),$=require("../Button-B6rA3-e5.js"),v=l.createContext(null),P=({snapType:s="none",snapStop:n="normal",scrollBehavior:e="smooth",loop:r=!1,gap:t=16,withFade:i=!1,scrollPadding:a=0,children:c,className:f,...d})=>{const o=l.useRef(null),g=l.useRef(null),h=O.useSnapCarousel(),{overflow:j,refresh:b}=T.useScrollOverflow(o,{precisionTreshold:1}),{activePageIndex:A,pages:q,refresh:m}=h,x=q[A],E=x?[x[0]+1,x[x.length-1]+1]:[0,0],y=l.useCallback(()=>{m&&o.current&&setTimeout(()=>{m()},0)},[m]);l.useEffect(()=>{y()},[c,y]),l.useLayoutEffect(()=>{o.current&&requestAnimationFrame(()=>{b()})},[c,b]);const F={...h,snapType:s,snapStop:n,skipKeyboardNavigation:()=>{g.current?.focus()},scrollBehavior:e,visibleItemsRange:E,loop:r,gap:t,withFade:i,scrollPadding:a,scrollAreaRef:o,overflow:j};return u.jsxs(v.Provider,{value:F,children:[u.jsx("div",{"data-spark-component":"scrolling-list",className:p.cx("gap-lg group/scrolling-list relative flex flex-col default:w-full",f),...d,children:c}),u.jsx("span",{ref:g,className:"size-0 overflow-hidden",tabIndex:-1})]})};P.displayName="ScrollingList";const L=({children:s,visibility:n="always",className:e,...r})=>u.jsx("div",{"data-spark-component":"scrolling-list-controls",className:p.cx("default:px-md pointer-events-none absolute inset-0 flex flex-row items-center justify-between overflow-hidden",e),style:{"--scrolling-list-controls-opacity":n==="hover"?"0":"1"},"data-orientation":"horizontal",...r,children:s});L.displayName="ScrollingList.Controls";function K(s,n){const[e,r]=l.useState(!1);return l.useEffect(()=>{const t=c=>{r(!0);const f=c.target,d=n.current;if(f&&d){const o=f.getBoundingClientRect(),g=d.getBoundingClientRect();o.left>=g.left&&o.right<=g.right&&o.top>=g.top&&o.bottom<=g.bottom||f.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})}},i=c=>{s.current&&!s.current.contains(c.relatedTarget)&&r(!1)},a=s.current;return a&&(a.addEventListener("focusin",t),a.addEventListener("focusout",i)),()=>{a&&(a.removeEventListener("focusin",t),a.removeEventListener("focusout",i))}},[s,n]),e}const I=({asChild:s=!1,children:n,index:e=0,className:r="",...t})=>{const i=l.useContext(v),a=l.useRef(null),c=i.snapPointIndexes.has(e);K(a,i.scrollAreaRef);const f=s?V.Slot:"div";return u.jsx(f,{"data-spark-component":"scrolling-list-item",role:"listitem",ref:a,className:p.cx("default:w-auto default:shrink-0",{"snap-start":c,"snap-normal":c&&i.snapStop==="normal","snap-always":c&&i.snapStop==="always"},r),...t,children:n})};I.displayName="ScrollingList.Item";function H(...s){return n=>{s.forEach(e=>{typeof e=="function"?e(n):e&&typeof e=="object"&&"current"in e&&(e.current=n)})}}const N=({children:s,ref:n,className:e="",...r})=>{const t=l.useContext(v),i={mandatory:"x mandatory",proximity:"x proximity",none:"none"},a=o=>{!t.loop&&!t.hasPrevPage||(o.preventDefault(),t.goTo(t.hasPrevPage?t.activePageIndex-1:t.pages.length-1,{behavior:t.scrollBehavior}))},c=o=>{!t.loop&&!t.hasNextPage||(o.preventDefault(),t.goTo(t.hasNextPage?t.activePageIndex+1:0,{behavior:t.scrollBehavior}))},f=o=>{o.key==="ArrowLeft"&&a(o),o.key==="ArrowRight"&&c(o)},d={scrollSnapType:i[t.snapType],scrollPaddingInline:"var(--scrolling-list-px)","--scrolling-list-px":`${t.scrollPadding}px`,"--scrolling-list-gap":`${t.gap}px`,...t.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% + ${t.overflow.left?"0px":"44px"} + ${t.overflow.right?"0px":"44px"}) 100%`,maskPosition:`${t.overflow.left?"0px":"-44px"} 0`}};return u.jsx("div",{"data-spark-component":"scrolling-list-items",id:"scrolling-list-items",role:"list",className:p.cx("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",e),ref:H(t.scrollAreaRef,t.scrollRef,n),style:d,onKeyDown:f,...r,children:l.Children.map(s,(o,g)=>l.isValidElement(o)?l.cloneElement(o,{index:g}):o)})};N.displayName="ScrollingList.Items";const k=({"aria-label":s,...n})=>{const e=l.useContext(v),r=()=>{e.hasNextPage?e.next({behavior:e.scrollBehavior}):e.goTo(0,{behavior:e.scrollBehavior})},i=!(e.overflow.left||e.overflow.right)||!e.loop&&!e.overflow.right;return u.jsx(S.IconButton,{"data-spark-component":"scrolling-list-next-button",size:"sm",intent:"surface",design:"filled",className:p.cx("pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible","group-hover/scrolling-list:opacity-none focus-visible:opacity-none"),onClick:r,disabled:i,"aria-label":s,"aria-controls":"scrolling-list-items",...n,children:u.jsx(w.Icon,{children:u.jsx(z.ArrowVerticalRight,{})})})};k.displayName="ScrollingList.NextButton";const B=({"aria-label":s,...n})=>{const e=l.useContext(v),r=()=>{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})},i=!(e.overflow.left||e.overflow.right)||!e.loop&&!e.overflow.left;return u.jsx(S.IconButton,{"data-spark-component":"scrolling-list-prev-button",size:"sm",intent:"surface",design:"filled",className:p.cx("pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible","group-hover/scrolling-list:opacity-none focus-visible:opacity-none"),onClick:r,disabled:i,"aria-label":s,"aria-controls":"scrolling-list-items",...n,children:u.jsx(w.Icon,{children:u.jsx(D.ArrowVerticalLeft,{})})})};B.displayName="ScrollingList.PrevButton";const C=({children:s,...n})=>{const e=l.useContext(v);return u.jsx($.Button,{type:"button",design:"tinted",intent:"surface",tabIndex:0,className:p.cx("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:e.skipKeyboardNavigation,...n,children:s})};C.displayName="ScrollingList.SkipButton";const R=Object.assign(P,{Controls:L,NextButton:k,PrevButton:B,Item:I,Items:N,SkipButton:C});R.displayName="ScrollingList";exports.ScrollingList=R;
+//# sourceMappingURL=index.js.map