@nexub/react 7.4.0 → 7.6.0

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/Dialog/Dialog.d.ts

@@ -15,6 +15,12 @@ declare function Root({ scrollLock, modal, ...props }: DialogRootProps): React.J
 interface ContentProps extends RadixDialog.DialogContentProps {
     size?: Size | 'xl' | 'full';
     surface?: SurfaceValue;
+    /** Adds a close button in the top-end corner. @default false */
+    showClose?: boolean;
+    /** Accessible name of the close button. @default messages.close */
+    closeLabel?: string;
+    /** `true`: bottom sheet. `'auto'`: bottom sheet below the `md` breakpoint, centred above. @default false */
+    sheet?: boolean | 'auto';
 }
 export declare const Dialog: {
     Root: typeof Root;
@@ -26,6 +32,7 @@ export declare const Dialog: {
     Title: React.ForwardRefExoticComponent<RadixDialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<RadixDialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
     Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
     Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 };
 export {};

package/dist/components/Dialog/Dialog.js

@@ -1,11 +1,15 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
 import { cn } from "../../utils/cn.js";
 import { overlaySurface, scrim } from "../../utils/surface.js";
 import { glassSurfaceClass } from "../../utils/glass.js";
 import { ClassLockOverlay, ScrollLockContext } from "../../hooks/useClassScrollLock.js";
+import { useMediaQuery } from "../../hooks/useMediaQuery.js";
+import { X } from "@nexub/icons";
+import { IconButton } from "../IconButton/IconButton.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 function Root({ scrollLock = "style", modal = true, ...props }) {
   const lock = React.useMemo(() => ({ scrollLock, modal }), [scrollLock, modal]);
   return /* @__PURE__ */ jsx(ScrollLockContext.Provider, { value: lock, children: /* @__PURE__ */ jsx(RadixDialog.Root, { modal, ...props }) });
@@ -33,8 +37,19 @@ const Overlay = React.forwardRef(
   }
 );
 Overlay.displayName = "Dialog.Overlay";
