design-zystem 1.0.350 → 1.0.352

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/ui/index.d.mts +20 -7
  2. package/dist/ui/index.d.ts +20 -7
  3. package/dist/ui/index.js +81 -9
  4. package/dist/ui/index.mjs +81 -9
  5. package/dist/ui/style.css +1 -1
  6. package/package.json +1 -1
package/dist/ui/index.d.mts CHANGED
@@ -48,8 +48,9 @@ declare const Layout: react.ForwardRefExoticComponent<LayoutProps & react.RefAtt
48
48
  * (DeliverySystem/tailwind.config.ts), jamais un alias sémantique
49
49
  * (primary/secondary/destructive) — cf. CLAUDE.local.md.
50
50
  */
51
- declare const COLOR_TOKENS: readonly ["blue-700", "blue-900", "blue-950", "red-900", "red-500", "green-700", "grey-600", "yellow-500", "yellow-300", "yellow-200", "purple-700"];
51
+ declare const COLOR_TOKENS: readonly ["blue-700", "blue-900", "blue-950", "red-900", "red-500", "green-700", "green-100", "grey-600", "yellow-500", "yellow-300", "yellow-200", "orange-600", "purple-700"];
52
52
  type ColorToken = (typeof COLOR_TOKENS)[number];
53
+ /** Couleur brute hors palette fermée — cf. `Badge`/`Icon`/`Text` `backgroundColor`/`textColor`. */
53
54
  type HexColor = `#${string}`;
54
55
 
