@drivenets/design-system 0.0.1 → 0.0.3

package/dist/components/ds-chip-group/hooks/use-chip-row-calculation.cjs

@@ -0,0 +1,51 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/ds-chip-group/hooks/use-chip-row-calculation.ts
+/**
+* Custom hook to calculate how many chips can fit in 2 rows
+* Uses a simple approach: render all, measure positions, hide overflow
+*/
+const useChipRowCalculation = ({ chipsWrapperRef, totalFilters }) => {
+	const [visibleCount, setVisibleCount] = (0, react.useState)(totalFilters);
+	(0, react.useLayoutEffect)(() => {
+		const calculateVisibleChips = () => {
+			if (!chipsWrapperRef.current) return;
+			const wrapper = chipsWrapperRef.current;
+			const children = Array.from(wrapper.children);
+			if (children.length === 0) return;
+			const cs = getComputedStyle(wrapper);
+			const gap = parseFloat(cs.columnGap || cs.gap || "0") || 8;
+			let index;
+			let line = 0;
+			let total = 0;
+			for (index = 0; index < children.length; index++) {
+				const current = children[index];
+				const next = (current.offsetWidth === wrapper.clientWidth ? 0 : gap) + current.offsetWidth;
+				if (total + next >= wrapper.clientWidth) {
+					line++;
+					if (line >= 2) break;
+					total = next;
+				} else total += next;
+			}
+			setVisibleCount(Math.max(1, line < 2 ? index : index - 1));
+		};
+		const rafId = requestAnimationFrame(() => {
+			calculateVisibleChips();
+		});
+		const resizeObserver = new ResizeObserver(() => {
+			requestAnimationFrame(() => {
+				calculateVisibleChips();
+			});
+		});
+		if (chipsWrapperRef.current) resizeObserver.observe(chipsWrapperRef.current);
+		return () => {
+			cancelAnimationFrame(rafId);
+			resizeObserver.disconnect();
+		};
+	}, [chipsWrapperRef, totalFilters]);
+	return visibleCount;
+};
+
+//#endregion
+exports.useChipRowCalculation = useChipRowCalculation;

package/dist/components/ds-chip-group/hooks/use-chip-row-calculation.js

@@ -0,0 +1,51 @@
+import { useLayoutEffect, useState } from "react";
+
+//#region src/components/ds-chip-group/hooks/use-chip-row-calculation.ts
+/**
+* Custom hook to calculate how many chips can fit in 2 rows
+* Uses a simple approach: render all, measure positions, hide overflow
+*/
+const useChipRowCalculation = ({ chipsWrapperRef, totalFilters }) => {
+	const [visibleCount, setVisibleCount] = useState(totalFilters);
+	useLayoutEffect(() => {
+		const calculateVisibleChips = () => {
+			if (!chipsWrapperRef.current) return;
+			const wrapper = chipsWrapperRef.current;
+			const children = Array.from(wrapper.children);
+			if (children.length === 0) return;
+			const cs = getComputedStyle(wrapper);
+			const gap = parseFloat(cs.columnGap || cs.gap || "0") || 8;
+			let index;
+			let line = 0;
+			let total = 0;
+			for (index = 0; index < children.length; index++) {
+				const current = children[index];
+				const next = (current.offsetWidth === wrapper.clientWidth ? 0 : gap) + current.offsetWidth;
+				if (total + next >= wrapper.clientWidth) {
+					line++;
+					if (line >= 2) break;
+					total = next;
+				} else total += next;
+			}
+			setVisibleCount(Math.max(1, line < 2 ? index : index - 1));
+		};
+		const rafId = requestAnimationFrame(() => {
+			calculateVisibleChips();
+		});
+		const resizeObserver = new ResizeObserver(() => {
+			requestAnimationFrame(() => {
+				calculateVisibleChips();
+			});
+		});
+		if (chipsWrapperRef.current) resizeObserver.observe(chipsWrapperRef.current);
+		return () => {
+			cancelAnimationFrame(rafId);
+			resizeObserver.disconnect();
+		};
+	}, [chipsWrapperRef, totalFilters]);
+	return visibleCount;
+};
+
+//#endregion
+export { useChipRowCalculation };
+//# sourceMappingURL=use-chip-row-calculation.js.map

