@wallarm-org/design-system 0.81.0 → 0.82.0

package/dist/components/Dialog/DialogDescription.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import { type DrawerDescriptionProps } from '../Drawer';
+type DialogDescriptionProps = DrawerDescriptionProps;
+export declare const DialogDescription: FC<DialogDescriptionProps>;
+export {};

package/dist/components/Dialog/DialogDescription.js

@@ -0,0 +1,4 @@
+import { DrawerDescription } from "../Drawer/index.js";
+const DialogDescription = DrawerDescription;
+DialogDescription.displayName = "DialogDescription";
+export { DialogDescription };

package/dist/components/Dialog/index.d.ts

@@ -2,6 +2,7 @@ export { Dialog } from './Dialog';
 export { DialogBody } from './DialogBody';
 export { DialogClose } from './DialogClose';
 export { DialogContent } from './DialogContent';
+export { DialogDescription } from './DialogDescription';
 export { DialogFooter } from './DialogFooter';
 export { DialogFooterControls } from './DialogFooterControls';
 export { DialogHeader } from './DialogHeader';

package/dist/components/Dialog/index.js

@@ -2,6 +2,7 @@ export { Dialog } from "./Dialog.js";
 export { DialogBody } from "./DialogBody.js";
 export { DialogClose } from "./DialogClose.js";
 export { DialogContent } from "./DialogContent.js";
+export { DialogDescription } from "./DialogDescription.js";
 export { DialogFooter } from "./DialogFooter.js";
 export { DialogFooterControls } from "./DialogFooterControls.js";
 export { DialogHeader } from "./DialogHeader.js";

package/dist/components/Drawer/DrawerDescription.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode, Ref } from 'react';
+export interface DrawerDescriptionProps {
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const DrawerDescription: FC<DrawerDescriptionProps>;

package/dist/components/Drawer/DrawerDescription.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@ark-ui/react/dialog";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const DrawerDescription = ({ children, ref })=>{
+    const testId = useTestId("description");
+    return /*#__PURE__*/ jsx(Dialog.Description, {
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "drawer-description",
+        className: cn('text-sm font-normal text-text-secondary'),
+        children: children
+    });
+};
+DrawerDescription.displayName = "DrawerDescription";
+export { DrawerDescription };

package/dist/components/Drawer/DrawerHeader.js

@@ -3,17 +3,32 @@ import { Children, isValidElement } from "react";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { DrawerClose } from "./DrawerClose.js";
+import { DrawerDescription } from "./DrawerDescription.js";
+import { DrawerTitle } from "./DrawerTitle.js";
 const isDrawerClose = (child)=>/*#__PURE__*/ isValidElement(child) && child.type === DrawerClose;
+const isDrawerTitle = (child)=>/*#__PURE__*/ isValidElement(child) && child.type === DrawerTitle;
+const isDrawerDescription = (child)=>/*#__PURE__*/ isValidElement(child) && child.type === DrawerDescription;
 const DrawerHeader = ({ children, ref })=>{
     const testId = useTestId('header');
-    const hasExplicitClose = Children.toArray(children).some(isDrawerClose);
+    const items = Children.toArray(children);
+    const hasExplicitClose = items.some(isDrawerClose);
+    const title = items.find(isDrawerTitle);
+    const description = items.find(isDrawerDescription);
+    const rest = items.filter((child)=>child !== title && child !== description);
     return /*#__PURE__*/ jsxs("div", {
         ref: ref,
         "data-testid": testId,
         "data-slot": "drawer-header",
         className: cn('relative shrink-0 w-full', 'bg-bg-surface-2', 'flex items-start justify-between gap-12', 'pt-16 pb-12 pl-24 pr-16', 'rounded-t-12', 'outline-none'),
         children: [
-            children,
+            (title || description) && /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-1 flex-col gap-0 min-w-0",
+                children: [
+                    title,
+                    description
+                ]
+            }),
+            rest,
             !hasExplicitClose && /*#__PURE__*/ jsx(DrawerClose, {})
         ]
     });

package/dist/components/Drawer/index.d.ts

@@ -5,6 +5,7 @@ export { DrawerBody, type DrawerBodyProps } from './DrawerBody';
 export { DrawerClose, type DrawerCloseProps } from './DrawerClose';
 export { DrawerContent, type DrawerContentProps } from './DrawerContent';
 export { useDrawerContext } from './DrawerContext';
+export { DrawerDescription, type DrawerDescriptionProps } from './DrawerDescription';
 export { DrawerFooter, type DrawerFooterProps } from './DrawerFooter';
 export { DrawerFooterControls, type DrawerFooterControlsProps, } from './DrawerFooterControls';
 export { DrawerHeader, type DrawerHeaderProps } from './DrawerHeader';

package/dist/components/Drawer/index.js

