extract ui to lib

src/components/Button.tsx

@@ -0,0 +1,137 @@
+import type { ElementType, MouseEventHandler } from 'react';
+import { Link } from 'react-router-dom';
+import type { ComponentSize } from './types';
+
+type ButtonType = 'solid' | 'outlined' | 'noborder';
+type ButtonVariant = 'primary' | 'secondary' | 'important';
+type NativeButtonType = 'button' | 'submit' | 'reset';
+
+type ButtonProps = {
+  label?: string;
+  type: ButtonType;
+  variant?: ButtonVariant;
+  size?: ComponentSize;
+  to?: string;
+  htmlType?: NativeButtonType;
+  onClick?: MouseEventHandler<HTMLElement>;
+  disabled?: boolean;
+  icon?: ElementType;
+  ariaLabel?: string;
+  className?: string;
+};
+
+const SIZE_CLASS: Record<ComponentSize, string> = {
+  sm: 'h-8 px-3 text-xs',
+  md: 'h-10 px-4 text-sm',
+  lg: 'h-12 px-5 text-base',
+  full: 'h-10 w-full px-4 text-sm'
+};
+
+const ICON_ONLY_SIZE_CLASS: Record<ComponentSize, string> = {
+  sm: 'h-8 w-8 !p-0',
+  md: 'h-10 w-10 !p-0',
+  lg: 'h-12 w-12 !p-0',
+  full: 'h-10 w-full !p-0'
+};
+
+const ICON_CLASS: Record<ComponentSize, string> = {
+  sm: 'h-4 w-4',
+  md: 'h-4 w-4',
+  lg: 'h-5 w-5',
+  full: 'h-4 w-4'
+};
+
+const ICON_ONLY_CLASS: Record<ComponentSize, string> = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+  full: 'h-5 w-5'
+};
+
+const TYPE_CLASS: Record<ButtonType, string> = {
+  solid: 'btn-solid',
+  outlined: 'btn-outlined',
+  noborder: 'btn-noborder'
+};
+
+const VARIANT_CLASS: Record<ButtonVariant, string> = {
+  primary: 'btn-primary',
+  secondary: 'btn-secondary',
+  important: 'btn-important'
+};
+
+function resolveVariant(type: ButtonType, variant?: ButtonVariant): ButtonVariant {
+  if (variant) {
+    return variant;
+  }
+
+  return type === 'solid' ? 'primary' : 'secondary';
+}
+
+export function Button({
+  label,
+  type,
+  variant,
+  size = 'md',
+  to,
+  htmlType = 'button',
+  onClick,
+  disabled = false,
+  icon: Icon,
+  ariaLabel,
+  className = ''
+}: Readonly<ButtonProps>) {
+  const isIconOnly = Icon != null && !label;
+  const resolvedVariant = resolveVariant(type, variant);
+  const composedClassName = [
+    TYPE_CLASS[type],
+    VARIANT_CLASS[resolvedVariant],
+    isIconOnly ? ICON_ONLY_SIZE_CLASS[size] : SIZE_CLASS[size],
+    Icon && label ? 'gap-1.5' : '',
+    disabled ? 'pointer-events-none cursor-not-allowed opacity-45 saturate-50' : '',
+    className
+  ].join(' ').trim();
+  const computedAriaLabel = ariaLabel ?? label;
+  const iconClass = `${isIconOnly ? ICON_ONLY_CLASS[size] : ICON_CLASS[size]} shrink-0`;
+  const content = (
+    <>
+      {Icon ? <Icon className={iconClass} aria-hidden="true" /> : null}
+      {label ?? null}
+    </>
+  );
+
+  const handleLinkClick: MouseEventHandler<HTMLElement> = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+  };
+
+  if (to) {
+    return (
+      <Link
+        to={to}
+        onClick={handleLinkClick}
+        aria-disabled={disabled}
+        aria-label={computedAriaLabel}
+        tabIndex={disabled ? -1 : undefined}
+        className={composedClassName}
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      type={htmlType}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={computedAriaLabel}
+      className={composedClassName}
+    >
+      {content}
+    </button>
+  );
+}