package/dist/components/ds-chip-group/hooks/use-chip-row-calculation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chip-row-calculation.js","names":[],"sources":["../../../../src/components/ds-chip-group/hooks/use-chip-row-calculation.ts"],"sourcesContent":["import { type RefObject, useLayoutEffect, useState } from 'react';\n\ninterface UseChipRowCalculationProps {\n\tchipsWrapperRef: RefObject<HTMLDivElement | null>;\n\ttotalFilters: number;\n}\n\n/**\n * Custom hook to calculate how many chips can fit in 2 rows\n * Uses a simple approach: render all, measure positions, hide overflow\n */\nexport const useChipRowCalculation = ({ chipsWrapperRef, totalFilters }: UseChipRowCalculationProps) => {\n\tconst [visibleCount, setVisibleCount] = useState(totalFilters);\n\n\tuseLayoutEffect(() => {\n\t\tconst calculateVisibleChips = () => {\n\t\t\tif (!chipsWrapperRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst wrapper = chipsWrapperRef.current;\n\t\t\tconst children = Array.from(wrapper.children) as HTMLElement[];\n\n\t\t\tif (children.length === 0) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst cs = getComputedStyle(wrapper);\n\t\t\tconst gap = parseFloat(cs.columnGap || cs.gap || '0') || 8;\n\t\t\tlet index;\n\t\t\tlet line = 0;\n\t\t\tlet total = 0;\n\n\t\t\tfor (index = 0; index < children.length; index++) {\n\t\t\t\tconst current = children[index];\n\t\t\t\tconst offset = current.offsetWidth === wrapper.clientWidth ? 0 : gap;\n\t\t\t\tconst next = offset + current.offsetWidth;\n\n\t\t\t\tif (total + next >= wrapper.clientWidth) {\n\t\t\t\t\tline++;\n\t\t\t\t\tif (line >= 2) {\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\ttotal = next;\n\t\t\t\t} else {\n\t\t\t\t\ttotal += next;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst result = Math.max(1, line < 2 ? index : index - 1);\n\t\t\tsetVisibleCount(result);\n\t\t};\n\n\t\t// Use requestAnimationFrame to ensure DOM is fully laid out\n\t\tconst rafId = requestAnimationFrame(() => {\n\t\t\tcalculateVisibleChips();\n\t\t});\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tcalculateVisibleChips();\n\t\t\t});\n\t\t});\n\n\t\tif (chipsWrapperRef.current) {\n\t\t\tresizeObserver.observe(chipsWrapperRef.current);\n\t\t}\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(rafId);\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [chipsWrapperRef, totalFilters]);\n\n\treturn visibleCount;\n};\n"],"mappings":";;;;;;;AAWA,MAAa,yBAAyB,EAAE,iBAAiB,mBAA+C;CACvG,MAAM,CAAC,cAAc,mBAAmB,SAAS,aAAa;AAE9D,uBAAsB;EACrB,MAAM,8BAA8B;AACnC,OAAI,CAAC,gBAAgB,QACpB;GAGD,MAAM,UAAU,gBAAgB;GAChC,MAAM,WAAW,MAAM,KAAK,QAAQ,SAAS;AAE7C,OAAI,SAAS,WAAW,EACvB;GAGD,MAAM,KAAK,iBAAiB,QAAQ;GACpC,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,OAAO,IAAI,IAAI;GACzD,IAAI;GACJ,IAAI,OAAO;GACX,IAAI,QAAQ;AAEZ,QAAK,QAAQ,GAAG,QAAQ,SAAS,QAAQ,SAAS;IACjD,MAAM,UAAU,SAAS;IAEzB,MAAM,QADS,QAAQ,gBAAgB,QAAQ,cAAc,IAAI,OAC3C,QAAQ;AAE9B,QAAI,QAAQ,QAAQ,QAAQ,aAAa;AACxC;AACA,SAAI,QAAQ,EACX;AAED,aAAQ;UAER,UAAS;;AAKX,mBADe,KAAK,IAAI,GAAG,OAAO,IAAI,QAAQ,QAAQ,EAAE,CACjC;;EAIxB,MAAM,QAAQ,4BAA4B;AACzC,0BAAuB;IACtB;EAEF,MAAM,iBAAiB,IAAI,qBAAqB;AAC/C,+BAA4B;AAC3B,2BAAuB;KACtB;IACD;AAEF,MAAI,gBAAgB,QACnB,gBAAe,QAAQ,gBAAgB,QAAQ;AAGhD,eAAa;AACZ,wBAAqB,MAAM;AAC3B,kBAAe,YAAY;;IAE1B,CAAC,iBAAiB,aAAa,CAAC;AAEnC,QAAO"}

package/dist/components/ds-chip-group/index.cjs

@@ -0,0 +1 @@
+const require_ds_chip_group = require('./ds-chip-group.cjs');

package/dist/components/ds-chip-group/index.d.ts

@@ -0,0 +1,2 @@
+import { ChipItem, DsChipGroupProps } from "./ds-chip-group.types.js";
+import { DsChipGroup } from "./ds-chip-group.js";

package/dist/components/ds-chip-group/index.js

@@ -0,0 +1 @@
+import ds_chip_group_default from "./ds-chip-group.js";

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

@@ -0,0 +1,81 @@
+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');
+const require_ds_confirmation_module = require('./ds-confirmation.module.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let __ark_ui_react_portal = require("@ark-ui/react/portal");
+let __ark_ui_react_dialog = require("@ark-ui/react/dialog");
+
+//#region src/components/ds-confirmation/ds-confirmation.tsx
+/**
+* Composable confirmation modal dialog.
+*/
+const DsConfirmation = ({ open, onOpenChange, style, className, children }) => {
+	const handleOpenChange = (details) => {
+		onOpenChange(details.open);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Root, {
+		open,
+		onOpenChange: handleOpenChange,
+		modal: true,
+		closeOnEscape: true,
+		closeOnInteractOutside: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_portal.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Backdrop, { className: require_ds_confirmation_module.default.overlay }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Content, {
+			className: (0, classnames.default)(require_ds_confirmation_module.default.modal, className),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style,
+				className: require_ds_confirmation_module.default.content,
+				children
+			})
+		}) })] })
+	});
+};
+const Header = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	style,
+	className: (0, classnames.default)(require_ds_confirmation_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_confirmation_module.default.title, className),
+	style,
+	asChild: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+		variant: "heading4",
+		children
+	})
+});
+const CloseTrigger = ({ style, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.CloseTrigger, {
+	style,
+	className,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+		icon: "close",
+		size: "small"
+	})
+});
+const Body = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	style,
+	className: (0, classnames.default)(require_ds_confirmation_module.default.body, className),
+	children
+});
+const Footer = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	style,
+	className: (0, classnames.default)(require_ds_confirmation_module.default.footer, className),
+	children
+});
+const Actions = ({ style, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	style,
+	className: (0, classnames.default)(require_ds_confirmation_module.default.actions, className),
+	children
+});
+DsConfirmation.Header = Header;
+DsConfirmation.Title = Title;
+DsConfirmation.CloseTrigger = CloseTrigger;
+DsConfirmation.Body = Body;
+DsConfirmation.Footer = Footer;
+DsConfirmation.Actions = Actions;
+
+//#endregion
+exports.DsConfirmation = DsConfirmation;

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

