design-zystem 1.0.310 → 1.0.311

package/dist/ui/index.d.mts

@@ -0,0 +1,1177 @@
+import * as react from 'react';
+import { HTMLAttributes, AnchorHTMLAttributes, ElementType, ImgHTMLAttributes, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, MouseEvent, ComponentPropsWithoutRef } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as RadixLabel from '@radix-ui/react-label';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import * as RadixSwitch from '@radix-ui/react-switch';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as RadixAvatar from '@radix-ui/react-avatar';
+import * as RadixCollapsible from '@radix-ui/react-collapsible';
+import { Drawer as Drawer$1 } from 'vaul';
+import { DocumentProps } from 'react-pdf';
+import * as RadixScrollArea from '@radix-ui/react-scroll-area';
+
+declare const layoutVariants: (props?: ({
+    direction?: "row" | "column" | null | undefined;
+    gap?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
+    align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+    fullHeight?: boolean | null | undefined;
+    padding?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
+    paddingX?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
+    paddingY?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
+    paddingTop?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
+    paddingRight?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
+    paddingBottom?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
+    paddingLeft?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface LayoutProps extends HTMLAttributes<HTMLDivElement>, Omit<VariantProps<typeof layoutVariants>, 'direction'> {
+    row?: boolean;
+    column?: boolean;
+    /** Largeur explicite (`"300px"`, `"50%"`) — désactive le `fullWidth` par défaut. */
+    width?: string;
+    /** Raccourci CSS `flex` (ex. `1`, `2`, `"1 1 0%"`) — pour répartir l'espace entre plusieurs `Layout` côte à côte dans un `Layout row` parent. */
+    flex?: number | string;
+}
+/** Remplace Row + Col du DZ — `row` (défaut) ou `column` choisit le sens. Pour une grille, écrire `grid grid-cols-*` en `className` directement, pas de composant Grid. */
+declare const Layout: react.ForwardRefExoticComponent<LayoutProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Jeu fermé de couleurs brutes exposé aux composants (Button, Checkbox,
+ * Switch, Card, Badge...). Toujours un nom de token de la palette
+ * (DeliverySystem/tailwind.config.ts), jamais un alias sémantique
+ * (primary/secondary/destructive) — cf. CLAUDE.local.md.
+ */
+declare const COLOR_TOKENS: readonly ["blue-700", "blue-900", "blue-950", "red-900", "green-700", "grey-600"];
+type ColorToken = (typeof COLOR_TOKENS)[number];
+
+declare const boxVariants: (props?: ({
+    padding?: "none" | "sm" | "md" | "lg" | null | undefined;
+    radius?: "none" | "sm" | "md" | null | undefined;
+    hasShadow?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BoxProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof boxVariants> {
+    /** Left accent bar — status/score encoding. */
+    accent?: ColorToken | 'none';
+    width?: string;
+}
+/**
+ * Surface bordée/ombrée. Ne gère pas le flex — composer avec `Layout` pour
+ * disposer les enfants (`<Box><Layout row>...</Layout></Box>`).
+ */
+declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const dividerVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface DividerProps extends VariantProps<typeof dividerVariants> {
+    className?: string;
+}
+declare const Divider: ({ orientation, className, }: DividerProps) => react.JSX.Element;
+
+declare const linkVariants: (props?: ({
+    color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "green-700" | "grey-600" | null | undefined;
+    size?: "s" | "xs" | "m" | "l" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'>, VariantProps<typeof linkVariants> {
+    newTab?: boolean;
+}
+declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
+
+declare const textVariants: (props?: ({
+    size?: "s" | "xs" | "m" | "l" | "xxs" | "xl" | "xxl" | null | undefined;
+    weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
+    color?: "white" | "blue-700" | "blue-900" | "blue-950" | "red-900" | "green-700" | "grey-600" | "neutral-800" | "grey-500" | null | undefined;
+    align?: "center" | "left" | "right" | null | undefined;
+    lineClamp?: 1 | 2 | 3 | "none" | null | undefined;
+    italic?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>, VariantProps<typeof textVariants> {
+    as?: ElementType;
+    /** Pour `as="label"`. */
+    htmlFor?: string;
+}
+declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLElement>>;
+
+declare const imageVariants: (props?: ({
+    fit?: "contain" | "cover" | "fill" | null | undefined;
+    radius?: "none" | "sm" | "md" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ImageProps extends ImgHTMLAttributes<HTMLImageElement>, VariantProps<typeof imageVariants> {
+}
+declare const Image: react.ForwardRefExoticComponent<ImageProps & react.RefAttributes<HTMLImageElement>>;
+
+type FaFamily = 'solid' | 'regular' | 'light' | 'brands';
+
+type IconSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+type IconFamily = FaFamily;
+type IconColor = ColorToken | 'red-500' | 'grey-500' | 'neutral-800' | 'white';
+interface IconProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'onClick'> {
+    /** Nom de l'icône FontAwesome, sans le préfixe `fa-` (ex. "truck", "magnifying-glass"). */
+    name: string;
+    family?: IconFamily;
+    size?: IconSize;
+    color?: IconColor;
+    className?: string;
+    onClick?: () => void;
+    /** Action indisponible : icône grisée, clic inerte. N'a de sens qu'avec `onClick`. */
+    disabled?: boolean;
+}
+/**
+ * `forwardRef` et propagation des props restantes sont nécessaires aux
+ * déclencheurs Radix montés en `asChild` — `Tooltip` en tête : sans elles, ni
+ * la ref ni les gestionnaires ne parviennent à l'icône, et le consommateur
+ * doit interposer un élément hors DZ pour lui servir de cible.
+ */
+declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLElement>>;
+
+/** `red-500` est le rouge vif d'action destructive (l'ancien `red_950` du DZ) —
+ * `red-900` reste le bordeaux d'état d'erreur. */
+type ButtonColor = ColorToken | 'red-500';
+declare const buttonVariants: (props?: ({
+    color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "green-700" | "grey-600" | "red-500" | null | undefined;
+    look?: "filled" | "outline" | null | undefined;
+    size?: "s" | "m" | "l" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
+    label?: string;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    isLoading?: boolean;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface LabelProps extends React.ComponentPropsWithoutRef<typeof RadixLabel.Root> {
+    children?: ReactNode;
+    required?: boolean;
+}
+declare const Label: ({ children, required, className, ...props }: LabelProps) => react.JSX.Element;
+
+type InputGroupProps = HTMLAttributes<HTMLDivElement>;
+/** Conteneur relatif pour composer un champ avec des icônes/boutons ancrés dedans — calqué sur `InputGroup` de shadcn. Composer avec `InputGroupAddon`/`InputGroupButton`. */
+declare const InputGroup: react.ForwardRefExoticComponent<InputGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface InputGroupAddonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Bord du champ où ancrer l'addon. */
+    align?: 'inline-start' | 'inline-end';
+}
+/** Icône/bouton ancré à l'intérieur d'un `InputGroup`, verticalement centré. */
+declare const InputGroupAddon: ({ align, className, ...props }: InputGroupAddonProps) => react.JSX.Element;
+type InputGroupButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+/** Bouton interactif à l'intérieur d'un `InputGroupAddon` (celui-ci désactive `pointer-events`, ce bouton les réactive). */
+declare const InputGroupButton: react.ForwardRefExoticComponent<InputGroupButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+/** Extension maison au-dessus d'Input — shadcn n'a pas de champ mot de passe, composé ici sur `InputGroup` (son propre pattern pour un champ + icône ancrée). */
+declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    onClear?: () => void;
+    onSearch?: (value: string) => void;
+}
+/** Extension maison au-dessus d'Input, composée sur `InputGroup` — icône loupe à gauche, croix pour vider à droite quand `onClear` est fourni. */
+declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface PhoneInputMeta {
+    phone: string;
+    dialCode: string;
+    countryIso2: string;
+}
+interface PhoneInputProps {
+    label?: string;
+    value?: string;
+    onChange?: (phone: string, meta: PhoneInputMeta) => void;
+    /** Code pays ISO2 (ex. "fr") pour le drapeau/l'indicatif par défaut. */
+    defaultCountry?: string;
+    disabled?: boolean;
+    required?: boolean;
+    width?: string;
+    className?: string;
+}
+/**
+ * Enveloppe react-international-phone + libphonenumber-js, retint sur la
+ * palette DZ (voir globals.css). Ne réimplémente pas la gestion indicatifs
+ * pays/masques de saisie — même logique que DatePicker + react-day-picker.
+ */
+declare const PhoneInput: ({ label, value, onChange, defaultCountry, disabled, required, width, className, }: PhoneInputProps) => react.JSX.Element;
+
+interface EmailInputProps {
+    label?: string;
+    value: string[];
+    onChange: (emails: string[]) => void;
+    onInvalidMessage?: (message: string | null) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    width?: string;
+    className?: string;
+}
+/** Enveloppe Tagify — retint sur la palette DZ (voir globals.css, classe .dz-tagify). */
+declare const EmailInput: ({ label, value, onChange, onInvalidMessage, placeholder, disabled, required, width, className, }: EmailInputProps) => react.JSX.Element;
+
+declare const checkboxVariants: (props?: ({
+    color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "green-700" | "grey-600" | null | undefined;
+    size?: "s" | "m" | "l" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixCheckbox.Root>, 'color' | 'onCheckedChange' | 'onChange'>, VariantProps<typeof checkboxVariants> {
+    label?: string;
+    onChange?: (checked: boolean) => void;
+}
+declare const Checkbox: ({ label, color, size, onChange, id, className, ...props }: CheckboxProps) => react.JSX.Element;
+
+declare const trackVariants$1: (props?: ({
+    size?: "s" | "m" | null | undefined;
+    color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "green-700" | "grey-600" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixSwitch.Root>, 'color' | 'onCheckedChange' | 'onChange'>, VariantProps<typeof trackVariants$1> {
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    labelPosition?: 'left' | 'right';
+}
+declare const Switch: ({ size, color, onChange, label, labelPosition, id, className, ...props }: SwitchProps) => react.JSX.Element;
+
+declare const badgeVariants: (props?: ({
+    color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "green-700" | "grey-600" | null | undefined;
+    size?: "s" | "xs" | "m" | "l" | "xxs" | "xl" | "xxl" | null | undefined;
+    isRound?: boolean | null | undefined;
+    pointer?: boolean | null | undefined;
+    pulse?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>, VariantProps<typeof badgeVariants> {
+}
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+type TabsVariant = 'line' | 'pills';
+interface TabItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    bubbleNumber?: number | null;
+}
+interface TabsProps {
+    value: string;
+    onChange: (id: string) => void;
+    items: TabItem[];
+    variant?: TabsVariant;
+    /** Chaque item se partage la largeur à parts égales (`100% / items.length`) au lieu de s'ajuster à son contenu. */
+    fullWidth?: boolean;
+    className?: string;
+}
+declare const Tabs: ({ value, onChange, items, variant, fullWidth, className, }: TabsProps) => react.JSX.Element;
+
+interface ModalProps {
+    children?: ReactNode;
+    open?: boolean;
+    onClose?: () => void;
+    width?: string;
+    /** L'en-tête (`ModalHeader`) devient une poignée de glisser-déposer. */
+    draggable?: boolean;
+    className?: string;
+}
+/** Construit sur `@radix-ui/react-dialog` — compose-le avec `ModalHeader`/`ModalTitle`/`ModalDescription`/`ModalBody`/`ModalFooter`/`ModalClose`, comme le `Table`. */
+declare const Modal: ({ children, open, onClose, width, draggable, className, }: ModalProps) => react.JSX.Element;
+declare const ModalHeader: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+declare const ModalTitle: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof RadixDialog.Title>) => react.JSX.Element;
+declare const ModalDescription: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof RadixDialog.Description>) => react.JSX.Element;
+declare const ModalBody: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+declare const ModalFooter: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+declare const ModalClose: react.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectSharedProps {
+    label?: string;
+    options: SelectOption[];
+    placeholder?: string;
+    width?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Masque la barre de recherche — affichée par défaut. */
+    hideSearchBar?: boolean;
+    className?: string;
+}
+interface SingleSelectProps extends SelectSharedProps {
+    multiple?: false;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+interface MultiSelectProps extends SelectSharedProps {
+    multiple: true;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+}
+type SelectProps = SingleSelectProps | MultiSelectProps;
+declare const Select: (props: SelectProps) => react.JSX.Element;
+
+interface TagOption {
+    value: string;
+    label: string;
+}
+interface TagSelectProps {
+    label?: string;
+    options: TagOption[];
+    value?: TagOption[];
+    onChange?: (value: TagOption[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    width?: string;
+    className?: string;
+}
+/**
+ * Multiselect à puces (combobox) — remplace le widget maison `InputSelect`
+ * (wrapper react-select) utilisé partout à la place du MultiSelect DZ.
+ * Champ à hauteur variable (les puces peuvent passer à la ligne), donc pas
+ * aligné sur le h-9 des champs mono-ligne (Input/Select/DatePicker).
+ */
+declare const TagSelect: ({ label, options, value, onChange, placeholder, disabled, width, className, }: TagSelectProps) => react.JSX.Element;
+
+interface TableEmptyState {
+    icon: ReactNode;
+    label: string;
+    buttonLabel?: string;
+    action?: () => void;
+}
+interface TablePagination {
+    itemsPerPage: number;
+    currentPage: number;
+    /** Total réel côté serveur (ex. `count` renvoyé par la RPC) — `rows` ne contient que la page courante. */
+    totalItems: number;
+    onPageChange: (page: number) => void;
+}
+interface TableProps {
+    /** Largeur du tableau (défaut : 100% du conteneur). Les largeurs par colonne se posent sur chaque `TableHeaderCell`/`TableCell`/`TableFooterCell`. */
+    width?: string;
+    /** `<TableHeader>` déjà construit — compose-le toi-même avec `TableHeader`/`TableHeaderRow`/`TableHeaderCell` (le tri, s'il y en a, est géré dans ce composant). */
+    header: ReactNode;
+    /** Une ligne déjà construite (`TableRow`/`TableCell`, ou ton propre composant qui les compose) par élément. */
+    rows: ReactNode[];
+    /** `<TableFooter>` déjà construit — compose-le toi-même avec `TableFooter`/`TableFooterRow`/`TableFooterCell`. */
+    footer?: ReactNode;
+    /** Masque emptyState et la pagination pendant un chargement — pour l'état visuel des lignes (ex. squelettes), compose `rows` toi-même selon ce booléen. */
+    loading?: boolean;
+    /** Icône dans un cercle bleu + texte (+ bouton d'action optionnel), affiché quand `rows` est vide (et hors chargement). */
+    emptyState?: TableEmptyState | null;
+    maxHeight?: string;
+    /** Hauteur plancher — le tableau garde son gabarit même sans lignes, pour que
+     * la page ne se replie pas entre un résultat vide et une liste chargée. */
+    minHeight?: string;
+    className?: string;
+    /** `rows` ne contient que la page courante (venue d'une RPC) — `Table` affiche le pied de pagination et te redonne la main via `onPageChange` pour refetch. */
+    pagination?: TablePagination;
+    /** Alterne le fond des lignes une sur deux. */
+    zebra?: boolean;
+    /** Séparateur vertical entre toutes les colonnes (header, lignes, footer) — pas besoin de le poser cellule par cellule. */
+    borderLeft?: boolean;
+}
+declare const Table: ({ width, header, rows, footer, loading, emptyState, maxHeight, minHeight, className, pagination, zebra, borderLeft, }: TableProps) => react.JSX.Element;
+
+interface TableHeaderProps {
+    children?: ReactNode;
+}
+declare const TableHeader: ({ children }: TableHeaderProps) => react.JSX.Element;
+
+interface TableHeaderRowProps {
+    children?: ReactNode;
+}
+declare const TableHeaderRow: ({ children }: TableHeaderRowProps) => react.JSX.Element;
+
+declare const SURFACE_CLASS$1: {
+    readonly white: "bg-white";
+    readonly 'grey-100': "bg-grey-100";
+};
+interface TableHeaderCellProps {
+    children?: ReactNode;
+    width?: string;
+    /** Freeze this column while the table scrolls horizontally. */
+    sticky?: 'left' | 'right';
+    /** Offset from the sticky edge — the sum of the widths of any columns already frozen on that side. */
+    stickyOffset?: string;
+    /** Solid surface so scrolling columns don't show through the frozen one. */
+    surface?: keyof typeof SURFACE_CLASS$1;
+    /** Séparateur vertical entre colonnes. */
+    borderLeft?: boolean;
+    className?: string;
+}
+declare const TableHeaderCell: ({ children, width, sticky, stickyOffset, surface, borderLeft, className, }: TableHeaderCellProps) => react.JSX.Element;
+
+interface TableRowProps {
+    children?: ReactNode;
+    onClick?: (e: MouseEvent<HTMLTableRowElement>) => void;
+    className?: string;
+}
+declare const TableRow: ({ children, onClick, className }: TableRowProps) => react.JSX.Element;
+
+declare const SURFACE_CLASS: {
+    readonly white: "bg-white";
+    readonly 'grey-100': "bg-grey-100";
+};
+interface TableCellProps {
+    children?: ReactNode;
+    width?: string;
+    centerContent?: boolean;
+    /** Freeze this column while the table scrolls horizontally. */
+    sticky?: 'left' | 'right';
+    /** Offset from the sticky edge — the sum of the widths of any columns already frozen on that side. */
+    stickyOffset?: string;
+    /** Solid surface so scrolling columns don't show through the frozen one. */
+    surface?: keyof typeof SURFACE_CLASS;
+    /** Séparateur vertical entre colonnes. */
+    borderLeft?: boolean;
+    className?: string;
+}
+declare const TableCell: ({ children, width, centerContent, sticky, stickyOffset, surface, borderLeft, className, }: TableCellProps) => react.JSX.Element;
+
+interface TableFooterProps {
+    children?: ReactNode;
+    className?: string;
+}
+declare const TableFooter: ({ children, className }: TableFooterProps) => react.JSX.Element;
+
+interface TableFooterRowProps {
+    children?: ReactNode;
+}
+declare const TableFooterRow: ({ children }: TableFooterRowProps) => react.JSX.Element;
+
+interface TableFooterCellProps {
+    children?: ReactNode;
+    width?: string;
+    /** Séparateur vertical entre colonnes. */
+    borderLeft?: boolean;
+    className?: string;
+}
+declare const TableFooterCell: ({ children, width, borderLeft, className, }: TableFooterCellProps) => react.JSX.Element;
+
+declare const useAvatarSize: () => number;
+interface AvatarBadgeConfig {
+    /** Nom de l'icône FontAwesome, sans le préfixe `fa-`. */
+    icon: string;
+    iconFamily?: IconFamily;
+    backgroundColor: ColorToken;
+    iconColor: ColorToken;
+}
+interface AvatarProps extends Omit<ComponentPropsWithoutRef<typeof RadixAvatar.Root>, 'color'> {
+    size?: number;
+    shape?: 'circle' | 'square';
+    /** Mode raccourci : nom affiché en initiales si `src` absent/en erreur. Ignoré si `children` est fourni. */
+    name?: string;
+    src?: string | null;
+    color?: ColorToken;
+    badge?: AvatarBadgeConfig;
+}
+/** Sans `children` : mode raccourci, auto-compose Image/Fallback/Badge à partir de `name`/`src`/`color`/`badge`. Avec `children` : composition manuelle (`AvatarImage`, `AvatarFallback`, `AvatarBadge`) pour un contrôle total. */
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+type AvatarImageProps = ComponentPropsWithoutRef<typeof RadixAvatar.Image>;
+declare const AvatarImage: react.ForwardRefExoticComponent<Omit<RadixAvatar.AvatarImageProps & react.RefAttributes<HTMLImageElement>, "ref"> & react.RefAttributes<HTMLImageElement>>;
+interface AvatarFallbackProps extends ComponentPropsWithoutRef<typeof RadixAvatar.Fallback> {
+    color?: ColorToken;
+}
+declare const AvatarFallback: react.ForwardRefExoticComponent<AvatarFallbackProps & react.RefAttributes<HTMLSpanElement>>;
+type AvatarBadgeProps = HTMLAttributes<HTMLDivElement>;
+/** Positionné dans le coin bas-droit de l'Avatar parent (via context de taille) — un point de statut nu (`<AvatarBadge className="bg-green-700" />`) ou une icône en enfant. */
+declare const AvatarBadge: react.ForwardRefExoticComponent<AvatarBadgeProps & react.RefAttributes<HTMLDivElement>>;
+interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+    max?: number;
+}
+/** Force `size` sur chaque `Avatar` enfant et ajoute un anneau blanc pour les séparer visuellement dans l'empilement. */
+declare const AvatarGroup: ({ size, max, className, children, ...props }: AvatarGroupProps) => react.JSX.Element;
+
+declare const radioVariants: (props?: ({
+    color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "green-700" | "grey-600" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface RadioOption {
+    value: string;
+    label?: string;
+}
+interface RadioProps extends VariantProps<typeof radioVariants> {
+    items: RadioOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    width?: string;
+    className?: string;
+}
+declare const Radio: ({ items, value, onChange, disabled, color, width, className, }: RadioProps) => react.JSX.Element;
+
+declare const trackVariants: (props?: ({
+    height?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ProgressBarProps extends VariantProps<typeof trackVariants> {
+    /** Sur la plage `min`–`max`, clampée. */
+    value: number;
+    /** Rend la barre déplaçable au doigt/souris (slider) — sans, c'est une barre en lecture seule. */
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    color?: ColorToken;
+    label?: string;
+    showLabel?: boolean;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+declare const ProgressBar: ({ value, onChange, min, max, step, disabled, color, height, label, showLabel, formatValue, className, }: ProgressBarProps) => react.JSX.Element;
+
+declare const Collapsible: react.ForwardRefExoticComponent<RadixCollapsible.CollapsibleProps & react.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: react.ForwardRefExoticComponent<RadixCollapsible.CollapsibleTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof RadixCollapsible.Content>) => react.JSX.Element;
+
+type DrawerDirection = 'top' | 'bottom' | 'left' | 'right';
+interface DrawerProps {
+    children?: ReactNode;
+    open?: boolean;
+    onClose?: () => void;
+    /** Bord de l'écran depuis lequel le panneau glisse (défaut : `right`). */
+    direction?: DrawerDirection;
+    /** Largeur (directions `left`/`right`) ou hauteur (directions `top`/`bottom`) du panneau. */
+    size?: string;
+    className?: string;
+}
+/** Panneau — construit sur `vaul` (la lib derrière le vrai `Drawer` de shadcn). Compose-le avec `DrawerHeader`/`DrawerTitle`/`DrawerDescription`/`DrawerBody`/`DrawerFooter`/`DrawerClose`, comme le `Table`. Flotte : une marge le sépare des bords de la page, l'overlay se voit tout autour. */
+declare const Drawer: ({ children, open, onClose, direction, size, className, }: DrawerProps) => react.JSX.Element;
+declare const DrawerHeader: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+declare const DrawerTitle: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof Drawer$1.Title>) => react.JSX.Element;
+declare const DrawerDescription: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof Drawer$1.Description>) => react.JSX.Element;
+declare const DrawerBody: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+declare const DrawerFooter: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+declare const DrawerClose: react.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface PopoverMenuItem {
+    label: ReactNode;
+    action: () => void;
+}
+interface PopoverProps {
+    trigger: ReactNode;
+    items?: PopoverMenuItem[];
+    children?: ReactNode;
+    align?: 'start' | 'center' | 'end';
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+}
+declare const Popover: ({ trigger, items, children, align, side, className, }: PopoverProps) => react.JSX.Element;
+
+interface TooltipProps {
+    children: ReactNode;
+    content: ReactNode;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Bord de la cible sur lequel la bulle s'aligne. Combiné à `side`, il donne
+     * les positions composées : `bottom` + `end` = en bas à droite. */
+    align?: 'start' | 'center' | 'end';
+    className?: string;
+}
+/** Enveloppe son propre Provider — pour partager `delayDuration` entre plusieurs Tooltip, monter un seul `RadixTooltip.Provider` à la racine de l'app à la place. */
+declare const Tooltip: ({ children, content, side, align, className, }: TooltipProps) => react.JSX.Element;
+
+/** Monter une seule fois à la racine de l'app, à côté du router — construit sur `sonner` (le moteur recommandé par shadcn), retint via `ToastCard`. */
+declare const Toaster: () => react.JSX.Element;
+
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+interface ToastOptions {
+    title?: string;
+    timeOut?: number;
+}
+/** API impérative, appelable hors composant React. Monte `<Toaster />` une fois à la racine de l'app. */
+declare const toast: {
+    success: (message: string, options?: ToastOptions) => void;
+    error: (message: string, options?: ToastOptions) => void;
+    warning: (message: string, options?: ToastOptions) => void;
+    info: (message: string, options?: ToastOptions) => void;
+};
+
+declare const pageContainerVariants: (props?: ({
+    padding?: "none" | "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PageContainerProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof pageContainerVariants> {
+}
+/** Container plein cadre — la largeur/hauteur dépend du parent (flex/grid de l'app), pas d'un offset sidebar codé en dur. */
+declare const PageContainer: react.ForwardRefExoticComponent<PageContainerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface IconTabItem {
+    /** Nom de l'icône FontAwesome, sans le préfixe `fa-` (ex. "map", "chart-bar"). */
+    icon: string;
+    iconFamily?: IconFamily;
+    label?: string;
+}
+interface IconTabsProps {
+    items: IconTabItem[];
+    value: number;
+    onChange?: (index: number) => void;
+    disabledIndexes?: number[];
+    className?: string;
+}
+declare const IconTabs: ({ items, value, onChange, disabledIndexes, className, }: IconTabsProps) => react.JSX.Element;
+
+interface EmptyStateProps {
+    icon?: ReactNode;
+    title?: string;
+    description?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+    className?: string;
+}
+/** Structure calquée sur `Empty`/`EmptyHeader`/`EmptyMedia`/`EmptyContent` de shadcn, retint DZ. */
+declare const EmptyState: ({ icon, title, description, actionLabel, onAction, className, }: EmptyStateProps) => react.JSX.Element;
+
+declare const bannerVariants: (props?: ({
+    tone?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "green-700" | "grey-600" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BannerAction {
+    label: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+}
+interface BannerToggle {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+}
+interface BannerProps extends VariantProps<typeof bannerVariants> {
+    badge?: string;
+    title?: string;
+    subtitle?: string;
+    message?: string;
+    action?: BannerAction;
+    toggle?: BannerToggle;
+    children?: ReactNode;
+    fullWidth?: boolean;
+    width?: string;
+    className?: string;
+}
+declare const Banner: ({ tone, badge, title, subtitle, message, action, toggle, children, fullWidth, width, className, }: BannerProps) => react.JSX.Element;
+
+interface FloatingAction {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    badge?: number;
+    onClick: () => void;
+}
+interface FloatingButtonProps {
+    isOpen: boolean;
+    onToggle: () => void;
+    actions: FloatingAction[];
+    mainBadge?: number;
+    icon?: ReactNode;
+    label?: string;
+    color?: ColorToken;
+    /** Le bouton principal devient une poignée de glisser-déposer — la position se garde tant que le composant reste monté. */
+    draggable?: boolean;
+    /** Sauvegarde la position glissée dans localStorage sous cette clé et la restaure au montage — sans clé, la position ne survit pas à un refresh/changement de page. */
+    persistKey?: string;
+}
+declare const FloatingButton: ({ isOpen, onToggle, actions, mainBadge, icon, label, color, draggable, persistKey, }: FloatingButtonProps) => react.JSX.Element;
+
+interface MetricCardProps {
+    /** Nom de l'icône FontAwesome, sans le préfixe `fa-` (ex. "truck"). */
+    icon: string;
+    iconFamily?: IconFamily;
+    title?: string;
+    value?: string | number;
+    valueColor?: ColorToken;
+    subtitle?: string;
+    accent?: ColorToken;
+    layout?: 'row' | 'column';
+    onClick?: () => void;
+    selected?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+declare const MetricCard: ({ icon, iconFamily, title, value, valueColor, subtitle, accent, layout, onClick, selected, children, className, }: MetricCardProps) => react.JSX.Element;
+
+type SpinnerSize = 's' | 'm' | 'l';
+interface SpinnerProps {
+    size?: SpinnerSize;
+    /** Sans couleur, hérite du `currentColor` ambiant (utile dans un Button dont le texte change déjà de couleur). */
+    color?: ColorToken;
+    className?: string;
+}
+declare const Spinner: ({ size, color, className }: SpinnerProps) => react.JSX.Element;
+
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    width?: string | number;
+    height?: string | number;
+    isRound?: boolean;
+}
+declare const Skeleton: ({ width, height, isRound, className, style, ...props }: SkeletonProps) => react.JSX.Element;
+
+interface PaginationProps {
+    currentPage: number;
+    totalItems: number;
+    itemsPerPage: number;
+    onPageChange: (page: number) => void;
+    showSummary?: boolean;
+    summaryLabel?: string;
+}
+/** Structure calquée sur `Pagination`/`PaginationContent`/`PaginationItem` de shadcn (nav > ul > li). */
+declare const Pagination: ({ currentPage, totalItems, itemsPerPage, onPageChange, showSummary, summaryLabel, }: PaginationProps) => react.JSX.Element;
+
+interface TagBubbleProps {
+    label: string;
+    hideDot?: boolean;
+    active?: boolean;
+    activeColor?: ColorToken;
+    inactiveColor?: ColorToken;
+    count?: number | string | null;
+    countColor?: ColorToken;
+    onClick?: () => void;
+    className?: string;
+}
+/** Construit sur `@radix-ui/react-toggle` (comme le `Toggle` de shadcn) — chip filtre à deux états, pressable au clavier. */
+declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, count, countColor, onClick, className, }: TagBubbleProps) => react.JSX.Element;
+
+interface GanttDay {
+    key: string | number;
+    leftPct: number;
+    widthPct: number;
+    label: string;
+}
+interface GanttBar {
+    leftPct: number;
+    widthPct: number;
+    color: string;
+    textColor?: string;
+    label?: string | null;
+    title?: string;
+    dashed?: boolean;
+}
+interface GanttRow<T = unknown> {
+    key: string | number;
+    bar?: GanttBar | null;
+    data: T;
+}
+interface GanttBand {
+    key: string | number;
+    leftPct: number;
+    widthPct: number;
+    title?: string;
+}
+interface GanttProps<T = unknown> {
+    days: GanttDay[];
+    rows: GanttRow<T>[];
+    bands?: GanttBand[];
+    labelHeader?: string;
+    renderLabel: (row: GanttRow<T>, index: number) => ReactNode;
+    onRowClick?: (row: GanttRow<T>, index: number) => void;
+    labelWidth?: number;
+    rowHeight?: number;
+    maxHeight?: number;
+    className?: string;
+}
+declare const Gantt: <T>({ days, rows, bands, labelHeader, renderLabel, onRowClick, labelWidth, rowHeight, maxHeight, className, }: GanttProps<T>) => react.JSX.Element;
+declare const GanttDot: ({ color }: {
+    color: string;
+}) => react.JSX.Element;
+declare const GanttSwatch: ({ color, filled, }: {
+    color: string;
+    filled?: boolean;
+}) => react.JSX.Element;
+
+interface BulkSection {
+    title: string;
+    icon: ReactNode;
+    action: () => void;
+    disabled?: boolean;
+}
+interface BulkProps {
+    onClose?: () => void;
+    leftTitle?: string;
+    sections: BulkSection[];
+    color?: ColorToken;
+    className?: string;
+}
+declare const Bulk: ({ onClose, leftTitle, sections, color, className, }: BulkProps) => react.JSX.Element;
+
+interface TimelineItem {
+    id: string | number;
+    title: string;
+    subtitle?: string;
+    description?: string;
+    /** Couleur du point — pilotée par la donnée (statut métier), hex libre. */
+    color?: string;
+    highlighted?: boolean;
+}
+interface TimelineProps {
+    items: TimelineItem[];
+    lineColor?: string;
+    emptyLabel?: string;
+    className?: string;
+}
+declare const Timeline: ({ items, lineColor, emptyLabel, className, }: TimelineProps) => react.JSX.Element;
+
+declare const swatchVariants: (props?: ({
+    size?: "s" | "m" | "l" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ColorPickerProps extends VariantProps<typeof swatchVariants> {
+    label?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (color: string) => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare const ColorPicker: react.ForwardRefExoticComponent<ColorPickerProps & react.RefAttributes<HTMLInputElement>>;
+
+interface FileUploadZoneProps {
+    onSave?: (file: File) => void;
+    multiple?: boolean;
+    onSaveMultiple?: (files: File[]) => void;
+    onRemove?: () => void;
+    onError?: (message: string) => void;
+    /** Extensions acceptées: ['png', 'jpg', 'pdf'] — toutes par défaut. */
+    accept?: string[];
+    acceptOnlyPdf?: boolean;
+    maxSizeMB?: number;
+    label?: string;
+    sublabel?: string;
+    browseLabel?: string | false;
+    disabled?: boolean;
+    showPreview?: boolean;
+    previewUrl?: string;
+    fullWidth?: boolean;
+    compact?: boolean;
+    showIcon?: boolean;
+    showFileName?: boolean;
+    className?: string;
+}
+declare const FileUploadZone: ({ onSave, multiple, onSaveMultiple, onRemove, onError, accept, acceptOnlyPdf, maxSizeMB, label, sublabel, browseLabel, disabled, showPreview, previewUrl: controlledPreviewUrl, fullWidth, compact, showIcon, showFileName, className, }: FileUploadZoneProps) => react.JSX.Element;
+
+declare const itemVariants: (props?: ({
+    variant?: "default" | "outline" | "muted" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ItemProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof itemVariants> {
+}
+/** Ligne icône/contenu/actions — calqué sur `Item`/`ItemMedia`/`ItemContent`/`ItemActions` de shadcn. */
+declare const Item: react.ForwardRefExoticComponent<ItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const itemMediaVariants: (props?: ({
+    variant?: "default" | "icon" | "image" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ItemMediaProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof itemMediaVariants> {
+}
+declare const ItemMedia: ({ variant, className, ...props }: ItemMediaProps) => react.JSX.Element;
+declare const ItemContent: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+declare const ItemTitle: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+declare const ItemDescription: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+declare const ItemActions: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+
+type AttachmentStatus = 'uploading' | 'error' | 'done';
+interface AttachmentProps {
+    name: string;
+    size?: string;
+    status?: AttachmentStatus;
+    /** 0–100, affiché quand `status="uploading"`. */
+    progress?: number;
+    errorMessage?: string;
+    onRemove?: () => void;
+    /** Affiché uniquement si `status="error"`. */
+    onRetry?: () => void;
+    /** Défaut : 100% du parent. */
+    width?: string;
+    className?: string;
+}
+/** Chip représentant un fichier attaché — icône doc uniquement (pas de miniature image), avec états upload/erreur. Construit sur `Item`, rendu proche d'un `ToastCard` (carte blanche + ombre) plutôt qu'une simple ligne bordée. */
+declare const Attachment: ({ name, size, status, progress, errorMessage, onRemove, onRetry, width, className, }: AttachmentProps) => react.JSX.Element;
+
+interface PdfPreviewProps {
+    /** URL, `File` (input fichier), ou objet source pdf.js. */
+    file: DocumentProps['file'];
+    width?: number;
+    /** Hauteur max avant défilement vertical. */
+    maxHeight?: string;
+    className?: string;
+}
+/** Lecture complète d'un PDF (toutes les pages, défilement vertical) — construit sur `react-pdf` (wrapper de `pdf.js`), shadcn n'a pas de composant de rendu de document. */
+declare const PdfPreview: ({ file, width, maxHeight, className, }: PdfPreviewProps) => react.JSX.Element;
+
+interface ScrollAreaProps extends Omit<ComponentPropsWithoutRef<typeof RadixScrollArea.Root>, 'children'> {
+    children?: ReactNode;
+    orientation?: 'vertical' | 'horizontal' | 'both';
+}
+/** Construit sur `@radix-ui/react-scroll-area` (comme le `ScrollArea` de shadcn) — scrollbars custom au lieu de celles du système. */
+declare const ScrollArea: ({ children, className, orientation, ...props }: ScrollAreaProps) => react.JSX.Element;
+
+interface StepperProps {
+    numberOfSteps: number;
+    current?: number;
+    size?: number;
+    className?: string;
+}
+declare const Stepper: ({ numberOfSteps, current, size, className, }: StepperProps) => react.JSX.Element;
+
+type DatePickerMode = 'single' | 'range';
+interface DatePreset {
+    label: string;
+    icon?: ReactNode;
+    /** Renvoie une Date pour le mode "single", ou [début, fin] pour le mode "range". */
+    getValue: () => Date | [Date, Date];
+}
+interface DatePickerProps {
+    mode?: DatePickerMode;
+    /** Mode "single". */
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+    /** Mode "range". */
+    startDate?: Date | null;
+    endDate?: Date | null;
+    onRangeChange?: (start: Date | null, end: Date | null) => void;
+    /** Rendu "dashboard Ops" — boutons icône (raccourcis + déclencheur calendrier) au lieu d'un champ texte. */
+    showPresets?: boolean;
+    /** Surcharge les raccourcis par défaut (Ce mois/Ce trimestre/Cette année en range, Aujourd'hui/Demain/+7j en single). */
+    presets?: DatePreset[];
+    placeholder?: string;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    width?: string;
+    /** Bord du champ sur lequel le calendrier s'aligne — `end` quand le champ est
+     * à droite de la page, pour que le panneau ne déborde pas. */
+    align?: 'start' | 'center' | 'end';
+    className?: string;
+}
+/** Construit sur `react-day-picker` — la lib derrière le vrai `Calendar`/`DatePicker` de shadcn. */
+declare const DatePicker: ({ mode, value, onChange, startDate, endDate, onRangeChange, showPresets, presets, placeholder, disabled, minDate, maxDate, width, align, className, }: DatePickerProps) => react.JSX.Element;
+
+declare const colors: {
+    readonly neutral_00: "#FFFFFF00";
+    readonly neutral_50: "#fff";
+    readonly neutral_100: "#f8f9fa";
+    readonly neutral_200: "#f2F2F2";
+    readonly neutral_400: "#ccc";
+    readonly neutral_500: "#A4A4A4";
+    readonly neutral_600: "#808080";
+    readonly neutral_800: "#343a40";
+    readonly neutral_950: "#000";
+    readonly grey_100: "#F8FAFC";
+    readonly grey_200: "#F1F5F9";
+    readonly grey_300: "#E2E8F0";
+    readonly grey_400: "#CBD5E1";
+    readonly grey_500: "#94A3B8";
+    readonly grey_600: "#646B73";
+    readonly dark_100: "#42979D";
+    readonly dark_200: "#317176";
+    readonly dark_300: "#1D1C1C";
+    readonly blue_50: "#DBE9FE";
+    readonly blue_100: "#CCEAF8";
+    readonly blue_200: "#B9DCED";
+    readonly blue_300: "#A7CFE2";
+    readonly blue_400: "#94C1D7";
+    readonly blue_500: "#82B4CC";
+    readonly blue_600: "#5C99B7";
+    readonly blue_700: "#377EA1";
+    readonly blue_800: "#12638B";
+    readonly blue_900: "#0E4F6F";
+    readonly blue_950: "#1C4ED8";
+    readonly red_500: "#F44649";
+    readonly red_50: "#FEE9E9";
+    readonly red_900: "#7F1D1D";
+    readonly turquoise_50: "#EEF8F9";
+    readonly turquoise_100: "#DCF2F3";
+    readonly turquoise_200: "#CBEBED";
+    readonly turquoise_300: "#BAE5E7";
+    readonly turquoise_400: "#97D7DC";
+    readonly yellow_50: "#FEF7EA";
+    readonly yellow_100: "#FEEDD5";
+    readonly yellow_200: "#FFD700";
+    readonly yellow_300: "#F8AF2D";
+    readonly yellow_400: "#DF8F00";
+    readonly yellow_500: "#A16207";
+    readonly orange_50: "#FFEEE6";
+    readonly orange_100: "#FFCEB8";
+    readonly orange_300: "#FFAF8A";
+    readonly orange_400: "#FF8F5C";
+    readonly orange_500: "#FF641C";
+    readonly orange_600: "#FF5100";
+    readonly purple_50: "#EDE9FE";
+    readonly purple_700: "#7230DB";
+    readonly pink_50: "#FDF2F8";
+    readonly pink_100: "#FCE7F3";
+    readonly pink_300: "#FBCFE8";
+    readonly pink_400: "#F9A8D4";
+    readonly pink_500: "#CF0F9E";
+    readonly pink_600: "#EC4899";
+    readonly pink_700: "#DB2777";
+    readonly pink_800: "#BE185D";
+    readonly pink_900: "#9D174D";
+    readonly fuchsia_300: "#FFB3EC";
+    readonly green_50: "#DCFCE7";
+    readonly green_100: "#12B76A";
+    readonly green_700: "#17803D";
+    readonly green_900: "#006123";
+    readonly brown_50: "#EFEBE9";
+    readonly brown_100: "#D7CCC8";
+    readonly brown_300: "#A1887F";
+    readonly brown_400: "#8D6E63";
+    readonly brown_500: "#795548";
+    readonly brown_600: "#CD7F32";
+    readonly brown_700: "#5D4037";
+    readonly brown_800: "#4E342E";
+    readonly brown_900: "#3E2723";
+    readonly brown_950: "#333222";
+    readonly gradient_blue_deep: "linear-gradient(131.36deg, rgb(3, 62, 113) 0%, rgb(0, 87, 138) 20%, rgb(1, 113, 164) 40%, rgb(1, 113, 164) 50%, rgb(0, 87, 138) 80%, rgb(3, 62, 113) 100%)";
+};
+type ColorKey = keyof typeof colors;
+
+/**
+ * Miroir de DesignSystem/src/data/globalMethods.ts.
+ *
+ * formatDate(date, type?, language?)
+ * - language : fr/en/es/... (locale déduite), défaut "en"
+ * - type:
+ *   - "date": date courte locale (ex: 16/05/2024)
+ *   - "dateTime": date courte + heure (24h)
+ *   - "dateTimeSeconds": DD/MM/YY + heure avec secondes (24h) (ex: 16/05/24 14:32:07)
+ *   - "weekday": jour court + jour + mois (année si différente)
+ *   - "weekdayDay": jour court + jour
+ *   - "weekdayYear": jour court + jour + mois + année
+ *   - "weekdayTime": jour/date + heure (24h)
+ *   - "longDate": jour + mois complet + année, sans jour de semaine (ex: 16 mai 2024)
+ *   - "dateISO": format ISO YYYY-MM-DD (safe timezone pour le backend)
+ */
+declare const formatDate: (dateString: Date | string | number | null | undefined, type?: string, language?: string) => string;
+/** distanceKm -> formatté en km ou miles selon la langue (en => miles, sinon km) */
+declare const formatDistance: (distanceKm: number | string | null | undefined, language?: string) => string;
+/** minutes -> "0 min" / "1h05" (fr/es) ou "1:05" (en) */
+declare const formatDuration: (minutes: number | null | undefined, language?: string) => string;
+/** "Grand nom de fichier" -> "Grand nom d..." */
+declare const truncateText: (text: string | null | undefined, maxLength?: number) => string;
+/** "Grand_nom_de_fichier.pdf" -> "Grand_nom_....pdf" (préserve l'extension) */
+declare const truncateFileName: (fileName: string | null | undefined, maxLength?: number) => string;
+/** amount -> format monétaire français, 2 décimales, ex. 5190 -> "5 190,00 €" */
+declare const formatEuro: (amount?: number | null) => string;
+/** { firstname, lastname } -> "Jean Dupont" ; fallback si les deux sont vides/absents */
+declare const formatName: (person?: {
+    firstname?: string | null;
+    lastname?: string | null;
+} | null, fallback?: string) => string;
+
+declare const getRelativeTime: (date: Date | string) => string;
+
+declare const formatTime: (time: string | null | undefined) => string;
+
+declare const easterDate: (year: number) => Date;
+
+declare const isHoliday: (date: Date) => boolean;
+
+declare const addBusinessDays: (originalDate: Date, numDaysToAdd: number) => Date;
+
+declare const parseIsoDate: (value: string | null) => Date | null;
+
+declare const isSameDay: (a: Date | string, b: Date | string) => boolean;
+
+/**
+ * Réexporte les utilitaires partagés `src/utils/date/` — une seule
+ * implémentation pour `ui` et `ui-legacy`, pas de copie à maintenir.
+ *
+ * Exception : `formatDateWithTime` reste ici, self-contained — sa version
+ * partagée dépend de `ui-legacy/data/globalMethods`, ce qui recréerait un
+ * couplage `ui` → `ui-legacy` qu'on veut justement éviter (cf. `lib/format.ts`,
+ * miroir volontaire de `globalMethods.ts` pour ce genre de cas).
+ */
+
+/** Ex : ('1995-04-24', '18:40') → '24/04/1995 à 18h40' */
+declare const formatDateWithTime: (date: string, time: string | null) => string;
+
+declare const formatAddress: (address: string | null | undefined) => string | null;
+
+declare const formatLocality: (locality: string | null | undefined) => string | null;
+
+declare const formatRegionCode: (postalCode: string | null | undefined) => string;
+
+declare const formatCityFromFormattedAddress: (address: string | null | undefined) => string;
+
+declare const formatPostalCodeFromFormattedAddress: (address: string | null | undefined) => string;
+
+declare const isolateCity: (addr: string | null | undefined) => string;
+
+declare const formatCityWithPostalCode: (city: string | null, postalCode: string | null) => string;
+
+declare const formatPhoneNumber: (phone: string | null | undefined) => string | null;
+
+declare const formatPlate: (plate: string | null | undefined) => string | null;
+
+declare const formatPlateWithoutDashes: (plate: string | null | undefined) => string | null;
+
+declare const capitalizeFirstLetter: (str: string | null | undefined) => string | null;
+
+declare const generateHexColor: (firstName?: string, lastName?: string) => string;
+
+interface AuthorLike {
+    first_name?: string | null;
+    firstname?: string | null;
+    firstName?: string | null;
+    last_name?: string | null;
+    lastname?: string | null;
+    lastName?: string | null;
+    name?: string | null;
+    display_name?: string | null;
+    email?: string | null;
+}
+declare const getInitials: (author: AuthorLike | null | undefined) => string;
+
+declare const getAvatarColor: (key: string) => string;
+
+declare const formatNameWithInitial: (firstname: string | null, lastname: string | null) => string | null;
+
+declare const getFileNameFromUrl: (url: string | null | undefined, fallback?: string) => string;
+
+declare const getFileKind: (url: string | null | undefined) => "image" | "pdf" | "other";
+
+declare const appendQueryParam: (url: string, key: string, value: string) => string;
+
+declare const appendCacheBuster: (url: string) => string;
+
+declare const getMimeCategory: (mimeType: string | null | undefined) => string;
+
+declare const getCleanFileName: (fileName: string | null | undefined) => string;
+
+declare const getFileIconByMimeType: (mimeType: string | null) => string;
+
+declare const formatVin: (vin: string | null | undefined) => string;
+
+declare const formatKM: (value: string | number | null | undefined) => string;
+
+declare const parseAmount: (value: string) => number | null;
+
+/**
+ * Optimise une image :
+ * - Convertit en webp (ou png/jpeg selon le support navigateur)
+ * - Redimensionne pour ne pas dépasser maxDimension
+ * - Compresse vers la taille cible (meilleur effort)
+ *
+ * Renvoie { file, error } — jamais de throw. Si error !== null, l'appelant
+ * peut afficher un message à l'utilisateur. Si l'environnement ne supporte
+ * pas les APIs nécessaires, passthrough silencieux.
+ */
+interface OptimizeImageResult {
+    file: File | null | undefined;
+    error: string | null;
+}
+interface OptimizeImageOptions {
+    maxDimension?: number;
+    targetSizeKB?: number;
+    qualityStart?: number;
+    qualityMin?: number;
+    qualityStep?: number;
+    /** Timeout en ms pour le chargement de l'image (défaut : 15 000) */
+    imageLoadTimeoutMs?: number;
+    /** Timeout en ms pour toBlob (défaut : 15 000) */
+    toBlobTimeoutMs?: number;
+}
+declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
+
+export { Attachment, type AttachmentProps, type AttachmentStatus, Avatar, AvatarBadge, type AvatarBadgeConfig, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerAction, type BannerProps, type BannerToggle, Box, type BoxProps, Bulk, type BulkProps, type BulkSection, Button, type ButtonColor, type ButtonProps, COLOR_TOKENS, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColorKey, ColorPicker, type ColorPickerProps, type ColorToken, DatePicker, type DatePickerMode, type DatePickerProps, type DatePreset, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, EmailInput, type EmailInputProps, EmptyState, type EmptyStateProps, FileUploadZone, type FileUploadZoneProps, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Icon, type IconColor, type IconFamily, type IconProps, type IconSize, type IconTabItem, IconTabs, type IconTabsProps, Image, type ImageProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupProps, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, type ItemMediaProps, type ItemProps, ItemTitle, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, MetricCard, type MetricCardProps, Modal, ModalBody, ModalClose, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, type MultiSelectProps, type OptimizeImageOptions, type OptimizeImageResult, PageContainer, type PageContainerProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PdfPreview, type PdfPreviewProps, PhoneInput, type PhoneInputMeta, type PhoneInputProps, Popover, type PopoverMenuItem, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, type SingleSelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type SpinnerSize, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, TableCell, type TableCellProps, type TableEmptyState, TableFooter, TableFooterCell, type TableFooterCellProps, type TableFooterProps, TableFooterRow, type TableFooterRowProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TableHeaderRow, type TableHeaderRowProps, type TablePagination, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagBubble, type TagBubbleProps, type TagOption, TagSelect, type TagSelectProps, Text, type TextProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, type ToastOptions, type ToastType, Toaster, Tooltip, type TooltipProps, addBusinessDays, appendCacheBuster, appendQueryParam, buttonVariants, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText, useAvatarSize };