src/components/Chip.tsx

@@ -0,0 +1,36 @@
+import type { ElementType, ReactNode } from 'react';
+
+type ChipVariant = 'solid' | 'outlined';
+type ChipTone = 'neutral' | 'indigo' | 'cyan';
+
+type ChipProps<T extends ElementType> = {
+  variant?: ChipVariant;
+  tone?: ChipTone;
+  as?: T;
+  className?: string;
+  children: ReactNode;
+};
+
+const variantClassMap: Record<ChipVariant, string> = {
+  solid: 'chip-solid',
+  outlined: 'chip-outlined'
+};
+
+const toneClassMap: Record<ChipTone, string> = {
+  neutral: 'chip-neutral',
+  indigo: 'chip-indigo',
+  cyan: 'chip-cyan'
+};
+
+export function Chip<T extends ElementType = 'span'>({
+  variant = 'solid',
+  tone = 'neutral',
+  as,
+  className = '',
+  children
+}: Readonly<ChipProps<T>>) {
+  const Component = as ?? 'span' as ElementType;
+  const classes = `chip-root ${variantClassMap[variant]} ${toneClassMap[tone]} ${className}`.trim();
+
+  return <Component className={classes}>{children}</Component>;
+}

src/components/Dropdown.tsx

@@ -0,0 +1,88 @@
+import type { ChangeEventHandler } from 'react';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
+import type { ComponentSize } from './types';
+
+type DropdownLayout = 'stacked' | 'inline';
+
+type DropdownChoice = {
+  label: string;
+  id: string;
+};
+
+type DropdownProps = {
+  label?: string;
+  value: string;
+  choices: DropdownChoice[];
+  size?: ComponentSize;
+  layout?: DropdownLayout;
+  disabled?: boolean;
+  required?: boolean;
+  onChange?: (value: string) => void;
+  error?: string;
+  className?: string;
+  selectClassName?: string;
+};
+
+export function Dropdown({
+  label,
+  value,
+  choices,
+  size = 'md',
+  layout = 'stacked',
+  disabled = false,
+  required = false,
+  onChange,
+  error,
+  className = '',
+  selectClassName = ''
+}: Readonly<DropdownProps>) {
+  const containerSizeClass = {
+    sm: 'max-w-xs',
+    md: 'max-w-sm',
+    lg: 'max-w-md',
+    full: 'max-w-none'
+  }[size];
+
+  const selectSizeClass = {
+    sm: 'h-8 text-xs',
+    md: 'h-10 text-sm',
+    lg: 'h-12 text-sm',
+    full: 'h-10 text-sm'
+  }[size];
+
+  const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
+    onChange?.(event.target.value);
+  };
+
+  const wrapperClass = layout === 'inline'
+    ? 'inline-flex w-auto items-center gap-2'
+    : 'block w-full gap-1';
+
+  const selectWrapperClass = 'relative';
+  const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';
+
+  return (
+    <label className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}>
+      {label ? <span className={labelClass}>{label}</span> : null}
+      <div className={selectWrapperClass}>
+        <select
+          value={value}
+          onChange={handleChange}
+          disabled={disabled}
+          required={required}
+          className={`field w-full appearance-none pr-9 disabled:opacity-100 ${selectSizeClass} ${error ? 'border-red-400/70 focus:border-red-400 focus:ring-red-400/30' : ''} ${selectClassName}`.trim()}
+        >
+          {choices.map((choice) => (
+            <option key={choice.id} value={choice.id}>
+              {choice.label}
+            </option>
+          ))}
+        </select>
+        <span className={`pointer-events-none absolute inset-y-0 right-3 flex items-center ${disabled ? 'ui-label-disabled' : 'ui-body-secondary'}`}>
+          <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
+        </span>
+      </div>
+      {error ? <span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>{error}</span> : null}
+    </label>
+  );
+}

