impact-nova 2.2.5 → 2.2.7

package/dist/components/forms/select/select.js

@@ -1,5 +1,5 @@
 import { jsx as u, jsxs as te } from "react/jsx-runtime";
-import mt, { useState as A, useRef as S } from "react";
+import mt, { useState as x, useRef as S } from "react";
 import * as le from "@radix-ui/react-popover";
 import { useVirtualizer as dt } from "@tanstack/react-virtual";
 import { SelectMenuFooter as ft } from "./components/SelectMenuFooter.js";
@@ -9,28 +9,29 @@ import { SelectMenuPanel as ht } from "./components/SelectMenuPanel.js";
 import { SelectTrigger as gt } from "./components/SelectTrigger.js";
 import { cn as oe } from "../../../lib/utils.js";
 import { useFieldChrome as bt } from "../../../lib/primitives/use-field-chrome.js";
-import { isOptionArray as Ot, getSequence as Mt } from "./utils/select.js";
-import { useImpactNovaI18n as Ct } from "../../../i18n/use-impact-nova-i18n.js";
-import { useFlattenOptions as yt } from "./hooks/useFlattenOptions.js";
-import { useSelectKeyboardHandlers as It } from "./hooks/useSelectKeyboardHandlers.js";
-import { useSelectValueState as vt } from "./hooks/useSelectValueState.js";
+import { isOptionArray as Ot, getSequence as Ct } from "./utils/select.js";
+import { useImpactNovaI18n as Mt } from "../../../i18n/use-impact-nova-i18n.js";
+import { useFlattenOptions as vt } from "./hooks/useFlattenOptions.js";
+import { useSelectKeyboardHandlers as yt } from "./hooks/useSelectKeyboardHandlers.js";
+import { useSelectValueState as It } from "./hooks/useSelectValueState.js";
 import { useSelectMenuHeight as Lt } from "./hooks/useSelectMenuHeight.js";
 import { useSelectMenuScroll as Vt } from "./hooks/useSelectMenuScroll.js";
-import { useSelectOpenEffects as xt } from "./hooks/useSelectOpenEffects.js";
-import { useSelectOutsideScrollLock as At } from "./hooks/useSelectOutsideScrollLock.js";
+import { useSelectOpenEffects as At } from "./hooks/useSelectOpenEffects.js";
+import { useSelectOutsideScrollLock as xt } from "./hooks/useSelectOutsideScrollLock.js";
 import { useSelectSearchFocus as Rt } from "./hooks/useSelectSearchFocus.js";
-import { useSelectSelectionHandlers as wt } from "./hooks/useSelectSelectionHandlers.js";
-import { useSelectionModel as Pt } from "./hooks/useSelectionModel.js";
+import { useSelectSelectionHandlers as Pt } from "./hooks/useSelectSelectionHandlers.js";
+import { useSelectionModel as wt } from "./hooks/useSelectionModel.js";
 import { useVisibleStats as Dt } from "./hooks/useVisibleStats.js";
 import { useOverlayNestedLayerDismiss as Nt } from "../../../lib/overlay/overlay-portal-context.js";
