@designa8/vibedesign-stripe-deepseek-85ea 0.2.0 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # @designa8/vibedesign-stripe-deepseek-85ea
 
-Complete design system generated by Atoms Design, version **0.2.0**.
+Complete design system generated by Atoms Design, version **0.2.1**.
 Tokens, atoms, molecules, organisms, and templates — import from the package root;
 never hardcode visual values in consumer code.
 

package/dist/index.cjs

@@ -6995,6 +6995,19 @@ var Drawer = React35.forwardRef(
     }, [open, autoFocusNote]);
     const accessibleName = ariaLabel ?? (typeof title === "string" ? title : void 0);
     const noteIsDisabled = noteDisabled ?? actionDisabled;
+    const body = children === void 0 ? null : children;
+    const hasCustomBody = children !== void 0;
+    const footerNode = footer === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      Button,
+      {
+        variant: "primary",
+        size: "lg",
+        fullWidth: true,
+        disabled: actionDisabled,
+        onClick: onAction,
+        children: actionLabel
+      }
+    ) : footer;
     const panel = !mounted || typeof document === "undefined" ? null : ReactDOM5.createPortal(
       /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "div",
@@ -7010,8 +7023,9 @@ var Drawer = React35.forwardRef(
           style: { zIndex: "var(--z-modal, 1200)" },
           className: cn28(
             "fixed inset-0 flex overflow-hidden",
+            "transition-[visibility] duration-200 ease-out",
             side === "right" ? "justify-end" : "justify-start",
-            open ? "" : "pointer-events-none"
+            open ? "visible" : "invisible pointer-events-none"
           ),
           ...rest,
           children: [
@@ -7023,7 +7037,7 @@ var Drawer = React35.forwardRef(
                 className: cn28(
                   "absolute inset-0 bg-scrim/40",
                   "transition-opacity duration-200 ease-out",
-                  "data-[state=closed]:opacity-0 data-[state=open]:opacity-100"
+                  open ? "opacity-100" : "opacity-0"
                 )
               }
             ),
@@ -7034,8 +7048,11 @@ var Drawer = React35.forwardRef(
                 "data-state": open ? "open" : "closed",
                 className: cn28(
                   "relative flex h-full w-full flex-col overflow-hidden bg-surface shadow-overlay",
-                  "pointer-events-auto transition-transform duration-200 ease-out",
-                  side === "right" ? "data-[state=closed]:translate-x-full sm:rounded-l-lg" : "data-[state=closed]:-translate-x-full sm:rounded-r-lg",
+                  "transition-transform duration-200 ease-out",
+                  open ? "translate-x-0" : "",
+                  !open && side === "right" ? "translate-x-full" : "",
+                  !open && side === "left" ? "-translate-x-full" : "",
+                  side === "right" ? "sm:rounded-l-lg" : "sm:rounded-r-lg",
                   "sm:w-[var(--container-drawer,360px)]",
                   className
                 ),
@@ -7061,7 +7078,7 @@ var Drawer = React35.forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl pb-xl", children: children ?? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-xl", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl pb-xl", children: hasCustomBody ? body : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-xl", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-lg", children: [
                       status ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                         Badge,
@@ -7098,17 +7115,7 @@ var Drawer = React35.forwardRef(
                       }
                     ) : null
                   ] }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "shrink-0 px-xl pt-md pb-xl", children: footer ?? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    Button,
-                    {
-                      variant: "primary",
-                      size: "lg",
-                      fullWidth: true,
-                      disabled: actionDisabled,
-                      onClick: onAction,
-                      children: actionLabel
-                    }
-                  ) })
+                  footerNode ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "shrink-0 px-xl pt-md pb-xl", children: footerNode }) : null
                 ]
               }
             )
@@ -9637,8 +9644,7 @@ var Modal = React50.forwardRef(
           contained ? "max-h-full" : placement === "top" ? "max-h-[calc(88dvh-1rem)]" : "max-h-[calc(100dvh-2rem)]",
           "rounded-lg border border-hairline bg-surface shadow-overlay",
           "transition duration-200 ease-out",
-          "data-[state=open]:translate-y-0 data-[state=open]:scale-100 data-[state=open]:opacity-100",
-          "data-[state=closed]:translate-y-2 data-[state=closed]:scale-[0.98] data-[state=closed]:opacity-0",
+          isOpen ? "translate-y-0 scale-100 opacity-100" : "translate-y-2 opacity-0",
           className
         ),
         ...rest,
