@khraben/flowui 1.0.1

package/dist/index.d.mts

@@ -0,0 +1,527 @@
+import * as React$1 from 'react';
+import React__default, { ComponentType, SVGProps, ReactNode } from 'react';
+import ReactDatePicker from 'react-datepicker';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'close' | 'clear' | 'icon';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Base color configuration required for all components
+ */
+interface BaseColorConfig {
+    primary: string;
+    secondary: string;
+    accent: string;
+}
+/**
+ * Extended color configuration with status colors
+ * Use this for components that need warning, success, or danger states
+ */
+interface ExtendedColorConfig extends BaseColorConfig {
+    warning: string;
+    success: string;
+    danger: string;
+}
+/**
+ * Type guard to check if color config has extended colors
+ */
+declare function hasExtendedColors(config: BaseColorConfig | ExtendedColorConfig): config is ExtendedColorConfig;
+/**
+ * Default color configuration
+ */
+declare const DEFAULT_COLOR_CONFIG: ExtendedColorConfig;
+
+interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    icon?: React__default.ReactNode;
+    iconPosition?: 'left' | 'right';
+    isLoading?: boolean;
+    loadingText?: string;
+    fullWidth?: boolean;
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    children?: React__default.ReactNode;
+    baseClassName?: string;
+    variantClassName?: string;
+    sizeClassName?: string;
+    disableDefaultStyles?: boolean;
+    colors?: BaseColorConfig;
+    customBg?: string;
+    customTextColor?: string;
+    customBorderColor?: string;
+}
+
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type InputVariant = 'text' | 'number' | 'search' | 'select' | 'password' | 'time' | 'date';
+type InputSize = 'sm' | 'md' | 'lg';
+type SelectVariant = 'select';
+type TimeVariant = 'time';
+
+interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    variant?: InputVariant;
+    size?: InputSize;
+    label?: string;
+    labelStyle?: React__default.CSSProperties;
+    onClear?: () => void;
+    showPasswordToggle?: boolean;
+    passwordIcon?: React__default.ReactNode;
+    passwordIconHidden?: React__default.ReactNode;
+    searchIcon?: React__default.ReactNode;
+    clearIcon?: React__default.ReactNode;
+    fullWidth?: boolean;
+    baseClassName?: string;
+    labelClassName?: string;
+    wrapperClassName?: string;
+    disableDefaultStyles?: boolean;
+    colors?: BaseColorConfig;
+    customBg?: string;
+    customTextColor?: string;
+    customBorderColor?: string;
+}
+
+interface SelectInputProps extends Omit<React__default.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    variant?: SelectVariant;
+    size?: InputSize;
+    label?: string;
+    labelStyle?: React__default.CSSProperties;
+    children?: React__default.ReactNode;
+    selectIcon?: React__default.ReactNode;
+    fullWidth?: boolean;
+    baseClassName?: string;
+    labelClassName?: string;
+    wrapperClassName?: string;
+    disableDefaultStyles?: boolean;
+    colors?: BaseColorConfig;
+    customBg?: string;
+    customTextColor?: string;
+    customBorderColor?: string;
+}
+
+interface TimeInputProps {
+    variant?: TimeVariant;
+    size?: InputSize;
+    label?: string;
+    value?: string;
+    onChange?: (e: React__default.ChangeEvent<HTMLSelectElement>) => void;
+    startHour?: number;
+    endHour?: number;
+    interval?: number;
+    selectIcon?: React__default.ReactNode;
+    fullWidth?: boolean;
+    baseClassName?: string;
+    labelClassName?: string;
+    wrapperClassName?: string;
+    disableDefaultStyles?: boolean;
+    className?: string;
+    colors?: BaseColorConfig;
+    customBg?: string;
+    customTextColor?: string;
+    customBorderColor?: string;
+}
+
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+declare const SelectInput: React$1.ForwardRefExoticComponent<SelectInputProps & React$1.RefAttributes<HTMLSelectElement>>;
+declare const TimeInput: React$1.ForwardRefExoticComponent<TimeInputProps & React$1.RefAttributes<HTMLSelectElement>>;
+
+type DatePickerSize = 'sm' | 'md' | 'lg';
+interface DatePickerProps {
+    size?: DatePickerSize;
+    onClear?: () => void;
+    calendarIcon?: React__default.ReactNode;
+    clearIcon?: React__default.ReactNode;
+    fullWidth?: boolean;
+    baseClassName?: string;
+    wrapperClassName?: string;
+    disableDefaultStyles?: boolean;
+    locale?: unknown;
+    selected?: Date | null;
+    onChange?: ((date: Date | null, event?: React__default.SyntheticEvent<unknown> | undefined) => void) | ((dates: Date[] | null, event?: React__default.MouseEvent<HTMLElement> | React__default.KeyboardEvent<HTMLElement> | undefined) => void);
+    placeholderText?: string;
+    dateFormat?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    filterDate?: (date: Date) => boolean;
+    includeDates?: Date[];
+    excludeDates?: Date[];
+    highlightDates?: Date[];
+    showMonthDropdown?: boolean;
+    showYearDropdown?: boolean;
+    showMonthYearPicker?: boolean;
+    dropdownMode?: 'scroll' | 'select';
+    showTimeSelect?: boolean;
+    timeFormat?: string;
+    timeIntervals?: number;
+    timeCaption?: string;
+    showTimeSelectOnly?: boolean;
+    dateFormatCalendar?: string;
+    monthsShown?: number;
+    inline?: boolean;
+    fixedHeight?: boolean;
+    selectsRange?: boolean;
+    startDate?: Date | null;
+    endDate?: Date | null;
+    selectsStart?: boolean;
+    selectsEnd?: boolean;
+    isClearable?: boolean;
+    clearButtonClassName?: string;
+    shouldCloseOnSelect?: boolean;
+    showPopperArrow?: boolean;
+    autoComplete?: string;
+    className?: string;
+    label?: string;
+    labelStyle?: React__default.CSSProperties;
+    colors?: BaseColorConfig;
+    customBg?: string;
+    customTextColor?: string;
+    customBorderColor?: string;
+}
+
+declare const DatePicker: React$1.ForwardRefExoticComponent<DatePickerProps & React$1.RefAttributes<ReactDatePicker>>;
+
+interface LanguageSelectorProps {
+    selectedLanguage?: string;
+    onLanguageChange?: (languageKey: string) => void;
+    availableLanguages?: string[];
+    size?: 'sm' | 'md' | 'lg';
+    buttonClassName?: string;
+    dropdownClassName?: string;
+    itemClassName?: string;
+    activeItemClassName?: string;
+    disableDefaultStyles?: boolean;
+    colors?: BaseColorConfig;
+    customBorderColor?: string;
+    customBgColor?: string;
+    customTextColor?: string;
+}
+
+declare const LanguageSelector: React__default.ForwardRefExoticComponent<LanguageSelectorProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface ThemeSelectorProps {
+    theme?: 'light' | 'dark';
+    onThemeChange?: (theme: 'light' | 'dark') => void;
+    size?: 'sm' | 'md' | 'lg';
+    buttonClassName?: string;
+    disableDefaultStyles?: boolean;
+    colors?: BaseColorConfig;
+    customBorderColor?: string;
+    customBgColor?: string;
+}
+
+declare const ThemeSelector: React__default.ForwardRefExoticComponent<ThemeSelectorProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface ActionIconProps {
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    onClick?: () => void;
+    title?: string;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+    disabled?: boolean;
+    colors?: BaseColorConfig;
+    customColor?: string;
+    customBg?: string;
+}
+
+declare const ActionIcon: React__default.FC<ActionIconProps>;
+
+interface LoaderProps {
+    text?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'spinner' | 'dots' | 'pulse';
+    fullScreen?: boolean;
+    overlay?: boolean;
+    colors?: BaseColorConfig;
+    customOverlayColor?: string;
+    customSpinnerColor?: string;
+}
+
+declare const Loader: React__default.FC<LoaderProps>;
+
+type SortDirection = 'asc' | 'desc';
+interface TableColumn<T = Record<string, unknown>> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    render?: (value: unknown, item: T) => React.ReactNode;
+}
+interface TableActionConfig {
+    info?: boolean;
+    edit?: boolean;
+    delete?: boolean;
+}
+interface TableProps<T = Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    data: T[];
+    onInfo?: (item: T) => void;
+    onEdit?: (item: T) => void;
+    onDelete?: (item: T) => void;
+    sortField?: string;
+    sortDirection?: SortDirection;
+    onSort?: (field: string) => void;
+    noDataMessage?: string;
+    showActions?: boolean;
+    actionConfig?: TableActionConfig;
+    actionsLabel?: string;
+    infoIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+    editIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+    deleteIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+    colors?: ExtendedColorConfig;
+    customHeaderBg?: string;
+    customRowBg?: string;
+}
+
+declare const Table: {
+    <T extends Record<string, unknown>>({ columns, data, onInfo, onEdit, onDelete, sortField, sortDirection, onSort, noDataMessage, showActions, actionConfig, actionsLabel, infoIcon, editIcon, deleteIcon, colors, customHeaderBg, customRowBg, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Stat item configuration for BaseModal stats display
+ */
+interface BaseModalStat {
+    /** The icon component to display */
+    icon?: LucideIcon;
+    /** The numeric value or text to display */
+    number: string | number;
+    /** The label text below the number */
+    label: string;
+    /** Custom color for the icon */
+    color?: string;
+}
+/**
+ * Text labels for BaseModal i18n support
+ */
+interface BaseModalTexts {
+    /** Title for the discard changes confirmation modal */
+    discardChangesTitle?: string;
+    /** Warning message for unsaved changes */
+    unsavedChangesWarning?: string;
+    /** Text for "Continue Editing" button */
+    continueEditing?: string;
+    /** Text for "Discard" button */
+    discardButton?: string;
+}
+/**
+ * Props for BaseModal component
+ */
+interface BaseModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Callback when modal should close */
+    onClose: () => void;
+    /** Modal title */
+    title: string;
+    /** Icon to display next to the title */
+    icon?: LucideIcon;
+    /** Modal content */
+    children: ReactNode;
+    /** Optional stats to display below the header */
+    stats?: BaseModalStat[];
+    /** Maximum width of the modal (default: "56.25rem") */
+    maxWidth?: string;
+    /** Whether to show the close button (default: true) */
+    showCloseButton?: boolean;
+    /** Whether the modal has unsaved changes (shows confirmation on close) */
+    hasUnsavedChanges?: boolean;
+    /** Custom text labels for i18n support */
+    texts?: BaseModalTexts;
+    colors?: ExtendedColorConfig;
+    customOverlayBg?: string;
+    customModalBg?: string;
+}
+
+declare const BaseModal: React__default.FC<BaseModalProps>;
+
+interface ConfirmationModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => Promise<void> | void;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    loadingContent?: ReactNode;
+    colors?: ExtendedColorConfig;
+}
+declare const ConfirmationModal: React__default.FC<ConfirmationModalProps>;
+
+interface SideBarMenuItem {
+    id: string;
+    label: string;
+    icon: React__default.ReactNode;
+    onClick?: () => void;
+    href?: string;
+    section?: 'top' | 'bottom';
+    isActive?: boolean;
+}
+interface SideBarLogoutButton {
+    label: string;
+    icon: React__default.ReactNode;
+    onClick: () => void;
+}
+interface SideBarProps {
+    menuItems: SideBarMenuItem[];
+    logoutButton?: SideBarLogoutButton;
+    isOpen?: boolean;
+    onToggle?: (isOpen: boolean) => void;
+    openWidth?: string;
+    closedWidth?: string;
+    languageSelector?: {
+        selectedLanguage?: string;
+        onLanguageChange?: (languageKey: string) => void;
+        availableLanguages?: string[];
+    };
+    colors?: BaseColorConfig;
+    customBg?: string;
+    customTextColor?: string;
+    customHoverBg?: string;
+    customToggleBtnBg?: string;
+    customToggleBtnHoverBg?: string;
+    customLogoutTextColor?: string;
+    customLogoutHoverBg?: string;
+    customLogoutHoverTextColor?: string;
+}
+
+declare const SideBar: {
+    ({ menuItems, logoutButton, isOpen: controlledIsOpen, onToggle, openWidth, closedWidth, colors, customBg, customTextColor, customHoverBg, customToggleBtnBg, customToggleBtnHoverBg, customLogoutTextColor, customLogoutHoverBg, customLogoutHoverTextColor, languageSelector, }: SideBarProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface NavBarLogo {
+    src?: string;
+    alt?: string;
+    text?: string;
+    href?: string;
+    onClick?: () => void;
+}
+interface NavBarMenuItem {
+    id?: string;
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    isActive?: boolean;
+}
+interface NavBarAction {
+    id?: string;
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary' | 'outline';
+    icon?: React__default.ReactNode;
+}
+interface NavBarProps {
+    logo?: NavBarLogo;
+    menuItems?: NavBarMenuItem[];
+    actions?: NavBarAction[];
+    colors?: BaseColorConfig;
+    customBgColor?: string;
+    customTextColor?: string;
+    customActiveColor?: string;
+    customHoverColor?: string;
+    height?: string;
+    showMobileMenu?: boolean;
+    onMobileMenuToggle?: (isOpen: boolean) => void;
+    languageSelector?: {
+        selectedLanguage?: string;
+        onLanguageChange?: (languageKey: string) => void;
+        availableLanguages?: string[];
+    };
+}
+
+declare const NavBar: {
+    ({ logo, menuItems, actions, colors, customBgColor, customTextColor, customActiveColor, customHoverColor, height, showMobileMenu: controlledMobileMenu, onMobileMenuToggle, languageSelector, }: NavBarProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface GalleryImage {
+    id?: string;
+    src: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+}
+interface GalleryProps {
+    images: GalleryImage[];
+    batchSize?: number;
+    enableAnimation?: boolean;
+    className?: string;
+    disableDefaultStyles?: boolean;
+    forceColumnCount?: number;
+    gap?: string;
+    colors?: BaseColorConfig;
+    customBorderColor?: string;
+    customSkeletonBg?: string;
+    customOverlayColor?: string;
+}
+
+declare const Gallery: {
+    ({ images, batchSize, enableAnimation, forceColumnCount, gap, colors, customBorderColor, customSkeletonBg, customOverlayColor, }: GalleryProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const FlagEN: ({ className }: FlagProps) => react_jsx_runtime.JSX.Element;
+
+declare const FlagES: ({ className }: FlagProps) => react_jsx_runtime.JSX.Element;
+
+declare const FlagDE: ({ className }: FlagProps) => react_jsx_runtime.JSX.Element;
+
+declare const FlagFR: ({ className }: FlagProps) => react_jsx_runtime.JSX.Element;
+
+declare const FlagIT: ({ className }: FlagProps) => react_jsx_runtime.JSX.Element;
+
+declare const FlagJA: ({ className }: FlagProps) => react_jsx_runtime.JSX.Element;
+
+declare const FlagPT: ({ className }: FlagProps) => react_jsx_runtime.JSX.Element;
+
+declare const FlagRU: ({ className }: FlagProps) => react_jsx_runtime.JSX.Element;
+
+declare const FlagZH: ({ className }: FlagProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Flag component props
+ * All flag components accept a className prop for customization
+ */
+interface FlagProps {
+    className?: string;
+}
+
+/**
+ * Color utility functions for dynamic color manipulation
+ */
+/**
+ * Determines if a color is dark based on its luminance
+ */
+declare function isDarkColor(hex: string): boolean;
+/**
+ * Darkens a color by a given percentage
+ * @param hex - Hex color string (e.g., '#FF5733')
+ * @param percent - Percentage to darken (0-100)
+ */
+declare function darkenColor(hex: string, percent?: number): string;
+/**
+ * Lightens a color by a given percentage
+ * @param hex - Hex color string (e.g., '#FF5733')
+ * @param percent - Percentage to lighten (0-100)
+ */
+declare function lightenColor(hex: string, percent?: number): string;
+/**
+ * Automatically calculates the hover color for a given base color
+ * Darkens light colors and lightens dark colors
+ * @param hex - Hex color string
+ * @param intensity - Intensity of the effect (default: 10)
+ */
+declare function getHoverColor(hex: string, intensity?: number): string;
+/**
+ * Gets a contrast color (black or white) for text based on background color
+ */
+declare function getContrastColor(hex: string): string;
+/**
+ * Adjusts color opacity
+ * @param hex - Hex color string
+ * @param opacity - Opacity value (0-1)
+ */
+declare function adjustOpacity(hex: string, opacity: number): string;
+
+export { ActionIcon, type ActionIconProps, type BaseColorConfig, BaseModal, type BaseModalProps, type BaseModalStat, type BaseModalTexts, Button, type ButtonProps, ConfirmationModal, type ConfirmationModalProps, DEFAULT_COLOR_CONFIG, DatePicker, type DatePickerProps, type ExtendedColorConfig, FlagDE, FlagEN, FlagES, FlagFR, FlagIT, FlagJA, FlagPT, type FlagProps, FlagRU, FlagZH, Gallery, type GalleryImage, type GalleryProps, Input, type InputProps, LanguageSelector, type LanguageSelectorProps, Loader, type LoaderProps, NavBar, type NavBarAction, type NavBarLogo, type NavBarMenuItem, type NavBarProps, SelectInput, SideBar, type SideBarLogoutButton, type SideBarMenuItem, type SideBarProps, Table, type TableColumn, type TableProps, ThemeSelector, type ThemeSelectorProps, TimeInput, adjustOpacity, darkenColor, getContrastColor, getHoverColor, hasExtendedColors, isDarkColor, lightenColor };