design-zystem 1.0.251 → 1.0.253

package/dist/index.d.mts

@@ -32,6 +32,8 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     justifyContent?: string;
     borderRadius?: string;
     border?: string;
+    /** Colored left accent bar (status/score encoding), painted over the box border. */
+    borderColor?: string;
     style?: CSSProperties;
 }
 declare const Box: ({ children, hasShadow, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
@@ -911,6 +913,25 @@ interface EmptyStateProps {
 }
 declare const EmptyState: ({ icon, title, description, actionLabel, onAction, }: EmptyStateProps) => react_jsx_runtime.JSX.Element;
 
+interface FloatingAction {
+    id: string;
+    label: string;
+    icon: string;
+    badge?: number;
+    onClick: () => void;
+}
+interface FloatingButtonProps {
+    isOpen: boolean;
+    onToggle: () => void;
+    actions: FloatingAction[];
+    mainBadge?: number;
+    label?: string;
+    icon?: string;
+    openIcon?: string;
+    variant?: keyof typeof colors;
+}
+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. */
     value: number;
@@ -955,35 +976,6 @@ interface TimelineProps {
  */
 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"
@@ -1002,6 +994,11 @@ declare const formatDistance: (distanceKm: number | string | null | undefined, l
 declare const formatDuration: (minutes: number | null | undefined, language?: string) => string;
 declare const truncateText: (text: string | null | undefined, maxLength?: number) => string;
 declare const truncateFileName: (fileName: string | null | undefined, maxLength?: number) => string;
+declare const formatEuro: (amount?: number | null) => string;
+declare const formatName: (person?: {
+    firstname?: string | null;
+    lastname?: string | null;
+} | null, fallback?: string) => string;
 
 /**
  * Optimiser image:
@@ -1030,4 +1027,4 @@ interface OptimizeImageOptions {
 }
 declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
 
-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 };
+export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, 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, Tooltip, colors, formatDate, formatDistance, formatDuration, formatEuro, formatName, optimizeImage, truncateFileName, truncateText };

package/dist/index.d.ts

@@ -32,6 +32,8 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     justifyContent?: string;
     borderRadius?: string;
     border?: string;
+    /** Colored left accent bar (status/score encoding), painted over the box border. */
+    borderColor?: string;
     style?: CSSProperties;
 }
 declare const Box: ({ children, hasShadow, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
@@ -911,6 +913,25 @@ interface EmptyStateProps {
 }
 declare const EmptyState: ({ icon, title, description, actionLabel, onAction, }: EmptyStateProps) => react_jsx_runtime.JSX.Element;
 
+interface FloatingAction {
+    id: string;
+    label: string;
+    icon: string;
+    badge?: number;
+    onClick: () => void;
+}
+interface FloatingButtonProps {
+    isOpen: boolean;
+    onToggle: () => void;
+    actions: FloatingAction[];
+    mainBadge?: number;
+    label?: string;
+    icon?: string;
+    openIcon?: string;
+    variant?: keyof typeof colors;
+}
+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. */
     value: number;
@@ -955,35 +976,6 @@ interface TimelineProps {
  */
 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"
@@ -1002,6 +994,11 @@ declare const formatDistance: (distanceKm: number | string | null | undefined, l
 declare const formatDuration: (minutes: number | null | undefined, language?: string) => string;
 declare const truncateText: (text: string | null | undefined, maxLength?: number) => string;
 declare const truncateFileName: (fileName: string | null | undefined, maxLength?: number) => string;
+declare const formatEuro: (amount?: number | null) => string;
+declare const formatName: (person?: {
+    firstname?: string | null;
+    lastname?: string | null;
+} | null, fallback?: string) => string;
 
 /**
  * Optimiser image:
@@ -1030,4 +1027,4 @@ interface OptimizeImageOptions {
 }
 declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
 
-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 };
+export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, 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, Tooltip, colors, formatDate, formatDistance, formatDuration, formatEuro, formatName, optimizeImage, truncateFileName, truncateText };

package/dist/index.js

@@ -61,7 +61,6 @@ var index_exports = {};
 __export(index_exports, {
   Accordion: () => Accordion,
   Avatar: () => Avatar,
-  BorderedRow: () => BorderedRow,
   Box: () => Box,
   Bubble: () => Bubble,
   Bulk: () => Bulk,
@@ -76,6 +75,7 @@ __export(index_exports, {
   Drawer: () => Drawer,
   EmptyState: () => EmptyState,
   FileUploadZone: () => FileUploadZone,
+  FloatingButton: () => FloatingButton,
   Grid: () => Grid,
   Icon: () => Icon,
   IconTabs: () => IconTabs,
@@ -121,6 +121,8 @@ __export(index_exports, {
   formatDate: () => formatDate,
   formatDistance: () => formatDistance,
   formatDuration: () => formatDuration,
+  formatEuro: () => formatEuro,
+  formatName: () => formatName,
   optimizeImage: () => optimizeImage_default,
   truncateFileName: () => truncateFileName,
   truncateText: () => truncateText
@@ -329,6 +331,7 @@ var shouldForwardProp2 = (prop) => ![
   "hasShadow",
   "borderRadius",
   "border",
+  "borderColor",
   "height"
 ].includes(prop);
 var StyledBox = import_styled_components2.default.div.withConfig({ shouldForwardProp: shouldForwardProp2 })`
@@ -338,6 +341,7 @@ var StyledBox = import_styled_components2.default.div.withConfig({ shouldForward
   var _a;
   return (_a = props.border) != null ? _a : `1px solid ${colors.grey_300}`;
 }};
+  ${(props) => props.borderColor ? `border-left: 4px solid ${colors[props.borderColor] || props.borderColor};` : ""}
 
   border-radius: ${(props) => props.borderRadius || "8px"};
 
@@ -5250,17 +5254,149 @@ var EmptyState = ({
   );
 };
 
-// src/Components/ProgressBar/ProgressBar.tsx
+// src/Components/FloatingButton/FloatingButton.tsx
 var import_styled_components45 = __toESM(require("styled-components"));
 var import_jsx_runtime56 = require("react/jsx-runtime");
+var FloatingButton = ({
+  isOpen,
+  onToggle,
+  actions,
+  mainBadge = 0,
+  label = "Menu",
+  icon = "comment",
+  openIcon = "xmark",
+  variant = "blue_700"
+}) => {
+  const accent = colors[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Container6, { children: [
+    actions.map((action, index) => {
+      var _a;
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+        SubButton,
+        {
+          type: "button",
+          "aria-label": action.label,
+          $isOpen: isOpen,
+          $transform: arcTransform(index, actions.length),
+          onClick: action.onClick,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: action.icon, family: "regular", size: "s", color: accent }),
+            ((_a = action.badge) != null ? _a : 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CountBadge, { children: action.badge })
+          ]
+        },
+        action.id
+      );
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+      MainButton,
+      {
+        type: "button",
+        "aria-label": label,
+        "aria-expanded": isOpen,
+        $accent: accent,
+        onClick: onToggle,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            Icon,
+            {
+              name: isOpen ? openIcon : icon,
+              family: "regular",
+              size: "m",
+              color: colors.white
+            }
+          ),
+          !isOpen && mainBadge > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CountBadge, { children: mainBadge })
+        ]
+      }
+    )
+  ] });
+};
+var FAB_SIZE = 56;
+var SUB_SIZE = 48;
+var ARC_RADIUS = 64;
+var ARC_START_ANGLE = 90;
+var ARC_MAX_STEP = 65;
+var ARC_MAX_SPAN = 90;
+var arcTransform = (index, total) => {
+  const step = total > 1 ? Math.min(ARC_MAX_STEP, ARC_MAX_SPAN / (total - 1)) : 0;
+  const angle = (ARC_START_ANGLE + index * step) * Math.PI / 180;
+  const x = Math.round(Math.cos(angle) * ARC_RADIUS);
+  const y = Math.round(-Math.sin(angle) * ARC_RADIUS);
+  return `translate(${x}px, ${y}px)`;
+};
+var Container6 = import_styled_components45.default.div`
+  position: fixed;
+  right: 32px;
+  bottom: 32px;
+  width: ${FAB_SIZE}px;
+  height: ${FAB_SIZE}px;
+  z-index: 1000;
+`;
+var MainButton = import_styled_components45.default.button`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background: ${({ $accent }) => $accent};
+  cursor: pointer;
+  box-shadow:
+    0 8px 5px rgba(0, 0, 0, 0.1),
+    0 20px 12.5px rgba(0, 0, 0, 0.1);
+`;
+var SubButton = import_styled_components45.default.button`
+  position: absolute;
+  left: ${(FAB_SIZE - SUB_SIZE) / 2}px;
+  top: ${(FAB_SIZE - SUB_SIZE) / 2}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${SUB_SIZE}px;
+  height: ${SUB_SIZE}px;
+  border: 1px solid ${colors.grey_300};
+  border-radius: 50%;
+  background: ${colors.white};
+  cursor: pointer;
+  box-shadow:
+    0 4px 3px rgba(0, 0, 0, 0.1),
+    0 10px 7.5px rgba(0, 0, 0, 0.1);
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease;
+  transform: ${({ $isOpen, $transform }) => $isOpen ? $transform : "scale(0.4)"};
+  opacity: ${({ $isOpen }) => $isOpen ? 1 : 0};
+  pointer-events: ${({ $isOpen }) => $isOpen ? "auto" : "none"};
+`;
+var CountBadge = import_styled_components45.default.span`
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: ${colors.red_950};
+  color: ${colors.white};
+  font-size: 11px;
+  font-weight: 700;
+`;
+
+// src/Components/ProgressBar/ProgressBar.tsx
+var import_styled_components46 = __toESM(require("styled-components"));
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var clampPercent = (value) => Math.max(0, Math.min(100, value));
-var Wrapper5 = import_styled_components45.default.div`
+var Wrapper5 = import_styled_components46.default.div`
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
 `;
-var Track2 = import_styled_components45.default.div`
+var Track2 = import_styled_components46.default.div`
   position: relative;
   flex: 1;
   height: ${({ $height }) => $height}px;
@@ -5268,7 +5404,7 @@ var Track2 = import_styled_components45.default.div`
   border-radius: ${({ $height }) => $height}px;
   overflow: hidden;
 `;
-var Fill = import_styled_components45.default.div`
+var Fill = import_styled_components46.default.div`
   height: 100%;
   width: ${({ $percent }) => $percent}%;
   background: ${({ $color }) => $color};
@@ -5283,9 +5419,9 @@ var ProgressBar = ({
   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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Wrapper5, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Fill, { $height: height, $color: color, $percent: percent }) }),
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Text, { size: "s", weight: "600", children: [
       Math.round(percent),
       " %"
     ] })
@@ -5293,24 +5429,24 @@ var ProgressBar = ({
 };
 
 // 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`
+var import_styled_components47 = __toESM(require("styled-components"));
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var List2 = import_styled_components47.default.div`
   display: flex;
   flex-direction: column;
 `;
-var Item2 = import_styled_components46.default.div`
+var Item2 = import_styled_components47.default.div`
   display: flex;
   gap: 12px;
   align-items: stretch;
 `;
-var Rail = import_styled_components46.default.div`
+var Rail = import_styled_components47.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 16px;
 `;
-var Dot2 = import_styled_components46.default.div`
+var Dot2 = import_styled_components47.default.div`
   width: 10px;
   height: 10px;
   border-radius: 50%;
@@ -5318,13 +5454,13 @@ var Dot2 = import_styled_components46.default.div`
   flex: 0 0 auto;
   background: ${({ $color }) => $color};
 `;
-var Line = import_styled_components46.default.div`
+var Line = import_styled_components47.default.div`
   width: 2px;
   flex: 1;
   min-height: 16px;
   background: ${({ $color }) => $color};
 `;
-var Content = import_styled_components46.default.div`
+var Content = import_styled_components47.default.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -5336,81 +5472,26 @@ var Timeline = ({
   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_runtime58.jsx)(Text, { size: "s", color: colors.grey_600, children: emptyLabel });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(List2, { children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.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 })
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Item2, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Rail, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Dot2, { $color: dotColor }),
+        !isLast && /* @__PURE__ */ (0, import_jsx_runtime58.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 })
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Content, { $last: isLast, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { size: "s", weight: item.highlighted ? "700" : "600", children: item.title }),
+        item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { size: "xs", color: colors.grey_600, children: item.subtitle }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime58.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 "";
@@ -5520,6 +5601,14 @@ var truncateFileName = (fileName, maxLength = 20) => {
   }
   return fileName;
 };
+var formatEuro = (amount) => `${(amount != null ? amount : 0).toLocaleString("fr-FR", {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+})} \u20AC`;
+var formatName = (person, fallback = "") => {
+  var _a, _b;
+  return person ? `${(_a = person.firstname) != null ? _a : ""} ${(_b = person.lastname) != null ? _b : ""}`.trim() || fallback : fallback;
+};
 
 // src/services/optimizeImage/optimizeImage.ts
 var hasDocument = () => typeof document !== "undefined";
@@ -5658,7 +5747,6 @@ var optimizeImage_default = optimizeImage;
 0 && (module.exports = {
   Accordion,
   Avatar,
-  BorderedRow,
   Box,
   Bubble,
   Bulk,
@@ -5673,6 +5761,7 @@ var optimizeImage_default = optimizeImage;
   Drawer,
   EmptyState,
   FileUploadZone,
+  FloatingButton,
   Grid,
   Icon,
   IconTabs,
@@ -5718,6 +5807,8 @@ var optimizeImage_default = optimizeImage;
   formatDate,
   formatDistance,
   formatDuration,
+  formatEuro,
+  formatName,
   optimizeImage,
   truncateFileName,
   truncateText

package/dist/index.mjs

@@ -232,6 +232,7 @@ var shouldForwardProp2 = (prop) => ![
   "hasShadow",
   "borderRadius",
   "border",
+  "borderColor",
   "height"
 ].includes(prop);
 var StyledBox = styled2.div.withConfig({ shouldForwardProp: shouldForwardProp2 })`
@@ -241,6 +242,7 @@ var StyledBox = styled2.div.withConfig({ shouldForwardProp: shouldForwardProp2 }
   var _a;
   return (_a = props.border) != null ? _a : `1px solid ${colors.grey_300}`;
 }};
+  ${(props) => props.borderColor ? `border-left: 4px solid ${colors[props.borderColor] || props.borderColor};` : ""}
 
   border-radius: ${(props) => props.borderRadius || "8px"};
 
@@ -5173,17 +5175,149 @@ var EmptyState = ({
   );
 };
 
-// src/Components/ProgressBar/ProgressBar.tsx
+// src/Components/FloatingButton/FloatingButton.tsx
 import styled45 from "styled-components";
 import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
+var FloatingButton = ({
+  isOpen,
+  onToggle,
+  actions,
+  mainBadge = 0,
+  label = "Menu",
+  icon = "comment",
+  openIcon = "xmark",
+  variant = "blue_700"
+}) => {
+  const accent = colors[variant];
+  return /* @__PURE__ */ jsxs30(Container6, { children: [
+    actions.map((action, index) => {
+      var _a;
+      return /* @__PURE__ */ jsxs30(
+        SubButton,
+        {
+          type: "button",
+          "aria-label": action.label,
+          $isOpen: isOpen,
+          $transform: arcTransform(index, actions.length),
+          onClick: action.onClick,
+          children: [
+            /* @__PURE__ */ jsx56(Icon, { name: action.icon, family: "regular", size: "s", color: accent }),
+            ((_a = action.badge) != null ? _a : 0) > 0 && /* @__PURE__ */ jsx56(CountBadge, { children: action.badge })
+          ]
+        },
+        action.id
+      );
+    }),
+    /* @__PURE__ */ jsxs30(
+      MainButton,
+      {
+        type: "button",
+        "aria-label": label,
+        "aria-expanded": isOpen,
+        $accent: accent,
+        onClick: onToggle,
+        children: [
+          /* @__PURE__ */ jsx56(
+            Icon,
+            {
+              name: isOpen ? openIcon : icon,
+              family: "regular",
+              size: "m",
+              color: colors.white
+            }
+          ),
+          !isOpen && mainBadge > 0 && /* @__PURE__ */ jsx56(CountBadge, { children: mainBadge })
+        ]
+      }
+    )
+  ] });
+};
+var FAB_SIZE = 56;
+var SUB_SIZE = 48;
+var ARC_RADIUS = 64;
+var ARC_START_ANGLE = 90;
+var ARC_MAX_STEP = 65;
+var ARC_MAX_SPAN = 90;
+var arcTransform = (index, total) => {
+  const step = total > 1 ? Math.min(ARC_MAX_STEP, ARC_MAX_SPAN / (total - 1)) : 0;
+  const angle = (ARC_START_ANGLE + index * step) * Math.PI / 180;
+  const x = Math.round(Math.cos(angle) * ARC_RADIUS);
+  const y = Math.round(-Math.sin(angle) * ARC_RADIUS);
+  return `translate(${x}px, ${y}px)`;
+};
+var Container6 = styled45.div`
+  position: fixed;
+  right: 32px;
+  bottom: 32px;
+  width: ${FAB_SIZE}px;
+  height: ${FAB_SIZE}px;
+  z-index: 1000;
+`;
+var MainButton = styled45.button`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background: ${({ $accent }) => $accent};
+  cursor: pointer;
+  box-shadow:
+    0 8px 5px rgba(0, 0, 0, 0.1),
+    0 20px 12.5px rgba(0, 0, 0, 0.1);
+`;
+var SubButton = styled45.button`
+  position: absolute;
+  left: ${(FAB_SIZE - SUB_SIZE) / 2}px;
+  top: ${(FAB_SIZE - SUB_SIZE) / 2}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${SUB_SIZE}px;
+  height: ${SUB_SIZE}px;
+  border: 1px solid ${colors.grey_300};
+  border-radius: 50%;
+  background: ${colors.white};
+  cursor: pointer;
+  box-shadow:
+    0 4px 3px rgba(0, 0, 0, 0.1),
+    0 10px 7.5px rgba(0, 0, 0, 0.1);
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease;
+  transform: ${({ $isOpen, $transform }) => $isOpen ? $transform : "scale(0.4)"};
+  opacity: ${({ $isOpen }) => $isOpen ? 1 : 0};
+  pointer-events: ${({ $isOpen }) => $isOpen ? "auto" : "none"};
+`;
+var CountBadge = styled45.span`
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: ${colors.red_950};
+  color: ${colors.white};
+  font-size: 11px;
+  font-weight: 700;
+`;
+
+// src/Components/ProgressBar/ProgressBar.tsx
+import styled46 from "styled-components";
+import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
 var clampPercent = (value) => Math.max(0, Math.min(100, value));
-var Wrapper5 = styled45.div`
+var Wrapper5 = styled46.div`
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
 `;
-var Track2 = styled45.div`
+var Track2 = styled46.div`
   position: relative;
   flex: 1;
   height: ${({ $height }) => $height}px;
@@ -5191,7 +5325,7 @@ var Track2 = styled45.div`
   border-radius: ${({ $height }) => $height}px;
   overflow: hidden;
 `;
-var Fill = styled45.div`
+var Fill = styled46.div`
   height: 100%;
   width: ${({ $percent }) => $percent}%;
   background: ${({ $color }) => $color};
@@ -5206,9 +5340,9 @@ var ProgressBar = ({
   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: [
+  return /* @__PURE__ */ jsxs31(Wrapper5, { children: [
+    /* @__PURE__ */ jsx57(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ jsx57(Fill, { $height: height, $color: color, $percent: percent }) }),
+    showLabel && /* @__PURE__ */ jsxs31(Text, { size: "s", weight: "600", children: [
       Math.round(percent),
       " %"
     ] })
@@ -5216,24 +5350,24 @@ var ProgressBar = ({
 };
 
 // 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`
+import styled47 from "styled-components";
+import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
+var List2 = styled47.div`
   display: flex;
   flex-direction: column;
 `;
-var Item2 = styled46.div`
+var Item2 = styled47.div`
   display: flex;
   gap: 12px;
   align-items: stretch;
 `;
-var Rail = styled46.div`
+var Rail = styled47.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 16px;
 `;
-var Dot2 = styled46.div`
+var Dot2 = styled47.div`
   width: 10px;
   height: 10px;
   border-radius: 50%;
@@ -5241,13 +5375,13 @@ var Dot2 = styled46.div`
   flex: 0 0 auto;
   background: ${({ $color }) => $color};
 `;
-var Line = styled46.div`
+var Line = styled47.div`
   width: 2px;
   flex: 1;
   min-height: 16px;
   background: ${({ $color }) => $color};
 `;
-var Content = styled46.div`
+var Content = styled47.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -5259,81 +5393,26 @@ var Timeline = ({
   emptyLabel = "Aucun \xE9v\xE9nement"
 }) => {
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx57(Text, { size: "s", color: colors.grey_600, children: emptyLabel });
+    return /* @__PURE__ */ jsx58(Text, { size: "s", color: colors.grey_600, children: emptyLabel });
   }
-  return /* @__PURE__ */ jsx57(List2, { children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx58(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 })
+    return /* @__PURE__ */ jsxs32(Item2, { children: [
+      /* @__PURE__ */ jsxs32(Rail, { children: [
+        /* @__PURE__ */ jsx58(Dot2, { $color: dotColor }),
+        !isLast && /* @__PURE__ */ jsx58(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 })
+      /* @__PURE__ */ jsxs32(Content, { $last: isLast, children: [
+        /* @__PURE__ */ jsx58(Text, { size: "s", weight: item.highlighted ? "700" : "600", children: item.title }),
+        item.subtitle && /* @__PURE__ */ jsx58(Text, { size: "xs", color: colors.grey_600, children: item.subtitle }),
+        item.description && /* @__PURE__ */ jsx58(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 "";
@@ -5443,6 +5522,14 @@ var truncateFileName = (fileName, maxLength = 20) => {
   }
   return fileName;
 };
+var formatEuro = (amount) => `${(amount != null ? amount : 0).toLocaleString("fr-FR", {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+})} \u20AC`;
+var formatName = (person, fallback = "") => {
+  var _a, _b;
+  return person ? `${(_a = person.firstname) != null ? _a : ""} ${(_b = person.lastname) != null ? _b : ""}`.trim() || fallback : fallback;
+};
 
 // src/services/optimizeImage/optimizeImage.ts
 var hasDocument = () => typeof document !== "undefined";
@@ -5580,7 +5667,6 @@ var optimizeImage_default = optimizeImage;
 export {
   Accordion,
   Avatar,
-  BorderedRow,
   Box,
   Bubble,
   Bulk,
@@ -5595,6 +5681,7 @@ export {
   Drawer,
   EmptyState,
   FileUploadZone,
+  FloatingButton,
   Grid,
   Icon,
   IconTabs,
@@ -5640,6 +5727,8 @@ export {
   formatDate,
   formatDistance,
   formatDuration,
+  formatEuro,
+  formatName,
   optimizeImage_default as optimizeImage,
   truncateFileName,
   truncateText

package/package.json

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