laif-ds 0.2.75 → 0.2.77

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import { Command as Command_2 } from 'cmdk';
 import { ComponentProps } from 'react';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { ControllerProps } from 'react-hook-form';
+import { ControllerRenderProps } from 'react-hook-form';
 import { DateRange } from 'react-day-picker';
 import { DayPicker } from 'react-day-picker';
 import { default as default_2 } from 'react';
@@ -65,7 +66,7 @@ import { UseEmblaCarouselType } from 'embla-carousel-react';
 import { UseFormReturn } from 'react-hook-form';
 import { VariantProps } from 'class-variance-authority';
 
-declare type AcceptItem = "pdf" | "doc" | "docx" | "xls" | "xlsx" | "ppt" | "pptx" | "txt" | "csv" | "jpg" | "jpeg" | "png" | "gif" | "image" | "video" | "audio";
+declare type AcceptItem = "pdf" | "doc" | "docx" | "xls" | "xlsx" | "ppt" | "pptx" | "txt" | "csv" | "jpg" | "jpeg" | "png" | "gif" | "image" | "video" | "audio" | "zip" | "rar" | "7z" | "tar" | "gz" | "tgz";
 
 /**
  * Distributive helper: for a given key K, creates a config where cell gets the resolved value type.
@@ -74,6 +75,7 @@ declare type AcceptItem = "pdf" | "doc" | "docx" | "xls" | "xlsx" | "ppt" | "ppt
 declare type AccessorColumnConfigForKey<TData, K extends string> = BaseColumnFields & {
     accessorKey: K;
     cell?: (value: DeepValue<TData, K>, row: TData, tableRow: Row<TData>) => React.ReactNode;
+    cellClassName?: string | ((value: DeepValue<TData, K>, row: TData) => string);
 };
 
 export declare function Accordion({ ...props }: AccordionProps): JSX.Element;
@@ -144,6 +146,50 @@ declare const alertVariants: (props?: ({
 
 declare type Animation_2 = VariantProps<typeof chatBubbleVariants>["animation"];
 
+export declare function AppCard({ header, title, description, body, actions, footer, variant, size, isLoading, showHeaderBorder, showFooterBorder, className, headerClassName, bodyClassName, footerClassName, children, ...props }: Readonly<AppCardProps>): JSX.Element;
+
+export declare interface AppCardProps extends Omit<React_2.ComponentProps<"div">, "title"> {
+    /** Header content (title and/or description) */
+    header?: React_2.ReactNode;
+    /** Card title displayed in the header */
+    title?: string | React_2.ReactNode;
+    /** Card description displayed below the title */
+    description?: string | React_2.ReactNode;
+    /** Main content of the card */
+    body?: React_2.ReactNode;
+    /**
+     * Fallback body content when `body` is not provided.
+     * `body` takes precedence over `children` if both are passed.
+     */
+    children?: React_2.ReactNode;
+    /** Action buttons typically displayed in the header (right-aligned) */
+    actions?: React_2.ReactNode;
+    /** Footer content (typically action buttons) */
+    footer?: React_2.ReactNode;
+    /** Visual variant of the card */
+    variant?: AppCardVariant;
+    /** Controls internal padding via the base Card component */
+    size?: AppCardSize;
+    /** When true, renders skeleton placeholders instead of content */
+    isLoading?: boolean;
+    /** Whether to show a border between header and body */
+    showHeaderBorder?: boolean;
+    /** Whether to show a border between body and footer */
+    showFooterBorder?: boolean;
+    /** Additional className for the card container */
+    className?: string;
+    /** Additional className for the header section */
+    headerClassName?: string;
+    /** Additional className for the body section */
+    bodyClassName?: string;
+    /** Additional className for the footer section */
+    footerClassName?: string;
+}
+
+declare type AppCardSize = "sm" | "default" | "lg" | "none";
+
+export declare type AppCardVariant = "default" | "elevated" | "outlined" | "ghost" | "flat" | "interactive" | "success" | "warning" | "destructive" | "info";
+
 export declare function AppCheckbox({ options, value, defaultValue, onValueChange, label, description, disabled, required, name, orientation, className, wrpClassName, optionClassName, layout, error, id, "data-testid": dataTestId, }: AppCheckboxProps): JSX.Element;
 
 export declare interface AppCheckboxOption {
@@ -232,39 +278,164 @@ declare type AppEditorToolbar = "block-format" | "font-format" | "history";
 
 export declare const AppForm: <TFormValues extends FieldValues = FieldValues, TAsyncOption = unknown>({ items, cols, form, submitText, onSubmit, isSubmitting, showSubmitButton, }: AppFormProps<TFormValues, TAsyncOption>) => JSX.Element;
 
-export declare interface AppFormItem<TAsyncOption = unknown> {
+declare type AppFormComponentType = "input" | "select" | "textarea" | "checkbox" | "multiselect" | "datepicker" | "radio" | "switch" | "slider" | "async" | "async-multiple" | "custom";
+
+export declare type AppFormItem<TAsyncOption = unknown, TComponent extends AppFormComponentType = AppFormComponentType> = {
+    /** Field label displayed above the component. */
     label: string;
-    component: "input" | "select" | "textarea" | "checkbox" | "multiselect" | "datepicker" | "radio" | "switch" | "slider" | "async" | "async-multiple";
+    /** The type of form component to render. */
+    component: TComponent;
+    /** Field name used for React Hook Form state binding and validation. */
     name: string;
+    /**
+     * HTML input type. Only applies when `component` is `"input"`.
+     * @example "text" | "email" | "password" | "number" | "url" | "search" | "tel"
+     */
     inputType?: ComponentProps<"input">["type"];
+    /** Initial value for the field. */
     defaultValue?: string | boolean | number | string[] | Date | number[];
+    /** Options list for `select`, `multiselect`, and `radio` components. */
     options?: AppSelectOption[];
+    /**
+     * Disables the field, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
+    /** Placeholder text shown when no value is selected or entered. */
     placeholder?: string;
+    /** Helper text displayed below the field. */
     caption?: string;
+    /**
+     * Enables range mode on the `datepicker` component when provided.
+     * The two dates define the selectable calendar boundaries.
+     */
     calendarRange?: [Date, Date];
+    /** Minimum value for the `slider` component. @default 0 */
     min?: number;
+    /** Maximum value for the `slider` component. @default 100 */
     max?: number;
+    /** Step increment for the `slider` component. @default 1 */
     step?: number;
+    /**
+     * Async data loader for `async` and `async-multiple` components.
+     * Called with the current search query; must return a promise of options.
+     */
     fetcher?: (query?: string) => Promise<TAsyncOption[]>;
+    /**
+     * Custom render function for each option item in the async dropdown.
+     * Required for `async` and `async-multiple` components.
+     */
     renderOptionItem?: (option: TAsyncOption) => React.ReactNode;
+    /**
+     * Extracts the unique string value from an async option object.
+     * Required for `async` and `async-multiple` components.
+     */
     resolveOptionValue?: (option: TAsyncOption) => string;
+    /**
+     * Custom render function for the selected value chip/label.
+     * Required for `async` and `async-multiple` components.
+     */
     renderSelectedValue?: (option: TAsyncOption) => React.ReactNode;
+    /**
+     * Pre-loaded options used to hydrate the async select on mount,
+     * avoiding an initial fetch when the value is already known.
+     */
     initialOptions?: TAsyncOption[];
+    /** Custom node displayed when the async fetcher returns no results at all. */
     notFound?: React.ReactNode;
+    /** Message shown when the async search query returns no matching results. */
     noResultsMessage?: string;
+    /**
+     * Debounce delay in milliseconds for the async search input.
+     * @default 300
+     */
     debounce?: number;
+    /**
+     * Allows the user to clear the selected value in the async select.
+     * @default false
+     */
     clearable?: boolean;
-    datePickerProps?: Partial<ComponentProps<typeof DatePicker>>;
+    /** Extra props forwarded directly to the `DatePicker` component. */
+    datePickerProps?: Partial<DatePickerProps>;
+    /**
+     * Column span for the item in the grid.
+     * @default undefined (auto, or `"full"` for the last item)
+     */
+    colSpan?: "1" | "2" | "3" | "full";
+    /**
+     * Icon to display on the left side of the input.
+     * Only applies when `component` is `"input"`.
+     */
+    iconLeft?: IconName;
+    /**
+     * Icon to display on the right side of the input.
+     * Only applies when `component` is `"input"`.
+     */
+    iconRight?: IconName;
+    /**
+     * Enables search/filter functionality inside `select` and `multiselect` dropdowns.
+     * @default true
+     */
+    searchable?: boolean;
+    /**
+     * Custom render function for the component.
+     * Required when `component` is `"custom"`.
+     */
+    render?: (props: {
+        field: ControllerRenderProps<FieldValues, string>;
+        error?: string;
+        label: React.ReactNode;
+    }) => React.ReactNode;
+    /**
+     * Hides the label above the field.
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Additional props forwarded to the underlying UI component.
+     * Strongly typed based on the chosen `component` value.
+     */
+    componentProps?: AppFormItemComponentProps<TAsyncOption>[TComponent];
+    /** Additional CSS class name applied to the item container div. */
+    className?: string;
+};
+
+declare interface AppFormItemComponentProps<TAsyncOption = unknown> {
+    input: Omit<InputProps, "name" | "value" | "onChange" | "onBlur" | "disabled" | "placeholder" | "type" | "iconLeft" | "iconRight" | "label">;
+    select: Omit<SingleSelectProps, "options" | "placeholder" | "disabled" | "searchable" | "value" | "onValueChange" | "multiple" | "label">;
+    multiselect: Omit<MultiSelectProps, "options" | "placeholder" | "disabled" | "searchable" | "value" | "onValueChange" | "multiple" | "label">;
+    textarea: Omit<ComponentProps<typeof Textarea>, "name" | "value" | "onChange" | "onBlur" | "disabled" | "placeholder" | "label">;
+    checkbox: Omit<ComponentProps<typeof Checkbox>, "checked" | "onCheckedChange" | "disabled" | "id" | "name">;
+    datepicker: Omit<DatePickerProps, "mode" | "value" | "onChange" | "placeholder" | "disabled" | "label">;
+    radio: Omit<ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "disabled" | "name">;
+    switch: Omit<ComponentProps<typeof Switch>, "checked" | "onCheckedChange" | "disabled" | "id" | "name">;
+    slider: Omit<ComponentProps<typeof Slider>, "value" | "onValueChange" | "min" | "max" | "step" | "disabled">;
+    async: Omit<AsyncSelectProps<TAsyncOption>, "multiple" | "fetcher" | "initialOptions" | "renderOptionItem" | "resolveOptionValue" | "renderSelectedValue" | "value" | "onChange" | "placeholder" | "disabled" | "notFound" | "noResultsMessage" | "debounce" | "clearable" | "label">;
+    "async-multiple": Omit<AsyncSelectProps<TAsyncOption>, "multiple" | "fetcher" | "initialOptions" | "renderOptionItem" | "resolveOptionValue" | "renderSelectedValue" | "value" | "onChange" | "placeholder" | "disabled" | "notFound" | "noResultsMessage" | "debounce" | "clearable" | "label">;
+    custom: Record<string, unknown>;
 }
 
 declare interface AppFormProps<TFormValues extends FieldValues = FieldValues, TAsyncOption = unknown> {
+    /** Number of grid columns for the form layout. @default "2" */
     cols?: "1" | "2" | "3";
-    items: AppFormItem<TAsyncOption>[];
+    /** Array of field configurations describing each form field. */
+    items: AppFormItem<TAsyncOption, AppFormComponentType>[];
+    /** React Hook Form instance returned by `useForm`. */
     form: UseFormReturn<TFormValues>;
+    /** Text label for the internal submit button. @default "Invia" */
     submitText?: string;
+    /** Callback fired with validated form data on submission. */
     onSubmit?: (data: TFormValues) => void;
+    /**
+     * When `true`, shows a loading spinner on the submit button.
+     * @default false
+     */
     isSubmitting?: boolean;
+    /**
+     * When `true`, renders an internal submit button at the bottom of the form.
+     * The button is disabled while the form is invalid or pristine.
+     * @default false
+     */
     showSubmitButton?: boolean;
 }
 
@@ -605,6 +776,7 @@ declare type BaseColumnFields = {
     filterable?: boolean;
     searchable?: boolean;
     pinned?: "left" | "right";
+    headerClassName?: string;
 } & HeaderConfig;
 
 declare type BaseProps = {
@@ -626,7 +798,7 @@ declare type BaseProps = {
     disabled?: boolean;
     maxSelected?: number;
     showChipsInsteadOfCount?: boolean;
-    size?: SelectSizeType_2;
+    size?: SelectSizeType;
     onClear?: () => void;
     id?: string;
     "data-testid"?: string;
@@ -1407,7 +1579,7 @@ export declare enum DataRepeatTypes {
     MONTH = "MONTH"
 }
 
-export declare function DataTable<TData, TValue>({ columns, data, loading, emptyComponent, className, rowSelection, onRowSelectionChange, checkable, onCheckedRowsChange, actions, customComponentsLeft, customComponentsRight, hidePagination, hideActionsRow, i18n, maxSortedColumns, initialState, serverMode, serverConfig, disableAutoPageSize, id, "data-testid": dataTestId, }: DataTableProps<TData, TValue>): JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, loading, emptyComponent, className, rowSelection, onRowSelectionChange, checkable, onCheckedRowsChange, actions, customComponentsLeft, customComponentsRight, hidePagination, hideActionsRow, i18n, maxSortedColumns, initialState, serverMode, serverConfig, disableAutoPageSize, id, "data-testid": dataTestId, rowClassName, }: DataTableProps<TData, TValue>): JSX.Element;
 
 export declare interface DataTableActions {
     label: string;
@@ -1598,6 +1770,7 @@ export declare interface DataTableProps<TData, TValue> {
     disableAutoPageSize?: boolean;
     id?: string;
     "data-testid"?: string;
+    rowClassName?: string | ((row: Row<TData>) => string);
 }
 
 export declare interface DataTableServerConfig {
@@ -1745,10 +1918,13 @@ export declare function DialogTrigger({ ...props }: React_2.ComponentProps<typeo
 declare type DisplayColumnConfig<TData> = BaseColumnFields & {
     accessorKey?: undefined;
     cell?: (value: undefined, row: TData, tableRow: Row<TData>) => React.ReactNode;
+    cellClassName?: string | ((value: undefined, row: TData) => string);
 };
 
-/** Distributes AccessorColumnConfig over each key in the DeepKeys union */
-declare type DistributedAccessorConfig<TData> = DeepKeys<TData> extends infer K ? K extends string ? AccessorColumnConfigForKey<TData, K> : never : never;
+/** Maps each key to its typed accessor config, then unions them */
+declare type DistributedAccessorConfig<TData> = {
+    [K in DeepKeys<TData> & string]: AccessorColumnConfigForKey<TData, K>;
+}[DeepKeys<TData> & string];
 
 export declare const downloadFile: (url: string, filename?: string) => void;
 
@@ -2676,7 +2852,7 @@ export declare function SelectItem({ className, children, ...props }: React_2.Co
 export declare function SelectLabel({ className, ...props }: React_2.ComponentProps<typeof SelectPrimitive.Label>): JSX.Element;
 
 declare interface SelectProps extends React_2.ComponentProps<typeof SelectPrimitive.Root> {
-    size?: SelectSizeType;
+    size?: SelectSizeType_2;
     label?: string | React_2.ReactNode;
     className?: string;
     labelClassName?: string;
@@ -2689,7 +2865,7 @@ declare type SelectSizeType = "sm" | "default" | "lg";
 declare type SelectSizeType_2 = "sm" | "default" | "lg";
 
 export declare function SelectTrigger({ className, size: sizeProp, children, ...props }: React_2.ComponentProps<typeof SelectPrimitive.Trigger> & {
-    size?: SelectSizeType;
+    size?: SelectSizeType_2;
 }): JSX.Element;
 
 declare const selectTriggerVariants: (props?: ({
@@ -3016,6 +3192,29 @@ declare type TransformedDataType<T> = {
     [P in keyof T as Exclude<P, "children">]: T[P];
 };
 
+export declare function TruncatedCell({ children, text, title, popoverContent, className, wrapperClassName, popoverClassName, showButton, emptyFallback, }: TruncatedCellProps): JSX.Element;
+
+export declare interface TruncatedCellProps {
+    /** The text to display and potentially truncate (can be string or ReactNode) */
+    children?: React.ReactNode;
+    /** The text value to use for truncation detection, accessibility and default popover content */
+    text?: string;
+    /** Optional title for the popover dialog */
+    title?: string;
+    /** Custom popover content to override default text display */
+    popoverContent?: React.ReactNode;
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassName?: string;
+    /** Additional CSS classes for cell */
+    className?: string;
+    /** CSS classes for the popoverContent component */
+    popoverClassName?: string;
+    /** Flg used to show / hide the eye button */
+    showButton?: boolean;
+    /** Custom placeholder rendered when there is no content */
+    emptyFallback?: React.ReactNode;
+}
+
 export declare function TypingIndicator(): JSX.Element;
 
 export declare const Typo: React_2.FC<TypoProps>;
@@ -3130,5 +3329,7 @@ declare module "@tanstack/react-table" {
         searchable?: boolean;
         pinned?: "left" | "right";
         listOptions?: AppSelectOption[];
+        cellClassName?: string | ((value: unknown, row: TData) => string);
+        headerClassName?: string;
     }
 }