@godxjp/ui 16.0.0 → 16.1.0

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

@@ -242,8 +242,8 @@ function Cascader({
           className: cn(
             "w-full justify-start font-normal",
             controlOpenRingClass,
-            // Reserve trailing room for the clear + chevron overlay rendered below.
-            showClear ? "pe-14" : "pe-9",
+            // Reserve trailing room for the single clear-or-chevron overlay rendered below.
+            "pe-9",
             !displayLabel && "text-muted-foreground"
           ),
           children: /* @__PURE__ */ jsx("span", { className: "truncate", children: displayLabel ?? resolvedPlaceholder })
@@ -307,19 +307,16 @@ function Cascader({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-y-0 end-3 flex items-center gap-1", children: [
-      showClear && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": t("dataEntry.cascader.clear"),
-          className: "pointer-events-auto flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
-          onClick: clearValue,
-          children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
-        }
-      ),
-      /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50", "aria-hidden": "true" })
-    ] })
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 end-3 flex items-center", children: showClear ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": t("dataEntry.cascader.clear"),
+        className: "pointer-events-auto flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+        onClick: clearValue,
+        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+      }
+    ) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50", "aria-hidden": "true" }) })
   ] });
 }
 export {

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

@@ -1,11 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { CalendarIcon, X } from "lucide-react";
+import { CalendarIcon } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
 import { parseDateInput, toIsoDate } from "../../lib/datetime/parse";
 import { useControlledLatch } from "../../lib/hooks";
 import { cn } from "../../lib/utils";
-import { Button } from "../general/button";
 import { Input } from "./input";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover";
 import { Calendar } from "./calendar";
@@ -39,7 +38,6 @@ function DatePicker({
     setText(toIsoDate(value));
   }, [value]);
   const resolvedPlaceholder = placeholder ?? t("dataEntry.datePicker.placeholder") ?? ISO_HINT;
-  const showClear = allowClear && Boolean(value) && !disabled;
   const clear = () => {
     emit(void 0);
     setText("");
@@ -70,7 +68,19 @@ function DatePicker({
         role: "combobox",
         "aria-expanded": open,
         "aria-haspopup": "dialog",
-        className: cn("pe-10", showClear && "pe-16"),
+        allowClear,
+        onClear: clear,
+        trailingIcon: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            tabIndex: -1,
+            "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Open calendar",
+            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(CalendarIcon, { className: "size-4", "aria-hidden": "true" })
+          }
+        ) }),
         onClick: () => {
           if (!disabled) setOpen(true);
         },
@@ -92,33 +102,6 @@ function DatePicker({
         }
       }
     ),
-    showClear ? /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        variant: "ghost",
-        size: "icon",
-        disabled,
-        tabIndex: -1,
-        "aria-label": t("common.clear") ?? "Clear",
-        className: "text-muted-foreground absolute inset-y-0 end-8 h-full px-2 hover:bg-transparent",
-        onClick: clear,
-        children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
-      }
-    ) : null,
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        variant: "ghost",
-        size: "icon",
-        disabled,
-        tabIndex: -1,
-        "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Open calendar",
-        className: "text-muted-foreground absolute inset-y-0 end-0 h-full px-2 hover:bg-transparent",
-        children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0", "aria-hidden": "true" })
-      }
-    ) }),
     /* @__PURE__ */ jsx(
       PopoverContent,
       {

package/dist/components/data-entry/date-range-picker.js

@@ -142,8 +142,7 @@ function DateRangePicker({
             },
             children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
           }
-        ) : null,
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",

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

@@ -4,10 +4,22 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
+    /**
+     * A trailing affordance pinned inside the field — e.g. a calendar / clock popover
+     * trigger button. ONE trailing icon shows at a time: when `allowClear` and the field
+     * holds a value the clear ✕ REPLACES this icon; otherwise this icon shows. Never both.
+     */
+    trailingIcon?: React.ReactNode;
 };
 export declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
     /** Show an inline ✕ that clears the field while it holds text (default false). */
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
+    /**
+     * A trailing affordance pinned inside the field — e.g. a calendar / clock popover
+     * trigger button. ONE trailing icon shows at a time: when `allowClear` and the field
+     * holds a value the clear ✕ REPLACES this icon; otherwise this icon shows. Never both.
+     */
+    trailingIcon?: React.ReactNode;
 } & React.RefAttributes<HTMLInputElement>>;

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