src/components/Form.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { Label } from './Label';
+
+type FormProps = {
+  title: string;
+  titleBarRight?: ReactNode;
+  children: ReactNode;
+  className?: string;
+};
+
+export function Form({ title, titleBarRight, children, className = '' }: Readonly<FormProps>) {
+  return (
+    <div className={`surface overflow-hidden rounded-xl ${className}`.trim()}>
+      <div className="flex items-center justify-between border-b px-4 py-3 sm:px-5" style={{ borderColor: 'var(--surface-divider)' }}>
+        <Label variant="h4">{title}</Label>
+        {titleBarRight ? <div>{titleBarRight}</div> : null}
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 p-4 sm:p-5 lg:grid-cols-3">
+        {children}
+      </div>
+    </div>
+  );
+}

src/components/InputField.tsx

@@ -0,0 +1,106 @@
+import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/solid';
+import { useState } from 'react';
+import type { ChangeEventHandler, FocusEventHandler, ReactNode, Ref } from 'react';
+import type { ComponentSize } from './types';
+import { Button } from './Button';
+
+type InputKind = 'text' | 'password' | 'email';
+type Layout = 'stacked' | 'inline';
+
+type InputFieldProps = {
+  label?: string;
+  placeholder?: string;
+  type: InputKind;
+  size?: ComponentSize;
+  layout?: Layout;
+  value: string;
+  name?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  inputRef?: Ref<HTMLInputElement>;
+  disabled?: boolean;
+  required?: boolean;
+  error?: string;
+  rightIcon?: ReactNode;
+  className?: string;
+  inputClassName?: string;
+};
+
+export function InputField({
+  label,
+  placeholder = '',
+  type,
+  size = 'md',
+  layout = 'stacked',
+  value,
+  name,
+  onChange,
+  onBlur,
+  inputRef,
+  disabled = false,
+  required = false,
+  error,
+  rightIcon,
+  className = '',
+  inputClassName = ''
+}: Readonly<InputFieldProps>) {
+  const [showPassword, setShowPassword] = useState(false);
+  const containerSizeClass = {
+    sm: 'max-w-xs',
+    md: 'max-w-sm',
+    lg: 'max-w-md',
+    full: 'max-w-none'
+  }[size];
+
+  const inputSizeClass = {
+    sm: 'h-8 text-xs',
+    md: 'h-10 text-sm',
+    lg: 'h-12 text-sm',
+    full: 'h-10 text-sm'
+  }[size];
+
+  const wrapperClass = layout === 'inline'
+    ? 'inline-flex w-auto items-center gap-2'
+    : 'block w-full gap-1';
+  const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';
+  const isPasswordType = type === 'password';
+  const resolvedType: InputKind = isPasswordType && showPassword ? 'text' : type;
+  const hasTrailingIcon = isPasswordType || Boolean(rightIcon);
+  const inputWrapperClass = layout === 'inline' ? 'relative' : 'relative mt-1';
+
+  return (
+    <label className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}>
+      {label ? <span className={labelClass}>{label}</span> : null}
+      <div className={inputWrapperClass}>
+        <input
+          type={resolvedType}
+          value={value}
+          name={name}
+          onChange={onChange}
+          onBlur={onBlur}
+          ref={inputRef}
+          placeholder={placeholder}
+          disabled={disabled}
+          required={required}
+          className={`field w-full ${hasTrailingIcon ? 'pr-10' : ''} ${inputSizeClass} ${error ? 'border-red-400/70 focus:border-red-400 focus:ring-red-400/30' : ''} ${inputClassName}`.trim()}
+        />
+        {isPasswordType ? (
+          <Button
+            type="noborder"
+            size="sm"
+            icon={showPassword ? EyeSlashIcon : EyeIcon}
+            onClick={() => setShowPassword((prev) => !prev)}
+            disabled={disabled}
+            className="absolute inset-y-0 right-2 my-auto !h-6 !w-6 !rounded-md !p-0 ui-body-secondary transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60"
+            ariaLabel={showPassword ? 'Hide password' : 'Show password'}
+          />
+        ) : rightIcon ? (
+          <span className="pointer-events-none absolute inset-y-0 right-2 inline-flex items-center justify-center px-1">
+            {rightIcon}
+          </span>
+        ) : null}
+      </div>
+      {error ? <span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>{error}</span> : null}
+    </label>
+  );
+}

