design-zystem 1.0.305 → 1.0.306

package/dist/index.d.mts

@@ -1139,9 +1139,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 +1163,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 +1385,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

@@ -1139,9 +1139,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 +1163,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 +1385,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

@@ -6332,6 +6332,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 +6348,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 +6362,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

@@ -6211,6 +6211,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 +6227,7 @@ var Wrapper6 = styled50.div`
 `;
 var Track2 = styled50.div`
   position: relative;
+  display: flex;
   flex: 1;
   height: ${({ $height }) => $height}px;
   background: ${({ $trackColor }) => $trackColor};
@@ -6232,16 +6241,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.306",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",