@nexub/react 5.0.1 → 5.2.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.0.1",
+  "version": "5.2.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 on every pull request; a new violation fails the build.",
@@ -693,6 +693,23 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "multi-select",
+      "name": "Multi Select",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Type: Filters the options and opens the list.",
+        "ArrowDown / ArrowUp: Moves through the options.",
+        "Enter: Toggles the highlighted option.",
+        "Backspace: In an empty field, removes the last chip.",
+        "Escape: Closes the list."
+      ],
+      "screenReader": [
+        "Options carry `aria-checked`; each chip has a \"Remove <label>\" button."
+      ]
+    },
     {
       "slug": "navigation-rail",
       "name": "Navigation Rail",

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -10,9 +10,25 @@ export interface AutocompleteProps {
     placeholder?: string;
     emptyText?: string;
     loading?: boolean;
+    /** Controlled input text. */
+    inputValue?: string;
+    /**
+     * Called as the user types. When set, the options are taken as already
+     * filtered (fetched for this text), so the built-in filtering is off.
+     */
+    onInputChange?: (text: string) => void;
+    /**
+     * `'inline'` (default): the list always shows under the input.
+     * `'popover'`: a field whose list opens below it while typing.
+     */
+    mode?: 'inline' | 'popover';
+    /** Adds a "Create “text”" option when the text matches no option exactly. */
+    onCreate?: (text: string) => void;
+    disabled?: boolean;
     className?: string;
+    'aria-label'?: string;
 }
-export declare function Autocomplete({ options, value, onValueChange, placeholder, emptyText, loading, className, }: AutocompleteProps): React.JSX.Element;
+export declare function Autocomplete({ options, value, onValueChange, placeholder, emptyText, loading, inputValue, onInputChange, mode, onCreate, disabled, className, 'aria-label': ariaLabel, }: AutocompleteProps): React.JSX.Element;
 export declare namespace Autocomplete {
     var displayName: string;
 }

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,8 +1,11 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Plus } from "@nexub/icons";
+import { cn } from "../../utils/cn.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { Combobox } from "../Combobox/Combobox.js";
+import { ComboboxLoading, ComboboxPopover } from "../Combobox/ComboboxPopover.js";
 function Autocomplete({
   options,
   value,
@@ -10,34 +13,86 @@ function Autocomplete({
   placeholder,
   emptyText,
   loading = false,
-  className
+  inputValue,
+  onInputChange,
+  mode = "inline",
+  onCreate,
+  disabled,
+  className,
+  "aria-label": ariaLabel
 }) {
   const messages = useNexubMessages();
   const selectedLabel = options.find((o) => o.value === value)?.label ?? "";
-  const [search, setSearch] = React.useState(selectedLabel);
+  const [innerSearch, setInnerSearch] = React.useState(selectedLabel);
   const [prevValue, setPrevValue] = React.useState(value);
+  const [open, setOpen] = React.useState(false);
+  const search = inputValue ?? innerSearch;
+  const setSearch = (text2) => {
+    setInnerSearch(text2);
+    onInputChange?.(text2);
+  };
   if (value !== prevValue) {
     setPrevValue(value);
-    setSearch(selectedLabel);
+    setInnerSearch(selectedLabel);
   }
-  return /* @__PURE__ */ jsxs(Combobox.Root, { className, children: [
-    /* @__PURE__ */ jsx(Combobox.Input, { placeholder: placeholder ?? messages.searchPlaceholder, value: search, onValueChange: setSearch }),
-    /* @__PURE__ */ jsx(Combobox.List, { children: loading ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-[var(--color-on-surface-muted)]", children: messages.loading }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyText ?? messages.noResults }),
-      options.map((opt) => /* @__PURE__ */ jsx(
-        Combobox.Item,
-        {
-          value: opt.label,
-          keywords: [opt.value],
-          onSelect: () => {
-            onValueChange?.(opt.value);
-            setSearch(opt.label);
-          },
-          children: opt.label
+  const text = search.trim();
+  const canCreate = !!onCreate && !loading && text !== "" && !options.some((o) => o.label.toLowerCase() === text.toLowerCase());
+  const list = /* @__PURE__ */ jsx(Combobox.List, { children: loading ? /* @__PURE__ */ jsx(ComboboxLoading, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    !canCreate && /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyText ?? messages.noResults }),
+    options.map((opt) => /* @__PURE__ */ jsx(
+      Combobox.Item,
+      {
+        value: opt.label,
+        keywords: [opt.value],
+        onSelect: () => {
+          onValueChange?.(opt.value);
+          setSearch(opt.label);
+          setOpen(false);
         },
-        opt.value
-      ))
-    ] }) })
+        children: opt.label
+      },
+      opt.value
+    )),
+    canCreate && /* @__PURE__ */ jsxs(
+      Combobox.Item,
+      {
+        forceMount: true,
+        value: "\0",
+        onSelect: () => {
+          onCreate(text);
+          setOpen(false);
+        },
+        className: "gap-2",
+        children: [
+          /* @__PURE__ */ jsx(Plus, { size: "sm", "aria-hidden": "true" }),
+          messages.createOption(text)
+        ]
+      }
+    )
+  ] }) });
+  const input = {
+    placeholder: placeholder ?? messages.searchPlaceholder,
+    value: search,
+    "aria-label": ariaLabel,
+    onValueChange: (t) => {
+      setSearch(t);
+      setOpen(true);
+    }
+  };
+  if (mode === "popover") {
+    return /* @__PURE__ */ jsx(
+      Combobox.Root,
+      {
+        label: ariaLabel,
+        className: cn("overflow-visible rounded-none bg-transparent", className),
+        shouldFilter: !onInputChange,
+        children: /* @__PURE__ */ jsx(ComboboxPopover, { open: open && !disabled, onOpenChange: setOpen, input, disabled, children: list })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Combobox.Root, { label: ariaLabel, className, shouldFilter: !onInputChange, children: [
+    /* @__PURE__ */ jsx(Combobox.Input, { ...input, disabled }),
+    list
   ] });
 }
 Autocomplete.displayName = "Autocomplete";

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,4 +1,17 @@
 import * as React from 'react';
+export interface BreadcrumbTrailItem {
+    label: React.ReactNode;
+    href?: string;
+}
+export interface BreadcrumbTrailProps extends React.HTMLAttributes<HTMLElement> {
+    /** The path, root first. The last item is the current page. */
+    items: BreadcrumbTrailItem[];
+    /**
+     * Most items shown. Longer trails keep the first item and the last
+     * `maxItems - 1`, and put the rest in a "More" menu. Default 4.
+     */
+    maxItems?: number;
+}
 export declare const Breadcrumb: {
     Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
     List: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLOListElement> & React.RefAttributes<HTMLOListElement>>;
@@ -18,4 +31,5 @@ export declare const Breadcrumb: {
         ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
         displayName: string;
     };
+    Trail: React.ForwardRefExoticComponent<BreadcrumbTrailProps & React.RefAttributes<HTMLElement>>;
 };

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronRight, MoreHorizontal } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 const Root = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": useNexubMessages().breadcrumb, className: cn("", className), ...props })
 );
