smartsell-ui-kit 0.1.12 → 0.1.14

package/dist/styles.css

@@ -753,10 +753,6 @@
   border-radius: 1rem;
 }
 
-.rounded-\[0\.4rem\] {
-  border-radius: 0.4rem;
-}
-
 .rounded-\[20px\] {
   border-radius: 20px;
 }
@@ -928,11 +924,6 @@
   padding-right: 1.25rem;
 }
 
-.px-\[1\.15rem\] {
-  padding-left: 1.15rem;
-  padding-right: 1.15rem;
-}
-
 .px-\[11px\] {
   padding-left: 11px;
   padding-right: 11px;
@@ -968,11 +959,6 @@
   padding-bottom: 0.75rem;
 }
 
-.py-\[0\.9rem\] {
-  padding-top: 0.9rem;
-  padding-bottom: 0.9rem;
-}
-
 .py-\[10px\] {
   padding-top: 10px;
   padding-bottom: 10px;
@@ -1070,10 +1056,6 @@
   line-height: 2rem;
 }
 
-.text-\[1\.05rem\] {
-  font-size: 1.05rem;
-}
-
 .text-\[11px\] {
   font-size: 11px;
 }
@@ -1299,11 +1281,6 @@
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.saturate-0 {
-  --tw-saturate: saturate(0);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .saturate-100 {
   --tw-saturate: saturate(1);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1416,6 +1393,10 @@
   text-decoration-line: underline;
 }
 
+.hover\:no-underline:hover {
+  text-decoration-line: none;
+}
+
 .active\:border-\[var\(--theme-negative\)\]:active {
   border-color: var(--theme-negative);
 }

package/dist/types-ENHTzCG6.d.cts

@@ -0,0 +1,392 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, CSSProperties, InputHTMLAttributes, Ref, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { SmartSellTheme, ThemeColors } from 'smartsell-theme';
+
+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;
+}
+declare function useUiKitTheme(): UiKitTheme;
+
+type LegacyVariant = 'primary';
+type ButtonVariant = 'solid' | 'secondary' | 'outline' | 'ghost' | 'negative' | LegacyVariant;
+type ButtonSize = ControlSize;
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'dangerouslySetInnerHTML'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+}
+declare function Button({ variant, size, leadingIcon, trailingIcon, children, disabled, className, style, type, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML' | 'title'> {
+    children: ReactNode;
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    action?: ReactNode;
+    padded?: boolean;
+}
+declare function Card({ children, eyebrow, title, action, padded, className, ...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, className, style, ...rest }: CardSmallProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size' | 'type'> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    size?: ControlSize;
+    indeterminate?: boolean;
+}
+declare function Checkbox({ label, hint, error, size, id, checked, defaultChecked, disabled, indeterminate, required, className, style, onChange, onFocus, onBlur, ...rest }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface ModalSlotIds {
+    header: string;
+    body: string;
+    footer: string;
+}
+interface ModalSlotContext<TPayload = unknown> {
+    title: string;
+    payload?: TPayload;
+    close: () => void;
+    confirm?: () => void;
+    confirmLabel: string;
+    cancelLabel: string;
+    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> {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    slotBaseId: string;
+    renderSlot?: ComposableModalSlotRenderer<TPayload>;
+    payload?: TPayload;
+    onConfirm?: () => void;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    isBusy?: boolean;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    hideExpandButton?: boolean;
+    maximized?: boolean;
+    hideDefaultFooter?: boolean;
+    maxWidth?: number | string;
+    headerFallback?: ReactNode;
+    footerFallback?: ReactNode;
+    children?: ReactNode;
+}
+declare const createModalSlotIds: (slotBaseId: string) => ModalSlotIds;
+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;
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size'> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    size?: ControlSize;
+    showPasswordToggle?: boolean;
+    fileButtonLabel?: ReactNode;
+    icon?: ReactNode;
+    disableFloatingLabel?: boolean;
+    ref?: Ref<HTMLInputElement>;
+}
+declare function Input({ label, hint, error, size, className, showPasswordToggle, fileButtonLabel, icon, id, disabled, placeholder, onChange, style, type, disableFloatingLabel, ...rest }: InputProps): 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<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    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({ value, defaultValue, onChange, mode, minDate, maxDate, minuteStep, placeholder, ...props }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+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 | UiKitTheme;
+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, className, style, ...rest }: SeparatorProps): react_jsx_runtime.JSX.Element;
+
+interface SharedSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'dangerouslySetInnerHTML' | 'size'> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    placeholder?: ReactNode;
+    size?: ControlSize;
+    isMulti?: boolean;
+    isFilterable?: boolean;
+}
+
+type SelectOption = {
+    label: string;
+    value: string;
+};
+interface SelectProps extends SharedSelectProps {
+    children?: ReactNode;
+    options?: SelectOption[];
+}
+declare function Select({ children, options, ...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;
+    /**
+     * Alinhamento dos botões dentro da coluna de ações. Padrão `right`. Use
+     * `center` quando houver poucas ações e o alinhamento à direita deixar a
+     * coluna visualmente desequilibrada.
+     */
+    actionsAlign?: 'right' | 'center';
+    /**
+     * Viewport width (in px) below which the table switches from the desktop
+     * table layout to the stacked mobile card layout. Defaults to 768 so the
+     * table collapses in sync with the host app's mobile breakpoint.
+     */
+    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'> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    size?: ControlSize;
+}
+declare function Textarea({ label, hint, error, size, id, disabled, style, rows, placeholder, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
+
+export { type TableProps as $, type SelectAsyncOption as A, Button as B, type ControlSize as C, DatePicker as D, type SelectAsyncOptionValue as E, type SelectAsyncProps as F, type SelectProps as G, Separator as H, Input as I, type SeparatorOrientation as J, type SeparatorProps as K, type SharedTableProps as L, Modal as M, type StandardModalProps as N, type TableAction as O, type TableActionSource as P, type TableActionTone as Q, TableAsync as R, Select as S, Table as T, type TableAsyncLoadContext as U, type TableAsyncLoadResult as V, type TableAsyncProps as W, type TableColumn as X, type TableColumnAlign as Y, type TableColumnType as Z, type TableLabels as _, type ButtonProps as a, Textarea as a0, type TextareaProps as a1, type UiKitTheme as a2, createModalSlotIds as a3, useUiKitTheme as a4, Card as b, type CardProps as c, CardSmall as d, type CardSmallProps as e, Checkbox as f, type CheckboxProps as g, ComposableModal as h, type ComposableModalProps as i, type ComposableModalSlotRenderProps as j, type ComposableModalSlotRenderer as k, type DatePickerChangeContext as l, type DatePickerChangeReason as m, type DatePickerMode as n, type DatePickerProps as o, type DatePickerValue as p, type InputProps as q, type ModalAction as r, type ModalProps as s, type ModalSlotContext as t, type ModalSlotIds as u, type ModalTheme as v, type ModalThemeSource as w, SelectAsync as x, type SelectAsyncLoadContext as y, type SelectAsyncLoadResult as z };