@nexub/react 7.2.0 → 7.4.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.2.0",
+  "version": "7.4.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, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",

package/dist/components/Accordion/Accordion.js

@@ -33,7 +33,7 @@ const Trigger = React.forwardRef(
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronDown, { size: "sm", className: "shrink-0 transition-transform duration-200", "aria-hidden": "true" })
+        /* @__PURE__ */ jsx(ChevronDown, { size: "sm", className: "shrink-0 transition-transform duration-spatial-fast ease-spatial-fast", "aria-hidden": "true" })
       ]
     }
   ) })

package/dist/components/Avatar/Avatar.d.ts

@@ -3,11 +3,14 @@ import { type VariantProps } from 'class-variance-authority';
 export declare const avatarVariants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
 export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof avatarVariants> {
     src?: string;
     name?: string;
     fallback?: React.ReactNode;
     badge?: boolean;
     badgeColor?: string;
+    /** Presence dot, added to the accessible name ("Ada Lovelace, Away"). Replaces `badge` when both are set. */
+    status?: AvatarStatus;
 }
 export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Avatar/Avatar.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { safeSrc } from "../../utils/safeHref.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 const avatarVariants = cva(
   "relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden bg-[var(--color-surface-container-high)] text-[var(--color-on-surface-muted)] font-medium select-none",
   {
@@ -28,6 +29,12 @@ const badgeSizeMap = {
   lg: "h-3 w-3",
   xl: "h-3.5 w-3.5"
 };
+const statusColor = {
+  online: "bg-[var(--color-success)]",
+  away: "bg-[var(--color-warning)]",
+  busy: "bg-[var(--color-error)]",
+  offline: "bg-[var(--color-outline)]"
+};
 function getInitials(name) {
   const parts = name.trim().split(/\s+/);
   const first = parts[0] ?? "";
@@ -44,19 +51,30 @@ const Avatar = React.forwardRef(
     fallback,
     badge,
     badgeColor,
+    status,
     ...props
   }, ref) => {
     const src = safeSrc(srcProp);
     const [failedSrc, setFailedSrc] = React.useState();
+    const [pendingSrc, setPendingSrc] = React.useState();
+    const hideUntilLoaded = React.useCallback(
+      (img) => {
+        if (img && !img.complete) setPendingSrc(img.getAttribute("src") ?? void 0);
+      },
+      []
+    );
+    const messages = useNexubMessages();
+    const statusLabel = status ? messages.presence[status] : void 0;
+    const label = [name, statusLabel].filter(Boolean).join(", ") || void 0;
     const showImage = Boolean(src) && failedSrc !== src;
     const initials = name ? getInitials(name) : null;
-    const labelled = Boolean(name || props["aria-label"] || props["aria-labelledby"]);
+    const labelled = Boolean(label || props["aria-label"] || props["aria-labelledby"]);
     return /* @__PURE__ */ jsxs(
       "span",
       {
         ref,
         className: cn(avatarVariants({ size }), className),
-        "aria-label": name ?? void 0,
+        "aria-label": label,
         role: labelled ? "img" : void 0,
         "aria-hidden": labelled ? void 0 : true,
         ...props,
@@ -66,7 +84,12 @@ const Avatar = React.forwardRef(
             {
               src,
               alt: name ?? "",
-              className: "h-full w-full object-cover",
+              ref: hideUntilLoaded,
+              className: cn(
+                "h-full w-full object-cover transition-opacity duration-effects-default ease-effects-default",
+                pendingSrc === src && "opacity-0"
+              ),
+              onLoad: () => setPendingSrc(void 0),
               onError: () => setFailedSrc(src)
             }
           ) : initials ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: initials }) : fallback ? fallback : (
@@ -82,13 +105,13 @@ const Avatar = React.forwardRef(
               }
             )
           ),
-          badge && /* @__PURE__ */ jsx(
+          (badge || status) && /* @__PURE__ */ jsx(
             "span",
             {
               className: cn(
                 "absolute bottom-0 end-0 rounded-full ring-2 ring-[var(--color-surface)]",
                 badgeSizeMap[size ?? "md"],
-                badgeColor ?? "bg-[var(--color-success)]"
+                status ? statusColor[status] : badgeColor ?? "bg-[var(--color-success)]"
               ),
               "aria-hidden": "true"
             }

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

@@ -1,2 +1,2 @@
 export { Avatar, avatarVariants } from './Avatar.js';
-export type { AvatarProps } from './Avatar.js';
+export type { AvatarProps, AvatarStatus } from './Avatar.js';

package/dist/components/Button/Button.d.ts

@@ -14,7 +14,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     /** Async feedback. `loading` blocks clicks (aria-disabled, focus kept),
      *  `success` draws a check, `error` shakes once. Not applied with `asChild`. */
     status?: ButtonStatus;
-    /** Alias for `status="loading"`. */
+    /** Alias for `status="loading"`. A `type="submit"` button also shows loading
+     *  while its parent `<form action>` is pending (React 19 `useFormStatus`). */
     loading?: boolean;
     /** Announced while loading. @default 'Loading' */
     loadingLabel?: string;

package/dist/components/Button/Button.js

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useFormStatus } from "react-dom";
 import { Slot } from "@radix-ui/react-slot";
 import { Loader2 } from "@nexub/icons";
 import { cva } from "class-variance-authority";
@@ -67,6 +68,22 @@ const buttonVariants = cva(
   }
 );
 const CheckIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { className: "nx-check-draw", pathLength: 1, d: "M20 6 9 17l-5-5" }) });