+import { isTooltipContentPointerGestureActive as Tt } from "../../../lib/tooltip/tooltip-content-interaction.js";
 import { SELECT_ALL_INDEX as qt } from "./select.constants.js";
 import { getSelectableOptionIndices as Et } from "./utils/getSelectableOptionIndices.js";
 function ne(R) {
   const {
-    options: C,
-    value: se,
-    defaultValue: re,
-    onChange: T,
+    options: M,
+    value: re,
+    defaultValue: se,
+    onChange: F,
     isMulti: ie,
     multiple: ae,
     isDisabled: ce,
@@ -40,7 +41,7 @@ function ne(R) {
     isSearchable: h = !0,
     placeholder: de,
     // menuPortalTarget is kept for API compatibility but no longer used (Radix handles portalling)
-    menuPortalTarget: Tt,
+    menuPortalTarget: Ht,
     autoFocus: fe,
     closeMenuOnSelect: pe,
     defaultMenuIsOpen: Se = !1,
@@ -51,188 +52,188 @@ function ne(R) {
     label: m,
     required: be,
     isRequired: Oe,
-    error: Me,
-    helperText: Ce,
-    helperTextPosition: ye = "absolute",
+    error: Ce,
+    helperText: Me,
+    helperTextPosition: ve = "absolute",
     id: d,
-    className: Ie,
-    parentClassName: ve,
+    className: ye,
+    parentClassName: Ie,
     onMenuScrollToBottom: Le,
-    estimateRowSize: y,
+    estimateRowSize: v,
     totalCount: Ve,
-    name: xe,
-    isSelectAllEnabled: w = !0,
+    name: Ae,
+    isSelectAllEnabled: P = !0,
     isReadOnly: n = !1,
     searchPosition: b = "menu",
     footerContent: z,
-    onInputChange: Ae,
+    onInputChange: xe,
     getOptionLabel: B,
     renderOption: Re,
-    onMenuOpen: we,
+    onMenuOpen: Pe,
     onMenuClose: K,
     labelOrientation: $ = "top",
-    size: Pe = "default",
+    size: we = "default",
     leftContent: De,
     ignoreCase: Ne,
-    ignoreAccents: qe,
-    matchFrom: Ee,
-    stringify: Fe,
-    trim: Te,
+    ignoreAccents: Te,
+    matchFrom: qe,
+    stringify: Ee,
+    trim: Fe,
     filterOption: He,
-    enableSubMenus: I = !1,
-    enableGroups: P = !1,
+    enableSubMenus: y = !1,
+    enableGroups: w = !1,
     enableInvertedSelection: ze,
-    fetchError: v,
+    fetchError: I,
     onRefetch: Be,
     menuWidth: Ke,
     onClearAll: $e,
     onFocus: _e,
-    onBlur: je
-  } = R, t = ae ?? ie ?? !1, s = ue ?? ce ?? !1, ke = be ?? Oe ?? !1, Ge = pe ?? !t, { t: O } = Ct(), D = de ?? O("select.placeholder"), [l, _] = A(Se), [f, L] = A(""), {
+    onBlur: Ge
+  } = R, t = ae ?? ie ?? !1, r = ue ?? ce ?? !1, je = be ?? Oe ?? !1, ke = pe ?? !t, { t: O } = Mt(), D = de ?? O("select.placeholder"), [l, _] = x(Se), [f, L] = x(""), {
     usesMenuSession: We,
-    currentValue: r,
+    currentValue: s,
     setCurrentValue: Xe,
     beginMenuSession: Je,
     endMenuSession: Qe
-  } = vt({
-    value: se,
-    defaultValue: re,
+  } = It({
+    value: re,
+    defaultValue: se,
     isMulti: !!t,
-    onChange: T
-  }), [Ue, j] = A(null), [a, k] = A(-1), G = S(!1), Ye = mt.useId(), p = d ?? Ye, W = `${p}-listbox`, Ze = l && a >= 0 ? a === qt ? `${p}-option-select-all` : `${p}-option-${a}` : void 0, X = S(null), N = S(null), et = S(null), q = S(null), E = S(null);
-  Rt(l, h, b, E);
-  const { flatOptions: o, isProcessing: c, totalOptionsCount: J, workerSelectAll: tt } = yt(C, f, {
+    onChange: F
+  }), [Ue, G] = x(null), [a, j] = x(-1), k = S(!1), Ye = mt.useId(), p = d ?? Ye, W = `${p}-listbox`, Ze = l && a >= 0 ? a === qt ? `${p}-option-select-all` : `${p}-option-${a}` : void 0, X = S(null), N = S(null), et = S(null), T = S(null), q = S(null);
+  Rt(l, h, b, q);
+  const { flatOptions: o, isProcessing: c, totalOptionsCount: J, workerSelectAll: tt } = vt(M, f, {
     ignoreCase: Ne,
-    ignoreAccents: qe,
-    matchFrom: Ee,
-    stringify: Fe,
-    trim: Te,
+    ignoreAccents: Te,
+    matchFrom: qe,
+    stringify: Ee,
+    trim: Fe,
     filterOption: He,
-    enableSubMenus: I,
-    enableGroups: P
+    enableSubMenus: y,
+    enableGroups: w
   }), lt = Lt(
     l,
     !!i,
     c,
     N
-  ), M = Pt(r, t ?? !1), { stats: Q, getGroupStats: ot } = Dt(
+  ), C = wt(s, t ?? !1), { stats: Q, getGroupStats: ot } = Dt(
     o,
     J,
     f,
-    M,
-    r,
+    C,
+    s,
     t ?? !1
   ), V = dt({
     count: o.length,
-    getScrollElement: () => q.current,
+    getScrollElement: () => T.current,
     // Estimates only seed unmeasured rows — mounted rows self-measure via
     // `measureElement` refs. Consumers rendering taller custom `renderOption`
     // rows should pass `estimateRowSize` to keep scroll offsets sane.
-    estimateSize: (e) => typeof y == "function" ? y(e) : typeof y == "number" ? y : 34,
+    estimateSize: (e) => typeof v == "function" ? v(e) : typeof v == "number" ? v : 34,
     overscan: 5
   });
-  xt({
+  At({
     isOpen: l,
     isSearchable: h,
     searchPosition: b,
     isReadOnly: n,
     isLoading: i,
     isProcessing: c,
-    fetchError: v,
+    fetchError: I,
     isMulti: t,
-    isSelectAllEnabled: w,
+    isSelectAllEnabled: P,
     flatOptions: o,
     searchValue: f,
     highlightedIndex: a,
-    setHighlightedIndex: k,
-    openedViaKeyboardRef: G,
+    setHighlightedIndex: j,
+    openedViaKeyboardRef: k,
     scrollToSelectedOnOpen: he,
-    selectionModel: M,
-    internalValue: r,
+    selectionModel: C,
+    internalValue: s,
     rowVirtualizer: V
   }), Vt({
     isOpen: l,
     isLoading: i,
     isProcessing: c,
     flatOptions: o,
-    listRef: q,
+    listRef: T,
     rowVirtualizer: V,
     onMenuScrollToBottom: Le
   });
-  const x = (e) => {
-    if (!(s && e))
+  const A = (e) => {
+    if (!(!e && Tt()) && !(r && e))
       if (_(e), e)
-        Je(), we?.();
+        Je(), Pe?.();
       else {
-        const F = We ? Qe() : r, ct = t && Ot(F) ? F.map((ut) => ut.value) : void 0;
-        K?.(F, ct), L(""), j(null);
+        const E = We ? Qe() : s, ct = t && Ot(E) ? E.map((ut) => ut.value) : void 0;
+        K?.(E, ct), L(""), G(null);
       }
   };
-  Nt(l && !s, x), At(l, N);
-  const U = (e) => B ? B(e) : e.label, { handleSelect: Y, handleSelectAll: Z, clearValue: nt } = wt({
+  Nt(l && !r, A), xt(l, N);
+  const U = (e) => B ? B(e) : e.label, { handleSelect: Y, handleSelectAll: Z, clearValue: nt } = Pt({
     isMulti: t,
-    isDisabled: s,
+    isDisabled: r,
     isReadOnly: n,
-    internalValue: r,
+    internalValue: s,
     setInternalValue: Xe,
-    onChange: T,
+    onChange: F,
     onMenuClose: K,
     onClearAll: $e,
-    enableSubMenus: I,
-    enableGroups: P,
+    enableSubMenus: y,
+    enableGroups: w,
     enableInvertedSelection: ze,
     maxSelectableOptions: g,
-    closeMenuOnSelect: Ge,
-    options: C,
+    closeMenuOnSelect: ke,
+    options: M,
     flatOptions: o,
     searchValue: f,
-    selectionModel: M,
+    selectionModel: C,
     visibleStats: Q,
     workerSelectAll: tt,
     setIsOpen: _,
     setSearchValue: L
-  }), st = (e) => Mt(
+  }), rt = (e) => Ct(
     e,
     H ?? !1,
     t ?? !1,
     ge,
-    r
-  ), rt = () => Et({
+    s
+  ), st = () => Et({
     isLoading: !!i,
     isProcessing: c,
-    fetchError: v,
+    fetchError: I,
     isMulti: t,
-    isSelectAllEnabled: w,
+    isSelectAllEnabled: P,
     isReadOnly: n,
     flatOptions: o,
-    enableSubMenus: I
-  }), { handleTriggerKeyDown: it, handleSearchKeyDown: at } = It({
-    isDisabled: s,
+    enableSubMenus: y
+  }), { handleTriggerKeyDown: it, handleSearchKeyDown: at } = yt({
+    isDisabled: r,
     isReadOnly: n,
     isOpen: l,
     isSearchable: h,
     searchPosition: b,
-    getSelectableIndices: rt,
+    getSelectableIndices: st,
     highlightedIndex: a,
-    setHighlightedIndex: k,
+    setHighlightedIndex: j,
     flatOptions: o,
     rowVirtualizer: V,
-    handleOpenChange: x,
+    handleOpenChange: A,
     handleSelect: Y,
     handleSelectAll: Z,
-    openedViaKeyboardRef: G,
-    searchInputRef: E,
+    openedViaKeyboardRef: k,
+    searchInputRef: q,
     triggerRef: X
   }), ee = bt({
     label: m,
-    helperText: Ce,
-    helperTextPosition: ye,
+    helperText: Me,
+    helperTextPosition: ve,
     labelOrientation: $,
-    error: Me,
-    required: ke,
-    disabled: s,
+    error: Ce,
+    required: je,
+    disabled: r,
     className: oe($ === "left" && "w-fit items-center"),
-    rootClassName: ve
+    rootClassName: Ie
   });
   return /* @__PURE__ */ u(
     "div",
@@ -240,7 +241,7 @@ function ne(R) {
       "data-testid": `select-${d || "default"}`,
       "data-component": "select",
       children: ee.wrapControl(
-        /* @__PURE__ */ te(le.Root, { open: l && !s, onOpenChange: x, modal: !1, children: [
+        /* @__PURE__ */ te(le.Root, { open: l && !r, onOpenChange: A, modal: !1, children: [
           /* @__PURE__ */ u(le.Anchor, { asChild: !0, children: /* @__PURE__ */ u(
             gt,
             {
@@ -249,10 +250,10 @@ function ne(R) {
               selectFieldId: p,
               listboxId: W,
               id: d,
-              className: Ie,
-              size: Pe,
+              className: ye,
+              size: we,
               error: ee.hasError,
-              isDisabled: s,
+              isDisabled: r,
               isReadOnly: n,
               isOpen: l,
               isLoading: i,
@@ -263,21 +264,21 @@ function ne(R) {
               searchValue: f,
               setSearchValue: L,
               autoFocus: fe,
-              name: xe,
+              name: Ae,
               label: m,
               placeholder: D,
               leftContent: De,
               activeDescendantId: Ze,
-              internalValue: r,
+              internalValue: s,
               totalCount: Ve,
               totalOptionsCount: J,
               formatSelectedCount: (e) => O("select.selectedCount", { count: e }),
               resolveOptionLabel: U,
               isMulti: t,
               onFocus: _e,
-              onBlur: je,
+              onBlur: Ge,
               onKeyDown: it,
-              onToggle: () => x(!l),
+              onToggle: () => A(!l),
               onClear: nt
             }
           ) }),
@@ -297,16 +298,16 @@ function ne(R) {
                     id: d,
                     selectFieldId: p,
                     isReadOnly: n,
-                    isDisabled: s,
+                    isDisabled: r,
                     isMulti: t,
                     isSearchable: h,
                     searchPosition: b,
-                    fetchError: v,
+                    fetchError: I,
                     isLoading: i,
                     isProcessing: c,
-                    isSelectAllEnabled: w ?? !1,
+                    isSelectAllEnabled: P ?? !1,
                     flatOptionsLength: o.length,
-                    searchInputRef: E,
+                    searchInputRef: q,
                     searchValue: f,
                     searchPlaceholder: O("select.searchHere"),
                     highlightedIndex: a,
@@ -315,7 +316,7 @@ function ne(R) {
                     selectAllLabel: O("select.selectAll"),
                     unselectAllLabel: O("select.unselectAll"),
                     onSearchChange: (e) => {
-                      L(e), Ae?.(e);
+                      L(e), xe?.(e);
                     },
                     onSearchKeyDown: at,
                     onSelectAll: Z
@@ -326,23 +327,23 @@ function ne(R) {
                   {
                     className: oe(
                       "flex min-h-0 flex-1 flex-col overflow-hidden",
-                      !(z || g || C.length > 5e3) && "rounded-b-[12px]"
+                      !(z || g || M.length > 5e3) && "rounded-b-[12px]"
                     ),
                     children: /* @__PURE__ */ u(
                       St,
                       {
-                        fetchError: v,
+                        fetchError: I,
                         onRefetch: Be,
                         flatOptions: o,
                         isLoading: i,
                         isProcessing: c,
                         isMulti: t,
                         isReadOnly: n,
-                        enableGroups: P,
-                        enableSubMenus: I,
+                        enableGroups: w,
+                        enableSubMenus: y,
                         showSequence: H,
                         maxSelectableOptions: g,
-                        listRef: q,
+                        listRef: T,
                         listboxId: W,
                         listboxLabel: m ? String(m) : D,
                         rowVirtualizer: V,
@@ -350,12 +351,12 @@ function ne(R) {
                         id: d,
                         highlightedIndex: a,
                         activeSubmenu: Ue,
-                        setActiveSubmenu: j,
-                        internalValue: r,
-                        selectionMode: M.mode,
-                        selectionSet: M.set,
+                        setActiveSubmenu: G,
+                        internalValue: s,
+                        selectionMode: C.mode,
+                        selectionSet: C.set,
                         resolveOptionLabel: U,
-                        getSequenceForOption: st,
+                        getSequenceForOption: rt,
                         renderOption: Re,
                         onSelect: Y,
                         getGroupStats: ot
@@ -368,7 +369,7 @@ function ne(R) {
                   {
                     footerContent: z,
                     maxSelectableOptions: g,
-                    optionCount: C.length
+                    optionCount: M.length
                   }
                 )
               ]

package/dist/components/forms/select/utils/shouldSuppressOptionClickForTextSelection.d.ts

@@ -0,0 +1,5 @@
+export interface PointerPosition {
+    clientX: number;
+    clientY: number;
+}
+export declare function shouldSuppressOptionClickForTextSelection(pointerDownPosition: PointerPosition | null, clickEvent: Pick<MouseEvent, 'clientX' | 'clientY' | 'detail' | 'target'>): boolean;

package/dist/components/forms/select/utils/shouldSuppressOptionClickForTextSelection.js

@@ -0,0 +1,16 @@
+import { isTooltipContentPointerGestureActive as o, isTooltipContentElement as s } from "../../../../lib/tooltip/tooltip-content-interaction.js";
+const n = 4;
+function a(e, t) {
+  if (o() || s(t.target) || t.detail >= 2)
+    return !0;
+  if (e) {
+    const i = Math.abs(t.clientX - e.clientX), l = Math.abs(t.clientY - e.clientY);
+    if (i > n || l > n)
+      return !0;
+  }
+  const r = window.getSelection();
+  return !r || r.isCollapsed ? !1 : r.toString().trim().length > 0;
+}
+export {
+  a as shouldSuppressOptionClickForTextSelection
+};

package/dist/components/layout/horizontal-scroller/index.d.ts

@@ -1,3 +1,7 @@
 export { HorizontalScroller } from './horizontal-scroller';
 export { HorizontalScroller as default } from './horizontal-scroller';
 export * from './horizontal-scroller.types';
+export { ScrollOverflowAffordance } from './scroll-overflow-affordance';
+export type { ScrollOverflowAffordanceProps } from './scroll-overflow-affordance';
+export { useHorizontalScrollOverflow } from './use-horizontal-scroll-overflow';
+export type { HorizontalScrollOverflowState, UseHorizontalScrollOverflowOptions, } from './use-horizontal-scroll-overflow';

package/dist/components/layout/horizontal-scroller/index.js

@@ -1,5 +1,9 @@
-import { HorizontalScroller as l, HorizontalScroller as a } from "./horizontal-scroller.js";
+import { HorizontalScroller as l, HorizontalScroller as e } from "./horizontal-scroller.js";
+import { ScrollOverflowAffordance as t } from "./scroll-overflow-affordance.js";
+import { useHorizontalScrollOverflow as c } from "./use-horizontal-scroll-overflow.js";
 export {
   l as HorizontalScroller,
-  a as default
+  t as ScrollOverflowAffordance,
+  e as default,
+  c as useHorizontalScrollOverflow
 };

package/dist/components/layout/horizontal-scroller/scroll-overflow-affordance.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface ScrollOverflowAffordanceProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    children: React.ReactNode;
+    scrollStep?: number;
+    contentDependency?: unknown;
+    hideScrollbar?: boolean;
+    viewportClassName?: string;
+    viewportDataComponent?: string;
+}
+export declare function ScrollOverflowAffordance({ children, scrollStep, contentDependency, hideScrollbar, viewportClassName, viewportDataComponent, className, ...props }: ScrollOverflowAffordanceProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/horizontal-scroller/scroll-overflow-affordance.js

@@ -0,0 +1,124 @@
+import { jsxs as N, jsx as t } from "react/jsx-runtime";
+import "react";
+import { ChevronRight as D } from "impact-nova-icons";
+import { Button as A } from "../../primitives/button/button.js";
+import { useImpactNovaI18n as L } from "../../../i18n/use-impact-nova-i18n.js";
+import { cn as r } from "../../../lib/utils.js";
+import { useHorizontalScrollOverflow as R } from "./use-horizontal-scroll-overflow.js";
+const s = 48;
+function $(a, o) {
+  if (!(!a && !o))
+    return a && o ? `linear-gradient(to right, transparent, black ${s}px, black calc(100% - ${s}px), transparent)` : o ? `linear-gradient(to right, black, black calc(100% - ${s}px), transparent 100%)` : `linear-gradient(to right, transparent, black ${s}px, black)`;
+}
+const u = "pointer-events-none absolute top-0 z-10 h-full w-14";
+function F({
+  children: a,
+  scrollStep: o,
+  contentDependency: p,
+  hideScrollbar: i = !0,
+  viewportClassName: g,
+  viewportDataComponent: h = "scroll-overflow-affordance-viewport",
+  className: b,
+  ...w
+}) {
+  const { t: c } = L(), {
+    scrollRef: k,
+    canScrollLeft: n,
+    canScrollRight: l,
+    scrollLeft: f,
+    scrollRight: d
+  } = R({ scrollStep: o, contentDependency: p }), v = $(n, l), x = (e) => {
+    if (e.key === "ArrowLeft" && n) {
+      e.preventDefault(), f();
+      return;
+    }
+    e.key === "ArrowRight" && l && (e.preventDefault(), d());
+  }, m = (e, y, z) => {
+    if (z) return null;
+    const I = c(e === "left" ? "horizontalScroller.scrollLeft" : "horizontalScroller.scrollRight");
+    return /* @__PURE__ */ t(
+      A,
+      {
+        variant: "ghost",
+        size: "iconSm",
+        className: r(
+          "absolute top-1/2 z-20 !size-5 !min-h-5 !min-w-5 -translate-y-1/2 rounded-full border border-stroke-hairline p-0",
+          "bg-canvas-elevated/95 text-content-secondary shadow-sm",
+          "hover:bg-canvas-muted hover:text-content",
+          "[&_svg]:!size-3",
+          e === "left" ? "left-0.5" : "right-0.5"
+        ),
+        onClick: y,
+        "aria-label": I,
+        "data-component": e === "left" ? "scroll-overflow-affordance-prev" : "scroll-overflow-affordance-next",
+        tabIndex: -1,
+        children: /* @__PURE__ */ t(
+          D,
+          {
+            className: r(e === "left" && "rotate-180")
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ N(
+    "div",
+    {
+      className: r("relative min-w-0", b),
+      "data-component": "scroll-overflow-affordance",
+      ...w,
+      children: [
+        n ? /* @__PURE__ */ t(
+          "div",
+          {
+            "aria-hidden": !0,
+            "data-component": "scroll-overflow-affordance-fade-left",
+            className: r(
+              u,
+              "left-0 bg-gradient-to-r from-canvas-elevated from-10% via-canvas-elevated/90 via-50% to-transparent"
+            )
+          }
+        ) : null,
+        l ? /* @__PURE__ */ t(
+          "div",
+          {
+            "aria-hidden": !0,
+            "data-component": "scroll-overflow-affordance-fade-right",
+            className: r(
+              u,
+              "right-0 bg-gradient-to-l from-canvas-elevated from-10% via-canvas-elevated/90 via-50% to-transparent"
+            )
+          }
+        ) : null,
+        m("left", f, !n),
+        m("right", d, !l),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            ref: k,
+            tabIndex: 0,
+            onKeyDown: x,
+            className: r(
+              "overflow-x-auto overflow-y-hidden overscroll-x-contain scroll-smooth outline-none",
+              "[-webkit-overflow-scrolling:touch]",
+              "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+              i && "scrollbar-hide",
+              g
+            ),
+            style: {
+              scrollbarWidth: i ? "none" : "auto",
+              msOverflowStyle: i ? "none" : "auto",
+              WebkitMaskImage: v,
+              maskImage: v
+            },
+            "data-component": h,
+            children: a
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  F as ScrollOverflowAffordance
+};

package/dist/components/layout/horizontal-scroller/use-horizontal-scroll-overflow.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface UseHorizontalScrollOverflowOptions {
+    scrollStep?: number;
+    contentDependency?: unknown;
+}
+export interface HorizontalScrollOverflowState {
+    scrollRef: React.RefObject<HTMLDivElement | null>;
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    scrollLeft: () => void;
+    scrollRight: () => void;
+}
+export declare function useHorizontalScrollOverflow({ scrollStep, contentDependency, }?: UseHorizontalScrollOverflowOptions): HorizontalScrollOverflowState;