Danny White 9a03f3cd9c fix(studio): show keyboard focus on filter bar (#50827) ...

## Problem

- Filter fields could not be re-entered with Tab, and remove buttons
were previously skipped.
- Earlier focus rings flashed or crowded controls. Segmented filters and
design system examples also had uneven layout.

## Solution

- Tab now reaches each filter’s property, operator, value and remove
button. Editable fields use the caret; read-only values and remove
buttons keep a visible focus cue.
- Refined spacing and sizing. The segmented highlight is inset and
clears when focus enters a control. Both variants and the focus guidance
are documented on the [design system
page](https://design-system-git-dnywh-fix-filter-bar-focus-supabase.vercel.app/design-system/docs/fragments/filter-bar).

|After |
| --- |
| <img width="462" height="126" alt="CleanShot 2026-09-24 at 15 04
23@2x"
src="https://github.com/user-attachments/assets/2ee8bee2-f4fa-40f4-ada5-67bfe32384e7"
/> |
| <img width="362" height="96" alt="CleanShot 2026-09-24 at 15 04 47@2x"
src="https://github.com/user-attachments/assets/9f42054a-f432-493d-b417-f10892676c96"
/> |

## Review instructions

The easiest way to test this is to open Table Editor on both
production/staging and on this PR’s [deploy
preview](https://studio-staging-git-dnywh-fix-filter-bar-focus-supabase.vercel.app/).
Try navigating by keyboard (tab, left/right arrow) within the Filter
Bar. Compare the two.

- In Studio’s Table Editor or the [design system
example](https://design-system-git-dnywh-fix-filter-bar-focus-supabase.vercel.app/design-system/docs/fragments/filter-bar),
add a filter. Tab through its property, operator, value and remove
button, then Shift+Tab back into editing.
- Check that the segmented and pill examples fill their preview width
and that focus cues do not collide with neighbouring controls.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary

* **New Features**
* Added a pill appearance for the Filter Bar, with usage guidance and
interactive examples for pill and segmented presentations.
* **Accessibility**
* Improved keyboard navigation through filter controls, including
removing a filter with the keyboard.
* Clarified that an editable text field’s insertion caret can serve as
its visible focus indicator; read-only fields and controls without a
caret still need another visible indicator.
* **Style**
  * Refined Filter Bar spacing and focus styling across appearances.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

2026-09-28 10:13:53 +10:00

..

accordion-demo.tsx

chore: remove <Accordion> _Shadcn_ suffix (#46107)

2026-05-19 17:04:00 +02:00

admonition-button-split.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

admonition-button.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

admonition-demo.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

admonition-description-only.tsx

chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)

2026-07-29 00:48:56 +08:00

admonition-destructive.tsx

chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)

2026-07-29 00:48:56 +08:00

admonition-responsive.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

admonition-sandwiched.tsx

chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)

2026-07-29 00:48:56 +08:00

admonition-success.tsx

chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)

2026-07-29 00:48:56 +08:00

admonition-warning.tsx

chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)

2026-07-29 00:48:56 +08:00

alert-demo.tsx

chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867)

2026-05-15 14:55:37 +02:00

alert-dialog-async-error.tsx

chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)

2026-07-29 00:48:56 +08:00

alert-dialog-async.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

alert-dialog-close-only.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

alert-dialog-demo.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

alert-dialog-destructive.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

alert-dialog-warning.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

aspect-ratio-demo.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

assistant-chat-commands.tsx

