feat(react): add UI primitives and data table updates

[rax7389]

Changes

Summary: Introduces new reusable UI primitive components (Chip, Combobox, TextFieldGroup) and enhances shared DataTable and DataPagination components with server-side sorting and checkpoint-based pagination support.

Why: The existing shared data components (DataTable, DataPagination) only supported client-side sorting and traditional page-number pagination. The upcoming member management feature requires server-side sorting (API-driven) and checkpoint/cursor-based pagination (next/previous tokens), along with new input primitives for invite flows (multi-value inputs, searchable dropdowns, tag chips).
What:

New Components

1. Chip (chip.tsx) — A removable tag/badge element with multiple variants and sizes.

<Chip variant="info" size="md" onRemove={() => handleRemove(item)}>
  user@example.com
</Chip>

2. Combobox (combobox.tsx) — Searchable dropdown with single and multi-select support, built on Radix Popover.

<Combobox
  options={[{ label: "Admin", value: "admin" }, { label: "Member", value: "member" }]}
  value={selectedRoles}
  onChange={setSelectedRoles}
  multiple
  placeholder="Select roles..."
/>

3. TextFieldGroup (text-field-group.tsx) — Input field with chip support for multi-value entry via comma/Enter-based chip creation.

<TextFieldGroup
  chips={emails}
  onChipAdd={(val) => addEmail(val)}
  onChipRemove={(val) => removeEmail(val)}
  chipVariant="secondary"
  placeholder="Enter email addresses..."
/>

Updated Components

4. DataTable — Server-side sorting support. Added onSortChange and sortConfig props to delegate sorting to the parent (API-driven) instead of client-side TanStack sorting.

// Server-side sorting (new)
<DataTable
  data={items}
  columns={columns}
  sortConfig={{ key: "created_at", direction: "desc" }}
  onSortChange={(config) => fetchSorted(config.key, config.direction)}
/>

// Client-side sorting (unchanged)
<DataTable data={items} columns={columns} />

5. DataPagination — Checkpoint pagination with page info. Extended CheckpointPaginationState with optional currentPage to display "Showing X-Y of Z" for cursor-based APIs. Removed page-number links (Previous/Next only). Cleaned up unused helpers (generatePageNumbers, interpolate).

<DataPagination
  variant="checkpoint"
  checkpointState={{
    pageSize: 10,
    currentPage: 2,
    totalItems: 47,
    hasNextPage: true,
    hasPreviousPage: true,
  }}
  onPageChange={handlePageChange}
/>

Other

• color-picker.tsx: Minor import cleanup

References

Part of the member management invitations feature.

Testing

• This change adds unit test coverage
• This change has been tested on the latest version of the platform/language

Checklist

• I have read the Auth0 general contribution guidelines
• I have read the Auth0 Code of Conduct
• All existing and new tests complete without errors

[codecov-commenter]

Codecov Report

❌ Patch coverage is 53.33333% with 14 lines in your changes missing coverage. Please review.
✅ Project coverage is 88.55%. Comparing base (8a2cd65) to head (84ef293).
⚠️ Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
...s/react/src/components/auth0/shared/data-table.tsx	53.33%	14 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #158      +/-   ##
==========================================
- Coverage   88.64%   88.55%   -0.09%     
==========================================
  Files         154      154              
  Lines       13129    13155      +26     
  Branches     1787     1405     -382     
==========================================
+ Hits        11638    11650      +12     
- Misses       1491     1505      +14     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.