@wallarm-org/design-system 0.1.0

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,16 @@
+import type { FC, MouseEvent, Ref } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type ButtonBaseProps } from '../ButtonBase';
+declare const toggleButtonVariants: (props?: ({
+    variant?: "outline" | "ghost" | null | undefined;
+    color?: "brand" | "neutral" | null | undefined;
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ToggleButtonVariantProps = VariantProps<typeof toggleButtonVariants>;
+export type ToggleButtonProps = Omit<Omit<ButtonBaseProps, 'onToggle'>, 'onClick'> & ToggleButtonVariantProps & {
+    ref?: Ref<HTMLButtonElement>;
+    defaultValue?: boolean;
+    onToggle?: (active: boolean, event: MouseEvent<HTMLButtonElement>) => void;
+};
+export declare const ToggleButton: FC<ToggleButtonProps>;
+export {};

package/dist/components/ToggleButton/ToggleButton.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ToggleButton/ToggleButton.figma.js

@@ -0,0 +1,267 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { ToggleButton } from "./ToggleButton.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=295-6384&m=dev';
+code_connect.connect(ToggleButton, figmaNodeUrl, {
+    props: {
+        children: code_connect.string('Name'),
+        leftElement: code_connect.boolean('Left element'),
+        leftIcon: code_connect.instance('l-ic'),
+        rightElement: code_connect.boolean('Right element'),
+        rightIcon: code_connect.instance('r-ic'),
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Default: 'large'
+        }),
+        loading: code_connect["enum"]('State', {
+            Loading: true
+        }),
+        disabled: code_connect["enum"]('State', {
+            Disabled: true
+        }),
+        color: code_connect["enum"]('Color', {
+            Brand: 'brand',
+            Neutral: 'neutral'
+        }),
+        variant: code_connect["enum"]('Type', {
+            Outline: 'outline',
+            Ghost: 'ghost'
+        }),
+        iconOnly: code_connect.boolean('Icon only'),
+        selected: code_connect.boolean('Selected')
+    },
+    example: (props)=>/*#__PURE__*/ jsx(ToggleButton, {
+            variant: props.variant,
+            color: props.color,
+            size: props.size,
+            loading: props.loading,
+            disabled: props.disabled,
+            active: props.selected,
+            children: props.children
+        })
+});
+code_connect.connect(ToggleButton, figmaNodeUrl, {
+    props: {
+        children: code_connect.string('Name'),
+        leftIcon: code_connect.instance('l-ic'),
+        rightIcon: code_connect.instance('r-ic'),
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Default: 'large'
+        }),
+        loading: code_connect["enum"]('State', {
+            Loading: true
+        }),
+        disabled: code_connect["enum"]('State', {
+            Disabled: true
+        }),
+        color: code_connect["enum"]('Color', {
+            Brand: 'brand',
+            Neutral: 'neutral'
+        }),
+        variant: code_connect["enum"]('Type', {
+            Outline: 'outline',
+            Ghost: 'ghost'
+        }),
+        iconOnly: code_connect.boolean('Icon only'),
+        selected: code_connect.boolean('Selected')
+    },
+    variant: {
+        'Icon only': true,
+        'Left element': true
+    },
+    example: (props)=>/*#__PURE__*/ jsx(ToggleButton, {
+            variant: props.variant,
+            color: props.color,
+            size: props.size,
+            loading: props.loading,
+            disabled: props.disabled,
+            children: props.leftIcon
+        })
+});
+code_connect.connect(ToggleButton, figmaNodeUrl, {
+    props: {
+        children: code_connect.string('Name'),
+        leftElement: code_connect.boolean('Left element'),
+        leftIcon: code_connect.instance('l-ic'),
+        rightElement: code_connect.boolean('Right element'),
+        rightIcon: code_connect.instance('r-ic'),
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Default: 'large'
+        }),
+        loading: code_connect["enum"]('State', {
+            Loading: true
+        }),
+        disabled: code_connect["enum"]('State', {
+            Disabled: true
+        }),
+        color: code_connect["enum"]('Color', {
+            Brand: 'brand',
+            Neutral: 'neutral'
+        }),
+        variant: code_connect["enum"]('Type', {
+            Outline: 'outline',
+            Ghost: 'ghost'
+        }),
+        iconOnly: code_connect.boolean('Icon only'),
+        selected: code_connect.boolean('Selected')
+    },
+    variant: {
+        'Left element': true
+    },
+    example: (props)=>/*#__PURE__*/ jsxs(ToggleButton, {
+            variant: props.variant,
+            color: props.color,
+            size: props.size,
+            loading: props.loading,
+            disabled: props.disabled,
+            active: props.selected,
+            children: [
+                props.leftIcon,
+                props.children
+            ]
+        })
+});
+code_connect.connect(ToggleButton, figmaNodeUrl, {
+    props: {
+        children: code_connect.string('Name'),
+        leftElement: code_connect.boolean('Left element'),
+        leftIcon: code_connect.instance('l-ic'),
+        rightElement: code_connect.boolean('Right element'),
+        rightIcon: code_connect.instance('r-ic'),
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Default: 'large'
+        }),
+        loading: code_connect["enum"]('State', {
+            Loading: true
+        }),
+        disabled: code_connect["enum"]('State', {
+            Disabled: true
+        }),
+        color: code_connect["enum"]('Color', {
+            Brand: 'brand',
+            Neutral: 'neutral'
+        }),
+        variant: code_connect["enum"]('Type', {
+            Outline: 'outline',
+            Ghost: 'ghost'
+        }),
+        iconOnly: code_connect.boolean('Icon only'),
+        selected: code_connect.boolean('Selected')
+    },
+    variant: {
+        'Right element': true
+    },
+    example: (props)=>/*#__PURE__*/ jsxs(ToggleButton, {
+            variant: props.variant,
+            color: props.color,
+            size: props.size,
+            loading: props.loading,
+            disabled: props.disabled,
+            active: props.selected,
+            children: [
+                props.children,
+                props.rightIcon
+            ]
+        })
+});
+code_connect.connect(ToggleButton, figmaNodeUrl, {
+    props: {
+        children: code_connect.string('Name'),
+        leftElement: code_connect.boolean('Left element'),
+        leftIcon: code_connect.instance('l-ic'),
+        rightElement: code_connect.boolean('Right element'),
+        rightIcon: code_connect.instance('r-ic'),
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Default: 'large'
+        }),
+        loading: code_connect["enum"]('State', {
+            Loading: true
+        }),
+        disabled: code_connect["enum"]('State', {
+            Disabled: true
+        }),
+        color: code_connect["enum"]('Color', {
+            Brand: 'brand',
+            Neutral: 'neutral'
+        }),
+        variant: code_connect["enum"]('Type', {
+            Outline: 'outline',
+            Ghost: 'ghost'
+        }),
+        iconOnly: code_connect.boolean('Icon only'),
+        selected: code_connect.boolean('Selected')
+    },
+    variant: {
+        'Left element': true,
+        'Right element': true
+    },
+    example: (props)=>/*#__PURE__*/ jsxs(ToggleButton, {
+            variant: props.variant,
+            color: props.color,
+            size: props.size,
+            loading: props.loading,
+            disabled: props.disabled,
+            active: props.selected,
+            children: [
+                props.leftIcon,
+                props.children,
+                props.rightIcon
+            ]
+        })
+});
+code_connect.connect(ToggleButton, figmaNodeUrl, {
+    props: {
+        children: code_connect.string('Name'),
+        leftElement: code_connect.boolean('Left element'),
+        leftIcon: code_connect.instance('l-ic'),
+        rightElement: code_connect.boolean('Right element'),
+        rightIcon: code_connect.instance('r-ic'),
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Default: 'large'
+        }),
+        loading: code_connect["enum"]('State', {
+            Loading: true
+        }),
+        disabled: code_connect["enum"]('State', {
+            Disabled: true
+        }),
+        color: code_connect["enum"]('Color', {
+            Brand: 'brand',
+            Neutral: 'neutral'
+        }),
+        variant: code_connect["enum"]('Type', {
+            Outline: 'outline',
+            Ghost: 'ghost'
+        }),
+        iconOnly: code_connect.boolean('Icon only'),
+        selected: code_connect.boolean('Selected'),
+        badge: code_connect.boolean('Badge'),
+        numericBadge: code_connect.children('numeric-badge')
+    },
+    variant: {
+        Badge: true
+    },
+    example: (props)=>/*#__PURE__*/ jsxs(ToggleButton, {
+            variant: props.variant,
+            color: props.color,
+            size: props.size,
+            loading: props.loading,
+            disabled: props.disabled,
+            active: props.selected,
+            children: [
+                props.children,
+                props.numericBadge
+            ]
+        })
+});

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,97 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useControlled } from "../../hooks/index.js";
+import { ButtonBase } from "../ButtonBase/index.js";
+const toggleButtonVariants = cva('disabled:opacity-50', {
+    variants: {
+        variant: {
+            outline: 'border-1 disabled:opacity-50 not-focus:shadow-xs',
+            ghost: 'bg-transparent border-1 border-transparent'
+        },
+        color: {
+            brand: '',
+            neutral: 'focus-visible:ring-focus-primary data-[focus=true]:ring-focus-primary'
+        },
+        active: {
+            true: '',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        {
+            color: 'neutral',
+            variant: 'outline',
+            active: false,
+            className: 'border-1 border-border-primary bg-component-outline-button-bg overlay hover:overlay-states-primary-hover active:overlay-states-primary-pressed'
+        },
+        {
+            color: 'neutral',
+            variant: 'outline',
+            active: true,
+            className: 'border-border-primary bg-component-outline-button-bg overlay overlay-states-primary-active text-text-primary hover:overlay-states-primary-hover active:overlay-states-primary-pressed'
+        },
+        {
+            color: 'neutral',
+            variant: 'ghost',
+            active: false,
+            className: 'bg-transparent border-1 border-transparent hover:bg-states-primary-hover active:bg-states-primary-pressed focus-visible:border-border-primary focus-visible:bg-component-outline-button-bg data-[focus=true]:border-border-primary data-[focus=true]:bg-component-outline-button-bg'
+        },
+        {
+            color: 'neutral',
+            variant: 'ghost',
+            active: true,
+            className: 'overlay bg-states-primary-active text-text-primary hover:bg-states-primary-hover active:bg-states-primary-pressed'
+        },
+        {
+            color: 'brand',
+            variant: 'outline',
+            active: false,
+            className: 'border-border-primary bg-component-outline-button-bg overlay text-text-primary hover:overlay-states-primary-hover active:overlay-states-primary-pressed focus-visible:ring-focus-primary data-[focus=true]:ring-focus-primary'
+        },
+        {
+            color: 'brand',
+            variant: 'outline',
+            active: true,
+            className: 'border-border-brand bg-component-outline-button-bg overlay overlay-states-brand-active text-text-brand hover:overlay-states-brand-hover active:overlay-states-brand-pressed focus-visible:ring-focus-brand data-[focus=true]:ring-focus-brand'
+        },
+        {
+            color: 'brand',
+            variant: 'ghost',
+            active: false,
+            className: 'hover:bg-states-primary-hover active:bg-states-primary-pressed focus-visible:border-border-primary focus-visible:ring-focus-primary focus-visible:bg-component-outline-button-bg data-[focus=true]:border-border-primary data-[focus=true]:ring-focus-primary data-[focus=true]:bg-component-outline-button-bg'
+        },
+        {
+            color: 'brand',
+            variant: 'ghost',
+            active: true,
+            className: 'bg-states-brand-active overlay text-text-brand hover:bg-states-brand-hover active:bg-states-brand-pressed disabled:bg-states-brand-default-alt focus-visible:ring-focus-brand data-[focus=true]:ring-focus-brand'
+        }
+    ]
+});
+const ToggleButton = ({ variant = 'outline', color = 'brand', size = 'large', active: activeProp, defaultValue = false, loading = false, disabled = false, asChild = false, onToggle, ...props })=>{
+    const isDisabled = loading || disabled;
+    const [active, setActiveUncontrolled] = useControlled({
+        controlled: activeProp,
+        default: defaultValue
+    });
+    const handleToggle = (event)=>{
+        const nextValue = !active;
+        setActiveUncontrolled(nextValue);
+        onToggle?.(nextValue, event);
+    };
+    return /*#__PURE__*/ jsx(ButtonBase, {
+        className: toggleButtonVariants({
+            variant,
+            color,
+            active
+        }),
+        size: size,
+        loading: loading,
+        disabled: isDisabled,
+        asChild: asChild,
+        onClick: handleToggle,
+        ...props
+    });
+};
+ToggleButton.displayName = 'ToggleButton';
+export { ToggleButton };

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

@@ -0,0 +1 @@
+export { ToggleButton, type ToggleButtonProps } from './ToggleButton';

package/dist/components/ToggleButton/index.js

@@ -0,0 +1,2 @@
+import { ToggleButton } from "./ToggleButton.js";
+export { ToggleButton };

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type TooltipProps } from '@radix-ui/react-tooltip';
+export declare const Tooltip: FC<TooltipProps>;

