@nexub/react 7.4.0 → 7.5.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.4.0",
+  "version": "7.5.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",

package/dist/components/Combobox/Combobox.d.ts

@@ -1,4 +1,9 @@
 import * as React from 'react';
+import { Command } from 'cmdk';
+export interface ComboboxListProps extends React.ComponentProps<typeof Command.List> {
+    /** Options are loading: shows a loading row, sets aria-busy and hides Empty. */
+    loading?: boolean;
+}
 export declare const Combobox: {
     Root: React.ForwardRefExoticComponent<Omit<{
         children?: React.ReactNode;
@@ -25,15 +30,7 @@ export declare const Combobox: {
         value?: string;
         onValueChange?: (search: string) => void;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-    List: React.ForwardRefExoticComponent<Omit<{
-        children?: React.ReactNode;
-    } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        ref?: React.Ref<HTMLDivElement>;
-    } & {
-        asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        label?: string;
-    } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<Omit<ComboboxListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Empty: React.ForwardRefExoticComponent<Omit<{
         children?: React.ReactNode;
     } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {

package/dist/components/Combobox/Combobox.js

@@ -1,8 +1,10 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Command } from "cmdk";
 import { cn } from "../../utils/cn.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { Spinner } from "../Spinner/Spinner.js";
 function scrollWithinList(el) {
   if (!el) return;
   el.scrollIntoView = () => {
@@ -47,14 +49,33 @@ const Input = React.forwardRef(
 );
 Input.displayName = "Combobox.Input";
 const List = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    Command.List,
-    {
-      ref,
-      className: cn("max-h-64 overflow-y-auto overflow-x-hidden p-1", className),
-      ...props
-    }
-  )
+  ({ className, loading, children, ...props }, ref) => {
+    const messages = useNexubMessages();
+    return /* @__PURE__ */ jsxs(
+      Command.List,
+      {
+        ref,
+        "aria-busy": loading || void 0,
+        className: cn(
+          // cmdk measures its content into --cmdk-list-height; box-content keeps the padding outside it.
+          "box-content h-[var(--cmdk-list-height)] max-h-64 overflow-y-auto overflow-x-hidden p-1",
+          "transition-[height] duration-spatial-default ease-spatial-default motion-reduce:transition-none",
+          loading && "[&_[cmdk-empty]]:hidden",
+          className
+        ),
+        ...props,
+        children: [
+          loading && // Not Command.Loading: its role="progressbar" isn't allowed inside a listbox
+          // (axe aria-required-children). The listbox's aria-busy carries the state.
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2.5 py-2 text-body-sm text-[var(--color-on-surface-muted)]", children: [
+            /* @__PURE__ */ jsx(Spinner, { size: "sm", "aria-hidden": "true" }),
+            messages.loading
+          ] }),
+          children
+        ]
+      }
+    );
+  }
 );
 List.displayName = "Combobox.List";
 const Empty = React.forwardRef(

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ChevronProps, type Labels } from 'react-day-picker';
+import { type ChevronProps, type Labels, type Matcher } from 'react-day-picker';
 import { type Locale } from 'date-fns';
 /**
  * A date-fns Locale wins (date-fns 'PP'); else with a NexubProvider locale,
@@ -34,6 +34,21 @@ export interface DatePickerProps {
     'aria-label'?: string;
     /** date-fns Locale for the calendar and trigger text; wins over NexubProvider's `dateLocale`. */
     locale?: Locale;
+    /** Days that can't be picked (react-day-picker Matcher), e.g. `{ dayOfWeek: [0, 6] }`. */
+    disabledDates?: Matcher | Matcher[];
+    /** Quick picks under the calendar (Today, In a week…); choosing one sets the value and closes. */
+    presets?: {
+        label: string;
+        date: Date;
+    }[];
+    /**
+     * The trigger is a text input that also accepts a typed date in the locale's
+     * short format (date-fns `P`, e.g. 01/15/2024). Enter or blur commits; an
+     * invalid or unavailable date stays as typed, marked aria-invalid, and the
+     * value is unchanged. `id` and `aria-label` go to the input, `ref` to the
+     * calendar button.
+     */
+    typeable?: boolean;
 }
 export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/DatePicker/DatePicker.js

