@schandlergarcia/sf-web-components 1.2.1 → 1.2.3
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.
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as h } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
const
|
|
3
|
+
const e = {
|
|
4
4
|
primary: "bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400 border-transparent",
|
|
5
5
|
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",
|
|
6
|
+
destructive: "bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent",
|
|
6
7
|
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
8
|
ghost: "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent"
|
|
8
|
-
},
|
|
9
|
+
}, t = {
|
|
9
10
|
sm: "h-8 px-3 text-sm",
|
|
10
11
|
md: "h-10 px-4 text-sm",
|
|
11
|
-
lg: "h-12 px-5 text-base"
|
|
12
|
+
lg: "h-12 px-5 text-base",
|
|
13
|
+
icon: "h-10 w-10 p-0"
|
|
12
14
|
};
|
|
13
15
|
function c({
|
|
14
16
|
variant: r = "primary",
|
|
@@ -17,19 +19,19 @@ function c({
|
|
|
17
19
|
disabled: o = !1,
|
|
18
20
|
onClick: n = () => {
|
|
19
21
|
},
|
|
20
|
-
children:
|
|
21
|
-
style:
|
|
22
|
-
className:
|
|
22
|
+
children: d,
|
|
23
|
+
style: i = void 0,
|
|
24
|
+
className: l = "",
|
|
23
25
|
...b
|
|
24
26
|
}) {
|
|
25
|
-
const g =
|
|
26
|
-
return /* @__PURE__ */
|
|
27
|
+
const g = e[r] ?? e.primary, f = t[a] ?? t.md;
|
|
28
|
+
return /* @__PURE__ */ h(
|
|
27
29
|
"button",
|
|
28
30
|
{
|
|
29
31
|
type: "button",
|
|
30
32
|
onClick: n,
|
|
31
33
|
disabled: o,
|
|
32
|
-
style:
|
|
34
|
+
style: i,
|
|
33
35
|
className: [
|
|
34
36
|
"inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition",
|
|
35
37
|
"focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
|
|
@@ -37,10 +39,10 @@ function c({
|
|
|
37
39
|
g,
|
|
38
40
|
f,
|
|
39
41
|
s ? "w-full" : "",
|
|
40
|
-
|
|
42
|
+
l
|
|
41
43
|
].filter(Boolean).join(" "),
|
|
42
44
|
...b,
|
|
43
|
-
children:
|
|
45
|
+
children: d
|
|
44
46
|
}
|
|
45
47
|
);
|
|
46
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UIButton.js","sources":["../../../../src/components/library/ui/UIButton.jsx"],"sourcesContent":["import React from \"react\";\n\nconst VARIANT_CLASSES = {\n primary:\n \"bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-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 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};\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};\n\nexport default function UIButton({\n variant = \"primary\",\n size = \"md\",\n fullWidth = false,\n disabled = false,\n onClick = () => {},\n children,\n style = undefined,\n className = \"\",\n ...rest\n}) {\n const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.primary;\n const sizeClass = SIZE_CLASSES[size] ?? SIZE_CLASSES.md;\n\n return (\n <button\n type=\"button\"\n onClick={onClick}\n disabled={disabled}\n style={style}\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-brand-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\n\n"],"names":["VARIANT_CLASSES","SIZE_CLASSES","UIButton","variant","size","fullWidth","disabled","onClick","children","style","className","rest","variantClass","sizeClass","jsx"],"mappings":";;AAEA,MAAMA,IAAkB;AAAA,EACtB,SACE;AAAA,EACF,WACE;AAAA,EACF,SACE;AAAA,EACF,OACE;AACJ,GAEMC,IAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;
|
|
1
|
+
{"version":3,"file":"UIButton.js","sources":["../../../../src/components/library/ui/UIButton.jsx"],"sourcesContent":["import React from \"react\";\n\nconst VARIANT_CLASSES = {\n primary:\n \"bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-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};\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};\n\nexport default function UIButton({\n variant = \"primary\",\n size = \"md\",\n fullWidth = false,\n disabled = false,\n onClick = () => {},\n children,\n style = undefined,\n className = \"\",\n ...rest\n}) {\n const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.primary;\n const sizeClass = SIZE_CLASSES[size] ?? SIZE_CLASSES.md;\n\n return (\n <button\n type=\"button\"\n onClick={onClick}\n disabled={disabled}\n style={style}\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-brand-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\n\n"],"names":["VARIANT_CLASSES","SIZE_CLASSES","UIButton","variant","size","fullWidth","disabled","onClick","children","style","className","rest","variantClass","sizeClass","jsx"],"mappings":";;AAEA,MAAMA,IAAkB;AAAA,EACtB,SACE;AAAA,EACF,WACE;AAAA,EACF,aACE;AAAA,EACF,SACE;AAAA,EACF,OACE;AACJ,GAEMC,IAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAEA,SAAwBC,EAAS;AAAA,EAC/B,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU,MAAM;AAAA,EAAC;AAAA,EACjB,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAG;AACD,QAAMC,IAAeZ,EAAgBG,CAAO,KAAKH,EAAgB,SAC3Da,IAAYZ,EAAaG,CAAI,KAAKH,EAAa;AAErD,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAAP;AAAA,MACA,UAAAD;AAAA,MACA,OAAAG;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAG;AAAA,QACAC;AAAA,QACAR,IAAY,WAAW;AAAA,QACvBK;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useNavigate } from "react-router";
|
|
2
|
-
import {
|
|
2
|
+
import { UIButton } from '@schandlergarcia/sf-web-components';
|
|
3
3
|
|
|
4
4
|
export default function NotFound() {
|
|
5
5
|
const navigate = useNavigate();
|
|
@@ -12,7 +12,7 @@ export default function NotFound() {
|
|
|
12
12
|
<p className="text-lg text-slate-600 dark:text-slate-400 mb-8">
|
|
13
13
|
The page you're looking for doesn't exist.
|
|
14
14
|
</p>
|
|
15
|
-
<
|
|
15
|
+
<UIButton onClick={() => navigate("/")}>Go Home</UIButton>
|
|
16
16
|
</div>
|
|
17
17
|
</div>
|
|
18
18
|
);
|