design-zystem 1.0.351 → 1.0.352

package/dist/ui/index.d.mts

@@ -50,6 +50,7 @@ declare const Layout: react.ForwardRefExoticComponent<LayoutProps & react.RefAtt
  */
 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"];
 type ColorToken = (typeof COLOR_TOKENS)[number];
+/** Couleur brute hors palette fermée — cf. `Badge`/`Icon`/`Text` `backgroundColor`/`textColor`. */
 type HexColor = `#${string}`;
 
 declare const boxVariants: (props?: ({
@@ -97,6 +98,8 @@ interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>, VariantP
     as?: ElementType;
     /** Pour `as="label"`. */
     htmlFor?: string;
+    /** Contourne la palette fermée `color` avec une couleur brute (ex: statut métier). */
+    hexColor?: HexColor;
 }
 declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLElement>>;
 
@@ -119,6 +122,8 @@ interface IconProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'onClick
     family?: IconFamily;
     size?: IconSize;
     color?: IconColor;
+    /** Contourne la palette fermée `color` avec une couleur brute (ex: statut métier). */
+    hexColor?: HexColor;
     className?: string;
     onClick?: () => void;
     /** Action indisponible : icône grisée, clic inerte. N'a de sens qu'avec `onClick`. */
@@ -450,6 +455,8 @@ interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>, Var
     pointer?: boolean;
     pulse?: boolean;
     fullWidth?: boolean;
+    /** Tronque le contenu avec ellipsis au-delà de N caractères (largeur en `ch`). */
+    maxChars?: number;
     /** Rend l'enfant à la place du `span` (un `button` ou un `a` pour un badge cliquable) en lui transmettant classes et props. */
     asChild?: boolean;
 }

package/dist/ui/index.d.ts

@@ -50,6 +50,7 @@ declare const Layout: react.ForwardRefExoticComponent<LayoutProps & react.RefAtt
  */
 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"];
 type ColorToken = (typeof COLOR_TOKENS)[number];
+/** Couleur brute hors palette fermée — cf. `Badge`/`Icon`/`Text` `backgroundColor`/`textColor`. */
 type HexColor = `#${string}`;
 
 declare const boxVariants: (props?: ({
@@ -97,6 +98,8 @@ interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>, VariantP
     as?: ElementType;
     /** Pour `as="label"`. */
     htmlFor?: string;
+    /** Contourne la palette fermée `color` avec une couleur brute (ex: statut métier). */
+    hexColor?: HexColor;
 }
 declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLElement>>;
 
@@ -119,6 +122,8 @@ interface IconProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'onClick
     family?: IconFamily;
     size?: IconSize;
     color?: IconColor;
+    /** Contourne la palette fermée `color` avec une couleur brute (ex: statut métier). */
+    hexColor?: HexColor;
     className?: string;
     onClick?: () => void;
     /** Action indisponible : icône grisée, clic inerte. N'a de sens qu'avec `onClick`. */
@@ -450,6 +455,8 @@ interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>, Var
     pointer?: boolean;
     pulse?: boolean;
     fullWidth?: boolean;
+    /** Tronque le contenu avec ellipsis au-delà de N caractères (largeur en `ch`). */
+    maxChars?: number;
     /** Rend l'enfant à la place du `span` (un `button` ou un `a` pour un badge cliquable) en lui transmettant classes et props. */
     asChild?: boolean;
 }

package/dist/ui/index.js

@@ -701,7 +701,9 @@ var Text = (0, import_react4.forwardRef)(
       align,
       lineClamp,
       italic,
-      className
+      className,
+      hexColor,
+      style
     } = _b, props = __objRest(_b, [
       "as",
       "size",
@@ -710,16 +712,26 @@ var Text = (0, import_react4.forwardRef)(
       "align",
       "lineClamp",
       "italic",
-      "className"
+      "className",
+      "hexColor",
+      "style"
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Component,
       __spreadValues({
         ref,
         className: cn(
-          textVariants({ size, weight, color, align, lineClamp, italic }),
+          textVariants({
+            size,
+            weight,
+            color: hexColor ? void 0 : color,
+            align,
+            lineClamp,
+            italic
+          }),
           className
-        )
+        ),
+        style: hexColor ? __spreadValues({ color: hexColor }, style) : style
       }, props)
     );
   }
@@ -825,6 +837,7 @@ var Icon = (0, import_react7.forwardRef)(
       family = "regular",
       size = "m",
       color,
+      hexColor,
       className,
       onClick,
       disabled = false
@@ -833,14 +846,16 @@ var Icon = (0, import_react7.forwardRef)(
       "family",
       "size",
       "color",
+      "hexColor",
       "className",
       "onClick",
       "disabled"
     ]);
     const glyphClassName = cn(
-      disabled ? "text-grey-500" : color ? COLOR_CLASS[color] : "text-neutral-800",
+      disabled ? "text-grey-500" : hexColor ? void 0 : color ? COLOR_CLASS[color] : "text-neutral-800",
       className
     );
+    const glyphStyle = !disabled && hexColor ? { color: hexColor } : void 0;
     if (!onClick && !disabled) {
       return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         FaIcon,
@@ -849,7 +864,8 @@ var Icon = (0, import_react7.forwardRef)(
           name,
           family,
           size: SIZE_PX[size],
-          className: glyphClassName
+          className: glyphClassName,
+          style: glyphStyle
         }, rest)
       );
     }
