@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/components/ui/TableDownload.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Dropdown } from 'flowbite-react';
+import { jsPDF } from 'jspdf';
+import autoTable from 'jspdf-autotable';
+import { FiDownload } from 'react-icons/fi';
+import * as XLSX from 'xlsx';
+const TableDownload = ({ columns, data }) => {
+    const handleDownload = (format) => {
+        if (data.length === 0) {
+            console.warn('No data available for download');
+            return;
+        }
+        switch (format) {
+            case 'csv':
+                downloadCSV(columns, data);
+                break;
+            case 'excel':
+                downloadExcel(columns, data);
+                break;
+            case 'pdf':
+                downloadPDF(columns, data);
+                break;
+            default:
+                console.warn('Unsupported format');
+        }
+    };
+    // CSV Export
+    const downloadCSV = (columns, data) => {
+        const columnKeys = columns.map((col) => col.accessor);
+        const headers = columns.map((col) => col.header);
+        const csvContent = 'data:text/csv;charset=utf-8,' +
+            [
+                headers.join(','),
+                ...data.map((row) => columnKeys.map((key) => `"${String(row[key])}"`).join(',')),
+            ].join('\n');
+        const encodedUri = encodeURI(csvContent);
+        const link = document.createElement('a');
+        link.setAttribute('href', encodedUri);
+        link.setAttribute('download', 'table_data.csv');
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    };
+    // Excel Export
+    const downloadExcel = (columns, data) => {
+        const columnKeys = columns.map((col) => col.accessor);
+        const formattedData = data.map((row) => columnKeys.reduce((acc, key) => {
+            acc[key] = row[key];
+            return acc;
+        }, {}));
+        const worksheet = XLSX.utils.json_to_sheet(formattedData);
+        const workbook = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(workbook, worksheet, 'Table Data');
+        XLSX.writeFile(workbook, 'table_data.xlsx');
+    };
+    // PDF Export
+    const downloadPDF = (columns, data) => {
+        const doc = new jsPDF();
+        doc.text('Table Data Report', 20, 10);
+        const headers = columns.map((col) => col.header);
+        autoTable(doc, {
+            head: [headers],
+            body: data,
+            styles: {
+                fillColor: [255, 255, 255],
+                textColor: [0, 0, 0],
+                overflow: 'linebreak',
+            },
+            headStyles: {
+                fillColor: [255, 255, 255],
+                textColor: [0, 0, 0],
+            },
+            bodyStyles: {
+                valign: 'top',
+            },
+        });
+        doc.save('table_data.pdf');
+    };
+    return (_jsxs(Dropdown, { color: "light", label: _jsxs("div", { className: "inline-flex items-center text-primary-500", children: [_jsx(FiDownload, { className: "mr-2 h-5 w-5", "aria-hidden": "true" }), "Download Report"] }), children: [_jsx(Dropdown.Item, { onClick: () => handleDownload('csv'), children: "CSV" }), _jsx(Dropdown.Item, { onClick: () => handleDownload('excel'), children: "Excel" }), _jsx(Dropdown.Item, { onClick: () => handleDownload('pdf'), children: "PDF" })] }));
+};
+export default TableDownload;

package/lib/components/ui/TailwindIndicator.d.ts

@@ -0,0 +1 @@
+export declare function TailwindIndicator(): import("react/jsx-runtime").JSX.Element | null;

package/lib/components/ui/TailwindIndicator.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TailwindIndicator() {
+    if (process.env.NODE_ENV === 'production')
+        return null;
+    return (_jsxs("div", { className: "fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white", children: [_jsx("div", { className: "block sm:hidden", children: "xs" }), _jsx("div", { className: "hidden sm:block md:hidden", children: "sm" }), _jsx("div", { className: "hidden md:block lg:hidden", children: "md" }), _jsx("div", { className: "hidden lg:block xl:hidden", children: "lg" }), _jsx("div", { className: "hidden xl:block 2xl:hidden", children: "xl" }), _jsx("div", { className: "hidden 2xl:block", children: "2xl" })] }));
+}

