@drivenets/design-system 0.2.0 → 0.3.0

package/dist/components/ds-skeleton/ds-skeleton-circle.d.ts

@@ -0,0 +1,18 @@
+import { DsSkeletonCircleProps } from "./ds-skeleton.types.js";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
+
+//#region src/components/ds-skeleton/ds-skeleton-circle.d.ts
+
+/**
+ * Circle skeleton component - for avatars and icons
+ * Matches DsAvatar sizes
+ */
+declare const DsSkeletonCircle: ({
+  size,
+  color,
+  className,
+  style
+}: DsSkeletonCircleProps) => react_jsx_runtime13.JSX.Element;
+//#endregion
+export { DsSkeletonCircle };
+//# sourceMappingURL=ds-skeleton-circle.d.ts.map

package/dist/components/ds-skeleton/ds-skeleton-circle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton-circle.d.ts","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton-circle.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAEiE;cAQ3D,gBAAoB,EAAA,CAAA;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA;AAAA,CAAA,EAAwD,qBAAxD,EAAA,GAA6E,mBAAA,CAAA,GAAA,CAAA,OAA7E"}

package/dist/components/ds-skeleton/ds-skeleton-circle.js

@@ -0,0 +1,58 @@
+import { circleSizeMap } from "./ds-skeleton.config.js";
+import ds_skeleton_module_default from "./ds-skeleton.module.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ds-skeleton/ds-skeleton-circle.tsx
+/**
+* Circle skeleton component - for avatars and icons
+* Matches DsAvatar sizes
+*/
+const DsSkeletonCircle = (t0) => {
+	const $ = c(10);
+	const { size: t1, color: t2, className, style } = t0;
+	const size = t1 === void 0 ? "regular" : t1;
+	const color = t2 === void 0 ? "gray" : t2;
+	const pixelSize = typeof size === "number" ? size : circleSizeMap[size];
+	const t3 = `${String(pixelSize)}px`;
+	const t4 = `${String(pixelSize)}px`;
+	let t5;
+	if ($[0] !== style || $[1] !== t3 || $[2] !== t4) {
+		t5 = {
+			width: t3,
+			height: t4,
+			...style
+		};
+		$[0] = style;
+		$[1] = t3;
+		$[2] = t4;
+		$[3] = t5;
+	} else t5 = $[3];
+	const circleStyle = t5;
+	const t6 = ds_skeleton_module_default[color];
+	let t7;
+	if ($[4] !== className || $[5] !== t6) {
+		t7 = classNames(ds_skeleton_module_default.skeleton, ds_skeleton_module_default.circle, t6, className);
+		$[4] = className;
+		$[5] = t6;
+		$[6] = t7;
+	} else t7 = $[6];
+	let t8;
+	if ($[7] !== circleStyle || $[8] !== t7) {
+		t8 = /* @__PURE__ */ jsx("span", {
+			className: t7,
+			style: circleStyle,
+			"aria-hidden": "true"
+		});
+		$[7] = circleStyle;
+		$[8] = t7;
+		$[9] = t8;
+	} else t8 = $[9];
+	return t8;
+};
+var ds_skeleton_circle_default = DsSkeletonCircle;
+
+//#endregion
+export { ds_skeleton_circle_default as default };
+//# sourceMappingURL=ds-skeleton-circle.js.map

package/dist/components/ds-skeleton/ds-skeleton-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton-circle.js","names":["CSSProperties","classNames","DsSkeletonCircleProps","circleSizeMap","styles","DsSkeletonCircle","t0","$","_c","size","t1","color","t2","className","style","undefined","pixelSize","t3","String","t4","t5","width","height","circleStyle","t6","t7","skeleton","circle","t8"],"sources":["../../../src/components/ds-skeleton/ds-skeleton-circle.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport type { DsSkeletonCircleProps } from './ds-skeleton.types';\nimport { circleSizeMap } from './ds-skeleton.config';\nimport styles from './ds-skeleton.module.scss';\n\n/**\n * Circle skeleton component - for avatars and icons\n * Matches DsAvatar sizes\n */\nconst DsSkeletonCircle = ({ size = 'regular', color = 'gray', className, style }: DsSkeletonCircleProps) => {\n\tconst pixelSize = typeof size === 'number' ? size : circleSizeMap[size];\n\n\tconst circleStyle: CSSProperties = {\n\t\twidth: `${String(pixelSize)}px`,\n\t\theight: `${String(pixelSize)}px`,\n\t\t...style,\n\t};\n\n\treturn (\n\t\t<span\n\t\t\tclassName={classNames(styles.skeleton, styles.circle, styles[color], className)}\n\t\t\tstyle={circleStyle}\n\t\t\taria-hidden=\"true\"\n\t\t/>\n\t);\n};\n\nexport default DsSkeletonCircle;\n"],"mappings":";;;;;;;;;;;AAUA,MAAMK,oBAAmBC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAC,MAAA,EAAAC,MAAAC,IAAAC,OAAAC,IAAAC,WAAAC,UAAAR;CAAE,MAAAG,OAAAC,OAAAK,SAAA,YAAAL;CAAkB,MAAAC,QAAAC,OAAAG,SAAA,SAAAH;CAC7C,MAAAI,YAAkB,OAAOP,SAAS,WAAhBA,OAAkCN,cAAcM;CAG1D,MAAAQ,KAAA,GAAGC,OAAOF,UAAU,CAAA;CACnB,MAAAG,KAAA,GAAGD,OAAOF,UAAU,CAAA;CAAI,IAAAI;AAAA,KAAAb,EAAA,OAAAO,SAAAP,EAAA,OAAAU,MAAAV,EAAA,OAAAY,IAAA;AAFEC,OAAA;GAAAC,OAC3BJ;GAAwBK,QACvBH;GAAwB,GAC7BL;GACH;AAAAP,IAAA,KAAAO;AAAAP,IAAA,KAAAU;AAAAV,IAAA,KAAAY;AAAAZ,IAAA,KAAAa;OAAAA,MAAAb,EAAA;CAJD,MAAAgB,cAAmCH;CAQqB,MAAAI,KAAApB,2BAAOO;CAAM,IAAAc;AAAA,KAAAlB,EAAA,OAAAM,aAAAN,EAAA,OAAAiB,IAAA;AAAxDC,OAAAxB,WAAWG,2BAAMsB,UAAWtB,2BAAMuB,QAASH,IAAeX,UAAU;AAAAN,IAAA,KAAAM;AAAAN,IAAA,KAAAiB;AAAAjB,IAAA,KAAAkB;OAAAA,MAAAlB,EAAA;CAAA,IAAAqB;AAAA,KAAArB,EAAA,OAAAgB,eAAAhB,EAAA,OAAAkB,IAAA;AADhFG,OAAA,oBAAA;GACY,WAAAH;GACJF,OAAAA;GACK,eAAA;IACX;AAAAhB,IAAA,KAAAgB;AAAAhB,IAAA,KAAAkB;AAAAlB,IAAA,KAAAqB;OAAAA,MAAArB,EAAA;AAAA,QAJFqB;;AAQF,iCAAevB"}