+const StackContext = React.createContext(null);
 const Content = React.forwardRef(
-  function DialogContent({ className, size = "md", surface = "solid", children, ...props }, ref) {
+  function DialogContent({ className, size = "md", surface = "solid", showClose = false, closeLabel, sheet = false, children, ...props }, ref) {
+    const messages = useNexubMessages();
+    const narrow = useMediaQuery("(max-width: 47.99rem)");
+    const asSheet = sheet === true || sheet === "auto" && narrow;
+    const parent = React.useContext(StackContext);
+    const [openChildren, setOpenChildren] = React.useState(0);
+    React.useEffect(() => {
+      if (!parent) return;
+      parent((n) => n + 1);
+      return () => parent((n) => n - 1);
+    }, [parent]);
     const sizeMap = {
       sm: "max-w-sm",
       md: "max-w-lg",
@@ -42,23 +57,28 @@ const Content = React.forwardRef(
       xl: "max-w-4xl",
       full: "max-w-[calc(100vw-2rem)]"
     };
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       RadixDialog.Content,
       {
         ref,
         className: cn(
-          "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2",
+          asSheet ? "fixed inset-x-0 bottom-0 z-[var(--z-modal)] w-full" : "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2",
           "nx-motion nx-dialog",
           overlaySurface,
           "max-h-[90vh] overflow-y-auto p-6 focus:outline-none",
-          sizeMap[size],
+          asSheet ? "rounded-b-none" : sizeMap[size],
           surface === "glass" && glassSurfaceClass,
           className
         ),
         "data-material": surface === "glass" ? "glass" : void 0,
         "data-glass-thickness": surface === "glass" ? "thick" : void 0,
+        "data-sheet": asSheet ? "" : void 0,
+        "data-nested": openChildren > 0 ? "" : void 0,
         ...props,
-        children
+        children: [
+          /* @__PURE__ */ jsx(StackContext.Provider, { value: setOpenChildren, children }),
+          showClose && /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { label: closeLabel ?? messages.close, variant: "ghost", size: "sm", className: "absolute end-3 top-3", children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" }) }) })
+        ]
       }
     );
   }
@@ -92,16 +112,22 @@ const Description = React.forwardRef(
 Description.displayName = "Dialog.Description";
 const Header = React.forwardRef(
   function DialogHeader({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4 flex flex-col gap-1", className), ...props });
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("nx-dialog-header mb-4 flex flex-col gap-1", className), ...props });
   }
 );
 Header.displayName = "Dialog.Header";
 const Footer = React.forwardRef(
   function DialogFooter({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("nx-dialog-footer mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
   }
 );
 Footer.displayName = "Dialog.Footer";
+const Body = React.forwardRef(
+  function DialogBody({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("nx-dialog-body", className), ...props });
+  }
+);
+Body.displayName = "Dialog.Body";
 const Dialog = {
   Root,
   Trigger,
@@ -112,6 +138,7 @@ const Dialog = {
   Title,
   Description,
   Header,
+  Body,
   Footer
 };
 export {

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

@@ -1,6 +1,12 @@
 import * as React from 'react';
+export interface EmptyStateRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Scales spacing, icon and text. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Fades in on mount (nx-reveal; reduced motion keeps the crossfade). */
+    animate?: boolean;
+}
 export declare const EmptyState: {
-    Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Root: React.ForwardRefExoticComponent<EmptyStateRootProps & React.RefAttributes<HTMLDivElement>>;
     Illustration: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
     Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/EmptyState/EmptyState.js

@@ -1,13 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.js";
+const rootSizes = { sm: "gap-3 py-8", md: "gap-4 py-16", lg: "gap-6 py-24" };
 const Root = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, size = "md", animate, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
+      "data-size": size,
       className: cn(
-        "flex flex-col items-center justify-center gap-4 py-16 text-center",
+        "group/empty-state flex flex-col items-center justify-center text-center",
+        rootSizes[size],
+        animate && "nx-reveal",
         className
       ),
       ...props
@@ -20,7 +24,11 @@ const Illustration = React.forwardRef(
     "div",
     {
       ref,
-      className: cn("text-[var(--color-on-surface-muted)]", className),
+      className: cn(
+        "text-[var(--color-on-surface-muted)]",
+        "group-data-[size=sm]/empty-state:[&_svg]:size-8 group-data-[size=lg]/empty-state:[&_svg]:size-16",
+        className
+      ),
       ...props
     }
   )
@@ -31,7 +39,11 @@ const Title = React.forwardRef(
     "h3",
     {
       ref,
-      className: cn("text-lg font-semibold text-[var(--color-on-surface)]", className),
+      className: cn(
+        "text-lg font-semibold text-[var(--color-on-surface)]",
+        "group-data-[size=sm]/empty-state:text-base group-data-[size=lg]/empty-state:text-xl",
+        className
+      ),
       ...props
     }
   )
@@ -41,7 +53,11 @@ const Description = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   "p",
   {
     ref,
-    className: cn("max-w-sm text-sm text-[var(--color-on-surface-muted)]", className),
+    className: cn(
+      "max-w-sm text-sm text-[var(--color-on-surface-muted)]",
+      "group-data-[size=sm]/empty-state:text-xs group-data-[size=lg]/empty-state:text-base",
+      className
+    ),
     ...props
   }
 ));

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import type { NexubMessages } from '@nexub/core';
+import { type EmptyStateRootProps } from './EmptyState.js';
 export type EmptyStateKind = keyof NexubMessages['emptyStates'];
-export interface EmptyStatePresetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface EmptyStatePresetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, Pick<EmptyStateRootProps, 'size' | 'animate'> {
     /** noData, noResults, noAccess (403), serverError (500) or offline. */
     kind: EmptyStateKind;
     /** Overrides the preset's title; the description too. Both default to localised text. */

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/Heading/Heading.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { ToneValue } from '../Button/Button.js';
 export declare const headingVariants: (props?: ({
-    size?: "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null | undefined;
+    size?: "display" | "h2" | "h3" | "h1" | "h4" | "h5" | "h6" | null | undefined;
     weight?: "bold" | "regular" | "medium" | "semibold" | "extrabold" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/components/IconButton/IconButton.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 export declare const iconButtonVariants: (props?: ({
-    variant?: "outline" | "solid" | "ghost" | "subtle" | null | undefined;
+    variant?: "outline" | "solid" | "subtle" | "ghost" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
     label: string;
     asChild?: boolean;
+    /** Spinner replaces the icon (size kept); clicks are blocked, focus stays. */
+    loading?: boolean;
+    /** Built-in tooltip: content, or `true` to show `label`. No Provider needed. */
+    tooltip?: React.ReactNode;
 }
 export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton/IconButton.js

@@ -1,9 +1,12 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { disabledContainer, disabledText, pressable } from "../../utils/control.js";
+import { spinnerVariants } from "../Spinner/Spinner.js";
+const LazyTooltip = React.lazy(() => import("../Tooltip/Tooltip.js").then((m) => ({ default: m.Tooltip })));
 const iconButtonVariants = cva(
   [pressable, "relative inline-flex items-center justify-center flex-shrink-0"],
   {
@@ -30,18 +33,26 @@ const iconButtonVariants = cva(
   }
 );
 const IconButton = React.forwardRef(
-  ({ className, variant, size, label, asChild = false, children, ...props }, ref) => {
+  ({ className, variant, size, label, asChild = false, loading, tooltip, onClick, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
+    const button = /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
         "aria-label": label,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || props["aria-disabled"] || void 0,
         className: cn(iconButtonVariants({ variant, size }), "nx-hit", className),
+        onClick: (e) => {
+          if (loading) return e.preventDefault();
+          onClick?.(e);
+        },
         ...props,
-        children
+        children: loading && !asChild ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(spinnerVariants({ size: size === "xs" ? "xs" : "sm" }), "border-current border-t-transparent") }) : children
       }
     );
+    if (tooltip == null || tooltip === false) return button;
+    return /* @__PURE__ */ jsx(React.Suspense, { fallback: button, children: /* @__PURE__ */ jsx(LazyTooltip, { label: tooltip === true ? label : tooltip, children: button }) });
   }
 );
 IconButton.displayName = "IconButton";

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>>;