src/components/Label.tsx

@@ -0,0 +1,55 @@
+import type { ElementType, ReactNode } from 'react';
+
+type LabelVariant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'body'
+  | 'body2'
+  | 'caption'
+  | 'error'
+  | 'code';
+
+type LabelProps<T extends ElementType> = {
+  variant?: LabelVariant;
+  as?: T;
+  className?: string;
+  children: ReactNode;
+};
+
+const variantClassMap: Record<LabelVariant, string> = {
+  h1: 'ui-title text-3xl font-bold',
+  h2: 'ui-title text-2xl font-semibold',
+  h3: 'ui-title text-xl font-semibold',
+  h4: 'ui-title text-base font-semibold',
+  body: 'ui-body-primary text-sm',
+  body2: 'ui-body-secondary text-sm',
+  caption: 'ui-kicker text-xs font-semibold uppercase tracking-[0.12em]',
+  error: 'ui-error text-sm',
+  code: 'ui-code text-sm font-mono'
+};
+
+const variantTagMap: Record<LabelVariant, ElementType> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h3',
+  body: 'p',
+  body2: 'p',
+  caption: 'p',
+  error: 'p',
+  code: 'code'
+};
+
+export function Label<T extends ElementType = 'p'>({
+  variant = 'body',
+  as,
+  className = '',
+  children
+}: Readonly<LabelProps<T>>) {
+  const Component = as ?? variantTagMap[variant];
+  const classes = `${variantClassMap[variant]} ${className}`.trim();
+
+  return <Component className={classes}>{children}</Component>;
+}

src/components/MDXEditorField.tsx

@@ -0,0 +1,65 @@
+import { MDXEditor, type MDXEditorMethods, type MDXEditorProps } from '@mdxeditor/editor';
+import type { CSSProperties, Ref } from 'react';
+import { Label } from './Label';
+
+type MDXEditorFieldProps = {
+  label?: string;
+  markdown: string;
+  readOnly?: boolean;
+  disabled?: boolean;
+  onChange?: (markdown: string) => void;
+  editorRef?: Ref<MDXEditorMethods | null>;
+  themeClassName: string;
+  plugins: MDXEditorProps['plugins'];
+  contentEditableClassName?: string;
+  className?: string;
+  editorWrapperClassName?: string;
+  editorWrapperStyle?: CSSProperties;
+  editorClassName?: string;
+  error?: string;
+};
+
+export function MDXEditorField({
+  label,
+  markdown,
+  readOnly = false,
+  disabled = false,
+  onChange,
+  editorRef,
+  themeClassName,
+  plugins,
+  contentEditableClassName = 'mdx-content',
+  className = '',
+  editorWrapperClassName = 'post-mdx-editor mt-2 overflow-hidden rounded-xl border',
+  editorWrapperStyle,
+  editorClassName = '',
+  error
+}: Readonly<MDXEditorFieldProps>) {
+  const resolvedEditorClassName = `${themeClassName} ${editorClassName}`.trim();
+  const editorModeKey = disabled || readOnly ? 'read-only' : 'editable';
+  const resolvedEditorWrapperClassName = `${editorWrapperClassName} ${disabled ? 'post-mdx-editor--disabled' : 'post-mdx-editor--enabled'}`.trim();
+  const resolvedEditorWrapperStyle: CSSProperties = {
+    backgroundColor: disabled ? 'var(--field-disabled-bg)' : 'var(--field-bg)',
+    borderColor: disabled ? 'var(--field-disabled-border)' : 'var(--field-border)',
+    ...editorWrapperStyle
+  };
+
+  return (
+    <div className={className}>
+      {label ? <Label variant="body" className={`font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'}`}>{label}</Label> : null}
+      <div className={resolvedEditorWrapperClassName} style={resolvedEditorWrapperStyle}>
+        <MDXEditor
+          key={editorModeKey}
+          ref={editorRef}
+          markdown={markdown}
+          onChange={disabled || readOnly ? undefined : onChange}
+          readOnly={disabled || readOnly}
+          className={resolvedEditorClassName}
+          contentEditableClassName={contentEditableClassName}
+          plugins={plugins}
+        />
+      </div>
+      {error ? <Label variant="error" className="mt-2 ui-error">{error}</Label> : null}
+    </div>
+  );
+}

