design-zystem 1.0.273 → 1.0.275

package/dist/index.css

@@ -277,3 +277,161 @@
   color: #646b73;
   border-color: #cbd5e1;
 }
+
+/* src/Components/Gantt/Gantt.css */
+.dz-gantt {
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+  color: #343a40;
+  width: 100%;
+}
+.dz-gantt__axis {
+  display: grid;
+  grid-template-columns: var(--dz-gantt-label-w) minmax(0, 1fr);
+  border-bottom: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+.dz-gantt__axis-label {
+  display: flex;
+  align-items: center;
+  height: 30px;
+  padding: 0 12px;
+  border-right: 1px solid #e2e8f0;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: #94a3b8;
+}
+.dz-gantt__axis-days {
+  position: relative;
+  height: 30px;
+}
+.dz-gantt__axis-day {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+  border-right: 1px solid #f1f5f9;
+  box-sizing: border-box;
+  font-size: 10px;
+  font-weight: 600;
+  color: #94a3b8;
+  white-space: nowrap;
+}
+.dz-gantt__body {
+  display: grid;
+  grid-template-columns: var(--dz-gantt-label-w) minmax(0, 1fr);
+  max-height: var(--dz-gantt-max-h);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.dz-gantt__labels {
+  min-width: 0;
+  border-right: 1px solid #e2e8f0;
+}
+.dz-gantt__dot {
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+.dz-gantt__labelrow {
+  height: var(--dz-gantt-row-h);
+  padding: 0 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  min-width: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  transition: background 0.12s ease;
+}
+.dz-gantt__labelrow--alt {
+  background: #f8fafc;
+}
+.dz-gantt__labelrow--clickable {
+  cursor: pointer;
+}
+.dz-gantt__labelrow--clickable:hover {
+  background: #f1f5f9;
+}
+.dz-gantt__timeline-col {
+  min-width: 0;
+  overflow: hidden;
+}
+.dz-gantt__timeline {
+  position: relative;
+  width: 100%;
+}
+.dz-gantt__day {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: #fff;
+  border-right: 1px solid #f1f5f9;
+  box-sizing: border-box;
+}
+.dz-gantt__day--alt {
+  background: #f8fafc;
+}
+.dz-gantt__band {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: rgba(244, 70, 73, 0.1);
+  border-left: 1.5px solid #f44649;
+  border-right: 1.5px solid #f44649;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+.dz-gantt__track {
+  position: absolute;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+}
+.dz-gantt__track:not(:first-child) {
+  border-top: 1px solid #f1f5f9;
+}
+.dz-gantt__bar {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 22px;
+  min-width: 8px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: var(--dz-gantt-bar-color, #94a3b8);
+  border: 1.5px solid var(--dz-gantt-bar-color, #94a3b8);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
+}
+.dz-gantt__bar--approx {
+  border-style: dashed;
+  opacity: 0.9;
+}
+.dz-gantt__bar-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--dz-gantt-bar-text, #fff);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dz-gantt__swatch {
+  display: inline-block;
+  width: 18px;
+  height: 12px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}

package/dist/index.d.mts

@@ -774,6 +774,8 @@ interface TabItem {
     disabled?: boolean;
     dot?: boolean;
     dotColor?: string;
+    bubbleActive?: boolean;
+    bubbleNumber?: number | null;
 }
 type TabsVariant = 'line' | 'pills';
 interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -1070,6 +1072,52 @@ interface TimelineProps {
  */
 declare const Timeline: ({ items, lineColor, emptyLabel, }: TimelineProps) => react_jsx_runtime.JSX.Element;
 
+interface GanttDay {
+    key: string | number;
+    leftPct: number;
+    widthPct: number;
+    label: string;
+}
+interface GanttBar {
+    leftPct: number;
+    widthPct: number;
+    color: string;
+    textColor?: string;
+    label?: string | null;
+    title?: string;
+    dashed?: boolean;
+}
+interface GanttRow<T = unknown> {
+    key: string | number;
+    bar?: GanttBar | null;
+    data: T;
+}
+interface GanttBand {
+    key: string | number;
+    leftPct: number;
+    widthPct: number;
+    title?: string;
+}
+interface GanttProps<T = unknown> {
+    days: GanttDay[];
+    rows: GanttRow<T>[];
+    bands?: GanttBand[];
+    labelHeader?: string;
+    renderLabel: (row: GanttRow<T>, index: number) => ReactNode;
+    onRowClick?: (row: GanttRow<T>, index: number) => void;
+    labelWidth?: number;
+    rowHeight?: number;
+    maxHeight?: number;
+}
+declare const Gantt: <T>({ days, rows, bands, labelHeader, renderLabel, onRowClick, labelWidth, rowHeight, maxHeight, }: GanttProps<T>) => react_jsx_runtime.JSX.Element;
+declare const GanttDot: ({ color }: {
+    color: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const GanttSwatch: ({ color, filled, }: {
+    color: string;
+    filled?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+
 /**
  * formatDate(date, type?, language?)
  * - language : fr/en/es/... (locale inferred), default "en"
@@ -1199,4 +1247,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, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, 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, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, 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, 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, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };

package/dist/index.d.ts

@@ -774,6 +774,8 @@ interface TabItem {
     disabled?: boolean;
     dot?: boolean;
     dotColor?: string;
+    bubbleActive?: boolean;
+    bubbleNumber?: number | null;
 }
 type TabsVariant = 'line' | 'pills';
 interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -1070,6 +1072,52 @@ interface TimelineProps {
  */
 declare const Timeline: ({ items, lineColor, emptyLabel, }: TimelineProps) => react_jsx_runtime.JSX.Element;
 
+interface GanttDay {
+    key: string | number;
+    leftPct: number;
+    widthPct: number;
+    label: string;
+}
+interface GanttBar {
+    leftPct: number;
+    widthPct: number;
+    color: string;
+    textColor?: string;
+    label?: string | null;
+    title?: string;
+    dashed?: boolean;
+}
+interface GanttRow<T = unknown> {
+    key: string | number;
+    bar?: GanttBar | null;
+    data: T;
+}
+interface GanttBand {
+    key: string | number;
+    leftPct: number;
+    widthPct: number;
+    title?: string;
+}
+interface GanttProps<T = unknown> {
+    days: GanttDay[];
+    rows: GanttRow<T>[];
+    bands?: GanttBand[];
+    labelHeader?: string;
+    renderLabel: (row: GanttRow<T>, index: number) => ReactNode;
+    onRowClick?: (row: GanttRow<T>, index: number) => void;
+    labelWidth?: number;
+    rowHeight?: number;
+    maxHeight?: number;
+}
+declare const Gantt: <T>({ days, rows, bands, labelHeader, renderLabel, onRowClick, labelWidth, rowHeight, maxHeight, }: GanttProps<T>) => react_jsx_runtime.JSX.Element;
+declare const GanttDot: ({ color }: {
+    color: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const GanttSwatch: ({ color, filled, }: {
+    color: string;
+    filled?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+
 /**
  * formatDate(date, type?, language?)
  * - language : fr/en/es/... (locale inferred), default "en"
@@ -1199,4 +1247,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, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, 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, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, 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, 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, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };

package/dist/index.js

@@ -78,6 +78,9 @@ __export(index_exports, {
   EmptyState: () => EmptyState,
   FileUploadZone: () => FileUploadZone,
   FloatingButton: () => FloatingButton,
+  Gantt: () => Gantt,
+  GanttDot: () => GanttDot,
+  GanttSwatch: () => GanttSwatch,
   Grid: () => Grid,
   Icon: () => Icon,
   IconTabs: () => IconTabs,
@@ -4225,6 +4228,15 @@ var TabDot = import_styled_components40.default.span`
   flex: none;
   background: ${(p) => p.$color || colors.red_950};
 `;
+var TabBubble = (0, import_styled_components40.default)(Bubble)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 18px;
+  font-size: 10px;
+  line-height: 1;
+`;
 var Tab = (_a) => {
   var _b = _a, {
     id,
@@ -4327,7 +4339,17 @@ var Tabs = (_a) => {
           innerRef: setTabRef(it.id),
           children: [
             it.label,
-            it.dot && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabDot, { $color: it.dotColor })
+            it.dot && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabDot, { $color: it.dotColor }),
+            Boolean(it.bubbleActive || it.bubbleNumber) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              TabBubble,
+              {
+                size: "xs",
+                color: colors.white,
+                backgroundColor: colors.red_950,
+                padding: "0 6px",
+                children: it.bubbleNumber
+              }
+            )
           ]
         },
         it.id
@@ -6108,6 +6130,121 @@ var Timeline = ({
   }) });
 };
 
+// src/Components/Gantt/Gantt.tsx
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var Gantt = ({
+  days,
+  rows,
+  bands = [],
+  labelHeader,
+  renderLabel,
+  onRowClick,
+  labelWidth = 220,
+  rowHeight = 44,
+  maxHeight = 380
+}) => {
+  const bodyHeight = rows.length * rowHeight;
+  const clickable = Boolean(onRowClick);
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+    "div",
+    {
+      className: "dz-gantt",
+      style: {
+        ["--dz-gantt-label-w"]: `${labelWidth}px`,
+        ["--dz-gantt-row-h"]: `${rowHeight}px`,
+        ["--dz-gantt-max-h"]: `${maxHeight}px`
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "dz-gantt__axis", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "dz-gantt__axis-label", children: labelHeader }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "dz-gantt__axis-days", children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            "div",
+            {
+              className: "dz-gantt__axis-day",
+              style: { left: `${day.leftPct}%`, width: `${day.widthPct}%` },
+              children: day.label
+            },
+            day.key
+          )) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "dz-gantt__body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "dz-gantt__labels", children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            "div",
+            {
+              className: [
+                "dz-gantt__labelrow",
+                i % 2 === 1 ? "dz-gantt__labelrow--alt" : "",
+                clickable ? "dz-gantt__labelrow--clickable" : ""
+              ].filter(Boolean).join(" "),
+              onClick: onRowClick ? () => onRowClick(row, i) : void 0,
+              children: renderLabel(row, i)
+            },
+            row.key
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "dz-gantt__timeline-col", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "dz-gantt__timeline", style: { height: bodyHeight }, children: [
+            days.map((day, i) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              "div",
+              {
+                className: `dz-gantt__day ${i % 2 === 1 ? "dz-gantt__day--alt" : ""}`,
+                style: { left: `${day.leftPct}%`, width: `${day.widthPct}%` }
+              },
+              day.key
+            )),
+            bands.map((band) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              "div",
+              {
+                className: "dz-gantt__band",
+                title: band.title,
+                style: { left: `${band.leftPct}%`, width: `${band.widthPct}%` }
+              },
+              band.key
+            )),
+            rows.map((row, i) => {
+              var _a, _b, _c;
+              return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                "div",
+                {
+                  className: "dz-gantt__track",
+                  style: { top: i * rowHeight, height: rowHeight },
+                  children: row.bar && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    "div",
+                    {
+                      className: `dz-gantt__bar ${row.bar.dashed ? "dz-gantt__bar--approx" : ""}`,
+                      title: (_b = (_a = row.bar.title) != null ? _a : row.bar.label) != null ? _b : void 0,
+                      style: {
+                        left: `${row.bar.leftPct}%`,
+                        width: `${row.bar.widthPct}%`,
+                        ["--dz-gantt-bar-color"]: row.bar.color,
+                        ["--dz-gantt-bar-text"]: (_c = row.bar.textColor) != null ? _c : "#fff"
+                      },
+                      children: row.bar.label && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "dz-gantt__bar-label", children: row.bar.label })
+                    }
+                  )
+                },
+                row.key
+              );
+            })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+};
+var GanttDot = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "dz-gantt__dot", style: { background: color } });
+var GanttSwatch = ({
+  color,
+  filled = true
+}) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  "span",
+  {
+    className: "dz-gantt__swatch",
+    style: {
+      background: filled ? color : "transparent",
+      border: `1.5px solid ${color}`
+    }
+  }
+);
+
 // src/data/globalMethods.ts
 var formatDate = (dateString, type = "date", language = "en") => {
   if (!dateString) return "";
@@ -6762,6 +6899,9 @@ var parseAmount = (value) => {
   EmptyState,
   FileUploadZone,
   FloatingButton,
+  Gantt,
+  GanttDot,
+  GanttSwatch,
   Grid,
   Icon,
   IconTabs,

package/dist/index.mjs

@@ -4104,6 +4104,15 @@ var TabDot = styled40.span`
   flex: none;
   background: ${(p) => p.$color || colors.red_950};
 `;
+var TabBubble = styled40(Bubble)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 18px;
+  font-size: 10px;
+  line-height: 1;
+`;
 var Tab = (_a) => {
   var _b = _a, {
     id,
@@ -4206,7 +4215,17 @@ var Tabs = (_a) => {
           innerRef: setTabRef(it.id),
           children: [
             it.label,
-            it.dot && /* @__PURE__ */ jsx47(TabDot, { $color: it.dotColor })
+            it.dot && /* @__PURE__ */ jsx47(TabDot, { $color: it.dotColor }),
+            Boolean(it.bubbleActive || it.bubbleNumber) && /* @__PURE__ */ jsx47(
+              TabBubble,
+              {
+                size: "xs",
+                color: colors.white,
+                backgroundColor: colors.red_950,
+                padding: "0 6px",
+                children: it.bubbleNumber
+              }
+            )
           ]
         },
         it.id
@@ -5992,6 +6011,121 @@ var Timeline = ({
   }) });
 };
 
+// src/Components/Gantt/Gantt.tsx
+import { jsx as jsx63, jsxs as jsxs36 } from "react/jsx-runtime";
+var Gantt = ({
+  days,
+  rows,
+  bands = [],
+  labelHeader,
+  renderLabel,
+  onRowClick,
+  labelWidth = 220,
+  rowHeight = 44,
+  maxHeight = 380
+}) => {
+  const bodyHeight = rows.length * rowHeight;
+  const clickable = Boolean(onRowClick);
+  return /* @__PURE__ */ jsxs36(
+    "div",
+    {
+      className: "dz-gantt",
+      style: {
+        ["--dz-gantt-label-w"]: `${labelWidth}px`,
+        ["--dz-gantt-row-h"]: `${rowHeight}px`,
+        ["--dz-gantt-max-h"]: `${maxHeight}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxs36("div", { className: "dz-gantt__axis", children: [
+          /* @__PURE__ */ jsx63("div", { className: "dz-gantt__axis-label", children: labelHeader }),
+          /* @__PURE__ */ jsx63("div", { className: "dz-gantt__axis-days", children: days.map((day) => /* @__PURE__ */ jsx63(
+            "div",
+            {
+              className: "dz-gantt__axis-day",
+              style: { left: `${day.leftPct}%`, width: `${day.widthPct}%` },
+              children: day.label
+            },
+            day.key
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs36("div", { className: "dz-gantt__body", children: [
+          /* @__PURE__ */ jsx63("div", { className: "dz-gantt__labels", children: rows.map((row, i) => /* @__PURE__ */ jsx63(
+            "div",
+            {
+              className: [
+                "dz-gantt__labelrow",
+                i % 2 === 1 ? "dz-gantt__labelrow--alt" : "",
+                clickable ? "dz-gantt__labelrow--clickable" : ""
+              ].filter(Boolean).join(" "),
+              onClick: onRowClick ? () => onRowClick(row, i) : void 0,
+              children: renderLabel(row, i)
+            },
+            row.key
+          )) }),
+          /* @__PURE__ */ jsx63("div", { className: "dz-gantt__timeline-col", children: /* @__PURE__ */ jsxs36("div", { className: "dz-gantt__timeline", style: { height: bodyHeight }, children: [
+            days.map((day, i) => /* @__PURE__ */ jsx63(
+              "div",
+              {
+                className: `dz-gantt__day ${i % 2 === 1 ? "dz-gantt__day--alt" : ""}`,
+                style: { left: `${day.leftPct}%`, width: `${day.widthPct}%` }
+              },
+              day.key
+            )),
+            bands.map((band) => /* @__PURE__ */ jsx63(
+              "div",
+              {
+                className: "dz-gantt__band",
+                title: band.title,
+                style: { left: `${band.leftPct}%`, width: `${band.widthPct}%` }
+              },
+              band.key
+            )),
+            rows.map((row, i) => {
+              var _a, _b, _c;
+              return /* @__PURE__ */ jsx63(
+                "div",
+                {
+                  className: "dz-gantt__track",
+                  style: { top: i * rowHeight, height: rowHeight },
+                  children: row.bar && /* @__PURE__ */ jsx63(
+                    "div",
+                    {
+                      className: `dz-gantt__bar ${row.bar.dashed ? "dz-gantt__bar--approx" : ""}`,
+                      title: (_b = (_a = row.bar.title) != null ? _a : row.bar.label) != null ? _b : void 0,
+                      style: {
+                        left: `${row.bar.leftPct}%`,
+                        width: `${row.bar.widthPct}%`,
+                        ["--dz-gantt-bar-color"]: row.bar.color,
+                        ["--dz-gantt-bar-text"]: (_c = row.bar.textColor) != null ? _c : "#fff"
+                      },
+                      children: row.bar.label && /* @__PURE__ */ jsx63("span", { className: "dz-gantt__bar-label", children: row.bar.label })
+                    }
+                  )
+                },
+                row.key
+              );
+            })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+};
+var GanttDot = ({ color }) => /* @__PURE__ */ jsx63("span", { className: "dz-gantt__dot", style: { background: color } });
+var GanttSwatch = ({
+  color,
+  filled = true
+}) => /* @__PURE__ */ jsx63(
+  "span",
+  {
+    className: "dz-gantt__swatch",
+    style: {
+      background: filled ? color : "transparent",
+      border: `1.5px solid ${color}`
+    }
+  }
+);
+
 // src/data/globalMethods.ts
 var formatDate = (dateString, type = "date", language = "en") => {
   if (!dateString) return "";
@@ -6645,6 +6779,9 @@ export {
   EmptyState,
   FileUploadZone,
   FloatingButton,
+  Gantt,
+  GanttDot,
+  GanttSwatch,
   Grid,
   Icon,
   IconTabs,

package/package.json

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