@@ -9745,7 +9751,7 @@ var Modal = React50.forwardRef(
             contained ? "absolute inset-0" : "fixed inset-0",
             placement === "top" ? "items-start px-base pt-[12dvh]" : "items-center p-base",
             "transition duration-200 ease-out",
-            "data-[state=closed]:pointer-events-none data-[state=closed]:invisible"
+            isOpen ? "visible" : "invisible pointer-events-none"
           ),
           style: { zIndex: "var(--z-modal, 1200)" },
           children: [
@@ -9762,7 +9768,7 @@ var Modal = React50.forwardRef(
                 style: scrimStyle(contained),
                 className: cn41(
                   "transition-opacity duration-200 ease-out",
-                  "data-[state=open]:opacity-100 data-[state=closed]:opacity-0"
+                  isOpen ? "opacity-100" : "opacity-0"
                 )
               }
             ),

package/dist/index.js

@@ -6858,6 +6858,19 @@ var Drawer = React35.forwardRef(
     }, [open, autoFocusNote]);
     const accessibleName = ariaLabel ?? (typeof title === "string" ? title : void 0);
     const noteIsDisabled = noteDisabled ?? actionDisabled;
+    const body = children === void 0 ? null : children;
+    const hasCustomBody = children !== void 0;
+    const footerNode = footer === void 0 ? /* @__PURE__ */ jsx35(
+      Button,
+      {
+        variant: "primary",
+        size: "lg",
+        fullWidth: true,
+        disabled: actionDisabled,
+        onClick: onAction,
+        children: actionLabel
+      }
+    ) : footer;
     const panel = !mounted || typeof document === "undefined" ? null : ReactDOM5.createPortal(
       /* @__PURE__ */ jsxs32(
         "div",
@@ -6873,8 +6886,9 @@ var Drawer = React35.forwardRef(
           style: { zIndex: "var(--z-modal, 1200)" },
           className: cn28(
             "fixed inset-0 flex overflow-hidden",
+            "transition-[visibility] duration-200 ease-out",
             side === "right" ? "justify-end" : "justify-start",
-            open ? "" : "pointer-events-none"
+            open ? "visible" : "invisible pointer-events-none"
           ),
           ...rest,
           children: [
@@ -6886,7 +6900,7 @@ var Drawer = React35.forwardRef(
                 className: cn28(
                   "absolute inset-0 bg-scrim/40",
                   "transition-opacity duration-200 ease-out",
-                  "data-[state=closed]:opacity-0 data-[state=open]:opacity-100"
+                  open ? "opacity-100" : "opacity-0"
                 )
               }
             ),
@@ -6897,8 +6911,11 @@ var Drawer = React35.forwardRef(
                 "data-state": open ? "open" : "closed",
                 className: cn28(
                   "relative flex h-full w-full flex-col overflow-hidden bg-surface shadow-overlay",
-                  "pointer-events-auto transition-transform duration-200 ease-out",
-                  side === "right" ? "data-[state=closed]:translate-x-full sm:rounded-l-lg" : "data-[state=closed]:-translate-x-full sm:rounded-r-lg",
+                  "transition-transform duration-200 ease-out",
+                  open ? "translate-x-0" : "",
+                  !open && side === "right" ? "translate-x-full" : "",
+                  !open && side === "left" ? "-translate-x-full" : "",
+                  side === "right" ? "sm:rounded-l-lg" : "sm:rounded-r-lg",
                   "sm:w-[var(--container-drawer,360px)]",
                   className
                 ),
@@ -6924,7 +6941,7 @@ var Drawer = React35.forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx35("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl pb-xl", children: children ?? /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-xl", children: [
+                  /* @__PURE__ */ jsx35("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl pb-xl", children: hasCustomBody ? body : /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-xl", children: [
                     /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-lg", children: [
                       status ? /* @__PURE__ */ jsx35(
                         Badge,
@@ -6961,17 +6978,7 @@ var Drawer = React35.forwardRef(
                       }
                     ) : null
                   ] }) }),
-                  /* @__PURE__ */ jsx35("div", { className: "shrink-0 px-xl pt-md pb-xl", children: footer ?? /* @__PURE__ */ jsx35(
-                    Button,
-                    {
-                      variant: "primary",
-                      size: "lg",
-                      fullWidth: true,
-                      disabled: actionDisabled,
-                      onClick: onAction,
-                      children: actionLabel
-                    }
-                  ) })
+                  footerNode ? /* @__PURE__ */ jsx35("div", { className: "shrink-0 px-xl pt-md pb-xl", children: footerNode }) : null
                 ]
               }
             )