package/dist/components/Tooltip/Tooltip.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Tooltip/Tooltip.figma.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Tooltip } from "./Tooltip.js";
+import { TooltipContent } from "./TooltipContent.js";
+import { TooltipProvider } from "./TooltipProvider.js";
+import { TooltipTrigger } from "./TooltipTrigger.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=269-10037';
+code_connect.connect(Tooltip, figmaNodeUrl, {
+    props: {
+        content: code_connect.string('Name')
+    },
+    example: ({ content })=>/*#__PURE__*/ jsx(TooltipProvider, {
+            children: /*#__PURE__*/ jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ jsx(TooltipTrigger, {}),
+                    /*#__PURE__*/ jsx(TooltipContent, {
+                        children: content
+                    })
+                ]
+            })
+        })
+});

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { Root } from "@radix-ui/react-tooltip";
+const Tooltip = (props)=>/*#__PURE__*/ jsx(Root, {
+        ...props
+    });
+Tooltip.displayName = 'Tooltip';
+export { Tooltip };

package/dist/components/Tooltip/TooltipContent.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef, ElementRef, FC, Ref } from 'react';
+import { Content } from '@radix-ui/react-tooltip';
+type TooltipContentProps = ComponentPropsWithoutRef<typeof Content> & {
+    ref?: Ref<ElementRef<typeof Content>>;
+};
+export declare const TooltipContent: FC<TooltipContentProps>;
+export {};

