tw-react-components 0.0.158 → 0.0.161

package/index.esm.js

@@ -557,19 +557,19 @@ const variantClassNames = {
 };
 const sizeClassNames = {
     small: {
-        base: 'gap-1.5 text-sm h-7',
-        withChildren: 'px-2',
+        base: 'gap-1 text-sm h-6',
+        withChildren: 'px-1.5',
         icon: {
-            base: 'h-4 w-4',
-            withChildren: 'h-3 w-3',
+            base: 'h-3 w-3',
+            withChildren: 'h-2 w-2',
         },
     },
     medium: {
-        base: 'gap-2 text-base h-10',
-        withChildren: 'px-2.5',
+        base: 'gap-1.5 text-base h-9',
+        withChildren: 'px-2',
         icon: {
-            base: 'h-5 w-5',
-            withChildren: 'h-4 w-4',
+            base: 'h-4 w-4',
+            withChildren: 'h-3 w-3',
         },
     },
 };
@@ -594,7 +594,7 @@ const Block = forwardRef((_a, ref) => {
 
 const Card = forwardRef((_a, ref) => {
     var { children, className } = _a, blockProps = __rest(_a, ["children", "className"]);
-    return (jsx(Block, Object.assign({ className: cn('rounded-lg border p-3 dark:border-slate-700 dark:bg-slate-900', className) }, blockProps, { ref: ref, children: children })));
+    return (jsx(Block, Object.assign({ className: cn('rounded-lg border p-2 dark:border-slate-700 dark:bg-slate-900', className) }, blockProps, { ref: ref, children: children })));
 });
 
 const $Collapsible = CollapsiblePrimitive.Root;
@@ -628,7 +628,7 @@ const justifyClasses = {
 };
 const Flex = forwardRef((_a, ref) => {
     var { children, className, reverse, wrap, direction = 'row', align = 'start', justify = 'start' } = _a, blockProps = __rest(_a, ["children", "className", "reverse", "wrap", "direction", "align", "justify"]);
-    return (jsx(Block, Object.assign({ className: cn('flex gap-3', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className) }, blockProps, { ref: ref, children: children })));
+    return (jsx(Block, Object.assign({ className: cn('flex gap-2', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className) }, blockProps, { ref: ref, children: children })));
 });
 
 dayjs.extend(localeData);
@@ -804,35 +804,35 @@ const inputClasses = {
 };
 const sizeClasses = {
     small: {
-        label: 'text-sm',
-        input: 'text-sm py-1 px-2 h-7',
+        label: 'text-xs',
+        input: 'text-xs py-1 px-2 h-6',
         checkbox: {
-            input: 'w-4 h-4',
+            input: 'w-3 h-3',
             wrapper: 'h-6 gap-1',
         },
         suffix: {
-            wrapper: 'h-7',
-            icon: 'h-4 w-4 mx-1.5',
+            wrapper: 'h-6',
+            icon: 'h-3 w-3 mx-1.5',
         },
         clearButton: {
-            base: 'h-5 w-5',
+            base: 'h-4 w-4',
             withSuffixIcon: 'right-8',
         },
     },
     medium: {
-        label: 'text-base',
-        input: 'text-base py-2 px-3 h-10',
+        label: 'text-sm',
+        input: 'text-sm py-2 px-3 h-9',
         checkbox: {
-            input: 'w-5 h-5',
+            input: 'w-4 h-4',
             wrapper: 'h-8 gap-2',
         },
         suffix: {
-            wrapper: 'h-10',
-            icon: 'w-5 h-5 mx-2',
+            wrapper: 'h-9',
+            icon: 'w-4 h-4 mx-2',
         },
         clearButton: {
-            base: 'h-6 w-6',
-            withSuffixIcon: 'right-12',
+            base: 'h-5 w-5',
+            withSuffixIcon: 'right-9',
         },
     },
 };
@@ -879,7 +879,7 @@ const EmailInput = forwardRef((props, ref) => (jsx(BasicInput, Object.assign({ t
 
 const NumberInput = forwardRef((_a, ref) => {
     var { unit } = _a, props = __rest(_a, ["unit"]);
-    return (jsx(BasicInput, Object.assign({ type: "number" }, props, { suffixIcon: unit
+    return (jsx(BasicInput, Object.assign({ type: "number", inputClassName: cn(props.clearable && !!props.value && 'pr-8', props.className) }, props, { suffixIcon: unit
             ? ({ className }) => (jsx("div", { className: cn(className, 'flex w-min items-center'), onClick: props.onSuffixIconClick, children: unit }))
             : props.suffixIcon, ref: ref })));
 });
@@ -1241,8 +1241,11 @@ const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {
     RadioGroup: DropdownMenuRadioGroup,
 });
 
+const defaultRenderItem = (item, selected) => item.label;
+const defaultSearchPredicate = (item, searchValue) => item.label.toLowerCase().includes(searchValue.toLowerCase());
+const defaultSelectPredicate = (a, b) => a === b;
 const SelectInput = forwardRef((_a, ref) => {
-    var { className, items, renderItem = (item) => item.label, value, multiple, clearable, allowAddition, onNewItemAdded, search, searchPredicate = (item, searchValue) => item.label.toLowerCase().includes(searchValue.toLowerCase()), selectPredicate = (a, b) => a === b, onChange, readOnly, parentRef } = _a, props = __rest(_a, ["className", "items", "renderItem", "value", "multiple", "clearable", "allowAddition", "onNewItemAdded", "search", "searchPredicate", "selectPredicate", "onChange", "readOnly", "parentRef"]);
+    var { className, items, renderItem = defaultRenderItem, value, multiple, clearable, allowAddition, onNewItemAdded, search, searchPredicate = defaultSearchPredicate, selectPredicate = defaultSelectPredicate, onChange, readOnly, parentRef } = _a, props = __rest(_a, ["className", "items", "renderItem", "value", "multiple", "clearable", "allowAddition", "onNewItemAdded", "search", "searchPredicate", "selectPredicate", "onChange", "readOnly", "parentRef"]);
     const [open, setOpen] = useState(false);
     const [searchValue, setSearchValue] = useState('');
     const pureItems = useMemo(() => items.flatMap((item) => (item.group ? item.items : [item])), [items]);
@@ -1260,14 +1263,14 @@ const SelectInput = forwardRef((_a, ref) => {
     const filteredItems = useMemo(() => !search || !searchValue
         ? items
         : items.flatMap((item) => item.group
-            ? item.items.some((subItem) => subItem.label.toLowerCase().includes(searchValue.toLowerCase()))
+            ? item.items.some((subItem) => searchPredicate(subItem, searchValue))
                 ? [
-                    Object.assign(Object.assign({}, item), { items: item.items.filter((subItem) => subItem.label.toLowerCase().includes(searchValue.toLowerCase())) }),
+                    Object.assign(Object.assign({}, item), { items: item.items.filter((subItem) => searchPredicate(subItem, searchValue)) }),
                 ]
                 : []
-            : item.label.toLowerCase().includes(searchValue.toLowerCase())
+            : searchPredicate(item, searchValue)
                 ? [item]
-                : []), [items, search, searchValue]);
+                : []), [items, search, searchPredicate, searchValue]);
     const text = useMemo(() => selectedItems.length
         ? !multiple
             ? selectedItems[0].label
@@ -1297,7 +1300,10 @@ const SelectInput = forwardRef((_a, ref) => {
             }
         }
     }, [clearable, multiple, onChange, pureItems, selectedItems, selectedMap]);
-    const handleOnSearchValueChange = (event) => setSearchValue(event.target.value);
+    const handleOnSearchValueChange = (event) => {
+        event.stopPropagation();
+        setSearchValue(event.target.value);
+    };
     const clearSearchValue = () => setSearchValue('');
     const handleOnClear = () => {
         if (readOnly)
@@ -1318,7 +1324,7 @@ const SelectInput = forwardRef((_a, ref) => {
                 handleOnSelect(option.id);
             }, children: jsx("span", { children: renderItem(option, isNotNullOrUndefined(selectedMap[option.id])) }) }));
     }, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
-    return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), ref: ref, readOnly: true })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, clearable: !!searchValue.length, onClear: clearSearchValue }), jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
+    return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), ref: ref, readOnly: true })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, onKeyUp: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), clearable: !!searchValue.length, onClear: clearSearchValue }), jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
                         (allowAddition && searchValue ? (jsxs("button", { className: "rounded bg-slate-100 py-1.5 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, children: ["Add '", searchValue, "'"] })) : (jsx("div", { className: "py-1.5 text-center text-slate-500", children: "No items." }))), jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, children: filteredItems.map((item, index) => item.group ? (jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", children: item.label }), item.items.map((subItem) => (jsx(RenderOption, Object.assign({}, subItem), subItem.id))), index < filteredItems.length - 1 && (jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsx(RenderOption, Object.assign({}, item), item.id))) })] })] }));
 });
 function isNotNullOrUndefined(value) {
@@ -1377,14 +1383,14 @@ const HintRoot = forwardRef(({ children }, ref) => (jsx(Block, { className: "rel
 HintRoot.displayName = 'HintRoot';
 const dotSizeClassNames = {
     small: {
-        base: 'h-2 w-2',
+        base: 'h-1.5 w-1.5',
         top: '-top-0.5',
         right: '-right-0.5',
         bottom: '-bottom-0.5',
         left: '-left-0.5',
     },
     medium: {
-        base: 'h-3 w-3',
+        base: 'h-2.5 w-2.5',
         top: '-top-1',
         right: '-right-1',
         bottom: '-bottom-1',
@@ -1435,7 +1441,7 @@ const badgeSizeClassNames = {
 };
 const HintBadge = forwardRef((_a, ref) => {
     var { className, size = 'small', placement = 'top-right' } = _a, props = __rest(_a, ["className", "size", "placement"]);
-    return (jsx(Badge, Object.assign({ className: cn('absolute px-1', size === 'small' ? 'h-5' : 'h-6', {
+    return (jsx(Badge, Object.assign({ className: cn('absolute z-10 px-1', size === 'small' ? 'h-4' : 'h-5', {
             [`${badgeSizeClassNames.top} ${badgeSizeClassNames.left}`]: placement === 'top-left',
             [`${badgeSizeClassNames.top} ${badgeSizeClassNames.right}`]: placement === 'top-right',
             [`${badgeSizeClassNames.bottom} ${badgeSizeClassNames.right}`]: placement === 'bottom-right',
@@ -1451,13 +1457,13 @@ const Pagination = ({ disabled, pageSize = 10, currentPage, totalItems, setCurre
     useEffect(() => {
         setCurrentPage((page) => Math.min(page, Math.max(0, totalPages - 1)));
     }, [setCurrentPage, totalPages]);
-    return (jsx(Flex, { justify: "end", children: jsxs(Flex, { className: "h-10 gap-0 divide-x rounded-md border border-slate-300 bg-white dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800", children: [jsx(PaginationItem, { title: "First page", onClick: () => setCurrentPage(0), disabled: !currentPage || disabled, children: jsx(ChevronsLeftIcon, { className: "h-5 w-5" }) }), jsx(PaginationItem, { title: "Previous page", onClick: () => currentPage && setCurrentPage(currentPage - 1), disabled: !currentPage || disabled, children: jsx(ChevronLeftIcon, { className: "h-5 w-5" }) }), pagination.map((page, index) => (jsx(PaginationItem, { active: page !== '...' && page - 1 === currentPage, title: page !== '...' ? `Page ${page}` : undefined, onClick: page !== '...' ? () => setCurrentPage(page - 1) : undefined, disabled: page === '...' || disabled, children: page }, index))), jsx(PaginationItem, { title: "Next page", onClick: () => currentPage + 1 < totalPages && setCurrentPage(currentPage + 1), disabled: currentPage + 1 === totalPages || disabled, children: jsx(ChevronRightIcon, { className: "h-5 w-5" }) }), jsx(PaginationItem, { title: "Last page", onClick: () => setCurrentPage(Math.floor(totalItems && !(totalItems % pageSize)
+    return (jsx(Flex, { justify: "end", children: jsxs(Flex, { className: "h-9 gap-0 divide-x rounded-md border border-slate-300 bg-white dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800", children: [jsx(PaginationItem, { title: "First page", onClick: () => setCurrentPage(0), disabled: !currentPage || disabled, children: jsx(ChevronsLeftIcon, { className: "h-4 w-4" }) }), jsx(PaginationItem, { title: "Previous page", onClick: () => currentPage && setCurrentPage(currentPage - 1), disabled: !currentPage || disabled, children: jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), pagination.map((page, index) => (jsx(PaginationItem, { active: page !== '...' && page - 1 === currentPage, title: page !== '...' ? `Page ${page}` : undefined, onClick: page !== '...' ? () => setCurrentPage(page - 1) : undefined, disabled: page === '...' || disabled, children: page }, index))), jsx(PaginationItem, { title: "Next page", onClick: () => currentPage + 1 < totalPages && setCurrentPage(currentPage + 1), disabled: currentPage + 1 === totalPages || disabled, children: jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), jsx(PaginationItem, { title: "Last page", onClick: () => setCurrentPage(Math.floor(totalItems && !(totalItems % pageSize)
                         ? (totalItems - 1) / pageSize
-                        : totalItems / pageSize)), disabled: currentPage + 1 === totalPages || disabled, children: jsx(ChevronsRightIcon, { className: "h-5 w-5" }) })] }) }));
+                        : totalItems / pageSize)), disabled: currentPage + 1 === totalPages || disabled, children: jsx(ChevronsRightIcon, { className: "h-4 w-4" }) })] }) }));
 };
 const PaginationItem = (_a) => {
     var { children, active, disabled } = _a, props = __rest(_a, ["children", "active", "disabled"]);
-    return (jsx(Flex, Object.assign({ className: cn('w-10 first:rounded-l-md last:rounded-r-md', {
+    return (jsx(Flex, Object.assign({ className: cn('w-9 text-sm first:rounded-l-md last:rounded-r-md', {
             'text-slate-400 dark:text-slate-500': disabled,
             'bg-slate-100 dark:bg-slate-900': active,
             'cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-900': !disabled && props.onClick,
@@ -1715,7 +1721,7 @@ const FormDialog = ({ className, formClassName, open, title, form, children, sub
             // do nothering
         }
     });
-    return (jsx(As, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(As.Content, { className: className, children: [jsx(As.Header, { children: jsx(As.Title, { children: title }) }), jsx(FormProvider, Object.assign({}, form, { children: jsx("form", { id: `form-${id}`, className: cn('flex h-full w-full flex-col gap-3 overflow-auto', formClassName), onSubmit: form.handleSubmit(handleSubmit, onInvalid), children: children }) })), jsxs(As.Footer, { className: "w-full sm:justify-between", children: [extraAction, jsxs(As.Footer, { className: "ml-auto", children: [jsx(As.Close, { asChild: true, children: jsx(Button, { color: "red", children: cancelLabel }) }), jsx(Button, { color: "green", type: "submit", form: `form-${id}`, disabled: form.formState.isSubmitting, children: submitLabel })] })] })] }) }));
+    return (jsx(As, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(As.Content, { className: className, children: [jsx(As.Header, { children: jsx(As.Title, { children: title }) }), jsx(FormProvider, Object.assign({}, form, { children: jsx("form", { id: `form-${id}`, className: cn('flex h-full w-full flex-col gap-2 overflow-auto', formClassName), onSubmit: form.handleSubmit(handleSubmit, onInvalid), children: children }) })), jsxs(As.Footer, { className: "w-full sm:justify-between", children: [extraAction, jsxs(As.Footer, { className: "ml-auto", children: [jsx(As.Close, { asChild: true, children: jsx(Button, { color: "red", children: cancelLabel }) }), jsx(Button, { color: "green", type: "submit", form: `form-${id}`, disabled: form.formState.isSubmitting, children: submitLabel })] })] })] }) }));
 };
 
 function ListSorter({ className, items, idResolver, renderer, onChange, }) {
@@ -2007,8 +2013,8 @@ const SidebarMenuSubItem = forwardRef((_a, ref) => {
 SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
 const SidebarMenuSubButton = forwardRef((_a, ref) => {
     var { asChild = false, size = 'md', isActive, className } = _a, props = __rest(_a, ["asChild", "size", "isActive", "className"]);
-    const Comp = asChild ? Slot : 'a';
-    return (jsx(Comp, Object.assign({ ref: ref, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className) }, props)));
+    const Comp = asChild ? Slot : 'button';
+    return (jsx(Comp, Object.assign({ ref: ref, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 w-full min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className) }, props)));
 });
 SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
 const Sidebar = Object.assign($Sidebar, {
@@ -2035,7 +2041,7 @@ const Sidebar = Object.assign($Sidebar, {
     Trigger: SidebarTrigger,
 });
 
-const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, }) => (jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, { className: sidebarTriggerClassName }), leftSlot] }), rightSlot] }) }));
+const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, }) => (jsx(Block, { className: cn('border-b p-2 dark:border-slate-700', className), fullWidth: true, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, { className: sidebarTriggerClassName }), leftSlot] }), rightSlot] }) }));
 
 const Layout = (_a) => {
     var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps, NavLink, useLocation } = _a;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.158",
+  "version": "0.0.161",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "type": "module",

package/src/components/Sidebar/index.d.ts

@@ -72,11 +72,11 @@ export declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<imp
         showIcon?: boolean;
     }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     MenuSub: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
-    MenuSubButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+    MenuSubButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
         asChild?: boolean;
         size?: "sm" | "md";
         isActive?: boolean;
-    }, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     MenuSubItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
     Rail: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-separator").SeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;