@lablup/ui-common 0.1.0-alpha.9 → 0.2.0-alpha.15

package/dist/components/Skeleton/Skeleton.messages.d.ts

@@ -0,0 +1,18 @@
+export declare const skeletonMessages: {
+    readonly "uic.SkeletonCard.loading": {
+        readonly defaultMessage: "Loading";
+        readonly description: "Accessible name of a card-shaped loading placeholder";
+    };
+    readonly "uic.SkeletonChart.loading": {
+        readonly defaultMessage: "Loading chart";
+        readonly description: "Accessible name of a chart-shaped loading placeholder";
+    };
+    readonly "uic.SkeletonRow.loading": {
+        readonly defaultMessage: "Loading";
+        readonly description: "Accessible name of one list-row loading placeholder";
+    };
+    readonly "uic.SkeletonText.loading": {
+        readonly defaultMessage: "Loading";
+        readonly description: "Accessible name of a text-block loading placeholder";
+    };
+};

package/dist/components/Skeleton/Skeleton.messages.js

@@ -0,0 +1,24 @@
+import { defineMessages as e } from "../../i18n/catalog.js";
+//#region src/components/Skeleton/Skeleton.messages.ts
+var t = e({
+	"uic.SkeletonCard.loading": {
+		defaultMessage: "Loading",
+		description: "Accessible name of a card-shaped loading placeholder"
+	},
+	"uic.SkeletonChart.loading": {
+		defaultMessage: "Loading chart",
+		description: "Accessible name of a chart-shaped loading placeholder"
+	},
+	"uic.SkeletonRow.loading": {
+		defaultMessage: "Loading",
+		description: "Accessible name of one list-row loading placeholder"
+	},
+	"uic.SkeletonText.loading": {
+		defaultMessage: "Loading",
+		description: "Accessible name of a text-block loading placeholder"
+	}
+});
+//#endregion
+export { t as skeletonMessages };
+
+//# sourceMappingURL=Skeleton.messages.js.map

package/dist/components/Skeleton/Skeleton.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.messages.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.messages.ts"],"sourcesContent":["import { defineMessages } from \"../../i18n/catalog\";\n\nexport const skeletonMessages = defineMessages({\n  \"uic.SkeletonCard.loading\": {\n    defaultMessage: \"Loading\",\n    description: \"Accessible name of a card-shaped loading placeholder\",\n  },\n  \"uic.SkeletonChart.loading\": {\n    defaultMessage: \"Loading chart\",\n    description: \"Accessible name of a chart-shaped loading placeholder\",\n  },\n  \"uic.SkeletonRow.loading\": {\n    defaultMessage: \"Loading\",\n    description: \"Accessible name of one list-row loading placeholder\",\n  },\n  \"uic.SkeletonText.loading\": {\n    defaultMessage: \"Loading\",\n    description: \"Accessible name of a text-block loading placeholder\",\n  },\n});\n"],"mappings":";;AAEA,IAAa,IAAmB,EAAe;CAC7C,4BAA4B;EAC1B,gBAAgB;EAChB,aAAa;CACf;CACA,6BAA6B;EAC3B,gBAAgB;EAChB,aAAa;CACf;CACA,2BAA2B;EACzB,gBAAgB;EAChB,aAAa;CACf;CACA,4BAA4B;EAC1B,gBAAgB;EAChB,aAAa;CACf;AACF,CAAC"}

package/dist/components/Skeleton/SkeletonCard.d.ts

@@ -5,16 +5,11 @@ export interface SkeletonCardProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
-    /** Accessible name for each skeleton inside. Defaults to "Loading". */
+    /**
+     * Accessible name announced for the placeholder as a whole. Defaults to the
+     * catalog's `uic.SkeletonCard.loading` ("Loading").
+     */
     loadingLabel?: string;
 }
-/**
- * SkeletonCard provides a loading placeholder for card components.
- *
- * Variants:
- * - default: Full card with header, content, and footer
- * - compact: Smaller card with reduced padding
- * - stat: Statistics card layout
- */
 export declare function SkeletonCard({ variant, className, testId, loadingLabel, }: SkeletonCardProps): import("react").JSX.Element;
 export default SkeletonCard;

package/dist/components/Skeleton/SkeletonCard2.js

