@lablup/ui-common 0.1.0-alpha.0

package/dist/components/EmptyState/illustrations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"illustrations.js","names":[],"sources":["../../../src/components/EmptyState/illustrations.tsx"],"sourcesContent":["/**\n * EmptyState Illustrations\n *\n * SVG illustration components for different empty state contexts.\n * All illustrations are inline React components for optimal performance.\n * Each component is memoized to prevent unnecessary re-renders.\n */\n\nimport { memo } from \"react\";\n\ninterface IllustrationProps {\n  className?: string;\n}\n\n/**\n * Chat illustration - Speech bubbles with sparkles\n */\nexport const ChatIllustration = memo(function ChatIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Chat bubble */}\n      <g className=\"illustration-bubble\">\n        <rect\n          x=\"20\"\n          y=\"30\"\n          width=\"70\"\n          height=\"50\"\n          rx=\"12\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M40 80 L50 70 L90 70\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n        {/* Message lines */}\n        <line\n          x1=\"35\"\n          y1=\"45\"\n          x2=\"75\"\n          y2=\"45\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"35\"\n          y1=\"55\"\n          x2=\"65\"\n          y2=\"55\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n      {/* Sparkles */}\n      <g className=\"illustration-sparkle\">\n        <path\n          d=\"M95 25 L97 32 L104 34 L97 36 L95 43 L93 36 L86 34 L93 32 Z\"\n          fill=\"currentColor\"\n        />\n        <path\n          d=\"M25 15 L26 19 L30 20 L26 21 L25 25 L24 21 L20 20 L24 19 Z\"\n          fill=\"currentColor\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Models illustration - Package/download box\n */\nexport const ModelsIllustration = memo(function ModelsIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* 3D box representing model package */}\n      <g className=\"illustration-box\">\n        <path\n          d=\"M60 20 L95 40 L95 80 L60 100 L25 80 L25 40 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n          strokeLinejoin=\"round\"\n        />\n        <path\n          d=\"M60 20 L60 100\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <path\n          d=\"M25 40 L60 60 L95 40\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n      {/* Download arrow */}\n      <g className=\"illustration-arrow\">\n        <path\n          d=\"M60 45 L60 75\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <path\n          d=\"M52 67 L60 75 L68 67\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Creations illustration - Gallery frame\n */\nexport const CreationsIllustration = memo(function CreationsIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Gallery frame */}\n      <rect\n        x=\"20\"\n        y=\"25\"\n        width=\"80\"\n        height=\"70\"\n        rx=\"8\"\n        stroke=\"currentColor\"\n        strokeWidth=\"3\"\n        fill=\"none\"\n      />\n      {/* Image placeholder with mountain and sun */}\n      <g className=\"illustration-image\">\n        <circle cx=\"45\" cy=\"45\" r=\"8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path\n          d=\"M20 80 L40 60 L60 75 L85 50 L100 65 L100 95 L20 95 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinejoin=\"round\"\n          fill=\"none\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Benchmark illustration - Speedometer\n */\nexport const BenchmarkIllustration = memo(function BenchmarkIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 512 512\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Speedometer body */}\n      <path d=\"M92.231,401.523l-24.69,12.044C49.475,381.325,40,345.338,40,308.499c0-26.991,4.977-52.842,14.06-76.683l28.291,13.57c2.79,1.338,5.735,1.972,8.636,1.972c7.453,0,14.608-4.185,18.047-11.355c4.776-9.959,0.576-21.906-9.384-26.683l-27.932-13.398c34.717-56.62,94.784-96.095,164.283-102.505v30.081c0,11.046,8.954,20,20,20c11.046,0,20-8.954,20-20V93.402c23.828,2.169,46.884,8.237,68.771,18.117c10.065,4.545,21.912,0.066,26.457-9.999c4.545-10.068,0.068-21.913-10-26.458C328.063,60.091,292.659,52.499,256,52.499c-68.38,0-132.667,26.628-181.02,74.98C26.629,175.832,0,240.119,0,308.499c0,50.53,14.998,99.674,43.373,142.115c3.822,5.715,10.141,8.886,16.639,8.886c2.954,0,5.946-0.655,8.757-2.026l41-20c9.928-4.843,14.05-16.816,9.207-26.744C114.133,400.803,102.159,396.682,92.231,401.523z\" />\n      <path d=\"M489.436,203.271c-4.544-10.067-16.387-14.547-26.458-10c-10.067,4.545-14.544,16.39-9.999,26.457C465.601,247.686,472,277.553,472,308.499c0,36.894-9.506,72.939-27.625,105.218l-25.777-12.275c-9.971-4.748-21.906-0.515-26.656,9.459c-4.749,9.972-0.514,21.907,9.459,26.656l42,20c2.763,1.315,5.692,1.944,8.588,1.944c6.5,0,12.82-3.175,16.637-8.886C497.002,408.173,512,359.029,512,308.499C512,271.84,504.408,236.436,489.436,203.271z\" />\n      {/* Speedometer needle - animated */}\n      <g className=\"illustration-needle\">\n        <path d=\"M435.143,129.356c-6.796-6.795-17.463-7.797-25.407-2.384c-29.926,20.398-180.03,122.969-196.162,139.1c-23.394,23.395-23.394,61.459,0,84.854c11.697,11.696,27.063,17.545,42.427,17.545c15.364,0,30.729-5.849,42.427-17.545c16.131-16.132,118.701-166.236,139.1-196.162C442.939,146.821,441.938,136.153,435.143,129.356z M270.142,322.641c-7.797,7.799-20.486,7.799-28.283,0c-7.798-7.797-7.799-20.482-0.004-28.28c6.268-6.194,48.885-36.588,101.319-73.035C306.728,273.76,276.334,316.375,270.142,322.641z\" />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Logs illustration - Document stack\n */\nexport const LogsIllustration = memo(function LogsIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Stacked documents */}\n      <g className=\"illustration-docs\">\n        {/* Back document */}\n        <rect\n          x=\"35\"\n          y=\"20\"\n          width=\"60\"\n          height=\"75\"\n          rx=\"4\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          fill=\"none\"\n          opacity=\"0.4\"\n        />\n        {/* Middle document */}\n        <rect\n          x=\"30\"\n          y=\"25\"\n          width=\"60\"\n          height=\"75\"\n          rx=\"4\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          fill=\"none\"\n          opacity=\"0.6\"\n        />\n        {/* Front document */}\n        <rect\n          x=\"25\"\n          y=\"30\"\n          width=\"60\"\n          height=\"75\"\n          rx=\"4\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n        />\n        {/* Text lines */}\n        <line\n          x1=\"35\"\n          y1=\"45\"\n          x2=\"70\"\n          y2=\"45\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"35\"\n          y1=\"55\"\n          x2=\"75\"\n          y2=\"55\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"35\"\n          y1=\"65\"\n          x2=\"65\"\n          y2=\"65\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"35\"\n          y1=\"75\"\n          x2=\"70\"\n          y2=\"75\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Statistics illustration - Chart placeholder\n */\nexport const StatisticsIllustration = memo(function StatisticsIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Chart axes */}\n      <g className=\"illustration-axes\">\n        <line\n          x1=\"25\"\n          y1=\"20\"\n          x2=\"25\"\n          y2=\"90\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"25\"\n          y1=\"90\"\n          x2=\"95\"\n          y2=\"90\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n      {/* Bar chart */}\n      <g className=\"illustration-bars\">\n        <rect\n          x=\"35\"\n          y=\"60\"\n          width=\"10\"\n          height=\"25\"\n          rx=\"2\"\n          fill=\"currentColor\"\n          opacity=\"0.6\"\n        />\n        <rect\n          x=\"50\"\n          y=\"45\"\n          width=\"10\"\n          height=\"40\"\n          rx=\"2\"\n          fill=\"currentColor\"\n          opacity=\"0.8\"\n        />\n        <rect\n          x=\"65\"\n          y=\"55\"\n          width=\"10\"\n          height=\"30\"\n          rx=\"2\"\n          fill=\"currentColor\"\n          opacity=\"0.7\"\n        />\n        <rect x=\"80\" y=\"35\" width=\"10\" height=\"50\" rx=\"2\" fill=\"currentColor\" />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Error illustration - Warning/error state\n */\nexport const ErrorIllustration = memo(function ErrorIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Triangle warning */}\n      <g className=\"illustration-warning\">\n        <path\n          d=\"M60 25 L100 95 L20 95 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n          strokeLinejoin=\"round\"\n        />\n        {/* Exclamation mark */}\n        <line\n          x1=\"60\"\n          y1=\"50\"\n          x2=\"60\"\n          y2=\"70\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n        />\n        <circle cx=\"60\" cy=\"80\" r=\"2.5\" fill=\"currentColor\" />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Text illustration - Document with bookmark\n */\nexport const TextIllustration = memo(function TextIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Document */}\n      <g className=\"illustration-docs\">\n        <rect\n          x=\"25\"\n          y=\"15\"\n          width=\"60\"\n          height=\"80\"\n          rx=\"6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n        />\n        {/* Text lines */}\n        <line\n          x1=\"37\"\n          y1=\"35\"\n          x2=\"73\"\n          y2=\"35\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"37\"\n          y1=\"47\"\n          x2=\"68\"\n          y2=\"47\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"37\"\n          y1=\"59\"\n          x2=\"73\"\n          y2=\"59\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"37\"\n          y1=\"71\"\n          x2=\"58\"\n          y2=\"71\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n      {/* Bookmark */}\n      <g className=\"illustration-sparkle\">\n        <path\n          d=\"M78 10 L78 38 L90 30 L102 38 L102 10 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          fill=\"none\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Schedule illustration - Calendar with clock\n */\nexport const ScheduleIllustration = memo(function ScheduleIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Calendar body */}\n      <g className=\"illustration-docs\">\n        <rect\n          x=\"20\"\n          y=\"30\"\n          width=\"65\"\n          height=\"65\"\n          rx=\"8\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n        />\n        {/* Calendar header bar */}\n        <line x1=\"20\" y1=\"48\" x2=\"85\" y2=\"48\" stroke=\"currentColor\" strokeWidth=\"2.5\" />\n        {/* Calendar pins */}\n        <line\n          x1=\"38\"\n          y1=\"25\"\n          x2=\"38\"\n          y2=\"35\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"67\"\n          y1=\"25\"\n          x2=\"67\"\n          y2=\"35\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n        />\n        {/* Calendar grid dots */}\n        <circle cx=\"35\" cy=\"58\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n        <circle cx=\"52\" cy=\"58\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n        <circle cx=\"35\" cy=\"72\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n        <circle cx=\"52\" cy=\"72\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n        <circle cx=\"35\" cy=\"86\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n      </g>\n      {/* Clock overlay */}\n      <g className=\"illustration-sparkle\">\n        <circle\n          cx=\"82\"\n          cy=\"80\"\n          r=\"20\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          fill=\"var(--token-colorBgContainer, #fff)\"\n        />\n        <line\n          x1=\"82\"\n          y1=\"80\"\n          x2=\"82\"\n          y2=\"70\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"82\"\n          y1=\"80\"\n          x2=\"92\"\n          y2=\"80\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <circle cx=\"82\" cy=\"80\" r=\"2\" fill=\"currentColor\" />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Generic illustration - Placeholder icon\n */\nexport const GenericIllustration = memo(function GenericIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Simple folder/file icon */}\n      <g className=\"illustration-folder\">\n        <path\n          d=\"M25 35 L25 85 C25 90 28 92 33 92 L87 92 C92 92 95 90 95 85 L95 45 C95 40 92 38 87 38 L60 38 L52 28 L33 28 C28 28 25 30 25 35 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n    </svg>\n  );\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+/**
+ * EmptyState Component - Barrel Export
+ */
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps, EmptyStateAction, EmptyStateSecondaryAction, IllustrationType, } from './EmptyState';

