@shohojdhara/atomix 0.1.5 → 0.1.7

package/dist/types/lib/composables/useDataTable.d.ts

@@ -0,0 +1,66 @@
+import { DataTableColumn, SortConfig } from '../types/components';
+export interface UseDataTableProps {
+    /**
+     * Data array to display
+     */
+    data: any[];
+    /**
+     * Column definitions
+     */
+    columns: DataTableColumn[];
+    /**
+     * Whether the table is sortable
+     */
+    sortable?: boolean;
+    /**
+     * Whether the table is paginated
+     */
+    paginated?: boolean;
+    /**
+     * Number of rows per page
+     */
+    pageSize?: number;
+    /**
+     * Callback when sorting changes
+     */
+    onSort?: (sortConfig: SortConfig) => void;
+    /**
+     * Initial sort configuration
+     */
+    initialSortConfig?: SortConfig;
+}
+export interface UseDataTableReturn {
+    /**
+     * Data to display (filtered, sorted, paginated)
+     */
+    displayData: any[];
+    /**
+     * Current sort configuration
+     */
+    sortConfig: SortConfig | null;
+    /**
+     * Current page number
+     */
+    currentPage: number;
+    /**
+     * Total number of pages
+     */
+    totalPages: number;
+    /**
+     * Handle sort column click
+     */
+    handleSort: (key: string) => void;
+    /**
+     * Handle page change
+     */
+    handlePageChange: (page: number) => void;
+    /**
+     * Handle search input
+     */
+    handleSearch: (query: string) => void;
+}
+/**
+ * Hook for managing DataTable state and behavior
+ */
+export declare function useDataTable({ data, columns, sortable, paginated, pageSize, onSort, initialSortConfig, }: UseDataTableProps): UseDataTableReturn;
+export default useDataTable;

package/dist/types/lib/composables/useDatePicker.d.ts

@@ -0,0 +1,91 @@
+import { DatePickerViewMode, DatePickerSelectionMode, DateRange } from '../../components/DatePicker/types';
+interface UseDatePickerProps {
+    /**
+     * The currently selected date value
+     */
+    value?: Date | null;
+    /**
+     * Callback function when date is changed
+     */
+    onChange?: (date: Date | null) => void;
+    /**
+     * Selection mode - single date or date range
+     */
+    selectionMode?: DatePickerSelectionMode;
+    /**
+     * The start date of the range
+     */
+    startDate?: Date | null;
+    /**
+     * The end date of the range
+     */
+    endDate?: Date | null;
+    /**
+     * Callback function when date range is changed
+     */
+    onRangeChange?: (range: DateRange) => void;
+    /**
+     * Format for the date display
+     */
+    format?: string;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+    /**
+     * Whether the datepicker is in inline mode
+     */
+    inline?: boolean;
+}
+interface DateObject {
+    day: number;
+    month: number;
+    year: number;
+    isCurrentMonth: boolean;
+}
+interface MonthObject {
+    month: number;
+    name: string;
+}
+export declare function useDatePicker({ value, onChange, selectionMode, startDate, endDate, onRangeChange, format, minDate, maxDate, inline }?: UseDatePickerProps): {
+    isOpen: boolean;
+    inputValue: string;
+    rangeInputValue: string;
+    viewDate: Date;
+    viewMode: DatePickerViewMode;
+    currentMonth: number;
+    currentYear: number;
+    selectionMode: DatePickerSelectionMode;
+    rangeSelectionState: "start" | "end";
+    datePickerRef: import("react").RefObject<HTMLDivElement>;
+    inputRef: import("react").RefObject<HTMLInputElement>;
+    startDate: Date | null | undefined;
+    endDate: Date | null | undefined;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleDateSelect: (day: number) => void;
+    handlePrevMonth: () => void;
+    handleNextMonth: () => void;
+    handlePrevYear: () => void;
+    handleNextYear: () => void;
+    handleTodayClick: () => void;
+    handleClear: () => void;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleInputFocus: () => void;
+    switchToMonthView: () => void;
+    switchToYearView: () => void;
+    selectMonth: (month: number) => void;
+    selectYear: (year: number) => void;
+    generateDays: () => DateObject[];
+    generateMonths: () => MonthObject[];
+    generateYears: () => number[];
+    isDateSelectable: (year: number, month: number, day: number) => boolean;
+    isDateSelected: (year: number, month: number, day: number) => boolean;
+    isDateInSelectedRange: (year: number, month: number, day: number) => boolean;
+    isToday: (year: number, month: number, day: number) => boolean;
+    getWeekNumber: (date: Date) => number;
+};
+export {};

