@paolojulian.dev/design-system 4.4.0 → 4.6.0

package/dist/index.d.ts

@@ -1,15 +1,20 @@
 import { AnchorHTMLAttributes } from 'react';
 import { ButtonHTMLAttributes } from 'react';
+import { ChangeEvent } from 'react';
 import { ClassProp } from 'class-variance-authority/types';
 import { CSSProperties } from 'react';
 import { ElementType } from 'react';
 import { FC } from 'react';
+import { ForwardedRef } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
 import { JSX } from 'react/jsx-runtime';
+import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
+import { SelectHTMLAttributes } from 'react';
 import { TextareaHTMLAttributes } from 'react';
 import { VariantProps } from 'class-variance-authority';
 
@@ -18,6 +23,7 @@ as?: ElementType;
 variant?: PBadgeVariant;
 size?: PBadgeSize;
 appearance?: PBadgeAppearance;
+isPinging?: boolean;
 leftIcon?: ReactNode;
 rightIcon?: ReactNode;
 children: ReactNode;
@@ -31,6 +37,7 @@ export declare type PBadgeProps = {
     variant?: PBadgeVariant;
     size?: PBadgeSize;
     appearance?: PBadgeAppearance;
+    isPinging?: boolean;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     children: ReactNode;
@@ -61,6 +68,7 @@ declare type PButtonBaseProps = {
     fullWidth?: boolean;
     isActive?: boolean;
     isLoading?: boolean;
+    isPinging?: boolean;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     children: ReactNode;
@@ -105,10 +113,134 @@ declare type PCardBaseProps = {
 
 declare type PCardDensity = 'compact' | 'default' | 'spacious';
 
+export declare const PCardGrid: ForwardRefExoticComponent<    {
+as?: ElementType;
+columns?: PCardGridColumns | PCardGridResponsiveColumns;
+minCardWidth?: CSSProperties["width"];
+gap?: PCardGridGap;
+align?: "stretch" | "start";
+className?: string;
+children: ReactNode;
+} & Omit<HTMLAttributes<HTMLElement>, "children" | "className"> & RefAttributes<HTMLElement>>;
+
+export declare type PCardGridColumns = 1 | 2 | 3 | 4;
+
+export declare type PCardGridGap = 'none' | 'sm' | 'md' | 'lg';
+
+export declare type PCardGridProps = {
+    as?: ElementType;
+    columns?: PCardGridColumns | PCardGridResponsiveColumns;
+    minCardWidth?: CSSProperties['width'];
+    gap?: PCardGridGap;
+    align?: 'stretch' | 'start';
+    className?: string;
+    children: ReactNode;
+} & Omit<HTMLAttributes<HTMLElement>, 'className' | 'children'>;
+
+export declare type PCardGridRef = HTMLElement;
+
+export declare type PCardGridResponsiveColumns = {
+    mobile?: PCardGridColumns;
+    tablet?: PCardGridColumns;
+    desktop?: PCardGridColumns;
+};
+
 export declare type PCardProps = PCardArticleProps | PCardAnchorProps;
 
 export declare type PCardRef = HTMLElement;
 
+export declare const PCombobox: ForwardRefExoticComponent<    {
+label: string;
+options: PComboboxOption[];
+value?: string;
+defaultValue?: string;
+selectedOption?: PComboboxOption | null;
+onValueChange?: (value: string, option: PComboboxOption | null) => void;
+query?: string;
+defaultQuery?: string;
+onQueryChange?: (query: string, details: {
+source: PComboboxQueryChangeSource;
+}) => void;
+filterMode?: PComboboxFilterMode;
+isLoading?: boolean;
+isLoadingMore?: boolean;
+hasMore?: boolean;
+onLoadMore?: (details: {
+query: string;
+optionCount: number;
+}) => void;
+placeholder?: string;
+searchPlaceholder?: string;
+emptyText?: string;
+loadingText?: string;
+loadingMoreText?: string;
+loadMoreText?: string;
+helperText?: string;
+isError?: boolean;
+errorMessage?: string;
+name?: string;
+disabled?: boolean;
+readOnly?: boolean;
+required?: boolean;
+clearable?: boolean;
+className?: string;
+inputClassName?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className" | "defaultValue" | "onChange"> & RefAttributes<HTMLDivElement>>;
+
+export declare type PComboboxFilterMode = 'local' | 'none';
+
+export declare type PComboboxOption = {
+    value: string;
+    label: string;
+    description?: string;
+    group?: string;
+    meta?: ReactNode;
+    keywords?: string[];
+    disabled?: boolean;
+};
+
+export declare type PComboboxProps = {
+    label: string;
+    options: PComboboxOption[];
+    value?: string;
+    defaultValue?: string;
+    selectedOption?: PComboboxOption | null;
+    onValueChange?: (value: string, option: PComboboxOption | null) => void;
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string, details: {
+        source: PComboboxQueryChangeSource;
+    }) => void;
+    filterMode?: PComboboxFilterMode;
+    isLoading?: boolean;
+    isLoadingMore?: boolean;
+    hasMore?: boolean;
+    onLoadMore?: (details: {
+        query: string;
+        optionCount: number;
+    }) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    loadingText?: string;
+    loadingMoreText?: string;
+    loadMoreText?: string;
+    helperText?: string;
+    isError?: boolean;
+    errorMessage?: string;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    clearable?: boolean;
+    className?: string;
+    inputClassName?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'defaultValue' | 'onChange'>;
+
+export declare type PComboboxQueryChangeSource = 'input' | 'open' | 'clear' | 'selection' | 'reset';
+
+export declare type PComboboxRef = HTMLDivElement;
+
 export declare const PDatePicker: ForwardRefExoticComponent<    {
 label: string;
 value?: string;
@@ -396,11 +528,182 @@ export declare type PHorizontalSliderProps = {
 
 export declare type PHorizontalSliderRef = HTMLDivElement;
 
-declare interface Props {
+export declare const PPagination: ForwardRefExoticComponent<    {
+page: number;
+pageCount?: number;
+totalItems?: number;
+pageSize?: number;
+pageSizeOptions?: number[];
+itemLabel?: string;
+density?: PPaginationDensity;
+siblingCount?: number;
+boundaryCount?: number;
+disabled?: boolean;
+isLoading?: boolean;
+hasPreviousPage?: boolean;
+hasNextPage?: boolean;
+showRowsPerPage?: boolean;
+onPageChange?: (page: number) => void;
+onPageSizeChange?: (pageSize: number) => void;
+className?: string;
+summary?: ReactNode;
+} & Omit<HTMLAttributes<HTMLElement>, "children" | "className" | "onChange"> & RefAttributes<HTMLElement>>;
+
+export declare type PPaginationDensity = 'standard' | 'compact';
+
+export declare type PPaginationItem = number | 'ellipsis';
+
+export declare type PPaginationProps = {
+    page: number;
+    pageCount?: number;
+    totalItems?: number;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    itemLabel?: string;
+    density?: PPaginationDensity;
+    siblingCount?: number;
+    boundaryCount?: number;
+    disabled?: boolean;
+    isLoading?: boolean;
+    hasPreviousPage?: boolean;
+    hasNextPage?: boolean;
+    showRowsPerPage?: boolean;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    className?: string;
+    summary?: ReactNode;
+} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'onChange'>;
+
+export declare type PPaginationRef = HTMLElement;
+
+export declare function PSectionHeader({ title, index, variant, className, }: PSectionHeaderProps): JSX.Element;
+
+export declare interface PSectionHeaderProps {
     title: string;
+    index?: string | number;
+    variant?: PSectionHeaderVariant;
+    className?: string;
 }
 
-export declare function PSectionHeader({ title }: Props): JSX.Element;
+export declare type PSectionHeaderVariant = "default" | "indexed";
+
+export declare const PSelect: ForwardRefExoticComponent<    {
+className?: string;
+selectClassName?: string;
+label: string;
+options: PSelectOption[];
+placeholder?: string;
+helperText?: string;
+isError?: boolean;
+errorMessage?: string;
+density?: PSelectDensity;
+variant?: PSelectVariant;
+hideLabel?: boolean;
+onValueChange?: (value: string, option: PSelectOption | null) => void;
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children" | "className" | "aria-describedby" | "aria-label" | "onChange"> & {
+onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
+} & RefAttributes<HTMLSelectElement>>;
+
+export declare type PSelectDensity = 'standard' | 'compact';
+
+export declare type PSelectOption = {
+    value: string | number;
+    label: ReactNode;
+    disabled?: boolean;
+    group?: string;
+};
+
+export declare type PSelectProps = {
+    className?: string;
+    selectClassName?: string;
+    label: string;
+    options: PSelectOption[];
+    placeholder?: string;
+    helperText?: string;
+    isError?: boolean;
+    errorMessage?: string;
+    density?: PSelectDensity;
+    variant?: PSelectVariant;
+    hideLabel?: boolean;
+    onValueChange?: (value: string, option: PSelectOption | null) => void;
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-describedby' | 'aria-label' | 'children' | 'className' | 'onChange'> & {
+    onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
+};
+
+export declare type PSelectRef = HTMLSelectElement;
+
+export declare type PSelectVariant = 'floating' | 'inline';
+
+export declare const PTable: PTableComponentType;
+
+export declare type PTableAlign = 'start' | 'center' | 'end';
+
+export declare type PTableColumn<RowData extends PTableRecord = PTableRecord> = {
+    id: string;
+    header: ReactNode;
+    label?: string;
+    accessor?: keyof RowData | ((row: RowData) => ReactNode);
+    cell?: (row: RowData, rowIndex: number) => ReactNode;
+    mobileLabel?: string;
+    width?: string;
+    align?: PTableAlign;
+    priority?: PTableColumnPriority;
+    hideOnTablet?: boolean;
+    hideOnMobile?: boolean;
+    sortable?: boolean;
+    sortDirection?: PTableSortDirection | null;
+};
+
+export declare type PTableColumnPriority = 'primary' | 'secondary' | 'tertiary';
+
+declare function PTableComponent<RowData extends PTableRecord>({ columns, rows, caption, captionHidden, summary, density, stickyHeader, stickyFirstColumn, isLoading, loadingLabel, emptyState, errorState, getRowId, getRowTone, onRowClick, renderRowActions, onSortChange, className, tableClassName, ...props }: PTableProps<RowData>, ref: ForwardedRef<PTableRef>): JSX.Element;
+
+declare type PTableComponentType = (<RowData extends PTableRecord = PTableRecord>(props: PTableProps<RowData> & {
+    ref?: ForwardedRef<PTableRef>;
+}) => ReturnType<typeof PTableComponent>) & {
+    displayName?: string;
+};
+
+export declare type PTableDensity = 'compact' | 'standard' | 'spacious';
+
+export declare type PTableProps<RowData extends PTableRecord = PTableRecord> = {
+    columns: PTableColumn<RowData>[];
+    rows: RowData[];
+    caption: string;
+    captionHidden?: boolean;
+    summary?: ReactNode;
+    density?: PTableDensity;
+    stickyHeader?: boolean;
+    stickyFirstColumn?: boolean;
+    isLoading?: boolean;
+    loadingLabel?: ReactNode;
+    emptyState?: PTableState;
+    errorState?: PTableState;
+    getRowId?: (row: RowData, rowIndex: number) => string;
+    getRowTone?: (row: RowData, rowIndex: number) => PTableRowTone | undefined;
+    onRowClick?: (row: RowData, rowIndex: number, event: MouseEvent_2<HTMLTableRowElement | HTMLLIElement> | KeyboardEvent_2<HTMLTableRowElement | HTMLLIElement>) => void;
+    renderRowActions?: (row: RowData, rowIndex: number) => ReactNode;
+    onSortChange?: (columnId: string, direction: PTableSortDirection) => void;
+    className?: string;
+    tableClassName?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'>;
+
+export declare type PTableRecord = Record<string, unknown>;
+
+export declare type PTableRef = HTMLDivElement;
+
+export declare type PTableRowTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+
+export declare type PTableSortDirection = 'ascending' | 'descending';
+
+export declare type PTableState = {
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    tone?: PTableStateTone;
+};
+
+export declare type PTableStateTone = 'neutral' | 'danger';
 
 export declare const PTextArea: ForwardRefExoticComponent<    {
 /**