@@ -2,13 +2,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixPopover from "@radix-ui/react-popover";
-import { DayPicker } from "react-day-picker";
-import { format } from "date-fns";
+import { DayPicker, dateMatchModifiers } from "react-day-picker";
+import { format, isValid, parse } from "date-fns";
 import { CalendarDays, ChevronLeft, ChevronRight } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
 import { useIntlLocale, useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
-import { field, fieldFocusVisible } from "../../utils/control.js";
+import { field, fieldDisabled, fieldFocusVisible, fieldFocusWithin, fieldInvalid } from "../../utils/control.js";
 import { floatingSurface } from "../../utils/surface.js";
+import { Button } from "../Button/Button.js";
 function formatDate(date, locale, dateLocale) {
   if (dateLocale) return format(date, "PP", { locale: dateLocale });
   return locale ? new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date) : format(date, "PP");
@@ -71,7 +72,18 @@ const calendarClassNames = {
   today: "[&>button]:border-[var(--color-primary)]",
   outside: "[&:not([data-selected]):not([data-disabled])>button]:text-[var(--color-on-surface-muted)]",
   disabled: "",
-  hidden: "invisible"
+  hidden: "invisible",
+  // Month change (animate): the months crossfade. react-day-picker adds each of
+  // these with classList.add, so one class apiece. Keyframes from @nexub/themes
+  // core.css; reduced motion collapses them and animationend still cleans up.
+  caption_after_enter: "animate-[nx-fade-in_var(--motion-spring-effects-default-duration)_var(--motion-spring-effects-default-easing)]",
+  caption_before_enter: "animate-[nx-fade-in_var(--motion-spring-effects-default-duration)_var(--motion-spring-effects-default-easing)]",
+  weeks_after_enter: "animate-[nx-fade-in_var(--motion-spring-effects-default-duration)_var(--motion-spring-effects-default-easing)]",
+  weeks_before_enter: "animate-[nx-fade-in_var(--motion-spring-effects-default-duration)_var(--motion-spring-effects-default-easing)]",
+  caption_after_exit: "animate-[nx-fade-out_var(--motion-spring-effects-fast-duration)_var(--motion-spring-effects-fast-easing)_forwards]",
+  caption_before_exit: "animate-[nx-fade-out_var(--motion-spring-effects-fast-duration)_var(--motion-spring-effects-fast-easing)_forwards]",
+  weeks_after_exit: "animate-[nx-fade-out_var(--motion-spring-effects-fast-duration)_var(--motion-spring-effects-fast-easing)_forwards]",
+  weeks_before_exit: "animate-[nx-fade-out_var(--motion-spring-effects-fast-duration)_var(--motion-spring-effects-fast-easing)_forwards]"
 };
 const DatePicker = React.forwardRef(
   function DatePicker2({
@@ -84,15 +96,75 @@ const DatePicker = React.forwardRef(
     className,
     id,
     "aria-label": ariaLabel,
-    locale: localeProp
+    locale: localeProp,
+    disabledDates,
+    presets,
+    typeable = false
   }, ref) {
     const [open, setOpen] = React.useState(false);
     const messages = useNexubMessages();
     const placeholder = placeholderProp ?? messages.pickDate;
     const calendar = useCalendarLocale(localeProp);
     const display = value ? calendar.format(value) : placeholder;
+    const [text, setText] = React.useState(null);
+    const dateLocale = calendar.dayPickerProps.locale;
+    const typed = text?.trim() ? parse(text.trim(), "P", /* @__PURE__ */ new Date(), { locale: dateLocale }) : void 0;
+    const invalid = typed !== void 0 && (!isValid(typed) || minDate !== void 0 && typed < minDate || maxDate !== void 0 && typed > maxDate || disabledDates !== void 0 && dateMatchModifiers(typed, disabledDates));
+    const commit = () => {
+      if (text === null || invalid) return;
+      onChange?.(typed);
+      setText(null);
+    };
+    const pick = (date) => {
+      onChange?.(date);
+      setText(null);
+      setOpen(false);
+    };
     return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      typeable ? /* @__PURE__ */ jsx(RadixPopover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex h-control-md w-full items-center gap-1 ps-3.5 pe-1",
+            field,
+            fieldFocusWithin,
+            invalid && fieldInvalid,
+            disabled && fieldDisabled,
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id,
+                type: "text",
+                disabled,
+                "aria-label": ariaLabel,
+                "aria-invalid": invalid || void 0,
+                placeholder,
+                value: text ?? (value ? format(value, "P", { locale: dateLocale }) : ""),
+                onChange: (e) => setText(e.target.value),
+                onBlur: commit,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commit();
+                },
+                className: "min-w-0 flex-1 bg-transparent text-body-md outline-none placeholder:text-[var(--color-on-surface-muted)] disabled:cursor-not-allowed"
+              }
+            ),
+            /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref,
+                type: "button",
+                disabled,
+                "aria-label": messages.pickDate,
+                className: "nx-state-layer inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full disabled:pointer-events-none",
+                children: /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" })
+              }
+            ) })
+          ]
+        }
+      ) }) : /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         "button",
         {
           ref,
@@ -115,7 +187,7 @@ const DatePicker = React.forwardRef(
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs(
         RadixPopover.Content,
         {
           align: "start",
@@ -124,25 +196,27 @@ const DatePicker = React.forwardRef(
             floatingSurface,
             "nx-motion nx-pop origin-[var(--radix-popover-content-transform-origin)]"
           ),
-          children: /* @__PURE__ */ jsx(
-            DayPicker,
-            {
-              mode: "single",
-              selected: value,
-              defaultMonth: value,
-              onSelect: (date) => {
-                onChange?.(date);
-                setOpen(false);
-              },
-              startMonth: minDate,
-              endMonth: maxDate,
-              autoFocus: true,
-              showOutsideDays: true,
-              className: "relative p-3",
-              classNames: calendarClassNames,
-              ...calendar.dayPickerProps
-            }
-          )
+          children: [
+            /* @__PURE__ */ jsx(
+              DayPicker,
+              {
+                mode: "single",
+                selected: value,
+                defaultMonth: value,
+                onSelect: pick,
+                disabled: disabledDates,
+                startMonth: minDate,
+                endMonth: maxDate,
+                autoFocus: true,
+                animate: true,
+                showOutsideDays: true,
+                className: "relative p-3",
+                classNames: calendarClassNames,
+                ...calendar.dayPickerProps
+              }
+            ),
+            presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 border-t border-[var(--color-outline-variant)] p-2", children: presets.map((p) => /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "xs", onClick: () => pick(p.date), children: p.label }, p.label)) })
+          ]
         }
       ) })
     ] });

