@nexub/react 7.3.0 → 7.5.0

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

package/dist/components/Input/Input.js

@@ -1,8 +1,14 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { X } from "@nexub/icons";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { field, fieldDisabledWithin, fieldFocusWithin, fieldInvalid } from "../../utils/control.js";
+import { useMergedRefs } from "../../hooks/useMergedRefs.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Spinner } from "../Spinner/Spinner.js";
 const inputVariants = cva(
   [
     // The wrapper owns ALL focus styling (border + ring). Strip every possible
@@ -67,6 +73,7 @@ const addonVariants = cva(
     }
   }
 );
+const nearLimit = (length, max) => length >= max - Math.max(1, Math.ceil(max * 0.1));
 const Input = React.forwardRef(
   ({
     className,
@@ -78,26 +85,61 @@ const Input = React.forwardRef(
     trailingIcon,
     wrapperClassName,
     disabled,
+    clearable,
+    showCount,
+    loading,
     ...props
   }, ref) => {
     const hasAddon = Boolean(leadingAddon ?? trailingAddon);
+    const messages = useNexubMessages();
+    const innerRef = React.useRef(null);
+    const mergedRef = useMergedRefs(ref, innerRef);
+    const countId = React.useId();
+    const [uncontrolledLength, setLength] = React.useState(String(props.defaultValue ?? "").length);
+    const length = props.value !== void 0 && props.value !== null ? String(props.value).length : uncontrolledLength;
+    const max = props.maxLength;
+    const counting = Boolean(showCount && max !== void 0 && max >= 0);
+    const handleChange = (e) => {
+      setLength(e.target.value.length);
+      props.onChange?.(e);
+    };
+    const clear = () => {
+      const el = innerRef.current;
+      if (!el) return;
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(el, "");
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      el.focus();
+    };
     const inputEl = /* @__PURE__ */ jsx(
       "input",
       {
-        ref,
         className: cn(inputVariants({ size }), className),
         "aria-invalid": invalid ?? void 0,
+        "aria-busy": loading || void 0,
         disabled,
-        ...props
+        ...props,
+        "aria-describedby": [props["aria-describedby"], counting && countId].filter(Boolean).join(" ") || void 0,
+        onChange: handleChange,
+        ref: mergedRef
       }
     );
+    const showClear = clearable && length > 0 && !disabled && !props.readOnly;
+    const trailing = /* @__PURE__ */ jsxs(Fragment, { children: [
+      counting && /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-label-sm tabular-nums text-[var(--color-on-surface-muted)]", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: `${length}/${max}` }),
+        /* @__PURE__ */ jsx("span", { id: countId, className: "sr-only", "aria-live": nearLimit(length, max) ? "polite" : "off", children: messages.characterCount(length, max) })
+      ] }),
+      loading && /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "shrink-0" }),
+      showClear && /* @__PURE__ */ jsx(IconButton, { size: "xs", label: messages.clear, onClick: clear, className: "-me-1.5", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" }) }),
+      trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: trailingIcon })
+    ] });
     if (hasAddon) {
       return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full overflow-hidden", field, fieldFocusWithin, invalid && fieldInvalid), children: [
         leadingAddon && /* @__PURE__ */ jsx("span", { className: cn(addonVariants({ side: "leading" })), children: leadingAddon }),
         /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), "rounded-none border-0 shadow-none focus-within:shadow-none", wrapperClassName), children: [
           leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: leadingIcon }),
           inputEl,
-          trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: trailingIcon })
+          trailing
         ] }),
         trailingAddon && /* @__PURE__ */ jsx("span", { className: cn(addonVariants({ side: "trailing" })), children: trailingAddon })
       ] });
@@ -105,7 +147,7 @@ const Input = React.forwardRef(
     return /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), wrapperClassName), children: [
       leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: leadingIcon }),
       inputEl,
-      trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: trailingIcon })
+      trailing
     ] });
   }
 );

package/dist/components/Progress/Progress.d.ts

@@ -13,5 +13,9 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     max?: number;
     tone?: ToneValue;
     animated?: boolean;
+    /** `circular` draws a ring; same value/max/indeterminate semantics. @default 'linear' */
+    variant?: 'linear' | 'circular';
+    /** Linear only: splits the bar into N equal steps, filled up to the value. */
+    segments?: number;
 }
 export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Progress/Progress.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
@@ -43,6 +43,18 @@ const progressFillVariants = cva(
     }
   }
 );
