@drivenets/design-system 0.0.2 → 0.0.4

package/dist/components/ds-dialog/ds-dialog.js

@@ -0,0 +1,58 @@
+import ds_dialog_module_default from "./ds-dialog.module.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { Root } from "@radix-ui/react-visually-hidden";
+
+//#region src/components/ds-dialog/ds-dialog.tsx
+const DsDialog = ({ open, onOpenChange, title, hideTitle, description, hideDescription, children, className, anchorRef, customPosition, modal = true }) => {
+	let style = {};
+	if (customPosition) style = {
+		position: "fixed",
+		...customPosition
+	};
+	else if (anchorRef?.current) {
+		const rect = anchorRef.current.getBoundingClientRect();
+		style = {
+			position: "fixed",
+			top: rect.bottom,
+			left: rect.left
+		};
+	}
+	return /* @__PURE__ */ jsx(RadixDialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [modal && /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: ds_dialog_module_default.overlay }), /* @__PURE__ */ jsxs(RadixDialog.Content, {
+			className: classNames(ds_dialog_module_default.dialog, className, { [ds_dialog_module_default.customPlacement]: customPosition || anchorRef }),
+			style: customPosition || anchorRef ? style : void 0,
+			children: [
+				/* @__PURE__ */ jsx(RadixDialog.Title, {
+					asChild: true,
+					children: hideTitle ? /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsx(RadixDialog.Title, {
+						className: ds_dialog_module_default.title,
+						children: title
+					}) }) : /* @__PURE__ */ jsx(RadixDialog.Title, {
+						className: ds_dialog_module_default.title,
+						children: title
+					})
+				}),
+				description && /* @__PURE__ */ jsx(RadixDialog.Description, {
+					asChild: true,
+					children: hideDescription ? /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsx(RadixDialog.Description, {
+						className: ds_dialog_module_default.description,
+						children: description
+					}) }) : /* @__PURE__ */ jsx(RadixDialog.Description, {
+						className: ds_dialog_module_default.description,
+						children: description
+					})
+				}),
+				children
+			]
+		})] })
+	});
+};
+var ds_dialog_default = DsDialog;
+
+//#endregion
+export { ds_dialog_default as default };
+//# sourceMappingURL=ds-dialog.js.map