package/dist/components/FileUpload/FileUpload.js

@@ -5,6 +5,7 @@ import { Upload, X } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
 import { useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { Progress } from "../Progress/Progress.js";
+import { SPRING_MS } from "../Motion/useMotion.js";
 function formatFileSize(bytes, locale) {
   const [value, unit] = bytes < 1024 ? [bytes, "byte"] : bytes < 1024 * 1024 ? [bytes / 1024, "kilobyte"] : [bytes / (1024 * 1024), "megabyte"];
   return new Intl.NumberFormat(locale, { style: "unit", unit, unitDisplay: "short", maximumFractionDigits: 1 }).format(value);
@@ -27,7 +28,7 @@ function useFileUpload() {
   return ctx;
 }
 const Root = React.forwardRef(
-  ({ className, accept, maxFiles, maxSize, onFilesChange, onReject, validate, children, ...props }, ref) => {
+  ({ className, accept, maxFiles, maxSize, onFilesChange, onReject, validate, onPaste, children, ...props }, ref) => {
     const [files, setFiles] = React.useState([]);
     const [rejections, setRejections] = React.useState([]);
     const [isDragging, setIsDragging] = React.useState(false);
@@ -65,7 +66,22 @@ const Root = React.forwardRef(
       () => ({ accept, maxFiles, maxSize, onFilesChange, files, rejections, addFiles, removeFile, isDragging, setIsDragging }),
       [accept, maxFiles, maxSize, onFilesChange, files, rejections, addFiles, removeFile, isDragging, setIsDragging]
     );
-    return /* @__PURE__ */ jsx(FileUploadContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-4", className), ...props, children }) });
+    return /* @__PURE__ */ jsx(FileUploadContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col gap-4", className),
+        onPaste: (e) => {
+          onPaste?.(e);
+          const pasted = Array.from(e.clipboardData?.files ?? []);
+          if (e.defaultPrevented || !pasted.length) return;
+          e.preventDefault();
+          addFiles(pasted);
+        },
+        ...props,
+        children
+      }
+    ) });
   }
 );
 Root.displayName = "FileUpload.Root";
@@ -140,7 +156,7 @@ const List = React.forwardRef(
   ({ className, ...props }, ref) => {
     const { files } = useFileUpload();
     if (files.length === 0) return null;
-    return /* @__PURE__ */ jsx("ul", { ref, className: cn("flex flex-col gap-2", className), ...props });
+    return /* @__PURE__ */ jsx("ul", { ref, className: cn("flex flex-col", className), ...props });
   }
 );
 List.displayName = "FileUpload.List";
@@ -149,40 +165,78 @@ const Item = React.forwardRef(({ className, index, progress, onCancel, error, ..
   const messages = useNexubMessages();
   const { locale } = useLocale();
   const file = files[index];
+  const [exiting, setExiting] = React.useState(null);
+  const [entered, setEntered] = React.useState(false);
+  const [thumb, setThumb] = React.useState();
+  React.useEffect(() => {
+    if (!file?.type.startsWith("image/") || typeof URL.createObjectURL !== "function") return;
+    const url = URL.createObjectURL(file);
+    setThumb(url);
+    return () => {
+      URL.revokeObjectURL(url);
+      setThumb(void 0);
+    };
+  }, [file]);
+  const isExiting = !!file && exiting === file;
+  React.useEffect(() => {
+    if (!isExiting) return;
+    const t = setTimeout(() => removeFile(index), SPRING_MS.effects.default + 50);
+    return () => clearTimeout(t);
+  }, [isExiting, index, removeFile]);
   if (!file) return null;
   const uploading = progress !== void 0 && progress < 100;
   const percent = Math.round(Math.max(0, Math.min(100, progress ?? 0)));
-  return /* @__PURE__ */ jsxs(
-    "li",
-    {
-      ref,
-      className: cn(
-        "flex items-center justify-between gap-3 rounded-shape-container border border-[var(--color-outline-variant)] bg-[var(--color-surface)] p-3",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--color-on-surface)]", children: file.name }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--color-on-surface-muted)]", children: [
-            formatFileSize(file.size, locale),
-            uploading && ` \xB7 ${percent}%`
-          ] }),
-          uploading && /* @__PURE__ */ jsx(Progress, { value: percent, size: "sm", className: "mt-1.5", "aria-label": messages.uploadProgress(file.name, percent) }),
-          error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-xs text-[var(--color-error)]", children: error })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
+  return (
+    // nx-list-item: grows in on add, collapses out on remove (grid rows, spring tokens).
+    /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        className: "nx-list-item",
+        "data-state": isExiting ? "exit" : entered ? void 0 : "enter",
+        onAnimationEnd: (e) => {
+          if (e.target !== e.currentTarget) return;
+          if (isExiting) removeFile(index);
+          else setEntered(true);
+        },
+        ...props,
+        children: /* @__PURE__ */ jsx("div", { className: "nx-list-item-inner", children: /* @__PURE__ */ jsx("div", { className: "[li:not(:last-child)>.nx-list-item-inner>&]:pb-2", children: /* @__PURE__ */ jsxs(
+          "div",
           {
-            type: "button",
-            onClick: () => uploading && onCancel ? onCancel() : removeFile(index),
-            "aria-label": uploading && onCancel ? messages.cancelUpload(file.name) : messages.removeFile(file.name),
-            className: "nx-state-layer shrink-0 rounded-full p-1 text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface)] transition-colors",
-            children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" })
+            className: cn(
+              "flex items-center justify-between gap-3 rounded-shape-container border border-[var(--color-outline-variant)] bg-[var(--color-surface)] p-3",
+              className
+            ),
+            children: [
+              thumb && /* @__PURE__ */ jsx("img", { src: thumb, alt: "", className: "h-10 w-10 shrink-0 rounded-shape-min object-cover" }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--color-on-surface)]", children: file.name }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--color-on-surface-muted)]", children: [
+                  formatFileSize(file.size, locale),
+                  uploading && ` \xB7 ${percent}%`
+                ] }),
+                uploading && /* @__PURE__ */ jsx(Progress, { value: percent, size: "sm", className: "mt-1.5", "aria-label": messages.uploadProgress(file.name, percent) }),
+                error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-xs text-[var(--color-error)]", children: error })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    if (uploading && onCancel) return onCancel();
+                    setEntered(true);
+                    setExiting(file);
+                  },
+                  "aria-label": uploading && onCancel ? messages.cancelUpload(file.name) : messages.removeFile(file.name),
+                  className: "nx-state-layer shrink-0 rounded-full p-1 text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface)] transition-colors",
+                  children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" })
+                }
+              )
+            ]
           }
-        )
-      ]
-    }
+        ) }) })
+      }
+    )
   );
 });
 Item.displayName = "FileUpload.Item";

