@qijenchen/design-system 0.1.0-beta.95 → 0.1.0-beta.96

package/dist/components/DatePicker/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/date-picker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/date-picker.tsx"],"names":[],"mappings":"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"}

package/dist/components/DatePicker/date-picker.js

@@ -5,6 +5,9 @@ import { cn } from "../../lib/utils.js";
 import { nakedCellRowModeAlign, fieldWrapperStyles, bareInputStyles, fieldDisplayTextClass } from "../Field/field-wrapper.js";
 import { ICON_SIZE, ItemSuffix, ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../Popover/popover.js";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/tooltip.js";
+import { useTruncated } from "../../hooks/use-truncated.js";
+import { TruncatedText } from "../../patterns/element-anatomy/truncated-text.js";
 import { DateGrid } from "../DateGrid/date-grid.js";
 import { Button } from "../Button/button.js";
 import { SurfaceFooter } from "../../patterns/overlay-surface/overlay-surface.js";
@@ -230,10 +233,14 @@ const DatePicker = React.forwardRef(
         setDraft(iso);
       }
     }, [onChange, showTime]);
+    const { ref: triggerTruncationRef, isTruncated: triggerTruncated } = useTruncated({
+      deps: [!typeable && displayValue ? displayLive : ""]
+    });
+    const triggerTooltipActive = !typeable && !!displayValue && triggerTruncated && !open;
     if (resolvedMode === "view") {
       if (!showDisplayEndIcon) {
         if (!value) return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(size), fieldEmptyColorClass(resolvedMode), className), children: emptyDisplay });
-        return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(size), "truncate", className), children: displayCommitted });
+        return /* @__PURE__ */ jsx(TruncatedText, { className: cn(fieldDisplayTextClass(size), className), children: displayCommitted });
       }
       return /* @__PURE__ */ jsxs(
         "div",
@@ -241,7 +248,7 @@ const DatePicker = React.forwardRef(
           className: cn(fieldWrapperStyles({ mode: "view", variant, width, size }), className),
           "data-field-mode": "view",
           children: [
-            /* @__PURE__ */ jsx("span", { className: cn(bareInputStyles, "flex-1 min-w-0 truncate", !value && fieldEmptyColorClass(resolvedMode)), children: value ? displayCommitted : emptyDisplay }),
+            /* @__PURE__ */ jsx(TruncatedText, { className: cn(bareInputStyles, "flex-1 min-w-0", !value && fieldEmptyColorClass(resolvedMode)), children: value ? displayCommitted : emptyDisplay }),
             /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(Calendar, { size: iconSize, className: "text-fg-muted", "aria-hidden": true }) })
           ]
         }
@@ -256,7 +263,7 @@ const DatePicker = React.forwardRef(
           "aria-disabled": resolvedMode === "disabled" ? true : void 0,
           ...props,
           children: [
-            /* @__PURE__ */ jsx("span", { className: cn("flex-1 min-w-0 truncate", resolvedMode === "disabled" && "text-fg-disabled"), children: value ? displayCommitted : /* @__PURE__ */ jsx("span", { className: fieldEmptyColorClass(resolvedMode), children: emptyDisplay }) }),
+            /* @__PURE__ */ jsx(TruncatedText, { className: cn("flex-1", resolvedMode === "disabled" && "text-fg-disabled"), children: value ? displayCommitted : /* @__PURE__ */ jsx("span", { className: fieldEmptyColorClass(resolvedMode), children: emptyDisplay }) }),
             (variant === "naked" ? showDisplayEndIcon : resolvedMode === "disabled") && /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(Calendar, { size: iconSize, className: resolvedMode === "disabled" ? "text-fg-disabled" : "text-fg-muted", "aria-hidden": true }) })
           ]
         }
@@ -276,121 +283,127 @@ const DatePicker = React.forwardRef(
       commitDraft(now);
     };
     return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref,