@@ -9500,8 +9507,7 @@ var Modal = React50.forwardRef(
           contained ? "max-h-full" : placement === "top" ? "max-h-[calc(88dvh-1rem)]" : "max-h-[calc(100dvh-2rem)]",
           "rounded-lg border border-hairline bg-surface shadow-overlay",
           "transition duration-200 ease-out",
-          "data-[state=open]:translate-y-0 data-[state=open]:scale-100 data-[state=open]:opacity-100",
-          "data-[state=closed]:translate-y-2 data-[state=closed]:scale-[0.98] data-[state=closed]:opacity-0",
+          isOpen ? "translate-y-0 scale-100 opacity-100" : "translate-y-2 opacity-0",
           className
         ),
         ...rest,
@@ -9608,7 +9614,7 @@ var Modal = React50.forwardRef(
             contained ? "absolute inset-0" : "fixed inset-0",
             placement === "top" ? "items-start px-base pt-[12dvh]" : "items-center p-base",
             "transition duration-200 ease-out",
-            "data-[state=closed]:pointer-events-none data-[state=closed]:invisible"
+            isOpen ? "visible" : "invisible pointer-events-none"
           ),
           style: { zIndex: "var(--z-modal, 1200)" },
           children: [
@@ -9625,7 +9631,7 @@ var Modal = React50.forwardRef(
                 style: scrimStyle(contained),
                 className: cn41(
                   "transition-opacity duration-200 ease-out",
-                  "data-[state=open]:opacity-100 data-[state=closed]:opacity-0"
+                  isOpen ? "opacity-100" : "opacity-0"
                 )
               }
             ),

package/dist/styles.css

