@drivenets/design-system 0.0.2 → 0.0.3

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

@@ -0,0 +1,8 @@
+import { DsDialogProps } from "./ds-dialog.types.js";
+import React from "react";
+
+//#region src/components/ds-dialog/ds-dialog.d.ts
+declare const DsDialog: React.FC<DsDialogProps>;
+//#endregion
+export { DsDialog };
+//# sourceMappingURL=ds-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-dialog.d.ts","names":[],"sources":["../../../src/components/ds-dialog/ds-dialog.tsx"],"sourcesContent":[],"mappings":";;;;cAOM,UAAU,KAAA,CAAM,GAAG"}

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":["DsDialog: React.FC<DsDialogProps>","style: React.CSSProperties","styles","VisuallyHidden"],"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,MAAMA,YAAqC,EAC1C,MACA,cACA,OACA,WACA,aACA,iBACA,UACA,WACA,WACA,gBACA,QAAQ,WACH;CACL,IAAIC,QAA6B,EAAE;AACnC,KAAI,eACH,SAAQ;EAAE,UAAU;EAAS,GAAG;EAAgB;UACtC,WAAW,SAAS;EAC9B,MAAM,OAAO,UAAU,QAAQ,uBAAuB;AACtD,UAAQ;GAAE,UAAU;GAAS,KAAK,KAAK;GAAQ,MAAM,KAAK;GAAM;;AAGjE,QACC,oBAAC,YAAY;EAAW;EAAoB;YAC3C,qBAAC,YAAY,qBACX,SAAS,oBAAC,YAAY,WAAQ,WAAWC,yBAAO,UAAW,EAC5D,qBAAC,YAAY;GACZ,WAAW,WAAWA,yBAAO,QAAQ,WAAW,GAC9CA,yBAAO,kBAAkB,kBAAkB,WAC5C,CAAC;GACF,OAAO,kBAAkB,YAAY,QAAQ;;IAE7C,oBAAC,YAAY;KAAM;eACjB,YACA,oBAACC,kBACA,oBAAC,YAAY;MAAM,WAAWD,yBAAO;gBAAQ;OAA0B,GACvD,GAEjB,oBAAC,YAAY;MAAM,WAAWA,yBAAO;gBAAQ;OAA0B;MAErD;IACnB,eACA,oBAAC,YAAY;KAAY;eACvB,kBACA,oBAACC,kBACA,oBAAC,YAAY;MAAY,WAAWD,yBAAO;gBACzC;OACwB,GACV,GAEjB,oBAAC,YAAY;MAAY,WAAWA,yBAAO;gBACzC;OACwB;MAEF;IAE1B;;IACoB,IACF;GACH;;AAIrB,wBAAe"}

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,97 @@
+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 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 = ({ open, onOpenChange, columns = 4, position = "end", backdrop = false, closeOnEscape = true, closeOnInteractOutside = false, portal = false, style, className, children }) => {
+	const handleOpenChange = (details) => {
+		onOpenChange(details.open);
+	};
+	const Wrapper = portal ? __ark_ui_react_portal.Portal : react.Fragment;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Root, {
+		open,
+		onOpenChange: handleOpenChange,
+		modal: backdrop,
+		closeOnEscape,
+		closeOnInteractOutside,
+		preventScroll: backdrop,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, { children: [backdrop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Backdrop, { className: require_ds_drawer_module.default.backdrop }), /* @__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: (0, classnames.default)(require_ds_drawer_module.default.drawer, require_ds_drawer_module.default[`cols-${String(columns)}`], require_ds_drawer_module.default[`position-${position}`], className),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_ds_drawer_module.default.content,
+					children
+				})
+			})
+		})] })
+	});
+};
+const Header = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	style,
+	className: (0, classnames.default)(require_ds_drawer_module.default.header, className),
+	children
+});
+const Title = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Title, {
+	className: (0, classnames.default)(require_ds_drawer_module.default.title, className),
+	style,
+	asChild: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+		variant: "heading3",
+		children
+	})
+});
+const CloseTrigger = ({ style, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.CloseTrigger, {
+	style,
+	className: (0, classnames.default)(require_ds_drawer_module.default.closeTrigger, className),
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+		icon: "close",
+		size: "small"
+	})
+});
+const Toolbar = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	style,
+	className: (0, classnames.default)(require_ds_drawer_module.default.toolbar, className),
+	children
+});
+const Body = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	style,
+	className: (0, classnames.default)(require_ds_drawer_module.default.body, className),
+	children
+});
+const Footer = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	style,
+	className: (0, classnames.default)(require_ds_drawer_module.default.footer, className),
+	children
+});
+const Actions = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	style,
+	className: (0, classnames.default)(require_ds_drawer_module.default.actions, className),
+	children
+});
+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_runtime23 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_runtime23.JSX.Element;
+  Header: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime23.JSX.Element;
+  Title: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime23.JSX.Element;
+  CloseTrigger: ({
+    style,
+    className
+  }: {
+    style?: CSSProperties;
+    className?: string;
+  }) => react_jsx_runtime23.JSX.Element;
+  Toolbar: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime23.JSX.Element;
+  Body: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime23.JSX.Element;
+  Footer: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime23.JSX.Element;
+  Actions: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime23.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"}

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

@@ -0,0 +1,90 @@
+import { DsDrawerProps } from "./ds-drawer.types.js";
+import * as react_jsx_runtime29 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_runtime29.JSX.Element;
+  Header: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime29.JSX.Element;
+  Title: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime29.JSX.Element;
+  CloseTrigger: ({
+    style,
+    className
+  }: {
+    style?: CSSProperties;
+    className?: string;
+  }) => react_jsx_runtime29.JSX.Element;
+  Toolbar: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime29.JSX.Element;
+  Body: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime29.JSX.Element;
+  Footer: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime29.JSX.Element;
+  Actions: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime29.JSX.Element;
+};
+//#endregion
+export { DsDrawer };
+//# sourceMappingURL=ds-drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-drawer.d.ts","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"}

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

@@ -0,0 +1,96 @@
+import ds_icon_default from "../ds-icon/ds-icon.js";
+import "../ds-icon/index.js";
+import ds_typography_default from "../ds-typography/ds-typography.js";
+import "../ds-typography/index.js";
+import ds_drawer_module_default from "./ds-drawer.module.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { Portal } from "@ark-ui/react/portal";
+import { Dialog } from "@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 = ({ open, onOpenChange, columns = 4, position = "end", backdrop = false, closeOnEscape = true, closeOnInteractOutside = false, portal = false, style, className, children }) => {
+	const handleOpenChange = (details) => {
+		onOpenChange(details.open);
+	};
+	const Wrapper = portal ? Portal : Fragment;
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange: handleOpenChange,
+		modal: backdrop,
+		closeOnEscape,
+		closeOnInteractOutside,
+		preventScroll: backdrop,
+		children: /* @__PURE__ */ jsxs(Wrapper, { children: [backdrop && /* @__PURE__ */ jsx(Dialog.Backdrop, { className: ds_drawer_module_default.backdrop }), /* @__PURE__ */ jsx(Dialog.Positioner, {
+			className: ds_drawer_module_default.positioner,
+			children: /* @__PURE__ */ jsx(Dialog.Content, {
+				style,
+				className: classNames(ds_drawer_module_default.drawer, ds_drawer_module_default[`cols-${String(columns)}`], ds_drawer_module_default[`position-${position}`], className),
+				children: /* @__PURE__ */ jsx("div", {
+					className: ds_drawer_module_default.content,
+					children
+				})
+			})
+		})] })
+	});
+};
+const Header = ({ style, className, children }) => /* @__PURE__ */ jsx("div", {
+	style,
+	className: classNames(ds_drawer_module_default.header, className),
+	children
+});
+const Title = ({ style, className, children }) => /* @__PURE__ */ jsx(Dialog.Title, {
+	className: classNames(ds_drawer_module_default.title, className),
+	style,
+	asChild: true,
+	children: /* @__PURE__ */ jsx(ds_typography_default, {
+		variant: "heading3",
+		children
+	})
+});
+const CloseTrigger = ({ style, className }) => /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+	style,
+	className: classNames(ds_drawer_module_default.closeTrigger, className),
+	children: /* @__PURE__ */ jsx(ds_icon_default, {
+		icon: "close",
+		size: "small"
+	})
+});
+const Toolbar = ({ style, className, children }) => /* @__PURE__ */ jsx("div", {
+	style,
+	className: classNames(ds_drawer_module_default.toolbar, className),
+	children
+});
+const Body = ({ style, className, children }) => /* @__PURE__ */ jsx("div", {
+	style,
+	className: classNames(ds_drawer_module_default.body, className),
+	children
+});
+const Footer = ({ style, className, children }) => /* @__PURE__ */ jsx("div", {
+	style,
+	className: classNames(ds_drawer_module_default.footer, className),
+	children
+});
+const Actions = ({ style, className, children }) => /* @__PURE__ */ jsx("div", {
+	style,
+	className: classNames(ds_drawer_module_default.actions, className),
+	children
+});
+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
+export { ds_drawer_default as default };
+//# sourceMappingURL=ds-drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-drawer.js","names":["styles","DsTypography","DsIcon"],"sources":["../../../src/components/ds-drawer/ds-drawer.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode, Fragment } from 'react';\nimport { Dialog } from '@ark-ui/react/dialog';\nimport { Portal } from '@ark-ui/react/portal';\nimport classNames from 'classnames';\nimport type { DsDrawerProps } from './ds-drawer.types';\nimport styles from './ds-drawer.module.scss';\nimport { DsIcon } from '../ds-icon';\nimport { DsTypography } from '../ds-typography';\n\n/**\n * Composable drawer component.\n * Supports grid-based sizing, flexible positioning, and compound components.\n * Use columns prop to control drawer width (1-12 grid columns).\n */\nconst DsDrawer = ({\n\topen,\n\tonOpenChange,\n\tcolumns = 4,\n\tposition = 'end',\n\tbackdrop = false,\n\tcloseOnEscape = true,\n\tcloseOnInteractOutside = false,\n\tportal = false,\n\tstyle,\n\tclassName,\n\tchildren,\n}: DsDrawerProps) => {\n\tconst handleOpenChange = (details: { open: boolean }) => {\n\t\tonOpenChange(details.open);\n\t};\n\tconst Wrapper = portal ? Portal : Fragment;\n\n\treturn (\n\t\t<Dialog.Root\n\t\t\topen={open}\n\t\t\tonOpenChange={handleOpenChange}\n\t\t\tmodal={backdrop}\n\t\t\tcloseOnEscape={closeOnEscape}\n\t\t\tcloseOnInteractOutside={closeOnInteractOutside}\n\t\t\tpreventScroll={backdrop}\n\t\t>\n\t\t\t<Wrapper>\n\t\t\t\t{backdrop && <Dialog.Backdrop className={styles.backdrop} />}\n\t\t\t\t<Dialog.Positioner className={styles.positioner}>\n\t\t\t\t\t<Dialog.Content\n\t\t\t\t\t\tstyle={style}\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\tstyles.drawer,\n\t\t\t\t\t\t\tstyles[`cols-${String(columns)}`],\n\t\t\t\t\t\t\tstyles[`position-${position}`],\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className={styles.content}>{children}</div>\n\t\t\t\t\t</Dialog.Content>\n\t\t\t\t</Dialog.Positioner>\n\t\t\t</Wrapper>\n\t\t</Dialog.Root>\n\t);\n};\n\nconst Header = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.header, className)}>\n\t\t{children}\n\t</div>\n);\n\nconst Title = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<Dialog.Title className={classNames(styles.title, className)} style={style} asChild>\n\t\t<DsTypography variant=\"heading3\">{children}</DsTypography>\n\t</Dialog.Title>\n);\n\nconst CloseTrigger = ({ style, className }: { style?: CSSProperties; className?: string }) => (\n\t<Dialog.CloseTrigger style={style} className={classNames(styles.closeTrigger, className)}>\n\t\t<DsIcon icon=\"close\" size=\"small\" />\n\t</Dialog.CloseTrigger>\n);\n\nconst Toolbar = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.toolbar, className)}>\n\t\t{children}\n\t</div>\n);\n\nconst Body = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.body, className)}>\n\t\t{children}\n\t</div>\n);\n\nconst Footer = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.footer, className)}>\n\t\t{children}\n\t</div>\n);\n\nconst Actions = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.actions, className)}>\n\t\t{children}\n\t</div>\n);\n\nDsDrawer.Header = Header;\nDsDrawer.Title = Title;\nDsDrawer.CloseTrigger = CloseTrigger;\nDsDrawer.Toolbar = Toolbar;\nDsDrawer.Body = Body;\nDsDrawer.Footer = Footer;\nDsDrawer.Actions = Actions;\n\nexport default DsDrawer;\n"],"mappings":";;;;;;;;;;;;;;;;;AAcA,MAAM,YAAY,EACjB,MACA,cACA,UAAU,GACV,WAAW,OACX,WAAW,OACX,gBAAgB,MAChB,yBAAyB,OACzB,SAAS,OACT,OACA,WACA,eACoB;CACpB,MAAM,oBAAoB,YAA+B;AACxD,eAAa,QAAQ,KAAK;;CAE3B,MAAM,UAAU,SAAS,SAAS;AAElC,QACC,oBAAC,OAAO;EACD;EACN,cAAc;EACd,OAAO;EACQ;EACS;EACxB,eAAe;YAEf,qBAAC,sBACC,YAAY,oBAAC,OAAO,YAAS,WAAWA,yBAAO,WAAY,EAC5D,oBAAC,OAAO;GAAW,WAAWA,yBAAO;aACpC,oBAAC,OAAO;IACA;IACP,WAAW,WACVA,yBAAO,QACPA,yBAAO,QAAQ,OAAO,QAAQ,KAC9BA,yBAAO,YAAY,aACnB,UACA;cAED,oBAAC;KAAI,WAAWA,yBAAO;KAAU;MAAe;KAChC;IACE,IACX;GACG;;AAIhB,MAAM,UAAU,EACf,OACA,WACA,eAMA,oBAAC;CAAW;CAAO,WAAW,WAAWA,yBAAO,QAAQ,UAAU;CAChE;EACI;AAGP,MAAM,SAAS,EACd,OACA,WACA,eAMA,oBAAC,OAAO;CAAM,WAAW,WAAWA,yBAAO,OAAO,UAAU;CAAS;CAAO;WAC3E,oBAACC;EAAa,SAAQ;EAAY;GAAwB;EAC5C;AAGhB,MAAM,gBAAgB,EAAE,OAAO,gBAC9B,oBAAC,OAAO;CAAoB;CAAO,WAAW,WAAWD,yBAAO,cAAc,UAAU;WACvF,oBAACE;EAAO,MAAK;EAAQ,MAAK;GAAU;EACf;AAGvB,MAAM,WAAW,EAChB,OACA,WACA,eAMA,oBAAC;CAAW;CAAO,WAAW,WAAWF,yBAAO,SAAS,UAAU;CACjE;EACI;AAGP,MAAM,QAAQ,EACb,OACA,WACA,eAMA,oBAAC;CAAW;CAAO,WAAW,WAAWA,yBAAO,MAAM,UAAU;CAC9D;EACI;AAGP,MAAM,UAAU,EACf,OACA,WACA,eAMA,oBAAC;CAAW;CAAO,WAAW,WAAWA,yBAAO,QAAQ,UAAU;CAChE;EACI;AAGP,MAAM,WAAW,EAChB,OACA,WACA,eAMA,oBAAC;CAAW;CAAO,WAAW,WAAWA,yBAAO,SAAS,UAAU;CACjE;EACI;AAGP,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,OAAO;AAChB,SAAS,SAAS;AAClB,SAAS,UAAU;AAEnB,wBAAe"}