package/dist/components/EmptyState/index.js

@@ -0,0 +1,2 @@
+import { EmptyState as e } from "./EmptyState2.js";
+export { e as EmptyState };

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

@@ -0,0 +1,25 @@
+export type ErrorType = "network" | "configuration" | "model" | "permission" | "generic";
+export interface ErrorAction {
+    label: string;
+    onClick: () => void;
+}
+export interface ErrorStateProps {
+    /** Error type determines icon and default styling */
+    type?: ErrorType;
+    /** Error title - main heading */
+    title: string;
+    /** Detailed error message */
+    message: string;
+    /** Primary action button (e.g., Retry, Go to Settings) */
+    primaryAction?: ErrorAction;
+    /** Secondary action button (e.g., View Logs, Report Issue) */
+    secondaryAction?: ErrorAction;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether to show error icon */
+    showIcon?: boolean;
+}
+/**
+ * ErrorState Component
+ */
+export declare function ErrorState({ type, title, message, primaryAction, secondaryAction, className, showIcon, }: ErrorStateProps): import("react").JSX.Element;

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

@@ -0,0 +1,46 @@
+/**
+ * ErrorState Component Examples
+ *
+ * Demonstrates all error type variants and usage patterns.
+ * This file is for documentation purposes and shows how to use the component.
+ */
+/**
+ * Example: Network Error
+ * Used when connection to server fails
+ */
+export declare function NetworkErrorExample(): import("react").JSX.Element;
+/**
+ * Example: Configuration Error
+ * Used when there are configuration/settings issues
+ */
+export declare function ConfigurationErrorExample(): import("react").JSX.Element;
+/**
+ * Example: Model Error
+ * Used when model loading or access fails
+ */
+export declare function ModelErrorExample(): import("react").JSX.Element;
+/**
+ * Example: Permission Error
+ * Used when access is denied
+ */
+export declare function PermissionErrorExample(): import("react").JSX.Element;
+/**
+ * Example: Generic Error
+ * Used as fallback for unknown errors
+ */
+export declare function GenericErrorExample(): import("react").JSX.Element;
+/**
+ * Example: Minimal Error (no actions)
+ * Used when no user actions are available
+ */
+export declare function MinimalErrorExample(): import("react").JSX.Element;
+/**
+ * Example: Error without icon
+ * Used in compact layouts where space is limited
+ */
+export declare function CompactErrorExample(): import("react").JSX.Element;
+/**
+ * Example: Custom styled error
+ * Shows how to add custom styling
+ */
+export declare function CustomStyledErrorExample(): import("react").JSX.Element;