@@ -77,7 +78,34 @@ const Ellipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs(
   }
 );
 Ellipsis.displayName = "Breadcrumb.Ellipsis";
-const Breadcrumb = { Root, List, Item, Link, Page, Separator, Ellipsis };
+const Trail = React.forwardRef(({ items, maxItems = 4, ...props }, ref) => {
+  const messages = useNexubMessages();
+  const keep = Math.max(2, maxItems);
+  const collapsed = items.length > keep;
+  const hidden = collapsed ? items.slice(1, items.length - (keep - 1)) : [];
+  const shown = collapsed ? [items[0], ...items.slice(items.length - (keep - 1))] : items;
+  const crumb = (item, last) => last ? /* @__PURE__ */ jsx(Page, { children: item.label }) : /* @__PURE__ */ jsx(Link, { href: item.href, children: item.label });
+  return /* @__PURE__ */ jsx(Root, { ref, ...props, children: /* @__PURE__ */ jsx(List, { children: shown.map((item, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    i > 0 && /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(Item, { children: crumb(item, i === shown.length - 1) }),
+    i === 0 && collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+        /* @__PURE__ */ jsx(
+          DropdownMenu.Trigger,
+          {
+            "aria-label": messages.breadcrumbMore,
+            className: "nx-state-layer flex h-9 w-9 items-center justify-center rounded-shape-control",
+            children: /* @__PURE__ */ jsx(MoreHorizontal, { size: "sm", "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", children: hidden.map((h, j) => /* @__PURE__ */ jsx(DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: h.href, children: h.label }) }, j)) })
+      ] }) })
+    ] })
+  ] }, i)) }) });
+});
+Trail.displayName = "Breadcrumb.Trail";
+const Breadcrumb = { Root, List, Item, Link, Page, Separator, Ellipsis, Trail };
 export {
   Breadcrumb
 };

