design-zystem 1.0.247 → 1.0.248

package/dist/index.d.mts

@@ -189,9 +189,11 @@ interface DrawerProps {
     isLoading?: boolean;
     leftVariant?: string;
     variant?: string;
+    leftOutline?: boolean;
+    rightOutline?: boolean;
     footer?: ReactNode;
 }
-declare const Drawer: ({ showDrawer, closeDrawer, title, width, children, leftButtonLabel, leftButtonAction, leftButtonDisabled, rightButtonLabel, rightButtonAction, rightButtonDisabled, isLoading, leftVariant, variant, footer, }: DrawerProps) => react_jsx_runtime.JSX.Element | null;
+declare const Drawer: ({ showDrawer, closeDrawer, title, width, children, leftButtonLabel, leftButtonAction, leftButtonDisabled, rightButtonLabel, rightButtonAction, rightButtonDisabled, isLoading, leftVariant, variant, leftOutline, rightOutline, footer, }: DrawerProps) => react_jsx_runtime.JSX.Element | null;
 
 type SizeKey = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 interface TagBubbleProps extends HTMLAttributes<HTMLDivElement> {
@@ -266,6 +268,7 @@ interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
     p?: boolean;
     max?: number | string;
     wrap?: string;
+    lineClamp?: number;
     onClick?: (e: MouseEvent) => void;
     style?: CSSProperties;
     className?: string;
@@ -597,6 +600,7 @@ interface TableProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
     fullWidth?: boolean;
     borderRadius?: string;
+    hasShadow?: boolean;
 }
 declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -902,6 +906,79 @@ interface EmptyStateProps {
 }
 declare const EmptyState: ({ icon, title, description, actionLabel, onAction, }: EmptyStateProps) => react_jsx_runtime.JSX.Element;
 
