tw-react-components 0.0.157 → 0.0.159

package/index.esm.js

@@ -16,7 +16,6 @@ import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, close
 import { restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { useLocation, NavLink } from 'react-router';
 import { Slot } from '@radix-ui/react-slot';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -1242,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]);
@@ -1261,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
@@ -1298,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)
@@ -1319,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) {
@@ -2008,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, {
@@ -2039,14 +2044,14 @@ const Sidebar = Object.assign($Sidebar, {
 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 Layout = (_a) => {
-    var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps } = _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;
     return (jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [header && (jsx(Sidebar.Header, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: header }) }) })), jsxs(Sidebar.Content, { className: "gap-0", children: [items
                                 .filter((item) => !item.hidden)
-                                .map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items
+                                .map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item, { NavLink: NavLink, useLocation: useLocation })) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items
                                                 .filter((subItem) => !subItem.hidden)
-                                                .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
+                                                .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem, { NavLink: NavLink, useLocation: useLocation }), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
 };
-const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, }) => {
+const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, NavLink, useLocation }) => {
     const location = useLocation();
     const { open } = useSidebar();
     const currentPath = useMemo(() => location.pathname.replace(basePath, '').replace(/^\/*/, ''), [basePath, location.pathname]);

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.157",
+  "version": "0.0.159",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "type": "module",

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

@@ -1,4 +1,4 @@
-import { ButtonProps, ButtonVariant } from '../Button';
+import type { ButtonProps, ButtonVariant } from '../Button';
 export type BadgeVariant = Exclude<ButtonVariant, 'text'>;
 export type BadgeProps = Omit<ButtonProps, 'variant'> & {
     variant?: BadgeVariant;

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

@@ -1,4 +1,4 @@
-import { ComponentProps, PropsWithoutRef } from 'react';
+import type { ComponentProps, PropsWithoutRef } from 'react';
 export type BlockProps = PropsWithoutRef<ComponentProps<'div'> & {
     className?: string;
     centered?: boolean;

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

@@ -1,6 +1,6 @@
-import { LucideIcon } from 'lucide-react';
-import { ComponentProps, PropsWithoutRef } from 'react';
-import { Color, Size } from '../types';
+import type { LucideIcon } from 'lucide-react';
+import type { ComponentProps, PropsWithoutRef } from 'react';
+import type { Color, Size } from '../types';
 export type ButtonVariant = 'filled' | 'outlined' | 'text';
 export type ButtonProps = PropsWithoutRef<ComponentProps<'button'>> & {
     size?: Size;

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

@@ -1,8 +1,8 @@
-import { LucideIcon } from 'lucide-react';
-import { ComponentProps, FC, ReactNode } from 'react';
-import { HintBadgeProps, HintDotProps } from '../Hint';
-import { PaginationProps } from '../Pagination';
-import { Color, Paths, ResolvePath } from '../types';
+import type { LucideIcon } from 'lucide-react';
+import type { ComponentProps, FC, ReactNode } from 'react';
+import type { HintBadgeProps, HintDotProps } from '../Hint';
+import type { PaginationProps } from '../Pagination';
+import type { Color, Paths, ResolvePath } from '../types';
 export type DataTableColumn<T, Field extends Paths<T> = Paths<T>> = {
     className?: string;
     header: ReactNode;

package/src/components/Dialog/ConfirmDialog.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactNode } from 'react';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
 type Props = {
     open: boolean;
     title: ReactNode;

package/src/components/Dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FC, HTMLAttributes } from 'react';
+import type { FC, HTMLAttributes } from 'react';
 export declare const Dialog: FC<DialogPrimitive.DialogProps> & {
     Portal: FC<DialogPrimitive.DialogPortalProps>;
     Overlay: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/src/components/Dialog/FormDialog.d.ts

@@ -1,7 +1,7 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { FieldValues, SubmitErrorHandler, SubmitHandler, UseFormReturn } from 'react-hook-form';
+import type { PropsWithChildren, ReactNode } from 'react';
+import type { FieldValues, SubmitErrorHandler, SubmitHandler, UseFormReturn } from 'react-hook-form';
 import { Sheet } from '../Sheet';
-import { Dialog } from './Dialog';
+import type { Dialog } from './Dialog';
 type Props<T extends FieldValues> = {
     className?: string;
     formClassName?: string;

package/src/components/Dialog/ListSorterDialog.d.ts

@@ -1,4 +1,4 @@
-import { ListSorterItem, ListSorterProps } from '../ListSorter';
+import type { ListSorterItem, ListSorterProps } from '../ListSorter';
 export type ListSorterDialogProps<T extends ListSorterItem> = {
     className?: string;
     open: boolean;

package/src/components/Dialog/PdfViewerDialog.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 type Props = {
     open: boolean;
     title: ReactNode;

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

@@ -1,5 +1,5 @@
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 export declare const DropdownMenu: import("react").FC<DropdownMenuPrimitive.DropdownMenuProps> & {
     Trigger: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,4 @@
-import { BlockProps } from '../Block';
+import type { BlockProps } from '../Block';
 type Direction = 'row' | 'column';
 type Position = 'start' | 'center' | 'end';
 export type FlexProps = BlockProps & {

package/src/components/Form/controls/FormGroup.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 export type FormGroupProps = PropsWithChildren<{
     className?: string;
     label: string;

package/src/components/Form/controls/Label.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactNode } from 'react';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
 type Props = {
     className?: string;
     description?: ReactNode;

package/src/components/Form/controls/custom/date-time/DateSelector.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 export type View = 'days' | 'months' | 'years';
 type DateSelectorProps = {
     date: Date;

package/src/components/Form/controls/custom/date-time/DaysView.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 type DaysViewProps = {
     date: Date;
     value?: string | Date | null;

package/src/components/Form/controls/custom/date-time/MonthsView.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 type MonthsViewProps = {
     date: Date;
     value?: string | Date | null;

package/src/components/Form/controls/custom/date-time/TimeSelector.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 type TimeSelectorProps = {
     date: Date;
     step?: number;

package/src/components/Form/controls/custom/date-time/YearsView.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 type YearsViewProps = {
     date: Date;
     value?: string | Date | null;

package/src/components/Form/controls/custom/date-time/index.d.ts

@@ -1,4 +1,4 @@
-import { BasicInputProps } from '../../primitive';
+import type { BasicInputProps } from '../../primitive';
 export type DateTimeInputType = 'date' | 'time' | 'datetime-local';
 export type DateTimeInputProps = {
     value?: string | Date | null;

package/src/components/Form/controls/custom/file.d.ts

@@ -1,4 +1,4 @@
-import { BasicInputProps } from '../primitive';
+import type { BasicInputProps } from '../primitive';
 export type FileInputProps = {
     value?: string | null;
     onChange?: (item?: string) => void;

package/src/components/Form/controls/custom/select/index.d.ts

@@ -1,5 +1,5 @@
-import { ForwardedRef, JSX, ReactNode, RefObject } from 'react';
-import { BasicInputProps } from '../../primitive';
+import type { ForwardedRef, JSX, ReactNode, RefObject } from 'react';
+import type { BasicInputProps } from '../../primitive';
 export type SelectInputType = 'select';
 export type SelectItem<T, Group extends boolean = false> = {
     id: string | number;

package/src/components/Form/controls/primitive/BasicInput.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps, FC, MouseEvent, PropsWithChildren, ReactNode } from 'react';
-import { Size } from '../../../types';
+import type { ComponentProps, FC, MouseEvent, PropsWithChildren, ReactNode } from 'react';
+import type { Size } from '../../../types';
 export type InputType = ComponentProps<'input'>['type'] | 'textarea';
 export type BasicInputProps<Type extends InputType> = {
     inputClassName?: string;

package/src/components/Form/controls/primitive/CheckBoxInput.d.ts

@@ -1,3 +1,3 @@
-import { BasicInputProps } from './BasicInput';
+import type { BasicInputProps } from './BasicInput';
 export type CheckboxInputProps = Omit<BasicInputProps<'checkbox'>, 'type'>;
 export declare const CheckboxInput: import("react").ForwardRefExoticComponent<CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/Form/controls/primitive/EmailInput.d.ts

@@ -1,3 +1,3 @@
-import { BasicInputProps } from './BasicInput';
+import type { BasicInputProps } from './BasicInput';
 export type EmailInputProps = Omit<BasicInputProps<'email'>, 'type'>;
 export declare const EmailInput: import("react").ForwardRefExoticComponent<EmailInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/Form/controls/primitive/NumberInput.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { BasicInputProps } from './BasicInput';
+import type { ReactNode } from 'react';
+import type { BasicInputProps } from './BasicInput';
 export type NumberInputProps = Omit<BasicInputProps<'number'>, 'type'> & {
     unit?: ReactNode;
 };

package/src/components/Form/controls/primitive/PasswordInput.d.ts

@@ -1,3 +1,3 @@
-import { BasicInputProps } from './BasicInput';
+import type { BasicInputProps } from './BasicInput';
 export type PasswordInputProps = Omit<BasicInputProps<'number'>, 'type'>;
 export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/Form/controls/primitive/TextInput.d.ts

@@ -1,3 +1,3 @@
-import { BasicInputProps } from './BasicInput';
+import type { BasicInputProps } from './BasicInput';
 export type TextInputProps = Omit<BasicInputProps<'text'>, 'type'>;
 export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/Form/controls/primitive/TextareaInput.d.ts

@@ -1,3 +1,3 @@
-import { BasicInputProps } from './BasicInput';
+import type { BasicInputProps } from './BasicInput';
 export type TextareaInputProps = Omit<BasicInputProps<'textarea'>, 'type'>;
 export declare const TextareaInput: import("react").ForwardRefExoticComponent<TextareaInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/src/components/Form/controls/with-form.d.ts

@@ -1,7 +1,7 @@
-import { ForwardRefExoticComponent } from 'react';
-import { ControllerRenderProps, Validate } from 'react-hook-form';
-import { DateTimeInputProps, DateTimeInputType, FileInputProps, SelectInputProps, SelectInputType } from './custom';
-import { BasicInputProps, CheckboxInputProps, EmailInputProps, InputType, NumberInputProps, PasswordInputProps, TextInputProps, TextareaInputProps } from './primitive';
+import type { ForwardRefExoticComponent } from 'react';
+import type { ControllerRenderProps, Validate } from 'react-hook-form';
+import type { DateTimeInputProps, DateTimeInputType, FileInputProps, SelectInputProps, SelectInputType } from './custom';
+import type { BasicInputProps, CheckboxInputProps, EmailInputProps, InputType, NumberInputProps, PasswordInputProps, TextInputProps, TextareaInputProps } from './primitive';
 export type WithFormProps<Type extends InputType | SelectInputType, Props = Type extends DateTimeInputType ? DateTimeInputProps : Type extends SelectInputType ? SelectInputProps : Omit<BasicInputProps<Type>, 'type'>> = {
     name: string;
     pattern?: RegExp;

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

@@ -1,5 +1,5 @@
-import { BadgeProps, BadgeVariant } from '../Badge';
-import { Color, Size } from '../types';
+import type { BadgeProps, BadgeVariant } from '../Badge';
+import type { Color, Size } from '../types';
 export type HintPlacement = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
 export type HintVariant = BadgeVariant;
 export type HintDotProps = {

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

@@ -1,6 +1,7 @@
-import { LucideIcon } from 'lucide-react';
-import { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
-import { NavbarProps } from '../Navbar';
+import type { LucideIcon } from 'lucide-react';
+import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
+import type { NavLinkProps, useLocation } from 'react-router';
+import type { NavbarProps } from '../Navbar';
 import { Sidebar } from '../Sidebar';
 export type SidebarItem = {
     pathname: string;
@@ -27,6 +28,8 @@ type Props = {
     className?: string;
     sidebarProps: SidebarProps;
     navbarProps?: NavbarProps;
+    NavLink: FC<NavLinkProps>;
+    useLocation: typeof useLocation;
 };
 export declare const Layout: FC<PropsWithChildren<Props>>;
 export {};

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

@@ -1,5 +1,5 @@
-import { LucideIcon } from 'lucide-react';
-import { Size } from '../types';
+import type { LucideIcon } from 'lucide-react';
+import type { Size } from '../types';
 export declare const List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         size?: Size;

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

@@ -1,5 +1,5 @@
-import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
-import { ReactElement, ReactNode } from 'react';
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import type { ReactElement, ReactNode } from 'react';
 export type ListSorterItem = number | string | boolean | Record<'rank', number>;
 export type ListSorterProps<T extends ListSorterItem> = {
     className?: string;

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 export type NavbarProps = {
     className?: string;
     sidebarTriggerClassName?: string;

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

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction } from 'react';
+import type { Dispatch, FC, SetStateAction } from 'react';
 export type PaginationProps = {
     disabled?: boolean;
     pageSize?: number;

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

@@ -1,6 +1,6 @@
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { type VariantProps } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, FC, HTMLAttributes } from 'react';
+import type { ComponentPropsWithoutRef, FC, HTMLAttributes } from 'react';
 declare const sheetVariants: (props?: ({
     side?: "top" | "bottom" | "left" | "right" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from 'class-variance-authority';
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { Tooltip } from '../Tooltip';
 export declare const SIDEBAR_COOKIE_NAME = "sidebar:state";
 export declare const SIDEBAR_COOKIE_MAX_AGE: number;
@@ -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>>;

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

@@ -1,2 +1,2 @@
-import { FC, HTMLAttributes } from 'react';
+import type { FC, HTMLAttributes } from 'react';
 export declare const Skeleton: FC<HTMLAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 type Props = {
     className?: string;
     fullScreen?: boolean;

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

@@ -1,5 +1,5 @@
 import * as SwitchPrimitives from '@radix-ui/react-switch';
-import { ComponentProps, ComponentPropsWithoutRef } from 'react';
+import type { ComponentProps, ComponentPropsWithoutRef } from 'react';
 export type SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
     thumbProps?: ComponentProps<typeof SwitchPrimitives.Thumb>;
 };

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 export declare const Table: FC<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>> & {
     Head: FC<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>>;
     HeadCell: FC<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>>;

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 type Props = {
     className?: string;
 };

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

@@ -1,5 +1,5 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { FC, PropsWithChildren, ReactNode } from 'react';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
 export type TooltipProps = PropsWithChildren<{
     className?: string;
     content: ReactNode;

package/src/contexts/LayoutContext.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 export type ThemeState = 'dark' | 'light' | 'system';
 export type LayoutContext = {
     theme: ThemeState;

package/src/helpers/compareDates.d.ts

@@ -1,2 +1,2 @@
-import { OpUnitType } from 'dayjs';
+import type { OpUnitType } from 'dayjs';
 export declare function compareDates(date1: Date, date2: Date, startOf?: OpUnitType): number;

package/src/helpers/mergeRefs.d.ts

@@ -1,2 +1,2 @@
-import { LegacyRef, MutableRefObject, RefCallback } from 'react';
+import type { LegacyRef, MutableRefObject, RefCallback } from 'react';
 export declare function mergeRefs<T = any>(refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined | null>): RefCallback<T>;

package/src/hooks/useOnSwipe.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 type SwipeDirection = 'up' | 'left' | 'bottom' | 'right';
 export declare function useOnSwipe(element: RefObject<HTMLElement>, onSwipe: (direction: SwipeDirection) => any | false, minSwipeDistance?: number): void;
 export {};

package/src/hooks/useOutsideClick.d.ts

@@ -1,2 +1,2 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 export declare function useOutsideClick(ref: RefObject<HTMLDivElement>, callback: () => void): void;