package/dist/components/ds-skeleton/ds-skeleton-rect.cjs

@@ -0,0 +1,61 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_skeleton_config = require('./ds-skeleton.config.cjs');
+const require_ds_skeleton_module = require('./ds-skeleton.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");
+
+//#region src/components/ds-skeleton/ds-skeleton-rect.tsx
+/**
+* Rectangle skeleton component - for buttons, images, and custom shapes
+*/
+const DsSkeletonRect = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(11);
+	const { width, height, radius: t1, color: t2, className, style } = t0;
+	const radius = t1 === void 0 ? "default" : t1;
+	const color = t2 === void 0 ? "gray" : t2;
+	const borderRadius = typeof radius === "number" ? radius : require_ds_skeleton_config.radiusMap[radius];
+	const t3 = typeof width === "number" ? `${String(width)}px` : width;
+	const t4 = typeof height === "number" ? `${String(height)}px` : height;
+	const t5 = `${String(borderRadius)}px`;
+	let t6;
+	if ($[0] !== style || $[1] !== t3 || $[2] !== t4 || $[3] !== t5) {
+		t6 = {
+			width: t3,
+			height: t4,
+			borderRadius: t5,
+			...style
+		};
+		$[0] = style;
+		$[1] = t3;
+		$[2] = t4;
+		$[3] = t5;
+		$[4] = t6;
+	} else t6 = $[4];
+	const rectStyle = t6;
+	const t7 = require_ds_skeleton_module.default[color];
+	let t8;
+	if ($[5] !== className || $[6] !== t7) {
+		t8 = (0, classnames.default)(require_ds_skeleton_module.default.skeleton, require_ds_skeleton_module.default.rectangle, t7, className);
+		$[5] = className;
+		$[6] = t7;
+		$[7] = t8;
+	} else t8 = $[7];
+	let t9;
+	if ($[8] !== rectStyle || $[9] !== t8) {
+		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: t8,
+			style: rectStyle,
+			"aria-hidden": "true"
+		});
+		$[8] = rectStyle;
+		$[9] = t8;
+		$[10] = t9;
+	} else t9 = $[10];
+	return t9;
+};
+var ds_skeleton_rect_default = DsSkeletonRect;
+
+//#endregion
+exports.default = ds_skeleton_rect_default;

package/dist/components/ds-skeleton/ds-skeleton-rect.d.cts

@@ -0,0 +1,18 @@
+import { DsSkeletonRectProps } from "./ds-skeleton.types.cjs";
+import * as react_jsx_runtime34 from "react/jsx-runtime";
+
+//#region src/components/ds-skeleton/ds-skeleton-rect.d.ts
+/**
+ * Rectangle skeleton component - for buttons, images, and custom shapes
+ */
+declare const DsSkeletonRect: ({
+  width,
+  height,
+  radius,
+  color,
+  className,
+  style
+}: DsSkeletonRectProps) => react_jsx_runtime34.JSX.Element;
+//#endregion
+export { DsSkeletonRect };
+//# sourceMappingURL=ds-skeleton-rect.d.cts.map

package/dist/components/ds-skeleton/ds-skeleton-rect.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton-rect.d.cts","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton-rect.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAE+D,cAOzD,cAwBL,EAAA,CAAA;EAAA,KAAA;EAAA,MAAA;EAAA,MAAA;EAAA,KAAA;EAAA,SAAA;EAAA;AAAA,CAAA,EAjBE,mBAiBF,EAAA,GAjBqB,mBAAA,CAAA,GAAA,CAAA,OAiBrB"}

package/dist/components/ds-skeleton/ds-skeleton-rect.d.ts

