@godxjp/ui 18.15.4 → 19.1.0

package/dist/components/data-entry/time-picker.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Clock } from "lucide-react";
+import { Clock, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
 import { isValidHhmm, normalizeHhmm } from "../../lib/datetime/index.js";
 import { pickFieldA11y } from "../../lib/field-a11y.js";
@@ -73,40 +73,28 @@ function TimeColumn({
         break;
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-muted-foreground border-b px-1 py-1.5 text-center text-xs font-medium", children: label }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: listRef,
-        role: "listbox",
-        "aria-label": label,
-        className: "h-52 [scrollbar-width:thin] [scrollbar-gutter:stable] overflow-y-scroll overscroll-contain p-1",
-        children: items.map((item, index) => {
-          const isSelected = item === selected;
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              "aria-selected": isSelected,
-              "data-selected": isSelected,
-              tabIndex: isSelected ? 0 : -1,
-              className: cn(
-                "hover:bg-accent flex w-full items-center justify-center rounded-md py-1.5 text-sm tabular-nums transition-colors",
-                isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"
-              ),
-              onClick: () => {
-                onSelect(item);
-              },
-              onKeyDown: (e) => onKeyDown(e, index),
-              children: formatItem(item)
-            },
-            item
-          );
-        })
-      }
-    )
+  return /* @__PURE__ */ jsxs("div", { className: "ui-time-picker-column", children: [
+    /* @__PURE__ */ jsx("div", { className: "ui-time-picker-column-heading", children: label }),
+    /* @__PURE__ */ jsx("div", { ref: listRef, role: "listbox", "aria-label": label, className: "ui-time-picker-column-scroll", children: items.map((item, index) => {
+      const isSelected = item === selected;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": isSelected,
+          "data-selected": isSelected,
+          tabIndex: isSelected ? 0 : -1,
+          className: "ui-time-picker-option",
+          onClick: () => {
+            onSelect(item);
+          },
+          onKeyDown: (e) => onKeyDown(e, index),
+          children: formatItem(item)
+        },
+        item
+      );
+    }) })
   ] });
 }
 function TimePickerPanel({ value, minuteStep, use12h, onChange, onDone }) {
@@ -132,7 +120,7 @@ function TimePickerPanel({ value, minuteStep, use12h, onChange, onDone }) {
   };
   const hourItems = use12h ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
   const selectedHourItem = use12h ? to12h(hour) : hour;
-  return /* @__PURE__ */ jsxs("div", { className: use12h ? "w-52" : "w-36", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "ui-time-picker-panel", "data-hour-cycle": use12h ? "h12" : "h23", children: [
     /* @__PURE__ */ jsxs("div", { className: "divide-border flex divide-x", children: [
       /* @__PURE__ */ jsx(
         TimeColumn,
@@ -174,7 +162,7 @@ function TimePickerPanel({ value, minuteStep, use12h, onChange, onDone }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "border-t p-2", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "ui-time-picker-footer", children: /* @__PURE__ */ jsx(
       Input,
       {
         id: draftId,
@@ -237,6 +225,7 @@ function TimePicker({
     setValue("");
     setText("");
   };
+  const showClear = allowClear && text !== "" && !disabled;
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: /* @__PURE__ */ jsx(
       Input,
@@ -253,20 +242,31 @@ function TimePicker({
         "aria-haspopup": "dialog",
         "aria-controls": open ? dialogId : void 0,
         ...fieldA11y,
-        className: "tabular-nums",
-        allowClear,
-        onClear: clear,
-        trailingIcon: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            disabled,
-            tabIndex: -1,
-            "aria-label": t("dataEntry.timePicker.openPicker") ?? "Open time picker",
-            className: "text-muted-foreground hover:text-foreground inline-flex size-5 items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100",
-            children: /* @__PURE__ */ jsx(Clock, { className: "size-4", "aria-hidden": "true" })
-          }
-        ) }),
+        className: cn("tabular-nums", showClear && "ui-control-inline-affix-pair-affixed"),
+        trailingIcon: /* @__PURE__ */ jsxs("span", { className: "ui-time-picker-affix", children: [
+          showClear ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": t("common.clear") ?? "Clear",
+              onClick: clear,
+              className: "ui-control-inline-affix-action",
+              children: /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled,
+              tabIndex: -1,
+              "aria-label": t("dataEntry.timePicker.openPicker") ?? "Open time picker",
+              className: "ui-control-inline-affix-action",
+              children: /* @__PURE__ */ jsx(Clock, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+            }
+          ) })
+        ] }),
         onClick: () => {
           if (!disabled) setOpen(true);
         },
@@ -295,7 +295,7 @@ function TimePicker({
         id: dialogId,
         role: "dialog",
         "aria-label": t("dataEntry.timePicker.openPicker") ?? "Time picker",
-        className: "w-auto p-0",
+        className: "ui-time-picker-popover",
         align: "end",
         onOpenAutoFocus: (event) => event.preventDefault(),
         children: /* @__PURE__ */ jsx(

package/dist/components/data-entry/toggle-group.d.ts

@@ -1 +1,2 @@
 export { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group.js";
+export type { ToggleGroupItemProp, ToggleGroupItemProps } from "../ui/toggle-group.js";

package/dist/components/data-entry/toggle.d.ts

@@ -1,2 +1,2 @@
 export { Toggle } from "../ui/toggle.js";
-export type { ToggleProps } from "../ui/toggle.js";
+export type { ToggleProp, ToggleProps } from "../ui/toggle.js";

package/dist/components/data-entry/transfer.js

@@ -40,9 +40,9 @@ function TransferPanel({
   const toggleKey = (key, checked) => {
     onSelectChange(checked ? [...selectedKeys, key] : selectedKeys.filter((k) => k !== key));
   };
-  return /* @__PURE__ */ jsxs("div", { className: "bg-background flex min-h-[14rem] flex-1 flex-col rounded-md border", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2 text-sm", children: [
-      /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 font-medium", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "ui-transfer-pane", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui-transfer-pane-header", children: [
+      /* @__PURE__ */ jsxs("label", { className: "ui-transfer-pane-check", children: [
         /* @__PURE__ */ jsx(
           Checkbox,
           {
@@ -60,21 +60,20 @@ function TransferPanel({
         filtered.length
       ] })
     ] }),
-    showSearch && /* @__PURE__ */ jsx("div", { className: "border-b p-2", children: /* @__PURE__ */ jsx(
+    showSearch && /* @__PURE__ */ jsx("div", { className: "ui-transfer-search", "data-disabled": disabled ? "" : void 0, children: /* @__PURE__ */ jsx(
       SearchInput,
       {
         onSearch: setQuery,
         placeholder: searchPlaceholder,
         ariaLabel: searchPlaceholder,
-        debounce: 0,
-        className: disabled ? "pointer-events-none opacity-50" : void 0
+        debounce: 0
       }
     ) }),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("ul", { className: "p-1", "aria-labelledby": titleId, children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "text-muted-foreground py-8 text-center text-sm", children: emptyText }) : filtered.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("ul", { className: "ui-transfer-list", "aria-labelledby": titleId, children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "ui-transfer-empty", children: emptyText }) : filtered.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
       "label",
       {
         className: cn(
-          "flex cursor-pointer items-start gap-2 rounded-sm px-2 py-2 text-sm",
+          "ui-transfer-row",
           "hover:bg-accent hover:text-accent-foreground",
           item.disabled && "bg-muted/40 text-muted-foreground pointer-events-none"
         ),
@@ -85,12 +84,12 @@ function TransferPanel({
               checked: selectedKeys.includes(item.key),
               disabled: Boolean(disabled) || Boolean(item.disabled),
               onCheckedChange: (v) => toggleKey(item.key, v === true),
-              className: "mt-0.5"
+              className: "ui-transfer-row-check"
             }
           ),
-          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ui-transfer-row-body", children: [
             /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: item.title }),
-            item.description && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground block truncate text-xs", children: item.description })
+            item.description && /* @__PURE__ */ jsx("span", { className: "ui-transfer-row-description text-muted-foreground block truncate", children: item.description })
           ] })
         ]
       }
@@ -141,7 +140,7 @@ function Transfer({
       id,
       ...groupA11y,
       "aria-disabled": disabled ? true : void 0,
-      className: cn("flex flex-wrap items-stretch gap-3", className),
+      className: cn("ui-transfer", className),
       children: [
         /* @__PURE__ */ jsx(
           TransferPanel,
@@ -158,7 +157,7 @@ function Transfer({
             emptyText: t("dataEntry.transfer.empty")
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ui-transfer-actions", children: [
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -168,7 +167,7 @@ function Transfer({
               disabled: Boolean(disabled) || selected[0].length === 0,
               "aria-label": t("dataEntry.transfer.moveRight"),
               onClick: () => move("right"),
-              children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "ui-transfer-action-icon", "aria-hidden": "true" })
             }
           ),
           !oneWay && /* @__PURE__ */ jsx(
@@ -180,7 +179,7 @@ function Transfer({
               disabled: Boolean(disabled) || selected[1].length === 0,
               "aria-label": t("dataEntry.transfer.moveLeft"),
               onClick: () => move("left"),
-              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ui-transfer-action-icon", "aria-hidden": "true" })
             }
           )
         ] }),

package/dist/components/data-entry/tree-select.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { ChevronDown, ChevronRight, ChevronsUpDown, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-import { pickFieldA11y } from "../../lib/field-a11y.js";
+import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { controlOpenRingClass } from "../../lib/control-styles.js";
 import { Button } from "../general/button.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
@@ -63,6 +63,7 @@ function TreeSelectRoot({
 }) {
   const { t } = useTranslation();
   const fieldA11y = pickFieldA11y(ariaProps);
+  const identity = useFieldIdentity({ id, "data-field": fieldA11y["data-field"] });
   const reactId = React.useId();
   const treeId = `${id ?? reactId}-tree`;
   const options = React.useMemo(
@@ -179,6 +180,7 @@ function TreeSelectRoot({
         Button,
         {
           id,
+          "data-field": fieldA11y["data-field"] ?? identity["data-field"],
           type: "button",
           variant: "outline",
           role: "combobox",
@@ -189,14 +191,14 @@ function TreeSelectRoot({
           disabled,
           className: cn(
             "w-full justify-between font-normal",
-            allowClear && displayKeys.length > 0 && !disabled && "pe-10",
+            allowClear && displayKeys.length > 0 && !disabled && "ui-tree-select-trigger-affixed",
             controlOpenRingClass,
             !displayKeys.length && "text-muted-foreground",
             className
           ),
           children: [
             /* @__PURE__ */ jsx("span", { className: "truncate", children: displayKeys.length ? displayLabel : resolvedPlaceholder }),
-            /* @__PURE__ */ jsx("span", { className: "ms-2 flex shrink-0 items-center", children: !(allowClear && displayKeys.length > 0 && !disabled) && /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 opacity-50", "aria-hidden": "true" }) })
+            /* @__PURE__ */ jsx("span", { className: "ms-2 flex shrink-0 items-center", children: !(allowClear && displayKeys.length > 0 && !disabled) && /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ui-tree-select-chevron", "aria-hidden": "true" }) })
           ]
         }
       ) }),
@@ -205,13 +207,13 @@ function TreeSelectRoot({
         {
           type: "button",
           "aria-label": t("dataEntry.treeSelect.clear"),
-          className: "absolute end-3 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+          className: "ui-tree-select-clear",
           onClick: clearValue,
-          children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: [
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "ui-tree-select-popover", align: "start", children: [
       showSearch && /* @__PURE__ */ jsx(Command, { shouldFilter: false, children: /* @__PURE__ */ jsx(
         CommandInput,
         {
@@ -220,14 +222,14 @@ function TreeSelectRoot({
           onValueChange: setSearch
         }
       ) }),
-      /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[min(300px,50vh)]", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(ScrollArea, { className: "ui-tree-select-list", children: /* @__PURE__ */ jsx(
         "div",
         {
           id: treeId,
           role: "tree",
           "aria-multiselectable": Boolean(checkable) || Boolean(multiple),
-          className: "p-1",
-          children: visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-6 text-center text-sm", children: t("dataEntry.treeSelect.empty") }) : visible.map(({ node, depth, hasChildren }) => {
+          className: "ui-tree-select-panel",
+          children: visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ui-tree-select-empty", children: t("dataEntry.treeSelect.empty") }) : visible.map(({ node, depth, hasChildren }) => {
             const expanded = expandedKeys.has(node.value);
             const isSelected = selected.includes(node.value);
             return /* @__PURE__ */ jsxs(
@@ -242,14 +244,10 @@ function TreeSelectRoot({
                 "aria-selected": isSelected,
                 onFocus: () => setActiveKey(node.value),
                 onKeyDown: (event) => onTreeItemKeyDown(event, node, hasChildren, expanded),
-                className: cn(
-                  "flex items-center rounded-sm py-1.5 pe-2 text-sm outline-none",
-                  "hover:bg-accent hover:text-accent-foreground",
-                  "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-1",
-                  isSelected && "bg-accent/60",
-                  node.disabled && "pointer-events-none opacity-50"
-                ),
-                style: { paddingInlineStart: `${depth * 1.25 + 0.5}rem` },
+                "data-selected": isSelected ? "true" : "false",
+                "data-disabled": node.disabled ? "" : void 0,
+                className: "ui-tree-select-row ui-focus-ring",
+                style: { "--tree-select-depth": depth },
                 children: [
                   /* @__PURE__ */ jsx(
                     "button",
@@ -257,15 +255,13 @@ function TreeSelectRoot({
                       type: "button",
                       tabIndex: -1,
                       "aria-label": expanded ? t("dataEntry.treeSelect.collapse") : t("dataEntry.treeSelect.expand"),
-                      className: cn(
-                        "me-1 flex size-5 shrink-0 items-center justify-center rounded-sm",
-                        !hasChildren && "invisible"
-                      ),
+                      "data-leaf": hasChildren ? void 0 : "",
+                      className: "ui-tree-select-toggle",
                       onClick: () => toggleExpand(node.value),
-                      children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+                      children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "ui-tree-select-toggle-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "ui-tree-select-toggle-icon", "aria-hidden": "true" })
                     }
                   ),
-                  checkable ? /* @__PURE__ */ jsxs("label", { className: "flex flex-1 cursor-pointer items-center gap-2", children: [
+                  checkable ? /* @__PURE__ */ jsxs("label", { className: "ui-tree-select-label", children: [
                     /* @__PURE__ */ jsx(
                       Checkbox,
                       {

package/dist/components/data-entry/upload-crop-dialog.js

@@ -52,7 +52,7 @@ function UploadCropDialog({ open, onOpenChange, file, onConfirm }) {
     onConfirm(cropped);
     onOpenChange(false);
   };
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-sm", children: [
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-[var(--upload-crop-dialog-max-width)]", children: [
     /* @__PURE__ */ jsxs(DialogHeader, { children: [
       /* @__PURE__ */ jsx(DialogTitle, { children: t("dataEntry.upload.cropTitle") }),
       /* @__PURE__ */ jsx(DialogDescription, { children: t("dataEntry.upload.cropDescription") })
@@ -62,7 +62,7 @@ function UploadCropDialog({ open, onOpenChange, file, onConfirm }) {
         "div",
         {
           className: cn(
-            "bg-muted relative mx-auto size-48 overflow-hidden rounded-full border",
+            "bg-muted relative mx-auto size-[var(--upload-crop-preview-size)] overflow-hidden rounded-[var(--upload-crop-preview-radius)] border",
             "flex items-center justify-center"
           ),
           children: src ? /* @__PURE__ */ jsx(
@@ -71,13 +71,13 @@ function UploadCropDialog({ open, onOpenChange, file, onConfirm }) {
               ref: imgRef,
               src,
               alt: "",
-              className: "size-full object-cover transition-transform duration-150",
+              className: "size-full object-cover transition-transform duration-[var(--duration-fast)]",
               style: { transform: `scale(${scale})` }
             }
           ) : null
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "ui-stack-xs px-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ui-stack-xs px-[var(--upload-crop-zoom-space-inline)]", children: [
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: t("dataEntry.upload.cropZoom") }),
         /* @__PURE__ */ jsx(
           Slider,

package/dist/components/data-entry/upload.d.ts

@@ -4,4 +4,4 @@ export type { UploadProp, UploadProp as UploadProps, UploadFileItemProp, UploadV
 export type { UploadFileItem, UploadVariant, UploadCommitAction } from "./upload-types.js";
 export { collectUploadCommitActions, createUploadItem } from "./upload-types.js";
 export { useUploadDraft } from "./use-upload-draft.js";
-export declare function Upload({ variant, triggerSize, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;
+export declare function Upload({ variant, triggerSize, triggerVariant, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;

package/dist/components/data-entry/upload.js

@@ -76,6 +76,7 @@ async function runUpload(file, item, onUpload, setItems) {
 function Upload({
   variant = "dropzone",
   triggerSize,
+  triggerVariant = "outline",
   value,
   defaultValue,
   onValueChange,
@@ -197,15 +198,13 @@ function Upload({
             setDragActive(false);
             pickFiles(e.dataTransfer.files);
           },
-          className: cn(
-            "cursor-pointer rounded-lg border-2 border-dashed p-10 text-center transition-colors",
-            dragActive ? "border-primary bg-primary/5" : "border-border hover:border-primary/50",
-            disabled && "pointer-events-none opacity-50"
-          ),
+          "data-drag-active": dragActive ? "" : void 0,
+          "data-disabled": disabled ? "" : void 0,
+          className: "ui-upload-dropzone",
           children: [
-            /* @__PURE__ */ jsx(UploadIcon, { className: "text-muted-foreground mx-auto size-10", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm", children: t("dataEntry.upload.dropzoneHint") }),
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: t("dataEntry.upload.dropzoneMeta") })
+            /* @__PURE__ */ jsx(UploadIcon, { className: "ui-upload-dropzone-icon", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("p", { className: "ui-upload-dropzone-hint", children: t("dataEntry.upload.dropzoneHint") }),
+            /* @__PURE__ */ jsx("p", { className: "ui-upload-dropzone-meta", children: t("dataEntry.upload.dropzoneMeta") })
           ]
         }
       ),
@@ -222,13 +221,20 @@ function Upload({
         Button,
         {
           type: "button",
-          variant: "outline",
+          variant: triggerVariant,
           size: triggerSize,
           disabled,
           onClick: openPicker,
           "aria-label": iconOnly ? typeof label === "string" ? label : void 0 : void 0,
           children: [
-            /* @__PURE__ */ jsx(UploadIcon, { className: iconOnly ? "size-4" : "me-2 size-4", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx(
+              UploadIcon,
+              {
+                className: "ui-upload-trigger-icon",
+                "data-with-label": iconOnly ? void 0 : "",
+                "aria-hidden": "true"
+              }
+            ),
             iconOnly ? null : label
           ]
         }
@@ -238,7 +244,7 @@ function Upload({
   }
   if (variant === "picture-card") {
     const canAdd = maxCount == null || items.length < maxCount;
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap gap-3", className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("ui-upload-grid", className), children: [
       hiddenInput,
       liveRegion,
       items.map((item2) => /* @__PURE__ */ jsx(
@@ -255,15 +261,12 @@ function Upload({
           type: "button",
           disabled,
           onClick: openPicker,
-          className: cn(
-            "flex size-24 flex-col items-center justify-center rounded-md border border-dashed",
-            "text-muted-foreground hover:border-primary hover:text-primary transition-colors",
-            disabled && "pointer-events-none opacity-50"
-          ),
+          "data-disabled": disabled ? "" : void 0,
+          className: "ui-upload-tile-add",
           "aria-label": t("dataEntry.upload.addImage"),
           children: [
-            /* @__PURE__ */ jsx(ImagePlus, { className: "size-6", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("span", { className: "mt-1 text-xs", children: t("dataEntry.upload.addImage") })
+            /* @__PURE__ */ jsx(ImagePlus, { className: "ui-upload-tile-add-icon", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "ui-upload-tile-add-label", children: t("dataEntry.upload.addImage") })
           ]
         }
       )
@@ -271,23 +274,23 @@ function Upload({
   }
   if (variant === "picture") {
     const item2 = draft.state.display;
-    return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm max-w-xs", className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm ui-upload-picture", className), children: [
       hiddenInput,
       liveRegion,
-      item2?.previewUrl && !item2.pendingDelete ? /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-md border", children: [
-        /* @__PURE__ */ jsx("img", { src: item2.previewUrl, alt: "", className: "max-h-48 w-full object-cover" }),
-        item2.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "bg-background/70 absolute inset-0 flex items-center justify-center text-sm", children: t("dataEntry.upload.uploading") }),
-        item2.pendingReplace && /* @__PURE__ */ jsx("div", { className: "bg-warning text-warning-foreground absolute start-2 top-2 rounded px-2 py-0.5 text-xs", children: t("dataEntry.upload.pendingReplace") })
+      item2?.previewUrl && !item2.pendingDelete ? /* @__PURE__ */ jsxs("div", { className: "ui-upload-picture-frame", children: [
+        /* @__PURE__ */ jsx("img", { src: item2.previewUrl, alt: "", className: "ui-upload-picture-img" }),
+        item2.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "ui-upload-overlay ui-upload-picture-overlay", children: t("dataEntry.upload.uploading") }),
+        item2.pendingReplace && /* @__PURE__ */ jsx("div", { className: "ui-upload-picture-badge", children: t("dataEntry.upload.pendingReplace") })
       ] }) : /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
           disabled,
           onClick: openPicker,
-          className: "text-muted-foreground hover:border-primary flex h-32 w-full flex-col items-center justify-center rounded-md border border-dashed",
+          className: "ui-upload-picture-empty",
           children: [
             /* @__PURE__ */ jsx(ImagePlus, { className: controlIconClass, "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("span", { className: "mt-2 text-sm", children: t("dataEntry.upload.addImage") })
+            /* @__PURE__ */ jsx("span", { className: "ui-upload-picture-empty-label", children: t("dataEntry.upload.addImage") })
           ]
         }
       ),
@@ -324,16 +327,13 @@ function Upload({
           type: "button",
           disabled,
           onClick: openPicker,
-          className: cn(
-            "border-border bg-muted relative size-24 overflow-hidden rounded-full border-2",
-            "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
-            item?.pendingDelete && "opacity-40",
-            disabled && "pointer-events-none opacity-50"
-          ),
+          "data-pending-delete": item?.pendingDelete ? "" : void 0,
+          "data-disabled": disabled ? "" : void 0,
+          className: "ui-upload-avatar ui-focus-ring",
           "aria-label": t("dataEntry.upload.avatarLabel"),
           children: [
-            !showPlaceholder && item?.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground flex size-full items-center justify-center", children: /* @__PURE__ */ jsx(Camera, { className: controlIconClass, "aria-hidden": "true" }) }),
-            !disabled && /* @__PURE__ */ jsx("span", { className: "text-2xs absolute inset-x-0 bottom-0 bg-black/70 py-1 text-center text-white", children: t("dataEntry.upload.change") })
+            !showPlaceholder && item?.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "ui-upload-avatar-image" }) : /* @__PURE__ */ jsx("span", { className: "ui-upload-avatar-placeholder", children: /* @__PURE__ */ jsx(Camera, { className: controlIconClass, "aria-hidden": "true" }) }),
+            !disabled && /* @__PURE__ */ jsx("span", { className: "ui-upload-avatar-change", children: t("dataEntry.upload.change") })
           ]
         }
       ),
@@ -343,9 +343,9 @@ function Upload({
           type: "button",
           disabled,
           onClick: () => draft.markRemove(),
-          className: "bg-background hover:bg-destructive hover:text-destructive-foreground absolute -end-1 -top-1 rounded-full border p-1 shadow-sm",
+          className: "ui-upload-avatar-remove",
           "aria-label": t("dataEntry.upload.removeAvatar"),
-          children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx(Trash2, { className: "ui-upload-remove-icon", "aria-hidden": "true" })
         }
       )
     ] }),
@@ -360,16 +360,16 @@ function UploadDraftActions({
   const { t } = useTranslation();
   const { state, undoRemove, undoReplace } = draft;
   if (state.canUndoRemove) {
-    return /* @__PURE__ */ jsxs("div", { className: "border-destructive/40 bg-destructive/5 flex flex-wrap items-center gap-2 rounded-md border border-dashed px-3 py-2 text-sm", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "ui-upload-draft-undo", children: [
       /* @__PURE__ */ jsx("span", { className: "text-destructive", children: t("dataEntry.upload.markedForDelete") }),
       /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", variant: "outline", disabled, onClick: undoRemove, children: [
-        /* @__PURE__ */ jsx(RotateCcw, { className: "me-1 size-3.5", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(RotateCcw, { className: "ui-upload-draft-icon", "aria-hidden": "true" }),
         t("dataEntry.upload.undo")
       ] })
     ] });
   }
   if (state.canUndoReplace) {
-    return /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex flex-wrap items-center gap-2 text-sm", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "ui-upload-draft-hint", children: [
       /* @__PURE__ */ jsx("span", { children: t("dataEntry.upload.pendingReplaceHint") }),
       /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled, onClick: undoReplace, children: t("dataEntry.upload.undo") }),
       /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", disabled, onClick: onPick, children: t("dataEntry.upload.change") })
@@ -379,17 +379,17 @@ function UploadDraftActions({
 }
 function UploadPictureCard({ item, onRemove }) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs("div", { className: "bg-muted relative size-24 overflow-hidden rounded-md border", children: [
-    item.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex size-full items-center justify-center text-xs", children: "\u2026" }),
-    item.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "bg-background/70 absolute inset-0 flex items-center justify-center text-xs", children: "\u2026" }),
+  return /* @__PURE__ */ jsxs("div", { className: "ui-upload-tile", children: [
+    item.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "ui-upload-avatar-image" }) : /* @__PURE__ */ jsx("div", { className: "ui-upload-tile-placeholder", children: "\u2026" }),
+    item.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "ui-upload-overlay", children: "\u2026" }),
     onRemove && /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: onRemove,
-        className: "bg-background/90 hover:bg-destructive hover:text-destructive-foreground absolute end-1 top-1 rounded-full p-0.5 shadow",
+        className: "ui-upload-tile-remove",
         "aria-label": t("dataEntry.upload.removeImage"),
-        children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx(X, { className: "ui-upload-remove-icon", "aria-hidden": "true" })
       }
     )
   ] });
@@ -399,8 +399,8 @@ function UploadFileList({
   onRemove
 }) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx("ul", { className: "ui-stack-xs", children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 rounded-md border px-3 py-2 text-sm", children: [
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+  return /* @__PURE__ */ jsx("ul", { className: "ui-stack-xs", children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: "ui-upload-row", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui-upload-row-main", children: [
       /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: item.name }),
       /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-xs", children: [
         formatBytes(item.size),
@@ -424,7 +424,7 @@ function UploadFileList({
         variant: "ghost",
         "aria-label": t("dataEntry.upload.removeFile", { name: item.name }),
         onClick: () => onRemove(item.uid),
-        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx(X, { className: "ui-upload-row-icon", "aria-hidden": "true" })
       }
     )
   ] }, item.uid)) });