@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.js
CHANGED
|
@@ -197,10 +197,10 @@ function IconButton({
|
|
|
197
197
|
}) {
|
|
198
198
|
const colorScheme = useMemo(() => {
|
|
199
199
|
if (type === "primary") {
|
|
200
|
-
return "
|
|
200
|
+
return "bg-accent text-accent-fg hover:bg-accent-hover";
|
|
201
201
|
}
|
|
202
202
|
if (type === "bordered") {
|
|
203
|
-
return "bg-
|
|
203
|
+
return "bg-surface text-foreground hover:bg-surface-raised border border-border-strong";
|
|
204
204
|
}
|
|
205
205
|
return "";
|
|
206
206
|
}, [type]);
|
|
@@ -210,35 +210,37 @@ function IconButton({
|
|
|
210
210
|
type: buttonType,
|
|
211
211
|
disabled: disabled || loading,
|
|
212
212
|
onClick,
|
|
213
|
-
className: `${size === "sm" ? "p-1" : "p-2"} rounded-lg shadow-
|
|
213
|
+
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`,
|
|
214
214
|
children: loading ? loadingIcon : icon
|
|
215
215
|
}
|
|
216
216
|
);
|
|
217
217
|
}
|
|
218
218
|
var VARIANT_CLASSES = {
|
|
219
219
|
primary: [
|
|
220
|
-
"bg-accent text-
|
|
220
|
+
"bg-accent text-accent-fg",
|
|
221
221
|
"hover:bg-accent-hover",
|
|
222
222
|
"active:bg-accent",
|
|
223
|
-
"disabled:bg-
|
|
223
|
+
"disabled:bg-foreground-muted disabled:text-accent-fg/70 disabled:cursor-not-allowed",
|
|
224
224
|
"focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
|
|
225
225
|
].join(" "),
|
|
226
226
|
secondary: [
|
|
227
227
|
"bg-transparent border border-accent text-accent",
|
|
228
|
-
"hover:bg-accent hover:text-
|
|
229
|
-
"active:bg-accent-hover active:text-
|
|
230
|
-
"disabled:border-
|
|
228
|
+
"hover:bg-accent hover:text-accent-fg",
|
|
229
|
+
"active:bg-accent-hover active:text-accent-fg",
|
|
230
|
+
"disabled:border-foreground-muted disabled:text-foreground-muted disabled:cursor-not-allowed",
|
|
231
231
|
"focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
|
|
232
232
|
].join(" "),
|
|
233
233
|
ghost: [
|
|
234
|
+
// Semantic tokens handle both light and dark modes — no `dark:`
|
|
235
|
+
// variants needed.
|
|
234
236
|
"bg-transparent text-foreground-secondary",
|
|
235
|
-
"hover:bg-
|
|
236
|
-
"active:bg-
|
|
237
|
-
"disabled:text-
|
|
237
|
+
"hover:bg-surface-raised hover:text-foreground",
|
|
238
|
+
"active:bg-surface",
|
|
239
|
+
"disabled:text-foreground-muted disabled:cursor-not-allowed",
|
|
238
240
|
"focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
|
|
239
241
|
].join(" "),
|
|
240
242
|
danger: [
|
|
241
|
-
"bg-status-error text-
|
|
243
|
+
"bg-status-error text-accent-fg",
|
|
242
244
|
"hover:opacity-90",
|
|
243
245
|
"active:opacity-100",
|
|
244
246
|
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
@@ -743,12 +745,14 @@ function ToggleButton({ items, onChange, activeKey }) {
|
|
|
743
745
|
value: item.key,
|
|
744
746
|
"aria-label": typeof item.label === "string" ? item.label : item.key,
|
|
745
747
|
className: [
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
"
|
|
749
|
-
|
|
750
|
-
"
|
|
751
|
-
"
|
|
748
|
+
// Semantic tokens handle both light and dark modes via
|
|
749
|
+
// CSS vars — no `dark:` variants needed.
|
|
750
|
+
index === 0 && "rounded-l-lg border-r border-border",
|
|
751
|
+
index === items.length - 1 && "rounded-r-lg border-l border-border",
|
|
752
|
+
"p-2 cursor-pointer transition-colors duration-150 text-foreground-secondary",
|
|
753
|
+
"focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
754
|
+
"bg-surface hover:bg-surface-raised",
|
|
755
|
+
"data-[state=on]:bg-accent data-[state=on]:text-accent-fg"
|
|
752
756
|
].filter(Boolean).join(" "),
|
|
753
757
|
children: item.icon ?? item.label
|
|
754
758
|
},
|
|
@@ -940,59 +944,103 @@ function useNotification() {
|
|
|
940
944
|
danger: (props) => open({ type: "danger", ...props })
|
|
941
945
|
};
|
|
942
946
|
}
|
|
947
|
+
var SIZE_MAP = {
|
|
948
|
+
sm: { outer: "w-8 h-8", inner: "w-4 h-4", dot: "w-1 h-1", stroke: "border-2", text: "text-xs" },
|
|
949
|
+
md: { outer: "w-20 h-20", inner: "w-12 h-12", dot: "w-2 h-2", stroke: "border-[3px]", text: "text-2xl" },
|
|
950
|
+
lg: { outer: "w-32 h-32", inner: "w-20 h-20", dot: "w-3 h-3", stroke: "border-4", text: "text-4xl" }
|
|
951
|
+
};
|
|
943
952
|
var containerVariants = {
|
|
944
953
|
hidden: {},
|
|
945
|
-
visible: { transition: { staggerChildren: 0.
|
|
954
|
+
visible: { transition: { staggerChildren: 0.05 } }
|
|
946
955
|
};
|
|
947
956
|
var letterVariants = {
|
|
948
|
-
hidden: { opacity: 0, y:
|
|
949
|
-
visible: { opacity: 1, y: 0, transition: { duration: 0.
|
|
957
|
+
hidden: { opacity: 0, y: 4 },
|
|
958
|
+
visible: { opacity: 1, y: 0, transition: { duration: 0.22, ease: "easeOut" } }
|
|
950
959
|
};
|
|
960
|
+
function SpinnerCore({ size, color }) {
|
|
961
|
+
const dims = SIZE_MAP[size];
|
|
962
|
+
const ringColor = color ?? "var(--color-accent)";
|
|
963
|
+
return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", style: { color: ringColor }, children: [
|
|
964
|
+
/* @__PURE__ */ jsx(
|
|
965
|
+
"div",
|
|
966
|
+
{
|
|
967
|
+
className: `${dims.outer} ${dims.stroke} rounded-full border-transparent border-t-current border-r-current animate-spin`,
|
|
968
|
+
style: { animationDuration: "1.4s" },
|
|
969
|
+
"aria-hidden": "true"
|
|
970
|
+
}
|
|
971
|
+
),
|
|
972
|
+
/* @__PURE__ */ jsx(
|
|
973
|
+
"div",
|
|
974
|
+
{
|
|
975
|
+
className: `absolute ${dims.inner} ${dims.stroke} rounded-full border-transparent border-b-current border-l-current animate-spin opacity-60`,
|
|
976
|
+
style: { animationDuration: "0.9s", animationDirection: "reverse" },
|
|
977
|
+
"aria-hidden": "true"
|
|
978
|
+
}
|
|
979
|
+
),
|
|
980
|
+
/* @__PURE__ */ jsx(
|
|
981
|
+
"div",
|
|
982
|
+
{
|
|
983
|
+
className: `absolute ${dims.dot} rounded-full bg-current animate-breathe`,
|
|
984
|
+
"aria-hidden": "true"
|
|
985
|
+
}
|
|
986
|
+
)
|
|
987
|
+
] });
|
|
988
|
+
}
|
|
951
989
|
function LoadingSpinner({
|
|
952
990
|
prompt,
|
|
991
|
+
size = "md",
|
|
992
|
+
inline = false,
|
|
953
993
|
spinnerColor,
|
|
954
994
|
textColor,
|
|
955
|
-
backdropOpacity = 0.
|
|
995
|
+
backdropOpacity = 0.8
|
|
956
996
|
}) {
|
|
957
997
|
const reduced = useReducedMotion();
|
|
958
|
-
const letters = Array.from(prompt);
|
|
959
|
-
|
|
998
|
+
const letters = prompt ? Array.from(prompt) : [];
|
|
999
|
+
const dims = SIZE_MAP[size];
|
|
1000
|
+
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1001
|
+
/* @__PURE__ */ jsx(SpinnerCore, { size, color: spinnerColor }),
|
|
1002
|
+
letters.length > 0 && /* @__PURE__ */ jsx(
|
|
1003
|
+
motion.div,
|
|
1004
|
+
{
|
|
1005
|
+
className: `${dims.text} font-semibold tracking-tight select-none`,
|
|
1006
|
+
style: { color: textColor ?? "var(--color-foreground)" },
|
|
1007
|
+
variants: containerVariants,
|
|
1008
|
+
initial: reduced ? "visible" : "hidden",
|
|
1009
|
+
animate: "visible",
|
|
1010
|
+
"aria-hidden": "true",
|
|
1011
|
+
children: letters.map((letter, index) => /* @__PURE__ */ jsx(
|
|
1012
|
+
motion.span,
|
|
1013
|
+
{
|
|
1014
|
+
className: "inline-block whitespace-pre",
|
|
1015
|
+
variants: letterVariants,
|
|
1016
|
+
children: letter
|
|
1017
|
+
},
|
|
1018
|
+
index
|
|
1019
|
+
))
|
|
1020
|
+
}
|
|
1021
|
+
)
|
|
1022
|
+
] });
|
|
1023
|
+
if (inline) {
|
|
1024
|
+
return /* @__PURE__ */ jsx(
|
|
1025
|
+
"div",
|
|
1026
|
+
{
|
|
1027
|
+
role: "status",
|
|
1028
|
+
"aria-live": "polite",
|
|
1029
|
+
"aria-label": prompt ?? "Loading",
|
|
1030
|
+
className: "flex flex-col items-center justify-center gap-3",
|
|
1031
|
+
children: content
|
|
1032
|
+
}
|
|
1033
|
+
);
|
|
1034
|
+
}
|
|
1035
|
+
return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
|
|
960
1036
|
"div",
|
|
961
1037
|
{
|
|
962
1038
|
role: "status",
|
|
963
1039
|
"aria-live": "polite",
|
|
964
|
-
"aria-label": prompt,
|
|
965
|
-
className: "fixed inset-0 z-[8000000] flex flex-col items-center justify-center gap-6 bg-background",
|
|
1040
|
+
"aria-label": prompt ?? "Loading",
|
|
1041
|
+
className: "fixed inset-0 z-[8000000] flex flex-col items-center justify-center gap-6 bg-background backdrop-blur-sm",
|
|
966
1042
|
style: { opacity: backdropOpacity },
|
|
967
|
-
children:
|
|
968
|
-
/* @__PURE__ */ jsx(
|
|
969
|
-
"div",
|
|
970
|
-
{
|
|
971
|
-
className: "w-20 h-20 rounded-2xl border-[6px] border-transparent border-t-current border-r-current animate-spin",
|
|
972
|
-
style: { color: spinnerColor ?? "var(--color-accent)" },
|
|
973
|
-
"aria-hidden": "true"
|
|
974
|
-
}
|
|
975
|
-
),
|
|
976
|
-
/* @__PURE__ */ jsx(
|
|
977
|
-
motion.div,
|
|
978
|
-
{
|
|
979
|
-
className: "text-3xl font-bold tracking-tight select-none",
|
|
980
|
-
style: { color: textColor ?? "var(--color-foreground)" },
|
|
981
|
-
variants: containerVariants,
|
|
982
|
-
initial: reduced ? "visible" : "hidden",
|
|
983
|
-
animate: "visible",
|
|
984
|
-
children: letters.map((letter, index) => /* @__PURE__ */ jsx(
|
|
985
|
-
motion.span,
|
|
986
|
-
{
|
|
987
|
-
className: "inline-block whitespace-pre",
|
|
988
|
-
variants: letterVariants,
|
|
989
|
-
children: letter
|
|
990
|
-
},
|
|
991
|
-
index
|
|
992
|
-
))
|
|
993
|
-
}
|
|
994
|
-
)
|
|
995
|
-
]
|
|
1043
|
+
children: content
|
|
996
1044
|
}
|
|
997
1045
|
) });
|
|
998
1046
|
}
|
|
@@ -1018,12 +1066,18 @@ function FadingBase({
|
|
|
1018
1066
|
}
|
|
1019
1067
|
}, [isMounted]);
|
|
1020
1068
|
if (!shouldRender) return null;
|
|
1021
|
-
return
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1069
|
+
return (
|
|
1070
|
+
// `calculated-height` and `dark:glassmorphism` were orphaned CSS classes
|
|
1071
|
+
// (never defined anywhere). Replaced with semantic `min-h-full` +
|
|
1072
|
+
// `bg-surface` which works in both light and dark modes via the
|
|
1073
|
+
// ThemeProvider's CSS vars.
|
|
1074
|
+
/* @__PURE__ */ jsx(
|
|
1075
|
+
"div",
|
|
1076
|
+
{
|
|
1077
|
+
className: `w-full min-h-full pl-2 pr-2 pb-2 transition-opacity duration-300 ${visible ? "opacity-100" : "opacity-0"}`,
|
|
1078
|
+
children: /* @__PURE__ */ jsx("div", { className: `bg-surface w-full h-full rounded-lg p-2 ${className}`, children })
|
|
1079
|
+
}
|
|
1080
|
+
)
|
|
1027
1081
|
);
|
|
1028
1082
|
}
|
|
1029
1083
|
function List2({ items, onItemClick, activeKey }) {
|
|
@@ -1037,7 +1091,7 @@ function List2({ items, onItemClick, activeKey }) {
|
|
|
1037
1091
|
role: "option",
|
|
1038
1092
|
"aria-selected": activeKey === item.key,
|
|
1039
1093
|
tabIndex: 0,
|
|
1040
|
-
className: `hover:bg-
|
|
1094
|
+
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"}`,
|
|
1041
1095
|
onClick: () => onItemClick(item),
|
|
1042
1096
|
onKeyDown: (e) => {
|
|
1043
1097
|
if (e.key === "Enter" || e.key === " ") {
|
|
@@ -1078,7 +1132,7 @@ function ScalableContainer({
|
|
|
1078
1132
|
width: isScaled ? "100%" : width,
|
|
1079
1133
|
height: isScaled ? "100%" : height
|
|
1080
1134
|
},
|
|
1081
|
-
className: "rounded-lg bg-
|
|
1135
|
+
className: "rounded-lg bg-surface-raised flex flex-col transition-all duration-300 origin-center",
|
|
1082
1136
|
children: [
|
|
1083
1137
|
/* @__PURE__ */ jsx("div", { className: "p-2 w-max", children: /* @__PURE__ */ jsx(Tooltip, { placement: "right", title: isScaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
|
|
1084
1138
|
IconButton,
|
|
@@ -1086,10 +1140,10 @@ function ScalableContainer({
|
|
|
1086
1140
|
onClick,
|
|
1087
1141
|
icon: isScaled ? (
|
|
1088
1142
|
/* Collapse (arrows-pointing-in) */
|
|
1089
|
-
/* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "
|
|
1143
|
+
/* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5", children: /* @__PURE__ */ 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" }) })
|
|
1090
1144
|
) : (
|
|
1091
1145
|
/* Expand (arrows-pointing-out) */
|
|
1092
|
-
/* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "
|
|
1146
|
+
/* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5", children: /* @__PURE__ */ 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" }) })
|
|
1093
1147
|
)
|
|
1094
1148
|
}
|
|
1095
1149
|
) }) }),
|
|
@@ -1265,7 +1319,7 @@ function MenuBarItem({ icon, isActive, title, onClick }) {
|
|
|
1265
1319
|
role: "button",
|
|
1266
1320
|
"aria-label": title,
|
|
1267
1321
|
"aria-current": isActive ? "page" : void 0,
|
|
1268
|
-
className: `transition duration-300 hover:bg-
|
|
1322
|
+
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`,
|
|
1269
1323
|
onClick,
|
|
1270
1324
|
tabIndex: 0,
|
|
1271
1325
|
onKeyDown: (e) => {
|
|
@@ -1279,22 +1333,26 @@ function MenuBarItem({ icon, isActive, title, onClick }) {
|
|
|
1279
1333
|
) });
|
|
1280
1334
|
}
|
|
1281
1335
|
function MenuBar({ items }) {
|
|
1282
|
-
return
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1336
|
+
return (
|
|
1337
|
+
// `calculated-height` was an orphaned CSS class. Replaced with `h-full`
|
|
1338
|
+
// so the MenuBar fills whatever vertical space its parent gives it.
|
|
1339
|
+
/* @__PURE__ */ jsx(
|
|
1340
|
+
"nav",
|
|
1341
|
+
{
|
|
1342
|
+
"aria-label": "Main navigation",
|
|
1343
|
+
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",
|
|
1344
|
+
children: items.map((item) => /* @__PURE__ */ jsx(
|
|
1345
|
+
MenuBarItem,
|
|
1346
|
+
{
|
|
1347
|
+
icon: item.icon,
|
|
1348
|
+
title: item.title,
|
|
1349
|
+
isActive: item.isActive,
|
|
1350
|
+
onClick: item.onClick
|
|
1351
|
+
},
|
|
1352
|
+
item.key
|
|
1353
|
+
))
|
|
1354
|
+
}
|
|
1355
|
+
)
|
|
1298
1356
|
);
|
|
1299
1357
|
}
|
|
1300
1358
|
function ContextMenu({ items, position, visible, onClose }) {
|
|
@@ -1499,8 +1557,8 @@ var SearchInput = React9.forwardRef(function SearchInput2({
|
|
|
1499
1557
|
className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
|
|
1500
1558
|
style: style ?? {},
|
|
1501
1559
|
children: [
|
|
1502
|
-
label && /* @__PURE__ */ jsx("label", { className: "text-
|
|
1503
|
-
/* @__PURE__ */ jsxs("div", { className: "bg-
|
|
1560
|
+
label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium ml-1 max-content text-foreground", htmlFor, children: label }),
|
|
1561
|
+
/* @__PURE__ */ 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: [
|
|
1504
1562
|
/* @__PURE__ */ jsx(
|
|
1505
1563
|
"input",
|
|
1506
1564
|
{
|
|
@@ -1512,12 +1570,12 @@ var SearchInput = React9.forwardRef(function SearchInput2({
|
|
|
1512
1570
|
enterKeyHint: "search",
|
|
1513
1571
|
name,
|
|
1514
1572
|
id: htmlFor,
|
|
1515
|
-
className: "focus:outline-none pl-2 h-9 w-56
|
|
1573
|
+
className: "bg-transparent focus:outline-none pl-2 h-9 w-56 rounded-lg disabled:cursor-not-allowed",
|
|
1516
1574
|
style: inputStyle ?? {},
|
|
1517
1575
|
placeholder: placeholder ?? ""
|
|
1518
1576
|
}
|
|
1519
1577
|
),
|
|
1520
|
-
/* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill:
|
|
1578
|
+
/* @__PURE__ */ 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__ */ 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" }) })
|
|
1521
1579
|
] })
|
|
1522
1580
|
]
|
|
1523
1581
|
}
|
|
@@ -1528,7 +1586,7 @@ function DropdownPill({ value, hasSiblings = false }) {
|
|
|
1528
1586
|
return /* @__PURE__ */ jsx(
|
|
1529
1587
|
"div",
|
|
1530
1588
|
{
|
|
1531
|
-
className: `bg-
|
|
1589
|
+
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`,
|
|
1532
1590
|
children: value
|
|
1533
1591
|
}
|
|
1534
1592
|
);
|
|
@@ -1551,7 +1609,6 @@ function Dropdown({
|
|
|
1551
1609
|
}) {
|
|
1552
1610
|
const [open, setOpen] = useState(false);
|
|
1553
1611
|
const [selectedItems, setSelectedItems] = useState([]);
|
|
1554
|
-
const [hoveredItem, setHoveredItem] = useState(null);
|
|
1555
1612
|
const [searchTerm, setSearchTerm] = useState("");
|
|
1556
1613
|
const [innerItems, setInnerItems] = useState([]);
|
|
1557
1614
|
const errorId = useId();
|
|
@@ -1594,7 +1651,7 @@ function Dropdown({
|
|
|
1594
1651
|
label && /* @__PURE__ */ jsx(
|
|
1595
1652
|
"label",
|
|
1596
1653
|
{
|
|
1597
|
-
className: "text-
|
|
1654
|
+
className: "text-sm font-medium ml-1 max-content select-none text-foreground",
|
|
1598
1655
|
htmlFor,
|
|
1599
1656
|
style: labelStyle,
|
|
1600
1657
|
children: label
|
|
@@ -1611,7 +1668,7 @@ function Dropdown({
|
|
|
1611
1668
|
"aria-invalid": hasError || void 0,
|
|
1612
1669
|
"aria-describedby": hasError ? errorId : void 0,
|
|
1613
1670
|
style,
|
|
1614
|
-
className: `flex items-center justify-between relative h-9 rounded-lg cursor-pointer select-none ${disabled ? "cursor-not-allowed bg-
|
|
1671
|
+
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" : ""}`,
|
|
1615
1672
|
tabIndex: disabled ? -1 : 0,
|
|
1616
1673
|
onKeyDown: (e) => {
|
|
1617
1674
|
if (disabled) return;
|
|
@@ -1624,8 +1681,8 @@ function Dropdown({
|
|
|
1624
1681
|
/* @__PURE__ */ jsx(
|
|
1625
1682
|
"div",
|
|
1626
1683
|
{
|
|
1627
|
-
className: `h-7 pl-2 ${!style?.width ? "min-w-[240px]" : ""}
|
|
1628
|
-
children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-
|
|
1684
|
+
className: `h-7 pl-2 ${!style?.width ? "min-w-[240px]" : ""} flex items-center gap-1 overflow-hidden`,
|
|
1685
|
+
children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1629
1686
|
value.slice(0, 1).map((val) => /* @__PURE__ */ jsx(
|
|
1630
1687
|
DropdownPill,
|
|
1631
1688
|
{
|
|
@@ -1638,7 +1695,7 @@ function Dropdown({
|
|
|
1638
1695
|
] }) : /* @__PURE__ */ jsx(DropdownPill, { value: innerItems.find((it) => it.key === value)?.label })
|
|
1639
1696
|
}
|
|
1640
1697
|
),
|
|
1641
|
-
/* @__PURE__ */ jsx("div", { className: `transition-transform duration-
|
|
1698
|
+
/* @__PURE__ */ jsx("div", { className: `transition-transform duration-200 mr-2 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
|
|
1642
1699
|
]
|
|
1643
1700
|
}
|
|
1644
1701
|
) }),
|
|
@@ -1648,7 +1705,7 @@ function Dropdown({
|
|
|
1648
1705
|
align: "start",
|
|
1649
1706
|
sideOffset: 4,
|
|
1650
1707
|
style: { width: style?.width || 240 },
|
|
1651
|
-
className: "bg-
|
|
1708
|
+
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",
|
|
1652
1709
|
onInteractOutside: () => setOpen(false),
|
|
1653
1710
|
children: [
|
|
1654
1711
|
hasSearch && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(
|
|
@@ -1675,7 +1732,7 @@ function Dropdown({
|
|
|
1675
1732
|
role: "option",
|
|
1676
1733
|
"aria-selected": isSelected(item.key),
|
|
1677
1734
|
tabIndex: 0,
|
|
1678
|
-
className: `flex items-center justify-between p-2 hover:bg-
|
|
1735
|
+
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"}`,
|
|
1679
1736
|
onClick: () => selectItem(item.key),
|
|
1680
1737
|
onKeyDown: (e) => {
|
|
1681
1738
|
if (e.key === "Enter" || e.key === " ") {
|
|
@@ -1683,18 +1740,19 @@ function Dropdown({
|
|
|
1683
1740
|
selectItem(item.key);
|
|
1684
1741
|
}
|
|
1685
1742
|
},
|
|
1686
|
-
onMouseEnter: () => setHoveredItem(item.key),
|
|
1687
|
-
onMouseLeave: () => setHoveredItem(null),
|
|
1688
1743
|
children: [
|
|
1689
1744
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
|
|
1690
1745
|
item.icon && /* @__PURE__ */ jsx("div", { children: item.icon }),
|
|
1691
1746
|
item.label
|
|
1692
1747
|
] }),
|
|
1693
|
-
isSelected(item.key) &&
|
|
1748
|
+
isSelected(item.key) && // currentColor — checkmark follows
|
|
1749
|
+
// the item's text colour, which
|
|
1750
|
+
// flips automatically on hover.
|
|
1751
|
+
/* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
1694
1752
|
"path",
|
|
1695
1753
|
{
|
|
1696
1754
|
d: "M4 10l4.5 4.5L16 6",
|
|
1697
|
-
stroke:
|
|
1755
|
+
stroke: "currentColor",
|
|
1698
1756
|
strokeWidth: "2",
|
|
1699
1757
|
strokeLinecap: "round",
|
|
1700
1758
|
strokeLinejoin: "round"
|
|
@@ -1712,7 +1770,7 @@ function Dropdown({
|
|
|
1712
1770
|
]
|
|
1713
1771
|
}
|
|
1714
1772
|
),
|
|
1715
|
-
hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-error
|
|
1773
|
+
hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
|
|
1716
1774
|
] });
|
|
1717
1775
|
}
|
|
1718
1776
|
var DEFAULT_PICKER = [
|
|
@@ -2555,7 +2613,7 @@ function TextInput({
|
|
|
2555
2613
|
"label",
|
|
2556
2614
|
{
|
|
2557
2615
|
style: { color: labelColor || void 0 },
|
|
2558
|
-
className: `text-
|
|
2616
|
+
className: `text-sm font-medium ml-1 max-content ${!labelColor && "text-foreground"}`,
|
|
2559
2617
|
htmlFor,
|
|
2560
2618
|
children: label
|
|
2561
2619
|
}
|
|
@@ -2573,7 +2631,7 @@ function TextInput({
|
|
|
2573
2631
|
id: htmlFor,
|
|
2574
2632
|
"aria-invalid": hasError || void 0,
|
|
2575
2633
|
"aria-describedby": hasError ? errorId : void 0,
|
|
2576
|
-
className: `${hasError ? "border border-error" : ""}
|
|
2634
|
+
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`,
|
|
2577
2635
|
style: inputStyle ?? {},
|
|
2578
2636
|
placeholder: placeholder ?? ""
|
|
2579
2637
|
}
|
|
@@ -2581,7 +2639,7 @@ function TextInput({
|
|
|
2581
2639
|
]
|
|
2582
2640
|
}
|
|
2583
2641
|
),
|
|
2584
|
-
hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-error
|
|
2642
|
+
hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
|
|
2585
2643
|
] });
|
|
2586
2644
|
}
|
|
2587
2645
|
function NumberInput({
|
|
@@ -2696,19 +2754,15 @@ function Password({
|
|
|
2696
2754
|
iconColor
|
|
2697
2755
|
}) {
|
|
2698
2756
|
const [passwordVisible, setPasswordVisible] = useState(false);
|
|
2699
|
-
const color = iconColor ?? colors_default.PALETTE["prussian-blue"];
|
|
2700
2757
|
const errorId = useId();
|
|
2701
2758
|
const hasError = errorMessage != null;
|
|
2702
2759
|
return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center justify-center", style: style ?? {}, children: [
|
|
2703
2760
|
/* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`, children: [
|
|
2704
|
-
label &&
|
|
2705
|
-
// <label htmlFor=…> announces as an unlabeled control in
|
|
2706
|
-
// some screen readers.
|
|
2707
|
-
/* @__PURE__ */ jsx(
|
|
2761
|
+
label && /* @__PURE__ */ jsx(
|
|
2708
2762
|
"label",
|
|
2709
2763
|
{
|
|
2710
2764
|
style: { color: labelColor || void 0 },
|
|
2711
|
-
className: `text-
|
|
2765
|
+
className: `text-sm font-medium ml-1 max-content ${!labelColor && "text-foreground"}`,
|
|
2712
2766
|
htmlFor,
|
|
2713
2767
|
children: label
|
|
2714
2768
|
}
|
|
@@ -2727,7 +2781,7 @@ function Password({
|
|
|
2727
2781
|
id: htmlFor,
|
|
2728
2782
|
"aria-invalid": hasError || void 0,
|
|
2729
2783
|
"aria-describedby": hasError ? errorId : void 0,
|
|
2730
|
-
className: `${hasError ? "border border-error" : ""}
|
|
2784
|
+
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`,
|
|
2731
2785
|
style: inputStyle ?? {},
|
|
2732
2786
|
placeholder: placeholder ?? ""
|
|
2733
2787
|
}
|
|
@@ -2736,19 +2790,20 @@ function Password({
|
|
|
2736
2790
|
"button",
|
|
2737
2791
|
{
|
|
2738
2792
|
type: "button",
|
|
2739
|
-
className: "cursor-pointer p-1",
|
|
2793
|
+
className: "cursor-pointer p-1 text-foreground-secondary hover:text-foreground rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
2794
|
+
style: iconColor ? { color: iconColor } : void 0,
|
|
2740
2795
|
onClick: () => setPasswordVisible(!passwordVisible),
|
|
2741
2796
|
"aria-label": passwordVisible ? "Hide password" : "Show password",
|
|
2742
2797
|
children: passwordVisible ? (
|
|
2743
2798
|
/* EyeSlash */
|
|
2744
|
-
/* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill:
|
|
2799
|
+
/* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
|
|
2745
2800
|
/* @__PURE__ */ 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" }),
|
|
2746
2801
|
/* @__PURE__ */ 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" }),
|
|
2747
2802
|
/* @__PURE__ */ 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" })
|
|
2748
2803
|
] })
|
|
2749
2804
|
) : (
|
|
2750
2805
|
/* Eye */
|
|
2751
|
-
/* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill:
|
|
2806
|
+
/* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
|
|
2752
2807
|
/* @__PURE__ */ jsx("path", { d: "M12 15a3 3 0 100-6 3 3 0 000 6z" }),
|
|
2753
2808
|
/* @__PURE__ */ 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" })
|
|
2754
2809
|
] })
|
|
@@ -2757,7 +2812,7 @@ function Password({
|
|
|
2757
2812
|
)
|
|
2758
2813
|
] })
|
|
2759
2814
|
] }),
|
|
2760
|
-
hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-error
|
|
2815
|
+
hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
|
|
2761
2816
|
] });
|
|
2762
2817
|
}
|
|
2763
2818
|
function Checkbox({
|
|
@@ -2846,22 +2901,25 @@ function Switch({
|
|
|
2846
2901
|
uncheckedIcon
|
|
2847
2902
|
}) {
|
|
2848
2903
|
const id = useId();
|
|
2849
|
-
return /* @__PURE__ */
|
|
2850
|
-
|
|
2851
|
-
{
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
|
|
2862
|
-
|
|
2863
|
-
|
|
2864
|
-
|
|
2904
|
+
return /* @__PURE__ */ jsxs("div", { children: [
|
|
2905
|
+
"// mr-12 was a hardcoded right margin that broke layouts; spacing // is the parent's responsibility now.",
|
|
2906
|
+
/* @__PURE__ */ jsx("label", { htmlFor: id, className: "flex items-center cursor-pointer select-none", children: /* @__PURE__ */ jsx(
|
|
2907
|
+
SwitchPrimitive.Root,
|
|
2908
|
+
{
|
|
2909
|
+
id,
|
|
2910
|
+
checked,
|
|
2911
|
+
onCheckedChange: (c) => onChange?.({ target: { checked: c } }),
|
|
2912
|
+
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",
|
|
2913
|
+
children: /* @__PURE__ */ jsx(
|
|
2914
|
+
SwitchPrimitive.Thumb,
|
|
2915
|
+
{
|
|
2916
|
+
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]",
|
|
2917
|
+
children: checkedIcon && uncheckedIcon ? checked ? checkedIcon : uncheckedIcon : null
|
|
2918
|
+
}
|
|
2919
|
+
)
|
|
2920
|
+
}
|
|
2921
|
+
) })
|
|
2922
|
+
] });
|
|
2865
2923
|
}
|
|
2866
2924
|
function AutoComplete({
|
|
2867
2925
|
disabled,
|
|
@@ -2891,9 +2949,9 @@ function AutoComplete({
|
|
|
2891
2949
|
className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
|
|
2892
2950
|
style: style ?? {},
|
|
2893
2951
|
children: [
|
|
2894
|
-
label && /* @__PURE__ */ jsx("label", { className: "text-
|
|
2952
|
+
label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium ml-1 max-content text-foreground", children: label }),
|
|
2895
2953
|
/* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
|
|
2896
|
-
/* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "bg-
|
|
2954
|
+
/* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ 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: [
|
|
2897
2955
|
/* @__PURE__ */ jsx(
|
|
2898
2956
|
"input",
|
|
2899
2957
|
{
|
|
@@ -2906,7 +2964,7 @@ function AutoComplete({
|
|
|
2906
2964
|
onFocus: () => setOpen(true),
|
|
2907
2965
|
type: "text",
|
|
2908
2966
|
name,
|
|
2909
|
-
className: "focus:outline-none pl-2 h-9 w-56
|
|
2967
|
+
className: "bg-transparent focus:outline-none pl-2 h-9 w-56 rounded-lg disabled:cursor-not-allowed",
|
|
2910
2968
|
style: inputStyle ?? {},
|
|
2911
2969
|
placeholder: placeholder ?? "",
|
|
2912
2970
|
autoComplete: "off",
|
|
@@ -2915,7 +2973,7 @@ function AutoComplete({
|
|
|
2915
2973
|
"aria-autocomplete": "list"
|
|
2916
2974
|
}
|
|
2917
2975
|
),
|
|
2918
|
-
/* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill:
|
|
2976
|
+
/* @__PURE__ */ 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__ */ 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" }) })
|
|
2919
2977
|
] }) }),
|
|
2920
2978
|
/* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
|
|
2921
2979
|
Popover.Content,
|
|
@@ -2923,8 +2981,8 @@ function AutoComplete({
|
|
|
2923
2981
|
align: "start",
|
|
2924
2982
|
sideOffset: 4,
|
|
2925
2983
|
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
2926
|
-
className: "w-64 bg-
|
|
2927
|
-
children: foundItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-
|
|
2984
|
+
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",
|
|
2985
|
+
children: foundItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsx("div", { role: "listbox", children: foundItems.map((item) => (
|
|
2928
2986
|
// tabIndex + Enter/Space onKeyDown
|
|
2929
2987
|
// makes each option keyboard-activatable.
|
|
2930
2988
|
// Full roving-tabindex / arrow-key nav
|
|
@@ -2934,7 +2992,7 @@ function AutoComplete({
|
|
|
2934
2992
|
{
|
|
2935
2993
|
role: "option",
|
|
2936
2994
|
tabIndex: 0,
|
|
2937
|
-
className: "text-sm flex items-center gap-2 p-2 transition-
|
|
2995
|
+
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",
|
|
2938
2996
|
onClick: () => handleSelect(item),
|
|
2939
2997
|
onKeyDown: (e) => {
|
|
2940
2998
|
if (e.key === "Enter" || e.key === " ") {
|
|
@@ -3128,7 +3186,7 @@ function FileInput({
|
|
|
3128
3186
|
openPicker();
|
|
3129
3187
|
}
|
|
3130
3188
|
},
|
|
3131
|
-
className: "border-2
|
|
3189
|
+
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",
|
|
3132
3190
|
onDragOver: (e) => e.preventDefault(),
|
|
3133
3191
|
onDrop,
|
|
3134
3192
|
children: [
|
|
@@ -3146,28 +3204,28 @@ function FileInput({
|
|
|
3146
3204
|
}
|
|
3147
3205
|
),
|
|
3148
3206
|
files.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full items-center justify-center gap-2", children: [
|
|
3149
|
-
/* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill:
|
|
3150
|
-
/* @__PURE__ */ jsx("div", { className: "text-
|
|
3151
|
-
] }) : /* @__PURE__ */ jsx("div", { className: "flex gap-3 items-center justify-center w-full h-full", children: files.map((file, id) => /* @__PURE__ */ jsxs(
|
|
3207
|
+
/* @__PURE__ */ 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__ */ 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" }) }),
|
|
3208
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm", children: "Click or Drop a file" })
|
|
3209
|
+
] }) : /* @__PURE__ */ jsx("div", { className: "flex gap-3 items-center justify-center w-full h-full p-3", children: files.map((file, id) => /* @__PURE__ */ jsxs(
|
|
3152
3210
|
"div",
|
|
3153
3211
|
{
|
|
3154
|
-
className: "text-xs flex flex-col items-center w-20 h-24 text-center bg-
|
|
3212
|
+
className: "text-xs flex flex-col items-center w-20 h-24 text-center bg-surface-raised text-foreground p-4 rounded-md relative",
|
|
3155
3213
|
children: [
|
|
3156
3214
|
/* @__PURE__ */ jsx(
|
|
3157
3215
|
"button",
|
|
3158
3216
|
{
|
|
3159
3217
|
type: "button",
|
|
3160
3218
|
onClick: removeFile,
|
|
3161
|
-
className: "bg-error rounded-full w-4 h-4 absolute right-[-5px] top-[-5px] cursor-pointer flex items-center justify-center",
|
|
3219
|
+
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",
|
|
3162
3220
|
"aria-label": "Remove file",
|
|
3163
|
-
children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
3221
|
+
children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
3164
3222
|
}
|
|
3165
3223
|
),
|
|
3166
|
-
/* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill:
|
|
3224
|
+
/* @__PURE__ */ 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: [
|
|
3167
3225
|
/* @__PURE__ */ 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" }),
|
|
3168
3226
|
/* @__PURE__ */ 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" })
|
|
3169
3227
|
] }),
|
|
3170
|
-
/* @__PURE__ */ jsx("span", { className: "text-ellipsis whitespace-nowrap overflow-hidden w-full
|
|
3228
|
+
/* @__PURE__ */ jsx("span", { className: "text-ellipsis whitespace-nowrap overflow-hidden w-full", children: file.name })
|
|
3171
3229
|
]
|
|
3172
3230
|
},
|
|
3173
3231
|
`${id}${file.name}`
|