@@ -0,0 +1,18 @@
+import { DsSkeletonRectProps } from "./ds-skeleton.types.js";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
+
+//#region src/components/ds-skeleton/ds-skeleton-rect.d.ts
+/**
+ * Rectangle skeleton component - for buttons, images, and custom shapes
+ */
+declare const DsSkeletonRect: ({
+  width,
+  height,
+  radius,
+  color,
+  className,
+  style
+}: DsSkeletonRectProps) => react_jsx_runtime8.JSX.Element;
+//#endregion
+export { DsSkeletonRect };
+//# sourceMappingURL=ds-skeleton-rect.d.ts.map

package/dist/components/ds-skeleton/ds-skeleton-rect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton-rect.d.ts","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton-rect.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAE+D,cAOzD,cAwBL,EAAA,CAAA;EAAA,KAAA;EAAA,MAAA;EAAA,MAAA;EAAA,KAAA;EAAA,SAAA;EAAA;AAAA,CAAA,EAjBE,mBAiBF,EAAA,GAjBqB,kBAAA,CAAA,GAAA,CAAA,OAiBrB"}

package/dist/components/ds-skeleton/ds-skeleton-rect.js

@@ -0,0 +1,60 @@
+import { radiusMap } from "./ds-skeleton.config.js";
+import ds_skeleton_module_default from "./ds-skeleton.module.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ds-skeleton/ds-skeleton-rect.tsx
+/**
+* Rectangle skeleton component - for buttons, images, and custom shapes
+*/
+const DsSkeletonRect = (t0) => {
+	const $ = c(11);
+	const { width, height, radius: t1, color: t2, className, style } = t0;
+	const radius = t1 === void 0 ? "default" : t1;
+	const color = t2 === void 0 ? "gray" : t2;
+	const borderRadius = typeof radius === "number" ? radius : radiusMap[radius];
+	const t3 = typeof width === "number" ? `${String(width)}px` : width;
+	const t4 = typeof height === "number" ? `${String(height)}px` : height;
+	const t5 = `${String(borderRadius)}px`;
+	let t6;
+	if ($[0] !== style || $[1] !== t3 || $[2] !== t4 || $[3] !== t5) {
+		t6 = {
+			width: t3,
+			height: t4,
+			borderRadius: t5,
+			...style
+		};
+		$[0] = style;
+		$[1] = t3;
+		$[2] = t4;
+		$[3] = t5;
+		$[4] = t6;
+	} else t6 = $[4];
+	const rectStyle = t6;
+	const t7 = ds_skeleton_module_default[color];
+	let t8;
+	if ($[5] !== className || $[6] !== t7) {
+		t8 = classNames(ds_skeleton_module_default.skeleton, ds_skeleton_module_default.rectangle, t7, className);
+		$[5] = className;
+		$[6] = t7;
+		$[7] = t8;
+	} else t8 = $[7];
+	let t9;
+	if ($[8] !== rectStyle || $[9] !== t8) {
+		t9 = /* @__PURE__ */ jsx("span", {
+			className: t8,
+			style: rectStyle,
+			"aria-hidden": "true"
+		});
+		$[8] = rectStyle;
+		$[9] = t8;
+		$[10] = t9;
+	} else t9 = $[10];
+	return t9;
+};
+var ds_skeleton_rect_default = DsSkeletonRect;
+
+//#endregion
+export { ds_skeleton_rect_default as default };
+//# sourceMappingURL=ds-skeleton-rect.js.map

