@shipfox/react-ui 0.18.0 → 0.20.0

package/dist/components/dropdown-input/dropdown-input.d.ts

@@ -0,0 +1,25 @@
+import { Input } from '../../components/input';
+import type { ComponentProps } from 'react';
+import { type ReactNode } from 'react';
+export type DropdownInputItem<T = unknown> = {
+    id: string | number;
+    label: string;
+    value: T;
+};
+type InputBaseProps = Omit<ComponentProps<typeof Input>, 'value' | 'onChange' | 'onSelect'>;
+export type DropdownInputProps<T = unknown> = InputBaseProps & {
+    value: string;
+    onValueChange: (value: string) => void;
+    onSelect?: (item: DropdownInputItem<T>) => void;
+    items: DropdownInputItem<T>[];
+    emptyPlaceholder?: string | ReactNode;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    focusedIndex: number;
+    onFocusedIndexChange: (index: number) => void;
+    selectedItem?: DropdownInputItem<T> | null;
+    dropdownClassName?: string;
+};
+export declare function DropdownInput<T = unknown>({ value, onValueChange, onSelect, items, emptyPlaceholder, open, onOpenChange, focusedIndex, onFocusedIndexChange, selectedItem, dropdownClassName, className, ...inputProps }: DropdownInputProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=dropdown-input.d.ts.map

package/dist/components/dropdown-input/dropdown-input.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../components/button/index.js';
+import { Input } from '../../components/input/index.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/popover/index.js';
+import { useCallback, useEffect, useRef } from 'react';
+import { cn } from '../../utils/cn.js';
+export function DropdownInput({ value, onValueChange, onSelect, items = [], emptyPlaceholder, open, onOpenChange, focusedIndex, onFocusedIndexChange, selectedItem, dropdownClassName, className, ...inputProps }) {
+    const inputRef = useRef(null);
+    const blurTimeoutRef = useRef(null);
+    const popoverContentRef = useRef(null);
+    const itemRefs = useRef([]);
+    const isDisabled = Boolean(inputProps.disabled);
+    const hasResults = items.length > 0;
+    const shouldShowDropdown = open && !isDisabled;
+    const handleOpenChange = useCallback((nextOpen)=>{
+        if (isDisabled) {
+            if (!nextOpen) onOpenChange(false);
+            return;
+        }
+        onOpenChange(nextOpen);
+    }, [
+        isDisabled,
+        onOpenChange
+    ]);
+    const handleSelect = useCallback((item)=>{
+        onValueChange(item.label);
+        onSelect?.(item);
+        onOpenChange(false);
+        inputRef.current?.blur();
+    }, [
+        onValueChange,
+        onOpenChange,
+        onSelect
+    ]);
+    const handleInputChange = useCallback((e)=>{
+        onValueChange(e.target.value);
+        onFocusedIndexChange(-1);
+        if (!open && !isDisabled) {
+            onOpenChange(true);
+        }
+    }, [
+        onValueChange,
+        onFocusedIndexChange,
+        open,
+        isDisabled,
+        onOpenChange
+    ]);
+    const handleInputKeyDown = useCallback((e)=>{
+        if (!shouldShowDropdown || items.length === 0) return;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            onFocusedIndexChange(focusedIndex < items.length - 1 ? focusedIndex + 1 : 0);
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            onFocusedIndexChange(focusedIndex > 0 ? focusedIndex - 1 : items.length - 1);
+        } else if (e.key === 'Enter' && focusedIndex >= 0) {
+            e.preventDefault();
+            const item = items[focusedIndex];
+            if (item) {
+                handleSelect(item);
+            }
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            onOpenChange(false);
+        }
+    }, [
+        shouldShowDropdown,
+        items,
+        focusedIndex,
+        onFocusedIndexChange,
+        handleSelect,
+        onOpenChange
+    ]);
+    const handleInputBlur = useCallback(()=>{
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+        }
+        blurTimeoutRef.current = setTimeout(()=>{
+            const activeElement = document.activeElement;
+            const popoverContent = activeElement?.closest('[data-radix-popper-content-wrapper]');
+            if (!popoverContent) {
+                onOpenChange(false);
+            }
+        }, 200);
+    }, [
+        onOpenChange
+    ]);
+    useEffect(()=>{
+        return ()=>{
+            if (blurTimeoutRef.current) {
+                clearTimeout(blurTimeoutRef.current);
+            }
+        };
+    }, []);
+    useEffect(()=>{
+        if (focusedIndex >= 0 && itemRefs.current[focusedIndex]) {
+            itemRefs.current[focusedIndex]?.scrollIntoView({
+                block: 'nearest'
+            });
+        }
+    }, [
+        focusedIndex
+    ]);
+    const handlePointerDownOutside = useCallback((e)=>{
+        const target = e.target;
+        if (target && popoverContentRef.current?.contains(target)) {
+            e.preventDefault();
+        }
+    }, []);
+    return /*#__PURE__*/ _jsxs(Popover, {
+        open: shouldShowDropdown,
+        onOpenChange: handleOpenChange,
+        children: [
+            /*#__PURE__*/ _jsx(PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "w-full",
+                    children: /*#__PURE__*/ _jsx(Input, {
+                        ref: inputRef,
+                        value: value,
+                        onChange: handleInputChange,
+                        onKeyDown: handleInputKeyDown,
+                        onBlur: handleInputBlur,
+                        onFocus: ()=>{
+                            if (blurTimeoutRef.current) {
+                                clearTimeout(blurTimeoutRef.current);
+                                blurTimeoutRef.current = null;
+                            }
+                            if (!open && !isDisabled && value.length > 0 && hasResults) {
+                                onOpenChange(true);
+                            }
+                        },
+                        className: className,
+                        ...inputProps
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(PopoverContent, {
+                align: "start",
+                sideOffset: 8,
+                className: cn('w-(--radix-popover-trigger-width) rounded-8 bg-background-components-base p-4 shadow-tooltip', dropdownClassName),
+                onOpenAutoFocus: (e)=>e.preventDefault(),
+                onPointerDownOutside: handlePointerDownOutside,
+                onInteractOutside: handlePointerDownOutside,
+                children: /*#__PURE__*/ _jsx("div", {
+                    ref: popoverContentRef,
+                    className: "max-h-200 overflow-y-auto overscroll-contain scrollbar",
+                    onWheel: (e)=>e.stopPropagation(),
+                    onTouchStart: (e)=>e.stopPropagation(),
+                    onTouchMove: (e)=>e.stopPropagation(),
+                    children: hasResults ? /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col gap-4 p-4",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "p-4 text-xs leading-20 text-foreground-neutral-muted",
+                                children: "Select a repository"
+                            }),
+                            items.map((item, index)=>{
+                                const isSelected = selectedItem?.id === item.id;
+                                const isFocused = focusedIndex === index;
+                                return /*#__PURE__*/ _jsx(Button, {
+                                    type: "button",
+                                    variant: "transparent",
+                                    ref: (el)=>{
+                                        itemRefs.current[index] = el;
+                                    },
+                                    onClick: ()=>handleSelect(item),
+                                    onMouseDown: (e)=>e.preventDefault(),
+                                    onMouseEnter: ()=>onFocusedIndexChange(index),
+                                    className: cn('!px-8 w-full text-left text-foreground-neutral-subtle', (isSelected || isFocused) && 'bg-background-components-hover text-foreground-neutral-base'),
+                                    children: /*#__PURE__*/ _jsx("span", {
+                                        className: "flex-1 truncate",
+                                        children: item.label
+                                    })
+                                }, item.id);
+                            })
+                        ]
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        className: "p-4 text-xs leading-20 text-foreground-neutral-muted",
+                        children: emptyPlaceholder ? emptyPlaceholder : null
+                    })
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=dropdown-input.js.map

package/dist/components/dropdown-input/dropdown-input.stories.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonLink } from '../../components/button/index.js';
+import { DropdownInput } from '../../components/dropdown-input/index.js';
+import { Icon } from '../../components/icon/index.js';
+import { Label } from '../../components/label/index.js';
+import { useMemo, useRef, useState } from 'react';
+const sampleItems = [
+    {
+        id: 'apache',
+        label: 'apache',
+        value: 'apache'
+    },
+    {
+        id: 'apache-superset',
+        label: 'apache-superset',
+        value: 'apache-superset'
+    },
+    {
+        id: 'apaleo',
+        label: 'apaleo',
+        value: 'apaleo'
+    },
+    {
+        id: 'apollo',
+        label: 'apollo',
+        value: 'apollo'
+    },
+    {
+        id: 'apple',
+        label: 'apple',
+        value: 'apple'
+    },
+    {
+        id: 'apache-kafka',
+        label: 'apache-kafka',
+        value: 'apache-kafka'
+    }
+];
+const meta = {
+    title: 'Components/DropdownInput',
+    component: DropdownInput,
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+function CustomEmptyStateContent({ value, onValueChange, onOpenChange, contactSupportHref, inputRef }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col items-start justify-center",
+        children: [
+            /*#__PURE__*/ _jsxs(Button, {
+                type: "button",
+                variant: "transparent",
+                className: "!px-4 w-full justify-start",
+                onClick: ()=>{
+                    onValueChange(value);
+                    onOpenChange(false);
+                    inputRef.current?.blur();
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Icon, {
+                        name: "addLine",
+                        className: "size-16 text-foreground-neutral-subtle"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "truncate",
+                        children: value
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("p", {
+                className: "px-8 whitespace-pre-wrap",
+                children: [
+                    "Repository list is limited to 100. Enter the full repository path or",
+                    ' ',
+                    /*#__PURE__*/ _jsx(ButtonLink, {
+                        variant: "base",
+                        underline: true,
+                        href: contactSupportHref,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        className: "!font-regular",
+                        children: "contact support"
+                    }),
+                    "."
+                ]
+            })
+        ]
+    });
+}
+export const Default = {
+    args: {},
+    render: ()=>{
+        const [value, setValue] = useState('');
+        const [open, setOpen] = useState(false);
+        const [focusedIndex, setFocusedIndex] = useState(-1);
+        const [selectedItem, setSelectedItem] = useState(null);
+        const inputRef = useRef(null);
+        const items = useMemo(()=>{
+            if (value.length < 1) return sampleItems;
+            const lowerQuery = value.toLowerCase();
+            return sampleItems.filter((item)=>item.label.toLowerCase().includes(lowerQuery));
+        }, [
+            value
+        ]);
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "w-[80vw] md:w-500",
+            children: [
+                /*#__PURE__*/ _jsx(Label, {
+                    htmlFor: "dropdown-input",
+                    children: "Search repositories"
+                }),
+                /*#__PURE__*/ _jsx(DropdownInput, {
+                    id: "dropdown-input",
+                    value: value,
+                    onValueChange: (newValue)=>{
+                        setValue(newValue);
+                        if (selectedItem && selectedItem.label !== newValue) {
+                            setSelectedItem(null);
+                        }
+                    },
+                    onSelect: (item)=>{
+                        setSelectedItem(item);
+                    },
+                    selectedItem: selectedItem,
+                    items: items,
+                    open: open,
+                    onOpenChange: setOpen,
+                    focusedIndex: focusedIndex,
+                    onFocusedIndexChange: setFocusedIndex,
+                    placeholder: "Type to search...",
+                    emptyPlaceholder: /*#__PURE__*/ _jsx(CustomEmptyStateContent, {
+                        value: value,
+                        onValueChange: setValue,
+                        onOpenChange: setOpen,
+                        contactSupportHref: "https://support.example.com",
+                        inputRef: inputRef
+                    })
+                })
+            ]
+        });
+    }
+};
+export const EmptyState = {
+    args: {},
+    render: ()=>{
+        const [value, setValue] = useState('abcxyz');
+        const [open, setOpen] = useState(true);
+        const [focusedIndex, setFocusedIndex] = useState(-1);
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "w-[80vw] md:w-500",
+            children: [
+                /*#__PURE__*/ _jsx(Label, {
+                    htmlFor: "dropdown-empty",
+                    children: "No results"
+                }),
+                /*#__PURE__*/ _jsx(DropdownInput, {
+                    id: "dropdown-empty",
+                    value: value,
+                    onValueChange: setValue,
+                    items: [],
+                    open: open,
+                    onOpenChange: setOpen,
+                    focusedIndex: focusedIndex,
+                    onFocusedIndexChange: setFocusedIndex,
+                    placeholder: "Type to search...",
+                    emptyPlaceholder: "No results found"
+                })
+            ]
+        });
+    }
+};
+export const LoadingState = {
+    args: {},
+    render: ()=>{
+        const [value, setValue] = useState('apache');
+        const [open, setOpen] = useState(true);
+        const [focusedIndex, setFocusedIndex] = useState(-1);
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "w-[80vw] md:w-500",
+            children: [
+                /*#__PURE__*/ _jsx(Label, {
+                    htmlFor: "dropdown-loading",
+                    children: "Loading"
+                }),
+                /*#__PURE__*/ _jsx(DropdownInput, {
+                    id: "dropdown-loading",
+                    value: value,
+                    onValueChange: setValue,
+                    items: [],
+                    iconRight: /*#__PURE__*/ _jsx(Icon, {
+                        name: "spinner",
+                        className: "size-16 text-foreground-neutral-base"
+                    }),
+                    open: open,
+                    onOpenChange: setOpen,
+                    focusedIndex: focusedIndex,
+                    onFocusedIndexChange: setFocusedIndex,
+                    placeholder: "Type to search...",
+                    emptyPlaceholder: "Fetching..."
+                })
+            ]
+        });
+    }
+};
+export const DisabledState = {
+    args: {},
+    render: ()=>{
+        const [value, setValue] = useState('apache');
+        const [open, setOpen] = useState(false);
+        const [focusedIndex, setFocusedIndex] = useState(-1);
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "w-[80vw] md:w-500",
+            children: [
+                /*#__PURE__*/ _jsx(Label, {
+                    htmlFor: "dropdown-disabled",
+                    children: "Disabled"
+                }),
+                /*#__PURE__*/ _jsx(DropdownInput, {
+                    id: "dropdown-disabled",
+                    value: value,
+                    onValueChange: setValue,
+                    items: sampleItems,
+                    disabled: true,
+                    open: open,
+                    onOpenChange: setOpen,
+                    focusedIndex: focusedIndex,
+                    onFocusedIndexChange: setFocusedIndex,
+                    placeholder: "Disabled input",
+                    emptyPlaceholder: "No results found"
+                })
+            ]
+        });
+    }
+};
+
+//# sourceMappingURL=dropdown-input.stories.js.map