@@ -1114,6 +1114,10 @@
     --tw-translate-y: calc(1 / 2 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-2 {
+    --tw-translate-y: calc(var(--spacing) * 2);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-px {
     --tw-translate-y: 1px;
     translate: var(--tw-translate-x) var(--tw-translate-y);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designa8/vibedesign-stripe-deepseek-85ea",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Complete design system \"My Project stripe-deepseek\" generated by Atoms Design.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/src/atoms/Drawer/Drawer.tsx

@@ -62,9 +62,15 @@ export interface DrawerProps
   actionDisabled?: boolean;
   /** Fires when the primary action is pressed. */
   onAction?: () => void;
-  /** Replaces the pinned action footer. */
+  /**
+   * Replaces the pinned action footer. Pass `null` to render no footer at all;
+   * the default action only appears when the prop is left `undefined`.
+   */
   footer?: React.ReactNode;
-  /** Replaces the default payment body. */
+  /**
+   * Replaces the default payment body. Pass `null` to render an empty body;
+   * the default fixture only appears when the prop is left `undefined`.
+   */
   children?: React.ReactNode;
   /** Accessible name of the close control. */
   closeLabel?: string;
@@ -77,6 +83,11 @@ export interface DrawerProps
  * `translate-x`, and only the body between the pinned heading and footer
  * scrolls.
  *
+ * The closed state is expressed with plain utilities (`invisible`,
+ * `pointer-events-none`, the travel offset) rather than `data-[state=closed]:*`
+ * variants, so the panel is never painted, never focusable, and never swallows
+ * pointer events even in a build that emits no data-state rules.
+ *
  * The `role="dialog"` element is the full-viewport stage, not the travelling
  * surface: the box the user reads stays put while the sheet inside it slides, so
  * a closed drawer never parks itself outside the viewport.
@@ -157,6 +168,24 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
       ariaLabel ?? (typeof title === "string" ? title : undefined);
     const noteIsDisabled = noteDisabled ?? actionDisabled;
 
+    /* `undefined` means "not supplied" — `null` is an explicit "render nothing". */
+    const body = children === undefined ? null : children;
+    const hasCustomBody = children !== undefined;
+    const footerNode =
+      footer === undefined ? (
+        <Button
+          variant="primary"
+          size="lg"
+          fullWidth
+          disabled={actionDisabled}
+          onClick={onAction}
+        >
+          {actionLabel}
+        </Button>
+      ) : (
+        footer
+      );
+
     const panel =
       !mounted || typeof document === "undefined"
         ? null
@@ -173,8 +202,9 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
               style={{ zIndex: "var(--z-modal, 1200)" }}
               className={cn(
                 "fixed inset-0 flex overflow-hidden",
+                "transition-[visibility] duration-200 ease-out",
                 side === "right" ? "justify-end" : "justify-start",
-                open ? "" : "pointer-events-none",
+                open ? "visible" : "invisible pointer-events-none",
               )}
               {...rest}
             >
@@ -186,7 +216,7 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
                 className={cn(
                   "absolute inset-0 bg-scrim/40",
                   "transition-opacity duration-200 ease-out",
-                  "data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
+                  open ? "opacity-100" : "opacity-0",
                 )}
               />
 
@@ -195,10 +225,11 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
                 data-state={open ? "open" : "closed"}
                 className={cn(
                   "relative flex h-full w-full flex-col overflow-hidden bg-surface shadow-overlay",
-                  "pointer-events-auto transition-transform duration-200 ease-out",
-                  side === "right"
-                    ? "data-[state=closed]:translate-x-full sm:rounded-l-lg"
-                    : "data-[state=closed]:-translate-x-full sm:rounded-r-lg",
+                  "transition-transform duration-200 ease-out",
+                  open ? "translate-x-0" : "",
+                  !open && side === "right" ? "translate-x-full" : "",
+                  !open && side === "left" ? "-translate-x-full" : "",
+                  side === "right" ? "sm:rounded-l-lg" : "sm:rounded-r-lg",
                   "sm:w-[var(--container-drawer,360px)]",
                   className,
                 )}
@@ -221,7 +252,9 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
                 </div>
 
                 <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl pb-xl">
-                  {children ?? (
+                  {hasCustomBody ? (
+                    body
+                  ) : (
                     <div className="flex flex-col gap-xl">
                       <div className="flex flex-col gap-lg">
                         {status ? (
@@ -269,19 +302,9 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
                   )}
                 </div>
 
-                <div className="shrink-0 px-xl pt-md pb-xl">
-                  {footer ?? (
-                    <Button
-                      variant="primary"
-                      size="lg"
-                      fullWidth
-                      disabled={actionDisabled}
-                      onClick={onAction}
-                    >
-                      {actionLabel}
-                    </Button>
-                  )}
-                </div>
+                {footerNode ? (
+                  <div className="shrink-0 px-xl pt-md pb-xl">{footerNode}</div>
+                ) : null}
               </div>
             </div>,
             document.body,

package/src/atoms/Modal/Modal.tsx

@@ -150,6 +150,12 @@ export interface ModalProps
  * the body portals its listbox to `document.body` at `--z-popover`, above this
  * dialog's `--z-modal`, so opening it can never grow the panel or paint
  * underneath it.
+ *
+ * The closed state is expressed with plain utilities (`invisible`,
+ * `pointer-events-none`, `opacity-0`, the resting offset) instead of
+ * `data-[state=closed]:*` variants, so the dialog is hidden, unfocusable, and
+ * click-through even in a build that emits no data-state rules. `data-state`
+ * is still published for consumers that style it.
  */
 export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
   (
@@ -387,8 +393,9 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
               : "max-h-[calc(100dvh-2rem)]",
           "rounded-lg border border-hairline bg-surface shadow-overlay",
           "transition duration-200 ease-out",
-          "data-[state=open]:translate-y-0 data-[state=open]:scale-100 data-[state=open]:opacity-100",
-          "data-[state=closed]:translate-y-2 data-[state=closed]:scale-[0.98] data-[state=closed]:opacity-0",
+          isOpen
+            ? "translate-y-0 scale-100 opacity-100"
+            : "translate-y-2 opacity-0",
           className,
         )}
         {...rest}
@@ -510,7 +517,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
             ? "items-start px-base pt-[12dvh]"
             : "items-center p-base",
           "transition duration-200 ease-out",
-          "data-[state=closed]:pointer-events-none data-[state=closed]:invisible",
+          isOpen ? "visible" : "invisible pointer-events-none",
         )}
         style={{ zIndex: "var(--z-modal, 1200)" }}
       >
@@ -526,7 +533,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
           style={scrimStyle(contained)}
           className={cn(
             "transition-opacity duration-200 ease-out",
-            "data-[state=open]:opacity-100 data-[state=closed]:opacity-0",
+            isOpen ? "opacity-100" : "opacity-0",
           )}
         />