design-zystem 1.0.305 → 1.0.307

package/dist/index.d.mts

@@ -267,6 +267,7 @@ type ToastType = 'success' | 'error' | 'warning' | 'info';
 interface ToastOptions {
     timeOut?: number;
     title?: string;
+    onClick?: () => void;
 }
 
 declare const toast: {
@@ -1139,9 +1140,19 @@ interface FloatingButtonProps {
 }
 declare const FloatingButton: ({ isOpen, onToggle, actions, mainBadge, label, icon, openIcon, variant, }: FloatingButtonProps) => react_jsx_runtime.JSX.Element;
 
-interface ProgressBarProps {
-    /** Filled portion, 0–100. Values outside the range are clamped. */
+interface ProgressBarSegment {
+    /** Share of the track, 0–100. */
     value: number;
+    /** Segment color (DZ color token). */
+    color: string;
+    /** Native tooltip on hover. */
+    label?: string;
+}
+interface ProgressBarProps {
+    /** Filled portion, 0–100. Values outside the range are clamped. Ignored when `segments` is set. */
+    value?: number;
+    /** Stacked shares drawn side by side, truncated once they fill the track. */
+    segments?: ProgressBarSegment[];
     /** Fill color (DZ color token). */
     color?: string;
     /** Track (unfilled) color (DZ color token). */
@@ -1153,8 +1164,9 @@ interface ProgressBarProps {
 }
 /**
  * Horizontal coverage/progress bar. Track + fill, optional right-aligned label.
+ * Pass `segments` instead of `value` to stack the parts of a single total.
  */
-declare const ProgressBar: ({ value, color, trackColor, height, showLabel, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
+declare const ProgressBar: ({ value, segments, color, trackColor, height, showLabel, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
 
 interface TimelineItem {
     /** Stable key for the row. */
@@ -1374,4 +1386,4 @@ declare const formatKM: (value: string | number | null | undefined) => string;
 
 declare const parseAmount: (value: string) => number | null;
 
-export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, type PastelColorPair, Popover, ProgressBar, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, type PastelColorPair, Popover, ProgressBar, type ProgressBarProps, type ProgressBarSegment, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };

package/dist/index.d.ts

@@ -267,6 +267,7 @@ type ToastType = 'success' | 'error' | 'warning' | 'info';
 interface ToastOptions {
     timeOut?: number;
     title?: string;
+    onClick?: () => void;
 }
 
 declare const toast: {
@@ -1139,9 +1140,19 @@ interface FloatingButtonProps {
 }
 declare const FloatingButton: ({ isOpen, onToggle, actions, mainBadge, label, icon, openIcon, variant, }: FloatingButtonProps) => react_jsx_runtime.JSX.Element;
 
-interface ProgressBarProps {
-    /** Filled portion, 0–100. Values outside the range are clamped. */
+interface ProgressBarSegment {
+    /** Share of the track, 0–100. */
     value: number;
+    /** Segment color (DZ color token). */
+    color: string;
+    /** Native tooltip on hover. */
+    label?: string;
+}
+interface ProgressBarProps {
+    /** Filled portion, 0–100. Values outside the range are clamped. Ignored when `segments` is set. */
+    value?: number;
+    /** Stacked shares drawn side by side, truncated once they fill the track. */
+    segments?: ProgressBarSegment[];
     /** Fill color (DZ color token). */
     color?: string;
     /** Track (unfilled) color (DZ color token). */
@@ -1153,8 +1164,9 @@ interface ProgressBarProps {
 }
 /**
  * Horizontal coverage/progress bar. Track + fill, optional right-aligned label.
+ * Pass `segments` instead of `value` to stack the parts of a single total.
  */
-declare const ProgressBar: ({ value, color, trackColor, height, showLabel, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
+declare const ProgressBar: ({ value, segments, color, trackColor, height, showLabel, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
 
 interface TimelineItem {
     /** Stable key for the row. */
@@ -1374,4 +1386,4 @@ declare const formatKM: (value: string | number | null | undefined) => string;
 
 declare const parseAmount: (value: string) => number | null;
 
-export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, type PastelColorPair, Popover, ProgressBar, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, type PastelColorPair, Popover, ProgressBar, type ProgressBarProps, type ProgressBarSegment, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };

package/dist/index.js

@@ -1797,7 +1797,8 @@ var pushToast = (type, message, options = {}) => {
       type,
       message,
       title: options.title,
-      timeOut: (_a = options.timeOut) != null ? _a : DEFAULT_TIMEOUT_BY_TYPE[type]
+      timeOut: (_a = options.timeOut) != null ? _a : DEFAULT_TIMEOUT_BY_TYPE[type],
+      onClick: options.onClick
     }
   ];
   emitChange();
@@ -1821,33 +1822,50 @@ var ToastCard = ({ toastItem }) => {
     return () => clearTimeout(dismissTimer);
   }, [handleDismiss, toastItem.timeOut]);
   const { icon, accent, background } = TOAST[toastItem.type];
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Card, { $accent: accent, $isExiting: isExiting, role: "status", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconBadge, { $background: background, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: icon, family: "regular", size: "m", color: accent }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Content, { children: [
-      toastItem.title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { size: "s", weight: "700", children: toastItem.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { size: "s", children: toastItem.message })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      Icon,
-      {
-        name: "xmark",
-        family: "regular",
-        size: "s",
-        color: colors.grey_500,
-        onClick: handleDismiss,
-        style: { position: "absolute", top: 10, right: 10, cursor: "pointer" },
-        "aria-label": "Fermer"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      ProgressBar,
-      {
-        $accent: accent,
-        $timeOut: toastItem.timeOut,
-        $isExiting: isExiting
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    Card,
+    {
+      $accent: accent,
+      $isExiting: isExiting,
+      $isClickable: !!toastItem.onClick,
+      role: "status",
+      onClick: toastItem.onClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconBadge, { $background: background, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: icon, family: "regular", size: "m", color: accent }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Content, { children: [
+          toastItem.title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { size: "s", weight: "700", children: toastItem.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { size: "s", children: toastItem.message })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          DismissButton,
+          {
+            onClick: (event) => {
+              event.stopPropagation();
+              handleDismiss();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              Icon,
+              {
+                name: "xmark",
+                family: "regular",
+                size: "s",
+                color: colors.grey_500,
+                "aria-label": "Fermer"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ProgressBar,
+          {
+            $accent: accent,
+            $timeOut: toastItem.timeOut,
+            $isExiting: isExiting
+          }
+        )
+      ]
+    }
+  );
 };
 var TOAST = {
   success: {
@@ -1896,9 +1914,16 @@ var Card = import_styled_components13.default.div`
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
   overflow: hidden;
   pointer-events: auto;
+  cursor: ${({ $isClickable }) => $isClickable ? "pointer" : "default"};
   animation: ${({ $isExiting }) => $isExiting ? slideOut : slideIn} 180ms
     ease-out forwards;
 `;
+var DismissButton = import_styled_components13.default.span`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+`;
 var IconBadge = import_styled_components13.default.div`
   display: flex;
   align-items: center;
@@ -6332,6 +6357,14 @@ var CountBadge = import_styled_components49.default.span`
 var import_styled_components50 = __toESM(require("styled-components"));
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var clampPercent = (value) => Math.max(0, Math.min(100, value));
+var stackSegments = (segments) => {
+  let remaining = 100;
+  return segments.map((segment) => {
+    const width = clampPercent(Math.min(segment.value, remaining));
+    remaining -= width;
+    return __spreadProps(__spreadValues({}, segment), { width });
+  });
+};
 var Wrapper6 = import_styled_components50.default.div`
   display: flex;
   align-items: center;
@@ -6340,6 +6373,7 @@ var Wrapper6 = import_styled_components50.default.div`
 `;
 var Track2 = import_styled_components50.default.div`
   position: relative;
+  display: flex;
   flex: 1;
   height: ${({ $height }) => $height}px;
   background: ${({ $trackColor }) => $trackColor};
@@ -6353,16 +6387,32 @@ var Fill = import_styled_components50.default.div`
   border-radius: ${({ $height }) => $height}px;
   transition: width 0.2s ease;
 `;
+var Segment = import_styled_components50.default.div`
+  height: 100%;
+  flex: 0 0 ${({ $percent }) => $percent}%;
+  background: ${({ $color }) => $color};
+  transition: flex-basis 0.2s ease;
+`;
 var ProgressBar2 = ({
-  value,
+  value = 0,
+  segments,
   color = colors.blue_700,
   trackColor = colors.grey_200,
   height = 8,
   showLabel = false
 }) => {
-  const percent = clampPercent(value);
+  const stacked = segments ? stackSegments(segments) : null;
+  const percent = stacked ? stacked.reduce((total, segment) => total + segment.width, 0) : clampPercent(value);
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Wrapper6, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Fill, { $height: height, $color: color, $percent: percent }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Track2, { $height: height, $trackColor: trackColor, children: stacked ? stacked.map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      Segment,
+      {
+        $color: segment.color,
+        $percent: segment.width,
+        title: segment.label
+      },
+      `${segment.color}-${index}`
+    )) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Fill, { $height: height, $color: color, $percent: percent }) }),
     showLabel && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Text, { size: "s", weight: "600", children: [
       Math.round(percent),
       " %"

package/dist/index.mjs

@@ -1656,7 +1656,8 @@ var pushToast = (type, message, options = {}) => {
       type,
       message,
       title: options.title,
-      timeOut: (_a = options.timeOut) != null ? _a : DEFAULT_TIMEOUT_BY_TYPE[type]
+      timeOut: (_a = options.timeOut) != null ? _a : DEFAULT_TIMEOUT_BY_TYPE[type],
+      onClick: options.onClick
     }
   ];
   emitChange();
@@ -1680,33 +1681,50 @@ var ToastCard = ({ toastItem }) => {
     return () => clearTimeout(dismissTimer);
   }, [handleDismiss, toastItem.timeOut]);
   const { icon, accent, background } = TOAST[toastItem.type];
-  return /* @__PURE__ */ jsxs7(Card, { $accent: accent, $isExiting: isExiting, role: "status", children: [
-    /* @__PURE__ */ jsx17(IconBadge, { $background: background, children: /* @__PURE__ */ jsx17(Icon, { name: icon, family: "regular", size: "m", color: accent }) }),
-    /* @__PURE__ */ jsxs7(Content, { children: [
-      toastItem.title && /* @__PURE__ */ jsx17(Text, { size: "s", weight: "700", children: toastItem.title }),
-      /* @__PURE__ */ jsx17(Text, { size: "s", children: toastItem.message })
-    ] }),
-    /* @__PURE__ */ jsx17(
-      Icon,
-      {
-        name: "xmark",
-        family: "regular",
-        size: "s",
-        color: colors.grey_500,
-        onClick: handleDismiss,
-        style: { position: "absolute", top: 10, right: 10, cursor: "pointer" },
-        "aria-label": "Fermer"
-      }
-    ),
-    /* @__PURE__ */ jsx17(
-      ProgressBar,
-      {
-        $accent: accent,
-        $timeOut: toastItem.timeOut,
-        $isExiting: isExiting
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs7(
+    Card,
+    {
+      $accent: accent,
+      $isExiting: isExiting,
+      $isClickable: !!toastItem.onClick,
+      role: "status",
+      onClick: toastItem.onClick,
+      children: [
+        /* @__PURE__ */ jsx17(IconBadge, { $background: background, children: /* @__PURE__ */ jsx17(Icon, { name: icon, family: "regular", size: "m", color: accent }) }),
+        /* @__PURE__ */ jsxs7(Content, { children: [
+          toastItem.title && /* @__PURE__ */ jsx17(Text, { size: "s", weight: "700", children: toastItem.title }),
+          /* @__PURE__ */ jsx17(Text, { size: "s", children: toastItem.message })
+        ] }),
+        /* @__PURE__ */ jsx17(
+          DismissButton,
+          {
+            onClick: (event) => {
+              event.stopPropagation();
+              handleDismiss();
+            },
+            children: /* @__PURE__ */ jsx17(
+              Icon,
+              {
+                name: "xmark",
+                family: "regular",
+                size: "s",
+                color: colors.grey_500,
+                "aria-label": "Fermer"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx17(
+          ProgressBar,
+          {
+            $accent: accent,
+            $timeOut: toastItem.timeOut,
+            $isExiting: isExiting
+          }
+        )
+      ]
+    }
+  );
 };
 var TOAST = {
   success: {
@@ -1755,9 +1773,16 @@ var Card = styled13.div`
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
   overflow: hidden;
   pointer-events: auto;
+  cursor: ${({ $isClickable }) => $isClickable ? "pointer" : "default"};
   animation: ${({ $isExiting }) => $isExiting ? slideOut : slideIn} 180ms
     ease-out forwards;
 `;
+var DismissButton = styled13.span`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+`;
 var IconBadge = styled13.div`
   display: flex;
   align-items: center;
@@ -6211,6 +6236,14 @@ var CountBadge = styled49.span`
 import styled50 from "styled-components";
 import { jsx as jsx61, jsxs as jsxs34 } from "react/jsx-runtime";
 var clampPercent = (value) => Math.max(0, Math.min(100, value));
+var stackSegments = (segments) => {
+  let remaining = 100;
+  return segments.map((segment) => {
+    const width = clampPercent(Math.min(segment.value, remaining));
+    remaining -= width;
+    return __spreadProps(__spreadValues({}, segment), { width });
+  });
+};
 var Wrapper6 = styled50.div`
   display: flex;
   align-items: center;
@@ -6219,6 +6252,7 @@ var Wrapper6 = styled50.div`
 `;
 var Track2 = styled50.div`
   position: relative;
+  display: flex;
   flex: 1;
   height: ${({ $height }) => $height}px;
   background: ${({ $trackColor }) => $trackColor};
@@ -6232,16 +6266,32 @@ var Fill = styled50.div`
   border-radius: ${({ $height }) => $height}px;
   transition: width 0.2s ease;
 `;
+var Segment = styled50.div`
+  height: 100%;
+  flex: 0 0 ${({ $percent }) => $percent}%;
+  background: ${({ $color }) => $color};
+  transition: flex-basis 0.2s ease;
+`;
 var ProgressBar2 = ({
-  value,
+  value = 0,
+  segments,
   color = colors.blue_700,
   trackColor = colors.grey_200,
   height = 8,
   showLabel = false
 }) => {
-  const percent = clampPercent(value);
+  const stacked = segments ? stackSegments(segments) : null;
+  const percent = stacked ? stacked.reduce((total, segment) => total + segment.width, 0) : clampPercent(value);
   return /* @__PURE__ */ jsxs34(Wrapper6, { children: [
-    /* @__PURE__ */ jsx61(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ jsx61(Fill, { $height: height, $color: color, $percent: percent }) }),
+    /* @__PURE__ */ jsx61(Track2, { $height: height, $trackColor: trackColor, children: stacked ? stacked.map((segment, index) => /* @__PURE__ */ jsx61(
+      Segment,
+      {
+        $color: segment.color,
+        $percent: segment.width,
+        title: segment.label
+      },
+      `${segment.color}-${index}`
+    )) : /* @__PURE__ */ jsx61(Fill, { $height: height, $color: color, $percent: percent }) }),
     showLabel && /* @__PURE__ */ jsxs34(Text, { size: "s", weight: "600", children: [
       Math.round(percent),
       " %"

package/package.json

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