@vvedantb/ui 0.17.1 → 0.18.0

package/src/ui/list-row.tsx

@@ -0,0 +1,232 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+import { cn } from "../utils/cn";
+import { SURFACE_RADIUS_CLASS } from "../utils/surface-radius";
+import { useCn, useUiConfig } from "./ui-config";
+
+/**
+ * Apply to any interactive control nested inside a `<ListRow>` — a checkbox, a
+ * menu trigger, a dismiss button. It lifts the control above the row's stretched
+ * click overlay so the control receives its own clicks instead of the row's.
+ */
+export const LIST_ROW_CONTROL_CLASS = "relative z-2";
+
+/**
+ * The shell every selectable list row shares: surface, hairline, accent stripe,
+ * hover, selected state, press feedback, and focus ring.
+ *
+ * ## Why a stretched overlay rather than a wrapping button
+ *
+ * The obvious shape — make the whole row a `<button>` — is unusable here,
+ * because these rows embed their own controls: a selection checkbox, tooltip
+ * triggers, a dismiss action. A button inside a button is invalid HTML, and the
+ * inner control never receives its clicks. The usual workaround,
+ * `role="button" tabIndex={0}` on a div, needs a hand-written `Enter`/`Space`
+ * key handler and an `if (e.detail === 0) return` guard to stop that handler
+ * firing twice.
+ *
+ * So the row body stays a plain `<div>`, and a real `<button>`, `<a>`, or router
+ * `<Link>` (via {@link ListRowProps.link}) is stretched across it at `z-1`.
+ * The native element supplies the keyboard behaviour, the accessible role, and
+ * — for anchors/links — middle-click and Cmd-click. Nested controls opt above
+ * the overlay with {@link LIST_ROW_CONTROL_CLASS}.
+ *
+ * Prefer {@link ListRowProps.link} with a router `<Link>` for in-app paths so
+ * the router's `rewrite` owns the address-bar href. Use {@link ListRowProps.href}
+ * only for external URLs (or when no router is available).
+ *
+ * The focus ring is drawn by the row, not the overlay. Rows clip their
+ * decoration with `overflow-hidden` and a ring is a box-shadow, so a ring on the
+ * overlay would be clipped away and keyboard focus would be invisible. The
+ * `has-[…]` selector is scoped to the overlay's `data-slot` so a focused nested
+ * control does not also light up the whole row.
+ *
+ * ## Why it forwards a ref and spreads the rest
+ *
+ * Rows are the child of a `<ContextMenuTrigger asChild>`. Radix's `asChild`
+ * clones the child to inject its own ref and `onContextMenu`/`onPointerDown`
+ * handlers, so a row that neither forwards a ref nor spreads what it is handed
+ * drops every one of them and the right-click menu silently never opens.
+ */
+export interface ListRowProps extends Omit<
+  React.ComponentPropsWithoutRef<"div">,
+  "onClick" | "children"
+> {
+  children: React.ReactNode;
+  /**
+   * Background class for the 4px stripe down the leading edge — the row's
+   * status colour. Omit for rows that carry no status.
+   */
+  accentClassName?: string;
+  /** Current row. Fills the surface and recolours the hairline. */
+  selected?: boolean;
+  /**
+   * Router link (or any single element) used as the stretched overlay. Props
+   * are merged via Radix `Slot`. Prefer this over {@link href} for in-app
+   * navigation so rewrites apply to the rendered `href`.
+   */
+  link?: React.ReactElement;
+  /**
+   * Renders the overlay as a raw `<a>`. Use for external URLs. In-app paths
+   * should use {@link link} instead.
+   */
+  href?: string;
+  /**
+   * Fires on plain (non-modified) clicks. With {@link link}, call
+   * `event.preventDefault()` to cancel navigation (e.g. selection mode). With
+   * {@link href}, the row always prevents the browser navigation and expects
+   * this handler to navigate in-app if needed.
+   */
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  /**
+   * Names the row for screen readers, since the overlay has no text of its own.
+   * Lands on the overlay rather than the shell, so it labels the control that
+   * actually carries the role.
+   */
+  "aria-label"?: string;
+  className?: string;
+  /** Padding for the row body. Defaults to the standard row inset. */
+  contentClassName?: string;
+  /** Content layered behind the row body, such as a hover glow. */
+  decoration?: React.ReactNode;
+}
+
+export interface ListRowConfig {
+  /**
+   * Replaces the built-in classes of a part. The row is `root`, plus
+   * `interactive` when it has a `link`, `href` or `onClick`, plus `selected`
+   * or `idle`.
+   */
+  classes?: {
+    /** Shell: radius, clipping, transition and the overlay focus ring. */
+    root?: string;
+    /** Press feedback, added when the row is interactive. */
+    interactive?: string;
+    /** Fill and ring of the current row. */
+    selected?: string;
+    /** Fill and hover of every other row. */
+    idle?: string;
+    /** The 4px status stripe (its colour comes from `accentClassName`). */
+    accent?: string;
+    /** The stretched `<button>` / `<a>` / `link` overlay. */
+    overlay?: string;
+    /** Row body padding (a caller `contentClassName` merges after it). */
+    content?: string;
+  };
+}
+
+const defaultClasses = {
+  root: cn(
+    "group relative overflow-hidden",
+    SURFACE_RADIUS_CLASS,
+    "transition-[background-color,scale] duration-200",
+    "has-[[data-slot=row-control]:focus-visible]:ring-2 has-[[data-slot=row-control]:focus-visible]:ring-ring/35",
+  ),
+  interactive: "active:scale-[0.99]",
+  selected: "bg-primary/5 ring-1 ring-primary/30",
+  idle: "bg-card hover:bg-surface-secondary",
+  accent: "absolute inset-y-2 left-0 w-1 rounded-r-full",
+  overlay: "absolute inset-0 z-1 cursor-pointer focus-visible:outline-hidden",
+  content: "relative p-2.5 pl-3 text-left",
+};
+
+function isModifiedClick(event: React.MouseEvent): boolean {
+  return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+}
+
+const ListRow = React.forwardRef<HTMLDivElement, ListRowProps>(function ListRow(
+  {
+    children,
+    accentClassName,
+    selected = false,
+    link,
+    href,
+    onClick,
+    className,
+    contentClassName,
+    decoration,
+    "aria-label": ariaLabel,
+    ...props
+  },
+  ref,
+) {
+  const classes = { ...defaultClasses, ...useUiConfig("ListRow")?.classes };
+  const merge = useCn();
+  const interactive =
+    link !== undefined || href !== undefined || onClick !== undefined;
+
+  const overlayClasses = classes.overlay;
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={merge(
+        classes.root,
+        interactive && classes.interactive,
+        selected ? classes.selected : classes.idle,
+        className,
+      )}
+    >
+      {decoration}
+      {accentClassName ? (
+        <div
+          className={merge(classes.accent, accentClassName)}
+        />
+      ) : null}
+      {link !== undefined ? (
+        <Slot
+          data-slot="row-control"
+          aria-label={ariaLabel}
+          className={overlayClasses}
+          onClick={(event: React.MouseEvent<HTMLElement>) => {
+            // Modified clicks are for new tab / window — leave navigation alone.
+            if (!isModifiedClick(event)) {
+              onClick?.(event);
+            }
+            // Own the click so a wrapping parent (e.g. KanbanCard) does not
+            // also treat it as a row activation.
+            event.stopPropagation();
+          }}
+        >
+          {link}
+        </Slot>
+      ) : href !== undefined ? (
+        <a
+          href={href}
+          onClick={(event) => {
+            if (onClick === undefined) return;
+            // A modified click is the entire reason this is an `<a>` — let the
+            // browser open the new tab or window itself. A plain click is
+            // handled in-app, so the navigation has to be cancelled or the
+            // row would also hard-reload the page out from under the router.
+            if (isModifiedClick(event)) return;
+            event.preventDefault();
+            onClick(event);
+            event.stopPropagation();
+          }}
+          data-slot="row-control"
+          aria-label={ariaLabel}
+          className={overlayClasses}
+        />
+      ) : onClick !== undefined ? (
+        <button
+          type="button"
+          onClick={(event) => {
+            onClick(event);
+            event.stopPropagation();
+          }}
+          data-slot="row-control"
+          aria-label={ariaLabel}
+          className={overlayClasses}
+        />
+      ) : null}
+      <div className={merge(classes.content, contentClassName)}>
+        {children}
+      </div>
+    </div>
+  );
+});
+
+export { ListRow };