-          id: typeable ? void 0 : idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id),
-          role: typeable ? void 0 : "combobox",
-          tabIndex: typeable ? void 0 : disabled ? -1 : 0,
-          "aria-disabled": typeable ? void 0 : disabled || void 0,
-          "aria-label": typeable ? void 0 : accessibleName,
-          "aria-labelledby": typeable ? void 0 : ariaLabelledByProp ?? (fieldCtx == null ? void 0 : fieldCtx.labelId),
-          "aria-invalid": typeable ? void 0 : error || void 0,
-          "aria-required": typeable ? void 0 : (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
-          "aria-describedby": typeable ? void 0 : ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),
-          "aria-errormessage": typeable ? void 0 : ariaErrorMessageProp ?? (error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0),
-          "aria-haspopup": typeable ? void 0 : "dialog",
-          "aria-expanded": typeable ? void 0 : open,
-          "data-field-mode": "edit",
-          "data-error": error ? "" : void 0,
-          onKeyDown: typeable ? void 0 : (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              setOpen(true);
-            }
-            if (e.key === "Escape") setOpen(false);
-          },
-          className: cn(
-            fieldWrapperStyles({ mode: "edit", variant, width, size, error }),
-            "text-left cursor-pointer",
-            "focus-visible:outline-none",
-            className
-          ),
-          ...props,
-          children: [
-            typeable ? (
-              // Issue 10 typed input(2026-05-10):real `<input>` 接 user 鍵盤打字。
-              // Click 在 input 上不 propagate 給外層 popover trigger(避免每次打字都開 popover)。
-              // Calendar icon `<ItemSuffix>` 點才開 popover(Material/Ant typed-date idiom)。
-              // a11y(2026-07-14 dim-10 修):input 持完整 combobox 語意(id/name/state,APG
-              // editable-combobox)— 外層 div 已讓位(見上方 role/tabIndex 註解);ArrowDown
-              // 開 popover 補鍵盤開啟路徑(原僅 icon click 可開,鍵盤 user 無入口)。
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "text",
-                  id: idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id),
-                  role: "combobox",
-                  "aria-haspopup": "dialog",
-                  "aria-expanded": open,
-                  "aria-label": accessibleName,
-                  "aria-labelledby": ariaLabelledByProp ?? (fieldCtx == null ? void 0 : fieldCtx.labelId),
-                  "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
-                  "aria-describedby": ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),
-                  "aria-errormessage": ariaErrorMessageProp ?? (inputInvalid || error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0),
-                  disabled,
-                  className: cn(bareInputStyles, "truncate", !inputDraft && "placeholder:text-fg-muted"),
-                  value: inputDraft,
-                  placeholder: resolvedPlaceholder,
-                  "aria-invalid": inputInvalid || error || void 0,
-                  onChange: (e) => {
-                    setInputDraft(e.target.value);
-                    setInputInvalid(false);
-                  },
-                  onCompositionStart: () => {
-                    composingRef.current = true;
-                  },
-                  onCompositionEnd: () => {
-                    composingRef.current = false;
-                  },
-                  onKeyDown: (e) => {
-                    if (composingRef.current) return;
-                    if (e.key === "Enter") {
-                      e.preventDefault();
-                      handleInputCommit(inputDraft);
-                    }
-                    if (e.key === "Escape") {
-                      setInputDraft(displayLive);
+      /* @__PURE__ */ jsxs(Tooltip, { open: triggerTooltipActive ? void 0 : false, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref,
+            id: typeable ? void 0 : idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id),
+            role: typeable ? void 0 : "combobox",
+            tabIndex: typeable ? void 0 : disabled ? -1 : 0,
+            "aria-disabled": typeable ? void 0 : disabled || void 0,
+            "aria-label": typeable ? void 0 : accessibleName,
+            "aria-labelledby": typeable ? void 0 : ariaLabelledByProp ?? (fieldCtx == null ? void 0 : fieldCtx.labelId),
+            "aria-invalid": typeable ? void 0 : error || void 0,
+            "aria-required": typeable ? void 0 : (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
+            "aria-describedby": typeable ? void 0 : ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),
+            "aria-errormessage": typeable ? void 0 : ariaErrorMessageProp ?? (error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0),
+            "aria-haspopup": typeable ? void 0 : "dialog",
+            "aria-expanded": typeable ? void 0 : open,
+            "data-field-mode": "edit",
+            "data-error": error ? "" : void 0,
+            onKeyDown: typeable ? void 0 : (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+              }
+              if (e.key === "Escape") setOpen(false);
+            },
+            className: cn(
+              fieldWrapperStyles({ mode: "edit", variant, width, size, error }),
+              "text-left cursor-pointer",
+              "focus-visible:outline-none",
+              className
+            ),
+            ...props,
+            children: [
+              typeable ? (
+                // Issue 10 typed input(2026-05-10):real `<input>` 接 user 鍵盤打字。
+                // Click 在 input 上不 propagate 給外層 popover trigger(避免每次打字都開 popover)。
+                // Calendar icon `<ItemSuffix>` 點才開 popover(Material/Ant typed-date idiom)。
+                // a11y(2026-07-14 dim-10 修):input 持完整 combobox 語意(id/name/state,APG
+                // editable-combobox)— 外層 div 已讓位(見上方 role/tabIndex 註解);ArrowDown
+                // 開 popover 補鍵盤開啟路徑(原僅 icon click 可開,鍵盤 user 無入口)。
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    id: idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id),
+                    role: "combobox",
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": open,
+                    "aria-label": accessibleName,
+                    "aria-labelledby": ariaLabelledByProp ?? (fieldCtx == null ? void 0 : fieldCtx.labelId),
+                    "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
+                    "aria-describedby": ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),
+                    "aria-errormessage": ariaErrorMessageProp ?? (inputInvalid || error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0),
+                    disabled,
+                    className: cn(bareInputStyles, "truncate", !inputDraft && "placeholder:text-fg-muted"),
+                    value: inputDraft,
+                    placeholder: resolvedPlaceholder,
+                    "aria-invalid": inputInvalid || error || void 0,
+                    onChange: (e) => {
+                      setInputDraft(e.target.value);
                       setInputInvalid(false);
-                      e.preventDefault();
-                    }
-                    if (e.key === "ArrowDown" && !open) {
-                      e.preventDefault();
-                      setOpen(true);
+                    },
+                    onCompositionStart: () => {
+                      composingRef.current = true;
+                    },
+                    onCompositionEnd: () => {
+                      composingRef.current = false;
+                    },
+                    onKeyDown: (e) => {
+                      if (composingRef.current) return;
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        handleInputCommit(inputDraft);
+                      }
+                      if (e.key === "Escape") {
+                        setInputDraft(displayLive);
+                        setInputInvalid(false);
+                        e.preventDefault();
+                      }
+                      if (e.key === "ArrowDown" && !open) {
+                        e.preventDefault();
+                        setOpen(true);
+                      }
+                    },
+                    onBlur: () => {
+                      if (!composingRef.current) handleInputCommit(inputDraft);
+                    },
+                    onClick: (e) => e.stopPropagation()
+                  }
+                )
+              ) : (
+                // ref = 截斷量測點(值 span 是截斷元素;tooltip trigger 在外層 host div,見 triggerTruncationRef 註解)
+                /* @__PURE__ */ jsx("span", { ref: triggerTruncationRef, className: cn(bareInputStyles, "truncate", !displayValue && "text-fg-muted"), children: triggerText })
+              ),
+              showClear && /* @__PURE__ */ jsx(
+                ItemInlineAction,
+                {
+                  size: size ?? "md",
+                  action: {
+                    icon: X,
+                    label: "清除日期",
+                    // i18n-allow: DS default inline-action label
+                    // Clear = 立刻 commit + 同步 draft(對齊 user 體感 / Ant trigger X 慣例)
+                    // 不走 needConfirm「等確定」語義 — X 在 trigger 上是 standard clear affordance,
+                    // 應立刻清空。dual-state 必同步:value('') + draft(null),否則 popover 開
+                    // 著時 displayValue=draft 仍顯示舊值(see line 318: displayValue = needConfirm ? draft : value)。
+                    onClick: (e) => {
+                      e == null ? void 0 : e.stopPropagation();
+                      onChange == null ? void 0 : onChange("");
+                      setDraft(null);
                     }
-                  },
-                  onBlur: () => {
-                    if (!composingRef.current) handleInputCommit(inputDraft);
-                  },
-                  onClick: (e) => e.stopPropagation()
-                }
-              )
-            ) : /* @__PURE__ */ jsx("span", { className: cn(bareInputStyles, "truncate", !displayValue && "text-fg-muted"), children: triggerText }),
-            showClear && /* @__PURE__ */ jsx(
-              ItemInlineAction,
-              {
-                size: size ?? "md",
-                action: {
-                  icon: X,
-                  label: "清除日期",
-                  // i18n-allow: DS default inline-action label
-                  // Clear = 立刻 commit + 同步 draft(對齊 user 體感 / Ant trigger X 慣例)
-                  // 不走 needConfirm「等確定」語義 — X 在 trigger 上是 standard clear affordance,
-                  // 應立刻清空。dual-state 必同步:value('') + draft(null),否則 popover 開
-                  // 著時 displayValue=draft 仍顯示舊值(see line 318: displayValue = needConfirm ? draft : value)。
-                  onClick: (e) => {
-                    e == null ? void 0 : e.stopPropagation();
-                    onChange == null ? void 0 : onChange("");
-                    setDraft(null);
                   }
                 }
-              }
-            ),
-            /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(Calendar, { size: iconSize, className: "text-fg-muted", "aria-hidden": true }) })
-          ]
-        }
-      ) }),
+              ),
+              /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(Calendar, { size: iconSize, className: "text-fg-muted", "aria-hidden": true }) })
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: triggerTooltipActive ? displayLive : null })
+      ] }),
       /* @__PURE__ */ jsx(
         PopoverContent,
         {
@@ -508,6 +521,14 @@ const DatePickerRange = React.forwardRef(
     const showClear = clearable && hasValue && isEditable;
     const startText = startIso ? formatDateOrDateTime(startIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[0];
     const endText = endIso ? formatDateOrDateTime(endIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[1];
+    const { ref: startTruncationRef, isTruncated: startTruncated } = useTruncated({
+      deps: [startIso ? startText : ""]
+    });
+    const { ref: endTruncationRef, isTruncated: endTruncated } = useTruncated({
+      deps: [endIso ? endText : ""]
+    });
+    const startTooltipActive = !!startIso && startTruncated && !open;
+    const endTooltipActive = !!endIso && endTruncated && !open;
     const activeIso = activeEnd === "start" ? startIso : endIso;
     const activeDate = activeEnd === "start" ? startDate : endDate;
     const activeTime = isoToTimeParts(activeIso) ?? { hours: 0, minutes: 0, seconds: 0 };
@@ -572,9 +593,9 @@ const DatePickerRange = React.forwardRef(
       const hasAny = !!(startIso || endIso);
       if (!hasAny) return /* @__PURE__ */ jsx("span", { className: cn(fieldEmptyColorClass(resolvedMode), className), children: emptyDisplay });
       return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center min-w-0", nakedCellRowModeAlign, className), children: [
-        /* @__PURE__ */ jsx("span", { className: cn("truncate", !startIso && "text-fg-muted"), children: startIso ? formatDateOrDateTime(startIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[0] }),
+        /* @__PURE__ */ jsx(TruncatedText, { className: cn(!startIso && "text-fg-muted"), children: startIso ? formatDateOrDateTime(startIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[0] }),
         /* @__PURE__ */ jsx(ArrowRight, { size: iconSize, className: "shrink-0 text-fg-muted mx-2", "aria-hidden": true }),
-        /* @__PURE__ */ jsx("span", { className: cn("truncate", !endIso && "text-fg-muted"), children: endIso ? formatDateOrDateTime(endIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[1] })
+        /* @__PURE__ */ jsx(TruncatedText, { className: cn(!endIso && "text-fg-muted"), children: endIso ? formatDateOrDateTime(endIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[1] })
       ] });
     }
     if (!isEditable) {
@@ -587,9 +608,9 @@ const DatePickerRange = React.forwardRef(
           "aria-disabled": resolvedMode === "disabled" ? true : void 0,
           ...props,
           children: [
-            /* @__PURE__ */ jsx("span", { className: cn("flex-1 min-w-0 truncate", !startIso && "text-fg-muted", resolvedMode === "disabled" && "text-fg-disabled"), children: startIso ? formatDateOrDateTime(startIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[0] }),
+            /* @__PURE__ */ jsx(TruncatedText, { className: cn("flex-1", !startIso && "text-fg-muted", resolvedMode === "disabled" && "text-fg-disabled"), children: startIso ? formatDateOrDateTime(startIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[0] }),
             /* @__PURE__ */ jsx(ArrowRight, { size: iconSize, className: cn("shrink-0 mx-2", resolvedMode === "disabled" ? "text-fg-disabled" : "text-fg-muted"), "aria-hidden": true }),
-            /* @__PURE__ */ jsx("span", { className: cn("flex-1 min-w-0 truncate", !endIso && "text-fg-muted", resolvedMode === "disabled" && "text-fg-disabled"), children: endIso ? formatDateOrDateTime(endIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[1] }),
+            /* @__PURE__ */ jsx(TruncatedText, { className: cn("flex-1", !endIso && "text-fg-muted", resolvedMode === "disabled" && "text-fg-disabled"), children: endIso ? formatDateOrDateTime(endIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[1] }),
             resolvedMode === "disabled" && /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(Calendar, { size: iconSize, className: "text-fg-disabled", "aria-hidden": true }) })
           ]
         }
@@ -615,45 +636,51 @@ const DatePickerRange = React.forwardRef(
           ),
           ...props,
           children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                ref: startBtnRef,
-                onClick: () => openWithActive("start"),
-                "data-active-end": open && activeEnd === "start" ? "true" : void 0,
-                "aria-label": resolvedPlaceholder[0],
-                "aria-haspopup": "dialog",
-                "aria-expanded": open && activeEnd === "start",
-                className: cn(
-                  bareInputStyles,
-                  "truncate text-left cursor-pointer focus-visible:outline-none",
-                  "data-[active-end=true]:underline decoration-primary underline-offset-4 decoration-2",
-                  !startIso && "text-fg-muted"
-                ),
-                children: startText
-              }
-            ),
+            /* @__PURE__ */ jsxs(Tooltip, { open: startTooltipActive ? void 0 : false, children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  ref: startBtnRef,
+                  onClick: () => openWithActive("start"),
+                  "data-active-end": open && activeEnd === "start" ? "true" : void 0,
+                  "aria-label": resolvedPlaceholder[0],
+                  "aria-haspopup": "dialog",
+                  "aria-expanded": open && activeEnd === "start",
+                  className: cn(
+                    bareInputStyles,
+                    "truncate text-left cursor-pointer focus-visible:outline-none",
+                    "data-[active-end=true]:underline decoration-primary underline-offset-4 decoration-2",
+                    !startIso && "text-fg-muted"
+                  ),
+                  children: /* @__PURE__ */ jsx("span", { ref: startTruncationRef, className: "block truncate", children: startText })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: startTooltipActive ? startText : null })
+            ] }),
             /* @__PURE__ */ jsx(ArrowRight, { size: iconSize, className: "shrink-0 text-fg-muted mx-2", "aria-hidden": true }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                ref: endBtnRef,
-                onClick: () => openWithActive("end"),
-                "data-active-end": open && activeEnd === "end" ? "true" : void 0,
-                "aria-label": resolvedPlaceholder[1],
-                "aria-haspopup": "dialog",
-                "aria-expanded": open && activeEnd === "end",
-                className: cn(
-                  bareInputStyles,
-                  "truncate text-left cursor-pointer focus-visible:outline-none",
-                  "data-[active-end=true]:underline decoration-primary underline-offset-4 decoration-2",
-                  !endIso && "text-fg-muted"
-                ),
-                children: endText
-              }
-            ),
+            /* @__PURE__ */ jsxs(Tooltip, { open: endTooltipActive ? void 0 : false, children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  ref: endBtnRef,
+                  onClick: () => openWithActive("end"),
+                  "data-active-end": open && activeEnd === "end" ? "true" : void 0,
+                  "aria-label": resolvedPlaceholder[1],
+                  "aria-haspopup": "dialog",
+                  "aria-expanded": open && activeEnd === "end",
+                  className: cn(
+                    bareInputStyles,
+                    "truncate text-left cursor-pointer focus-visible:outline-none",
+                    "data-[active-end=true]:underline decoration-primary underline-offset-4 decoration-2",
+                    !endIso && "text-fg-muted"
+                  ),
+                  children: /* @__PURE__ */ jsx("span", { ref: endTruncationRef, className: "block truncate", children: endText })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: endTooltipActive ? endText : null })
+            ] }),
             showClear && /* @__PURE__ */ jsx(
               ItemInlineAction,
               {