smartsell-ui-kit 0.0.6 → 0.1.1

package/dist/index.d.ts

@@ -1,31 +1,66 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
-import { SmartSellSDK } from 'smartsell-sales-sdk';
-export { L as LegacyModalAction, a as LegacyModalCompatProps, b as LegacyModalProps, M as Modal, c as ModalAction, d as ModalProps, e as ModalTheme, f as ModalThemeSource, S as StandardModalProps, U as UiKitThemeTokens, u as useUiKitTheme } from './modal-CS9SuYSC.js';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, CSSProperties, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { SmartSellTheme, ThemeColors } from 'smartsell-theme';
 
-type ControlSize$1 = 'sm' | 'md' | 'lg';
+type ControlSize = 'sm' | 'md' | 'lg';
+
+declare const UI_KIT_THEME_COLOR_NAMES: readonly ["primary", "primaryLight", "primaryDark", "shadow", "secondary", "background", "surface", "text", "textLight", "positive", "negative", "warning", "info", "onPrimary", "onSecondary"];
+type UiKitThemeColorName = (typeof UI_KIT_THEME_COLOR_NAMES)[number];
+type UiKitThemeColors = {
+    [key in UiKitThemeColorName]: ThemeColors[key];
+};
+interface UiKitTheme extends Omit<SmartSellTheme, 'title' | 'colors' | 'color'> {
+    title: SmartSellTheme['title'];
+    colors: UiKitThemeColors;
+    color: UiKitThemeColors;
+}
+interface UiKitThemeTokens {
+    theme: UiKitTheme;
+    borderSoft: string;
+    borderStrong: string;
+    surfaceMuted: string;
+    surfaceRaised: string;
+    overlay: string;
+    focusRing: string;
+    mutedText: string;
+}
+declare function useUiKitTheme(): UiKitThemeTokens;
 
 type ButtonVariant = 'solid' | 'outline' | 'ghost';
-type ButtonSize = ControlSize$1;
+type ButtonSize = ControlSize;
 interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'dangerouslySetInnerHTML'> {
-    sdk: SmartSellSDK;
     variant?: ButtonVariant;
     size?: ButtonSize;
-    fullWidth?: boolean;
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
 }