package/dist/components/Input/Input.d.ts

@@ -17,5 +17,11 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
     wrapperClassName?: string;
+    /** Shows a clear button while there is a value. Clearing fires `onChange` with "". */
+    clearable?: boolean;
+    /** Shows a "12/80" counter; needs `maxLength`. Announced politely near the limit. */
+    showCount?: boolean;
+    /** Spinner in the trailing slot and `aria-busy` on the input. */
+    loading?: boolean;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -1,8 +1,14 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { X } from "@nexub/icons";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { field, fieldDisabledWithin, fieldFocusWithin, fieldInvalid } from "../../utils/control.js";
+import { useMergedRefs } from "../../hooks/useMergedRefs.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Spinner } from "../Spinner/Spinner.js";
 const inputVariants = cva(
   [
     // The wrapper owns ALL focus styling (border + ring). Strip every possible
@@ -67,6 +73,7 @@ const addonVariants = cva(
     }
   }
 );
+const nearLimit = (length, max) => length >= max - Math.max(1, Math.ceil(max * 0.1));
 const Input = React.forwardRef(
   ({
     className,
@@ -78,26 +85,61 @@ const Input = React.forwardRef(
     trailingIcon,
     wrapperClassName,
     disabled,
+    clearable,
+    showCount,
+    loading,
     ...props
   }, ref) => {
     const hasAddon = Boolean(leadingAddon ?? trailingAddon);
+    const messages = useNexubMessages();
+    const innerRef = React.useRef(null);
+    const mergedRef = useMergedRefs(ref, innerRef);
+    const countId = React.useId();
+    const [uncontrolledLength, setLength] = React.useState(String(props.defaultValue ?? "").length);
+    const length = props.value !== void 0 && props.value !== null ? String(props.value).length : uncontrolledLength;
+    const max = props.maxLength;
+    const counting = Boolean(showCount && max !== void 0 && max >= 0);
+    const handleChange = (e) => {
+      setLength(e.target.value.length);
+      props.onChange?.(e);
+    };
+    const clear = () => {
+      const el = innerRef.current;
+      if (!el) return;
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(el, "");
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      el.focus();
+    };
     const inputEl = /* @__PURE__ */ jsx(
       "input",
       {
-        ref,
         className: cn(inputVariants({ size }), className),
         "aria-invalid": invalid ?? void 0,
+        "aria-busy": loading || void 0,
         disabled,
-        ...props
+        ...props,
+        "aria-describedby": [props["aria-describedby"], counting && countId].filter(Boolean).join(" ") || void 0,
+        onChange: handleChange,
+        ref: mergedRef
       }
     );
+    const showClear = clearable && length > 0 && !disabled && !props.readOnly;
+    const trailing = /* @__PURE__ */ jsxs(Fragment, { children: [
+      counting && /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-label-sm tabular-nums text-[var(--color-on-surface-muted)]", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: `${length}/${max}` }),
+        /* @__PURE__ */ jsx("span", { id: countId, className: "sr-only", "aria-live": nearLimit(length, max) ? "polite" : "off", children: messages.characterCount(length, max) })
+      ] }),
+      loading && /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "shrink-0" }),
+      showClear && /* @__PURE__ */ jsx(IconButton, { size: "xs", label: messages.clear, onClick: clear, className: "-me-1.5", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" }) }),
+      trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: trailingIcon })
+    ] });
     if (hasAddon) {
       return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full overflow-hidden", field, fieldFocusWithin, invalid && fieldInvalid), children: [
         leadingAddon && /* @__PURE__ */ jsx("span", { className: cn(addonVariants({ side: "leading" })), children: leadingAddon }),
         /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), "rounded-none border-0 shadow-none focus-within:shadow-none", wrapperClassName), children: [
           leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: leadingIcon }),
           inputEl,
