@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/ButtonGroup/_dS.jsx

@@ -0,0 +1,280 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { Flex } from "../Flex";
+import { ButtonGroup } from ".";
+
+const items = [
+    {
+        bgColor: "error",
+        label: "test",
+        hoverLabel: "test hover",
+        prefix: { icon: "bullet" },
+        onClick: () => console.log("click"),
+    },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+];
+
+const items2 = [
+    {
+        bgColor: "error",
+        label: "test",
+        hoverLabel: "test hover",
+        prefix: { icon: "bullet" },
+        onClick: () => console.log("click"),
+    },
+    { label: "test2", onClick: () => console.log("click2") },
+    { label: "test2", onClick: () => console.log("click2") },
+];
+
+const groupProps = {
+    bgColor: "success",
+    prefix: {
+        icon: "user",
+    },
+    size: 100,
+};
+
+const X = () => {
+    return (
+        <Ds.page
+            title="<ButtonGroup>"
+            releasedOn="1.0.0"
+            description={{
+                tr: <>
+                    Bu, Group componentinin Button için özelleştirilmiş sürümüdür; items ve groupProps davranışı
+                    aynıdır. Flex sarmalayıcısı yerine ScrollFlex kullanır.
+                    <br />
+                    <br />
+                    scrollEdgeShadow prop'u bu componente özeldir.
+                </>,
+                en: <>
+                    This is a version of the 'Group' component specialized for 'Button', so the
+                    'items' and 'groupProps' behavior is the same. Instead of a 'Flex' wrapper, it
+                    uses 'ScrollFlex'.
+                    <br />
+                    <br />
+                    The 'scrollEdgeShadow' prop is unique to this component.
+                </>,
+            }}
+        >
+            <Ds.block
+                title={{ tr: "Dikey Kullanım", en: "Vertical Usage" }}
+                code={`import { ButtonGroup } from "${SYS.basePath}";
+
+                       const items = [
+                        {
+                            bgColor: "error",
+                            label: "test",
+                            hoverLabel: "test hover",
+                            prefix: {
+                                icon: "bullet"
+                            },
+                            onClick: () => console.log("click"),
+                        },
+                        {
+                            label: "test2",
+                            onClick: () => console.log("click2")
+                        },
+                       ];
+
+                       const groupProps = {
+                        bgColor: "success",
+                        prefix: { icon: "user" },
+                        size: 100,
+                       };
+
+                       <Flex gap={10} height={200}>
+                        <ButtonGroup.column
+                            items={items}
+                            groupProps={groupProps}
+                            flexProps={{ gap: 5 }}
+                            scrollBarProps={{ trackMargin: 0 }}
+                            scrollEdgeShadow
+                        />
+                        <ButtonGroup.column
+                            items={items2}
+                            groupProps={groupProps}
+                            flexProps={{ gap: 5 }}
+                            scrollBarProps={{ trackMargin: 0 }}
+                            scrollEdgeShadow
+                        />
+                       </Flex>`}
+                example={
+                    <Flex gap={10} height={200}>
+                        <ButtonGroup.column
+                            items={items}
+                            groupProps={groupProps}
+                            flexProps={{ gap: 5 }}
+                            scrollBarProps={{ trackMargin: 0 }}
+                            scrollEdgeShadow
+                        />
+                        <ButtonGroup.column
+                            items={items2}
+                            groupProps={groupProps}
+                            flexProps={{ gap: 5 }}
+                            scrollBarProps={{ trackMargin: 0 }}
+                            scrollEdgeShadow
+                        />
+                    </Flex>
+                }
+            />
+            <Ds.block
+                title={{ tr: "Yatay Kullanım", en: "Horizontal Usage" }}
+                code={`import { ButtonGroup } from "${SYS.basePath}";
+
+                       <Flex.column gap={10} height={200} full>
+                        <ButtonGroup
+                            items={items}
+                            groupProps={groupProps}
+                            flexProps={{
+                                gap: 5,
+                                padding: 10,
+                                paddingBottom: 0,
+                            }}
+                            scrollBarProps={{
+                                trackMargin: 0,
+                                variant: "primary",
+                                disableOpacityEffect: true,
+                            }}
+                            scrollEdgeShadow
+                        />
+                        <ButtonGroup
+                            items={items2}
+                            groupProps={groupProps}
+                            flexProps={{
+                                gap: 5,
+                                padding: 10,
+                            }}
+                            scrollBarProps={{ trackMargin: 0 }}
+                            scrollEdgeShadow
+                        />
+                       </Flex.column>`}
+                example={
+                    <Flex.column gap={10} height={200} full>
+                        <ButtonGroup
+                            items={items}
+                            groupProps={groupProps}
+                            flexProps={{
+                                gap: 5,
+                                padding: 10,
+                                paddingBottom: 0,
+                            }}
+                            scrollBarProps={{
+                                trackMargin: 0,
+                                variant: "primary",
+                                disableOpacityEffect: true,
+                            }}
+                            scrollEdgeShadow
+                        />
+                        <ButtonGroup
+                            items={items2}
+                            groupProps={groupProps}
+                            flexProps={{
+                                gap: 5,
+                                padding: 10,
+                            }}
+                            scrollBarProps={{ trackMargin: 0 }}
+                            scrollEdgeShadow
+                        />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title={{ tr: "flat (ScrollFlex olmadan)", en: "flat (no ScrollFlex)" }}
+                code={`import { ButtonGroup, Flex } from "${SYS.basePath}";
+
+                       <Flex direction="row" gap={8}>
+                        <ButtonGroup
+                            flat
+                            items={[
+                                { label: "One", onClick: () => {} },
+                                { label: "Two", onClick: () => {} },
+                            ]}
+                            groupProps={{ variant: "plain" }}
+                        />
+                       </Flex>`}
+                description={{ tr: "Dış Variant, iç Flex veya ScrollFlex kullanılmaz; yalnızca fragment içindeki Button node'ları render edilir. Böylece gap, yön ve scroll kontrolü parent'a (ör. PopOver ScrollFlex content Flex) ait olur.", en: "No outer Variant, no inner Flex or ScrollFlex: only Button nodes in a fragment so the parent (e.g. PopOver ScrollFlex content Flex) owns gap, direction, and scroll." }}
+                example={
+                    <Flex direction="row" gap={8}>
+                        <ButtonGroup
+                            flat
+                            items={[
+                                { label: "One", onClick: () => {} },
+                                { label: "Two", onClick: () => {} },
+                                { label: "Three", onClick: () => {} },
+                            ]}
+                            groupProps={{ variant: "plain" }}
+                        />
+                    </Flex>
+                }
+            />
+            <Ds.api
+                args="<ButtonGroup items={[]} groupProps={{}} />"
+                props={{
+                    items: {
+                        description: { tr: "Prop nesneleri dizisi; her kayıt bir Button üzerine spread edilir.", en: "Array of prop objects; each entry is spread onto a Button." },
+                        type: "array",
+                        required: true,
+                    },
+                    groupProps: {
+                        description: { tr: "Her item ile deep-merge edilir; item'a ait anahtarlar bu varsayılanları ezer.", en: "Deep-merged into every item; per-item keys override these defaults." },
+                        type: "object",
+                    },
+                    flexProps: {
+                        description: { tr: `flat false olduğunda ScrollFlex içeriğine (iç Flex) aktarılır. flat true olduğunda yok sayılır (item'lar parent'ın doğrudan çocuklarıdır). width/height verilmezse boyut içerikten gelir; ScrollFlex kabuğu taşmayı sınırlar (ör. max-width: 100%). ButtonGroup.column, flat false iken direction: "column" değerini flexProps ile birleştirir.`, en: `Forwarded to ScrollFlex content (inner Flex) when flat is false. Ignored when flat is true (items are direct children of the parent). Without width/height, sizing follows content; the ScrollFlex shell limits overflow (e.g. max-width: 100%). ButtonGroup.column merges direction: "column" into flexProps when flat is false.` },
+                        type: "object",
+                    },
+                    scrollBarProps: {
+                        description: { tr: "flat false olduğunda ScrollFlex içindeki ScrollBar'a aktarılır. flat true olduğunda yok sayılır.", en: "Forwarded to ScrollBar inside ScrollFlex when flat is false. Ignored when flat is true." },
+                        type: "object",
+                    },
+                    variant: {
+                        description: {
+                            tr: "variant bir ScrollFlex preset string'iyle (`plain`, `border`, `shadow`, `hoverShadow`; `WithShadow`, `WithHoverShadow` aliasları dâhil) eşleştiğinde yalnız iç ScrollFlex'e uygulanır; dış ButtonGroup sarmalayıcısı componentCreator kurallarını izlemeye devam eder (nested olduğunda DefaultVariant veya PlainVariant). Başka bir string ya da component dış sarmalayıcının Variant'ını seçer. flat true olduğunda yok sayılır (sarmalayıcı ve ScrollFlex yoktur).",
+                            en: "When variant matches a ScrollFlex preset string (`plain`, `border`, `shadow`, `hoverShadow`; aliases include `WithShadow`, `WithHoverShadow`), it is applied only to the inner ScrollFlex—the outer ButtonGroup wrapper still follows componentCreator rules (DefaultVariant or PlainVariant when nested). Any other string or component selects the outer wrapper Variant. Ignored when flat is true (no wrapper, no ScrollFlex).",
+                        },
+                        type: "string | component",
+                    },
+                    flat: {
+                        description: {
+                            tr: "true olduğunda yalnız fragment içindeki Button node'larını render eder: DefaultVariant/PlainVariant sarmalayıcısı, ScrollFlex, iç Flex ve row-clamp grid yoktur. Yerleşim (gap, yön, scroll) parent'tan gelir. flexProps, scrollBarProps, ScrollFlex varyant string'leri ve liste sarmalayıcısındaki style/ref etkisizdir.",
+                            en: "When true, renders only Button nodes in a fragment: no DefaultVariant/PlainVariant wrapper, no ScrollFlex, no inner Flex, no row clamp grid. Layout (gap, direction, scroll) comes from the parent. flexProps, scrollBarProps, scrollFlex variant strings, and style/ref on the list wrapper have no effect.",
+                        },
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                    scrollEdgeShadow: {
+                        description: {
+                            tr: "Scroll alanı üzerindeki isteğe bağlı içe dönük kenar gölgeleri. Row yerleşiminde sol/sağ, column yerleşiminde üst/alt kullanılır. Başlangıç kenarı (sol/üst) yalnız scroll sonrasında görünür; bitiş kenarı (sağ/alt) sona gelindiğinde kaybolur. Opacity 0,25 saniyede geçiş yapar.",
+                            en: "Optional inward edge shadows over the scroll area. Row layout: left/right; column layout: top/bottom. Start edge (left/top) appears only after scrolling; end edge (right/bottom) hides when scrolled to the end. Opacity transitions over 0.25s.",
+                        },
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/ButtonGroup/index.jsx

@@ -0,0 +1,60 @@
+import { forwardRef } from "react";
+import { Base } from "./tools/_Base";
+import { componentCreator } from "helpers/componentCreator";
+import { DefaultVariant } from "./DefaultVariant.js";
+import { PlainVariant } from "./PlainVariant.js";
+
+const SCROLL_FLEX_VARIANT_ALIAS_MAP = {
+    plain: "plain",
+    border: "border",
+    shadow: "shadow",
+    hovershadow: "hoverShadow",
+    withshadow: "shadow",
+    withhovershadow: "hoverShadow",
+};
+
+const normalizeScrollFlexVariant = (variant) => {
+    if (typeof variant !== "string") return undefined;
+    const key = variant.trim().toLowerCase();
+    return SCROLL_FLEX_VARIANT_ALIAS_MAP[key];
+};
+
+const ButtonGroupCore = componentCreator({
+    name: "ButtonGroup",
+    BaseComp: Base,
+    DefaultVariant,
+    PlainVariant,
+    variants: {},
+});
+
+export const ButtonGroup = forwardRef(function ButtonGroup(props, forwardedRef) {
+    const { variant, ...rest } = props || {};
+    const scrollFlexVariant = normalizeScrollFlexVariant(variant);
+
+    return (
+        <ButtonGroupCore
+            ref={forwardedRef}
+            {...rest}
+            {...(scrollFlexVariant != null
+                ? { scrollFlexVariant }
+                : variant !== undefined
+                  ? { variant }
+                  : {})}
+        />
+    );
+});
+
+ButtonGroup.displayName = "ButtonGroup";
+
+ButtonGroup.column = forwardRef(function ButtonGroupColumn(props, forwardedRef) {
+    const { flexProps, ...rest } = props || {};
+    return (
+        <ButtonGroup
+            ref={forwardedRef}
+            {...rest}
+            flexProps={{ direction: "column", ...(flexProps || {}) }}
+        />
+    );
+});
+
+ButtonGroup.column.displayName = "ButtonGroup.column";

package/src/libs/ButtonGroup/tools/ScrollEdgeShadowLayers.jsx

@@ -0,0 +1,76 @@
+
+export const SCROLL_EDGE_SHADOW_SIZE_REM = 18;
+
+const LAYER_BASE = {
+    position: "absolute",
+    pointerEvents: "none",
+    zIndex: 2,
+    transition: "opacity 0.25s ease",
+};
+
+const INNER_SHADOW_STOPS = "rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0) 100%";
+
+const HORIZONTAL_LAYERS = {
+    start: {
+        ...LAYER_BASE,
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: SCROLL_EDGE_SHADOW_SIZE_REM,
+        background: `linear-gradient(to right, ${INNER_SHADOW_STOPS})`,
+        opacity: "var(--scroll-edge-start-opacity, 0)",
+    },
+    end: {
+        ...LAYER_BASE,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        width: SCROLL_EDGE_SHADOW_SIZE_REM,
+        background: `linear-gradient(to left, ${INNER_SHADOW_STOPS})`,
+        opacity: "var(--scroll-edge-end-opacity, 0)",
+    },
+};
+
+const VERTICAL_LAYERS = {
+    start: {
+        ...LAYER_BASE,
+        left: 0,
+        right: 0,
+        top: 0,
+        height: SCROLL_EDGE_SHADOW_SIZE_REM,
+        background: `linear-gradient(to bottom, ${INNER_SHADOW_STOPS})`,
+        opacity: "var(--scroll-edge-start-opacity, 0)",
+    },
+    end: {
+        ...LAYER_BASE,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: SCROLL_EDGE_SHADOW_SIZE_REM,
+        background: `linear-gradient(to top, ${INNER_SHADOW_STOPS})`,
+        opacity: "var(--scroll-edge-end-opacity, 0)",
+    },
+};
+
+const ScrollEdgeShadowLayers = ({ enabled, isRowLayout }) => {
+    if (!enabled) return null;
+
+    const layers = isRowLayout ? HORIZONTAL_LAYERS : VERTICAL_LAYERS;
+
+    return (
+        <div
+            aria-hidden
+            style={{
+                position: "absolute",
+                inset: 0,
+                pointerEvents: "none",
+                zIndex: 2,
+            }}
+        >
+            <div style={layers.start} />
+            <div style={layers.end} />
+        </div>
+    );
+};
+
+export default ScrollEdgeShadowLayers;

package/src/libs/ButtonGroup/tools/_Base.jsx

@@ -0,0 +1,129 @@
+import { useMemo, useRef } from "react";
+import useVars from "./useVars";
+import { Button } from "../../Button";
+import { Group } from "../../Group";
+import { ScrollFlex } from "../../ScrollFlex";
+import ScrollEdgeShadowLayers from "./ScrollEdgeShadowLayers";
+
+const rowClampGridStyle = {
+    display: "grid",
+    width: "100%",
+    maxWidth: "100%",
+    minWidth: 0,
+    height: "fit-content",
+    alignSelf: "start",
+    gridTemplateColumns: "minmax(0, 1fr)",
+    position: "relative",
+};
+
+const columnWrapStyle = {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    minHeight: 0,
+    minWidth: 0,
+};
+
+export const Base = (p = {}) => {
+    const scrollEdgeWrapRef = useRef(null);
+
+    const {
+        Variant,
+        forwardedRef,
+        items,
+        groupProps,
+        resolvedFlexProps,
+        mergedScrollBarProps,
+        scrollFlexVariant,
+        isRowLayout,
+        flat,
+        scrollEdgeShadow,
+    } = useVars({ ...p, scrollEdgeWrapRef });
+
+    const userStyle = p.style;
+    const variantStyle = isRowLayout
+        ? {
+              width: "100%",
+              maxWidth: "100%",
+              minWidth: 0,
+              height: "fit-content",
+              alignSelf: "flex-start",
+              ...(userStyle || {}),
+          }
+        : userStyle;
+
+    const groupList = (
+        <Group component={Button} items={items} groupProps={groupProps} flat />
+    );
+
+    const scrollBarPropsForScrollFlex = useMemo(
+        () =>
+            isRowLayout
+                ? {
+                      ...mergedScrollBarProps,
+                      trackMargin: mergedScrollBarProps.trackMargin ?? 0,
+                      edgeMarginX: 0,
+                      edgeMarginY: 0,
+                  }
+                : {
+                      ...mergedScrollBarProps,
+                      trackMargin: mergedScrollBarProps.trackMargin ?? 0,
+                  },
+        [isRowLayout, mergedScrollBarProps],
+    );
+
+    if (flat) {
+        return groupList;
+    }
+
+    const listInner = (
+        <ScrollFlex
+            {...(scrollFlexVariant != null ? { variant: scrollFlexVariant } : {})}
+            {...(isRowLayout
+                ? {
+                      autoHeight: false,
+                      width: "100%",
+                  }
+                : {
+                      height: "100%",
+                  })}
+            flexProps={resolvedFlexProps}
+            scrollBarProps={scrollBarPropsForScrollFlex}
+        >
+            {groupList}
+        </ScrollFlex>
+    );
+
+    const wrapStyle = isRowLayout ? rowClampGridStyle : columnWrapStyle;
+
+    return (
+        <Variant ref={forwardedRef} style={variantStyle}>
+            <div
+                ref={scrollEdgeWrapRef}
+                style={{
+                    ...wrapStyle,
+                    ...(scrollEdgeShadow
+                        ? {
+                              "--scroll-edge-start-opacity": 0,
+                              "--scroll-edge-end-opacity": 0,
+                          }
+                        : {}),
+                }}
+            >
+                <div
+                    style={{
+                        position: "relative",
+                        zIndex: 1,
+                        width: "100%",
+                        height: "100%",
+                        minHeight: 0,
+                        minWidth: 0,
+                    }}
+                >
+                    {listInner}
+                </div>
+                <ScrollEdgeShadowLayers enabled={scrollEdgeShadow} isRowLayout={isRowLayout} />
+            </div>
+        </Variant>
+    );
+};

package/src/libs/ButtonGroup/tools/useScrollEdgeShadow.js

@@ -0,0 +1,82 @@
+import { useCallback, useMemo, useRef } from "react";
+
+const SCROLL_EDGE_EPS = 1;
+
+const pickScrollAxis = (data, isRowLayout) => (isRowLayout ? data?.x : data?.y);
+
+const resolveEdgeVisibility = (axis) => {
+    const overflowing = !!axis?.isOverflowing;
+    const scrollPos = Number(axis?.scrollPos) || 0;
+    const maxScroll = Number(axis?.maxScroll) || 0;
+
+    if (!overflowing || maxScroll <= SCROLL_EDGE_EPS) {
+        return { start: false, end: false };
+    }
+
+    return {
+        start: scrollPos > SCROLL_EDGE_EPS,
+        end: scrollPos < maxScroll - SCROLL_EDGE_EPS,
+    };
+};
+
+const applyEdgeOpacityVars = (el, { start, end }) => {
+    if (!el?.style) return;
+
+    const startOpacity = start ? "1" : "0";
+    const endOpacity = end ? "1" : "0";
+
+    const currentStart = el.style.getPropertyValue("--scroll-edge-start-opacity");
+    const currentEnd = el.style.getPropertyValue("--scroll-edge-end-opacity");
+
+    if (currentStart === startOpacity && currentEnd === endOpacity) return;
+
+    el.style.setProperty("--scroll-edge-start-opacity", startOpacity);
+    el.style.setProperty("--scroll-edge-end-opacity", endOpacity);
+};
+
+export const useScrollEdgeShadow = ({
+    enabled = false,
+    isRowLayout,
+    scrollBarProps = {},
+    scrollEdgeWrapRef,
+}) => {
+    const edgesRef = useRef({ start: false, end: false });
+
+    const onScrollBarExport = useCallback(
+        (data) => {
+            if (!enabled) return;
+
+            const next = resolveEdgeVisibility(pickScrollAxis(data, isRowLayout));
+            const el = scrollEdgeWrapRef?.current;
+
+            if (
+                edgesRef.current.start === next.start &&
+                edgesRef.current.end === next.end
+            ) {
+                return;
+            }
+
+            edgesRef.current = next;
+            applyEdgeOpacityVars(el, next);
+        },
+        [enabled, isRowLayout, scrollEdgeWrapRef],
+    );
+
+    const scrollBarPropsWithEdgeShadow = useMemo(() => {
+        if (!enabled) return scrollBarProps;
+
+        const userExport = scrollBarProps.exportData;
+
+        return {
+            ...scrollBarProps,
+            exportData: (data) => {
+                onScrollBarExport(data);
+                if (typeof userExport === "function") userExport(data);
+            },
+        };
+    }, [enabled, onScrollBarExport, scrollBarProps]);
+
+    return {
+        scrollBarPropsWithEdgeShadow,
+    };
+};

package/src/libs/ButtonGroup/tools/useVars.js

@@ -0,0 +1,54 @@
+import { useMemo } from "react";
+import { useExportData } from "helpers/useExportedData";
+import { useScrollEdgeShadow } from "./useScrollEdgeShadow";
+
+const useVars = (p = {}) => {
+    const {
+        Variant,
+        forwardedRef,
+        items = [],
+        groupProps = {},
+        flexProps = {},
+        scrollBarProps = {},
+        scrollFlexVariant,
+        exportData,
+        flat = false,
+        scrollEdgeShadow = false,
+    } = p;
+
+    const resolvedFlexProps = useMemo(() => ({ ...(flexProps || {}) }), [flexProps]);
+
+    const isRowLayout = useMemo(() => {
+        const d = resolvedFlexProps?.direction;
+        if (d == null) return true;
+        const s = String(d).toLowerCase();
+        return !(s === "column" || s === "column-reverse" || s === "y" || s === "y-reverse");
+    }, [resolvedFlexProps]);
+
+    const { scrollBarPropsWithEdgeShadow } = useScrollEdgeShadow({
+        enabled: scrollEdgeShadow && !flat,
+        isRowLayout,
+        scrollBarProps,
+        scrollEdgeWrapRef: p.scrollEdgeWrapRef,
+    });
+
+    return useExportData(
+        {
+            exportData,
+            Variant,
+            forwardedRef,
+            items,
+            groupProps,
+            resolvedFlexProps,
+            mergedScrollBarProps: scrollBarPropsWithEdgeShadow,
+            scrollFlexVariant,
+            flat,
+            scrollEdgeShadow: scrollEdgeShadow && !flat,
+        },
+        {
+            isRowLayout,
+        },
+    );
+};
+
+export default useVars;