package/lib/components/ui/TextField.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+/**
+ * Props for the TextField component.
+ */
+interface TextFieldProps {
+    /** The current value of the input field. */
+    value: string;
+    /** The type of the input field (e.g., 'text', 'password', 'email'). */
+    type?: React.HTMLInputTypeAttribute;
+    /** The name of the input field. */
+    name: string;
+    /** The label text for the input field. */
+    label: string;
+    /** The placeholder text for the input field. */
+    placeholder: string;
+    /** Whether the input field has an error state. */
+    error?: boolean;
+    /** A function to update the value of the input field. */
+    setValue: React.Dispatch<React.SetStateAction<string>>;
+    /** Optional helper text to display below the input field. */
+    helperText?: string;
+    /** Optional callback function triggered when the input field loses focus. */
+    onBlur?: () => void;
+    /** Optional callback function triggered when a key is pressed in the input field. */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+/**
+ * A reusable and customizable text input field component.
+ * Supports regular text inputs, password inputs, and other HTML input types.
+ * Includes optional error states, helper text, and password visibility toggle.
+ *
+ * @example
+ * ```tsx
+ * // Regular text input
+ * <TextField
+ *   value={username}
+ *   setValue={setUsername}
+ *   name="username"
+ *   label="Username"
+ *   placeholder="Enter your username"
+ *   error={!!usernameError}
+ *   helperText={usernameError}
+ * />
+ *
+ * // Password input with visibility toggle
+ * <TextField
+ *   value={password}
+ *   setValue={setPassword}
+ *   name="password"
+ *   label="Password"
+ *   placeholder="Enter your password"
+ *   type="password"
+ *   error={!!passwordError}
+ *   helperText={passwordError}
+ * />
+ * ```
+ */
+declare const TextField: ({ value, placeholder, name, type, label, error, setValue, helperText, onBlur, onKeyDown, }: TextFieldProps) => React.JSX.Element;
+export default TextField;
+export type { TextFieldProps };

package/lib/components/ui/TextField.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, TextInput } from 'flowbite-react';
+import { HiEye, HiEyeOff } from 'react-icons/hi';
+import { useState } from 'react';
+/**
+ * A reusable and customizable text input field component.
+ * Supports regular text inputs, password inputs, and other HTML input types.
+ * Includes optional error states, helper text, and password visibility toggle.
+ *
+ * @example
+ * ```tsx
+ * // Regular text input
+ * <TextField
+ *   value={username}
+ *   setValue={setUsername}
+ *   name="username"
+ *   label="Username"
+ *   placeholder="Enter your username"
+ *   error={!!usernameError}
+ *   helperText={usernameError}
+ * />
+ *
+ * // Password input with visibility toggle
+ * <TextField
+ *   value={password}
+ *   setValue={setPassword}
+ *   name="password"
+ *   label="Password"
+ *   placeholder="Enter your password"
+ *   type="password"
+ *   error={!!passwordError}
+ *   helperText={passwordError}
+ * />
+ * ```
+ */
+const TextField = ({ value, placeholder, name, type = 'text', label, error = false, setValue, helperText, onBlur, onKeyDown, }) => {
+    const [showPassword, setShowPassword] = useState(false);
+    // Determine the input type based on whether it's a password field and visibility toggle state
+    const inputType = type === 'password' && showPassword ? 'text' : type;
+    return (_jsxs("div", { className: "flex flex-col gap-y-2", children: [_jsx(Label, { htmlFor: name, children: label }), _jsxs("div", { className: "relative", children: [_jsx(TextInput, { id: name, color: error ? 'failure' : 'gray', name: name, placeholder: placeholder, type: inputType, required: true, value: value, onChange: (e) => setValue(e.target.value), onBlur: onBlur, onKeyDown: onKeyDown, helperText: helperText && _jsx("span", { className: "text-red-500", children: helperText }) }), type === 'password' && (_jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "absolute right-3 top-[0.625rem] text-gray-500 hover:text-gray-700", children: showPassword ? _jsx(HiEyeOff, { className: "h-5 w-5" }) : _jsx(HiEye, { className: "h-5 w-5" }) }))] })] }));
+};
+export default TextField;

package/lib/components/ui/Textarea.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;
+export type { TextareaProps };

package/lib/components/ui/Textarea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../helpers';
+const Textarea = React.forwardRef(({ className, id, placeholder, ...props }, ref) => {
+    return (_jsx("textarea", { id: id, className: cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), placeholder: placeholder, ref: ref, ...props }));
+});
+Textarea.displayName = 'Textarea';
+export default Textarea;

package/lib/components/ui/Toast.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type ToastVariant = 'success' | 'error' | 'info';
+interface ToastProps {
+    id: number;
+    title?: string;
+    message: string;
+    variant?: ToastVariant;
+    onClose: (id: number) => void;
+}
+declare const Toast: React.FC<ToastProps>;
+export default Toast;
+export type { ToastVariant, ToastProps };

