@vezham/react 26.0.0-alpha.4 → 26.0.0-alpha.6

package/dist/lib/components/panel/header/storage/types.d.ts

@@ -0,0 +1,482 @@
+import { type ComponentPropsWithRef, type ElementType, ReactNode } from 'react';
+import { ArchiveItem, ArchiveItemRendererProps } from './archive/types';
+import { TrashItem, TrashItemRendererProps } from './trash/types';
+import { tvProps, tvSlots } from './variant';
+interface Props extends tvProps, ComponentPropsWithRef<'div'> {
+    as?: ElementType;
+    classNames?: Partial<Record<tvSlots, string>>;
+    archiveItems?: ArchiveItem[];
+    trashItems?: TrashItem[];
+    onUnarchive?: (id: string) => void;
+    onDeleteFromArchive?: (id: string) => void;
+    onRestore?: (id: string) => void;
+    onDeletePermanently?: (id: string) => void;
+    onClearAllArchive?: () => void;
+    onClearAllTrash?: () => void;
+    onRestoreAllTrash?: () => void;
+    onItemClick?: (url: string) => void;
+    renderArchiveItem?: (props: ArchiveItemRendererProps) => ReactNode;
+    renderTrashItem?: (props: TrashItemRendererProps) => ReactNode;
+}
+declare const useProps: (originalProps: Props) => {
+    Component: ElementType;
+    domRef: import("react").Ref<HTMLDivElement> | undefined;
+    slots: {
+        tabs: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        tabs_list_container: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        tabs_list: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        tab_archive: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        tab_trash: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        tab_indicator: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        container: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        search_input: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        search_input_wrapper: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        search_icon: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        actions_bar: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        actions_bar_with_gap: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        clear_all_button: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        restore_all_button: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        empty_container: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        empty_icon: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        empty_title: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        empty_description: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        items_container: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        date_group: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        date_header: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        date_label: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        date_divider: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        items_list: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item_favicon: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item_fallback_icon: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item_content: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item_title: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item_url: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item_actions: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        unarchive_button: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        restore_button: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        delete_button: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        delete_permanent_button: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        action_icon: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        action_icon_success: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        action_icon_danger: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        action_icon_default: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & {
+        tabs: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        tabs_list_container: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        tabs_list: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        tab_archive: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        tab_trash: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        tab_indicator: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        container: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        search_input: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        search_input_wrapper: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        search_icon: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        actions_bar: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        actions_bar_with_gap: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        clear_all_button: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        restore_all_button: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        empty_container: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        empty_icon: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        empty_title: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        empty_description: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        items_container: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        date_group: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        date_header: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        date_label: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        date_divider: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        items_list: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item_favicon: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item_fallback_icon: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item_content: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item_title: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item_url: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        item_actions: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        unarchive_button: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        restore_button: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        delete_button: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        delete_permanent_button: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        action_icon: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        action_icon_success: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        action_icon_danger: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        action_icon_default: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & {
+        base: (slotProps?: ({
+            size?: "lg" | "sm" | "md" | undefined;
+            variant?: "dark" | "light" | "default" | "glass" | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    };
+    classNames: Partial<Record<"tabs" | "base" | "search_input" | "search_input_wrapper" | "search_icon" | "empty_container" | "empty_icon" | "empty_title" | "empty_description" | "item" | "tabs_list_container" | "tabs_list" | "tab_archive" | "tab_trash" | "tab_indicator" | "container" | "actions_bar" | "actions_bar_with_gap" | "clear_all_button" | "restore_all_button" | "items_container" | "date_group" | "date_header" | "date_label" | "date_divider" | "items_list" | "item_favicon" | "item_fallback_icon" | "item_content" | "item_title" | "item_url" | "item_actions" | "unarchive_button" | "restore_button" | "delete_button" | "delete_permanent_button" | "action_icon" | "action_icon_success" | "action_icon_danger" | "action_icon_default", string>> | undefined;
+    children: ReactNode;
+    getTabsProps: () => {
+        className: string;
+    };
+    getTabsListContainerProps: () => {
+        className: string;
+    };
+    getTabsListProps: () => {
+        className: string;
+        'aria-label': string;
+    };
+    getTabArchiveProps: () => {
+        id: string;
+        className: string;
+    };
+    getTabTrashProps: () => {
+        id: string;
+        className: string;
+    };
+    getTabIndicatorProps: () => {
+        className: string;
+    };
+    getContainerProps: () => {
+        className: string;
+    };
+    getSearchInputProps: (isArchive: boolean) => {
+        className: import("tailwind-variants").CnReturn;
+        placeholder: string;
+        variant: "secondary";
+    };
+    getActionsBarProps: (hasRestore: boolean) => {
+        className: string;
+    };
+    getClearAllButtonProps: () => {
+        size: "sm";
+        variant: "danger-soft";
+    };
+    getRestoreAllButtonProps: () => {
+        size: "sm";
+        variant: "outline";
+        className: string;
+    };
+    getEmptyContainerProps: () => {
+        className: string;
+    };
+    getEmptyIconProps: () => {
+        size: number;
+        className: string;
+    };
+    getEmptyTitleProps: () => {
+        className: string;
+    };
+    getEmptyDescriptionProps: () => {
+        className: string;
+    };
+    getItemsContainerProps: () => {
+        className: string;
+    };
+    getDateGroupProps: () => {
+        className: string;
+    };
+    getDateHeaderProps: () => {
+        className: string;
+    };
+    getDateLabelProps: () => {
+        className: string;
+    };
+    getDateDividerProps: () => {
+        className: string;
+    };
+    getItemsListProps: () => {
+        className: string;
+    };
+    getItemProps: () => {
+        className: string;
+    };
+    getItemFaviconProps: () => {
+        className: string;
+        onError: (e: React.SyntheticEvent<HTMLImageElement>) => void;
+    };
+    getItemFallbackIconProps: () => {
+        size: number;
+        className: string;
+    };
+    getItemContentProps: () => {
+        className: string;
+    };
+    getItemTitleProps: (title: string) => {
+        className: string;
+        children: string;
+    };
+    getItemUrlProps: (url: string) => {
+        className: string;
+        children: string;
+    };
+    getItemActionsProps: () => {
+        className: string;
+    };
+    getUnarchiveButtonProps: () => {
+        size: "sm";
+        className: string;
+        'aria-label': string;
+    };
+    getRestoreButtonProps: () => {
+        size: "sm";
+        className: string;
+        'aria-label': string;
+    };
+    getDeleteButtonProps: () => {
+        size: "sm";
+        className: string;
+        'aria-label': string;
+    };
+    getDeletePermanentButtonProps: () => {
+        size: "sm";
+        className: string;
+        'aria-label': string;
+    };
+    getActionIconProps: (color?: "success" | "danger" | "default") => {
+        size: number;
+        className: string;
+    };
+    externalArchiveItems: ArchiveItem[] | undefined;
+    externalTrashItems: TrashItem[] | undefined;
+    onUnarchive: ((id: string) => void) | undefined;
+    onDeleteFromArchive: ((id: string) => void) | undefined;
+    onRestore: ((id: string) => void) | undefined;
+    onDeletePermanently: ((id: string) => void) | undefined;
+    onClearAllArchive: (() => void) | undefined;
+    onClearAllTrash: (() => void) | undefined;
+    onRestoreAllTrash: (() => void) | undefined;
+    onItemClick: ((url: string) => void) | undefined;
+    renderArchiveItem: ((props: ArchiveItemRendererProps) => ReactNode) | undefined;
+    renderTrashItem: ((props: TrashItemRendererProps) => ReactNode) | undefined;
+};
+export { useProps };
+export type { ArchiveItem, Props, TrashItem };
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/components/panel/header/storage/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/header/storage/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI/E,OAAO,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AACvE,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAO,MAAM,WAAW,CAAA;AAEjD,UAAU,KAAM,SAAQ,OAAO,EAAE,qBAAqB,CAAC,KAAK,CAAC;IAC3D,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAC7C,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAA;IAClE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,SAAS,CAAA;CAC/D;AAED,QAAA,MAAM,QAAQ,GAAI,eAAe,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCA6DI,OAAO;;;;;qCASP,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAgEhC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;;;;;;;;;+BAgBnB,MAAM;;;;2BAKV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAmCA,SAAS,GAAG,QAAQ,GAAG,SAAS;;;;;;uBA1MjD,MAAM,KAAK,IAAI;+BACP,MAAM,KAAK,IAAI;qBACzB,MAAM,KAAK,IAAI;+BACL,MAAM,KAAK,IAAI;8BAChB,IAAI;4BACN,IAAI;8BACF,IAAI;wBACV,MAAM,KAAK,IAAI;gCACP,wBAAwB,KAAK,SAAS;8BACxC,sBAAsB,KAAK,SAAS;CA+P/D,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA;AACnB,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,CAAA"}

package/dist/lib/components/panel/header/storage/types.js

@@ -0,0 +1,155 @@
+import { tva } from "./variant.js";
+import { cn } from "@vezham/react-v3";
+//#region src/lib/components/panel/header/storage/types.ts
+var useProps = (originalProps) => {
+	const { variant, size, as, ref, children, classNames, archiveItems: externalArchiveItems, trashItems: externalTrashItems, onUnarchive, onDeleteFromArchive, onRestore, onDeletePermanently, onClearAllArchive, onClearAllTrash, onRestoreAllTrash, onItemClick, renderArchiveItem, renderTrashItem, ...otherProps } = originalProps;
+	const Component = as || "div";
+	const domRef = ref;
+	const slots = tva({
+		variant,
+		size
+	});
+	const getTabsProps = () => ({ className: slots.tabs({ class: classNames?.tabs }) });
+	const getTabsListContainerProps = () => ({ className: slots.tabs_list_container({ class: classNames?.tabs_list_container }) });
+	const getTabsListProps = () => ({
+		className: slots.tabs_list({ class: classNames?.tabs_list }),
+		"aria-label": "Archive and Trash tabs"
+	});
+	const getTabArchiveProps = () => ({
+		id: "archive",
+		className: slots.tab_archive({ class: classNames?.tab_archive })
+	});
+	const getTabTrashProps = () => ({
+		id: "trash",
+		className: slots.tab_trash({ class: classNames?.tab_trash })
+	});
+	const getTabIndicatorProps = () => ({ className: slots.tab_indicator({ class: classNames?.tab_indicator }) });
+	const getContainerProps = () => ({ className: slots.container({ class: classNames?.container }) });
+	const getSearchInputProps = (isArchive) => ({
+		className: cn(slots.search_input({ class: classNames?.search_input }), slots.search_input_wrapper({ class: classNames?.search_input_wrapper })),
+		placeholder: isArchive ? "Search" : "Search",
+		variant: "secondary"
+	});
+	const getActionsBarProps = (hasRestore) => ({ className: hasRestore ? slots.actions_bar_with_gap({ class: classNames?.actions_bar }) : slots.actions_bar({ class: classNames?.actions_bar }) });
+	const getClearAllButtonProps = () => ({
+		size: "sm",
+		variant: "danger-soft"
+	});
+	const getRestoreAllButtonProps = () => ({
+		size: "sm",
+		variant: "outline",
+		className: "text-success"
+	});
+	const getEmptyContainerProps = () => ({ className: slots.empty_container({ class: classNames?.empty_container }) });
+	const getEmptyIconProps = () => ({
+		size: 64,
+		className: slots.empty_icon({ class: classNames?.empty_icon })
+	});
+	const getEmptyTitleProps = () => ({ className: slots.empty_title({ class: classNames?.empty_title }) });
+	const getEmptyDescriptionProps = () => ({ className: slots.empty_description({ class: classNames?.empty_description }) });
+	const getItemsContainerProps = () => ({ className: slots.items_container({ class: classNames?.items_container }) });
+	const getDateGroupProps = () => ({ className: slots.date_group({ class: classNames?.date_group }) });
+	const getDateHeaderProps = () => ({ className: slots.date_header({ class: classNames?.date_header }) });
+	const getDateLabelProps = () => ({ className: slots.date_label({ class: classNames?.date_label }) });
+	const getDateDividerProps = () => ({ className: slots.date_divider({ class: classNames?.date_divider }) });
+	const getItemsListProps = () => ({ className: slots.items_list({ class: classNames?.items_list }) });
+	const getItemProps = () => ({ className: slots.item({ class: classNames?.item }) });
+	const getItemFaviconProps = () => ({
+		className: slots.item_favicon({ class: classNames?.item_favicon }),
+		onError: (e) => {
+			e.currentTarget.style.display = "none";
+		}
+	});
+	const getItemFallbackIconProps = () => ({
+		size: 16,
+		className: slots.item_fallback_icon({ class: classNames?.item_fallback_icon })
+	});
+	const getItemContentProps = () => ({ className: slots.item_content({ class: classNames?.item_content }) });
+	const getItemTitleProps = (title) => ({
+		className: slots.item_title({ class: classNames?.item_title }),
+		children: title
+	});
+	const getItemUrlProps = (url) => ({
+		className: slots.item_url({ class: classNames?.item_url }),
+		children: url
+	});
+	const getItemActionsProps = () => ({ className: slots.item_actions({ class: classNames?.item_actions }) });
+	const getUnarchiveButtonProps = () => ({
+		size: "sm",
+		className: slots.unarchive_button({ class: classNames?.unarchive_button }),
+		"aria-label": "Unarchive"
+	});
+	const getRestoreButtonProps = () => ({
+		size: "sm",
+		className: slots.restore_button({ class: classNames?.restore_button }),
+		"aria-label": "Restore"
+	});
+	const getDeleteButtonProps = () => ({
+		size: "sm",
+		className: slots.delete_button({ class: classNames?.delete_button }),
+		"aria-label": "Delete"
+	});
+	const getDeletePermanentButtonProps = () => ({
+		size: "sm",
+		className: slots.delete_permanent_button({ class: classNames?.delete_permanent_button }),
+		"aria-label": "Delete Permanently"
+	});
+	const getActionIconProps = (color) => ({
+		size: 18,
+		className: color === "success" ? slots.action_icon_success({ class: classNames?.action_icon }) : color === "danger" ? slots.action_icon_danger({ class: classNames?.action_icon }) : slots.action_icon_default({ class: classNames?.action_icon })
+	});
+	return {
+		Component,
+		domRef,
+		slots,
+		classNames,
+		children,
+		getTabsProps,
+		getTabsListContainerProps,
+		getTabsListProps,
+		getTabArchiveProps,
+		getTabTrashProps,
+		getTabIndicatorProps,
+		getContainerProps,
+		getSearchInputProps,
+		getActionsBarProps,
+		getClearAllButtonProps,
+		getRestoreAllButtonProps,
+		getEmptyContainerProps,
+		getEmptyIconProps,
+		getEmptyTitleProps,
+		getEmptyDescriptionProps,
+		getItemsContainerProps,
+		getDateGroupProps,
+		getDateHeaderProps,
+		getDateLabelProps,
+		getDateDividerProps,
+		getItemsListProps,
+		getItemProps,
+		getItemFaviconProps,
+		getItemFallbackIconProps,
+		getItemContentProps,
+		getItemTitleProps,
+		getItemUrlProps,
+		getItemActionsProps,
+		getUnarchiveButtonProps,
+		getRestoreButtonProps,
+		getDeleteButtonProps,
+		getDeletePermanentButtonProps,
+		getActionIconProps,
+		externalArchiveItems,
+		externalTrashItems,
+		onUnarchive,
+		onDeleteFromArchive,
+		onRestore,
+		onDeletePermanently,
+		onClearAllArchive,
+		onClearAllTrash,
+		onRestoreAllTrash,
+		onItemClick,
+		renderArchiveItem,
+		renderTrashItem
+	};
+};
+//#endregion
+export { useProps };