design-zystem 1.0.234 → 1.0.235

package/dist/index.d.mts

@@ -510,6 +510,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 +529,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

@@ -510,6 +510,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 +529,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

@@ -2758,6 +2758,7 @@ var ContentPadding = import_styled_components21.default.div`
 var Accordion = ({
   items,
   title,
+  titleEnd,
   children,
   defaultOpen = false,
   open: controlledOpen,
@@ -2813,6 +2814,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 +2847,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 +3847,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

@@ -2671,6 +2671,7 @@ var ContentPadding = styled21.div`
 var Accordion = ({
   items,
   title,
+  titleEnd,
   children,
   defaultOpen = false,
   open: controlledOpen,
@@ -2726,6 +2727,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 +2760,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 +3769,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.235",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",