package/dist/components/ErrorState/ErrorState2.js

@@ -0,0 +1,58 @@
+import { Button as e } from "../Button/Button2.js";
+import { AlertCircleIcon as t } from "../../icons/AlertCircleIcon.js";
+/* empty css           */
+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(() => {
+		l?.onClick();
+	}, [l]), m = [
+		"error-state",
+		`error-state--${t}`,
+		u
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ i("div", {
+		className: m,
+		role: "alert",
+		"aria-live": "polite",
+		children: [
+			d && /* @__PURE__ */ r("div", {
+				className: "error-state__icon",
+				"aria-hidden": "true",
+				children: a(t)
+			}),
+			/* @__PURE__ */ r("h2", {
+				className: "error-state__title",
+				children: o
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "error-state__message",
+				children: s
+			}),
+			(c || l) && /* @__PURE__ */ i("div", {
+				className: "error-state__actions",
+				children: [c && /* @__PURE__ */ r(e, {
+					variant: "primary",
+					onClick: f,
+					className: "error-state__action-btn error-state__action-btn--primary",
+					children: c.label
+				}), l && /* @__PURE__ */ r(e, {
+					variant: "secondary",
+					onClick: p,
+					className: "error-state__action-btn error-state__action-btn--secondary",
+					children: l.label
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { o as ErrorState };
+
+//# sourceMappingURL=ErrorState2.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,5 @@
+/**
+ * ErrorState Component Export
+ */
+export { ErrorState } from './ErrorState';
+export type { ErrorStateProps, ErrorType, ErrorAction } from './ErrorState';

package/dist/components/ErrorState/index.js

@@ -0,0 +1,2 @@
+import { ErrorState as e } from "./ErrorState2.js";
+export { e as ErrorState };

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export interface PageHeaderProps {
+    /** Page title - displayed as h1 */
+    title: string;
+    /** Page description - displayed below title */
+    description?: string;
+    /** Optional action buttons or elements on the right side */
+    actions?: ReactNode;
+    /** Error message to display below the header */
+    error?: string | null;
+    /** Callback when error is dismissed */
+    onErrorDismiss?: () => void;
+    /** Additional CSS class names */
+    className?: string;
+    /** 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;

package/dist/components/PageHeader/PageHeader2.js

@@ -0,0 +1,42 @@
+/* empty css           */
+import { jsx as e, jsxs as t } 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", {
+			className: "page-header__content",
+			children: [/* @__PURE__ */ t("div", {
+				className: "page-header__text",
+				children: [/* @__PURE__ */ e("h1", {
+					className: "page-header__title",
+					children: n
+				}), r && /* @__PURE__ */ e("p", {
+					className: "page-header__description",
+					children: r
+				})]
+			}), i && /* @__PURE__ */ e("div", {
+				className: "page-header__actions",
+				children: i
+			})]
+		}), a && /* @__PURE__ */ t("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: "×"
+			})]
+		})]
+	});
+}
+//#endregion
+export { n as PageHeader };
+
+//# sourceMappingURL=PageHeader2.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps } from './PageHeader';

