design-zystem 1.0.248 → 1.0.250

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 (5) hide show
  1. package/dist/index.d.mts +4 -1
  2. package/dist/index.d.ts +4 -1
  3. package/dist/index.js +10 -2
  4. package/dist/index.mjs +10 -2
  5. package/package.json +2 -1
package/dist/index.d.mts CHANGED
@@ -31,6 +31,7 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
31
31
  alignSelf?: string;
32
32
  justifyContent?: string;
33
33
  borderRadius?: string;
34
+ border?: string;
34
35
  style?: CSSProperties;
35
36
  }
36
37
  declare const Box: ({ children, hasShadow, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
@@ -820,13 +821,15 @@ interface MetricCardProps {
820
821
  title: string;
821
822
  value: string | number;
822
823
  valueColor?: string;
824
+ /** Muted secondary text shown right after the value (e.g. "17 pénalités"). */
825
+ subtitle?: string;
823
826
  iconBackgroundColor?: string;
824
827
  iconColor?: string;
825
828
  contentLayout?: 'col' | 'row';
826
829
  onClick?: () => void;
827
830
  checked?: boolean;
828
831
  }
829
- declare const MetricCard: ({ icon, title, value, valueColor, iconBackgroundColor, iconColor, contentLayout, onClick, checked, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
832
+ declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, onClick, checked, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
830
833
 
831
834
  interface TooltipProps {
832
835
  children?: ReactNode;
package/dist/index.d.ts CHANGED
@@ -31,6 +31,7 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
31
31
  alignSelf?: string;
32
32
  justifyContent?: string;
33
33
  borderRadius?: string;
34
+ border?: string;
34
35
  style?: CSSProperties;
35
36
  }
36
37
  declare const Box: ({ children, hasShadow, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
@@ -820,13 +821,15 @@ interface MetricCardProps {
820
821
  title: string;
821
822
  value: string | number;
822
823
  valueColor?: string;
824
+ /** Muted secondary text shown right after the value (e.g. "17 pénalités"). */
825
+ subtitle?: string;
823
826
  iconBackgroundColor?: string;
824
827
  iconColor?: string;
825
828
  contentLayout?: 'col' | 'row';
826
829
  onClick?: () => void;
827
830
  checked?: boolean;
828
831
  }
829
- declare const MetricCard: ({ icon, title, value, valueColor, iconBackgroundColor, iconColor, contentLayout, onClick, checked, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
832
+ declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, onClick, checked, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
830
833
 
831
834
  interface TooltipProps {
832
835
  children?: ReactNode;
package/dist/index.js CHANGED
@@ -328,12 +328,16 @@ var shouldForwardProp2 = (prop) => ![
328
328
  "isScrollable",
329
329
  "hasShadow",
330
330
  "borderRadius",
331
+ "border",
331
332
  "height"
332
333
  ].includes(prop);
333
334
  var StyledBox = import_styled_components2.default.div.withConfig({ shouldForwardProp: shouldForwardProp2 })`
334
335
  position: relative;
335
336
  display: flex;
336
- border: 1px solid ${colors.grey_300};
337
+ border: ${(props) => {
338
+ var _a;
339
+ return (_a = props.border) != null ? _a : `1px solid ${colors.grey_300}`;
340
+ }};
337
341
 
338
342
  border-radius: ${(props) => props.borderRadius || "8px"};
339
343
 
@@ -4633,6 +4637,7 @@ var MetricCard = ({
4633
4637
  title,
4634
4638
  value,
4635
4639
  valueColor,
4640
+ subtitle,
4636
4641
  iconBackgroundColor = "blue_50",
4637
4642
  iconColor = "blue_950",
4638
4643
  contentLayout = "col",
@@ -4670,7 +4675,10 @@ var MetricCard = ({
4670
4675
  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "s", variant: "grey_600", children: title })
4671
4676
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Col, { gap: "4", children: [
4672
4677
  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "s", variant: "grey_600", children: title }),
4673
- /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value })
4678
+ /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Row, { gap: "6", alignItems: "baseline", children: [
4679
+ /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
4680
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "xs", variant: "grey_600", children: subtitle })
4681
+ ] })
4674
4682
  ] })
4675
4683
  ] })
4676
4684
  }
package/dist/index.mjs CHANGED
@@ -231,12 +231,16 @@ var shouldForwardProp2 = (prop) => ![
231
231
  "isScrollable",
232
232
  "hasShadow",
233
233
  "borderRadius",
234
+ "border",
234
235
  "height"
235
236
  ].includes(prop);
236
237
  var StyledBox = styled2.div.withConfig({ shouldForwardProp: shouldForwardProp2 })`
237
238
  position: relative;
238
239
  display: flex;
239
- border: 1px solid ${colors.grey_300};
240
+ border: ${(props) => {
241
+ var _a;
242
+ return (_a = props.border) != null ? _a : `1px solid ${colors.grey_300}`;
243
+ }};
240
244
 
241
245
  border-radius: ${(props) => props.borderRadius || "8px"};
242
246
 
@@ -4556,6 +4560,7 @@ var MetricCard = ({
4556
4560
  title,
4557
4561
  value,
4558
4562
  valueColor,
4563
+ subtitle,
4559
4564
  iconBackgroundColor = "blue_50",
4560
4565
  iconColor = "blue_950",
4561
4566
  contentLayout = "col",
@@ -4593,7 +4598,10 @@ var MetricCard = ({
4593
4598
  /* @__PURE__ */ jsx50(Text, { size: "s", variant: "grey_600", children: title })
4594
4599
  ] }) : /* @__PURE__ */ jsxs25(Col, { gap: "4", children: [
4595
4600
  /* @__PURE__ */ jsx50(Text, { size: "s", variant: "grey_600", children: title }),
4596
- /* @__PURE__ */ jsx50(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value })
4601
+ /* @__PURE__ */ jsxs25(Row, { gap: "6", alignItems: "baseline", children: [
4602
+ /* @__PURE__ */ jsx50(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
4603
+ subtitle && /* @__PURE__ */ jsx50(Text, { size: "xs", variant: "grey_600", children: subtitle })
4604
+ ] })
4597
4605
  ] })
4598
4606
  ] })
4599
4607
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "design-zystem",
3
- "version": "1.0.248",
3
+ "version": "1.0.250",
4
4
  "description": "A React design system of importable components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -32,6 +32,7 @@
32
32
  "@storybook/react-vite": "^10.2.17",
33
33
  "@testing-library/jest-dom": "^6.9.1",
34
34
  "@testing-library/react": "^16.3.2",
35
+ "@types/node": "^25.9.3",
35
36
  "@types/react-dom": "^18.3.1",
36
37
  "@typescript-eslint/parser": "^8.56.1",
37
38
  "@vitest/browser-playwright": "^4.0.18",