+const ringTone = {
+  neutral: "stroke-[var(--color-outline)]",
+  info: "stroke-[var(--color-info)]",
+  success: "stroke-[var(--color-success)]",
+  warning: "stroke-[var(--color-warning)]",
+  danger: "stroke-[var(--color-error)]",
+  leap: "stroke-[var(--color-leap)]",
+  bookub: "stroke-[var(--color-bookub)]",
+  payub: "stroke-[var(--color-payub)]",
+  founderub: "stroke-[var(--color-founderub)]"
+};
+const ringSize = { sm: "size-6", md: "size-10", lg: "size-16" };
 const Progress = React.forwardRef(
   ({
     className,
@@ -51,6 +63,8 @@ const Progress = React.forwardRef(
     value,
     max = 100,
     animated = false,
+    variant = "linear",
+    segments,
     ...props
   }, ref) => {
     const isIndeterminate = value === void 0 || value === null;
@@ -60,31 +74,70 @@ const Progress = React.forwardRef(
     useIsomorphicLayoutEffect(() => {
       fillRef.current?.style.setProperty("width", `${percentage}%`);
     }, [percentage]);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        role: "progressbar",
-        "aria-valuenow": isIndeterminate ? void 0 : clampedValue,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        className: cn(progressTrackVariants({ size }), className),
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          "div",
+    const aria = {
+      role: "progressbar",
+      "aria-valuenow": isIndeterminate ? void 0 : clampedValue,
+      "aria-valuemin": 0,
+      "aria-valuemax": max
+    };
+    if (variant === "circular") {
+      return /* @__PURE__ */ jsx("div", { ref, ...aria, className: cn("inline-flex", ringSize[size ?? "md"], className), ...props, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 36", className: cn("size-full -rotate-90", isIndeterminate && "animate-spin motion-reduce:animate-none"), "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "15", fill: "none", strokeWidth: "4", className: "stroke-[var(--color-surface-container-high)]" }),
+        /* @__PURE__ */ jsx(
+          "circle",
           {
-            className: cn(
-              progressFillVariants({ tone }),
-              animated && "animate-pulse",
-              isIndeterminate && "animate-[nx-progress-indeterminate_1.4s_ease-in-out_infinite]"
-            ),
-            ref: fillRef,
+            cx: "18",
+            cy: "18",
+            r: "15",
+            fill: "none",
+            strokeWidth: "4",
+            strokeLinecap: "round",
+            pathLength: 100,
+            strokeDasharray: `${isIndeterminate ? 25 : percentage} 100`,
+            className: cn("transition-all duration-spatial-default ease-spatial-default", ringTone[tone]),
             "data-part": "fill",
             "data-indeterminate": isIndeterminate || void 0
           }
         )
+      ] }) });
+    }
+    if (segments && segments > 0 && !isIndeterminate) {
+      const filled = Math.round(percentage / 100 * segments);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          ...aria,
+          className: cn(progressTrackVariants({ size }), "flex gap-1 bg-transparent", className),
+          ...props,
+          children: Array.from({ length: segments }, (_, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-part": "segment",
+              "data-filled": i < filled || void 0,
+              className: cn(
+                "flex-1",
+                i < filled ? progressFillVariants({ tone }) : "rounded-full bg-[var(--color-surface-container-high)]"
+              )
+            },
+            i
+          ))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { ref, ...aria, className: cn(progressTrackVariants({ size }), className), ...props, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          progressFillVariants({ tone }),
+          animated && "animate-pulse",
+          isIndeterminate && "animate-[nx-progress-indeterminate_1.4s_ease-in-out_infinite]"
+        ),
+        ref: fillRef,
+        "data-part": "fill",
+        "data-indeterminate": isIndeterminate || void 0
       }
-    );
+    ) });
   }
 );
 Progress.displayName = "Progress";

package/dist/components/Select/Select.d.ts

@@ -1,7 +1,22 @@
 import * as React from 'react';
 import * as RadixSelect from '@radix-ui/react-select';
+export interface SelectRootProps extends RadixSelect.SelectProps {
+    /** Shows a clear button on the Trigger while there is a value; clearing calls `onValueChange('')` and shows the placeholder. */
+    clearable?: boolean;
+}
+export interface SelectContentProps extends RadixSelect.SelectContentProps {
+    /** A filter field at the top; items whose text (or `textValue`) doesn't match are hidden. Typing on an item moves to the field. */
+    searchable?: boolean;
+}
+export interface SelectItemProps extends RadixSelect.SelectItemProps {
+    /** A secondary line under the label: the option's accessible description, not part of its name. */
+    description?: React.ReactNode;
+}
 export declare const Select: {
-    Root: React.FC<RadixSelect.SelectProps>;
+    Root: {
+        ({ clearable, value, defaultValue, onValueChange, onOpenChange, ...props }: SelectRootProps): React.JSX.Element;
+        displayName: string;
+    };
     Group: React.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
     Value: React.ForwardRefExoticComponent<RadixSelect.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
     Trigger: React.ForwardRefExoticComponent<RadixSelect.SelectTriggerProps & {
@@ -9,8 +24,8 @@ export declare const Select: {
     } & React.RefAttributes<HTMLButtonElement>>;
     ScrollUpButton: React.ForwardRefExoticComponent<RadixSelect.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>>;
     ScrollDownButton: React.ForwardRefExoticComponent<RadixSelect.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<RadixSelect.SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
     Label: React.ForwardRefExoticComponent<RadixSelect.SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
-    Item: React.ForwardRefExoticComponent<RadixSelect.SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
     Separator: React.ForwardRefExoticComponent<RadixSelect.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>;
 };