@godxjp/ui 18.15.4 → 19.0.0

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

@@ -64,7 +64,7 @@ const SelectTrigger = React.forwardRef(({ className, children, size = "md", show
       "data-size": size,
       className: cn(
         controlTriggerClass,
-        "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground w-full gap-2 whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground w-full whitespace-nowrap transition-[color,box-shadow] outline-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
         className
       ),
       ...props,
@@ -75,7 +75,7 @@ const SelectTrigger = React.forwardRef(({ className, children, size = "md", show
           ChevronDown,
           {
             "data-slot": "select-chevron",
-            className: "size-4 shrink-0 opacity-50",
+            className: "ui-select-chevron",
             "aria-hidden": "true"
           }
         ) }) : null
@@ -89,9 +89,9 @@ const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     "data-slot": "select-scroll-up-button",
-    className: cn("flex cursor-default items-center justify-center py-1", className),
+    className: cn("ui-select-scroll-button", className),
     ...props,
-    children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4", "aria-hidden": "true" })
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "ui-select-scroll-icon", "aria-hidden": "true" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -100,9 +100,9 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     "data-slot": "select-scroll-down-button",
-    className: cn("flex cursor-default items-center justify-center py-1", className),
+    className: cn("ui-select-scroll-button", className),
     ...props,
-    children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4", "aria-hidden": "true" })
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "ui-select-scroll-icon", "aria-hidden": "true" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -112,7 +112,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
     ref,
     "data-slot": "select-content",
     className: cn(
-      "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md",
+      "ui-select-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "translate-y-1",
       className
     ),
@@ -125,7 +125,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
         {
           "data-slot": "select-viewport",
           className: cn(
-            "p-1",
+            "ui-select-viewport",
             position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
           ),
           children
@@ -141,7 +141,7 @@ const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     "data-slot": "select-label",
-    className: cn("px-2 py-1.5 text-sm font-medium", className),
+    className: cn("ui-select-label", className),
     ...props
   }
 ));
@@ -151,10 +151,7 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
   {
     ref,
     "data-slot": "select-item",
-    className: cn(
-      "focus:bg-accent focus:text-accent-foreground data-[state=checked]:bg-accent data-[state=checked]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:font-medium [&_svg]:pointer-events-none [&_svg]:shrink-0",
-      className
-    ),
+    className: cn("ui-select-item [&_svg:not([class*='text-'])]:text-muted-foreground", className),
     ...props,
     children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
   }
@@ -165,7 +162,7 @@ const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @_
   {
     ref,
     "data-slot": "select-separator",
-    className: cn("bg-border -mx-1 my-1 h-px", className),
+    className: cn("ui-select-separator", className),
     ...props
   }
 ));
@@ -293,7 +290,7 @@ function DataSelect({
           {
             id,
             "data-testid": dataTestId,
-            className: cn(showClear && "pe-9", canClear ? void 0 : className),
+            className: cn(showClear && "ui-control-trigger-affixed", canClear ? void 0 : className),
             showIndicator: !showClear,
             ...ariaProps,
             children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
@@ -311,15 +308,15 @@ function DataSelect({
   if (!canClear) return select;
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     select,
-    showClear ? /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 end-2 flex items-center", children: /* @__PURE__ */ jsx(
+    showClear ? /* @__PURE__ */ jsx("div", { className: "ui-control-affix", children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         "aria-label": clearLabel ?? t("dataEntry.searchSelect.clear"),
         "data-testid": dataTestId ? `${dataTestId}-clear` : void 0,
-        className: "flex size-6 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+        className: "ui-control-affix-action",
         onClick: () => onValueChange?.("", void 0),
-        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
       }
     ) }) : null
   ] });

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

