@nexub/react 5.4.0 → 5.6.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.4.0",
+  "version": "5.6.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.",
@@ -399,6 +399,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "filter-builder",
+      "name": "Filter Builder",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "Field, condition and value controls are labelled; remove buttons say what they remove."
+      ]
+    },
     {
       "slug": "filter-chip",
       "name": "Filter Chip",
@@ -740,6 +751,19 @@
         "Under reduced motion digits change instantly."
       ]
     },
+    {
+      "slug": "otp-input",
+      "name": "OTP Input",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Type: Fills the box and moves to the next.",
+        "Backspace: Clears the box, or the previous one when empty.",
+        "ArrowLeft / ArrowRight: Moves between boxes."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "pagination",
       "name": "Pagination",
@@ -839,6 +863,15 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "saved-views",
+      "name": "Saved Views",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": []
+    },
     {
       "slug": "scroll-area",
       "name": "Scroll Area",

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -1,5 +1,20 @@
 import * as React from 'react';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+export interface AlertDialogConfirmProps {
+    /** What the user must type, e.g. the resource name. Matching ignores outer spaces. */
+    text: string;
+    /** The label; defaults to "Type ‹text› to confirm". */
+    label?: React.ReactNode;
+    className?: string;
+}
+/**
+ * For critical, irreversible actions: the Action button stays disabled until
+ * `text` is typed. Place it inside AlertDialog.Content.
+ */
+declare function Confirm({ text, label, className }: AlertDialogConfirmProps): React.JSX.Element;
+declare namespace Confirm {
+    var displayName: string;
+}
 export declare const AlertDialog: {
     Root: React.FC<RadixAlertDialog.AlertDialogProps>;
     Trigger: React.ForwardRefExoticComponent<RadixAlertDialog.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -12,4 +27,6 @@ export declare const AlertDialog: {
     Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
     Action: React.ForwardRefExoticComponent<RadixAlertDialog.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
     Cancel: React.ForwardRefExoticComponent<RadixAlertDialog.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
+    Confirm: typeof Confirm;
 };
+export {};

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,10 +1,13 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixAlertDialog from "@radix-ui/react-alert-dialog";
 import { cn } from "../../utils/cn.js";
 import { overlaySurface, scrim } from "../../utils/surface.js";
 import { buttonVariants } from "../Button/Button.js";
+import { Input } from "../Input/Input.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+const ConfirmContext = React.createContext(null);
 const Root = RadixAlertDialog.Root;
 const Trigger = RadixAlertDialog.Trigger;
 const Portal = RadixAlertDialog.Portal;
@@ -27,7 +30,10 @@ const Overlay = React.forwardRef(
 Overlay.displayName = "AlertDialog.Overlay";
 const Content = React.forwardRef(
   function AlertDialogContent({ className, children, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
+    const [required, setRequired] = React.useState(null);
+    const [typed, setTyped] = React.useState("");
+    const confirm = React.useMemo(() => ({ required, setRequired, typed, setTyped }), [required, typed]);
+    return /* @__PURE__ */ jsx(ConfirmContext.Provider, { value: confirm, children: /* @__PURE__ */ jsx(
       RadixAlertDialog.Content,
       {
         ref,
@@ -41,7 +47,7 @@ const Content = React.forwardRef(
         ...props,
         children
       }
-    );
+    ) });
   }
 );
 Content.displayName = "AlertDialog.Content";
@@ -82,11 +88,14 @@ const Footer = React.forwardRef(
 );
 Footer.displayName = "AlertDialog.Footer";
 const Action = React.forwardRef(
-  function AlertDialogAction({ className, ...props }, ref) {
+  function AlertDialogAction({ className, disabled, ...props }, ref) {
+    const confirm = React.useContext(ConfirmContext);
+    const blocked = !!confirm?.required && confirm.typed.trim() !== confirm.required;
     return /* @__PURE__ */ jsx(
       RadixAlertDialog.Action,
       {
         ref,
+        disabled: disabled || blocked,
         className: cn(
           // The destructive confirm: same as <Button variant="destructive">.
           buttonVariants({ variant: "destructive" }),
@@ -114,6 +123,31 @@ const Cancel = React.forwardRef(
   }
 );
 Cancel.displayName = "AlertDialog.Cancel";
+function Confirm({ text, label, className }) {
+  const confirm = React.useContext(ConfirmContext);
+  const t = useNexubMessages();
+  const id = React.useId();
+  const setRequired = confirm?.setRequired;
+  React.useEffect(() => {
+    setRequired?.(text);
+    return () => setRequired?.(null);
+  }, [text, setRequired]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-body-sm text-[var(--color-on-surface)]", children: label ?? t.typeToConfirm(text) }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        value: confirm?.typed ?? "",
+        onChange: (e) => confirm?.setTyped(e.target.value),
+        autoComplete: "off",
+        autoCapitalize: "off",
+        spellCheck: false
+      }
+    )
+  ] });
+}
+Confirm.displayName = "AlertDialog.Confirm";
 const AlertDialog = {
   Root,
   Trigger,
@@ -125,7 +159,8 @@ const AlertDialog = {
   Header,
   Footer,
   Action,
-  Cancel
+  Cancel,
+  Confirm
 };
 export {
   AlertDialog

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

@@ -1 +1,2 @@
 export { AlertDialog } from './AlertDialog.js';
+export type { AlertDialogConfirmProps } from './AlertDialog.js';

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -2,6 +2,13 @@ import * as React from 'react';
 import { type DateRange } from 'react-day-picker';
 import type { Locale } from 'date-fns';
 export type { DateRange };
+export interface DateRangePreset {
+    label: string;
+    /** `today` is the current date in the picker's time zone (midnight, local Date). */
+    range: (today: Date) => DateRange;
+}
+/** Today's calendar date in `timeZone`, as a local midnight Date. */
+export declare function todayIn(timeZone?: string, now?: Date): Date;
 export interface DateRangePickerProps {
     value?: DateRange;
     onChange?: (range: DateRange | undefined) => void;
@@ -16,5 +23,15 @@ export interface DateRangePickerProps {
     'aria-label'?: string;
     /** date-fns Locale for the calendar and trigger text; wins over NexubProvider's `dateLocale`. */
     locale?: Locale;
+    /**
+     * Quick ranges beside the calendar. `true` shows Today, Last 7 days,
+     * Last 30 days, Month to date and Last month; or pass your own.
+     */
+    presets?: boolean | DateRangePreset[];
+    /**
+     * IANA time zone the dates mean, e.g. 'Europe/London'. Shown under the
+     * calendar, and presets count "today" there.
+     */
+    timeZone?: string;
 }
 export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -5,10 +5,22 @@ import * as RadixPopover from "@radix-ui/react-popover";
 import { DayPicker } from "react-day-picker";
 import { CalendarDays } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
-import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { useCalendarLocale } from "../DatePicker/DatePicker.js";
 import { field, fieldFocusVisible } from "../../utils/control.js";
 import { floatingSurface } from "../../utils/surface.js";
+function todayIn(timeZone, now = /* @__PURE__ */ new Date()) {
+  if (!timeZone) return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const parts = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    year: "numeric",
+    month: "numeric",
+    day: "numeric"
+  }).formatToParts(now);
+  const get = (t) => Number(parts.find((p) => p.type === t)?.value);
+  return new Date(get("year"), get("month") - 1, get("day"));
+}
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
 function formatRange(range, placeholder, formatDate) {
   if (!range) return placeholder;
   if (range.from && range.to) {
@@ -51,79 +63,119 @@ const calendarClassNames = {
   disabled: "",
   hidden: "invisible"
 };
-const DateRangePicker = React.forwardRef(function DateRangePicker2({
-  value,
-  onChange,
-  placeholder: placeholderProp,
-  disabled = false,
-  minDate,
-  maxDate,
-  className,
-  id,
-  "aria-label": ariaLabel,
-  locale: localeProp
-}, ref) {
-  const [open, setOpen] = React.useState(false);
-  const messages = useNexubMessages();
-  const calendar = useCalendarLocale(localeProp);
-  const placeholder = placeholderProp ?? messages.pickDateRange;
-  const display = formatRange(value, placeholder, calendar.format);
-  const label = ariaLabel ? `${ariaLabel}: ${display}` : display;
-  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      "button",
+const DateRangePicker = React.forwardRef(
+  function DateRangePicker2({
+    value,
+    onChange,
+    placeholder: placeholderProp,
+    disabled = false,
+    minDate,
+    maxDate,
+    className,
+    id,
+    "aria-label": ariaLabel,
+    locale: localeProp,
+    presets: presetsProp,
+    timeZone
+  }, ref) {
+    const [open, setOpen] = React.useState(false);
+    const messages = useNexubMessages();
+    const { locale } = useLocale();
+    const presets = presetsProp === true ? [
+      { label: messages.today, range: (t) => ({ from: t, to: t }) },
+      { label: messages.last7Days, range: (t) => ({ from: addDays(t, -6), to: t }) },
+      { label: messages.last30Days, range: (t) => ({ from: addDays(t, -29), to: t }) },
       {
-        ref,
-        id,
-        disabled,
-        "aria-label": label,
-        className: cn(
-          "inline-flex h-control-md w-full items-center justify-start gap-2 px-3.5 text-body-md",
-          field,
-          fieldFocusVisible,
-          // Open reads like focus: the 2px primary border (as Select).
-          "data-[state=open]:border-[var(--color-primary)] data-[state=open]:shadow-[inset_0_0_0_1px_var(--color-primary)]",
-          "disabled:cursor-not-allowed disabled:border-[var(--color-outline-variant)] disabled:bg-[var(--color-surface-container-low)] disabled:text-[var(--color-text-disabled)]",
-          !value && "text-[var(--color-on-surface-muted)]",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" }),
-          display
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
-      RadixPopover.Content,
+        label: messages.monthToDate,
+        range: (t) => ({ from: new Date(t.getFullYear(), t.getMonth(), 1), to: t })
+      },
       {
-        align: "start",
-        className: cn(
-          "z-[var(--z-popover)] outline-none",
-          floatingSurface,
-          "nx-motion nx-pop origin-[var(--radix-popover-content-transform-origin)]"
-        ),
-        children: /* @__PURE__ */ jsx(
-          DayPicker,
-          {
-            mode: "range",
-            selected: value,
-            defaultMonth: value?.from,
-            onSelect: onChange,
-            numberOfMonths: 2,
-            startMonth: minDate,
-            endMonth: maxDate,
-            autoFocus: true,
-            showOutsideDays: false,
-            className: "relative p-3",
-            classNames: calendarClassNames,
-            ...calendar.dayPickerProps
-          }
-        )
+        label: messages.lastMonth,
+        range: (t) => ({
+          from: new Date(t.getFullYear(), t.getMonth() - 1, 1),
+          to: new Date(t.getFullYear(), t.getMonth(), 0)
+        })
       }
-    ) })
-  ] });
-});
+    ] : presetsProp || [];
+    const zoneName = timeZone ? new Intl.DateTimeFormat(locale, { timeZone, timeZoneName: "shortOffset" }).formatToParts(/* @__PURE__ */ new Date()).find((p) => p.type === "timeZoneName")?.value ?? timeZone : void 0;
+    const calendar = useCalendarLocale(localeProp);
+    const placeholder = placeholderProp ?? messages.pickDateRange;
+    const display = formatRange(value, placeholder, calendar.format);
+    const label = ariaLabel ? `${ariaLabel}: ${display}` : display;
+    return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          id,
+          disabled,
+          "aria-label": label,
+          className: cn(
+            "inline-flex h-control-md w-full items-center justify-start gap-2 px-3.5 text-body-md",
+            field,
+            fieldFocusVisible,
+            // Open reads like focus: the 2px primary border (as Select).
+            "data-[state=open]:border-[var(--color-primary)] data-[state=open]:shadow-[inset_0_0_0_1px_var(--color-primary)]",
+            "disabled:cursor-not-allowed disabled:border-[var(--color-outline-variant)] disabled:bg-[var(--color-surface-container-low)] disabled:text-[var(--color-text-disabled)]",
+            !value && "text-[var(--color-on-surface-muted)]",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" }),
+            display
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
+        RadixPopover.Content,
+        {
+          align: "start",
+          className: cn(
+            "z-[var(--z-popover)] outline-none",
+            floatingSurface,
+            "nx-motion nx-pop origin-[var(--radix-popover-content-transform-origin)]"
+          ),
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row", children: [
+            presets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-1 border-b border-[var(--color-outline-variant)] p-2 sm:flex-col sm:flex-nowrap sm:border-b-0 sm:border-e", children: presets.map((p) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "nx-state-layer w-full rounded-shape-control px-3 py-1.5 text-start text-body-sm text-[var(--color-on-surface)]",
+                onClick: () => {
+                  onChange?.(p.range(todayIn(timeZone)));
+                  setOpen(false);
+                },
+                children: p.label
+              }
+            ) }, p.label)) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                DayPicker,
+                {
+                  mode: "range",
+                  selected: value,
+                  defaultMonth: value?.from,
+                  onSelect: onChange,
+                  numberOfMonths: 2,
+                  startMonth: minDate,
+                  endMonth: maxDate,
+                  autoFocus: true,
+                  showOutsideDays: false,
+                  className: "relative p-3",
+                  classNames: calendarClassNames,
+                  ...calendar.dayPickerProps
+                }
+              ),
+              zoneName && /* @__PURE__ */ jsx("p", { className: "px-4 pb-3 text-label-sm text-[var(--color-on-surface-muted)]", children: messages.timeZoneLabel(`${zoneName} (${timeZone})`) })
+            ] })
+          ] })
+        }
+      ) })
+    ] });
+  }
+);
 DateRangePicker.displayName = "DateRangePicker";
 export {
-  DateRangePicker
+  DateRangePicker,
+  todayIn
 };

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