package/dist/components/ds-dialog/ds-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-dialog.js","names":["React","RadixDialog","Root","VisuallyHidden","classNames","styles","DsDialogProps","DsDialog","FC","open","onOpenChange","title","hideTitle","description","hideDescription","children","className","anchorRef","customPosition","modal","style","CSSProperties","position","current","rect","getBoundingClientRect","top","bottom","left","overlay","dialog","customPlacement","undefined"],"sources":["../../../src/components/ds-dialog/ds-dialog.tsx"],"sourcesContent":["import type React from 'react';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { Root as VisuallyHidden } from '@radix-ui/react-visually-hidden';\nimport classNames from 'classnames';\nimport styles from './ds-dialog.module.scss';\nimport type { DsDialogProps } from './ds-dialog.types';\n\nconst DsDialog: React.FC<DsDialogProps> = ({\n\topen,\n\tonOpenChange,\n\ttitle,\n\thideTitle,\n\tdescription,\n\thideDescription,\n\tchildren,\n\tclassName,\n\tanchorRef,\n\tcustomPosition,\n\tmodal = true,\n}) => {\n\tlet style: React.CSSProperties = {};\n\tif (customPosition) {\n\t\tstyle = { position: 'fixed', ...customPosition };\n\t} else if (anchorRef?.current) {\n\t\tconst rect = anchorRef.current.getBoundingClientRect();\n\t\tstyle = { position: 'fixed', top: rect.bottom, left: rect.left };\n\t}\n\n\treturn (\n\t\t<RadixDialog.Root open={open} onOpenChange={onOpenChange}>\n\t\t\t<RadixDialog.Portal>\n\t\t\t\t{modal && <RadixDialog.Overlay className={styles.overlay} />}\n\t\t\t\t<RadixDialog.Content\n\t\t\t\t\tclassName={classNames(styles.dialog, className, {\n\t\t\t\t\t\t[styles.customPlacement]: customPosition || anchorRef,\n\t\t\t\t\t})}\n\t\t\t\t\tstyle={customPosition || anchorRef ? style : undefined}\n\t\t\t\t>\n\t\t\t\t\t<RadixDialog.Title asChild>\n\t\t\t\t\t\t{hideTitle ? (\n\t\t\t\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t\t\t\t<RadixDialog.Title className={styles.title}>{title}</RadixDialog.Title>\n\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<RadixDialog.Title className={styles.title}>{title}</RadixDialog.Title>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</RadixDialog.Title>\n\t\t\t\t\t{description && (\n\t\t\t\t\t\t<RadixDialog.Description asChild>\n\t\t\t\t\t\t\t{hideDescription ? (\n\t\t\t\t\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t\t\t\t\t<RadixDialog.Description className={styles.description}>\n\t\t\t\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t\t\t</RadixDialog.Description>\n\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<RadixDialog.Description className={styles.description}>\n\t\t\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t\t</RadixDialog.Description>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</RadixDialog.Description>\n\t\t\t\t\t)}\n\t\t\t\t\t{children}\n\t\t\t\t</RadixDialog.Content>\n\t\t\t</RadixDialog.Portal>\n\t\t</RadixDialog.Root>\n\t);\n};\n\nexport default DsDialog;\n"],"mappings":";;;;;;;AAOA,MAAMO,YAAqC,EAC1CE,MACAC,cACAC,OACAC,WACAC,aACAC,iBACAC,UACAC,WACAC,WACAC,gBACAC,QAAQ,WACH;CACL,IAAIC,QAA6B,EAAE;AACnC,KAAIF,eACHE,SAAQ;EAAEE,UAAU;EAAS,GAAGJ;EAAgB;UACtCD,WAAWM,SAAS;EAC9B,MAAMC,OAAOP,UAAUM,QAAQE,uBAAuB;AACtDL,UAAQ;GAAEE,UAAU;GAASI,KAAKF,KAAKG;GAAQC,MAAMJ,KAAKI;GAAM;;AAGjE,QACC,oBAAC,YAAY;EAAWnB;EAAoBC;YAC3C,qBAAC,YAAY,qBACXS,SAAS,oBAAC,YAAY,WAAQ,WAAWd,yBAAOwB,UAAW,EAC5D,qBAAC,YAAY;GACZ,WAAWzB,WAAWC,yBAAOyB,QAAQd,WAAW,GAC9CX,yBAAO0B,kBAAkBb,kBAAkBD,WAC5C,CAAC;GACF,OAAOC,kBAAkBD,YAAYG,QAAQY;;IAE7C,oBAAC,YAAY;KAAM;eACjBpB,YACA,oBAAC,kBACA,oBAAC,YAAY;MAAM,WAAWP,yBAAOM;gBAAQA;OAAyB,GACtD,GAEjB,oBAAC,YAAY;MAAM,WAAWN,yBAAOM;gBAAQA;OAC7C;MACiB;IAClBE,eACA,oBAAC,YAAY;KAAY;eACvBC,kBACA,oBAAC,kBACA,oBAAC,YAAY;MAAY,WAAWT,yBAAOQ;gBACzCA;OACuB,GACT,GAEjB,oBAAC,YAAY;MAAY,WAAWR,yBAAOQ;gBACzCA;OAEF;MAEF;IACAE;;IACmB,IACF;GACF;;AAIrB,wBAAeR"}

package/dist/components/ds-dialog/ds-dialog.module.cjs

@@ -0,0 +1,12 @@
+
+//#region src/components/ds-dialog/ds-dialog.module.scss
+var ds_dialog_module_default = {
+	"overlay": "_overlay_z7kc9_1",
+	"dialog": "_dialog_z7kc9_1",
+	"title": "_title_z7kc9_1",
+	"description": "_description_z7kc9_1",
+	"customPlacement": "_customPlacement_z7kc9_1"
+};
+
+//#endregion
+exports.default = ds_dialog_module_default;

package/dist/components/ds-dialog/ds-dialog.module.js

@@ -0,0 +1,12 @@
+//#region src/components/ds-dialog/ds-dialog.module.scss
+var ds_dialog_module_default = {
+	"overlay": "_overlay_z7kc9_1",
+	"dialog": "_dialog_z7kc9_1",
+	"title": "_title_z7kc9_1",
+	"description": "_description_z7kc9_1",
+	"customPlacement": "_customPlacement_z7kc9_1"
+};
+
+//#endregion
+export { ds_dialog_module_default as default };
+//# sourceMappingURL=ds-dialog.module.js.map

package/dist/components/ds-dialog/ds-dialog.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-dialog.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-dialog/ds-dialog.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/mixins/_bounding-box.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_variables.scss"],"sourcesContent":["@use '../../styles/typography';\n@use '../../styles/mixins/bounding-box';\n\n.overlay {\n\tposition: fixed;\n\tinset: 0;\n\tbackground: rgba(0, 0, 0, 0.32);\n\tz-index: 1199;\n}\n\n.dialog {\n\t@include bounding-box.bounding-box-vars;\n\n\t--_shadow-size: 18px;\n\t--_shadow-y-offset: 6px;\n\n\tbackground: var(--white, #fff);\n\tborder-radius: 8px;\n\tbox-shadow: 0 var(--_shadow-y-offset) var(--_shadow-size) 0 rgba(4, 69, 204, 0.3);\n\tpadding: 12px;\n\tmin-width: 320px;\n\tmin-height: 120px;\n\tz-index: 1200;\n\tposition: fixed;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tmax-width: 90vw;\n\tmax-height: 90vh;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.title {\n\t@include typography.p-base;\n\t@include typography.medium;\n\tcolor: var(--neutral-1);\n}\n\n.description {\n\t@include typography.p-base;\n\tcolor: var(--neutral-3);\n\tmargin-bottom: 16px;\n}\n\n.customPlacement {\n\ttransform: none !important;\n\tmax-width: none;\n\tmax-height: none;\n}\n"],"mappings":""}

package/dist/components/ds-dialog/ds-dialog.types.d.cts

@@ -0,0 +1,55 @@
+import React from "react";
+
+//#region src/components/ds-dialog/ds-dialog.types.d.ts
+interface DsDialogProps {
+  /**
+   * Controls whether the dialog is open.
+   */
+  open: boolean;
+  /**
+   * Callback fired when the open state should change.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * The accessible title for the dialog. Required for accessibility.
+   */
+  title: string;
+  /**
+   * If true, the dialog title will be visually hidden but accessible to screen readers.
+   */
+  hideTitle?: boolean;
+  /**
+   * The accessible description for the dialog. Optional, but recommended for accessibility.
+   */
+  description?: string;
+  /**
+   * If true, the dialog description will be visually hidden but accessible to screen readers.
+   */
+  hideDescription?: boolean;
+  /**
+   * The content to render inside the dialog.
+   */
+  children: React.ReactNode;
+  /**
+   * Additional CSS class names for the dialog container.
+   */
+  className?: string;
+  /**
+   * Ref to the element the dialog should be anchored to (for relative placement)
+   */
+  anchorRef?: React.RefObject<HTMLElement>;
+  /**
+   * Custom fixed position (e.g., { top: number, left: number })
+   */
+  customPosition?: {
+    top: number;
+    left: number;
+  };
+  /**
+   * If true, show modal overlay and center dialog (default: true)
+   */
+  modal?: boolean;
+}
+//#endregion
+export { DsDialogProps };
+//# sourceMappingURL=ds-dialog.types.d.cts.map

package/dist/components/ds-dialog/ds-dialog.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-dialog.types.d.cts","names":[],"sources":["../../../src/components/ds-dialog/ds-dialog.types.tsx"],"sourcesContent":[],"mappings":";;;UAEiB,aAAA;;AAAjB;;EAoC6B,IAAA,EAAA,OAAA;EAAhB;;;;;;;;;;;;;;;;;;;;;;;YARF,KAAA,CAAM;;;;;;;;cAQJ,KAAA,CAAM,UAAU"}

package/dist/components/ds-dialog/ds-dialog.types.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+
+//#region src/components/ds-dialog/ds-dialog.types.d.ts
+interface DsDialogProps {
+  /**
+   * Controls whether the dialog is open.
+   */
+  open: boolean;
+  /**
+   * Callback fired when the open state should change.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * The accessible title for the dialog. Required for accessibility.
+   */
+  title: string;
+  /**
+   * If true, the dialog title will be visually hidden but accessible to screen readers.
+   */
+  hideTitle?: boolean;
+  /**
+   * The accessible description for the dialog. Optional, but recommended for accessibility.
+   */
+  description?: string;
+  /**
+   * If true, the dialog description will be visually hidden but accessible to screen readers.
+   */
+  hideDescription?: boolean;
+  /**
+   * The content to render inside the dialog.
+   */
+  children: React.ReactNode;
+  /**
+   * Additional CSS class names for the dialog container.
+   */
+  className?: string;
+  /**
+   * Ref to the element the dialog should be anchored to (for relative placement)
+   */
+  anchorRef?: React.RefObject<HTMLElement>;
+  /**
+   * Custom fixed position (e.g., { top: number, left: number })
+   */
+  customPosition?: {
+    top: number;
+    left: number;
+  };
+  /**
+   * If true, show modal overlay and center dialog (default: true)
+   */
+  modal?: boolean;
+}
+//#endregion
+export { DsDialogProps };
+//# sourceMappingURL=ds-dialog.types.d.ts.map

package/dist/components/ds-dialog/ds-dialog.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-dialog.types.d.ts","names":[],"sources":["../../../src/components/ds-dialog/ds-dialog.types.tsx"],"sourcesContent":[],"mappings":";;;UAEiB,aAAA;;AAAjB;;EAoC6B,IAAA,EAAA,OAAA;EAAhB;;;;;;;;;;;;;;;;;;;;;;;YARF,KAAA,CAAM;;;;;;;;cAQJ,KAAA,CAAM,UAAU"}

package/dist/components/ds-dialog/index.cjs

@@ -0,0 +1 @@
+const require_ds_dialog = require('./ds-dialog.cjs');

package/dist/components/ds-dialog/index.d.ts

@@ -0,0 +1,2 @@
+import { DsDialogProps } from "./ds-dialog.types.js";
+import { DsDialog } from "./ds-dialog.js";

package/dist/components/ds-dialog/index.js

@@ -0,0 +1 @@
+import ds_dialog_default from "./ds-dialog.js";

package/dist/components/ds-drawer/ds-drawer.cjs

@@ -0,0 +1,297 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_icon = require('../ds-icon/ds-icon.cjs');
+require('../ds-icon/index.cjs');
+const require_ds_typography = require('../ds-typography/ds-typography.cjs');
+require('../ds-typography/index.cjs');
+const require_ds_drawer_module = require('./ds-drawer.module.cjs');
+let react_compiler_runtime = require("react/compiler-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let __ark_ui_react_portal = require("@ark-ui/react/portal");
+let __ark_ui_react_dialog = require("@ark-ui/react/dialog");
+
+//#region src/components/ds-drawer/ds-drawer.tsx
+/**
+* Composable drawer component.
+* Supports grid-based sizing, flexible positioning, and compound components.
+* Use columns prop to control drawer width (1-12 grid columns).
+*/
+const DsDrawer = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(25);
+	const { open, onOpenChange, columns: t1, position: t2, backdrop: t3, closeOnEscape: t4, closeOnInteractOutside: t5, portal: t6, style, className, children } = t0;
+	const columns = t1 === void 0 ? 4 : t1;
+	const position = t2 === void 0 ? "end" : t2;
+	const backdrop = t3 === void 0 ? false : t3;
+	const closeOnEscape = t4 === void 0 ? true : t4;
+	const closeOnInteractOutside = t5 === void 0 ? false : t5;
+	const portal = t6 === void 0 ? false : t6;
+	let t7;
+	if ($[0] !== onOpenChange) {
+		t7 = (details) => {
+			onOpenChange(details.open);
+		};
+		$[0] = onOpenChange;
+		$[1] = t7;
+	} else t7 = $[1];
+	const handleOpenChange = t7;
+	const Wrapper = portal ? __ark_ui_react_portal.Portal : react.Fragment;
+	let t8;
+	if ($[2] !== backdrop) {
+		t8 = backdrop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Backdrop, { className: require_ds_drawer_module.default.backdrop });
+		$[2] = backdrop;
+		$[3] = t8;
+	} else t8 = $[3];
+	const t9 = require_ds_drawer_module.default[`cols-${String(columns)}`];
+	const t10 = require_ds_drawer_module.default[`position-${position}`];
+	let t11;
+	if ($[4] !== className || $[5] !== t10 || $[6] !== t9) {
+		t11 = (0, classnames.default)(require_ds_drawer_module.default.drawer, t9, t10, className);
+		$[4] = className;
+		$[5] = t10;
+		$[6] = t9;
+		$[7] = t11;
+	} else t11 = $[7];
+	let t12;
+	if ($[8] !== children) {
+		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_ds_drawer_module.default.content,
+			children
+		});
+		$[8] = children;
+		$[9] = t12;
+	} else t12 = $[9];
+	let t13;
+	if ($[10] !== style || $[11] !== t11 || $[12] !== t12) {
+		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Positioner, {
+			className: require_ds_drawer_module.default.positioner,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Content, {
+				style,
+				className: t11,
+				children: t12
+			})
+		});
+		$[10] = style;
+		$[11] = t11;
+		$[12] = t12;
+		$[13] = t13;
+	} else t13 = $[13];
+	let t14;
+	if ($[14] !== Wrapper || $[15] !== t13 || $[16] !== t8) {
+		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, { children: [t8, t13] });
+		$[14] = Wrapper;
+		$[15] = t13;
+		$[16] = t8;
+		$[17] = t14;
+	} else t14 = $[17];
+	let t15;
+	if ($[18] !== backdrop || $[19] !== closeOnEscape || $[20] !== closeOnInteractOutside || $[21] !== handleOpenChange || $[22] !== open || $[23] !== t14) {
+		t15 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Root, {
+			open,
+			onOpenChange: handleOpenChange,
+			modal: backdrop,
+			closeOnEscape,
+			closeOnInteractOutside,
+			preventScroll: backdrop,
+			children: t14
+		});
+		$[18] = backdrop;
+		$[19] = closeOnEscape;
+		$[20] = closeOnInteractOutside;
+		$[21] = handleOpenChange;
+		$[22] = open;
+		$[23] = t14;
+		$[24] = t15;
+	} else t15 = $[24];
+	return t15;
+};
+const Header = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_drawer_module.default.header, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const Title = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(8);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_drawer_module.default.title, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			variant: "heading3",
+			children
+		});
+		$[2] = children;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== style || $[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Title, {
+			className: t1,
+			style,
+			asChild: true,
+			children: t2
+		});
+		$[4] = style;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+};
+const CloseTrigger = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_drawer_module.default.closeTrigger, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+			icon: "close",
+			size: "small"
+		});
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== style || $[4] !== t1) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.CloseTrigger, {
+			style,
+			className: t1,
+			children: t2
+		});
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+};
+const Toolbar = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_drawer_module.default.toolbar, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const Body = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_drawer_module.default.body, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const Footer = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_drawer_module.default.footer, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+const Actions = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { style, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_drawer_module.default.actions, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+DsDrawer.Header = Header;
+DsDrawer.Title = Title;
+DsDrawer.CloseTrigger = CloseTrigger;
+DsDrawer.Toolbar = Toolbar;
+DsDrawer.Body = Body;
+DsDrawer.Footer = Footer;
+DsDrawer.Actions = Actions;
+var ds_drawer_default = DsDrawer;
+
+//#endregion
+exports.default = ds_drawer_default;

package/dist/components/ds-drawer/ds-drawer.d.cts

@@ -0,0 +1,90 @@
+import { DsDrawerProps } from "./ds-drawer.types.cjs";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/ds-drawer/ds-drawer.d.ts
+
+/**
+ * Composable drawer component.
+ * Supports grid-based sizing, flexible positioning, and compound components.
+ * Use columns prop to control drawer width (1-12 grid columns).
+ */
+declare const DsDrawer: {
+  ({
+    open,
+    onOpenChange,
+    columns,
+    position,
+    backdrop,
+    closeOnEscape,
+    closeOnInteractOutside,
+    portal,
+    style,
+    className,
+    children
+  }: DsDrawerProps): react_jsx_runtime10.JSX.Element;
+  Header: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime10.JSX.Element;
+  Title: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime10.JSX.Element;
+  CloseTrigger: ({
+    style,
+    className
+  }: {
+    style?: CSSProperties;
+    className?: string;
+  }) => react_jsx_runtime10.JSX.Element;
+  Toolbar: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime10.JSX.Element;
+  Body: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime10.JSX.Element;
+  Footer: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime10.JSX.Element;
+  Actions: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime10.JSX.Element;
+};
+//#endregion
+export { DsDrawer };
+//# sourceMappingURL=ds-drawer.d.cts.map

package/dist/components/ds-drawer/ds-drawer.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-drawer.d.cts","names":[],"sources":["../../../src/components/ds-drawer/ds-drawer.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAIuD;;cAUjD;;;;;;;;;;;;;KAYH,gBAAa,mBAAA,CAAA,GAAA,CAAA;;;;;;YAwCP;;cAEE;QACV,mBAAA,CAAA,GAAA,CAAA;;;;;EA3Ce;YAsDP;;IAtDN,QAAA,EAwDQ,SAxDR;EAAa,CAAA,EAAA,GAyDf,mBAAA,CAAA,GAAA,CAAA,OAzDe;;;;EAwCP;YAuB6C;;EAvB7C,CAAA,EAAA,GAuBgF,mBAAA,CAAA,GAAA,CAAA,OAvBhF;EAEE,OAAA,EAAA,CAAA;IAAA,KAAA;IAAA,SAAA;IAAA;GAAA,EAAA;IACV,KAAA,CAAA,EA+BQ,aA/BR;;cAiCU;QACV,mBAAA,CAAA,GAAA,CAAA;EAvBQ,IAAA,EAAA,CAAA;IAAA,KAAA;IAAA,SAAA;IAAA;GAAA,EAAA;IAEE,KAAA,CAAA,EAgCF,aAhCE;IACV,SAAA,CAAA,EAAA,MAAA;cAiCU;QACV,mBAAA,CAAA,GAAA,CAAA;EA5BqD,MAAA,EAAA,CAAA;IAAA,KAAA;IAAA,SAAA;IAAA;GAAA,EAAA;IAAmC,KAAA,CAAA,EAuChF,aAvCgF;;cAyC9E;QACV,mBAAA,CAAA,GAAA,CAAA;EA/BQ,OAAA,EAAA,CAAA;IAAA,KAAA;IAAA,SAAA;IAAA;GAAA,EAAA;IAEE,KAAA,CAAA,EAwCF,aAxCE;IACV,SAAA,CAAA,EAAA,MAAA;cAyCU;QACV,mBAAA,CAAA,GAAA,CAAA"}