package/dist/components/Tooltip/TooltipContent.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { Content, Portal } from "@radix-ui/react-tooltip";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+import { hasNonTextEnd } from "../../utils/hasNonTextEnd.js";
+const tooltipContentVariants = cva([
+    'py-4 rounded-8 bg-component-tooltip-bg text-text-primary-alt-fixed text-xs font-medium',
+    'z-50 overflow-hidden',
+    'animate-in fade-in-0 zoom-in-95 origin-[--radix-tooltip-content-transform-origin]',
+    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+    'data-[side=bottom]:slide-in-from-top-2',
+    'data-[side=left]:slide-in-from-right-2',
+    'data-[side=right]:slide-in-from-left-2',
+    'data-[side=top]:slide-in-from-bottom-2',
+    '[&>[data-slot=kbd]]:bg-component-kbi-tooltip-bg [&>[data-slot=kbd]]:border-0 [&>[data-slot=kbd]]:text-text-primary-alt-fixed'
+], {
+    variants: {
+        hasNonTextEnd: {
+            true: 'pl-8 pr-4',
+            false: 'px-8'
+        }
+    }
+});
+const TooltipContent = ({ children, sideOffset = 6, className, ref, ...props })=>/*#__PURE__*/ jsx(Portal, {
+        children: /*#__PURE__*/ jsx(Content, {
+            ref: ref,
+            sideOffset: sideOffset,
+            collisionPadding: 8,
+            className: cn(tooltipContentVariants({
+                hasNonTextEnd: hasNonTextEnd(children)
+            }), className),
+            ...props,
+            children: children
+        })
+    });
+TooltipContent.displayName = 'TooltipContent';
+export { TooltipContent };