@@ -1,2 +1,3 @@
 export { DateRangePicker } from './DateRangePicker.js';
-export type { DateRangePickerProps, DateRange } from './DateRangePicker.js';
+export { todayIn } from './DateRangePicker.js';
+export type { DateRangePickerProps, DateRange, DateRangePreset } from './DateRangePicker.js';

package/dist/components/DateRangePicker/index.js

@@ -1,4 +1,6 @@
 import { DateRangePicker } from "./DateRangePicker.js";
+import { todayIn } from "./DateRangePicker.js";
 export {
-  DateRangePicker
+  DateRangePicker,
+  todayIn
 };

package/dist/components/EmptyState/EmptyStatePreset.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { NexubMessages } from '@nexub/core';
+export type EmptyStateKind = keyof NexubMessages['emptyStates'];
+export interface EmptyStatePresetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** noData, noResults, noAccess (403), serverError (500) or offline. */
+    kind: EmptyStateKind;
+    /** Overrides the preset's title; the description too. Both default to localised text. */
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Buttons under the text, e.g. Retry or Clear filters. */
+    actions?: React.ReactNode;
+}
+/** A ready-made empty state: icon, title and description for common cases. */
+export declare const EmptyStatePreset: React.ForwardRefExoticComponent<EmptyStatePresetProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/EmptyState/EmptyStatePreset.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Inbox, Lock, Search, ServerCrash, WifiOff } from "@nexub/icons";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { EmptyState } from "./EmptyState.js";
+const presetIcon = { noData: Inbox, noResults: Search, noAccess: Lock, serverError: ServerCrash, offline: WifiOff };
+const EmptyStatePreset = React.forwardRef(
+  ({ kind, title, description, actions, ...props }, ref) => {
+    const text = useNexubMessages().emptyStates[kind];
+    const Icon = presetIcon[kind];
+    return /* @__PURE__ */ jsxs(EmptyState.Root, { ref, role: kind === "serverError" || kind === "offline" ? "alert" : void 0, ...props, children: [
+      /* @__PURE__ */ jsx(EmptyState.Illustration, { children: /* @__PURE__ */ jsx(Icon, { size: "xl", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsx(EmptyState.Title, { children: title ?? text.title }),
+      /* @__PURE__ */ jsx(EmptyState.Description, { children: description ?? text.description }),
+      actions && /* @__PURE__ */ jsx(EmptyState.Actions, { children: actions })
+    ] });
+  }
+);
+EmptyStatePreset.displayName = "EmptyStatePreset";
+export {
+  EmptyStatePreset
+};

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

@@ -1 +1,3 @@
 export { EmptyState } from './EmptyState.js';
+export { EmptyStatePreset } from './EmptyStatePreset.js';
+export type { EmptyStatePresetProps, EmptyStateKind } from './EmptyStatePreset.js';

package/dist/components/EmptyState/index.js

@@ -1,4 +1,6 @@
 import { EmptyState } from "./EmptyState.js";
+import { EmptyStatePreset } from "./EmptyStatePreset.js";
 export {
-  EmptyState
+  EmptyState,
+  EmptyStatePreset
 };

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

@@ -20,11 +20,18 @@ export interface FileUploadRootProps extends React.HTMLAttributes<HTMLDivElement
     /** Files turned away by `accept`, `maxSize` or `maxFiles`, from the picker or a drop. */
     onReject?: (rejections: FileRejection[]) => void;
 }
+export interface FileUploadItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    index: number;
+    /** Upload progress 0–100. Below 100 shows a bar and, with `onCancel`, a cancel button. Your app does the upload. */
+    progress?: number;
+    /** Stops this file's upload (e.g. AbortController.abort()); shown while `progress` is below 100. */
+    onCancel?: () => void;
+    /** Why this file failed; shown under its name. */
+    error?: string;
+}
 export declare const FileUpload: {
     Root: React.ForwardRefExoticComponent<FileUploadRootProps & React.RefAttributes<HTMLDivElement>>;
     Dropzone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
     List: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
-    Item: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLLIElement> & {
-        index: number;
-    } & React.RefAttributes<HTMLLIElement>>;
+    Item: React.ForwardRefExoticComponent<FileUploadItemProps & React.RefAttributes<HTMLLIElement>>;
 };

package/dist/components/FileUpload/FileUpload.js

@@ -4,6 +4,7 @@ import * as React from "react";
 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";
 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);
@@ -141,12 +142,14 @@ const List = React.forwardRef(
   }
 );
 List.displayName = "FileUpload.List";