@@ -1,83 +1,83 @@
-import { Skeleton as e } from "./Skeleton2.js";
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { SkeletonShape as t } from "./SkeletonShape2.js";
 /* empty css             */
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonCard.tsx
-function i({ variant: i = "default", className: a = "", testId: o, loadingLabel: s }) {
-	let c = [
-		"skeleton-card",
-		`skeleton-card--${i}`,
-		a
+function a({ variant: a = "default", className: o = "", testId: s, loadingLabel: c }) {
+	let l = e(), u = [
+		"uic-skeleton-card",
+		`uic-skeleton-card--${a}`,
+		o
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ n("div", {
-		className: c,
-		"data-testid": o,
+	return /* @__PURE__ */ r("div", {
+		className: u,
+		"data-testid": s,
 		role: "status",
 		"aria-busy": "true",
-		children: i === "stat" ? /* @__PURE__ */ n(t, { children: /* @__PURE__ */ r("div", {
-			className: "skeleton-card__header",
-			children: [/* @__PURE__ */ n(e, {
-				loadingLabel: s,
-				width: "48px",
-				height: "48px",
-				variant: "circle"
-			}), /* @__PURE__ */ r("div", {
-				className: "skeleton-card__header-text",
-				children: [/* @__PURE__ */ n(e, {
-					loadingLabel: s,
+		"aria-label": c ?? l("uic.SkeletonCard.loading"),
+		children: a === "stat" ? /* @__PURE__ */ i("div", {
+			className: "uic-skeleton-card__header",
+			children: [/* @__PURE__ */ r(t, {
+				width: "3rem",
+				height: "3rem",
+				shape: "circle"
+			}), /* @__PURE__ */ i("div", {
+				className: "uic-skeleton-card__header-text",
+				children: [/* @__PURE__ */ r(t, {
 					width: "60%",
-					height: "16px"
-				}), /* @__PURE__ */ n(e, {
-					loadingLabel: s,
+					height: "1rem",
+					index: 1
+				}), /* @__PURE__ */ r(t, {
 					width: "40%",
-					height: "24px"
+					height: "1.5rem",
+					index: 2
 				})]
 			})]
-		}) }) : /* @__PURE__ */ r(t, { children: [
-			/* @__PURE__ */ n("div", {
-				className: "skeleton-card__header",
-				children: /* @__PURE__ */ n(e, {
-					loadingLabel: s,
+		}) : /* @__PURE__ */ i(n, { children: [
+			/* @__PURE__ */ r("div", {
+				className: "uic-skeleton-card__header",
+				children: /* @__PURE__ */ r(t, {
 					width: "70%",
-					height: "20px"
+					height: "1.25rem"
 				})
 			}),
-			/* @__PURE__ */ r("div", {
-				className: "skeleton-card__content",
+			/* @__PURE__ */ i("div", {
+				className: "uic-skeleton-card__content",
 				children: [
-					/* @__PURE__ */ n(e, {
-						loadingLabel: s,
+					/* @__PURE__ */ r(t, {
 						width: "100%",
-						height: "16px"
+						height: "1rem",
+						index: 1
 					}),
-					/* @__PURE__ */ n(e, {
-						loadingLabel: s,
+					/* @__PURE__ */ r(t, {
 						width: "90%",
-						height: "16px"
+						height: "1rem",
+						index: 2
 					}),
-					/* @__PURE__ */ n(e, {
-						loadingLabel: s,
+					/* @__PURE__ */ r(t, {
 						width: "80%",
-						height: "16px"
+						height: "1rem",
+						index: 3
 					})
 				]
 			}),
-			i !== "compact" && /* @__PURE__ */ r("div", {
-				className: "skeleton-card__footer",
-				children: [/* @__PURE__ */ n(e, {
-					loadingLabel: s,
-					width: "80px",
-					height: "32px"
-				}), /* @__PURE__ */ n(e, {
-					loadingLabel: s,
-					width: "80px",
-					height: "32px"
+			a !== "compact" && /* @__PURE__ */ i("div", {
+				className: "uic-skeleton-card__footer",
+				children: [/* @__PURE__ */ r(t, {
+					width: "5rem",
+					height: "2rem",
+					index: 4
+				}), /* @__PURE__ */ r(t, {
+					width: "5rem",
+					height: "2rem",
+					index: 5
 				})]
 			})
 		] })
 	});
 }
 //#endregion
-export { i as SkeletonCard, i as default };
+export { a as SkeletonCard, a as default };
 
 //# sourceMappingURL=SkeletonCard2.js.map
 import "../../assets/components/Skeleton/SkeletonCard.css";

package/dist/components/Skeleton/SkeletonCard2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonCard2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonCard.tsx"],"sourcesContent":["/**\n * SkeletonCard Component\n *\n * Skeleton placeholder for card components (model cards, stat cards, etc.).\n * Mimics the structure of a typical card with header, content, and footer areas.\n *\n * @example\n * // Basic usage\n * <SkeletonCard />\n *\n * @example\n * // Compact variant\n * <SkeletonCard variant=\"compact\" />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonCard.css\";\n\nexport interface SkeletonCardProps {\n  /** Card size variant */\n  variant?: \"default\" | \"compact\" | \"stat\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible name for each skeleton inside. Defaults to \"Loading\". */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonCard provides a loading placeholder for card components.\n *\n * Variants:\n * - default: Full card with header, content, and footer\n * - compact: Smaller card with reduced padding\n * - stat: Statistics card layout\n */\nexport function SkeletonCard({\n  variant = \"default\",\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonCardProps) {\n  const classNames = [\"skeleton-card\", `skeleton-card--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n      {variant === \"stat\" ? (\n        <>\n          <div className=\"skeleton-card__header\">\n            <Skeleton\n              loadingLabel={loadingLabel}\n              width=\"48px\"\n              height=\"48px\"\n              variant=\"circle\"\n            />\n            <div className=\"skeleton-card__header-text\">\n              <Skeleton loadingLabel={loadingLabel} width=\"60%\" height=\"16px\" />\n              <Skeleton loadingLabel={loadingLabel} width=\"40%\" height=\"24px\" />\n            </div>\n          </div>\n        </>\n      ) : (\n        <>\n          <div className=\"skeleton-card__header\">\n            <Skeleton loadingLabel={loadingLabel} width=\"70%\" height=\"20px\" />\n          </div>\n          <div className=\"skeleton-card__content\">\n            <Skeleton loadingLabel={loadingLabel} width=\"100%\" height=\"16px\" />\n            <Skeleton loadingLabel={loadingLabel} width=\"90%\" height=\"16px\" />\n            <Skeleton loadingLabel={loadingLabel} width=\"80%\" height=\"16px\" />\n          </div>\n          {variant !== \"compact\" && (\n            <div className=\"skeleton-card__footer\">\n              <Skeleton loadingLabel={loadingLabel} width=\"80px\" height=\"32px\" />\n              <Skeleton loadingLabel={loadingLabel} width=\"80px\" height=\"32px\" />\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonCard;\n"],"mappings":";;;;AAqCA,SAAgB,EAAa,EAC3B,aAAU,WACV,eAAY,IACZ,WACA,mBACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,eAAa;EAAQ,MAAK;EAAS,aAAU;EACtE,UAAA,MAAY,SACX,kBAAA,GAAA,EAAA,UACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IACgB;IACd,OAAM;IACN,QAAO;IACP,SAAQ;GACT,CAAA,GACD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAM,QAAO;IAAQ,CAAA,GACjE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAM,QAAO;IAAQ,CAAA,CAC9D;GACF,CAAA,CAAA;EACL,CAAA,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAM,QAAO;IAAQ,CAAA;GAC9D,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MAAwB;MAAc,OAAM;MAAO,QAAO;KAAQ,CAAA;KAClE,kBAAC,GAAD;MAAwB;MAAc,OAAM;MAAM,QAAO;KAAQ,CAAA;KACjE,kBAAC,GAAD;MAAwB;MAAc,OAAM;MAAM,QAAO;KAAQ,CAAA;IAC9D;;GACJ,MAAY,aACX,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,GAClE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC/D;;EAEP,EAAA,CAAA;CAED,CAAA;AAET"}
+{"version":3,"file":"SkeletonCard2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonCard.tsx"],"sourcesContent":["/**\n * SkeletonCard\n *\n * Loading placeholder shaped like a card: a header line, three body lines and\n * two footer buttons. `compact` drops the footer; `stat` is an avatar beside\n * two lines, the shape of a `StatCard`.\n *\n * One live region: the container is `role=\"status\"` with the name, and every\n * shape inside is Astryx's decorative `Skeleton`.\n *\n * @example\n * <SkeletonCard />\n * <SkeletonCard variant=\"compact\" />\n */\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport { SkeletonShape } from \"./SkeletonShape\";\nimport \"./SkeletonCard.css\";\n\nexport interface SkeletonCardProps {\n  /** Card size variant */\n  variant?: \"default\" | \"compact\" | \"stat\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /**\n   * Accessible name announced for the placeholder as a whole. Defaults to the\n   * catalog's `uic.SkeletonCard.loading` (\"Loading\").\n   */\n  loadingLabel?: string;\n}\n\nexport function SkeletonCard({\n  variant = \"default\",\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonCardProps) {\n  const t = useUicTranslator();\n  const classNames = [\"uic-skeleton-card\", `uic-skeleton-card--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      data-testid={testId}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel ?? t(\"uic.SkeletonCard.loading\")}\n    >\n      {variant === \"stat\" ? (\n        <div className=\"uic-skeleton-card__header\">\n          <SkeletonShape width=\"3rem\" height=\"3rem\" shape=\"circle\" />\n          <div className=\"uic-skeleton-card__header-text\">\n            <SkeletonShape width=\"60%\" height=\"1rem\" index={1} />\n            <SkeletonShape width=\"40%\" height=\"1.5rem\" index={2} />\n          </div>\n        </div>\n      ) : (\n        <>\n          <div className=\"uic-skeleton-card__header\">\n            <SkeletonShape width=\"70%\" height=\"1.25rem\" />\n          </div>\n          <div className=\"uic-skeleton-card__content\">\n            <SkeletonShape width=\"100%\" height=\"1rem\" index={1} />\n            <SkeletonShape width=\"90%\" height=\"1rem\" index={2} />\n            <SkeletonShape width=\"80%\" height=\"1rem\" index={3} />\n          </div>\n          {variant !== \"compact\" && (\n            <div className=\"uic-skeleton-card__footer\">\n              <SkeletonShape width=\"5rem\" height=\"2rem\" index={4} />\n              <SkeletonShape width=\"5rem\" height=\"2rem\" index={5} />\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonCard;\n"],"mappings":";;;;;AAgCA,SAAgB,EAAa,EAC3B,aAAU,WACV,eAAY,IACZ,WACA,mBACoB;CACpB,IAAM,IAAI,EAAiB,GACrB,IAAa;EAAC;EAAqB,sBAAsB;EAAW;CAAS,CAAC,CACjF,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,eAAa;EACb,MAAK;EACL,aAAU;EACV,cAAY,KAAgB,EAAE,0BAA0B;EAEvD,UAAA,MAAY,SACX,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAe,OAAM;IAAO,QAAO;IAAO,OAAM;GAAU,CAAA,GAC1D,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAe,OAAM;KAAM,QAAO;KAAO,OAAO;IAAI,CAAA,GACpD,kBAAC,GAAD;KAAe,OAAM;KAAM,QAAO;KAAS,OAAO;IAAI,CAAA,CACnD;GACF,CAAA,CAAA;EAEL,CAAA,IAAA,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAe,OAAM;KAAM,QAAO;IAAW,CAAA;GAC1C,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MAAe,OAAM;MAAO,QAAO;MAAO,OAAO;KAAI,CAAA;KACrD,kBAAC,GAAD;MAAe,OAAM;MAAM,QAAO;MAAO,OAAO;KAAI,CAAA;KACpD,kBAAC,GAAD;MAAe,OAAM;MAAM,QAAO;MAAO,OAAO;KAAI,CAAA;IACjD;;GACJ,MAAY,aACX,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAe,OAAM;KAAO,QAAO;KAAO,OAAO;IAAI,CAAA,GACrD,kBAAC,GAAD;KAAe,OAAM;KAAO,QAAO;KAAO,OAAO;IAAI,CAAA,CAClD;;EAEP,EAAA,CAAA;CAED,CAAA;AAET"}

package/dist/components/Skeleton/SkeletonChart.d.ts

@@ -1,23 +1,17 @@
 export interface SkeletonChartProps {
     /** Chart type variant */
     variant?: "bar" | "line" | "pie" | "area";
-    /** Chart height */
+    /** Chart height, any CSS length. Default: "300px" */
     height?: string;
     /** Additional CSS class names */
     className?: string;
     /** Test ID for testing */
     testId?: string;
-    /** Accessible label announced while the chart is loading. Default: "Loading chart" */
+    /**
+     * Accessible label announced while the chart is loading. Defaults to the
+     * catalog's `uic.SkeletonChart.loading` ("Loading chart").
+     */
     loadingLabel?: string;
 }
-/**
- * SkeletonChart provides a loading placeholder for chart components.
- *
- * Variants:
- * - bar: Vertical bars of varying heights
- * - line: Line graph placeholder
- * - pie: Circular chart placeholder
- * - area: Area chart placeholder
- */
 export declare function SkeletonChart({ variant, height, className, testId, loadingLabel, }: SkeletonChartProps): import("react").JSX.Element;
 export default SkeletonChart;

package/dist/components/Skeleton/SkeletonChart2.js

@@ -1,59 +1,65 @@
-import { Skeleton as e } from "./Skeleton2.js";
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { SkeletonShape as t } from "./SkeletonShape2.js";
 /* empty css              */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonChart.tsx
-function r({ variant: r = "bar", height: i = "300px", className: a = "", testId: o, loadingLabel: s = "Loading chart" }) {
-	let c = [
-		"skeleton-chart",
-		`skeleton-chart--${r}`,
-		a
+var i = [
+	60,
+	80,
+	45,
+	90,
+	70,
+	55,
+	85,
+	65
+];
+function a({ variant: a = "bar", height: o = "300px", className: s = "", testId: c, loadingLabel: l }) {
+	let u = e(), d = [
+		"uic-skeleton-chart",
+		`uic-skeleton-chart--${a}`,
+		s
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ t("div", {
-		className: c,
-		style: { height: i },
-		"data-testid": o,
+	return /* @__PURE__ */ n("div", {
+		className: d,
+		style: { height: o },
+		"data-testid": c,
 		role: "status",
 		"aria-busy": "true",
-		"aria-label": s,
-		children: r === "pie" ? /* @__PURE__ */ n("div", {
-			className: "skeleton-chart__pie",
-			children: [/* @__PURE__ */ t(e, {
+		"aria-label": l ?? u("uic.SkeletonChart.loading"),
+		children: a === "pie" ? /* @__PURE__ */ r("div", {
+			className: "uic-skeleton-chart__pie",
+			children: [/* @__PURE__ */ n(t, {
 				width: "100%",
 				height: "100%",
-				variant: "circle"
-			}), /* @__PURE__ */ t("div", {
-				className: "skeleton-chart__legend",
-				children: Array.from({ length: 4 }).map((r, i) => /* @__PURE__ */ n("div", {
-					className: "skeleton-chart__legend-item",
-					children: [/* @__PURE__ */ t(e, {
-						width: "16px",
-						height: "16px",
-						variant: "circle"
-					}), /* @__PURE__ */ t(e, {
-						width: "80px",
-						height: "14px"
+				shape: "circle",
+				className: "uic-skeleton-chart__pie-disc"
+			}), /* @__PURE__ */ n("div", {
+				className: "uic-skeleton-chart__legend",
+				children: Array.from({ length: 4 }, (e, i) => /* @__PURE__ */ r("div", {
+					className: "uic-skeleton-chart__legend-item",
+					children: [/* @__PURE__ */ n(t, {
+						width: "1rem",
+						height: "1rem",
+						shape: "circle",
+						index: i
+					}), /* @__PURE__ */ n(t, {
+						width: "5rem",
+						height: "0.875rem",
+						index: i
 					})]
 				}, i))
 			})]
-		}) : r === "bar" ? /* @__PURE__ */ t("div", {
-			className: "skeleton-chart__bars",
-			children: [
-				60,
-				80,
-				45,
-				90,
-				70,
-				55,
-				85,
-				65
-			].map((n, r) => /* @__PURE__ */ t(e, {
+		}) : a === "bar" ? /* @__PURE__ */ n("div", {
+			className: "uic-skeleton-chart__bars",
+			children: i.map((e, r) => /* @__PURE__ */ n(t, {
 				width: "100%",
-				height: `${String(n)}%`,
-				className: "skeleton-chart__bar"
+				height: `${String(e)}%`,
+				index: r,
+				className: "uic-skeleton-chart__bar"
 			}, r))
-		}) : /* @__PURE__ */ t("div", {
-			className: "skeleton-chart__line",
-			children: /* @__PURE__ */ t(e, {
+		}) : /* @__PURE__ */ n("div", {
+			className: "uic-skeleton-chart__line",
+			children: /* @__PURE__ */ n(t, {
 				width: "100%",
 				height: "100%"
 			})
@@ -61,7 +67,7 @@ function r({ variant: r = "bar", height: i = "300px", className: a = "", testId:
 	});
 }
 //#endregion
-export { r as SkeletonChart, r as default };
+export { a as SkeletonChart, a as default };
 
 //# sourceMappingURL=SkeletonChart2.js.map
 import "../../assets/components/Skeleton/SkeletonChart.css";

package/dist/components/Skeleton/SkeletonChart2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonChart2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonChart.tsx"],"sourcesContent":["/**\n * SkeletonChart Component\n *\n * Skeleton placeholder for chart components.\n * Shows a simplified chart-like shape with bars or circular elements.\n *\n * @example\n * // Bar chart skeleton\n * <SkeletonChart variant=\"bar\" />\n *\n * @example\n * // Pie chart skeleton\n * <SkeletonChart variant=\"pie\" />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonChart.css\";\n\nexport interface SkeletonChartProps {\n  /** Chart type variant */\n  variant?: \"bar\" | \"line\" | \"pie\" | \"area\";\n  /** Chart height */\n  height?: string;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible label announced while the chart is loading. Default: \"Loading chart\" */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonChart provides a loading placeholder for chart components.\n *\n * Variants:\n * - bar: Vertical bars of varying heights\n * - line: Line graph placeholder\n * - pie: Circular chart placeholder\n * - area: Area chart placeholder\n */\nexport function SkeletonChart({\n  variant = \"bar\",\n  height = \"300px\",\n  className = \"\",\n  testId,\n  loadingLabel = \"Loading chart\",\n}: SkeletonChartProps) {\n  const classNames = [\"skeleton-chart\", `skeleton-chart--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      style={{ height }}\n      data-testid={testId}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel}\n    >\n      {variant === \"pie\" ? (\n        <div className=\"skeleton-chart__pie\">\n          <Skeleton width=\"100%\" height=\"100%\" variant=\"circle\" />\n          <div className=\"skeleton-chart__legend\">\n            {Array.from({ length: 4 }).map((_, i) => (\n              <div key={i} className=\"skeleton-chart__legend-item\">\n                <Skeleton width=\"16px\" height=\"16px\" variant=\"circle\" />\n                <Skeleton width=\"80px\" height=\"14px\" />\n              </div>\n            ))}\n          </div>\n        </div>\n      ) : variant === \"bar\" ? (\n        <div className=\"skeleton-chart__bars\">\n          {[60, 80, 45, 90, 70, 55, 85, 65].map((barHeight, i) => (\n            <Skeleton\n              key={i}\n              width=\"100%\"\n              height={`${String(barHeight)}%`}\n              className=\"skeleton-chart__bar\"\n            />\n          ))}\n        </div>\n      ) : (\n        <div className=\"skeleton-chart__line\">\n          <Skeleton width=\"100%\" height=\"100%\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonChart;\n"],"mappings":";;;;AAwCA,SAAgB,EAAc,EAC5B,aAAU,OACV,YAAS,SACT,eAAY,IACZ,WACA,kBAAe,mBACM;CACrB,IAAM,IAAa;EAAC;EAAkB,mBAAmB;EAAW;CAAS,CAAC,CAC3E,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,OAAO,EAAE,UAAO;EAChB,eAAa;EACb,MAAK;EACL,aAAU;EACV,cAAY;EAEX,UAAA,MAAY,QACX,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAU,OAAM;IAAO,QAAO;IAAO,SAAQ;GAAU,CAAA,GACvD,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,MACjC,kBAAC,OAAD;KAAa,WAAU;KAAvB,UAAA,CACE,kBAAC,GAAD;MAAU,OAAM;MAAO,QAAO;MAAO,SAAQ;KAAU,CAAA,GACvD,kBAAC,GAAD;MAAU,OAAM;MAAO,QAAO;KAAQ,CAAA,CACnC;IAHK,GAAA,CAGL,CACN;GACE,CAAA,CACF;EACH,CAAA,IAAA,MAAY,QACd,kBAAC,OAAD;GAAK,WAAU;GACZ,UAAA;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;GAAE,CAAC,CAAC,KAAK,GAAW,MAChD,kBAAC,GAAD;IAEE,OAAM;IACN,QAAQ,GAAG,OAAO,CAAS,EAAE;IAC7B,WAAU;GACX,GAJM,CAIN,CACF;EACE,CAAA,IAEL,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,GAAD;IAAU,OAAM;IAAO,QAAO;GAAQ,CAAA;EACnC,CAAA;CAEJ,CAAA;AAET"}
+{"version":3,"file":"SkeletonChart2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonChart.tsx"],"sourcesContent":["/**\n * SkeletonChart\n *\n * Loading placeholder for a chart: eight bars, a pie with a four-item legend,\n * or one block for line and area charts.\n *\n * @example\n * <SkeletonChart variant=\"bar\" />\n * <SkeletonChart variant=\"pie\" height=\"20rem\" />\n */\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport { SkeletonShape } from \"./SkeletonShape\";\nimport \"./SkeletonChart.css\";\n\nexport interface SkeletonChartProps {\n  /** Chart type variant */\n  variant?: \"bar\" | \"line\" | \"pie\" | \"area\";\n  /** Chart height, any CSS length. Default: \"300px\" */\n  height?: string;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /**\n   * Accessible label announced while the chart is loading. Defaults to the\n   * catalog's `uic.SkeletonChart.loading` (\"Loading chart\").\n   */\n  loadingLabel?: string;\n}\n\nconst BAR_HEIGHTS = [60, 80, 45, 90, 70, 55, 85, 65];\n\nexport function SkeletonChart({\n  variant = \"bar\",\n  height = \"300px\",\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonChartProps) {\n  const t = useUicTranslator();\n  const classNames = [\"uic-skeleton-chart\", `uic-skeleton-chart--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      style={{ height }}\n      data-testid={testId}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel ?? t(\"uic.SkeletonChart.loading\")}\n    >\n      {variant === \"pie\" ? (\n        <div className=\"uic-skeleton-chart__pie\">\n          <SkeletonShape\n            width=\"100%\"\n            height=\"100%\"\n            shape=\"circle\"\n            className=\"uic-skeleton-chart__pie-disc\"\n          />\n          <div className=\"uic-skeleton-chart__legend\">\n            {Array.from({ length: 4 }, (_, i) => (\n              <div key={i} className=\"uic-skeleton-chart__legend-item\">\n                <SkeletonShape width=\"1rem\" height=\"1rem\" shape=\"circle\" index={i} />\n                <SkeletonShape width=\"5rem\" height=\"0.875rem\" index={i} />\n              </div>\n            ))}\n          </div>\n        </div>\n      ) : variant === \"bar\" ? (\n        <div className=\"uic-skeleton-chart__bars\">\n          {BAR_HEIGHTS.map((barHeight, i) => (\n            <SkeletonShape\n              key={i}\n              width=\"100%\"\n              height={`${String(barHeight)}%`}\n              index={i}\n              className=\"uic-skeleton-chart__bar\"\n            />\n          ))}\n        </div>\n      ) : (\n        <div className=\"uic-skeleton-chart__line\">\n          <SkeletonShape width=\"100%\" height=\"100%\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonChart;\n"],"mappings":";;;;;AA8BA,IAAM,IAAc;CAAC;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;AAAE;AAEnD,SAAgB,EAAc,EAC5B,aAAU,OACV,YAAS,SACT,eAAY,IACZ,WACA,mBACqB;CACrB,IAAM,IAAI,EAAiB,GACrB,IAAa;EAAC;EAAsB,uBAAuB;EAAW;CAAS,CAAC,CACnF,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,OAAO,EAAE,UAAO;EAChB,eAAa;EACb,MAAK;EACL,aAAU;EACV,cAAY,KAAgB,EAAE,2BAA2B;EAExD,UAAA,MAAY,QACX,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IACE,OAAM;IACN,QAAO;IACP,OAAM;IACN,WAAU;GACX,CAAA,GACD,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,MAC7B,kBAAC,OAAD;KAAa,WAAU;KAAvB,UAAA,CACE,kBAAC,GAAD;MAAe,OAAM;MAAO,QAAO;MAAO,OAAM;MAAS,OAAO;KAAI,CAAA,GACpE,kBAAC,GAAD;MAAe,OAAM;MAAO,QAAO;MAAW,OAAO;KAAI,CAAA,CACtD;IAHK,GAAA,CAGL,CACN;GACE,CAAA,CACF;EACH,CAAA,IAAA,MAAY,QACd,kBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,EAAY,KAAK,GAAW,MAC3B,kBAAC,GAAD;IAEE,OAAM;IACN,QAAQ,GAAG,OAAO,CAAS,EAAE;IAC7B,OAAO;IACP,WAAU;GACX,GALM,CAKN,CACF;EACE,CAAA,IAEL,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,GAAD;IAAe,OAAM;IAAO,QAAO;GAAQ,CAAA;EACxC,CAAA;CAEJ,CAAA;AAET"}

package/dist/components/Skeleton/SkeletonRow.d.ts

@@ -7,18 +7,13 @@ export interface SkeletonRowProps {
     count?: number;
     /** Additional CSS class names */
     className?: string;
-    /** Test ID for testing */
+    /** Test ID for testing; each row gets `<testId>-<index>` */
     testId?: string;
-    /** Accessible name for each skeleton inside. Defaults to "Loading". */
+    /**
+     * Accessible name announced for each row. Defaults to the catalog's
+     * `uic.SkeletonRow.loading` ("Loading").
+     */
     loadingLabel?: string;
 }
-/**
- * SkeletonRow provides a loading placeholder for list/table rows.
- *
- * Features:
- * - Optional avatar/icon
- * - Optional action buttons
- * - Multiple rows for lists
- */
 export declare function SkeletonRow({ showAvatar, showActions, count, className, testId, loadingLabel, }: SkeletonRowProps): import("react").JSX.Element;
 export default SkeletonRow;

package/dist/components/Skeleton/SkeletonRow2.js

@@ -1,53 +1,54 @@
-import { Skeleton as e } from "./Skeleton2.js";
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { SkeletonShape as t } from "./SkeletonShape2.js";
 /* empty css            */
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonRow.tsx
-function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s = "", testId: c, loadingLabel: l }) {
-	let u = Array.from({ length: o });
-	return /* @__PURE__ */ n(t, { children: u.map((t, o) => /* @__PURE__ */ r("div", {
-		className: `skeleton-row ${s}`,
-		"data-testid": c ? `${c}-${String(o)}` : void 0,
+function a({ showAvatar: a = !1, showActions: o = !1, count: s = 1, className: c = "", testId: l, loadingLabel: u }) {
+	let d = e(), f = u ?? d("uic.SkeletonRow.loading"), p = ["uic-skeleton-row", c].filter(Boolean).join(" ");
+	return /* @__PURE__ */ r(n, { children: Array.from({ length: Math.max(0, s) }, (e, n) => /* @__PURE__ */ i("div", {
+		className: p,
+		"data-testid": l ? `${l}-${String(n)}` : void 0,
 		role: "status",
 		"aria-busy": "true",
+		"aria-label": f,
 		children: [
-			i && /* @__PURE__ */ n("div", {
-				className: "skeleton-row__avatar",
-				children: /* @__PURE__ */ n(e, {
-					loadingLabel: l,
-					width: "40px",
-					height: "40px",
-					variant: "circle"
+			a && /* @__PURE__ */ r("div", {
+				className: "uic-skeleton-row__avatar",
+				children: /* @__PURE__ */ r(t, {
+					width: "2.5rem",
+					height: "2.5rem",
+					shape: "circle"
 				})
 			}),
-			/* @__PURE__ */ r("div", {
-				className: "skeleton-row__content",
-				children: [/* @__PURE__ */ n(e, {
-					loadingLabel: l,
+			/* @__PURE__ */ i("div", {
+				className: "uic-skeleton-row__content",
+				children: [/* @__PURE__ */ r(t, {
 					width: "25%",
-					height: "14px"
-				}), /* @__PURE__ */ n(e, {
-					loadingLabel: l,
+					height: "0.875rem",
+					index: 1
+				}), /* @__PURE__ */ r(t, {
 					width: "100%",
-					height: "16px"
+					height: "1rem",
+					index: 2
 				})]
 			}),
-			a && /* @__PURE__ */ r("div", {
-				className: "skeleton-row__actions",
-				children: [/* @__PURE__ */ n(e, {
-					loadingLabel: l,
-					width: "32px",
-					height: "32px"
-				}), /* @__PURE__ */ n(e, {
-					loadingLabel: l,
-					width: "32px",
-					height: "32px"
+			o && /* @__PURE__ */ i("div", {
+				className: "uic-skeleton-row__actions",
+				children: [/* @__PURE__ */ r(t, {
+					width: "2rem",
+					height: "2rem",
+					index: 3
+				}), /* @__PURE__ */ r(t, {
+					width: "2rem",
+					height: "2rem",
+					index: 4
 				})]
 			})
 		]
-	}, o)) });
+	}, n)) });
 }
 //#endregion
-export { i as SkeletonRow, i as default };
+export { a as SkeletonRow, a as default };
 
 //# sourceMappingURL=SkeletonRow2.js.map
 import "../../assets/components/Skeleton/SkeletonRow.css";

package/dist/components/Skeleton/SkeletonRow2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonRow2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonRow.tsx"],"sourcesContent":["/**\n * SkeletonRow Component\n *\n * Skeleton placeholder for list rows and table rows.\n * Mimics the structure of a log entry or table row.\n *\n * @example\n * // Basic usage\n * <SkeletonRow />\n *\n * @example\n * // With avatar\n * <SkeletonRow showAvatar />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonRow.css\";\n\nexport interface SkeletonRowProps {\n  /** Show avatar/icon on the left */\n  showAvatar?: boolean;\n  /** Show action buttons on the right */\n  showActions?: boolean;\n  /** Number of rows to display */\n  count?: number;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible name for each skeleton inside. Defaults to \"Loading\". */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonRow provides a loading placeholder for list/table rows.\n *\n * Features:\n * - Optional avatar/icon\n * - Optional action buttons\n * - Multiple rows for lists\n */\nexport function SkeletonRow({\n  showAvatar = false,\n  showActions = false,\n  count = 1,\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonRowProps) {\n  const rows = Array.from({ length: count });\n\n  return (\n    <>\n      {rows.map((_, index) => (\n        <div\n          key={index}\n          className={`skeleton-row ${className}`}\n          data-testid={testId ? `${testId}-${String(index)}` : undefined}\n          role=\"status\"\n          aria-busy=\"true\"\n        >\n          {showAvatar && (\n            <div className=\"skeleton-row__avatar\">\n              <Skeleton\n                loadingLabel={loadingLabel}\n                width=\"40px\"\n                height=\"40px\"\n                variant=\"circle\"\n              />\n            </div>\n          )}\n          <div className=\"skeleton-row__content\">\n            <Skeleton loadingLabel={loadingLabel} width=\"25%\" height=\"14px\" />\n            <Skeleton loadingLabel={loadingLabel} width=\"100%\" height=\"16px\" />\n          </div>\n          {showActions && (\n            <div className=\"skeleton-row__actions\">\n              <Skeleton loadingLabel={loadingLabel} width=\"32px\" height=\"32px\" />\n              <Skeleton loadingLabel={loadingLabel} width=\"32px\" height=\"32px\" />\n            </div>\n          )}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport default SkeletonRow;\n"],"mappings":";;;;AAyCA,SAAgB,EAAY,EAC1B,gBAAa,IACb,iBAAc,IACd,WAAQ,GACR,eAAY,IACZ,WACA,mBACmB;CACnB,IAAM,IAAO,MAAM,KAAK,EAAE,QAAQ,EAAM,CAAC;CAEzC,OACE,kBAAA,GAAA,EAAA,UACG,EAAK,KAAK,GAAG,MACZ,kBAAC,OAAD;EAEE,WAAW,gBAAgB;EAC3B,eAAa,IAAS,GAAG,EAAO,GAAG,OAAO,CAAK,MAAM,KAAA;EACrD,MAAK;EACL,aAAU;EALZ,UAAA;GAOG,KACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KACgB;KACd,OAAM;KACN,QAAO;KACP,SAAQ;IACT,CAAA;GACE,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAM,QAAO;IAAQ,CAAA,GACjE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC/D;;GACJ,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,GAClE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC/D;;EAEJ;CA1BE,GAAA,CA0BF,CACN,EACD,CAAA;AAEN"}
+{"version":3,"file":"SkeletonRow2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonRow.tsx"],"sourcesContent":["/**\n * SkeletonRow\n *\n * Loading placeholder for list and table rows: an optional avatar, two lines,\n * and optional action buttons. `count` renders that many rows as a fragment,\n * so they stay direct children of the caller's list; each row is its own\n * placeholder and its own live region.\n *\n * @example\n * <SkeletonRow count={5} showAvatar />\n */\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport { SkeletonShape } from \"./SkeletonShape\";\nimport \"./SkeletonRow.css\";\n\nexport interface SkeletonRowProps {\n  /** Show avatar/icon on the left */\n  showAvatar?: boolean;\n  /** Show action buttons on the right */\n  showActions?: boolean;\n  /** Number of rows to display */\n  count?: number;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing; each row gets `<testId>-<index>` */\n  testId?: string;\n  /**\n   * Accessible name announced for each row. Defaults to the catalog's\n   * `uic.SkeletonRow.loading` (\"Loading\").\n   */\n  loadingLabel?: string;\n}\n\nexport function SkeletonRow({\n  showAvatar = false,\n  showActions = false,\n  count = 1,\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonRowProps) {\n  const t = useUicTranslator();\n  const label = loadingLabel ?? t(\"uic.SkeletonRow.loading\");\n  const classNames = [\"uic-skeleton-row\", className].filter(Boolean).join(\" \");\n\n  return (\n    <>\n      {Array.from({ length: Math.max(0, count) }, (_, index) => (\n        <div\n          key={index}\n          className={classNames}\n          data-testid={testId ? `${testId}-${String(index)}` : undefined}\n          role=\"status\"\n          aria-busy=\"true\"\n          aria-label={label}\n        >\n          {showAvatar && (\n            <div className=\"uic-skeleton-row__avatar\">\n              <SkeletonShape width=\"2.5rem\" height=\"2.5rem\" shape=\"circle\" />\n            </div>\n          )}\n          <div className=\"uic-skeleton-row__content\">\n            <SkeletonShape width=\"25%\" height=\"0.875rem\" index={1} />\n            <SkeletonShape width=\"100%\" height=\"1rem\" index={2} />\n          </div>\n          {showActions && (\n            <div className=\"uic-skeleton-row__actions\">\n              <SkeletonShape width=\"2rem\" height=\"2rem\" index={3} />\n              <SkeletonShape width=\"2rem\" height=\"2rem\" index={4} />\n            </div>\n          )}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport default SkeletonRow;\n"],"mappings":";;;;;AAiCA,SAAgB,EAAY,EAC1B,gBAAa,IACb,iBAAc,IACd,WAAQ,GACR,eAAY,IACZ,WACA,mBACmB;CACnB,IAAM,IAAI,EAAiB,GACrB,IAAQ,KAAgB,EAAE,yBAAyB,GACnD,IAAa,CAAC,oBAAoB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE3E,OACE,kBAAA,GAAA,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,CAAK,EAAE,IAAI,GAAG,MAC9C,kBAAC,OAAD;EAEE,WAAW;EACX,eAAa,IAAS,GAAG,EAAO,GAAG,OAAO,CAAK,MAAM,KAAA;EACrD,MAAK;EACL,aAAU;EACV,cAAY;EANd,UAAA;GAQG,KACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAe,OAAM;KAAS,QAAO;KAAS,OAAM;IAAU,CAAA;GAC3D,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAe,OAAM;KAAM,QAAO;KAAW,OAAO;IAAI,CAAA,GACxD,kBAAC,GAAD;KAAe,OAAM;KAAO,QAAO;KAAO,OAAO;IAAI,CAAA,CAClD;;GACJ,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAe,OAAM;KAAO,QAAO;KAAO,OAAO;IAAI,CAAA,GACrD,kBAAC,GAAD;KAAe,OAAM;KAAO,QAAO;KAAO,OAAO;IAAI,CAAA,CAClD;;EAEJ;CAtBE,GAAA,CAsBF,CACN,EACD,CAAA;AAEN"}

package/dist/components/Skeleton/SkeletonShape.d.ts

@@ -0,0 +1,10 @@
+export type SkeletonShapeKind = "rect" | "circle" | "text";
+export interface SkeletonShapeProps {
+    width: string;
+    height: string;
+    shape?: SkeletonShapeKind;
+    /** Position in the composite, for Astryx's staggered pulse. */
+    index?: number;
+    className?: string;
+}
+export declare function SkeletonShape({ width, height, shape, index, className, }: SkeletonShapeProps): import("react").JSX.Element;

package/dist/components/Skeleton/SkeletonShape2.js

@@ -0,0 +1,23 @@
+/* empty css              */
+import { Skeleton as e } from "@astryxdesign/core/Skeleton";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Skeleton/SkeletonShape.tsx
+function n({ width: n, height: r, shape: i = "rect", index: a = 0, className: o }) {
+	let s = [
+		"uic-skeleton-shape",
+		`uic-skeleton-shape--${i}`,
+		o
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t(e, {
+		width: n,
+		height: r,
+		radius: i === "circle" ? "rounded" : 1,
+		index: a,
+		className: s
+	});
+}
+//#endregion
+export { n as SkeletonShape };
+
+//# sourceMappingURL=SkeletonShape2.js.map
+import "../../assets/components/Skeleton/SkeletonShape.css";

package/dist/components/Skeleton/SkeletonShape2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonShape2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonShape.tsx"],"sourcesContent":["/**\n * One placeholder shape inside a Skeleton composite. Internal: not exported.\n *\n * A thin layer over Astryx `Skeleton`, which is already decorative\n * (`aria-hidden`), so a composite stays one live region however many shapes\n * it draws. The composite's container carries `role=\"status\"` and the name.\n */\nimport { Skeleton } from \"@astryxdesign/core/Skeleton\";\n\nimport \"./SkeletonShape.css\";\n\nexport type SkeletonShapeKind = \"rect\" | \"circle\" | \"text\";\n\nexport interface SkeletonShapeProps {\n  width: string;\n  height: string;\n  shape?: SkeletonShapeKind;\n  /** Position in the composite, for Astryx's staggered pulse. */\n  index?: number;\n  className?: string;\n}\n\nexport function SkeletonShape({\n  width,\n  height,\n  shape = \"rect\",\n  index = 0,\n  className,\n}: SkeletonShapeProps) {\n  const classes = [\"uic-skeleton-shape\", `uic-skeleton-shape--${shape}`, className]\n    .filter(Boolean)\n    .join(\" \");\n  return (\n    <Skeleton\n      width={width}\n      height={height}\n      radius={shape === \"circle\" ? \"rounded\" : 1}\n      index={index}\n      className={classes}\n    />\n  );\n}\n"],"mappings":";;;;AAsBA,SAAgB,EAAc,EAC5B,UACA,WACA,WAAQ,QACR,WAAQ,GACR,gBACqB;CACrB,IAAM,IAAU;EAAC;EAAsB,uBAAuB;EAAS;CAAS,CAAC,CAC9E,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACX,OACE,kBAAC,GAAD;EACS;EACC;EACR,QAAQ,MAAU,WAAW,YAAY;EAClC;EACP,WAAW;CACZ,CAAA;AAEL"}

package/dist/components/Skeleton/SkeletonText.d.ts

@@ -7,16 +7,11 @@ export interface SkeletonTextProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
-    /** Accessible name for each skeleton inside. Defaults to "Loading". */
+    /**
+     * Accessible name announced for the placeholder as a whole. Defaults to the
+     * catalog's `uic.SkeletonText.loading` ("Loading").
+     */
     loadingLabel?: string;
 }
-/**
- * SkeletonText provides a loading placeholder for text content.
- *
- * Features:
- * - Multiple lines with varying widths
- * - Configurable line spacing
- * - Accessible via aria-busy
- */
 export declare function SkeletonText({ lines, spacing, className, testId, loadingLabel, }: SkeletonTextProps): import("react").JSX.Element;
 export default SkeletonText;