package/src/ui/loading-state.tsx

@@ -0,0 +1,215 @@
+import { useRef, useSyncExternalStore, type CSSProperties } from "react";
+
+import { cn } from "../utils/cn";
+import { bindRuntimeAnimation } from "../utils/runtimeVisibility";
+import { quantizedSnapshot, subscribeQuantized } from "../utils/sharedClock";
+import { useUiConfig } from "./ui-config";
+
+/* ─────────────────────────────────────────────────────────
+ * LOADING STATE — pixel-grid loader for long-running work
+ *
+ * Variants:
+ *   Drive  — square cells, chevron wavefront driving right;
+ *            the 650ms cycle is shorter than the sweep, so
+ *            two fronts are always in flight
+ *   Dots   — same wavefront, circular cells
+ *   Orbit  — a comet lapping the grid perimeter
+ *
+ * Cells pulse on WAAPI, not a CSS `animation`: a CSS one
+ * fires `animationiteration` every cycle, and React's
+ * eagerly-attached root listeners turn each into a main-
+ * thread style recalc (~14×/s per mounted loader). WAAPI
+ * emits no animation events and runs the same keyframes.
+ *
+ * Paired with a label and a live elapsed timer in mono
+ * tabular figures.
+ *
+ * Source: https://21st.dev/@theshanelevine/components/loading-state
+ * ───────────────────────────────────────────────────────── */
+
+export type LoadingStateVariant = "Drive" | "Dots" | "Orbit";
+/** `default` = 4px cells (~15px grid). `sm` = 3px cells (~11px grid). */
+export type LoadingStateSize = "default" | "sm";
+
+/** Cell colours for the grid's left, middle and right column. */
+export type LoadingStateColors = readonly [string, string, string];
+
+export interface LoadingStateConfig {
+  /** Default for the `label` prop. */
+  label?: string;
+  /** Default for the `colors` prop. */
+  colors?: LoadingStateColors;
+  /** Default for the `labelStyle` prop. */
+  labelStyle?: CSSProperties;
+  /** Replaces the built-in classes of a part. */
+  classes?: {
+    /** The label text. Default `text-sm font-medium text-muted-foreground`. */
+    label?: string;
+  };
+}
+
+const SIZE_TOKENS: Record<
+  LoadingStateSize,
+  { cellPx: number; gapPx: number; radiusClass: string }
+> = {
+  // 3×3px + 2×1px gaps = 11px.
+  sm: { cellPx: 3, gapPx: 1, radiusClass: "rounded-[0.5px]" },
+  default: { cellPx: 4, gapPx: 1.5, radiusClass: "rounded-[1px]" },
+};
+
+const chevron = Array.from({ length: 9 }, (_, i) => {
+  const r = Math.floor(i / 3);
+  const c = i % 3;
+  return (c + Math.abs(r - 1)) * 90;
+});
+
+const ORBIT_ORDER = [0, 1, 2, 5, 8, 7, 6, 3];
+const orbit = Array.from({ length: 9 }, (_, i) => {
+  const k = ORBIT_ORDER.indexOf(i);
+  return k === -1 ? null : k * 110;
+});
+
+const PATTERNS: Record<
+  LoadingStateVariant,
+  { delays: (number | null)[]; dur: number; round: boolean }
+> = {
+  Drive: { delays: chevron, dur: 650, round: false },
+  Dots: { delays: chevron, dur: 650, round: true },
+  Orbit: { delays: orbit, dur: 950, round: false },
+};
+
+const DEFAULT_COLORS: LoadingStateColors = ["currentColor", "currentColor", "currentColor"];
+
+const defaultLabelClass = "text-sm font-medium text-muted-foreground";
+
+/** Started on attach, cancelled on detach. `undefined` for a gap cell. */
+type PulseRef = ((cell: HTMLSpanElement) => () => void) | undefined;
+
+/**
+ * One ref callback per cell. The easing sits on the keyframes, not in the
+ * options, because CSS applies `animation-timing-function` per segment —
+ * as an option it would ease the whole cycle instead. No `fill`, so during
+ * its delay a cell keeps the static inline opacity, as under CSS.
+ */
+function pulseRefs(delays: (number | null)[], dur: number): PulseRef[] {
+  return delays.map((d) =>
+    d === null
+      ? undefined
+      : (cell: HTMLSpanElement) => {
+          const pulse = cell.animate(
+            [
+              { opacity: 0.12, easing: "ease-in-out" },
+              { opacity: 1, easing: "ease-in-out" },
+              { opacity: 0.12 },
+            ],
+            { duration: dur, delay: d, iterations: Infinity },
+          );
+          return bindRuntimeAnimation(cell, pulse);
+        },
+  );
+}
+
+/**
+ * Built once per variant, because these identities have to be stable: a ref
+ * callback built during render would be a new function every render, and React
+ * detaches and reattaches on identity change — restarting the pulse each time
+ * (the labelled variant re-renders 10×/s off `useElapsed`).
+ */
+const PULSE_REFS: Record<LoadingStateVariant, PulseRef[]> = {
+  Drive: pulseRefs(PATTERNS.Drive.delays, PATTERNS.Drive.dur),
+  Dots: pulseRefs(PATTERNS.Dots.delays, PATTERNS.Dots.dur),
+  Orbit: pulseRefs(PATTERNS.Orbit.delays, PATTERNS.Orbit.dur),
+};
+
+const ELAPSED_MS = 100;
+const noopSubscribe = () => () => {};
+
+function useElapsed(enabled: boolean) {
+  const startedAt = useRef(Date.now());
+  const tick = useSyncExternalStore(
+    enabled
+      ? (onChange) => subscribeQuantized(ELAPSED_MS, onChange)
+      : noopSubscribe,
+    () => quantizedSnapshot(ELAPSED_MS),
+    () => quantizedSnapshot(ELAPSED_MS),
+  );
+  const total = enabled ? Math.max(0, (tick - startedAt.current) / 1000) : 0;
+  if (total < 60) return `${total.toFixed(1)}s`;
+  return `${Math.floor(total / 60)}m ${(total % 60).toFixed(1)}s`;
+}
+
+export interface LoadingStateProps {
+  /** Label text, also the `aria-label` when `iconOnly`. Default `UiConfig.LoadingState.label`, else `"Working"`. */
+  label?: string;
+  variant?: LoadingStateVariant;
+  size?: LoadingStateSize;
+  /** Pixel grid only — no label or elapsed timer. */
+  iconOnly?: boolean;
+  /** Column colours. Default `UiConfig.LoadingState.colors`, else `currentColor`. */
+  colors?: LoadingStateColors;
+  /** Inline style for the label, e.g. a shimmer gradient. Default `UiConfig.LoadingState.labelStyle`. */
+  labelStyle?: CSSProperties;
+}
+
+export function LoadingState({
+  label: labelProp,
+  variant = "Drive",
+  size = "default",
+  iconOnly = false,
+  colors: colorsProp,
+  labelStyle: labelStyleProp,
+}: LoadingStateProps) {
+  const config = useUiConfig("LoadingState");
+  const label = labelProp ?? config?.label ?? "Working";
+  const colors = colorsProp ?? config?.colors ?? DEFAULT_COLORS;
+  const labelStyle = labelStyleProp ?? config?.labelStyle;
+  const elapsed = useElapsed(!iconOnly);
+  const { delays, round } = PATTERNS[variant];
+  const { cellPx, gapPx, radiusClass } = SIZE_TOKENS[size];
+
+  const grid = (
+    <span
+      aria-hidden
+      data-anim-chrome=""
+      className="grid grid-cols-3"
+      style={{
+        gap: gapPx,
+        gridTemplateColumns: `repeat(3, ${cellPx}px)`,
+      }}
+    >
+      {delays.map((d, i) => (
+        <span
+          key={i}
+          ref={PULSE_REFS[variant][i]}
+          className={round ? "rounded-full" : radiusClass}
+          style={{
+            width: cellPx,
+            height: cellPx,
+            backgroundColor: colors[i % 3],
+            opacity: d === null ? 0.07 : 0.15,
+          }}
+        />
+      ))}
+    </span>
+  );
+
+  if (iconOnly) {
+    return (
+      <div className="flex w-fit items-center" role="status" aria-label={label}>
+        {grid}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-fit items-center gap-2.5">
+      {grid}
+      <span className={cn(config?.classes?.label ?? defaultLabelClass)} style={labelStyle}>
+        {label}
+      </span>
+      <span className="font-mono text-[12px] text-muted-foreground tabular-nums">
+        {elapsed}
+      </span>
+    </div>
+  );
+}

package/src/ui/popover.tsx

@@ -1,43 +1,76 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { cn } from "../utils/cn";
 import {
   floatingSurfaceAnimateClass,
   floatingSurfaceClass,
 } from "./_menu-classes";
 import { fitViewportClass } from "./_menu-parts";
+import { useCn, useUiConfig } from "./ui-config";
+
+type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;
+
+/** App defaults for `Popover*` (see `UiConfigProvider`). */
+export interface PopoverConfig {
+  /** Replaces the built-in classes of a part. */
+  classes?: { trigger?: string; content?: string };
+  /** Default for `PopoverContent` `sideOffset`. */
+  sideOffset?: number;
+  /** Default for `PopoverContent` `collisionPadding`. */
+  collisionPadding?: PopoverContentProps["collisionPadding"];
+}
 
 const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverTrigger = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
+>((props, ref) => {
+  const trigger = useUiConfig("Popover")?.classes?.trigger;
+  const merge = useCn();
+  // Without config, pass props untouched: Radix's Slot turns an explicit
+  // `className={undefined}` into `class=""`.
+  if (trigger === undefined) return <PopoverPrimitive.Trigger ref={ref} {...props} />;
+  const { className, ...rest } = props;
+  return <PopoverPrimitive.Trigger ref={ref} className={merge(trigger, className)} {...rest} />;
+});
+PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
 
 const PopoverContent = React.forwardRef<
   React.ComponentRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+  PopoverContentProps & {
     /**
      * Grow from the trigger, keep 8px from the viewport edge (unless
      * `collisionPadding` is set) and, on small screens, cap width and height.
      */
     fitViewport?: boolean;
   }
->(({ className, align = "center", sideOffset = 6, fitViewport, collisionPadding, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      collisionPadding={fitViewport ? (collisionPadding ?? 8) : collisionPadding}
-      className={cn(
-        "z-50 w-72 max-sm:max-w-[calc(100vw-2rem)] max-sm:max-h-[85dvh] max-sm:overflow-y-auto p-4 outline-none",
-        floatingSurfaceClass,
-        floatingSurfaceAnimateClass,
-        fitViewport &&
-          `origin-[var(--radix-popper-transform-origin)] max-sm:max-w-[calc(100vw-1.5rem)] ${fitViewportClass}`,
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
+>(({ className, align = "center", sideOffset, fitViewport, collisionPadding, ...props }, ref) => {
+  const config = useUiConfig("Popover");
+  const merge = useCn();
+  const padding = collisionPadding ?? config?.collisionPadding;
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset ?? config?.sideOffset ?? 6}
+        collisionPadding={fitViewport ? (padding ?? 8) : padding}
+        className={merge(
+          config?.classes?.content ?? [
+            "z-50 w-72 max-sm:max-w-[calc(100vw-2rem)] max-sm:max-h-[85dvh] max-sm:overflow-y-auto p-4 outline-none",
+            floatingSurfaceClass,
+            floatingSurfaceAnimateClass,
+          ],
+          fitViewport &&
+            `origin-[var(--radix-popper-transform-origin)] max-sm:max-w-[calc(100vw-1.5rem)] ${fitViewportClass}`,
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+});
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent };
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };

package/src/ui/progress.tsx

@@ -1,25 +1,37 @@
 import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { cn } from "../utils/cn";
+import { useCn, useUiConfig } from "./ui-config";
+
+export interface ProgressConfig {
+  /** Replaces the built-in classes of a part. A part left out keeps its default. */
+  classes?: { root?: string; indicator?: string };
+}
 
 const Progress = React.forwardRef<
   React.ComponentRef<typeof ProgressPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative h-2.5 w-full overflow-hidden rounded-full bg-default/85",
-      className,
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 rounded-full bg-primary transition-transform duration-300 ease-smooth"
-      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-));
+>(({ className, value, ...props }, ref) => {
+  const classes = useUiConfig("Progress")?.classes;
+  const merge = useCn();
+  return (
+    <ProgressPrimitive.Root
+      ref={ref}
+      className={merge(
+        classes?.root ?? "relative h-2.5 w-full overflow-hidden rounded-full bg-default/85",
+        className,
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        className={
+          classes?.indicator ??
+          "h-full w-full flex-1 rounded-full bg-primary transition-transform duration-300 ease-smooth"
+        }
+        style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+});
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 export { Progress };

package/src/ui/refresh-spin-icon.tsx

@@ -0,0 +1,41 @@
+import { IconRefresh } from "@tabler/icons-react";
+import { CrossfadeIcon } from "./crossfade-icon";
+import { Spinner } from "./spinner";
+import { useCn } from "./ui-config";
+
+/**
+ * Refresh glyph for a control that reloads something: it crossfades to
+ * the `circle` {@link Spinner} while the action is in flight.
+ *
+ * One component so every toolbar swaps glyph and spinner the same way, with
+ * the `soft` crossfade.
+ *
+ * `className` sizes the slot and both glyphs. Inside a `Button`, the button's
+ * `[&_svg]:size-*` rule wins on specificity, so pass a matching size to keep
+ * the slot and the glyph the same box.
+ */
+function RefreshSpinIcon({
+  busy,
+  className = "size-4",
+}: {
+  busy: boolean;
+  className?: string;
+}) {
+  const merge = useCn();
+  return (
+    <CrossfadeIcon
+      show={busy}
+      trueKey="busy"
+      falseKey="idle"
+      variant="soft"
+      className={merge(
+        "relative flex shrink-0 items-center justify-center",
+        className,
+      )}
+      whenTrue={<Spinner variant="circle" size="sm" className={className} />}
+      whenFalse={<IconRefresh className={className} />}
+    />
+  );
+}
+
+export { RefreshSpinIcon };