-const Item = React.forwardRef(({ className, index, ...props }, ref) => {
+const Item = React.forwardRef(({ className, index, progress, onCancel, error, ...props }, ref) => {
   const { files, removeFile } = useFileUpload();
   const messages = useNexubMessages();
   const { locale } = useLocale();
   const file = files[index];
   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",
     {
@@ -159,13 +162,19 @@ const Item = React.forwardRef(({ className, index, ...props }, ref) => {
       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__ */ jsx("p", { className: "text-xs text-[var(--color-on-surface-muted)]", children: formatFileSize(file.size, locale) })
+          /* @__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",
           {
-            onClick: () => removeFile(index),
-            "aria-label": messages.removeFile(file.name),
+            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" })
           }

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

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

package/dist/components/FilterBuilder/FilterBuilder.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import type { NexubMessages } from '@nexub/core';
+export type FilterFieldType = 'text' | 'number' | 'select' | 'date';
+export type FilterOperator = keyof NexubMessages['filterOperators'];
+export interface FilterField {
+    id: string;
+    label: string;
+    type: FilterFieldType;
+    /** Choices for `type: 'select'`. */
+    options?: {
+        value: string;
+        label: string;
+    }[];
+}
+export interface FilterRule {
+    id: string;
+    field: string;
+    operator: FilterOperator;
+    /** Always a string (dates as YYYY-MM-DD), so the query serialises as-is. */
+    value: string;
+}
+export interface FilterGroup {
+    id: string;
+    combinator: 'and' | 'or';
+    rules: Array<FilterRule | FilterGroup>;
+}
+/** Operators offered for each field type, in menu order. */
+export declare const filterOperators: Record<FilterFieldType, FilterOperator[]>;
+export declare const isFilterGroup: (r: FilterRule | FilterGroup) => r is FilterGroup;
+/** An empty top-level group, a starting `value`. */
+export declare const emptyFilter: () => FilterGroup;
+/** Rules with a field, operator and (unless "is empty") a value. Counts nested groups too. */
+export declare function countFilters(group: FilterGroup): number;
+export interface FilterBuilderProps {
+    fields: FilterField[];
+    value?: FilterGroup;
+    defaultValue?: FilterGroup;
+    onValueChange?: (value: FilterGroup) => void;
+    /** How many levels of nested groups "Add group" may create. Default 1; 0 hides it. */
+    maxDepth?: number;
+    className?: string;
+}
+/**
+ * Builds an AND/OR filter query as plain JSON. Nexub doesn't run it: send it
+ * to your API or evaluate it yourself.
+ */
+export declare function FilterBuilder({ fields, value: valueProp, defaultValue, onValueChange, maxDepth, className }: FilterBuilderProps): React.JSX.Element;
+export declare namespace FilterBuilder {
+    var displayName: string;
+}