package/dist/types/lib/composables/useDropdown.d.ts

@@ -0,0 +1,26 @@
+import type { DropdownPlacement, DropdownTrigger } from '../types/components';
+interface UseDropdownProps {
+    placement?: DropdownPlacement;
+    trigger?: DropdownTrigger;
+    offset?: number;
+    defaultOpen?: boolean;
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    id?: string;
+}
+interface UseDropdownReturn {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    triggerRef: React.RefObject<HTMLElement>;
+    menuRef: React.RefObject<HTMLElement>;
+    dropdownId: string;
+    currentPlacement: DropdownPlacement;
+    updatePosition: () => void;
+}
+/**
+ * Hook for managing dropdown state and position
+ */
+export declare const useDropdown: ({ placement, trigger, offset, defaultOpen, isOpen: controlledIsOpen, onOpenChange, closeOnClickOutside, closeOnEscape, id }: UseDropdownProps) => UseDropdownReturn;
+export {};

package/dist/types/lib/composables/useEdgePanel.d.ts

@@ -0,0 +1,15 @@
+import { EdgePanelProps } from '../types/components';
+/**
+ * EdgePanel state and functionality
+ * @param initialProps - Initial EdgePanel properties
+ * @returns EdgePanel state and methods
+ */
+export declare function useEdgePanel(initialProps?: Partial<EdgePanelProps>): {
+    isOpen: boolean;
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    backdropRef: import("react").RefObject<HTMLDivElement>;
+    generateEdgePanelClass: (props: Partial<EdgePanelProps>) => string;
+    openPanel: () => void;
+    closePanel: () => void;
+    handleBackdropClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+};

package/dist/types/lib/composables/useForm.d.ts

@@ -0,0 +1,12 @@
+import { FormProps } from '../types/components';
+/**
+ * Form state and functionality
+ * @param initialProps - Initial form properties
+ * @returns Form state and methods
+ */
+export declare function useForm(initialProps?: Partial<FormProps>): {
+    defaultProps: Partial<FormProps>;
+    generateFormClass: (props: Partial<FormProps>) => string;
+    handleSubmit: (handler?: (event: React.FormEvent<HTMLFormElement>) => void) => (event: React.FormEvent<HTMLFormElement>) => void;
+    handleReset: (handler?: (event: React.FormEvent<HTMLFormElement>) => void) => (event: React.FormEvent<HTMLFormElement>) => void;
+};

package/dist/types/lib/composables/useFormGroup.d.ts

@@ -0,0 +1,10 @@
+import { FormGroupProps } from '../types/components';
+/**
+ * Form Group state and functionality
+ * @param initialProps - Initial form group properties
+ * @returns Form Group state and methods
+ */
+export declare function useFormGroup(initialProps?: Partial<FormGroupProps>): {
+    defaultProps: Partial<FormGroupProps>;
+    generateFormGroupClass: (props: Partial<FormGroupProps>) => string;
+};

package/dist/types/lib/composables/useHero.d.ts

@@ -0,0 +1,53 @@
+import { HeroProps } from '../types/components';
+/**
+ * Hero hook result interface
+ */
+interface UseHeroResult {
+    /**
+     * Generate hero class names based on props
+     */
+    generateHeroClassNames: (baseClassName?: string) => string;
+    /**
+     * Generate image column class based on size
+     */
+    generateImageColClass: (size?: number) => string;
+    /**
+     * Generate content column class based on size
+     */
+    generateContentColClass: (size?: number) => string;
+    /**
+     * Determine if the hero has a background image
+     */
+    hasBackgroundImage: boolean;
+    /**
+     * Determine if the hero has a foreground image
+     */
+    hasForegroundImage: boolean;
+    /**
+     * Determine if content should be displayed in a grid
+     */
+    useGridLayout: boolean;
+    /**
+     * Reference to the hero element
+     */
+    heroRef: React.RefObject<HTMLDivElement>;
+    /**
+     * Reference to the video element
+     */
+    videoRef: React.RefObject<HTMLVideoElement>;
+    /**
+     * Apply parallax effect
+     */
+    applyParallaxEffect: (element: HTMLElement, intensity: number) => void;
+    /**
+     * Remove parallax effect
+     */
+    removeParallaxEffect: (element: HTMLElement) => void;
+}
+/**
+ * Hook for Hero component functionality
+ * @param initialProps - Initial hero props
+ * @returns Hero methods
+ */
+export declare function useHero(initialProps?: Partial<HeroProps>): UseHeroResult;
+export {};

