@npm_leadtech/legal-contracts-ui 0.47.3 → 0.48.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 (4) hide show
  1. package/dist/components/Button.d.ts +3 -3
  2. package/dist/components/Button.js +14 -113
  3. package/dist/components/atoms/Button.utils.js +97 -0
  4. package/package.json +5 -1
package/dist/components/Button.d.ts CHANGED
@@ -11,9 +11,9 @@ export declare interface ButtonProps extends Omit<ComponentPropsWithRef<'button'
11
11
  iconPosition?: IconPosition;
12
12
  }
13
13
 
14
- export declare type ButtonSize = 'small' | 'default' | 'large';
14
+ export type ButtonSize = 'small' | 'default' | 'large';
15
15
 
16
- export declare type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'secondary-black' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
16
+ export type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'secondary-black' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
17
17
 
18
- export declare type IconPosition = 'left' | 'right' | 'top';
18
+ export type IconPosition = 'left' | 'right' | 'top';
19
19
 
package/dist/components/Button.js CHANGED
@@ -1,118 +1,19 @@
1
- import { jsx as g } from "react/jsx-runtime";
1
+ import { jsx as l } from "react/jsx-runtime";
2
+ import { getButtonClasses as p } from "./atoms/Button.utils.js";
2
3
  import "react";