package/dist/components/ds-skeleton/ds-skeleton-rect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton-rect.js","names":["React","classNames","DsSkeletonRectProps","radiusMap","styles","DsSkeletonRect","t0","$","_c","width","height","radius","t1","color","t2","className","style","undefined","borderRadius","t3","String","t4","t5","t6","rectStyle","t7","t8","skeleton","rectangle","t9"],"sources":["../../../src/components/ds-skeleton/ds-skeleton-rect.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport type { DsSkeletonRectProps } from './ds-skeleton.types';\nimport { radiusMap } from './ds-skeleton.config';\nimport styles from './ds-skeleton.module.scss';\n\n/**\n * Rectangle skeleton component - for buttons, images, and custom shapes\n */\nconst DsSkeletonRect = ({\n\twidth,\n\theight,\n\tradius = 'default',\n\tcolor = 'gray',\n\tclassName,\n\tstyle,\n}: DsSkeletonRectProps) => {\n\tconst borderRadius = typeof radius === 'number' ? radius : radiusMap[radius];\n\n\tconst rectStyle: React.CSSProperties = {\n\t\twidth: typeof width === 'number' ? `${String(width)}px` : width,\n\t\theight: typeof height === 'number' ? `${String(height)}px` : height,\n\t\tborderRadius: `${String(borderRadius)}px`,\n\t\t...style,\n\t};\n\n\treturn (\n\t\t<span\n\t\t\tclassName={classNames(styles.skeleton, styles.rectangle, styles[color], className)}\n\t\t\tstyle={rectStyle}\n\t\t\taria-hidden=\"true\"\n\t\t/>\n\t);\n};\n\nexport default DsSkeletonRect;\n"],"mappings":";;;;;;;;;;AASA,MAAMK,kBAAiBC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAC,MAAA,EAAAC,OAAAC,QAAAC,QAAAC,IAAAC,OAAAC,IAAAC,WAAAC,UAAAV;CAGvB,MAAAK,SAAAC,OAAAK,SAAA,YAAAL;CACA,MAAAC,QAAAC,OAAAG,SAAA,SAAAH;CAIA,MAAAI,eAAqB,OAAOP,WAAW,WAAlBA,SAAsCR,UAAUQ;CAG7D,MAAAQ,KAAA,OAAOV,UAAU,WAAjB,GAA+BW,OAAOX,MAAM,CAAA,MAA5CA;CACC,MAAAY,KAAA,OAAOX,WAAW,WAAlB,GAAgCU,OAAOV,OAAO,CAAA,MAA9CA;CACM,MAAAY,KAAA,GAAGF,OAAOF,aAAa,CAAA;CAAI,IAAAK;AAAA,KAAAhB,EAAA,OAAAS,SAAAT,EAAA,OAAAY,MAAAZ,EAAA,OAAAc,MAAAd,EAAA,OAAAe,IAAA;AAHHC,OAAA;GAAAd,OAC/BU;GAAwDT,QACvDW;GAA2DH,cACrDI;GAA2B,GACtCN;GACH;AAAAT,IAAA,KAAAS;AAAAT,IAAA,KAAAY;AAAAZ,IAAA,KAAAc;AAAAd,IAAA,KAAAe;AAAAf,IAAA,KAAAgB;OAAAA,MAAAhB,EAAA;CALD,MAAAiB,YAAuCD;CASoB,MAAAE,KAAArB,2BAAOS;CAAM,IAAAa;AAAA,KAAAnB,EAAA,OAAAQ,aAAAR,EAAA,OAAAkB,IAAA;AAA3DC,OAAAzB,WAAWG,2BAAMuB,UAAWvB,2BAAMwB,WAAYH,IAAeV,UAAU;AAAAR,IAAA,KAAAQ;AAAAR,IAAA,KAAAkB;AAAAlB,IAAA,KAAAmB;OAAAA,MAAAnB,EAAA;CAAA,IAAAsB;AAAA,KAAAtB,EAAA,OAAAiB,aAAAjB,EAAA,OAAAmB,IAAA;AADnFG,OAAA,oBAAA;GACY,WAAAH;GACJF,OAAAA;GACK,eAAA;IACX;AAAAjB,IAAA,KAAAiB;AAAAjB,IAAA,KAAAmB;AAAAnB,IAAA,MAAAsB;OAAAA,MAAAtB,EAAA;AAAA,QAJFsB;;AAQF,+BAAexB"}

package/dist/components/ds-skeleton/ds-skeleton-text.cjs

@@ -0,0 +1,91 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_skeleton_config = require('./ds-skeleton.config.cjs');
+const require_ds_skeleton_module = require('./ds-skeleton.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");
+
+//#region src/components/ds-skeleton/ds-skeleton-text.tsx
+/**
+* Text skeleton component - matches typography variants
+* It renders pill-shaped lines that match the height of text content
+*/
+const DsSkeletonText = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(19);
+	const { typographyVariant: t1, color: t2, lines: t3, width, radius: t4, className, style } = t0;
+	const typographyVariant = t1 === void 0 ? "body-sm-reg" : t1;
+	const color = t2 === void 0 ? "gray" : t2;
+	const lines = t3 === void 0 ? 1 : t3;
+	const radius = t4 === void 0 ? "default" : t4;
+	const height = require_ds_skeleton_config.typographyHeightMap[typographyVariant];
+	const borderRadius = typeof radius === "number" ? radius : require_ds_skeleton_config.radiusMap[radius];
+	let t5;
+	if ($[0] !== width) {
+		t5 = () => {
+			if (width !== void 0) return width;
+			return "100%";
+		};
+		$[0] = width;
+		$[1] = t5;
+	} else t5 = $[1];
+	const getLineWidth = t5;
+	const t6 = require_ds_skeleton_module.default[color];
+	let t7;
+	if ($[2] !== className || $[3] !== t6) {
+		t7 = (0, classnames.default)(require_ds_skeleton_module.default.skeleton, require_ds_skeleton_module.default.text, t6, className);
+		$[2] = className;
+		$[3] = t6;
+		$[4] = t7;
+	} else t7 = $[4];
+	const lineClassName = t7;
+	let t8;
+	if ($[5] !== borderRadius || $[6] !== height || $[7] !== style) {
+		t8 = (lineWidth) => ({
+			height,
+			width: typeof lineWidth === "number" ? String(lineWidth) + "px" : lineWidth,
+			borderRadius,
+			...style
+		});
+		$[5] = borderRadius;
+		$[6] = height;
+		$[7] = style;
+		$[8] = t8;
+	} else t8 = $[8];
+	const createLineStyle = t8;
+	let t9;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = { gap: require_ds_skeleton_config.DEFAULT_LINE_GAP };
+		$[9] = t9;
+	} else t9 = $[9];
+	let t10;
+	if ($[10] !== createLineStyle || $[11] !== getLineWidth || $[12] !== lineClassName || $[13] !== lines) {
+		let t11;
+		if ($[15] !== createLineStyle || $[16] !== getLineWidth || $[17] !== lineClassName) {
+			t11 = (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: lineClassName,
+				style: createLineStyle(getLineWidth())
+			}, index);
+			$[15] = createLineStyle;
+			$[16] = getLineWidth;
+			$[17] = lineClassName;
+			$[18] = t11;
+		} else t11 = $[18];
+		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"aria-hidden": "true",
+			className: require_ds_skeleton_module.default.container,
+			style: t9,
+			children: Array.from({ length: lines }, t11)
+		});
+		$[10] = createLineStyle;
+		$[11] = getLineWidth;
+		$[12] = lineClassName;
+		$[13] = lines;
+		$[14] = t10;
+	} else t10 = $[14];
+	return t10;
+};
+var ds_skeleton_text_default = DsSkeletonText;
+
+//#endregion
+exports.default = ds_skeleton_text_default;