@@ -25,7 +25,13 @@ const Switch = React.forwardRef(
           checked: isChecked,
           onCheckedChange: handleCheckedChange,
           className: cn(
-            "peer ui-switch focus-visible:border-ring focus-visible:ring-ring/50 shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+            // `disabled:cursor-not-allowed disabled:opacity-50` DELETED, not moved (#319):
+            // `.ui-switch:disabled, .ui-switch[data-disabled]` in styles/control.css already
+            // declares both and reads --disabled-opacity. The utility was layered after
+            // components, so it silently outranked that token. Byte-identical: the token
+            // defaults to 0.5. (`shadow-xs` STAYS — .ui-switch declares --shadow-sm, so this
+            // utility is the switch's real resting elevation, not a duplicate.)
+            "peer ui-switch shadow-xs transition-all outline-none",
             className
           ),
           ...props,

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

@@ -4,10 +4,66 @@ export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
+    /**
+     * `ghost` strips the field's own border, background and focus ring, for a textarea embedded
+     * in a surface that already draws the box (a chat composer inside a Card). The surface then
+     * owns focus — give it `focus-within`. Default keeps the standalone control chrome.
+     */
+    variant?: "default" | "ghost";
+    /**
+     * Grow the control with its content instead of holding a fixed `rows` height (default false —
+     * the inert default, so every existing `<Textarea>` keeps the geometry it has today).
+     *
+     * The floor is `minRows` (or `rows`, when that is the only one given) and never undercuts the
+     * `--control-height` tier; past `maxRows` the control stops growing and scrolls internally.
+     * Sizing is done in CSS by a hidden replica of the text, so it follows a paste, a programmatic
+     * value change, a font swap and a container resize — not just typing — and it never writes
+     * `style.height` or reads `scrollHeight`. Works controlled and uncontrolled.
+     */
+    autoGrow?: boolean;
+    /**
+     * Floor in text rows while `autoGrow` (theme default `--textarea-autogrow-min-height-rows`, 1).
+     * Ignored when `autoGrow` is false.
+     */
+    minRows?: number;
+    /**
+     * Ceiling in text rows while `autoGrow` (theme default `--textarea-autogrow-max-height-rows`,
+     * 8); beyond it the control scrolls internally rather than pushing the page. Pass `0` for no
+     * ceiling — only correct inside an owning scroll container. Ignored when `autoGrow` is false.
+     */
+    maxRows?: number;
 };
 export declare const Textarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     /** Show an inline ✕ (top-end) that clears the field while it holds text (default false). */
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
+    /**
+     * `ghost` strips the field's own border, background and focus ring, for a textarea embedded
+     * in a surface that already draws the box (a chat composer inside a Card). The surface then
+     * owns focus — give it `focus-within`. Default keeps the standalone control chrome.
+     */
+    variant?: "default" | "ghost";
+    /**
+     * Grow the control with its content instead of holding a fixed `rows` height (default false —
+     * the inert default, so every existing `<Textarea>` keeps the geometry it has today).
+     *
+     * The floor is `minRows` (or `rows`, when that is the only one given) and never undercuts the
+     * `--control-height` tier; past `maxRows` the control stops growing and scrolls internally.
+     * Sizing is done in CSS by a hidden replica of the text, so it follows a paste, a programmatic
+     * value change, a font swap and a container resize — not just typing — and it never writes
+     * `style.height` or reads `scrollHeight`. Works controlled and uncontrolled.
+     */
+    autoGrow?: boolean;
+    /**
+     * Floor in text rows while `autoGrow` (theme default `--textarea-autogrow-min-height-rows`, 1).
+     * Ignored when `autoGrow` is false.
+     */
+    minRows?: number;
+    /**
+     * Ceiling in text rows while `autoGrow` (theme default `--textarea-autogrow-max-height-rows`,
+     * 8); beyond it the control scrolls internally rather than pushing the page. Pass `0` for no
+     * ceiling — only correct inside an owning scroll container. Ignored when `autoGrow` is false.
+     */
+    maxRows?: number;
 } & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -4,10 +4,28 @@ import * as React from "react";
 import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-import { controlMultilineClass } from "../../lib/control-styles.js";