-          trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: trailingIcon })
+          trailing
         ] }),
         trailingAddon && /* @__PURE__ */ jsx("span", { className: cn(addonVariants({ side: "trailing" })), children: trailingAddon })
       ] });
@@ -105,7 +147,7 @@ const Input = React.forwardRef(
     return /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), wrapperClassName), children: [
       leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: leadingIcon }),
       inputEl,
-      trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: trailingIcon })
+      trailing
     ] });
   }
 );

package/dist/components/Select/Select.d.ts

@@ -1,7 +1,22 @@
 import * as React from 'react';
 import * as RadixSelect from '@radix-ui/react-select';
+export interface SelectRootProps extends RadixSelect.SelectProps {
+    /** Shows a clear button on the Trigger while there is a value; clearing calls `onValueChange('')` and shows the placeholder. */
+    clearable?: boolean;
+}
+export interface SelectContentProps extends RadixSelect.SelectContentProps {
+    /** A filter field at the top; items whose text (or `textValue`) doesn't match are hidden. Typing on an item moves to the field. */
+    searchable?: boolean;
+}
+export interface SelectItemProps extends RadixSelect.SelectItemProps {
+    /** A secondary line under the label: the option's accessible description, not part of its name. */
+    description?: React.ReactNode;
+}
 export declare const Select: {
-    Root: React.FC<RadixSelect.SelectProps>;
+    Root: {
+        ({ clearable, value, defaultValue, onValueChange, onOpenChange, ...props }: SelectRootProps): React.JSX.Element;
+        displayName: string;
+    };
     Group: React.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
     Value: React.ForwardRefExoticComponent<RadixSelect.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
     Trigger: React.ForwardRefExoticComponent<RadixSelect.SelectTriggerProps & {
@@ -9,8 +24,8 @@ export declare const Select: {
     } & React.RefAttributes<HTMLButtonElement>>;
     ScrollUpButton: React.ForwardRefExoticComponent<RadixSelect.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>>;
     ScrollDownButton: React.ForwardRefExoticComponent<RadixSelect.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<RadixSelect.SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
     Label: React.ForwardRefExoticComponent<RadixSelect.SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
-    Item: React.ForwardRefExoticComponent<RadixSelect.SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
     Separator: React.ForwardRefExoticComponent<RadixSelect.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>;
 };