chore: Migrate the monorepo to use Tailwind v4 (#45318)

2026-04-30 10:53:24 +00:00

assistant-chat-demo.tsx

chore: Clean up ui-patterns imports (#29132)

2024-09-30 21:41:26 +02:00

avatar-demo.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

badge-demo.tsx

studio(chore): badge component defrag (#40118)

2025-12-02 11:15:50 +11:00

badge-secondary.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

badge-state.tsx

studio(chore): badge component defrag (#40118)

2025-12-02 11:15:50 +11:00

breadcrumb-demo.tsx

fix(design-system): add missing breadcrumb demo components (#47421)

2026-06-30 16:13:50 +00:00

breadcrumb-dropdown.tsx

fix(design-system): add missing breadcrumb demo components (#47421)

2026-06-30 16:13:50 +00:00

breadcrumb-ellipsis.tsx

fix(design-system): add missing breadcrumb demo components (#47421)

2026-06-30 16:13:50 +00:00

breadcrumb-link.tsx

fix(design-system): add missing breadcrumb demo components (#47421)

2026-06-30 16:13:50 +00:00

breadcrumb-responsive.tsx

fix(design-system): add missing breadcrumb demo components (#47421)

2026-06-30 16:13:50 +00:00

breadcrumb-separator.tsx

fix(design-system): add missing breadcrumb demo components (#47421)

2026-06-30 16:13:50 +00:00

button-as-child.tsx

fix(ui): default Button variant to default instead of primary (#50160)

2026-09-10 11:23:17 +10:00

button-default.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

button-demo.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

button-destructive.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

button-floating-plate.tsx

chore(ui): refresh shared button styles (#50197)

2026-09-23 03:43:00 +00:00

button-ghost.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

button-icon.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

button-link.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

button-loading.tsx

fix(ui): default Button variant to default instead of primary (#50160)

2026-09-10 11:23:17 +10:00

button-outline.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

button-secondary.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

button-sizes.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

button-split-dropdown.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

button-warning.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

button-with-icon.tsx

fix(ui): default Button variant to default instead of primary (#50160)

2026-09-10 11:23:17 +10:00

calendar-demo.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

calendar-disabled-days-demo.tsx

fix(studio): align PITR calendar dates in the first week (#47806)

2026-07-10 11:40:33 +01:00

calendar-form.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

calendar-react-hook-form.tsx

fix(ui): default Button variant to default instead of primary (#50160)

2026-09-10 11:23:17 +10:00

chart-bar-demo-axis.tsx

[Design System] feat: Added Chart component (#27839)

2024-08-30 16:51:05 +08:00

chart-bar-demo-grid.tsx

[Design System] feat: Added Chart component (#27839)

2024-08-30 16:51:05 +08:00

chart-bar-demo-legend.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

chart-bar-demo-tooltip.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

chart-bar-demo.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

chart-tooltip-demo.tsx

feat(design-system): first pass at db report chart colours (#46787)

2026-09-16 09:18:40 +01:00

checkbox-demo.tsx

chore: remove _Shadcn_ suffix for Checkbox and Radio components (#45263)

2026-04-27 11:07:06 +02:00

checkbox-disabled.tsx

chore: remove _Shadcn_ suffix for Checkbox and Radio components (#45263)

2026-04-27 11:07:06 +02:00

checkbox-form-multiple.tsx

fix(ui): default Button variant to default instead of primary (#50160)

2026-09-10 11:23:17 +10:00

checkbox-form-single.tsx

fix(ui): default Button variant to default instead of primary (#50160)

2026-09-10 11:23:17 +10:00

checkbox-with-text.tsx

feat(lint): add shadcn lint warnings (#50676)

2026-09-25 17:50:50 +03:00

collapsible-alert-demo.tsx

Clarify alert and collapsible design-system patterns (#45863)

2026-05-15 15:29:16 +10:00

collapsible-card-section-demo.tsx

feat(ui-patterns): add CollapsibleCardSection component (#46250)

2026-05-22 18:24:17 +10:00

collapsible-demo.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

color-usage-surface-studio-frame.tsx

chore: Migrate the monorepo to use Tailwind v4 (#45318)

2026-04-30 10:53:24 +00:00

color-usage-surface-studio.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

color-usage-surface-www-and-docs.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

combobox-demo.tsx

feat(ui): align combobox trigger with select styling (#49665)

2026-09-09 13:44:11 +10:00

combobox-dropdown-menu.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

combobox-form.tsx

feat(ui): align combobox trigger with select styling (#49665)

2026-09-09 13:44:11 +10:00

combobox-popover.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

combobox-responsive.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

command-demo.tsx

chore: remove _Shadcn_ suffix from Command components (#46153)

2026-05-20 15:45:32 +02:00

command-dialog.tsx

chore: remove _Shadcn_ suffix from Command components (#46153)

2026-05-20 15:45:32 +02:00

commandmenu-badge.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

commandmenu-conditional.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

commandmenu-demo.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

commandmenu-force.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

commandmenu-hidden.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

commandmenu-icon.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

commandmenu-subpage-custom.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

commandmenu-subpage.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

confirmation-modal-demo.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

connect-interstitial-action-error.tsx

show API and AWS authorization errors inline (#48471)

2026-08-03 09:43:23 +10:00

connect-interstitial-demo.tsx

docs(design-system): add connect interstitials pattern (#45356)

2026-07-22 00:08:32 +10:00

connect-interstitial-logo-pair.tsx

docs(design-system): add connect interstitials pattern (#45356)

2026-07-22 00:08:32 +10:00

connect-interstitial-logo-single.tsx

chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)

2026-07-29 00:48:56 +08:00

connect-interstitial-logo-unknown.tsx

feat(studio): connect logo contract for authorize (#48161)

2026-07-23 02:20:42 +10:00

connect-interstitial-logo-uploaded.tsx

feat(design-system): document disabled controls and add focusableWhenDisabled (#50068)

2026-09-11 01:52:21 +00:00

connect-interstitial-shared.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

context-menu-demo.tsx

chore: remove <ContextMenu> _Shadcn_ suffix (#45971)

2026-05-15 15:09:25 +02:00

copy-button-verbs.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

copy-confirmations.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

copy-empty-states.tsx

chore: cleanup UI patterns exports (#47406)

2026-06-30 09:23:17 +02:00

copy-error-messages.tsx

feat(design-system): add initial copy writing guide (#41307)

2025-12-15 10:44:08 +00:00

copy-form-labels.tsx

chore: remove <Label> _Shadcn_ suffix (#45986)

2026-05-15 15:55:33 +02:00

copy-loading-states.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

copy-success-messages.tsx

feat(design-system): add initial copy writing guide (#41307)

2025-12-15 10:44:08 +00:00

copy-tooltips.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

data-grid-demo.tsx

chore: Migrate the monorepo to use Tailwind v4 (#45318)

2026-04-30 10:53:24 +00:00

data-grid-empty-state.tsx

chore: Migrate the monorepo to use Tailwind v4 (#45318)

2026-04-30 10:53:24 +00:00

data-input-demo.tsx

chore(studio): consistent copy/reveal input behaviour (#39509)

2025-10-16 13:44:40 +11:00

data-input-with-copy-secret.tsx

chore(studio): consistent copy/reveal input behaviour (#39509)

2025-10-16 13:44:40 +11:00

data-input-with-copy.tsx

chore(studio): consistent copy/reveal input behaviour (#39509)

2025-10-16 13:44:40 +11:00

data-input-with-reveal-copy-editable-empty.tsx

chore: add shadcn input-group components (#44282)

2026-03-31 09:14:56 +02:00

data-input-with-reveal-copy-editable.tsx

chore: add shadcn input-group components (#44282)

2026-03-31 09:14:56 +02:00

data-input-with-reveal-copy.tsx

chore(studio): consistent copy/reveal input behaviour (#39509)

2025-10-16 13:44:40 +11:00

data-table-demo.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

date-picker-demo.tsx

introduce DatePicker (#46837)

2026-06-17 12:24:42 +02:00

date-picker-form.tsx

fix(ui): default Button variant to default instead of primary (#50160)

2026-09-10 11:23:17 +10:00

date-picker-with-presets.tsx

introduce DatePicker (#46837)

2026-06-17 12:24:42 +02:00

date-picker-with-range.tsx

introduce DatePicker (#46837)

2026-06-17 12:24:42 +02:00

dialog-centered-off.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

dialog-close-button.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

dialog-demo.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

disabled-focusable.tsx

feat(design-system): document disabled controls and add focusableWhenDisabled (#50068)

2026-09-11 01:52:21 +00:00

disabled-unavailable-with-notice.tsx

feat(design-system): document disabled controls and add focusableWhenDisabled (#50068)

2026-09-11 01:52:21 +00:00

drawer-demo.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

drawer-dialog.tsx

fix(ui): default Button variant to default instead of primary (#50160)

2026-09-10 11:23:17 +10:00

dropdown-menu-checkboxes.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

dropdown-menu-demo.tsx

docs: use sign in terminology across guides and style guides (#49877)

2026-09-04 09:10:25 +10:00

dropdown-menu-radio-group.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

empty-state-initial-state-informational.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

empty-state-missing-route.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

empty-state-presentational-buttons.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

empty-state-presentational-demo.tsx

chore: cleanup UI patterns exports (#47406)

2026-06-30 09:23:17 +02:00

empty-state-presentational-icon.tsx

chore: cleanup UI patterns exports (#47406)

2026-06-30 09:23:17 +02:00

empty-state-zero-items-table.tsx

feat(design-system): improve table docs (#41215)

2025-12-11 13:38:26 +11:00

error-display-demo.tsx

chore: Bump Typescript to v6 (#44204)

2026-03-26 15:27:35 +01:00

error-display-with-children.tsx

chore: Bump Typescript to v6 (#44204)

2026-03-26 15:27:35 +01:00

expanding-textarea-demo.tsx

feat: Use expanding text area in the Ai Assistant (SQL Editor) (#27930)

2024-07-12 11:32:20 +02:00

field-checkbox.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

field-choice-card.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

field-demo.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

field-fieldset.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

field-group.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

field-hear.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

field-input.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

field-radio.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

field-responsive.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

field-select.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

field-slider.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

field-switch.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

field-textarea.tsx

chore: Remove tsconfig paths (#49770)

2026-09-01 13:13:30 +02:00

filter-bar-demo.tsx

fix(studio): show keyboard focus on filter bar (#50827)

2026-09-28 10:13:53 +10:00

filter-bar-pill-demo.tsx

fix(studio): show keyboard focus on filter bar (#50827)

2026-09-28 10:13:53 +10:00

filter-bar-segmented-demo.tsx

fix(studio): show keyboard focus on filter bar (#50827)

2026-09-28 10:13:53 +10:00

form-item-layout-after-label.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

form-item-layout-before-label.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

form-item-layout-demo.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

form-item-layout-with-checkbox-list.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

form-item-layout-with-checkbox.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

form-item-layout-with-horizontal.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

form-item-layout-with-select.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

form-item-layout-with-switch.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

form-patterns-pagelayout.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

form-patterns-sidepanel.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

hover-card-demo.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

info-tooltip-demo.tsx

[Design System] Feat: BeforeLabel / AfterLabel props for <FormItemLayout/> and <InfoTooltip/> documented (#26712)

2024-05-24 09:40:15 +00:00

inner-side-menu-demo.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

inner-side-menu-empty.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

inner-side-menu-loading.tsx

feat/ design system: inner side bar docs (#30048)

2024-10-31 00:55:08 +08:00

inner-side-menu-multiple-sections.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

inner-side-menu-static-titles.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

inner-side-menu-with-search.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

input-demo.tsx

chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867)

2026-05-15 14:55:37 +02:00

input-disabled.tsx

chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867)

2026-05-15 14:55:37 +02:00

input-file.tsx

chore: remove <Label> _Shadcn_ suffix (#45986)

2026-05-15 15:55:33 +02:00

input-form.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

input-otp-controlled.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

input-otp-demo.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

input-otp-form.tsx

fix(ui): default Button variant to default instead of primary (#50160)

2026-09-10 11:23:17 +10:00

input-otp-pattern.tsx

chore: Prep work for pnpm (#29610)

2024-10-01 11:29:37 +02:00

input-otp-separator.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

input-with-button.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

input-with-label.tsx

chore: remove <Label> _Shadcn_ suffix (#45986)

2026-05-15 15:55:33 +02:00

input-with-text.tsx

chore: remove <Label> _Shadcn_ suffix (#45986)

2026-05-15 15:55:33 +02:00

key-value-field-array-demo.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

keyboard-shortcut-demo.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

keyboard-shortcut-inline.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

keyboard-shortcut-pill.tsx

chore(studio): standardise keyboard shortcut UI (#44262)

2026-04-08 09:42:55 -06:00

label-demo.tsx

chore: remove <Label> _Shadcn_ suffix (#45986)

2026-05-15 15:55:33 +02:00

logs-bar-chart.tsx

feat(design-system): charts defrag (#41026)

2025-12-10 13:10:18 +00:00

markdown-avatar-component.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

markdown-blockquotes.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

markdown-code-blocks.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

markdown-customization.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

markdown-full-example.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

markdown-headings.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

markdown-horizontal-rules.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

markdown-images.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

markdown-inline-code.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

markdown-links.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

markdown-lists.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

markdown-paragraphs.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

markdown-quote-component.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

markdown-tables.tsx

feat(design-system): add Markdown component to ui-patterns (#46325)

2026-05-26 17:19:18 +02:00

menubar-demo.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

mermaid-basic.tsx

chore: Clean the ui package from next imports (#44278)

2026-03-30 10:58:37 +02:00

mermaid-demo.tsx

chore: Clean the ui package from next imports (#44278)

2026-03-30 10:58:37 +02:00

mermaid-er-diagram.tsx

chore: Clean the ui package from next imports (#44278)

2026-03-30 10:58:37 +02:00

mermaid-er-simple.tsx

chore: Clean the ui package from next imports (#44278)

2026-03-30 10:58:37 +02:00

mermaid-flowchart-subgraph.tsx

chore: Clean the ui package from next imports (#44278)

2026-03-30 10:58:37 +02:00

mermaid-flowchart.tsx

chore: Clean the ui package from next imports (#44278)

2026-03-30 10:58:37 +02:00

mermaid-oauth-flow.tsx

chore: Clean the ui package from next imports (#44278)

2026-03-30 10:58:37 +02:00

mermaid-sequence-api.tsx

chore: Clean the ui package from next imports (#44278)

2026-03-30 10:58:37 +02:00

mermaid-sequence-async.tsx

chore: Clean the ui package from next imports (#44278)

2026-03-30 10:58:37 +02:00

mermaid-sequence-sync.tsx

chore: Clean the ui package from next imports (#44278)

2026-03-30 10:58:37 +02:00

metric-card-minimal-horizontal.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

metric-card-minimal.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

metric-card-with-icon-link-tooltip.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

metric-card.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

mode-toggle.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

multi-select-badge-limit-wrap.tsx

feat(ui): support bounded MultiSelector wrapping (#50439)

2026-09-16 12:27:16 +10:00

multi-select-badge-limit.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

multi-select-combobox-creatable.tsx

fix: MultiSelector with creatable flag (#33502)

2025-02-11 10:40:51 +08:00

multi-select-combobox.tsx

feat: multiselect (#29695)

2024-10-25 15:43:15 +02:00

multi-select-deletable-badge.tsx

fix(ui-patterns): stabilise multi-select trigger height (#50163)

2026-09-09 04:14:46 +00:00

multi-select-demo.tsx

fix(ui-patterns): stabilise multi-select trigger height (#50163)

2026-09-09 04:14:46 +00:00

multi-select-disabled.tsx

feat: multiselect (#29695)

2024-10-25 15:43:15 +02:00

multi-select-in-dialog.tsx

fix(ui): default Button variant to default instead of primary (#50160)

2026-09-10 11:23:17 +10:00

multi-select-inline-search-input.tsx

fix(ui-patterns): stabilise multi-select trigger height (#50163)

2026-09-09 04:14:46 +00:00

multi-select-without-icon.tsx

fix(ui-patterns): stabilise multi-select trigger height (#50163)

2026-09-09 04:14:46 +00:00

nav-menu-badges.tsx

docs(design-system): NavMenu component (#39188)

2025-10-08 10:18:43 +11:00

nav-menu-demo.tsx

docs(design-system): NavMenu component (#39188)

2025-10-08 10:18:43 +11:00

nav-menu-icons.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

navigation-menu-demo.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

navigation-menu-responsive.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

page-breadcrumbs-demo.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

page-container-demo.tsx

Page components (#40289)

2025-11-11 04:02:30 +00:00

page-header-demo.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

page-layout-auth-emails.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

page-layout-detail.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

page-layout-edge-function.tsx

fix(ui): align primary colours across text, buttons, and controls (#50697)

2026-09-24 09:56:31 +10:00

page-layout-full-width.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

page-layout-list-simple.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

page-layout-list.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

page-layout-logs-content.tsx

refactor(ui): rename text-brand to text-primary (#50564)

2026-09-22 16:19:03 +10:00

page-layout-settings.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

page-nav-demo.tsx

fix(eslint): promote require-explicit-tabindex to error (#48170)

2026-07-23 05:21:15 +10:00

page-section-demo.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

page-section-horizontal.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

page-section-title-only.tsx

fix(studio): PageSectionSummary alignment (#42019)

2026-01-21 10:18:15 +08:00

page-section-with-aside.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

popover-demo.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

progress-demo.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

radio-group-card-demo.tsx

Fix: RadioGroupCard accessibility issues (#48527)

2026-08-31 16:14:09 +02:00

radio-group-card-form.tsx

Fix: RadioGroupCard accessibility issues (#48527)

2026-08-31 16:14:09 +02:00

radio-group-card-with-children.tsx

chore(ui): remove the Classic Dark theme (#50387)

2026-09-21 10:53:14 +10:00

radio-group-demo.tsx

Fix: RadioGroupCard accessibility issues (#48527)

2026-08-31 16:14:09 +02:00

radio-group-form.tsx

fix(ui): default Button variant to default instead of primary (#50160)

2026-09-10 11:23:17 +10:00

radio-group-stacked-demo.tsx

Fix: RadioGroupCard accessibility issues (#48527)

2026-08-31 16:14:09 +02:00

radio-group-stacked-form.tsx

Fix: RadioGroupCard accessibility issues (#48527)

2026-08-31 16:14:09 +02:00

resizable-demo-with-handle.tsx

chore: update react-resizable-panels to v4 to support pixel width (#42990)

2026-02-23 19:48:19 +01:00

resizable-demo.tsx

chore: update react-resizable-panels to v4 to support pixel width (#42990)

2026-02-23 19:48:19 +01:00

resizable-handle.tsx

chore: update react-resizable-panels to v4 to support pixel width (#42990)

2026-02-23 19:48:19 +01:00

resizable-vertical.tsx

chore: update react-resizable-panels to v4 to support pixel width (#42990)

2026-02-23 19:48:19 +01:00

scroll-area-demo.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

scroll-area-horizontal-demo.tsx

chore: Migrate the monorepo to use Tailwind v4 (#45318)

2026-04-30 10:53:24 +00:00

select-demo.tsx

chore: remove <Select> _Shadcn_ suffix (#45988)

2026-05-15 16:39:57 +02:00

select-form.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

select-scrollable.tsx

chore: remove <Select> _Shadcn_ suffix (#45988)

2026-05-15 16:39:57 +02:00

separator-demo.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

sheet-confirm-on-close-demo.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

sheet-demo.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

sheet-nonmodal.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

sheet-side.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

single-value-field-array-demo.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

skeleton-card.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

skeleton-demo.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

skip-to-content-demo.tsx

feat: unify SkipToContent across studio, docs, www, and design-system (#48314)

2026-07-29 06:21:50 +10:00

slider-demo.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

slider-minMax-range.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

sonner-demo.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

sonner-types.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

sonner-upload.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

status-code-demo.tsx

chore: cleanup UI patterns exports (#47406)

2026-06-30 09:23:17 +02:00

success-check-demo.tsx

fix(studio): color regressions after theme update (#47794)

2026-07-15 14:09:08 +00:00

success-check-progress.tsx

fix(studio): color regressions after theme update (#47794)

2026-07-15 14:09:08 +00:00

success-check-selected.tsx

fix(ui): align primary colours across text, buttons, and controls (#50697)

2026-09-24 09:56:31 +10:00

switch-demo.tsx

chore: remove <Label> _Shadcn_ suffix (#45986)

2026-05-15 15:55:33 +02:00

switch-form.tsx

chore: delete Button alternative deprecated variant (#47260)

2026-06-24 14:14:47 +02:00

table-actions.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

table-cross-link.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

table-demo.tsx

feat(design-system): improve table docs (#41215)

2025-12-11 13:38:26 +11:00

table-icons.tsx

feat(design-system): improve table docs (#41215)

2025-12-11 13:38:26 +11:00

table-row-link-actions.tsx

refactor(ui): drop redundant Button variant="default" props (#50161)

2026-09-11 17:05:26 +10:00

table-row-link.tsx

chore(design-system): standardise keyboard focus rings (#41575)

2026-07-22 12:10:07 -04:00

table-sort.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

tabs-demo.tsx

fix(ui): tab component (#50183)

2026-09-16 00:00:27 +03:00

text-confirm-dialog-demo.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

text-confirm-dialog-with-cancel-button.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

text-confirm-dialog-with-children.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

text-confirm-dialog-with-size.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

textarea-demo.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

textarea-disabled.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

textarea-form.tsx

chore: delete Button alternative deprecated variant (#47260)

2026-06-24 14:14:47 +02:00

textarea-with-addon.tsx

fix(ui): restore grouped textarea top padding (#50843)

2026-09-24 17:10:28 +10:00

textarea-with-button.tsx

fix(ui): default Button variant to default instead of primary (#50160)

2026-09-10 11:23:17 +10:00

textarea-with-label.tsx

chore: remove <Label> _Shadcn_ suffix (#45986)

2026-05-15 15:55:33 +02:00

textarea-with-text.tsx

chore: remove <Label> _Shadcn_ suffix (#45986)

2026-05-15 15:55:33 +02:00

toc-demo.tsx

chore: cleanup UI patterns exports (#47406)

2026-06-30 09:23:17 +02:00

toc-single-demo.tsx

chore: cleanup UI patterns exports (#47406)

2026-06-30 09:23:17 +02:00

toggle-demo.tsx

chore: remove <Toggle> _Shadcn_ suffix (#45970)

2026-05-15 12:14:31 +02:00

toggle-disabled.tsx

chore: remove <Toggle> _Shadcn_ suffix (#45970)

2026-05-15 12:14:31 +02:00

toggle-group-demo.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

toggle-group-disabled.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

toggle-group-lg.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

toggle-group-outline.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

toggle-group-segmented-filter.tsx

feat(design-system): segmented controls (#50738)

2026-09-25 11:26:46 +01:00

toggle-group-segmented.tsx

feat(design-system): segmented controls (#50738)

2026-09-25 11:26:46 +01:00

toggle-group-single.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

toggle-group-sm.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

toggle-lg.tsx

chore: remove <Toggle> _Shadcn_ suffix (#45970)

2026-05-15 12:14:31 +02:00

toggle-outline.tsx

chore: remove <Toggle> _Shadcn_ suffix (#45970)

2026-05-15 12:14:31 +02:00

toggle-sm.tsx

chore: remove <Toggle> _Shadcn_ suffix (#45970)

2026-05-15 12:14:31 +02:00

toggle-with-text.tsx

chore: remove <Toggle> _Shadcn_ suffix (#45970)

2026-05-15 12:14:31 +02:00

tooltip-demo.tsx

chore: refactor Button API so that it can be used a standard button (#46880)

2026-06-16 23:59:58 +02:00

tree-view-demo.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

tree-view-directories.tsx

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)

2026-02-05 13:54:10 +01:00

tree-view-edit.tsx

chore: remove <ContextMenu> _Shadcn_ suffix (#45971)

2026-05-15 15:09:25 +02:00

tree-view-multi-select.tsx

chore: remove <ContextMenu> _Shadcn_ suffix (#45971)

2026-05-15 15:09:25 +02:00

typography-blockquote.tsx

update: Add TS any checks to ratchet rules to further stop slipping (#40877)

2025-12-02 14:18:21 +00:00

typography-demo.tsx

chore: Migrate the monorepo to use Tailwind v4 (#45318)

2026-04-30 10:53:24 +00:00

typography-h1.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

typography-h2.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

typography-h3.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

typography-h4.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

typography-inline-code.tsx

chore: Migrate the monorepo to use Tailwind v4 (#45318)

2026-04-30 10:53:24 +00:00

typography-large.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

typography-lead.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

typography-list.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

typography-muted.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

typography-p.tsx

chore: Migrate the monorepo to use Tailwind v4 (#45318)

2026-04-30 10:53:24 +00:00

typography-small.tsx

Feat/design system site (#26586)

2024-05-23 17:39:56 +08:00

typography-table.tsx

chore: Migrate the monorepo to use Tailwind v4 (#45318)

2026-04-30 10:53:24 +00:00