+interface ProgressBarProps {
+    /** Filled portion, 0–100. Values outside the range are clamped. */
+    value: number;
+    /** Fill color (DZ color token). */
+    color?: string;
+    /** Track (unfilled) color (DZ color token). */
+    trackColor?: string;
+    /** Bar thickness in px. */
+    height?: number;
+    /** Show the "xx %" label on the right. */
+    showLabel?: boolean;
+}
+/**
+ * Horizontal coverage/progress bar. Track + fill, optional right-aligned label.
+ */
+declare const ProgressBar: ({ value, color, trackColor, height, showLabel, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
+
+interface TimelineItem {
+    /** Stable key for the row. */
+    id: string | number;
+    /** Main line (event label, mission name…). */
+    title: string;
+    /** Secondary line (date, author…). */
+    subtitle?: string;
+    /** Optional free text under the title. */
+    description?: string;
+    /** Dot color (DZ color token). */
+    color?: string;
+    /** Emphasize this point (e.g. the coverage point in a simulation). */
+    highlighted?: boolean;
+}
+interface TimelineProps {
+    items: TimelineItem[];
+    /** Color of the connecting line (DZ color token). */
+    lineColor?: string;
+    /** Text shown when there is no event. */
+    emptyLabel?: string;
+}
+/**
+ * Vertical timeline. Used for event logs (feedback history) and chronological
+ * lists (recovery simulation). Each point has a colored dot + title/subtitle.
+ */
+declare const Timeline: ({ items, lineColor, emptyLabel, }: TimelineProps) => react_jsx_runtime.JSX.Element;
+
+interface BorderedRowProps {
+    /** Accent color (DZ color token) — used to encode a score/status/level. */
+    borderColor?: string;
+    /** Accent thickness in px. */
+    borderWidth?: number;
+    /** Background color (DZ color token). */
+    background?: string;
+    /** Inner padding. */
+    padding?: string;
+    /** Corner radius — pass "0" for flush table rows, default rounded card. */
+    borderRadius?: string;
+    /**
+     * Accent style:
+     * - 'edge' (default): full-height colored left border (flush rows / score bars).
+     * - 'bar': short rounded inset accent bar, centered (white card look).
+     */
+    accent?: 'edge' | 'bar';
+    /** Subtle 1px full border around the card (card look). */
+    bordered?: boolean;
+    children: ReactNode;
+    onClick?: () => void;
+}
+/**
+ * Row/card with a colored accent, used to encode a status (recovery score,
+ * feedback level…). Flush table rows: accent="edge" + borderRadius="0".
+ * White cards: accent="bar" + bordered + background.
+ */
+declare const BorderedRow: ({ borderColor, borderWidth, background, padding, borderRadius, accent, bordered, children, onClick, }: BorderedRowProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * formatDate(date, type?, language?)
  * - language : fr/en/es/... (locale inferred), default "en"
@@ -948,4 +1025,4 @@ interface OptimizeImageOptions {
 }
 declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
 
-export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, EmptyState, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, 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, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Avatar, BorderedRow, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, EmptyState, FileUploadZone, 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, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };

package/dist/index.d.ts

@@ -189,9 +189,11 @@ interface DrawerProps {
     isLoading?: boolean;
     leftVariant?: string;
     variant?: string;
+    leftOutline?: boolean;
+    rightOutline?: boolean;
     footer?: ReactNode;
 }
-declare const Drawer: ({ showDrawer, closeDrawer, title, width, children, leftButtonLabel, leftButtonAction, leftButtonDisabled, rightButtonLabel, rightButtonAction, rightButtonDisabled, isLoading, leftVariant, variant, footer, }: DrawerProps) => react_jsx_runtime.JSX.Element | null;
+declare const Drawer: ({ showDrawer, closeDrawer, title, width, children, leftButtonLabel, leftButtonAction, leftButtonDisabled, rightButtonLabel, rightButtonAction, rightButtonDisabled, isLoading, leftVariant, variant, leftOutline, rightOutline, footer, }: DrawerProps) => react_jsx_runtime.JSX.Element | null;
 
 type SizeKey = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 interface TagBubbleProps extends HTMLAttributes<HTMLDivElement> {
@@ -266,6 +268,7 @@ interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
     p?: boolean;
     max?: number | string;
     wrap?: string;
+    lineClamp?: number;
     onClick?: (e: MouseEvent) => void;
     style?: CSSProperties;
     className?: string;
@@ -597,6 +600,7 @@ interface TableProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
     fullWidth?: boolean;
     borderRadius?: string;
+    hasShadow?: boolean;
 }
 declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -902,6 +906,79 @@ interface EmptyStateProps {
 }
 declare const EmptyState: ({ icon, title, description, actionLabel, onAction, }: EmptyStateProps) => react_jsx_runtime.JSX.Element;
 
+interface ProgressBarProps {
+    /** Filled portion, 0–100. Values outside the range are clamped. */
+    value: number;
+    /** Fill color (DZ color token). */
+    color?: string;
+    /** Track (unfilled) color (DZ color token). */
+    trackColor?: string;
+    /** Bar thickness in px. */
+    height?: number;
+    /** Show the "xx %" label on the right. */
+    showLabel?: boolean;
+}
+/**
+ * Horizontal coverage/progress bar. Track + fill, optional right-aligned label.
+ */
+declare const ProgressBar: ({ value, color, trackColor, height, showLabel, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
+
+interface TimelineItem {
+    /** Stable key for the row. */
+    id: string | number;
+    /** Main line (event label, mission name…). */
+    title: string;
+    /** Secondary line (date, author…). */
+    subtitle?: string;
+    /** Optional free text under the title. */
+    description?: string;
+    /** Dot color (DZ color token). */
+    color?: string;
+    /** Emphasize this point (e.g. the coverage point in a simulation). */
+    highlighted?: boolean;
+}
+interface TimelineProps {
+    items: TimelineItem[];
+    /** Color of the connecting line (DZ color token). */
+    lineColor?: string;
+    /** Text shown when there is no event. */
+    emptyLabel?: string;
+}
+/**
+ * Vertical timeline. Used for event logs (feedback history) and chronological
+ * lists (recovery simulation). Each point has a colored dot + title/subtitle.
+ */
+declare const Timeline: ({ items, lineColor, emptyLabel, }: TimelineProps) => react_jsx_runtime.JSX.Element;
+
+interface BorderedRowProps {
+    /** Accent color (DZ color token) — used to encode a score/status/level. */
+    borderColor?: string;
+    /** Accent thickness in px. */
+    borderWidth?: number;
+    /** Background color (DZ color token). */
+    background?: string;
+    /** Inner padding. */
+    padding?: string;
+    /** Corner radius — pass "0" for flush table rows, default rounded card. */
+    borderRadius?: string;
+    /**
+     * Accent style:
+     * - 'edge' (default): full-height colored left border (flush rows / score bars).
+     * - 'bar': short rounded inset accent bar, centered (white card look).
+     */
+    accent?: 'edge' | 'bar';
+    /** Subtle 1px full border around the card (card look). */
+    bordered?: boolean;
+    children: ReactNode;
+    onClick?: () => void;
+}
+/**
+ * Row/card with a colored accent, used to encode a status (recovery score,
+ * feedback level…). Flush table rows: accent="edge" + borderRadius="0".
+ * White cards: accent="bar" + bordered + background.
+ */
+declare const BorderedRow: ({ borderColor, borderWidth, background, padding, borderRadius, accent, bordered, children, onClick, }: BorderedRowProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * formatDate(date, type?, language?)
  * - language : fr/en/es/... (locale inferred), default "en"
@@ -948,4 +1025,4 @@ interface OptimizeImageOptions {
 }
 declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
 
-export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, EmptyState, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, 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, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Avatar, BorderedRow, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, EmptyState, FileUploadZone, 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, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };

package/dist/index.js

@@ -61,6 +61,7 @@ var index_exports = {};
 __export(index_exports, {
   Accordion: () => Accordion,
   Avatar: () => Avatar,
+  BorderedRow: () => BorderedRow,
   Box: () => Box,
   Bubble: () => Bubble,
   Bulk: () => Bulk,
@@ -92,6 +93,7 @@ __export(index_exports, {
   PageContainer: () => PageContainer,
   Pagination: () => Pagination,
   Popover: () => Popover,
+  ProgressBar: () => ProgressBar,
   Radio: () => Radio,
   Row: () => Row,
   Select: () => Select,
@@ -113,6 +115,7 @@ __export(index_exports, {
   Tabs: () => Tabs,
   TagBubble: () => TagBubble,
   Text: () => Text,
+  Timeline: () => Timeline,
   Tooltip: () => Tooltip,
   colors: () => colors,
   formatDate: () => formatDate,
@@ -508,6 +511,7 @@ var Text = (props) => {
     p,
     max,
     wrap,
+    lineClamp,
     onClick
   } = _a, rest = __objRest(_a, [
     "size",
@@ -525,9 +529,10 @@ var Text = (props) => {
     "p",
     "max",
     "wrap",
+    "lineClamp",
     "onClick"
   ]);
-  const textStyle = {
+  const textStyle = __spreadValues({
     fontSize: textSizes[size] || size,
     fontWeight: weight,
     color: color || colors[variant],
@@ -539,11 +544,15 @@ var Text = (props) => {
     fontStyle: fontStyle || "normal",
     cursor: onClick ? "pointer" : "inherit",
     maxWidth: max ? max + "ch" : "none",
-    display: max ? "inline-block" : "",
+    display: lineClamp ? "-webkit-box" : max ? "inline-block" : "",
     overflow: "hidden",
     textOverflow: max ? "ellipsis" : "",
     whiteSpace: wrap || ""
-  };
+  }, lineClamp ? {
+    WebkitLineClamp: lineClamp,
+    WebkitBoxOrient: "vertical",
+    wordBreak: "break-word"
+  } : {});
   if (p) {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", __spreadProps(__spreadValues({ style: textStyle, onClick }, rest), { children }));
   } else {
@@ -1505,6 +1514,8 @@ var Drawer = ({
   isLoading = false,
   leftVariant,
   variant = "blue_700",
+  leftOutline = true,
+  rightOutline = false,
   footer
 }) => {
   const [isRendered, setIsRendered] = (0, import_react6.useState)(showDrawer);
@@ -1552,7 +1563,7 @@ var Drawer = ({
           leftButtonLabel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             Button,
             {
-              outline: true,
+              outline: leftOutline,
               onClick: leftButtonAction,
               disabled: leftButtonDisabled,
               variant: leftVariant ? leftVariant : variant,
@@ -1563,6 +1574,7 @@ var Drawer = ({
           rightButtonLabel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             Button,
             {
+              outline: rightOutline,
               onClick: rightButtonAction,
               isLoading,
               disabled: rightButtonDisabled,
@@ -1989,7 +2001,7 @@ var SearchInput = import_styled_components17.default.input`
 var Option = import_styled_components17.default.div`
   padding: 8px;
   cursor: pointer;
-  background-color: ${(props) => props.isActive ? colors.grey_100 : "transparent"};
+  background-color: ${(props) => props.$isActive ? colors.grey_100 : "transparent"};
 
   &:hover {
     background: ${colors.grey_100};
@@ -2146,7 +2158,7 @@ var Select = ({
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownList, { children: filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 Option,
                 {
-                  isActive: index === activeIndex,
+                  $isActive: index === activeIndex,
                   onMouseEnter: () => setActiveIndex(index),
                   onClick: () => handleSelect(option),
                   style: { pointerEvents: "auto" },
@@ -3233,7 +3245,8 @@ var shouldForwardPropTable = (prop) => ![
   "height",
   "maxHeight",
   "fullWidth",
-  "borderRadius"
+  "borderRadius",
+  "hasShadow"
 ].includes(prop);
 var StyledTable = import_styled_components26.default.div.withConfig({
   shouldForwardProp: shouldForwardPropTable
@@ -3258,6 +3271,7 @@ var StyledContainer3 = import_styled_components26.default.div.withConfig({
   height: ${(props) => props.height || "100%"};
   border-radius: ${(props) => props.borderRadius || "8px"};
   border: 1.4px solid ${colors.grey_200};
+  box-shadow: ${(props) => props.hasShadow ? "0 2px 12px 0 rgba(198, 198, 198, 0.25)" : "none"};
 `;
 var Table = (0, import_react14.forwardRef)((props, ref) => {
   const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
@@ -5213,6 +5227,167 @@ var EmptyState = ({
   );
 };
 
+// src/Components/ProgressBar/ProgressBar.tsx
+var import_styled_components45 = __toESM(require("styled-components"));
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var clampPercent = (value) => Math.max(0, Math.min(100, value));
+var Wrapper5 = import_styled_components45.default.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+`;
+var Track2 = import_styled_components45.default.div`
+  position: relative;
+  flex: 1;
+  height: ${({ $height }) => $height}px;
+  background: ${({ $trackColor }) => $trackColor};
+  border-radius: ${({ $height }) => $height}px;
+  overflow: hidden;
+`;
+var Fill = import_styled_components45.default.div`
+  height: 100%;
+  width: ${({ $percent }) => $percent}%;
+  background: ${({ $color }) => $color};
+  border-radius: ${({ $height }) => $height}px;
+  transition: width 0.2s ease;
+`;
+var ProgressBar = ({
+  value,
+  color = colors.blue_700,
+  trackColor = colors.grey_200,
+  height = 8,
+  showLabel = false
+}) => {
+  const percent = clampPercent(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Wrapper5, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Fill, { $height: height, $color: color, $percent: percent }) }),
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Text, { size: "s", weight: "600", children: [
+      Math.round(percent),
+      " %"
+    ] })
+  ] });
+};
+
+// src/Components/Timeline/Timeline.tsx
+var import_styled_components46 = __toESM(require("styled-components"));
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var List2 = import_styled_components46.default.div`
+  display: flex;
+  flex-direction: column;
+`;
+var Item2 = import_styled_components46.default.div`
+  display: flex;
+  gap: 12px;
+  align-items: stretch;
+`;
+var Rail = import_styled_components46.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 16px;
+`;
+var Dot2 = import_styled_components46.default.div`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-top: 4px;
+  flex: 0 0 auto;
+  background: ${({ $color }) => $color};
+`;
+var Line = import_styled_components46.default.div`
+  width: 2px;
+  flex: 1;
+  min-height: 16px;
+  background: ${({ $color }) => $color};
+`;
+var Content = import_styled_components46.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-bottom: ${({ $last }) => $last ? "0" : "16px"};
+`;
+var Timeline = ({
+  items,
+  lineColor = colors.grey_200,
+  emptyLabel = "Aucun \xE9v\xE9nement"
+}) => {
+  if (items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { size: "s", color: colors.grey_600, children: emptyLabel });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(List2, { children: items.map((item, index) => {
+    var _a;
+    const isLast = index === items.length - 1;
+    const dotColor = (_a = item.color) != null ? _a : colors.blue_700;
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Item2, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Rail, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Dot2, { $color: dotColor }),
+        !isLast && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Line, { $color: lineColor })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Content, { $last: isLast, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { size: "s", weight: item.highlighted ? "700" : "600", children: item.title }),
+        item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { size: "xs", color: colors.grey_600, children: item.subtitle }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { size: "xs", fontStyle: "italic", children: item.description })
+      ] })
+    ] }, item.id);
+  }) });
+};
+
+// src/Components/BorderedRow/BorderedRow.tsx
+var import_styled_components47 = __toESM(require("styled-components"));
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var Wrapper6 = import_styled_components47.default.div`
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  padding: ${({ $padding }) => $padding};
+  ${({ $accent, $borderWidth }) => $accent === "bar" ? `padding-left: ${$borderWidth + 16}px;` : ""}
+  border-radius: ${({ $borderRadius }) => $borderRadius};
+  background: ${({ $background }) => $background || "transparent"};
+  cursor: ${({ $clickable }) => $clickable ? "pointer" : "default"};
+  ${({ $bordered }) => $bordered ? `border: 1px solid ${colors.grey_300};` : ""}
+  ${({ $accent, $borderWidth, $borderColor }) => $accent === "edge" ? `border-left: ${$borderWidth}px solid ${$borderColor};` : ""}
+
+  ${({ $accent, $borderWidth, $borderColor }) => $accent === "bar" ? `
+    &::before {
+      content: '';
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 62%;
+      width: ${$borderWidth}px;
+      border-radius: ${$borderWidth}px;
+      background: ${$borderColor};
+    }
+  ` : ""}
+`;
+var BorderedRow = ({
+  borderColor = colors.blue_700,
+  borderWidth = 4,
+  background,
+  padding = "12px",
+  borderRadius = "8px",
+  accent = "edge",
+  bordered = false,
+  children,
+  onClick
+}) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  Wrapper6,
+  {
+    $borderColor: borderColor,
+    $borderWidth: borderWidth,
+    $background: background,
+    $padding: padding,
+    $borderRadius: borderRadius,
+    $accent: accent,
+    $bordered: bordered,
+    $clickable: !!onClick,
+    onClick,
+    children
+  }
+);
+
 // src/data/globalMethods.ts
 var formatDate = (dateString, type = "date", language = "en") => {
   if (!dateString) return "";
@@ -5460,6 +5635,7 @@ var optimizeImage_default = optimizeImage;
 0 && (module.exports = {
   Accordion,
   Avatar,
+  BorderedRow,
   Box,
   Bubble,
   Bulk,
@@ -5491,6 +5667,7 @@ var optimizeImage_default = optimizeImage;
   PageContainer,
   Pagination,
   Popover,
+  ProgressBar,
   Radio,
   Row,
   Select,
@@ -5512,6 +5689,7 @@ var optimizeImage_default = optimizeImage;
   Tabs,
   TagBubble,
   Text,
+  Timeline,
   Tooltip,
   colors,
   formatDate,

package/dist/index.mjs

@@ -414,6 +414,7 @@ var Text = (props) => {
     p,
     max,
     wrap,
+    lineClamp,
     onClick
   } = _a, rest = __objRest(_a, [
     "size",
@@ -431,9 +432,10 @@ var Text = (props) => {
     "p",
     "max",
     "wrap",
+    "lineClamp",
     "onClick"
   ]);
-  const textStyle = {
+  const textStyle = __spreadValues({
     fontSize: textSizes[size] || size,
     fontWeight: weight,
     color: color || colors[variant],
@@ -445,11 +447,15 @@ var Text = (props) => {
     fontStyle: fontStyle || "normal",
     cursor: onClick ? "pointer" : "inherit",
     maxWidth: max ? max + "ch" : "none",
-    display: max ? "inline-block" : "",
+    display: lineClamp ? "-webkit-box" : max ? "inline-block" : "",
     overflow: "hidden",
     textOverflow: max ? "ellipsis" : "",
     whiteSpace: wrap || ""
-  };
+  }, lineClamp ? {
+    WebkitLineClamp: lineClamp,
+    WebkitBoxOrient: "vertical",
+    wordBreak: "break-word"
+  } : {});
   if (p) {
     return /* @__PURE__ */ jsx6("p", __spreadProps(__spreadValues({ style: textStyle, onClick }, rest), { children }));
   } else {
@@ -1411,6 +1417,8 @@ var Drawer = ({
   isLoading = false,
   leftVariant,
   variant = "blue_700",
+  leftOutline = true,
+  rightOutline = false,
   footer
 }) => {
   const [isRendered, setIsRendered] = useState3(showDrawer);
@@ -1458,7 +1466,7 @@ var Drawer = ({
           leftButtonLabel && /* @__PURE__ */ jsx16(
             Button,
             {
-              outline: true,
+              outline: leftOutline,
               onClick: leftButtonAction,
               disabled: leftButtonDisabled,
               variant: leftVariant ? leftVariant : variant,
@@ -1469,6 +1477,7 @@ var Drawer = ({
           rightButtonLabel && /* @__PURE__ */ jsx16(
             Button,
             {
+              outline: rightOutline,
               onClick: rightButtonAction,
               isLoading,
               disabled: rightButtonDisabled,
@@ -1895,7 +1904,7 @@ var SearchInput = styled17.input`
 var Option = styled17.div`
   padding: 8px;
   cursor: pointer;
-  background-color: ${(props) => props.isActive ? colors.grey_100 : "transparent"};
+  background-color: ${(props) => props.$isActive ? colors.grey_100 : "transparent"};
 
   &:hover {
     background: ${colors.grey_100};
@@ -2052,7 +2061,7 @@ var Select = ({
               /* @__PURE__ */ jsx21(DropdownList, { children: filteredOptions.map((option, index) => /* @__PURE__ */ jsx21(
                 Option,
                 {
-                  isActive: index === activeIndex,
+                  $isActive: index === activeIndex,
                   onMouseEnter: () => setActiveIndex(index),
                   onClick: () => handleSelect(option),
                   style: { pointerEvents: "auto" },
@@ -3145,7 +3154,8 @@ var shouldForwardPropTable = (prop) => ![
   "height",
   "maxHeight",
   "fullWidth",
-  "borderRadius"
+  "borderRadius",
+  "hasShadow"
 ].includes(prop);
 var StyledTable = styled26.div.withConfig({
   shouldForwardProp: shouldForwardPropTable
@@ -3170,6 +3180,7 @@ var StyledContainer3 = styled26.div.withConfig({
   height: ${(props) => props.height || "100%"};
   border-radius: ${(props) => props.borderRadius || "8px"};
   border: 1.4px solid ${colors.grey_200};
+  box-shadow: ${(props) => props.hasShadow ? "0 2px 12px 0 rgba(198, 198, 198, 0.25)" : "none"};
 `;
 var Table = forwardRef5((props, ref) => {
   const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
@@ -5139,6 +5150,167 @@ var EmptyState = ({
   );
 };
 
+// src/Components/ProgressBar/ProgressBar.tsx
+import styled45 from "styled-components";
+import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
+var clampPercent = (value) => Math.max(0, Math.min(100, value));
+var Wrapper5 = styled45.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+`;
+var Track2 = styled45.div`
+  position: relative;
+  flex: 1;
+  height: ${({ $height }) => $height}px;
+  background: ${({ $trackColor }) => $trackColor};
+  border-radius: ${({ $height }) => $height}px;
+  overflow: hidden;
+`;
+var Fill = styled45.div`
+  height: 100%;
+  width: ${({ $percent }) => $percent}%;
+  background: ${({ $color }) => $color};
+  border-radius: ${({ $height }) => $height}px;
+  transition: width 0.2s ease;
+`;
+var ProgressBar = ({
+  value,
+  color = colors.blue_700,
+  trackColor = colors.grey_200,
+  height = 8,
+  showLabel = false
+}) => {
+  const percent = clampPercent(value);
+  return /* @__PURE__ */ jsxs30(Wrapper5, { children: [
+    /* @__PURE__ */ jsx56(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ jsx56(Fill, { $height: height, $color: color, $percent: percent }) }),
+    showLabel && /* @__PURE__ */ jsxs30(Text, { size: "s", weight: "600", children: [
+      Math.round(percent),
+      " %"
+    ] })
+  ] });
+};
+
+// src/Components/Timeline/Timeline.tsx
+import styled46 from "styled-components";
+import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+var List2 = styled46.div`
+  display: flex;
+  flex-direction: column;
+`;
+var Item2 = styled46.div`
+  display: flex;
+  gap: 12px;
+  align-items: stretch;
+`;
+var Rail = styled46.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 16px;
+`;
+var Dot2 = styled46.div`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-top: 4px;
+  flex: 0 0 auto;
+  background: ${({ $color }) => $color};
+`;
+var Line = styled46.div`
+  width: 2px;
+  flex: 1;
+  min-height: 16px;
+  background: ${({ $color }) => $color};
+`;
+var Content = styled46.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-bottom: ${({ $last }) => $last ? "0" : "16px"};
+`;
+var Timeline = ({
+  items,
+  lineColor = colors.grey_200,
+  emptyLabel = "Aucun \xE9v\xE9nement"
+}) => {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx57(Text, { size: "s", color: colors.grey_600, children: emptyLabel });
+  }
+  return /* @__PURE__ */ jsx57(List2, { children: items.map((item, index) => {
+    var _a;
+    const isLast = index === items.length - 1;
+    const dotColor = (_a = item.color) != null ? _a : colors.blue_700;
+    return /* @__PURE__ */ jsxs31(Item2, { children: [
+      /* @__PURE__ */ jsxs31(Rail, { children: [
+        /* @__PURE__ */ jsx57(Dot2, { $color: dotColor }),
+        !isLast && /* @__PURE__ */ jsx57(Line, { $color: lineColor })
+      ] }),
+      /* @__PURE__ */ jsxs31(Content, { $last: isLast, children: [
+        /* @__PURE__ */ jsx57(Text, { size: "s", weight: item.highlighted ? "700" : "600", children: item.title }),
+        item.subtitle && /* @__PURE__ */ jsx57(Text, { size: "xs", color: colors.grey_600, children: item.subtitle }),
+        item.description && /* @__PURE__ */ jsx57(Text, { size: "xs", fontStyle: "italic", children: item.description })
+      ] })
+    ] }, item.id);
+  }) });
+};
+
+// src/Components/BorderedRow/BorderedRow.tsx
+import styled47 from "styled-components";
+import { jsx as jsx58 } from "react/jsx-runtime";
+var Wrapper6 = styled47.div`
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  padding: ${({ $padding }) => $padding};
+  ${({ $accent, $borderWidth }) => $accent === "bar" ? `padding-left: ${$borderWidth + 16}px;` : ""}
+  border-radius: ${({ $borderRadius }) => $borderRadius};
+  background: ${({ $background }) => $background || "transparent"};
+  cursor: ${({ $clickable }) => $clickable ? "pointer" : "default"};
+  ${({ $bordered }) => $bordered ? `border: 1px solid ${colors.grey_300};` : ""}
+  ${({ $accent, $borderWidth, $borderColor }) => $accent === "edge" ? `border-left: ${$borderWidth}px solid ${$borderColor};` : ""}
+
+  ${({ $accent, $borderWidth, $borderColor }) => $accent === "bar" ? `
+    &::before {
+      content: '';
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 62%;
+      width: ${$borderWidth}px;
+      border-radius: ${$borderWidth}px;
+      background: ${$borderColor};
+    }
+  ` : ""}
+`;
+var BorderedRow = ({
+  borderColor = colors.blue_700,
+  borderWidth = 4,
+  background,
+  padding = "12px",
+  borderRadius = "8px",
+  accent = "edge",
+  bordered = false,
+  children,
+  onClick
+}) => /* @__PURE__ */ jsx58(
+  Wrapper6,
+  {
+    $borderColor: borderColor,
+    $borderWidth: borderWidth,
+    $background: background,
+    $padding: padding,
+    $borderRadius: borderRadius,
+    $accent: accent,
+    $bordered: bordered,
+    $clickable: !!onClick,
+    onClick,
+    children
+  }
+);
+
 // src/data/globalMethods.ts
 var formatDate = (dateString, type = "date", language = "en") => {
   if (!dateString) return "";
@@ -5385,6 +5557,7 @@ var optimizeImage_default = optimizeImage;
 export {
   Accordion,
   Avatar,
+  BorderedRow,
   Box,
   Bubble,
   Bulk,
@@ -5416,6 +5589,7 @@ export {
   PageContainer,
   Pagination,
   Popover,
+  ProgressBar,
   Radio,
   Row,
   Select,
@@ -5437,6 +5611,7 @@ export {
   Tabs,
   TagBubble,
   Text,
+  Timeline,
   Tooltip,
   colors,
   formatDate,

package/package.json

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