+import { controlMultilineClass, controlMultilineGhostClass } from "../../lib/control-styles.js";
+const UNBOUNDED_ROWS = "infinity";
 const Textarea = React.forwardRef(
-  ({ className, allowClear = false, onClear, value, defaultValue, onChange, ...props }, ref) => {
+  ({
+    className,
+    allowClear = false,
+    onClear,
+    variant = "default",
+    autoGrow = false,
+    minRows,
+    maxRows,
+    rows,
+    style,
+    value,
+    defaultValue,
+    onChange,
+    onCompositionStart,
+    onCompositionEnd,
+    ...props
+  }, ref) => {
     const { t } = useTranslation();
+    const base = variant === "ghost" ? controlMultilineGhostClass : controlMultilineClass;
     const innerRef = React.useRef(null);
     const setRefs = React.useCallback(
       (node) => {
@@ -23,10 +41,39 @@ const Textarea = React.forwardRef(
     React.useEffect(() => {
       if (value !== void 0) setHasText(String(value).length > 0);
     }, [value]);
+    const [mirror, setMirror] = React.useState(() => String(value ?? defaultValue ?? ""));
+    const composing = React.useRef(false);
+    const syncMirror = React.useCallback(() => {
+      const el = innerRef.current;
+      if (!el || composing.current) return;
+      setMirror(el.value);
+    }, []);
+    React.useLayoutEffect(() => {
+      if (autoGrow) syncMirror();
+    });
+    React.useEffect(() => {
+      const form = innerRef.current?.form;
+      if (!autoGrow || !form) return;
+      const onReset = () => {
+        queueMicrotask(syncMirror);
+      };
+      form.addEventListener("reset", onReset);
+      return () => form.removeEventListener("reset", onReset);
+    }, [autoGrow, syncMirror]);
     const handleChange = (event) => {
       if (value === void 0) setHasText(event.target.value.length > 0);
+      if (autoGrow && !composing.current) setMirror(event.target.value);
       onChange?.(event);
     };
+    const handleCompositionStart = (event) => {
+      composing.current = true;
+      onCompositionStart?.(event);
+    };
+    const handleCompositionEnd = (event) => {
+      composing.current = false;
+      if (autoGrow) setMirror(event.currentTarget.value);
+      onCompositionEnd?.(event);
+    };
     const clear = () => {
       const el = innerRef.current;
       if (el) {
@@ -39,46 +86,62 @@ const Textarea = React.forwardRef(
         el.focus();
       }
       setHasText(false);
+      if (autoGrow) setMirror("");
       onClear?.();
     };
-    if (!allowClear) {
-      return /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ref: setRefs,
-          value,
-          defaultValue,
-          onChange,
-          className: cn(controlMultilineClass, className),
-          ...props
-        }
-      );
-    }
-    const showClear = hasText && !props.disabled && !props.readOnly;
-    return /* @__PURE__ */ jsxs("span", { "data-slot": "textarea-affix-wrapper", className: "relative block w-full", children: [
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ref: setRefs,
-          value,
-          defaultValue,
-          onChange: handleChange,
-          className: cn(controlMultilineClass, showClear && "pe-9", className),
-          ...props
-        }
-      ),
-      showClear ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          tabIndex: -1,
-          "aria-label": t("common.clear") ?? "Clear",
-          onClick: clear,
-          className: "text-muted-foreground hover:text-foreground absolute end-2 top-2 inline-flex size-5 items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:opacity-100",
-          children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
-        }
-      ) : null
-    ] });
+    const floorRows = minRows ?? (typeof rows === "number" ? rows : void 0);
+    const autoGrowVars = autoGrow ? {
+      ...floorRows === void 0 ? null : { "--textarea-autogrow-min-height-rows": floorRows },
+      ...maxRows === void 0 ? null : {
+        "--textarea-autogrow-max-height-rows": maxRows === 0 ? UNBOUNDED_ROWS : maxRows
+      }
+    } : void 0;
+    const showClear = allowClear && hasText && !props.disabled && !props.readOnly;
+    const needsWrapper = allowClear || autoGrow;
+    const field = /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: setRefs,
+        value,
+        defaultValue,
+        rows: autoGrow ? 1 : rows,
+        onChange: needsWrapper ? handleChange : onChange,
+        onCompositionStart: handleCompositionStart,
+        onCompositionEnd: handleCompositionEnd,
+        style,
+        className: cn(base, showClear && "ui-input--trailing-affix", className),
+        ...props
+      }
+    );
+    if (!needsWrapper) return field;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-slot": "textarea-affix-wrapper",
+        "data-autogrow-value": autoGrow ? mirror : void 0,
+        style: autoGrowVars,
+        className: cn(
+          "relative w-full",
+          autoGrow ? "grid" : "block",
+          autoGrow && "ui-textarea-autogrow",
+          autoGrow && variant === "ghost" && "ui-textarea-autogrow--ghost"
+        ),
+        children: [
+          field,
+          showClear ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": t("common.clear") ?? "Clear",
+              onClick: clear,
+              className: "ui-control-inline-affix-action ui-textarea-clear",
+              children: /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+            }
+          ) : null
+        ]
+      }
+    );
   }
 );
 Textarea.displayName = "Textarea";

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" })
             }
           )
         ] }),