+const SPINNER_DELAY = 150;
+const SPINNER_MIN = 400;
+function useSpinner(busy) {
+  const [shown, setShown] = React.useState(busy);
+  const shownAt = React.useRef(0);
+  React.useEffect(() => {
+    if (shown) shownAt.current = Date.now();
+  }, [shown]);
+  React.useEffect(() => {
+    if (busy === shown) return;
+    const wait = busy ? SPINNER_DELAY : Math.max(0, SPINNER_MIN - (Date.now() - shownAt.current));
+    const t = setTimeout(() => setShown(busy), wait);
+    return () => clearTimeout(t);
+  }, [busy, shown]);
+  return shown;
+}
 const Button = React.forwardRef(
   ({
     className,
@@ -89,7 +106,9 @@ const Button = React.forwardRef(
     children,
     ...props
   }, ref) => {
-    const status = statusProp ?? (loading ? "loading" : "idle");
+    const formPending = useFormStatus().pending && props.type === "submit";
+    const status = statusProp ?? (loading || formPending ? "loading" : "idle");
+    const spinner = useSpinner(status === "loading");
     const handlePointerMove = usePointerSheen(magnetic, onPointerMove);
     const sharedProps = {
       className: cn(
@@ -111,7 +130,7 @@ const Button = React.forwardRef(
     }
     const busy = status === "loading";
     const swapLabel = status === "success" && successLabel !== void 0;
-    const overlay = busy ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) : status === "success" && !swapLabel ? /* @__PURE__ */ jsx(CheckIcon, {}) : null;
+    const overlay = spinner ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) : status === "success" && !swapLabel ? /* @__PURE__ */ jsx(CheckIcon, {}) : null;
     const announcement = status === "loading" ? loadingLabel : status === "success" ? successLabel ?? "Done" : status === "error" ? errorLabel : "";
     const button = /* @__PURE__ */ jsxs(
       "button",
@@ -130,14 +149,25 @@ const Button = React.forwardRef(
         "data-status": status === "idle" ? void 0 : status,
         ...sharedProps,
         children: [
-          /* @__PURE__ */ jsx("span", { className: cn("contents", overlay && "text-transparent [&_img]:invisible [&_svg]:invisible"), children: swapLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(CheckIcon, {}),
-            successLabel
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          successLabel === void 0 ? /* @__PURE__ */ jsxs("span", { className: cn("contents", overlay && "text-transparent [&_img]:invisible [&_svg]:invisible"), children: [
             leadingIcon,
             children,
             trailingIcon
-          ] }) }),
+          ] }) : (
+            // Both labels share one grid cell, so the button is as wide as the wider one
+            // whichever shows; the hidden one keeps its space.
+            /* @__PURE__ */ jsxs("span", { className: cn("inline-grid", overlay && "text-transparent [&_img]:invisible [&_svg]:invisible"), children: [
+              /* @__PURE__ */ jsxs("span", { className: cn("col-start-1 row-start-1 inline-flex items-center justify-center gap-2", swapLabel && "invisible"), "aria-hidden": swapLabel || void 0, children: [
+                leadingIcon,
+                children,
+                trailingIcon
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: cn("col-start-1 row-start-1 inline-flex items-center justify-center gap-2", !swapLabel && "invisible"), "aria-hidden": !swapLabel || void 0, children: [
+                swapLabel ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx("span", { className: "h-4 w-4" }),
+                successLabel
+              ] })
+            ] })
+          ),
           overlay && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true", children: overlay })
         ]
       }

package/dist/components/DataTable/DataTable.d.ts

@@ -91,5 +91,9 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     onRowOrderChange?: (data: TData[]) => void;
     /** Names a row in "Move ‹label›" and the move announcements. @default its position */
     getRowLabel?: (row: TData) => string;
+    /** Shows skeleton rows (one page's worth) and sets aria-busy on the table. */
+    loading?: boolean;
+    /** Shown in a full-width row when there are no rows. @default messages.noResults */
+    emptyState?: React.ReactNode;
 }
-export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, onRowOrderChange, getRowLabel, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;
+export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, onRowOrderChange, getRowLabel, loading, emptyState, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -23,6 +23,7 @@ import { Button } from "../Button/Button.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import { createGridNavigation } from "./gridNavigation.js";
 import { useReorder } from "../Sortable/reorder.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
 const alignText = {
   start: "text-start",
   end: "text-end",
@@ -170,6 +171,8 @@ function DataTable({
   onExpandedChange,
   onRowOrderChange,
   getRowLabel,
+  loading = false,
+  emptyState,
   caption,
   captionHidden = false,
   className,
@@ -429,6 +432,7 @@ function DataTable({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         "aria-rowcount": rowWin.virtual ? rows.length + 1 : void 0,
+        "aria-busy": loading || void 0,
         role: grid ? "grid" : void 0,
         onKeyDown: grid ? gridNav.onKeyDown : void 0,
         onFocus: grid ? gridNav.onFocus : void 0,
@@ -528,7 +532,7 @@ function DataTable({
               header.id
             );
           }) }, headerGroup.id)) }),