package/dist/components/PageHeader/index.js

@@ -0,0 +1,2 @@
+import { PageHeader as e } from "./PageHeader2.js";
+export { e as PageHeader };

package/dist/components/PageLayout/PageLayout.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type PageLayoutVariant = "standard" | "wide" | "full";
+export interface PageLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /** Page content */
+    children: ReactNode;
+    /** Layout width variant: "standard" (900px), "wide" (1400px), or "full" (no max-width) */
+    variant?: PageLayoutVariant;
+    /** Additional CSS class names */
+    className?: string;
+}
+export declare function PageLayout({ children, variant, className, ...props }: PageLayoutProps): import("react").JSX.Element;

package/dist/components/PageLayout/PageLayout2.js

@@ -0,0 +1,19 @@
+/* empty css           */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/PageLayout/PageLayout.tsx
+function t({ children: t, variant: n = "standard", className: r = "", ...i }) {
+	let a = [
+		"page-layout",
+		`page-layout--${n}`,
+		r
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ e("div", {
+		className: a,
+		...i,
+		children: t
+	});
+}
+//#endregion
+export { t as PageLayout };
+
+//# sourceMappingURL=PageLayout2.js.map

package/dist/components/PageLayout/PageLayout2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout2.js","names":[],"sources":["../../../src/components/PageLayout/PageLayout.tsx"],"sourcesContent":["/**\n * PageLayout Component\n *\n * Standardized layout wrapper for all pages in the application.\n * Provides consistent max-width, centering, and spacing.\n *\n * @example\n * // Standard page (900px max-width)\n * <PageLayout>\n *   <PageHeader title=\"Models\" description=\"Manage your models\" />\n *   <Content />\n * </PageLayout>\n *\n * @example\n * // Wide page (1400px max-width)\n * <PageLayout variant=\"wide\">\n *   <PageHeader title=\"Dashboard\" description=\"Overview\" />\n *   <Content />\n * </PageLayout>\n *\n * @example\n * // Full-width page (no max-width clamp). Useful for pages that own their\n * // own internal layout chrome (e.g. a left sidebar) and need to span the\n * // entire available viewport width without centering or right-side gutter.\n * // Note: the mobile padding fallback is also disabled on `--full` so the\n * // page's own internal padding controls horizontal spacing.\n * <PageLayout variant=\"full\">\n *   <Content />\n * </PageLayout>\n */\n\nimport type { ReactNode, HTMLAttributes } from \"react\";\nimport \"./PageLayout.css\";\n\nexport type PageLayoutVariant = \"standard\" | \"wide\" | \"full\";\n\nexport interface PageLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /** Page content */\n  children: ReactNode;\n  /** Layout width variant: \"standard\" (900px), \"wide\" (1400px), or \"full\" (no max-width) */\n  variant?: PageLayoutVariant;\n  /** Additional CSS class names */\n  className?: string;\n}\n\nexport function PageLayout({\n  children,\n  variant = \"standard\",\n  className = \"\",\n  ...props\n}: PageLayoutProps) {\n  const classes = [\"page-layout\", `page-layout--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AA6CA,SAAgB,EAAW,EACzB,aACA,aAAU,YACV,eAAY,IACZ,GAAG,KACe;CAClB,IAAM,IAAU;EAAC;EAAe,gBAAgB;EAAW;CAAS,CAAC,CAClE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAW;EAAS,GAAI;EAC1B;CACE,CAAA;AAET"}

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

