@drivenets/design-system 0.1.0 → 0.3.0

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"}

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

@@ -0,0 +1,32 @@
+import { DsSkeletonCircleProps, DsSkeletonRectProps, DsSkeletonTextProps } from "./ds-skeleton.types.cjs";
+import * as react_jsx_runtime36 from "react/jsx-runtime";
+
+//#region src/components/ds-skeleton/ds-skeleton.d.ts
+declare const _default: {
+  Text: ({
+    typographyVariant,
+    color,
+    lines,
+    width,
+    radius,
+    className,
+    style
+  }: DsSkeletonTextProps) => react_jsx_runtime36.JSX.Element;
+  Circle: ({
+    size,
+    color,
+    className,
+    style
+  }: DsSkeletonCircleProps) => react_jsx_runtime36.JSX.Element;
+  Rect: ({
+    width,
+    height,
+    radius,
+    color,
+    className,
+    style
+  }: DsSkeletonRectProps) => react_jsx_runtime36.JSX.Element;
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=ds-skeleton.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton.d.cts","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton.tsx"],"sourcesContent":[],"mappings":""}

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

@@ -0,0 +1,32 @@
+import { DsSkeletonCircleProps, DsSkeletonRectProps, DsSkeletonTextProps } from "./ds-skeleton.types.js";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
+
+//#region src/components/ds-skeleton/ds-skeleton.d.ts
+declare const _default: {
+  Text: ({
+    typographyVariant,
+    color,
+    lines,
+    width,
+    radius,
+    className,
+    style
+  }: DsSkeletonTextProps) => react_jsx_runtime9.JSX.Element;
+  Circle: ({
+    size,
+    color,
+    className,
+    style
+  }: DsSkeletonCircleProps) => react_jsx_runtime9.JSX.Element;
+  Rect: ({
+    width,
+    height,
+    radius,
+    color,
+    className,
+    style
+  }: DsSkeletonRectProps) => react_jsx_runtime9.JSX.Element;
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=ds-skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton.d.ts","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton.tsx"],"sourcesContent":[],"mappings":""}

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

@@ -0,0 +1,14 @@
+import ds_skeleton_text_default from "./ds-skeleton-text.js";
+import ds_skeleton_circle_default from "./ds-skeleton-circle.js";
+import ds_skeleton_rect_default from "./ds-skeleton-rect.js";
+
+//#region src/components/ds-skeleton/ds-skeleton.tsx
+var ds_skeleton_default = {
+	Text: ds_skeleton_text_default,
+	Circle: ds_skeleton_circle_default,
+	Rect: ds_skeleton_rect_default
+};
+
+//#endregion
+export { ds_skeleton_default as default };
+//# sourceMappingURL=ds-skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton.js","names":["DsSkeletonText","DsSkeletonCircle","DsSkeletonRect","Text","Circle","Rect"],"sources":["../../../src/components/ds-skeleton/ds-skeleton.tsx"],"sourcesContent":["import DsSkeletonText from './ds-skeleton-text';\nimport DsSkeletonCircle from './ds-skeleton-circle';\nimport DsSkeletonRect from './ds-skeleton-rect';\n\nexport default {\n\tText: DsSkeletonText,\n\tCircle: DsSkeletonCircle,\n\tRect: DsSkeletonRect,\n};\n"],"mappings":";;;;;AAIA,0BAAe;CACdG,MAAMH;CACNI,QAAQH;CACRI,MAAMH;CACN"}

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

@@ -0,0 +1,15 @@
+
+//#region src/components/ds-skeleton/ds-skeleton.module.scss
+var ds_skeleton_module_default = {
+	"skeleton": "_skeleton_14v2k_1",
+	"shimmer": "_shimmer_14v2k_1",
+	"gray": "_gray_14v2k_1",
+	"blue": "_blue_14v2k_1",
+	"text": "_text_14v2k_1",
+	"circle": "_circle_14v2k_1",
+	"rectangle": "_rectangle_14v2k_1",
+	"container": "_container_14v2k_1"
+};
+
+//#endregion
+exports.default = ds_skeleton_module_default;

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

@@ -0,0 +1,15 @@
+//#region src/components/ds-skeleton/ds-skeleton.module.scss
+var ds_skeleton_module_default = {
+	"skeleton": "_skeleton_14v2k_1",
+	"shimmer": "_shimmer_14v2k_1",
+	"gray": "_gray_14v2k_1",
+	"blue": "_blue_14v2k_1",
+	"text": "_text_14v2k_1",
+	"circle": "_circle_14v2k_1",
+	"rectangle": "_rectangle_14v2k_1",
+	"container": "_container_14v2k_1"
+};
+
+//#endregion
+export { ds_skeleton_module_default as default };
+//# sourceMappingURL=ds-skeleton.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton.module.js","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton.module.scss"],"sourcesContent":[".skeleton {\n\tanimation: shimmer 2s linear infinite;\n}\n\n.gray {\n\t--skeleton-gray-base: #f3f5fa;\n\t--skeleton-gray-accent: #e3e3e3;\n\n\tbackground: linear-gradient(\n\t\t90deg,\n\t\tvar(--skeleton-gray-base) 0%,\n\t\tvar(--skeleton-gray-base) 33%,\n\t\tvar(--skeleton-gray-accent) 50%,\n\t\tvar(--skeleton-gray-base) 66%,\n\t\tvar(--skeleton-gray-base) 100%\n\t);\n\tbackground-size: 300% 100%;\n}\n\n.blue {\n\t--skeleton-blue-accent: #759cec;\n\t--skeleton-blue-base: #dfe9ff;\n\n\tbackground: linear-gradient(\n\t\t90deg,\n\t\tvar(--skeleton-blue-base) 0%,\n\t\tvar(--skeleton-blue-base) 33%,\n\t\tvar(--skeleton-blue-accent) 50%,\n\t\tvar(--skeleton-blue-base) 66%,\n\t\tvar(--skeleton-blue-base) 100%\n\t);\n\tbackground-size: 300% 100%;\n}\n\n.text {\n\tdisplay: block;\n\tmargin-bottom: var(--spacing-xs);\n\n\t&:last-child {\n\t\tmargin-bottom: 0;\n\t}\n}\n\n.circle {\n\tdisplay: inline-block;\n\tborder-radius: 50%;\n\tflex-shrink: 0;\n}\n\n.rectangle {\n\tdisplay: inline-block;\n\tflex-shrink: 0;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n@keyframes shimmer {\n\t0% {\n\t\tbackground-position: 100% 0;\n\t}\n\n\t60% {\n\t\tbackground-position: 0 0;\n\t}\n\n\t100% {\n\t\tbackground-position: 0 0;\n\t}\n}\n"],"mappings":""}

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

@@ -0,0 +1,8 @@
+
+//#region src/components/ds-skeleton/ds-skeleton.types.ts
+const skeletonColorVariants = ["gray", "blue"];
+const skeletonRadiusVariants = ["default", "round"];
+
+//#endregion
+exports.skeletonColorVariants = skeletonColorVariants;
+exports.skeletonRadiusVariants = skeletonRadiusVariants;

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

@@ -0,0 +1,91 @@
+import { DsAvatarSize } from "../ds-avatar/ds-avatar.types.cjs";
+import { SemanticVariant } from "../ds-typography/ds-typography.types.cjs";
+import { CSSProperties, Ref } from "react";
+
+//#region src/components/ds-skeleton/ds-skeleton.types.d.ts
+declare const skeletonColorVariants: readonly ["gray", "blue"];
+type SkeletonColorVariant = (typeof skeletonColorVariants)[number];
+declare const skeletonRadiusVariants: readonly ["default", "round"];
+type SkeletonRadiusVariant = (typeof skeletonRadiusVariants)[number];
+/**
+ * Shared base props for all skeleton components
+ */
+interface DsSkeletonBaseProps {
+  /**
+   * Color variant of the skeleton
+   * @default 'gray'
+   */
+  color?: SkeletonColorVariant;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional inline styles
+   */
+  style?: CSSProperties;
+  /**
+   * Ref to the skeleton element
+   */
+  ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * Props for DsSkeleton.Text component
+ * Typography-based text skeleton with configurable lines
+ */
+interface DsSkeletonTextProps extends DsSkeletonBaseProps {
+  /**
+   * Typography variant - determines the height of the skeleton
+   * @default 'body-sm-reg'
+   */
+  typographyVariant?: SemanticVariant;
+  /**
+   * Number of lines to render
+   * @default 1
+   */
+  lines?: number;
+  /**
+   * Width of skeleton. Last line will have varied width if not specified.
+   * Can be a number (px) or string ('50%', '200px')
+   * @default '100%' (last line varies between 40-80%)
+   */
+  width?: string | number;
+  /**
+   * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value
+   * @default 'default'
+   */
+  radius?: SkeletonRadiusVariant | number;
+}
+/**
+ * Props for DsSkeleton.Circle component
+ * Circular skeleton for avatars and icons
+ */
+interface DsSkeletonCircleProps extends DsSkeletonBaseProps {
+  /**
+   * Size of the circle - matches DsAvatar sizes or custom pixel value
+   * @default 'regular'
+   */
+  size?: DsAvatarSize | number;
+}
+/**
+ * Props for DsSkeleton.Rect component
+ * Rectangular skeleton for buttons, images, and custom shapes
+ */
+interface DsSkeletonRectProps extends DsSkeletonBaseProps {
+  /**
+   * Width of rectangle. Can be number (px) or string ('50%', '200px')
+   */
+  width: string | number;
+  /**
+   * Height of rectangle. Can be number (px) or string ('50%', '200px')
+   */
+  height: string | number;
+  /**
+   * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value
+   * @default 'default'
+   */
+  radius?: SkeletonRadiusVariant | number;
+}
+//#endregion
+export { DsSkeletonBaseProps, DsSkeletonCircleProps, DsSkeletonRectProps, DsSkeletonTextProps, SkeletonColorVariant, SkeletonRadiusVariant, skeletonColorVariants, skeletonRadiusVariants };
+//# sourceMappingURL=ds-skeleton.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton.types.d.cts","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton.types.ts"],"sourcesContent":[],"mappings":";;;;;cAIa;KACD,oBAAA,WAA+B;AAD9B,cAGA,sBAHiD,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,CAAA;AAClD,KAGA,qBAAA,GAHoB,CAAA,OAGY,sBAHoB,CAAA,CAAA,MAAA,CAAA;AAEhE;AACA;AAKA;AAKS,UALQ,mBAAA,CAKR;EAQA;;;;EAWQ,KAAA,CAAA,EAnBR,oBAmB4B;EAKhB;;;EAL2C,SAAA,CAAA,EAAA,MAAA;EA4B/C;AAYjB;;UAnDS;;;;QAIF,IAAI;;;;;;UAOM,mBAAA,SAA4B;;;;;sBAKxB;;;;;;;;;;;;;;;;WAgBX;;;;;;UAOO,qBAAA,SAA8B;;;;;SAKvC;;;;;;UAOS,mBAAA,SAA4B;;;;;;;;;;;;;WAanC"}

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

@@ -0,0 +1,93 @@
+import { DsAvatarSize } from "../ds-avatar/ds-avatar.types.js";
+import "../ds-avatar/index.js";
+import { SemanticVariant } from "../ds-typography/ds-typography.types.js";
+import "../ds-typography/index.js";
+import { CSSProperties, Ref } from "react";
+
+//#region src/components/ds-skeleton/ds-skeleton.types.d.ts
+declare const skeletonColorVariants: readonly ["gray", "blue"];
+type SkeletonColorVariant = (typeof skeletonColorVariants)[number];
+declare const skeletonRadiusVariants: readonly ["default", "round"];
+type SkeletonRadiusVariant = (typeof skeletonRadiusVariants)[number];
+/**
+ * Shared base props for all skeleton components
+ */
+interface DsSkeletonBaseProps {
+  /**
+   * Color variant of the skeleton
+   * @default 'gray'
+   */
+  color?: SkeletonColorVariant;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional inline styles
+   */
+  style?: CSSProperties;
+  /**
+   * Ref to the skeleton element
+   */
+  ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * Props for DsSkeleton.Text component
+ * Typography-based text skeleton with configurable lines
+ */
+interface DsSkeletonTextProps extends DsSkeletonBaseProps {
+  /**
+   * Typography variant - determines the height of the skeleton
+   * @default 'body-sm-reg'
+   */
+  typographyVariant?: SemanticVariant;
+  /**
+   * Number of lines to render
+   * @default 1
+   */
+  lines?: number;
+  /**
+   * Width of skeleton. Last line will have varied width if not specified.
+   * Can be a number (px) or string ('50%', '200px')
+   * @default '100%' (last line varies between 40-80%)
+   */
+  width?: string | number;
+  /**
+   * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value
+   * @default 'default'
+   */
+  radius?: SkeletonRadiusVariant | number;
+}
+/**
+ * Props for DsSkeleton.Circle component
+ * Circular skeleton for avatars and icons
+ */
+interface DsSkeletonCircleProps extends DsSkeletonBaseProps {
+  /**
+   * Size of the circle - matches DsAvatar sizes or custom pixel value
+   * @default 'regular'
+   */
+  size?: DsAvatarSize | number;
+}
+/**
+ * Props for DsSkeleton.Rect component
+ * Rectangular skeleton for buttons, images, and custom shapes
+ */
+interface DsSkeletonRectProps extends DsSkeletonBaseProps {
+  /**
+   * Width of rectangle. Can be number (px) or string ('50%', '200px')
+   */
+  width: string | number;
+  /**
+   * Height of rectangle. Can be number (px) or string ('50%', '200px')
+   */
+  height: string | number;
+  /**
+   * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value
+   * @default 'default'
+   */
+  radius?: SkeletonRadiusVariant | number;
+}
+//#endregion
+export { DsSkeletonBaseProps, DsSkeletonCircleProps, DsSkeletonRectProps, DsSkeletonTextProps, SkeletonColorVariant, SkeletonRadiusVariant, skeletonColorVariants, skeletonRadiusVariants };
+//# sourceMappingURL=ds-skeleton.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton.types.d.ts","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton.types.ts"],"sourcesContent":[],"mappings":";;;;;;;cAIa;KACD,oBAAA,WAA+B;cAE9B;KACD,qBAAA,WAAgC;AAJ5C;AACA;AAEA;AACY,UAKK,mBAAA,CALgB;EAKhB;;;;EAiBV,KAAA,CAAA,EAZE,oBAYF;EAAG;AAOV;;EAqBU,SAAA,CAAA,EAAA,MAAA;EArBmC;;AA4B7C;EAYiB,KAAA,CAAA,EAnDR,aAmDQ;;;;QA/CV,IAAI;;;;;;UAOM,mBAAA,SAA4B;;;;;sBAKxB;;;;;;;;;;;;;;;;WAgBX;;;;;;UAOO,qBAAA,SAA8B;;;;;SAKvC;;;;;;UAOS,mBAAA,SAA4B;;;;;;;;;;;;;WAanC"}

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

@@ -0,0 +1,7 @@
+//#region src/components/ds-skeleton/ds-skeleton.types.ts
+const skeletonColorVariants = ["gray", "blue"];
+const skeletonRadiusVariants = ["default", "round"];
+
+//#endregion
+export { skeletonColorVariants, skeletonRadiusVariants };
+//# sourceMappingURL=ds-skeleton.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-skeleton.types.js","names":["CSSProperties","Ref","DsAvatarSize","SemanticVariant","skeletonColorVariants","const","SkeletonColorVariant","skeletonRadiusVariants","SkeletonRadiusVariant","DsSkeletonBaseProps","color","className","style","ref","HTMLSpanElement","DsSkeletonTextProps","typographyVariant","lines","width","radius","DsSkeletonCircleProps","size","DsSkeletonRectProps","height"],"sources":["../../../src/components/ds-skeleton/ds-skeleton.types.ts"],"sourcesContent":["import type { CSSProperties, Ref } from 'react';\nimport type { DsAvatarSize } from '../ds-avatar';\nimport type { SemanticVariant } from '../ds-typography';\n\nexport const skeletonColorVariants = ['gray', 'blue'] as const;\nexport type SkeletonColorVariant = (typeof skeletonColorVariants)[number];\n\nexport const skeletonRadiusVariants = ['default', 'round'] as const;\nexport type SkeletonRadiusVariant = (typeof skeletonRadiusVariants)[number];\n\n/**\n * Shared base props for all skeleton components\n */\nexport interface DsSkeletonBaseProps {\n\t/**\n\t * Color variant of the skeleton\n\t * @default 'gray'\n\t */\n\tcolor?: SkeletonColorVariant;\n\t/**\n\t * Additional CSS class names\n\t */\n\tclassName?: string;\n\t/**\n\t * Additional inline styles\n\t */\n\tstyle?: CSSProperties;\n\t/**\n\t * Ref to the skeleton element\n\t */\n\tref?: Ref<HTMLSpanElement>;\n}\n\n/**\n * Props for DsSkeleton.Text component\n * Typography-based text skeleton with configurable lines\n */\nexport interface DsSkeletonTextProps extends DsSkeletonBaseProps {\n\t/**\n\t * Typography variant - determines the height of the skeleton\n\t * @default 'body-sm-reg'\n\t */\n\ttypographyVariant?: SemanticVariant;\n\t/**\n\t * Number of lines to render\n\t * @default 1\n\t */\n\tlines?: number;\n\t/**\n\t * Width of skeleton. Last line will have varied width if not specified.\n\t * Can be a number (px) or string ('50%', '200px')\n\t * @default '100%' (last line varies between 40-80%)\n\t */\n\twidth?: string | number;\n\t/**\n\t * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value\n\t * @default 'default'\n\t */\n\tradius?: SkeletonRadiusVariant | number;\n}\n\n/**\n * Props for DsSkeleton.Circle component\n * Circular skeleton for avatars and icons\n */\nexport interface DsSkeletonCircleProps extends DsSkeletonBaseProps {\n\t/**\n\t * Size of the circle - matches DsAvatar sizes or custom pixel value\n\t * @default 'regular'\n\t */\n\tsize?: DsAvatarSize | number;\n}\n\n/**\n * Props for DsSkeleton.Rect component\n * Rectangular skeleton for buttons, images, and custom shapes\n */\nexport interface DsSkeletonRectProps extends DsSkeletonBaseProps {\n\t/**\n\t * Width of rectangle. Can be number (px) or string ('50%', '200px')\n\t */\n\twidth: string | number;\n\t/**\n\t * Height of rectangle. Can be number (px) or string ('50%', '200px')\n\t */\n\theight: string | number;\n\t/**\n\t * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value\n\t * @default 'default'\n\t */\n\tradius?: SkeletonRadiusVariant | number;\n}\n"],"mappings":";AAIA,MAAaI,wBAAwB,CAAC,QAAQ,OAAO;AAGrD,MAAaG,yBAAyB,CAAC,WAAW,QAAQ"}

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

@@ -0,0 +1,5 @@
+const require_ds_skeleton_types = require('./ds-skeleton.types.cjs');
+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');
+const require_ds_skeleton = require('./ds-skeleton.cjs');

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

@@ -0,0 +1,5 @@
+import { DsSkeletonBaseProps, DsSkeletonCircleProps, DsSkeletonRectProps, DsSkeletonTextProps, SkeletonColorVariant, SkeletonRadiusVariant, skeletonColorVariants, skeletonRadiusVariants } from "./ds-skeleton.types.js";
+import { _default } from "./ds-skeleton.js";
+import { DsSkeletonText } from "./ds-skeleton-text.js";
+import { DsSkeletonCircle } from "./ds-skeleton-circle.js";
+import { DsSkeletonRect } from "./ds-skeleton-rect.js";

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

@@ -0,0 +1,5 @@
+import { skeletonColorVariants, skeletonRadiusVariants } from "./ds-skeleton.types.js";
+import ds_skeleton_text_default from "./ds-skeleton-text.js";
+import ds_skeleton_circle_default from "./ds-skeleton-circle.js";
+import ds_skeleton_rect_default from "./ds-skeleton-rect.js";
+import ds_skeleton_default from "./ds-skeleton.js";

package/dist/components/ds-smart-tabs/ds-smart-tabs.d.cts

@@ -1,5 +1,5 @@
 import { DsSmartTabProps, DsSmartTabsProps } from "./ds-smart-tabs.types.cjs";
-import * as react_jsx_runtime31 from "react/jsx-runtime";
+import * as react_jsx_runtime40 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/ds-smart-tabs/ds-smart-tabs.d.ts
@@ -14,7 +14,7 @@ declare const DsSmartTabs: {
     style,
     children,
     ...props
-  }: DsSmartTabsProps): react_jsx_runtime31.JSX.Element;
+  }: DsSmartTabsProps): react_jsx_runtime40.JSX.Element;
   Tab: React.FC<DsSmartTabProps>;
 };
 //#endregion

package/dist/components/ds-smart-tabs/ds-smart-tabs.d.ts

@@ -1,5 +1,5 @@
 import { DsSmartTabProps, DsSmartTabsProps } from "./ds-smart-tabs.types.js";
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/ds-smart-tabs/ds-smart-tabs.d.ts
@@ -14,7 +14,7 @@ declare const DsSmartTabs: {
     style,
     children,
     ...props
-  }: DsSmartTabsProps): react_jsx_runtime18.JSX.Element;
+  }: DsSmartTabsProps): react_jsx_runtime7.JSX.Element;
   Tab: React.FC<DsSmartTabProps>;
 };
 //#endregion

package/dist/components/ds-smart-tabs/ds-smart-tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-smart-tabs.d.ts","names":[],"sources":["../../../src/components/ds-smart-tabs/ds-smart-tabs.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAKsF,cAmFhF,WAoBL,EAAA;;;;;;;;KAbE,mBAAgB,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-smart-tabs.d.ts","names":[],"sources":["../../../src/components/ds-smart-tabs/ds-smart-tabs.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAKsF,cAmFhF,WAoBL,EAAA;;;;;;;;KAbE,mBAAgB,kBAAA,CAAA,GAAA,CAAA"}