@@ -871,7 +887,8 @@ var Icon = (0, import_react7.forwardRef)(
             name,
             family,
             size: SIZE_PX[size],
-            className: glyphClassName
+            className: glyphClassName,
+            style: glyphStyle
           }
         )
       })
@@ -1869,7 +1886,7 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority10 = require("class-variance-authority");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority10.cva)(
-  "inline-flex w-fit items-center overflow-hidden whitespace-nowrap font-semibold",
+  "inline-flex w-fit items-center overflow-hidden text-ellipsis whitespace-nowrap font-semibold",
   {
     variants: {
       size: {
@@ -1899,6 +1916,7 @@ var Badge = (0, import_react18.forwardRef)(
       pointer = false,
       pulse = false,
       fullWidth = false,
+      maxChars,
       asChild = false,
       className,
       style
@@ -1912,6 +1930,7 @@ var Badge = (0, import_react18.forwardRef)(
       "pointer",
       "pulse",
       "fullWidth",
+      "maxChars",
       "asChild",
       "className",
       "style"
@@ -1929,7 +1948,10 @@ var Badge = (0, import_react18.forwardRef)(
           pulse && "animate-[badge-pulse_2s_ease-in-out_infinite] motion-reduce:animate-none",
           className
         ),
-        style: __spreadValues({ backgroundColor, color: textColor }, style)
+        style: __spreadValues(__spreadValues({
+          backgroundColor,
+          color: textColor
+        }, maxChars ? { maxWidth: `${maxChars}ch` } : {}), style)
       }, props)
     );
   }

package/dist/ui/index.mjs

@@ -512,7 +512,9 @@ var Text = forwardRef4(
       align,
       lineClamp,
       italic,
-      className
+      className,
+      hexColor,
+      style
     } = _b, props = __objRest(_b, [
       "as",
       "size",
@@ -521,16 +523,26 @@ var Text = forwardRef4(
       "align",
       "lineClamp",
       "italic",
-      "className"
+      "className",
+      "hexColor",
+      "style"
     ]);
     return /* @__PURE__ */ jsx5(
       Component,
       __spreadValues({
         ref,
         className: cn(
-          textVariants({ size, weight, color, align, lineClamp, italic }),
+          textVariants({
+            size,
+            weight,
+            color: hexColor ? void 0 : color,
+            align,
+            lineClamp,
+            italic
+          }),
           className
-        )
+        ),
+        style: hexColor ? __spreadValues({ color: hexColor }, style) : style
       }, props)
     );
   }
@@ -636,6 +648,7 @@ var Icon = forwardRef7(
       family = "regular",
       size = "m",
       color,
+      hexColor,
       className,
       onClick,
       disabled = false
@@ -644,14 +657,16 @@ var Icon = forwardRef7(
       "family",
       "size",
       "color",
+      "hexColor",
       "className",
       "onClick",
       "disabled"
     ]);
     const glyphClassName = cn(
-      disabled ? "text-grey-500" : color ? COLOR_CLASS[color] : "text-neutral-800",
+      disabled ? "text-grey-500" : hexColor ? void 0 : color ? COLOR_CLASS[color] : "text-neutral-800",
       className
     );
+    const glyphStyle = !disabled && hexColor ? { color: hexColor } : void 0;
     if (!onClick && !disabled) {
       return /* @__PURE__ */ jsx8(
         FaIcon,
@@ -660,7 +675,8 @@ var Icon = forwardRef7(
           name,
           family,
           size: SIZE_PX[size],
-          className: glyphClassName
+          className: glyphClassName,
+          style: glyphStyle
         }, rest)
       );
     }
@@ -682,7 +698,8 @@ var Icon = forwardRef7(
             name,
             family,
             size: SIZE_PX[size],
-            className: glyphClassName
+            className: glyphClassName,
+            style: glyphStyle
           }
         )
       })
@@ -1686,7 +1703,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva as cva10 } from "class-variance-authority";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var badgeVariants = cva10(
-  "inline-flex w-fit items-center overflow-hidden whitespace-nowrap font-semibold",
+  "inline-flex w-fit items-center overflow-hidden text-ellipsis whitespace-nowrap font-semibold",
   {
     variants: {
       size: {
@@ -1716,6 +1733,7 @@ var Badge = forwardRef16(
       pointer = false,
       pulse = false,
       fullWidth = false,
+      maxChars,
       asChild = false,
       className,
       style
@@ -1729,6 +1747,7 @@ var Badge = forwardRef16(
       "pointer",
       "pulse",
       "fullWidth",
+      "maxChars",
       "asChild",
       "className",
       "style"
@@ -1746,7 +1765,10 @@ var Badge = forwardRef16(
           pulse && "animate-[badge-pulse_2s_ease-in-out_infinite] motion-reduce:animate-none",
           className
         ),
-        style: __spreadValues({ backgroundColor, color: textColor }, style)
+        style: __spreadValues(__spreadValues({
+          backgroundColor,
+          color: textColor
+        }, maxChars ? { maxWidth: `${maxChars}ch` } : {}), style)
       }, props)
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.351",
+  "version": "1.0.352",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",