@ttt-productions/ui-core 0.11.18 → 0.11.20

package/src/react/components/dropdown-menu.tsx

@@ -1,200 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Slottable } from "@radix-ui/react-slot"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "../../lib/utils.js"
-import { Spinner } from "./spinner.js"
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default gap-2 select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground elevation-raised data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border !bg-card p-1 text-popover-foreground elevation-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-    /**
-     * The action this item started is in flight: the item disables itself, sets
-     * `aria-busy`, and shows the spinner in place of its `icon`. Keeping the menu open
-     * meanwhile is the caller's `onSelect` (`event.preventDefault()`, close on settle).
-     */
-    pending?: boolean
-    /** Leading icon. While `pending`, the spinner takes its place. */
-    icon?: React.ReactNode
-  }
->(({ className, inset, pending = false, icon, disabled, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 app-dropdown-item",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-    {...(pending ? { "aria-busy": true, "data-pending": "" } : {})}
-    disabled={disabled || pending || undefined}
-  >
-    {/* Direct siblings, never a fragment: under `asChild` Radix Slot finds the Slottable
-        among its direct children and renders the icon/spinner inside the child element. */}
-    {pending ? <Spinner size="xs" /> : icon}
-    <Slottable>{children}</Slottable>
-  </DropdownMenuPrimitive.Item>
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => (
-  <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
-)
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}

package/src/react/components/end-of-list-indicator.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-import { CheckCircle2 } from "lucide-react";
-import { cn } from "../../lib/utils.js";
-
-export interface EndOfListIndicatorProps {
-  message?: string;
-  className?: string;
-  icon?: React.ReactNode;
-}
-
-export function EndOfListIndicator({
-  message = "You've reached the end!",
-  className,
-  icon,
-}: EndOfListIndicatorProps) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col items-center gap-2 py-8 text-center text-muted-foreground",
-        className,
-      )}
-    >
-      {icon ?? <CheckCircle2 className="h-6 w-6 text-[color:var(--success-icon)]" />}
-      <p className="text-sm">{message}</p>
-    </div>
-  );
-}

package/src/react/components/form.tsx

@@ -1,174 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form"
-
-import { cn } from "../../lib/utils.js"
-import { Label } from "./label.js"
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-  name: TName
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
-
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
-
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-})
-FormLabel.displayName = "FormLabel"
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-})
-FormControl.displayName = "FormControl"
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground break-words", className)}
-      {...props}
-    />
-  )
-})
-FormDescription.displayName = "FormDescription"
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : children
-
-  if (!body) return null
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-sm font-medium text-destructive break-words", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}

package/src/react/components/input.tsx

@@ -1,23 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "../../lib/utils.js"
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border-2 border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
-
-export { Input }

package/src/react/components/label.tsx

