@geomak/ui 1.7.5 → 1.8.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.cjs +204 -146
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +54 -17
- package/dist/index.d.ts +54 -17
- package/dist/index.js +204 -146
- package/dist/index.js.map +1 -1
- package/dist/styles.css +91 -129
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -229,10 +229,10 @@ function IconButton({
|
|
|
229
229
|
}) {
|
|
230
230
|
const colorScheme = React9.useMemo(() => {
|
|
231
231
|
if (type === "primary") {
|
|
232
|
-
return "
|
|
232
|
+
return "bg-accent text-accent-fg hover:bg-accent-hover";
|
|
233
233
|
}
|
|
234
234
|
if (type === "bordered") {
|
|
235
|
-
return "bg-
|
|
235
|
+
return "bg-surface text-foreground hover:bg-surface-raised border border-border-strong";
|
|
236
236
|
}
|
|
237
237
|
return "";
|
|
238
238
|
}, [type]);
|
|
@@ -242,35 +242,37 @@ function IconButton({
|
|
|
242
242
|
type: buttonType,
|
|
243
243
|
disabled: disabled || loading,
|
|
244
244
|
onClick,
|
|
245
|
-
className: `${size === "sm" ? "p-1" : "p-2"} rounded-lg shadow-
|
|
245
|
+
className: `${size === "sm" ? "p-1" : "p-2"} rounded-lg shadow-md transition-colors duration-150 ${colorScheme} disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
|
|
246
246
|
children: loading ? loadingIcon : icon
|
|
247
247
|
}
|
|
248
248
|
);
|
|
249
249
|
}
|
|
250
250
|
var VARIANT_CLASSES = {
|
|
251
251
|
primary: [
|
|
252
|
-
"bg-accent text-
|
|
252
|
+
"bg-accent text-accent-fg",
|
|
253
253
|
"hover:bg-accent-hover",
|
|
254
254
|
"active:bg-accent",
|
|
255
|
-
"disabled:bg-
|
|
255
|
+
"disabled:bg-foreground-muted disabled:text-accent-fg/70 disabled:cursor-not-allowed",
|
|
256
256
|
"focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
|
|
257
257
|
].join(" "),
|
|
258
258
|
secondary: [
|
|
259
259
|
"bg-transparent border border-accent text-accent",
|
|
260
|
-
"hover:bg-accent hover:text-
|
|
261
|
-
"active:bg-accent-hover active:text-
|
|
262
|
-
"disabled:border-
|
|
260
|
+
"hover:bg-accent hover:text-accent-fg",
|
|
261
|
+
"active:bg-accent-hover active:text-accent-fg",
|
|
262
|
+
"disabled:border-foreground-muted disabled:text-foreground-muted disabled:cursor-not-allowed",
|
|
263
263
|
"focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
|
|
264
264
|
].join(" "),
|
|
265
265
|
ghost: [
|
|
266
|
+
// Semantic tokens handle both light and dark modes — no `dark:`
|
|
267
|
+
// variants needed.
|
|
266
268
|
"bg-transparent text-foreground-secondary",
|
|
267
|
-
"hover:bg-
|
|
268
|
-
"active:bg-
|
|
269
|
-
"disabled:text-
|
|
269
|
+
"hover:bg-surface-raised hover:text-foreground",
|
|
270
|
+
"active:bg-surface",
|
|
271
|
+
"disabled:text-foreground-muted disabled:cursor-not-allowed",
|
|
270
272
|
"focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
|
|
271
273
|
].join(" "),
|
|
272
274
|
danger: [
|
|
273
|
-
"bg-status-error text-
|
|
275
|
+
"bg-status-error text-accent-fg",
|
|
274
276
|
"hover:opacity-90",
|
|
275
277
|
"active:opacity-100",
|
|
276
278
|
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
@@ -775,12 +777,14 @@ function ToggleButton({ items, onChange, activeKey }) {
|
|
|
775
777
|
value: item.key,
|
|
776
778
|
"aria-label": typeof item.label === "string" ? item.label : item.key,
|
|
777
779
|
className: [
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
"
|
|
781
|
-
|
|
782
|
-
"
|
|
783
|
-
"
|
|
780
|
+
// Semantic tokens handle both light and dark modes via
|
|
781
|
+
// CSS vars — no `dark:` variants needed.
|
|
782
|
+
index === 0 && "rounded-l-lg border-r border-border",
|
|
783
|
+
index === items.length - 1 && "rounded-r-lg border-l border-border",
|
|
784
|
+
"p-2 cursor-pointer transition-colors duration-150 text-foreground-secondary",
|
|
785
|
+
"focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
786
|
+
"bg-surface hover:bg-surface-raised",
|
|
787
|
+
"data-[state=on]:bg-accent data-[state=on]:text-accent-fg"
|
|
784
788
|
].filter(Boolean).join(" "),
|
|
785
789
|
children: item.icon ?? item.label
|
|
786
790
|
},
|
|
@@ -972,59 +976,103 @@ function useNotification() {
|
|
|
972
976
|
danger: (props) => open({ type: "danger", ...props })
|
|
973
977
|
};
|
|
974
978
|
}
|
|
979
|
+
var SIZE_MAP = {
|
|
980
|
+
sm: { outer: "w-8 h-8", inner: "w-4 h-4", dot: "w-1 h-1", stroke: "border-2", text: "text-xs" },
|
|
981
|
+
md: { outer: "w-20 h-20", inner: "w-12 h-12", dot: "w-2 h-2", stroke: "border-[3px]", text: "text-2xl" },
|
|
982
|
+
lg: { outer: "w-32 h-32", inner: "w-20 h-20", dot: "w-3 h-3", stroke: "border-4", text: "text-4xl" }
|
|
983
|
+
};
|
|
975
984
|
var containerVariants = {
|
|
976
985
|
hidden: {},
|
|
977
|
-
visible: { transition: { staggerChildren: 0.
|
|
986
|
+
visible: { transition: { staggerChildren: 0.05 } }
|
|
978
987
|
};
|
|
979
988
|
var letterVariants = {
|
|
980
|
-
hidden: { opacity: 0, y:
|
|
981
|
-
visible: { opacity: 1, y: 0, transition: { duration: 0.
|
|
989
|
+
hidden: { opacity: 0, y: 4 },
|
|
990
|
+
visible: { opacity: 1, y: 0, transition: { duration: 0.22, ease: "easeOut" } }
|
|
982
991
|
};
|
|
992
|
+
function SpinnerCore({ size, color }) {
|
|
993
|
+
const dims = SIZE_MAP[size];
|
|
994
|
+
const ringColor = color ?? "var(--color-accent)";
|
|
995
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", style: { color: ringColor }, children: [
|
|
996
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
997
|
+
"div",
|
|
998
|
+
{
|
|
999
|
+
className: `${dims.outer} ${dims.stroke} rounded-full border-transparent border-t-current border-r-current animate-spin`,
|
|
1000
|
+
style: { animationDuration: "1.4s" },
|
|
1001
|
+
"aria-hidden": "true"
|
|
1002
|
+
}
|
|
1003
|
+
),
|
|
1004
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1005
|
+
"div",
|
|
1006
|
+
{
|
|
1007
|
+
className: `absolute ${dims.inner} ${dims.stroke} rounded-full border-transparent border-b-current border-l-current animate-spin opacity-60`,
|
|
1008
|
+
style: { animationDuration: "0.9s", animationDirection: "reverse" },
|
|
1009
|
+
"aria-hidden": "true"
|
|
1010
|
+
}
|
|
1011
|
+
),
|
|
1012
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1013
|
+
"div",
|
|
1014
|
+
{
|
|
1015
|
+
className: `absolute ${dims.dot} rounded-full bg-current animate-breathe`,
|
|
1016
|
+
"aria-hidden": "true"
|
|
1017
|
+
}
|
|
1018
|
+
)
|
|
1019
|
+
] });
|
|
1020
|
+
}
|
|
983
1021
|
function LoadingSpinner({
|
|
984
1022
|
prompt,
|
|
1023
|
+
size = "md",
|
|
1024
|
+
inline = false,
|
|
985
1025
|
spinnerColor,
|
|
986
1026
|
textColor,
|
|
987
|
-
backdropOpacity = 0.
|
|
1027
|
+
backdropOpacity = 0.8
|
|
988
1028
|
}) {
|
|
989
1029
|
const reduced = framerMotion.useReducedMotion();
|
|
990
|
-
const letters = Array.from(prompt);
|
|
991
|
-
|
|
1030
|
+
const letters = prompt ? Array.from(prompt) : [];
|
|
1031
|
+
const dims = SIZE_MAP[size];
|
|
1032
|
+
const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1033
|
+
/* @__PURE__ */ jsxRuntime.jsx(SpinnerCore, { size, color: spinnerColor }),
|
|
1034
|
+
letters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1035
|
+
framerMotion.motion.div,
|
|
1036
|
+
{
|
|
1037
|
+
className: `${dims.text} font-semibold tracking-tight select-none`,
|
|
1038
|
+
style: { color: textColor ?? "var(--color-foreground)" },
|
|
1039
|
+
variants: containerVariants,
|
|
1040
|
+
initial: reduced ? "visible" : "hidden",
|
|
1041
|
+
animate: "visible",
|
|
1042
|
+
"aria-hidden": "true",
|
|
1043
|
+
children: letters.map((letter, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1044
|
+
framerMotion.motion.span,
|
|
1045
|
+
{
|
|
1046
|
+
className: "inline-block whitespace-pre",
|
|
1047
|
+
variants: letterVariants,
|
|
1048
|
+
children: letter
|
|
1049
|
+
},
|
|
1050
|
+
index
|
|
1051
|
+
))
|
|
1052
|
+
}
|
|
1053
|
+
)
|
|
1054
|
+
] });
|
|
1055
|
+
if (inline) {
|
|
1056
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1057
|
+
"div",
|
|
1058
|
+
{
|
|
1059
|
+
role: "status",
|
|
1060
|
+
"aria-live": "polite",
|
|
1061
|
+
"aria-label": prompt ?? "Loading",
|
|
1062
|
+
className: "flex flex-col items-center justify-center gap-3",
|
|
1063
|
+
children: content
|
|
1064
|
+
}
|
|
1065
|
+
);
|
|
1066
|
+
}
|
|
1067
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
992
1068
|
"div",
|
|
993
1069
|
{
|
|
994
1070
|
role: "status",
|
|
995
1071
|
"aria-live": "polite",
|
|
996
|
-
"aria-label": prompt,
|
|
997
|
-
className: "fixed inset-0 z-[8000000] flex flex-col items-center justify-center gap-6 bg-background",
|
|
1072
|
+
"aria-label": prompt ?? "Loading",
|
|
1073
|
+
className: "fixed inset-0 z-[8000000] flex flex-col items-center justify-center gap-6 bg-background backdrop-blur-sm",
|
|
998
1074
|
style: { opacity: backdropOpacity },
|
|
999
|
-
children:
|
|
1000
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1001
|
-
"div",
|
|
1002
|
-
{
|
|
1003
|
-
className: "w-20 h-20 rounded-2xl border-[6px] border-transparent border-t-current border-r-current animate-spin",
|
|
1004
|
-
style: { color: spinnerColor ?? "var(--color-accent)" },
|
|
1005
|
-
"aria-hidden": "true"
|
|
1006
|
-
}
|
|
1007
|
-
),
|
|
1008
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1009
|
-
framerMotion.motion.div,
|
|
1010
|
-
{
|
|
1011
|
-
className: "text-3xl font-bold tracking-tight select-none",
|
|
1012
|
-
style: { color: textColor ?? "var(--color-foreground)" },
|
|
1013
|
-
variants: containerVariants,
|
|
1014
|
-
initial: reduced ? "visible" : "hidden",
|
|
1015
|
-
animate: "visible",
|
|
1016
|
-
children: letters.map((letter, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1017
|
-
framerMotion.motion.span,
|
|
1018
|
-
{
|
|
1019
|
-
className: "inline-block whitespace-pre",
|
|
1020
|
-
variants: letterVariants,
|
|
1021
|
-
children: letter
|
|
1022
|
-
},
|
|
1023
|
-
index
|
|
1024
|
-
))
|
|
1025
|
-
}
|
|
1026
|
-
)
|
|
1027
|
-
]
|
|
1075
|
+
children: content
|
|
1028
1076
|
}
|
|
1029
1077
|
) });
|
|
1030
1078
|
}
|
|
@@ -1050,12 +1098,18 @@ function FadingBase({
|
|
|
1050
1098
|
}
|
|
1051
1099
|
}, [isMounted]);
|
|
1052
1100
|
if (!shouldRender) return null;
|
|
1053
|
-
return
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1101
|
+
return (
|
|
1102
|
+
// `calculated-height` and `dark:glassmorphism` were orphaned CSS classes
|
|
1103
|
+
// (never defined anywhere). Replaced with semantic `min-h-full` +
|
|
1104
|
+
// `bg-surface` which works in both light and dark modes via the
|
|
1105
|
+
// ThemeProvider's CSS vars.
|
|
1106
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1107
|
+
"div",
|
|
1108
|
+
{
|
|
1109
|
+
className: `w-full min-h-full pl-2 pr-2 pb-2 transition-opacity duration-300 ${visible ? "opacity-100" : "opacity-0"}`,
|
|
1110
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `bg-surface w-full h-full rounded-lg p-2 ${className}`, children })
|
|
1111
|
+
}
|
|
1112
|
+
)
|
|
1059
1113
|
);
|
|
1060
1114
|
}
|
|
1061
1115
|
function List2({ items, onItemClick, activeKey }) {
|
|
@@ -1069,7 +1123,7 @@ function List2({ items, onItemClick, activeKey }) {
|
|
|
1069
1123
|
role: "option",
|
|
1070
1124
|
"aria-selected": activeKey === item.key,
|
|
1071
1125
|
tabIndex: 0,
|
|
1072
|
-
className: `hover:bg-
|
|
1126
|
+
className: `hover:bg-surface-raised cursor-pointer p-3 border-b border-border transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${activeKey === item.key ? "bg-surface-raised text-foreground" : "text-foreground-secondary"}`,
|
|
1073
1127
|
onClick: () => onItemClick(item),
|
|
1074
1128
|
onKeyDown: (e) => {
|
|
1075
1129
|
if (e.key === "Enter" || e.key === " ") {
|
|
@@ -1110,7 +1164,7 @@ function ScalableContainer({
|
|
|
1110
1164
|
width: isScaled ? "100%" : width,
|
|
1111
1165
|
height: isScaled ? "100%" : height
|
|
1112
1166
|
},
|
|
1113
|
-
className: "rounded-lg bg-
|
|
1167
|
+
className: "rounded-lg bg-surface-raised flex flex-col transition-all duration-300 origin-center",
|
|
1114
1168
|
children: [
|
|
1115
1169
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 w-max", children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { placement: "right", title: isScaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1116
1170
|
IconButton,
|
|
@@ -1118,10 +1172,10 @@ function ScalableContainer({
|
|
|
1118
1172
|
onClick,
|
|
1119
1173
|
icon: isScaled ? (
|
|
1120
1174
|
/* Collapse (arrows-pointing-in) */
|
|
1121
|
-
/* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "
|
|
1175
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M3.22 3.22a.75.75 0 011.06 0l3.97 3.97V4.5a.75.75 0 011.5 0V9a.75.75 0 01-.75.75H4.5a.75.75 0 010-1.5h2.69L3.22 4.28a.75.75 0 010-1.06zm17.56 0a.75.75 0 010 1.06l-3.97 3.97h2.69a.75.75 0 010 1.5H15a.75.75 0 01-.75-.75V4.5a.75.75 0 011.5 0v2.69l3.97-3.97a.75.75 0 011.06 0zM3.75 15a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-2.69l-3.97 3.97a.75.75 0 01-1.06-1.06l3.97-3.97H4.5a.75.75 0 01-.75-.75zm10.5 0a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75 .75.75 0 01-.75.75h-2.69l3.97 3.97a.75.75 0 11-1.06 1.06l-3.97-3.97v2.69a.75.75 0 01-1.5 0V15z", clipRule: "evenodd" }) })
|
|
1122
1176
|
) : (
|
|
1123
1177
|
/* Expand (arrows-pointing-out) */
|
|
1124
|
-
/* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "
|
|
1178
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M15 3a.75.75 0 01.75-.75h5.25A.75.75 0 0121 3v5.25a.75.75 0 01-1.5 0V4.81l-5.72 5.72a.75.75 0 11-1.06-1.06L18.19 3.75H15.75A.75.75 0 0115 3zM3 15a.75.75 0 01.75-.75h2.44l5.72-5.72a.75.75 0 111.06 1.06l-5.72 5.72v2.44a.75.75 0 01-1.5 0V15.75A.75.75 0 013 15zm0-11.25A.75.75 0 013.75 3h5.25a.75.75 0 010 1.5H4.81l5.72 5.72a.75.75 0 11-1.06 1.06L3.75 5.56V8.25a.75.75 0 01-1.5 0V3.75A.75.75 0 013 3zm18 12a.75.75 0 01-.75.75h-5.25a.75.75 0 010-1.5h2.44l-5.72-5.72a.75.75 0 111.06-1.06l5.72 5.72v-2.44a.75.75 0 011.5 0V15z", clipRule: "evenodd" }) })
|
|
1125
1179
|
)
|
|
1126
1180
|
}
|
|
1127
1181
|
) }) }),
|
|
@@ -1297,7 +1351,7 @@ function MenuBarItem({ icon, isActive, title, onClick }) {
|
|
|
1297
1351
|
role: "button",
|
|
1298
1352
|
"aria-label": title,
|
|
1299
1353
|
"aria-current": isActive ? "page" : void 0,
|
|
1300
|
-
className: `transition duration-300 hover:bg-
|
|
1354
|
+
className: `transition duration-300 hover:bg-accent hover:text-accent-fg ${isActive ? "bg-accent text-accent-fg" : "text-foreground-secondary"} rounded-lg p-2 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
|
|
1301
1355
|
onClick,
|
|
1302
1356
|
tabIndex: 0,
|
|
1303
1357
|
onKeyDown: (e) => {
|
|
@@ -1311,22 +1365,26 @@ function MenuBarItem({ icon, isActive, title, onClick }) {
|
|
|
1311
1365
|
) });
|
|
1312
1366
|
}
|
|
1313
1367
|
function MenuBar({ items }) {
|
|
1314
|
-
return
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1368
|
+
return (
|
|
1369
|
+
// `calculated-height` was an orphaned CSS class. Replaced with `h-full`
|
|
1370
|
+
// so the MenuBar fills whatever vertical space its parent gives it.
|
|
1371
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1372
|
+
"nav",
|
|
1373
|
+
{
|
|
1374
|
+
"aria-label": "Main navigation",
|
|
1375
|
+
className: "w-16 h-full bg-surface-raised rounded-tr-lg rounded-br-lg flex flex-col gap-2 items-center p-2 z-50",
|
|
1376
|
+
children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1377
|
+
MenuBarItem,
|
|
1378
|
+
{
|
|
1379
|
+
icon: item.icon,
|
|
1380
|
+
title: item.title,
|
|
1381
|
+
isActive: item.isActive,
|
|
1382
|
+
onClick: item.onClick
|
|
1383
|
+
},
|
|
1384
|
+
item.key
|
|
1385
|
+
))
|
|
1386
|
+
}
|
|
1387
|
+
)
|
|
1330
1388
|
);
|
|
1331
1389
|
}
|
|
1332
1390
|
function ContextMenu({ items, position, visible, onClose }) {
|
|
@@ -1531,8 +1589,8 @@ var SearchInput = React9__default.default.forwardRef(function SearchInput2({
|
|
|
1531
1589
|
className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
|
|
1532
1590
|
style: style ?? {},
|
|
1533
1591
|
children: [
|
|
1534
|
-
label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-
|
|
1535
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-
|
|
1592
|
+
label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium ml-1 max-content text-foreground", htmlFor, children: label }),
|
|
1593
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface text-foreground flex items-center gap-1 rounded-lg border border-border pr-2 focus-within:ring-2 focus-within:ring-accent transition-colors", children: [
|
|
1536
1594
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1537
1595
|
"input",
|
|
1538
1596
|
{
|
|
@@ -1544,12 +1602,12 @@ var SearchInput = React9__default.default.forwardRef(function SearchInput2({
|
|
|
1544
1602
|
enterKeyHint: "search",
|
|
1545
1603
|
name,
|
|
1546
1604
|
id: htmlFor,
|
|
1547
|
-
className: "focus:outline-none pl-2 h-9 w-56
|
|
1605
|
+
className: "bg-transparent focus:outline-none pl-2 h-9 w-56 rounded-lg disabled:cursor-not-allowed",
|
|
1548
1606
|
style: inputStyle ?? {},
|
|
1549
1607
|
placeholder: placeholder ?? ""
|
|
1550
1608
|
}
|
|
1551
1609
|
),
|
|
1552
|
-
/* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill:
|
|
1610
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 text-foreground-muted", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) })
|
|
1553
1611
|
] })
|
|
1554
1612
|
]
|
|
1555
1613
|
}
|
|
@@ -1560,7 +1618,7 @@ function DropdownPill({ value, hasSiblings = false }) {
|
|
|
1560
1618
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1561
1619
|
"div",
|
|
1562
1620
|
{
|
|
1563
|
-
className: `bg-
|
|
1621
|
+
className: `bg-accent text-accent-fg text-sm text-ellipsis ${hasSiblings ? "w-24" : "w-max"} p-1 px-2 rounded-lg whitespace-nowrap overflow-hidden`,
|
|
1564
1622
|
children: value
|
|
1565
1623
|
}
|
|
1566
1624
|
);
|
|
@@ -1583,7 +1641,6 @@ function Dropdown({
|
|
|
1583
1641
|
}) {
|
|
1584
1642
|
const [open, setOpen] = React9.useState(false);
|
|
1585
1643
|
const [selectedItems, setSelectedItems] = React9.useState([]);
|
|
1586
|
-
const [hoveredItem, setHoveredItem] = React9.useState(null);
|
|
1587
1644
|
const [searchTerm, setSearchTerm] = React9.useState("");
|
|
1588
1645
|
const [innerItems, setInnerItems] = React9.useState([]);
|
|
1589
1646
|
const errorId = React9.useId();
|
|
@@ -1626,7 +1683,7 @@ function Dropdown({
|
|
|
1626
1683
|
label && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1627
1684
|
"label",
|
|
1628
1685
|
{
|
|
1629
|
-
className: "text-
|
|
1686
|
+
className: "text-sm font-medium ml-1 max-content select-none text-foreground",
|
|
1630
1687
|
htmlFor,
|
|
1631
1688
|
style: labelStyle,
|
|
1632
1689
|
children: label
|
|
@@ -1643,7 +1700,7 @@ function Dropdown({
|
|
|
1643
1700
|
"aria-invalid": hasError || void 0,
|
|
1644
1701
|
"aria-describedby": hasError ? errorId : void 0,
|
|
1645
1702
|
style,
|
|
1646
|
-
className: `flex items-center justify-between relative h-9 rounded-lg cursor-pointer select-none ${disabled ? "cursor-not-allowed bg-
|
|
1703
|
+
className: `flex items-center justify-between relative h-9 rounded-lg border border-border cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${hasError ? "border-status-error" : ""}`,
|
|
1647
1704
|
tabIndex: disabled ? -1 : 0,
|
|
1648
1705
|
onKeyDown: (e) => {
|
|
1649
1706
|
if (disabled) return;
|
|
@@ -1656,8 +1713,8 @@ function Dropdown({
|
|
|
1656
1713
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1657
1714
|
"div",
|
|
1658
1715
|
{
|
|
1659
|
-
className: `h-7 pl-2 ${!style?.width ? "min-w-[240px]" : ""}
|
|
1660
|
-
children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-
|
|
1716
|
+
className: `h-7 pl-2 ${!style?.width ? "min-w-[240px]" : ""} flex items-center gap-1 overflow-hidden`,
|
|
1717
|
+
children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1661
1718
|
value.slice(0, 1).map((val) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1662
1719
|
DropdownPill,
|
|
1663
1720
|
{
|
|
@@ -1670,7 +1727,7 @@ function Dropdown({
|
|
|
1670
1727
|
] }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownPill, { value: innerItems.find((it) => it.key === value)?.label })
|
|
1671
1728
|
}
|
|
1672
1729
|
),
|
|
1673
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `transition-transform duration-
|
|
1730
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `transition-transform duration-200 mr-2 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
|
|
1674
1731
|
]
|
|
1675
1732
|
}
|
|
1676
1733
|
) }),
|
|
@@ -1680,7 +1737,7 @@ function Dropdown({
|
|
|
1680
1737
|
align: "start",
|
|
1681
1738
|
sideOffset: 4,
|
|
1682
1739
|
style: { width: style?.width || 240 },
|
|
1683
|
-
className: "bg-
|
|
1740
|
+
className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-2 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
1684
1741
|
onInteractOutside: () => setOpen(false),
|
|
1685
1742
|
children: [
|
|
1686
1743
|
hasSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1707,7 +1764,7 @@ function Dropdown({
|
|
|
1707
1764
|
role: "option",
|
|
1708
1765
|
"aria-selected": isSelected(item.key),
|
|
1709
1766
|
tabIndex: 0,
|
|
1710
|
-
className: `flex items-center justify-between p-2 hover:bg-
|
|
1767
|
+
className: `flex items-center justify-between p-2 hover:bg-accent hover:text-accent-fg transition-colors duration-150 text-sm rounded-lg cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${selectedItems.includes(item.key) ? "bg-surface-raised text-foreground" : "text-foreground"}`,
|
|
1711
1768
|
onClick: () => selectItem(item.key),
|
|
1712
1769
|
onKeyDown: (e) => {
|
|
1713
1770
|
if (e.key === "Enter" || e.key === " ") {
|
|
@@ -1715,18 +1772,19 @@ function Dropdown({
|
|
|
1715
1772
|
selectItem(item.key);
|
|
1716
1773
|
}
|
|
1717
1774
|
},
|
|
1718
|
-
onMouseEnter: () => setHoveredItem(item.key),
|
|
1719
|
-
onMouseLeave: () => setHoveredItem(null),
|
|
1720
1775
|
children: [
|
|
1721
1776
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
|
|
1722
1777
|
item.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.icon }),
|
|
1723
1778
|
item.label
|
|
1724
1779
|
] }),
|
|
1725
|
-
isSelected(item.key) &&
|
|
1780
|
+
isSelected(item.key) && // currentColor — checkmark follows
|
|
1781
|
+
// the item's text colour, which
|
|
1782
|
+
// flips automatically on hover.
|
|
1783
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1726
1784
|
"path",
|
|
1727
1785
|
{
|
|
1728
1786
|
d: "M4 10l4.5 4.5L16 6",
|
|
1729
|
-
stroke:
|
|
1787
|
+
stroke: "currentColor",
|
|
1730
1788
|
strokeWidth: "2",
|
|
1731
1789
|
strokeLinecap: "round",
|
|
1732
1790
|
strokeLinejoin: "round"
|
|
@@ -1744,7 +1802,7 @@ function Dropdown({
|
|
|
1744
1802
|
]
|
|
1745
1803
|
}
|
|
1746
1804
|
),
|
|
1747
|
-
hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-center text-error
|
|
1805
|
+
hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
|
|
1748
1806
|
] });
|
|
1749
1807
|
}
|
|
1750
1808
|
var DEFAULT_PICKER = [
|
|
@@ -2587,7 +2645,7 @@ function TextInput({
|
|
|
2587
2645
|
"label",
|
|
2588
2646
|
{
|
|
2589
2647
|
style: { color: labelColor || void 0 },
|
|
2590
|
-
className: `text-
|
|
2648
|
+
className: `text-sm font-medium ml-1 max-content ${!labelColor && "text-foreground"}`,
|
|
2591
2649
|
htmlFor,
|
|
2592
2650
|
children: label
|
|
2593
2651
|
}
|
|
@@ -2605,7 +2663,7 @@ function TextInput({
|
|
|
2605
2663
|
id: htmlFor,
|
|
2606
2664
|
"aria-invalid": hasError || void 0,
|
|
2607
2665
|
"aria-describedby": hasError ? errorId : void 0,
|
|
2608
|
-
className: `${hasError ? "border border-error" : ""}
|
|
2666
|
+
className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-60 mt-1 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors`,
|
|
2609
2667
|
style: inputStyle ?? {},
|
|
2610
2668
|
placeholder: placeholder ?? ""
|
|
2611
2669
|
}
|
|
@@ -2613,7 +2671,7 @@ function TextInput({
|
|
|
2613
2671
|
]
|
|
2614
2672
|
}
|
|
2615
2673
|
),
|
|
2616
|
-
hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-center text-error
|
|
2674
|
+
hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
|
|
2617
2675
|
] });
|
|
2618
2676
|
}
|
|
2619
2677
|
function NumberInput({
|
|
@@ -2728,19 +2786,15 @@ function Password({
|
|
|
2728
2786
|
iconColor
|
|
2729
2787
|
}) {
|
|
2730
2788
|
const [passwordVisible, setPasswordVisible] = React9.useState(false);
|
|
2731
|
-
const color = iconColor ?? chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"];
|
|
2732
2789
|
const errorId = React9.useId();
|
|
2733
2790
|
const hasError = errorMessage != null;
|
|
2734
2791
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center justify-center", style: style ?? {}, children: [
|
|
2735
2792
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`, children: [
|
|
2736
|
-
label &&
|
|
2737
|
-
// <label htmlFor=…> announces as an unlabeled control in
|
|
2738
|
-
// some screen readers.
|
|
2739
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2793
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2740
2794
|
"label",
|
|
2741
2795
|
{
|
|
2742
2796
|
style: { color: labelColor || void 0 },
|
|
2743
|
-
className: `text-
|
|
2797
|
+
className: `text-sm font-medium ml-1 max-content ${!labelColor && "text-foreground"}`,
|
|
2744
2798
|
htmlFor,
|
|
2745
2799
|
children: label
|
|
2746
2800
|
}
|
|
@@ -2759,7 +2813,7 @@ function Password({
|
|
|
2759
2813
|
id: htmlFor,
|
|
2760
2814
|
"aria-invalid": hasError || void 0,
|
|
2761
2815
|
"aria-describedby": hasError ? errorId : void 0,
|
|
2762
|
-
className: `${hasError ? "border border-error" : ""}
|
|
2816
|
+
className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-52 mt-1 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors`,
|
|
2763
2817
|
style: inputStyle ?? {},
|
|
2764
2818
|
placeholder: placeholder ?? ""
|
|
2765
2819
|
}
|
|
@@ -2768,19 +2822,20 @@ function Password({
|
|
|
2768
2822
|
"button",
|
|
2769
2823
|
{
|
|
2770
2824
|
type: "button",
|
|
2771
|
-
className: "cursor-pointer p-1",
|
|
2825
|
+
className: "cursor-pointer p-1 text-foreground-secondary hover:text-foreground rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
2826
|
+
style: iconColor ? { color: iconColor } : void 0,
|
|
2772
2827
|
onClick: () => setPasswordVisible(!passwordVisible),
|
|
2773
2828
|
"aria-label": passwordVisible ? "Hide password" : "Show password",
|
|
2774
2829
|
children: passwordVisible ? (
|
|
2775
2830
|
/* EyeSlash */
|
|
2776
|
-
/* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill:
|
|
2831
|
+
/* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
|
|
2777
2832
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.53 2.47a.75.75 0 00-1.06 1.06l18 18a.75.75 0 101.06-1.06l-18-18zM22.676 12.553a11.249 11.249 0 01-2.631 4.31l-3.099-3.099a5.25 5.25 0 00-6.71-6.71L7.759 4.577a11.217 11.217 0 014.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113z" }),
|
|
2778
2833
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0115.75 12zM12.53 15.713l-4.243-4.244a3.75 3.75 0 004.243 4.243z" }),
|
|
2779
2834
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 00-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 016.75 12z" })
|
|
2780
2835
|
] })
|
|
2781
2836
|
) : (
|
|
2782
2837
|
/* Eye */
|
|
2783
|
-
/* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill:
|
|
2838
|
+
/* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
|
|
2784
2839
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 15a3 3 0 100-6 3 3 0 000 6z" }),
|
|
2785
2840
|
/* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z", clipRule: "evenodd" })
|
|
2786
2841
|
] })
|
|
@@ -2789,7 +2844,7 @@ function Password({
|
|
|
2789
2844
|
)
|
|
2790
2845
|
] })
|
|
2791
2846
|
] }),
|
|
2792
|
-
hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-center text-error
|
|
2847
|
+
hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
|
|
2793
2848
|
] });
|
|
2794
2849
|
}
|
|
2795
2850
|
function Checkbox({
|
|
@@ -2878,22 +2933,25 @@ function Switch({
|
|
|
2878
2933
|
uncheckedIcon
|
|
2879
2934
|
}) {
|
|
2880
2935
|
const id = React9.useId();
|
|
2881
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
2882
|
-
|
|
2883
|
-
{
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2887
|
-
|
|
2888
|
-
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
|
|
2892
|
-
|
|
2893
|
-
|
|
2894
|
-
|
|
2895
|
-
|
|
2896
|
-
|
|
2936
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2937
|
+
"// mr-12 was a hardcoded right margin that broke layouts; spacing // is the parent's responsibility now.",
|
|
2938
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "flex items-center cursor-pointer select-none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2939
|
+
SwitchPrimitive__namespace.Root,
|
|
2940
|
+
{
|
|
2941
|
+
id,
|
|
2942
|
+
checked,
|
|
2943
|
+
onCheckedChange: (c) => onChange?.({ target: { checked: c } }),
|
|
2944
|
+
className: "relative inline-flex h-6 w-14 items-center rounded-full bg-foreground-secondary data-[state=checked]:bg-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
|
|
2945
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2946
|
+
SwitchPrimitive__namespace.Thumb,
|
|
2947
|
+
{
|
|
2948
|
+
className: "pointer-events-none inline-flex h-8 w-8 items-center justify-center rounded-full bg-background text-foreground shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[-4px]",
|
|
2949
|
+
children: checkedIcon && uncheckedIcon ? checked ? checkedIcon : uncheckedIcon : null
|
|
2950
|
+
}
|
|
2951
|
+
)
|
|
2952
|
+
}
|
|
2953
|
+
) })
|
|
2954
|
+
] });
|
|
2897
2955
|
}
|
|
2898
2956
|
function AutoComplete({
|
|
2899
2957
|
disabled,
|
|
@@ -2923,9 +2981,9 @@ function AutoComplete({
|
|
|
2923
2981
|
className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
|
|
2924
2982
|
style: style ?? {},
|
|
2925
2983
|
children: [
|
|
2926
|
-
label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-
|
|
2984
|
+
label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium ml-1 max-content text-foreground", children: label }),
|
|
2927
2985
|
/* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
|
|
2928
|
-
/* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-
|
|
2986
|
+
/* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface text-foreground flex items-center gap-1 rounded-lg border border-border pr-2 focus-within:ring-2 focus-within:ring-accent transition-colors", children: [
|
|
2929
2987
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2930
2988
|
"input",
|
|
2931
2989
|
{
|
|
@@ -2938,7 +2996,7 @@ function AutoComplete({
|
|
|
2938
2996
|
onFocus: () => setOpen(true),
|
|
2939
2997
|
type: "text",
|
|
2940
2998
|
name,
|
|
2941
|
-
className: "focus:outline-none pl-2 h-9 w-56
|
|
2999
|
+
className: "bg-transparent focus:outline-none pl-2 h-9 w-56 rounded-lg disabled:cursor-not-allowed",
|
|
2942
3000
|
style: inputStyle ?? {},
|
|
2943
3001
|
placeholder: placeholder ?? "",
|
|
2944
3002
|
autoComplete: "off",
|
|
@@ -2947,7 +3005,7 @@ function AutoComplete({
|
|
|
2947
3005
|
"aria-autocomplete": "list"
|
|
2948
3006
|
}
|
|
2949
3007
|
),
|
|
2950
|
-
/* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill:
|
|
3008
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 flex-shrink-0 text-foreground-muted", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) })
|
|
2951
3009
|
] }) }),
|
|
2952
3010
|
/* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2953
3011
|
Popover__namespace.Content,
|
|
@@ -2955,8 +3013,8 @@ function AutoComplete({
|
|
|
2955
3013
|
align: "start",
|
|
2956
3014
|
sideOffset: 4,
|
|
2957
3015
|
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
2958
|
-
className: "w-64 bg-
|
|
2959
|
-
children: foundItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-
|
|
3016
|
+
className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
|
|
3017
|
+
children: foundItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", children: foundItems.map((item) => (
|
|
2960
3018
|
// tabIndex + Enter/Space onKeyDown
|
|
2961
3019
|
// makes each option keyboard-activatable.
|
|
2962
3020
|
// Full roving-tabindex / arrow-key nav
|
|
@@ -2966,7 +3024,7 @@ function AutoComplete({
|
|
|
2966
3024
|
{
|
|
2967
3025
|
role: "option",
|
|
2968
3026
|
tabIndex: 0,
|
|
2969
|
-
className: "text-sm flex items-center gap-2 p-2 transition-
|
|
3027
|
+
className: "text-sm flex items-center gap-2 p-2 transition-colors duration-150 hover:bg-surface-raised cursor-pointer text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
2970
3028
|
onClick: () => handleSelect(item),
|
|
2971
3029
|
onKeyDown: (e) => {
|
|
2972
3030
|
if (e.key === "Enter" || e.key === " ") {
|
|
@@ -3160,7 +3218,7 @@ function FileInput({
|
|
|
3160
3218
|
openPicker();
|
|
3161
3219
|
}
|
|
3162
3220
|
},
|
|
3163
|
-
className: "border-2
|
|
3221
|
+
className: "border-2 border-dashed border-border hover:border-accent w-full h-full rounded-md transition-colors duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent text-foreground-secondary hover:text-foreground",
|
|
3164
3222
|
onDragOver: (e) => e.preventDefault(),
|
|
3165
3223
|
onDrop,
|
|
3166
3224
|
children: [
|
|
@@ -3178,28 +3236,28 @@ function FileInput({
|
|
|
3178
3236
|
}
|
|
3179
3237
|
),
|
|
3180
3238
|
files.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full items-center justify-center gap-2", children: [
|
|
3181
|
-
/* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill:
|
|
3182
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-
|
|
3183
|
-
] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 items-center justify-center w-full h-full", children: files.map((file, id) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3239
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-16 h-16", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M11.47 2.47a.75.75 0 011.06 0l4.5 4.5a.75.75 0 01-1.06 1.06l-3.22-3.22V16.5a.75.75 0 01-1.5 0V4.81L8.03 8.03a.75.75 0 01-1.06-1.06l4.5-4.5zM3 15.75a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z", clipRule: "evenodd" }) }),
|
|
3240
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: "Click or Drop a file" })
|
|
3241
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 items-center justify-center w-full h-full p-3", children: files.map((file, id) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3184
3242
|
"div",
|
|
3185
3243
|
{
|
|
3186
|
-
className: "text-xs flex flex-col items-center w-20 h-24 text-center bg-
|
|
3244
|
+
className: "text-xs flex flex-col items-center w-20 h-24 text-center bg-surface-raised text-foreground p-4 rounded-md relative",
|
|
3187
3245
|
children: [
|
|
3188
3246
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3189
3247
|
"button",
|
|
3190
3248
|
{
|
|
3191
3249
|
type: "button",
|
|
3192
3250
|
onClick: removeFile,
|
|
3193
|
-
className: "bg-error rounded-full w-4 h-4 absolute right-[-5px] top-[-5px] cursor-pointer flex items-center justify-center",
|
|
3251
|
+
className: "bg-status-error rounded-full w-4 h-4 absolute right-[-5px] top-[-5px] cursor-pointer flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
3194
3252
|
"aria-label": "Remove file",
|
|
3195
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
3253
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
3196
3254
|
}
|
|
3197
3255
|
),
|
|
3198
|
-
/* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill:
|
|
3256
|
+
/* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-10 h-10", "aria-hidden": "true", children: [
|
|
3199
3257
|
/* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5H5.625z", clipRule: "evenodd" }),
|
|
3200
3258
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z" })
|
|
3201
3259
|
] }),
|
|
3202
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ellipsis whitespace-nowrap overflow-hidden w-full
|
|
3260
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ellipsis whitespace-nowrap overflow-hidden w-full", children: file.name })
|
|
3203
3261
|
]
|
|
3204
3262
|
},
|
|
3205
3263
|
`${id}${file.name}`
|