package/dist/types/lib/composables/useInput.d.ts

@@ -0,0 +1,12 @@
+import { InputProps } from '../types/components';
+/**
+ * Input state and functionality
+ * @param initialProps - Initial input properties
+ * @returns Input state and methods
+ */
+export declare function useInput(initialProps?: Partial<InputProps>): {
+    defaultProps: Partial<InputProps>;
+    generateInputClass: (props: Partial<InputProps> & {
+        type?: string;
+    }) => string;
+};

package/dist/types/lib/composables/useMessages.d.ts

@@ -0,0 +1,38 @@
+import { MessageItem } from '../types/components';
+interface UseMessagesProps {
+    /**
+     * Initial messages
+     */
+    initialMessages?: MessageItem[];
+    /**
+     * Callback when a message is sent
+     */
+    onSendMessage?: (text: string) => void;
+}
+interface UseMessagesReturn {
+    /**
+     * Current input value
+     */
+    inputValue: string;
+    /**
+     * Set input value
+     */
+    setInputValue: (value: string) => void;
+    /**
+     * Handle input change
+     */
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Handle form submission
+     */
+    handleSubmit: (e: React.FormEvent) => void;
+    /**
+     * Handle key down events
+     */
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+}
+/**
+ * Hook for managing Messages component state and behavior
+ */
+export declare const useMessages: ({ onSendMessage }?: UseMessagesProps) => UseMessagesReturn;
+export default useMessages;

package/dist/types/lib/composables/useModal.d.ts

@@ -0,0 +1,40 @@
+export interface UseModalProps {
+    /**
+     * Whether the modal is open
+     */
+    isOpen?: boolean;
+    /**
+     * Callback when modal state changes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Callback when modal opens
+     */
+    onOpen?: () => void;
+    /**
+     * Callback when modal closes
+     */
+    onClose?: () => void;
+}
+export interface UseModalReturn {
+    /**
+     * Current open state
+     */
+    isOpen: boolean;
+    /**
+     * Function to open the modal
+     */
+    open: () => void;
+    /**
+     * Function to close the modal
+     */
+    close: () => void;
+    /**
+     * Function to toggle the modal
+     */
+    toggle: () => void;
+}
+/**
+ * Hook for managing modal state
+ */
+export declare function useModal({ isOpen: isOpenProp, onOpenChange, onOpen, onClose }?: UseModalProps): UseModalReturn;

package/dist/types/lib/composables/useNavbar.d.ts