-declare function Button({ sdk, variant, size, fullWidth, leadingIcon, trailingIcon, children, disabled, style, type, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onBlur, onKeyDown, onKeyUp, onTouchStart, onTouchEnd, onTouchCancel, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ variant, size, leadingIcon, trailingIcon, children, disabled, style, type, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onBlur, onKeyDown, onKeyUp, onTouchStart, onTouchEnd, onTouchCancel, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML' | 'title'> {
-    sdk: SmartSellSDK;
     children: ReactNode;
     eyebrow?: ReactNode;
     title?: ReactNode;
     action?: ReactNode;
     padded?: boolean;
 }
-declare function Card({ sdk, children, eyebrow, title, action, padded, style, ...rest }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ children, eyebrow, title, action, padded, style, ...rest }: CardProps): react_jsx_runtime.JSX.Element;
+
+interface CardSmallProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML' | 'title' | 'color'> {
+    title?: ReactNode;
+    value?: ReactNode;
+    icon?: ReactNode;
+    color?: CSSProperties['color'];
+}
+declare function CardSmall({ title, value, icon, color, style, ...rest }: CardSmallProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size' | 'type'> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    controlSize?: ControlSize;
+    indeterminate?: boolean;
+}
+declare function Checkbox({ label, hint, error, controlSize, id, checked, defaultChecked, disabled, indeterminate, required, className, style, onChange, onFocus, onBlur, ...rest }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 interface ModalSlotIds {
     header: string;
@@ -34,7 +69,6 @@ interface ModalSlotIds {
 }
 interface ModalSlotContext<TPayload = unknown> {
     title: string;
-    description?: string;
     payload?: TPayload;
     close: () => void;
     confirm?: () => void;
@@ -43,13 +77,18 @@ interface ModalSlotContext<TPayload = unknown> {
     isOpen: boolean;
     isBusy: boolean;
 }
+interface ComposableModalSlotRenderProps<TPayload = unknown> {
+    id: string;
+    context: ModalSlotContext<TPayload>;
+    children?: ReactNode;
+}
+type ComposableModalSlotRenderer<TPayload = unknown> = (props: ComposableModalSlotRenderProps<TPayload>) => ReactNode;
 interface ComposableModalProps<TPayload = unknown> {
-    sdk: SmartSellSDK;
     isOpen: boolean;
     onClose: () => void;
     title: string;
-    description?: string;
     slotBaseId: string;
+    renderSlot?: ComposableModalSlotRenderer<TPayload>;
     payload?: TPayload;
     onConfirm?: () => void;
     confirmLabel?: string;
@@ -66,37 +105,279 @@ interface ComposableModalProps<TPayload = unknown> {
     children?: ReactNode;
 }
 declare const createModalSlotIds: (slotBaseId: string) => ModalSlotIds;
-declare function ComposableModal<TPayload = unknown>({ sdk, isOpen, onClose, title, description, slotBaseId, payload, onConfirm, confirmLabel, cancelLabel, isBusy, closeOnBackdrop, closeOnEscape, hideExpandButton, maximized, hideDefaultFooter, maxWidth, headerFallback, footerFallback, children, }: ComposableModalProps<TPayload>): react_jsx_runtime.JSX.Element;
+declare function ComposableModal<TPayload = unknown>({ isOpen, onClose, title, slotBaseId, renderSlot, payload, onConfirm, confirmLabel, cancelLabel, isBusy, closeOnBackdrop, closeOnEscape, hideExpandButton, maximized, hideDefaultFooter, maxWidth, headerFallback, footerFallback, children, }: ComposableModalProps<TPayload>): react_jsx_runtime.JSX.Element;
+
+type DatePickerMode = 'date' | 'datetime';
+type DatePickerValue = string | Date | null;
+type DatePickerChangeReason = 'input' | 'picker' | 'clear';
+interface DatePickerChangeContext {
+    reason: DatePickerChangeReason;
+    date: Date | null;
+    nativeValue: string;
+    displayValue: string;
+}
+interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    controlSize?: ControlSize;
+    value?: DatePickerValue;
+    defaultValue?: DatePickerValue;
+    onChange?: (value: string | null, context: DatePickerChangeContext) => void;
+    mode?: DatePickerMode;
+    format?: string;
+    allowPastDates?: boolean;
+    allowFutureDates?: boolean;
+    minDate?: DatePickerValue;
+    maxDate?: DatePickerValue;
+    minuteStep?: number;
+    clearable?: boolean;
+    showPickerButton?: boolean;
+    isDateUnavailable?: (date: Date) => boolean;
+    invalidDateMessage?: ReactNode;
+    unavailableDateMessage?: ReactNode;
+    pickerButtonLabel?: string;
+    clearButtonLabel?: string;
+}
+declare function DatePicker({ label, hint, error, controlSize, value, defaultValue, onChange, mode, format, allowPastDates, allowFutureDates, minDate, maxDate, minuteStep, clearable, showPickerButton, isDateUnavailable, invalidDateMessage, unavailableDateMessage, pickerButtonLabel, clearButtonLabel, id, name, disabled, readOnly, required, style, className, placeholder, onBlur, onClick, onFocus, onKeyDown, ...rest }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size'> {
-    sdk: SmartSellSDK;
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize$1;
+    controlSize?: ControlSize;
     showPasswordToggle?: boolean;
+    fileButtonLabel?: ReactNode;
 }
-declare function Input({ sdk, label, hint, error, controlSize, showPasswordToggle, id, disabled, style, type, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ label, hint, error, controlSize, showPasswordToggle, fileButtonLabel, id, disabled, placeholder, onChange, style, type, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
 
-interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'dangerouslySetInnerHTML' | 'size'> {
-    sdk: SmartSellSDK;
+type ModalActionAppearance = 'text' | 'outlined' | 'contained' | 'link';
+type ModalThemeColors = {
+    background: string;
+    surface: string;
+    text: string;
+    textLight: string;
+    primary: string;
+    onPrimary: string;
+    secondary: string;
+    onSecondary: string;
+    negative: string;
+    warning: string;
+};
+interface ModalTheme {
+    colors?: Partial<ModalThemeColors>;
+}
+type ModalThemeSource = ModalTheme | UiKitThemeTokens;
+interface ModalAction {
+    label: ReactNode;
+    onClick: () => void;
+    appearance?: ModalActionAppearance;
+    style?: CSSProperties;
+    disabled?: boolean;
+    hidden?: boolean;
+}
+interface BaseModalProps {
+    children?: ReactNode;
+    theme?: ModalThemeSource;
+}
+interface ModalProps extends BaseModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    headerContent?: ReactNode;
+    footer?: ReactNode;
+    confirmAction?: ModalAction;
+    cancelAction?: ModalAction;
+    closeAction?: ModalAction;
+    extraActions?: ModalAction[];
+    maxWidth?: number | string;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    hideCloseButton?: boolean;
+    hideExpandButton?: boolean;
+    disableDismiss?: boolean;
+    maximized?: boolean;
+    contentStyle?: CSSProperties;
+    bodyStyle?: CSSProperties;
+    isBusy?: boolean;
+}
+type StandardModalProps = ModalProps;
+declare function Modal(props: ModalProps): react_jsx_runtime.JSX.Element;
+
+type SeparatorOrientation = 'vertical' | 'horizontal';
+interface SeparatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML' | 'color'> {
+    orientation?: SeparatorOrientation;
+    color?: CSSProperties['backgroundColor'];
+    size?: CSSProperties['width'];
+}
+declare function Separator({ orientation, color, size, style, ...rest }: SeparatorProps): react_jsx_runtime.JSX.Element;
+
+interface SharedSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'dangerouslySetInnerHTML' | 'size'> {
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize$1;
+    placeholder?: ReactNode;
+    controlSize?: ControlSize;
     isMulti?: boolean;
     isFilterable?: boolean;
 }
-declare function Select({ sdk, label, hint, error, controlSize, id, disabled, style, children, value, defaultValue, onChange, onFocus, onBlur, onKeyDown, onClick, autoFocus, className, isMulti, isFilterable, multiple, ...rest }: SelectProps): react_jsx_runtime.JSX.Element;
 
-type ControlSize = 'sm' | 'md' | 'lg';
+interface SelectProps extends SharedSelectProps {
+    children?: ReactNode;
+}
+declare function Select({ children, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+
+type SelectObjectOptionValue = string | number;
+interface SelectObjectOption<TValue extends SelectObjectOptionValue = SelectObjectOptionValue> {
+    value: TValue;
+    label: ReactNode;
+    disabled?: boolean;
+    group?: ReactNode;
+}
+
+type SelectAsyncOptionValue = SelectObjectOptionValue;
+type SelectAsyncOption<TValue extends SelectAsyncOptionValue = SelectAsyncOptionValue> = SelectObjectOption<TValue>;
+interface SelectAsyncLoadContext {
+    page: number;
+    signal: AbortSignal;
+}
+interface SelectAsyncLoadResult<TValue extends SelectAsyncOptionValue = SelectAsyncOptionValue> {
+    options: Array<SelectAsyncOption<TValue>>;
+    hasMore?: boolean;
+}
+type SelectAsyncSingleValue<TValue extends SelectAsyncOptionValue> = SelectAsyncOption<TValue> | null;
+type SelectAsyncMultiValue<TValue extends SelectAsyncOptionValue> = Array<SelectAsyncOption<TValue>>;
+type SelectAsyncValue<TValue extends SelectAsyncOptionValue> = SelectAsyncSingleValue<TValue> | SelectAsyncMultiValue<TValue>;
+interface SelectAsyncProps<TValue extends SelectAsyncOptionValue = SelectAsyncOptionValue> extends Omit<SharedSelectProps, 'children' | 'value' | 'defaultValue' | 'onChange' | 'multiple'> {
+    value?: SelectAsyncValue<TValue>;
+    defaultValue?: SelectAsyncValue<TValue>;
+    onChange?: (value: SelectAsyncValue<TValue>) => void;
+    loadOptions: (query: string, loadedOptions: Array<SelectAsyncOption<TValue>>, context: SelectAsyncLoadContext) => Promise<SelectAsyncLoadResult<TValue>>;
+    defaultOptions?: Array<SelectAsyncOption<TValue>>;
+    fixedOptions?: Array<SelectAsyncOption<TValue>>;
+    cacheUniqs?: ReadonlyArray<unknown>;
+    searchDebounceMs?: number;
+    loadingMessage?: ReactNode;
+    loadErrorMessage?: ReactNode;
+    emptyMessage?: ReactNode;
+    loadingMoreMessage?: ReactNode;
+    loadMoreHintMessage?: ReactNode;
+    loadMoreThreshold?: number;
+    searchPlaceholder?: string;
+}
+declare function SelectAsync<TValue extends SelectAsyncOptionValue = SelectAsyncOptionValue>({ value, defaultValue, onChange, loadOptions, defaultOptions, fixedOptions, cacheUniqs, searchDebounceMs, loadingMessage, loadErrorMessage, emptyMessage, loadingMoreMessage, loadMoreHintMessage, loadMoreThreshold, isMulti, isFilterable, searchPlaceholder, ...props }: SelectAsyncProps<TValue>): react_jsx_runtime.JSX.Element;
+
+type TableColumnAlign = 'left' | 'center' | 'right';
+type TableColumnType = 'data' | 'actions';
+type TableActionTone = 'default' | 'danger';
+interface TableColumn<TItem> {
+    id?: string;
+    label?: ReactNode;
+    accessor?: keyof TItem;
+    Cell?: (item: TItem, index: number) => ReactNode;
+    getSearchValue?: (item: TItem, index: number) => string;
+    type?: TableColumnType;
+    align?: TableColumnAlign;
+    width?: CSSProperties['width'];
+    minWidth?: CSSProperties['minWidth'];
+    colSpan?: number;
+    headerColSpan?: number;
+    hideLabel?: boolean;
+}
+interface TableAction<TItem> {
+    id?: string;
+    label: string;
+    icon?: ReactNode;
+    onClick: (item: TItem, index: number) => void;
+    disabled?: boolean | ((item: TItem, index: number) => boolean);
+    hidden?: boolean | ((item: TItem, index: number) => boolean);
+    tone?: TableActionTone;
+}
+type TableActionSource<TItem> = Array<TableAction<TItem>> | ((item: TItem, index: number) => Array<TableAction<TItem>>);
+interface TableLabels {
+    searchPlaceholder?: string;
+    emptyMessage?: ReactNode;
+    noResultsMessage?: ReactNode;
+    loadingMessage?: ReactNode;
+    errorMessage?: ReactNode;
+    firstPageLabel?: string;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
+    lastPageLabel?: string;
+    rowsPerPageLabel?: string;
+    actionsMenuLabel?: string;
+    moreActionsLabel?: string;
+    retryLabel?: string;
+    settingsButtonLabel?: string;
+    settingsModalTitle?: ReactNode;
+    tableInfoSectionTitle?: ReactNode;
+    totalPagesInfoLabel?: string;
+    totalItemsInfoLabel?: string;
+    currentPageInfoLabel?: string;
+    currentPageItemsInfoLabel?: string;
+    downloadSectionTitle?: ReactNode;
+    downloadCsvLabel?: string;
+    downloadXlsLabel?: string;
+    downloadPdfLabel?: string;
+    pageLabel?: (page: number, totalPages: number) => ReactNode;
+    resultCountLabel?: (start: number, end: number, totalItems: number) => ReactNode;
+}
+interface SharedTableProps<TItem> {
+    desktopColumns: Array<TableColumn<TItem>>;
+    mobileColumns: Array<TableColumn<TItem>>;
+    getRowId?: (item: TItem, index: number) => string;
+    actions?: TableActionSource<TItem>;
+    stickyActionsColumn?: boolean;
+    maxInlineActions?: number;
+    collapseBelow?: number;
+    searchable?: boolean;
+    showSearch?: boolean;
+    showPagination?: boolean;
+    showRowsPerPage?: boolean;
+    showSettingsButton?: boolean;
+    defaultSearchValue?: string;
+    defaultPage?: number;
+    defaultPageSize?: number;
+    pageSizeOptions?: number[];
+    labels?: TableLabels;
+    translations?: TableLabels;
+    className?: string;
+    style?: CSSProperties;
+    onSearchValueChange?: (value: string) => void;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    ariaLabel?: string;
+}
+interface TableAsyncLoadContext {
+    page: number;
+    pageSize: number;
+    signal: AbortSignal;
+}
+interface TableAsyncLoadResult<TItem> {
+    items: Array<TItem>;
+    totalPages: number;
+    totalItems?: number;
+}
+
+interface TableProps<TItem> extends SharedTableProps<TItem> {
+    items: Array<TItem>;
+}
+declare function Table<TItem>({ items, desktopColumns, mobileColumns, defaultSearchValue, defaultPage, defaultPageSize, pageSizeOptions, searchable, onSearchValueChange, onPageChange, onPageSizeChange, ...props }: TableProps<TItem>): react_jsx_runtime.JSX.Element;
+
+interface TableAsyncProps<TItem> extends SharedTableProps<TItem> {
+    loadItems: (query: string, context: TableAsyncLoadContext) => Promise<TableAsyncLoadResult<TItem>>;
+    cacheUniqs?: ReadonlyArray<unknown>;
+    searchDebounceMs?: number;
+    keepPreviousData?: boolean;
+}
+declare function TableAsync<TItem>({ loadItems, desktopColumns, mobileColumns, defaultSearchValue, defaultPage, defaultPageSize, pageSizeOptions, searchable, cacheUniqs, searchDebounceMs, keepPreviousData, onSearchValueChange, onPageChange, onPageSizeChange, ...props }: TableAsyncProps<TItem>): react_jsx_runtime.JSX.Element;
+
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'dangerouslySetInnerHTML'> {
-    sdk: SmartSellSDK;
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
     controlSize?: ControlSize;
 }
-declare function Textarea({ sdk, label, hint, error, controlSize, id, disabled, style, rows, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
+declare function Textarea({ label, hint, error, controlSize, id, disabled, style, rows, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
 
-export { Button, type ButtonProps, Card, type CardProps, ComposableModal, type ComposableModalProps, Input, type InputProps, type ModalSlotContext, type ModalSlotIds, Select, type SelectProps, Textarea, type TextareaProps, createModalSlotIds };
+export { Button, type ButtonProps, Card, type CardProps, CardSmall, type CardSmallProps, Checkbox, type CheckboxProps, ComposableModal, type ComposableModalProps, type ComposableModalSlotRenderProps, type ComposableModalSlotRenderer, type ControlSize, DatePicker, type DatePickerChangeContext, type DatePickerChangeReason, type DatePickerMode, type DatePickerProps, type DatePickerValue, Input, type InputProps, Modal, type ModalAction, type ModalProps, type ModalSlotContext, type ModalSlotIds, type ModalTheme, type ModalThemeSource, Select, SelectAsync, type SelectAsyncLoadContext, type SelectAsyncLoadResult, type SelectAsyncOption, type SelectAsyncOptionValue, type SelectAsyncProps, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, type SharedTableProps, type StandardModalProps, Table, type TableAction, type TableActionSource, type TableActionTone, TableAsync, type TableAsyncLoadContext, type TableAsyncLoadResult, type TableAsyncProps, type TableColumn, type TableColumnAlign, type TableColumnType, type TableLabels, type TableProps, Textarea, type TextareaProps, type UiKitThemeTokens, createModalSlotIds, useUiKitTheme };