@@ -0,0 +1,2 @@
+export { PageLayout } from './PageLayout';
+export type { PageLayoutProps, PageLayoutVariant } from './PageLayout';

package/dist/components/PageLayout/index.js

@@ -0,0 +1,2 @@
+import { PageLayout as e } from "./PageLayout2.js";
+export { e as PageLayout };

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,22 @@
+export type ProgressBarVariant = "primary" | "success" | "error" | "warning";
+export type ProgressBarSize = "sm" | "md" | "lg";
+export interface ProgressBarProps {
+    /** Progress value (0-100). Pass null for indeterminate state. */
+    value: number | null;
+    /** Color variant */
+    variant?: ProgressBarVariant;
+    /** Size of the progress bar */
+    size?: ProgressBarSize;
+    /** Whether to show percentage label */
+    showLabel?: boolean;
+    /** Custom label text (overrides percentage) */
+    label?: string;
+    /** Additional CSS class names */
+    className?: string;
+    /** Whether to animate the progress fill transition */
+    animated?: boolean;
+    /** Aria label for accessibility */
+    ariaLabel?: string;
+}
+export declare function ProgressBar({ value, variant, size, showLabel, label, className, animated, ariaLabel, }: ProgressBarProps): import("react").JSX.Element;
+export default ProgressBar;