package/dist/components/dropdown-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dropdown-input';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dropdown-input/index.js

@@ -0,0 +1,3 @@
+export * from './dropdown-input.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './calendar';
 export * from './card';
 export * from './checkbox';
 export * from './code-block';
+export * from './combobox';
 export * from './command';
 export * from './confetti';
 export * from './count-up';
@@ -14,6 +15,7 @@ export * from './dashboard';
 export * from './date-picker';
 export * from './date-time-range-picker';
 export * from './dot-grid';
+export * from './dropdown-input';
 export * from './dropdown-menu';
 export * from './dynamic-item';
 export * from './empty-state';
@@ -27,6 +29,7 @@ export * from './label';
 export * from './modal';
 export * from './moving-border';
 export * from './popover';
+export * from './scroll-area';
 export * from './search';
 export * from './select';
 export * from './sheet';

package/dist/components/index.js

@@ -7,6 +7,7 @@ export * from './calendar/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './code-block/index.js';
+export * from './combobox/index.js';
 export * from './command/index.js';
 export * from './confetti/index.js';
 export * from './count-up/index.js';
@@ -14,6 +15,7 @@ export * from './dashboard/index.js';
 export * from './date-picker/index.js';
 export * from './date-time-range-picker/index.js';
 export * from './dot-grid/index.js';
