design-zystem 1.0.391 → 1.0.393

package/dist/ui/index.d.mts

@@ -10,6 +10,7 @@ import * as RadixAvatar from '@radix-ui/react-avatar';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
+import * as RadixToggle from '@radix-ui/react-toggle';
 import { DocumentProps } from 'react-pdf';
 import * as RadixScrollArea from '@radix-ui/react-scroll-area';
 
@@ -1243,12 +1244,13 @@ interface PaginationProps {
 /** Structure calquée sur `Pagination`/`PaginationContent`/`PaginationItem` de shadcn (nav > ul > li). */
 declare const Pagination: ({ currentPage, totalItems, itemsPerPage, onPageChange, showSummary, summaryLabel, }: PaginationProps) => react.JSX.Element;
 
-interface TagBubbleProps {
+type TagBubbleColor = ColorToken | HexColor;
+interface TagBubbleProps extends Omit<ComponentPropsWithoutRef<typeof RadixToggle.Root>, 'pressed' | 'defaultPressed' | 'onPressedChange' | 'onClick' | 'children' | 'className' | 'type'> {
     label: string;
     hideDot?: boolean;
     active?: boolean;
-    activeColor?: ColorToken;
-    inactiveColor?: ColorToken;
+    activeColor?: TagBubbleColor;
+    inactiveColor?: TagBubbleColor;
     /** Actif : bordure épaisse + texte `activeColor`, fond en variante claire (ex. `blue_950` → `bg-blue-50`). */
     activeFill?: boolean;
     /** Forme pilule (`rounded-full`) à la place du rectangle arrondi par défaut. */
@@ -1259,7 +1261,7 @@ interface TagBubbleProps {
     className?: string;
 }
 /** Construit sur `@radix-ui/react-toggle` (comme le `Toggle` de shadcn) — chip filtre à deux états, pressable au clavier. */
-declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, activeFill, pill, count, countColor, onClick, className, }: TagBubbleProps) => react.JSX.Element;
+declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, activeFill, pill, count, countColor, onClick, className, ...rest }: TagBubbleProps) => react.JSX.Element;
 
 interface HistoryChange {
     label: string;

package/dist/ui/index.d.ts

@@ -10,6 +10,7 @@ import * as RadixAvatar from '@radix-ui/react-avatar';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
+import * as RadixToggle from '@radix-ui/react-toggle';
 import { DocumentProps } from 'react-pdf';
 import * as RadixScrollArea from '@radix-ui/react-scroll-area';
 
@@ -1243,12 +1244,13 @@ interface PaginationProps {
 /** Structure calquée sur `Pagination`/`PaginationContent`/`PaginationItem` de shadcn (nav > ul > li). */
 declare const Pagination: ({ currentPage, totalItems, itemsPerPage, onPageChange, showSummary, summaryLabel, }: PaginationProps) => react.JSX.Element;
 
-interface TagBubbleProps {
+type TagBubbleColor = ColorToken | HexColor;
+interface TagBubbleProps extends Omit<ComponentPropsWithoutRef<typeof RadixToggle.Root>, 'pressed' | 'defaultPressed' | 'onPressedChange' | 'onClick' | 'children' | 'className' | 'type'> {
     label: string;
     hideDot?: boolean;
     active?: boolean;
-    activeColor?: ColorToken;
-    inactiveColor?: ColorToken;
+    activeColor?: TagBubbleColor;
+    inactiveColor?: TagBubbleColor;
     /** Actif : bordure épaisse + texte `activeColor`, fond en variante claire (ex. `blue_950` → `bg-blue-50`). */
     activeFill?: boolean;
     /** Forme pilule (`rounded-full`) à la place du rectangle arrondi par défaut. */
@@ -1259,7 +1261,7 @@ interface TagBubbleProps {
     className?: string;
 }
 /** Construit sur `@radix-ui/react-toggle` (comme le `Toggle` de shadcn) — chip filtre à deux états, pressable au clavier. */
-declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, activeFill, pill, count, countColor, onClick, className, }: TagBubbleProps) => react.JSX.Element;
+declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, activeFill, pill, count, countColor, onClick, className, ...rest }: TagBubbleProps) => react.JSX.Element;
 
 interface HistoryChange {
     label: string;

package/dist/ui/index.js

@@ -2235,6 +2235,7 @@ var Modal = ({
       RadixDialog.Overlay,
       {
         ref: overlayRef,
+        "data-drawer-keep-open": true,
         onClick: (event) => event.stopPropagation(),
         className: cn(
           "fixed inset-0 z-40",
@@ -4145,6 +4146,7 @@ var CollapsibleContent = (_a) => {
 // src/ui/components/ui/Drawer.tsx
 var import_react27 = require("react");
 var import_vaul = require("vaul");
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 
 // src/ui/lib/drawer/nestedDrawerAttributes.ts
 var NESTED_DRAWER_ATTRIBUTES = {
@@ -4254,56 +4256,66 @@ var Drawer = ({
     });
     return () => cancelAnimationFrame(frame);
   }, [modal, open]);
+  const closeOnDismiss = (next) => !next && closeDrawer();
+  const drawerPortal = /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_vaul.Drawer.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      import_vaul.Drawer.Overlay,
+      {
+        ref: overlayRef,
+        onClick: (event) => event.stopPropagation(),
+        className: cn(
+          "fixed inset-0 z-40 bg-black/35 data-[stacked]:bg-transparent",
+          overlayClassName
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      import_vaul.Drawer.Content,
+      __spreadProps(__spreadValues({
+        ref: (node) => {
+          contentRef.current = node;
+          setPanel(node);
+        }
+      }, { [NESTED_DRAWER_ATTRIBUTES.panel]: "" }), {
+        onPointerDownOutside: (event) => {
+          const target = event.target;
+          if (target && belongsToLayerAbove(target)) event.preventDefault();
+        },
+        onClick: (event) => event.stopPropagation(),
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 bg-white p-6 outline-none",
+          // vaul prolonge le panneau d'un ::after opaque de 200% (effet
+          // élastique d'un panneau collé au bord) : sur un panneau qui flotte,
+          // il déborde dans la marge et forme une barre blanche jusqu'au bord
+          // de l'écran. `!` car son sélecteur est plus spécifique que la classe.
+          "after:!hidden",
+          "shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.05)]",
+          "transition-[transform,filter] duration-500",
+          "data-[receded]:-translate-x-9 data-[receded]:scale-[0.965] data-[receded]:brightness-[.82]",
+          CONTENT_POSITION[direction],
+          className
+        ),
+        style: isVertical ? { width: size, maxWidth: "calc(90vw - 16px)" } : { height: size, maxHeight: "calc(90vh - 16px)" },
+        children
+      })
+    )
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     import_vaul.Drawer.Root,
     {
       direction,
       modal,
       open,
-      onOpenChange: (next) => !next && closeDrawer(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_vaul.Drawer.Portal, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          import_vaul.Drawer.Overlay,
-          {
-            ref: overlayRef,
-            onClick: (event) => event.stopPropagation(),
-            className: cn(
-              "fixed inset-0 z-40 bg-black/35 data-[stacked]:bg-transparent",
-              overlayClassName
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          import_vaul.Drawer.Content,
-          __spreadProps(__spreadValues({
-            ref: (node) => {
-              contentRef.current = node;
-              setPanel(node);
-            }
-          }, { [NESTED_DRAWER_ATTRIBUTES.panel]: "" }), {
-            onPointerDownOutside: (event) => {
-              const target = event.target;
-              if (target && belongsToLayerAbove(target)) event.preventDefault();
-            },
-            onClick: (event) => event.stopPropagation(),
-            className: cn(
-              "fixed z-50 flex flex-col gap-4 bg-white p-6 outline-none",
-              // vaul prolonge le panneau d'un ::after opaque de 200% (effet
-              // élastique d'un panneau collé au bord) : sur un panneau qui flotte,
-              // il déborde dans la marge et forme une barre blanche jusqu'au bord
-              // de l'écran. `!` car son sélecteur est plus spécifique que la classe.
-              "after:!hidden",
-              "shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.05)]",
-              "transition-[transform,filter] duration-500",
-              "data-[receded]:-translate-x-9 data-[receded]:scale-[0.965] data-[receded]:brightness-[.82]",
-              CONTENT_POSITION[direction],
-              className
-            ),
-            style: isVertical ? { width: size, maxWidth: "calc(90vw - 16px)" } : { height: size, maxHeight: "calc(90vh - 16px)" },
-            children
-          })
-        )
-      ] })
+      onOpenChange: closeOnDismiss,
+      children: modal ? drawerPortal : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        DialogPrimitive.Root,
+        {
+          modal: false,
+          open,
+          onOpenChange: closeOnDismiss,
+          children: drawerPortal
+        }
+      )
     }
   );
 };
@@ -5951,33 +5963,49 @@ var BORDER_CLASS = {
   "orange-600": "border-orange-600",
   "purple-700": "border-purple-700"
 };
-var TagBubble = ({
-  label,
-  hideDot = false,
-  active = false,
-  activeColor = "blue-700",
-  inactiveColor = "grey-600",
-  activeFill = false,
-  pill = false,
-  count,
-  countColor = "green-700",
-  onClick,
-  className
-}) => {
+var isHexColor = (color) => color.startsWith("#");
+var TagBubble = (_a) => {
+  var _b = _a, {
+    label,
+    hideDot = false,
+    active = false,
+    activeColor = "blue-700",
+    inactiveColor = "grey-600",
+    activeFill = false,
+    pill = false,
+    count,
+    countColor = "green-700",
+    onClick,
+    className
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "hideDot",
+    "active",
+    "activeColor",
+    "inactiveColor",
+    "activeFill",
+    "pill",
+    "count",
+    "countColor",
+    "onClick",
+    "className"
+  ]);
   const showCount = count !== void 0 && count !== null;
   const filled = activeFill && active;
+  const dotColor = active ? activeColor : inactiveColor;
+  const filledHexColor = filled && isHexColor(activeColor) ? activeColor : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     RadixToggle.Root,
-    {
+    __spreadProps(__spreadValues({}, rest), {
       type: "button",
       pressed: active,
       onClick,
+      style: __spreadValues({ borderColor: filledHexColor }, rest.style),
       className: cn(
         "inline-flex items-center gap-2 border px-2.5 py-1.5 outline-none",
         pill ? "rounded-full" : "rounded-[6px]",
         filled ? cn(
-          LIGHT_BG_CLASS[activeColor],
-          BORDER_CLASS[activeColor],
+          isHexColor(activeColor) ? "bg-white" : [LIGHT_BG_CLASS[activeColor], BORDER_CLASS[activeColor]],
           "border-2"
         ) : "border-grey-200 bg-white",
         "focus-visible:ring-2 focus-visible:ring-blue-200",
@@ -5989,8 +6017,9 @@ var TagBubble = ({
           {
             className: cn(
               "h-2 w-2 shrink-0 rounded-full",
-              DOT_CLASS[active ? activeColor : inactiveColor]
-            )
+              !isHexColor(dotColor) && DOT_CLASS[dotColor]
+            ),
+            style: isHexColor(dotColor) ? { backgroundColor: dotColor } : void 0
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
@@ -5998,14 +6027,15 @@ var TagBubble = ({
           {
             className: cn(
               "whitespace-nowrap text-xs font-semibold",
-              filled ? TEXT_CLASS2[activeColor] : "text-neutral-800"
+              filled ? !isHexColor(activeColor) && TEXT_CLASS2[activeColor] : "text-neutral-800"
             ),
+            style: { color: filledHexColor },
             children: label
           }
         ),
         showCount && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Badge, { theme: countColor, size: "s", children: count })
       ]
-    }
+    })
   );
 };
 

package/dist/ui/index.mjs

@@ -2047,6 +2047,7 @@ var Modal = ({
       RadixDialog.Overlay,
       {
         ref: overlayRef,
+        "data-drawer-keep-open": true,
         onClick: (event) => event.stopPropagation(),
         className: cn(
           "fixed inset-0 z-40",
@@ -3968,6 +3969,7 @@ var CollapsibleContent = (_a) => {
 // src/ui/components/ui/Drawer.tsx
 import { useEffect as useEffect6, useRef as useRef7, useState as useState7 } from "react";
 import { Drawer as VaulDrawer } from "vaul";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 // src/ui/lib/drawer/nestedDrawerAttributes.ts
 var NESTED_DRAWER_ATTRIBUTES = {
@@ -4077,56 +4079,66 @@ var Drawer = ({
     });
     return () => cancelAnimationFrame(frame);
   }, [modal, open]);
+  const closeOnDismiss = (next) => !next && closeDrawer();
+  const drawerPortal = /* @__PURE__ */ jsxs24(VaulDrawer.Portal, { children: [
+    /* @__PURE__ */ jsx48(
+      VaulDrawer.Overlay,
+      {
+        ref: overlayRef,
+        onClick: (event) => event.stopPropagation(),
+        className: cn(
+          "fixed inset-0 z-40 bg-black/35 data-[stacked]:bg-transparent",
+          overlayClassName
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx48(
+      VaulDrawer.Content,
+      __spreadProps(__spreadValues({
+        ref: (node) => {
+          contentRef.current = node;
+          setPanel(node);
+        }
+      }, { [NESTED_DRAWER_ATTRIBUTES.panel]: "" }), {
+        onPointerDownOutside: (event) => {
+          const target = event.target;
+          if (target && belongsToLayerAbove(target)) event.preventDefault();
+        },
+        onClick: (event) => event.stopPropagation(),
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 bg-white p-6 outline-none",
+          // vaul prolonge le panneau d'un ::after opaque de 200% (effet
+          // élastique d'un panneau collé au bord) : sur un panneau qui flotte,
+          // il déborde dans la marge et forme une barre blanche jusqu'au bord
+          // de l'écran. `!` car son sélecteur est plus spécifique que la classe.
+          "after:!hidden",
+          "shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.05)]",
+          "transition-[transform,filter] duration-500",
+          "data-[receded]:-translate-x-9 data-[receded]:scale-[0.965] data-[receded]:brightness-[.82]",
+          CONTENT_POSITION[direction],
+          className
+        ),
+        style: isVertical ? { width: size, maxWidth: "calc(90vw - 16px)" } : { height: size, maxHeight: "calc(90vh - 16px)" },
+        children
+      })
+    )
+  ] });
   return /* @__PURE__ */ jsx48(
     VaulDrawer.Root,
     {
       direction,
       modal,
       open,
-      onOpenChange: (next) => !next && closeDrawer(),
-      children: /* @__PURE__ */ jsxs24(VaulDrawer.Portal, { children: [
-        /* @__PURE__ */ jsx48(
-          VaulDrawer.Overlay,
-          {
-            ref: overlayRef,
-            onClick: (event) => event.stopPropagation(),
-            className: cn(
-              "fixed inset-0 z-40 bg-black/35 data-[stacked]:bg-transparent",
-              overlayClassName
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx48(
-          VaulDrawer.Content,
-          __spreadProps(__spreadValues({
-            ref: (node) => {
-              contentRef.current = node;
-              setPanel(node);
-            }
-          }, { [NESTED_DRAWER_ATTRIBUTES.panel]: "" }), {
-            onPointerDownOutside: (event) => {
-              const target = event.target;
-              if (target && belongsToLayerAbove(target)) event.preventDefault();
-            },
-            onClick: (event) => event.stopPropagation(),
-            className: cn(
-              "fixed z-50 flex flex-col gap-4 bg-white p-6 outline-none",
-              // vaul prolonge le panneau d'un ::after opaque de 200% (effet
-              // élastique d'un panneau collé au bord) : sur un panneau qui flotte,
-              // il déborde dans la marge et forme une barre blanche jusqu'au bord
-              // de l'écran. `!` car son sélecteur est plus spécifique que la classe.
-              "after:!hidden",
-              "shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.05)]",
-              "transition-[transform,filter] duration-500",
-              "data-[receded]:-translate-x-9 data-[receded]:scale-[0.965] data-[receded]:brightness-[.82]",
-              CONTENT_POSITION[direction],
-              className
-            ),
-            style: isVertical ? { width: size, maxWidth: "calc(90vw - 16px)" } : { height: size, maxHeight: "calc(90vh - 16px)" },
-            children
-          })
-        )
-      ] })
+      onOpenChange: closeOnDismiss,
+      children: modal ? drawerPortal : /* @__PURE__ */ jsx48(
+        DialogPrimitive.Root,
+        {
+          modal: false,
+          open,
+          onOpenChange: closeOnDismiss,
+          children: drawerPortal
+        }
+      )
     }
   );
 };
@@ -5780,33 +5792,49 @@ var BORDER_CLASS = {
   "orange-600": "border-orange-600",
   "purple-700": "border-purple-700"
 };
-var TagBubble = ({
-  label,
-  hideDot = false,
-  active = false,
-  activeColor = "blue-700",
-  inactiveColor = "grey-600",
-  activeFill = false,
-  pill = false,
-  count,
-  countColor = "green-700",
-  onClick,
-  className
-}) => {
+var isHexColor = (color) => color.startsWith("#");
+var TagBubble = (_a) => {
+  var _b = _a, {
+    label,
+    hideDot = false,
+    active = false,
+    activeColor = "blue-700",
+    inactiveColor = "grey-600",
+    activeFill = false,
+    pill = false,
+    count,
+    countColor = "green-700",
+    onClick,
+    className
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "hideDot",
+    "active",
+    "activeColor",
+    "inactiveColor",
+    "activeFill",
+    "pill",
+    "count",
+    "countColor",
+    "onClick",
+    "className"
+  ]);
   const showCount = count !== void 0 && count !== null;
   const filled = activeFill && active;
+  const dotColor = active ? activeColor : inactiveColor;
+  const filledHexColor = filled && isHexColor(activeColor) ? activeColor : void 0;
   return /* @__PURE__ */ jsxs37(
     RadixToggle.Root,
-    {
+    __spreadProps(__spreadValues({}, rest), {
       type: "button",
       pressed: active,
       onClick,
+      style: __spreadValues({ borderColor: filledHexColor }, rest.style),
       className: cn(
         "inline-flex items-center gap-2 border px-2.5 py-1.5 outline-none",
         pill ? "rounded-full" : "rounded-[6px]",
         filled ? cn(
-          LIGHT_BG_CLASS[activeColor],
-          BORDER_CLASS[activeColor],
+          isHexColor(activeColor) ? "bg-white" : [LIGHT_BG_CLASS[activeColor], BORDER_CLASS[activeColor]],
           "border-2"
         ) : "border-grey-200 bg-white",
         "focus-visible:ring-2 focus-visible:ring-blue-200",
@@ -5818,8 +5846,9 @@ var TagBubble = ({
           {
             className: cn(
               "h-2 w-2 shrink-0 rounded-full",
-              DOT_CLASS[active ? activeColor : inactiveColor]
-            )
+              !isHexColor(dotColor) && DOT_CLASS[dotColor]
+            ),
+            style: isHexColor(dotColor) ? { backgroundColor: dotColor } : void 0
           }
         ),
         /* @__PURE__ */ jsx73(
@@ -5827,14 +5856,15 @@ var TagBubble = ({
           {
             className: cn(
               "whitespace-nowrap text-xs font-semibold",
-              filled ? TEXT_CLASS2[activeColor] : "text-neutral-800"
+              filled ? !isHexColor(activeColor) && TEXT_CLASS2[activeColor] : "text-neutral-800"
             ),
+            style: { color: filledHexColor },
             children: label
           }
         ),
         showCount && /* @__PURE__ */ jsx73(Badge, { theme: countColor, size: "s", children: count })
       ]
-    }
+    })
   );
 };
 

package/package.json

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