package/dist/components/ProgressBar/ProgressBar2.js

@@ -0,0 +1,36 @@
+/* empty css            */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/ProgressBar/ProgressBar.tsx
+function n({ value: n, variant: r = "primary", size: i = "md", showLabel: a = !1, label: o, className: s = "", animated: c = !0, ariaLabel: l }) {
+	let u = n === null, d = n === null ? 0 : Math.max(0, Math.min(100, n)), f = [
+		"progress-bar",
+		`progress-bar--${r}`,
+		`progress-bar--${i}`,
+		u ? "progress-bar--indeterminate" : "",
+		c ? "progress-bar--animated" : "",
+		s
+	].filter(Boolean).join(" "), p = o ?? (a && !u ? `${d.toFixed(0)}%` : null);
+	return /* @__PURE__ */ t("div", {
+		className: "progress-bar-wrapper",
+		children: [/* @__PURE__ */ e("div", {
+			className: f,
+			role: "progressbar",
+			"aria-valuenow": u ? void 0 : d,
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-label": l,
+			"aria-busy": u,
+			children: /* @__PURE__ */ e("div", {
+				className: "progress-bar__fill",
+				style: u ? void 0 : { width: `${String(d)}%` }
+			})
+		}), p && /* @__PURE__ */ e("span", {
+			className: "progress-bar__label",
+			children: p
+		})]
+	});
+}
+//#endregion
+export { n as ProgressBar, n as default };
+
+//# sourceMappingURL=ProgressBar2.js.map

package/dist/components/ProgressBar/ProgressBar2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar2.js","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["/**\n * ProgressBar Component\n *\n * A reusable progress bar component that supports both determinate and\n * indeterminate states, with multiple color variants and sizes.\n *\n * @example\n * ```tsx\n * // Determinate progress\n * <ProgressBar value={75} />\n *\n * // Indeterminate (loading state)\n * <ProgressBar value={null} />\n *\n * // With variant and label\n * <ProgressBar value={100} variant=\"success\" showLabel />\n * ```\n */\n\nimport \"./ProgressBar.css\";\n\nexport type ProgressBarVariant = \"primary\" | \"success\" | \"error\" | \"warning\";\nexport type ProgressBarSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ProgressBarProps {\n  /** Progress value (0-100). Pass null for indeterminate state. */\n  value: number | null;\n  /** Color variant */\n  variant?: ProgressBarVariant;\n  /** Size of the progress bar */\n  size?: ProgressBarSize;\n  /** Whether to show percentage label */\n  showLabel?: boolean;\n  /** Custom label text (overrides percentage) */\n  label?: string;\n  /** Additional CSS class names */\n  className?: string;\n  /** Whether to animate the progress fill transition */\n  animated?: boolean;\n  /** Aria label for accessibility */\n  ariaLabel?: string;\n}\n\nexport function ProgressBar({\n  value,\n  variant = \"primary\",\n  size = \"md\",\n  showLabel = false,\n  label,\n  className = \"\",\n  animated = true,\n  ariaLabel,\n}: ProgressBarProps) {\n  const isIndeterminate = value === null;\n  const clampedValue = value === null ? 0 : Math.max(0, Math.min(100, value));\n\n  const containerClasses = [\n    \"progress-bar\",\n    `progress-bar--${variant}`,\n    `progress-bar--${size}`,\n    isIndeterminate ? \"progress-bar--indeterminate\" : \"\",\n    animated ? \"progress-bar--animated\" : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const displayLabel =\n    label ?? (showLabel && !isIndeterminate ? `${clampedValue.toFixed(0)}%` : null);\n\n  return (\n    <div className=\"progress-bar-wrapper\">\n      <div\n        className={containerClasses}\n        role=\"progressbar\"\n        aria-valuenow={isIndeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={ariaLabel}\n        aria-busy={isIndeterminate}\n      >\n        <div\n          className=\"progress-bar__fill\"\n          style={isIndeterminate ? undefined : { width: `${String(clampedValue)}%` }}\n        />\n      </div>\n      {displayLabel && <span className=\"progress-bar__label\">{displayLabel}</span>}\n    </div>\n  );\n}\n\nexport default ProgressBar;\n"],"mappings":";;;AA2CA,SAAgB,EAAY,EAC1B,UACA,aAAU,WACV,UAAO,MACP,eAAY,IACZ,UACA,eAAY,IACZ,cAAW,IACX,gBACmB;CACnB,IAAM,IAAkB,MAAU,MAC5B,IAAe,MAAU,OAAO,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,CAAK,CAAC,GAEpE,IAAmB;EACvB;EACA,iBAAiB;EACjB,iBAAiB;EACjB,IAAkB,gCAAgC;EAClD,IAAW,2BAA2B;EACtC;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAEL,IACJ,MAAU,KAAa,CAAC,IAAkB,GAAG,EAAa,QAAQ,CAAC,EAAE,KAAK;CAE5E,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAAC,OAAD;GACE,WAAW;GACX,MAAK;GACL,iBAAe,IAAkB,KAAA,IAAY;GAC7C,iBAAe;GACf,iBAAe;GACf,cAAY;GACZ,aAAW;GAEX,UAAA,kBAAC,OAAD;IACE,WAAU;IACV,OAAO,IAAkB,KAAA,IAAY,EAAE,OAAO,GAAG,OAAO,CAAY,EAAE,GAAG;GAC1E,CAAA;EACE,CAAA,GACJ,KAAgB,kBAAC,QAAD;GAAM,WAAU;GAAuB,UAAA;EAAmB,CAAA,CACxE;;AAET"}

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

