@schandlergarcia/sf-web-components 1.3.0 → 1.4.0
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/.a4drules/features/command-center-dashboard-rule.md +1 -1
- package/.a4drules/skills/command-center-project/SKILL.md +4 -4
- package/.a4drules/skills/component-library/SKILL.md +4 -1
- package/dist/components/library/ui/Avatar.d.ts +22 -10
- package/dist/components/library/ui/Avatar.js +40 -17
- package/dist/components/library/ui/Avatar.js.map +1 -1
- package/dist/components/library/ui/Card.d.ts +23 -37
- package/dist/components/library/ui/EmptyState.d.ts +34 -7
- package/dist/components/library/ui/EmptyState.js +5 -6
- package/dist/components/library/ui/EmptyState.js.map +1 -1
- package/dist/components/library/ui/Spinner.d.ts +21 -5
- package/dist/components/library/ui/UIButton.d.ts +22 -11
- package/dist/components/library/ui/UIButton.js +23 -28
- package/dist/components/library/ui/UIButton.js.map +1 -1
- package/dist/components/library/ui/UIInput.d.ts +4 -5
- package/dist/components/library/ui/UIInput.js +5 -6
- package/dist/components/library/ui/UIInput.js.map +1 -1
- package/dist/components/library/ui/alert.d.ts +23 -21
- package/dist/components/library/ui/alert.js +13 -14
- package/dist/components/library/ui/alert.js.map +1 -1
- package/dist/components/library/ui/card.js +24 -26
- package/dist/components/library/ui/card.js.map +1 -1
- package/dist/components/library/ui/checkbox.d.ts +4 -4
- package/dist/components/library/ui/checkbox.js +4 -5
- package/dist/components/library/ui/checkbox.js.map +1 -1
- package/dist/components/library/ui/dialog.d.ts +1 -1
- package/dist/components/library/ui/label.d.ts +5 -7
- package/dist/components/library/ui/label.js +9 -10
- package/dist/components/library/ui/label.js.map +1 -1
- package/dist/components/library/ui/popover.d.ts +1 -1
- package/dist/components/library/ui/spinner.js +16 -17
- package/dist/components/library/ui/spinner.js.map +1 -1
- package/package.json +7 -3
- package/scripts/convert-to-typescript.sh +52 -0
- package/src/components/library/ui/{Alert.jsx → Alert.tsx} +17 -7
- package/src/components/library/ui/Avatar.tsx +68 -0
- package/src/components/library/ui/{Card.jsx → Card.tsx} +24 -10
- package/src/components/library/ui/{Checkbox.jsx → Checkbox.tsx} +4 -2
- package/src/components/library/ui/Dialog.tsx +1 -1
- package/src/components/library/ui/{EmptyState.jsx → EmptyState.tsx} +13 -10
- package/src/components/library/ui/{Label.jsx → Label.tsx} +9 -8
- package/src/components/library/ui/Popover.tsx +1 -1
- package/src/components/library/ui/{Spinner.jsx → Spinner.tsx} +12 -10
- package/src/components/library/ui/{UIButton.jsx → UIButton.tsx} +15 -14
- package/src/components/library/ui/{UIInput.jsx → UIInput.tsx} +5 -5
- package/src/components/library/ui/Avatar.jsx +0 -44
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsx as d } from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
const l = {
|
|
2
|
+
const a = {
|
|
4
3
|
default: "bg-slate-50 border-slate-200 text-slate-900 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-50",
|
|
5
4
|
info: "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-50",
|
|
6
5
|
success: "bg-green-50 border-green-200 text-green-900 dark:bg-green-950 dark:border-green-800 dark:text-green-50",
|
|
@@ -8,23 +7,23 @@ const l = {
|
|
|
8
7
|
error: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50",
|
|
9
8
|
destructive: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50"
|
|
10
9
|
};
|
|
11
|
-
function
|
|
12
|
-
const
|
|
10
|
+
function b({ variant: e = "default", className: r = "", children: t, ...l }) {
|
|
11
|
+
const o = a[e];
|
|
13
12
|
return /* @__PURE__ */ d(
|
|
14
13
|
"div",
|
|
15
14
|
{
|
|
16
15
|
role: "alert",
|
|
17
16
|
className: [
|
|
18
17
|
"rounded-lg border p-4",
|
|
19
|
-
|
|
18
|
+
o,
|
|
20
19
|
r
|
|
21
20
|
].filter(Boolean).join(" "),
|
|
22
|
-
...
|
|
21
|
+
...l,
|
|
23
22
|
children: t
|
|
24
23
|
}
|
|
25
24
|
);
|
|
26
25
|
}
|
|
27
|
-
function
|
|
26
|
+
function i({ className: e = "", children: r, ...t }) {
|
|
28
27
|
return /* @__PURE__ */ d(
|
|
29
28
|
"h5",
|
|
30
29
|
{
|
|
@@ -37,7 +36,7 @@ function s({ className: e = "", children: r, ...t }) {
|
|
|
37
36
|
}
|
|
38
37
|
);
|
|
39
38
|
}
|
|
40
|
-
function
|
|
39
|
+
function s({ className: e = "", children: r, ...t }) {
|
|
41
40
|
return /* @__PURE__ */ d(
|
|
42
41
|
"div",
|
|
43
42
|
{
|
|
@@ -50,7 +49,7 @@ function g({ className: e = "", children: r, ...t }) {
|
|
|
50
49
|
}
|
|
51
50
|
);
|
|
52
51
|
}
|
|
53
|
-
function
|
|
52
|
+
function g({ className: e = "", children: r, ...t }) {
|
|
54
53
|
return /* @__PURE__ */ d(
|
|
55
54
|
"div",
|
|
56
55
|
{
|
|
@@ -64,10 +63,10 @@ function u({ className: e = "", children: r, ...t }) {
|
|
|
64
63
|
);
|
|
65
64
|
}
|
|
66
65
|
export {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
66
|
+
b as Alert,
|
|
67
|
+
g as AlertAction,
|
|
68
|
+
s as AlertDescription,
|
|
69
|
+
i as AlertTitle,
|
|
70
|
+
b as default
|
|
72
71
|
};
|
|
73
72
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../src/components/library/ui/Alert.
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/library/ui/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst VARIANT_CLASSES = {\n default: \"bg-slate-50 border-slate-200 text-slate-900 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-50\",\n info: \"bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-50\",\n success: \"bg-green-50 border-green-200 text-green-900 dark:bg-green-950 dark:border-green-800 dark:text-green-50\",\n warning: \"bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-50\",\n error: \"bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50\",\n destructive: \"bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50\"\n} as const;\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: keyof typeof VARIANT_CLASSES;\n}\n\nexport default function Alert({ variant = \"default\", className = \"\", children, ...rest }: AlertProps) {\n const variantClasses = VARIANT_CLASSES[variant];\n\n return (\n <div\n role=\"alert\"\n className={[\n \"rounded-lg border p-4\",\n variantClasses,\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\nexport interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport function AlertTitle({ className = \"\", children, ...rest }: AlertTitleProps) {\n return (\n <h5\n className={[\n \"mb-1 font-medium leading-none tracking-tight\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </h5>\n );\n}\n\nexport interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function AlertDescription({ className = \"\", children, ...rest }: AlertDescriptionProps) {\n return (\n <div\n className={[\n \"text-sm opacity-90\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\nexport interface AlertActionProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function AlertAction({ className = \"\", children, ...rest }: AlertActionProps) {\n return (\n <div\n className={[\n \"mt-3\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\nexport { Alert };\n"],"names":["VARIANT_CLASSES","Alert","variant","className","children","rest","variantClasses","jsx","AlertTitle","AlertDescription","AlertAction"],"mappings":";AAEA,MAAMA,IAAkB;AAAA,EACtB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,aAAa;AACf;AAMA,SAAwBC,EAAM,EAAE,SAAAC,IAAU,WAAW,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,KAAoB;AACpG,QAAMC,IAAiBN,EAAgBE,CAAO;AAE9C,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACAD;AAAA,QACAH;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAIO,SAASI,EAAW,EAAE,WAAAL,IAAY,IAAI,UAAAC,GAAU,GAAGC,KAAyB;AACjF,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAIO,SAASK,EAAiB,EAAE,WAAAN,IAAY,IAAI,UAAAC,GAAU,GAAGC,KAA+B;AAC7F,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAIO,SAASM,EAAY,EAAE,WAAAP,IAAY,IAAI,UAAAC,GAAU,GAAGC,KAA0B;AACnF,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,22 +1,20 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
return /* @__PURE__ */ o(
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
function l({ children: e, padding: r = "p-5", className: t = "", ...o }) {
|
|
3
|
+
return /* @__PURE__ */ a(
|
|
5
4
|
"div",
|
|
6
5
|
{
|
|
7
|
-
style: t,
|
|
8
6
|
className: [
|
|
9
7
|
"rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900",
|
|
10
8
|
r,
|
|
11
|
-
|
|
9
|
+
t
|
|
12
10
|
].filter(Boolean).join(" "),
|
|
13
|
-
...
|
|
11
|
+
...o,
|
|
14
12
|
children: e
|
|
15
13
|
}
|
|
16
14
|
);
|
|
17
15
|
}
|
|
18
|
-
function
|
|
19
|
-
return /* @__PURE__ */
|
|
16
|
+
function i({ className: e = "", children: r, ...t }) {
|
|
17
|
+
return /* @__PURE__ */ a(
|
|
20
18
|
"div",
|
|
21
19
|
{
|
|
22
20
|
className: [
|
|
@@ -28,8 +26,8 @@ function s({ className: e = "", children: r, ...t }) {
|
|
|
28
26
|
}
|
|
29
27
|
);
|
|
30
28
|
}
|
|
31
|
-
function
|
|
32
|
-
return /* @__PURE__ */
|
|
29
|
+
function d({ className: e = "", children: r, ...t }) {
|
|
30
|
+
return /* @__PURE__ */ a(
|
|
33
31
|
"div",
|
|
34
32
|
{
|
|
35
33
|
className: [
|
|
@@ -41,8 +39,8 @@ function f({ className: e = "", children: r, ...t }) {
|
|
|
41
39
|
}
|
|
42
40
|
);
|
|
43
41
|
}
|
|
44
|
-
function
|
|
45
|
-
return /* @__PURE__ */
|
|
42
|
+
function s({ className: e = "", children: r, ...t }) {
|
|
43
|
+
return /* @__PURE__ */ a(
|
|
46
44
|
"h3",
|
|
47
45
|
{
|
|
48
46
|
className: [
|
|
@@ -54,8 +52,8 @@ function c({ className: e = "", children: r, ...t }) {
|
|
|
54
52
|
}
|
|
55
53
|
);
|
|
56
54
|
}
|
|
57
|
-
function
|
|
58
|
-
return /* @__PURE__ */
|
|
55
|
+
function f({ className: e = "", children: r, ...t }) {
|
|
56
|
+
return /* @__PURE__ */ a(
|
|
59
57
|
"p",
|
|
60
58
|
{
|
|
61
59
|
className: [
|
|
@@ -67,8 +65,8 @@ function u({ className: e = "", children: r, ...t }) {
|
|
|
67
65
|
}
|
|
68
66
|
);
|
|
69
67
|
}
|
|
70
|
-
function
|
|
71
|
-
return /* @__PURE__ */
|
|
68
|
+
function c({ className: e = "", children: r, ...t }) {
|
|
69
|
+
return /* @__PURE__ */ a(
|
|
72
70
|
"div",
|
|
73
71
|
{
|
|
74
72
|
className: [
|
|
@@ -80,8 +78,8 @@ function m({ className: e = "", children: r, ...t }) {
|
|
|
80
78
|
}
|
|
81
79
|
);
|
|
82
80
|
}
|
|
83
|
-
function
|
|
84
|
-
return /* @__PURE__ */
|
|
81
|
+
function u({ className: e = "", children: r, ...t }) {
|
|
82
|
+
return /* @__PURE__ */ a(
|
|
85
83
|
"div",
|
|
86
84
|
{
|
|
87
85
|
className: [
|
|
@@ -94,12 +92,12 @@ function p({ className: e = "", children: r, ...t }) {
|
|
|
94
92
|
);
|
|
95
93
|
}
|
|
96
94
|
export {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
95
|
+
i as Card,
|
|
96
|
+
c as CardContent,
|
|
97
|
+
f as CardDescription,
|
|
98
|
+
u as CardFooter,
|
|
99
|
+
d as CardHeader,
|
|
100
|
+
s as CardTitle,
|
|
101
|
+
l as default
|
|
104
102
|
};
|
|
105
103
|
//# sourceMappingURL=Card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../../src/components/library/ui/Card.
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../../src/components/library/ui/Card.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport interface UICardProps extends React.HTMLAttributes<HTMLDivElement> {\n padding?: string;\n}\n\nexport default function UICard({ children, padding = \"p-5\", className = \"\", ...rest }: UICardProps) {\n return (\n <div\n className={[\n \"rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900\",\n padding,\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\n// shadcn-compatible Card components\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function Card({ className = \"\", children, ...rest }: CardProps) {\n return (\n <div\n className={[\n \"rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function CardHeader({ className = \"\", children, ...rest }: CardHeaderProps) {\n return (\n <div\n className={[\n \"flex flex-col space-y-1.5 p-6\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport function CardTitle({ className = \"\", children, ...rest }: CardTitleProps) {\n return (\n <h3\n className={[\n \"text-2xl font-semibold leading-none tracking-tight\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </h3>\n );\n}\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport function CardDescription({ className = \"\", children, ...rest }: CardDescriptionProps) {\n return (\n <p\n className={[\n \"text-sm text-slate-500 dark:text-slate-400\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </p>\n );\n}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function CardContent({ className = \"\", children, ...rest }: CardContentProps) {\n return (\n <div\n className={[\n \"p-6 pt-0\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function CardFooter({ className = \"\", children, ...rest }: CardFooterProps) {\n return (\n <div\n className={[\n \"flex items-center p-6 pt-0\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </div>\n );\n}\n"],"names":["UICard","children","padding","className","rest","jsx","Card","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"mappings":";AAMA,SAAwBA,EAAO,EAAE,UAAAC,GAAU,SAAAC,IAAU,OAAO,WAAAC,IAAY,IAAI,GAAGC,KAAqB;AAClG,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAH;AAAA,QACAC;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;AAKO,SAASK,EAAK,EAAE,WAAAH,IAAY,IAAI,UAAAF,GAAU,GAAGG,KAAmB;AACrE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAF;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;AAIO,SAASM,EAAW,EAAE,WAAAJ,IAAY,IAAI,UAAAF,GAAU,GAAGG,KAAyB;AACjF,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAF;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;AAIO,SAASO,EAAU,EAAE,WAAAL,IAAY,IAAI,UAAAF,GAAU,GAAGG,KAAwB;AAC/E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAF;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;AAIO,SAASQ,EAAgB,EAAE,WAAAN,IAAY,IAAI,UAAAF,GAAU,GAAGG,KAA8B;AAC3F,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAF;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;AAIO,SAASS,EAAY,EAAE,WAAAP,IAAY,IAAI,UAAAF,GAAU,GAAGG,KAA0B;AACnF,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAF;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;AAIO,SAASU,EAAW,EAAE,WAAAR,IAAY,IAAI,UAAAF,GAAU,GAAGG,KAAyB;AACjF,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAF;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
3
|
+
}
|
|
4
|
+
export default function Checkbox({ className, ...rest }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
return /* @__PURE__ */ o(
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
function t({ className: r = "", ...e }) {
|
|
3
|
+
return /* @__PURE__ */ a(
|
|
5
4
|
"input",
|
|
6
5
|
{
|
|
7
6
|
type: "checkbox",
|
|
@@ -15,6 +14,6 @@ function n({ className: r = "", ...e }) {
|
|
|
15
14
|
);
|
|
16
15
|
}
|
|
17
16
|
export {
|
|
18
|
-
|
|
17
|
+
t as default
|
|
19
18
|
};
|
|
20
19
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/library/ui/Checkbox.
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/library/ui/Checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport default function Checkbox({ className = \"\", ...rest }: CheckboxProps) {\n return (\n <input\n type=\"checkbox\"\n className={[\n \"h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500\",\n \"dark:border-slate-600 dark:bg-slate-800 dark:focus:ring-brand-400\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n />\n );\n}\n"],"names":["Checkbox","className","rest","jsx"],"mappings":";AAIA,SAAwBA,EAAS,EAAE,WAAAC,IAAY,IAAI,GAAGC,KAAuB;AAC3E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACAF;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
3
3
|
declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
className?: string | undefined;
|
|
7
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
3
|
+
required?: boolean;
|
|
4
|
+
}
|
|
5
|
+
export default function Label({ children, htmlFor, required, className, ...rest }: LabelProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,23 +1,22 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return /* @__PURE__ */ i(
|
|
6
|
-
n,
|
|
1
|
+
import { jsxs as r, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
function o({ children: e, htmlFor: t, required: a, className: l = "", ...s }) {
|
|
3
|
+
return /* @__PURE__ */ r(
|
|
4
|
+
"label",
|
|
7
5
|
{
|
|
8
|
-
|
|
6
|
+
htmlFor: t,
|
|
9
7
|
className: [
|
|
10
8
|
"text-sm font-medium text-slate-700 dark:text-slate-200",
|
|
11
9
|
l
|
|
12
10
|
].filter(Boolean).join(" "),
|
|
11
|
+
...s,
|
|
13
12
|
children: [
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
e,
|
|
14
|
+
a && /* @__PURE__ */ n("span", { className: "ml-0.5 text-red-500", children: "*" })
|
|
16
15
|
]
|
|
17
16
|
}
|
|
18
17
|
);
|
|
19
18
|
}
|
|
20
19
|
export {
|
|
21
|
-
|
|
20
|
+
o as default
|
|
22
21
|
};
|
|
23
22
|
//# sourceMappingURL=Label.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","sources":["../../../../src/components/library/ui/Label.
|
|
1
|
+
{"version":3,"file":"Label.js","sources":["../../../../src/components/library/ui/Label.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n required?: boolean;\n}\n\nexport default function Label({ children, htmlFor, required, className = \"\", ...rest }: LabelProps) {\n return (\n <label\n htmlFor={htmlFor}\n className={[\n \"text-sm font-medium text-slate-700 dark:text-slate-200\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n {required && <span className=\"ml-0.5 text-red-500\">*</span>}\n </label>\n );\n}\n"],"names":["Label","children","htmlFor","required","className","rest","jsxs","jsx"],"mappings":";AAMA,SAAwBA,EAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,UAAAC,GAAU,WAAAC,IAAY,IAAI,GAAGC,KAAoB;AAClG,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAJ;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACAE;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAJ;AAAA,QACAE,KAAY,gBAAAI,EAAC,QAAA,EAAK,WAAU,uBAAsB,UAAA,IAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1D;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
3
3
|
declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,39 +1,38 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
|
|
3
|
-
const e = {
|
|
1
|
+
import { jsxs as n, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
const o = {
|
|
4
3
|
xs: "h-3 w-3",
|
|
5
4
|
sm: "h-4 w-4",
|
|
6
5
|
md: "h-5 w-5",
|
|
7
6
|
lg: "h-6 w-6",
|
|
8
7
|
xl: "h-8 w-8"
|
|
9
|
-
},
|
|
8
|
+
}, i = {
|
|
10
9
|
brand: "text-brand-500",
|
|
11
10
|
white: "text-white",
|
|
12
11
|
muted: "text-slate-400 dark:text-slate-500",
|
|
13
12
|
current: "text-current"
|
|
14
13
|
};
|
|
15
|
-
function
|
|
16
|
-
size:
|
|
17
|
-
tone:
|
|
18
|
-
label:
|
|
19
|
-
className:
|
|
20
|
-
...
|
|
14
|
+
function x({
|
|
15
|
+
size: e = "md",
|
|
16
|
+
tone: r = "brand",
|
|
17
|
+
label: a = "Loading",
|
|
18
|
+
className: s = "",
|
|
19
|
+
...l
|
|
21
20
|
}) {
|
|
22
|
-
return /* @__PURE__ */
|
|
21
|
+
return /* @__PURE__ */ n(
|
|
23
22
|
"svg",
|
|
24
23
|
{
|
|
25
|
-
...
|
|
24
|
+
...l,
|
|
26
25
|
className: [
|
|
27
26
|
"animate-spin",
|
|
28
|
-
e
|
|
29
|
-
r
|
|
30
|
-
|
|
27
|
+
o[e],
|
|
28
|
+
i[r],
|
|
29
|
+
s
|
|
31
30
|
].filter(Boolean).join(" "),
|
|
32
31
|
xmlns: "http://www.w3.org/2000/svg",
|
|
33
32
|
fill: "none",
|
|
34
33
|
viewBox: "0 0 24 24",
|
|
35
34
|
role: "status",
|
|
36
|
-
"aria-label":
|
|
35
|
+
"aria-label": a,
|
|
37
36
|
children: [
|
|
38
37
|
/* @__PURE__ */ t(
|
|
39
38
|
"circle",
|
|
@@ -59,6 +58,6 @@ function m({
|
|
|
59
58
|
);
|
|
60
59
|
}
|
|
61
60
|
export {
|
|
62
|
-
|
|
61
|
+
x as default
|
|
63
62
|
};
|
|
64
63
|
//# sourceMappingURL=Spinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.js","sources":["../../../../src/components/library/ui/Spinner.
|
|
1
|
+
{"version":3,"file":"Spinner.js","sources":["../../../../src/components/library/ui/Spinner.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst SIZE_CLASSES = {\n xs: \"h-3 w-3\",\n sm: \"h-4 w-4\",\n md: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n xl: \"h-8 w-8\",\n} as const;\n\nconst TONE_CLASSES = {\n brand: \"text-brand-500\",\n white: \"text-white\",\n muted: \"text-slate-400 dark:text-slate-500\",\n current: \"text-current\",\n} as const;\n\nexport interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {\n size?: keyof typeof SIZE_CLASSES;\n tone?: keyof typeof TONE_CLASSES;\n label?: string;\n}\n\n/**\n * Animated spinner.\n */\nexport default function Spinner({\n size = \"md\",\n tone = \"brand\",\n label = \"Loading\",\n className = \"\",\n ...rest\n}: SpinnerProps) {\n return (\n <svg\n {...rest}\n className={[\n \"animate-spin\",\n SIZE_CLASSES[size],\n TONE_CLASSES[tone],\n className,\n ]\n .filter(Boolean)\n .join(\" \")}\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n role=\"status\"\n aria-label={label}\n >\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n />\n </svg>\n );\n}\n"],"names":["SIZE_CLASSES","TONE_CLASSES","Spinner","size","tone","label","className","rest","jsxs","jsx"],"mappings":";AAEA,MAAMA,IAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAe;AAAA,EACnB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;AAWA,SAAwBC,EAAQ;AAAA,EAC9B,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAiB;AACf,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACAP,EAAaG,CAAI;AAAA,QACjBF,EAAaG,CAAI;AAAA,QACjBE;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,OAAM;AAAA,MACN,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,cAAYD;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@schandlergarcia/sf-web-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -47,12 +47,13 @@
|
|
|
47
47
|
"@heroui/react": "^3.0.0",
|
|
48
48
|
"@heroui/styles": "^3.0.0",
|
|
49
49
|
"@radix-ui/react-collapsible": "^1.0.0",
|
|
50
|
+
"@radix-ui/react-dialog": "^1.0.0",
|
|
51
|
+
"@radix-ui/react-popover": "^1.0.0",
|
|
50
52
|
"@radix-ui/react-select": "^2.0.0",
|
|
51
53
|
"@tailwindcss/vite": "^4.0.0",
|
|
52
54
|
"d3": "^7.0.0",
|
|
53
55
|
"framer-motion": "^12.0.0",
|
|
54
56
|
"lucide-react": ">=0.500.0",
|
|
55
|
-
"radix-ui": "^1.4.0",
|
|
56
57
|
"react": "^18.0.0 || ^19.0.0",
|
|
57
58
|
"react-day-picker": "^9.0.0",
|
|
58
59
|
"react-dom": "^18.0.0 || ^19.0.0",
|
|
@@ -70,11 +71,14 @@
|
|
|
70
71
|
"tailwind-merge": "^3.5.0"
|
|
71
72
|
},
|
|
72
73
|
"devDependencies": {
|
|
74
|
+
"@radix-ui/react-collapsible": "^1.1.12",
|
|
75
|
+
"@radix-ui/react-dialog": "^1.1.15",
|
|
76
|
+
"@radix-ui/react-popover": "^1.1.15",
|
|
77
|
+
"@radix-ui/react-select": "^2.2.6",
|
|
73
78
|
"@types/react": "^19.2.5",
|
|
74
79
|
"@types/react-dom": "^19.2.3",
|
|
75
80
|
"@vitejs/plugin-react": "^5.1.1",
|
|
76
81
|
"date-fns": "^4.0.0",
|
|
77
|
-
"radix-ui": "^1.4.3",
|
|
78
82
|
"react-day-picker": "^9.14.0",
|
|
79
83
|
"sonner": "^1.7.0",
|
|
80
84
|
"typescript": "~5.9.3",
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
#!/usr/bin/env bash
|
|
2
|
+
#
|
|
3
|
+
# Bulk TypeScript conversion script
|
|
4
|
+
# Converts .jsx files to .tsx and updates import statements
|
|
5
|
+
#
|
|
6
|
+
set -euo pipefail
|
|
7
|
+
|
|
8
|
+
echo "TypeScript Conversion Script"
|
|
9
|
+
echo "============================"
|
|
10
|
+
echo ""
|
|
11
|
+
|
|
12
|
+
# List of files to convert (add more as needed)
|
|
13
|
+
FILES=(
|
|
14
|
+
"src/components/library/ui/Text.jsx"
|
|
15
|
+
"src/components/library/ui/Container.jsx"
|
|
16
|
+
"src/components/library/ui/Chip.jsx"
|
|
17
|
+
)
|
|
18
|
+
|
|
19
|
+
converted=0
|
|
20
|
+
failed=0
|
|
21
|
+
|
|
22
|
+
for file in "${FILES[@]}"; do
|
|
23
|
+
if [ ! -f "$file" ]; then
|
|
24
|
+
echo "⏭️ Skipping $file (not found)"
|
|
25
|
+
continue
|
|
26
|
+
fi
|
|
27
|
+
|
|
28
|
+
newfile="${file%.jsx}.tsx"
|
|
29
|
+
echo "🔄 Converting $file → $newfile"
|
|
30
|
+
|
|
31
|
+
# Rename file
|
|
32
|
+
mv "$file" "$newfile"
|
|
33
|
+
|
|
34
|
+
# Update import statement
|
|
35
|
+
sed -i '' 's/import React from "react";/import * as React from "react";/g' "$newfile"
|
|
36
|
+
|
|
37
|
+
echo "✅ Renamed and updated imports"
|
|
38
|
+
converted=$((converted + 1))
|
|
39
|
+
done
|
|
40
|
+
|
|
41
|
+
echo ""
|
|
42
|
+
echo "============================"
|
|
43
|
+
echo "✅ Converted: $converted files"
|
|
44
|
+
echo "❌ Failed: $failed files"
|
|
45
|
+
echo ""
|
|
46
|
+
echo "Next steps:"
|
|
47
|
+
echo "1. Add TypeScript interfaces to each converted file"
|
|
48
|
+
echo "2. Type all function parameters"
|
|
49
|
+
echo "3. Add 'as const' to constant objects"
|
|
50
|
+
echo "4. Export prop interfaces"
|
|
51
|
+
echo "5. Run 'npm run build' to verify"
|
|
52
|
+
echo ""
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import * as React from "react";
|
|
2
2
|
|
|
3
3
|
const VARIANT_CLASSES = {
|
|
4
4
|
default: "bg-slate-50 border-slate-200 text-slate-900 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-50",
|
|
@@ -7,10 +7,14 @@ const VARIANT_CLASSES = {
|
|
|
7
7
|
warning: "bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-50",
|
|
8
8
|
error: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50",
|
|
9
9
|
destructive: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50"
|
|
10
|
-
};
|
|
10
|
+
} as const;
|
|
11
11
|
|
|
12
|
-
export
|
|
13
|
-
|
|
12
|
+
export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
13
|
+
variant?: keyof typeof VARIANT_CLASSES;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export default function Alert({ variant = "default", className = "", children, ...rest }: AlertProps) {
|
|
17
|
+
const variantClasses = VARIANT_CLASSES[variant];
|
|
14
18
|
|
|
15
19
|
return (
|
|
16
20
|
<div
|
|
@@ -29,7 +33,9 @@ export default function Alert({ variant = "default", className = "", children, .
|
|
|
29
33
|
);
|
|
30
34
|
}
|
|
31
35
|
|
|
32
|
-
export
|
|
36
|
+
export interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
|
|
37
|
+
|
|
38
|
+
export function AlertTitle({ className = "", children, ...rest }: AlertTitleProps) {
|
|
33
39
|
return (
|
|
34
40
|
<h5
|
|
35
41
|
className={[
|
|
@@ -45,7 +51,9 @@ export function AlertTitle({ className = "", children, ...rest }) {
|
|
|
45
51
|
);
|
|
46
52
|
}
|
|
47
53
|
|
|
48
|
-
export
|
|
54
|
+
export interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
55
|
+
|
|
56
|
+
export function AlertDescription({ className = "", children, ...rest }: AlertDescriptionProps) {
|
|
49
57
|
return (
|
|
50
58
|
<div
|
|
51
59
|
className={[
|
|
@@ -61,7 +69,9 @@ export function AlertDescription({ className = "", children, ...rest }) {
|
|
|
61
69
|
);
|
|
62
70
|
}
|
|
63
71
|
|
|
64
|
-
export
|
|
72
|
+
export interface AlertActionProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
73
|
+
|
|
74
|
+
export function AlertAction({ className = "", children, ...rest }: AlertActionProps) {
|
|
65
75
|
return (
|
|
66
76
|
<div
|
|
67
77
|
className={[
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
|
|
3
|
+
const SIZE_MAP = {
|
|
4
|
+
xs: "h-6 w-6 text-[9px]",
|
|
5
|
+
sm: "h-8 w-8 text-[10px]",
|
|
6
|
+
md: "h-9 w-9 text-xs",
|
|
7
|
+
lg: "h-11 w-11 text-sm",
|
|
8
|
+
} as const;
|
|
9
|
+
|
|
10
|
+
const TONE_MAP = {
|
|
11
|
+
slate: "bg-slate-800 text-white",
|
|
12
|
+
brand: "bg-brand-500 text-white",
|
|
13
|
+
neutral: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200",
|
|
14
|
+
} as const;
|
|
15
|
+
|
|
16
|
+
export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement | HTMLImageElement> {
|
|
17
|
+
src?: string;
|
|
18
|
+
name?: string;
|
|
19
|
+
initials?: string;
|
|
20
|
+
icon?: React.ReactNode;
|
|
21
|
+
size?: keyof typeof SIZE_MAP;
|
|
22
|
+
tone?: keyof typeof TONE_MAP;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export default function Avatar({
|
|
26
|
+
src,
|
|
27
|
+
name,
|
|
28
|
+
initials,
|
|
29
|
+
icon,
|
|
30
|
+
size = "sm",
|
|
31
|
+
tone = "slate",
|
|
32
|
+
className = "",
|
|
33
|
+
...rest
|
|
34
|
+
}: AvatarProps) {
|
|
35
|
+
const sizeClass = SIZE_MAP[size];
|
|
36
|
+
|
|
37
|
+
if (src) {
|
|
38
|
+
return (
|
|
39
|
+
<img
|
|
40
|
+
src={src}
|
|
41
|
+
alt={name ?? ""}
|
|
42
|
+
className={`${sizeClass} shrink-0 rounded-full border border-slate-200 object-cover dark:border-slate-800 ${className}`}
|
|
43
|
+
{...(rest as React.ImgHTMLAttributes<HTMLImageElement>)}
|
|
44
|
+
/>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
if (React.isValidElement(icon)) {
|
|
49
|
+
return (
|
|
50
|
+
<div
|
|
51
|
+
className={`${sizeClass} ${TONE_MAP[tone]} flex shrink-0 items-center justify-center rounded-full ${className}`}
|
|
52
|
+
{...(rest as React.HTMLAttributes<HTMLDivElement>)}
|
|
53
|
+
>
|
|
54
|
+
{icon}
|
|
55
|
+
</div>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
const label = initials ?? (name ? name.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase() : "?");
|
|
60
|
+
return (
|
|
61
|
+
<div
|
|
62
|
+
className={`${sizeClass} ${TONE_MAP[tone]} flex shrink-0 items-center justify-center rounded-full font-bold ${className}`}
|
|
63
|
+
{...(rest as React.HTMLAttributes<HTMLDivElement>)}
|
|
64
|
+
>
|
|
65
|
+
{label}
|
|
66
|
+
</div>
|
|
67
|
+
);
|
|
68
|
+
}
|