@juspay/blend-design-system 0.0.1

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

@@ -0,0 +1,52 @@
+import { SortConfig, ColumnFilter, SearchConfig, FilterType, ColumnDefinition } from './types';
+import { AvatarData, TagData, SelectData, MultiSelectData, DateData, DateRangeData } from './columnTypes';
+export declare const filterData: <T extends Record<string, unknown>>(data: T[], filters: Record<string, unknown>) => T[];
+export declare const searchData: <T extends Record<string, unknown>>(data: T[], searchConfig: SearchConfig, columns: ColumnDefinition<T>[]) => T[];
+export declare const applyColumnFilters: <T extends Record<string, unknown>>(data: T[], filters: ColumnFilter[]) => T[];
+export declare const getUniqueColumnValues: <T extends Record<string, unknown>>(data: T[], field: keyof T) => string[];
+export declare const sortData: <T extends Record<string, unknown>>(data: T[], sortConfig: SortConfig, columns?: ColumnDefinition<T>[]) => T[];
+export declare const formatCurrency: (amount: number, currency?: string) => string;
+export declare const getDefaultColumnWidth: <T extends Record<string, unknown>>(column: ColumnDefinition<T>) => {
+    minWidth: string;
+    maxWidth: string;
+};
+export declare const getColumnStyles: <T extends Record<string, unknown>>(column: ColumnDefinition<T>) => React.CSSProperties;
+export declare const formatDate: (dateString: string) => string;
+export declare const updateColumnFilter: (currentFilters: ColumnFilter[], field: keyof Record<string, unknown>, type: FilterType, value: string | string[] | {
+    min: number;
+    max: number;
+}, operator?: "equals" | "contains" | "startsWith" | "endsWith" | "gt" | "lt" | "gte" | "lte" | "range") => ColumnFilter[];
+export declare const generateCSVContent: <T extends Record<string, unknown>>(data: T[], columns: ColumnDefinition<T>[]) => string;
+export declare const downloadCSV: (csvContent: string, filename?: string) => void;
+export declare const exportSelectedRowsToCSV: <T extends Record<string, unknown>>(allData: T[], selectedRows: Record<string, boolean>, columns: ColumnDefinition<T>[], idField: string, filename?: string) => void;
+export declare const getSelectedRowCount: (selectedRows: Record<string, boolean>) => number;
+export declare const createSearchConfig: (query: string, caseSensitive?: boolean, searchFields?: string[]) => SearchConfig;
+export declare const clearAllFiltersAndSearch: () => {
+    filters: ColumnFilter[];
+    searchConfig: SearchConfig;
+};
+export declare const createAvatarData: (label: string, options?: {
+    sublabel?: string;
+    imageUrl?: string;
+    initials?: string;
+}) => AvatarData;
+export declare const createTagData: (text: string, options?: {
+    color?: "primary" | "secondary" | "success" | "warning" | "error" | "neutral";
+    variant?: "solid" | "subtle" | "outline";
+    size?: "sm" | "md" | "lg";
+}) => TagData;
+export declare const createSelectData: (value: string, options?: {
+    label?: string;
+    disabled?: boolean;
+}) => SelectData;
+export declare const createMultiSelectData: (values: string[], labels?: string[]) => MultiSelectData;
+export declare const createDateData: (date: Date | string, format?: string) => DateData;
+export declare const createDateRangeData: (startDate: Date | string, endDate: Date | string, format?: string) => DateRangeData;
+export declare const validateDataForColumnType: <T extends Record<string, unknown>>(data: T, columns: ColumnDefinition<T>[]) => {
+    isValid: boolean;
+    errors: string[];
+};
+export declare const enforceDataTypeMatching: <T extends Record<string, unknown>>(data: T[], columns: ColumnDefinition<T>[], options?: {
+    throwOnError?: boolean;
+    logWarnings?: boolean;
+}) => boolean;

package/dist/components/DateRangePicker/CalendarGrid.d.ts

@@ -0,0 +1,11 @@
+import { DateRange } from './types';
+type CalendarGridProps = {
+    selectedRange: DateRange;
+    onDateSelect: (range: DateRange) => void;
+    today: Date;
+    allowSingleDateSelection?: boolean;
+    disableFutureDates?: boolean;
+    disablePastDates?: boolean;
+};
+declare const CalendarGrid: import('react').ForwardRefExoticComponent<CalendarGridProps & import('react').RefAttributes<HTMLDivElement>>;
+export default CalendarGrid;

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { DateRangePickerProps } from './types';
+declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
+export default DateRangePicker;

package/dist/components/DateRangePicker/QuickRangeSelector.d.ts