@@ -0,0 +1,2 @@
+export { ProgressBar, default } from './ProgressBar';
+export type { ProgressBarProps, ProgressBarVariant, ProgressBarSize, } from './ProgressBar';

package/dist/components/ProgressBar/index.js

@@ -0,0 +1,2 @@
+import { ProgressBar as e } from "./ProgressBar2.js";
+export { e as ProgressBar, e as default };

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

@@ -0,0 +1,25 @@
+export interface SkeletonProps {
+    /** Width of the skeleton (CSS value) */
+    width?: string;
+    /** Height of the skeleton (CSS value) */
+    height?: string;
+    /** Visual variant */
+    variant?: "rect" | "circle" | "text";
+    /** Additional CSS class names */
+    className?: string;
+    /** Test ID for testing */
+    testId?: string;
+    /** Accessible label announced while the skeleton is visible. Default: "Loading" */
+    loadingLabel?: string;
+}
+/**
+ * Skeleton provides a loading placeholder with shimmer animation.
+ *
+ * Features:
+ * - Shimmer effect using CSS animation
+ * - Reduced motion preference support
+ * - Multiple shape variants
+ * - Accessible via aria-busy and aria-label
+ */
+export declare function Skeleton({ width, height, variant, className, testId, loadingLabel, }: SkeletonProps): import("react").JSX.Element;
+export default Skeleton;

package/dist/components/Skeleton/Skeleton2.js