package/dist/components/Tooltip/TooltipProvider.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type TooltipProviderProps } from '@radix-ui/react-tooltip';
+export declare const TooltipProvider: FC<TooltipProviderProps>;

package/dist/components/Tooltip/TooltipProvider.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { Provider } from "@radix-ui/react-tooltip";
+const TooltipProvider = (props)=>/*#__PURE__*/ jsx(Provider, {
+        ...props
+    });
+TooltipProvider.displayName = 'TooltipProvider';
+export { TooltipProvider };

package/dist/components/Tooltip/TooltipTrigger.d.ts

@@ -0,0 +1,2 @@
+import { type TooltipTriggerProps } from '@radix-ui/react-tooltip';
+export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Tooltip/TooltipTrigger.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Trigger } from "@radix-ui/react-tooltip";
+const TooltipTrigger = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Trigger, {
+        ref: ref,
+        ...props
+    }));
+TooltipTrigger.displayName = 'TooltipTrigger';
+export { TooltipTrigger };

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

@@ -0,0 +1,4 @@
+export { Tooltip } from './Tooltip';
+export { TooltipContent } from './TooltipContent';
+export { TooltipProvider } from './TooltipProvider';
+export { TooltipTrigger } from './TooltipTrigger';

package/dist/components/Tooltip/index.js