src/components/SidebarNavItem.tsx

@@ -0,0 +1,33 @@
+import type { ComponentType, SVGProps } from 'react';
+import { NavLink } from 'react-router-dom';
+
+type IconType = ComponentType<SVGProps<SVGSVGElement>>;
+
+type SidebarNavItemProps = {
+  to: string;
+  label: string;
+  icon: IconType;
+  collapsed: boolean;
+  onClick?: () => void;
+};
+
+export function SidebarNavItem({ to, label, icon: Icon, collapsed, onClick }: Readonly<SidebarNavItemProps>) {
+  const layoutClass = collapsed
+    ? 'px-2 justify-start lg:mx-auto lg:w-8 lg:justify-center lg:px-0'
+    : 'px-2 lg:w-full lg:justify-start';
+
+  return (
+    <NavLink
+      to={to}
+      onClick={onClick}
+      className={({ isActive }) => (
+        `inline-flex h-8 items-center rounded-lg text-sm font-medium transition ${layoutClass} ${
+          isActive ? 'bg-accent-500 text-white' : 'ui-body-secondary hover:bg-zinc-500/15'
+        }`
+      )}
+    >
+      <Icon className="h-4 w-4 shrink-0" />
+      {!collapsed ? <span className="ml-2 truncate leading-none">{label}</span> : <span className="ml-2 lg:hidden">{label}</span>}
+    </NavLink>
+  );
+}

src/components/Table.tsx