@@ -0,0 +1,59 @@
+import { NavbarProps, NavProps, NavItemProps, NavDropdownProps } from '../types/components';
+import React from 'react';
+/**
+ * Navbar state and functionality
+ * @param initialProps - Initial navbar properties
+ * @returns Navbar state and methods
+ */
+export declare function useNavbar(initialProps?: Partial<NavbarProps>): {
+    defaultProps: Partial<NavbarProps>;
+    isExpanded: boolean;
+    setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+    generateNavbarClass: (props: Partial<NavbarProps>) => string;
+    generateContainerStyle: (width?: string) => {
+        maxWidth: string;
+    } | {
+        maxWidth?: undefined;
+    };
+    generateCollapseClass: (expanded: boolean) => string;
+    toggleExpanded: () => void;
+    getExpandedState: (controlled?: boolean) => boolean;
+};
+/**
+ * Nav state and functionality
+ * @param initialProps - Initial nav properties
+ * @returns Nav state and methods
+ */
+export declare function useNav(initialProps?: Partial<NavProps>): {
+    defaultProps: Partial<NavProps>;
+    generateNavClass: (props: Partial<NavProps>) => string;
+};
+/**
+ * Nav item state and functionality
+ * @param initialProps - Initial nav item properties
+ * @returns Nav item state and methods
+ */
+export declare function useNavItem(initialProps?: Partial<NavItemProps & {
+    megaMenu?: boolean;
+}>): {
+    defaultProps: Partial<NavItemProps & {
+        megaMenu?: boolean;
+    }>;
+    generateNavItemClass: (props: Partial<NavItemProps & {
+        megaMenu?: boolean;
+    }>) => string;
+    generateNavLinkClass: (active?: boolean, disabled?: boolean, className?: string) => string;
+    handleClick: (handler?: () => void) => (e: React.MouseEvent) => void;
+};
+/**
+ * Nav dropdown state and functionality
+ * @param initialProps - Initial dropdown properties
+ * @returns Dropdown state and methods
+ */
+export declare function useNavDropdown(initialProps?: Partial<NavDropdownProps>): {
+    defaultProps: Partial<NavDropdownProps>;
+    generateDropdownMenuClass: (props: Partial<NavDropdownProps>) => string;
+    isInFixedBottomNavbar: () => boolean;
+    getIconClass: (isMegaMenu?: boolean) => string;
+    getIconName: (isMegaMenu?: boolean) => string;
+};

package/dist/types/lib/composables/usePagination.d.ts

@@ -0,0 +1,13 @@
+import { PaginationProps } from '../types/components';
+export declare const DOTS = "...";
+export declare const usePagination: ({ currentPage, totalPages, siblingCount, onPageChange, }: Omit<PaginationProps, "className">) => {
+    paginationRange: (string | number)[];
+    currentPage: number;
+    totalPages: number;
+    goToPage: (page: number) => void;
+    nextPage: () => void;
+    prevPage: () => void;
+    firstPage: () => void;
+    lastPage: () => void;
+    DOTS: string;
+};

package/dist/types/lib/composables/usePhotoViewer.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+interface UsePhotoViewerProps {
+    images: (string | {
+        src: string;
+        [key: string]: any;
+    })[];
+    startIndex?: number;
+    enableGestures?: boolean;
+    onImageChange?: (index: number) => void;
+    onClose?: () => void;
+}
+export declare const usePhotoViewer: ({ images, startIndex, enableGestures, onImageChange, onClose }: UsePhotoViewerProps) => {
+    currentIndex: number;
+    isModalOpen: boolean;
+    zoomLevel: number;
+    imagePosition: {
+        x: number;
+        y: number;
+    };
+    isDragging: boolean;
+    isFullscreen: boolean;
+    rotationAngle: number;
+    showInfo: boolean;
+    imageRef: React.RefObject<HTMLImageElement>;
+    containerRef: React.RefObject<HTMLDivElement>;
+    isTransitioning: boolean;
+    setCurrentIndex: React.Dispatch<React.SetStateAction<number>>;
+    setZoomLevel: (zoom: number | ((prev: number) => number)) => void;
+    setImagePosition: (position: {
+        x: number;
+        y: number;
+    } | ((prev: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+    })) => void;
+    setIsDragging: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsFullscreen: React.Dispatch<React.SetStateAction<boolean>>;
+    setRotationAngle: (rotation: number | ((prev: number) => number)) => void;
+    setShowInfo: React.Dispatch<React.SetStateAction<boolean>>;
+    openModal: () => void;
+    closeModal: () => void;
+    goToPrevious: () => void;
+    goToNext: () => void;
+    handleWheel: (event: React.WheelEvent<HTMLDivElement>) => void;
+    handleMouseDown: (event: React.MouseEvent<HTMLDivElement | HTMLImageElement, MouseEvent>) => void;
+    handleMouseMove: (event: React.MouseEvent<HTMLDivElement | HTMLImageElement, MouseEvent>) => void;
+    handleMouseUp: () => void;
+    handleTouchStart: (event: React.TouchEvent<HTMLImageElement | HTMLDivElement>) => void;
+    handleTouchMove: (event: React.TouchEvent<HTMLImageElement | HTMLDivElement>) => void;
+    handleTouchEnd: () => void;
+    handleDoubleClick: (event: React.MouseEvent) => void;
+    resetImageState: () => void;
+};
+export {};

