@schandlergarcia/sf-web-components 1.9.6 → 1.9.7
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/library/ui/UIButton.d.ts +2 -2
- package/dist/components/library/ui/UIButton.js +14 -14
- package/dist/components/library/ui/UIButton.js.map +1 -1
- package/package.json +2 -2
- package/src/components/library/ui/UIButton.tsx +3 -3
- package/src/templates/pages/BlankDashboard.tsx.template +0 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
declare const VARIANT_CLASSES: {
|
|
3
|
-
readonly primary: "bg-
|
|
3
|
+
readonly primary: "bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 border-transparent";
|
|
4
4
|
readonly secondary: "bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 border-transparent";
|
|
5
5
|
readonly destructive: "bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent";
|
|
6
6
|
readonly outline: "bg-transparent text-slate-900 hover:bg-slate-50 dark:text-slate-50 dark:hover:bg-slate-900 border-slate-200 dark:border-slate-800";
|
|
7
7
|
readonly ghost: "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent";
|
|
8
|
-
readonly link: "text-
|
|
8
|
+
readonly link: "text-blue-600 underline-offset-4 hover:underline dark:text-blue-400 border-transparent";
|
|
9
9
|
};
|
|
10
10
|
declare const SIZE_CLASSES: {
|
|
11
11
|
readonly sm: "h-8 px-3 text-sm";
|
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as d } from "react/jsx-runtime";
|
|
2
2
|
const i = {
|
|
3
|
-
primary: "bg-
|
|
3
|
+
primary: "bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 border-transparent",
|
|
4
4
|
secondary: "bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 border-transparent",
|
|
5
5
|
destructive: "bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent",
|
|
6
6
|
outline: "bg-transparent text-slate-900 hover:bg-slate-50 dark:text-slate-50 dark:hover:bg-slate-900 border-slate-200 dark:border-slate-800",
|
|
7
7
|
ghost: "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent",
|
|
8
|
-
link: "text-
|
|
9
|
-
},
|
|
8
|
+
link: "text-blue-600 underline-offset-4 hover:underline dark:text-blue-400 border-transparent"
|
|
9
|
+
}, u = {
|
|
10
10
|
sm: "h-8 px-3 text-sm",
|
|
11
11
|
md: "h-10 px-4 text-sm",
|
|
12
12
|
lg: "h-12 px-5 text-base",
|
|
13
13
|
icon: "h-10 w-10 p-0"
|
|
14
14
|
};
|
|
15
|
-
function
|
|
15
|
+
function f({
|
|
16
16
|
variant: e = "primary",
|
|
17
17
|
size: t = "md",
|
|
18
18
|
fullWidth: r = !1,
|
|
19
19
|
disabled: a = !1,
|
|
20
20
|
className: s = "",
|
|
21
|
-
children:
|
|
22
|
-
...
|
|
21
|
+
children: o,
|
|
22
|
+
...n
|
|
23
23
|
}) {
|
|
24
|
-
const
|
|
25
|
-
return /* @__PURE__ */
|
|
24
|
+
const l = i[e], b = u[t];
|
|
25
|
+
return /* @__PURE__ */ d(
|
|
26
26
|
"button",
|
|
27
27
|
{
|
|
28
28
|
type: "button",
|
|
29
29
|
disabled: a,
|
|
30
30
|
className: [
|
|
31
31
|
"inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition",
|
|
32
|
-
"focus:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
32
|
+
"focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
|
|
33
33
|
"disabled:cursor-not-allowed disabled:opacity-60",
|
|
34
|
-
d,
|
|
35
34
|
l,
|
|
35
|
+
b,
|
|
36
36
|
r ? "w-full" : "",
|
|
37
37
|
s
|
|
38
38
|
].filter(Boolean).join(" "),
|
|
39
|
-
...
|
|
40
|
-
children:
|
|
39
|
+
...n,
|
|
40
|
+
children: o
|
|
41
41
|
}
|
|
42
42
|
);
|
|
43
43
|
}
|
|
44
44
|
export {
|
|
45
|
-
|
|
45
|
+
f as default
|
|
46
46
|
};
|
|
47
47
|
//# sourceMappingURL=UIButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UIButton.js","sources":["../../../../src/components/library/ui/UIButton.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst VARIANT_CLASSES = {\n primary:\n \"bg-
|
|
1
|
+
{"version":3,"file":"UIButton.js","sources":["../../../../src/components/library/ui/UIButton.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst VARIANT_CLASSES = {\n primary:\n \"bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 border-transparent\",\n secondary:\n \"bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 border-transparent\",\n destructive:\n \"bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent\",\n outline:\n \"bg-transparent text-slate-900 hover:bg-slate-50 dark:text-slate-50 dark:hover:bg-slate-900 border-slate-200 dark:border-slate-800\",\n ghost:\n \"bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent\",\n link: \"text-blue-600 underline-offset-4 hover:underline dark:text-blue-400 border-transparent\"\n} as const;\n\nconst SIZE_CLASSES = {\n sm: \"h-8 px-3 text-sm\",\n md: \"h-10 px-4 text-sm\",\n lg: \"h-12 px-5 text-base\",\n icon: \"h-10 w-10 p-0\"\n} as const;\n\nexport interface UIButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: keyof typeof VARIANT_CLASSES;\n size?: keyof typeof SIZE_CLASSES;\n fullWidth?: boolean;\n}\n\nexport default function UIButton({\n variant = \"primary\",\n size = \"md\",\n fullWidth = false,\n disabled = false,\n className = \"\",\n children,\n ...rest\n}: UIButtonProps) {\n const variantClass = VARIANT_CLASSES[variant];\n const sizeClass = SIZE_CLASSES[size];\n\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={[\n \"inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition\",\n \"focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950\",\n \"disabled:cursor-not-allowed disabled:opacity-60\",\n variantClass,\n sizeClass,\n fullWidth ? \"w-full\" : \"\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </button>\n );\n}\n"],"names":["VARIANT_CLASSES","SIZE_CLASSES","UIButton","variant","size","fullWidth","disabled","className","children","rest","variantClass","sizeClass","jsx"],"mappings":";AAEA,MAAMA,IAAkB;AAAA,EACtB,SACE;AAAA,EACF,WACE;AAAA,EACF,aACE;AAAA,EACF,SACE;AAAA,EACF,OACE;AAAA,EACF,MAAM;AACR,GAEMC,IAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAQA,SAAwBC,EAAS;AAAA,EAC/B,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAeV,EAAgBG,CAAO,GACtCQ,IAAYV,EAAaG,CAAI;AAEnC,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAAN;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAI;AAAA,QACAC;AAAA,QACAN,IAAY,WAAW;AAAA,QACvBE;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@schandlergarcia/sf-web-components",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.7",
|
|
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",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"world-atlas": "^2.0.0"
|
|
66
66
|
},
|
|
67
67
|
"dependencies": {
|
|
68
|
-
"@schandlergarcia/sf-web-components": "^1.9.
|
|
68
|
+
"@schandlergarcia/sf-web-components": "^1.9.6",
|
|
69
69
|
"class-variance-authority": "^0.7.1",
|
|
70
70
|
"clsx": "^2.1.1",
|
|
71
71
|
"glob": "^13.0.6",
|
|
@@ -2,7 +2,7 @@ import * as React from "react";
|
|
|
2
2
|
|
|
3
3
|
const VARIANT_CLASSES = {
|
|
4
4
|
primary:
|
|
5
|
-
"bg-
|
|
5
|
+
"bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 border-transparent",
|
|
6
6
|
secondary:
|
|
7
7
|
"bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 border-transparent",
|
|
8
8
|
destructive:
|
|
@@ -11,7 +11,7 @@ const VARIANT_CLASSES = {
|
|
|
11
11
|
"bg-transparent text-slate-900 hover:bg-slate-50 dark:text-slate-50 dark:hover:bg-slate-900 border-slate-200 dark:border-slate-800",
|
|
12
12
|
ghost:
|
|
13
13
|
"bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent",
|
|
14
|
-
link: "text-
|
|
14
|
+
link: "text-blue-600 underline-offset-4 hover:underline dark:text-blue-400 border-transparent"
|
|
15
15
|
} as const;
|
|
16
16
|
|
|
17
17
|
const SIZE_CLASSES = {
|
|
@@ -45,7 +45,7 @@ export default function UIButton({
|
|
|
45
45
|
disabled={disabled}
|
|
46
46
|
className={[
|
|
47
47
|
"inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition",
|
|
48
|
-
"focus:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
48
|
+
"focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
|
|
49
49
|
"disabled:cursor-not-allowed disabled:opacity-60",
|
|
50
50
|
variantClass,
|
|
51
51
|
sizeClass,
|