@@ -0,0 +1,72 @@
+import { DsConfirmationProps } from "./ds-confirmation.types.cjs";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/ds-confirmation/ds-confirmation.d.ts
+/**
+ * Composable confirmation modal dialog.
+ */
+declare const DsConfirmation: {
+  ({
+    open,
+    onOpenChange,
+    style,
+    className,
+    children
+  }: DsConfirmationProps): react_jsx_runtime31.JSX.Element;
+  Header: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime31.JSX.Element;
+  Title: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime31.JSX.Element;
+  CloseTrigger: ({
+    style,
+    className
+  }: {
+    style?: CSSProperties;
+    className?: string;
+  }) => react_jsx_runtime31.JSX.Element;
+  Body: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime31.JSX.Element;
+  Footer: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime31.JSX.Element;
+  Actions: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime31.JSX.Element;
+};
+//#endregion
+export { DsConfirmation };
+//# sourceMappingURL=ds-confirmation.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-confirmation.d.cts","names":[],"sources":["../../../src/components/ds-confirmation/ds-confirmation.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAYa,cAAA,cAyBZ,EAAA;;;;;;;KAzBkF,sBAAmB,mBAAA,CAAA,GAAA,CAAA;;;;;EAAnB;YAgC1E;;cAEE;EAlCwE,CAAA,EAAA,GAmClF,mBAAA,CAAA,GAAA,CAAA,OAnCkF;EAAmB,KAAA,EAAA,CAAA;IAAA,KAAA;IAAA,SAAA;IAAA;EAgC7F,CAhC6F,EAAA;YA8C7F;;cAEE;EAhBF,CAAA,EAAA,GAiBR,mBAAA,CAAA,GAAA,CAAA,OAjBQ;EAEE,YAAA,EAAA,CAAA;IAAA,KAAA;IAAA;GAAA,EAAA;IACV,KAAA,CAAA,EAoBqD,aApBrD;;QAoBwF,mBAAA,CAAA,GAAA,CAAA;;;;;;IAThF,KAAA,CAAA,EAoBA,aApBA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EAmBU,SAnBV;QAoBA,mBAAA,CAAA,GAAA,CAAA;;;;;;IAdqD,KAAA,CAAA,EAyB7C,aAzB6C;IAAmC,SAAA,CAAA,EAAA,MAAA;cA2B9E;QACV,mBAAA,CAAA,GAAA,CAAA;;;;;;IAjBQ,KAAA,CAAA,EA4BA,aA5BA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EA2BU,SA3BV;QA4BA,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,72 @@
+import { DsConfirmationProps } from "./ds-confirmation.types.js";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/ds-confirmation/ds-confirmation.d.ts
+/**
+ * Composable confirmation modal dialog.
+ */
+declare const DsConfirmation: {
+  ({
+    open,
+    onOpenChange,
+    style,
+    className,
+    children
+  }: DsConfirmationProps): react_jsx_runtime22.JSX.Element;
+  Header: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime22.JSX.Element;
+  Title: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime22.JSX.Element;
+  CloseTrigger: ({
+    style,
+    className
+  }: {
+    style?: CSSProperties;
+    className?: string;
+  }) => react_jsx_runtime22.JSX.Element;
+  Body: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime22.JSX.Element;
+  Footer: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime22.JSX.Element;
+  Actions: ({
+    style,
+    className,
+    children
+  }: {
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+  }) => react_jsx_runtime22.JSX.Element;
+};
+//#endregion
+export { DsConfirmation };
+//# sourceMappingURL=ds-confirmation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-confirmation.d.ts","names":[],"sources":["../../../src/components/ds-confirmation/ds-confirmation.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAYa,cAAA,cAyBZ,EAAA;;;;;;;KAzBkF,sBAAmB,mBAAA,CAAA,GAAA,CAAA;;;;;EAAnB;YAgC1E;;cAEE;EAlCwE,CAAA,EAAA,GAmClF,mBAAA,CAAA,GAAA,CAAA,OAnCkF;EAAmB,KAAA,EAAA,CAAA;IAAA,KAAA;IAAA,SAAA;IAAA;EAgC7F,CAhC6F,EAAA;YA8C7F;;cAEE;EAhBF,CAAA,EAAA,GAiBR,mBAAA,CAAA,GAAA,CAAA,OAjBQ;EAEE,YAAA,EAAA,CAAA;IAAA,KAAA;IAAA;GAAA,EAAA;IACV,KAAA,CAAA,EAoBqD,aApBrD;;QAoBwF,mBAAA,CAAA,GAAA,CAAA;;;;;;IAThF,KAAA,CAAA,EAoBA,aApBA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EAmBU,SAnBV;QAoBA,mBAAA,CAAA,GAAA,CAAA;;;;;;IAdqD,KAAA,CAAA,EAyB7C,aAzB6C;IAAmC,SAAA,CAAA,EAAA,MAAA;cA2B9E;QACV,mBAAA,CAAA,GAAA,CAAA;;;;;;IAjBQ,KAAA,CAAA,EA4BA,aA5BA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EA2BU,SA3BV;QA4BA,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,80 @@
+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_confirmation_module_default from "./ds-confirmation.module.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@ark-ui/react/portal";
+import { Dialog } from "@ark-ui/react/dialog";
+
+//#region src/components/ds-confirmation/ds-confirmation.tsx
+/**
+* Composable confirmation modal dialog.
+*/
+const DsConfirmation = ({ open, onOpenChange, style, className, children }) => {
+	const handleOpenChange = (details) => {
+		onOpenChange(details.open);
+	};
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange: handleOpenChange,
+		modal: true,
+		closeOnEscape: true,
+		closeOnInteractOutside: true,
+		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: ds_confirmation_module_default.overlay }), /* @__PURE__ */ jsx(Dialog.Positioner, { children: /* @__PURE__ */ jsx(Dialog.Content, {
+			className: classNames(ds_confirmation_module_default.modal, className),
+			children: /* @__PURE__ */ jsx("div", {
+				style,
+				className: ds_confirmation_module_default.content,
+				children
+			})
+		}) })] })
+	});
+};
+const Header = ({ style, className, children }) => /* @__PURE__ */ jsx("div", {
+	style,
+	className: classNames(ds_confirmation_module_default.header, className),
+	children
+});
+const Title = ({ style, className, children }) => /* @__PURE__ */ jsx(Dialog.Title, {
+	className: classNames(ds_confirmation_module_default.title, className),
+	style,
+	asChild: true,
+	children: /* @__PURE__ */ jsx(ds_typography_default, {
+		variant: "heading4",
+		children
+	})
+});
+const CloseTrigger = ({ style, className }) => /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+	style,
+	className,
+	children: /* @__PURE__ */ jsx(ds_icon_default, {
+		icon: "close",
+		size: "small"
+	})
+});
+const Body = ({ style, className, children }) => /* @__PURE__ */ jsx("div", {
+	style,
+	className: classNames(ds_confirmation_module_default.body, className),
+	children
+});
+const Footer = ({ style, className, children }) => /* @__PURE__ */ jsx("div", {
+	style,
+	className: classNames(ds_confirmation_module_default.footer, className),
+	children
+});
+const Actions = ({ style, className, children }) => /* @__PURE__ */ jsx("div", {
+	style,
+	className: classNames(ds_confirmation_module_default.actions, className),
+	children
+});
+DsConfirmation.Header = Header;
+DsConfirmation.Title = Title;
+DsConfirmation.CloseTrigger = CloseTrigger;
+DsConfirmation.Body = Body;
+DsConfirmation.Footer = Footer;
+DsConfirmation.Actions = Actions;
+
+//#endregion
+export { DsConfirmation };
+//# sourceMappingURL=ds-confirmation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-confirmation.js","names":["styles","DsTypography","DsIcon"],"sources":["../../../src/components/ds-confirmation/ds-confirmation.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { Dialog } from '@ark-ui/react/dialog';\nimport { Portal } from '@ark-ui/react/portal';\nimport classNames from 'classnames';\nimport { DsIcon } from '../ds-icon';\nimport type { DsConfirmationProps } from './ds-confirmation.types';\nimport styles from './ds-confirmation.module.scss';\nimport DsTypography from '../ds-typography/ds-typography';\n\n/**\n * Composable confirmation modal dialog.\n */\nexport const DsConfirmation = ({ open, onOpenChange, style, className, children }: DsConfirmationProps) => {\n\tconst handleOpenChange = (details: { open: boolean }) => {\n\t\tonOpenChange(details.open);\n\t};\n\n\treturn (\n\t\t<Dialog.Root\n\t\t\topen={open}\n\t\t\tonOpenChange={handleOpenChange}\n\t\t\tmodal={true}\n\t\t\tcloseOnEscape={true}\n\t\t\tcloseOnInteractOutside={true}\n\t\t>\n\t\t\t<Portal>\n\t\t\t\t<Dialog.Backdrop className={styles.overlay} />\n\t\t\t\t<Dialog.Positioner>\n\t\t\t\t\t<Dialog.Content className={classNames(styles.modal, className)}>\n\t\t\t\t\t\t<div style={style} className={styles.content}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Dialog.Content>\n\t\t\t\t</Dialog.Positioner>\n\t\t\t</Portal>\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=\"heading4\">{children}</DsTypography>\n\t</Dialog.Title>\n);\n\nconst CloseTrigger = ({ style, className }: { style?: CSSProperties; className?: string }) => (\n\t<Dialog.CloseTrigger style={style} className={className}>\n\t\t<DsIcon icon=\"close\" size=\"small\"></DsIcon>\n\t</Dialog.CloseTrigger>\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\nDsConfirmation.Header = Header;\nDsConfirmation.Title = Title;\nDsConfirmation.CloseTrigger = CloseTrigger;\nDsConfirmation.Body = Body;\nDsConfirmation.Footer = Footer;\nDsConfirmation.Actions = Actions;\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,kBAAkB,EAAE,MAAM,cAAc,OAAO,WAAW,eAAoC;CAC1G,MAAM,oBAAoB,YAA+B;AACxD,eAAa,QAAQ,KAAK;;AAG3B,QACC,oBAAC,OAAO;EACD;EACN,cAAc;EACd,OAAO;EACP,eAAe;EACf,wBAAwB;YAExB,qBAAC,qBACA,oBAAC,OAAO,YAAS,WAAWA,+BAAO,UAAW,EAC9C,oBAAC,OAAO,wBACP,oBAAC,OAAO;GAAQ,WAAW,WAAWA,+BAAO,OAAO,UAAU;aAC7D,oBAAC;IAAW;IAAO,WAAWA,+BAAO;IACnC;KACI;IACU,GACE,IACZ;GACI;;AAIhB,MAAM,UAAU,EACf,OACA,WACA,eAMA,oBAAC;CAAW;CAAO,WAAW,WAAWA,+BAAO,QAAQ,UAAU;CAChE;EACI;AAGP,MAAM,SAAS,EACd,OACA,WACA,eAMA,oBAAC,OAAO;CAAM,WAAW,WAAWA,+BAAO,OAAO,UAAU;CAAS;CAAO;WAC3E,oBAACC;EAAa,SAAQ;EAAY;GAAwB;EAC5C;AAGhB,MAAM,gBAAgB,EAAE,OAAO,gBAC9B,oBAAC,OAAO;CAAoB;CAAkB;WAC7C,oBAACC;EAAO,MAAK;EAAQ,MAAK;GAAiB;EACtB;AAGvB,MAAM,QAAQ,EACb,OACA,WACA,eAMA,oBAAC;CAAW;CAAO,WAAW,WAAWF,+BAAO,MAAM,UAAU;CAC9D;EACI;AAGP,MAAM,UAAU,EACf,OACA,WACA,eAMA,oBAAC;CAAW;CAAO,WAAW,WAAWA,+BAAO,QAAQ,UAAU;CAChE;EACI;AAGP,MAAM,WAAW,EAChB,OACA,WACA,eAMA,oBAAC;CAAW;CAAO,WAAW,WAAWA,+BAAO,SAAS,UAAU;CACjE;EACI;AAGP,eAAe,SAAS;AACxB,eAAe,QAAQ;AACvB,eAAe,eAAe;AAC9B,eAAe,OAAO;AACtB,eAAe,SAAS;AACxB,eAAe,UAAU"}

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