+export * from './dropdown-input/index.js';
 export * from './dropdown-menu/index.js';
 export * from './dynamic-item/index.js';
 export * from './empty-state/index.js';
@@ -27,6 +29,7 @@ export * from './label/index.js';
 export * from './modal/index.js';
 export * from './moving-border/index.js';
 export * from './popover/index.js';
+export * from './scroll-area/index.js';
 export * from './search/index.js';
 export * from './select/index.js';
 export * from './sheet/index.js';

package/dist/components/input/input.d.ts

@@ -1,10 +1,13 @@
 import { type VariantProps } from 'class-variance-authority';
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 export declare const inputVariants: (props?: ({
     variant?: "base" | "component" | null | undefined;
     size?: "base" | "small" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type InputProps = Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants>;
-export declare function Input({ className, type, variant, size, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+type InputProps = Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants> & {
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+};
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};
 //# sourceMappingURL=input.d.ts.map

package/dist/components/input/input.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
+import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
 export const inputVariants = cva('', {
     variants: {
@@ -17,16 +18,31 @@ export const inputVariants = cva('', {
         size: 'base'
     }
 });
-export function Input({ className, type, variant, size, ...props }) {
-    return /*#__PURE__*/ _jsx("input", {
-        type: type,
-        "data-slot": "input",
-        className: cn('placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 px-8 text-sm leading-20 text-foreground-neutral-base shadow-button-neutral transition-[color,box-shadow] outline-none', 'hover:bg-background-field-hover', 'selection:bg-background-accent-neutral-soft selection:text-foreground-neutral-on-inverted', 'file:text-foreground-neutral-base file:inline-flex file:font-medium', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled', 'focus-visible:shadow-border-interactive-with-active', 'aria-invalid:shadow-border-error', inputVariants({
-            variant,
-            size
-        }), className),
-        ...props
+export const Input = /*#__PURE__*/ forwardRef(({ className, type, variant, size, iconLeft, iconRight, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "relative flex items-center w-full",
+        children: [
+            iconLeft && /*#__PURE__*/ _jsx("div", {
+                className: "absolute left-8 top-1/2 -translate-y-1/2 flex items-center justify-center shrink-0 pointer-events-none z-10",
+                children: iconLeft
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                ref: ref,
+                type: type,
+                "data-slot": "input",
+                className: cn('placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 text-sm leading-20 text-foreground-neutral-base shadow-button-neutral transition-[color,box-shadow] outline-none', 'hover:bg-background-field-hover', 'selection:bg-background-accent-neutral-soft selection:text-foreground-neutral-on-inverted', 'file:text-foreground-neutral-base file:inline-flex file:font-medium', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled', 'focus-visible:shadow-border-interactive-with-active', 'aria-invalid:shadow-border-error', iconLeft ? 'pl-32' : 'pl-8', iconRight ? 'pr-32' : 'pr-8', inputVariants({
+                    variant,
+                    size
+                }), className),
+                ...props
+            }),
+            iconRight && /*#__PURE__*/ _jsx("div", {
+                className: "absolute right-8 top-1/2 -translate-y-1/2 flex items-center justify-center shrink-0 pointer-events-none z-10",
+                children: iconRight
+            })
+        ]
     });
-}
+});
+Input.displayName = 'Input';
 
 //# sourceMappingURL=input.js.map

package/dist/components/input/input.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../../components/icon/index.js';
 import { Code, Header } from '../../components/typography/index.js';
 import { Input } from './input.js';
 const typeOptions = [
@@ -195,5 +196,70 @@ export const Types = {
                 }, t))
         })
 };