@@ -13,7 +13,17 @@ const inputBaseClass = [
   "aria-invalid:border-destructive aria-invalid:ring-destructive/20"
 ];
 const Input = React.forwardRef(
-  ({ className, type, allowClear = false, onClear, value, defaultValue, onChange, ...props }, ref) => {
+  ({
+    className,
+    type,
+    allowClear = false,
+    onClear,
+    trailingIcon,
+    value,
+    defaultValue,
+    onChange,
+    ...props
+  }, ref) => {
     const { t } = useTranslation();
     const innerRef = React.useRef(null);
     const setRefs = React.useCallback(
@@ -48,7 +58,7 @@ const Input = React.forwardRef(
       setHasText(false);
       onClear?.();
     };
-    if (!allowClear) {
+    if (!allowClear && trailingIcon == null) {
       return /* @__PURE__ */ jsx(
         "input",
         {
@@ -63,7 +73,18 @@ const Input = React.forwardRef(
         }
       );
     }
-    const showClear = hasText && !props.disabled && !props.readOnly;
+    const showClear = allowClear && hasText && !props.disabled && !props.readOnly;
+    const trailing = showClear ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": t("common.clear") ?? "Clear",
+        onClick: clear,
+        className: "text-muted-foreground hover:text-foreground 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" })
+      }
+    ) : trailingIcon;
     return /* @__PURE__ */ jsxs("span", { "data-slot": "input-affix-wrapper", className: "relative inline-flex w-full items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -74,21 +95,11 @@ const Input = React.forwardRef(
           value,
           defaultValue,
           onChange: handleChange,
-          className: cn(inputBaseClass, showClear && "pe-9", className),
+          className: cn(inputBaseClass, (showClear || trailingIcon != null) && "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 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
+      trailing != null ? /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 end-2 inline-flex items-center", children: trailing }) : null
     ] });
   }
 );

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

@@ -109,8 +109,7 @@ function MonthPicker({
             },
             children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
           }
-        ) : null,
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",

package/dist/components/data-entry/month-range-picker.js

@@ -164,8 +164,7 @@ function MonthRangePicker({
             },
             children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
           }
-        ) : null,
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",

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

@@ -172,8 +172,8 @@ function SearchSelect({
               className: cn(
                 "w-full justify-start font-normal",
                 controlOpenRingClass,
-                // Reserve trailing room for the clear + chevron overlay rendered below.
-                showClear ? "pe-14" : "pe-9"
+                // Reserve trailing room for the single clear-or-chevron overlay rendered below.
+                "pe-9"
               ),
               children: /* @__PURE__ */ jsx(
                 "span",
@@ -265,20 +265,17 @@ function SearchSelect({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-y-0 end-3 flex items-center gap-1", children: [
-      showClear ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": clearLabel ?? t("dataEntry.searchSelect.clear"),
-          "data-testid": optionTestId("clear"),
-          className: "pointer-events-auto flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
-          onClick: clear,
-          children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
-        }
-      ) : null,
-      /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50", "aria-hidden": "true" })
-    ] })
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 end-3 flex items-center", children: showClear ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": clearLabel ?? t("dataEntry.searchSelect.clear"),
+        "data-testid": optionTestId("clear"),
+        className: "pointer-events-auto flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+        onClick: clear,
+        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+      }
+    ) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50", "aria-hidden": "true" }) })
   ] });
 }
 export {

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

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Clock, X } from "lucide-react";
+import { Clock } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
 import { isValidHhmm, normalizeHhmm } from "../../lib/datetime";
 import { cn } from "../../lib/utils";