@@ -0,0 +1,21 @@
+
+//#region src/components/ds-confirmation/ds-confirmation.module.scss
+var ds_confirmation_module_default = {
+	"overlay": "_overlay_1hsf6_1",
+	"fade-in-overlay": "_fade-in-overlay_1hsf6_1",
+	"fade-out-overlay": "_fade-out-overlay_1hsf6_1",
+	"modal": "_modal_1hsf6_1",
+	"scale-in-modal": "_scale-in-modal_1hsf6_1",
+	"scale-out-modal": "_scale-out-modal_1hsf6_1",
+	"content": "_content_1hsf6_1",
+	"header": "_header_1hsf6_1",
+	"footer": "_footer_1hsf6_1",
+	"actions": "_actions_1hsf6_1",
+	"title": "_title_1hsf6_1",
+	"icon": "_icon_1hsf6_1",
+	"body": "_body_1hsf6_1",
+	"cancel": "_cancel_1hsf6_1"
+};
+
+//#endregion
+exports.default = ds_confirmation_module_default;

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

@@ -0,0 +1,21 @@
+//#region src/components/ds-confirmation/ds-confirmation.module.scss
+var ds_confirmation_module_default = {
+	"overlay": "_overlay_1hsf6_1",
+	"fade-in-overlay": "_fade-in-overlay_1hsf6_1",
+	"fade-out-overlay": "_fade-out-overlay_1hsf6_1",
+	"modal": "_modal_1hsf6_1",
+	"scale-in-modal": "_scale-in-modal_1hsf6_1",
+	"scale-out-modal": "_scale-out-modal_1hsf6_1",
+	"content": "_content_1hsf6_1",
+	"header": "_header_1hsf6_1",
+	"footer": "_footer_1hsf6_1",
+	"actions": "_actions_1hsf6_1",
+	"title": "_title_1hsf6_1",
+	"icon": "_icon_1hsf6_1",
+	"body": "_body_1hsf6_1",
+	"cancel": "_cancel_1hsf6_1"
+};
+
+//#endregion
+export { ds_confirmation_module_default as default };
+//# sourceMappingURL=ds-confirmation.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-confirmation.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/shared/_modal.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-confirmation/ds-confirmation.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../styles/typography';\n@use '../../styles/shared/modal' as shared;\n\n$max-width: 400px;\n$min-height: 188px;\n$max-height: 244px;\n\n.overlay {\n\t@include shared.overlay-base;\n}\n\n.modal {\n\t@include shared.modal-base;\n\tinline-size: $max-width;\n}\n\n.content {\n\t@include shared.content-base;\n\tmin-block-size: $min-height;\n\tmax-block-size: $max-height;\n\tpadding: var(--spacing-md) var(--spacing-lg);\n\tgap: var(--spacing-standard);\n}\n\n.header {\n\t@include shared.header-base;\n\tgap: var(--spacing-xs);\n\tpadding-bottom: var(--spacing-xs);\n}\n\n.footer {\n\t@include shared.footer-base(false);\n\tdisplay: flex;\n\n\t.actions {\n\t\t@include shared.actions-base;\n\t\tflex-grow: 1;\n\t}\n}\n\n.title {\n\t@include shared.title-base;\n\tflex-grow: 1;\n}\n\n.icon {\n\tflex-shrink: 0;\n}\n\n.body {\n\t@include shared.body-base;\n\t@include typography.body-sm-reg;\n\tcolor: var(--color-font-main);\n}\n\n.cancel {\n\tmargin-right: auto;\n}\n"],"mappings":""}

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