package/dist/components/Breadcrumb/index.d.ts

@@ -1 +1,2 @@
 export { Breadcrumb } from './Breadcrumb.js';
+export type { BreadcrumbTrailItem, BreadcrumbTrailProps } from './Breadcrumb.js';

package/dist/components/Chip/Chip.d.ts

@@ -8,5 +8,7 @@ export declare const chipVariants: (props?: ({
 export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof chipVariants> {
     tone?: ToneValue;
     onRemove?: () => void;
+    /** Accessible name of the remove button. Defaults to the localised "Remove". */
+    removeLabel?: string;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Chip/Chip.js

@@ -32,7 +32,7 @@ const chipVariants = cva(
   }
 );
 const Chip = React.forwardRef(
-  ({ className, size, tone = "neutral", onRemove, children, ...props }, ref) => {
+  ({ className, size, tone = "neutral", onRemove, removeLabel, children, ...props }, ref) => {
     const messages = useNexubMessages();
     return /* @__PURE__ */ jsxs(
       "span",
@@ -46,7 +46,7 @@ const Chip = React.forwardRef(
             "button",
             {
               type: "button",
-              "aria-label": messages.remove,
+              "aria-label": removeLabel ?? messages.remove,
               onClick: (e) => {
                 e.stopPropagation();
                 onRemove();

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Command } from 'cmdk';
+export interface ComboboxPopoverProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Rendered inside the field, before the input (MultiSelect chips). */
+    before?: React.ReactNode;
+    input: React.ComponentProps<typeof Command.Input>;
+    disabled?: boolean;
+    /** The list (a Combobox.List). */
+    children: React.ReactNode;
+}
+/**
+ * A field that keeps focus in its input while a list opens below it.
+ * The list is not portalled: cmdk finds its items inside the Command root.
+ */
+export declare function ComboboxPopover({ open, onOpenChange, before, input, disabled, children }: ComboboxPopoverProps): React.JSX.Element;
+/** Three placeholder rows while options load; the word "Loading" is read out. */
+export declare function ComboboxLoading(): React.JSX.Element;

package/dist/components/Combobox/ComboboxPopover.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { Command } from "cmdk";
+import { cn } from "../../utils/cn.js";
+import { floatingSurface } from "../../utils/surface.js";
+import { field, fieldDisabled, fieldFocusWithin } from "../../utils/control.js";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+function ComboboxPopover({ open, onOpenChange, before, input, disabled, children }) {
+  const anchorRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const labelledBy = input["aria-labelledby"];
+  useIsomorphicLayoutEffect(() => {
+    inputRef.current?.setAttribute("aria-expanded", String(open));
+    if (labelledBy) inputRef.current?.setAttribute("aria-labelledby", labelledBy);
+  });
+  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(RadixPopover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: anchorRef,
+        className: cn(
+          field,
+          fieldFocusWithin,
+          "flex min-h-control-md w-full flex-wrap items-center gap-1.5 px-3 py-1",
+          disabled && fieldDisabled
+        ),
+        onPointerDown: (e) => {
+          if (disabled) return;
+          if (e.target.closest("button")) return;
+          if (e.target !== inputRef.current) e.preventDefault();
+          inputRef.current?.focus();
+          onOpenChange(true);
+        },
+        children: [
+          before,
+          /* @__PURE__ */ jsx(
+            Command.Input,
+            {
+              ref: inputRef,
+              disabled,
+              ...input,
+              onKeyDown: (e) => {
+                if (e.key === "ArrowDown" && !open) onOpenChange(true);
+                input.onKeyDown?.(e);
+              },
+              className: cn(
+                "min-w-8 flex-1 bg-transparent text-body-md outline-none placeholder:text-[var(--color-on-surface-muted)]",
+                input.className
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      RadixPopover.Content,
+      {
+        align: "start",
+        sideOffset: 4,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        onInteractOutside: (e) => {
+          if (anchorRef.current?.contains(e.target)) e.preventDefault();
+        },
+        className: cn(
+          "z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] overflow-hidden p-0 outline-none",
+          floatingSurface,
+          "nx-motion nx-pop origin-[var(--radix-popover-content-transform-origin)]"
+        ),
+        children
+      }
+    )
+  ] });
+}
+function ComboboxLoading() {
+  const messages = useNexubMessages();
+  return /* @__PURE__ */ jsxs("div", { role: "status", "aria-busy": "true", className: "flex flex-col gap-2 px-2.5 py-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: messages.loading }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "w-3/4", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "w-1/2", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "w-2/3", "aria-hidden": "true" })
+  ] });
+}
+export {
+  ComboboxLoading,
+  ComboboxPopover
+};

package/dist/components/CommandPalette/CommandPalette.d.ts

@@ -12,6 +12,11 @@ export interface CommandPaletteRootProps extends RadixDialog.DialogProps {
     scrollLock?: 'style' | 'class';
     /** `false` when the items are already filtered (e.g. async search results). @default true */
     shouldFilter?: boolean;
+    /**
+     * A letter that toggles the palette with Cmd (macOS) or Ctrl, anywhere on
+     * the page, e.g. `'k'` for Cmd+K / Ctrl+K. Off by default.
+     */
+    shortcut?: string;
 }
 export declare const CommandPalette: {
     Root: React.ForwardRefExoticComponent<CommandPaletteRootProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/CommandPalette/CommandPalette.js

@@ -8,17 +8,30 @@ import { cn } from "../../utils/cn.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { overlaySurface, scrim } from "../../utils/surface.js";
 import { useClassScrollLock } from "../../hooks/useClassScrollLock.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
 const overlayClasses = cn("fixed inset-0 z-[var(--z-modal)] nx-motion", scrim);
 function ClassLockOverlay() {
   useClassScrollLock();
   return /* @__PURE__ */ jsx("div", { "data-state": "open", className: overlayClasses });
 }
 const Root = React.forwardRef(
-  ({ children, label: labelProp, scrollLock = "style", shouldFilter, ...props }, ref) => {
+  ({ children, label: labelProp, scrollLock = "style", shouldFilter, shortcut, open: openProp, defaultOpen, onOpenChange, ...props }, ref) => {
     const messages = useNexubMessages();
+    const [open = false, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange });
+    React.useEffect(() => {
+      if (!shortcut) return;
+      const onKeyDown = (e) => {
+        if (e.defaultPrevented || e.altKey || e.shiftKey || !(e.metaKey || e.ctrlKey)) return;
+        if (e.key.toLowerCase() !== shortcut.toLowerCase()) return;
+        e.preventDefault();
+        setOpen(!open);
+      };
+      document.addEventListener("keydown", onKeyDown);
+      return () => document.removeEventListener("keydown", onKeyDown);
+    }, [shortcut, open, setOpen]);
     const label = labelProp ?? messages.commandPalette;
     const returnFocusRef = React.useRef(null);
-    return /* @__PURE__ */ jsx(RadixDialog.Root, { ...props, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
+    return /* @__PURE__ */ jsx(RadixDialog.Root, { open, onOpenChange: setOpen, ...props, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
       scrollLock === "class" ? /* @__PURE__ */ jsx(ClassLockOverlay, {}) : /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: overlayClasses }),
       /* @__PURE__ */ jsxs(
         RadixDialog.Content,

package/dist/components/Drawer/Drawer.js

@@ -105,11 +105,16 @@ const Description = React.forwardRef(
 );
 Description.displayName = "Drawer.Description";
 const Header = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6", className), ...props })
+  ({ className, ...props }, ref) => (
+    // Sticky on solid panels: long content scrolls under the header and footer,
+    // which inherit the panel background. Glass panels keep one frosted layer
+    // (a second translucent layer reads as an opaque band), so they don't stick.
+    /* @__PURE__ */ jsx("div", { ref, className: cn("sticky top-0 z-10 flex flex-col gap-1.5 bg-inherit p-6 [[data-material=glass]_&]:static [[data-material=glass]_&]:bg-transparent", className), ...props })
+  )
 );
 Header.displayName = "Drawer.Header";
 const Footer = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mt-auto flex flex-col gap-2 p-6", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("sticky bottom-0 z-10 mt-auto flex flex-col gap-2 bg-inherit p-6 [[data-material=glass]_&]:static [[data-material=glass]_&]:bg-transparent", className), ...props })
 );
 Footer.displayName = "Drawer.Footer";
 const Drawer = {

package/dist/components/FileUpload/FileUpload.d.ts

@@ -1,10 +1,24 @@
 import * as React from 'react';
 /** Localised file size ("12.3 kB", "1,5 Mo"), 1024-based as before. */
 export declare function formatFileSize(bytes: number, locale: string): string;
+/**
+ * Whether `file` matches an `accept` list: MIME types (`image/png`), wildcards
+ * (`image/*`) and extensions (`.pdf`), like the native input. A UX filter only:
+ * the server must still check what it receives.
+ */
+export declare function fileAccepted(file: File, accept?: string[]): boolean;
+export interface FileRejection {
+    file: File;
+    reason: 'type' | 'size' | 'count';
+}
 export interface FileUploadRootProps extends React.HTMLAttributes<HTMLDivElement> {
     accept?: string[];
     maxFiles?: number;
+    /** Largest file in bytes. Bigger files are rejected with a message. */
+    maxSize?: number;
     onFilesChange?: (files: File[]) => void;
+    /** Files turned away by `accept`, `maxSize` or `maxFiles`, from the picker or a drop. */
+    onReject?: (rejections: FileRejection[]) => void;
 }
 export declare const FileUpload: {
     Root: React.ForwardRefExoticComponent<FileUploadRootProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/FileUpload/FileUpload.js

@@ -8,6 +8,17 @@ 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);
 }
+function fileAccepted(file, accept) {
+  if (!accept?.length) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return accept.some((raw) => {
+    const a = raw.trim().toLowerCase();
+    if (a.startsWith(".")) return name.endsWith(a);
+    if (a.endsWith("/*")) return type.startsWith(a.slice(0, -1));
+    return type === a;
+  });
+}
 const FileUploadContext = React.createContext(null);
 function useFileUpload() {
   const ctx = React.useContext(FileUploadContext);
@@ -15,32 +26,41 @@ function useFileUpload() {
   return ctx;
 }
 const Root = React.forwardRef(
-  ({ className, accept, maxFiles, onFilesChange, children, ...props }, ref) => {
+  ({ className, accept, maxFiles, maxSize, onFilesChange, onReject, children, ...props }, ref) => {
     const [files, setFiles] = React.useState([]);
+    const [rejections, setRejections] = React.useState([]);
     const [isDragging, setIsDragging] = React.useState(false);
     const addFiles = React.useCallback(
       (newFiles) => {
-        setFiles((prev) => {
-          const next = [...prev, ...newFiles].slice(0, maxFiles);
+        const rejected = [];
+        const next = [...files];
+        for (const file of newFiles) {
+          if (!fileAccepted(file, accept)) rejected.push({ file, reason: "type" });
+          else if (maxSize !== void 0 && file.size > maxSize) rejected.push({ file, reason: "size" });
+          else if (maxFiles !== void 0 && next.length >= maxFiles) rejected.push({ file, reason: "count" });
+          else next.push(file);
+        }
+        setRejections(rejected);
+        if (next.length !== files.length) {
+          setFiles(next);
           onFilesChange?.(next);
-          return next;
-        });
+        }
+        if (rejected.length) onReject?.(rejected);
       },
-      [maxFiles, onFilesChange]
+      [files, accept, maxFiles, maxSize, onFilesChange, onReject]
     );
     const removeFile = React.useCallback(
       (index) => {
-        setFiles((prev) => {
-          const next = prev.filter((_, i) => i !== index);
-          onFilesChange?.(next);
-          return next;
-        });
+        const next = files.filter((_, i) => i !== index);
+        setFiles(next);
+        setRejections([]);
+        onFilesChange?.(next);
       },
-      [onFilesChange]
+      [files, onFilesChange]
     );
     const contextValue = React.useMemo(
-      () => ({ accept, maxFiles, onFilesChange, files, addFiles, removeFile, isDragging, setIsDragging }),
-      [accept, maxFiles, onFilesChange, files, addFiles, removeFile, isDragging, setIsDragging]
+      () => ({ 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 }) });
   }
@@ -48,8 +68,10 @@ const Root = React.forwardRef(
 Root.displayName = "FileUpload.Root";
 const Dropzone = React.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const { accept, addFiles, isDragging, setIsDragging } = useFileUpload();
+    const { accept, maxFiles, maxSize, rejections, addFiles, isDragging, setIsDragging } = useFileUpload();
     const messages = useNexubMessages();
+    const { locale } = useLocale();
+    const errorId = React.useId();
     const inputRef = React.useRef(null);
     function handleDrop(e) {
       e.preventDefault();
@@ -61,7 +83,7 @@ const Dropzone = React.forwardRef(
       // A <label> around the native file input: click, Enter and Space open the
       // picker natively, the visible text is the accessible name, and the
       // focus ring follows the input's keyboard focus onto the drop zone.
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         "div",
         {
           ref,
@@ -79,28 +101,32 @@ const Dropzone = React.forwardRef(
             className
           ),
           ...props,
-          children: /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer flex-col items-center justify-center gap-2 p-8", children: [
-            /* @__PURE__ */ jsx(Upload, { size: "lg", className: "text-[var(--color-on-surface-muted)]", "aria-hidden": "true" }),
-            children ?? /* @__PURE__ */ jsxs("span", { className: "text-sm text-[var(--color-on-surface-muted)]", children: [
-              /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--color-primary)]", children: messages.clickToUpload }),
-              " ",
-              messages.orDragAndDrop
-            ] }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: inputRef,
-                type: "file",
-                className: "sr-only",
-                multiple: true,
-                accept: accept?.join(","),
-                onChange: (e) => {
-                  if (e.target.files) addFiles(Array.from(e.target.files));
-                  e.target.value = "";
+          children: [
+            /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer flex-col items-center justify-center gap-2 p-8", children: [
+              /* @__PURE__ */ jsx(Upload, { size: "lg", className: "text-[var(--color-on-surface-muted)]", "aria-hidden": "true" }),
+              children ?? /* @__PURE__ */ jsxs("span", { className: "text-sm text-[var(--color-on-surface-muted)]", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--color-primary)]", children: messages.clickToUpload }),
+                " ",
+                messages.orDragAndDrop
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "file",
+                  className: "sr-only",
+                  multiple: true,
+                  accept: accept?.join(","),
+                  onChange: (e) => {
+                    if (e.target.files) addFiles(Array.from(e.target.files));
+                    e.target.value = "";
+                  },
+                  "aria-describedby": rejections.length ? errorId : void 0
                 }
-              }
-            )
-          ] })
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", className: "empty:hidden px-4 pb-3 text-start text-sm text-[var(--color-error)]", children: rejections.length > 0 && /* @__PURE__ */ jsx("ul", { children: rejections.map(({ file, reason }, i) => /* @__PURE__ */ jsx("li", { children: reason === "type" ? messages.fileTypeRejected(file.name) : reason === "size" ? messages.fileTooLarge(file.name, formatFileSize(maxSize ?? 0, locale)) : messages.tooManyFiles(maxFiles ?? 0) }, `${file.name}-${i}`)) }) })
+          ]
         }
       )
     );
@@ -152,5 +178,6 @@ Item.displayName = "FileUpload.Item";
 const FileUpload = { Root, Dropzone, List, Item };
 export {
   FileUpload,
+  fileAccepted,
   formatFileSize
 };

package/dist/components/FileUpload/index.d.ts

@@ -1,2 +1,2 @@
-export { FileUpload } from './FileUpload.js';
-export type { FileUploadRootProps } from './FileUpload.js';
+export { FileUpload, fileAccepted } from './FileUpload.js';
+export type { FileUploadRootProps, FileRejection } from './FileUpload.js';