-          /* @__PURE__ */ jsx(TableBody, { children: rows.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(TableBody, { children: loading ? Array.from({ length: pagination?.pageSize ?? 5 }, (_, i) => /* @__PURE__ */ jsx(TableRow, { "data-loading": "", className: "hover:bg-transparent", children: table.getVisibleLeafColumns().map((c) => /* @__PURE__ */ jsx(TableCell, { className: cn(compact && "py-1.5"), children: /* @__PURE__ */ jsx(Skeleton, {}) }, c.id)) }, i)) : rows.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
             rowWin.before > 0 && /* @__PURE__ */ jsx(Spacer, { height: rowWin.before }),
             rowWin.indexes.map((i) => {
               const row = rows[i];
@@ -564,7 +568,7 @@ function DataTable({
             {
               colSpan: table.getVisibleLeafColumns().length,
               className: "h-24 text-center text-[var(--color-on-surface-muted)]",
-              children: messages.noResults
+              children: emptyState ?? messages.noResults
             }
           ) }) })
         ]

package/dist/components/Motion/Collapse.d.ts

@@ -4,6 +4,7 @@ export interface CollapseProps extends Omit<MotionBaseProps, 'easing'>, React.HT
     /**
      * Legacy: set it to use `--duration-*` + `--ease-{value}` instead of the
      * spatial spring for the height transition.
+     * @deprecated since 7.3, removed in 8.0 (see MotionBaseProps.easing).
      */
     easing?: MotionBaseProps['easing'];
     /**
@@ -15,10 +16,10 @@ export interface CollapseProps extends Omit<MotionBaseProps, 'easing'>, React.HT
     as?: React.ElementType;
 }
 /**
- * Collapse — animates `max-height` to reveal / hide content on the spatial
- * spring. Reduced motion snaps the height instead of animating it.
- * Height is measured from the content ref so you don't need to
- * provide an explicit height.
+ * Collapse — reveals / hides content on the spatial spring by animating a
+ * one-row grid from `0fr` to `1fr`, so the browser sizes it: no height is
+ * measured in JS and content that grows while open just grows. Reduced motion
+ * snaps instead of animating.
  *
  * ```tsx
  * <Collapse in={isOpen}>

package/dist/components/Motion/Collapse.js

@@ -13,63 +13,30 @@ const Collapse = React.forwardRef(function Collapse2({
   as: Tag = "div",
   ...rest
 }, ref) {
-  const innerRef = React.useRef(null);
   const reduced = usePrefersReducedMotion();
   const legacy = easing !== void 0;
-  const settleMs = duration === "instant" || reduced ? 0 : legacy ? DURATION_MS[duration] : SPRING_MS.spatial[SPRING_SPEED[duration]];
-  const [height, setHeight] = React.useState(visible ? "auto" : 0);
-  const [overflow, setOverflow] = React.useState(
-    visible ? "visible" : "hidden"
-  );
+  const instant = duration === "instant" || reduced;
+  const settleMs = instant ? 0 : legacy ? DURATION_MS[duration] : SPRING_MS.spatial[SPRING_SPEED[duration]];
   const [mounted, setMounted] = React.useState(unmountOnExit ? visible : true);
+  const [expanded, setExpanded] = React.useState(visible);
+  const [settled, setSettled] = React.useState(true);
   const prevVisible = React.useRef(visible);
   React.useEffect(() => {
-    const changed = prevVisible.current !== visible;
+    if (prevVisible.current === visible) return;
     prevVisible.current = visible;
-    if (!changed) return;
-    let raf1 = 0;
-    let raf2 = 0;
-    if (visible) {
-      setMounted(true);
-      raf1 = requestAnimationFrame(() => {
-        const el = innerRef.current;
-        if (el) {
-          setHeight(el.scrollHeight);
-          setOverflow("hidden");
-        }
-      });
-    } else {
-      const el = innerRef.current;
-      if (el) {
-        setHeight(el.scrollHeight);
-        setOverflow("hidden");
-        raf1 = requestAnimationFrame(() => {
-          raf2 = requestAnimationFrame(() => {
-            setHeight(typeof collapsedHeight === "number" ? collapsedHeight : 0);
-          });
-        });
-      }
+    setSettled(false);
+    if (!visible) {
+      setExpanded(false);
+      return;
     }
-    return () => {
-      cancelAnimationFrame(raf1);
-      cancelAnimationFrame(raf2);
-    };
-  }, [visible, collapsedHeight]);
+    setMounted(true);
+    const raf = requestAnimationFrame(() => setExpanded(true));
+    return () => cancelAnimationFrame(raf);
+  }, [visible]);
   const finish = React.useCallback(() => {
-    if (visible) {
-      setHeight("auto");
-      setOverflow("visible");
-    } else if (unmountOnExit) {
-      setMounted(false);
-    }
+    setSettled(true);
+    if (!visible && unmountOnExit) setMounted(false);
   }, [visible, unmountOnExit]);
-  const handleTransitionEnd = React.useCallback(
-    (e) => {
-      if (e.target !== e.currentTarget || e.propertyName !== "max-height") return;
-      finish();
-    },
-    [finish]
-  );
   const firstRender = React.useRef(true);
   React.useEffect(() => {
     if (firstRender.current) {
@@ -80,20 +47,23 @@ const Collapse = React.forwardRef(function Collapse2({
     return () => clearTimeout(t);
   }, [visible, settleMs, finish]);
   if (!mounted) return null;
-  const maxHeight = height === "auto" ? "none" : `${height}px`;
+  const overflow = expanded && settled ? "visible" : "hidden";
   return /* @__PURE__ */ jsx(
     Tag,
     {
       ref,
       style: {
-        maxHeight,
+        display: "grid",
+        gridTemplateRows: expanded ? "1fr" : "0fr",
         overflow,
-        transition: duration === "instant" || reduced ? "none" : legacy ? `max-height var(--duration-${duration}) var(--ease-${easing})` : spring("max-height", "spatial", SPRING_SPEED[duration]),
+        transition: instant ? "none" : legacy ? `grid-template-rows var(--duration-${duration}) var(--ease-${easing})` : spring("grid-template-rows", "spatial", SPRING_SPEED[duration]),
         ...style
       },
-      onTransitionEnd: handleTransitionEnd,
+      onTransitionEnd: (e) => {
+        if (e.target === e.currentTarget && e.propertyName === "grid-template-rows") finish();
+      },
       ...rest,
-      children: /* @__PURE__ */ jsx("div", { ref: innerRef, children })
+      children: /* @__PURE__ */ jsx("div", { style: { minHeight: collapsedHeight, overflow }, children })
     }
   );
 });

