@nexub/react 5.0.0 → 5.1.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.0.0",
+  "version": "5.1.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.",

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

@@ -10,9 +10,16 @@ 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;
     className?: 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, className, }: AutocompleteProps): React.JSX.Element;
 export declare namespace Autocomplete {
     var displayName: string;
 }

package/dist/components/Autocomplete/Autocomplete.js

@@ -10,17 +10,24 @@ function Autocomplete({
   placeholder,
   emptyText,
   loading = false,
+  inputValue,
+  onInputChange,
   className
 }) {
   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 search = inputValue ?? innerSearch;
+  const setSearch = (text) => {
+    setInnerSearch(text);
+    onInputChange?.(text);
+  };
   if (value !== prevValue) {
     setPrevValue(value);
-    setSearch(selectedLabel);
+    setInnerSearch(selectedLabel);
   }
-  return /* @__PURE__ */ jsxs(Combobox.Root, { className, children: [
+  return /* @__PURE__ */ jsxs(Combobox.Root, { className, shouldFilter: !onInputChange, 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 }),

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/Combobox/Combobox.js

@@ -3,6 +3,21 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Command } from "cmdk";
 import { cn } from "../../utils/cn.js";
+function scrollWithinList(el) {
+  if (!el) return;
+  el.scrollIntoView = () => {
+    const list = el.closest("[cmdk-list]");
+    if (!list) return;
+    const l = list.getBoundingClientRect();
+    const r = el.getBoundingClientRect();
+    if (r.top < l.top) list.scrollTop -= l.top - r.top;
+    else if (r.bottom > l.bottom) list.scrollTop += r.bottom - l.bottom;
+  };
+}
+function setRef(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
 const Root = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     Command,
@@ -57,7 +72,10 @@ const Group = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     Command.Group,
     {
-      ref,
+      ref: (el) => {
+        scrollWithinList(el?.querySelector("[cmdk-group-heading]"));
+        setRef(ref, el);
+      },
       className: cn(
         "overflow-hidden p-1 text-[var(--color-on-surface)] [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[var(--color-on-surface-muted)]",
         className
@@ -71,7 +89,10 @@ const Item = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     Command.Item,
     {
-      ref,
+      ref: (el) => {
+        scrollWithinList(el);
+        setRef(ref, el);
+      },
       className: cn(
         "relative flex cursor-default select-none items-center rounded-[10px] px-2.5 py-2 text-body-sm outline-none",
         // Highlight = the on-surface state layer at hover opacity.

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

package/dist/components/FileUpload/index.js

@@ -1,4 +1,5 @@
-import { FileUpload } from "./FileUpload.js";
+import { FileUpload, fileAccepted } from "./FileUpload.js";
 export {
-  FileUpload
+  FileUpload,
+  fileAccepted
 };

package/dist/components/Toast/Toaster.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
+export type ToasterPosition = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
 export interface ToasterProps {
+    /** Where the stack sits. Default `top-end`; start/end follow the reading direction. */
+    position?: ToasterPosition;
     /** Always show the toasts as a list instead of a collapsed stack. */
     expand?: boolean;
     /** How many toasts are visible at once; older ones are visually hidden. Default 3. */
@@ -15,7 +18,7 @@ export interface ToasterProps {
  * (--nx-toast-index / --nx-toast-offset per toast, --nx-front-height and
  * --nx-stack-height on the viewport), never a style attribute (strict CSP).
  */
-export declare function Toaster({ expand, visibleToasts }: ToasterProps): React.JSX.Element;
+export declare function Toaster({ expand, visibleToasts, position }: ToasterProps): React.JSX.Element;
 export declare namespace Toaster {
     var displayName: string;
 }

package/dist/components/Toast/Toaster.js

@@ -15,7 +15,19 @@ const toneMap = {
   neutral: ""
 };
 const GAP = 8;
-function Toaster({ expand = false, visibleToasts = 3 }) {
+const vertical = {
+  top: { viewport: "top-0", toast: "top-4 origin-bottom", enter: "[--nx-y:calc(-100%-1rem)]" },
+  bottom: { viewport: "bottom-0 [--nx-dir:-1]", toast: "bottom-4 origin-top", enter: "[--nx-y:calc(100%+1rem)]" }
+};
+const horizontal = {
+  start: { viewport: "start-0", enter: "[--nx-x:calc(-100%-1rem)] rtl:[--nx-x:calc(100%+1rem)]" },
+  center: { viewport: "inset-x-0 mx-auto", enter: "" },
+  end: { viewport: "end-0", enter: "[--nx-x:calc(100%+1rem)] rtl:[--nx-x:calc(-100%-1rem)]" }
+};
+function Toaster({ expand = false, visibleToasts = 3, position = "top-end" }) {
+  const [side, align] = position.split("-");
+  const v = vertical[side];
+  const h = horizontal[align];
   const toasts = useToastStore();
   const messages = useNexubMessages();
   const { dir } = useLocale();
@@ -44,12 +56,12 @@ function Toaster({ expand = false, visibleToasts = 3 }) {
       const el = ol.querySelector(`[data-toast-id="${id}"]`);
       if (!el) return;
       if (i === 0 || expanded2 || !heights.current.has(id)) heights.current.set(id, el.offsetHeight);
-      const h = heights.current.get(id);
+      const h2 = heights.current.get(id);
       el.style.setProperty("--nx-toast-index", String(i));
       el.style.setProperty("--nx-toast-offset", `${offset}px`);
-      if (i === 0) front = h;
-      if (i < visibleToasts2) stack = offset + h;
-      offset += h + GAP;
+      if (i === 0) front = h2;
+      if (i < visibleToasts2) stack = offset + h2;
+      offset += h2 + GAP;
     });
     ol.style.setProperty("--nx-front-height", `${front}px`);
     ol.style.setProperty("--nx-stack-height", `${expanded2 ? stack : front}px`);
@@ -92,7 +104,7 @@ function Toaster({ expand = false, visibleToasts = 3 }) {
       setFocused(false);
     }
   }, [order.length]);
-  return /* @__PURE__ */ jsxs(RadixToast.Provider, { swipeDirection: dir === "rtl" ? "left" : "right", children: [
+  return /* @__PURE__ */ jsxs(RadixToast.Provider, { swipeDirection: align === "start" === (dir === "rtl") ? "right" : "left", children: [
     toasts.map((t) => {
       const i = order.indexOf(t.id);
       const action = t.action ?? (t.undo && { label: t.undo.label ?? messages.undo, onClick: t.undo.onUndo });
@@ -118,12 +130,13 @@ function Toaster({ expand = false, visibleToasts = 3 }) {
             timers.current.add(timer);
           },
           className: cn(
-            "group pointer-events-auto absolute inset-x-4 top-4 flex items-center justify-between gap-3 overflow-hidden rounded-shape-container bg-[var(--color-inverse-surface)] py-3 ps-4 pe-2 text-[var(--color-inverse-on-surface)] shadow-elevation-2",
+            "group pointer-events-auto absolute inset-x-4 flex items-center justify-between gap-3 overflow-hidden rounded-shape-container bg-[var(--color-inverse-surface)] py-3 ps-4 pe-2 text-[var(--color-inverse-on-surface)] shadow-elevation-2",
             // Stack: older toasts sit behind, scaled from their bottom edge so it peeks out.
             // Transition-only timing: duration-*/ease-* utilities would also retime nx-motion's enter/exit keyframes.
-            "origin-bottom transition-[transform,opacity] [transition-duration:var(--motion-spring-spatial-default-duration)] [transition-timing-function:var(--motion-spring-spatial-default-easing)]",
-            "translate-y-[calc(var(--nx-toast-index,0)*var(--nx-toast-step))] scale-[calc(1_-_var(--nx-toast-index,0)*var(--nx-toast-shrink))]",
-            "group-data-[expanded=true]/toaster:translate-y-[var(--nx-toast-offset,0px)] group-data-[expanded=true]/toaster:scale-100",
+            v.toast,
+            "transition-[transform,opacity] [transition-duration:var(--motion-spring-spatial-default-duration)] [transition-timing-function:var(--motion-spring-spatial-default-easing)]",
+            "translate-y-[calc(var(--nx-toast-index,0)*var(--nx-toast-step)*var(--nx-dir,1))] scale-[calc(1_-_var(--nx-toast-index,0)*var(--nx-toast-shrink))]",
+            "group-data-[expanded=true]/toaster:translate-y-[calc(var(--nx-toast-offset,0px)*var(--nx-dir,1))] group-data-[expanded=true]/toaster:scale-100",
             // Collapsing settles faster than expanding.
             "group-data-[expanded=false]/toaster:[transition-duration:var(--motion-spring-effects-fast-duration)] group-data-[expanded=false]/toaster:[transition-timing-function:var(--motion-spring-effects-fast-easing)]",
             "group-data-[expanded=false]/toaster:data-[front=false]:h-[var(--nx-front-height)]",
@@ -135,7 +148,8 @@ function Toaster({ expand = false, visibleToasts = 3 }) {
             "motion-reduce:[transition-property:opacity] motion-reduce:group-data-[expanded=false]/toaster:data-[front=false]:pointer-events-none motion-reduce:group-data-[expanded=false]/toaster:data-[front=false]:opacity-0",
             "data-[state=closed]:duration-effects-fast",
             "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
-            "nx-motion [--nx-x:calc(100%+1rem)] rtl:[--nx-x:calc(-100%-1rem)]",
+            "nx-motion",
+            align === "center" ? v.enter : h.enter,
             toneMap[t.tone ?? "neutral"]
           ),
           duration: t.duration ?? 5e3,
@@ -168,8 +182,11 @@ function Toaster({ expand = false, visibleToasts = 3 }) {
         ref: viewportRef,
         label: messages.notifications,
         "data-expanded": expanded,
+        "data-position": position,
         className: cn(
-          "group/toaster fixed top-0 end-0 z-[var(--z-toast,2000)] max-h-screen w-full p-4 sm:max-w-sm",
+          v.viewport,
+          h.viewport,
+          "group/toaster fixed z-[var(--z-toast,2000)] max-h-screen w-full p-4 sm:max-w-sm",
           // Collapsed: the front toast's height (older edges peek below); expanded: the whole list.
           "h-[calc(var(--nx-stack-height,0px)+2rem)]",
           "[--nx-toast-step:10px] [--nx-toast-shrink:0.05] motion-reduce:[--nx-toast-step:0px] motion-reduce:[--nx-toast-shrink:0]"

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

@@ -1,5 +1,5 @@
 export { Toast } from './Toast.js';
 export { Toaster } from './Toaster.js';
-export type { ToasterProps } from './Toaster.js';
+export type { ToasterProps, ToasterPosition } from './Toaster.js';
 export { toast, useToastStore } from './useToast.js';
 export type { ToastItem, ToastTone, UndoableToastOptions } from './useToast.js';

package/dist/index.d.ts

@@ -182,7 +182,7 @@ export type { ToolbarRootProps } from './components/Toolbar/index.js';
 export { Toast } from './components/Toast/index.js';
 export { Toaster } from './components/Toast/index.js';
 export { toast, useToastStore } from './components/Toast/index.js';
-export type { ToastItem, ToasterProps, UndoableToastOptions } from './components/Toast/index.js';
+export type { ToastItem, ToasterProps, ToasterPosition, UndoableToastOptions } from './components/Toast/index.js';
 export { TopNav } from './components/TopNav/index.js';
 export type { TopNavItemProps, TopNavRootProps } from './components/TopNav/index.js';
 export { Sidebar } from './components/Sidebar/index.js';
@@ -191,6 +191,7 @@ export { AppShell } from './components/AppShell/index.js';
 export { PageHeader } from './components/PageHeader/index.js';
 export type { PageHeaderProps } from './components/PageHeader/index.js';
 export { Breadcrumb } from './components/Breadcrumb/index.js';
+export type { BreadcrumbTrailItem, BreadcrumbTrailProps } from './components/Breadcrumb/index.js';
 export { Pagination } from './components/Pagination/index.js';
 export type { PaginationProps } from './components/Pagination/index.js';
 export { CommandPalette } from './components/CommandPalette/index.js';
@@ -201,8 +202,8 @@ export type { DataTableProps } from './components/DataTable/index.js';
 export { EmptyState } from './components/EmptyState/index.js';
 export { ErrorState } from './components/ErrorState/index.js';
 export type { ErrorStateProps } from './components/ErrorState/index.js';
-export { FileUpload } from './components/FileUpload/index.js';
-export type { FileUploadRootProps } from './components/FileUpload/index.js';
+export { FileUpload, fileAccepted } from './components/FileUpload/index.js';
+export type { FileUploadRootProps, FileRejection } from './components/FileUpload/index.js';
 export { DatePicker } from './components/DatePicker/index.js';
 export type { DatePickerProps } from './components/DatePicker/index.js';
 export { DateRangePicker } from './components/DateRangePicker/index.js';

package/dist/index.js

@@ -115,7 +115,7 @@ import { Table } from "./components/Table/index.js";
 import { DataTable } from "./components/DataTable/index.js";
 import { EmptyState } from "./components/EmptyState/index.js";
 import { ErrorState } from "./components/ErrorState/index.js";
-import { FileUpload } from "./components/FileUpload/index.js";
+import { FileUpload, fileAccepted } from "./components/FileUpload/index.js";
 import { DatePicker } from "./components/DatePicker/index.js";
 import { DateRangePicker } from "./components/DateRangePicker/index.js";
 import { ThemeProvider, ThemeScript, useTheme } from "./components/ThemeProvider/index.js";
@@ -271,6 +271,7 @@ export {
   containerVariants,
   defaultMessageStrings,
   defaultMessages,
+  fileAccepted,
   headingVariants,
   iconButtonVariants,
   inputVariants,