@@ -0,0 +1,33 @@
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/ds-confirmation/ds-confirmation.types.d.ts
+
+/**
+ * Props for the DsConfirmation component
+ */
+interface DsConfirmationProps {
+  /**
+   * Whether the modal is open
+   */
+  open: boolean;
+  /**
+   * Callback when modal open state changes
+   * @param open - whether the modal is open
+   */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Additional CSS styles
+   */
+  style?: CSSProperties;
+  /**
+   * Additional CSS class name
+   */
+  className?: string;
+  /**
+   * Modal body content
+   */
+  children: ReactNode;
+}
+//#endregion
+export { DsConfirmationProps };
+//# sourceMappingURL=ds-confirmation.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-confirmation.types.d.cts","names":[],"sources":["../../../src/components/ds-confirmation/ds-confirmation.types.tsx"],"sourcesContent":[],"mappings":";;;;;;AAKA;UAAiB,mBAAA;;;;;;;;;;;;;UAaR;;;;;;;;YAQE"}

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

@@ -0,0 +1,33 @@
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/ds-confirmation/ds-confirmation.types.d.ts
+
+/**
+ * Props for the DsConfirmation component
+ */
+interface DsConfirmationProps {
+  /**
+   * Whether the modal is open
+   */
+  open: boolean;
+  /**
+   * Callback when modal open state changes
+   * @param open - whether the modal is open
+   */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Additional CSS styles
+   */
+  style?: CSSProperties;
+  /**
+   * Additional CSS class name
+   */
+  className?: string;
+  /**
+   * Modal body content
+   */
+  children: ReactNode;
+}
+//#endregion
+export { DsConfirmationProps };
+//# sourceMappingURL=ds-confirmation.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-confirmation.types.d.ts","names":[],"sources":["../../../src/components/ds-confirmation/ds-confirmation.types.tsx"],"sourcesContent":[],"mappings":";;;;;;AAKA;UAAiB,mBAAA;;;;;;;;;;;;;UAaR;;;;;;;;YAQE"}

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

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

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