+export const WithIcons = {
+    render: (args)=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-24 w-full max-w-400",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Left Icon"
+                        }),
+                        /*#__PURE__*/ _jsx(Input, {
+                            ...args,
+                            placeholder: "Search...",
+                            iconLeft: /*#__PURE__*/ _jsx(Icon, {
+                                name: "searchLine",
+                                className: "size-16 text-foreground-neutral-muted"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Right Icon"
+                        }),
+                        /*#__PURE__*/ _jsx(Input, {
+                            ...args,
+                            placeholder: "Enter email",
+                            iconRight: /*#__PURE__*/ _jsx(Icon, {
+                                name: "mailLine",
+                                className: "size-16 text-foreground-neutral-muted"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Both Icons"
+                        }),
+                        /*#__PURE__*/ _jsx(Input, {
+                            ...args,
+                            placeholder: "Search users...",
+                            iconLeft: /*#__PURE__*/ _jsx(Icon, {
+                                name: "searchLine",
+                                className: "size-16 text-foreground-neutral-muted"
+                            }),
+                            iconRight: /*#__PURE__*/ _jsx(Icon, {
+                                name: "userLine",
+                                className: "size-16 text-foreground-neutral-muted"
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+};
 
 //# sourceMappingURL=input.stories.js.map

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+export * from './scroll-area';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/scroll-area/index.js

@@ -0,0 +1,3 @@
+export * from './scroll-area.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/scroll-area/scroll-area.d.ts

@@ -0,0 +1,6 @@
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import type { ComponentProps } from 'react';
+declare function ScrollArea({ className, children, ...props }: ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
+export { ScrollArea, ScrollBar };
+//# sourceMappingURL=scroll-area.d.ts.map