@dsbtek/component-library 0.1.5

package/dist/index.d.mts

@@ -0,0 +1,1153 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DateRange } from 'react-day-picker';
+import { DropzoneOptions } from 'react-dropzone';
+import * as React$1 from 'react';
+import React__default, { Dispatch, SetStateAction, Context } from 'react';
+import { CountryCode, E164Number, CountryCallingCode, CarrierCode, NationalNumber, NumberType } from 'libphonenumber-js';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, UseFormReturn, SubmitHandler, SubmitErrorHandler } from 'react-hook-form';
+import { ZodSchema } from 'zod';
+import { Variants } from 'framer-motion';
+import { LucideIcon } from 'lucide-react';
+
+type DateValue = Date | undefined;
+type RangeValue = {
+    from: DateValue;
+    to: DateValue;
+};
+type PickerValue = DateValue | DateRange | undefined | null;
+interface DateTimePickerProps {
+    date: PickerValue;
+    setDate: (date: PickerValue) => void;
+    isRange?: boolean;
+    includeTime?: boolean;
+    dateOnly?: boolean;
+    timeOnly?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    clearable?: boolean;
+    disabled?: boolean;
+}
+declare function DateTimePicker({ date, setDate, isRange, includeTime, dateOnly, timeOnly, disabledDates, minDate, maxDate, clearable, disabled, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
+
+interface FileWithPreview extends File {
+    preview?: string;
+}
+interface FileInputProps extends Omit<DropzoneOptions, "disabled"> {
+    className?: string;
+    loading?: boolean;
+    onRemove?: (file: FileWithPreview) => void;
+    onChange?: (files: FileWithPreview[]) => void;
+    disabled?: boolean;
+    progress?: number | number[];
+    value?: FileWithPreview[];
+    multiple?: boolean;
+}
+declare function FileInput({ className, loading, onRemove, onChange, disabled, progress, value, multiple, maxSize, // 2MB default
+accept, maxFiles, ...props }: FileInputProps): react_jsx_runtime.JSX.Element;
+
+interface RGB {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}
+interface HSL {
+    h: number;
+    s: number;
+    l: number;
+    a?: number;
+}
+interface ColorPickerProps {
+    color?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+declare function ColorPicker({ color, onChange, className }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+
+interface TagInputProps {
+    placeholder?: string;
+    tags: string[];
+    setTags: (tags: string[]) => void;
+    suggestions?: string[];
+    maxTags?: number;
+    disabled?: boolean;
+    error?: string;
+}
+declare function TagInput({ placeholder, tags, setTags, suggestions, maxTags, disabled, error }: TagInputProps): react_jsx_runtime.JSX.Element;
+
+interface BreadcrumbsProps {
+    segments: Array<{
+        label: string;
+        href?: string;
+    }>;
+    separator?: React$1.ReactNode;
+    className?: string;
+    onNavigate?: (href: string) => void;
+}
+declare function Breadcrumbs({ segments, separator, className, onNavigate, }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
+
+interface ResponsiveDialogProps {
+    trigger: React$1.ReactNode;
+    title: string;
+    description: string;
+    children: React$1.ReactNode;
+}
+declare function ResponsiveDialog({ trigger, title, description, children, }: ResponsiveDialogProps): react_jsx_runtime.JSX.Element;
+
+interface ResponsiveAlertDialogProps {
+    trigger: React$1.ReactNode;
+    title: string;
+    description: string;
+    cancelText?: string;
+    confirmText?: string;
+    onConfirm: () => void;
+}
+declare function ResponsiveAlertDialog({ trigger, title, description, cancelText, confirmText, onConfirm, }: ResponsiveAlertDialogProps): react_jsx_runtime.JSX.Element;
+
+interface PasswordInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    showPasswordLabel?: string;
+    hidePasswordLabel?: string;
+}
+declare function PasswordInput({ className, showPasswordLabel, hidePasswordLabel, ...props }: PasswordInputProps): react_jsx_runtime.JSX.Element;
+
+declare const countries: ({
+    id: number;
+    name: string;
+    iso3: string;
+    iso2: string;
+    numeric_code: string;
+    phone_code: string;
+    capital: string;
+    currency: string;
+    currency_name: string;
+    currency_symbol: string;
+    tld: string;
+    native: string;
+    region: string;
+    region_id: string;
+    subregion: string;
+    subregion_id: string;
+    nationality: string;
+    timezones: {
+        zoneName: string;
+        gmtOffset: number;
+        gmtOffsetName: string;
+        abbreviation: string;
+        tzName: string;
+    }[];
+    translations: {
+        kr: string;
+        'pt-BR': string;
+        pt: string;
+        nl: string;
+        hr: string;
+        fa: string;
+        de: string;
+        es: string;
+        fr: string;
+        ja: string;
+        it: string;
+        cn: string;
+        tr: string;
+    };
+    latitude: string;
+    longitude: string;
+    emoji: string;
+    emojiU: string;
+} | {
+    id: number;
+    name: string;
+    iso3: string;
+    iso2: string;
+    numeric_code: string;
+    phone_code: string;
+    capital: string;
+    currency: string;
+    currency_name: string;
+    currency_symbol: string;
+    tld: string;
+    native: string;
+    region: string;
+    region_id: string;
+    subregion: string;
+    subregion_id: null;
+    nationality: string;
+    timezones: {
+        zoneName: string;
+        gmtOffset: number;
+        gmtOffsetName: string;
+        abbreviation: string;
+        tzName: string;
+    }[];
+    translations: {
+        kr: string;
+        'pt-BR': string;
+        pt: string;
+        nl: string;
+        hr: string;
+        fa: string;
+        de: string;
+        es: string;
+        fr: string;
+        ja: string;
+        it: string;
+        cn: string;
+        tr: string;
+    };
+    latitude: string;
+    longitude: string;
+    emoji: string;
+    emojiU: string;
+} | {
+    id: number;
+    name: string;
+    iso3: string;
+    iso2: string;
+    numeric_code: string;
+    phone_code: string;
+    capital: string;
+    currency: string;
+    currency_name: string;
+    currency_symbol: string;
+    tld: string;
+    native: string;
+    region: string;
+    region_id: string;
+    subregion: string;
+    subregion_id: string;
+    nationality: string;
+    timezones: {
+        zoneName: string;
+        gmtOffset: number;
+        gmtOffsetName: string;
+        abbreviation: string;
+        tzName: string;
+    }[];
+    translations: {
+        kr: string;
+        'pt-BR': string;
+        pt: string;
+        fa: string;
+        de: string;
+        fr: string;
+        it: string;
+        cn: string;
+        tr: string;
+        nl?: undefined;
+        hr?: undefined;
+        es?: undefined;
+        ja?: undefined;
+    };
+    latitude: string;
+    longitude: string;
+    emoji: string;
+    emojiU: string;
+} | {
+    id: number;
+    name: string;
+    iso3: string;
+    iso2: string;
+    numeric_code: string;
+    phone_code: string;
+    capital: string;
+    currency: string;
+    currency_name: string;
+    currency_symbol: string;
+    tld: string;
+    native: string;
+    region: string;
+    region_id: null;
+    subregion: string;
+    subregion_id: null;
+    nationality: string;
+    timezones: {
+        zoneName: string;
+        gmtOffset: number;
+        gmtOffsetName: string;
+        abbreviation: string;
+        tzName: string;
+    }[];
+    translations: {
+        kr: string;
+        'pt-BR': string;
+        pt: string;
+        nl: string;
+        hr: string;
+        fa: string;
+        de: string;
+        es: string;
+        fr: string;
+        ja: string;
+        it: string;
+        cn: string;
+        tr: string;
+    };
+    latitude: string;
+    longitude: string;
+    emoji: string;
+    emojiU: string;
+} | {
+    id: number;
+    name: string;
+    iso3: string;
+    iso2: string;
+    numeric_code: string;
+    phone_code: string;
+    capital: string;
+    currency: string;
+    currency_name: string;
+    currency_symbol: string;
+    tld: string;
+    native: null;
+    region: string;
+    region_id: string;
+    subregion: string;
+    subregion_id: string;
+    nationality: string;
+    timezones: {
+        zoneName: string;
+        gmtOffset: number;
+        gmtOffsetName: string;
+        abbreviation: string;
+        tzName: string;
+    }[];
+    translations: {
+        kr: string;
+        'pt-BR': string;
+        pt: string;
+        nl: string;
+        hr: string;
+        fa: string;
+        de: string;
+        es: string;
+        fr: string;
+        ja: string;
+        it: string;
+        cn: string;
+        tr: string;
+    };
+    latitude: string;
+    longitude: string;
+    emoji: string;
+    emojiU: string;
+} | {
+    id: number;
+    name: string;
+    iso3: string;
+    iso2: string;
+    numeric_code: string;
+    phone_code: string;
+    capital: string;
+    currency: string;
+    currency_name: string;
+    currency_symbol: string;
+    tld: string;
+    native: string;
+    region: string;
+    region_id: string;
+    subregion: string;
+    subregion_id: string;
+    nationality: string;
+    timezones: {
+        zoneName: string;
+        gmtOffset: number;
+        gmtOffsetName: string;
+        abbreviation: string;
+        tzName: string;
+    }[];
+    translations: {
+        kr: string;
+        'pt-BR': string;
+        pt: string;
+        nl: string;
+        fa: string;
+        de: string;
+        fr: string;
+        it: string;
+        cn: string;
+        tr: string;
+        hr?: undefined;
+        es?: undefined;
+        ja?: undefined;
+    };
+    latitude: string;
+    longitude: string;
+    emoji: string;
+    emojiU: string;
+} | {
+    id: number;
+    name: string;
+    iso3: string;
+    iso2: string;
+    numeric_code: string;
+    phone_code: string;
+    capital: string;
+    currency: string;
+    currency_name: string;
+    currency_symbol: string;
+    tld: string;
+    native: string;
+    region: string;
+    region_id: string;
+    subregion: string;
+    subregion_id: string;
+    nationality: string;
+    timezones: null;
+    translations: {
+        kr: string;
+        'pt-BR': string;
+        pt: string;
+        nl: string;
+        hr: string;
+        fa: string;
+        de: string;
+        es: string;
+        fr: string;
+        ja: string;
+        it: string;
+        cn: string;
+        tr: string;
+    };
+    latitude: string;
+    longitude: string;
+    emoji: string;
+    emojiU: string;
+} | {
+    id: number;
+    name: string;
+    iso3: string;
+    iso2: string;
+    numeric_code: string;
+    phone_code: string;
+    capital: string;
+    currency: string;
+    currency_name: string;
+    currency_symbol: string;
+    tld: string;
+    native: string;
+    region: string;
+    region_id: string;
+    subregion: string;
+    subregion_id: string;
+    nationality: string;
+    timezones: {
+        zoneName: string;
+        gmtOffset: number;
+        gmtOffsetName: string;
+        abbreviation: string;
+        tzName: string;
+    }[];
+    translations: {
+        kr: string;
+        'pt-BR': string;
+        pt: string;
+        nl: string;
+        hr: string;
+        fa: string;
+        de: string;
+        es: string;
+        fr: string;
+        ja: string;
+        cn: string;
+        tr: string;
+        it?: undefined;
+    };
+    latitude: string;
+    longitude: string;
+    emoji: string;
+    emojiU: string;
+} | {
+    id: number;
+    name: string;
+    iso3: string;
+    iso2: string;
+    numeric_code: string;
+    phone_code: string;
+    capital: string;
+    currency: string;
+    currency_name: string;
+    currency_symbol: string;
+    tld: string;
+    native: string;
+    region: string;
+    region_id: string;
+    subregion: string;
+    subregion_id: string;
+    nationality: string;
+    timezones: {
+        zoneName: string;
+        gmtOffset: number;
+        gmtOffsetName: string;
+        abbreviation: string;
+        tzName: string;
+    }[];
+    translations: {
+        kr: string;
+        cn: string;
+        tr: string;
+        'pt-BR'?: undefined;
+        pt?: undefined;
+        nl?: undefined;
+        hr?: undefined;
+        fa?: undefined;
+        de?: undefined;
+        es?: undefined;
+        fr?: undefined;
+        ja?: undefined;
+        it?: undefined;
+    };
+    latitude: string;
+    longitude: string;
+    emoji: string;
+    emojiU: string;
+} | {
+    id: number;
+    name: string;
+    iso3: string;
+    iso2: string;
+    numeric_code: string;
+    phone_code: string;
+    capital: string;
+    currency: string;
+    currency_name: string;
+    currency_symbol: string;
+    tld: string;
+    native: string;
+    region: string;
+    region_id: string;
+    subregion: string;
+    subregion_id: string;
+    nationality: string;
+    timezones: {
+        zoneName: string;
+        gmtOffset: number;
+        gmtOffsetName: string;
+        abbreviation: string;
+        tzName: string;
+    }[];
+    translations: {
+        kr: string;
+        'pt-BR': string;
+        pt: string;
+        nl: string;
+        fa: string;
+        de: string;
+        es: string;
+        fr: string;
+        ja: string;
+        it: string;
+        cn: string;
+        tr: string;
+        hr?: undefined;
+    };
+    latitude: string;
+    longitude: string;
+    emoji: string;
+    emojiU: string;
+})[];
+
+type Country = (typeof countries)[number];
+type PhoneData = {
+    phoneNumber?: E164Number;
+    countryCode?: CountryCode;
+    countryCallingCode?: CountryCallingCode;
+    carrierCode?: CarrierCode;
+    nationalNumber?: NationalNumber;
+    internationalNumber?: string;
+    possibleCountries?: string;
+    isValid?: boolean;
+    isPossible?: boolean;
+    uri?: string;
+    type?: NumberType;
+};
+interface PhoneInputProps extends React$1.ComponentPropsWithoutRef<'input'> {
+    value?: string;
+    defaultCountry?: CountryCode;
+}
+declare function getPhoneData(phone: string): PhoneData;
+declare function PhoneInput({ value: valueProp, defaultCountry, className, id, required, ...rest }: PhoneInputProps): react_jsx_runtime.JSX.Element;
+
+interface DataTableFeatures {
+    rowSelection: boolean;
+    columnVisibility: boolean;
+    sorting: boolean;
+    search: boolean;
+    dateFilter: boolean;
+    pagination: boolean;
+    newItem: boolean;
+    columnFilters: boolean;
+    rowActions: boolean;
+    resetFilters: boolean;
+    stickyHeader: boolean;
+    rowExpansion: boolean;
+    columnResizing: boolean;
+    advancedFilters: boolean;
+    advancedSorts: boolean;
+    export: boolean;
+    viewState: boolean;
+    keyboardNavigation: boolean;
+    viewModeToggle: boolean;
+}
+interface DataTableViewState {
+    hiddenColumns: string[];
+    columnWidths: Record<string, number>;
+    filters: Record<string, any>;
+    sorting: {
+        column: string;
+        direction: "asc" | "desc" | null;
+    };
+    pagination: {
+        page: number;
+        perPage: number;
+    };
+    viewMode: "table" | "grid";
+}
+interface AdvancedSort {
+    id: string;
+    field: string;
+    direction: "asc" | "desc";
+}
+interface AdvancedFilter {
+    id: string;
+    field: string;
+    operator: "equals" | "contains" | "startsWith" | "endsWith" | "gt" | "lt" | "gte" | "lte";
+    value: any;
+}
+interface DataTableProps<T extends {
+    id: string;
+}> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    meta?: {
+        current_page: number;
+        last_page: number;
+        per_page: number;
+        total: number;
+    };
+    loading?: boolean;
+    onPageChange?: (page: number) => void;
+    onPerPageChange?: (perPage: number) => void;
+    onSort?: (column: string, direction: "asc" | "desc" | null) => void;
+    onSearch?: (value: string) => void;
+    onFilter?: (filters: AdvancedFilter[]) => void;
+    pageSizeOptions?: number[];
+    renderItemActions?: (row: T) => React__default.ReactNode;
+    renderExpanded?: (row: T) => React__default.ReactNode;
+    onNewItem?: () => void;
+    newItemLabel?: string;
+    onRowsSelected?: (rows: string[]) => void;
+    dateRange?: DateRange | undefined;
+    setDateRange?: (value: DateRange | undefined) => void;
+    onExport?: (type: "csv" | "excel" | "pdf") => void;
+    onViewStateChange?: (state: DataTableViewState) => void;
+    savedViewStates?: {
+        id: string;
+        name: string;
+        state: DataTableViewState;
+    }[];
+    features?: Partial<DataTableFeatures>;
+    defaultViewState?: DataTableViewState;
+    onAdvancedSort?: (sorts: AdvancedSort[]) => void;
+    className?: string;
+}
+interface ColumnDef<T> {
+    accessorKey: string;
+    header: string;
+    cell: (row: T) => React__default.ReactNode;
+    sortable?: boolean;
+    filterable?: boolean;
+    resizable?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    className?: string;
+    filterComponent?: React__default.ComponentType<{
+        value: any;
+        onChange: (value: any) => void;
+    }>;
+}
+
+declare const defaultFeatures: {
+    readonly rowSelection: false;
+    readonly columnVisibility: false;
+    readonly sorting: false;
+    readonly search: false;
+    readonly dateFilter: false;
+    readonly pagination: false;
+    readonly newItem: false;
+    readonly columnFilters: false;
+    readonly rowActions: false;
+    readonly resetFilters: false;
+    readonly stickyHeader: false;
+    readonly rowExpansion: false;
+    readonly columnResizing: false;
+    readonly advancedFilters: false;
+    readonly advancedSorts: false;
+    readonly export: false;
+    readonly viewState: false;
+    readonly keyboardNavigation: false;
+    readonly viewModeToggle: false;
+};
+declare function DataTable<T extends {
+    id: string;
+}>({ data, columns, meta, loading, onPageChange, onPerPageChange, onSort, onSearch, onFilter, pageSizeOptions, renderItemActions, renderExpanded, onNewItem, newItemLabel, onRowsSelected, dateRange, setDateRange, onExport, onViewStateChange, savedViewStates, features: userFeatures, defaultViewState, onAdvancedSort, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface AdvancedFilterBuilderProps<T> {
+    columns: ColumnDef<T>[];
+    onFiltersChange: (filters: AdvancedFilter[]) => void;
+    initialFilters?: AdvancedFilter[];
+}
+declare const OPERATORS: readonly [{
+    readonly label: "Contains";
+    readonly value: "contains";
+}, {
+    readonly label: "Equals";
+    readonly value: "equals";
+}, {
+    readonly label: "Starts with";
+    readonly value: "startsWith";
+}, {
+    readonly label: "Ends with";
+    readonly value: "endsWith";
+}, {
+    readonly label: "Greater than";
+    readonly value: "gt";
+}, {
+    readonly label: "Less than";
+    readonly value: "lt";
+}, {
+    readonly label: "Greater than or equal";
+    readonly value: "gte";
+}, {
+    readonly label: "Less than or equal";
+    readonly value: "lte";
+}];
+declare function AdvancedFilterBuilder<T>({ columns, onFiltersChange, initialFilters, }: AdvancedFilterBuilderProps<T>): react_jsx_runtime.JSX.Element;
+
+interface AdvancedSortBuilderProps<T> {
+    columns: ColumnDef<T>[];
+    onSortChange: (sorts: AdvancedSort[]) => void;
+    initialSorts?: AdvancedSort[];
+}
+declare const DIRECTIONS: readonly [{
+    readonly label: "Ascending";
+    readonly value: "asc";
+}, {
+    readonly label: "Descending";
+    readonly value: "desc";
+}];
+declare function AdvancedSortBuilder<T>({ columns, onSortChange, initialSorts }: AdvancedSortBuilderProps<T>): react_jsx_runtime.JSX.Element;
+
+interface DataTableBodyProps<T> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    hiddenColumns: Set<string>;
+    loading: boolean;
+    meta?: {
+        per_page: number;
+    };
+    selectedRows: Set<string>;
+    onSelectRow: (id: string) => void;
+    renderItemActions?: (row: T) => React__default.ReactNode;
+    features: DataTableFeatures;
+    expandedRows?: Set<string>;
+    onToggleExpand?: (id: string) => void;
+    renderExpanded?: (row: T) => React__default.ReactNode;
+    columnWidths: Record<string, number>;
+    focusedCell: {
+        row: number;
+        col: number;
+    };
+}
+declare function DataTableBody<T extends {
+    id: string;
+}>({ data, columns, hiddenColumns, loading, meta, selectedRows, onSelectRow, renderItemActions, features, expandedRows, onToggleExpand, renderExpanded, columnWidths, focusedCell }: DataTableBodyProps<T>): react_jsx_runtime.JSX.Element;
+
+interface DataTableGridViewProps<T> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    hiddenColumns: Set<string>;
+    selectedRows: Set<string>;
+    onSelectRow: (id: string) => void;
+    renderItemActions?: (row: T) => React__default.ReactNode;
+    features: DataTableFeatures;
+    loading: boolean;
+    onSelectAll: () => void;
+    meta?: {
+        per_page: number;
+    };
+}
+declare function DataTableGridView<T extends {
+    id: string;
+}>({ data, columns, hiddenColumns, selectedRows, onSelectRow, renderItemActions, features, loading, onSelectAll, meta }: DataTableGridViewProps<T>): react_jsx_runtime.JSX.Element;
+
+interface DataTableHeaderProps<T> {
+    columns: ColumnDef<T>[];
+    hiddenColumns: Set<string>;
+    sortConfig: {
+        column: string;
+        direction: 'asc' | 'desc' | null;
+    };
+    onSort: (columnId: string, direction: 'asc' | 'desc' | null) => void;
+    selectedRows: Set<string>;
+    data: T[];
+    onSelectAll: () => void;
+    features: DataTableFeatures;
+    columnWidths: Record<string, number>;
+    onColumnResize: (columnId: string, width: number) => void;
+}
+declare function DataTableHeader<T extends {
+    id: string;
+}>({ columns, hiddenColumns, sortConfig, onSort, selectedRows, data, onSelectAll, features, columnWidths, onColumnResize }: DataTableHeaderProps<T>): react_jsx_runtime.JSX.Element;
+
+interface DataTablePaginationProps {
+    meta?: {
+        current_page: number;
+        last_page: number;
+        per_page: number;
+        total: number;
+    };
+    onPageChange?: (page: number) => void;
+    onPerPageChange?: (perPage: number) => void;
+    pageSizeOptions: number[];
+    selectedRows: Set<string>;
+    features: DataTableFeatures;
+}
+declare function DataTablePagination({ meta, onPageChange, onPerPageChange, pageSizeOptions, selectedRows, features }: DataTablePaginationProps): react_jsx_runtime.JSX.Element;
+
+interface DataTableToolbarProps<T> {
+    columns: ColumnDef<T>[];
+    hiddenColumns: Set<string>;
+    onToggleColumn: (columnId: string) => void;
+    onSearch?: (value: string) => void;
+    onNewItem?: () => void;
+    newItemLabel?: string;
+    features: DataTableFeatures;
+    onExport?: (type: "csv" | "excel" | "pdf") => void;
+    viewState?: DataTableViewState;
+    savedViewStates?: {
+        id: string;
+        name: string;
+        state: DataTableViewState;
+    }[];
+    onViewStateChange?: (state: DataTableViewState) => void;
+    onFilter?: (filters: AdvancedFilter[]) => void;
+    onSort?: (sorts: AdvancedSort[]) => void;
+    currentFilters?: AdvancedFilter[];
+    currentSorts?: AdvancedSort[];
+    dateRange: DateRange | undefined;
+    setDateRange: (value: DateRange | undefined) => void;
+    viewMode: "table" | "grid";
+    onViewModeChange: (mode: "table" | "grid") => void;
+}
+declare function DataTableToolbar<T>({ columns, hiddenColumns, onToggleColumn, onSearch, onNewItem, newItemLabel, features, onExport, viewState, savedViewStates, onViewStateChange, onFilter, onSort, currentFilters, currentSorts, dateRange, setDateRange, viewMode, onViewModeChange, }: DataTableToolbarProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ResizableHeaderProps {
+    children: React__default.ReactNode;
+    onResize: (width: number) => void;
+    width: number;
+    minWidth?: number;
+    maxWidth?: number;
+}
+declare function ResizableHeader({ children, onResize, width, minWidth, maxWidth }: ResizableHeaderProps): react_jsx_runtime.JSX.Element;
+
+type OptionType = {
+    label: string;
+    value: string;
+    group?: string;
+};
+interface MultiSelectProps {
+    options: OptionType[];
+    selected: string[];
+    onChange: (value: string[]) => void;
+    placeholder?: string;
+    className?: string;
+    multiple?: boolean;
+    onLoadMore?: () => void;
+    hasMore?: boolean;
+    isDialog?: boolean;
+    triggerClassName?: string;
+    contentClassName?: string;
+    badgeClassName?: string;
+    commandClassName?: string;
+    commandInputClassName?: string;
+    commandListClassName?: string;
+    commandItemClassName?: string;
+    commandEmptyClassName?: string;
+    commandGroupClassName?: string;
+    commandSeparatorClassName?: string;
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    width?: "auto" | "trigger" | string;
+}
+declare const MAX_VISIBLE_TAGS = 2;
+declare function MultiSelect({ options, selected, onChange, placeholder, className, multiple, onLoadMore, hasMore, isDialog, triggerClassName, contentClassName, badgeClassName, commandClassName, commandInputClassName, commandListClassName, commandItemClassName, commandEmptyClassName, commandGroupClassName, commandSeparatorClassName, align, sideOffset, width, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
+
+type Form$1<T> = {
+    id: number;
+    label: string;
+    fields: (keyof T)[];
+    form: React__default.FC;
+};
+type UseMultiStepFormTypeOptions$1<T extends FieldValues> = {
+    schema: ZodSchema<T>;
+    currentStep: number;
+    setCurrentStep: Dispatch<SetStateAction<number>>;
+    form?: UseFormReturn<T>;
+    forms: Form$1<T>[];
+    saveFormData: SubmitHandler<T>;
+};
+
+type Form<T> = {
+    id: number;
+    label: string;
+    fields: (keyof T)[];
+    form: React__default.FC;
+};
+type UseMultiStepFormTypeOptions<T extends FieldValues> = {
+    schema: ZodSchema<T>;
+    currentStep: number;
+    setCurrentStep: Dispatch<SetStateAction<number>>;
+    form?: UseFormReturn<T>;
+    forms: Form<T>[];
+    saveFormData: SubmitHandler<T>;
+};
+
+/**
+ * Custom hook for managing a multistep form.
+ *
+ * @template T - The type of the multistep form options.
+ * @param {Context<T>} context - The React context containing the form state and methods.
+ * @returns {Object} An object containing methods and properties for managing the multistep form.
+ * @throws {Error} If the form is not defined in the context.
+ */
+declare function useMultiStepForm<T extends UseMultiStepFormTypeOptions<any>>(context: Context<T>): {
+    form: react_hook_form.UseFormReturn<any>;
+    currentStep: number;
+    steps: number;
+    nextStep: () => void;
+    previousStep: () => void;
+    goToStep: (index: number) => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    labels: string[];
+    currentStepLabel: string;
+    CurrentForm: React__default.FC<{}>;
+    onSubmit: SubmitHandler<any>;
+    onErrors: SubmitErrorHandler<any>;
+};
+
+interface MultiStepNavBarProps<T> extends React__default.HTMLAttributes<HTMLElement> {
+    context: Context<T>;
+}
+declare function MultiStepNavbar<T extends UseMultiStepFormTypeOptions$1<any>>({ className, context, ...props }: MultiStepNavBarProps<T>): react_jsx_runtime.JSX.Element;
+
+interface MultiStepNavButtonsProps<T> {
+    previousLabel: string;
+    nextLabel: string;
+    endStepLabel: string;
+    context: Context<T>;
+    debug?: boolean;
+    isLoading?: boolean;
+}
+declare function MultiStepNavButtons<T extends UseMultiStepFormTypeOptions$1<any>>({ previousLabel, nextLabel, endStepLabel, debug, context, isLoading, }: MultiStepNavButtonsProps<T>): react_jsx_runtime.JSX.Element;
+
+declare const containerCurrentForm: Variants;
+declare const containerSignUpForm: Variants;
+declare const containerMultiStepForm: Variants;
+declare const containerMultiStepNavbar: Variants;
+
+type SidebarContextProps = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+declare const SidebarProvider: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const Sidebar: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroup: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+interface NavSubItem {
+    title: string;
+    url: string;
+    visible?: boolean;
+}
+interface NavItem {
+    title: string;
+    url: string;
+    icon?: LucideIcon;
+    items?: NavSubItem[];
+    visible?: boolean;
+    isActive?: boolean;
+}
+interface Project {
+    name: string;
+    url: string;
+    icon: LucideIcon;
+}
+interface Team {
+    name: string;
+    logo: LucideIcon | string;
+    plan?: string;
+}
+interface User {
+    name?: string;
+    email: string;
+    image?: string;
+    permissions?: string[];
+}
+
+interface AppSidebarProps extends React$1.ComponentProps<typeof Sidebar> {
+    teams?: Team[];
+    defaultTeam?: Team;
+    onTeamChange?: (team: Team) => void;
+    onSearch?: (query: string) => void;
+    searchPlaceholder?: string;
+    navItems: NavItem[];
+    navGroupLabel?: string;
+    navSecondary?: {
+        title: string;
+        url: string;
+        icon: LucideIcon;
+        onClick?: () => void;
+    }[];
+    navSecondaryLabel?: string;
+    user?: User;
+    onLogout?: () => void;
+    userMenuItems?: {
+        group: string;
+        items: {
+            label: string;
+            icon: React$1.ComponentType<{
+                className?: string;
+            }>;
+            onClick?: () => void;
+        }[];
+    }[];
+    isLoading?: boolean;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+    teamSwitcherClassName?: string;
+    searchClassName?: string;
+    navMainClassName?: string;
+    navSecondaryClassName?: string;
+    navSecondaryGroupLabelClassName?: string;
+    navUserClassName?: string;
+}
+declare function AppSidebar({ teams, defaultTeam, onTeamChange, onSearch, searchPlaceholder, navItems, navGroupLabel, navSecondary, navSecondaryLabel, user, onLogout, userMenuItems, isLoading, defaultOpen, open, onOpenChange, headerClassName, contentClassName, footerClassName, teamSwitcherClassName, searchClassName, navMainClassName, navSecondaryClassName, navSecondaryGroupLabelClassName, navUserClassName, ...props }: AppSidebarProps): react_jsx_runtime.JSX.Element;
+
+interface NavMainProps {
+    items: NavItem[];
+    isLoading?: boolean;
+    groupLabel: string;
+    checkActive?: (item: NavItem, pathname: string) => boolean;
+    className?: string;
+}
+declare function NavMain({ items, isLoading, groupLabel, checkActive, className }: NavMainProps): react_jsx_runtime.JSX.Element;
+
+interface NavUserProps {
+    user?: User;
+    isLoading?: boolean;
+    onLogout?: () => void;
+    menuItems?: {
+        group: string;
+        items: {
+            label: string;
+            icon: React__default.ComponentType<{
+                className?: string;
+            }>;
+            onClick?: () => void;
+        }[];
+    }[];
+    className?: string;
+}
+declare function NavUser({ user, isLoading, onLogout, menuItems, className }: NavUserProps): react_jsx_runtime.JSX.Element | null;
+
+interface NavProjectsProps {
+    projects: Project[];
+    groupLabel?: string;
+    onViewProject?: (project: Project) => void;
+    onShareProject?: (project: Project) => void;
+    onDeleteProject?: (project: Project) => void;
+    onMoreClick?: () => void;
+}
+declare function NavProjects({ projects, groupLabel, onViewProject, onShareProject, onDeleteProject, onMoreClick }: NavProjectsProps): react_jsx_runtime.JSX.Element;
+
+interface NavSecondaryItem {
+    title: string;
+    url: string;
+    icon: LucideIcon;
+    onClick?: () => void;
+}
+interface NavSecondaryProps extends React$1.ComponentPropsWithoutRef<typeof SidebarGroup> {
+    items: NavSecondaryItem[];
+    isLoading?: boolean;
+    groupLabel?: string;
+    groupLabelClassName?: string;
+}
+declare function NavSecondary({ items, isLoading, groupLabel, groupLabelClassName, ...props }: NavSecondaryProps): react_jsx_runtime.JSX.Element;
+
+interface SearchFormProps {
+    onSearch: (query: string) => void;
+    isLoading?: boolean;
+    placeholder?: string;
+    initialQuery?: string;
+    className?: string;
+}
+declare function SearchForm({ onSearch, isLoading, placeholder, initialQuery, className }: SearchFormProps): react_jsx_runtime.JSX.Element;
+
+interface TeamSwitcherProps {
+    teams: Team[];
+    isLoading?: boolean;
+    defaultTeam?: Team;
+    onTeamChange?: (team: Team) => void;
+    className?: string;
+}
+declare function TeamSwitcher({ teams, isLoading, defaultTeam, onTeamChange, className }: TeamSwitcherProps): react_jsx_runtime.JSX.Element;
+
+type TankShape = "lying-cylindrical" | "lying-rectangular" | "standard-round-view" | "standing-cylindrical" | "standing-rectangular";
+interface TankLevelVisualizationProps {
+    percent: number;
+    shape: TankShape;
+    productColor?: string;
+    className?: string;
+    showNote?: string;
+}
+declare const TankLevelVisualization: ({ percent, shape, productColor, className, showNote, }: TankLevelVisualizationProps) => react_jsx_runtime.JSX.Element;
+
+interface TankCardProps {
+    tankName: string;
+    capacity: number;
+    volume: number;
+    percentFill: number;
+    product: string;
+    siteName: string;
+    lastUpdated: string;
+    status: "ONLINE" | "OFFLINE" | "INACTIVE";
+    waterLevel?: number;
+    unit?: string;
+    alarmType?: string;
+    shape?: TankShape;
+    productColor?: string;
+    className?: string;
+}
+declare const TankCard: ({ tankName, capacity, volume, percentFill, product, siteName, lastUpdated, status, waterLevel, unit, alarmType, shape, productColor, className, }: TankCardProps) => react_jsx_runtime.JSX.Element;
+
+export { type AdvancedFilter, AdvancedFilterBuilder, type AdvancedFilterBuilderProps, type AdvancedSort, AdvancedSortBuilder, type AdvancedSortBuilderProps, AppSidebar, type AppSidebarProps, Breadcrumbs, type BreadcrumbsProps, ColorPicker, type ColorPickerProps, type ColumnDef, type Country, DIRECTIONS, DataTable, DataTableBody, type DataTableBodyProps, type DataTableFeatures, DataTableGridView, type DataTableGridViewProps, DataTableHeader, type DataTableHeaderProps, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DataTableToolbar, type DataTableToolbarProps, type DataTableViewState, DateTimePicker, type DateTimePickerProps, type DateValue, FileInput, type FileInputProps, type FileWithPreview, type Form$1 as Form, type HSL, MAX_VISIBLE_TAGS, MultiSelect, type MultiSelectProps, type MultiStepNavBarProps, MultiStepNavButtons, type MultiStepNavButtonsProps, MultiStepNavbar, type NavItem, NavMain, NavProjects, NavSecondary, type NavSubItem, NavUser, OPERATORS, type OptionType, PasswordInput, type PasswordInputProps, type PhoneData, PhoneInput, type PickerValue, type Project, type RGB, type RangeValue, ResizableHeader, type ResizableHeaderProps, ResponsiveAlertDialog, type ResponsiveAlertDialogProps, ResponsiveDialog, type ResponsiveDialogProps, SearchForm, SidebarProvider, TagInput, type TagInputProps, TankCard, type TankCardProps, TankLevelVisualization, type TankShape, type Team, TeamSwitcher, type UseMultiStepFormTypeOptions$1 as UseMultiStepFormTypeOptions, type User, containerCurrentForm, containerMultiStepForm, containerMultiStepNavbar, containerSignUpForm, defaultFeatures, getPhoneData, useMultiStepForm, useSidebar };