framepexls-ui-lib 0.1.7 → 0.1.8

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 (5) hide show
  1. package/dist/Button.d.mts +3 -1
  2. package/dist/Button.d.ts +3 -1
  3. package/dist/Button.js +20 -8
  4. package/dist/Button.mjs +20 -8
  5. package/package.json +4 -4
package/dist/Button.d.mts CHANGED
@@ -9,7 +9,9 @@ type ButtonProps = {
9
9
  rightIcon?: React__default.ReactNode;
10
10
  block?: boolean;
11
11
  className?: string;
12
+ active?: boolean;
13
+ inverted?: boolean;
12
14
  } & React__default.ButtonHTMLAttributes<HTMLButtonElement>;
13
- declare function Button({ children, variant, size, loading, disabled, leftIcon, rightIcon, block, className, type, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
15
+ declare function Button({ children, variant, size, loading, disabled, leftIcon, rightIcon, block, className, type, active, inverted, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
14
16
 
15
17
  export { Button as default };
package/dist/Button.d.ts CHANGED
@@ -9,7 +9,9 @@ type ButtonProps = {
9
9
  rightIcon?: React__default.ReactNode;
10
10
  block?: boolean;
11
11
  className?: string;
12
+ active?: boolean;
13
+ inverted?: boolean;
12
14
  } & React__default.ButtonHTMLAttributes<HTMLButtonElement>;
13
- declare function Button({ children, variant, size, loading, disabled, leftIcon, rightIcon, block, className, type, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
15
+ declare function Button({ children, variant, size, loading, disabled, leftIcon, rightIcon, block, className, type, active, inverted, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
14
16
 
15
17
  export { Button as default };
package/dist/Button.js CHANGED
@@ -34,26 +34,38 @@ function Button({
34
34
  block = false,
35
35
  className = "",
36
36
  type = "button",
37
+ active = false,
38
+ inverted = false,
37
39
  ...rest
38
40
  }) {
39
41
  const base = "inline-flex items-center justify-center gap-2 rounded-xl font-medium transition focus:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed";
40
42
  const sizes = size === "sm" ? "h-9 px-3 text-sm" : size === "lg" ? "h-11 px-5 text-base" : "h-10 px-4 text-sm";
41
- const variants = {
42
- primary: "bg-slate-900 text-white hover:opacity-90 active:scale-[.98] dark:bg-white dark:text-slate-900",
43
- secondary: "border border-slate-300/80 bg-white text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
44
- outline: "border border-slate-300/80 bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/10",
45
- ghost: "bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:text-slate-200 dark:hover:bg-white/10",
46
- danger: "bg-blue-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-blue-500"
47
- };
43
+ const variantClass = (() => {
44
+ switch (variant) {
45
+ case "primary":
46
+ return "bg-slate-900 text-white hover:opacity-90 active:scale-[.98] dark:bg-white dark:text-slate-900";
47
+ case "secondary":
48
+ return inverted ? "border border-white/15 bg-white/10 text-white hover:bg-white/15 active:scale-[.98]" : "border border-slate-300/80 bg-white text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10";
49
+ case "outline":
50
+ return inverted ? "border border-white/20 bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : "border border-slate-300/80 bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/10";
51
+ case "ghost":
52
+ return inverted ? "bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : "bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:text-slate-200 dark:hover:bg-white/10";
53
+ case "danger":
54
+ return "bg-blue-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-blue-500";
55
+ }
56
+ })();
57
+ const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100" : "" : "";
48
58
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
49
59
  "button",
50
60
  {
51
61
  type,
52
62
  disabled: disabled || loading,
63
+ "aria-pressed": active ? true : void 0,
53
64
  className: [
54
65
  base,
55
66
  sizes,
56
- variants[variant],
67
+ variantClass,
68
+ activeClass,
57
69
  block ? "w-full" : "",
58
70
  className
59
71
  ].join(" "),
package/dist/Button.mjs CHANGED
@@ -11,26 +11,38 @@ function Button({
11
11
  block = false,
12
12
  className = "",
13
13
  type = "button",
14
+ active = false,
15
+ inverted = false,
14
16
  ...rest
15
17
  }) {
16
18
  const base = "inline-flex items-center justify-center gap-2 rounded-xl font-medium transition focus:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed";
17
19
  const sizes = size === "sm" ? "h-9 px-3 text-sm" : size === "lg" ? "h-11 px-5 text-base" : "h-10 px-4 text-sm";
18
- const variants = {
19
- primary: "bg-slate-900 text-white hover:opacity-90 active:scale-[.98] dark:bg-white dark:text-slate-900",
20
- secondary: "border border-slate-300/80 bg-white text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
21
- outline: "border border-slate-300/80 bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/10",
22
- ghost: "bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:text-slate-200 dark:hover:bg-white/10",
23
- danger: "bg-blue-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-blue-500"
24
- };
20
+ const variantClass = (() => {
21
+ switch (variant) {
22
+ case "primary":
23
+ return "bg-slate-900 text-white hover:opacity-90 active:scale-[.98] dark:bg-white dark:text-slate-900";
24
+ case "secondary":
25
+ return inverted ? "border border-white/15 bg-white/10 text-white hover:bg-white/15 active:scale-[.98]" : "border border-slate-300/80 bg-white text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10";
26
+ case "outline":
27
+ return inverted ? "border border-white/20 bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : "border border-slate-300/80 bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/10";
28
+ case "ghost":
29
+ return inverted ? "bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : "bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:text-slate-200 dark:hover:bg-white/10";
30
+ case "danger":
31
+ return "bg-blue-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-blue-500";
32
+ }
33
+ })();
34
+ const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100" : "" : "";
25
35
  return /* @__PURE__ */ jsxs(
26
36
  "button",
27
37
  {
28
38
  type,
29
39
  disabled: disabled || loading,
40
+ "aria-pressed": active ? true : void 0,
30
41
  className: [
31
42
  base,
32
43
  sizes,
33
- variants[variant],
44
+ variantClass,
45
+ activeClass,
34
46
  block ? "w-full" : "",
35
47
  className
36
48
  ].join(" "),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",
@@ -36,8 +36,8 @@
36
36
  "devDependencies": {
37
37
  "typescript": "^5.6.3",
38
38
  "tsup": "^8.1.0",
39
- "@types/react": "^18",
40
- "@types/react-dom": "^18",
39
+ "@types/react": "^19",
40
+ "@types/react-dom": "^19",
41
41
  "tailwindcss": "^4.1.13",
42
42
  "@tailwindcss/postcss": "^4.1.13",
43
43
  "motion": "^12.23.16",
@@ -58,4 +58,4 @@
58
58
  "url": "https://github.com/cponce-framepexls/ui-lib/issues"
59
59
  },
60
60
  "homepage": "https://github.com/cponce-framepexls/ui-lib#readme"
61
- }
61
+ }