3
- const p = {
4
- "primary-green": {
5
- base: "bg-primary-700 text-white border border-transparent font-semibold",
6
- hover: "hover:bg-primary-500",
7
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
8
- },
9
- "primary-darkgreen": {
10
- base: "bg-primary-900 text-white border border-transparent font-semibold",
11
- hover: "hover:bg-primary-800",
12
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
13
- },
14
- "primary-yellow": {
15
- base: "bg-secondary-500 text-neutral-900 border border-transparent font-semibold",
16
- hover: "hover:bg-secondary-400",
17
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
18
- },
19
- "primary-white": {
20
- base: "bg-white text-neutral-900 font-semibold border border-transparent",
21
- hover: "hover:bg-neutral-50",
22
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
23
- },
24
- "secondary-green": {
25
- base: "bg-white text-primary-700 border-2 border-primary-700 font-semibold",
26
- hover: "hover:bg-primary-100 hover:text-primary-800",
27
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
28
- },
29
- "secondary-yellow": {
30
- base: "bg-transparent text-neutral-900 border-2 border-secondary-500 font-semibold",
31
- hover: "hover:bg-secondary-100 hover:border-secondary-600",
32
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
33
- },
34
- "secondary-red": {
35
- base: "bg-transparent text-error-500 border-2 border-error-500 font-semibold",
36
- hover: "hover:bg-error-25",
37
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
38
- },
39
- "secondary-black": {
40
- base: "bg-transparent text-neutral-800 border-2 border-neutral-600 font-semibold",
41
- hover: "hover:bg-neutral-200",
42
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
43
- },
44
- "tertiary-bold": {
45
- base: "bg-transparent text-primary-700 font-semibold border border-transparent font-semibold p-1.5!",
46
- hover: "hover:text-primary-500 hover:bg-primary-200",
47
- disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
48
- },
49
- "tertiary-thin": {
50
- base: "bg-transparent text-neutral-800 font-normal border border-transparent p-1.5!",
51
- hover: " hover:bg-primary-100",
52
- disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
53
- },
54
- "tertiary-icon": {
55
- base: "bg-transparent text-neutral-800 font-medium border border-transparent p-1.5!",
56
- hover: "hover:bg-primary-100",
57
- disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
58
- },
59
- "tertiary-link": {
60
- base: "bg-transparent text-primary-700 underline underline-offset-2 border border-transparent",
61
- hover: "",
62
- disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
63
- },
64
- "icon-black": {
65
- base: "bg-black text-white border border-transparent font-semibold",
66
- hover: "hover:bg-neutral-800",
67
- disabled: "disabled:bg-neutral-400 disabled:cursor-not-allowed"
68
- },
69
- "icon-grey": {
70
- base: "bg-transparent text-neutral-800 border-2 border-neutral-600 font-semibold",
71
- hover: "hover:bg-neutral-200",
72
- disabled: "disabled:text-neutral-400 disabled:border-neutral-400 disabled:bg-white disabled:cursor-not-allowed"
73
- },
74
- "icon-mobile": {
75
- base: "bg-transparent text-primary-700 border border-neutral-200 border-2 px-8 rounded-sm",
76
- hover: "hover:bg-neutral-50",
77
- disabled: "disabled:text-neutral-400 disabled:border-neutral-400 disabled:bg-white disabled:cursor-not-allowed"
78
- }
79
- }, m = {
80
- small: "px-3 py-1.5 text-small",
81
- default: "px-4 py-2.5 text-medium",
82
- large: "px-6 py-3 text-big"
83
- }, x = ({
84
- children: a,
85
- type: d = "button",
86
- size: o = "default",
87
- variant: l = "primary-green",
88
- iconPosition: t = "left",
89
- className: b,
90
- disabled: e = !1,
91
- ref: s,
92
- ...n
4
+ const x = ({
5
+ children: o,
6
+ type: r = "button",
7
+ size: s = "default",
8
+ variant: e = "primary-green",
9
+ iconPosition: a = "left",
10
+ className: n,
11
+ disabled: t = !1,
12
+ ref: m,
13
+ ...u
93
14
  }) => {
94
- const r = p[l], i = () => t === "top" ? "flex-col" : t === "right" ? "flex-row-reverse" : "flex-row", u = [
95
- "inline-flex items-center justify-center gap-2 rounded-sm font-medium transition-all duration-200",
96
- "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
97
- e ? "" : "cursor-pointer",
98
- r.base,
99
- r.hover,
100
- r.disabled,
101
- m[o],
102
- i()
103
- ].join(" ");
104
- return /* @__PURE__ */ g(
105
- "button",
106
- {
107
- ref: s,
108
- type: d,
109
- disabled: e,
110
- "aria-disabled": e,
111
- className: `${u} ${b ?? ""}`,
112
- ...n,
113
- children: a
114
- }
115
- );
15
+ const f = p(s, e, a, t, n);
16
+ return /* @__PURE__ */ l("button", { ref: m, type: r, disabled: t, "aria-disabled": t, className: f, ...u, children: o });
116
17
  };
117
18
  export {
118
19
  x as Button
package/dist/components/atoms/Button.utils.js ADDED
@@ -0,0 +1,97 @@
1
+ const b = {
2
+ "primary-green": {
3
+ base: "bg-primary-700 text-white border border-transparent font-semibold",
4
+ hover: "hover:bg-primary-500",
5
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
6
+ },
7
+ "primary-darkgreen": {
8
+ base: "bg-primary-900 text-white border border-transparent font-semibold",
9
+ hover: "hover:bg-primary-800",
10
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
11
+ },
12
+ "primary-yellow": {
13
+ base: "bg-secondary-500 text-neutral-900 border border-transparent font-semibold",
14
+ hover: "hover:bg-secondary-400",
15
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
16
+ },
17
+ "primary-white": {
18
+ base: "bg-white text-neutral-900 font-semibold border border-transparent",
19
+ hover: "hover:bg-neutral-50",
20
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
21
+ },
22
+ "secondary-green": {
23
+ base: "bg-white text-primary-700 border-2 border-primary-700 font-semibold",
24
+ hover: "hover:bg-primary-100 hover:text-primary-800",
25
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
26
+ },
27
+ "secondary-yellow": {
28
+ base: "bg-transparent text-neutral-900 border-2 border-secondary-500 font-semibold",
29
+ hover: "hover:bg-secondary-100 hover:border-secondary-600",
30
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
31
+ },
32
+ "secondary-red": {
33
+ base: "bg-transparent text-error-500 border-2 border-error-500 font-semibold",
34
+ hover: "hover:bg-error-25",
35
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
36
+ },
37
+ "secondary-black": {
38
+ base: "bg-transparent text-neutral-800 border-2 border-neutral-600 font-semibold",
39
+ hover: "hover:bg-neutral-200",
40
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
41
+ },
42
+ "tertiary-bold": {
43
+ base: "bg-transparent text-primary-700 font-semibold border border-transparent font-semibold p-1.5!",
44
+ hover: "hover:text-primary-500 hover:bg-primary-200",
45
+ disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
46
+ },
47
+ "tertiary-thin": {
48
+ base: "bg-transparent text-neutral-800 font-normal border border-transparent p-1.5!",
49
+ hover: " hover:bg-primary-100",
50
+ disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
51
+ },
52
+ "tertiary-icon": {
53
+ base: "bg-transparent text-neutral-800 font-medium border border-transparent p-1.5!",
54
+ hover: "hover:bg-primary-100",
55
+ disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
56
+ },
57
+ "tertiary-link": {
58
+ base: "bg-transparent text-primary-700 underline underline-offset-2 border border-transparent",
59
+ hover: "",
60
+ disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
61
+ },
62
+ "icon-black": {
63
+ base: "bg-black text-white border border-transparent font-semibold",
64
+ hover: "hover:bg-neutral-800",
65
+ disabled: "disabled:bg-neutral-400 disabled:cursor-not-allowed"
66
+ },
67
+ "icon-grey": {
68
+ base: "bg-transparent text-neutral-800 border-2 border-neutral-600 font-semibold",
69
+ hover: "hover:bg-neutral-200",
70
+ disabled: "disabled:text-neutral-400 disabled:border-neutral-400 disabled:bg-white disabled:cursor-not-allowed"
71
+ },
72
+ "icon-mobile": {
73
+ base: "bg-transparent text-primary-700 border border-neutral-200 border-2 px-8 rounded-sm",
74
+ hover: "hover:bg-neutral-50",
75
+ disabled: "disabled:text-neutral-400 disabled:border-neutral-400 disabled:bg-white disabled:cursor-not-allowed"
76
+ }
77
+ }, s = {
78
+ small: "px-3 py-1.5 text-small",
79
+ default: "px-4 py-2.5 text-medium",
80
+ large: "px-6 py-3 text-big"
81
+ }, i = (t = "default", a = "primary-green", r = "left", d = !1, l) => {
82
+ const e = b[a], o = () => r === "top" ? "flex-col" : r === "right" ? "flex-row-reverse" : "flex-row";
83
+ return [
84
+ "inline-flex items-center justify-center gap-2 rounded-sm font-medium transition-all duration-200",
85
+ "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
86
+ d ? "" : "cursor-pointer",
87
+ e.base,
88
+ e.hover,
89
+ e.disabled,
90
+ s[t],
91
+ o(),
92
+ l
93
+ ].join(" ");
94
+ };
95
+ export {
96
+ i as getButtonClasses
97
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-contracts-ui",
3
- "version": "0.47.3",
3
+ "version": "0.48.1",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -22,6 +22,10 @@
22
22
  "import": "./dist/components/Button.js",
23
23
  "types": "./dist/components/Button.d.ts"
24
24
  },
25
+ "./components/Button.utils.ts": {
26
+ "import": "./dist/components/Button.utils.ts.js",
27
+ "types": "./dist/components/Button.utils.ts.d.ts"
28
+ },
25
29
  "./components/Card": {
26
30
  "import": "./dist/components/Card.js",
27
31
  "types": "./dist/components/Card.d.ts"