@lablup/ui-common 0.1.0-alpha.2 → 0.1.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/EmptyState/illustrations.d.ts +1 -2
  2. package/dist/components/EmptyState/illustrations.js.map +1 -1
  3. package/dist/components/EmptyState/index.d.ts +11 -0
  4. package/dist/components/EmptyState/index.js +3 -2
  5. package/dist/components/Skeleton/SkeletonCard.d.ts +3 -1
  6. package/dist/components/Skeleton/SkeletonCard2.js +12 -3
  7. package/dist/components/Skeleton/SkeletonCard2.js.map +1 -1
  8. package/dist/components/Skeleton/SkeletonRow.d.ts +3 -1
  9. package/dist/components/Skeleton/SkeletonRow2.js +8 -3
  10. package/dist/components/Skeleton/SkeletonRow2.js.map +1 -1
  11. package/dist/components/Skeleton/SkeletonText.d.ts +3 -1
  12. package/dist/components/Skeleton/SkeletonText2.js +6 -5
  13. package/dist/components/Skeleton/SkeletonText2.js.map +1 -1
  14. package/dist/index.js +20 -19
  15. package/package.json +1 -1
package/dist/components/EmptyState/illustrations.d.ts CHANGED
@@ -5,7 +5,7 @@
5
5
  * All illustrations are inline React components for optimal performance.
6
6
  * Each component is memoized to prevent unnecessary re-renders.
7
7
  */