package/dist/components/ds-skeleton/ds-skeleton-text.d.cts

@@ -0,0 +1,21 @@
+import { DsSkeletonTextProps } from "./ds-skeleton.types.cjs";
+import * as react_jsx_runtime35 from "react/jsx-runtime";
+
+//#region src/components/ds-skeleton/ds-skeleton-text.d.ts
+
+/**
+ * Text skeleton component - matches typography variants
+ * It renders pill-shaped lines that match the height of text content
+ */
+declare const DsSkeletonText: ({
+  typographyVariant,
+  color,
+  lines,
+  width,
+  radius,
+  className,
+  style
+}: DsSkeletonTextProps) => react_jsx_runtime35.JSX.Element;
+//#endregion
+export { DsSkeletonText };
+//# sourceMappingURL=ds-skeleton-text.d.cts.map

package/dist/components/ds-skeleton/ds-skeleton-text.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton-text.d.cts","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton-text.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAE+D;cAQzD,cAAkB,EAAA,CAAA;EAAA,iBAAA;EAAA,KAAA;EAAA,KAAA;EAAA,KAAA;EAAA,MAAA;EAAA,SAAA;EAAA;AAAA,CAAA,EAQrB,mBARqB,EAAA,GAQF,mBAAA,CAAA,GAAA,CAAA,OARE"}

package/dist/components/ds-skeleton/ds-skeleton-text.d.ts

@@ -0,0 +1,21 @@
+import { DsSkeletonTextProps } from "./ds-skeleton.types.js";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
+
+//#region src/components/ds-skeleton/ds-skeleton-text.d.ts
+
+/**
+ * Text skeleton component - matches typography variants
+ * It renders pill-shaped lines that match the height of text content
+ */
+declare const DsSkeletonText: ({
+  typographyVariant,
+  color,
+  lines,
+  width,
+  radius,
+  className,
+  style
+}: DsSkeletonTextProps) => react_jsx_runtime12.JSX.Element;
+//#endregion
+export { DsSkeletonText };
+//# sourceMappingURL=ds-skeleton-text.d.ts.map

package/dist/components/ds-skeleton/ds-skeleton-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton-text.d.ts","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton-text.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAE+D;cAQzD,cAAkB,EAAA,CAAA;EAAA,iBAAA;EAAA,KAAA;EAAA,KAAA;EAAA,KAAA;EAAA,MAAA;EAAA,SAAA;EAAA;AAAA,CAAA,EAQrB,mBARqB,EAAA,GAQF,mBAAA,CAAA,GAAA,CAAA,OARE"}

package/dist/components/ds-skeleton/ds-skeleton-text.js

@@ -0,0 +1,90 @@
+import { DEFAULT_LINE_GAP, radiusMap, typographyHeightMap } from "./ds-skeleton.config.js";
+import ds_skeleton_module_default from "./ds-skeleton.module.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ds-skeleton/ds-skeleton-text.tsx
+/**
+* Text skeleton component - matches typography variants
+* It renders pill-shaped lines that match the height of text content
+*/
+const DsSkeletonText = (t0) => {
+	const $ = c(19);
+	const { typographyVariant: t1, color: t2, lines: t3, width, radius: t4, className, style } = t0;
+	const typographyVariant = t1 === void 0 ? "body-sm-reg" : t1;
+	const color = t2 === void 0 ? "gray" : t2;
+	const lines = t3 === void 0 ? 1 : t3;
+	const radius = t4 === void 0 ? "default" : t4;
+	const height = typographyHeightMap[typographyVariant];
+	const borderRadius = typeof radius === "number" ? radius : radiusMap[radius];
+	let t5;
+	if ($[0] !== width) {
+		t5 = () => {
+			if (width !== void 0) return width;
+			return "100%";
+		};
+		$[0] = width;
+		$[1] = t5;
+	} else t5 = $[1];
+	const getLineWidth = t5;
+	const t6 = ds_skeleton_module_default[color];
+	let t7;
+	if ($[2] !== className || $[3] !== t6) {
+		t7 = classNames(ds_skeleton_module_default.skeleton, ds_skeleton_module_default.text, t6, className);
+		$[2] = className;
+		$[3] = t6;
+		$[4] = t7;
+	} else t7 = $[4];
+	const lineClassName = t7;
+	let t8;
+	if ($[5] !== borderRadius || $[6] !== height || $[7] !== style) {
+		t8 = (lineWidth) => ({
+			height,
+			width: typeof lineWidth === "number" ? String(lineWidth) + "px" : lineWidth,
+			borderRadius,
+			...style
+		});
+		$[5] = borderRadius;
+		$[6] = height;
+		$[7] = style;
+		$[8] = t8;
+	} else t8 = $[8];
+	const createLineStyle = t8;
+	let t9;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = { gap: DEFAULT_LINE_GAP };
+		$[9] = t9;
+	} else t9 = $[9];
+	let t10;
+	if ($[10] !== createLineStyle || $[11] !== getLineWidth || $[12] !== lineClassName || $[13] !== lines) {
+		let t11;
+		if ($[15] !== createLineStyle || $[16] !== getLineWidth || $[17] !== lineClassName) {
+			t11 = (_, index) => /* @__PURE__ */ jsx("span", {
+				className: lineClassName,
+				style: createLineStyle(getLineWidth())
+			}, index);
+			$[15] = createLineStyle;
+			$[16] = getLineWidth;
+			$[17] = lineClassName;
+			$[18] = t11;
+		} else t11 = $[18];
+		t10 = /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: ds_skeleton_module_default.container,
+			style: t9,
+			children: Array.from({ length: lines }, t11)
+		});
+		$[10] = createLineStyle;
+		$[11] = getLineWidth;
+		$[12] = lineClassName;
+		$[13] = lines;
+		$[14] = t10;
+	} else t10 = $[14];
+	return t10;
+};
+var ds_skeleton_text_default = DsSkeletonText;
+
+//#endregion
+export { ds_skeleton_text_default as default };
+//# sourceMappingURL=ds-skeleton-text.js.map