package/dist/components/Motion/motion.types.d.ts

@@ -12,6 +12,8 @@ export interface MotionBaseProps {
     /**
      * Legacy: set it to use the old `--duration-*` + `--ease-{value}` tokens
      * instead of springs. Omit it to ride the spring tokens.
+     * @deprecated since 7.3: the `--duration-*` / `--ease-*` tokens (tokens/motion.json) are
+     * retired in favour of the spring tokens. Removed in 8.0.
      */
     easing?: MotionEasing;
     /**

package/dist/components/NavigationMenu/NavigationMenu.js

@@ -50,7 +50,7 @@ const Trigger = React.forwardRef(
           ChevronDown,
           {
             size: "xs",
-            className: "relative ms-1 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative ms-1 transition-transform duration-spatial-fast ease-spatial-fast group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -96,6 +96,8 @@ const Viewport = React.forwardRef(
         "nx-motion nx-pop origin-top relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden",
         floatingSurface,
         "md:w-[var(--radix-navigation-menu-viewport-width)]",
+        // Resize between items on the spatial spring instead of snapping.
+        "transition-[width,height] duration-spatial-default ease-spatial-default motion-reduce:transition-none",
         className
       ),
       ...props

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";
@@ -20,7 +20,7 @@ const progressTrackVariants = cva(
   }
 );
 const progressFillVariants = cva(
-  "h-full rounded-full transition-all duration-300 ease-in-out",
+  "h-full rounded-full transition-all duration-spatial-default ease-spatial-default",
   {
     variants: {
       tone: {
@@ -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/Skeleton/Skeleton.d.ts

@@ -10,5 +10,14 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLSpanElement>, Va
     width?: string | number;
     height?: string | number;
     animated?: boolean;
+    /** Effect when `animated`: `pulse` fades, `shimmer` sweeps a highlight across. Both stop under reduced motion. @default 'pulse' */
+    animation?: 'pulse' | 'shimmer';
 }
 export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLSpanElement>>;
