design-zystem 1.0.234 → 1.0.236

package/dist/index.d.mts

@@ -186,8 +186,9 @@ interface DrawerProps {
     isLoading?: boolean;
     leftVariant?: string;
     variant?: string;
+    footer?: ReactNode;
 }
-declare const Drawer: ({ showDrawer, closeDrawer, title, width, children, leftButtonLabel, leftButtonAction, rightButtonLabel, rightButtonAction, isLoading, leftVariant, variant, }: DrawerProps) => react_jsx_runtime.JSX.Element | null;
+declare const Drawer: ({ showDrawer, closeDrawer, title, width, children, leftButtonLabel, leftButtonAction, rightButtonLabel, rightButtonAction, isLoading, leftVariant, variant, footer, }: DrawerProps) => react_jsx_runtime.JSX.Element | null;
 
 type SizeKey = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 interface TagBubbleProps extends HTMLAttributes<HTMLDivElement> {
@@ -224,6 +225,7 @@ interface BubbleProps {
     maxChars?: number;
     borderRadius?: string;
     width?: string;
+    style?: CSSProperties;
 }
 declare const Bubble: ({ children, ...otherProps }: BubbleProps) => react_jsx_runtime.JSX.Element;
 
@@ -510,6 +512,8 @@ interface AccordionProps {
     items?: AccordionItem[];
     /** Mode single — titre du panneau */
     title?: ReactNode;
+    /** Slot à droite du titre, avant le chevron (badge, action, counter…) */
+    titleEnd?: ReactNode;
     /** Mode single — contenu */
     children?: ReactNode;
     defaultOpen?: boolean;
@@ -527,7 +531,7 @@ interface AccordionProps {
     maxHeight?: number;
     backgroundHeader?: keyof typeof colors | string;
 }
-declare const Accordion: ({ items, title, children, defaultOpen, open: controlledOpen, onToggle, openItemId: controlledItemId, onItemToggle, needCheckbox, checkboxValue, onCheck, bordered, disabled, maxHeight, backgroundHeader, }: AccordionProps) => react_jsx_runtime.JSX.Element;
+declare const Accordion: ({ items, title, titleEnd, children, defaultOpen, open: controlledOpen, onToggle, openItemId: controlledItemId, onItemToggle, needCheckbox, checkboxValue, onCheck, bordered, disabled, maxHeight, backgroundHeader, }: AccordionProps) => react_jsx_runtime.JSX.Element;
 
 interface ColorPickerProps {
     label?: string;

package/dist/index.d.ts

@@ -186,8 +186,9 @@ interface DrawerProps {
     isLoading?: boolean;
     leftVariant?: string;
     variant?: string;
+    footer?: ReactNode;
 }
-declare const Drawer: ({ showDrawer, closeDrawer, title, width, children, leftButtonLabel, leftButtonAction, rightButtonLabel, rightButtonAction, isLoading, leftVariant, variant, }: DrawerProps) => react_jsx_runtime.JSX.Element | null;
+declare const Drawer: ({ showDrawer, closeDrawer, title, width, children, leftButtonLabel, leftButtonAction, rightButtonLabel, rightButtonAction, isLoading, leftVariant, variant, footer, }: DrawerProps) => react_jsx_runtime.JSX.Element | null;
 
 type SizeKey = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 interface TagBubbleProps extends HTMLAttributes<HTMLDivElement> {
@@ -224,6 +225,7 @@ interface BubbleProps {
     maxChars?: number;
     borderRadius?: string;
     width?: string;
+    style?: CSSProperties;
 }
 declare const Bubble: ({ children, ...otherProps }: BubbleProps) => react_jsx_runtime.JSX.Element;
 
@@ -510,6 +512,8 @@ interface AccordionProps {
     items?: AccordionItem[];
     /** Mode single — titre du panneau */
     title?: ReactNode;
+    /** Slot à droite du titre, avant le chevron (badge, action, counter…) */
+    titleEnd?: ReactNode;
     /** Mode single — contenu */
     children?: ReactNode;
     defaultOpen?: boolean;
@@ -527,7 +531,7 @@ interface AccordionProps {
     maxHeight?: number;
     backgroundHeader?: keyof typeof colors | string;
 }
-declare const Accordion: ({ items, title, children, defaultOpen, open: controlledOpen, onToggle, openItemId: controlledItemId, onItemToggle, needCheckbox, checkboxValue, onCheck, bordered, disabled, maxHeight, backgroundHeader, }: AccordionProps) => react_jsx_runtime.JSX.Element;
+declare const Accordion: ({ items, title, titleEnd, children, defaultOpen, open: controlledOpen, onToggle, openItemId: controlledItemId, onItemToggle, needCheckbox, checkboxValue, onCheck, bordered, disabled, maxHeight, backgroundHeader, }: AccordionProps) => react_jsx_runtime.JSX.Element;
 
 interface ColorPickerProps {
     label?: string;

package/dist/index.js

@@ -1493,7 +1493,8 @@ var Drawer = ({
   rightButtonAction,
   isLoading = false,
   leftVariant,
-  variant = "blue_700"
+  variant = "blue_700",
+  footer
 }) => {
   const [isRendered, setIsRendered] = (0, import_react6.useState)(showDrawer);
   const [isVisible, setIsVisible] = (0, import_react6.useState)(false);
@@ -1535,6 +1536,7 @@ var Drawer = ({
         title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Divider, { orientation: "horizontal", thickness: "1px" }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ScrollableContent, { children: children && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Col, { fullWidth: true, children }) }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Divider, { orientation: "horizontal", thickness: "1px" }),
+        footer,
         (leftButtonLabel || rightButtonLabel) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Row, { gap: "12", fullWidth: true, children: [
           leftButtonLabel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             Button,
@@ -2758,6 +2760,7 @@ var ContentPadding = import_styled_components21.default.div`
 var Accordion = ({
   items,
   title,
+  titleEnd,
   children,
   defaultOpen = false,
   open: controlledOpen,
@@ -2813,6 +2816,7 @@ var Accordion = ({
           onClick: () => toggleItem(item.id),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TriggerRow, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text, { size: "s", weight: "600", children: item.title }) }),
+            titleEnd,
             /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               Icon,
               {
@@ -2845,6 +2849,7 @@ var Accordion = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TriggerRow, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text, { size: "s", weight: "600", children: title }) }),
+          titleEnd,
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: isOpen ? "chevron-up" : "chevron-down", size: "m" })
         ]
       }
@@ -3844,28 +3849,23 @@ var TabButton = import_styled_components38.default.button.withConfig({
   position: relative;
   cursor: ${(p) => p.$disabled ? "not-allowed" : "pointer"};
   color: ${(p) => {
-  if (p.$variant === "pills") {
-    return p.$active ? colors.grey_600 : colors.grey_500;
-  }
+  if (p.$variant === "pills") return colors.dark;
   return p.$active ? colors.blue_700 : colors.grey_400;
 }};
   font-family: ${TOKENS.fontFamily};
-  font-size: 16px;
+  font-size: ${(p) => p.$variant === "pills" ? "14px" : "16px"};
   font-weight: ${(p) => {
-  if (p.$variant === "pills") return 600;
+  if (p.$variant === "pills") return p.$active ? 700 : 500;
   return p.$active ? 700 : 600;
 }};
   line-height: 1.2;
   white-space: nowrap;
   outline: none;
   text-align: center;
-  box-shadow: ${(p) => p.$variant === "pills" && p.$active ? "0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04)" : "none"};
+  box-shadow: none;
   transition:
     background-color 150ms ease,
-    color 150ms ease,
-    box-shadow 150ms ease;
-
-  ${(p) => p.$variant === "pills" && !p.$active && `&:hover:not(:disabled) { background: ${colors.grey_300}; }`}
+    color 150ms ease;
 
   &:focus-visible {
     outline: 2px solid

package/dist/index.mjs

@@ -1400,7 +1400,8 @@ var Drawer = ({
   rightButtonAction,
   isLoading = false,
   leftVariant,
-  variant = "blue_700"
+  variant = "blue_700",
+  footer
 }) => {
   const [isRendered, setIsRendered] = useState3(showDrawer);
   const [isVisible, setIsVisible] = useState3(false);
@@ -1442,6 +1443,7 @@ var Drawer = ({
         title && /* @__PURE__ */ jsx16(Divider, { orientation: "horizontal", thickness: "1px" }),
         /* @__PURE__ */ jsx16(ScrollableContent, { children: children && /* @__PURE__ */ jsx16(Col, { fullWidth: true, children }) }),
         /* @__PURE__ */ jsx16(Divider, { orientation: "horizontal", thickness: "1px" }),
+        footer,
         (leftButtonLabel || rightButtonLabel) && /* @__PURE__ */ jsxs6(Row, { gap: "12", fullWidth: true, children: [
           leftButtonLabel && /* @__PURE__ */ jsx16(
             Button,
@@ -2671,6 +2673,7 @@ var ContentPadding = styled21.div`
 var Accordion = ({
   items,
   title,
+  titleEnd,
   children,
   defaultOpen = false,
   open: controlledOpen,
@@ -2726,6 +2729,7 @@ var Accordion = ({
           onClick: () => toggleItem(item.id),
           children: [
             /* @__PURE__ */ jsx25(TriggerRow, { children: /* @__PURE__ */ jsx25(Text, { size: "s", weight: "600", children: item.title }) }),
+            titleEnd,
             /* @__PURE__ */ jsx25(
               Icon,
               {
@@ -2758,6 +2762,7 @@ var Accordion = ({
             }
           ),
           /* @__PURE__ */ jsx25(TriggerRow, { children: /* @__PURE__ */ jsx25(Text, { size: "s", weight: "600", children: title }) }),
+          titleEnd,
           /* @__PURE__ */ jsx25(Icon, { name: isOpen ? "chevron-up" : "chevron-down", size: "m" })
         ]
       }
@@ -3766,28 +3771,23 @@ var TabButton = styled38.button.withConfig({
   position: relative;
   cursor: ${(p) => p.$disabled ? "not-allowed" : "pointer"};
   color: ${(p) => {
-  if (p.$variant === "pills") {
-    return p.$active ? colors.grey_600 : colors.grey_500;
-  }
+  if (p.$variant === "pills") return colors.dark;
   return p.$active ? colors.blue_700 : colors.grey_400;
 }};
   font-family: ${TOKENS.fontFamily};
-  font-size: 16px;
+  font-size: ${(p) => p.$variant === "pills" ? "14px" : "16px"};
   font-weight: ${(p) => {
-  if (p.$variant === "pills") return 600;
+  if (p.$variant === "pills") return p.$active ? 700 : 500;
   return p.$active ? 700 : 600;
 }};
   line-height: 1.2;
   white-space: nowrap;
   outline: none;
   text-align: center;
-  box-shadow: ${(p) => p.$variant === "pills" && p.$active ? "0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04)" : "none"};
+  box-shadow: none;
   transition:
     background-color 150ms ease,
-    color 150ms ease,
-    box-shadow 150ms ease;
-
-  ${(p) => p.$variant === "pills" && !p.$active && `&:hover:not(:disabled) { background: ${colors.grey_300}; }`}
+    color 150ms ease;
 
   &:focus-visible {
     outline: 2px solid

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.234",
+  "version": "1.0.236",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -10,6 +10,7 @@
     "prepublishOnly": "npm run build",
     "prepare": "husky",
     "test": "vitest run --project unit",
+    "typecheck": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "lint": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",