@schandlergarcia/sf-web-components 1.3.0 → 1.3.1

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 (9) hide show
  1. package/dist/components/library/ui/UIButton.d.ts +22 -11
  2. package/dist/components/library/ui/UIButton.js +23 -28
  3. package/dist/components/library/ui/UIButton.js.map +1 -1
  4. package/dist/components/library/ui/dialog.d.ts +1 -1
  5. package/dist/components/library/ui/popover.d.ts +1 -1
  6. package/package.json +7 -3
  7. package/src/components/library/ui/Dialog.tsx +1 -1
  8. package/src/components/library/ui/Popover.tsx +1 -1
  9. package/src/components/library/ui/{UIButton.jsx → UIButton.tsx} +15 -14
package/dist/components/library/ui/UIButton.d.ts CHANGED
@@ -1,11 +1,22 @@
1
- export default function UIButton({ variant, size, fullWidth, disabled, onClick, children, style, className, ...rest }: {
2
- [x: string]: any;
3
- variant?: string | undefined;
4
- size?: string | undefined;
5
- fullWidth?: boolean | undefined;
6
- disabled?: boolean | undefined;
7
- onClick?: (() => void) | undefined;
8
- children: any;
9
- style?: undefined;
10
- className?: string | undefined;
11
- }): import("react/jsx-runtime").JSX.Element;
1
+ import * as React from "react";
2
+ declare const VARIANT_CLASSES: {
3
+ readonly primary: "bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400 border-transparent";
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
+ readonly destructive: "bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent";
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
+ 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-brand-600 underline-offset-4 hover:underline dark:text-brand-400 border-transparent";
9
+ };
10
+ declare const SIZE_CLASSES: {
11
+ readonly sm: "h-8 px-3 text-sm";
12
+ readonly md: "h-10 px-4 text-sm";
13
+ readonly lg: "h-12 px-5 text-base";
14
+ readonly icon: "h-10 w-10 p-0";
15
+ };
16
+ export interface UIButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
17
+ variant?: keyof typeof VARIANT_CLASSES;
18
+ size?: keyof typeof SIZE_CLASSES;
19
+ fullWidth?: boolean;
20
+ }
21
+ export default function UIButton({ variant, size, fullWidth, disabled, className, children, ...rest }: UIButtonProps): import("react/jsx-runtime").JSX.Element;
22
+ export {};
package/dist/components/library/ui/UIButton.js CHANGED
@@ -1,52 +1,47 @@
1
- import { jsx as h } from "react/jsx-runtime";
2
- import "react";
3
- const e = {
1
+ import { jsx as b } from "react/jsx-runtime";
2
+ const i = {
4
3
  primary: "bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400 border-transparent",
5
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",
6
5
  destructive: "bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent",
7
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",
8
- ghost: "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent"
9
- }, t = {
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-brand-600 underline-offset-4 hover:underline dark:text-brand-400 border-transparent"
9
+ }, g = {
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 c({
16
- variant: r = "primary",
17
- size: a = "md",
18
- fullWidth: s = !1,
19
- disabled: o = !1,
20
- onClick: n = () => {
21
- },
22
- children: d,
23
- style: i = void 0,
24
- className: l = "",
25
- ...b
15
+ function u({
16
+ variant: e = "primary",
17
+ size: t = "md",
18
+ fullWidth: r = !1,
19
+ disabled: a = !1,
20
+ className: s = "",
21
+ children: n,
22
+ ...o
26
23
  }) {
27
- const g = e[r] ?? e.primary, f = t[a] ?? t.md;
28
- return /* @__PURE__ */ h(
24
+ const d = i[e], l = g[t];
25
+ return /* @__PURE__ */ b(
29
26
  "button",
30
27
  {
31
28
  type: "button",
32
- onClick: n,
33
- disabled: o,
34
- style: i,
29
+ disabled: a,
35
30
  className: [
36
31
  "inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition",
37
32
  "focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
38
33
  "disabled:cursor-not-allowed disabled:opacity-60",
39
- g,
40
- f,
41
- s ? "w-full" : "",
42
- l
34
+ d,
35
+ l,
36
+ r ? "w-full" : "",
37
+ s
43
38
  ].filter(Boolean).join(" "),
44
- ...b,
45
- children: d
39
+ ...o,
40
+ children: n
46
41
  }
47
42
  );
48
43
  }
49
44
  export {
50
- c as default
45
+ u as default
51
46
  };
52
47
  //# sourceMappingURL=UIButton.js.map
package/dist/components/library/ui/UIButton.js.map CHANGED
@@ -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 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;"}
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-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 link: \"text-brand-600 underline-offset-4 hover:underline dark:text-brand-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-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"],"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/dist/components/library/ui/dialog.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { Dialog as DialogPrimitive } from "radix-ui";
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;
package/dist/components/library/ui/popover.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { Popover as PopoverPrimitive } from "radix-ui";
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@schandlergarcia/sf-web-components",
3
- "version": "1.3.0",
3
+ "version": "1.3.1",
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",
package/src/components/library/ui/Dialog.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { Dialog as DialogPrimitive } from "radix-ui";
2
+ import * as DialogPrimitive from "@radix-ui/react-dialog";
3
3
 
4
4
  function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
5
5
  return <DialogPrimitive.Root {...props} />;
package/src/components/library/ui/Popover.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { Popover as PopoverPrimitive } from "radix-ui";
2
+ import * as PopoverPrimitive from "@radix-ui/react-popover";
3
3
 
4
4
  function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
5
5
  return <PopoverPrimitive.Root {...props} />;
package/src/components/library/ui/{UIButton.jsx → UIButton.tsx} RENAMED
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import * as React from "react";
2
2
 
3
3
  const VARIANT_CLASSES = {
4
4
  primary:
@@ -10,36 +10,39 @@ const VARIANT_CLASSES = {
10
10
  outline:
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
- "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent"
14
- };
13
+ "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent",
14
+ link: "text-brand-600 underline-offset-4 hover:underline dark:text-brand-400 border-transparent"
15
+ } as const;
15
16
 
16
17
  const SIZE_CLASSES = {
17
18
  sm: "h-8 px-3 text-sm",
18
19
  md: "h-10 px-4 text-sm",
19
20
  lg: "h-12 px-5 text-base",
20
21
  icon: "h-10 w-10 p-0"
21
- };
22
+ } as const;
23
+
24
+ export interface UIButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
25
+ variant?: keyof typeof VARIANT_CLASSES;
26
+ size?: keyof typeof SIZE_CLASSES;
27
+ fullWidth?: boolean;
28
+ }
22
29
 
23
30
  export default function UIButton({
24
31
  variant = "primary",
25
32
  size = "md",
26
33
  fullWidth = false,
27
34
  disabled = false,
28
- onClick = () => {},
29
- children,
30
- style = undefined,
31
35
  className = "",
36
+ children,
32
37
  ...rest
33
- }) {
34
- const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.primary;
35
- const sizeClass = SIZE_CLASSES[size] ?? SIZE_CLASSES.md;
38
+ }: UIButtonProps) {
39
+ const variantClass = VARIANT_CLASSES[variant];
40
+ const sizeClass = SIZE_CLASSES[size];
36
41
 
37
42
  return (
38
43
  <button
39
44
  type="button"
40
- onClick={onClick}
41
45
  disabled={disabled}
42
- style={style}
43
46
  className={[
44
47
  "inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition",
45
48
  "focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
@@ -57,5 +60,3 @@ export default function UIButton({
57
60
  </button>
58
61
  );
59
62
  }
60
-
61
-