@lablup/ui-common 0.1.0-alpha.3 → 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.
- package/dist/components/Skeleton/SkeletonCard.d.ts +3 -1
- package/dist/components/Skeleton/SkeletonCard2.js +12 -3
- package/dist/components/Skeleton/SkeletonCard2.js.map +1 -1
- package/dist/components/Skeleton/SkeletonRow.d.ts +3 -1
- package/dist/components/Skeleton/SkeletonRow2.js +8 -3
- package/dist/components/Skeleton/SkeletonRow2.js.map +1 -1
- package/dist/components/Skeleton/SkeletonText.d.ts +3 -1
- package/dist/components/Skeleton/SkeletonText2.js +6 -5
- package/dist/components/Skeleton/SkeletonText2.js.map +1 -1
- package/package.json +1 -1
|
@@ -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;
|
|
@@ -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
|
|
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:
|
|
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
|
})]
|
|
@@ -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
|
|
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"}
|
|
@@ -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;
|
|
@@ -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
|
|
7
|
-
return /* @__PURE__ */ n(t, { children:
|
|
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
|
})]
|
|
@@ -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
|
|
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"}
|
|
@@ -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;
|
|
@@ -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
|
|
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(" "),
|
|
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:
|
|
12
|
+
className: s,
|
|
13
13
|
"data-testid": a,
|
|
14
14
|
role: "status",
|
|
15
15
|
"aria-busy": "true",
|
|
16
|
-
children:
|
|
16
|
+
children: c.map((n, r) => /* @__PURE__ */ t(e, {
|
|
17
|
+
loadingLabel: o,
|
|
17
18
|
width: n,
|
|
18
19
|
height: "1em",
|
|
19
20
|
variant: "text"
|
|
@@ -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
|
|
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/package.json
CHANGED