@godxjp/ui 13.5.1 → 13.6.0

package/dist/app/index.js

@@ -1,7 +1,7 @@
-import { useAppContext } from '../chunk-6EBULOWM.js';
-export { APP_LOCALES, APP_REQUEST_HEADER_LOCALE, APP_REQUEST_HEADER_TIMEZONE, APP_TIMEZONE_PRESET, APP_TIME_FORMAT_OPTIONS, AppProvider, DEFAULT_STORAGE_KEY, TIMEZONE_ALIASES, formatTimezoneDisplayLabel, getAllIanaTimezones, getAppRequestHeaders, getBrowserTimezone, getTimeFormatLabel, getTimezoneCityName, getTimezoneLabel, getTimezoneOffsetLabel, isValidIanaTimezone, readStoredPreferences, resetAppRequestHeaders, resetIanaTimezoneCacheForTests, resolveDefaultTimeFormat, resolveDefaultTimezone, resolveTimezoneForIntl, resolveTimezonePickerOptions, syncAppRequestHeaders, useAppContext, useAppDateFormat, useAppLocale, useAppTimeFormat, useAppTimezone, useOptionalAppContext, usePickerLocales, useTranslation, writeStoredPreferences } from '../chunk-6EBULOWM.js';
-import { formatDate } from '../chunk-ITOHGSPS.js';
-export { APP_DATE_FORMATS, APP_DATE_FORMAT_OPTIONS, APP_LOCALE_CONFIG, APP_REQUEST_HEADER_DATE_FORMAT, APP_REQUEST_HEADER_TIME_FORMAT, APP_TIME_FORMATS, detectFormatDateKind, formatAppDate, formatAppDateLong, formatAppDateTime, formatAppRelative, formatAppTime, formatCalendarDate, formatDate, formatTimeOfDay, getDateFnsLocale, getDateFormatLabel, getDatePattern, getDateTimePattern, getDatetimeContext, getDayPickerLocale, getTimePattern, isAppDateFormat, isAppLocale, isAppTimeFormat, isFormatDateValue, isValidHhmm, normalizeHhmm, parseDateInput, resolveDefaultDateFormat, syncDatetimeContext } from '../chunk-ITOHGSPS.js';
+import { useAppContext } from '../chunk-QTEPKNQE.js';
+export { APP_LOCALES, APP_REQUEST_HEADER_LOCALE, APP_REQUEST_HEADER_TIMEZONE, APP_TIMEZONE_PRESET, APP_TIME_FORMAT_OPTIONS, AppProvider, DEFAULT_STORAGE_KEY, TIMEZONE_ALIASES, formatTimezoneDisplayLabel, getAllIanaTimezones, getAppRequestHeaders, getBrowserTimezone, getTimeFormatLabel, getTimezoneCityName, getTimezoneLabel, getTimezoneOffsetLabel, isValidIanaTimezone, readStoredPreferences, resetAppRequestHeaders, resetIanaTimezoneCacheForTests, resolveDefaultTimeFormat, resolveDefaultTimezone, resolveTimezoneForIntl, resolveTimezonePickerOptions, syncAppRequestHeaders, useAppContext, useAppDateFormat, useAppLocale, useAppTimeFormat, useAppTimezone, useOptionalAppContext, usePickerLocales, useTranslation, writeStoredPreferences } from '../chunk-QTEPKNQE.js';
+import { formatDate } from '../chunk-C7W5BO7R.js';
+export { APP_DATE_FORMATS, APP_DATE_FORMAT_OPTIONS, APP_LOCALE_CONFIG, APP_REQUEST_HEADER_DATE_FORMAT, APP_REQUEST_HEADER_TIME_FORMAT, APP_TIME_FORMATS, detectFormatDateKind, formatAppDate, formatAppDateLong, formatAppDateTime, formatAppRelative, formatAppTime, formatCalendarDate, formatDate, formatTimeOfDay, getDateFnsLocale, getDateFormatLabel, getDatePattern, getDateTimePattern, getDatetimeContext, getDayPickerLocale, getTimePattern, isAppDateFormat, isAppLocale, isAppTimeFormat, isFormatDateValue, isValidHhmm, normalizeHhmm, parseDateInput, resolveDefaultDateFormat, syncDatetimeContext } from '../chunk-C7W5BO7R.js';
 import { useMemo } from 'react';
 
 function useFormatting() {

package/dist/{checkbox-iicX1PfF.d.ts → checkbox-DAIwpMHO.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as CheckboxGroupProp } from './data-entry.prop-D92hPBuo.js';
+import { b as CheckboxGroupProp } from './data-entry.prop-vn5VGnwY.js';
 
 declare function CheckboxGroup({ value: controlledValue, defaultValue, onValueChange, options, orientation, disabled, name, className, children, }: CheckboxGroupProp): react_jsx_runtime.JSX.Element;
 

package/dist/{chunk-HOQSAUHZ.js → chunk-2FJ5TMQU.js}

@@ -1,4 +1,4 @@
-import { getSyncedLocale, translateCurrent } from './chunk-ITOHGSPS.js';
+import { getSyncedLocale, translateCurrent } from './chunk-C7W5BO7R.js';
 
 // src/lib/format.ts
 function formatBytes(n, locale = getSyncedLocale()) {

package/dist/{chunk-LCKET5WL.js → chunk-2JW2QLUU.js}

@@ -1,6 +1,6 @@
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-CLEBTIY3.js';
-import { Button } from './chunk-CA247VOA.js';
-import { useTranslation } from './chunk-6EBULOWM.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-PKSHDFKP.js';
+import { Button } from './chunk-XZH3URGD.js';
+import { useTranslation } from './chunk-QTEPKNQE.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { MoreHorizontal, ChevronLeft, ChevronRight } from 'lucide-react';

package/dist/{chunk-LIOHE3RU.js → chunk-3JQDPNTA.js}

@@ -1,4 +1,4 @@
-import { normalizeHhmm, isValidHhmm } from './chunk-ITOHGSPS.js';
+import { normalizeHhmm, isValidHhmm } from './chunk-C7W5BO7R.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-BIC6D4EL.js → chunk-5XFFEW2P.js}

@@ -1,11 +1,11 @@
 import { normalizeTreeOptions, collectAllExpandableKeys, filterVisibleTree, flattenVisibleTree, findNodeByValue, reactNodeText, getDescendantValues } from './chunk-SMLKNECP.js';
 import { Command, CommandInput } from './chunk-3R3QVJCB.js';
 import { Checkbox } from './chunk-BE6GJGKJ.js';
-import { Button } from './chunk-CA247VOA.js';
+import { Button } from './chunk-XZH3URGD.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
 import { ScrollArea } from './chunk-3KPEZ5CF.js';
 import { controlOpenRingClass } from './chunk-B4K4BXEF.js';
-import { useTranslation } from './chunk-6EBULOWM.js';
+import { useTranslation } from './chunk-QTEPKNQE.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { X, ChevronsUpDown, ChevronDown, ChevronRight } from 'lucide-react';

package/dist/chunk-6AIYMYSG.js

@@ -0,0 +1,98 @@
+import { useTranslation } from './chunk-QTEPKNQE.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var inputBaseClass = [
+  "ui-control border-input bg-background w-full min-w-0 rounded-md border px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
+  "selection:bg-primary selection:text-primary-foreground",
+  "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
+  "placeholder:text-muted-foreground",
+  "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+  "aria-invalid:border-destructive aria-invalid:ring-destructive/20"
+];
+var Input = React.forwardRef(
+  ({ className, type, allowClear = false, onClear, value, defaultValue, onChange, ...props }, ref) => {
+    const { t } = useTranslation();
+    const innerRef = React.useRef(null);
+    const setRefs = React.useCallback(
+      (node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const [hasText, setHasText] = React.useState(
+      () => String(value ?? defaultValue ?? "").length > 0
+    );
+    React.useEffect(() => {
+      if (value !== void 0) setHasText(String(value).length > 0);
+    }, [value]);
+    const handleChange = (event) => {
+      if (value === void 0) setHasText(event.target.value.length > 0);
+      onChange?.(event);
+    };
+    const clear = () => {
+      const el = innerRef.current;
+      if (el) {
+        const setter = Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype,
+          "value"
+        )?.set;
+        setter?.call(el, "");
+        el.dispatchEvent(new Event("input", { bubbles: true }));
+        el.focus();
+      }
+      setHasText(false);
+      onClear?.();
+    };
+    if (!allowClear) {
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type,
+          "data-slot": "input",
+          ref: setRefs,
+          value,
+          defaultValue,
+          onChange,
+          className: cn(inputBaseClass, className),
+          ...props
+        }
+      );
+    }
+    const showClear = hasText && !props.disabled && !props.readOnly;
+    return /* @__PURE__ */ jsxs("span", { "data-slot": "input-affix-wrapper", className: "relative inline-flex w-full items-center", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type,
+          "data-slot": "input",
+          ref: setRefs,
+          value,
+          defaultValue,
+          onChange: handleChange,
+          className: cn(inputBaseClass, 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 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
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

package/dist/{chunk-IHNZCBES.js → chunk-6MZMMMHV.js}

@@ -1,12 +1,12 @@
-import { Calendar } from './chunk-2XH6QAOC.js';
-import { Input } from './chunk-BNXPDUO4.js';
-import { Button } from './chunk-CA247VOA.js';
+import { Calendar } from './chunk-HS73G2C3.js';
+import { Input } from './chunk-6AIYMYSG.js';
+import { Button } from './chunk-XZH3URGD.js';
 import { Popover, PopoverAnchor, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
-import { useTranslation, usePickerLocales } from './chunk-6EBULOWM.js';
-import { toIsoDate, parseDateInput } from './chunk-ITOHGSPS.js';
+import { useTranslation, usePickerLocales } from './chunk-QTEPKNQE.js';
+import { toIsoDate, parseDateInput } from './chunk-C7W5BO7R.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
-import { CalendarIcon } from 'lucide-react';
+import { X, CalendarIcon } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var ISO_HINT = "yyyy-mm-dd";
@@ -21,7 +21,8 @@ function DatePicker({
   name,
   locale: localeProp,
   fromDate,
-  toDate
+  toDate,
+  allowClear = true
 }) {
   const { t } = useTranslation();
   const { dayPickerLocale } = usePickerLocales(localeProp);
@@ -38,6 +39,11 @@ 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("");
+  };
   const commit = (raw) => {
     const trimmed = raw.trim();
     if (trimmed === "") {
@@ -64,7 +70,7 @@ function DatePicker({
         role: "combobox",
         "aria-expanded": open,
         "aria-haspopup": "dialog",
-        className: "pe-10",
+        className: cn("pe-10", showClear && "pe-16"),
         onClick: () => {
           if (!disabled) setOpen(true);
         },
@@ -86,6 +92,20 @@ 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,
       {

package/dist/{chunk-RR2SSSQS.js → chunk-6VUW6EKH.js}

@@ -1,10 +1,10 @@
 import { normalizeTreeOptions, formatPathLabels, getNodeByPath, filterTreeOptions, pathsEqual, pathKey } from './chunk-SMLKNECP.js';
 import { Command, CommandInput } from './chunk-3R3QVJCB.js';
-import { Button } from './chunk-CA247VOA.js';
+import { Button } from './chunk-XZH3URGD.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
 import { ScrollArea, ScrollBar } from './chunk-3KPEZ5CF.js';
 import { controlOpenRingClass } from './chunk-B4K4BXEF.js';
-import { useTranslation } from './chunk-6EBULOWM.js';
+import { useTranslation } from './chunk-QTEPKNQE.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { Check, X, ChevronsUpDown, ChevronRight, Minus } from 'lucide-react';

package/dist/{chunk-DKW3XS2A.js → chunk-B7R7DHZF.js}

@@ -1,4 +1,4 @@
-import { useTranslation } from './chunk-6EBULOWM.js';
+import { useTranslation } from './chunk-QTEPKNQE.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import useEmblaCarousel from 'embla-carousel-react';

package/dist/{chunk-ITOHGSPS.js → chunk-C7W5BO7R.js}

@@ -62,6 +62,7 @@ var en_default = {
     search: "Search",
     clearSearch: "Clear search",
     clearFilters: "Clear filters",
+    clear: "Clear",
     first: "First",
     previous: "Previous",
     next: "Next",
@@ -333,6 +334,7 @@ var ja_default = {
     search: "\u691C\u7D22",
     clearSearch: "\u691C\u7D22\u3092\u30AF\u30EA\u30A2",
     clearFilters: "\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u30AF\u30EA\u30A2",
+    clear: "\u30AF\u30EA\u30A2",
     first: "\u6700\u521D",
     previous: "\u524D\u3078",
     next: "\u6B21\u3078",
@@ -604,6 +606,7 @@ var vi_default = {
     search: "T\xECm ki\u1EBFm",
     clearSearch: "X\xF3a t\xECm ki\u1EBFm",
     clearFilters: "X\xF3a b\u1ED9 l\u1ECDc",
+    clear: "X\xF3a",
     first: "\u0110\u1EA7u",
     previous: "Tr\u01B0\u1EDBc",
     next: "Ti\u1EBFp",

package/dist/{chunk-QVLCFPKF.js → chunk-DVV6UYVS.js}

@@ -1,9 +1,9 @@
-import { SearchInput } from './chunk-E2CTBKYL.js';
+import { SearchInput } from './chunk-RBXVCWXL.js';
 import { reactNodeText } from './chunk-SMLKNECP.js';
 import { Checkbox } from './chunk-BE6GJGKJ.js';
-import { Button } from './chunk-CA247VOA.js';
+import { Button } from './chunk-XZH3URGD.js';
 import { ScrollArea } from './chunk-3KPEZ5CF.js';
-import { useTranslation } from './chunk-6EBULOWM.js';
+import { useTranslation } from './chunk-QTEPKNQE.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { ChevronRight, ChevronLeft } from 'lucide-react';

package/dist/{chunk-IYSGELQC.js → chunk-GFDKJY63.js}

@@ -1,6 +1,6 @@
-import { Input } from './chunk-BNXPDUO4.js';
-import { Button } from './chunk-CA247VOA.js';
-import { useTranslation } from './chunk-6EBULOWM.js';
+import { Input } from './chunk-6AIYMYSG.js';
+import { Button } from './chunk-XZH3URGD.js';
+import { useTranslation } from './chunk-QTEPKNQE.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { ChevronUp, ChevronDown, EyeOff, Eye, Minus, Star, X } from 'lucide-react';

package/dist/{chunk-2XH6QAOC.js → chunk-HS73G2C3.js}

@@ -1,4 +1,4 @@
-import { buttonVariants } from './chunk-CA247VOA.js';
+import { buttonVariants } from './chunk-XZH3URGD.js';
 import { controlIconSmClass } from './chunk-B4K4BXEF.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import { ChevronLeft, ChevronRight } from 'lucide-react';

package/dist/{chunk-4GHHVXUR.js → chunk-I472SSN2.js}

@@ -1,9 +1,9 @@
-import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-32WO3YLB.js';
 import { DropdownMenu, DropdownMenuTrigger } from './chunk-LMKUKCTN.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-32WO3YLB.js';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './chunk-DV52WNXO.js';
 import { densityClass, pageContainerVariantClass } from './chunk-INIIF7F7.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
-import { useTranslation } from './chunk-6EBULOWM.js';
+import { useTranslation } from './chunk-QTEPKNQE.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import { ChevronRight, ChevronDown, PanelLeftOpen, PanelLeftClose, Search, Bell, SlidersHorizontal } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-XBFXYKJS.js → chunk-J254ZX3A.js}

@@ -1,9 +1,9 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-WW47N4ID.js';
-import { formatBytes } from './chunk-HOQSAUHZ.js';
+import { formatBytes } from './chunk-2FJ5TMQU.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-UDMFKYZG.js';
 import { Slider } from './chunk-TBJBVEIP.js';
-import { Button } from './chunk-CA247VOA.js';
+import { Button } from './chunk-XZH3URGD.js';
 import { controlIconClass } from './chunk-B4K4BXEF.js';
-import { useTranslation } from './chunk-6EBULOWM.js';
+import { useTranslation } from './chunk-QTEPKNQE.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React2 from 'react';
 import { Upload as Upload$1, ImagePlus, Camera, Trash2, RotateCcw, X } from 'lucide-react';

package/dist/{chunk-JCDLEXBB.js → chunk-KNI7QI4J.js}

@@ -1,10 +1,10 @@
 import { EmptyState } from './chunk-YD7V2HGZ.js';
 import { Flex, densityClass } from './chunk-INIIF7F7.js';
 import { Checkbox } from './chunk-BE6GJGKJ.js';
-import { Button } from './chunk-CA247VOA.js';
+import { Button } from './chunk-XZH3URGD.js';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-IJ5ALJGA.js';
 import { tableCellPaddingClass, tableRowHeightClass, controlIconSmClass } from './chunk-B4K4BXEF.js';
-import { useTranslation } from './chunk-6EBULOWM.js';
+import { useTranslation } from './chunk-QTEPKNQE.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';

package/dist/{chunk-3JIPRB2T.js → chunk-LFO5BJ4H.js}

@@ -1,6 +1,6 @@
-import { Input } from './chunk-BNXPDUO4.js';
+import { Input } from './chunk-6AIYMYSG.js';
 import { controlIconClass } from './chunk-B4K4BXEF.js';
-import { useTranslation } from './chunk-6EBULOWM.js';
+import { useTranslation } from './chunk-QTEPKNQE.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-46UVXYPU.js → chunk-LTKHPOE3.js}

@@ -1,5 +1,5 @@
 import { controlIconClass } from './chunk-B4K4BXEF.js';
-import { useTranslation } from './chunk-6EBULOWM.js';
+import { useTranslation } from './chunk-QTEPKNQE.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import { Check, Loader2, X, Circle } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-PXOPMYPJ.js → chunk-OIAT773P.js}

@@ -1,12 +1,12 @@
-import { Calendar } from './chunk-2XH6QAOC.js';
-import { Input } from './chunk-BNXPDUO4.js';
-import { Button } from './chunk-CA247VOA.js';
+import { Calendar } from './chunk-HS73G2C3.js';
+import { Input } from './chunk-6AIYMYSG.js';
+import { Button } from './chunk-XZH3URGD.js';
 import { Popover, PopoverAnchor, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
-import { useTranslation, usePickerLocales } from './chunk-6EBULOWM.js';
-import { toIsoDate, parseDateInput } from './chunk-ITOHGSPS.js';
+import { useTranslation, usePickerLocales } from './chunk-QTEPKNQE.js';
+import { toIsoDate, parseDateInput } from './chunk-C7W5BO7R.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
-import { CalendarIcon } from 'lucide-react';
+import { X, CalendarIcon } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var ISO_HINT = "yyyy-mm-dd";
@@ -21,7 +21,8 @@ function DateRangePicker({
   name,
   locale: localeProp,
   fromDate,
-  toDate
+  toDate,
+  allowClear = true
 }) {
   const { t } = useTranslation();
   const { dayPickerLocale } = usePickerLocales(localeProp);
@@ -40,6 +41,12 @@ function DateRangePicker({
     if (!isControlled) setInternalValue(next);
     onValueChange?.(next);
   };
+  const showClear = allowClear && Boolean(value?.from || value?.to) && !disabled;
+  const clear = () => {
+    emit(void 0);
+    setFromText("");
+    setToText("");
+  };
   const commitEdge = (edge, raw) => {
     const trimmed = raw.trim();
     if (trimmed !== "" && !/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) return;
@@ -114,6 +121,20 @@ function DateRangePicker({
         }
       }
     ),
+    showClear ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        disabled,
+        tabIndex: -1,
+        "aria-label": t("common.clear") ?? "Clear",
+        className: "text-muted-foreground shrink-0 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,
       {