package/dist/components/ds-skeleton/ds-skeleton-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton-text.js","names":["CSSProperties","classNames","DsSkeletonTextProps","typographyHeightMap","DEFAULT_LINE_GAP","radiusMap","styles","DsSkeletonText","t0","$","_c","typographyVariant","t1","color","t2","lines","t3","width","radius","t4","className","style","undefined","height","borderRadius","t5","getLineWidth","t6","t7","skeleton","text","lineClassName","t8","lineWidth","String","createLineStyle","t9","Symbol","for","gap","t10","t11","_","index","container","Array","from","length"],"sources":["../../../src/components/ds-skeleton/ds-skeleton-text.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport type { DsSkeletonTextProps } from './ds-skeleton.types';\nimport { typographyHeightMap, DEFAULT_LINE_GAP, radiusMap } from './ds-skeleton.config';\nimport styles from './ds-skeleton.module.scss';\n\n/**\n * Text skeleton component - matches typography variants\n * It renders pill-shaped lines that match the height of text content\n */\nconst DsSkeletonText = ({\n\ttypographyVariant = 'body-sm-reg',\n\tcolor = 'gray',\n\tlines = 1,\n\twidth,\n\tradius = 'default',\n\tclassName,\n\tstyle,\n}: DsSkeletonTextProps) => {\n\tconst height = typographyHeightMap[typographyVariant];\n\tconst borderRadius = typeof radius === 'number' ? radius : radiusMap[radius];\n\n\tconst getLineWidth = (): string | number => {\n\t\tif (width !== undefined) {\n\t\t\treturn width;\n\t\t}\n\n\t\treturn '100%';\n\t};\n\n\tconst lineClassName = classNames(styles.skeleton, styles.text, styles[color], className);\n\n\tconst createLineStyle = (lineWidth: string | number): CSSProperties => ({\n\t\theight,\n\t\twidth: typeof lineWidth === 'number' ? String(lineWidth) + 'px' : lineWidth,\n\t\tborderRadius,\n\t\t...style,\n\t});\n\n\treturn (\n\t\t<div aria-hidden=\"true\" className={styles.container} style={{ gap: DEFAULT_LINE_GAP }}>\n\t\t\t{Array.from({ length: lines }, (_, index) => (\n\t\t\t\t<span key={index} className={lineClassName} style={createLineStyle(getLineWidth())} />\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nexport default DsSkeletonText;\n"],"mappings":";;;;;;;;;;;AAUA,MAAMO,kBAAiBC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAC,MAAA,EAAAC,mBAAAC,IAAAC,OAAAC,IAAAC,OAAAC,IAAAC,OAAAC,QAAAC,IAAAC,WAAAC,UAAAb;CACvB,MAAAG,oBAAAC,OAAAU,SAAA,gBAAAV;CACA,MAAAC,QAAAC,OAAAQ,SAAA,SAAAR;CACA,MAAAC,QAAAC,OAAAM,SAAA,IAAAN;CAEA,MAAAE,SAAAC,OAAAG,SAAA,YAAAH;CAIA,MAAAI,SAAepB,oBAAoBQ;CACnC,MAAAa,eAAqB,OAAON,WAAW,WAAlBA,SAAsCb,UAAUa;CAAQ,IAAAO;AAAA,KAAAhB,EAAA,OAAAQ,OAAA;AAExDQ,aAAA;AACpB,OAAIR,UAAUK,OAAS,QACfL;AACP,UAEM;;AACPR,IAAA,KAAAQ;AAAAR,IAAA,KAAAgB;OAAAA,MAAAhB,EAAA;CAND,MAAAiB,eAAqBD;CAQ0C,MAAAE,KAAArB,2BAAOO;CAAM,IAAAe;AAAA,KAAAnB,EAAA,OAAAW,aAAAX,EAAA,OAAAkB,IAAA;AAAtDC,OAAA3B,WAAWK,2BAAMuB,UAAWvB,2BAAMwB,MAAOH,IAAeP,UAAU;AAAAX,IAAA,KAAAW;AAAAX,IAAA,KAAAkB;AAAAlB,IAAA,KAAAmB;OAAAA,MAAAnB,EAAA;CAAxF,MAAAsB,gBAAsBH;CAAmE,IAAAI;AAAA,KAAAvB,EAAA,OAAAe,gBAAAf,EAAA,OAAAc,UAAAd,EAAA,OAAAY,OAAA;AAEjEW,QAAAC,eAAgD;GAAAV;GAAAN,OAEhE,OAAOgB,cAAc,WAAWC,OAAOD,UAAU,GAAG,OAApDA;GAAoET;GAAA,GAExEH;GACH;AAACZ,IAAA,KAAAe;AAAAf,IAAA,KAAAc;AAAAd,IAAA,KAAAY;AAAAZ,IAAA,KAAAuB;OAAAA,MAAAvB,EAAA;CALF,MAAA0B,kBAAwBH;CAKrB,IAAAI;AAAA,KAAA3B,EAAA,OAAA4B,OAAAC,IAAA,4BAAA,EAAA;AAG0DF,OAAA,EAAAG,KAAOnC,kBAAkB;AAAAK,IAAA,KAAA2B;OAAAA,MAAA3B,EAAA;CAAA,IAAA+B;AAAA,KAAA/B,EAAA,QAAA0B,mBAAA1B,EAAA,QAAAiB,gBAAAjB,EAAA,QAAAsB,iBAAAtB,EAAA,QAAAM,OAAA;EAAA,IAAA0B;AAAA,MAAAhC,EAAA,QAAA0B,mBAAA1B,EAAA,QAAAiB,gBAAAjB,EAAA,QAAAsB,eAAA;AACrDU,UAAAC,GAAAC,UAC9B,oBAAA;IAA6BZ,WAAAA;IAAsB,OAAAI,gBAAgBT,cAAc,CAAA;MAAtEiB,MACX;AAAAlC,KAAA,MAAA0B;AAAA1B,KAAA,MAAAiB;AAAAjB,KAAA,MAAAsB;AAAAtB,KAAA,MAAAgC;QAAAA,OAAAhC,EAAA;AAHF+B,QAAA,oBAAA;GAAiB,eAAA;GAAkB,WAAAlC,2BAAMsC;GAAmB,OAAAR;aAC1DS,MAAKC,KAAM,EAAAC,QAAUhC,OAAO,EAAE0B,IAE9B;IACI;AAAAhC,IAAA,MAAA0B;AAAA1B,IAAA,MAAAiB;AAAAjB,IAAA,MAAAsB;AAAAtB,IAAA,MAAAM;AAAAN,IAAA,MAAA+B;OAAAA,OAAA/B,EAAA;AAAA,QAJN+B;;AAQF,+BAAejC"}

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