@@ -0,0 +1,180 @@
+import type { ReactNode } from 'react';
+import { ArrowPathIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from '@heroicons/react/24/solid';
+import { ArrowsUpDownIcon } from '@heroicons/react/24/outline';
+import { Button } from './Button';
+import { Dropdown } from './Dropdown';
+import { Label } from './Label';
+import type { SortState } from '../types/sort';
+
+type HeaderValue<T> = ReactNode | ((row: T) => ReactNode);
+
+export type TableHeader<T> = {
+  label: string;
+  id: string;
+  value: HeaderValue<T>;
+  sortable?: boolean;
+  sortField?: string;
+  headerClassName?: string;
+  cellClassName?: string;
+};
+
+type TableProps<T> = {
+  headers: TableHeader<T>[];
+  data: T[];
+  rowKey: (row: T, index: number) => string;
+  isLoading?: boolean;
+  emptyMessage?: string;
+  className?: string;
+  sorting?: SortState | null;
+  onSortChange?: (field: string) => void;
+  pagination?: {
+    page: number;
+    pageSize: number;
+    total: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+  };
+};
+
+export function Table<T>({
+  headers,
+  data,
+  rowKey,
+  isLoading = false,
+  emptyMessage = 'No data to show.',
+  className = '',
+  sorting = null,
+  onSortChange,
+  pagination
+}: Readonly<TableProps<T>>) {
+  const canGoPrev = pagination != null && pagination.page > 1;
+  const canGoNext = pagination != null && pagination.page < pagination.totalPages;
+
+  return (
+    <div className={`table-shell ${className}`.trim()}>
+      <div className="table-scroll">
+        <table className="table-root">
+          <thead className="table-head">
+            <tr>
+              {headers.map((header) => {
+                const canSort = header.sortable === true
+                  && typeof onSortChange === 'function'
+                  && typeof header.sortField === 'string'
+                  && header.sortField.length > 0;
+                const isActiveSort = canSort && sorting?.field === header.sortField;
+                const sortDirection = isActiveSort ? sorting?.direction : null;
+
+                return (
+                  <th key={header.id} className={`table-head-cell ${header.headerClassName ?? ''}`.trim()}>
+                    {canSort ? (
+                      <button
+                        type="button"
+                        className="table-sort-button"
+                        onClick={() => onSortChange(header.sortField as string)}
+                        aria-label={`Sort by ${header.label}`}
+                      >
+                        <span>{header.label}</span>
+                        <span className="table-sort-icon" aria-hidden="true" data-sort-state={sortDirection ?? 'none'}>
+                          {sortDirection === 'asc' ? (
+                            <ChevronUpIcon className="h-4 w-4" />
+                          ) : null}
+                          {sortDirection === 'desc' ? (
+                            <ChevronDownIcon className="h-4 w-4" />
+                          ) : null}
+                          {sortDirection == null ? (
+                            <ArrowsUpDownIcon className="h-4 w-4" />
+                          ) : null}
+                        </span>
+                      </button>
+                    ) : (
+                      header.label
+                    )}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading ? (
+              <tr className="table-body-row">
+                <td colSpan={headers.length} className="px-4 py-6 text-center">
+                  <Label as="span" variant="body2" className="inline-flex items-center justify-center ui-loading">
+                    <ArrowPathIcon className="h-5 w-5 animate-spin" aria-hidden="true" />
+                  </Label>
+                </td>
+              </tr>
+            ) : null}
+            {!isLoading && data.length === 0 ? (
+              <tr className="table-body-row">
+                <td colSpan={headers.length} className="px-4 py-6 text-center">
+                  <Label variant="body2" className="ui-empty">
+                    {emptyMessage}
+                  </Label>
+                </td>
+              </tr>
+            ) : null}
+            {!isLoading && data.map((row, index) => (
+              <tr key={rowKey(row, index)} className="table-body-row">
+                {headers.map((header) => {
+                  const content = typeof header.value === 'function'
+                    ? (header.value as (item: T) => ReactNode)(row)
+                    : header.value;
+                  return (
+                    <td key={`${header.id}-${index}`} className={`table-cell-secondary ${header.cellClassName ?? ''}`.trim()}>
+                      {content}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {pagination ? (
+        <div className="flex flex-col gap-3 border-t border-zinc-500/20 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+          <Label variant="body2">
+            {pagination.total} results
+          </Label>
+          <div className="flex flex-wrap items-center gap-2">
+            {pagination.onPageSizeChange ? (
+              <Dropdown
+                label="Rows"
+                value={String(pagination.pageSize)}
+                choices={[5, 10, 20, 50, 100].map((size) => ({
+                  id: String(size),
+                  label: String(size)
+                }))}
+                size="sm"
+                layout="inline"
+                className="max-w-none"
+                selectClassName="rounded-lg px-2"
+                disabled={isLoading}
+                onChange={(value) => pagination.onPageSizeChange?.(Number(value))}
+              />
+            ) : null}
+            <Button
+              type="outlined"
+              size="sm"
+              icon={ChevronLeftIcon}
+              ariaLabel="Previous page"
+              disabled={!canGoPrev || isLoading}
+              onClick={() => pagination.onPageChange(pagination.page - 1)}
+            />
+            <Label variant="body2" className="px-1 text-xs ui-body-secondary">
+              Page {pagination.page} of {Math.max(pagination.totalPages, 1)}
+            </Label>
+            <Button
+              type="outlined"
+              size="sm"
+              icon={ChevronRightIcon}
+              ariaLabel="Next page"
+              disabled={!canGoNext || isLoading}
+              onClick={() => pagination.onPageChange(pagination.page + 1)}
+            />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/components/types.ts

@@ -0,0 +1 @@
+export type ComponentSize = 'sm' | 'md' | 'lg' | 'full';