design-zystem 1.0.204 → 1.0.208

package/dist/index.d.mts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, CSSProperties, MouseEventHandler, HTMLAttributes, MouseEvent, ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties, MouseEventHandler, MouseEvent, ChangeEvent, FocusEvent, KeyboardEvent, ImgHTMLAttributes } from 'react';
 
-interface PageContainerProps {
+interface PageContainerProps extends HTMLAttributes<HTMLDivElement> {
     justifyContent?: string;
     alignItems?: string;
     noPaddingLeft?: boolean;
@@ -10,33 +10,32 @@ interface PageContainerProps {
     noPaddingBottom?: boolean;
     noPaddingTop?: boolean;
     noPadding?: boolean;
+    gap?: string;
     children?: ReactNode;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const PageContainer: ({ justifyContent, alignItems, noPaddingLeft, noPaddingRight, noPaddingBottom, children, ...rest }: PageContainerProps) => react_jsx_runtime.JSX.Element;
 
-interface BoxProps {
-    children?: ReactNode;
+interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     hasShadow?: boolean;
     fullWidth?: boolean;
     fullHeight?: boolean;
     padding?: string;
     margin?: string;
     background?: string;
+    backgroundColor?: string;
+    height?: string;
     alignItems?: string;
     color?: string;
     alignSelf?: string;
     justifyContent?: string;
-    onClick?: MouseEventHandler<HTMLDivElement>;
+    borderRadius?: string;
     style?: CSSProperties;
-    className?: string;
-    [key: string]: unknown;
 }
 declare const Box: ({ children, hasShadow, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
 
-interface GridProps {
+interface GridProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     height?: string;
     col?: string;
@@ -51,40 +50,38 @@ interface GridProps {
     onClick?: MouseEventHandler<HTMLDivElement>;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const Grid: (props: GridProps) => react_jsx_runtime.JSX.Element;
 
-interface RowProps {
-    children?: ReactNode;
+interface RowProps extends HTMLAttributes<HTMLDivElement> {
     gap?: number | string;
     justifyContent?: string;
     alignItems?: string;
     margin?: string;
     padding?: string;
     fullWidth?: boolean;
+    fullwidth?: boolean;
     fullHeight?: boolean;
+    width?: string;
     wrap?: string;
     style?: CSSProperties;
     className?: string;
-    onClick?: () => void;
-    [key: string]: unknown;
 }
-declare const Row: (props: RowProps) => react_jsx_runtime.JSX.Element;
+declare const Row: react.ForwardRefExoticComponent<RowProps & react.RefAttributes<HTMLDivElement>>;
 
-interface ColProps {
-    children?: ReactNode;
+interface ColProps extends HTMLAttributes<HTMLDivElement> {
     gap?: number | string;
     justifyContent?: string;
+    justify?: string;
     alignItems?: string;
     size?: number;
     margin?: string;
     padding?: string;
     fullHeight?: boolean;
     fullWidth?: boolean;
+    flex?: string;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const Col: (props: ColProps) => react_jsx_runtime.JSX.Element;
 
@@ -185,19 +182,6 @@ interface DrawerProps {
 }
 declare const Drawer: ({ showDrawer, closeDrawer, title, width, children, leftButtonLabel, leftButtonAction, rightButtonLabel, rightButtonAction, isLoading, leftVariant, variant, }: DrawerProps) => react_jsx_runtime.JSX.Element | null;
 
-interface BubbleProps {
-    children?: ReactNode;
-    color?: string;
-    backgroundColor?: string;
-    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
-    margin?: string;
-    padding?: string;
-    maxChars?: number;
-    borderRadius?: string;
-    width?: string;
-}
-declare const Bubble: ({ children, ...otherProps }: BubbleProps) => react_jsx_runtime.JSX.Element;
-
 type SizeKey = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 interface TagBubbleProps extends HTMLAttributes<HTMLDivElement> {
     label: string;
@@ -223,6 +207,19 @@ interface TagBubbleProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const TagBubble: ({ label, hideCircle, isActive, circleSize, circleColorActive, circleColorInactive, count, hideCount, countBg, countText, countSize, labelSize, labelWeight, labelColor, gap, padding, radius, background, borderColor, hasShadow, onClick, ...rest }: TagBubbleProps) => react_jsx_runtime.JSX.Element;
 
+interface BubbleProps {
+    children?: ReactNode;
+    color?: string;
+    backgroundColor?: string;
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+    margin?: string;
+    padding?: string;
+    maxChars?: number;
+    borderRadius?: string;
+    width?: string;
+}
+declare const Bubble: ({ children, ...otherProps }: BubbleProps) => react_jsx_runtime.JSX.Element;
+
 interface IconProps {
     name?: string;
     family?: string;
@@ -241,7 +238,7 @@ interface IconProps {
 }
 declare const Icon: (props: IconProps) => react_jsx_runtime.JSX.Element;
 
-interface TextProps {
+interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
     children?: ReactNode;
     size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | string;
     weight?: string;
@@ -260,7 +257,6 @@ interface TextProps {
     onClick?: (e: MouseEvent) => void;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const Text: (props: TextProps) => react_jsx_runtime.JSX.Element;
 
@@ -282,7 +278,7 @@ interface LinkProps {
 }
 declare const Link: ({ children, url, newTab, download, size, variant, ...rest }: LinkProps) => react_jsx_runtime.JSX.Element;
 
-interface ButtonProps {
+interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
     label?: string;
     children?: ReactNode;
     iconLeft?: string;
@@ -298,19 +294,18 @@ interface ButtonProps {
     disabled?: boolean;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const Button: ({ label, children, iconLeft, iconRight, iconColor, variant, outline, size, width, isLoading, fontWeight, onClick, disabled, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
-interface SelectOption {
-    value: unknown;
+interface SelectOption<T> {
+    value: T;
     label: string;
 }
-interface SelectProps {
+interface SelectProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'> {
     label?: string;
-    value?: unknown;
-    onChange?: (value: unknown) => void;
-    options?: SelectOption[];
+    value?: T;
+    onChange?: (value: T) => void;
+    options?: SelectOption<T>[];
     placeholder?: string;
     width?: string;
     height?: string;
@@ -320,11 +315,10 @@ interface SelectProps {
     backgroundColor?: string;
     hideSearchBar?: boolean;
     noFlex?: boolean;
-    [key: string]: unknown;
 }
-declare const Select: ({ label, value, onChange, options, placeholder, width, height, required, disabled, color, backgroundColor, hideSearchBar, noFlex, }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare const Select: <T = unknown>({ label, value, onChange, options, placeholder, width, height, required, disabled, color, backgroundColor, hideSearchBar, noFlex, }: SelectProps<T>) => react_jsx_runtime.JSX.Element;
 
-interface InputProps {
+interface InputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'onKeyDown'> {
     label?: string;
     value?: string | number;
     onChange?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | {
@@ -348,6 +342,7 @@ interface InputProps {
     max?: string | number;
     step?: string | number;
     width?: string;
+    fullWidth?: boolean;
     transparent?: boolean;
     textAlign?: string;
     padding?: string;
@@ -356,6 +351,9 @@ interface InputProps {
     marginTop?: string;
     style?: CSSProperties;
     className?: string;
+    isSearch?: boolean;
+    onClear?: () => void;
+    onSearch?: (value: string) => void;
 }
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 
@@ -383,7 +381,45 @@ interface RadioProps {
 }
 declare const Radio: ({ children, checked, onChange, disabled, label, size, variant, name, value, }: RadioProps) => react_jsx_runtime.JSX.Element;
 
-interface ListProps {
+interface AccordionItem {
+    id: string | number;
+    title: ReactNode;
+    content: ReactNode;
+}
+interface AccordionProps {
+    /** Mode multi — un seul ouvert à la fois */
+    items?: AccordionItem[];
+    /** Mode single — titre du panneau */
+    title?: ReactNode;
+    /** Mode single — contenu */
+    children?: ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onToggle?: (open: boolean) => void;
+    /** Mode multi contrôlé — id de l'item ouvert */
+    openItemId?: string | number | null;
+    /** Mode multi contrôlé — callback quand un item est togglé */
+    onItemToggle?: (id: string | number | null) => void;
+    needCheckbox?: boolean;
+    checkboxValue?: boolean;
+    onCheck?: (e: ChangeEvent<HTMLInputElement>) => void;
+    bordered?: boolean;
+    disabled?: boolean;
+    maxHeight?: number;
+}
+declare const Accordion: ({ items, title, children, defaultOpen, open: controlledOpen, onToggle, openItemId: controlledItemId, onItemToggle, needCheckbox, checkboxValue, onCheck, bordered, disabled, maxHeight, }: AccordionProps) => react_jsx_runtime.JSX.Element;
+
+interface ColorPickerProps {
+    label?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (color: string) => void;
+    disabled?: boolean;
+    size?: 's' | 'm' | 'l';
+}
+declare const ColorPicker: react.ForwardRefExoticComponent<ColorPickerProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ListProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     width?: string;
     height?: string;
@@ -395,11 +431,10 @@ interface ListProps {
     onClick?: () => void;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const List: (props: ListProps) => react_jsx_runtime.JSX.Element;
 
-interface ListItemProps {
+interface ListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     children?: ReactNode;
     width?: string;
     height?: string;
@@ -412,39 +447,37 @@ interface ListItemProps {
     onClick?: () => void;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const ListItem: (props: ListItemProps) => react_jsx_runtime.JSX.Element;
 
-interface TableProps {
+interface TableProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
+    fullWidth?: boolean;
+    borderRadius?: string;
 }
-declare const Table: react.ForwardRefExoticComponent<Omit<TableProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLDivElement>>;
 
-interface TableHeaderProps {
+interface TableHeaderProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     backgroundColor?: string;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const TableHeader: (props: TableHeaderProps) => react_jsx_runtime.JSX.Element;
 
-interface TableBodyProps {
+interface TableBodyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     children?: ReactNode;
     color?: string;
     fixedHeight?: boolean;
     useEvenBackground?: boolean;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
-declare const TableBody: react.ForwardRefExoticComponent<Omit<TableBodyProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<TableBodyProps & react.RefAttributes<HTMLDivElement>>;
 
-interface TableRowProps {
+interface TableRowProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     backgroundColor?: string;
     borderTop?: string;
@@ -453,24 +486,24 @@ interface TableRowProps {
     onClick?: (e: MouseEvent<HTMLDivElement>) => void;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const TableRow: (props: TableRowProps) => react_jsx_runtime.JSX.Element;
 
-interface TableCellProps {
+interface TableCellProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     centerContent?: boolean;
+    colSpan?: number;
     flexGrow?: string | number;
     flexShrink?: string | number;
     borderLeft?: string;
+    padding?: string;
     width?: string;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const TableCell: (props: TableCellProps) => react_jsx_runtime.JSX.Element;
 
-interface TableHeaderCellProps {
+interface TableHeaderCellProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     useSort?: boolean;
     isSort?: boolean;
@@ -479,38 +512,34 @@ interface TableHeaderCellProps {
     width?: string;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const TableHeaderCell: (props: TableHeaderCellProps) => react_jsx_runtime.JSX.Element;
 
-interface TableHeaderRowProps {
+interface TableHeaderRowProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     backgroundColor?: string;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const TableHeaderRow: (props: TableHeaderRowProps) => react_jsx_runtime.JSX.Element;
 
-interface TableFooterProps {
+interface TableFooterProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     backgroundColor?: string;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const TableFooter: (props: TableFooterProps) => react_jsx_runtime.JSX.Element;
 
-interface TableFooterRowProps {
+interface TableFooterRowProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     backgroundColor?: string;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const TableFooterRow: (props: TableFooterRowProps) => react_jsx_runtime.JSX.Element;
 
-interface TableFooterCellProps {
+interface TableFooterCellProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     useSort?: boolean;
     flexGrow?: string | number;
@@ -518,7 +547,6 @@ interface TableFooterCellProps {
     width?: string;
     style?: CSSProperties;
     className?: string;
-    [key: string]: unknown;
 }
 declare const TableFooterCell: (props: TableFooterCellProps) => react_jsx_runtime.JSX.Element;
 
@@ -543,9 +571,8 @@ interface OptionItem {
     id?: string | number;
     label: string;
     color: string;
-    [key: string]: unknown;
 }
-interface OptionsProps {
+interface OptionsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     icon?: string;
     options: OptionItem[];
     value?: number;
@@ -559,9 +586,8 @@ interface StepperStep {
     label: string;
     icon?: string;
     onClick?: (index: number) => void;
-    [key: string]: unknown;
 }
-interface StepperProps {
+interface StepperProps extends HTMLAttributes<HTMLElement> {
     steps: StepperStep[];
     current?: number;
     size?: number;
@@ -574,9 +600,8 @@ interface TabItem {
     id: string | number;
     label: string;
     disabled?: boolean;
-    [key: string]: unknown;
 }
-interface TabsProps {
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     value?: string | number;
     onChange?: (id: string | number) => void;
     items?: TabItem[];
@@ -584,11 +609,10 @@ interface TabsProps {
     showBaseline?: boolean;
     baselineColor?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 }
 declare const Tabs: ({ value, onChange, items, align, showBaseline, baselineColor, children, ...rest }: TabsProps) => react_jsx_runtime.JSX.Element;
 
-interface ImageProps {
+interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     src?: string;
     alt?: string;
     width?: string;
@@ -597,7 +621,6 @@ interface ImageProps {
     objectFit?: string;
     alignSelf?: string;
     style?: CSSProperties;
-    [key: string]: unknown;
 }
 declare const Image: ({ src, alt, width, height, borderRadius, objectFit, alignSelf, style, ...rest }: ImageProps) => react_jsx_runtime.JSX.Element;
 
@@ -627,9 +650,8 @@ declare const DatePicker: ({ onChange, size }: DatePickerProps) => react_jsx_run
 interface IconTabItem {
     icon?: string;
     label?: string;
-    [key: string]: unknown;
 }
-interface IconTabsProps {
+interface IconTabsProps extends HTMLAttributes<HTMLDivElement> {
     items: IconTabItem[];
     selectedColor?: string;
     onTabChange?: (index: number) => void;
@@ -648,6 +670,69 @@ interface PopoverProps {
 }
 declare const Popover: ({ items, children }: PopoverProps) => react_jsx_runtime.JSX.Element;
 
+interface TooltipProps {
+    children?: ReactNode;
+    backgroundColor?: string;
+    data?: string[];
+    width?: string;
+    height?: string;
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+}
+declare const Tooltip: ({ backgroundColor, data, width, height, direction, children, }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+interface PaginationProps {
+    currentPage: number;
+    totalItems: number;
+    itemsPerPage: number;
+    onPageChange: (page: number) => void;
+    showSummary?: boolean;
+    summaryLabel?: string;
+}
+declare const Pagination: ({ currentPage, totalItems, itemsPerPage, onPageChange, showSummary, summaryLabel, }: PaginationProps) => react_jsx_runtime.JSX.Element;
+
+interface FileUploadZoneProps {
+    /** Called with the validated File when the user drops/selects a file */
+    onSave?: (file: File) => void;
+    /** Called when the user clicks the remove button (preview mode) */
+    onRemove?: () => void;
+    /** Called with an error message when validation fails — use for toastr etc. */
+    onError?: (message: string) => void;
+    /** Accepted file extensions: ['png', 'jpg', 'pdf'] — defaults to all supported */
+    accept?: string[];
+    /** Shortcut: only accept PDFs (overrides `accept`) */
+    acceptOnlyPdf?: boolean;
+    /** Max file size in MB — defaults to 10 */
+    maxSizeMB?: number;
+    /** Drop zone label text */
+    label?: string;
+    /** Secondary hint text below the label */
+    sublabel?: string;
+    /** Label for the browse button. Set to false to hide the button. */
+    browseLabel?: string | false;
+    /** Disables the drop zone */
+    disabled?: boolean;
+    /** When true, shows built-in preview after file selection. Defaults to true.
+     *  Set to false when the parent handles preview (e.g. cropping flow). */
+    showPreview?: boolean;
+    /** Controlled preview URL — when provided, the component shows preview mode */
+    previewUrl?: string;
+    /** Makes the component stretch to 100% width */
+    fullWidth?: boolean;
+    /** Compact mode — smaller drop zone without icon, without browse button */
+    compact?: boolean;
+    /** Icon name to display in the drop zone. Set to false to hide. Defaults to 'cloud-arrow-up'. */
+    icon?: string | false;
+    /** Shows the selected file name below the drop zone after upload */
+    showFileName?: boolean;
+}
+declare const FileUploadZone: ({ onSave, onRemove, onError, accept, acceptOnlyPdf, maxSizeMB, label, sublabel, browseLabel, disabled, showPreview, previewUrl: controlledPreviewUrl, fullWidth, compact, icon, showFileName, }: FileUploadZoneProps) => react_jsx_runtime.JSX.Element;
+
+interface SpinnerProps {
+    size?: 's' | 'm' | 'l';
+    color?: string;
+}
+declare const Spinner: ({ size, color }: SpinnerProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * formatDate(date, type?, language?)
  * - language : fr/en/es/... (locale inferred), default "en"
@@ -740,4 +825,4 @@ declare const colors: {
     readonly light_blue: "#F1F5F9";
 };
 
-export { Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, DatePicker, Divider, Drawer, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Popover, Radio, Row, Select, SkeletonRow, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, TableHeaderRow, TableRow, Tabs, TagBubble, Text, colors, formatDate, formatDistance, formatDuration, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Tooltip, colors, formatDate, formatDistance, formatDuration, truncateFileName, truncateText };