@lablup/ui-common 0.1.0-alpha.1 → 0.1.0-alpha.11

package/dist/components/ErrorState/ErrorState2.js

@@ -4,56 +4,53 @@ import { AlertCircleIcon as t } from "../../icons/AlertCircleIcon.js";
 import { useCallback as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/ErrorState/ErrorState.tsx
-function a(e) {
-	return /* @__PURE__ */ r(t, { size: 48 });
-}
-function o({ type: t = "generic", title: o, message: s, primaryAction: c, secondaryAction: l, className: u = "", showIcon: d = !0 }) {
-	let f = n(() => {
-		c?.onClick();
-	}, [c]), p = n(() => {
+function a({ tone: a = "danger", icon: o, title: s, message: c, primaryAction: l, secondaryAction: u, className: d = "", showIcon: f = !0 }) {
+	let p = n(() => {
 		l?.onClick();
-	}, [l]), m = [
+	}, [l]), m = n(() => {
+		u?.onClick();
+	}, [u]), h = [
 		"error-state",
-		`error-state--${t}`,
-		u
+		`error-state--${a}`,
+		d
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ i("div", {
-		className: m,
+		className: h,
 		role: "alert",
 		"aria-live": "polite",
 		children: [
-			d && /* @__PURE__ */ r("div", {
+			f && /* @__PURE__ */ r("div", {
 				className: "error-state__icon",
 				"aria-hidden": "true",
-				children: a(t)
+				children: o ?? /* @__PURE__ */ r(t, { size: 48 })
 			}),
 			/* @__PURE__ */ r("h2", {
 				className: "error-state__title",
-				children: o
+				children: s
 			}),
 			/* @__PURE__ */ r("p", {
 				className: "error-state__message",
-				children: s
+				children: c
 			}),
-			(c || l) && /* @__PURE__ */ i("div", {
+			(l || u) && /* @__PURE__ */ i("div", {
 				className: "error-state__actions",
-				children: [c && /* @__PURE__ */ r(e, {
+				children: [l && /* @__PURE__ */ r(e, {
 					variant: "primary",
-					onClick: f,
+					onClick: p,
 					className: "error-state__action-btn error-state__action-btn--primary",
-					children: c.label
-				}), l && /* @__PURE__ */ r(e, {
+					children: l.label
+				}), u && /* @__PURE__ */ r(e, {
 					variant: "secondary",
-					onClick: p,
+					onClick: m,
 					className: "error-state__action-btn error-state__action-btn--secondary",
-					children: l.label
+					children: u.label
 				})]
 			})
 		]
 	});
 }
 //#endregion
-export { o as ErrorState };
+export { a as ErrorState };
 
 //# sourceMappingURL=ErrorState2.js.map
 import "../../assets/components/ErrorState/ErrorState.css";

package/dist/components/ErrorState/ErrorState2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState2.js","names":[],"sources":["../../../src/components/ErrorState/ErrorState.tsx"],"sourcesContent":["/**\n * ErrorState Component\n *\n * Unified error state component with recovery actions.\n * Provides consistent error presentation across all pages with actionable buttons.\n *\n * Features:\n * - Error type variants (network, configuration, model, permission, generic)\n * - Primary and secondary action buttons\n * - Accessible (ARIA attributes, focus management)\n * - Dark/light theme support\n */\n\nimport { useCallback } from \"react\";\nimport { AlertCircleIcon } from \"../../icons/AlertCircleIcon\";\nimport { Button } from \"../Button\";\nimport \"./ErrorState.css\";\n\nexport type ErrorType =\n  \"network\" | \"configuration\" | \"model\" | \"permission\" | \"generic\";\n\nexport interface ErrorAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ErrorStateProps {\n  /** Error type determines icon and default styling */\n  type?: ErrorType;\n  /** Error title - main heading */\n  title: string;\n  /** Detailed error message */\n  message: string;\n  /** Primary action button (e.g., Retry, Go to Settings) */\n  primaryAction?: ErrorAction;\n  /** Secondary action button (e.g., View Logs, Report Issue) */\n  secondaryAction?: ErrorAction;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether to show error icon */\n  showIcon?: boolean;\n}\n\n/**\n * Get icon for error type\n */\nfunction getErrorIcon(_type: ErrorType): React.ReactNode {\n  // All error types use the same AlertCircleIcon for now\n  // Can be extended with different icons per type in the future\n  return <AlertCircleIcon size={48} />;\n}\n\n/**\n * ErrorState Component\n */\nexport function ErrorState({\n  type = \"generic\",\n  title,\n  message,\n  primaryAction,\n  secondaryAction,\n  className = \"\",\n  showIcon = true,\n}: ErrorStateProps) {\n  const handlePrimaryAction = useCallback(() => {\n    primaryAction?.onClick();\n  }, [primaryAction]);\n\n  const handleSecondaryAction = useCallback(() => {\n    secondaryAction?.onClick();\n  }, [secondaryAction]);\n\n  const containerClass = [\"error-state\", `error-state--${type}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={containerClass} role=\"alert\" aria-live=\"polite\">\n      {showIcon && (\n        <div className=\"error-state__icon\" aria-hidden=\"true\">\n          {getErrorIcon(type)}\n        </div>\n      )}\n\n      <h2 className=\"error-state__title\">{title}</h2>\n\n      <p className=\"error-state__message\">{message}</p>\n\n      {(primaryAction || secondaryAction) && (\n        <div className=\"error-state__actions\">\n          {primaryAction && (\n            <Button\n              variant=\"primary\"\n              onClick={handlePrimaryAction}\n              className=\"error-state__action-btn error-state__action-btn--primary\"\n            >\n              {primaryAction.label}\n            </Button>\n          )}\n\n          {secondaryAction && (\n            <Button\n              variant=\"secondary\"\n              onClick={handleSecondaryAction}\n              className=\"error-state__action-btn error-state__action-btn--secondary\"\n            >\n              {secondaryAction.label}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA8CA,SAAS,EAAa,GAAmC;CAGvD,OAAO,kBAAC,GAAD,EAAiB,MAAM,GAAK,CAAA;AACrC;AAKA,SAAgB,EAAW,EACzB,UAAO,WACP,UACA,YACA,kBACA,oBACA,eAAY,IACZ,cAAW,MACO;CAClB,IAAM,IAAsB,QAAkB;EAC5C,GAAe,QAAQ;CACzB,GAAG,CAAC,CAAa,CAAC,GAEZ,IAAwB,QAAkB;EAC9C,GAAiB,QAAQ;CAC3B,GAAG,CAAC,CAAe,CAAC,GAEd,IAAiB;EAAC;EAAe,gBAAgB;EAAQ;CAAS,CAAC,CACtE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAQ,aAAU;EAAvD,UAAA;GACG,KACC,kBAAC,OAAD;IAAK,WAAU;IAAoB,eAAY;IAC5C,UAAA,EAAa,CAAI;GACf,CAAA;GAGP,kBAAC,MAAD;IAAI,WAAU;IAAsB,UAAA;GAAU,CAAA;GAE9C,kBAAC,KAAD;IAAG,WAAU;IAAwB,UAAA;GAAW,CAAA;IAE9C,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAc;IACT,CAAA,GAGT,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAgB;IACX,CAAA,CAEP;;EAEJ;;AAET"}
+{"version":3,"file":"ErrorState2.js","names":[],"sources":["../../../src/components/ErrorState/ErrorState.tsx"],"sourcesContent":["/**\n * ErrorState Component\n *\n * Unified error state component with recovery actions.\n * Provides consistent error presentation across all pages with actionable buttons.\n *\n * Features:\n * - Three visual tones\n * - Primary and secondary action buttons\n * - Accessible (ARIA attributes, focus management)\n * - Dark/light theme support\n */\n\nimport type { ReactNode } from \"react\";\nimport { useCallback } from \"react\";\nimport { AlertCircleIcon } from \"../../icons/AlertCircleIcon\";\nimport { Button } from \"../Button\";\nimport \"./ErrorState.css\";\n\n/**\n * How the error reads, not what it is about.\n *\n * This prop used to be a union of five names: network, configuration, model,\n * permission, generic. Two of those, and \"model\" in particular, are one\n * product's categories rather than anything a shared component can reason\n * about, and all five resolved to three colours anyway: network and permission\n * were the same amber, model and generic the same red. A consumer decides\n * which of its own error categories reads as which tone.\n */\nexport type ErrorTone = \"danger\" | \"warning\" | \"accent\";\n\nexport interface ErrorAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ErrorStateProps {\n  /** How the error reads. Defaults to `danger`. */\n  tone?: ErrorTone;\n  /** Replaces the default alert icon. */\n  icon?: ReactNode;\n  /** Error title - main heading */\n  title: string;\n  /** Detailed error message */\n  message: string;\n  /** Primary action button (e.g., Retry, Go to Settings) */\n  primaryAction?: ErrorAction;\n  /** Secondary action button (e.g., View Logs, Report Issue) */\n  secondaryAction?: ErrorAction;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether to show error icon */\n  showIcon?: boolean;\n}\n\n/**\n * ErrorState Component\n */\nexport function ErrorState({\n  tone = \"danger\",\n  icon,\n  title,\n  message,\n  primaryAction,\n  secondaryAction,\n  className = \"\",\n  showIcon = true,\n}: ErrorStateProps) {\n  const handlePrimaryAction = useCallback(() => {\n    primaryAction?.onClick();\n  }, [primaryAction]);\n\n  const handleSecondaryAction = useCallback(() => {\n    secondaryAction?.onClick();\n  }, [secondaryAction]);\n\n  const containerClass = [\"error-state\", `error-state--${tone}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={containerClass} role=\"alert\" aria-live=\"polite\">\n      {showIcon && (\n        <div className=\"error-state__icon\" aria-hidden=\"true\">\n          {icon ?? <AlertCircleIcon size={48} />}\n        </div>\n      )}\n\n      <h2 className=\"error-state__title\">{title}</h2>\n\n      <p className=\"error-state__message\">{message}</p>\n\n      {(primaryAction || secondaryAction) && (\n        <div className=\"error-state__actions\">\n          {primaryAction && (\n            <Button\n              variant=\"primary\"\n              onClick={handlePrimaryAction}\n              className=\"error-state__action-btn error-state__action-btn--primary\"\n            >\n              {primaryAction.label}\n            </Button>\n          )}\n\n          {secondaryAction && (\n            <Button\n              variant=\"secondary\"\n              onClick={handleSecondaryAction}\n              className=\"error-state__action-btn error-state__action-btn--secondary\"\n            >\n              {secondaryAction.label}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA0DA,SAAgB,EAAW,EACzB,UAAO,UACP,SACA,UACA,YACA,kBACA,oBACA,eAAY,IACZ,cAAW,MACO;CAClB,IAAM,IAAsB,QAAkB;EAC5C,GAAe,QAAQ;CACzB,GAAG,CAAC,CAAa,CAAC,GAEZ,IAAwB,QAAkB;EAC9C,GAAiB,QAAQ;CAC3B,GAAG,CAAC,CAAe,CAAC,GAEd,IAAiB;EAAC;EAAe,gBAAgB;EAAQ;CAAS,CAAC,CACtE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAQ,aAAU;EAAvD,UAAA;GACG,KACC,kBAAC,OAAD;IAAK,WAAU;IAAoB,eAAY;IAC5C,UAAA,KAAQ,kBAAC,GAAD,EAAiB,MAAM,GAAK,CAAA;GAClC,CAAA;GAGP,kBAAC,MAAD;IAAI,WAAU;IAAsB,UAAA;GAAU,CAAA;GAE9C,kBAAC,KAAD;IAAG,WAAU;IAAwB,UAAA;GAAW,CAAA;IAE9C,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAc;IACT,CAAA,GAGT,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAgB;IACX,CAAA,CAEP;;EAEJ;;AAET"}

package/dist/components/ErrorState/index.d.ts

@@ -2,4 +2,4 @@
  * ErrorState Component Export
  */
 export { ErrorState } from './ErrorState';
-export type { ErrorStateProps, ErrorType, ErrorAction } from './ErrorState';
+export type { ErrorStateProps, ErrorTone, ErrorAction } from './ErrorState';

package/dist/components/PageHeader/PageHeader.d.ts

@@ -8,6 +8,19 @@ export interface PageHeaderProps {
     actions?: ReactNode;
     /** Error message to display below the header */
     error?: string | null;
+    /**
+     * Secondary line under the message, for the raw detail a server returned.
+     * Kept separate so the message stays readable when the detail is long.
+     */
+    errorDetail?: string | null;
+    /**
+     * Callback for the Retry button, rendered before the dismiss control when
+     * set. Dismissal is a pure dismissal and must not retry, which is why these
+     * are two props rather than one.
+     */
+    onRetry?: () => void;
+    /** Label for the Retry button. Default: "Retry" */
+    retryLabel?: string;
     /** Callback when error is dismissed */
     onErrorDismiss?: () => void;
     /** Additional CSS class names */
@@ -15,4 +28,4 @@ export interface PageHeaderProps {
     /** Accessible label for the error-dismiss button. Default: "Dismiss error" */
     dismissErrorLabel?: string;
 }
-export declare function PageHeader({ title, description, actions, error, onErrorDismiss, className, dismissErrorLabel, }: PageHeaderProps): import("react").JSX.Element;
+export declare function PageHeader({ title, description, actions, error, onErrorDismiss, className, errorDetail, onRetry, retryLabel, dismissErrorLabel, }: PageHeaderProps): import("react").JSX.Element;

package/dist/components/PageHeader/PageHeader2.js

@@ -1,43 +1,59 @@
+import { Button as e } from "../Button/Button2.js";
 /* empty css           */
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/PageHeader/PageHeader.tsx
-function n({ title: n, description: r, actions: i, error: a, onErrorDismiss: o, className: s = "", dismissErrorLabel: c = "Dismiss error" }) {
-	let l = ["page-header", s].filter(Boolean).join(" ");
-	return /* @__PURE__ */ t("header", {
-		className: l,
-		children: [/* @__PURE__ */ t("div", {
+function r({ title: r, description: i, actions: a, error: o, onErrorDismiss: s, className: c = "", errorDetail: l, onRetry: u, retryLabel: d = "Retry", dismissErrorLabel: f = "Dismiss error" }) {
+	let p = ["page-header", c].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("header", {
+		className: p,
+		children: [/* @__PURE__ */ n("div", {
 			className: "page-header__content",
-			children: [/* @__PURE__ */ t("div", {
+			children: [/* @__PURE__ */ n("div", {
 				className: "page-header__text",
-				children: [/* @__PURE__ */ e("h1", {
+				children: [/* @__PURE__ */ t("h1", {
 					className: "page-header__title",
-					children: n
-				}), r && /* @__PURE__ */ e("p", {
-					className: "page-header__description",
 					children: r
+				}), i && /* @__PURE__ */ t("p", {
+					className: "page-header__description",
+					children: i
 				})]
-			}), i && /* @__PURE__ */ e("div", {
+			}), a && /* @__PURE__ */ t("div", {
 				className: "page-header__actions",
-				children: i
+				children: a
 			})]
-		}), a && /* @__PURE__ */ t("div", {
+		}), o && /* @__PURE__ */ n("div", {
 			className: "page-header__error",
 			role: "alert",
-			children: [/* @__PURE__ */ e("span", {
-				className: "page-header__error-text",
-				children: a
-			}), o && /* @__PURE__ */ e("button", {
-				type: "button",
-				className: "page-header__error-dismiss",
-				onClick: o,
-				"aria-label": c,
-				children: "×"
+			children: [/* @__PURE__ */ n("div", {
+				className: "page-header__error-body",
+				children: [/* @__PURE__ */ t("span", {
+					className: "page-header__error-text",
+					children: o
+				}), l && /* @__PURE__ */ t("span", {
+					className: "page-header__error-detail",
+					children: l
+				})]
+			}), (u || s) && /* @__PURE__ */ n("div", {
+				className: "page-header__error-actions",
+				children: [u && /* @__PURE__ */ t(e, {
+					variant: "secondary",
+					size: "small",
+					className: "page-header__error-retry",
+					onClick: u,
+					children: d
+				}), s && /* @__PURE__ */ t("button", {
+					type: "button",
+					className: "page-header__error-dismiss",
+					onClick: s,
+					"aria-label": f,
+					children: "×"
+				})]
 			})]
 		})]
 	});
 }
 //#endregion
-export { n as PageHeader };
+export { r as PageHeader };
 
 //# sourceMappingURL=PageHeader2.js.map
 import "../../assets/components/PageHeader/PageHeader.css";

package/dist/components/PageHeader/PageHeader2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader2.js","names":[],"sources":["../../../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["/**\n * PageHeader Component\n *\n * Standardized page header with title, description, and optional action buttons.\n * Provides consistent styling and layout across all pages.\n *\n * @example\n * // Basic usage\n * <PageHeader\n *   title=\"Models\"\n *   description=\"Manage and browse your local models\"\n * />\n *\n * @example\n * // With action buttons\n * <PageHeader\n *   title=\"Settings\"\n *   description=\"Configure application settings\"\n *   actions={\n *     <>\n *       <Button variant=\"secondary\">Import</Button>\n *       <Button variant=\"primary\">Save</Button>\n *     </>\n *   }\n * />\n *\n * @example\n * // With error display\n * <PageHeader\n *   title=\"Engines\"\n *   description=\"Manage runtime engines\"\n *   error={error}\n *   onErrorDismiss={() => clearError()}\n * />\n */\n\nimport type { ReactNode } from \"react\";\nimport \"./PageHeader.css\";\n\nexport interface PageHeaderProps {\n  /** Page title - displayed as h1 */\n  title: string;\n  /** Page description - displayed below title */\n  description?: string;\n  /** Optional action buttons or elements on the right side */\n  actions?: ReactNode;\n  /** Error message to display below the header */\n  error?: string | null;\n  /** Callback when error is dismissed */\n  onErrorDismiss?: () => void;\n  /** Additional CSS class names */\n  className?: string;\n  /** Accessible label for the error-dismiss button. Default: \"Dismiss error\" */\n  dismissErrorLabel?: string;\n}\n\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  error,\n  onErrorDismiss,\n  className = \"\",\n  dismissErrorLabel = \"Dismiss error\",\n}: PageHeaderProps) {\n  const classes = [\"page-header\", className].filter(Boolean).join(\" \");\n\n  return (\n    <header className={classes}>\n      <div className=\"page-header__content\">\n        <div className=\"page-header__text\">\n          <h1 className=\"page-header__title\">{title}</h1>\n          {description && <p className=\"page-header__description\">{description}</p>}\n        </div>\n        {actions && <div className=\"page-header__actions\">{actions}</div>}\n      </div>\n      {error && (\n        <div className=\"page-header__error\" role=\"alert\">\n          <span className=\"page-header__error-text\">{error}</span>\n          {onErrorDismiss && (\n            <button\n              type=\"button\"\n              className=\"page-header__error-dismiss\"\n              onClick={onErrorDismiss}\n              aria-label={dismissErrorLabel}\n            >\n              ×\n            </button>\n          )}\n        </div>\n      )}\n    </header>\n  );\n}\n"],"mappings":";;;AAwDA,SAAgB,EAAW,EACzB,UACA,gBACA,YACA,UACA,mBACA,eAAY,IACZ,uBAAoB,mBACF;CAClB,IAAM,IAAU,CAAC,eAAe,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEnE,OACE,kBAAC,UAAD;EAAQ,WAAW;EAAnB,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;KAAsB,UAAA;IAAU,CAAA,GAC7C,KAAe,kBAAC,KAAD;KAAG,WAAU;KAA4B,UAAA;IAAe,CAAA,CACrE;GACJ,CAAA,GAAA,KAAW,kBAAC,OAAD;IAAK,WAAU;IAAwB,UAAA;GAAa,CAAA,CAC7D;EACJ,CAAA,GAAA,KACC,kBAAC,OAAD;GAAK,WAAU;GAAqB,MAAK;GAAzC,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAA2B,UAAA;GAAY,CAAA,GACtD,KACC,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS;IACT,cAAY;IACb,UAAA;GAEO,CAAA,CAEP;EAED,CAAA,CAAA;;AAEZ"}
+{"version":3,"file":"PageHeader2.js","names":[],"sources":["../../../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["/**\n * PageHeader Component\n *\n * Standardized page header with title, description, and optional action buttons.\n * Provides consistent styling and layout across all pages.\n *\n * @example\n * // Basic usage\n * <PageHeader\n *   title=\"Models\"\n *   description=\"Manage and browse your local models\"\n * />\n *\n * @example\n * // With action buttons\n * <PageHeader\n *   title=\"Settings\"\n *   description=\"Configure application settings\"\n *   actions={\n *     <>\n *       <Button variant=\"secondary\">Import</Button>\n *       <Button variant=\"primary\">Save</Button>\n *     </>\n *   }\n * />\n *\n * @example\n * // With error display\n * <PageHeader\n *   title=\"Engines\"\n *   description=\"Manage runtime engines\"\n *   error={error}\n *   onErrorDismiss={() => clearError()}\n * />\n */\n\nimport type { ReactNode } from \"react\";\nimport { Button } from \"../Button\";\nimport \"./PageHeader.css\";\n\nexport interface PageHeaderProps {\n  /** Page title - displayed as h1 */\n  title: string;\n  /** Page description - displayed below title */\n  description?: string;\n  /** Optional action buttons or elements on the right side */\n  actions?: ReactNode;\n  /** Error message to display below the header */\n  error?: string | null;\n  /**\n   * Secondary line under the message, for the raw detail a server returned.\n   * Kept separate so the message stays readable when the detail is long.\n   */\n  errorDetail?: string | null;\n  /**\n   * Callback for the Retry button, rendered before the dismiss control when\n   * set. Dismissal is a pure dismissal and must not retry, which is why these\n   * are two props rather than one.\n   */\n  onRetry?: () => void;\n  /** Label for the Retry button. Default: \"Retry\" */\n  retryLabel?: string;\n  /** Callback when error is dismissed */\n  onErrorDismiss?: () => void;\n  /** Additional CSS class names */\n  className?: string;\n  /** Accessible label for the error-dismiss button. Default: \"Dismiss error\" */\n  dismissErrorLabel?: string;\n}\n\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  error,\n  onErrorDismiss,\n  className = \"\",\n  errorDetail,\n  onRetry,\n  retryLabel = \"Retry\",\n  dismissErrorLabel = \"Dismiss error\",\n}: PageHeaderProps) {\n  const classes = [\"page-header\", className].filter(Boolean).join(\" \");\n\n  return (\n    <header className={classes}>\n      <div className=\"page-header__content\">\n        <div className=\"page-header__text\">\n          <h1 className=\"page-header__title\">{title}</h1>\n          {description && <p className=\"page-header__description\">{description}</p>}\n        </div>\n        {actions && <div className=\"page-header__actions\">{actions}</div>}\n      </div>\n      {error && (\n        <div className=\"page-header__error\" role=\"alert\">\n          <div className=\"page-header__error-body\">\n            <span className=\"page-header__error-text\">{error}</span>\n            {errorDetail && (\n              <span className=\"page-header__error-detail\">{errorDetail}</span>\n            )}\n          </div>\n          {(onRetry || onErrorDismiss) && (\n            <div className=\"page-header__error-actions\">\n              {onRetry && (\n                <Button\n                  variant=\"secondary\"\n                  size=\"small\"\n                  className=\"page-header__error-retry\"\n                  onClick={onRetry}\n                >\n                  {retryLabel}\n                </Button>\n              )}\n              {onErrorDismiss && (\n                <button\n                  type=\"button\"\n                  className=\"page-header__error-dismiss\"\n                  onClick={onErrorDismiss}\n                  aria-label={dismissErrorLabel}\n                >\n                  ×\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n    </header>\n  );\n}\n"],"mappings":";;;;AAsEA,SAAgB,EAAW,EACzB,UACA,gBACA,YACA,UACA,mBACA,eAAY,IACZ,gBACA,YACA,gBAAa,SACb,uBAAoB,mBACF;CAClB,IAAM,IAAU,CAAC,eAAe,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEnE,OACE,kBAAC,UAAD;EAAQ,WAAW;EAAnB,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;KAAsB,UAAA;IAAU,CAAA,GAC7C,KAAe,kBAAC,KAAD;KAAG,WAAU;KAA4B,UAAA;IAAe,CAAA,CACrE;GACJ,CAAA,GAAA,KAAW,kBAAC,OAAD;IAAK,WAAU;IAAwB,UAAA;GAAa,CAAA,CAC7D;EACJ,CAAA,GAAA,KACC,kBAAC,OAAD;GAAK,WAAU;GAAqB,MAAK;GAAzC,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;KAA2B,UAAA;IAAY,CAAA,GACtD,KACC,kBAAC,QAAD;KAAM,WAAU;KAA6B,UAAA;IAAkB,CAAA,CAE9D;GACH,CAAA,IAAA,KAAW,MACX,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,MAAK;KACL,WAAU;KACV,SAAS;KAER,UAAA;IACK,CAAA,GAET,KACC,kBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,SAAS;KACT,cAAY;KACb,UAAA;IAEO,CAAA,CAEP;GAEJ,CAAA,CAAA;EAED,CAAA,CAAA;;AAEZ"}

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

@@ -5,6 +5,8 @@ export interface SkeletonCardProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
+    /** Accessible name for each skeleton inside. Defaults to "Loading". */
+    loadingLabel?: string;
 }
 /**
  * SkeletonCard provides a loading placeholder for card components.
@@ -14,5 +16,5 @@ export interface SkeletonCardProps {
  * - compact: Smaller card with reduced padding
  * - stat: Statistics card layout
  */
-export declare function SkeletonCard({ variant, className, testId, }: SkeletonCardProps): import("react").JSX.Element;
+export declare function SkeletonCard({ variant, className, testId, loadingLabel, }: SkeletonCardProps): import("react").JSX.Element;
 export default SkeletonCard;

package/dist/components/Skeleton/SkeletonCard2.js

@@ -2,29 +2,32 @@ import { Skeleton as e } from "./Skeleton2.js";
 /* empty css             */
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonCard.tsx
-function i({ variant: i = "default", className: a = "", testId: o }) {
-	let s = [
+function i({ variant: i = "default", className: a = "", testId: o, loadingLabel: s }) {
+	let c = [
 		"skeleton-card",
 		`skeleton-card--${i}`,
 		a
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ n("div", {
-		className: s,
+		className: c,
 		"data-testid": o,
 		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,
 					width: "60%",
 					height: "16px"
 				}), /* @__PURE__ */ n(e, {
+					loadingLabel: s,
 					width: "40%",
 					height: "24px"
 				})]
@@ -33,6 +36,7 @@ function i({ variant: i = "default", className: a = "", testId: o }) {
 			/* @__PURE__ */ n("div", {
 				className: "skeleton-card__header",
 				children: /* @__PURE__ */ n(e, {
+					loadingLabel: s,
 					width: "70%",
 					height: "20px"
 				})
@@ -41,14 +45,17 @@ function i({ variant: i = "default", className: a = "", testId: o }) {
 				className: "skeleton-card__content",
 				children: [
 					/* @__PURE__ */ n(e, {
+						loadingLabel: s,
 						width: "100%",
 						height: "16px"
 					}),
 					/* @__PURE__ */ n(e, {
+						loadingLabel: s,
 						width: "90%",
 						height: "16px"
 					}),
 					/* @__PURE__ */ n(e, {
+						loadingLabel: s,
 						width: "80%",
 						height: "16px"
 					})
@@ -57,9 +64,11 @@ function i({ variant: i = "default", className: a = "", testId: o }) {
 			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"
 				})]

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}\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}: 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 width=\"48px\" height=\"48px\" variant=\"circle\" />\n            <div className=\"skeleton-card__header-text\">\n              <Skeleton width=\"60%\" height=\"16px\" />\n              <Skeleton width=\"40%\" height=\"24px\" />\n            </div>\n          </div>\n        </>\n      ) : (\n        <>\n          <div className=\"skeleton-card__header\">\n            <Skeleton width=\"70%\" height=\"20px\" />\n          </div>\n          <div className=\"skeleton-card__content\">\n            <Skeleton width=\"100%\" height=\"16px\" />\n            <Skeleton width=\"90%\" height=\"16px\" />\n            <Skeleton width=\"80%\" height=\"16px\" />\n          </div>\n          {variant !== \"compact\" && (\n            <div className=\"skeleton-card__footer\">\n              <Skeleton width=\"80px\" height=\"32px\" />\n              <Skeleton width=\"80px\" height=\"32px\" />\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonCard;\n"],"mappings":";;;;AAmCA,SAAgB,EAAa,EAC3B,aAAU,WACV,eAAY,IACZ,aACoB;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;IAAU,OAAM;IAAO,QAAO;IAAO,SAAQ;GAAU,CAAA,GACvD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA,GACrC,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA,CAClC;GACF,CAAA,CAAA;EACL,CAAA,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA;GAClC,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MAAU,OAAM;MAAO,QAAO;KAAQ,CAAA;KACtC,kBAAC,GAAD;MAAU,OAAM;MAAM,QAAO;KAAQ,CAAA;KACrC,kBAAC,GAAD;MAAU,OAAM;MAAM,QAAO;KAAQ,CAAA;IAClC;;GACJ,MAAY,aACX,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,GACtC,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,CACnC;;EAEP,EAAA,CAAA;CAED,CAAA;AAET"}
+{"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"}

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

@@ -9,6 +9,8 @@ export interface SkeletonRowProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
+    /** Accessible name for each skeleton inside. Defaults to "Loading". */
+    loadingLabel?: string;
 }
 /**
  * SkeletonRow provides a loading placeholder for list/table rows.
@@ -18,5 +20,5 @@ export interface SkeletonRowProps {
  * - Optional action buttons
  * - Multiple rows for lists
  */
-export declare function SkeletonRow({ showAvatar, showActions, count, className, testId, }: SkeletonRowProps): import("react").JSX.Element;
+export declare function SkeletonRow({ showAvatar, showActions, count, className, testId, loadingLabel, }: SkeletonRowProps): import("react").JSX.Element;
 export default SkeletonRow;

package/dist/components/Skeleton/SkeletonRow2.js

@@ -2,9 +2,9 @@ import { Skeleton as e } from "./Skeleton2.js";
 /* empty css            */
 import { Fragment as t, jsx as n, jsxs as r } 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 }) {
-	let l = Array.from({ length: o });
-	return /* @__PURE__ */ n(t, { children: l.map((t, o) => /* @__PURE__ */ r("div", {
+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,
 		role: "status",
@@ -13,6 +13,7 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s
 			i && /* @__PURE__ */ n("div", {
 				className: "skeleton-row__avatar",
 				children: /* @__PURE__ */ n(e, {
+					loadingLabel: l,
 					width: "40px",
 					height: "40px",
 					variant: "circle"
@@ -21,9 +22,11 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s
 			/* @__PURE__ */ r("div", {
 				className: "skeleton-row__content",
 				children: [/* @__PURE__ */ n(e, {
+					loadingLabel: l,
 					width: "25%",
 					height: "14px"
 				}), /* @__PURE__ */ n(e, {
+					loadingLabel: l,
 					width: "100%",
 					height: "16px"
 				})]
@@ -31,9 +34,11 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s
 			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"
 				})]

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}\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}: 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 width=\"40px\" height=\"40px\" variant=\"circle\" />\n            </div>\n          )}\n          <div className=\"skeleton-row__content\">\n            <Skeleton width=\"25%\" height=\"14px\" />\n            <Skeleton width=\"100%\" height=\"16px\" />\n          </div>\n          {showActions && (\n            <div className=\"skeleton-row__actions\">\n              <Skeleton width=\"32px\" height=\"32px\" />\n              <Skeleton width=\"32px\" height=\"32px\" />\n            </div>\n          )}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport default SkeletonRow;\n"],"mappings":";;;;AAuCA,SAAgB,EAAY,EAC1B,gBAAa,IACb,iBAAc,IACd,WAAQ,GACR,eAAY,IACZ,aACmB;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;KAAU,OAAM;KAAO,QAAO;KAAO,SAAQ;IAAU,CAAA;GACpD,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA,GACrC,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,CACnC;;GACJ,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,GACtC,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,CACnC;;EAEJ;CArBE,GAAA,CAqBF,CACN,EACD,CAAA;AAEN"}
+{"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"}

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

@@ -7,6 +7,8 @@ export interface SkeletonTextProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
+    /** Accessible name for each skeleton inside. Defaults to "Loading". */
+    loadingLabel?: string;
 }
 /**
  * SkeletonText provides a loading placeholder for text content.
@@ -16,5 +18,5 @@ export interface SkeletonTextProps {
  * - Configurable line spacing
  * - Accessible via aria-busy
  */
-export declare function SkeletonText({ lines, spacing, className, testId, }: SkeletonTextProps): import("react").JSX.Element;
+export declare function SkeletonText({ lines, spacing, className, testId, loadingLabel, }: SkeletonTextProps): import("react").JSX.Element;
 export default SkeletonText;

package/dist/components/Skeleton/SkeletonText2.js

@@ -2,18 +2,19 @@ import { Skeleton as e } from "./Skeleton2.js";
 /* empty css             */
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonText.tsx
-function n({ lines: n = 3, spacing: r = "normal", className: i = "", testId: a }) {
-	let o = [
+function n({ lines: n = 3, spacing: r = "normal", className: i = "", testId: a, loadingLabel: o }) {
+	let s = [
 		"skeleton-text",
 		`skeleton-text--${r}`,
 		i
-	].filter(Boolean).join(" "), s = Array.from({ length: n }, (e, t) => t === n - 1 ? "60%" : t % 2 == 0 ? "100%" : "95%");
+	].filter(Boolean).join(" "), c = Array.from({ length: n }, (e, t) => t === n - 1 ? "60%" : t % 2 == 0 ? "100%" : "95%");
 	return /* @__PURE__ */ t("div", {
-		className: o,
+		className: s,
 		"data-testid": a,
 		role: "status",
 		"aria-busy": "true",
-		children: s.map((n, r) => /* @__PURE__ */ t(e, {
+		children: c.map((n, r) => /* @__PURE__ */ t(e, {
+			loadingLabel: o,
 			width: n,
 			height: "1em",
 			variant: "text"

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonText.tsx"],"sourcesContent":["/**\n * SkeletonText Component\n *\n * Skeleton placeholder for text content.\n * Provides multiple lines with varying widths for natural appearance.\n *\n * @example\n * // Basic usage (3 lines)\n * <SkeletonText />\n *\n * @example\n * // Custom number of lines\n * <SkeletonText lines={5} />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonText.css\";\n\nexport interface SkeletonTextProps {\n  /** Number of text lines to display */\n  lines?: number;\n  /** Spacing between lines */\n  spacing?: \"compact\" | \"normal\" | \"relaxed\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n}\n\n/**\n * SkeletonText provides a loading placeholder for text content.\n *\n * Features:\n * - Multiple lines with varying widths\n * - Configurable line spacing\n * - Accessible via aria-busy\n */\nexport function SkeletonText({\n  lines = 3,\n  spacing = \"normal\",\n  className = \"\",\n  testId,\n}: SkeletonTextProps) {\n  const classNames = [\"skeleton-text\", `skeleton-text--${spacing}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  // Generate varying widths for natural appearance\n  const widths = Array.from({ length: lines }, (_, i) => {\n    if (i === lines - 1) {\n      // Last line is shorter\n      return \"60%\";\n    }\n    // Alternate between full and slightly shorter widths\n    return i % 2 === 0 ? \"100%\" : \"95%\";\n  });\n\n  return (\n    <div className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n      {widths.map((width, index) => (\n        <Skeleton key={index} width={width} height=\"1em\" variant=\"text\" />\n      ))}\n    </div>\n  );\n}\n\nexport default SkeletonText;\n"],"mappings":";;;;AAqCA,SAAgB,EAAa,EAC3B,WAAQ,GACR,aAAU,UACV,eAAY,IACZ,aACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAGL,IAAS,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAC3C,MAAM,IAAQ,IAET,QAGF,IAAI,KAAM,IAAI,SAAS,KAC/B;CAED,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,eAAa;EAAQ,MAAK;EAAS,aAAU;EACtE,UAAA,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD;GAA6B;GAAO,QAAO;GAAM,SAAQ;EAAQ,GAAlD,CAAkD,CAClE;CACE,CAAA;AAET"}
+{"version":3,"file":"SkeletonText2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonText.tsx"],"sourcesContent":["/**\n * SkeletonText Component\n *\n * Skeleton placeholder for text content.\n * Provides multiple lines with varying widths for natural appearance.\n *\n * @example\n * // Basic usage (3 lines)\n * <SkeletonText />\n *\n * @example\n * // Custom number of lines\n * <SkeletonText lines={5} />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonText.css\";\n\nexport interface SkeletonTextProps {\n  /** Number of text lines to display */\n  lines?: number;\n  /** Spacing between lines */\n  spacing?: \"compact\" | \"normal\" | \"relaxed\";\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 * SkeletonText provides a loading placeholder for text content.\n *\n * Features:\n * - Multiple lines with varying widths\n * - Configurable line spacing\n * - Accessible via aria-busy\n */\nexport function SkeletonText({\n  lines = 3,\n  spacing = \"normal\",\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonTextProps) {\n  const classNames = [\"skeleton-text\", `skeleton-text--${spacing}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  // Generate varying widths for natural appearance\n  const widths = Array.from({ length: lines }, (_, i) => {\n    if (i === lines - 1) {\n      // Last line is shorter\n      return \"60%\";\n    }\n    // Alternate between full and slightly shorter widths\n    return i % 2 === 0 ? \"100%\" : \"95%\";\n  });\n\n  return (\n    <div className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n      {widths.map((width, index) => (\n        <Skeleton\n          loadingLabel={loadingLabel}\n          key={index}\n          width={width}\n          height=\"1em\"\n          variant=\"text\"\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default SkeletonText;\n"],"mappings":";;;;AAuCA,SAAgB,EAAa,EAC3B,WAAQ,GACR,aAAU,UACV,eAAY,IACZ,WACA,mBACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAGL,IAAS,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAC3C,MAAM,IAAQ,IAET,QAGF,IAAI,KAAM,IAAI,SAAS,KAC/B;CAED,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,eAAa;EAAQ,MAAK;EAAS,aAAU;EACtE,UAAA,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD;GACgB;GAEP;GACP,QAAO;GACP,SAAQ;EACT,GAJM,CAIN,CACF;CACE,CAAA;AAET"}

package/dist/components/Tabs/Tabs.d.ts

@@ -1,26 +1,18 @@
 import { ReactNode } from 'react';
-import { TabTagType, TabTagLabels } from './tabTags';
-export type { TabTagType, TabTagLabels } from './tabTags';
-export { TAG_CONFIG } from './tabTags';
 export interface TabItem {
     id: string;
     label: string;
     content: ReactNode;
     /**
-     * Show a "Required" badge next to the tab label.
-     * @deprecated Use `tag="required"` instead. Kept for backward compatibility.
-     */
-    required?: boolean;
-    /**
-     * Guide tag displayed after the tab label as a small badge.
-     * When set, takes precedence over the `required` boolean.
-     */
-    tag?: TabTagType;
-    /**
-     * Optional extra trailing node rendered next to the tab label (e.g. a
-     * count badge). Distinct from `tag` (which uses a fixed preset). Use this
-     * when migrating segmented controls that rendered their own inline count
-     * pill alongside the label.
+     * Trailing node rendered next to the tab label: a count pill, a status
+     * badge, whatever the consumer's vocabulary calls for.
+     *
+     * This used to sit beside a `tag` prop that took one of four fixed names,
+     * required / recommended / beta / experimental, and rendered a Badge for
+     * it. Those are one product's guide vocabulary, and the arrangement had
+     * already split across the boundary: the badge variant lived here while the
+     * label text had to be passed in from the consumer's locale bundle. A
+     * consumer that wants that badge renders it here, and owns both halves.
      */
     labelExtra?: ReactNode;
     /**
@@ -98,10 +90,5 @@ export interface TabsProps {
     scrollLeftLabel?: string;
     /** Accessible label for the right scroll-arrow button. Default: "Scroll right" */
     scrollRightLabel?: string;
-    /**
-     * English defaults for every guide-tag badge label (required / recommended
-     * / beta / experimental). Override individual entries to translate them.
-     */
-    tagLabels?: TabTagLabels;
 }
-export declare function Tabs({ tabs, groups, defaultTab, activeTab: controlledTab, onTabChange, className, panelClassName, ariaLabel, showOverflowControls, showGroupLabels, overflowMode: explicitOverflowMode, variant, fillContainer, renderPanel, moreTabsLabel, selectTabLabel, scrollLeftLabel, scrollRightLabel, tagLabels, }: TabsProps): import("react").JSX.Element;
+export declare function Tabs({ tabs, groups, defaultTab, activeTab: controlledTab, onTabChange, className, panelClassName, ariaLabel, showOverflowControls, showGroupLabels, overflowMode: explicitOverflowMode, variant, fillContainer, renderPanel, moreTabsLabel, selectTabLabel, scrollLeftLabel, scrollRightLabel, }: TabsProps): import("react").JSX.Element;