design-zystem 1.0.272 → 1.0.274

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

@@ -1070,6 +1070,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 +1245,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

@@ -1070,6 +1070,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 +1245,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,
@@ -1640,7 +1643,12 @@ var import_react7 = require("react");
 var import_styled_components13 = __toESM(require("styled-components"));
 
 // src/Components/Toast/toastStore.ts
-var DEFAULT_TIMEOUT = 2e3;
+var DEFAULT_TIMEOUT_BY_TYPE = {
+  success: 2e3,
+  info: 2e3,
+  warning: 4e3,
+  error: 5e3
+};
 var toasts = [];
 var nextId = 0;
 var listeners = /* @__PURE__ */ new Set();
@@ -1665,7 +1673,7 @@ var pushToast = (type, message, options = {}) => {
       type,
       message,
       title: options.title,
-      timeOut: (_a = options.timeOut) != null ? _a : DEFAULT_TIMEOUT
+      timeOut: (_a = options.timeOut) != null ? _a : DEFAULT_TIMEOUT_BY_TYPE[type]
     }
   ];
   emitChange();
@@ -6103,6 +6111,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 "";
@@ -6757,6 +6880,9 @@ var parseAmount = (value) => {
   EmptyState,
   FileUploadZone,
   FloatingButton,
+  Gantt,
+  GanttDot,
+  GanttSwatch,
   Grid,
   Icon,
   IconTabs,

package/dist/index.mjs

@@ -1504,7 +1504,12 @@ import { useCallback as useCallback2, useEffect as useEffect5, useState as useSt
 import styled13, { keyframes } from "styled-components";
 
 // src/Components/Toast/toastStore.ts
-var DEFAULT_TIMEOUT = 2e3;
+var DEFAULT_TIMEOUT_BY_TYPE = {
+  success: 2e3,
+  info: 2e3,
+  warning: 4e3,
+  error: 5e3
+};
 var toasts = [];
 var nextId = 0;
 var listeners = /* @__PURE__ */ new Set();
@@ -1529,7 +1534,7 @@ var pushToast = (type, message, options = {}) => {
       type,
       message,
       title: options.title,
-      timeOut: (_a = options.timeOut) != null ? _a : DEFAULT_TIMEOUT
+      timeOut: (_a = options.timeOut) != null ? _a : DEFAULT_TIMEOUT_BY_TYPE[type]
     }
   ];
   emitChange();
@@ -5987,6 +5992,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 "";
@@ -6640,6 +6760,9 @@ export {
   EmptyState,
   FileUploadZone,
   FloatingButton,
+  Gantt,
+  GanttDot,
+  GanttSwatch,
   Grid,
   Icon,
   IconTabs,

package/package.json

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