@@ -0,0 +1,13 @@
+import { DateRangePreset } from './types';
+type QuickRangeSelectorProps = {
+    isOpen: boolean;
+    onToggle: () => void;
+    activePreset: DateRangePreset;
+    onPresetSelect: (preset: DateRangePreset) => void;
+    excludeCustom?: boolean;
+    className?: string;
+    disableFutureDates?: boolean;
+    disablePastDates?: boolean;
+};
+declare const QuickRangeSelector: import('react').ForwardRefExoticComponent<QuickRangeSelectorProps & import('react').RefAttributes<HTMLDivElement>>;
+export default QuickRangeSelector;

package/dist/components/DateRangePicker/TimeSelector.d.ts

@@ -0,0 +1,7 @@
+type TimeSelectorProps = {
+    value: string;
+    onChange: (time: string) => void;
+    className?: string;
+};
+declare const TimeSelector: import('react').ForwardRefExoticComponent<TimeSelectorProps & import('react').RefAttributes<HTMLDivElement>>;
+export default TimeSelector;

package/dist/components/DateRangePicker/dateRangePicker.tokens.d.ts

@@ -0,0 +1,188 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+export type CalendarTokenType = {
+    quickRange: {
+        width: CSSObject['width'];
+        trigger: {
+            height: CSSObject['height'];
+            borderLeft: CSSObject['borderLeft'];
+            borderTop: CSSObject['borderTop'];
+            borderBottom: CSSObject['borderBottom'];
+            borderTopLeftRadius: CSSObject['borderTopLeftRadius'];
+            borderBottomLeftRadius: CSSObject['borderBottomLeftRadius'];
+            padding: CSSObject['padding'];
+            display: CSSObject['display'];
+            justifyContent: CSSObject['justifyContent'];
+            alignItems: CSSObject['alignItems'];
+            cursor: CSSObject['cursor'];
+            width: CSSObject['width'];
+            backgroundColor: CSSObject['backgroundColor'];
+            iconSize: CSSObject['iconSize'];
+            text: CSSObject;
+        };
+        content: {
+            padding: CSSObject['padding'];
+            width: CSSObject['width'];
+            zIndex: CSSObject['zIndex'];
+            backgroundColor: CSSObject['backgroundColor'];
+            borderRadius: CSSObject['borderRadius'];
+            boxShadow: CSSObject['boxShadow'];
+            overflowY: CSSObject['overflowY'];
+            overflowX: CSSObject['overflowX'];
+        };
+        item: {
+            width: CSSObject['width'];
+            textAlign: CSSObject['textAlign'];
+            padding: CSSObject['padding'];
+            borderRadius: CSSObject['borderRadius'];
+            transition: CSSObject['transition'];
+            cursor: CSSObject['cursor'];
+            border: CSSObject['border'];
+            backgroundColor: CSSObject['backgroundColor'];
+            display: CSSObject['display'];
+            active: CSSObject;
+            text: CSSObject;
+            '&:hover': CSSObject;
+            '&:focus': CSSObject;
+            '&[data-highlighted]': CSSObject;
+        };
+    };
+    trigger: {
+        height: CSSObject['height'];
+        display: CSSObject['display'];
+        alignItems: CSSObject['alignItems'];
+        justifyContent: CSSObject['justifyContent'];
+        padding: CSSObject['padding'];
+        border: CSSObject['border'];
+        borderRadius: CSSObject['borderRadius'];
+        boxShadow: CSSObject['boxShadow'];
+        backgroundColor: CSSObject['backgroundColor'];
+        fontSize: CSSObject['fontSize'];
+        color: CSSObject['color'];
+        cursor: CSSObject['cursor'];
+        disabled: {
+            opacity: CSSObject['opacity'];
+            cursor: CSSObject['cursor'];
+        };
+        borderRadiusWithPresets: CSSObject['borderRadius'];
+        borderRadiusWithoutPresets: CSSObject['borderRadius'];
+    };
+    calendar: {
+        minWidth: CSSObject['minWidth'];
+        width: CSSObject['width'];
+        backgroundColor: CSSObject['backgroundColor'];
+        border: CSSObject['border'];
+        borderRadius: CSSObject['borderRadius'];
+        boxShadow: CSSObject['boxShadow'];
+        zIndex: CSSObject['zIndex'];
+        inputs: {
+            padding: CSSObject['padding'];
+            dateInput: {
+                gap: CSSObject['gap'];
+                label: {
+                    color: CSSObject['color'];
+                    minWidth: CSSObject['minWidth'];
+                };
+            };
+        };
+        calendarGrid: {
+            container: {
+                maxHeight: CSSObject['maxHeight'];
+                overflowY: CSSObject['overflowY'];
+                overflow: CSSObject['overflow'];
+                position: CSSObject['position'];
+            };
+            month: {
+                header: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    color: CSSObject['color'];
+                    padding: CSSObject['padding'];
+                };
+                container: {
+                    position: CSSObject['position'];
+                    height: CSSObject['height'];
+                };
+            };
+            week: {
+                row: {
+                    display: CSSObject['display'];
+                    gridTemplateColumns: CSSObject['gridTemplateColumns'];
+                    padding: CSSObject['padding'];
+                };
+                header: {
+                    display: CSSObject['display'];
+                    gridTemplateColumns: CSSObject['gridTemplateColumns'];
+                    textAlign: CSSObject['textAlign'];
+                    color: CSSObject['color'];
+                    padding: CSSObject['padding'];
+                    position: CSSObject['position'];
+                    top: CSSObject['top'];
+                    zIndex: CSSObject['zIndex'];
+                    backgroundColor: CSSObject['backgroundColor'];
+                    boxShadow: CSSObject['boxShadow'];
+                };
+                dayName: {
+                    padding: CSSObject['padding'];
+                };
+            };
+            day: {
+                cell: {
+                    cursor: CSSObject['cursor'];
+                    textAlign: CSSObject['textAlign'];
+                    padding: CSSObject['padding'];
+                    position: CSSObject['position'];
+                    fontWeight: CSSObject['fontWeight'];
+                    boxSizing: CSSObject['boxSizing'];
+                    border: CSSObject['border'];
+                };
+                hover: {
+                    border: CSSObject['border'];
+                    borderRadius: CSSObject['borderRadius'];
+                };
+                empty: {
+                    padding: CSSObject['padding'];
+                };
+                states: {
+                    startDate: CSSObject;
+                    endDate: CSSObject;
+                    singleDate: CSSObject;
+                    rangeDay: CSSObject;
+                    todayDay: CSSObject;
+                    hoverState: CSSObject;
+                    disabledDay: CSSObject;
+                };
+                text: {
+                    dayNumber: CSSObject;
+                    selectedDay: CSSObject;
+                    rangeDay: CSSObject;
+                    todayDay: CSSObject;
+                };
+                todayIndicator: {
+                    position: CSSObject['position'];
+                    width: CSSObject['width'];
+                    height: CSSObject['height'];
+                    backgroundColor: CSSObject['backgroundColor'];
+                    borderRadius: CSSObject['borderRadius'];
+                    bottom: CSSObject['bottom'];
+                    left: CSSObject['left'];
+                    transform: CSSObject['transform'];
+                };
+            };
+        };
+        footer: {
+            padding: CSSObject['padding'];
+            borderTop: CSSObject['borderTop'];
+            timerange: {
+                gap: CSSObject['gap'];
+                color: CSSObject['color'];
+                fontWeight: CSSObject['fontWeight'];
+                fontSize: CSSObject['fontSize'];
+            };
+            button: {
+                gap: CSSObject['gap'];
+            };
+        };
+    };
+};
+export declare const getCalendarToken: (foundationToken: FoundationTokenType) => CalendarTokenType;