-import { Button } from "../general/button";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover";
 import { Input } from "./input";
 function pad2(n) {
@@ -228,76 +227,60 @@ function TimePicker({
     if (!isControlled) setInternal(next);
     onValueChange?.(next);
   };
-  const showClear = allowClear && Boolean(value) && !disabled;
   const clear = () => {
     setValue("");
     setText("");
   };
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          id,
-          name,
-          value: text,
-          disabled,
-          placeholder: resolvedPlaceholder,
-          inputMode: "numeric",
-          autoComplete: "off",
-          role: "combobox",
-          "aria-expanded": open,
-          "aria-haspopup": "dialog",
-          className: cn("tabular-nums", "pe-10"),
-          onClick: () => {
-            if (!disabled) setOpen(true);
-          },
-          onKeyDown: (event) => {
-            if (event.key === "ArrowDown") {
-              event.preventDefault();
-              setOpen(true);
-            } else if (event.key === "Escape" && open) {
-              setOpen(false);
-            }
-          },
-          onChange: (event) => {
-            setText(event.target.value);
-            const normalized = normalizeHhmm(event.target.value);
-            if (normalized) setValue(normalized);
-          },
-          onBlur: (event) => {
-            const normalized = normalizeHhmm(event.target.value);
-            setText(normalized ?? (isValidHhmm(value) ? value : ""));
+    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        name,
+        value: text,
+        disabled,
+        placeholder: resolvedPlaceholder,
+        inputMode: "numeric",
+        autoComplete: "off",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "dialog",
+        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" })
           }
+        ) }),
+        onClick: () => {
+          if (!disabled) setOpen(true);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setOpen(true);
+          } else if (event.key === "Escape" && open) {
+            setOpen(false);
+          }
+        },
+        onChange: (event) => {
+          setText(event.target.value);
+          const normalized = normalizeHhmm(event.target.value);
+          if (normalized) setValue(normalized);
+        },
+        onBlur: (event) => {
+          const normalized = normalizeHhmm(event.target.value);
+          setText(normalized ?? (isValidHhmm(value) ? value : ""));
         }
-      ),
-      showClear ? /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon",
-          disabled,
-          tabIndex: -1,
-          "aria-label": t("common.clear") ?? "Clear",
-          className: "text-muted-foreground absolute inset-y-0 end-0 h-full px-2 hover:bg-transparent",
-          onClick: clear,
-          children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
-        }
-      ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon",
-          disabled,
-          tabIndex: -1,
-          "aria-label": t("dataEntry.timePicker.openPicker") ?? "Open time picker",
-          className: "text-muted-foreground absolute inset-y-0 end-0 h-full px-2 hover:bg-transparent",
-          children: /* @__PURE__ */ jsx(Clock, { className: "size-4 shrink-0", "aria-hidden": "true" })
-        }
-      ) })
-    ] }) }),
+      }
+    ) }) }),
     /* @__PURE__ */ jsx(
       PopoverContent,
       {

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

@@ -185,19 +185,16 @@ function TreeSelectRoot({
         ),
         children: [
           /* @__PURE__ */ jsx("span", { className: "truncate", children: displayKeys.length ? displayLabel : resolvedPlaceholder }),
-          /* @__PURE__ */ jsxs("span", { className: "ms-2 flex shrink-0 items-center gap-1", children: [
-            allowClear && displayKeys.length > 0 && !disabled && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-label": t("dataEntry.treeSelect.clear"),
-                className: "flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
-                onClick: clearValue,
-                children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
-              }
-            ),
-            /* @__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(
+            "button",
+            {
+              type: "button",
+              "aria-label": t("dataEntry.treeSelect.clear"),
+              className: "flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+              onClick: clearValue,
+              children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+            }
+          ) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 opacity-50", "aria-hidden": "true" }) })
         ]
       }
     ) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,