nucleus-core-ts 0.8.0

package/dist/fe/components/DataTable/theme/index.d.ts

@@ -0,0 +1,131 @@
+export declare const dataTableTheme: {
+    readonly container: {
+        readonly base: "w-full overflow-hidden";
+        readonly border: "border border-gray-200 dark:border-gray-700";
+        readonly rounded: "rounded-lg";
+        readonly shadow: "shadow-sm";
+    };
+    readonly scrollContainer: {
+        readonly base: "overflow-auto";
+        readonly maxHeight: "max-h-[70vh]";
+        readonly scrollbar: "scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent";
+    };
+    readonly table: {
+        readonly base: "w-full border-collapse table-fixed";
+        readonly layout: "min-w-full";
+    };
+    readonly header: {
+        readonly wrapper: {
+            readonly base: "sticky top-0 z-10";
+            readonly background: "bg-gray-50 dark:bg-gray-800";
+        };
+        readonly row: {
+            readonly base: "";
+            readonly border: "border-b border-gray-200 dark:border-gray-700";
+        };
+        readonly cell: {
+            readonly base: "relative select-none bg-gray-50 dark:bg-gray-800";
+            readonly padding: "px-4 py-3";
+            readonly text: "text-left text-xs font-semibold uppercase tracking-wider";
+            readonly color: "text-gray-600 dark:text-gray-300";
+            readonly transition: "transition-colors duration-200";
+            readonly hover: "hover:bg-gray-100 dark:hover:bg-gray-750";
+            readonly sortable: "cursor-pointer";
+            readonly sorted: "bg-gray-100 dark:bg-gray-750";
+        };
+        readonly sortIcon: {
+            readonly base: "inline-flex ml-1.5 transition-transform duration-300";
+            readonly active: "text-primary-500 dark:text-primary-400";
+            readonly inactive: "text-gray-400 dark:text-gray-500";
+        };
+        readonly resizeHandle: {
+            readonly base: "absolute right-0 top-0 h-full w-1 cursor-col-resize";
+            readonly idle: "bg-transparent hover:bg-primary-400 dark:hover:bg-primary-500";
+            readonly active: "bg-primary-500 dark:bg-primary-400";
+            readonly hitArea: "before:absolute before:right-[-4px] before:top-0 before:h-full before:w-[9px] before:content-[\"\"]";
+        };
+    };
+    readonly body: {
+        readonly wrapper: {
+            readonly base: "";
+        };
+        readonly row: {
+            readonly base: "group";
+            readonly border: "border-b border-gray-100 dark:border-gray-700/50";
+            readonly transition: "transition-colors duration-150";
+            readonly hover: "hover:bg-gray-50 dark:hover:bg-gray-800/50";
+            readonly zebra: {
+                readonly even: "bg-white dark:bg-gray-900";
+                readonly odd: "bg-gray-50/50 dark:bg-gray-800/30";
+            };
+        };
+        readonly cell: {
+            readonly base: "relative";
+            readonly padding: "px-4 py-3";
+            readonly text: "text-sm";
+            readonly color: "text-gray-900 dark:text-gray-100";
+            readonly truncate: "truncate";
+            readonly transition: "transition-all duration-150";
+            readonly hover: "group-hover:bg-gray-50/50 dark:group-hover:bg-gray-800/30";
+        };
+        readonly resizeHandle: {
+            readonly base: "absolute bottom-0 left-0 w-full h-1 cursor-row-resize";
+            readonly idle: "bg-transparent hover:bg-primary-400 dark:hover:bg-primary-500";
+            readonly active: "bg-primary-500 dark:bg-primary-400";
+            readonly hitArea: "before:absolute before:bottom-[-4px] before:left-0 before:w-full before:h-[9px] before:content-[\"\"]";
+        };
+    };
+    readonly loading: {
+        readonly wrapper: "flex items-center justify-center py-8";
+        readonly spinner: {
+            readonly base: "animate-spin rounded-full border-2";
+            readonly size: "h-8 w-8";
+            readonly color: "border-primary-500 border-t-transparent";
+        };
+        readonly text: "ml-3 text-sm text-gray-500 dark:text-gray-400";
+    };
+    readonly empty: {
+        readonly wrapper: "flex flex-col items-center justify-center py-12";
+        readonly icon: "h-12 w-12 text-gray-300 dark:text-gray-600 mb-4";
+        readonly text: "text-sm text-gray-500 dark:text-gray-400";
+    };
+    readonly infiniteScroll: {
+        readonly trigger: "h-1 w-full";
+        readonly loader: "flex items-center justify-center py-4";
+    };
+    readonly animation: {
+        readonly row: {
+            readonly enter: {
+                readonly opacity: 0;
+                readonly y: 10;
+            };
+            readonly visible: {
+                readonly opacity: 1;
+                readonly y: 0;
+            };
+            readonly duration: 0.3;
+            readonly stagger: 0.02;
+        };
+        readonly cell: {
+            readonly hover: {
+                readonly scale: 1.01;
+            };
+            readonly duration: 0.15;
+        };
+        readonly sort: {
+            readonly duration: 0.3;
+            readonly ease: "power2.out";
+        };
+        readonly resize: {
+            readonly duration: 0.1;
+            readonly ease: "power1.out";
+        };
+    };
+};
+export type DataTableTheme = typeof dataTableTheme;
+export declare function extendTheme(overrides: DeepPartial<DataTableTheme>): DataTableTheme;
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/fe/components/DataTable/types/index.d.ts

