@cytario/design 1.6.1 → 1.7.0
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/index.d.ts +583 -58
- package/dist/index.js +2145 -32
- package/dist/index.js.map +1 -0
- package/package.json +7 -5
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +0 -11
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts.map +0 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.js +0 -9
- package/dist/components/Breadcrumbs/index.d.ts +0 -3
- package/dist/components/Breadcrumbs/index.d.ts.map +0 -1
- package/dist/components/Breadcrumbs/index.js +0 -1
- package/dist/components/Button/Button.d.ts +0 -18
- package/dist/components/Button/Button.d.ts.map +0 -1
- package/dist/components/Button/Button.js +0 -51
- package/dist/components/Button/index.d.ts +0 -3
- package/dist/components/Button/index.d.ts.map +0 -1
- package/dist/components/Button/index.js +0 -1
- package/dist/components/ButtonLink/ButtonLink.d.ts +0 -35
- package/dist/components/ButtonLink/ButtonLink.d.ts.map +0 -1
- package/dist/components/ButtonLink/ButtonLink.js +0 -47
- package/dist/components/ButtonLink/index.d.ts +0 -3
- package/dist/components/ButtonLink/index.d.ts.map +0 -1
- package/dist/components/ButtonLink/index.js +0 -1
- package/dist/components/Checkbox/Checkbox.d.ts +0 -8
- package/dist/components/Checkbox/Checkbox.d.ts.map +0 -1
- package/dist/components/Checkbox/Checkbox.js +0 -19
- package/dist/components/Checkbox/index.d.ts +0 -3
- package/dist/components/Checkbox/index.d.ts.map +0 -1
- package/dist/components/Checkbox/index.js +0 -1
- package/dist/components/Dialog/Dialog.d.ts +0 -11
- package/dist/components/Dialog/Dialog.d.ts.map +0 -1
- package/dist/components/Dialog/Dialog.js +0 -31
- package/dist/components/Dialog/index.d.ts +0 -3
- package/dist/components/Dialog/index.d.ts.map +0 -1
- package/dist/components/Dialog/index.js +0 -1
- package/dist/components/EmptyState/EmptyState.d.ts +0 -11
- package/dist/components/EmptyState/EmptyState.d.ts.map +0 -1
- package/dist/components/EmptyState/EmptyState.js +0 -10
- package/dist/components/EmptyState/index.d.ts +0 -3
- package/dist/components/EmptyState/index.d.ts.map +0 -1
- package/dist/components/EmptyState/index.js +0 -1
- package/dist/components/Field/Field.d.ts +0 -13
- package/dist/components/Field/Field.d.ts.map +0 -1
- package/dist/components/Field/Field.js +0 -15
- package/dist/components/Field/index.d.ts +0 -3
- package/dist/components/Field/index.d.ts.map +0 -1
- package/dist/components/Field/index.js +0 -1
- package/dist/components/Fieldset/Fieldset.d.ts +0 -8
- package/dist/components/Fieldset/Fieldset.d.ts.map +0 -1
- package/dist/components/Fieldset/Fieldset.js +0 -15
- package/dist/components/Fieldset/index.d.ts +0 -3
- package/dist/components/Fieldset/index.d.ts.map +0 -1
- package/dist/components/Fieldset/index.js +0 -1
- package/dist/components/Heading/Heading.d.ts +0 -19
- package/dist/components/Heading/Heading.d.ts.map +0 -1
- package/dist/components/Heading/Heading.js +0 -39
- package/dist/components/Heading/index.d.ts +0 -3
- package/dist/components/Heading/index.d.ts.map +0 -1
- package/dist/components/Heading/index.js +0 -1
- package/dist/components/Icon/Icon.d.ts +0 -15
- package/dist/components/Icon/Icon.d.ts.map +0 -1
- package/dist/components/Icon/Icon.js +0 -11
- package/dist/components/Icon/index.d.ts +0 -3
- package/dist/components/Icon/index.d.ts.map +0 -1
- package/dist/components/Icon/index.js +0 -1
- package/dist/components/IconButton/IconButton.d.ts +0 -23
- package/dist/components/IconButton/IconButton.d.ts.map +0 -1
- package/dist/components/IconButton/IconButton.js +0 -59
- package/dist/components/IconButton/index.d.ts +0 -3
- package/dist/components/IconButton/index.d.ts.map +0 -1
- package/dist/components/IconButton/index.js +0 -1
- package/dist/components/Input/Input.d.ts +0 -23
- package/dist/components/Input/Input.d.ts.map +0 -1
- package/dist/components/Input/Input.js +0 -97
- package/dist/components/Input/index.d.ts +0 -3
- package/dist/components/Input/index.d.ts.map +0 -1
- package/dist/components/Input/index.js +0 -1
- package/dist/components/InputAddon/InputAddon.d.ts +0 -7
- package/dist/components/InputAddon/InputAddon.d.ts.map +0 -1
- package/dist/components/InputAddon/InputAddon.js +0 -35
- package/dist/components/InputAddon/index.d.ts +0 -3
- package/dist/components/InputAddon/index.d.ts.map +0 -1
- package/dist/components/InputAddon/index.js +0 -1
- package/dist/components/InputGroup/InputGroup.d.ts +0 -7
- package/dist/components/InputGroup/InputGroup.d.ts.map +0 -1
- package/dist/components/InputGroup/InputGroup.js +0 -16
- package/dist/components/InputGroup/InputGroupContext.d.ts +0 -9
- package/dist/components/InputGroup/InputGroupContext.d.ts.map +0 -1
- package/dist/components/InputGroup/InputGroupContext.js +0 -8
- package/dist/components/InputGroup/index.d.ts +0 -5
- package/dist/components/InputGroup/index.d.ts.map +0 -1
- package/dist/components/InputGroup/index.js +0 -2
- package/dist/components/Label/Label.d.ts +0 -7
- package/dist/components/Label/Label.d.ts.map +0 -1
- package/dist/components/Label/Label.js +0 -12
- package/dist/components/Label/index.d.ts +0 -3
- package/dist/components/Label/index.d.ts.map +0 -1
- package/dist/components/Label/index.js +0 -1
- package/dist/components/Link/Link.d.ts +0 -10
- package/dist/components/Link/Link.d.ts.map +0 -1
- package/dist/components/Link/Link.js +0 -22
- package/dist/components/Link/index.d.ts +0 -3
- package/dist/components/Link/index.d.ts.map +0 -1
- package/dist/components/Link/index.js +0 -1
- package/dist/components/Menu/Menu.d.ts +0 -24
- package/dist/components/Menu/Menu.d.ts.map +0 -1
- package/dist/components/Menu/Menu.js +0 -29
- package/dist/components/Menu/index.d.ts +0 -3
- package/dist/components/Menu/index.d.ts.map +0 -1
- package/dist/components/Menu/index.js +0 -1
- package/dist/components/Popover/Popover.d.ts +0 -44
- package/dist/components/Popover/Popover.d.ts.map +0 -1
- package/dist/components/Popover/Popover.js +0 -46
- package/dist/components/Popover/index.d.ts +0 -3
- package/dist/components/Popover/index.d.ts.map +0 -1
- package/dist/components/Popover/index.js +0 -1
- package/dist/components/Radio/Radio.d.ts +0 -18
- package/dist/components/Radio/Radio.d.ts.map +0 -1
- package/dist/components/Radio/Radio.js +0 -43
- package/dist/components/Radio/index.d.ts +0 -3
- package/dist/components/Radio/index.d.ts.map +0 -1
- package/dist/components/Radio/index.js +0 -1
- package/dist/components/Select/Select.d.ts +0 -17
- package/dist/components/Select/Select.d.ts.map +0 -1
- package/dist/components/Select/Select.js +0 -42
- package/dist/components/Select/index.d.ts +0 -3
- package/dist/components/Select/index.d.ts.map +0 -1
- package/dist/components/Select/index.js +0 -1
- package/dist/components/Spinner/Spinner.d.ts +0 -10
- package/dist/components/Spinner/Spinner.d.ts.map +0 -1
- package/dist/components/Spinner/Spinner.js +0 -12
- package/dist/components/Spinner/index.d.ts +0 -3
- package/dist/components/Spinner/index.d.ts.map +0 -1
- package/dist/components/Spinner/index.js +0 -1
- package/dist/components/Switch/Switch.d.ts +0 -12
- package/dist/components/Switch/Switch.d.ts.map +0 -1
- package/dist/components/Switch/Switch.js +0 -34
- package/dist/components/Switch/index.d.ts +0 -3
- package/dist/components/Switch/index.d.ts.map +0 -1
- package/dist/components/Switch/index.js +0 -1
- package/dist/components/Table/Table.d.ts +0 -13
- package/dist/components/Table/Table.d.ts.map +0 -1
- package/dist/components/Table/Table.js +0 -61
- package/dist/components/Table/index.d.ts +0 -3
- package/dist/components/Table/index.d.ts.map +0 -1
- package/dist/components/Table/index.js +0 -1
- package/dist/components/Tabs/Tabs.d.ts +0 -32
- package/dist/components/Tabs/Tabs.d.ts.map +0 -1
- package/dist/components/Tabs/Tabs.js +0 -100
- package/dist/components/Tabs/index.d.ts +0 -3
- package/dist/components/Tabs/index.d.ts.map +0 -1
- package/dist/components/Tabs/index.js +0 -1
- package/dist/components/Toast/Toast.d.ts +0 -33
- package/dist/components/Toast/Toast.d.ts.map +0 -1
- package/dist/components/Toast/Toast.js +0 -102
- package/dist/components/Toast/index.d.ts +0 -3
- package/dist/components/Toast/index.d.ts.map +0 -1
- package/dist/components/Toast/index.js +0 -1
- package/dist/components/ToggleButton/ToggleButton.d.ts +0 -13
- package/dist/components/ToggleButton/ToggleButton.d.ts.map +0 -1
- package/dist/components/ToggleButton/ToggleButton.js +0 -42
- package/dist/components/ToggleButton/index.d.ts +0 -3
- package/dist/components/ToggleButton/index.d.ts.map +0 -1
- package/dist/components/ToggleButton/index.js +0 -1
- package/dist/components/Tooltip/Tooltip.d.ts +0 -15
- package/dist/components/Tooltip/Tooltip.d.ts.map +0 -1
- package/dist/components/Tooltip/Tooltip.js +0 -20
- package/dist/components/Tooltip/index.d.ts +0 -3
- package/dist/components/Tooltip/index.d.ts.map +0 -1
- package/dist/components/Tooltip/index.js +0 -1
- package/dist/components/_shared/styles.d.ts +0 -5
- package/dist/components/_shared/styles.d.ts.map +0 -1
- package/dist/components/_shared/styles.js +0 -43
- package/dist/index.d.ts.map +0 -1
- package/dist/test-setup.d.ts +0 -2
- package/dist/test-setup.d.ts.map +0 -1
- package/dist/test-setup.js +0 -1
- package/dist/tokens/tokens.d.ts +0 -144
- package/dist/tokens/tokens.d.ts.map +0 -1
- package/dist/tokens/tokens.js +0 -143
package/dist/index.js
CHANGED
|
@@ -1,33 +1,2146 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
2
|
+
|
|
3
|
+
// src/index.ts
|
|
4
|
+
import { RouterProvider } from "react-aria-components";
|
|
5
|
+
|
|
6
|
+
// src/components/Button/Button.tsx
|
|
7
|
+
import {
|
|
8
|
+
Button as AriaButton
|
|
9
|
+
} from "react-aria-components";
|
|
10
|
+
import { twMerge } from "tailwind-merge";
|
|
11
|
+
|
|
12
|
+
// src/components/_shared/styles.ts
|
|
13
|
+
var variantStyles = {
|
|
14
|
+
primary: [
|
|
15
|
+
"bg-[var(--color-action-primary)] text-[var(--color-text-inverse)]",
|
|
16
|
+
"hover:bg-[var(--color-action-primary-hover)]",
|
|
17
|
+
"pressed:bg-[var(--color-action-primary-active)]"
|
|
18
|
+
].join(" "),
|
|
19
|
+
secondary: [
|
|
20
|
+
"bg-transparent text-[var(--color-action-secondary)]",
|
|
21
|
+
"border border-[var(--color-border-brand)]",
|
|
22
|
+
"hover:bg-[var(--color-purple-50)]",
|
|
23
|
+
"pressed:bg-[var(--color-purple-100)]"
|
|
24
|
+
].join(" "),
|
|
25
|
+
ghost: [
|
|
26
|
+
"bg-transparent text-[var(--color-text-primary)]",
|
|
27
|
+
"hover:bg-[var(--color-neutral-100)]",
|
|
28
|
+
"pressed:bg-[var(--color-neutral-200)]"
|
|
29
|
+
].join(" "),
|
|
30
|
+
destructive: [
|
|
31
|
+
"bg-[var(--color-action-danger)] text-[var(--color-text-inverse)]",
|
|
32
|
+
"hover:bg-[var(--color-action-danger-hover)]",
|
|
33
|
+
"pressed:bg-[var(--color-action-danger-hover)]"
|
|
34
|
+
].join(" "),
|
|
35
|
+
default: [
|
|
36
|
+
"bg-[var(--color-action-default)] text-[var(--color-text-inverse)]",
|
|
37
|
+
"hover:bg-[var(--color-action-default-hover)]",
|
|
38
|
+
"pressed:bg-[var(--color-slate-600)]"
|
|
39
|
+
].join(" "),
|
|
40
|
+
success: [
|
|
41
|
+
"bg-[var(--color-action-success)] text-[var(--color-text-inverse)]",
|
|
42
|
+
"hover:bg-[var(--color-action-success-hover)]",
|
|
43
|
+
"pressed:bg-[var(--color-green-800)]"
|
|
44
|
+
].join(" "),
|
|
45
|
+
info: [
|
|
46
|
+
"bg-[var(--color-action-info)] text-[var(--color-text-inverse)]",
|
|
47
|
+
"hover:bg-[var(--color-action-info-hover)]",
|
|
48
|
+
"pressed:bg-[var(--color-slate-800)]"
|
|
49
|
+
].join(" "),
|
|
50
|
+
neutral: [
|
|
51
|
+
"bg-white text-[var(--color-text-primary)]",
|
|
52
|
+
"border border-[var(--color-neutral-300)]",
|
|
53
|
+
"hover:bg-[var(--color-neutral-50)]",
|
|
54
|
+
"pressed:bg-[var(--color-neutral-100)]"
|
|
55
|
+
].join(" ")
|
|
56
|
+
};
|
|
57
|
+
var sizeStyles = {
|
|
58
|
+
sm: "px-3 py-1.5 text-sm",
|
|
59
|
+
md: "px-4 py-2 text-base",
|
|
60
|
+
lg: "px-6 py-3 text-lg"
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
// src/components/Icon/Icon.tsx
|
|
64
|
+
import { jsx } from "react/jsx-runtime";
|
|
65
|
+
var sizeMap = {
|
|
66
|
+
sm: 16,
|
|
67
|
+
md: 20,
|
|
68
|
+
lg: 24,
|
|
69
|
+
xl: 32
|
|
70
|
+
};
|
|
71
|
+
function Icon({
|
|
72
|
+
icon: LucideComponent,
|
|
73
|
+
size = "md",
|
|
74
|
+
strokeWidth,
|
|
75
|
+
"aria-label": ariaLabel,
|
|
76
|
+
className
|
|
77
|
+
}) {
|
|
78
|
+
const isDecorative = !ariaLabel;
|
|
79
|
+
return /* @__PURE__ */ jsx(
|
|
80
|
+
LucideComponent,
|
|
81
|
+
{
|
|
82
|
+
size: sizeMap[size],
|
|
83
|
+
strokeWidth,
|
|
84
|
+
role: isDecorative ? void 0 : "img",
|
|
85
|
+
"aria-label": ariaLabel,
|
|
86
|
+
"aria-hidden": isDecorative ? "true" : void 0,
|
|
87
|
+
className
|
|
88
|
+
}
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// src/components/Spinner/Spinner.tsx
|
|
93
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
94
|
+
var sizeMap2 = {
|
|
95
|
+
sm: "h-4 w-4",
|
|
96
|
+
md: "h-5 w-5",
|
|
97
|
+
lg: "h-6 w-6"
|
|
98
|
+
};
|
|
99
|
+
function Spinner({
|
|
100
|
+
size = "md",
|
|
101
|
+
"aria-label": ariaLabel,
|
|
102
|
+
className
|
|
103
|
+
}) {
|
|
104
|
+
const isDecorative = !ariaLabel;
|
|
105
|
+
return /* @__PURE__ */ jsxs(
|
|
106
|
+
"svg",
|
|
107
|
+
{
|
|
108
|
+
role: isDecorative ? void 0 : "status",
|
|
109
|
+
"aria-label": ariaLabel,
|
|
110
|
+
"aria-hidden": isDecorative ? "true" : void 0,
|
|
111
|
+
className: [sizeMap2[size], "animate-spin", className].filter(Boolean).join(" "),
|
|
112
|
+
viewBox: "0 0 24 24",
|
|
113
|
+
fill: "none",
|
|
114
|
+
children: [
|
|
115
|
+
/* @__PURE__ */ jsx2(
|
|
116
|
+
"circle",
|
|
117
|
+
{
|
|
118
|
+
className: "opacity-25",
|
|
119
|
+
cx: "12",
|
|
120
|
+
cy: "12",
|
|
121
|
+
r: "10",
|
|
122
|
+
stroke: "currentColor",
|
|
123
|
+
strokeWidth: "4"
|
|
124
|
+
}
|
|
125
|
+
),
|
|
126
|
+
/* @__PURE__ */ jsx2(
|
|
127
|
+
"path",
|
|
128
|
+
{
|
|
129
|
+
className: "opacity-75",
|
|
130
|
+
fill: "currentColor",
|
|
131
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
132
|
+
}
|
|
133
|
+
)
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
// src/components/InputGroup/InputGroupContext.ts
|
|
140
|
+
import { createContext, useContext } from "react";
|
|
141
|
+
var InputGroupContext = createContext({
|
|
142
|
+
inGroup: false,
|
|
143
|
+
position: "standalone"
|
|
144
|
+
});
|
|
145
|
+
function useInputGroup() {
|
|
146
|
+
return useContext(InputGroupContext);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
// src/components/Button/Button.tsx
|
|
150
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
151
|
+
var iconSizeMap = {
|
|
152
|
+
sm: "sm",
|
|
153
|
+
md: "sm",
|
|
154
|
+
lg: "md"
|
|
155
|
+
};
|
|
156
|
+
function groupRadiusClass(position) {
|
|
157
|
+
switch (position) {
|
|
158
|
+
case "start":
|
|
159
|
+
return "rounded-l-[var(--border-radius-md)] rounded-r-none";
|
|
160
|
+
case "middle":
|
|
161
|
+
return "rounded-none";
|
|
162
|
+
case "end":
|
|
163
|
+
return "rounded-r-[var(--border-radius-md)] rounded-l-none";
|
|
164
|
+
default:
|
|
165
|
+
return "rounded-[var(--border-radius-md)]";
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
function Button({
|
|
169
|
+
variant = "primary",
|
|
170
|
+
size = "md",
|
|
171
|
+
isLoading = false,
|
|
172
|
+
isDisabled,
|
|
173
|
+
iconLeft,
|
|
174
|
+
iconRight,
|
|
175
|
+
className,
|
|
176
|
+
children,
|
|
177
|
+
...props
|
|
178
|
+
}) {
|
|
179
|
+
const { inGroup, position } = useInputGroup();
|
|
180
|
+
const radiusClass = inGroup ? groupRadiusClass(position) : "rounded-[var(--border-radius-md)]";
|
|
181
|
+
const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
|
|
182
|
+
const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2";
|
|
183
|
+
return /* @__PURE__ */ jsxs2(
|
|
184
|
+
AriaButton,
|
|
185
|
+
{
|
|
186
|
+
...props,
|
|
187
|
+
isDisabled: isDisabled || isLoading,
|
|
188
|
+
className: twMerge(
|
|
189
|
+
"inline-flex items-center justify-center gap-2 shrink-0",
|
|
190
|
+
radiusClass,
|
|
191
|
+
"font-[var(--font-weight-medium)]",
|
|
192
|
+
"leading-[var(--line-height-tight)]",
|
|
193
|
+
"outline-none transition-colors",
|
|
194
|
+
focusRing,
|
|
195
|
+
"disabled:opacity-50 disabled:pointer-events-none",
|
|
196
|
+
isLoading ? "pointer-events-none" : "",
|
|
197
|
+
variantStyles[variant],
|
|
198
|
+
sizeStyles[size],
|
|
199
|
+
marginClass,
|
|
200
|
+
className
|
|
201
|
+
),
|
|
202
|
+
children: [
|
|
203
|
+
isLoading && /* @__PURE__ */ jsx3(Spinner, { size: iconSizeMap[size] }),
|
|
204
|
+
!isLoading && iconLeft && /* @__PURE__ */ jsx3(Icon, { icon: iconLeft, size: iconSizeMap[size] }),
|
|
205
|
+
children,
|
|
206
|
+
!isLoading && iconRight && /* @__PURE__ */ jsx3(Icon, { icon: iconRight, size: iconSizeMap[size] })
|
|
207
|
+
]
|
|
208
|
+
}
|
|
209
|
+
);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
// src/components/Tooltip/Tooltip.tsx
|
|
213
|
+
import {
|
|
214
|
+
Tooltip as AriaTooltip,
|
|
215
|
+
TooltipTrigger
|
|
216
|
+
} from "react-aria-components";
|
|
217
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
218
|
+
function Tooltip({
|
|
219
|
+
content,
|
|
220
|
+
children,
|
|
221
|
+
placement = "top",
|
|
222
|
+
delay = 500,
|
|
223
|
+
className
|
|
224
|
+
}) {
|
|
225
|
+
return /* @__PURE__ */ jsxs3(TooltipTrigger, { delay, children: [
|
|
226
|
+
children,
|
|
227
|
+
/* @__PURE__ */ jsx4(
|
|
228
|
+
AriaTooltip,
|
|
229
|
+
{
|
|
230
|
+
placement,
|
|
231
|
+
className: [
|
|
232
|
+
"bg-[var(--color-surface-overlay)] backdrop-blur-sm",
|
|
233
|
+
"text-[var(--color-text-inverse)] text-sm",
|
|
234
|
+
"px-3 py-1.5",
|
|
235
|
+
"rounded-md",
|
|
236
|
+
"max-w-xs",
|
|
237
|
+
"entering:animate-in entering:fade-in entering:duration-150",
|
|
238
|
+
"exiting:animate-out exiting:fade-out exiting:duration-100",
|
|
239
|
+
"entering:placement-top:slide-in-from-bottom-1",
|
|
240
|
+
"entering:placement-bottom:slide-in-from-top-1",
|
|
241
|
+
"entering:placement-left:slide-in-from-right-1",
|
|
242
|
+
"entering:placement-right:slide-in-from-left-1",
|
|
243
|
+
className
|
|
244
|
+
].filter(Boolean).join(" "),
|
|
245
|
+
children: content
|
|
246
|
+
}
|
|
247
|
+
)
|
|
248
|
+
] });
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
// src/components/IconButton/IconButton.tsx
|
|
252
|
+
import {
|
|
253
|
+
Button as AriaButton2
|
|
254
|
+
} from "react-aria-components";
|
|
255
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
256
|
+
var squareSizeStyles = {
|
|
257
|
+
sm: "h-8 w-8",
|
|
258
|
+
md: "h-10 w-10",
|
|
259
|
+
lg: "h-12 w-12"
|
|
260
|
+
};
|
|
261
|
+
var iconSizeMap2 = {
|
|
262
|
+
sm: "sm",
|
|
263
|
+
md: "sm",
|
|
264
|
+
lg: "md"
|
|
265
|
+
};
|
|
266
|
+
function groupRadiusClass2(position) {
|
|
267
|
+
switch (position) {
|
|
268
|
+
case "start":
|
|
269
|
+
return "rounded-l-[var(--border-radius-md)] rounded-r-none";
|
|
270
|
+
case "middle":
|
|
271
|
+
return "rounded-none";
|
|
272
|
+
case "end":
|
|
273
|
+
return "rounded-r-[var(--border-radius-md)] rounded-l-none";
|
|
274
|
+
default:
|
|
275
|
+
return "rounded-[var(--border-radius-md)]";
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
function IconButton({
|
|
279
|
+
icon,
|
|
280
|
+
"aria-label": ariaLabel,
|
|
281
|
+
variant = "ghost",
|
|
282
|
+
size = "md",
|
|
283
|
+
showTooltip = true,
|
|
284
|
+
tooltipPlacement = "top",
|
|
285
|
+
isLoading = false,
|
|
286
|
+
isDisabled,
|
|
287
|
+
className,
|
|
288
|
+
...props
|
|
289
|
+
}) {
|
|
290
|
+
const { inGroup, position } = useInputGroup();
|
|
291
|
+
const radiusClass = inGroup ? groupRadiusClass2(position) : "rounded-[var(--border-radius-md)]";
|
|
292
|
+
const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
|
|
293
|
+
const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2";
|
|
294
|
+
const button = /* @__PURE__ */ jsx5(
|
|
295
|
+
AriaButton2,
|
|
296
|
+
{
|
|
297
|
+
...props,
|
|
298
|
+
"aria-label": ariaLabel,
|
|
299
|
+
isDisabled: isDisabled || isLoading,
|
|
300
|
+
className: [
|
|
301
|
+
"inline-flex items-center justify-center shrink-0",
|
|
302
|
+
radiusClass,
|
|
303
|
+
"outline-none transition-colors",
|
|
304
|
+
focusRing,
|
|
305
|
+
"disabled:opacity-50 disabled:pointer-events-none",
|
|
306
|
+
isLoading ? "pointer-events-none" : "",
|
|
307
|
+
variantStyles[variant],
|
|
308
|
+
squareSizeStyles[size],
|
|
309
|
+
marginClass,
|
|
310
|
+
className
|
|
311
|
+
].filter(Boolean).join(" "),
|
|
312
|
+
children: isLoading ? /* @__PURE__ */ jsx5(Spinner, { size: iconSizeMap2[size] }) : /* @__PURE__ */ jsx5(Icon, { icon, size: iconSizeMap2[size] })
|
|
313
|
+
}
|
|
314
|
+
);
|
|
315
|
+
if (showTooltip) {
|
|
316
|
+
return /* @__PURE__ */ jsx5(Tooltip, { content: ariaLabel, placement: tooltipPlacement, children: button });
|
|
317
|
+
}
|
|
318
|
+
return button;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
// src/components/Input/Input.tsx
|
|
322
|
+
import {
|
|
323
|
+
TextField,
|
|
324
|
+
Label,
|
|
325
|
+
Input as AriaInput,
|
|
326
|
+
Text
|
|
327
|
+
} from "react-aria-components";
|
|
328
|
+
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
329
|
+
var sizeClasses = {
|
|
330
|
+
sm: "px-3 py-1.5 text-sm",
|
|
331
|
+
md: "px-4 py-2 text-base",
|
|
332
|
+
lg: "px-4 py-3 text-lg"
|
|
333
|
+
};
|
|
334
|
+
var prefixSizeClasses = {
|
|
335
|
+
sm: "px-3 text-sm",
|
|
336
|
+
md: "px-3 text-base",
|
|
337
|
+
lg: "px-4 text-lg"
|
|
338
|
+
};
|
|
339
|
+
var alignClasses = {
|
|
340
|
+
left: "text-left",
|
|
341
|
+
center: "text-center",
|
|
342
|
+
right: "text-right"
|
|
343
|
+
};
|
|
344
|
+
function groupRadiusClasses(position) {
|
|
345
|
+
switch (position) {
|
|
346
|
+
case "start":
|
|
347
|
+
return "rounded-l-[var(--border-radius-md)] rounded-r-none";
|
|
348
|
+
case "middle":
|
|
349
|
+
return "rounded-none";
|
|
350
|
+
case "end":
|
|
351
|
+
return "rounded-r-[var(--border-radius-md)] rounded-l-none";
|
|
352
|
+
default:
|
|
353
|
+
return "rounded-[var(--border-radius-md)]";
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
function Input({
|
|
357
|
+
label,
|
|
358
|
+
placeholder,
|
|
359
|
+
description,
|
|
360
|
+
errorMessage,
|
|
361
|
+
type = "text",
|
|
362
|
+
size = "md",
|
|
363
|
+
prefix,
|
|
364
|
+
align = "left",
|
|
365
|
+
isDisabled,
|
|
366
|
+
isRequired,
|
|
367
|
+
className,
|
|
368
|
+
...props
|
|
369
|
+
}) {
|
|
370
|
+
const isInvalid = !!errorMessage;
|
|
371
|
+
const { inGroup, position } = useInputGroup();
|
|
372
|
+
const borderColor = isInvalid ? "border-[var(--color-border-danger)]" : "border-[var(--color-border-default)] hover:border-[var(--color-border-strong)]";
|
|
373
|
+
const radiusClass = inGroup ? groupRadiusClasses(position) : "rounded-[var(--border-radius-md)]";
|
|
374
|
+
const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
|
|
375
|
+
return /* @__PURE__ */ jsxs4(
|
|
376
|
+
TextField,
|
|
377
|
+
{
|
|
378
|
+
...props,
|
|
379
|
+
type,
|
|
380
|
+
isDisabled,
|
|
381
|
+
isRequired,
|
|
382
|
+
isInvalid,
|
|
383
|
+
className: [
|
|
384
|
+
"flex flex-col gap-[var(--spacing-1)]",
|
|
385
|
+
inGroup ? "min-w-0 flex-1" : "",
|
|
386
|
+
marginClass,
|
|
387
|
+
className
|
|
388
|
+
].filter(Boolean).join(" "),
|
|
389
|
+
children: [
|
|
390
|
+
label && /* @__PURE__ */ jsxs4(
|
|
391
|
+
Label,
|
|
392
|
+
{
|
|
393
|
+
className: [
|
|
394
|
+
"text-[length:var(--font-size-sm)]",
|
|
395
|
+
"font-[number:var(--font-weight-medium)]",
|
|
396
|
+
"text-[var(--color-text-primary)]"
|
|
397
|
+
].join(" "),
|
|
398
|
+
children: [
|
|
399
|
+
label,
|
|
400
|
+
isRequired && /* @__PURE__ */ jsx6(
|
|
401
|
+
"span",
|
|
402
|
+
{
|
|
403
|
+
"aria-hidden": "true",
|
|
404
|
+
className: "ml-0.5 text-[var(--color-text-danger)]",
|
|
405
|
+
children: "*"
|
|
406
|
+
}
|
|
407
|
+
)
|
|
408
|
+
]
|
|
409
|
+
}
|
|
410
|
+
),
|
|
411
|
+
prefix ? /* @__PURE__ */ jsxs4(
|
|
412
|
+
"div",
|
|
413
|
+
{
|
|
414
|
+
className: [
|
|
415
|
+
"flex items-center overflow-hidden",
|
|
416
|
+
radiusClass,
|
|
417
|
+
"border",
|
|
418
|
+
"bg-[var(--color-surface-default)]",
|
|
419
|
+
"outline-none transition-colors",
|
|
420
|
+
borderColor,
|
|
421
|
+
"focus-within:ring-2 focus-within:ring-[var(--color-border-focus)] focus-within:border-[var(--color-border-focus)]",
|
|
422
|
+
inGroup ? "focus-within:z-10" : "",
|
|
423
|
+
isDisabled ? "opacity-50 pointer-events-none" : ""
|
|
424
|
+
].filter(Boolean).join(" "),
|
|
425
|
+
children: [
|
|
426
|
+
/* @__PURE__ */ jsx6(
|
|
427
|
+
"span",
|
|
428
|
+
{
|
|
429
|
+
className: [
|
|
430
|
+
"self-stretch flex items-center shrink-0 select-none",
|
|
431
|
+
"bg-[var(--color-surface-subtle)]",
|
|
432
|
+
"border-r border-r-[var(--color-border-default)]",
|
|
433
|
+
"text-[var(--color-text-secondary)]",
|
|
434
|
+
prefixSizeClasses[size]
|
|
435
|
+
].join(" "),
|
|
436
|
+
children: prefix
|
|
437
|
+
}
|
|
438
|
+
),
|
|
439
|
+
/* @__PURE__ */ jsx6(
|
|
440
|
+
AriaInput,
|
|
441
|
+
{
|
|
442
|
+
placeholder,
|
|
443
|
+
className: [
|
|
444
|
+
"w-full bg-transparent",
|
|
445
|
+
sizeClasses[size],
|
|
446
|
+
alignClasses[align],
|
|
447
|
+
"text-[var(--color-text-primary)]",
|
|
448
|
+
"placeholder:text-[var(--color-text-tertiary)]",
|
|
449
|
+
"outline-none border-none"
|
|
450
|
+
].join(" ")
|
|
451
|
+
}
|
|
452
|
+
)
|
|
453
|
+
]
|
|
454
|
+
}
|
|
455
|
+
) : /* @__PURE__ */ jsx6(
|
|
456
|
+
AriaInput,
|
|
457
|
+
{
|
|
458
|
+
placeholder,
|
|
459
|
+
className: [
|
|
460
|
+
"w-full",
|
|
461
|
+
sizeClasses[size],
|
|
462
|
+
alignClasses[align],
|
|
463
|
+
radiusClass,
|
|
464
|
+
"border",
|
|
465
|
+
"text-[var(--color-text-primary)]",
|
|
466
|
+
"bg-[var(--color-surface-default)]",
|
|
467
|
+
"placeholder:text-[var(--color-text-tertiary)]",
|
|
468
|
+
"outline-none transition-colors",
|
|
469
|
+
borderColor,
|
|
470
|
+
"focus:ring-2 focus:ring-[var(--color-border-focus)] focus:border-[var(--color-border-focus)]",
|
|
471
|
+
inGroup ? "focus:z-10" : "",
|
|
472
|
+
"disabled:opacity-50 disabled:pointer-events-none"
|
|
473
|
+
].join(" ")
|
|
474
|
+
}
|
|
475
|
+
),
|
|
476
|
+
description && !isInvalid && /* @__PURE__ */ jsx6(
|
|
477
|
+
Text,
|
|
478
|
+
{
|
|
479
|
+
slot: "description",
|
|
480
|
+
className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]",
|
|
481
|
+
children: description
|
|
482
|
+
}
|
|
483
|
+
),
|
|
484
|
+
isInvalid && /* @__PURE__ */ jsx6(
|
|
485
|
+
Text,
|
|
486
|
+
{
|
|
487
|
+
slot: "errorMessage",
|
|
488
|
+
className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]",
|
|
489
|
+
children: errorMessage
|
|
490
|
+
}
|
|
491
|
+
)
|
|
492
|
+
]
|
|
493
|
+
}
|
|
494
|
+
);
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
// src/components/Select/Select.tsx
|
|
498
|
+
import {
|
|
499
|
+
Button as Button2,
|
|
500
|
+
Label as Label2,
|
|
501
|
+
ListBox,
|
|
502
|
+
ListBoxItem,
|
|
503
|
+
Popover,
|
|
504
|
+
Select as AriaSelect,
|
|
505
|
+
SelectValue
|
|
506
|
+
} from "react-aria-components";
|
|
507
|
+
import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
508
|
+
function ChevronDown() {
|
|
509
|
+
return /* @__PURE__ */ jsx7(
|
|
510
|
+
"svg",
|
|
511
|
+
{
|
|
512
|
+
"aria-hidden": "true",
|
|
513
|
+
className: "h-4 w-4 text-[var(--color-text-secondary)]",
|
|
514
|
+
viewBox: "0 0 16 16",
|
|
515
|
+
fill: "none",
|
|
516
|
+
stroke: "currentColor",
|
|
517
|
+
strokeWidth: "2",
|
|
518
|
+
strokeLinecap: "round",
|
|
519
|
+
strokeLinejoin: "round",
|
|
520
|
+
children: /* @__PURE__ */ jsx7("path", { d: "M4 6l4 4 4-4" })
|
|
521
|
+
}
|
|
522
|
+
);
|
|
523
|
+
}
|
|
524
|
+
function CheckIcon() {
|
|
525
|
+
return /* @__PURE__ */ jsx7(
|
|
526
|
+
"svg",
|
|
527
|
+
{
|
|
528
|
+
"aria-hidden": "true",
|
|
529
|
+
className: "h-4 w-4 text-[var(--color-action-primary)]",
|
|
530
|
+
viewBox: "0 0 16 16",
|
|
531
|
+
fill: "none",
|
|
532
|
+
stroke: "currentColor",
|
|
533
|
+
strokeWidth: "2",
|
|
534
|
+
strokeLinecap: "round",
|
|
535
|
+
strokeLinejoin: "round",
|
|
536
|
+
children: /* @__PURE__ */ jsx7("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
|
|
537
|
+
}
|
|
538
|
+
);
|
|
539
|
+
}
|
|
540
|
+
function Select({
|
|
541
|
+
label,
|
|
542
|
+
items,
|
|
543
|
+
placeholder = "Select an option",
|
|
544
|
+
errorMessage,
|
|
545
|
+
isDisabled,
|
|
546
|
+
isRequired,
|
|
547
|
+
className,
|
|
548
|
+
...props
|
|
549
|
+
}) {
|
|
550
|
+
const hasError = Boolean(errorMessage);
|
|
551
|
+
return /* @__PURE__ */ jsxs5(
|
|
552
|
+
AriaSelect,
|
|
553
|
+
{
|
|
554
|
+
...props,
|
|
555
|
+
isDisabled,
|
|
556
|
+
isRequired,
|
|
557
|
+
isInvalid: hasError,
|
|
558
|
+
className: ["flex flex-col gap-1", className].filter(Boolean).join(" "),
|
|
559
|
+
children: [
|
|
560
|
+
/* @__PURE__ */ jsxs5(
|
|
561
|
+
Label2,
|
|
562
|
+
{
|
|
563
|
+
className: [
|
|
564
|
+
"text-sm font-[var(--font-weight-medium)] text-[var(--color-text-primary)]"
|
|
565
|
+
].join(" "),
|
|
566
|
+
children: [
|
|
567
|
+
label,
|
|
568
|
+
isRequired && /* @__PURE__ */ jsx7(
|
|
569
|
+
"span",
|
|
570
|
+
{
|
|
571
|
+
"aria-hidden": "true",
|
|
572
|
+
className: "ml-0.5 text-[var(--color-text-danger)]",
|
|
573
|
+
children: "*"
|
|
574
|
+
}
|
|
575
|
+
)
|
|
576
|
+
]
|
|
577
|
+
}
|
|
578
|
+
),
|
|
579
|
+
/* @__PURE__ */ jsxs5(
|
|
580
|
+
Button2,
|
|
581
|
+
{
|
|
582
|
+
className: [
|
|
583
|
+
"inline-flex items-center justify-between",
|
|
584
|
+
"w-full rounded-[var(--border-radius-md)] px-4 py-2",
|
|
585
|
+
"text-base text-left",
|
|
586
|
+
"border outline-none transition-colors",
|
|
587
|
+
hasError ? "border-[var(--color-border-danger)]" : "border-[var(--color-border-default)]",
|
|
588
|
+
"focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
|
|
589
|
+
"disabled:opacity-50 disabled:pointer-events-none",
|
|
590
|
+
"bg-[var(--color-surface-default)]"
|
|
591
|
+
].join(" "),
|
|
592
|
+
children: [
|
|
593
|
+
/* @__PURE__ */ jsx7(SelectValue, { className: "truncate data-[placeholder]:text-[var(--color-text-tertiary)]", children: ({ selectedText }) => selectedText || placeholder }),
|
|
594
|
+
/* @__PURE__ */ jsx7(ChevronDown, {})
|
|
595
|
+
]
|
|
596
|
+
}
|
|
597
|
+
),
|
|
598
|
+
hasError && /* @__PURE__ */ jsx7("span", { className: "text-sm text-[var(--color-text-danger)]", children: errorMessage }),
|
|
599
|
+
/* @__PURE__ */ jsx7(
|
|
600
|
+
Popover,
|
|
601
|
+
{
|
|
602
|
+
className: [
|
|
603
|
+
"w-[var(--trigger-width)]",
|
|
604
|
+
"rounded-[var(--border-radius-md)]",
|
|
605
|
+
"border border-[var(--color-border-default)]",
|
|
606
|
+
"bg-[var(--color-surface-default)]",
|
|
607
|
+
"shadow-lg",
|
|
608
|
+
"overflow-auto",
|
|
609
|
+
"entering:animate-in entering:fade-in entering:slide-in-from-top-1",
|
|
610
|
+
"exiting:animate-out exiting:fade-out exiting:slide-out-to-top-1"
|
|
611
|
+
].join(" "),
|
|
612
|
+
children: /* @__PURE__ */ jsx7(ListBox, { className: "p-1 outline-none", items, children: (item) => /* @__PURE__ */ jsx7(
|
|
613
|
+
ListBoxItem,
|
|
614
|
+
{
|
|
615
|
+
id: item.id,
|
|
616
|
+
textValue: item.name,
|
|
617
|
+
className: [
|
|
618
|
+
"flex items-center justify-between gap-2",
|
|
619
|
+
"px-4 py-2 rounded-[var(--border-radius-sm)]",
|
|
620
|
+
"text-base text-[var(--color-text-primary)]",
|
|
621
|
+
"cursor-pointer outline-none",
|
|
622
|
+
"hover:bg-[var(--color-surface-muted)]",
|
|
623
|
+
"focus:bg-[var(--color-surface-muted)]",
|
|
624
|
+
"selected:text-[var(--color-action-primary)] selected:font-[var(--font-weight-medium)]"
|
|
625
|
+
].join(" "),
|
|
626
|
+
children: ({ isSelected }) => /* @__PURE__ */ jsxs5(Fragment, { children: [
|
|
627
|
+
/* @__PURE__ */ jsx7("span", { className: "truncate", children: item.name }),
|
|
628
|
+
isSelected && /* @__PURE__ */ jsx7(CheckIcon, {})
|
|
629
|
+
] })
|
|
630
|
+
}
|
|
631
|
+
) })
|
|
632
|
+
}
|
|
633
|
+
)
|
|
634
|
+
]
|
|
635
|
+
}
|
|
636
|
+
);
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
// src/components/Table/Table.tsx
|
|
640
|
+
import {
|
|
641
|
+
Cell as AriaCell,
|
|
642
|
+
Column as AriaColumn,
|
|
643
|
+
Row as AriaRow,
|
|
644
|
+
Table as AriaTable,
|
|
645
|
+
TableBody as AriaTableBody,
|
|
646
|
+
TableHeader as AriaTableHeader
|
|
647
|
+
} from "react-aria-components";
|
|
648
|
+
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
649
|
+
var tableSizeClass = {
|
|
650
|
+
compact: "[--table-row-py:theme(spacing.1)]",
|
|
651
|
+
comfortable: "[--table-row-py:theme(spacing.3)]"
|
|
652
|
+
};
|
|
653
|
+
function Table({ size = "comfortable", className, ...props }) {
|
|
654
|
+
return /* @__PURE__ */ jsx8(
|
|
655
|
+
AriaTable,
|
|
656
|
+
{
|
|
657
|
+
...props,
|
|
658
|
+
className: [
|
|
659
|
+
"w-full border-collapse text-[var(--font-size-sm)] text-[var(--color-text-primary)]",
|
|
660
|
+
tableSizeClass[size],
|
|
661
|
+
className
|
|
662
|
+
].filter(Boolean).join(" ")
|
|
663
|
+
}
|
|
664
|
+
);
|
|
665
|
+
}
|
|
666
|
+
function TableHeader(props) {
|
|
667
|
+
return /* @__PURE__ */ jsx8(AriaTableHeader, { ...props });
|
|
668
|
+
}
|
|
669
|
+
function Column(props) {
|
|
670
|
+
return /* @__PURE__ */ jsx8(
|
|
671
|
+
AriaColumn,
|
|
672
|
+
{
|
|
673
|
+
...props,
|
|
674
|
+
className: [
|
|
675
|
+
"px-3 py-2 text-left font-[var(--font-weight-semibold)] text-[var(--color-text-secondary)]",
|
|
676
|
+
"border-b-2 border-[var(--color-border-default)]",
|
|
677
|
+
"cursor-default select-none outline-none",
|
|
678
|
+
"focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]"
|
|
679
|
+
].join(" "),
|
|
680
|
+
children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs6("span", { className: "inline-flex items-center gap-1", children: [
|
|
681
|
+
props.children,
|
|
682
|
+
allowsSorting && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "text-[var(--color-text-tertiary)]", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
|
|
683
|
+
] })
|
|
684
|
+
}
|
|
685
|
+
);
|
|
686
|
+
}
|
|
687
|
+
function TableBody(props) {
|
|
688
|
+
return /* @__PURE__ */ jsx8(AriaTableBody, { ...props });
|
|
689
|
+
}
|
|
690
|
+
function Row(props) {
|
|
691
|
+
return /* @__PURE__ */ jsx8(
|
|
692
|
+
AriaRow,
|
|
693
|
+
{
|
|
694
|
+
...props,
|
|
695
|
+
className: [
|
|
696
|
+
"border-b border-[var(--color-border-default)]",
|
|
697
|
+
"even:bg-[var(--color-neutral-50)]",
|
|
698
|
+
"hover:bg-[var(--color-teal-50)]",
|
|
699
|
+
"outline-none",
|
|
700
|
+
"focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]",
|
|
701
|
+
"transition-colors"
|
|
702
|
+
].join(" ")
|
|
703
|
+
}
|
|
704
|
+
);
|
|
705
|
+
}
|
|
706
|
+
function Cell(props) {
|
|
707
|
+
return /* @__PURE__ */ jsx8(
|
|
708
|
+
AriaCell,
|
|
709
|
+
{
|
|
710
|
+
...props,
|
|
711
|
+
className: [
|
|
712
|
+
"px-3 py-[var(--table-row-py)]",
|
|
713
|
+
"outline-none",
|
|
714
|
+
"focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]"
|
|
715
|
+
].join(" ")
|
|
716
|
+
}
|
|
717
|
+
);
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
// src/components/Dialog/Dialog.tsx
|
|
721
|
+
import {
|
|
722
|
+
Modal,
|
|
723
|
+
ModalOverlay,
|
|
724
|
+
Dialog as AriaDialog,
|
|
725
|
+
Heading
|
|
726
|
+
} from "react-aria-components";
|
|
727
|
+
import { X } from "lucide-react";
|
|
728
|
+
import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
729
|
+
var sizeStyles2 = {
|
|
730
|
+
sm: "max-w-md",
|
|
731
|
+
md: "max-w-lg",
|
|
732
|
+
lg: "max-w-2xl",
|
|
733
|
+
xl: "max-w-4xl"
|
|
734
|
+
};
|
|
735
|
+
function Dialog({
|
|
736
|
+
isOpen,
|
|
737
|
+
onOpenChange,
|
|
738
|
+
title,
|
|
739
|
+
size = "md",
|
|
740
|
+
children,
|
|
741
|
+
className
|
|
742
|
+
}) {
|
|
743
|
+
return /* @__PURE__ */ jsx9(
|
|
744
|
+
ModalOverlay,
|
|
745
|
+
{
|
|
746
|
+
isOpen,
|
|
747
|
+
onOpenChange,
|
|
748
|
+
isDismissable: true,
|
|
749
|
+
className: [
|
|
750
|
+
"fixed inset-0 z-50 bg-[var(--color-overlay-backdrop)] backdrop-blur-sm",
|
|
751
|
+
"flex items-center justify-center",
|
|
752
|
+
"data-[entering]:animate-in data-[entering]:fade-in",
|
|
753
|
+
"data-[exiting]:animate-out data-[exiting]:fade-out"
|
|
754
|
+
].join(" "),
|
|
755
|
+
children: /* @__PURE__ */ jsx9(
|
|
756
|
+
Modal,
|
|
757
|
+
{
|
|
758
|
+
className: [
|
|
759
|
+
"w-full mx-4",
|
|
760
|
+
sizeStyles2[size],
|
|
761
|
+
"bg-[var(--color-surface-default)] rounded-lg shadow-xl max-h-[85vh] flex flex-col",
|
|
762
|
+
"data-[entering]:animate-in data-[entering]:zoom-in-95 data-[entering]:fade-in",
|
|
763
|
+
"data-[exiting]:animate-out data-[exiting]:zoom-out-95 data-[exiting]:fade-out",
|
|
764
|
+
className
|
|
765
|
+
].filter(Boolean).join(" "),
|
|
766
|
+
children: /* @__PURE__ */ jsx9(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
767
|
+
/* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4 border-b border-[var(--color-border-default)]", children: [
|
|
768
|
+
/* @__PURE__ */ jsx9(
|
|
769
|
+
Heading,
|
|
770
|
+
{
|
|
771
|
+
slot: "title",
|
|
772
|
+
className: "text-lg font-semibold text-[var(--color-text-primary)]",
|
|
773
|
+
children: title
|
|
774
|
+
}
|
|
775
|
+
),
|
|
776
|
+
/* @__PURE__ */ jsx9(
|
|
777
|
+
"button",
|
|
778
|
+
{
|
|
779
|
+
type: "button",
|
|
780
|
+
onClick: close,
|
|
781
|
+
className: [
|
|
782
|
+
"inline-flex items-center justify-center rounded-md p-1",
|
|
783
|
+
"text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-muted)]",
|
|
784
|
+
"outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
|
|
785
|
+
"transition-colors"
|
|
786
|
+
].join(" "),
|
|
787
|
+
"aria-label": "Close",
|
|
788
|
+
children: /* @__PURE__ */ jsx9(X, { size: 20, "aria-hidden": "true" })
|
|
789
|
+
}
|
|
790
|
+
)
|
|
791
|
+
] }),
|
|
792
|
+
/* @__PURE__ */ jsx9("div", { className: "px-6 py-4 overflow-y-auto", children })
|
|
793
|
+
] }) })
|
|
794
|
+
}
|
|
795
|
+
)
|
|
796
|
+
}
|
|
797
|
+
);
|
|
798
|
+
}
|
|
799
|
+
|
|
800
|
+
// src/components/Toast/Toast.tsx
|
|
801
|
+
import {
|
|
802
|
+
createContext as createContext2,
|
|
803
|
+
useCallback,
|
|
804
|
+
useContext as useContext2,
|
|
805
|
+
useEffect,
|
|
806
|
+
useRef,
|
|
807
|
+
useState
|
|
808
|
+
} from "react";
|
|
809
|
+
import { createPortal } from "react-dom";
|
|
810
|
+
import { CheckCircle, XCircle, Info, X as X2 } from "lucide-react";
|
|
811
|
+
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
812
|
+
var ToastContext = createContext2(null);
|
|
813
|
+
var toastCounter = 0;
|
|
814
|
+
var defaultDuration = {
|
|
815
|
+
success: 5e3,
|
|
816
|
+
info: 5e3,
|
|
817
|
+
error: 1e4
|
|
818
|
+
};
|
|
819
|
+
var variantConfig = {
|
|
820
|
+
success: {
|
|
821
|
+
icon: CheckCircle,
|
|
822
|
+
containerClass: "bg-[var(--color-surface-success)] border-[var(--color-border-success)] text-[var(--color-text-success)]",
|
|
823
|
+
iconClass: "text-[var(--color-action-success)]"
|
|
824
|
+
},
|
|
825
|
+
error: {
|
|
826
|
+
icon: XCircle,
|
|
827
|
+
containerClass: "bg-[var(--color-surface-danger)] border-[var(--color-border-danger)] text-[var(--color-text-danger)]",
|
|
828
|
+
iconClass: "text-[var(--color-action-danger)]"
|
|
829
|
+
},
|
|
830
|
+
info: {
|
|
831
|
+
icon: Info,
|
|
832
|
+
containerClass: "bg-[var(--color-surface-info)] border-[var(--color-border-info)] text-[var(--color-text-info)]",
|
|
833
|
+
iconClass: "text-[var(--color-text-info)]"
|
|
834
|
+
}
|
|
835
|
+
};
|
|
836
|
+
function ToastItem({
|
|
837
|
+
toast,
|
|
838
|
+
onRemove
|
|
839
|
+
}) {
|
|
840
|
+
const [isExiting, setIsExiting] = useState(false);
|
|
841
|
+
const timerRef = useRef(null);
|
|
842
|
+
const config = variantConfig[toast.variant];
|
|
843
|
+
const IconComponent = config.icon;
|
|
844
|
+
const dismiss = useCallback(() => {
|
|
845
|
+
setIsExiting(true);
|
|
846
|
+
setTimeout(() => onRemove(toast.id), 200);
|
|
847
|
+
}, [onRemove, toast.id]);
|
|
848
|
+
useEffect(() => {
|
|
849
|
+
const duration = toast.duration ?? defaultDuration[toast.variant];
|
|
850
|
+
timerRef.current = setTimeout(dismiss, duration);
|
|
851
|
+
return () => {
|
|
852
|
+
if (timerRef.current) clearTimeout(timerRef.current);
|
|
853
|
+
};
|
|
854
|
+
}, [toast.duration, toast.variant, dismiss]);
|
|
855
|
+
return /* @__PURE__ */ jsxs8(
|
|
856
|
+
"div",
|
|
857
|
+
{
|
|
858
|
+
role: "status",
|
|
859
|
+
"aria-live": "polite",
|
|
860
|
+
className: [
|
|
861
|
+
"flex items-start gap-3 rounded-lg border px-4 py-3 shadow-md",
|
|
862
|
+
"min-w-[320px] max-w-[420px]",
|
|
863
|
+
"transition-all duration-200",
|
|
864
|
+
isExiting ? "translate-x-full opacity-0" : "translate-x-0 opacity-100 animate-in slide-in-from-right",
|
|
865
|
+
config.containerClass
|
|
866
|
+
].join(" "),
|
|
867
|
+
children: [
|
|
868
|
+
/* @__PURE__ */ jsx10(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
|
|
869
|
+
/* @__PURE__ */ jsx10("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
|
|
870
|
+
/* @__PURE__ */ jsx10(
|
|
871
|
+
"button",
|
|
872
|
+
{
|
|
873
|
+
type: "button",
|
|
874
|
+
onClick: dismiss,
|
|
875
|
+
className: "shrink-0 rounded p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
|
|
876
|
+
"aria-label": "Dismiss",
|
|
877
|
+
children: /* @__PURE__ */ jsx10(X2, { size: 16, "aria-hidden": "true" })
|
|
878
|
+
}
|
|
879
|
+
)
|
|
880
|
+
]
|
|
881
|
+
}
|
|
882
|
+
);
|
|
883
|
+
}
|
|
884
|
+
function ToastContainer({ toasts, removeToast }) {
|
|
885
|
+
if (toasts.length === 0) return null;
|
|
886
|
+
return createPortal(
|
|
887
|
+
/* @__PURE__ */ jsx10("div", { className: "fixed bottom-4 right-4 z-50 flex flex-col gap-2", children: toasts.map((toast) => /* @__PURE__ */ jsx10(ToastItem, { toast, onRemove: removeToast }, toast.id)) }),
|
|
888
|
+
document.body
|
|
889
|
+
);
|
|
890
|
+
}
|
|
891
|
+
function createToastBridge() {
|
|
892
|
+
const listeners = /* @__PURE__ */ new Set();
|
|
893
|
+
return {
|
|
894
|
+
emit: (toast) => {
|
|
895
|
+
listeners.forEach((fn) => fn(toast));
|
|
896
|
+
},
|
|
897
|
+
subscribe: (fn) => {
|
|
898
|
+
listeners.add(fn);
|
|
899
|
+
return () => {
|
|
900
|
+
listeners.delete(fn);
|
|
901
|
+
};
|
|
902
|
+
}
|
|
903
|
+
};
|
|
904
|
+
}
|
|
905
|
+
function ToastProvider({ children, bridge }) {
|
|
906
|
+
const [toasts, setToasts] = useState([]);
|
|
907
|
+
const addToast = useCallback((toast) => {
|
|
908
|
+
const id = `toast-${++toastCounter}`;
|
|
909
|
+
setToasts((prev) => [...prev, { ...toast, id }]);
|
|
910
|
+
}, []);
|
|
911
|
+
const removeToast = useCallback((id) => {
|
|
912
|
+
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
913
|
+
}, []);
|
|
914
|
+
useEffect(() => {
|
|
915
|
+
if (!bridge) return;
|
|
916
|
+
return bridge.subscribe(addToast);
|
|
917
|
+
}, [bridge, addToast]);
|
|
918
|
+
return /* @__PURE__ */ jsxs8(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
|
|
919
|
+
children,
|
|
920
|
+
/* @__PURE__ */ jsx10(ToastContainer, { toasts, removeToast })
|
|
921
|
+
] });
|
|
922
|
+
}
|
|
923
|
+
function useToast() {
|
|
924
|
+
const context = useContext2(ToastContext);
|
|
925
|
+
if (!context) {
|
|
926
|
+
throw new Error("useToast must be used within a ToastProvider");
|
|
927
|
+
}
|
|
928
|
+
return {
|
|
929
|
+
toast: context.addToast,
|
|
930
|
+
toasts: context.toasts,
|
|
931
|
+
removeToast: context.removeToast
|
|
932
|
+
};
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
// src/components/EmptyState/EmptyState.tsx
|
|
936
|
+
import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
937
|
+
function EmptyState({
|
|
938
|
+
icon,
|
|
939
|
+
title,
|
|
940
|
+
description,
|
|
941
|
+
action,
|
|
942
|
+
className
|
|
943
|
+
}) {
|
|
944
|
+
return /* @__PURE__ */ jsxs9(
|
|
945
|
+
"div",
|
|
946
|
+
{
|
|
947
|
+
className: [
|
|
948
|
+
"flex flex-col items-center text-center py-12 px-6",
|
|
949
|
+
className
|
|
950
|
+
].filter(Boolean).join(" "),
|
|
951
|
+
children: [
|
|
952
|
+
icon && /* @__PURE__ */ jsx11(Icon, { icon, size: "xl", className: "text-[var(--color-text-tertiary)]" }),
|
|
953
|
+
/* @__PURE__ */ jsx11("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)] mt-4", children: title }),
|
|
954
|
+
description && /* @__PURE__ */ jsx11("p", { className: "text-sm text-[var(--color-text-secondary)] mt-2 max-w-sm", children: description }),
|
|
955
|
+
action && /* @__PURE__ */ jsx11("div", { className: "mt-6", children: action })
|
|
956
|
+
]
|
|
957
|
+
}
|
|
958
|
+
);
|
|
959
|
+
}
|
|
960
|
+
|
|
961
|
+
// src/components/Checkbox/Checkbox.tsx
|
|
962
|
+
import {
|
|
963
|
+
Checkbox as AriaCheckbox
|
|
964
|
+
} from "react-aria-components";
|
|
965
|
+
import { Check } from "lucide-react";
|
|
966
|
+
import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
967
|
+
function Checkbox({ children, className, ...props }) {
|
|
968
|
+
return /* @__PURE__ */ jsx12(
|
|
969
|
+
AriaCheckbox,
|
|
970
|
+
{
|
|
971
|
+
...props,
|
|
972
|
+
className: [
|
|
973
|
+
"group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
|
|
974
|
+
"disabled:opacity-50 disabled:cursor-default",
|
|
975
|
+
className
|
|
976
|
+
].filter(Boolean).join(" "),
|
|
977
|
+
children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs10(Fragment3, { children: [
|
|
978
|
+
/* @__PURE__ */ jsxs10(
|
|
979
|
+
"div",
|
|
980
|
+
{
|
|
981
|
+
className: [
|
|
982
|
+
"flex items-center justify-center w-6 h-6 shrink-0",
|
|
983
|
+
"rounded-[var(--border-radius-sm)] border transition-colors",
|
|
984
|
+
"group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
|
|
985
|
+
isSelected || isIndeterminate ? "bg-[var(--color-action-primary)] border-[var(--color-action-primary)]" : "bg-[var(--color-surface-default)] border-[var(--color-border-default)] group-hover:border-[var(--color-border-strong)]"
|
|
986
|
+
].join(" "),
|
|
987
|
+
children: [
|
|
988
|
+
isSelected && /* @__PURE__ */ jsx12(Check, { className: "w-4 h-4 text-[var(--color-text-inverse)]", strokeWidth: 3 }),
|
|
989
|
+
isIndeterminate && /* @__PURE__ */ jsx12("div", { className: "w-3 h-0.5 bg-[var(--color-text-inverse)] rounded-full" })
|
|
990
|
+
]
|
|
991
|
+
}
|
|
992
|
+
),
|
|
993
|
+
children && /* @__PURE__ */ jsx12("span", { children })
|
|
994
|
+
] })
|
|
995
|
+
}
|
|
996
|
+
);
|
|
997
|
+
}
|
|
998
|
+
|
|
999
|
+
// src/components/Switch/Switch.tsx
|
|
1000
|
+
import {
|
|
1001
|
+
Switch as AriaSwitch
|
|
1002
|
+
} from "react-aria-components";
|
|
1003
|
+
import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1004
|
+
var trackColorMap = {
|
|
1005
|
+
primary: "bg-[var(--color-action-primary)]",
|
|
1006
|
+
success: "bg-[var(--color-action-success)]",
|
|
1007
|
+
destructive: "bg-[var(--color-action-danger)]"
|
|
1008
|
+
};
|
|
1009
|
+
var presetColors = new Set(Object.keys(trackColorMap));
|
|
1010
|
+
function isPresetColor(color) {
|
|
1011
|
+
return presetColors.has(color);
|
|
1012
|
+
}
|
|
1013
|
+
function Switch({
|
|
1014
|
+
children,
|
|
1015
|
+
color = "primary",
|
|
1016
|
+
className,
|
|
1017
|
+
...props
|
|
1018
|
+
}) {
|
|
1019
|
+
const isPreset = isPresetColor(color);
|
|
1020
|
+
return /* @__PURE__ */ jsx13(
|
|
1021
|
+
AriaSwitch,
|
|
1022
|
+
{
|
|
1023
|
+
...props,
|
|
1024
|
+
className: [
|
|
1025
|
+
"group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
|
|
1026
|
+
"disabled:opacity-50 disabled:cursor-default",
|
|
1027
|
+
className
|
|
1028
|
+
].filter(Boolean).join(" "),
|
|
1029
|
+
children: ({ isSelected }) => /* @__PURE__ */ jsxs11(Fragment4, { children: [
|
|
1030
|
+
/* @__PURE__ */ jsx13(
|
|
1031
|
+
"div",
|
|
1032
|
+
{
|
|
1033
|
+
className: [
|
|
1034
|
+
"w-9 h-5 rounded-full transition-colors shrink-0 p-0.5",
|
|
1035
|
+
"group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
|
|
1036
|
+
isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-[var(--color-border-strong)]" : ""
|
|
1037
|
+
].join(" "),
|
|
1038
|
+
style: isSelected && !isPreset ? { backgroundColor: color } : void 0,
|
|
1039
|
+
children: /* @__PURE__ */ jsx13(
|
|
1040
|
+
"div",
|
|
1041
|
+
{
|
|
1042
|
+
className: [
|
|
1043
|
+
"w-4 h-4 rounded-full bg-[var(--color-surface-default)] transition-transform shadow-sm",
|
|
1044
|
+
isSelected ? "translate-x-4" : "translate-x-0"
|
|
1045
|
+
].join(" ")
|
|
1046
|
+
}
|
|
1047
|
+
)
|
|
1048
|
+
}
|
|
1049
|
+
),
|
|
1050
|
+
children && /* @__PURE__ */ jsx13("span", { children })
|
|
1051
|
+
] })
|
|
1052
|
+
}
|
|
1053
|
+
);
|
|
1054
|
+
}
|
|
1055
|
+
|
|
1056
|
+
// src/components/Radio/Radio.tsx
|
|
1057
|
+
import {
|
|
1058
|
+
RadioGroup as AriaRadioGroup,
|
|
1059
|
+
Radio as AriaRadio
|
|
1060
|
+
} from "react-aria-components";
|
|
1061
|
+
import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1062
|
+
function RadioGroup({ children, className, ...props }) {
|
|
1063
|
+
return /* @__PURE__ */ jsx14(
|
|
1064
|
+
AriaRadioGroup,
|
|
1065
|
+
{
|
|
1066
|
+
...props,
|
|
1067
|
+
className: [
|
|
1068
|
+
"flex flex-col gap-2",
|
|
1069
|
+
"disabled:opacity-50",
|
|
1070
|
+
className
|
|
1071
|
+
].filter(Boolean).join(" "),
|
|
1072
|
+
children
|
|
1073
|
+
}
|
|
1074
|
+
);
|
|
1075
|
+
}
|
|
1076
|
+
function Radio({ children, className, ...props }) {
|
|
1077
|
+
return /* @__PURE__ */ jsx14(
|
|
1078
|
+
AriaRadio,
|
|
1079
|
+
{
|
|
1080
|
+
...props,
|
|
1081
|
+
className: [
|
|
1082
|
+
"group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
|
|
1083
|
+
"disabled:opacity-50 disabled:cursor-default",
|
|
1084
|
+
className
|
|
1085
|
+
].filter(Boolean).join(" "),
|
|
1086
|
+
children: ({ isSelected }) => /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
1087
|
+
/* @__PURE__ */ jsx14(
|
|
1088
|
+
"div",
|
|
1089
|
+
{
|
|
1090
|
+
className: [
|
|
1091
|
+
"flex items-center justify-center w-5 h-5 shrink-0",
|
|
1092
|
+
"rounded-full border-2 transition-colors",
|
|
1093
|
+
"group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
|
|
1094
|
+
isSelected ? "border-[var(--color-action-primary)]" : "border-[var(--color-border-default)] group-hover:border-[var(--color-border-strong)]"
|
|
1095
|
+
].join(" "),
|
|
1096
|
+
children: isSelected && /* @__PURE__ */ jsx14("div", { className: "w-2.5 h-2.5 rounded-full bg-[var(--color-action-primary)]" })
|
|
1097
|
+
}
|
|
1098
|
+
),
|
|
1099
|
+
children && /* @__PURE__ */ jsx14("span", { children })
|
|
1100
|
+
] })
|
|
1101
|
+
}
|
|
1102
|
+
);
|
|
1103
|
+
}
|
|
1104
|
+
function RadioButton({ children, className, ...props }) {
|
|
1105
|
+
return /* @__PURE__ */ jsx14(
|
|
1106
|
+
AriaRadio,
|
|
1107
|
+
{
|
|
1108
|
+
...props,
|
|
1109
|
+
className: [
|
|
1110
|
+
"group cursor-pointer",
|
|
1111
|
+
"disabled:opacity-50 disabled:cursor-default",
|
|
1112
|
+
className
|
|
1113
|
+
].filter(Boolean).join(" "),
|
|
1114
|
+
children: ({ isSelected }) => /* @__PURE__ */ jsx14(
|
|
1115
|
+
"div",
|
|
1116
|
+
{
|
|
1117
|
+
className: [
|
|
1118
|
+
"px-4 py-2 text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)]",
|
|
1119
|
+
"rounded-[var(--border-radius-md)] border transition-colors text-center",
|
|
1120
|
+
"group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
|
|
1121
|
+
isSelected ? "bg-[var(--color-action-primary)] border-[var(--color-action-primary)] text-[var(--color-text-inverse)]" : "bg-[var(--color-surface-default)] border-[var(--color-border-default)] text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)]"
|
|
1122
|
+
].join(" "),
|
|
1123
|
+
children
|
|
1124
|
+
}
|
|
1125
|
+
)
|
|
1126
|
+
}
|
|
1127
|
+
);
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
// src/components/Label/Label.tsx
|
|
1131
|
+
import {
|
|
1132
|
+
Label as AriaLabel
|
|
1133
|
+
} from "react-aria-components";
|
|
1134
|
+
import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1135
|
+
function Label3({ isRequired, children, className, ...props }) {
|
|
1136
|
+
return /* @__PURE__ */ jsxs13(
|
|
1137
|
+
AriaLabel,
|
|
1138
|
+
{
|
|
1139
|
+
...props,
|
|
1140
|
+
className: [
|
|
1141
|
+
"text-[length:var(--font-size-sm)]",
|
|
1142
|
+
"font-[number:var(--font-weight-medium)]",
|
|
1143
|
+
"text-[var(--color-text-primary)]",
|
|
1144
|
+
className
|
|
1145
|
+
].filter(Boolean).join(" "),
|
|
1146
|
+
children: [
|
|
1147
|
+
children,
|
|
1148
|
+
isRequired && /* @__PURE__ */ jsx15(
|
|
1149
|
+
"span",
|
|
1150
|
+
{
|
|
1151
|
+
"aria-hidden": "true",
|
|
1152
|
+
className: "ml-0.5 text-[var(--color-text-danger)]",
|
|
1153
|
+
children: "*"
|
|
1154
|
+
}
|
|
1155
|
+
)
|
|
1156
|
+
]
|
|
1157
|
+
}
|
|
1158
|
+
);
|
|
1159
|
+
}
|
|
1160
|
+
|
|
1161
|
+
// src/components/Field/Field.tsx
|
|
1162
|
+
import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1163
|
+
function getErrorMessage(error) {
|
|
1164
|
+
if (!error) return void 0;
|
|
1165
|
+
if (typeof error === "string") return error;
|
|
1166
|
+
return error.message;
|
|
1167
|
+
}
|
|
1168
|
+
function Field({
|
|
1169
|
+
label,
|
|
1170
|
+
isRequired,
|
|
1171
|
+
description,
|
|
1172
|
+
error,
|
|
1173
|
+
children,
|
|
1174
|
+
className
|
|
1175
|
+
}) {
|
|
1176
|
+
const errorMessage = getErrorMessage(error);
|
|
1177
|
+
return /* @__PURE__ */ jsxs14(
|
|
1178
|
+
"div",
|
|
1179
|
+
{
|
|
1180
|
+
className: ["flex flex-col gap-[var(--spacing-1)]", className].filter(Boolean).join(" "),
|
|
1181
|
+
children: [
|
|
1182
|
+
label && /* @__PURE__ */ jsx16(Label3, { isRequired, children: label }),
|
|
1183
|
+
children,
|
|
1184
|
+
description && !errorMessage && /* @__PURE__ */ jsx16("p", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description }),
|
|
1185
|
+
errorMessage && /* @__PURE__ */ jsx16("p", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]", children: errorMessage })
|
|
1186
|
+
]
|
|
1187
|
+
}
|
|
1188
|
+
);
|
|
1189
|
+
}
|
|
1190
|
+
|
|
1191
|
+
// src/components/Fieldset/Fieldset.tsx
|
|
1192
|
+
import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1193
|
+
function Fieldset({ legend, children, className }) {
|
|
1194
|
+
return /* @__PURE__ */ jsxs15(
|
|
1195
|
+
"fieldset",
|
|
1196
|
+
{
|
|
1197
|
+
className: [
|
|
1198
|
+
"flex flex-col gap-[var(--spacing-8)]",
|
|
1199
|
+
"border-none p-0 m-0",
|
|
1200
|
+
className
|
|
1201
|
+
].filter(Boolean).join(" "),
|
|
1202
|
+
children: [
|
|
1203
|
+
legend && /* @__PURE__ */ jsx17(
|
|
1204
|
+
"legend",
|
|
1205
|
+
{
|
|
1206
|
+
className: [
|
|
1207
|
+
"text-[length:var(--font-size-lg)]",
|
|
1208
|
+
"font-[number:var(--font-weight-semibold)]",
|
|
1209
|
+
"text-[var(--color-text-primary)]",
|
|
1210
|
+
"p-0"
|
|
1211
|
+
].join(" "),
|
|
1212
|
+
children: legend
|
|
1213
|
+
}
|
|
1214
|
+
),
|
|
1215
|
+
children
|
|
1216
|
+
]
|
|
1217
|
+
}
|
|
1218
|
+
);
|
|
1219
|
+
}
|
|
1220
|
+
|
|
1221
|
+
// src/components/InputGroup/InputGroup.tsx
|
|
1222
|
+
import React from "react";
|
|
1223
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
1224
|
+
function InputGroup({ children, className }) {
|
|
1225
|
+
const childArray = React.Children.toArray(children).filter(
|
|
1226
|
+
React.isValidElement
|
|
1227
|
+
);
|
|
1228
|
+
return /* @__PURE__ */ jsx18(
|
|
1229
|
+
"div",
|
|
1230
|
+
{
|
|
1231
|
+
className: ["flex items-stretch", className].filter(Boolean).join(" "),
|
|
1232
|
+
children: childArray.map((child, index) => {
|
|
1233
|
+
const position = childArray.length === 1 ? "standalone" : index === 0 ? "start" : index === childArray.length - 1 ? "end" : "middle";
|
|
1234
|
+
return /* @__PURE__ */ jsx18(
|
|
1235
|
+
InputGroupContext.Provider,
|
|
1236
|
+
{
|
|
1237
|
+
value: { inGroup: true, position },
|
|
1238
|
+
children: child
|
|
1239
|
+
},
|
|
1240
|
+
index
|
|
1241
|
+
);
|
|
1242
|
+
})
|
|
1243
|
+
}
|
|
1244
|
+
);
|
|
1245
|
+
}
|
|
1246
|
+
|
|
1247
|
+
// src/components/InputAddon/InputAddon.tsx
|
|
1248
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1249
|
+
function groupRadiusClass3(position) {
|
|
1250
|
+
switch (position) {
|
|
1251
|
+
case "start":
|
|
1252
|
+
return "rounded-l-[var(--border-radius-md)] rounded-r-none";
|
|
1253
|
+
case "middle":
|
|
1254
|
+
return "rounded-none";
|
|
1255
|
+
case "end":
|
|
1256
|
+
return "rounded-r-[var(--border-radius-md)] rounded-l-none";
|
|
1257
|
+
default:
|
|
1258
|
+
return "rounded-[var(--border-radius-md)]";
|
|
1259
|
+
}
|
|
1260
|
+
}
|
|
1261
|
+
function InputAddon({ children, className }) {
|
|
1262
|
+
const { inGroup, position } = useInputGroup();
|
|
1263
|
+
const radiusClass = inGroup ? groupRadiusClass3(position) : "rounded-[var(--border-radius-md)]";
|
|
1264
|
+
const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
|
|
1265
|
+
return /* @__PURE__ */ jsx19(
|
|
1266
|
+
"div",
|
|
1267
|
+
{
|
|
1268
|
+
className: [
|
|
1269
|
+
"flex items-center self-stretch shrink-0 select-none",
|
|
1270
|
+
"px-3 py-2 text-base",
|
|
1271
|
+
"bg-[var(--color-surface-subtle)]",
|
|
1272
|
+
"text-[var(--color-text-secondary)]",
|
|
1273
|
+
"border border-[var(--color-border-default)]",
|
|
1274
|
+
radiusClass,
|
|
1275
|
+
marginClass,
|
|
1276
|
+
className
|
|
1277
|
+
].filter(Boolean).join(" "),
|
|
1278
|
+
children
|
|
1279
|
+
}
|
|
1280
|
+
);
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1283
|
+
// src/components/Heading/Heading.tsx
|
|
1284
|
+
import { twMerge as twMerge2 } from "tailwind-merge";
|
|
1285
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
1286
|
+
var defaultSizeMap = {
|
|
1287
|
+
h1: "2xl",
|
|
1288
|
+
h2: "xl",
|
|
1289
|
+
h3: "lg",
|
|
1290
|
+
h4: "md",
|
|
1291
|
+
h5: "sm",
|
|
1292
|
+
h6: "xs"
|
|
1293
|
+
};
|
|
1294
|
+
var sizeStyles3 = {
|
|
1295
|
+
xs: "text-sm",
|
|
1296
|
+
sm: "text-base",
|
|
1297
|
+
md: "text-lg",
|
|
1298
|
+
lg: "text-xl",
|
|
1299
|
+
xl: "text-2xl",
|
|
1300
|
+
"2xl": "text-3xl",
|
|
1301
|
+
"3xl": "text-4xl"
|
|
1302
|
+
};
|
|
1303
|
+
var weightStyles = {
|
|
1304
|
+
semibold: "font-semibold",
|
|
1305
|
+
bold: "font-bold"
|
|
1306
|
+
};
|
|
1307
|
+
function Heading2({
|
|
1308
|
+
as: Tag = "h2",
|
|
1309
|
+
size,
|
|
1310
|
+
weight = "semibold",
|
|
1311
|
+
className,
|
|
1312
|
+
children
|
|
1313
|
+
}) {
|
|
1314
|
+
const resolvedSize = size ?? defaultSizeMap[Tag];
|
|
1315
|
+
return /* @__PURE__ */ jsx20(
|
|
1316
|
+
Tag,
|
|
1317
|
+
{
|
|
1318
|
+
className: twMerge2(
|
|
1319
|
+
weightStyles[weight],
|
|
1320
|
+
"text-[var(--color-text-primary)]",
|
|
1321
|
+
sizeStyles3[resolvedSize],
|
|
1322
|
+
className
|
|
1323
|
+
),
|
|
1324
|
+
children
|
|
1325
|
+
}
|
|
1326
|
+
);
|
|
1327
|
+
}
|
|
1328
|
+
function H1(props) {
|
|
1329
|
+
return /* @__PURE__ */ jsx20(
|
|
1330
|
+
Heading2,
|
|
1331
|
+
{
|
|
1332
|
+
...props,
|
|
1333
|
+
as: "h1",
|
|
1334
|
+
size: props.size ?? "2xl",
|
|
1335
|
+
weight: props.weight ?? "bold"
|
|
1336
|
+
}
|
|
1337
|
+
);
|
|
1338
|
+
}
|
|
1339
|
+
function H2(props) {
|
|
1340
|
+
return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h2", size: props.size ?? "xl" });
|
|
1341
|
+
}
|
|
1342
|
+
function H3(props) {
|
|
1343
|
+
return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h3", size: props.size ?? "lg" });
|
|
1344
|
+
}
|
|
1345
|
+
|
|
1346
|
+
// src/components/Link/Link.tsx
|
|
1347
|
+
import {
|
|
1348
|
+
Link as AriaLink
|
|
1349
|
+
} from "react-aria-components";
|
|
1350
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
1351
|
+
var variantStyles2 = {
|
|
1352
|
+
default: [
|
|
1353
|
+
"text-[var(--color-teal-700)] underline",
|
|
1354
|
+
"hover:text-[var(--color-teal-800)]"
|
|
1355
|
+
].join(" "),
|
|
1356
|
+
subtle: [
|
|
1357
|
+
"text-[var(--color-text-secondary)] no-underline",
|
|
1358
|
+
"hover:underline hover:text-[var(--color-text-primary)]"
|
|
1359
|
+
].join(" ")
|
|
1360
|
+
};
|
|
1361
|
+
function Link({
|
|
1362
|
+
variant = "default",
|
|
1363
|
+
className,
|
|
1364
|
+
...props
|
|
1365
|
+
}) {
|
|
1366
|
+
return /* @__PURE__ */ jsx21(
|
|
1367
|
+
AriaLink,
|
|
1368
|
+
{
|
|
1369
|
+
...props,
|
|
1370
|
+
className: [
|
|
1371
|
+
"outline-none transition-colors",
|
|
1372
|
+
"focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:rounded-sm",
|
|
1373
|
+
variantStyles2[variant],
|
|
1374
|
+
className
|
|
1375
|
+
].filter(Boolean).join(" ")
|
|
1376
|
+
}
|
|
1377
|
+
);
|
|
1378
|
+
}
|
|
1379
|
+
|
|
1380
|
+
// src/components/Breadcrumbs/Breadcrumbs.tsx
|
|
1381
|
+
import {
|
|
1382
|
+
Breadcrumbs as AriaBreadcrumbs,
|
|
1383
|
+
Breadcrumb as AriaBreadcrumb,
|
|
1384
|
+
Link as Link2
|
|
1385
|
+
} from "react-aria-components";
|
|
1386
|
+
import { ChevronRight } from "lucide-react";
|
|
1387
|
+
import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1388
|
+
function Breadcrumbs({ items, className }) {
|
|
1389
|
+
return /* @__PURE__ */ jsx22(
|
|
1390
|
+
"nav",
|
|
1391
|
+
{
|
|
1392
|
+
"aria-label": "Breadcrumb",
|
|
1393
|
+
className,
|
|
1394
|
+
children: /* @__PURE__ */ jsx22(
|
|
1395
|
+
AriaBreadcrumbs,
|
|
1396
|
+
{
|
|
1397
|
+
className: "flex items-center gap-1 text-sm",
|
|
1398
|
+
children: items.map((item, index) => {
|
|
1399
|
+
const isLast = index === items.length - 1;
|
|
1400
|
+
return /* @__PURE__ */ jsx22(
|
|
1401
|
+
AriaBreadcrumb,
|
|
1402
|
+
{
|
|
1403
|
+
id: item.id,
|
|
1404
|
+
className: "flex items-center gap-1",
|
|
1405
|
+
children: isLast ? /* @__PURE__ */ jsx22("span", { className: "font-medium text-[var(--color-text-primary)]", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
|
|
1406
|
+
/* @__PURE__ */ jsx22(
|
|
1407
|
+
Link2,
|
|
1408
|
+
{
|
|
1409
|
+
href: item.href,
|
|
1410
|
+
className: "text-[var(--color-text-secondary)] outline-none transition-colors hover:text-[var(--color-text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:rounded-sm",
|
|
1411
|
+
children: item.label
|
|
1412
|
+
}
|
|
1413
|
+
),
|
|
1414
|
+
/* @__PURE__ */ jsx22(
|
|
1415
|
+
ChevronRight,
|
|
1416
|
+
{
|
|
1417
|
+
className: "text-[var(--color-neutral-400)]",
|
|
1418
|
+
size: 16,
|
|
1419
|
+
"aria-hidden": "true"
|
|
1420
|
+
}
|
|
1421
|
+
)
|
|
1422
|
+
] })
|
|
1423
|
+
},
|
|
1424
|
+
item.id
|
|
1425
|
+
);
|
|
1426
|
+
})
|
|
1427
|
+
}
|
|
1428
|
+
)
|
|
1429
|
+
}
|
|
1430
|
+
);
|
|
1431
|
+
}
|
|
1432
|
+
|
|
1433
|
+
// src/components/ButtonLink/ButtonLink.tsx
|
|
1434
|
+
import {
|
|
1435
|
+
Link as AriaLink2
|
|
1436
|
+
} from "react-aria-components";
|
|
1437
|
+
import { twMerge as twMerge3 } from "tailwind-merge";
|
|
1438
|
+
import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1439
|
+
var iconSizeMap3 = {
|
|
1440
|
+
sm: "sm",
|
|
1441
|
+
md: "sm",
|
|
1442
|
+
lg: "md"
|
|
1443
|
+
};
|
|
1444
|
+
function ButtonLink({
|
|
1445
|
+
variant = "primary",
|
|
1446
|
+
size = "md",
|
|
1447
|
+
iconLeft,
|
|
1448
|
+
iconRight,
|
|
1449
|
+
className,
|
|
1450
|
+
children,
|
|
1451
|
+
...props
|
|
1452
|
+
}) {
|
|
1453
|
+
return /* @__PURE__ */ jsxs17(
|
|
1454
|
+
AriaLink2,
|
|
1455
|
+
{
|
|
1456
|
+
...props,
|
|
1457
|
+
className: twMerge3(
|
|
1458
|
+
"inline-flex items-center justify-center gap-2",
|
|
1459
|
+
"rounded-[var(--border-radius-md)]",
|
|
1460
|
+
"font-[var(--font-weight-medium)]",
|
|
1461
|
+
"leading-[var(--line-height-tight)]",
|
|
1462
|
+
"outline-none transition-colors no-underline",
|
|
1463
|
+
"focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
|
|
1464
|
+
variantStyles[variant],
|
|
1465
|
+
sizeStyles[size],
|
|
1466
|
+
className
|
|
1467
|
+
),
|
|
1468
|
+
children: [
|
|
1469
|
+
iconLeft && /* @__PURE__ */ jsx23(Icon, { icon: iconLeft, size: iconSizeMap3[size] }),
|
|
1470
|
+
children,
|
|
1471
|
+
iconRight && /* @__PURE__ */ jsx23(Icon, { icon: iconRight, size: iconSizeMap3[size] })
|
|
1472
|
+
]
|
|
1473
|
+
}
|
|
1474
|
+
);
|
|
1475
|
+
}
|
|
1476
|
+
var squareSizeStyles2 = {
|
|
1477
|
+
sm: "h-8 w-8",
|
|
1478
|
+
md: "h-10 w-10",
|
|
1479
|
+
lg: "h-12 w-12"
|
|
1480
|
+
};
|
|
1481
|
+
function IconButtonLink({
|
|
1482
|
+
icon,
|
|
1483
|
+
"aria-label": ariaLabel,
|
|
1484
|
+
variant = "ghost",
|
|
1485
|
+
size = "md",
|
|
1486
|
+
showTooltip = true,
|
|
1487
|
+
tooltipPlacement = "top",
|
|
1488
|
+
className,
|
|
1489
|
+
...props
|
|
1490
|
+
}) {
|
|
1491
|
+
const link = /* @__PURE__ */ jsx23(
|
|
1492
|
+
AriaLink2,
|
|
1493
|
+
{
|
|
1494
|
+
...props,
|
|
1495
|
+
"aria-label": ariaLabel,
|
|
1496
|
+
className: twMerge3(
|
|
1497
|
+
"inline-flex items-center justify-center",
|
|
1498
|
+
"rounded-[var(--border-radius-md)]",
|
|
1499
|
+
"outline-none transition-colors no-underline",
|
|
1500
|
+
"focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
|
|
1501
|
+
variantStyles[variant],
|
|
1502
|
+
squareSizeStyles2[size],
|
|
1503
|
+
className
|
|
1504
|
+
),
|
|
1505
|
+
children: /* @__PURE__ */ jsx23(Icon, { icon, size: iconSizeMap3[size] })
|
|
1506
|
+
}
|
|
1507
|
+
);
|
|
1508
|
+
if (showTooltip) {
|
|
1509
|
+
return /* @__PURE__ */ jsx23(Tooltip, { content: ariaLabel, placement: tooltipPlacement, children: link });
|
|
1510
|
+
}
|
|
1511
|
+
return link;
|
|
1512
|
+
}
|
|
1513
|
+
|
|
1514
|
+
// src/components/ToggleButton/ToggleButton.tsx
|
|
1515
|
+
import {
|
|
1516
|
+
ToggleButton as AriaToggleButton
|
|
1517
|
+
} from "react-aria-components";
|
|
1518
|
+
import { twMerge as twMerge4 } from "tailwind-merge";
|
|
1519
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
1520
|
+
var sizeStyles4 = {
|
|
1521
|
+
sm: "px-3 py-1.5 text-sm",
|
|
1522
|
+
md: "px-4 py-2 text-base",
|
|
1523
|
+
lg: "px-6 py-3 text-lg"
|
|
1524
|
+
};
|
|
1525
|
+
var squareSizeStyles3 = {
|
|
1526
|
+
sm: "h-7 w-7 text-sm",
|
|
1527
|
+
md: "h-8 w-8 text-base",
|
|
1528
|
+
lg: "h-10 w-10 text-lg"
|
|
1529
|
+
};
|
|
1530
|
+
var variantStyles3 = {
|
|
1531
|
+
default: {
|
|
1532
|
+
base: [
|
|
1533
|
+
"bg-transparent text-[var(--color-text-primary)]",
|
|
1534
|
+
"hover:bg-[var(--color-neutral-100)]",
|
|
1535
|
+
"pressed:bg-[var(--color-neutral-200)]"
|
|
1536
|
+
].join(" "),
|
|
1537
|
+
selected: "bg-[var(--color-neutral-200)] text-[var(--color-text-primary)]"
|
|
1538
|
+
},
|
|
1539
|
+
primary: {
|
|
1540
|
+
base: [
|
|
1541
|
+
"bg-transparent text-[var(--color-text-primary)]",
|
|
1542
|
+
"hover:bg-[var(--color-neutral-100)]",
|
|
1543
|
+
"pressed:bg-[var(--color-neutral-200)]"
|
|
1544
|
+
].join(" "),
|
|
1545
|
+
selected: "bg-[var(--color-teal-500)] text-[var(--color-text-inverse)]"
|
|
1546
|
+
},
|
|
1547
|
+
outlined: {
|
|
1548
|
+
base: [
|
|
1549
|
+
"bg-white text-[var(--color-text-primary)]",
|
|
1550
|
+
"border border-[var(--color-neutral-300)]",
|
|
1551
|
+
"hover:bg-[var(--color-neutral-100)]",
|
|
1552
|
+
"pressed:bg-[var(--color-neutral-200)]"
|
|
1553
|
+
].join(" "),
|
|
1554
|
+
selected: [
|
|
1555
|
+
"bg-[var(--color-neutral-800)] text-[var(--color-text-inverse)]",
|
|
1556
|
+
"border border-[var(--color-neutral-800)]"
|
|
1557
|
+
].join(" ")
|
|
1558
|
+
}
|
|
1559
|
+
};
|
|
1560
|
+
function ToggleButton({
|
|
1561
|
+
variant = "default",
|
|
1562
|
+
size = "md",
|
|
1563
|
+
isSquare = false,
|
|
1564
|
+
className,
|
|
1565
|
+
...props
|
|
1566
|
+
}) {
|
|
1567
|
+
const styles = variantStyles3[variant];
|
|
1568
|
+
return /* @__PURE__ */ jsx24(
|
|
1569
|
+
AriaToggleButton,
|
|
1570
|
+
{
|
|
1571
|
+
...props,
|
|
1572
|
+
className: ({ isSelected }) => twMerge4(
|
|
1573
|
+
"inline-flex items-center justify-center gap-2",
|
|
1574
|
+
isSquare ? "rounded-none" : "rounded-[var(--border-radius-md)]",
|
|
1575
|
+
"font-[var(--font-weight-medium)]",
|
|
1576
|
+
"leading-[var(--line-height-tight)]",
|
|
1577
|
+
"outline-none transition-colors",
|
|
1578
|
+
"focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
|
|
1579
|
+
"disabled:opacity-50 disabled:pointer-events-none",
|
|
1580
|
+
isSquare ? squareSizeStyles3[size] : sizeStyles4[size],
|
|
1581
|
+
isSelected ? styles.selected : styles.base,
|
|
1582
|
+
className
|
|
1583
|
+
)
|
|
1584
|
+
}
|
|
1585
|
+
);
|
|
1586
|
+
}
|
|
1587
|
+
|
|
1588
|
+
// src/components/Menu/Menu.tsx
|
|
1589
|
+
import {
|
|
1590
|
+
MenuTrigger,
|
|
1591
|
+
Menu as AriaMenu,
|
|
1592
|
+
MenuItem as AriaMenuItem,
|
|
1593
|
+
Popover as Popover2
|
|
1594
|
+
} from "react-aria-components";
|
|
1595
|
+
import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1596
|
+
function Menu({ items, children, className }) {
|
|
1597
|
+
return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
|
|
1598
|
+
children,
|
|
1599
|
+
/* @__PURE__ */ jsx25(
|
|
1600
|
+
Popover2,
|
|
1601
|
+
{
|
|
1602
|
+
className: [
|
|
1603
|
+
"bg-[var(--color-surface-primary)] rounded-[var(--border-radius-md)]",
|
|
1604
|
+
"shadow-lg border border-[var(--color-border-default)]",
|
|
1605
|
+
"py-1 min-w-48",
|
|
1606
|
+
"entering:animate-in entering:fade-in entering:zoom-in-95",
|
|
1607
|
+
"exiting:animate-out exiting:fade-out exiting:zoom-out-95",
|
|
1608
|
+
className
|
|
1609
|
+
].filter(Boolean).join(" "),
|
|
1610
|
+
children: /* @__PURE__ */ jsx25(
|
|
1611
|
+
AriaMenu,
|
|
1612
|
+
{
|
|
1613
|
+
items,
|
|
1614
|
+
onAction: (key) => {
|
|
1615
|
+
const item = items.find((i) => i.id === key);
|
|
1616
|
+
item?.onAction?.();
|
|
1617
|
+
},
|
|
1618
|
+
className: "outline-none",
|
|
1619
|
+
children: (item) => /* @__PURE__ */ jsxs18(
|
|
1620
|
+
AriaMenuItem,
|
|
1621
|
+
{
|
|
1622
|
+
id: item.id,
|
|
1623
|
+
href: item.href,
|
|
1624
|
+
target: item.target,
|
|
1625
|
+
isDisabled: item.isDisabled,
|
|
1626
|
+
className: [
|
|
1627
|
+
"flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
|
|
1628
|
+
"transition-colors",
|
|
1629
|
+
"focus:bg-[var(--color-neutral-100)]",
|
|
1630
|
+
"hover:bg-[var(--color-neutral-100)]",
|
|
1631
|
+
"disabled:opacity-50 disabled:pointer-events-none",
|
|
1632
|
+
item.isDanger ? "text-[var(--color-text-danger)]" : "text-[var(--color-text-primary)]"
|
|
1633
|
+
].filter(Boolean).join(" "),
|
|
1634
|
+
children: [
|
|
1635
|
+
item.icon && /* @__PURE__ */ jsx25(Icon, { icon: item.icon, size: "sm" }),
|
|
1636
|
+
item.label
|
|
1637
|
+
]
|
|
1638
|
+
}
|
|
1639
|
+
)
|
|
1640
|
+
}
|
|
1641
|
+
)
|
|
1642
|
+
}
|
|
1643
|
+
)
|
|
1644
|
+
] });
|
|
1645
|
+
}
|
|
1646
|
+
|
|
1647
|
+
// src/components/Popover/Popover.tsx
|
|
1648
|
+
import {
|
|
1649
|
+
DialogTrigger,
|
|
1650
|
+
Popover as AriaPopover,
|
|
1651
|
+
Dialog as AriaDialog2,
|
|
1652
|
+
Button as AriaButton3
|
|
1653
|
+
} from "react-aria-components";
|
|
1654
|
+
import { Fragment as Fragment7, jsx as jsx26 } from "react/jsx-runtime";
|
|
1655
|
+
function Popover3({ children, isOpen, onOpenChange }) {
|
|
1656
|
+
return /* @__PURE__ */ jsx26(DialogTrigger, { isOpen, onOpenChange, children });
|
|
1657
|
+
}
|
|
1658
|
+
function PopoverTrigger({ children, className }) {
|
|
1659
|
+
return /* @__PURE__ */ jsx26(
|
|
1660
|
+
AriaButton3,
|
|
1661
|
+
{
|
|
1662
|
+
className: [
|
|
1663
|
+
"inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer",
|
|
1664
|
+
"focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:rounded-[var(--border-radius-sm)]",
|
|
1665
|
+
className
|
|
1666
|
+
].filter(Boolean).join(" "),
|
|
1667
|
+
children
|
|
1668
|
+
}
|
|
1669
|
+
);
|
|
1670
|
+
}
|
|
1671
|
+
function PopoverContent({
|
|
1672
|
+
placement = "bottom",
|
|
1673
|
+
offset: offsetPx = 8,
|
|
1674
|
+
className,
|
|
1675
|
+
children
|
|
1676
|
+
}) {
|
|
1677
|
+
return /* @__PURE__ */ jsx26(
|
|
1678
|
+
AriaPopover,
|
|
1679
|
+
{
|
|
1680
|
+
placement,
|
|
1681
|
+
offset: offsetPx,
|
|
1682
|
+
className: [
|
|
1683
|
+
"z-50",
|
|
1684
|
+
"bg-[var(--color-surface-default)] border border-[var(--color-border-default)]",
|
|
1685
|
+
"rounded-[var(--border-radius-md)] shadow-lg",
|
|
1686
|
+
"entering:animate-in entering:fade-in entering:duration-150",
|
|
1687
|
+
"exiting:animate-out exiting:fade-out exiting:duration-100",
|
|
1688
|
+
"entering:placement-top:slide-in-from-bottom-1",
|
|
1689
|
+
"entering:placement-bottom:slide-in-from-top-1",
|
|
1690
|
+
"entering:placement-left:slide-in-from-right-1",
|
|
1691
|
+
"entering:placement-right:slide-in-from-left-1",
|
|
1692
|
+
className
|
|
1693
|
+
].filter(Boolean).join(" "),
|
|
1694
|
+
children: /* @__PURE__ */ jsx26(AriaDialog2, { className: "outline-none", children: ({ close }) => /* @__PURE__ */ jsx26(Fragment7, { children: typeof children === "function" ? children({ close }) : children }) })
|
|
1695
|
+
}
|
|
1696
|
+
);
|
|
1697
|
+
}
|
|
1698
|
+
|
|
1699
|
+
// src/components/Tabs/Tabs.tsx
|
|
1700
|
+
import { createContext as createContext3, useContext as useContext3 } from "react";
|
|
1701
|
+
import {
|
|
1702
|
+
Tabs as AriaTabs,
|
|
1703
|
+
TabList as AriaTabList,
|
|
1704
|
+
Tab as AriaTab,
|
|
1705
|
+
TabPanel as AriaTabPanel
|
|
1706
|
+
} from "react-aria-components";
|
|
1707
|
+
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
1708
|
+
var TabsContext = createContext3({
|
|
1709
|
+
variant: "underline",
|
|
1710
|
+
size: "md"
|
|
1711
|
+
});
|
|
1712
|
+
var sizeStyles5 = {
|
|
1713
|
+
sm: "px-3 py-1.5 text-sm",
|
|
1714
|
+
md: "px-4 py-2 text-base",
|
|
1715
|
+
lg: "px-6 py-3 text-lg"
|
|
1716
|
+
};
|
|
1717
|
+
function Tabs({
|
|
1718
|
+
variant = "underline",
|
|
1719
|
+
size = "md",
|
|
1720
|
+
orientation = "horizontal",
|
|
1721
|
+
className,
|
|
1722
|
+
children,
|
|
1723
|
+
...props
|
|
1724
|
+
}) {
|
|
1725
|
+
return /* @__PURE__ */ jsx27(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx27(
|
|
1726
|
+
AriaTabs,
|
|
1727
|
+
{
|
|
1728
|
+
...props,
|
|
1729
|
+
orientation,
|
|
1730
|
+
className: [
|
|
1731
|
+
orientation === "vertical" ? "flex" : "",
|
|
1732
|
+
className
|
|
1733
|
+
].filter(Boolean).join(" "),
|
|
1734
|
+
children
|
|
1735
|
+
}
|
|
1736
|
+
) });
|
|
1737
|
+
}
|
|
1738
|
+
function TabList({
|
|
1739
|
+
className,
|
|
1740
|
+
...props
|
|
1741
|
+
}) {
|
|
1742
|
+
const { variant } = useContext3(TabsContext);
|
|
1743
|
+
const baseStyles = variant === "underline" ? "flex items-center border-b border-[var(--color-border-default)]" : "inline-flex items-center bg-[var(--color-surface-muted)] rounded-[var(--border-radius-lg)] p-1 gap-1";
|
|
1744
|
+
const verticalStyles = variant === "underline" ? "flex-col border-b-0 border-r border-[var(--color-border-default)]" : "flex-col";
|
|
1745
|
+
return /* @__PURE__ */ jsx27(
|
|
1746
|
+
AriaTabList,
|
|
1747
|
+
{
|
|
1748
|
+
...props,
|
|
1749
|
+
className: ({ orientation }) => [
|
|
1750
|
+
baseStyles,
|
|
1751
|
+
orientation === "vertical" ? verticalStyles : "",
|
|
1752
|
+
className
|
|
1753
|
+
].filter(Boolean).join(" ")
|
|
1754
|
+
}
|
|
1755
|
+
);
|
|
1756
|
+
}
|
|
1757
|
+
function Tab({ className, ...props }) {
|
|
1758
|
+
const { variant, size } = useContext3(TabsContext);
|
|
1759
|
+
return /* @__PURE__ */ jsx27(
|
|
1760
|
+
AriaTab,
|
|
1761
|
+
{
|
|
1762
|
+
...props,
|
|
1763
|
+
className: ({ isSelected, isDisabled, isHovered, isPressed }) => [
|
|
1764
|
+
// Base
|
|
1765
|
+
"cursor-pointer outline-none transition-colors",
|
|
1766
|
+
"font-[var(--font-weight-medium)]",
|
|
1767
|
+
// Focus ring
|
|
1768
|
+
"focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
|
|
1769
|
+
// Disabled
|
|
1770
|
+
isDisabled ? "opacity-50 pointer-events-none" : "",
|
|
1771
|
+
// Size
|
|
1772
|
+
sizeStyles5[size],
|
|
1773
|
+
// Variant-specific styles
|
|
1774
|
+
...getTabVariantStyles(variant, {
|
|
1775
|
+
isSelected,
|
|
1776
|
+
isHovered,
|
|
1777
|
+
isPressed,
|
|
1778
|
+
isDisabled
|
|
1779
|
+
}),
|
|
1780
|
+
className
|
|
1781
|
+
].filter(Boolean).join(" ")
|
|
1782
|
+
}
|
|
1783
|
+
);
|
|
1784
|
+
}
|
|
1785
|
+
function getTabVariantStyles(variant, state) {
|
|
1786
|
+
if (variant === "underline") {
|
|
1787
|
+
return [
|
|
1788
|
+
// Shape
|
|
1789
|
+
"relative rounded-t-[var(--border-radius-sm)]",
|
|
1790
|
+
// Color states
|
|
1791
|
+
state.isSelected ? [
|
|
1792
|
+
"text-[var(--color-teal-700)] font-[var(--font-weight-semibold)]",
|
|
1793
|
+
// Bottom indicator via pseudo-element
|
|
1794
|
+
"after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-0.5 after:bg-[var(--color-teal-600)]"
|
|
1795
|
+
].join(" ") : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)]" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-50)]" : "text-[var(--color-text-secondary)] bg-transparent"
|
|
1796
|
+
];
|
|
1797
|
+
}
|
|
1798
|
+
return [
|
|
1799
|
+
// Shape
|
|
1800
|
+
"rounded-[var(--border-radius-md)]",
|
|
1801
|
+
// Color states
|
|
1802
|
+
state.isSelected ? "text-[var(--color-text-primary)] font-[var(--font-weight-semibold)] bg-[var(--color-surface-default)] shadow-sm" : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-50)] shadow-none" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-200)]" : "text-[var(--color-text-secondary)] bg-transparent"
|
|
1803
|
+
];
|
|
1804
|
+
}
|
|
1805
|
+
function TabPanel({ className, ...props }) {
|
|
1806
|
+
return /* @__PURE__ */ jsx27(
|
|
1807
|
+
AriaTabPanel,
|
|
1808
|
+
{
|
|
1809
|
+
...props,
|
|
1810
|
+
className: ["mt-4 outline-none", className].filter(Boolean).join(" ")
|
|
1811
|
+
}
|
|
1812
|
+
);
|
|
1813
|
+
}
|
|
1814
|
+
|
|
1815
|
+
// src/tokens/tokens.ts
|
|
1816
|
+
var ColorPurple50 = "#f5f0fa";
|
|
1817
|
+
var ColorPurple100 = "#ead9f5";
|
|
1818
|
+
var ColorPurple200 = "#d4b3eb";
|
|
1819
|
+
var ColorPurple300 = "#b87ddb";
|
|
1820
|
+
var ColorPurple400 = "#9b4fcb";
|
|
1821
|
+
var ColorPurple500 = "#7a2ea8";
|
|
1822
|
+
var ColorPurple600 = "#6b2695";
|
|
1823
|
+
var ColorPurple700 = "#5c2483";
|
|
1824
|
+
var ColorPurple800 = "#4a1d6a";
|
|
1825
|
+
var ColorPurple900 = "#3a1754";
|
|
1826
|
+
var ColorTeal50 = "#edf9f9";
|
|
1827
|
+
var ColorTeal100 = "#d0f0f0";
|
|
1828
|
+
var ColorTeal200 = "#a1e1e2";
|
|
1829
|
+
var ColorTeal300 = "#6dd0d1";
|
|
1830
|
+
var ColorTeal400 = "#44c4c5";
|
|
1831
|
+
var ColorTeal500 = "#35b7b8";
|
|
1832
|
+
var ColorTeal600 = "#2a9b9c";
|
|
1833
|
+
var ColorTeal700 = "#217d7e";
|
|
1834
|
+
var ColorTeal800 = "#1a6364";
|
|
1835
|
+
var ColorTeal900 = "#144d4e";
|
|
1836
|
+
var ColorGreen50 = "#f0fdf4";
|
|
1837
|
+
var ColorGreen100 = "#dcfce7";
|
|
1838
|
+
var ColorGreen200 = "#bbf7d0";
|
|
1839
|
+
var ColorGreen300 = "#86efac";
|
|
1840
|
+
var ColorGreen400 = "#4ade80";
|
|
1841
|
+
var ColorGreen500 = "#22c55e";
|
|
1842
|
+
var ColorGreen600 = "#16a34a";
|
|
1843
|
+
var ColorGreen700 = "#15803d";
|
|
1844
|
+
var ColorGreen800 = "#166534";
|
|
1845
|
+
var ColorGreen900 = "#14532d";
|
|
1846
|
+
var ColorRose50 = "#fff1f2";
|
|
1847
|
+
var ColorRose100 = "#ffe4e6";
|
|
1848
|
+
var ColorRose200 = "#fecdd3";
|
|
1849
|
+
var ColorRose300 = "#fda4af";
|
|
1850
|
+
var ColorRose400 = "#fb7185";
|
|
1851
|
+
var ColorRose500 = "#f43f5e";
|
|
1852
|
+
var ColorRose600 = "#e11d48";
|
|
1853
|
+
var ColorRose700 = "#be123c";
|
|
1854
|
+
var ColorRose800 = "#9f1239";
|
|
1855
|
+
var ColorRose900 = "#881337";
|
|
1856
|
+
var ColorSlate50 = "#f8fafc";
|
|
1857
|
+
var ColorSlate100 = "#f1f5f9";
|
|
1858
|
+
var ColorSlate200 = "#e2e8f0";
|
|
1859
|
+
var ColorSlate300 = "#cbd5e1";
|
|
1860
|
+
var ColorSlate400 = "#94a3b8";
|
|
1861
|
+
var ColorSlate500 = "#64748b";
|
|
1862
|
+
var ColorSlate600 = "#475569";
|
|
1863
|
+
var ColorSlate700 = "#334155";
|
|
1864
|
+
var ColorSlate800 = "#1e293b";
|
|
1865
|
+
var ColorSlate900 = "#0f172a";
|
|
1866
|
+
var ColorNeutral0 = "#ffffff";
|
|
1867
|
+
var ColorNeutral50 = "#f9fafb";
|
|
1868
|
+
var ColorNeutral100 = "#f3f4f6";
|
|
1869
|
+
var ColorNeutral200 = "#e5e7eb";
|
|
1870
|
+
var ColorNeutral300 = "#d1d5db";
|
|
1871
|
+
var ColorNeutral400 = "#9ca3af";
|
|
1872
|
+
var ColorNeutral500 = "#6b7280";
|
|
1873
|
+
var ColorNeutral600 = "#4b5563";
|
|
1874
|
+
var ColorNeutral700 = "#374151";
|
|
1875
|
+
var ColorNeutral800 = "#1f2937";
|
|
1876
|
+
var ColorNeutral900 = "#111827";
|
|
1877
|
+
var ColorNeutral950 = "#030712";
|
|
1878
|
+
var ColorNeutral1000 = "#000000";
|
|
1879
|
+
var ColorBrandPrimary = "#5c2483";
|
|
1880
|
+
var ColorBrandAccent = "#35b7b8";
|
|
1881
|
+
var ColorActionPrimary = "#35b7b8";
|
|
1882
|
+
var ColorActionPrimaryHover = "#2a9b9c";
|
|
1883
|
+
var ColorActionPrimaryActive = "#217d7e";
|
|
1884
|
+
var ColorActionSecondary = "#5c2483";
|
|
1885
|
+
var ColorActionSecondaryHover = "#6b2695";
|
|
1886
|
+
var ColorActionDanger = "#e11d48";
|
|
1887
|
+
var ColorActionDangerHover = "#be123c";
|
|
1888
|
+
var ColorActionSuccess = "#16a34a";
|
|
1889
|
+
var ColorActionSuccessHover = "#15803d";
|
|
1890
|
+
var ColorActionInfo = "#475569";
|
|
1891
|
+
var ColorActionInfoHover = "#334155";
|
|
1892
|
+
var ColorActionDefault = "#1e293b";
|
|
1893
|
+
var ColorActionDefaultHover = "#334155";
|
|
1894
|
+
var ColorTextPrimary = "#111827";
|
|
1895
|
+
var ColorTextSecondary = "#4b5563";
|
|
1896
|
+
var ColorTextTertiary = "#9ca3af";
|
|
1897
|
+
var ColorTextInverse = "#ffffff";
|
|
1898
|
+
var ColorTextBrand = "#5c2483";
|
|
1899
|
+
var ColorTextAccent = "#35b7b8";
|
|
1900
|
+
var ColorTextDanger = "#e11d48";
|
|
1901
|
+
var ColorTextSuccess = "#16a34a";
|
|
1902
|
+
var ColorTextInfo = "#475569";
|
|
1903
|
+
var ColorTextWarning = "#d97706";
|
|
1904
|
+
var ColorSurfaceDefault = "#ffffff";
|
|
1905
|
+
var ColorSurfaceSubtle = "#f9fafb";
|
|
1906
|
+
var ColorSurfaceMuted = "#f3f4f6";
|
|
1907
|
+
var ColorSurfaceBrand = "#5c2483";
|
|
1908
|
+
var ColorSurfaceAccent = "#35b7b8";
|
|
1909
|
+
var ColorSurfaceDanger = "#fff1f2";
|
|
1910
|
+
var ColorSurfaceSuccess = "#f0fdf4";
|
|
1911
|
+
var ColorSurfaceWarning = "#fffbeb";
|
|
1912
|
+
var ColorSurfaceInfo = "#f8fafc";
|
|
1913
|
+
var ColorSurfaceOverlay = "#000000cc";
|
|
1914
|
+
var ColorBorderDefault = "#e5e7eb";
|
|
1915
|
+
var ColorBorderStrong = "#d1d5db";
|
|
1916
|
+
var ColorBorderBrand = "#5c2483";
|
|
1917
|
+
var ColorBorderAccent = "#35b7b8";
|
|
1918
|
+
var ColorBorderFocus = "#35b7b8";
|
|
1919
|
+
var ColorBorderDanger = "#e11d48";
|
|
1920
|
+
var ColorBorderSuccess = "#16a34a";
|
|
1921
|
+
var ColorBorderInfo = "#94a3b8";
|
|
1922
|
+
var ColorBorderWarning = "#d97706";
|
|
1923
|
+
var ColorOverlayBackdrop = "#00000066";
|
|
1924
|
+
var Spacing1 = "4px";
|
|
1925
|
+
var Spacing2 = "8px";
|
|
1926
|
+
var Spacing3 = "12px";
|
|
1927
|
+
var Spacing4 = "16px";
|
|
1928
|
+
var Spacing6 = "24px";
|
|
1929
|
+
var Spacing8 = "32px";
|
|
1930
|
+
var Spacing12 = "48px";
|
|
1931
|
+
var Spacing16 = "64px";
|
|
1932
|
+
var BorderRadiusNone = "0px";
|
|
1933
|
+
var BorderRadiusSm = "4px";
|
|
1934
|
+
var BorderRadiusMd = "8px";
|
|
1935
|
+
var BorderRadiusLg = "12px";
|
|
1936
|
+
var BorderRadiusXl = "16px";
|
|
1937
|
+
var BorderRadiusFull = "9999px";
|
|
1938
|
+
var FontSizeXs = "12px";
|
|
1939
|
+
var FontSizeSm = "14px";
|
|
1940
|
+
var FontSizeBase = "16px";
|
|
1941
|
+
var FontSizeLg = "18px";
|
|
1942
|
+
var FontSizeXl = "20px";
|
|
1943
|
+
var FontSize2xl = "24px";
|
|
1944
|
+
var FontSize3xl = "30px";
|
|
1945
|
+
var FontSize4xl = "36px";
|
|
1946
|
+
var FontSize5xl = "48px";
|
|
1947
|
+
var FontWeightLight = 300;
|
|
1948
|
+
var FontWeightRegular = 400;
|
|
1949
|
+
var FontWeightMedium = 500;
|
|
1950
|
+
var FontWeightSemibold = 600;
|
|
1951
|
+
var FontWeightBold = 700;
|
|
1952
|
+
var FontWeightExtrabold = 800;
|
|
1953
|
+
var LineHeightTight = 1.25;
|
|
1954
|
+
var LineHeightNormal = 1.5;
|
|
1955
|
+
var LineHeightRelaxed = 1.625;
|
|
1956
|
+
export {
|
|
1957
|
+
BorderRadiusFull,
|
|
1958
|
+
BorderRadiusLg,
|
|
1959
|
+
BorderRadiusMd,
|
|
1960
|
+
BorderRadiusNone,
|
|
1961
|
+
BorderRadiusSm,
|
|
1962
|
+
BorderRadiusXl,
|
|
1963
|
+
Breadcrumbs,
|
|
1964
|
+
Button,
|
|
1965
|
+
ButtonLink,
|
|
1966
|
+
Cell,
|
|
1967
|
+
Checkbox,
|
|
1968
|
+
ColorActionDanger,
|
|
1969
|
+
ColorActionDangerHover,
|
|
1970
|
+
ColorActionDefault,
|
|
1971
|
+
ColorActionDefaultHover,
|
|
1972
|
+
ColorActionInfo,
|
|
1973
|
+
ColorActionInfoHover,
|
|
1974
|
+
ColorActionPrimary,
|
|
1975
|
+
ColorActionPrimaryActive,
|
|
1976
|
+
ColorActionPrimaryHover,
|
|
1977
|
+
ColorActionSecondary,
|
|
1978
|
+
ColorActionSecondaryHover,
|
|
1979
|
+
ColorActionSuccess,
|
|
1980
|
+
ColorActionSuccessHover,
|
|
1981
|
+
ColorBorderAccent,
|
|
1982
|
+
ColorBorderBrand,
|
|
1983
|
+
ColorBorderDanger,
|
|
1984
|
+
ColorBorderDefault,
|
|
1985
|
+
ColorBorderFocus,
|
|
1986
|
+
ColorBorderInfo,
|
|
1987
|
+
ColorBorderStrong,
|
|
1988
|
+
ColorBorderSuccess,
|
|
1989
|
+
ColorBorderWarning,
|
|
1990
|
+
ColorBrandAccent,
|
|
1991
|
+
ColorBrandPrimary,
|
|
1992
|
+
ColorGreen100,
|
|
1993
|
+
ColorGreen200,
|
|
1994
|
+
ColorGreen300,
|
|
1995
|
+
ColorGreen400,
|
|
1996
|
+
ColorGreen50,
|
|
1997
|
+
ColorGreen500,
|
|
1998
|
+
ColorGreen600,
|
|
1999
|
+
ColorGreen700,
|
|
2000
|
+
ColorGreen800,
|
|
2001
|
+
ColorGreen900,
|
|
2002
|
+
ColorNeutral0,
|
|
2003
|
+
ColorNeutral100,
|
|
2004
|
+
ColorNeutral1000,
|
|
2005
|
+
ColorNeutral200,
|
|
2006
|
+
ColorNeutral300,
|
|
2007
|
+
ColorNeutral400,
|
|
2008
|
+
ColorNeutral50,
|
|
2009
|
+
ColorNeutral500,
|
|
2010
|
+
ColorNeutral600,
|
|
2011
|
+
ColorNeutral700,
|
|
2012
|
+
ColorNeutral800,
|
|
2013
|
+
ColorNeutral900,
|
|
2014
|
+
ColorNeutral950,
|
|
2015
|
+
ColorOverlayBackdrop,
|
|
2016
|
+
ColorPurple100,
|
|
2017
|
+
ColorPurple200,
|
|
2018
|
+
ColorPurple300,
|
|
2019
|
+
ColorPurple400,
|
|
2020
|
+
ColorPurple50,
|
|
2021
|
+
ColorPurple500,
|
|
2022
|
+
ColorPurple600,
|
|
2023
|
+
ColorPurple700,
|
|
2024
|
+
ColorPurple800,
|
|
2025
|
+
ColorPurple900,
|
|
2026
|
+
ColorRose100,
|
|
2027
|
+
ColorRose200,
|
|
2028
|
+
ColorRose300,
|
|
2029
|
+
ColorRose400,
|
|
2030
|
+
ColorRose50,
|
|
2031
|
+
ColorRose500,
|
|
2032
|
+
ColorRose600,
|
|
2033
|
+
ColorRose700,
|
|
2034
|
+
ColorRose800,
|
|
2035
|
+
ColorRose900,
|
|
2036
|
+
ColorSlate100,
|
|
2037
|
+
ColorSlate200,
|
|
2038
|
+
ColorSlate300,
|
|
2039
|
+
ColorSlate400,
|
|
2040
|
+
ColorSlate50,
|
|
2041
|
+
ColorSlate500,
|
|
2042
|
+
ColorSlate600,
|
|
2043
|
+
ColorSlate700,
|
|
2044
|
+
ColorSlate800,
|
|
2045
|
+
ColorSlate900,
|
|
2046
|
+
ColorSurfaceAccent,
|
|
2047
|
+
ColorSurfaceBrand,
|
|
2048
|
+
ColorSurfaceDanger,
|
|
2049
|
+
ColorSurfaceDefault,
|
|
2050
|
+
ColorSurfaceInfo,
|
|
2051
|
+
ColorSurfaceMuted,
|
|
2052
|
+
ColorSurfaceOverlay,
|
|
2053
|
+
ColorSurfaceSubtle,
|
|
2054
|
+
ColorSurfaceSuccess,
|
|
2055
|
+
ColorSurfaceWarning,
|
|
2056
|
+
ColorTeal100,
|
|
2057
|
+
ColorTeal200,
|
|
2058
|
+
ColorTeal300,
|
|
2059
|
+
ColorTeal400,
|
|
2060
|
+
ColorTeal50,
|
|
2061
|
+
ColorTeal500,
|
|
2062
|
+
ColorTeal600,
|
|
2063
|
+
ColorTeal700,
|
|
2064
|
+
ColorTeal800,
|
|
2065
|
+
ColorTeal900,
|
|
2066
|
+
ColorTextAccent,
|
|
2067
|
+
ColorTextBrand,
|
|
2068
|
+
ColorTextDanger,
|
|
2069
|
+
ColorTextInfo,
|
|
2070
|
+
ColorTextInverse,
|
|
2071
|
+
ColorTextPrimary,
|
|
2072
|
+
ColorTextSecondary,
|
|
2073
|
+
ColorTextSuccess,
|
|
2074
|
+
ColorTextTertiary,
|
|
2075
|
+
ColorTextWarning,
|
|
2076
|
+
Column,
|
|
2077
|
+
Dialog,
|
|
2078
|
+
EmptyState,
|
|
2079
|
+
Field,
|
|
2080
|
+
Fieldset,
|
|
2081
|
+
FontSize2xl,
|
|
2082
|
+
FontSize3xl,
|
|
2083
|
+
FontSize4xl,
|
|
2084
|
+
FontSize5xl,
|
|
2085
|
+
FontSizeBase,
|
|
2086
|
+
FontSizeLg,
|
|
2087
|
+
FontSizeSm,
|
|
2088
|
+
FontSizeXl,
|
|
2089
|
+
FontSizeXs,
|
|
2090
|
+
FontWeightBold,
|
|
2091
|
+
FontWeightExtrabold,
|
|
2092
|
+
FontWeightLight,
|
|
2093
|
+
FontWeightMedium,
|
|
2094
|
+
FontWeightRegular,
|
|
2095
|
+
FontWeightSemibold,
|
|
2096
|
+
H1,
|
|
2097
|
+
H2,
|
|
2098
|
+
H3,
|
|
2099
|
+
Heading2 as Heading,
|
|
2100
|
+
Icon,
|
|
2101
|
+
IconButton,
|
|
2102
|
+
IconButtonLink,
|
|
2103
|
+
Input,
|
|
2104
|
+
InputAddon,
|
|
2105
|
+
InputGroup,
|
|
2106
|
+
InputGroupContext,
|
|
2107
|
+
Label3 as Label,
|
|
2108
|
+
LineHeightNormal,
|
|
2109
|
+
LineHeightRelaxed,
|
|
2110
|
+
LineHeightTight,
|
|
2111
|
+
Link,
|
|
2112
|
+
Menu,
|
|
2113
|
+
Popover3 as Popover,
|
|
2114
|
+
PopoverContent,
|
|
2115
|
+
PopoverTrigger,
|
|
2116
|
+
Radio,
|
|
2117
|
+
RadioButton,
|
|
2118
|
+
RadioGroup,
|
|
2119
|
+
RouterProvider,
|
|
2120
|
+
Row,
|
|
2121
|
+
Select,
|
|
2122
|
+
Spacing1,
|
|
2123
|
+
Spacing12,
|
|
2124
|
+
Spacing16,
|
|
2125
|
+
Spacing2,
|
|
2126
|
+
Spacing3,
|
|
2127
|
+
Spacing4,
|
|
2128
|
+
Spacing6,
|
|
2129
|
+
Spacing8,
|
|
2130
|
+
Spinner,
|
|
2131
|
+
Switch,
|
|
2132
|
+
Tab,
|
|
2133
|
+
TabList,
|
|
2134
|
+
TabPanel,
|
|
2135
|
+
Table,
|
|
2136
|
+
TableBody,
|
|
2137
|
+
TableHeader,
|
|
2138
|
+
Tabs,
|
|
2139
|
+
ToastProvider,
|
|
2140
|
+
ToggleButton,
|
|
2141
|
+
Tooltip,
|
|
2142
|
+
createToastBridge,
|
|
2143
|
+
useInputGroup,
|
|
2144
|
+
useToast
|
|
2145
|
+
};
|
|
2146
|
+
//# sourceMappingURL=index.js.map
|