package/dist/types/lib/composables/usePopover.d.ts

@@ -0,0 +1,30 @@
+import { RefObject } from 'react';
+type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+type PopoverTrigger = 'click' | 'hover';
+interface UsePopoverProps {
+    position?: PopoverPosition | 'auto';
+    trigger?: PopoverTrigger;
+    offset?: number;
+    delay?: number;
+    defaultOpen?: boolean;
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    id?: string;
+}
+interface UsePopoverResult {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    triggerRef: RefObject<HTMLElement>;
+    popoverRef: RefObject<HTMLDivElement>;
+    arrowRef: RefObject<HTMLDivElement>;
+    popoverId: string;
+    currentPosition: PopoverPosition;
+    updatePosition: () => void;
+}
+/**
+ * Hook for managing popover state and positioning logic
+ */
+export declare const usePopover: ({ position, trigger, offset, delay, defaultOpen, isOpen: controlledIsOpen, onOpenChange, closeOnClickOutside, closeOnEscape, id, }: UsePopoverProps) => UsePopoverResult;
+export default usePopover;

package/dist/types/lib/composables/useProgress.d.ts

@@ -0,0 +1,38 @@
+import { ThemeColor } from '../types/components';
+interface UseProgressProps {
+    /**
+     * Progress value from 0 to 100
+     */
+    value: number;
+    /**
+     * Optional color variant
+     */
+    variant?: ThemeColor;
+    /**
+     * Optional size
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Optional className for custom styling
+     */
+    className?: string;
+}
+interface UseProgressReturn {
+    /**
+     * Computed progress value clamped between 0 and 100
+     */
+    progressValue: number;
+    /**
+     * CSS properties for the progress component
+     */
+    progressStyle: React.CSSProperties;
+    /**
+     * CSS classes for the progress component
+     */
+    progressClasses: string;
+}
+/**
+ * Hook for managing Progress component state and behavior
+ */
+export declare const useProgress: ({ value, variant, size, className, }: UseProgressProps) => UseProgressReturn;
+export {};

package/dist/types/lib/composables/useRadio.d.ts

@@ -0,0 +1,10 @@
+import { RadioProps } from '../types/components';
+/**
+ * Radio state and functionality
+ * @param initialProps - Initial radio properties
+ * @returns Radio state and methods
+ */
+export declare function useRadio(initialProps?: Partial<RadioProps>): {
+    defaultProps: Partial<RadioProps>;
+    generateRadioClass: (props: Partial<RadioProps>) => string;
+};

package/dist/types/lib/composables/useRating.d.ts

@@ -0,0 +1,52 @@
+import type { RatingProps } from '../types/components';
+/**
+ * Props for the useRating hook
+ */
+export type UseRatingProps = Pick<RatingProps, 'value' | 'maxValue' | 'allowHalf' | 'readOnly' | 'onChange'>;
+export interface UseRatingReturn {
+    /**
+     * Current rating value (controlled or uncontrolled)
+     */
+    currentValue: number;
+    /**
+     * Value being hovered over
+     */
+    hoverValue: number | null;
+    /**
+     * Currently focused star index
+     */
+    focusedIndex: number | null;
+    /**
+     * Handle mouse enter on a star
+     */
+    handleMouseEnter: (starValue: number) => void;
+    /**
+     * Handle mouse leave from rating component
+     */
+    handleMouseLeave: () => void;
+    /**
+     * Handle click on a star
+     */
+    handleClick: (newValue: number) => void;
+    /**
+     * Handle keyboard navigation
+     */
+    handleKeyDown: (e: React.KeyboardEvent, index: number) => void;
+    /**
+     * Set focus on a specific star
+     */
+    setFocused: (index: number | null) => void;
+    /**
+     * Set hover value directly
+     */
+    setHoverValue: (value: number | null) => void;
+    /**
+     * Whether the component is in controlled mode
+     */
+    isControlled: boolean;
+}
+/**
+ * Hook for managing rating component state and interactions
+ */
+export declare const useRating: ({ value, maxValue, allowHalf, readOnly, onChange }: UseRatingProps) => UseRatingReturn;
+export default useRating;