@@ -4,6 +4,7 @@ export { DrawerBody } from "./DrawerBody.js";
 export { DrawerClose } from "./DrawerClose.js";
 export { DrawerContent } from "./DrawerContent.js";
 export { useDrawerContext } from "./DrawerContext/index.js";
+export { DrawerDescription } from "./DrawerDescription.js";
 export { DrawerFooter } from "./DrawerFooter.js";
 export { DrawerFooterControls } from "./DrawerFooterControls.js";
 export { DrawerHeader } from "./DrawerHeader.js";

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.80.0",
-  "generatedAt": "2026-08-03T16:08:37.513Z",
+  "version": "0.81.0",
+  "generatedAt": "2026-08-04T09:35:49.157Z",
   "components": [
     {
       "name": "Accordion",
@@ -24603,6 +24603,11 @@
           "code": "() => {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button>Open Dialog</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Dialog's title</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n\n        <DialogFooter>\n          <DialogFooterControls>\n            <Button variant='ghost' color='neutral' size='large'>\n              Button\n            </Button>\n            <Button variant='primary' color='brand' size='large'>\n              Button\n            </Button>\n          </DialogFooterControls>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}",
           "description": "Minimal example"
         },
+        {
+          "name": "WithDescription",
+          "code": "() => {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button>Open Dialog</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Dialog's title</DialogTitle>\n          <DialogDescription>Description</DialogDescription>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n\n        <DialogFooter>\n          <DialogFooterControls>\n            <Button variant='ghost' color='neutral' size='large'>\n              Button\n            </Button>\n            <Button variant='primary' color='brand' size='large'>\n              Button\n            </Button>\n          </DialogFooterControls>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}",
+          "description": "Header title with a supporting description stacked underneath"
+        },
         {
           "name": "WithFooterLeftActions",
           "code": "() => (\n  <Dialog>\n    <DialogTrigger asChild>\n      <Button>Open with Footer Actions</Button>\n    </DialogTrigger>\n    <DialogContent>\n      <DialogHeader>\n        <DialogTitle>Footer with Left Actions</DialogTitle>\n      </DialogHeader>\n\n      <DialogBody>\n        <ContentPlaceholder />\n      </DialogBody>\n\n      <DialogFooter>\n        <DialogFooterControls placement='left'>\n          <Switch>\n            <SwitchControl />\n            <SwitchLabel>Remember choice</SwitchLabel>\n          </Switch>\n        </DialogFooterControls>\n\n        <DialogClose asChild>\n          <Button variant='ghost' color='neutral' size='large'>\n            Cancel\n          </Button>\n        </DialogClose>\n        <Button variant='primary' color='brand' size='large'>\n          Apply\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n)",
@@ -25089,6 +25094,10 @@
             }
           ]
         },
+        {
+          "name": "DrawerDescription",
+          "props": []
+        },
         {
           "name": "DrawerFooter",
           "props": []
@@ -25462,6 +25471,11 @@
           "code": "() => {\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button>Open Drawer</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Drawer's title</DrawerTitle>\n        </DrawerHeader>\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n        <DrawerFooter>\n          <DrawerFooterControls>\n            <Button variant='ghost' color='neutral' size='large'>\n              Button\n            </Button>\n            <Button variant='primary' color='brand' size='large'>\n              Button\n            </Button>\n          </DrawerFooterControls>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
           "description": "Minimal example"
         },
+        {
+          "name": "WithDescription",
+          "code": "() => {\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button>Open Drawer</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Drawer's title</DrawerTitle>\n          <DrawerDescription>Description TBD</DrawerDescription>\n        </DrawerHeader>\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n        <DrawerFooter>\n          <DrawerFooterControls>\n            <Button variant='ghost' color='neutral' size='large'>\n              Button\n            </Button>\n            <Button variant='primary' color='brand' size='large'>\n              Button\n            </Button>\n          </DrawerFooterControls>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
+          "description": "Header title with a supporting description stacked underneath"
+        },
         {
           "name": "WithFooterLeftActions",
           "code": "() => (\n  <Drawer>\n    <DrawerTrigger asChild>\n      <Button>Open with Footer Actions</Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader>\n        <DrawerTitle>Footer with Left Actions</DrawerTitle>\n      </DrawerHeader>\n\n      <DrawerBody>\n        <ContentPlaceholder fillHeight />\n      </DrawerBody>\n\n      <DrawerFooter>\n        <DrawerFooterControls placement='left'>\n          <Switch>\n            <SwitchControl />\n            <SwitchLabel>Remember choice</SwitchLabel>\n          </Switch>\n        </DrawerFooterControls>\n\n        <DrawerClose asChild>\n          <Button variant='ghost' color='neutral' size='large'>\n            Cancel\n          </Button>\n        </DrawerClose>\n        <Button variant='primary' color='brand' size='large'>\n          Apply\n        </Button>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.81.0",
+  "version": "0.82.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",