+export interface SkeletonTextProps extends React.HTMLAttributes<HTMLSpanElement>, Pick<SkeletonProps, 'animated' | 'animation'> {
+    /** Number of lines; the last is shorter. @default 3 */
+    lines?: number;
+}
+/** Placeholder paragraph. Each line is one line-height tall (inherited from the
+ *  surrounding text style), so swapping in the real text doesn't shift layout. */
+export declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Skeleton/Skeleton.js

@@ -29,6 +29,7 @@ const Skeleton = React.forwardRef(
     width,
     height,
     animated = true,
+    animation = "pulse",
     style,
     ...props
   }, ref) => {
@@ -40,7 +41,11 @@ const Skeleton = React.forwardRef(
       {
         ref,
         "aria-hidden": "true",
-        className: cn(skeletonVariants({ shape, animated }), className),
+        className: cn(
+          skeletonVariants({ shape, animated: animated && animation === "pulse" }),
+          animated && animation === "shimmer" && "nx-skeleton-shimmer",
+          className
+        ),
         style: sizeStyle || style ? { ...sizeStyle, ...style } : void 0,
         ...props
       }
@@ -48,7 +53,19 @@ const Skeleton = React.forwardRef(
   }
 );
 Skeleton.displayName = "Skeleton";
+const SkeletonText = React.forwardRef(
+  ({ className, lines = 3, animated, animation, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, "aria-hidden": "true", className: cn("block", className), ...props, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx("span", { className: "flex h-[1lh] items-center", children: /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      animated,
+      animation,
+      className: i === lines - 1 && lines > 1 ? "w-3/5" : void 0
+    }
+  ) }, i)) })
+);
+SkeletonText.displayName = "SkeletonText";
 export {
   Skeleton,
+  SkeletonText,
   skeletonVariants
 };

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

@@ -1,2 +1,2 @@
-export { Skeleton, skeletonVariants } from './Skeleton.js';
-export type { SkeletonProps } from './Skeleton.js';
+export { Skeleton, SkeletonText, skeletonVariants } from './Skeleton.js';
+export type { SkeletonProps, SkeletonTextProps } from './Skeleton.js';

package/dist/components/Skeleton/index.js

@@ -1,5 +1,6 @@
-import { Skeleton, skeletonVariants } from "./Skeleton.js";
+import { Skeleton, SkeletonText, skeletonVariants } from "./Skeleton.js";
 export {
   Skeleton,
+  SkeletonText,
   skeletonVariants
 };