8
- interface IllustrationProps {
8
+ export interface IllustrationProps {
9
9
  className?: string;
10
10
  }
11
11
  /**
@@ -48,4 +48,3 @@ export declare const ScheduleIllustration: import('react').NamedExoticComponent<
48
48
  * Generic illustration - Placeholder icon
49
49
  */
50
50
  export declare const GenericIllustration: import('react').NamedExoticComponent<IllustrationProps>;
51
- export {};
package/dist/components/EmptyState/illustrations.js.map CHANGED
@@ -1 +1 @@
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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"}
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\nexport interface 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 CHANGED
@@ -3,3 +3,14 @@
3
3
  */
4
4
  export { EmptyState } from './EmptyState';
5
5
  export type { EmptyStateProps, EmptyStateAction, EmptyStateSecondaryAction, IllustrationType, } from './EmptyState';
6
+ /**
7
+ * The illustrations are also exported on their own.
8
+ *
9
+ * They shipped inside the package from the first release but no barrel named
10
+ * them, so a consumer that composes its own empty state, which is the case
11
+ * `EmptyState` cannot cover, had no way to reach one. Same shape as the
12
+ * stylesheets in 0.1.0-alpha.1: present in the tarball, addressable by
13
+ * nothing.
14
+ */
15
+ export { ChatIllustration, ModelsIllustration, CreationsIllustration, BenchmarkIllustration, LogsIllustration, StatisticsIllustration, ErrorIllustration, TextIllustration, ScheduleIllustration, GenericIllustration, } from './illustrations';
16
+ export type { IllustrationProps } from './illustrations';
package/dist/components/EmptyState/index.js CHANGED
@@ -1,2 +1,3 @@
1
- import { EmptyState as e } from "./EmptyState2.js";
2
- export { e as EmptyState };
1
+ import { BenchmarkIllustration as e, ChatIllustration as t, CreationsIllustration as n, ErrorIllustration as r, GenericIllustration as i, LogsIllustration as a, ModelsIllustration as o, ScheduleIllustration as s, StatisticsIllustration as c, TextIllustration as l } from "./illustrations.js";
2
+ import { EmptyState as u } from "./EmptyState2.js";
3
+ export { e as BenchmarkIllustration, t as ChatIllustration, n as CreationsIllustration, u as EmptyState, r as ErrorIllustration, i as GenericIllustration, a as LogsIllustration, o as ModelsIllustration, s as ScheduleIllustration, c as StatisticsIllustration, l as TextIllustration };
package/dist/components/Skeleton/SkeletonCard.d.ts CHANGED
@@ -5,6 +5,8 @@ export interface SkeletonCardProps {
5
5
  className?: string;
6
6
  /** Test ID for testing */
7
7
  testId?: string;
8
+ /** Accessible name for each skeleton inside. Defaults to "Loading". */
9
+ loadingLabel?: string;
8
10
  }
9
11
  /**
10
12
  * SkeletonCard provides a loading placeholder for card components.
@@ -14,5 +16,5 @@ export interface SkeletonCardProps {
14
16
  * - compact: Smaller card with reduced padding
15
17
  * - stat: Statistics card layout
16
18
  */
17
- export declare function SkeletonCard({ variant, className, testId, }: SkeletonCardProps): import("react").JSX.Element;
19
+ export declare function SkeletonCard({ variant, className, testId, loadingLabel, }: SkeletonCardProps): import("react").JSX.Element;
18
20
  export default SkeletonCard;
package/dist/components/Skeleton/SkeletonCard2.js CHANGED
@@ -2,29 +2,32 @@ import { Skeleton as e } from "./Skeleton2.js";
2
2
  /* empty css */
3
3
  import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
4
4
  //#region src/components/Skeleton/SkeletonCard.tsx
5
- function i({ variant: i = "default", className: a = "", testId: o }) {
6
- let s = [
5
+ function i({ variant: i = "default", className: a = "", testId: o, loadingLabel: s }) {
6
+ let c = [
7
7
  "skeleton-card",
8
8
  `skeleton-card--${i}`,
9
9
  a
10
10
  ].filter(Boolean).join(" ");
11
11
  return /* @__PURE__ */ n("div", {
12
- className: s,
12
+ className: c,
13
13
  "data-testid": o,
14
14
  role: "status",
15
15
  "aria-busy": "true",
16
16
  children: i === "stat" ? /* @__PURE__ */ n(t, { children: /* @__PURE__ */ r("div", {
17
17
  className: "skeleton-card__header",
18
18
  children: [/* @__PURE__ */ n(e, {
19
+ loadingLabel: s,
19
20
  width: "48px",
20
21
  height: "48px",
21
22
  variant: "circle"
22
23
  }), /* @__PURE__ */ r("div", {
23
24
  className: "skeleton-card__header-text",
24
25
  children: [/* @__PURE__ */ n(e, {
26
+ loadingLabel: s,
25
27
  width: "60%",
26
28
  height: "16px"
27
29
  }), /* @__PURE__ */ n(e, {
30
+ loadingLabel: s,
28
31
  width: "40%",
29
32
  height: "24px"
30
33
  })]
@@ -33,6 +36,7 @@ function i({ variant: i = "default", className: a = "", testId: o }) {
33
36
  /* @__PURE__ */ n("div", {
34
37
  className: "skeleton-card__header",
35
38
  children: /* @__PURE__ */ n(e, {
39
+ loadingLabel: s,
36
40
  width: "70%",
37
41
  height: "20px"
38
42
  })
@@ -41,14 +45,17 @@ function i({ variant: i = "default", className: a = "", testId: o }) {
41
45
  className: "skeleton-card__content",
42
46
  children: [
43
47
  /* @__PURE__ */ n(e, {
48
+ loadingLabel: s,
44
49
  width: "100%",
45
50
  height: "16px"
46
51
  }),
47
52
  /* @__PURE__ */ n(e, {
53
+ loadingLabel: s,
48
54
  width: "90%",
49
55
  height: "16px"
50
56
  }),
51
57
  /* @__PURE__ */ n(e, {
58
+ loadingLabel: s,
52
59
  width: "80%",
53
60
  height: "16px"
54
61
  })
@@ -57,9 +64,11 @@ function i({ variant: i = "default", className: a = "", testId: o }) {
57
64
  i !== "compact" && /* @__PURE__ */ r("div", {
58
65
  className: "skeleton-card__footer",
59
66
  children: [/* @__PURE__ */ n(e, {
67
+ loadingLabel: s,
60
68
  width: "80px",
61
69
  height: "32px"
62
70
  }), /* @__PURE__ */ n(e, {
71
+ loadingLabel: s,
63
72
  width: "80px",
64
73
  height: "32px"
65
74
  })]
package/dist/components/Skeleton/SkeletonCard2.js.map CHANGED
@@ -1 +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"}
1
+ {"version":3,"file":"SkeletonCard2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonCard.tsx"],"sourcesContent":["/**\n * SkeletonCard Component\n *\n * Skeleton placeholder for card components (model cards, stat cards, etc.).\n * Mimics the structure of a typical card with header, content, and footer areas.\n *\n * @example\n * // Basic usage\n * <SkeletonCard />\n *\n * @example\n * // Compact variant\n * <SkeletonCard variant=\"compact\" />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonCard.css\";\n\nexport interface SkeletonCardProps {\n /** Card size variant */\n variant?: \"default\" | \"compact\" | \"stat\";\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing */\n testId?: string;\n /** Accessible name for each skeleton inside. Defaults to \"Loading\". */\n loadingLabel?: string;\n}\n\n/**\n * SkeletonCard provides a loading placeholder for card components.\n *\n * Variants:\n * - default: Full card with header, content, and footer\n * - compact: Smaller card with reduced padding\n * - stat: Statistics card layout\n */\nexport function SkeletonCard({\n variant = \"default\",\n className = \"\",\n testId,\n loadingLabel,\n}: SkeletonCardProps) {\n const classNames = [\"skeleton-card\", `skeleton-card--${variant}`, className]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <div className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n {variant === \"stat\" ? (\n <>\n <div className=\"skeleton-card__header\">\n <Skeleton\n loadingLabel={loadingLabel}\n width=\"48px\"\n height=\"48px\"\n variant=\"circle\"\n />\n <div className=\"skeleton-card__header-text\">\n <Skeleton loadingLabel={loadingLabel} width=\"60%\" height=\"16px\" />\n <Skeleton loadingLabel={loadingLabel} width=\"40%\" height=\"24px\" />\n </div>\n </div>\n </>\n ) : (\n <>\n <div className=\"skeleton-card__header\">\n <Skeleton loadingLabel={loadingLabel} width=\"70%\" height=\"20px\" />\n </div>\n <div className=\"skeleton-card__content\">\n <Skeleton loadingLabel={loadingLabel} width=\"100%\" height=\"16px\" />\n <Skeleton loadingLabel={loadingLabel} width=\"90%\" height=\"16px\" />\n <Skeleton loadingLabel={loadingLabel} width=\"80%\" height=\"16px\" />\n </div>\n {variant !== \"compact\" && (\n <div className=\"skeleton-card__footer\">\n <Skeleton loadingLabel={loadingLabel} width=\"80px\" height=\"32px\" />\n <Skeleton loadingLabel={loadingLabel} width=\"80px\" height=\"32px\" />\n </div>\n )}\n </>\n )}\n </div>\n );\n}\n\nexport default SkeletonCard;\n"],"mappings":";;;;AAqCA,SAAgB,EAAa,EAC3B,aAAU,WACV,eAAY,IACZ,WACA,mBACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,eAAa;EAAQ,MAAK;EAAS,aAAU;EACtE,UAAA,MAAY,SACX,kBAAA,GAAA,EAAA,UACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IACgB;IACd,OAAM;IACN,QAAO;IACP,SAAQ;GACT,CAAA,GACD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAM,QAAO;IAAQ,CAAA,GACjE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAM,QAAO;IAAQ,CAAA,CAC9D;GACF,CAAA,CAAA;EACL,CAAA,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAM,QAAO;IAAQ,CAAA;GAC9D,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MAAwB;MAAc,OAAM;MAAO,QAAO;KAAQ,CAAA;KAClE,kBAAC,GAAD;MAAwB;MAAc,OAAM;MAAM,QAAO;KAAQ,CAAA;KACjE,kBAAC,GAAD;MAAwB;MAAc,OAAM;MAAM,QAAO;KAAQ,CAAA;IAC9D;;GACJ,MAAY,aACX,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,GAClE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC/D;;EAEP,EAAA,CAAA;CAED,CAAA;AAET"}
package/dist/components/Skeleton/SkeletonRow.d.ts CHANGED
@@ -9,6 +9,8 @@ export interface SkeletonRowProps {
9
9
  className?: string;
10
10
  /** Test ID for testing */
11
11
  testId?: string;
12
+ /** Accessible name for each skeleton inside. Defaults to "Loading". */
13
+ loadingLabel?: string;
12
14
  }
13
15
  /**
14
16
  * SkeletonRow provides a loading placeholder for list/table rows.
@@ -18,5 +20,5 @@ export interface SkeletonRowProps {
18
20
  * - Optional action buttons
19
21
  * - Multiple rows for lists
20
22
  */
21
- export declare function SkeletonRow({ showAvatar, showActions, count, className, testId, }: SkeletonRowProps): import("react").JSX.Element;
23
+ export declare function SkeletonRow({ showAvatar, showActions, count, className, testId, loadingLabel, }: SkeletonRowProps): import("react").JSX.Element;
22
24
  export default SkeletonRow;
package/dist/components/Skeleton/SkeletonRow2.js CHANGED
@@ -2,9 +2,9 @@ import { Skeleton as e } from "./Skeleton2.js";
2
2
  /* empty css */
3
3
  import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
4
4
  //#region src/components/Skeleton/SkeletonRow.tsx
5
- function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s = "", testId: c }) {
6
- let l = Array.from({ length: o });
7
- return /* @__PURE__ */ n(t, { children: l.map((t, o) => /* @__PURE__ */ r("div", {
5
+ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s = "", testId: c, loadingLabel: l }) {
6
+ let u = Array.from({ length: o });
7
+ return /* @__PURE__ */ n(t, { children: u.map((t, o) => /* @__PURE__ */ r("div", {
8
8
  className: `skeleton-row ${s}`,
9
9
  "data-testid": c ? `${c}-${String(o)}` : void 0,
10
10
  role: "status",
@@ -13,6 +13,7 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s
13
13
  i && /* @__PURE__ */ n("div", {
14
14
  className: "skeleton-row__avatar",
15
15
  children: /* @__PURE__ */ n(e, {
16
+ loadingLabel: l,
16
17
  width: "40px",
17
18
  height: "40px",
18
19
  variant: "circle"
@@ -21,9 +22,11 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s
21
22
  /* @__PURE__ */ r("div", {
22
23
  className: "skeleton-row__content",
23
24
  children: [/* @__PURE__ */ n(e, {
25
+ loadingLabel: l,
24
26
  width: "25%",
25
27
  height: "14px"
26
28
  }), /* @__PURE__ */ n(e, {
29
+ loadingLabel: l,
27
30
  width: "100%",
28
31
  height: "16px"
29
32
  })]
@@ -31,9 +34,11 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s
31
34
  a && /* @__PURE__ */ r("div", {
32
35
  className: "skeleton-row__actions",
33
36
  children: [/* @__PURE__ */ n(e, {
37
+ loadingLabel: l,
34
38
  width: "32px",
35
39
  height: "32px"
36
40
  }), /* @__PURE__ */ n(e, {
41
+ loadingLabel: l,
37
42
  width: "32px",
38
43
  height: "32px"
39
44
  })]
package/dist/components/Skeleton/SkeletonRow2.js.map CHANGED
@@ -1 +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"}
1
+ {"version":3,"file":"SkeletonRow2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonRow.tsx"],"sourcesContent":["/**\n * SkeletonRow Component\n *\n * Skeleton placeholder for list rows and table rows.\n * Mimics the structure of a log entry or table row.\n *\n * @example\n * // Basic usage\n * <SkeletonRow />\n *\n * @example\n * // With avatar\n * <SkeletonRow showAvatar />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonRow.css\";\n\nexport interface SkeletonRowProps {\n /** Show avatar/icon on the left */\n showAvatar?: boolean;\n /** Show action buttons on the right */\n showActions?: boolean;\n /** Number of rows to display */\n count?: number;\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing */\n testId?: string;\n /** Accessible name for each skeleton inside. Defaults to \"Loading\". */\n loadingLabel?: string;\n}\n\n/**\n * SkeletonRow provides a loading placeholder for list/table rows.\n *\n * Features:\n * - Optional avatar/icon\n * - Optional action buttons\n * - Multiple rows for lists\n */\nexport function SkeletonRow({\n showAvatar = false,\n showActions = false,\n count = 1,\n className = \"\",\n testId,\n loadingLabel,\n}: SkeletonRowProps) {\n const rows = Array.from({ length: count });\n\n return (\n <>\n {rows.map((_, index) => (\n <div\n key={index}\n className={`skeleton-row ${className}`}\n data-testid={testId ? `${testId}-${String(index)}` : undefined}\n role=\"status\"\n aria-busy=\"true\"\n >\n {showAvatar && (\n <div className=\"skeleton-row__avatar\">\n <Skeleton\n loadingLabel={loadingLabel}\n width=\"40px\"\n height=\"40px\"\n variant=\"circle\"\n />\n </div>\n )}\n <div className=\"skeleton-row__content\">\n <Skeleton loadingLabel={loadingLabel} width=\"25%\" height=\"14px\" />\n <Skeleton loadingLabel={loadingLabel} width=\"100%\" height=\"16px\" />\n </div>\n {showActions && (\n <div className=\"skeleton-row__actions\">\n <Skeleton loadingLabel={loadingLabel} width=\"32px\" height=\"32px\" />\n <Skeleton loadingLabel={loadingLabel} width=\"32px\" height=\"32px\" />\n </div>\n )}\n </div>\n ))}\n </>\n );\n}\n\nexport default SkeletonRow;\n"],"mappings":";;;;AAyCA,SAAgB,EAAY,EAC1B,gBAAa,IACb,iBAAc,IACd,WAAQ,GACR,eAAY,IACZ,WACA,mBACmB;CACnB,IAAM,IAAO,MAAM,KAAK,EAAE,QAAQ,EAAM,CAAC;CAEzC,OACE,kBAAA,GAAA,EAAA,UACG,EAAK,KAAK,GAAG,MACZ,kBAAC,OAAD;EAEE,WAAW,gBAAgB;EAC3B,eAAa,IAAS,GAAG,EAAO,GAAG,OAAO,CAAK,MAAM,KAAA;EACrD,MAAK;EACL,aAAU;EALZ,UAAA;GAOG,KACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KACgB;KACd,OAAM;KACN,QAAO;KACP,SAAQ;IACT,CAAA;GACE,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAM,QAAO;IAAQ,CAAA,GACjE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC/D;;GACJ,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,GAClE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC/D;;EAEJ;CA1BE,GAAA,CA0BF,CACN,EACD,CAAA;AAEN"}
package/dist/components/Skeleton/SkeletonText.d.ts CHANGED
@@ -7,6 +7,8 @@ export interface SkeletonTextProps {
7
7
  className?: string;
8
8
  /** Test ID for testing */
9
9
  testId?: string;
10
+ /** Accessible name for each skeleton inside. Defaults to "Loading". */
11
+ loadingLabel?: string;
10
12
  }
11
13
  /**
12
14
  * SkeletonText provides a loading placeholder for text content.
@@ -16,5 +18,5 @@ export interface SkeletonTextProps {
16
18
  * - Configurable line spacing
17
19
  * - Accessible via aria-busy
18
20
  */
19
- export declare function SkeletonText({ lines, spacing, className, testId, }: SkeletonTextProps): import("react").JSX.Element;
21
+ export declare function SkeletonText({ lines, spacing, className, testId, loadingLabel, }: SkeletonTextProps): import("react").JSX.Element;
20
22
  export default SkeletonText;
package/dist/components/Skeleton/SkeletonText2.js CHANGED
@@ -2,18 +2,19 @@ import { Skeleton as e } from "./Skeleton2.js";
2
2
  /* empty css */
3
3
  import { jsx as t } from "react/jsx-runtime";
4
4
  //#region src/components/Skeleton/SkeletonText.tsx
5
- function n({ lines: n = 3, spacing: r = "normal", className: i = "", testId: a }) {
6
- let o = [
5
+ function n({ lines: n = 3, spacing: r = "normal", className: i = "", testId: a, loadingLabel: o }) {
6
+ let s = [
7
7
  "skeleton-text",
8
8
  `skeleton-text--${r}`,
9
9
  i
10
- ].filter(Boolean).join(" "), s = Array.from({ length: n }, (e, t) => t === n - 1 ? "60%" : t % 2 == 0 ? "100%" : "95%");
10
+ ].filter(Boolean).join(" "), c = Array.from({ length: n }, (e, t) => t === n - 1 ? "60%" : t % 2 == 0 ? "100%" : "95%");
11
11
  return /* @__PURE__ */ t("div", {
12
- className: o,
12
+ className: s,
13
13
  "data-testid": a,
14
14
  role: "status",
15
15
  "aria-busy": "true",
16
- children: s.map((n, r) => /* @__PURE__ */ t(e, {
16
+ children: c.map((n, r) => /* @__PURE__ */ t(e, {
17
+ loadingLabel: o,
17
18
  width: n,
18
19
  height: "1em",
19
20
  variant: "text"
package/dist/components/Skeleton/SkeletonText2.js.map CHANGED
@@ -1 +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"}
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 /** 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/index.js CHANGED
@@ -3,22 +3,23 @@ import { Badge as t } from "./components/Badge/Badge2.js";
3
3
  import { Button as n } from "./components/Button/Button2.js";
4
4
  import { DataTable as r } from "./components/DataTable/DataTable2.js";
5
5
  import { Drawer as i } from "./components/Drawer/Drawer2.js";
6
- import { EmptyState as a } from "./components/EmptyState/EmptyState2.js";
7
- import { ErrorState as o } from "./components/ErrorState/ErrorState2.js";
8
- import { PageHeader as s } from "./components/PageHeader/PageHeader2.js";
9
- import { PageLayout as c } from "./components/PageLayout/PageLayout2.js";
10
- import { ProgressBar as l } from "./components/ProgressBar/ProgressBar2.js";
11
- import { Skeleton as u } from "./components/Skeleton/Skeleton2.js";
12
- import { SkeletonCard as d } from "./components/Skeleton/SkeletonCard2.js";
13
- import { SkeletonText as f } from "./components/Skeleton/SkeletonText2.js";
14
- import { SkeletonChart as p } from "./components/Skeleton/SkeletonChart2.js";
15
- import { SkeletonRow as m } from "./components/Skeleton/SkeletonRow2.js";
16
- import { SmoothHeight as h } from "./components/SmoothHeight/SmoothHeight2.js";
17
- import { usePrefersReducedMotion as g } from "./hooks/usePrefersReducedMotion.js";
18
- import { StatCard as _ } from "./components/StatCard/StatCard2.js";
19
- import { formatCompactNumber as v } from "./components/StatCard/formatters.js";
20
- import { StatusTag as y } from "./components/StatusTag/StatusTag2.js";
21
- import { TAG_CONFIG as b } from "./components/Tabs/tabTags.js";
22
- import { Tabs as x } from "./components/Tabs/Tabs2.js";
23
- import { Tooltip as S } from "./components/Tooltip/Tooltip2.js";
24
- export { t as Badge, e as BaseCard, n as Button, r as DataTable, i as Drawer, a as EmptyState, o as ErrorState, s as PageHeader, c as PageLayout, l as ProgressBar, u as Skeleton, d as SkeletonCard, p as SkeletonChart, m as SkeletonRow, f as SkeletonText, h as SmoothHeight, _ as StatCard, y as StatusTag, b as TAG_CONFIG, x as Tabs, S as Tooltip, v as formatCompactNumber, g as usePrefersReducedMotion };
6
+ import { BenchmarkIllustration as a, ChatIllustration as o, CreationsIllustration as s, ErrorIllustration as c, GenericIllustration as l, LogsIllustration as u, ModelsIllustration as d, ScheduleIllustration as f, StatisticsIllustration as p, TextIllustration as m } from "./components/EmptyState/illustrations.js";
7
+ import { EmptyState as h } from "./components/EmptyState/EmptyState2.js";
8
+ import { ErrorState as g } from "./components/ErrorState/ErrorState2.js";
9
+ import { PageHeader as _ } from "./components/PageHeader/PageHeader2.js";
10
+ import { PageLayout as v } from "./components/PageLayout/PageLayout2.js";
11
+ import { ProgressBar as y } from "./components/ProgressBar/ProgressBar2.js";
12
+ import { Skeleton as b } from "./components/Skeleton/Skeleton2.js";
13
+ import { SkeletonCard as x } from "./components/Skeleton/SkeletonCard2.js";
14
+ import { SkeletonText as S } from "./components/Skeleton/SkeletonText2.js";
15
+ import { SkeletonChart as C } from "./components/Skeleton/SkeletonChart2.js";
16
+ import { SkeletonRow as w } from "./components/Skeleton/SkeletonRow2.js";
17
+ import { SmoothHeight as T } from "./components/SmoothHeight/SmoothHeight2.js";
18
+ import { usePrefersReducedMotion as E } from "./hooks/usePrefersReducedMotion.js";
19
+ import { StatCard as D } from "./components/StatCard/StatCard2.js";
20
+ import { formatCompactNumber as O } from "./components/StatCard/formatters.js";
21
+ import { StatusTag as k } from "./components/StatusTag/StatusTag2.js";
22
+ import { TAG_CONFIG as A } from "./components/Tabs/tabTags.js";
23
+ import { Tabs as j } from "./components/Tabs/Tabs2.js";
24
+ import { Tooltip as M } from "./components/Tooltip/Tooltip2.js";
25
+ export { t as Badge, e as BaseCard, a as BenchmarkIllustration, n as Button, o as ChatIllustration, s as CreationsIllustration, r as DataTable, i as Drawer, h as EmptyState, c as ErrorIllustration, g as ErrorState, l as GenericIllustration, u as LogsIllustration, d as ModelsIllustration, _ as PageHeader, v as PageLayout, y as ProgressBar, f as ScheduleIllustration, b as Skeleton, x as SkeletonCard, C as SkeletonChart, w as SkeletonRow, S as SkeletonText, T as SmoothHeight, D as StatCard, p as StatisticsIllustration, k as StatusTag, A as TAG_CONFIG, j as Tabs, m as TextIllustration, M as Tooltip, O as formatCompactNumber, E as usePrefersReducedMotion };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lablup/ui-common",
3
- "version": "0.1.0-alpha.2",
3
+ "version": "0.1.0-alpha.4",
4
4
  "description": "Shared, product-neutral UI components and design tokens for Lablup products",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Lablup Inc.",