@@ -0,0 +1,13 @@
+const require_ds_skeleton_text = require('./ds-skeleton-text.cjs');
+const require_ds_skeleton_circle = require('./ds-skeleton-circle.cjs');
+const require_ds_skeleton_rect = require('./ds-skeleton-rect.cjs');
+
+//#region src/components/ds-skeleton/ds-skeleton.tsx
+var ds_skeleton_default = {
+	Text: require_ds_skeleton_text.default,
+	Circle: require_ds_skeleton_circle.default,
+	Rect: require_ds_skeleton_rect.default
+};
+
+//#endregion
+exports.default = ds_skeleton_default;

package/dist/components/ds-skeleton/ds-skeleton.config.cjs

@@ -0,0 +1,62 @@
+
+//#region src/components/ds-skeleton/ds-skeleton.config.ts
+/**
+* Circle size mapping matching DsAvatar component
+* Maps semantic size names to pixel values
+*/
+const circleSizeMap = Object.freeze({
+	xsm: 24,
+	sm: 32,
+	regular: 40,
+	md: 48,
+	lg: 64,
+	xl: 80
+});
+/**
+* Typography variant height mapping
+* Maps semantic variants to approximate heights in pixels
+* Based on line-height values from design system
+*/
+const typographyHeightMap = Object.freeze({
+	"body-md-reg": 20,
+	"body-md-md": 20,
+	"body-md-semi-bold": 20,
+	"body-md-bold": 20,
+	"body-md-link": 20,
+	"body-sm-reg": 18,
+	"body-sm-md": 18,
+	"body-sm-semi-bold": 18,
+	"body-sm-bold": 18,
+	"body-sm-link": 18,
+	"body-xs-reg": 16,
+	"body-xs-md": 16,
+	"body-xs-semi-bold": 16,
+	"body-xs-bold": 16,
+	"body-xs-link": 16,
+	"code-sm-reg": 18,
+	"code-sm-semi-bold": 18,
+	"code-xs-reg": 16,
+	"code-xs-semi-bold": 16,
+	heading1: 64,
+	heading2: 54,
+	heading3: 48,
+	heading4: 36
+});
+/**
+* Border radius mapping
+* Maps semantic radius names to pixel values
+*/
+const radiusMap = Object.freeze({
+	default: 4,
+	round: 999
+});
+/**
+* Default gap between skeleton lines in pixels
+*/
+const DEFAULT_LINE_GAP = 8;
+
+//#endregion
+exports.DEFAULT_LINE_GAP = DEFAULT_LINE_GAP;
+exports.circleSizeMap = circleSizeMap;
+exports.radiusMap = radiusMap;
+exports.typographyHeightMap = typographyHeightMap;

package/dist/components/ds-skeleton/ds-skeleton.config.js