@@ -0,0 +1,26 @@
+/* empty css         */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/Skeleton/Skeleton.tsx
+function t({ width: t = "100%", height: n = "20px", variant: r = "rect", className: i = "", testId: a, loadingLabel: o = "Loading" }) {
+	let s = [
+		"skeleton",
+		`skeleton--${r}`,
+		i
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ e("div", {
+		className: s,
+		style: {
+			width: t,
+			height: n
+		},
+		role: "status",
+		"aria-busy": "true",
+		"aria-label": o,
+		"data-testid": a,
+		children: /* @__PURE__ */ e("span", { className: "skeleton__shimmer" })
+	});
+}
+//#endregion
+export { t as Skeleton, t as default };
+
+//# sourceMappingURL=Skeleton2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton2.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["/**\n * Skeleton Component\n *\n * Base skeleton component for loading states.\n * Provides a shimmer animation effect that respects prefers-reduced-motion.\n *\n * @example\n * // Basic usage\n * <Skeleton width=\"100%\" height=\"20px\" />\n *\n * @example\n * // Circle skeleton\n * <Skeleton width=\"40px\" height=\"40px\" variant=\"circle\" />\n */\n\nimport \"./Skeleton.css\";\n\nexport interface SkeletonProps {\n  /** Width of the skeleton (CSS value) */\n  width?: string;\n  /** Height of the skeleton (CSS value) */\n  height?: string;\n  /** Visual variant */\n  variant?: \"rect\" | \"circle\" | \"text\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible label announced while the skeleton is visible. Default: \"Loading\" */\n  loadingLabel?: string;\n}\n\n/**\n * Skeleton provides a loading placeholder with shimmer animation.\n *\n * Features:\n * - Shimmer effect using CSS animation\n * - Reduced motion preference support\n * - Multiple shape variants\n * - Accessible via aria-busy and aria-label\n */\nexport function Skeleton({\n  width = \"100%\",\n  height = \"20px\",\n  variant = \"rect\",\n  className = \"\",\n  testId,\n  loadingLabel = \"Loading\",\n}: SkeletonProps) {\n  const classNames = [\"skeleton\", `skeleton--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      style={{ width, height }}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel}\n      data-testid={testId}\n    >\n      <span className=\"skeleton__shimmer\" />\n    </div>\n  );\n}\n\nexport default Skeleton;\n"],"mappings":";;;AAyCA,SAAgB,EAAS,EACvB,WAAQ,QACR,YAAS,QACT,aAAU,QACV,eAAY,IACZ,WACA,kBAAe,aACC;CAChB,IAAM,IAAa;EAAC;EAAY,aAAa;EAAW;CAAS,CAAC,CAC/D,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,OAAO;GAAE;GAAO;EAAO;EACvB,MAAK;EACL,aAAU;EACV,cAAY;EACZ,eAAa;EAEb,UAAA,kBAAC,QAAD,EAAM,WAAU,oBAAqB,CAAA;CAClC,CAAA;AAET"}

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

@@ -0,0 +1,18 @@
+export interface SkeletonCardProps {
+    /** Card size variant */
+    variant?: "default" | "compact" | "stat";
+    /** Additional CSS class names */
+    className?: string;
+    /** Test ID for testing */
+    testId?: 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, }: SkeletonCardProps): import("react").JSX.Element;
+export default SkeletonCard;

package/dist/components/Skeleton/SkeletonCard2.js

@@ -0,0 +1,73 @@
+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 = [
+		"skeleton-card",
+		`skeleton-card--${i}`,
+		a
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("div", {
+		className: s,
+		"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, {
+				width: "48px",
+				height: "48px",
+				variant: "circle"
+			}), /* @__PURE__ */ r("div", {
+				className: "skeleton-card__header-text",
+				children: [/* @__PURE__ */ n(e, {
+					width: "60%",
+					height: "16px"
+				}), /* @__PURE__ */ n(e, {
+					width: "40%",
+					height: "24px"
+				})]
+			})]
+		}) }) : /* @__PURE__ */ r(t, { children: [
+			/* @__PURE__ */ n("div", {
+				className: "skeleton-card__header",
+				children: /* @__PURE__ */ n(e, {
+					width: "70%",
+					height: "20px"
+				})
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "skeleton-card__content",
+				children: [
+					/* @__PURE__ */ n(e, {
+						width: "100%",
+						height: "16px"
+					}),
+					/* @__PURE__ */ n(e, {
+						width: "90%",
+						height: "16px"
+					}),
+					/* @__PURE__ */ n(e, {
+						width: "80%",
+						height: "16px"
+					})
+				]
+			}),
+			i !== "compact" && /* @__PURE__ */ r("div", {
+				className: "skeleton-card__footer",
+				children: [/* @__PURE__ */ n(e, {
+					width: "80px",
+					height: "32px"
+				}), /* @__PURE__ */ n(e, {
+					width: "80px",
+					height: "32px"
+				})]
+			})
+		] })
+	});
+}
+//#endregion
+export { i as SkeletonCard, i as default };
+
+//# sourceMappingURL=SkeletonCard2.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,23 @@
+export interface SkeletonChartProps {
+    /** Chart type variant */
+    variant?: "bar" | "line" | "pie" | "area";
+    /** Chart height */
+    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" */
+    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;