package/lib/components/ui/Toast.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AiOutlineCheckCircle, AiOutlineClose, AiOutlineInfoCircle } from 'react-icons/ai';
+import { MdErrorOutline } from 'react-icons/md';
+const variantStyles = {
+    success: {
+        icon: _jsx(AiOutlineCheckCircle, { className: "h-5 w-5 text-green-500" }),
+        bg: 'bg-green-100',
+        text: 'text-green-700',
+    },
+    error: {
+        icon: _jsx(MdErrorOutline, { className: "h-5 w-5 text-red-500" }),
+        bg: 'bg-red-100',
+        text: 'text-red-700',
+    },
+    info: {
+        icon: _jsx(AiOutlineInfoCircle, { className: "h-5 w-5 text-blue-500" }),
+        bg: 'bg-blue-100',
+        text: 'text-blue-700',
+    },
+};
+const Toast = ({ id, title, message, variant = 'info', onClose }) => {
+    const currentVariant = variantStyles[variant];
+    return (_jsxs("div", { className: `flex w-full max-w-xs items-center space-x-4 p-4 ${currentVariant.bg} rounded-lg shadow dark:bg-gray-800 dark:text-gray-400`, role: "alert", children: [_jsx("div", { className: "shrink-0", children: currentVariant.icon }), _jsxs("div", { className: "flex-1", children: [title && _jsx("p", { className: `text-sm font-semibold ${currentVariant.text}`, children: title }), _jsx("p", { className: "text-sm", children: message })] }), _jsx("button", { onClick: () => onClose(id), type: "button", className: "inline-flex items-center justify-center rounded-lg bg-transparent p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-700 dark:hover:text-white", "aria-label": "Close", children: _jsx(AiOutlineClose, { className: "h-5 w-5" }) })] }));
+};
+export default Toast;

package/lib/components/ui/UploadField.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type UploadProps = {
+    onChange: (file: File | null) => void;
+    id?: string;
+    type?: string;
+    className?: string;
+    disabled?: boolean;
+    hideUploadButton?: boolean;
+    allowedFileTypes?: string[];
+    helperText?: string;
+    value?: never;
+};
+declare const UploadField: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLInputElement>>;
+export default UploadField;
+export type { UploadProps };

