design-zystem 1.0.250 → 1.0.252

package/dist/index.d.mts

@@ -742,6 +742,8 @@ interface TabItem {
     id: string | number;
     label: string;
     disabled?: boolean;
+    dot?: boolean;
+    dotColor?: string;
 }
 type TabsVariant = 'line' | 'pills';
 interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -909,6 +911,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;
@@ -1028,4 +1049,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, BorderedRow, 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, optimizeImage, truncateFileName, truncateText };

package/dist/index.d.ts

@@ -742,6 +742,8 @@ interface TabItem {
     id: string | number;
     label: string;
     disabled?: boolean;
+    dot?: boolean;
+    dotColor?: string;
 }
 type TabsVariant = 'line' | 'pills';
 interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -909,6 +911,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;
@@ -1028,4 +1049,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, BorderedRow, 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, optimizeImage, truncateFileName, truncateText };

package/dist/index.js

@@ -76,6 +76,7 @@ __export(index_exports, {
   Drawer: () => Drawer,
   EmptyState: () => EmptyState,
   FileUploadZone: () => FileUploadZone,
+  FloatingButton: () => FloatingButton,
   Grid: () => Grid,
   Icon: () => Icon,
   IconTabs: () => IconTabs,
@@ -3890,6 +3891,10 @@ var TabButton = import_styled_components38.default.button.withConfig({
   shouldForwardProp: shouldForwardTab
 })`
   appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
   border: 0;
   background: ${(p) => {
   if (p.$variant !== "pills") return "transparent";
@@ -3931,6 +3936,14 @@ var TabButton = import_styled_components38.default.button.withConfig({
     opacity: 0.6;
   }
 `;
+var TabDot = import_styled_components38.default.span`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: none;
+  background: ${(p) => p.$color || colors.red_950};
+`;
 var Tab = (_a) => {
   var _b = _a, {
     id,
@@ -4021,7 +4034,7 @@ var Tabs = (_a) => {
   const isPillsFullWidth = variant === "pills" && align === "start";
   const rendered = (0, import_react20.useMemo)(() => {
     if (items && items.length) {
-      return items.map((it) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      return items.map((it) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         Tab,
         {
           id: it.id,
@@ -4031,7 +4044,10 @@ var Tabs = (_a) => {
           fullWidth: isPillsFullWidth,
           onClick: () => handleSelect(it.id),
           innerRef: setTabRef(it.id),
-          children: it.label
+          children: [
+            it.label,
+            it.dot && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabDot, { $color: it.dotColor })
+          ]
         },
         it.id
       ));
@@ -5235,17 +5251,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;
@@ -5253,7 +5401,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};
@@ -5268,9 +5416,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),
       " %"
     ] })
@@ -5278,24 +5426,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%;
@@ -5303,13 +5451,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;
@@ -5321,30 +5469,30 @@ 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`
+var import_styled_components48 = __toESM(require("styled-components"));
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var Wrapper6 = import_styled_components48.default.div`
   box-sizing: border-box;
   position: relative;
   width: 100%;
@@ -5380,7 +5528,7 @@ var BorderedRow = ({
   bordered = false,
   children,
   onClick
-}) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
   Wrapper6,
   {
     $borderColor: borderColor,
@@ -5658,6 +5806,7 @@ var optimizeImage_default = optimizeImage;
   Drawer,
   EmptyState,
   FileUploadZone,
+  FloatingButton,
   Grid,
   Icon,
   IconTabs,

package/dist/index.mjs

@@ -3808,6 +3808,10 @@ var TabButton = styled38.button.withConfig({
   shouldForwardProp: shouldForwardTab
 })`
   appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
   border: 0;
   background: ${(p) => {
   if (p.$variant !== "pills") return "transparent";
@@ -3849,6 +3853,14 @@ var TabButton = styled38.button.withConfig({
     opacity: 0.6;
   }
 `;
+var TabDot = styled38.span`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: none;
+  background: ${(p) => p.$color || colors.red_950};
+`;
 var Tab = (_a) => {
   var _b = _a, {
     id,
@@ -3939,7 +3951,7 @@ var Tabs = (_a) => {
   const isPillsFullWidth = variant === "pills" && align === "start";
   const rendered = useMemo(() => {
     if (items && items.length) {
-      return items.map((it) => /* @__PURE__ */ jsx45(
+      return items.map((it) => /* @__PURE__ */ jsxs20(
         Tab,
         {
           id: it.id,
@@ -3949,7 +3961,10 @@ var Tabs = (_a) => {
           fullWidth: isPillsFullWidth,
           onClick: () => handleSelect(it.id),
           innerRef: setTabRef(it.id),
-          children: it.label
+          children: [
+            it.label,
+            it.dot && /* @__PURE__ */ jsx45(TabDot, { $color: it.dotColor })
+          ]
         },
         it.id
       ));
@@ -5158,17 +5173,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;
@@ -5176,7 +5323,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};
@@ -5191,9 +5338,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),
       " %"
     ] })
@@ -5201,24 +5348,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%;
@@ -5226,13 +5373,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;
@@ -5244,30 +5391,30 @@ 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`
+import styled48 from "styled-components";
+import { jsx as jsx59 } from "react/jsx-runtime";
+var Wrapper6 = styled48.div`
   box-sizing: border-box;
   position: relative;
   width: 100%;
@@ -5303,7 +5450,7 @@ var BorderedRow = ({
   bordered = false,
   children,
   onClick
-}) => /* @__PURE__ */ jsx58(
+}) => /* @__PURE__ */ jsx59(
   Wrapper6,
   {
     $borderColor: borderColor,
@@ -5580,6 +5727,7 @@ export {
   Drawer,
   EmptyState,
   FileUploadZone,
+  FloatingButton,
   Grid,
   Icon,
   IconTabs,

package/package.json

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