@@ -0,0 +1,5 @@
+import { Tooltip } from "./Tooltip.js";
+import { TooltipContent } from "./TooltipContent.js";
+import { TooltipProvider } from "./TooltipProvider.js";
+import { TooltipTrigger } from "./TooltipTrigger.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useControlled } from './useControlled';
+export { useCopyToClipboard } from './useCopyToClipboard';
+export { type UseOverflowItemsOptions, type UseOverflowItemsResult, useOverflowItems, } from './useOverflowItems';

package/dist/hooks/index.js

@@ -0,0 +1,4 @@
+import { useControlled } from "./useControlled.js";
+import { useCopyToClipboard } from "./useCopyToClipboard.js";
+import { useOverflowItems } from "./useOverflowItems.js";
+export { useControlled, useCopyToClipboard, useOverflowItems };

package/dist/hooks/useControlled.d.ts

@@ -0,0 +1,12 @@
+interface UseControlledProps<T = unknown> {
+    /**
+     * Holds the component value when it's controlled.
+     */
+    controlled: T | undefined;
+    /**
+     * The default value when uncontrolled.
+     */
+    default: T | undefined;
+}
+export declare const useControlled: <T = unknown>(props: UseControlledProps<T>) => [T | undefined, (newValue: T | undefined) => void];
+export {};

package/dist/hooks/useControlled.js

@@ -0,0 +1,17 @@
+import { useCallback, useRef, useState } from "react";
+const useControlled = (props)=>{
+    const { controlled, default: defaultProp } = props;
+    const { current: isControlled } = useRef(void 0 !== controlled);
+    const [valueState, setValue] = useState(defaultProp);
+    const value = isControlled ? controlled : valueState;
+    const setValueIfUncontrolled = useCallback((newValue)=>{
+        if (!isControlled) setValue(newValue);
+    }, [
+        isControlled
+    ]);
+    return [
+        value,
+        setValueIfUncontrolled
+    ];
+};
+export { useControlled };

package/dist/hooks/useCopyToClipboard.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Hook for copying text to clipboard with status tracking.
+ *
+ * @param resetDelay - Time in ms before `copied` resets to false (default: 2000)
+ * @returns Object with `copied` state, `copy` function, `reset` function, and `isSupported` flag
+ *
+ * @example
+ * ```tsx
+ * const { copied, copy, reset, isSupported } = useCopyToClipboard();
+ *
+ * {isSupported && (
+ *   <button onClick={() => copy('text to copy')}>
+ *     {copied ? 'Copied!' : 'Copy'}
+ *   </button>
+ * )}
+ * ```
+ */
+export declare function useCopyToClipboard(resetDelay?: number): {
+    copied: boolean;
+    copy: (text: string) => Promise<boolean>;
+    reset: () => void;
+    isSupported: boolean;
+};

package/dist/hooks/useCopyToClipboard.js

@@ -0,0 +1,31 @@
+import { useCallback, useRef, useState } from "react";
+const isClipboardSupported = "u" > typeof navigator && void 0 !== navigator.clipboard && 'function' == typeof navigator.clipboard.writeText;
+function useCopyToClipboard(resetDelay = 2000) {
+    const [copied, setCopied] = useState(false);
+    const timeoutRef = useRef(void 0);
+    const reset = useCallback(()=>{
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        setCopied(false);
+    }, []);
+    const copy = useCallback(async (text)=>{
+        if (!isClipboardSupported) return false;
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(()=>setCopied(false), resetDelay);
+            return true;
+        } catch  {
+            return false;
+        }
+    }, [
+        resetDelay
+    ]);
+    return {
+        copied,
+        copy,
+        reset,
+        isSupported: isClipboardSupported
+    };
+}
+export { useCopyToClipboard };

package/dist/hooks/useOverflowItems.d.ts

@@ -0,0 +1,17 @@
+import { type ReactElement, type RefObject } from 'react';
+export interface UseOverflowItemsOptions<T> {
+    items: T[];
+    renderItem: (item: T) => ReactElement;
+    renderMeasurementItem?: (item: T) => ReactElement;
+    overflowRenderer?: (items: T[]) => ReactElement;
+    reserveSpace?: number;
+}
+export interface UseOverflowItemsResult<T> {
+    containerRef: RefObject<HTMLDivElement | null>;
+    visibleItems: T[];
+    hiddenItems: T[];
+    visibleCount: number;
+    hiddenCount: number;
+    MeasurementContainer: () => ReactElement | null;
+}
+export declare function useOverflowItems<T>({ items, renderItem, renderMeasurementItem, overflowRenderer, reserveSpace, }: UseOverflowItemsOptions<T>): UseOverflowItemsResult<T>;