design-zystem 1.0.249 → 1.0.251

package/dist/index.d.mts

@@ -742,6 +742,8 @@ interface TabItem {
     id: string | number;
     label: string;
     disabled?: boolean;
+    dot?: boolean;
+    dotColor?: string;
 }
 type TabsVariant = 'line' | 'pills';
 interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -821,13 +823,15 @@ interface MetricCardProps {
     title: string;
     value: string | number;
     valueColor?: string;
+    /** Muted secondary text shown right after the value (e.g. "17 pénalités"). */
+    subtitle?: string;
     iconBackgroundColor?: string;
     iconColor?: string;
     contentLayout?: 'col' | 'row';
     onClick?: () => void;
     checked?: boolean;
 }
-declare const MetricCard: ({ icon, title, value, valueColor, iconBackgroundColor, iconColor, contentLayout, onClick, checked, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
+declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, onClick, checked, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
 
 interface TooltipProps {
     children?: ReactNode;

package/dist/index.d.ts

@@ -742,6 +742,8 @@ interface TabItem {
     id: string | number;
     label: string;
     disabled?: boolean;
+    dot?: boolean;
+    dotColor?: string;
 }
 type TabsVariant = 'line' | 'pills';
 interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -821,13 +823,15 @@ interface MetricCardProps {
     title: string;
     value: string | number;
     valueColor?: string;
+    /** Muted secondary text shown right after the value (e.g. "17 pénalités"). */
+    subtitle?: string;
     iconBackgroundColor?: string;
     iconColor?: string;
     contentLayout?: 'col' | 'row';
     onClick?: () => void;
     checked?: boolean;
 }
-declare const MetricCard: ({ icon, title, value, valueColor, iconBackgroundColor, iconColor, contentLayout, onClick, checked, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
+declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, onClick, checked, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
 
 interface TooltipProps {
     children?: ReactNode;

package/dist/index.js

@@ -3890,6 +3890,10 @@ var TabButton = import_styled_components38.default.button.withConfig({
   shouldForwardProp: shouldForwardTab
 })`
   appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
   border: 0;
   background: ${(p) => {
   if (p.$variant !== "pills") return "transparent";
@@ -3931,6 +3935,14 @@ var TabButton = import_styled_components38.default.button.withConfig({
     opacity: 0.6;
   }
 `;
+var TabDot = import_styled_components38.default.span`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: none;
+  background: ${(p) => p.$color || colors.red_950};
+`;
 var Tab = (_a) => {
   var _b = _a, {
     id,
@@ -4021,7 +4033,7 @@ var Tabs = (_a) => {
   const isPillsFullWidth = variant === "pills" && align === "start";
   const rendered = (0, import_react20.useMemo)(() => {
     if (items && items.length) {
-      return items.map((it) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      return items.map((it) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         Tab,
         {
           id: it.id,
@@ -4031,7 +4043,10 @@ var Tabs = (_a) => {
           fullWidth: isPillsFullWidth,
           onClick: () => handleSelect(it.id),
           innerRef: setTabRef(it.id),
-          children: it.label
+          children: [
+            it.label,
+            it.dot && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabDot, { $color: it.dotColor })
+          ]
         },
         it.id
       ));
@@ -4637,6 +4652,7 @@ var MetricCard = ({
   title,
   value,
   valueColor,
+  subtitle,
   iconBackgroundColor = "blue_50",
   iconColor = "blue_950",
   contentLayout = "col",
@@ -4674,7 +4690,10 @@ var MetricCard = ({
           /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "s", variant: "grey_600", children: title })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Col, { gap: "4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "s", variant: "grey_600", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value })
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Row, { gap: "6", alignItems: "baseline", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "xs", variant: "grey_600", children: subtitle })
+          ] })
         ] })
       ] })
     }

package/dist/index.mjs

@@ -3808,6 +3808,10 @@ var TabButton = styled38.button.withConfig({
   shouldForwardProp: shouldForwardTab
 })`
   appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
   border: 0;
   background: ${(p) => {
   if (p.$variant !== "pills") return "transparent";
@@ -3849,6 +3853,14 @@ var TabButton = styled38.button.withConfig({
     opacity: 0.6;
   }
 `;
+var TabDot = styled38.span`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: none;
+  background: ${(p) => p.$color || colors.red_950};
+`;
 var Tab = (_a) => {
   var _b = _a, {
     id,
@@ -3939,7 +3951,7 @@ var Tabs = (_a) => {
   const isPillsFullWidth = variant === "pills" && align === "start";
   const rendered = useMemo(() => {
     if (items && items.length) {
-      return items.map((it) => /* @__PURE__ */ jsx45(
+      return items.map((it) => /* @__PURE__ */ jsxs20(
         Tab,
         {
           id: it.id,
@@ -3949,7 +3961,10 @@ var Tabs = (_a) => {
           fullWidth: isPillsFullWidth,
           onClick: () => handleSelect(it.id),
           innerRef: setTabRef(it.id),
-          children: it.label
+          children: [
+            it.label,
+            it.dot && /* @__PURE__ */ jsx45(TabDot, { $color: it.dotColor })
+          ]
         },
         it.id
       ));
@@ -4560,6 +4575,7 @@ var MetricCard = ({
   title,
   value,
   valueColor,
+  subtitle,
   iconBackgroundColor = "blue_50",
   iconColor = "blue_950",
   contentLayout = "col",
@@ -4597,7 +4613,10 @@ var MetricCard = ({
           /* @__PURE__ */ jsx50(Text, { size: "s", variant: "grey_600", children: title })
         ] }) : /* @__PURE__ */ jsxs25(Col, { gap: "4", children: [
           /* @__PURE__ */ jsx50(Text, { size: "s", variant: "grey_600", children: title }),
-          /* @__PURE__ */ jsx50(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value })
+          /* @__PURE__ */ jsxs25(Row, { gap: "6", alignItems: "baseline", children: [
+            /* @__PURE__ */ jsx50(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
+            subtitle && /* @__PURE__ */ jsx50(Text, { size: "xs", variant: "grey_600", children: subtitle })
+          ] })
         ] })
       ] })
     }

package/package.json

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