@@ -0,0 +1,2 @@
+import { DsConfirmationProps } from "./ds-confirmation.types.js";
+import { DsConfirmation } from "./ds-confirmation.js";

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

@@ -0,0 +1 @@
+import { DsConfirmation } from "./ds-confirmation.js";

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

@@ -0,0 +1,60 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_dialog_module = require('./ds-dialog.module.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let __radix_ui_react_dialog = require("@radix-ui/react-dialog");
+__radix_ui_react_dialog = require_rolldown_runtime.__toESM(__radix_ui_react_dialog);
+let __radix_ui_react_visually_hidden = require("@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__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dialog.Portal, { children: [modal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Overlay, { className: require_ds_dialog_module.default.overlay }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dialog.Content, {
+			className: (0, classnames.default)(require_ds_dialog_module.default.dialog, className, { [require_ds_dialog_module.default.customPlacement]: customPosition || anchorRef }),
+			style: customPosition || anchorRef ? style : void 0,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Title, {
+					asChild: true,
+					children: hideTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_visually_hidden.Root, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Title, {
+						className: require_ds_dialog_module.default.title,
+						children: title
+					}) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Title, {
+						className: require_ds_dialog_module.default.title,
+						children: title
+					})
+				}),
+				description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Description, {
+					asChild: true,
+					children: hideDescription ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_visually_hidden.Root, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Description, {
+						className: require_ds_dialog_module.default.description,
+						children: description
+					}) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Description, {
+						className: require_ds_dialog_module.default.description,
+						children: description
+					})
+				}),
+				children
+			]
+		})] })
+	});
+};
+var ds_dialog_default = DsDialog;
+
+//#endregion
+exports.default = ds_dialog_default;

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

@@ -0,0 +1,8 @@
+import { DsDialogProps } from "./ds-dialog.types.cjs";
+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.cts.map

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

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