@@ -0,0 +1,151 @@
+import type { ReactNode } from "react";
+export type SortDirection = "asc" | "desc" | null;
+export type EditInputType = "text" | "number" | "select" | "textarea";
+export interface EditConfig {
+    type?: EditInputType;
+    showIconOnHover?: boolean;
+    selectOptions?: {
+        value: string;
+        label: string;
+    }[];
+    placeholder?: string;
+    maxLength?: number;
+}
+export interface ColumnDefinition<T> {
+    key: keyof T | string;
+    header: string | ReactNode;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    sortable?: boolean;
+    resizable?: boolean;
+    editable?: boolean;
+    editConfig?: EditConfig;
+    headerClassName?: string;
+    cellClassName?: string;
+    headerRenderer?: (column: ColumnDefinition<T>) => ReactNode;
+    cellRenderer?: (params: CellRendererParams<T>) => ReactNode;
+}
+export interface ActionColumnDefinition<T> {
+    key: string;
+    header: string | ReactNode;
+    width?: number;
+    minWidth?: number;
+    resizable?: boolean;
+    headerClassName?: string;
+    cellClassName?: string;
+    renderer: (params: ActionRendererParams<T>) => ReactNode;
+}
+export interface CellRendererParams<T> {
+    value: T[keyof T];
+    row: T;
+    rowIndex: number;
+    columnKey: keyof T | string;
+    column: ColumnDefinition<T>;
+}
+export interface ActionRendererParams<T> {
+    row: T;
+    rowIndex: number;
+    columnKey: string;
+}
+export interface CellClickParams<T> {
+    value: T[keyof T] | null;
+    row: T;
+    rowIndex: number;
+    columnKey: keyof T | string;
+    isActionColumn: boolean;
+}
+export interface SortState<T> {
+    columnKey: keyof T | string | null;
+    direction: SortDirection;
+}
+export interface ColumnWidthState {
+    [key: string]: number;
+}
+export interface RowHeightState {
+    [key: number]: number;
+}
+export interface CellEditParams<T> {
+    row: T;
+    rowIndex: number;
+    columnKey: keyof T | string;
+    oldValue: T[keyof T] | null;
+    newValue: string;
+}
+export interface DataTableCallbacks<T> {
+    onCellClick?: (params: CellClickParams<T>) => void;
+    onCellDoubleClick?: (params: CellClickParams<T>) => void;
+    onCellEdit?: (params: CellEditParams<T>) => void;
+    onSort?: (columnKey: keyof T | string, direction: SortDirection) => void;
+    onLoadMore?: () => void;
+    onColumnResize?: (columnKey: string, width: number) => void;
+    onRowResize?: (rowIndex: number, height: number) => void;
+}
+export interface DataTableConfig {
+    hasClickAction?: boolean;
+    hasDoubleClickAction?: boolean;
+    isFrontendSort?: boolean;
+    enableInfiniteScroll?: boolean;
+    infiniteScrollThreshold?: number;
+    pageSize?: number;
+    autoFetchUntilScroll?: boolean;
+    defaultColumnWidth?: number;
+    defaultRowHeight?: number;
+    minColumnWidth?: number;
+    minRowHeight?: number;
+    enableSelection?: boolean;
+    selectionColumnWidth?: number;
+}
+export interface SelectionToolbarProps<T> {
+    selectedRows: number[];
+    selectedData: T[];
+    totalCount: number;
+    onClearSelection: () => void;
+}
+export interface DataTableProps<T> {
+    data: T[];
+    columns: ColumnDefinition<T>[];
+    actionColumns?: ActionColumnDefinition<T>[];
+    keyExtractor: (item: T, index: number) => string | number;
+    callbacks?: DataTableCallbacks<T>;
+    config?: DataTableConfig;
+    className?: string;
+    headerMiddleware?: <K extends keyof T>(column: ColumnDefinition<T>, key: K) => ReactNode;
+    cellMiddleware?: (params: CellRendererParams<T>) => ReactNode;
+    isLoading?: boolean;
+    isPending?: boolean;
+    isLoadingMore?: boolean;
+    hasMoreData?: boolean;
+    skeletonRowCount?: number;
+    emptyMessage?: ReactNode;
+    selectionToolbar?: (props: SelectionToolbarProps<T>) => ReactNode;
+}
+export interface DataTableStoreState<T> {
+    sortState: SortState<T>;
+    columnWidths: ColumnWidthState;
+    rowHeights: RowHeightState;
+    resizingColumn: string | null;
+    resizingRow: number | null;
+    hoveredRow: number | null;
+    hoveredCell: {
+        row: number;
+        column: string;
+    } | null;
+    isLoadingMore: boolean;
+}
+export interface DataTableStoreMethods<T> {
+    setSortState: (columnKey: keyof T | string, direction: SortDirection) => void;
+    setColumnWidth: (columnKey: string, width: number) => void;
+    setRowHeight: (rowIndex: number, height: number) => void;
+    setResizingColumn: (columnKey: string | null) => void;
+    setResizingRow: (rowIndex: number | null) => void;
+    setHoveredRow: (rowIndex: number | null) => void;
+    setHoveredCell: (cell: {
+        row: number;
+        column: string;
+    } | null) => void;
+    setIsLoadingMore: (isLoading: boolean) => void;
+    resetWidths: () => void;
+    autoFitColumn: (columnKey: string, contentWidth: number) => void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/fe/components/DataTable/utils/cn.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/fe/components/DatePicker/components/CalendarGrid.d.ts

@@ -0,0 +1,3 @@
+import type { CalendarGridProps } from "../types";
+export declare function CalendarGrid({ currentMonth, selectedDate, selectedRange, mode, locale, minDate, maxDate, disabledDates, disabledDaysOfWeek, firstDayOfWeek, onDateSelect, hoverDate, onHoverChange, }: CalendarGridProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CalendarGrid.d.ts.map

package/dist/fe/components/DatePicker/components/CalendarHeader.d.ts

@@ -0,0 +1,3 @@
+import type { CalendarHeaderProps } from "../types";
+export declare function CalendarHeader({ currentMonth, onPrevMonth, onNextMonth, onPrevYear, onNextYear, onMonthYearClick, locale, minDate, maxDate, }: CalendarHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CalendarHeader.d.ts.map

package/dist/fe/components/DatePicker/components/DatePicker.d.ts

@@ -0,0 +1,3 @@
+import type { DatePickerMode, DatePickerProps } from "../types";
+export declare function DatePicker<TMode extends DatePickerMode = "single">({ mode, value, onChange, locale, placeholder, label, disabled, minDate, maxDate, disabledDates, disabledDaysOfWeek, className, inputClassName, dropdownClassName, showClearButton, showTodayButton, firstDayOfWeek, leftIcon, rightIcon, errorMessage, helperText, required, onOpen, onClose, }: DatePickerProps<TMode>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/fe/components/DatePicker/components/MonthYearSelector.d.ts

@@ -0,0 +1,10 @@
+import type { MonthYearSelectorProps } from "../types";
+type SelectorView = "month" | "year";
+interface MonthYearSelectorInternalProps extends MonthYearSelectorProps {
+    view: SelectorView;
+    onViewChange: (view: SelectorView) => void;
+    onClose: () => void;
+}
+export declare function MonthYearSelector({ currentMonth, onMonthSelect, onYearSelect, locale, minDate, maxDate, view, onViewChange, onClose, }: MonthYearSelectorInternalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MonthYearSelector.d.ts.map

package/dist/fe/components/DatePicker/index.d.ts

@@ -0,0 +1,10 @@
+export { CalendarGrid } from "./components/CalendarGrid";
+export { CalendarHeader } from "./components/CalendarHeader";
+export { DatePicker } from "./components/DatePicker";
+export { MonthYearSelector } from "./components/MonthYearSelector";
+export { getAvailableLocales, getLocale, locales } from "./locales";
+export type { DatePickerTheme } from "./theme";
+export { datePickerTheme, extendDatePickerTheme } from "./theme";
+export type { CalendarGridProps, CalendarHeaderProps, DatePickerMode, DatePickerProps, DateRange, DateValue, DropdownPosition, LocaleConfig, LocaleKey, MonthYearSelectorProps, } from "./types";
+export { addMonths, addYears, endOfMonth, formatDate, formatDateRange, formatDateRangeWithLocale, formatDateWithLocale, getCalendarDays, getMonthDays, getWeekdaysForLocale, getYearRange, isDateDisabled, isDateInRange, isSameDay, isSameMonth, isToday, parseDate, startOfDay, startOfMonth, } from "./utils/date";
+//# sourceMappingURL=index.d.ts.map

package/dist/fe/components/DatePicker/locales/index.d.ts

@@ -0,0 +1,5 @@
+import type { LocaleConfig, LocaleKey } from "../types";
+export declare const locales: Record<LocaleKey, LocaleConfig>;
+export declare function getLocale(key: LocaleKey): LocaleConfig;
+export declare function getAvailableLocales(): LocaleKey[];
+//# sourceMappingURL=index.d.ts.map

package/dist/fe/components/DatePicker/theme/index.d.ts

@@ -0,0 +1,312 @@
+export interface DatePickerTheme {
+    container: {
+        base: string;
+        spacing: string;
+    };
+    input: {
+        wrapper: {
+            base: string;
+            border: {
+                base: string;
+                focused: string;
+                error: string;
+                disabled: string;
+            };
+            background: {
+                light: string;
+                dark: string;
+            };
+            padding: string;
+            rounded: string;
+            shadow: string;
+            transition: string;
+        };
+        text: {
+            base: string;
+            size: string;
+            color: {
+                light: string;
+                dark: string;
+            };
+            placeholder: {
+                light: string;
+                dark: string;
+            };
+        };
+        icon: {
+            base: string;
+            size: string;
+            color: {
+                light: string;
+                dark: string;
+                focused: string;
+            };
+            spacing: {
+                left: string;
+                right: string;
+            };
+        };
+    };
+    label: {
+        base: string;
+        text: {
+            size: string;
+            color: {
+                light: string;
+                dark: string;
+            };
+        };
+        spacing: string;
+    };
+    dropdown: {
+        base: string;
+        background: {
+            light: string;
+            dark: string;
+        };
+        border: {
+            light: string;
+            dark: string;
+        };
+        rounded: string;
+        shadow: string;
+        padding: string;
+        spacing: {
+            top: string;
+            bottom: string;
+        };
+        position: {
+            top: string;
+            bottom: string;
+        };
+    };
+    calendar: {
+        base: string;
+        width: string;
+    };
+    header: {
+        base: string;
+        padding: string;
+        button: {
+            base: string;
+            size: string;
+            color: {
+                light: string;
+                dark: string;
+            };
+            hover: {
+                light: string;
+                dark: string;
+            };
+            rounded: string;
+            transition: string;
+        };
+        title: {
+            base: string;
+            text: {
+                size: string;
+                weight: string;
+                color: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            hover: {
+                light: string;
+                dark: string;
+            };
+            rounded: string;
+            padding: string;
+            transition: string;
+        };
+    };
+    weekdays: {
+        base: string;
+        padding: string;
+        text: {
+            size: string;
+            weight: string;
+            color: {
+                light: string;
+                dark: string;
+            };
+        };
+    };
+    grid: {
+        base: string;
+        gap: string;
+    };
+    dayWrapper: {
+        base: string;
+        inRange: {
+            light: string;
+            dark: string;
+        };
+        rangeStart: string;
+        rangeEnd: string;
+    };
+    day: {
+        base: string;
+        size: string;
+        text: {
+            size: string;
+            color: {
+                light: string;
+                dark: string;
+            };
+        };
+        rounded: string;
+        transition: string;
+        states: {
+            hover: {
+                light: string;
+                dark: string;
+            };
+            selected: {
+                background: string;
+                text: string;
+            };
+            today: {
+                border: string;
+                text: string;
+            };
+            disabled: {
+                opacity: string;
+                cursor: string;
+            };
+            inRange: {
+                light: string;
+                dark: string;
+            };
+            rangeStart: {
+                rounded: string;
+            };
+            rangeEnd: {
+                rounded: string;
+            };
+            otherMonth: {
+                opacity: string;
+            };
+        };
+    };
+    monthSelector: {
+        base: string;
+        grid: string;
+        item: {
+            base: string;
+            padding: string;
+            rounded: string;
+            text: {
+                size: string;
+                color: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            hover: {
+                light: string;
+                dark: string;
+            };
+            selected: {
+                background: string;
+                text: string;
+            };
+            transition: string;
+        };
+    };
+    yearSelector: {
+        base: string;
+        grid: string;
+        item: {
+            base: string;
+            padding: string;
+            rounded: string;
+            text: {
+                size: string;
+                color: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            hover: {
+                light: string;
+                dark: string;
+            };
+            selected: {
+                background: string;
+                text: string;
+            };
+            transition: string;
+        };
+    };
+    footer: {
+        base: string;
+        padding: string;
+        border: {
+            light: string;
+            dark: string;
+        };
+        button: {
+            base: string;
+            padding: string;
+            rounded: string;
+            text: {
+                size: string;
+            };
+            today: {
+                background: {
+                    light: string;
+                    dark: string;
+                };
+                text: {
+                    light: string;
+                    dark: string;
+                };
+                hover: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            clear: {
+                background: string;
+                text: {
+                    light: string;
+                    dark: string;
+                };
+                hover: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            transition: string;
+        };
+    };
+    rangeIndicator: {
+        base: string;
+        text: {
+            size: string;
+            color: {
+                light: string;
+                dark: string;
+            };
+        };
+        padding: string;
+        separator: string;
+    };
+    helperText: {
+        base: string;
+        text: string;
+        color: {
+            light: string;
+            dark: string;
+        };
+    };
+    errorText: {
+        base: string;
+        text: string;
+        color: string;
+    };
+}
+export declare const datePickerTheme: DatePickerTheme;
+export declare function extendDatePickerTheme(overrides: Partial<DatePickerTheme>): DatePickerTheme;
+//# sourceMappingURL=index.d.ts.map