@@ -1,21 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils.js"
-
-const labelVariants = cva(
-  "text-sm font-bold leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }

package/src/react/components/layout/screen-adaptive-view.tsx

@@ -1,106 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { cn } from "../../../lib/utils.js";
-import { useMediaQuery } from "../../hooks/use-media-query.js";
-
-export type MaxWidthOption =
-  | "none"
-  | "sm"
-  | "md"
-  | "lg"
-  | "xl"
-  | "2xl"
-  | "3xl"
-  | "4xl"
-  | "5xl"
-  | "6xl"
-  | "7xl"
-  | "full";
-
-export interface ScreenAdaptiveViewProps {
-  /** Default content (mobile + base) */
-  children: React.ReactNode;
-
-  /** Optional content to use on lg and up */
-  lgContent?: React.ReactNode;
-
-  /** Optional content to use on xl and up */
-  xlContent?: React.ReactNode;
-
-  /** Max width applied at lg (>=1024px) */
-  lgMaxWidth?: MaxWidthOption;
-
-  /** Max width applied at xl (>=1280px) */
-  xlMaxWidth?: MaxWidthOption;
-
-  /** App-only escape hatch (try to avoid) */
-  className?: string;
-
-  /** App-only escape hatch (try to avoid) */
-  innerClassName?: string;
-}
-
-function widthClass(opt: MaxWidthOption | undefined) {
-  switch (opt) {
-    case "none":
-      return "screen-max-w-none";
-    case "sm":
-      return "screen-max-w-sm";
-    case "md":
-      return "screen-max-w-md";
-    case "lg":
-      return "screen-max-w-lg";
-    case "xl":
-      return "screen-max-w-xl";
-    case "2xl":
-      return "screen-max-w-2xl";
-    case "3xl":
-      return "screen-max-w-3xl";
-    case "4xl":
-      return "screen-max-w-4xl";
-    case "5xl":
-      return "screen-max-w-5xl";
-    case "6xl":
-      return "screen-max-w-6xl";
-    case "7xl":
-      return "screen-max-w-7xl";
-    case "full":
-      return "screen-max-w-full";
-    default:
-      return "screen-max-w-6xl";
-  }
-}
-
-export function ScreenAdaptiveView({
-  children,
-  lgContent,
-  xlContent,
-  lgMaxWidth = "4xl",
-  xlMaxWidth = "6xl",
-  className,
-  innerClassName,
-}: ScreenAdaptiveViewProps) {
-  const isLg = useMediaQuery("(min-width: 1024px)");
-  const isXl = useMediaQuery("(min-width: 1280px)");
-
-  // SSR-safe default: render base children as mobile (no max-width)
-  // After hydration, swaps to lg/xl content if provided.
-  const contentToShow =
-    (isXl && xlContent !== undefined && xlContent !== null)
-      ? xlContent
-      : (isLg && lgContent !== undefined && lgContent !== null)
-        ? lgContent
-        : children;
-
-  const sizeClass =
-    isXl ? widthClass(xlMaxWidth) : isLg ? widthClass(lgMaxWidth) : "screen-max-w-full";
-
-  return (
-    <div className={cn("screen-adaptive-root", className)}>
-      <div className={cn("screen-adaptive-inner", sizeClass, innerClassName)}>
-        {contentToShow}
-      </div>
-    </div>
-  );
-}

package/src/react/components/list-pagination.tsx

@@ -1,101 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { Button } from "./button.js";
-import { cn } from "../../lib/utils.js";
-import type { ListPaginationState } from "../hooks/use-paged-list.js";
-
-export interface ListPaginationProps {
-  /**
-   * Page state from `usePagedList` (known total),
-   * `useCursorPage().paginationFor(hasMore)` (unknown total), or any
-   * caller-owned state of the same shape.
-   */
-  pagination: ListPaginationState;
-  /**
-   * Disables BOTH controls while the next page is in flight, without hiding the
-   * row. Server-paged surfaces pass their query's `isFetching`; a slice-paged
-   * list has nothing to wait for and omits it.
-   */
-  busy?: boolean;
-  /** Optional extra classes. Merged with the component's own classes. */
-  className?: string;
-}
-
-/**
- * The ONE Previous / counter / Next control for paginated lists, in both
- * flavors. Pair it with the hook that owns the page state (`usePagedList` for a
- * client-side slice, `useCursorPage` — or the caller's own query state — for a
- * cursor feed; a cursor feed passes `pager.paginationFor(hasMore)`, which binds
- * the query's answer to these controls); this component owns only the controls,
- * so every paginated list reads and behaves the same (ENG-002, FRONTEND-001).
- *
- * The counter follows the flavor: a known `totalPages` reads "2 of 5", an
- * omitted one reads "Page 2". Everything else is identical in both flavors —
- * which is exactly why there is one component and not two.
- *
- * It renders NOTHING when neither direction is available, so no call site
- * repeats a `totalPages > 1` / `page > 1 || hasMore` guard. Edge state is real
- * `disabled` on the buttons (announced, and unclickable), and the counter is a
- * `status` live region so a page change is announced to screen readers.
- */
-export function ListPagination({ pagination, busy = false, className }: ListPaginationProps) {
-  const { currentPage, totalPages, canPreviousPage, canNextPage, goToPreviousPage, goToNextPage } =
-    pagination;
-
-  // The control that started the in-flight page shows the spinner. Cleared when `busy`
-  // ends — a render-phase adjustment, so there is no effect and no stale frame.
-  const [clicked, setClicked] = useState<"previous" | "next" | null>(null);
-  const [wasBusy, setWasBusy] = useState(busy);
-  if (busy !== wasBusy) {
-    setWasBusy(busy);
-    if (!busy) setClicked(null);
-  }
-  const previousPending = busy && clicked === "previous";
-  const nextPending = busy && clicked === "next";
-
-  // One visibility rule for both flavors. For a known total this is exactly
-  // `totalPages > 1`: page state is clamped into `1..totalPages`, so a
-  // single-page list has no reachable neighbour in either direction, and a
-  // multi-page list always has one. For a cursor feed it is the hand-rolled
-  // `page > 1 || hasMore`. `busy` deliberately does not hide the row — the
-  // controls grey out in place instead of vanishing mid-fetch.
-  if (!canPreviousPage && !canNextPage) return null;
-
-  return (
-    <div className={cn("flex w-full items-center justify-between gap-4 mt-4", className)}>
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={() => {
-          setClicked("previous");
-          goToPreviousPage();
-        }}
-        disabled={busy || !canPreviousPage}
-        pending={previousPending}
-        icon={<ChevronLeft className="icon-xs" />}
-        className="h-11 min-w-11"
-      >
-        Previous
-      </Button>
-      <span className="text-counter" role="status">
-        {totalPages === undefined ? `Page ${currentPage}` : `${currentPage} of ${totalPages}`}
-      </span>
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={() => {
-          setClicked("next");
-          goToNextPage();
-        }}
-        disabled={busy || !canNextPage}
-        pending={nextPending}
-        className="h-11 min-w-11"
-      >
-        Next
-        {nextPending ? null : <ChevronRight className="icon-xs" />}
-      </Button>
-    </div>
-  );
-}