analytica-frontend-lib 1.0.22 → 1.0.24
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/chunk-CETSS3RA.mjs +52 -0
- package/dist/chunk-GSEO6POW.mjs +93 -0
- package/dist/chunk-IB4IJ3GF.mjs +60 -0
- package/dist/chunk-IH5TEC64.mjs +35 -0
- package/dist/chunk-JNPCNN67.mjs +86 -0
- package/dist/chunk-KT6HNGRV.mjs +241 -0
- package/dist/chunk-LYOJCBOM.mjs +195 -0
- package/dist/chunk-MI5FIRHM.mjs +75 -0
- package/dist/chunk-NWGRQN6R.mjs +108 -0
- package/dist/chunk-QODEDLAX.mjs +142 -0
- package/dist/chunk-QOFMTSHE.mjs +44 -0
- package/dist/chunk-RPYPJ5O5.mjs +55 -0
- package/dist/chunk-SESX5OEP.mjs +57 -0
- package/dist/chunk-TT3VCQGR.mjs +53 -0
- package/dist/chunk-WIOCQOM7.mjs +20 -0
- package/dist/client-components.d.mts +9 -0
- package/dist/client-components.d.ts +9 -0
- package/dist/client-components.js +755 -0
- package/dist/client-components.mjs +39 -0
- package/dist/components/Alert/Alert.d.mts +13 -0
- package/dist/components/Alert/Alert.d.ts +13 -0
- package/dist/components/Alert/Alert.js +158 -0
- package/dist/components/Alert/Alert.mjs +7 -0
- package/dist/components/Badge/Badge.d.mts +47 -0
- package/dist/components/Badge/Badge.d.ts +47 -0
- package/dist/components/Badge/Badge.js +117 -0
- package/dist/components/Badge/Badge.mjs +6 -0
- package/dist/components/Button/Button.d.mts +46 -0
- package/dist/components/Button/Button.d.ts +46 -0
- package/dist/components/Button/Button.js +84 -0
- package/dist/components/Button/Button.mjs +6 -0
- package/dist/components/CheckBox/CheckBox.d.mts +74 -0
- package/dist/components/CheckBox/CheckBox.d.ts +74 -0
- package/dist/components/CheckBox/CheckBox.js +264 -0
- package/dist/components/CheckBox/CheckBox.mjs +8 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.mts +29 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +29 -0
- package/dist/components/DropdownMenu/DropdownMenu.js +262 -0
- package/dist/components/DropdownMenu/DropdownMenu.mjs +17 -0
- package/dist/components/IconButton/IconButton.d.mts +77 -0
- package/dist/components/IconButton/IconButton.d.ts +77 -0
- package/dist/components/IconButton/IconButton.js +79 -0
- package/dist/components/IconButton/IconButton.mjs +6 -0
- package/dist/components/IconRoundedButton/IconRoundedButton.d.mts +35 -0
- package/dist/components/IconRoundedButton/IconRoundedButton.d.ts +35 -0
- package/dist/components/IconRoundedButton/IconRoundedButton.js +68 -0
- package/dist/components/IconRoundedButton/IconRoundedButton.mjs +6 -0
- package/dist/components/NavButton/NavButton.d.mts +58 -0
- package/dist/components/NavButton/NavButton.d.ts +58 -0
- package/dist/components/NavButton/NavButton.js +76 -0
- package/dist/components/NavButton/NavButton.mjs +6 -0
- package/dist/components/SelectionButton/SelectionButton.d.mts +58 -0
- package/dist/components/SelectionButton/SelectionButton.d.ts +58 -0
- package/dist/components/SelectionButton/SelectionButton.js +81 -0
- package/dist/components/SelectionButton/SelectionButton.mjs +6 -0
- package/dist/components/Table/Table.d.mts +17 -0
- package/dist/components/Table/Table.d.ts +17 -0
- package/dist/components/Table/Table.js +139 -0
- package/dist/components/Table/Table.mjs +20 -0
- package/dist/components/Text/Text.d.mts +59 -0
- package/dist/components/Text/Text.d.ts +59 -0
- package/dist/components/Text/Text.js +77 -0
- package/dist/components/Text/Text.mjs +6 -0
- package/dist/components/TextArea/TextArea.d.mts +69 -0
- package/dist/components/TextArea/TextArea.d.ts +69 -0
- package/dist/components/TextArea/TextArea.js +211 -0
- package/dist/components/TextArea/TextArea.mjs +8 -0
- package/dist/components/Toast/Toast.d.mts +17 -0
- package/dist/components/Toast/Toast.d.ts +17 -0
- package/dist/components/Toast/Toast.js +100 -0
- package/dist/components/Toast/Toast.mjs +7 -0
- package/dist/components/Toast/utils/ToastStore.d.mts +19 -0
- package/dist/components/Toast/utils/ToastStore.d.ts +19 -0
- package/dist/components/Toast/utils/ToastStore.js +44 -0
- package/dist/components/Toast/utils/ToastStore.mjs +6 -0
- package/dist/components/Toast/utils/Toaster.d.mts +11 -0
- package/dist/components/Toast/utils/Toaster.d.ts +11 -0
- package/dist/components/Toast/utils/Toaster.js +145 -0
- package/dist/components/Toast/utils/Toaster.mjs +11 -0
- package/dist/index.d.mts +168 -355
- package/dist/index.d.ts +168 -355
- package/dist/index.js +341 -936
- package/dist/index.mjs +340 -941
- package/dist/server-components.d.mts +11 -0
- package/dist/server-components.d.ts +11 -0
- package/dist/server-components.js +629 -0
- package/dist/server-components.mjs +52 -0
- package/package.json +76 -3
package/dist/index.js
CHANGED
|
@@ -20,17 +20,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.ts
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
+
Alert: () => Alert,
|
|
23
24
|
Badge: () => Badge,
|
|
24
25
|
Button: () => Button,
|
|
25
|
-
CheckBox: () => CheckBox,
|
|
26
|
-
DropdownMenu: () => DropdownMenu,
|
|
27
|
-
DropdownMenuTrigger: () => DropdownMenuTrigger,
|
|
28
26
|
IconButton: () => IconButton,
|
|
29
27
|
IconRoundedButton: () => IconRoundedButton,
|
|
30
|
-
MenuContent: () => MenuContent,
|
|
31
|
-
MenuItem: () => MenuItem,
|
|
32
|
-
MenuLabel: () => MenuLabel,
|
|
33
|
-
MenuSeparator: () => MenuSeparator,
|
|
34
28
|
NavButton: () => NavButton,
|
|
35
29
|
SelectionButton: () => SelectionButton,
|
|
36
30
|
Table: () => Table,
|
|
@@ -41,169 +35,12 @@ __export(index_exports, {
|
|
|
41
35
|
TableHead: () => TableHead,
|
|
42
36
|
TableHeader: () => TableHeader,
|
|
43
37
|
TableRow: () => TableRow,
|
|
44
|
-
Text: () => Text
|
|
45
|
-
TextArea: () => TextArea,
|
|
46
|
-
Toast: () => Toast,
|
|
47
|
-
Toaster: () => Toaster,
|
|
48
|
-
useToast: () => useToast,
|
|
49
|
-
useToastStore: () => useToastStore
|
|
38
|
+
Text: () => Text
|
|
50
39
|
});
|
|
51
40
|
module.exports = __toCommonJS(index_exports);
|
|
52
41
|
|
|
53
|
-
// src/components/Button/Button.tsx
|
|
54
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
55
|
-
var VARIANT_ACTION_CLASSES = {
|
|
56
|
-
solid: {
|
|
57
|
-
primary: "bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
58
|
-
positive: "bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
59
|
-
negative: "bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
60
|
-
},
|
|
61
|
-
outline: {
|
|
62
|
-
primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
63
|
-
positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
64
|
-
negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
65
|
-
},
|
|
66
|
-
link: {
|
|
67
|
-
primary: "bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
68
|
-
positive: "bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
69
|
-
negative: "bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
var SIZE_CLASSES = {
|
|
73
|
-
"extra-small": "text-xs px-3.5 py-2",
|
|
74
|
-
small: "text-sm px-4 py-2.5",
|
|
75
|
-
medium: "text-md px-5 py-2.5",
|
|
76
|
-
large: "text-lg px-6 py-3",
|
|
77
|
-
"extra-large": "text-lg px-7 py-3.5"
|
|
78
|
-
};
|
|
79
|
-
var Button = ({
|
|
80
|
-
children,
|
|
81
|
-
iconLeft,
|
|
82
|
-
iconRight,
|
|
83
|
-
size = "medium",
|
|
84
|
-
variant = "solid",
|
|
85
|
-
action = "primary",
|
|
86
|
-
className = "",
|
|
87
|
-
disabled,
|
|
88
|
-
type = "button",
|
|
89
|
-
...props
|
|
90
|
-
}) => {
|
|
91
|
-
const sizeClasses = SIZE_CLASSES[size];
|
|
92
|
-
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
|
|
93
|
-
const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
|
|
94
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
95
|
-
"button",
|
|
96
|
-
{
|
|
97
|
-
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
98
|
-
disabled,
|
|
99
|
-
type,
|
|
100
|
-
...props,
|
|
101
|
-
children: [
|
|
102
|
-
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
|
|
103
|
-
children,
|
|
104
|
-
iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
|
|
105
|
-
]
|
|
106
|
-
}
|
|
107
|
-
);
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
// src/components/IconRoundedButton/IconRoundedButton.tsx
|
|
111
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
112
|
-
var IconRoundedButton = ({
|
|
113
|
-
icon,
|
|
114
|
-
className = "",
|
|
115
|
-
disabled,
|
|
116
|
-
...props
|
|
117
|
-
}) => {
|
|
118
|
-
const baseClasses = [
|
|
119
|
-
"inline-flex",
|
|
120
|
-
"items-center",
|
|
121
|
-
"justify-center",
|
|
122
|
-
"w-8",
|
|
123
|
-
"h-8",
|
|
124
|
-
"rounded-full",
|
|
125
|
-
"cursor-pointer",
|
|
126
|
-
"border",
|
|
127
|
-
"border-background-200",
|
|
128
|
-
"bg-background",
|
|
129
|
-
"text-text-950",
|
|
130
|
-
"hover:shadow-hard-shadow-1",
|
|
131
|
-
"focus-visible:outline-none",
|
|
132
|
-
"focus-visible:shadow-hard-shadow-1",
|
|
133
|
-
"focus-visible:ring-2",
|
|
134
|
-
"focus-visible:ring-indicator-info",
|
|
135
|
-
"focus-visible:ring-offset-0",
|
|
136
|
-
"disabled:opacity-50",
|
|
137
|
-
"disabled:cursor-not-allowed"
|
|
138
|
-
].join(" ");
|
|
139
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
140
|
-
"button",
|
|
141
|
-
{
|
|
142
|
-
type: "button",
|
|
143
|
-
className: `${baseClasses} ${className}`,
|
|
144
|
-
disabled,
|
|
145
|
-
...props,
|
|
146
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
|
|
147
|
-
}
|
|
148
|
-
);
|
|
149
|
-
};
|
|
150
|
-
|
|
151
|
-
// src/components/SelectionButton/SelectionButton.tsx
|
|
152
|
-
var import_react = require("react");
|
|
153
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
154
|
-
var SelectionButton = (0, import_react.forwardRef)(
|
|
155
|
-
({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
|
|
156
|
-
const baseClasses = [
|
|
157
|
-
"inline-flex",
|
|
158
|
-
"items-center",
|
|
159
|
-
"justify-start",
|
|
160
|
-
"gap-2",
|
|
161
|
-
"p-4",
|
|
162
|
-
"rounded-xl",
|
|
163
|
-
"cursor-pointer",
|
|
164
|
-
"border",
|
|
165
|
-
"border-border-50",
|
|
166
|
-
"bg-background",
|
|
167
|
-
"text-sm",
|
|
168
|
-
"text-text-700",
|
|
169
|
-
"font-bold",
|
|
170
|
-
"shadow-soft-shadow-1",
|
|
171
|
-
"hover:bg-background-100",
|
|
172
|
-
"focus-visible:outline-none",
|
|
173
|
-
"focus-visible:ring-2",
|
|
174
|
-
"focus-visible:ring-indicator-info",
|
|
175
|
-
"focus-visible:ring-offset-0",
|
|
176
|
-
"focus-visible:shadow-none",
|
|
177
|
-
"active:ring-2",
|
|
178
|
-
"active:ring-primary-950",
|
|
179
|
-
"active:ring-offset-0",
|
|
180
|
-
"active:shadow-none",
|
|
181
|
-
"disabled:opacity-50",
|
|
182
|
-
"disabled:cursor-not-allowed"
|
|
183
|
-
];
|
|
184
|
-
const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
|
|
185
|
-
const allClasses = [...baseClasses, ...stateClasses].join(" ");
|
|
186
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
187
|
-
"button",
|
|
188
|
-
{
|
|
189
|
-
ref,
|
|
190
|
-
type: "button",
|
|
191
|
-
className: `${allClasses} ${className}`,
|
|
192
|
-
disabled,
|
|
193
|
-
"aria-pressed": selected,
|
|
194
|
-
...props,
|
|
195
|
-
children: [
|
|
196
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
|
|
197
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: label })
|
|
198
|
-
]
|
|
199
|
-
}
|
|
200
|
-
);
|
|
201
|
-
}
|
|
202
|
-
);
|
|
203
|
-
SelectionButton.displayName = "SelectionButton";
|
|
204
|
-
|
|
205
42
|
// src/components/Text/Text.tsx
|
|
206
|
-
var
|
|
43
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
207
44
|
var Text = ({
|
|
208
45
|
children,
|
|
209
46
|
size = "md",
|
|
@@ -242,7 +79,7 @@ var Text = ({
|
|
|
242
79
|
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
|
|
243
80
|
const baseClasses = "font-primary";
|
|
244
81
|
const Component = as ?? "p";
|
|
245
|
-
return /* @__PURE__ */ (0,
|
|
82
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
246
83
|
Component,
|
|
247
84
|
{
|
|
248
85
|
className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
|
|
@@ -252,140 +89,66 @@ var Text = ({
|
|
|
252
89
|
);
|
|
253
90
|
};
|
|
254
91
|
|
|
255
|
-
// src/components/
|
|
256
|
-
var
|
|
257
|
-
var
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
textarea: "h-24 text-sm",
|
|
263
|
-
// 96px height, 14px font
|
|
264
|
-
textSize: "sm"
|
|
265
|
-
},
|
|
266
|
-
medium: {
|
|
267
|
-
container: "w-72",
|
|
268
|
-
// 288px width
|
|
269
|
-
textarea: "h-24 text-base",
|
|
270
|
-
// 96px height, 16px font
|
|
271
|
-
textSize: "md"
|
|
92
|
+
// src/components/Button/Button.tsx
|
|
93
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
94
|
+
var VARIANT_ACTION_CLASSES = {
|
|
95
|
+
solid: {
|
|
96
|
+
primary: "bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
97
|
+
positive: "bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
98
|
+
negative: "bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
272
99
|
},
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
// 96px height, 18px font
|
|
278
|
-
textSize: "lg"
|
|
100
|
+
outline: {
|
|
101
|
+
primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
102
|
+
positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
103
|
+
negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
279
104
|
},
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
// 96px height, 20px font
|
|
285
|
-
textSize: "xl"
|
|
105
|
+
link: {
|
|
106
|
+
primary: "bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
107
|
+
positive: "bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
108
|
+
negative: "bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
286
109
|
}
|
|
287
110
|
};
|
|
288
|
-
var
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
},
|
|
295
|
-
hovered: {
|
|
296
|
-
base: "border-border-400 bg-background text-text-600",
|
|
297
|
-
hover: "",
|
|
298
|
-
focus: "focus:border-border-500"
|
|
299
|
-
},
|
|
300
|
-
focused: {
|
|
301
|
-
base: "border-2 border-primary-950 bg-background text-text-900",
|
|
302
|
-
hover: "",
|
|
303
|
-
focus: ""
|
|
304
|
-
},
|
|
305
|
-
invalid: {
|
|
306
|
-
base: "border-2 border-red-700 bg-white text-gray-800",
|
|
307
|
-
hover: "hover:border-red-700",
|
|
308
|
-
focus: "focus:border-red-700"
|
|
309
|
-
},
|
|
310
|
-
disabled: {
|
|
311
|
-
base: "border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40",
|
|
312
|
-
hover: "",
|
|
313
|
-
focus: ""
|
|
314
|
-
}
|
|
111
|
+
var SIZE_CLASSES = {
|
|
112
|
+
"extra-small": "text-xs px-3.5 py-2",
|
|
113
|
+
small: "text-sm px-4 py-2.5",
|
|
114
|
+
medium: "text-md px-5 py-2.5",
|
|
115
|
+
large: "text-lg px-6 py-3",
|
|
116
|
+
"extra-large": "text-lg px-7 py-3.5"
|
|
315
117
|
};
|
|
316
|
-
var
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
props.onBlur?.(event);
|
|
344
|
-
};
|
|
345
|
-
let currentState = disabled ? "disabled" : state;
|
|
346
|
-
if (isFocused && currentState !== "invalid" && currentState !== "disabled") {
|
|
347
|
-
currentState = "focused";
|
|
118
|
+
var Button = ({
|
|
119
|
+
children,
|
|
120
|
+
iconLeft,
|
|
121
|
+
iconRight,
|
|
122
|
+
size = "medium",
|
|
123
|
+
variant = "solid",
|
|
124
|
+
action = "primary",
|
|
125
|
+
className = "",
|
|
126
|
+
disabled,
|
|
127
|
+
type = "button",
|
|
128
|
+
...props
|
|
129
|
+
}) => {
|
|
130
|
+
const sizeClasses = SIZE_CLASSES[size];
|
|
131
|
+
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
|
|
132
|
+
const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
|
|
133
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
134
|
+
"button",
|
|
135
|
+
{
|
|
136
|
+
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
137
|
+
disabled,
|
|
138
|
+
type,
|
|
139
|
+
...props,
|
|
140
|
+
children: [
|
|
141
|
+
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
|
|
142
|
+
children,
|
|
143
|
+
iconRight && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
|
|
144
|
+
]
|
|
348
145
|
}
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
|
|
352
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
|
|
353
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
354
|
-
Text,
|
|
355
|
-
{
|
|
356
|
-
as: "label",
|
|
357
|
-
htmlFor: inputId,
|
|
358
|
-
size: sizeClasses.textSize,
|
|
359
|
-
weight: "medium",
|
|
360
|
-
color: "text-text-950",
|
|
361
|
-
className: `mb-1.5 ${labelClassName}`,
|
|
362
|
-
children: label
|
|
363
|
-
}
|
|
364
|
-
),
|
|
365
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
366
|
-
"textarea",
|
|
367
|
-
{
|
|
368
|
-
ref,
|
|
369
|
-
id: inputId,
|
|
370
|
-
disabled,
|
|
371
|
-
onChange: handleChange,
|
|
372
|
-
onFocus: handleFocus,
|
|
373
|
-
onBlur: handleBlur,
|
|
374
|
-
className: textareaClasses,
|
|
375
|
-
placeholder,
|
|
376
|
-
...props
|
|
377
|
-
}
|
|
378
|
-
),
|
|
379
|
-
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
|
|
380
|
-
helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
|
|
381
|
-
] });
|
|
382
|
-
}
|
|
383
|
-
);
|
|
384
|
-
TextArea.displayName = "TextArea";
|
|
146
|
+
);
|
|
147
|
+
};
|
|
385
148
|
|
|
386
149
|
// src/components/Badge/Badge.tsx
|
|
387
150
|
var import_phosphor_react = require("phosphor-react");
|
|
388
|
-
var
|
|
151
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
389
152
|
var VARIANT_ACTION_CLASSES2 = {
|
|
390
153
|
solid: {
|
|
391
154
|
error: "bg-error text-error-700 focus-visible:outline-none",
|
|
@@ -413,7 +176,7 @@ var VARIANT_ACTION_CLASSES2 = {
|
|
|
413
176
|
},
|
|
414
177
|
notification: "text-primary"
|
|
415
178
|
};
|
|
416
|
-
var
|
|
179
|
+
var SIZE_CLASSES2 = {
|
|
417
180
|
small: "text-2xs px-2 py-1",
|
|
418
181
|
medium: "text-xs px-2 py-1",
|
|
419
182
|
large: "text-sm px-2 py-1"
|
|
@@ -434,21 +197,21 @@ var Badge = ({
|
|
|
434
197
|
notificationActive = false,
|
|
435
198
|
...props
|
|
436
199
|
}) => {
|
|
437
|
-
const sizeClasses =
|
|
200
|
+
const sizeClasses = SIZE_CLASSES2[size];
|
|
438
201
|
const sizeClassesIcon = SIZE_CLASSES_ICON[size];
|
|
439
202
|
const variantActionMap = VARIANT_ACTION_CLASSES2[variant] || {};
|
|
440
203
|
const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
|
|
441
204
|
const baseClasses = "inline-flex items-center justify-center rounded-xs font-medium gap-1 relative";
|
|
442
205
|
const baseClassesIcon = "flex items-center";
|
|
443
206
|
if (variant === "notification") {
|
|
444
|
-
return /* @__PURE__ */ (0,
|
|
207
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
445
208
|
"div",
|
|
446
209
|
{
|
|
447
210
|
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
448
211
|
...props,
|
|
449
212
|
children: [
|
|
450
|
-
/* @__PURE__ */ (0,
|
|
451
|
-
notificationActive && /* @__PURE__ */ (0,
|
|
213
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.Bell, { size: 24, className: "text-primary-950" }),
|
|
214
|
+
notificationActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
452
215
|
"span",
|
|
453
216
|
{
|
|
454
217
|
"data-testid": "notification-dot",
|
|
@@ -459,530 +222,196 @@ var Badge = ({
|
|
|
459
222
|
}
|
|
460
223
|
);
|
|
461
224
|
}
|
|
462
|
-
return /* @__PURE__ */ (0,
|
|
225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
463
226
|
"div",
|
|
464
227
|
{
|
|
465
228
|
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
466
229
|
...props,
|
|
467
230
|
children: [
|
|
468
|
-
iconLeft && /* @__PURE__ */ (0,
|
|
231
|
+
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
|
|
469
232
|
children,
|
|
470
|
-
iconRight && /* @__PURE__ */ (0,
|
|
233
|
+
iconRight && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
|
|
471
234
|
]
|
|
472
235
|
}
|
|
473
236
|
);
|
|
474
237
|
};
|
|
475
238
|
|
|
476
|
-
// src/components/
|
|
477
|
-
var import_react3 = require("react");
|
|
239
|
+
// src/components/Alert/Alert.tsx
|
|
478
240
|
var import_phosphor_react2 = require("phosphor-react");
|
|
479
|
-
var
|
|
480
|
-
var
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
borderWidth: "border-2",
|
|
488
|
-
iconSize: 14,
|
|
489
|
-
// pixels for Phosphor icons
|
|
490
|
-
labelHeight: "h-[21px]"
|
|
491
|
-
},
|
|
492
|
-
medium: {
|
|
493
|
-
checkbox: "w-5 h-5",
|
|
494
|
-
// 20px x 20px
|
|
495
|
-
textSize: "md",
|
|
496
|
-
spacing: "gap-2",
|
|
497
|
-
// 8px
|
|
498
|
-
borderWidth: "border-2",
|
|
499
|
-
iconSize: 16,
|
|
500
|
-
// pixels for Phosphor icons
|
|
501
|
-
labelHeight: "h-6"
|
|
241
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
242
|
+
var VARIANT_ACTION_CLASSES3 = {
|
|
243
|
+
solid: {
|
|
244
|
+
default: "bg-background-50 border-transparent",
|
|
245
|
+
info: "bg-info border-transparent",
|
|
246
|
+
success: "bg-success border-transparent",
|
|
247
|
+
warning: "bg-warning border-transparent",
|
|
248
|
+
error: "bg-error border-transparent"
|
|
502
249
|
},
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
borderWidth: "border-[3px]",
|
|
510
|
-
// 3px border
|
|
511
|
-
iconSize: 20,
|
|
512
|
-
// pixels for Phosphor icons
|
|
513
|
-
labelHeight: "h-[27px]"
|
|
250
|
+
outline: {
|
|
251
|
+
default: "bg-background border border-border-100",
|
|
252
|
+
info: "bg-background border border-border-100",
|
|
253
|
+
success: "bg-background border border-border-100",
|
|
254
|
+
warning: "bg-background border border-border-100",
|
|
255
|
+
error: "bg-background border border-border-100"
|
|
514
256
|
}
|
|
515
257
|
};
|
|
516
|
-
var
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
hovered: {
|
|
523
|
-
unchecked: "border-border-500 bg-background",
|
|
524
|
-
checked: "border-primary-800 bg-primary-800 text-text"
|
|
525
|
-
},
|
|
526
|
-
focused: {
|
|
527
|
-
unchecked: "border-indicator-info bg-background ring-2 ring-indicator-info/20",
|
|
528
|
-
checked: "border-indicator-info bg-primary-950 text-text ring-2 ring-indicator-info/20"
|
|
529
|
-
},
|
|
530
|
-
invalid: {
|
|
531
|
-
unchecked: "border-error-700 bg-background hover:border-error-600",
|
|
532
|
-
checked: "border-error-700 bg-primary-950 text-text"
|
|
533
|
-
},
|
|
534
|
-
disabled: {
|
|
535
|
-
unchecked: "border-border-400 bg-background cursor-not-allowed opacity-40",
|
|
536
|
-
checked: "border-primary-600 bg-primary-600 text-text cursor-not-allowed opacity-40"
|
|
537
|
-
}
|
|
258
|
+
var COLOR_CLASSES = {
|
|
259
|
+
default: "text-text-950",
|
|
260
|
+
info: "text-info-800",
|
|
261
|
+
success: "text-success-800",
|
|
262
|
+
warning: "text-warning-800",
|
|
263
|
+
error: "text-error-800"
|
|
538
264
|
};
|
|
539
|
-
var
|
|
540
|
-
({
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
if (!isControlled) {
|
|
562
|
-
setInternalChecked(event.target.checked);
|
|
563
|
-
}
|
|
564
|
-
onChange?.(event);
|
|
565
|
-
};
|
|
566
|
-
const currentState = disabled ? "disabled" : state;
|
|
567
|
-
const sizeClasses = SIZE_CLASSES4[size];
|
|
568
|
-
const checkVariant = checked || indeterminate ? "checked" : "unchecked";
|
|
569
|
-
const stylingClasses = STATE_CLASSES2[currentState][checkVariant];
|
|
570
|
-
const borderWidthClass = state === "focused" || state === "hovered" && size === "large" ? "border-[3px]" : sizeClasses.borderWidth;
|
|
571
|
-
const checkboxClasses = `${BASE_CHECKBOX_CLASSES} ${sizeClasses.checkbox} ${borderWidthClass} ${stylingClasses} ${className}`;
|
|
572
|
-
const renderIcon = () => {
|
|
573
|
-
if (indeterminate) {
|
|
574
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
575
|
-
import_phosphor_react2.Minus,
|
|
576
|
-
{
|
|
577
|
-
size: sizeClasses.iconSize,
|
|
578
|
-
weight: "bold",
|
|
579
|
-
color: "currentColor"
|
|
580
|
-
}
|
|
581
|
-
);
|
|
582
|
-
}
|
|
583
|
-
if (checked) {
|
|
584
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
585
|
-
import_phosphor_react2.Check,
|
|
586
|
-
{
|
|
587
|
-
size: sizeClasses.iconSize,
|
|
588
|
-
weight: "bold",
|
|
589
|
-
color: "currentColor"
|
|
590
|
-
}
|
|
591
|
-
);
|
|
592
|
-
}
|
|
593
|
-
return null;
|
|
594
|
-
};
|
|
595
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col", children: [
|
|
596
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
597
|
-
"div",
|
|
598
|
-
{
|
|
599
|
-
className: `flex flex-row items-center ${sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
|
|
600
|
-
children: [
|
|
601
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
602
|
-
"input",
|
|
603
|
-
{
|
|
604
|
-
ref,
|
|
605
|
-
type: "checkbox",
|
|
606
|
-
id: inputId,
|
|
607
|
-
checked,
|
|
608
|
-
disabled,
|
|
609
|
-
onChange: handleChange,
|
|
610
|
-
className: "sr-only",
|
|
611
|
-
...props
|
|
612
|
-
}
|
|
613
|
-
),
|
|
614
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
|
|
615
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
616
|
-
"div",
|
|
617
|
-
{
|
|
618
|
-
className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
|
|
619
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
620
|
-
Text,
|
|
621
|
-
{
|
|
622
|
-
as: "label",
|
|
623
|
-
htmlFor: inputId,
|
|
624
|
-
size: sizeClasses.textSize,
|
|
625
|
-
weight: "normal",
|
|
626
|
-
className: `cursor-pointer select-none leading-[150%] flex items-center font-roboto ${labelClassName}`,
|
|
627
|
-
children: label
|
|
628
|
-
}
|
|
629
|
-
)
|
|
630
|
-
}
|
|
631
|
-
)
|
|
632
|
-
]
|
|
633
|
-
}
|
|
634
|
-
),
|
|
635
|
-
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
636
|
-
Text,
|
|
637
|
-
{
|
|
638
|
-
size: "sm",
|
|
639
|
-
weight: "normal",
|
|
640
|
-
className: "mt-1.5",
|
|
641
|
-
color: "text-error-600",
|
|
642
|
-
children: errorMessage
|
|
643
|
-
}
|
|
644
|
-
),
|
|
645
|
-
helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
646
|
-
Text,
|
|
647
|
-
{
|
|
648
|
-
size: "sm",
|
|
649
|
-
weight: "normal",
|
|
650
|
-
className: "mt-1.5",
|
|
651
|
-
color: "text-text-500",
|
|
652
|
-
children: helperText
|
|
653
|
-
}
|
|
654
|
-
)
|
|
655
|
-
] });
|
|
656
|
-
}
|
|
657
|
-
);
|
|
658
|
-
CheckBox.displayName = "CheckBox";
|
|
659
|
-
|
|
660
|
-
// src/components/Table/Table.tsx
|
|
661
|
-
var import_react4 = require("react");
|
|
662
|
-
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
663
|
-
var Table = (0, import_react4.forwardRef)(
|
|
664
|
-
({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
665
|
-
"table",
|
|
265
|
+
var ICONS = {
|
|
266
|
+
default: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.CheckCircle, { size: 18 }),
|
|
267
|
+
info: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.Info, { size: 18 }),
|
|
268
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.CheckCircle, { size: 18 }),
|
|
269
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.WarningCircle, { size: 18 }),
|
|
270
|
+
error: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.XCircle, { size: 18 })
|
|
271
|
+
};
|
|
272
|
+
var Alert = ({
|
|
273
|
+
variant = "solid",
|
|
274
|
+
title,
|
|
275
|
+
description,
|
|
276
|
+
action = "default",
|
|
277
|
+
className,
|
|
278
|
+
...props
|
|
279
|
+
}) => {
|
|
280
|
+
const baseClasses = "alert-wrapper flex items-start gap-2 w-[384px] py-3 px-4 font-inherit rounded-md";
|
|
281
|
+
const variantClasses = VARIANT_ACTION_CLASSES3[variant][action];
|
|
282
|
+
const variantColor = COLOR_CLASSES[action];
|
|
283
|
+
const variantIcon = ICONS[action];
|
|
284
|
+
const hasHeading = Boolean(title);
|
|
285
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
286
|
+
"div",
|
|
666
287
|
{
|
|
667
|
-
|
|
668
|
-
className: `w-full caption-bottom text-sm ${className ?? ""}`,
|
|
288
|
+
className: `${baseClasses} ${variantClasses} ${className ?? ""}`,
|
|
669
289
|
...props,
|
|
670
290
|
children: [
|
|
671
|
-
/* @__PURE__ */ (0,
|
|
672
|
-
children
|
|
291
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `mt-0.5 ${variantColor}`, children: variantIcon }),
|
|
292
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
|
|
293
|
+
hasHeading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
294
|
+
Text,
|
|
295
|
+
{
|
|
296
|
+
size: "md",
|
|
297
|
+
weight: "medium",
|
|
298
|
+
color: variantColor,
|
|
299
|
+
className: "mb-0.5",
|
|
300
|
+
children: title
|
|
301
|
+
}
|
|
302
|
+
),
|
|
303
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
304
|
+
Text,
|
|
305
|
+
{
|
|
306
|
+
size: hasHeading ? "sm" : "md",
|
|
307
|
+
weight: "normal",
|
|
308
|
+
color: !hasHeading ? variantColor : "text-text-700",
|
|
309
|
+
children: description
|
|
310
|
+
}
|
|
311
|
+
)
|
|
312
|
+
] })
|
|
673
313
|
]
|
|
674
314
|
}
|
|
675
|
-
)
|
|
676
|
-
);
|
|
677
|
-
Table.displayName = "Table";
|
|
678
|
-
var TableHeader = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
679
|
-
"thead",
|
|
680
|
-
{
|
|
681
|
-
ref,
|
|
682
|
-
className: `[&_tr:first-child]:border-0 ${className}`,
|
|
683
|
-
...props
|
|
684
|
-
}
|
|
685
|
-
));
|
|
686
|
-
TableHeader.displayName = "TableHeader";
|
|
687
|
-
var TableBody = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
688
|
-
"tbody",
|
|
689
|
-
{
|
|
690
|
-
ref,
|
|
691
|
-
className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
|
|
692
|
-
...props
|
|
693
|
-
}
|
|
694
|
-
));
|
|
695
|
-
TableBody.displayName = "TableBody";
|
|
696
|
-
var TableFooter = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
697
|
-
"tfoot",
|
|
698
|
-
{
|
|
699
|
-
ref,
|
|
700
|
-
className: `border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`,
|
|
701
|
-
...props
|
|
702
|
-
}
|
|
703
|
-
));
|
|
704
|
-
TableFooter.displayName = "TableFooter";
|
|
705
|
-
var VARIANT_STATES_ROW = {
|
|
706
|
-
default: "border-b border-border-200",
|
|
707
|
-
selected: "border-b-2 border-indicator-primary",
|
|
708
|
-
invalid: "border-b-2 border-indicator-error",
|
|
709
|
-
disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
|
|
315
|
+
);
|
|
710
316
|
};
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
317
|
+
|
|
318
|
+
// src/components/IconButton/IconButton.tsx
|
|
319
|
+
var import_react = require("react");
|
|
320
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
321
|
+
var IconButton = (0, import_react.forwardRef)(
|
|
322
|
+
({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
|
|
323
|
+
const baseClasses = [
|
|
324
|
+
"inline-flex",
|
|
325
|
+
"items-center",
|
|
326
|
+
"justify-center",
|
|
327
|
+
"rounded-lg",
|
|
328
|
+
"font-medium",
|
|
329
|
+
"bg-transparent",
|
|
330
|
+
"text-text-950",
|
|
331
|
+
"cursor-pointer",
|
|
332
|
+
"hover:bg-primary-600",
|
|
333
|
+
"hover:text-text",
|
|
334
|
+
"focus-visible:outline-none",
|
|
335
|
+
"focus-visible:ring-2",
|
|
336
|
+
"focus-visible:ring-offset-0",
|
|
337
|
+
"focus-visible:ring-indicator-info",
|
|
338
|
+
"disabled:opacity-50",
|
|
339
|
+
"disabled:cursor-not-allowed",
|
|
340
|
+
"disabled:pointer-events-none"
|
|
341
|
+
];
|
|
342
|
+
const sizeClasses = {
|
|
343
|
+
sm: ["w-6", "h-6", "text-sm"],
|
|
344
|
+
md: ["w-10", "h-10", "text-base"]
|
|
345
|
+
};
|
|
346
|
+
const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
|
|
347
|
+
const allClasses = [
|
|
348
|
+
...baseClasses,
|
|
349
|
+
...sizeClasses[size],
|
|
350
|
+
...activeClasses
|
|
351
|
+
].join(" ");
|
|
352
|
+
const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
|
|
353
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
354
|
+
"button",
|
|
715
355
|
{
|
|
716
356
|
ref,
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
"
|
|
724
|
-
...props
|
|
357
|
+
type: "button",
|
|
358
|
+
className: `${allClasses} ${className}`,
|
|
359
|
+
disabled,
|
|
360
|
+
"aria-pressed": active,
|
|
361
|
+
"aria-label": ariaLabel,
|
|
362
|
+
...props,
|
|
363
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex items-center justify-center", children: icon })
|
|
725
364
|
}
|
|
726
365
|
);
|
|
727
366
|
}
|
|
728
367
|
);
|
|
729
|
-
|
|
730
|
-
var TableHead = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
731
|
-
"th",
|
|
732
|
-
{
|
|
733
|
-
ref,
|
|
734
|
-
className: `h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`,
|
|
735
|
-
...props
|
|
736
|
-
}
|
|
737
|
-
));
|
|
738
|
-
TableHead.displayName = "TableHead";
|
|
739
|
-
var TableCell = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
740
|
-
"td",
|
|
741
|
-
{
|
|
742
|
-
ref,
|
|
743
|
-
className: `p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`,
|
|
744
|
-
...props
|
|
745
|
-
}
|
|
746
|
-
));
|
|
747
|
-
TableCell.displayName = "TableCell";
|
|
748
|
-
var TableCaption = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
749
|
-
"caption",
|
|
750
|
-
{
|
|
751
|
-
ref,
|
|
752
|
-
className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
|
|
753
|
-
...props
|
|
754
|
-
}
|
|
755
|
-
));
|
|
756
|
-
TableCaption.displayName = "TableCaption";
|
|
368
|
+
IconButton.displayName = "IconButton";
|
|
757
369
|
|
|
758
|
-
// src/components/
|
|
759
|
-
var
|
|
760
|
-
var
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
const
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
let nextIndex;
|
|
789
|
-
if (event.key === "ArrowDown") {
|
|
790
|
-
nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
|
|
791
|
-
} else {
|
|
792
|
-
nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
|
|
793
|
-
}
|
|
794
|
-
items[nextIndex]?.focus();
|
|
795
|
-
}
|
|
796
|
-
};
|
|
797
|
-
const handleDownkey = (event) => {
|
|
798
|
-
if (event.key === "Escape") {
|
|
799
|
-
setOpen(false);
|
|
800
|
-
} else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
801
|
-
handleArrowDownOrArrowUp(event);
|
|
802
|
-
}
|
|
803
|
-
};
|
|
804
|
-
const handleClickOutside = (event) => {
|
|
805
|
-
if (menuRef.current && !menuRef.current.contains(event.target)) {
|
|
806
|
-
setOpen(false);
|
|
807
|
-
}
|
|
808
|
-
};
|
|
809
|
-
(0, import_react5.useEffect)(() => {
|
|
810
|
-
if (currentOpen) {
|
|
811
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
812
|
-
document.addEventListener("keydown", handleDownkey);
|
|
813
|
-
}
|
|
814
|
-
return () => {
|
|
815
|
-
document.removeEventListener("mousedown", handleClickOutside);
|
|
816
|
-
document.removeEventListener("keydown", handleDownkey);
|
|
817
|
-
};
|
|
818
|
-
}, [currentOpen]);
|
|
819
|
-
const value = (0, import_react5.useMemo)(
|
|
820
|
-
() => ({ open: currentOpen, setOpen }),
|
|
821
|
-
[currentOpen, setOpen]
|
|
822
|
-
);
|
|
823
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative", ref: menuRef, children }) });
|
|
824
|
-
};
|
|
825
|
-
var DropdownMenuTrigger = (0, import_react5.forwardRef)(({ className, children, onClick, ...props }, ref) => {
|
|
826
|
-
const context = (0, import_react5.useContext)(DropdownMenuContext);
|
|
827
|
-
if (!context)
|
|
828
|
-
throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
|
|
829
|
-
const { open, setOpen } = context;
|
|
830
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
370
|
+
// src/components/IconRoundedButton/IconRoundedButton.tsx
|
|
371
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
372
|
+
var IconRoundedButton = ({
|
|
373
|
+
icon,
|
|
374
|
+
className = "",
|
|
375
|
+
disabled,
|
|
376
|
+
...props
|
|
377
|
+
}) => {
|
|
378
|
+
const baseClasses = [
|
|
379
|
+
"inline-flex",
|
|
380
|
+
"items-center",
|
|
381
|
+
"justify-center",
|
|
382
|
+
"w-8",
|
|
383
|
+
"h-8",
|
|
384
|
+
"rounded-full",
|
|
385
|
+
"cursor-pointer",
|
|
386
|
+
"border",
|
|
387
|
+
"border-background-200",
|
|
388
|
+
"bg-background",
|
|
389
|
+
"text-text-950",
|
|
390
|
+
"hover:shadow-hard-shadow-1",
|
|
391
|
+
"focus-visible:outline-none",
|
|
392
|
+
"focus-visible:shadow-hard-shadow-1",
|
|
393
|
+
"focus-visible:ring-2",
|
|
394
|
+
"focus-visible:ring-indicator-info",
|
|
395
|
+
"focus-visible:ring-offset-0",
|
|
396
|
+
"disabled:opacity-50",
|
|
397
|
+
"disabled:cursor-not-allowed"
|
|
398
|
+
].join(" ");
|
|
399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
831
400
|
"button",
|
|
832
401
|
{
|
|
833
|
-
|
|
834
|
-
className:
|
|
835
|
-
|
|
836
|
-
e.stopPropagation();
|
|
837
|
-
setOpen(!open);
|
|
838
|
-
if (onClick) onClick(e);
|
|
839
|
-
},
|
|
840
|
-
"aria-expanded": open,
|
|
402
|
+
type: "button",
|
|
403
|
+
className: `${baseClasses} ${className}`,
|
|
404
|
+
disabled,
|
|
841
405
|
...props,
|
|
842
|
-
children
|
|
406
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
|
|
843
407
|
}
|
|
844
408
|
);
|
|
845
|
-
});
|
|
846
|
-
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
|
|
847
|
-
var ITEM_SIZE_CLASSES = {
|
|
848
|
-
small: "text-sm",
|
|
849
|
-
medium: "text-md"
|
|
850
409
|
};
|
|
851
|
-
var SIDE_CLASSES = {
|
|
852
|
-
top: "bottom-full",
|
|
853
|
-
right: "top-full",
|
|
854
|
-
bottom: "top-full",
|
|
855
|
-
left: "top-full"
|
|
856
|
-
};
|
|
857
|
-
var ALIGN_CLASSES = {
|
|
858
|
-
start: "left-0",
|
|
859
|
-
center: "left-1/2 -translate-x-1/2",
|
|
860
|
-
end: "right-0"
|
|
861
|
-
};
|
|
862
|
-
var MenuLabel = (0, import_react5.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
863
|
-
"fieldset",
|
|
864
|
-
{
|
|
865
|
-
ref,
|
|
866
|
-
role: "group",
|
|
867
|
-
className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
|
|
868
|
-
...props
|
|
869
|
-
}
|
|
870
|
-
));
|
|
871
|
-
MenuLabel.displayName = "MenuLabel";
|
|
872
|
-
var MenuContent = (0, import_react5.forwardRef)(
|
|
873
|
-
({
|
|
874
|
-
className,
|
|
875
|
-
align = "start",
|
|
876
|
-
side = "bottom",
|
|
877
|
-
sideOffset = 4,
|
|
878
|
-
children,
|
|
879
|
-
...props
|
|
880
|
-
}, ref) => {
|
|
881
|
-
const { open } = (0, import_react5.useContext)(DropdownMenuContext);
|
|
882
|
-
const [isVisible, setIsVisible] = (0, import_react5.useState)(open);
|
|
883
|
-
(0, import_react5.useEffect)(() => {
|
|
884
|
-
if (open) {
|
|
885
|
-
setIsVisible(true);
|
|
886
|
-
} else {
|
|
887
|
-
const timer = setTimeout(() => setIsVisible(false), 200);
|
|
888
|
-
return () => clearTimeout(timer);
|
|
889
|
-
}
|
|
890
|
-
}, [open]);
|
|
891
|
-
if (!isVisible) return null;
|
|
892
|
-
const getPositionClasses = () => {
|
|
893
|
-
const vertical = SIDE_CLASSES[side];
|
|
894
|
-
const horizontal = ALIGN_CLASSES[align];
|
|
895
|
-
return `absolute ${vertical} ${horizontal}`;
|
|
896
|
-
};
|
|
897
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
898
|
-
"div",
|
|
899
|
-
{
|
|
900
|
-
ref,
|
|
901
|
-
role: "menu",
|
|
902
|
-
className: `
|
|
903
|
-
bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100
|
|
904
|
-
${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
|
|
905
|
-
${getPositionClasses()}
|
|
906
|
-
${className}
|
|
907
|
-
`,
|
|
908
|
-
style: {
|
|
909
|
-
marginTop: side === "bottom" ? sideOffset : void 0,
|
|
910
|
-
marginBottom: side === "top" ? sideOffset : void 0,
|
|
911
|
-
marginLeft: side === "right" ? sideOffset : void 0,
|
|
912
|
-
marginRight: side === "left" ? sideOffset : void 0
|
|
913
|
-
},
|
|
914
|
-
...props,
|
|
915
|
-
children
|
|
916
|
-
}
|
|
917
|
-
);
|
|
918
|
-
}
|
|
919
|
-
);
|
|
920
|
-
MenuContent.displayName = "MenuContent";
|
|
921
|
-
var MenuItem = (0, import_react5.forwardRef)(
|
|
922
|
-
({
|
|
923
|
-
className,
|
|
924
|
-
inset,
|
|
925
|
-
size = "small",
|
|
926
|
-
children,
|
|
927
|
-
iconRight,
|
|
928
|
-
iconLeft,
|
|
929
|
-
disabled = false,
|
|
930
|
-
onClick,
|
|
931
|
-
...props
|
|
932
|
-
}, ref) => {
|
|
933
|
-
const sizeClasses = ITEM_SIZE_CLASSES[size];
|
|
934
|
-
const handleClick = (e) => {
|
|
935
|
-
if (disabled) {
|
|
936
|
-
e.preventDefault();
|
|
937
|
-
e.stopPropagation();
|
|
938
|
-
return;
|
|
939
|
-
}
|
|
940
|
-
onClick?.(e);
|
|
941
|
-
};
|
|
942
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
943
|
-
"div",
|
|
944
|
-
{
|
|
945
|
-
ref,
|
|
946
|
-
role: "menuitem",
|
|
947
|
-
"aria-disabled": disabled,
|
|
948
|
-
className: `
|
|
949
|
-
focus-visible:bg-background-50
|
|
950
|
-
relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
|
|
951
|
-
${inset && "pl-8"}
|
|
952
|
-
${sizeClasses}
|
|
953
|
-
${className}
|
|
954
|
-
${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
|
|
955
|
-
`,
|
|
956
|
-
onClick: handleClick,
|
|
957
|
-
onKeyDown: (e) => {
|
|
958
|
-
if (e.key === "Enter" || e.key === " ") handleClick(e);
|
|
959
|
-
},
|
|
960
|
-
tabIndex: disabled ? -1 : 0,
|
|
961
|
-
...props,
|
|
962
|
-
children: [
|
|
963
|
-
iconLeft,
|
|
964
|
-
children,
|
|
965
|
-
iconRight
|
|
966
|
-
]
|
|
967
|
-
}
|
|
968
|
-
);
|
|
969
|
-
}
|
|
970
|
-
);
|
|
971
|
-
MenuItem.displayName = "MenuItem";
|
|
972
|
-
var MenuSeparator = (0, import_react5.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
973
|
-
"div",
|
|
974
|
-
{
|
|
975
|
-
ref,
|
|
976
|
-
className: `my-1 h-px bg-border-200 ${className}`,
|
|
977
|
-
...props
|
|
978
|
-
}
|
|
979
|
-
));
|
|
980
|
-
MenuSeparator.displayName = "MenuSeparator";
|
|
981
410
|
|
|
982
411
|
// src/components/NavButton/NavButton.tsx
|
|
983
|
-
var
|
|
984
|
-
var
|
|
985
|
-
var NavButton = (0,
|
|
412
|
+
var import_react2 = require("react");
|
|
413
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
414
|
+
var NavButton = (0, import_react2.forwardRef)(
|
|
986
415
|
({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
|
|
987
416
|
const baseClasses = [
|
|
988
417
|
"flex",
|
|
@@ -1009,7 +438,7 @@ var NavButton = (0, import_react6.forwardRef)(
|
|
|
1009
438
|
];
|
|
1010
439
|
const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
|
|
1011
440
|
const allClasses = [...baseClasses, ...stateClasses].join(" ");
|
|
1012
|
-
return /* @__PURE__ */ (0,
|
|
441
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1013
442
|
"button",
|
|
1014
443
|
{
|
|
1015
444
|
ref,
|
|
@@ -1019,8 +448,8 @@ var NavButton = (0, import_react6.forwardRef)(
|
|
|
1019
448
|
"aria-pressed": selected,
|
|
1020
449
|
...props,
|
|
1021
450
|
children: [
|
|
1022
|
-
/* @__PURE__ */ (0,
|
|
1023
|
-
/* @__PURE__ */ (0,
|
|
451
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
|
|
452
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "whitespace-nowrap", children: label })
|
|
1024
453
|
]
|
|
1025
454
|
}
|
|
1026
455
|
);
|
|
@@ -1028,183 +457,164 @@ var NavButton = (0, import_react6.forwardRef)(
|
|
|
1028
457
|
);
|
|
1029
458
|
NavButton.displayName = "NavButton";
|
|
1030
459
|
|
|
1031
|
-
// src/components/
|
|
1032
|
-
var
|
|
1033
|
-
var
|
|
1034
|
-
var
|
|
1035
|
-
({ icon,
|
|
460
|
+
// src/components/SelectionButton/SelectionButton.tsx
|
|
461
|
+
var import_react3 = require("react");
|
|
462
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
463
|
+
var SelectionButton = (0, import_react3.forwardRef)(
|
|
464
|
+
({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
|
|
1036
465
|
const baseClasses = [
|
|
1037
466
|
"inline-flex",
|
|
1038
467
|
"items-center",
|
|
1039
|
-
"justify-
|
|
1040
|
-
"
|
|
1041
|
-
"
|
|
1042
|
-
"
|
|
1043
|
-
"text-text-950",
|
|
468
|
+
"justify-start",
|
|
469
|
+
"gap-2",
|
|
470
|
+
"p-4",
|
|
471
|
+
"rounded-xl",
|
|
1044
472
|
"cursor-pointer",
|
|
1045
|
-
"
|
|
1046
|
-
"
|
|
473
|
+
"border",
|
|
474
|
+
"border-border-50",
|
|
475
|
+
"bg-background",
|
|
476
|
+
"text-sm",
|
|
477
|
+
"text-text-700",
|
|
478
|
+
"font-bold",
|
|
479
|
+
"shadow-soft-shadow-1",
|
|
480
|
+
"hover:bg-background-100",
|
|
1047
481
|
"focus-visible:outline-none",
|
|
1048
482
|
"focus-visible:ring-2",
|
|
1049
|
-
"focus-visible:ring-offset-0",
|
|
1050
483
|
"focus-visible:ring-indicator-info",
|
|
484
|
+
"focus-visible:ring-offset-0",
|
|
485
|
+
"focus-visible:shadow-none",
|
|
486
|
+
"active:ring-2",
|
|
487
|
+
"active:ring-primary-950",
|
|
488
|
+
"active:ring-offset-0",
|
|
489
|
+
"active:shadow-none",
|
|
1051
490
|
"disabled:opacity-50",
|
|
1052
|
-
"disabled:cursor-not-allowed"
|
|
1053
|
-
"disabled:pointer-events-none"
|
|
491
|
+
"disabled:cursor-not-allowed"
|
|
1054
492
|
];
|
|
1055
|
-
const
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
};
|
|
1059
|
-
const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
|
|
1060
|
-
const allClasses = [
|
|
1061
|
-
...baseClasses,
|
|
1062
|
-
...sizeClasses[size],
|
|
1063
|
-
...activeClasses
|
|
1064
|
-
].join(" ");
|
|
1065
|
-
const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
|
|
1066
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
493
|
+
const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
|
|
494
|
+
const allClasses = [...baseClasses, ...stateClasses].join(" ");
|
|
495
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1067
496
|
"button",
|
|
1068
497
|
{
|
|
1069
498
|
ref,
|
|
1070
499
|
type: "button",
|
|
1071
500
|
className: `${allClasses} ${className}`,
|
|
1072
501
|
disabled,
|
|
1073
|
-
"aria-pressed":
|
|
1074
|
-
"aria-label": ariaLabel,
|
|
502
|
+
"aria-pressed": selected,
|
|
1075
503
|
...props,
|
|
1076
|
-
children:
|
|
504
|
+
children: [
|
|
505
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
|
|
506
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: label })
|
|
507
|
+
]
|
|
1077
508
|
}
|
|
1078
509
|
);
|
|
1079
510
|
}
|
|
1080
511
|
);
|
|
1081
|
-
|
|
512
|
+
SelectionButton.displayName = "SelectionButton";
|
|
1082
513
|
|
|
1083
|
-
// src/components/
|
|
1084
|
-
var
|
|
1085
|
-
var
|
|
1086
|
-
var
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
success: "bg-success text-success-800 border-none focus-visible:outline-none",
|
|
1090
|
-
info: "bg-info text-info-800 border-none focus-visible:outline-none"
|
|
1091
|
-
},
|
|
1092
|
-
outlined: {
|
|
1093
|
-
warning: "bg-warning text-warning-800 border border-warning-200 focus-visible:outline-none",
|
|
1094
|
-
success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none",
|
|
1095
|
-
info: "bg-info text-info-800 border border-info-200 focus-visible:outline-none"
|
|
1096
|
-
}
|
|
1097
|
-
};
|
|
1098
|
-
var iconMap = {
|
|
1099
|
-
success: import_phosphor_react3.CheckCircle,
|
|
1100
|
-
info: import_phosphor_react3.Info,
|
|
1101
|
-
warning: import_phosphor_react3.WarningCircle
|
|
1102
|
-
};
|
|
1103
|
-
var Toast = ({
|
|
1104
|
-
variant = "outlined",
|
|
1105
|
-
action = "success",
|
|
1106
|
-
className = "",
|
|
1107
|
-
onClose,
|
|
1108
|
-
title,
|
|
1109
|
-
description,
|
|
1110
|
-
position = "default",
|
|
1111
|
-
...props
|
|
1112
|
-
}) => {
|
|
1113
|
-
const variantClasses = VARIANT_ACTION_CLASSES3[variant][action];
|
|
1114
|
-
const positionClasses = {
|
|
1115
|
-
"top-left": "fixed top-4 left-4",
|
|
1116
|
-
"top-center": "fixed top-4 left-1/2 transform -translate-x-1/2",
|
|
1117
|
-
"top-right": "fixed top-4 right-4",
|
|
1118
|
-
"bottom-left": "fixed bottom-4 left-4",
|
|
1119
|
-
"bottom-center": "fixed bottom-4 left-1/2 transform -translate-x-1/2",
|
|
1120
|
-
"bottom-right": "fixed bottom-4 right-4",
|
|
1121
|
-
default: ""
|
|
1122
|
-
};
|
|
1123
|
-
const IconAction = iconMap[action] || iconMap["success"];
|
|
1124
|
-
const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
|
|
1125
|
-
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1126
|
-
"div",
|
|
514
|
+
// src/components/Table/Table.tsx
|
|
515
|
+
var import_react4 = require("react");
|
|
516
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
517
|
+
var Table = (0, import_react4.forwardRef)(
|
|
518
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
519
|
+
"table",
|
|
1127
520
|
{
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
"aria-atomic": "true",
|
|
1131
|
-
className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
|
|
521
|
+
ref,
|
|
522
|
+
className: `w-full caption-bottom text-sm ${className ?? ""}`,
|
|
1132
523
|
...props,
|
|
1133
524
|
children: [
|
|
1134
|
-
/* @__PURE__ */ (0,
|
|
1135
|
-
|
|
1136
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col items-start justify-start", children: [
|
|
1137
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-semibold text-md", children: title }),
|
|
1138
|
-
description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-md text-text-900", children: description })
|
|
1139
|
-
] })
|
|
1140
|
-
] }),
|
|
1141
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1142
|
-
"button",
|
|
1143
|
-
{
|
|
1144
|
-
onClick: onClose,
|
|
1145
|
-
"aria-label": "Dismiss notification",
|
|
1146
|
-
className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
|
|
1147
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_phosphor_react3.X, {})
|
|
1148
|
-
}
|
|
1149
|
-
)
|
|
525
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("caption", { className: "sr-only", children: "My Table" }),
|
|
526
|
+
children
|
|
1150
527
|
]
|
|
1151
528
|
}
|
|
1152
|
-
)
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
set((state) => ({
|
|
1162
|
-
toasts: [...state.toasts, { id, ...toast }]
|
|
1163
|
-
}));
|
|
1164
|
-
},
|
|
1165
|
-
removeToast: (id) => {
|
|
1166
|
-
set((state) => ({
|
|
1167
|
-
toasts: state.toasts.filter((t) => t.id !== id)
|
|
1168
|
-
}));
|
|
529
|
+
) })
|
|
530
|
+
);
|
|
531
|
+
Table.displayName = "Table";
|
|
532
|
+
var TableHeader = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
533
|
+
"thead",
|
|
534
|
+
{
|
|
535
|
+
ref,
|
|
536
|
+
className: `[&_tr:first-child]:border-0 ${className}`,
|
|
537
|
+
...props
|
|
1169
538
|
}
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
var
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
539
|
+
));
|
|
540
|
+
TableHeader.displayName = "TableHeader";
|
|
541
|
+
var TableBody = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
542
|
+
"tbody",
|
|
543
|
+
{
|
|
544
|
+
ref,
|
|
545
|
+
className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
|
|
546
|
+
...props
|
|
547
|
+
}
|
|
548
|
+
));
|
|
549
|
+
TableBody.displayName = "TableBody";
|
|
550
|
+
var TableFooter = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
551
|
+
"tfoot",
|
|
552
|
+
{
|
|
553
|
+
ref,
|
|
554
|
+
className: `border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`,
|
|
555
|
+
...props
|
|
556
|
+
}
|
|
557
|
+
));
|
|
558
|
+
TableFooter.displayName = "TableFooter";
|
|
559
|
+
var VARIANT_STATES_ROW = {
|
|
560
|
+
default: "border-b border-border-200",
|
|
561
|
+
selected: "border-b-2 border-indicator-primary",
|
|
562
|
+
invalid: "border-b-2 border-indicator-error",
|
|
563
|
+
disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
|
|
1194
564
|
};
|
|
565
|
+
var TableRow = (0, import_react4.forwardRef)(
|
|
566
|
+
({ state = "default", className, ...props }, ref) => {
|
|
567
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
568
|
+
"tr",
|
|
569
|
+
{
|
|
570
|
+
ref,
|
|
571
|
+
className: `
|
|
572
|
+
transition-colors
|
|
573
|
+
${state !== "disabled" ? "hover:bg-muted/50" : ""}
|
|
574
|
+
${VARIANT_STATES_ROW[state]}
|
|
575
|
+
${className}
|
|
576
|
+
`,
|
|
577
|
+
"aria-disabled": state === "disabled",
|
|
578
|
+
...props
|
|
579
|
+
}
|
|
580
|
+
);
|
|
581
|
+
}
|
|
582
|
+
);
|
|
583
|
+
TableRow.displayName = "TableRow";
|
|
584
|
+
var TableHead = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
585
|
+
"th",
|
|
586
|
+
{
|
|
587
|
+
ref,
|
|
588
|
+
className: `h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`,
|
|
589
|
+
...props
|
|
590
|
+
}
|
|
591
|
+
));
|
|
592
|
+
TableHead.displayName = "TableHead";
|
|
593
|
+
var TableCell = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
594
|
+
"td",
|
|
595
|
+
{
|
|
596
|
+
ref,
|
|
597
|
+
className: `p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`,
|
|
598
|
+
...props
|
|
599
|
+
}
|
|
600
|
+
));
|
|
601
|
+
TableCell.displayName = "TableCell";
|
|
602
|
+
var TableCaption = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
603
|
+
"caption",
|
|
604
|
+
{
|
|
605
|
+
ref,
|
|
606
|
+
className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
|
|
607
|
+
...props
|
|
608
|
+
}
|
|
609
|
+
));
|
|
610
|
+
TableCaption.displayName = "TableCaption";
|
|
1195
611
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1196
612
|
0 && (module.exports = {
|
|
613
|
+
Alert,
|
|
1197
614
|
Badge,
|
|
1198
615
|
Button,
|
|
1199
|
-
CheckBox,
|
|
1200
|
-
DropdownMenu,
|
|
1201
|
-
DropdownMenuTrigger,
|
|
1202
616
|
IconButton,
|
|
1203
617
|
IconRoundedButton,
|
|
1204
|
-
MenuContent,
|
|
1205
|
-
MenuItem,
|
|
1206
|
-
MenuLabel,
|
|
1207
|
-
MenuSeparator,
|
|
1208
618
|
NavButton,
|
|
1209
619
|
SelectionButton,
|
|
1210
620
|
Table,
|
|
@@ -1215,10 +625,5 @@ var useToast = () => {
|
|
|
1215
625
|
TableHead,
|
|
1216
626
|
TableHeader,
|
|
1217
627
|
TableRow,
|
|
1218
|
-
Text
|
|
1219
|
-
TextArea,
|
|
1220
|
-
Toast,
|
|
1221
|
-
Toaster,
|
|
1222
|
-
useToast,
|
|
1223
|
-
useToastStore
|
|
628
|
+
Text
|
|
1224
629
|
});
|