package/dist/components/DateRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateRangePicker } from './DateRangePicker';
+export * from './types';

package/dist/components/DateRangePicker/types.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+export declare enum DateRangePreset {
+    CUSTOM = "custom",
+    TODAY = "today",
+    YESTERDAY = "yesterday",
+    TOMORROW = "tomorrow",
+    LAST_1_HOUR = "last1Hour",
+    LAST_6_HOURS = "last6Hours",
+    LAST_7_DAYS = "last7Days",
+    LAST_30_DAYS = "last30Days",
+    LAST_3_MONTHS = "last3Months",
+    LAST_12_MONTHS = "last12Months",
+    NEXT_7_DAYS = "next7Days",
+    NEXT_30_DAYS = "next30Days",
+    NEXT_3_MONTHS = "next3Months",
+    NEXT_12_MONTHS = "next12Months"
+}
+export type DateRange = {
+    startDate: Date;
+    endDate: Date;
+    showTimePicker?: boolean;
+};
+export type DateRangePickerProps = {
+    value?: DateRange;
+    onChange?: (range: DateRange) => void;
+    showTimePicker?: boolean;
+    showPresets?: boolean;
+    placeholder?: string;
+    isDisabled?: boolean;
+    icon?: ReactNode;
+    minDate?: Date;
+    maxDate?: Date;
+    dateFormat?: string;
+    allowSingleDateSelection?: boolean;
+    disableFutureDates?: boolean;
+    disablePastDates?: boolean;
+    triggerElement?: ReactNode;
+};