@nexub/react 5.0.1 → 5.2.0

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+}
+export interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    emptyText?: string;
+    loading?: boolean;
+    /** Controlled search text. */
+    inputValue?: string;
+    /** Called as the user types; options are then shown as given (no built-in filtering). */
+    onInputChange?: (text: string) => void;
+    /** Adds a "Create “text”" option when the text matches no option exactly. */
+    onCreate?: (text: string) => void;
+    /** Chips shown before the rest collapse into "+N more". Default 3. */
+    maxVisibleChips?: number;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * Pick several options: chips in the field, a filterable list below.
+ * Backspace in an empty field removes the last chip.
+ */
+export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder, emptyText, loading, inputValue, onInputChange, onCreate, maxVisibleChips, disabled, className, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: MultiSelectProps): React.JSX.Element;
+export declare namespace MultiSelect {
+    var displayName: string;
+}

package/dist/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,142 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Plus } from "@nexub/icons";
+import { cn } from "../../utils/cn.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { Chip } from "../Chip/Chip.js";
+import { Combobox } from "../Combobox/Combobox.js";
+import { ComboboxLoading, ComboboxPopover } from "../Combobox/ComboboxPopover.js";
+function MultiSelect({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  emptyText,
+  loading = false,
+  inputValue,
+  onInputChange,
+  onCreate,
+  maxVisibleChips = 3,
+  disabled,
+  className,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  const messages = useNexubMessages();
+  const [value = [], setValue] = useControllableState({
+    value: valueProp,
+    defaultValue: defaultValue ?? [],
+    onChange: onValueChange
+  });
+  const [innerSearch, setInnerSearch] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const search = inputValue ?? innerSearch;
+  const setSearch = (text2) => {
+    setInnerSearch(text2);
+    onInputChange?.(text2);
+  };
+  const [labels, setLabels] = React.useState(() => /* @__PURE__ */ new Map());
+  const missing = options.some((o) => labels.get(o.value) !== o.label);
+  if (missing) setLabels(new Map([...labels, ...options.map((o) => [o.value, o.label])]));
+  const labelOf = (v) => labels.get(v) ?? options.find((o) => o.value === v)?.label ?? v;
+  const toggle = (v) => setValue(value.includes(v) ? value.filter((x) => x !== v) : [...value, v]);
+  const remove = (v) => setValue(value.filter((x) => x !== v));
+  const text = search.trim();
+  const canCreate = !!onCreate && !loading && text !== "" && !options.some((o) => o.label.toLowerCase() === text.toLowerCase());
+  const hiddenCount = Math.max(0, value.length - maxVisibleChips);
+  const chips = /* @__PURE__ */ jsxs(Fragment, { children: [
+    value.slice(0, maxVisibleChips).map((v) => /* @__PURE__ */ jsx(
+      Chip,
+      {
+        size: "sm",
+        onRemove: disabled ? void 0 : () => remove(v),
+        removeLabel: messages.removeOption(labelOf(v)),
+        children: labelOf(v)
+      },
+      v
+    )),
+    hiddenCount > 0 && /* @__PURE__ */ jsxs(Chip, { size: "sm", children: [
+      "+",
+      messages.moreCount(hiddenCount)
+    ] })
+  ] });
+  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,
+          before: chips,
+          disabled,
+          input: {
+            id,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            placeholder: value.length ? void 0 : placeholder ?? messages.searchPlaceholder,
+            value: search,
+            onValueChange: (t) => {
+              setSearch(t);
+              setOpen(true);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Backspace" && search === "" && value.length) remove(value[value.length - 1]);
+            }
+          },
+          children: /* @__PURE__ */ jsx(Combobox.List, { "aria-multiselectable": "true", children: loading ? /* @__PURE__ */ jsx(ComboboxLoading, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            !canCreate && /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyText ?? messages.noResults }),
+            options.map((opt) => {
+              const checked = value.includes(opt.value);
+              return /* @__PURE__ */ jsxs(
+                Combobox.Item,
+                {
+                  value: opt.label,
+                  keywords: [opt.value],
+                  "aria-checked": checked,
+                  onSelect: () => {
+                    toggle(opt.value);
+                    if (search) setSearch("");
+                  },
+                  className: "gap-2",
+                  children: [
+                    /* @__PURE__ */ jsx(Check, { size: "sm", "aria-hidden": "true", className: cn(!checked && "invisible") }),
+                    opt.label
+                  ]
+                },
+                opt.value
+              );
+            }),
+            canCreate && /* @__PURE__ */ jsxs(
+              Combobox.Item,
+              {
+                forceMount: true,
+                value: "\0",
+                onSelect: () => {
+                  onCreate(text);
+                  setSearch("");
+                },
+                className: "gap-2",
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { size: "sm", "aria-hidden": "true" }),
+                  messages.createOption(text)
+                ]
+              }
+            )
+          ] }) })
+        }
+      )
+    }
+  );
+}
+MultiSelect.displayName = "MultiSelect";
+export {
+  MultiSelect
+};

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

@@ -0,0 +1,2 @@
+export { MultiSelect } from './MultiSelect.js';
+export type { MultiSelectProps, MultiSelectOption } from './MultiSelect.js';

package/dist/components/MultiSelect/index.js

@@ -0,0 +1,4 @@
+import { MultiSelect } from "./MultiSelect.js";
+export {
+  MultiSelect
+};

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

@@ -160,6 +160,8 @@ export { Select } from './components/Select/index.js';
 export { Combobox } from './components/Combobox/index.js';
 export { Autocomplete } from './components/Autocomplete/index.js';
 export type { AutocompleteOption, AutocompleteProps } from './components/Autocomplete/index.js';
+export { MultiSelect } from './components/MultiSelect/index.js';
+export type { MultiSelectOption, MultiSelectProps } from './components/MultiSelect/index.js';
 export { Switch } from './components/Switch/index.js';
 export type { SwitchProps } from './components/Switch/index.js';
 export { Checkbox } from './components/Checkbox/index.js';
@@ -182,7 +184,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 +193,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 +204,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

@@ -89,6 +89,7 @@ import { Drawer, Sheet } from "./components/Drawer/index.js";
 import { Select } from "./components/Select/index.js";
 import { Combobox } from "./components/Combobox/index.js";
 import { Autocomplete } from "./components/Autocomplete/index.js";
+import { MultiSelect } from "./components/MultiSelect/index.js";
 import { Switch } from "./components/Switch/index.js";
 import { Checkbox } from "./components/Checkbox/index.js";
 import { RadioGroup } from "./components/RadioGroup/index.js";
@@ -115,7 +116,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";
@@ -201,6 +202,7 @@ export {
   MessageActions,
   MessageBubble,
   MoneyInput,
+  MultiSelect,
   NavigationMenu,
   NavigationRail,
   NexubProvider,
@@ -271,6 +273,7 @@ export {
   containerVariants,
   defaultMessageStrings,
   defaultMessages,
+  fileAccepted,
   headingVariants,
   iconButtonVariants,
   inputVariants,