design-zystem 1.0.392 → 1.0.394

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
+        }
+      )
     }
   );
 };
@@ -5990,7 +6002,7 @@ var TagBubble = (_a) => {
       onClick,
       style: __spreadValues({ borderColor: filledHexColor }, rest.style),
       className: cn(
-        "inline-flex items-center gap-2 border px-2.5 py-1.5 outline-none",
+        "inline-flex items-center justify-center gap-2 border px-2.5 py-1.5 outline-none",
         pill ? "rounded-full" : "rounded-[6px]",
         filled ? cn(
           isHexColor(activeColor) ? "bg-white" : [LIGHT_BG_CLASS[activeColor], BORDER_CLASS[activeColor]],

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
+        }
+      )
     }
   );
 };
@@ -5819,7 +5831,7 @@ var TagBubble = (_a) => {
       onClick,
       style: __spreadValues({ borderColor: filledHexColor }, rest.style),
       className: cn(
-        "inline-flex items-center gap-2 border px-2.5 py-1.5 outline-none",
+        "inline-flex items-center justify-center gap-2 border px-2.5 py-1.5 outline-none",
         pill ? "rounded-full" : "rounded-[6px]",
         filled ? cn(
           isHexColor(activeColor) ? "bg-white" : [LIGHT_BG_CLASS[activeColor], BORDER_CLASS[activeColor]],

package/package.json

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