package/lib/components/ui/UploadField.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { Button, Icon } from '../../components';
+const UploadField = forwardRef(({ onChange, id, type = 'file', hideUploadButton = false, className = '', disabled = false, allowedFileTypes, helperText, value, // Explicitly exclude value prop becuase it's not allowed for security reasons.
+...props }, ref) => {
+    const [fileName, setFileName] = useState(null);
+    const [key, setKey] = useState(0);
+    const [error, setError] = useState(null);
+    const handleFileChange = (event) => {
+        setError(null);
+        const file = event.target.files?.[0];
+        if (file) {
+            if (allowedFileTypes && allowedFileTypes.length > 0) {
+                const fileExtension = file.name.split('.').pop()?.toLowerCase();
+                const isValidExtension = fileExtension && allowedFileTypes.includes(fileExtension);
+                if (!isValidExtension) {
+                    setError(`Invalid file type. Allowed types: ${allowedFileTypes.join(', ')}`);
+                    setFileName(null);
+                    onChange(null);
+                    setKey((prev) => prev + 1);
+                    return;
+                }
+            }
+            setFileName(file.name);
+            onChange(file);
+        }
+        else {
+            setFileName(null);
+            onChange(null);
+        }
+    };
+    const handleClearFile = () => {
+        setFileName(null);
+        onChange(null);
+        setKey((prev) => prev + 1);
+    };
+    const acceptValue = allowedFileTypes?.map((ext) => `.${ext}`).join(',');
+    return (_jsxs("div", { className: `flex flex-col gap-3 w-full ${className}`, children: [_jsxs("div", { className: "flex gap-3 w-full items-center", children: [_jsxs("label", { htmlFor: id, className: "flex items-center gap-2 cursor-pointer flex-1", children: [_jsx("div", { className: "bg-primary-500 rounded-full h-10 w-10 flex items-center justify-center", children: _jsx(Icon, { name: "FiUpload", size: 20, className: "text-white" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Choose file" }), _jsx("input", { type: type, onChange: handleFileChange, className: "hidden", id: id, ref: ref, disabled: disabled, accept: acceptValue, ...props }, key)] }), !hideUploadButton && (_jsx(Button, { onClick: () => {
+                            if (ref && typeof ref === 'object' && ref.current) {
+                                ref.current.click();
+                            }
+                        }, disabled: disabled, children: "Upload" }))] }), fileName && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm text-gray-500", children: ["Selected: ", fileName] }), _jsx(Button, { variant: "destructive", size: "sm", onClick: handleClearFile, disabled: disabled, children: "Clear" })] })), helperText && (_jsx("div", { className: "w-full", children: _jsx("p", { className: "text-sm text-gray-500 w-full md:w-[65%]", children: helperText }) })), error && _jsx("div", { className: "text-red-500 text-sm", children: error })] }));
+});
+UploadField.displayName = 'UploadField';
+export default UploadField;

package/lib/components/ui/VerticalTab.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface VerticalTabItem {
+    id: number;
+    title: string;
+    content: React.ReactNode;
+    icon?: React.ReactNode;
+}
+interface VerticalTabProps {
+    tabs: VerticalTabItem[];
+    defaultTab?: number;
+    className?: string;
+    onTabChange?: (index: number) => void;
+}
+declare const VerticalTab: React.FC<VerticalTabProps>;
+export default VerticalTab;
+export type { VerticalTabProps, VerticalTabItem };

package/lib/components/ui/VerticalTab.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+const VerticalTab = ({ tabs, className, defaultTab = 0, onTabChange }) => {
+    const [activeTab, setActiveTab] = useState(defaultTab);
+    const handleTabClick = (index) => {
+        setActiveTab(index);
+        onTabChange?.(index);
+    };
+    return (_jsxs("div", { className: `flex flex-col md:flex-row gap-4 ${className}`, children: [_jsx("div", { className: "md:w-64 flex-shrink-0", children: _jsx("ul", { className: "flex flex-row md:flex-col space-x-2 md:space-x-0 md:space-y-2 text-sm font-medium text-gray-500 dark:text-gray-400 overflow-x-auto md:overflow-x-visible", children: tabs.map((tab, index) => (_jsx("li", { className: "flex-shrink-0", children: _jsxs("button", { onClick: () => handleTabClick(index), className: `inline-flex items-center px-4 py-3 rounded-lg w-full text-left transition-colors duration-200 focus:outline-none whitespace-nowrap ${activeTab === index
+                                ? 'text-white bg-primary-500 hover:bg-primary-600 dark:bg-primary-500'
+                                : 'text-gray-500 bg-gray-50 hover:text-gray-900 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white'}`, children: [tab.icon && (_jsx("span", { className: `w-4 h-4 me-2 ${activeTab === index ? 'text-white' : 'text-gray-500 dark:text-gray-400'}`, children: tab.icon })), tab.title] }) }, tab.id))) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("div", { className: "bg-white border border-gray-200 dark:bg-gray-900 dark:border-gray-700 rounded-lg p-6", children: tabs[activeTab]?.content }) })] }));
+};
+export default VerticalTab;

package/lib/components/ui/index.d.ts

@@ -0,0 +1,49 @@
+export * from './Avatar';
+export * from './Command';
+export * from './Dialog';
+export * from './Form';
+export * from './Popover';
+export * from './Radio';
+export * from './Select';
+export * from './Sheet';
+export { default as AvatorIcon } from './AvatarIcon';
+export { default as Button, type ButtonVariant, type ButtonSize, variantStyles } from './Button';
+export { default as Calendar } from './Calendar';
+export { default as Card } from './Card';
+export { default as Chart } from './Chart';
+export { default as Checkbox } from './Checkbox';
+export { default as DatePicker } from './DatePicker';
+export { default as DateFormat } from './DateFormat';
+export { default as DateRangeModal } from './DateRangeModal';
+export { default as RangeDatePicker } from './RangeDatePicker';
+export { default as DetailsCard, type DataItem as DetailsCardDataItem } from './DetailsCard';
+export { default as DetailsPage, type DetailsPageProps } from './DetailsPage';
+export { default as FilterComponent } from './FilterComponent';
+export { default as FilterWrapper } from './FilterWrapper';
+export { default as EmptyState } from './EmptyState';
+export { default as HoverableValue } from './HoverableValue';
+export { default as IconButton } from './IconButton';
+export { default as ImageComponent } from './ImageComponent';
+export { default as Input } from './Input';
+export { default as Label } from './Label';
+export { default as Loader, type LoaderProps } from './Loader';
+export { default as Modal, type ModalProps } from './Modal';
+export { default as MultiSelect, type MultiSelectProps } from './MultiSelect';
+export { default as PhoneInput, type PhoneInputProps } from './PhoneInput';
+export { default as FilterList, type FilterListProps } from './FilterList';
+export { default as FilterSection, type FilterSectionProps } from './FilterSection';
+export { default as Separator } from './Separator';
+export { default as Switch } from './Switch';
+export { default as StatusCell } from './StatusCell';
+export { default as TableDownload, type TableDownloadProps } from './TableDownload';
+export { default as Tab, type TabItem, type TabProps } from './Tab';
+export { default as VerticalTab, type VerticalTabItem, type VerticalTabProps } from './VerticalTab';
+export { default as Textarea, type TextareaProps } from './Textarea';
+export { default as TextField, type TextFieldProps } from './TextField';
+export { default as Toast, type ToastProps, type ToastVariant } from './Toast';
+export { default as UploadField, type UploadProps } from './UploadField';
+export { default as ContainedTab } from './ContainedTab';
+export { default as ImageUploader } from './ImageUploader';
+export type { ImageUploaderProps } from './ImageUploader';
+export { default as NotificationModal } from './NotificationModal';
+export type { NotificationModalProps } from './NotificationModal';

package/lib/components/ui/index.js

@@ -0,0 +1,47 @@
+export * from './Avatar';
+export * from './Command';
+export * from './Dialog';
+export * from './Form';
+export * from './Popover';
+export * from './Radio';
+export * from './Select';
+export * from './Sheet';
+export { default as AvatorIcon } from './AvatarIcon';
+export { default as Button, variantStyles } from './Button';
+export { default as Calendar } from './Calendar';
+export { default as Card } from './Card';
+export { default as Chart } from './Chart';
+export { default as Checkbox } from './Checkbox';
+export { default as DatePicker } from './DatePicker';
+export { default as DateFormat } from './DateFormat';
+export { default as DateRangeModal } from './DateRangeModal';
+export { default as RangeDatePicker } from './RangeDatePicker';
+export { default as DetailsCard } from './DetailsCard';
+export { default as DetailsPage } from './DetailsPage';
+export { default as FilterComponent } from './FilterComponent';
+export { default as FilterWrapper } from './FilterWrapper';
+export { default as EmptyState } from './EmptyState';
+export { default as HoverableValue } from './HoverableValue';
+export { default as IconButton } from './IconButton';
+export { default as ImageComponent } from './ImageComponent';
+export { default as Input } from './Input';
+export { default as Label } from './Label';
+export { default as Loader } from './Loader';
+export { default as Modal } from './Modal';
+export { default as MultiSelect } from './MultiSelect';
+export { default as PhoneInput } from './PhoneInput';
+export { default as FilterList } from './FilterList';
+export { default as FilterSection } from './FilterSection';
+export { default as Separator } from './Separator';
+export { default as Switch } from './Switch';
+export { default as StatusCell } from './StatusCell';
+export { default as TableDownload } from './TableDownload';
+export { default as Tab } from './Tab';
+export { default as VerticalTab } from './VerticalTab';
+export { default as Textarea } from './Textarea';
+export { default as TextField } from './TextField';
+export { default as Toast } from './Toast';
+export { default as UploadField } from './UploadField';
+export { default as ContainedTab } from './ContainedTab';
+export { default as ImageUploader } from './ImageUploader';
+export { default as NotificationModal } from './NotificationModal';

package/lib/context/BreadcrumbContext.d.ts

@@ -0,0 +1,28 @@
+import type { FC, PropsWithChildren } from 'react';
+import type { AppSidebarPageItem } from './SidebarContext';
+interface AppBreadcrumb {
+    label: string;
+    path?: string;
+    key?: string;
+}
+interface AppBreadcrumbContextType {
+    breadcrumbs: AppBreadcrumb[];
+    pathname: string;
+    updateBreadcrumb: (key: string, newLabel: string) => void;
+    rootPageIcon: FC | undefined;
+}
+interface AppBreadcrumbProviderProps extends PropsWithChildren {
+    pathname: string;
+    pages: AppSidebarPageItem[];
+    /**
+     * Compatibility mode for different breadcrumb behaviors
+     * - 'conservative' (default): Only make links clickable if confident they exist
+     * - 'permissive': Make all non-final breadcrumbs clickable (legacy behavior)
+     */
+    mode?: 'conservative' | 'permissive';
+}
+declare const AppBreadcrumbProvider: ({ children, pathname, pages, mode }: AppBreadcrumbProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const useAppBreadcrumbs: () => AppBreadcrumbContextType;
+export default AppBreadcrumbProvider;
+export { useAppBreadcrumbs };
+export type { AppBreadcrumbContextType, AppBreadcrumb };