55
56
  declare const boxVariants: (props?: ({
@@ -77,7 +78,7 @@ interface DividerProps extends VariantProps<typeof dividerVariants> {
77
78
  declare const Divider: ({ orientation, className, }: DividerProps) => react.JSX.Element;
78
79
 
79
80
  declare const linkVariants: (props?: ({
80
- color?: "inherit" | "white" | "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "purple-700" | null | undefined;
81
+ color?: "inherit" | "white" | "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "green-100" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "orange-600" | "purple-700" | null | undefined;
81
82
  size?: "s" | "xs" | "m" | "l" | null | undefined;
82
83
  } & class_variance_authority_types.ClassProp) | undefined) => string;
83
84
  interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'>, VariantProps<typeof linkVariants> {
@@ -88,7 +89,7 @@ declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttribu
88
89
  declare const textVariants: (props?: ({
89
90
  size?: "s" | "xs" | "m" | "l" | "xxs" | "xl" | "xxl" | null | undefined;
90
91
  weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
91
- color?: "inherit" | "white" | "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "purple-700" | "neutral-800" | "grey-500" | null | undefined;
92
+ color?: "inherit" | "white" | "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "green-100" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "orange-600" | "purple-700" | "neutral-800" | "grey-500" | null | undefined;
92
93
  align?: "center" | "left" | "right" | null | undefined;
93
94
  lineClamp?: 1 | 2 | 3 | "none" | null | undefined;
94
95
  italic?: boolean | null | undefined;
@@ -97,6 +98,8 @@ interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>, VariantP
97
98
  as?: ElementType;
98
99
  /** Pour `as="label"`. */
99
100
  htmlFor?: string;
101
+ /** Contourne la palette fermée `color` avec une couleur brute (ex: statut métier). */
102
+ hexColor?: HexColor;
100
103
  }
101
104
  declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLElement>>;
102
105
 
@@ -119,6 +122,8 @@ interface IconProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'onClick
119
122
  family?: IconFamily;
120
123
  size?: IconSize;
121
124
  color?: IconColor;
125
+ /** Contourne la palette fermée `color` avec une couleur brute (ex: statut métier). */
126
+ hexColor?: HexColor;
122
127
  className?: string;
123
128
  onClick?: () => void;
124
129
  /** Action indisponible : icône grisée, clic inerte. N'a de sens qu'avec `onClick`. */
@@ -275,10 +280,12 @@ declare const THEME_VARIANT_CLASSES: {
275
280
  'red-900': string;
276
281
  'red-500': string;
277
282
  'green-700': string;
283
+ 'green-100': string;
278
284
  'grey-600': string;
279
285
  'yellow-500': string;
280
286
  'yellow-300': string;
281
287
  'yellow-200': string;
288
+ 'orange-600': string;
282
289
  'purple-700': string;
283
290
  };
284
291
  pale: {
@@ -288,10 +295,12 @@ declare const THEME_VARIANT_CLASSES: {
288
295
  'red-900': string;
289
296
  'red-500': string;
290
297
  'green-700': string;
298
+ 'green-100': string;
291
299
  'grey-600': string;
292
300
  'yellow-500': string;
293
301
  'yellow-300': string;
294
302
  'yellow-200': string;
303
+ 'orange-600': string;
295
304
  'purple-700': string;
296
305
  };
297
306
  outline: {
@@ -301,10 +310,12 @@ declare const THEME_VARIANT_CLASSES: {
301
310
  'red-900': string;
302
311
  'red-500': string;
303
312
  'green-700': string;
313
+ 'green-100': string;
304
314
  'grey-600': string;
305
315
  'yellow-500': string;
306
316
  'yellow-300': string;
307
317
  'yellow-200': string;
318
+ 'orange-600': string;
308
319
  'purple-700': string;
309
320
  };
310
321
  };
@@ -410,7 +421,7 @@ interface EmailInputProps {
410
421
  declare const EmailInput: ({ label, value, onChange, onInvalidMessage, placeholder, disabled, required, width, className, }: EmailInputProps) => react.JSX.Element;
411
422
 
412
423
  declare const checkboxVariants: (props?: ({
413
- color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "purple-700" | null | undefined;
424
+ color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "green-100" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "orange-600" | "purple-700" | null | undefined;
414
425
  size?: "s" | "m" | "l" | null | undefined;
415
426
  } & class_variance_authority_types.ClassProp) | undefined) => string;
416
427
  interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixCheckbox.Root>, 'color' | 'onCheckedChange' | 'onChange'>, VariantProps<typeof checkboxVariants> {
@@ -421,7 +432,7 @@ declare const Checkbox: ({ label, color, size, onChange, id, className, ...props
421
432
 
422
433
  declare const trackVariants$1: (props?: ({
423
434
  size?: "s" | "m" | null | undefined;
424
- color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "purple-700" | null | undefined;
435
+ color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "green-100" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "orange-600" | "purple-700" | null | undefined;
425
436
  } & class_variance_authority_types.ClassProp) | undefined) => string;
426
437
  interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixSwitch.Root>, 'color' | 'onCheckedChange' | 'onChange'>, VariantProps<typeof trackVariants$1> {
427
438
  onChange?: (checked: boolean) => void;
@@ -444,6 +455,8 @@ interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>, Var
444
455
  pointer?: boolean;
445
456
  pulse?: boolean;
446
457
  fullWidth?: boolean;
458
+ /** Tronque le contenu avec ellipsis au-delà de N caractères (largeur en `ch`). */
459
+ maxChars?: number;
447
460
  /** Rend l'enfant à la place du `span` (un `button` ou un `a` pour un badge cliquable) en lui transmettant classes et props. */
448
461
  asChild?: boolean;
449
462
  }
@@ -698,7 +711,7 @@ interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
698
711
  declare const AvatarGroup: ({ size, max, className, children, ...props }: AvatarGroupProps) => react.JSX.Element;
699
712
 
700
713
  declare const radioVariants: (props?: ({
701
- color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "purple-700" | null | undefined;
714
+ color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "green-100" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "orange-600" | "purple-700" | null | undefined;
702
715
  } & class_variance_authority_types.ClassProp) | undefined) => string;
703
716
  interface RadioOption {
704
717
  value: string;
@@ -962,7 +975,7 @@ declare const EmptyState: ({ icon, title, description, actionLabel, onAction, cl
962
975
  * Pas de bordure : le fond teinté suffit à détacher la bannière de la page.
963
976
  */
964
977
  declare const bannerVariants: (props?: ({
965
- theme?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "purple-700" | null | undefined;
978
+ theme?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "green-100" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "orange-600" | "purple-700" | null | undefined;
966
979
  } & class_variance_authority_types.ClassProp) | undefined) => string;
967
980
  interface BannerAction {
968
981
  label: string;
package/dist/ui/index.d.ts CHANGED
@@ -48,8 +48,9 @@ declare const Layout: react.ForwardRefExoticComponent<LayoutProps & react.RefAtt
48
48
  * (DeliverySystem/tailwind.config.ts), jamais un alias sémantique
49
49
  * (primary/secondary/destructive) — cf. CLAUDE.local.md.
50
50
  */
51
- declare const COLOR_TOKENS: readonly ["blue-700", "blue-900", "blue-950", "red-900", "red-500", "green-700", "grey-600", "yellow-500", "yellow-300", "yellow-200", "purple-700"];
51
+ declare const COLOR_TOKENS: readonly ["blue-700", "blue-900", "blue-950", "red-900", "red-500", "green-700", "green-100", "grey-600", "yellow-500", "yellow-300", "yellow-200", "orange-600", "purple-700"];
52
52
  type ColorToken = (typeof COLOR_TOKENS)[number];
53
+ /** Couleur brute hors palette fermée — cf. `Badge`/`Icon`/`Text` `backgroundColor`/`textColor`. */
53
54
  type HexColor = `#${string}`;
54
55
 
55
56
  declare const boxVariants: (props?: ({
@@ -77,7 +78,7 @@ interface DividerProps extends VariantProps<typeof dividerVariants> {
77
78
  declare const Divider: ({ orientation, className, }: DividerProps) => react.JSX.Element;
78
79
 
79
80
  declare const linkVariants: (props?: ({
80
- color?: "inherit" | "white" | "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "purple-700" | null | undefined;
81
+ color?: "inherit" | "white" | "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "green-100" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "orange-600" | "purple-700" | null | undefined;
81
82
  size?: "s" | "xs" | "m" | "l" | null | undefined;
82
83
  } & class_variance_authority_types.ClassProp) | undefined) => string;
83
84
  interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'>, VariantProps<typeof linkVariants> {
@@ -88,7 +89,7 @@ declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttribu
88
89
  declare const textVariants: (props?: ({
89
90
  size?: "s" | "xs" | "m" | "l" | "xxs" | "xl" | "xxl" | null | undefined;
90
91
  weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
91
- color?: "inherit" | "white" | "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "purple-700" | "neutral-800" | "grey-500" | null | undefined;
92
+ color?: "inherit" | "white" | "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "green-100" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "orange-600" | "purple-700" | "neutral-800" | "grey-500" | null | undefined;
92
93
  align?: "center" | "left" | "right" | null | undefined;
93
94
  lineClamp?: 1 | 2 | 3 | "none" | null | undefined;
94
95
  italic?: boolean | null | undefined;
@@ -97,6 +98,8 @@ interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>, VariantP
97
98
  as?: ElementType;
98
99
  /** Pour `as="label"`. */
99
100
  htmlFor?: string;
101
+ /** Contourne la palette fermée `color` avec une couleur brute (ex: statut métier). */
102
+ hexColor?: HexColor;
100
103
  }
101
104
  declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLElement>>;
102
105
 
@@ -119,6 +122,8 @@ interface IconProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'onClick
119
122
  family?: IconFamily;
120
123
  size?: IconSize;
121
124
  color?: IconColor;
125
+ /** Contourne la palette fermée `color` avec une couleur brute (ex: statut métier). */
126
+ hexColor?: HexColor;
122
127
  className?: string;
123
128
  onClick?: () => void;
124
129
  /** Action indisponible : icône grisée, clic inerte. N'a de sens qu'avec `onClick`. */
@@ -275,10 +280,12 @@ declare const THEME_VARIANT_CLASSES: {
275
280
  'red-900': string;
276
281
  'red-500': string;
277
282
  'green-700': string;
283
+ 'green-100': string;
278
284
  'grey-600': string;
279
285
  'yellow-500': string;
280
286
  'yellow-300': string;
281
287
  'yellow-200': string;
288
+ 'orange-600': string;
282
289
  'purple-700': string;
283
290
  };
284
291
  pale: {
@@ -288,10 +295,12 @@ declare const THEME_VARIANT_CLASSES: {
288
295
  'red-900': string;
289
296
  'red-500': string;
290
297
  'green-700': string;
298
+ 'green-100': string;
291
299
  'grey-600': string;
292
300
  'yellow-500': string;
293
301
  'yellow-300': string;
294
302
  'yellow-200': string;
303
+ 'orange-600': string;
295
304
  'purple-700': string;
296
305
  };
297
306
  outline: {
@@ -301,10 +310,12 @@ declare const THEME_VARIANT_CLASSES: {
301
310
  'red-900': string;
302
311
  'red-500': string;
303
312
  'green-700': string;
313
+ 'green-100': string;
304
314
  'grey-600': string;
305
315
  'yellow-500': string;
306
316
  'yellow-300': string;
307
317
  'yellow-200': string;
318
+ 'orange-600': string;
308
319
  'purple-700': string;
309
320
  };
310
321
  };
@@ -410,7 +421,7 @@ interface EmailInputProps {
410
421
  declare const EmailInput: ({ label, value, onChange, onInvalidMessage, placeholder, disabled, required, width, className, }: EmailInputProps) => react.JSX.Element;
411
422
 
412
423
  declare const checkboxVariants: (props?: ({
413
- color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "purple-700" | null | undefined;
424
+ color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "green-100" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "orange-600" | "purple-700" | null | undefined;
414
425
  size?: "s" | "m" | "l" | null | undefined;
415
426
  } & class_variance_authority_types.ClassProp) | undefined) => string;
416
427
  interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixCheckbox.Root>, 'color' | 'onCheckedChange' | 'onChange'>, VariantProps<typeof checkboxVariants> {
@@ -421,7 +432,7 @@ declare const Checkbox: ({ label, color, size, onChange, id, className, ...props
421
432
 
422
433
  declare const trackVariants$1: (props?: ({
423
434
  size?: "s" | "m" | null | undefined;
424
- color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "purple-700" | null | undefined;
435
+ color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "green-100" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "orange-600" | "purple-700" | null | undefined;
425
436
  } & class_variance_authority_types.ClassProp) | undefined) => string;
426
437
  interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixSwitch.Root>, 'color' | 'onCheckedChange' | 'onChange'>, VariantProps<typeof trackVariants$1> {
427
438
  onChange?: (checked: boolean) => void;
@@ -444,6 +455,8 @@ interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>, Var
444
455
  pointer?: boolean;
445
456
  pulse?: boolean;
446
457
  fullWidth?: boolean;
458
+ /** Tronque le contenu avec ellipsis au-delà de N caractères (largeur en `ch`). */
459
+ maxChars?: number;
447
460
  /** Rend l'enfant à la place du `span` (un `button` ou un `a` pour un badge cliquable) en lui transmettant classes et props. */
448
461
  asChild?: boolean;
449
462
  }
@@ -698,7 +711,7 @@ interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
698
711
  declare const AvatarGroup: ({ size, max, className, children, ...props }: AvatarGroupProps) => react.JSX.Element;
699
712
 
700
713
  declare const radioVariants: (props?: ({
701
- color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "purple-700" | null | undefined;
714
+ color?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "green-100" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "orange-600" | "purple-700" | null | undefined;
702
715
  } & class_variance_authority_types.ClassProp) | undefined) => string;
703
716
  interface RadioOption {
704
717
  value: string;
@@ -962,7 +975,7 @@ declare const EmptyState: ({ icon, title, description, actionLabel, onAction, cl
962
975
  * Pas de bordure : le fond teinté suffit à détacher la bannière de la page.
963
976
  */
964
977
  declare const bannerVariants: (props?: ({
965
- theme?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "purple-700" | null | undefined;
978
+ theme?: "blue-700" | "blue-900" | "blue-950" | "red-900" | "red-500" | "green-700" | "green-100" | "grey-600" | "yellow-500" | "yellow-300" | "yellow-200" | "orange-600" | "purple-700" | null | undefined;
966
979
  } & class_variance_authority_types.ClassProp) | undefined) => string;
967
980
  interface BannerAction {
968
981
  label: string;