@@ -0,0 +1,59 @@
+//#region src/components/ds-skeleton/ds-skeleton.config.ts
+/**
+* Circle size mapping matching DsAvatar component
+* Maps semantic size names to pixel values
+*/
+const circleSizeMap = Object.freeze({
+	xsm: 24,
+	sm: 32,
+	regular: 40,
+	md: 48,
+	lg: 64,
+	xl: 80
+});
+/**
+* Typography variant height mapping
+* Maps semantic variants to approximate heights in pixels
+* Based on line-height values from design system
+*/
+const typographyHeightMap = Object.freeze({
+	"body-md-reg": 20,
+	"body-md-md": 20,
+	"body-md-semi-bold": 20,
+	"body-md-bold": 20,
+	"body-md-link": 20,
+	"body-sm-reg": 18,
+	"body-sm-md": 18,
+	"body-sm-semi-bold": 18,
+	"body-sm-bold": 18,
+	"body-sm-link": 18,
+	"body-xs-reg": 16,
+	"body-xs-md": 16,
+	"body-xs-semi-bold": 16,
+	"body-xs-bold": 16,
+	"body-xs-link": 16,
+	"code-sm-reg": 18,
+	"code-sm-semi-bold": 18,
+	"code-xs-reg": 16,
+	"code-xs-semi-bold": 16,
+	heading1: 64,
+	heading2: 54,
+	heading3: 48,
+	heading4: 36
+});
+/**
+* Border radius mapping
+* Maps semantic radius names to pixel values
+*/
+const radiusMap = Object.freeze({
+	default: 4,
+	round: 999
+});
+/**
+* Default gap between skeleton lines in pixels
+*/
+const DEFAULT_LINE_GAP = 8;
+
+//#endregion
+export { DEFAULT_LINE_GAP, circleSizeMap, radiusMap, typographyHeightMap };
+//# sourceMappingURL=ds-skeleton.config.js.map

package/dist/components/ds-skeleton/ds-skeleton.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton.config.js","names":["DsAvatarSize","SemanticVariant","SkeletonRadiusVariant","circleSizeMap","Record","Object","freeze","xsm","sm","regular","md","lg","xl","typographyHeightMap","heading1","heading2","heading3","heading4","radiusMap","default","round","DEFAULT_LINE_GAP"],"sources":["../../../src/components/ds-skeleton/ds-skeleton.config.ts"],"sourcesContent":["import type { DsAvatarSize } from '../ds-avatar';\nimport type { SemanticVariant } from '../ds-typography';\nimport type { SkeletonRadiusVariant } from './ds-skeleton.types';\n\n/**\n * Circle size mapping matching DsAvatar component\n * Maps semantic size names to pixel values\n */\nexport const circleSizeMap: Record<DsAvatarSize, number> = Object.freeze({\n\txsm: 24,\n\tsm: 32,\n\tregular: 40,\n\tmd: 48,\n\tlg: 64,\n\txl: 80,\n});\n\n/**\n * Typography variant height mapping\n * Maps semantic variants to approximate heights in pixels\n * Based on line-height values from design system\n */\nexport const typographyHeightMap: Record<SemanticVariant, number> = Object.freeze({\n\t// Body variants - based on line-height\n\t'body-md-reg': 20,\n\t'body-md-md': 20,\n\t'body-md-semi-bold': 20,\n\t'body-md-bold': 20,\n\t'body-md-link': 20,\n\n\t'body-sm-reg': 18,\n\t'body-sm-md': 18,\n\t'body-sm-semi-bold': 18,\n\t'body-sm-bold': 18,\n\t'body-sm-link': 18,\n\n\t'body-xs-reg': 16,\n\t'body-xs-md': 16,\n\t'body-xs-semi-bold': 16,\n\t'body-xs-bold': 16,\n\t'body-xs-link': 16,\n\n\t// Code variants\n\t'code-sm-reg': 18,\n\t'code-sm-semi-bold': 18,\n\t'code-xs-reg': 16,\n\t'code-xs-semi-bold': 16,\n\n\t// Heading variants - based on line-height\n\theading1: 64,\n\theading2: 54,\n\theading3: 48,\n\theading4: 36,\n});\n\n/**\n * Border radius mapping\n * Maps semantic radius names to pixel values\n */\nexport const radiusMap: Record<SkeletonRadiusVariant, number> = Object.freeze({\n\tdefault: 4, // Standard button/card radius\n\tround: 999, // Pill-shaped (fully rounded)\n});\n\n/**\n * Default gap between skeleton lines in pixels\n */\nexport const DEFAULT_LINE_GAP = 8;\n"],"mappings":";;;;;AAQA,MAAaG,gBAA8CE,OAAOC,OAAO;CACxEC,KAAK;CACLC,IAAI;CACJC,SAAS;CACTC,IAAI;CACJC,IAAI;CACJC,IAAI;CACJ,CAAC;;;;;;AAOF,MAAaC,sBAAuDR,OAAOC,OAAO;CAEjF,eAAe;CACf,cAAc;CACd,qBAAqB;CACrB,gBAAgB;CAChB,gBAAgB;CAEhB,eAAe;CACf,cAAc;CACd,qBAAqB;CACrB,gBAAgB;CAChB,gBAAgB;CAEhB,eAAe;CACf,cAAc;CACd,qBAAqB;CACrB,gBAAgB;CAChB,gBAAgB;CAGhB,eAAe;CACf,qBAAqB;CACrB,eAAe;CACf,qBAAqB;CAGrBQ,UAAU;CACVC,UAAU;CACVC,UAAU;CACVC,UAAU;CACV,CAAC;;;;;AAMF,MAAaC,YAAmDb,OAAOC,OAAO;CAC7Ea,SAAS;CACTC,OAAO;CACP,CAAC;;;;AAKF,MAAaC,mBAAmB"}