design-zystem 1.0.280 → 1.0.282

package/dist/index.d.mts

@@ -887,8 +887,10 @@ declare const Popover: ({ items, children, anchorRef, offsetY, align, fullWidth,
 
 interface MetricCardProps {
     icon: string;
-    title: string;
-    value: string | number;
+    /** Optionnel quand children est fourni. */
+    title?: string;
+    /** Optionnel quand children est fourni. */
+    value?: string | number;
     valueColor?: string;
     /** Muted secondary text shown right after the value (e.g. "17 pénalités"). */
     subtitle?: string;
@@ -897,8 +899,10 @@ interface MetricCardProps {
     contentLayout?: 'col' | 'row';
     onClick?: () => void;
     checked?: boolean;
+    /** Contenu libre à droite de l'icône. Remplace title/value quand fourni. */
+    children?: ReactNode;
 }
-declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, onClick, checked, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
+declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, onClick, checked, children, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
 
 interface CardProps {
     children?: ReactNode;

package/dist/index.d.ts

@@ -887,8 +887,10 @@ declare const Popover: ({ items, children, anchorRef, offsetY, align, fullWidth,
 
 interface MetricCardProps {
     icon: string;
-    title: string;
-    value: string | number;
+    /** Optionnel quand children est fourni. */
+    title?: string;
+    /** Optionnel quand children est fourni. */
+    value?: string | number;
     valueColor?: string;
     /** Muted secondary text shown right after the value (e.g. "17 pénalités"). */
     subtitle?: string;
@@ -897,8 +899,10 @@ interface MetricCardProps {
     contentLayout?: 'col' | 'row';
     onClick?: () => void;
     checked?: boolean;
+    /** Contenu libre à droite de l'icône. Remplace title/value quand fourni. */
+    children?: ReactNode;
 }
-declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, onClick, checked, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
+declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, onClick, checked, children, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
 
 interface CardProps {
     children?: ReactNode;

package/dist/index.js

@@ -687,6 +687,8 @@ var Icon_default = Icon;
 // src/Components/Divider/Divider.tsx
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var isColorToken = (value) => Object.prototype.hasOwnProperty.call(colors, value);
+var resolveColor = (value) => isColorToken(value) ? colors[value] : value;
 var StyledDivider = import_styled_components7.default.div`
   background-color: ${({ $color }) => $color || "#DCDCDC"};
   ${({ $orientation, $thickness }) => $orientation === "vertical" ? `
@@ -719,7 +721,7 @@ var Divider = (_a) => {
     StyledDivider,
     __spreadValues({
       $orientation: orientation,
-      $color: color,
+      $color: resolveColor(color),
       $thickness: thickness,
       $ySpacing: ySpacing,
       className,
@@ -2141,7 +2143,7 @@ var Initials = import_styled_components18.default.span`
   line-height: 1;
   user-select: none;
 `;
-var resolveColor = (token, fallback) => {
+var resolveColor2 = (token, fallback) => {
   if (!token) return fallback;
   return colors[token] || token;
 };
@@ -2157,8 +2159,8 @@ var Avatar = ({
 }) => {
   var _a, _b, _c;
   const [hasImageError, setHasImageError] = (0, import_react9.useState)(false);
-  const resolvedBackground = resolveColor(backgroundColor, colors.grey_300);
-  const resolvedText = resolveColor(textColor, colors.dark);
+  const resolvedBackground = resolveColor2(backgroundColor, colors.grey_300);
+  const resolvedText = resolveColor2(textColor, colors.dark);
   const initials = getInitials(name);
   const sizePx = `${size}px`;
   const borderRadius = shape === "circle" ? "50%" : "4px";
@@ -5135,7 +5137,8 @@ var MetricCard = ({
   iconColor = "blue_950",
   contentLayout = "col",
   onClick,
-  checked = false
+  checked = false,
+  children
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     Box,
@@ -5163,7 +5166,7 @@ var MetricCard = ({
             children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { name: icon, size: "m", color: iconColor, family: "regular" })
           }
         ),
-        contentLayout === "row" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Row, { gap: "6", alignItems: "center", children: [
+        children ? children : contentLayout === "row" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Row, { gap: "6", alignItems: "center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text, { size: "s", variant: "grey_600", children: title })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Col, { gap: "4", children: [

package/dist/index.mjs

@@ -548,6 +548,8 @@ var Icon_default = Icon;
 // src/Components/Divider/Divider.tsx
 import styled7 from "styled-components";
 import { jsx as jsx8 } from "react/jsx-runtime";
+var isColorToken = (value) => Object.prototype.hasOwnProperty.call(colors, value);
+var resolveColor = (value) => isColorToken(value) ? colors[value] : value;
 var StyledDivider = styled7.div`
   background-color: ${({ $color }) => $color || "#DCDCDC"};
   ${({ $orientation, $thickness }) => $orientation === "vertical" ? `
@@ -580,7 +582,7 @@ var Divider = (_a) => {
     StyledDivider,
     __spreadValues({
       $orientation: orientation,
-      $color: color,
+      $color: resolveColor(color),
       $thickness: thickness,
       $ySpacing: ySpacing,
       className,
@@ -2002,7 +2004,7 @@ var Initials = styled18.span`
   line-height: 1;
   user-select: none;
 `;
-var resolveColor = (token, fallback) => {
+var resolveColor2 = (token, fallback) => {
   if (!token) return fallback;
   return colors[token] || token;
 };
@@ -2018,8 +2020,8 @@ var Avatar = ({
 }) => {
   var _a, _b, _c;
   const [hasImageError, setHasImageError] = useState5(false);
-  const resolvedBackground = resolveColor(backgroundColor, colors.grey_300);
-  const resolvedText = resolveColor(textColor, colors.dark);
+  const resolvedBackground = resolveColor2(backgroundColor, colors.grey_300);
+  const resolvedText = resolveColor2(textColor, colors.dark);
   const initials = getInitials(name);
   const sizePx = `${size}px`;
   const borderRadius = shape === "circle" ? "50%" : "4px";
@@ -5016,7 +5018,8 @@ var MetricCard = ({
   iconColor = "blue_950",
   contentLayout = "col",
   onClick,
-  checked = false
+  checked = false,
+  children
 }) => {
   return /* @__PURE__ */ jsx52(
     Box,
@@ -5044,7 +5047,7 @@ var MetricCard = ({
             children: /* @__PURE__ */ jsx52(Icon, { name: icon, size: "m", color: iconColor, family: "regular" })
           }
         ),
-        contentLayout === "row" ? /* @__PURE__ */ jsxs27(Row, { gap: "6", alignItems: "center", children: [
+        children ? children : contentLayout === "row" ? /* @__PURE__ */ jsxs27(Row, { gap: "6", alignItems: "center", children: [
           /* @__PURE__ */ jsx52(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
           /* @__PURE__ */ jsx52(Text, { size: "s", variant: "grey_600", children: title })
         ] }) : /* @__PURE__ */ jsxs27(Col, { gap: "4", children: [

package/package.json

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