diff --git a/.npmrc b/.npmrc
deleted file mode 100644
index 58b508e1..00000000
--- a/.npmrc
+++ /dev/null
@@ -1,2 +0,0 @@
-public-hoist-pattern[]=@types/react
-public-hoist-pattern[]=@types/react-dom
\ No newline at end of file
diff --git a/README.md b/README.md
index e46fdecc..7db77e89 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ The library is published to npm as [`@eqtylab/equality`](https://www.npmjs.com/p
## Prerequisites
- Node 22.12+ (Astro 6 requires Node ≥ 22.12.0)
-- pnpm 9.x (workspace uses `packageManager: pnpm@9.12.3`)
+- pnpm 12.x (workspace uses `packageManager: pnpm@12.5.1`)
Verify versions:
diff --git a/package.json b/package.json
index da12cd0b..960e6765 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "equality",
"private": true,
- "packageManager": "pnpm@9.12.3",
+ "packageManager": "pnpm@12.15.0",
"scripts": {
"build": "pnpm -r run build",
"dev": "pnpm --filter @eqtylab/docs run build:dev && pnpm -r --parallel run dev",
@@ -25,11 +25,5 @@
"prettier-plugin-astro": "0.14.1",
"prettier-plugin-tailwindcss": "^0.6.14",
"typescript-eslint": "^8.53.0"
- },
- "pnpm": {
- "overrides": {
- "@types/react": "^19.2.2",
- "@types/react-dom": "^19.2.2"
- }
}
}
diff --git a/packages/demo/src/components/demo/list-or-grid-view-toggle.tsx b/packages/demo/src/components/demo/list-or-grid-view-toggle.tsx
deleted file mode 100644
index 402a9176..00000000
--- a/packages/demo/src/components/demo/list-or-grid-view-toggle.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {
- ListOrGridViewToggle,
- type ViewMode,
- type ViewOrder,
-} from "@eqtylab/equality";
-import { useState } from "react";
-
-export const ListOrGridViewToggleDemo = ({
- viewMode: initialViewMode,
- order,
-}: {
- viewMode: ViewMode;
- order: ViewOrder;
-}) => {
- const [viewMode, setViewMode] = useState<"grid" | "list">(initialViewMode);
-
- return (
-
- );
-};
diff --git a/packages/demo/src/content/docs/components/list-or-grid-view-toggle.mdx b/packages/demo/src/content/docs/components/list-or-grid-view-toggle.mdx
deleted file mode 100644
index 95df3ebf..00000000
--- a/packages/demo/src/content/docs/components/list-or-grid-view-toggle.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: "List or Grid View Toggle"
-description: "Deprecated List or Grid View Toggle with sizes and variants"
-deprecated:
- message: 'Deprecated in favour of Segmented Controls.'
----
-
-import { ListOrGridViewToggle } from "@eqtylab/equality";
-import { ListOrGridViewToggleDemo } from "@demo/components/demo/list-or-grid-view-toggle";
-
-## Overview
-
-The List or Grid View Toggle component is used to switch between list and grid view.
-
-Please adjust the order using the `order` parameter so that the default `viewMode` is always on the left side.
-
-## Usage
-
-Import the component:
-
-```tsx
-import { ListOrGridViewToggle } from "@eqtylab/equality";
-```
-
-`viewMode` and `onViewModeChange` are required props and should be controlled by the parent component.
-
-```tsx
-const [viewMode, setViewMode] = useState("grid");
-
-;
-```
-
-## Examples
-
-### Default
-
-
-
-### Reordered
-
-
-
-## Reordering
-
-Reorder the order of the buttons using the `order` prop. The default `viewMode` should always be placed on the left side.
-
-```tsx
-
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-| ------------------ | ---------------------------------------- | ------------------ | ----------------------------------------------- |
-| `viewMode` | `"grid"` \| `"list"` | Required | Sets the active state. |
-| `onViewModeChange` | `(mode: "grid" \| "list") => void` | Required | Function to call when the active state changes. |
-| `order` | `["grid", "list"]` \| `["list", "grid"]` | `["grid", "list"]` | Controls the order of the buttons. |
-| `className` | `string` | - | Additional CSS classes to apply to the toggle. |
diff --git a/packages/demo/src/content/docs/components/nav.mdx b/packages/demo/src/content/docs/components/nav.mdx
index 0df32914..d81ab6ee 100644
--- a/packages/demo/src/content/docs/components/nav.mdx
+++ b/packages/demo/src/content/docs/components/nav.mdx
@@ -8,9 +8,11 @@ import { NavListDemo } from "@demo/components/demo/nav-list";
## Overview
-Nav builds an app's sidebar. `NavRail` is the column of icon links on the left, and `NavPanel` is the panel beside it, with a header and a scrolling body. `NavSwitcher` sits in the panel's header to switch between items such as projects; with one option and no action it is a plain heading.
+Nav builds an app's sidebar. `NavRail` composes the largest sections of an application as icons with tooltips, and `NavPanel` sits beside it containing each page within the section, a header, and a scrolling body. `NavSwitcher` sits in the panel's header to allow users to quickly switch between the parent item of a section such as projects in Guardian.
-Inside the panel, `NavList` holds the links, one per row, in groups. A row can open a deeper level, which slides in with a ‹ to go back. A nav list also works on its own, such as in a popover, a sheet or a settings list. For actions in a pop-up, use a [Dropdown Menu](/components/dropdown-menu): menus are for actions, nav lists are for going places.
+Our Nav component progressively displays a tree of navigation options. In addition to navigating between pages, `NavListItem` can also open a deeper level. Users go back up a level with the ‹ row at the top.
+
+Nav should not be used for actions, for these use a [Dropdown Menu](/components/dropdown-menu) instead. Always put `NavList` inside an element with a background colour, such as a popover, sheet or panel: the sliding levels inherit the background colour to cover each other.
## Usage
@@ -31,7 +33,7 @@ import {
} from "@eqtylab/equality";
```
-Group the rows, each group with an optional label, and put a separator between groups. Rows are 36px, and grow to 44px on touch screens:
+Group the rows, each group with an optional label, and add a separator between groups.
@@ -94,7 +96,7 @@ Put a group inside another group to nest it one level, under a tree line. Nested
## Drill-in
-A row with `drill="eu-ai-act"` opens the level whose `value` is `"eu-ai-act"`. A level with a `parent` gets a ‹ row at the top, named by its `label`, that returns to the parent. Levels must be direct children of `NavDrill`. Put `NavList` inside an element with a background colour, such as a popover, sheet or panel: the sliding levels borrow it to cover each other.
+A `NavListItem` with `drill="eu-ai-act"` opens a level whose `value` is `"eu-ai-act"`. A `NavDrillLevel` with a `parent` attribute gets a ‹ row at the top, named by its `label`, that returns the user to the parent level of the tree. Levels must be direct children of `NavDrill`.
After a drill row, focus moves to the new level's ‹; after ‹, back to the row you came from. Any other change of level leaves focus alone, and levels swap without sliding under reduced motion.
@@ -159,7 +161,7 @@ function openLevel(level) {
### App Sidebar
-A rail of sections beside a panel, with a switcher in the panel's header and a nav list that drills into a policy.
+A rail of top-level app sections in `NavRail` beside a `NavPanel`, with a switcher in the panel's header to quick switch between objects, and a nav list that drills into a policy. Not all applications or navigation implementations require this level of organisation. Use NavRail when an application is sufficiently complex, and only for app-level navigation.
@@ -202,8 +204,6 @@ A rail of sections beside a panel, with a switcher in the panel's header and a n
```
-A `NavDrill` inside a `NavPanel` scrolls the panel back to the top on every change of level.
-
The switcher's trigger stops a typed letter from picking an item while its list is closed: a switch navigates, and focus lands on the trigger afterwards. To do the same on your own `Select`, see [A select that navigates](/components/select#a-select-that-navigates).
### Navigation in a Sheet
@@ -280,8 +280,8 @@ On a phone, the sidebar comes in from the left in a [Sheet](/components/sheet).
| `options` | The items to switch between | `{ value, label, keywords? }[]` | | ✅ |
| `value` | The current item's value | `string` | | ✅ |
| `onValueChange` | Called with the picked item's value | `(value: string) => void` | | ✅ |
-| `onHighlight` | Hover or focus on an option, to warm its destination | `(value: string) => void` | | ❌ |
-| `onHighlightEnd` | Hover or focus leaves an option | `() => void` | | ❌ |
+| `onHighlight` | Hover or focus on an option, to preload its destination | `(value: string) => void` | | ❌ |
+| `onHighlightEnd` | Hover or focus leaves an option, to cancel its preload | `() => void` | | ❌ |
| `action` | A command at the bottom of the list, kept while searching, such as "Create Project"; `onSelect` runs after the list closes | `{ label: string; onSelect: () => void }` | | ❌ |
| `loading` | Holds the switcher's height while the current item loads | `boolean` | `false` | ❌ |
diff --git a/packages/demo/src/content/docs/components/scroll-area.mdx b/packages/demo/src/content/docs/components/scroll-area.mdx
deleted file mode 100644
index d78a79b8..00000000
--- a/packages/demo/src/content/docs/components/scroll-area.mdx
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: "Scroll Area"
-description: "Deprecated scrollable container with custom scrollbars"
-deprecated:
- message: "Deprecated in favour of browser-native scroll areas. Set an overflow and a height on your own element instead."
----
-
-import { ScrollArea } from "@eqtylab/equality";
-
-## Overview
-
-Scroll Area wrapped content in [Radix UI Scroll Area](https://www.radix-ui.com/primitives/docs/components/scroll-area) so that overflowing content got a styled, cross-browser scrollbar instead of the native one.
-
-This component is deprecated. Browsers now render restrained, theme-aware scrollbars of their own. New code should use a native scrollable element. Existing usage will be removed in a future release.
-
-## Migrating
-
-Replace the component with an element that scrolls natively. Give it a height and an overflow, and leave the scrollbar alone — the browser draws one that already matches the user's platform and colour scheme:
-
-```tsx
-// Before
-
-
{/* long content */}
-
-
-// After
-
-
{/* long content */}
-
-```
-
-Use `overflow-x-auto` for horizontal scrolling, in place of ``.
-
-Do not restyle the scrollbar. The `styled-vertical-scrollbar` and `styled-horizontal-scrollbar` utilities have been removed, and `::-webkit-scrollbar` rules of your own are a WebKit-only fork of a control the browser already themes. Dialog and Sheet now scroll this way too.
-
-## Usage
-
-Import the component:
-
-```tsx
-import { ScrollArea } from "@eqtylab/equality";
-```
-
-Set a height on the Scroll Area and place your content inside:
-
-```tsx
-
-
{/* long content */}
-
-```
-
-## Example
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-
- Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
-
- Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
-
- Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
-
-
-
-
-## Slots
-
-| Name | Description |
-| ------------ | ------------------------------------------------------------------------------------- |
-| `ScrollArea` | The scrollable container. Wraps your content and renders a styled vertical scrollbar. |
-| `ScrollBar` | The scrollbar element, exported for advanced composition (e.g. a horizontal bar). |
-
-## Props
-
-Scroll Area forwards the underlying [Radix Scroll Area Root](https://www.radix-ui.com/primitives/docs/components/scroll-area#root) props (such as `type` and `scrollHideDelay`) in addition to the props below.
-
-| Name | Description | Type | Default | Required |
-| ----------- | ----------------------------------------------------- | ----------- | ------- | -------- |
-| `children` | The content to render inside the scrollable viewport. | `ReactNode` | — | ✅ |
-| `className` | Additional CSS classes applied to the container. | `string` | — | ❌ |
diff --git a/packages/demo/src/content/docs/getting-started/elevation.mdx b/packages/demo/src/content/docs/getting-started/elevation.mdx
index fd5f2a74..40d5303a 100644
--- a/packages/demo/src/content/docs/getting-started/elevation.mdx
+++ b/packages/demo/src/content/docs/getting-started/elevation.mdx
@@ -97,7 +97,6 @@ The following components have an `elevation` prop:
| ------------- | --------- |
| Alert Dialog | Overlay |
| Dialog | Overlay |
-| Drawer | Overlay |
| Dropdown Menu | Overlay |
| Popover | Overlay |
| Sheet | Overlay |
diff --git a/packages/demo/src/content/docs/getting-started/usage.mdx b/packages/demo/src/content/docs/getting-started/usage.mdx
index 701a2366..9650806f 100644
--- a/packages/demo/src/content/docs/getting-started/usage.mdx
+++ b/packages/demo/src/content/docs/getting-started/usage.mdx
@@ -81,7 +81,7 @@ import { ThemeProvider } from "@eqtylab/equality";
### Portalled surfaces
-Tooltips, popovers, selects, dialogs, sheets, drawers, and dropdown menus render into a portal that `` supplies automatically, so they stay inside the themed subtree. Two cases need you to provide that container yourself, via the `portalContainer` prop:
+Tooltips, popovers, selects, dialogs, sheets, and dropdown menus render into a portal that `` supplies automatically, so they stay inside the themed subtree. Two cases need you to provide that container yourself, via the `portalContainer` prop:
- **Shadow DOM** — the default document lookup can't see into a shadow root, so portalled surfaces escape the boundary and render unstyled.
- **More than one theme root on a page** — otherwise the second root's portals can land inside the first one's container.
diff --git a/packages/skills/equality-design-system/SKILL.md b/packages/skills/equality-design-system/SKILL.md
index 7fb59d03..66d235f3 100644
--- a/packages/skills/equality-design-system/SKILL.md
+++ b/packages/skills/equality-design-system/SKILL.md
@@ -91,7 +91,6 @@ Verified absent — do not go hunting:
- Standalone Calendar or single date picker (only `DateRangePicker`)
- Free-text or async autocomplete (`Select` with `SelectSearch` only filters fixed options)
- Carousel
-- Sidebar/Navigation/Menubar primitives
- Rating
- Timeline
- Resizable panels
diff --git a/packages/skills/equality-design-system/references/setup.md b/packages/skills/equality-design-system/references/setup.md
index 35d8d691..2dbeeb49 100644
--- a/packages/skills/equality-design-system/references/setup.md
+++ b/packages/skills/equality-design-system/references/setup.md
@@ -53,7 +53,7 @@ Components each ship their own scoped CSS Module, so there is no global componen
## Portalled surfaces
-Tooltips, popovers, selects, dialogs, sheets, drawers, and dropdown menus render into a portal. `ThemeProvider` creates and supplies that container, which keeps those surfaces inside the themed subtree.
+Tooltips, popovers, selects, dialogs, sheets, and dropdown menus render into a portal. `ThemeProvider` creates and supplies that container, which keeps those surfaces inside the themed subtree.
**If a dropdown or dialog renders unstyled, you almost certainly have no `ThemeProvider`.** That is the single most common setup failure.
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index d198e9aa..57af2969 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -2,6 +2,21 @@
Notable changes to Equality are recorded here, following [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+## 5.0.0 - 2026-10-27
+
+Removes components that were deprecated or never used. Code that imports any of them needs a
+change before upgrading.
+
+### Removed
+
+- `ScrollArea` and `ScrollBar`. Set an overflow and a height on your own element instead; browsers
+ draw theme-aware scrollbars of their own.
+- `ListOrGridViewToggle`. Use `SegmentedControls` instead.
+- `Drawer` and its parts. Use `Sheet` instead.
+- `Pagination` no longer scrolls a `ScrollArea` viewport to the top when the page changes. Pass
+ `scrollTargetRef` to choose what scrolls into view.
+- The `vaul` and `@radix-ui/react-scroll-area` dependencies.
+
## 4.15.0 - 2026-10-27
Sidebar navigation comes to Equality as two sets of parts: `NavList` rows for going somewhere,
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 610ed1e7..d430f703 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -7,7 +7,7 @@
"url": "git+https://github.com/eqtylab/equality.git",
"directory": "packages/ui"
},
- "version": "4.15.0",
+ "version": "5.0.0",
"license": "Apache-2.0",
"keywords": [
"component library",
@@ -61,7 +61,6 @@
"@radix-ui/react-popover": "^1.1.3",
"@radix-ui/react-progress": "^1.1.1",
"@radix-ui/react-radio-group": "^1.3.8",
- "@radix-ui/react-scroll-area": "^1.2.1",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.1",
@@ -78,8 +77,7 @@
"react-hook-form": "^7.63.0",
"react-truncate-inside": "^1.0.3",
"tailwind-merge": "^2.5.4",
- "tw-animate-css": "^1.4.0",
- "vaul": "^1.1.2"
+ "tw-animate-css": "^1.4.0"
},
"peerDependencies": {
"react": "^18.2.0 || ^19.0.0",
diff --git a/packages/ui/src/components/drawer/drawer.module.css b/packages/ui/src/components/drawer/drawer.module.css
deleted file mode 100644
index d590b2a5..00000000
--- a/packages/ui/src/components/drawer/drawer.module.css
+++ /dev/null
@@ -1,46 +0,0 @@
-@reference '../../theme/theme.module.css';
-
-.drawer-overlay {
- @apply overlay-content;
- @apply overlay-background;
-}
-
-.drawer-content {
- @apply bg-background-overlay border-border-overlay shadow-shadow-overlay border shadow-lg;
- @apply mt-24 rounded-t-[10px];
- @apply z-modal fixed inset-x-0 bottom-0 h-auto;
- @apply flex flex-col;
-}
-
-.drawer-content-divider {
- @apply bg-border;
- @apply h-2 w-[100px] rounded-full;
- @apply mx-auto mt-4;
-}
-
-.drawer-header {
- @apply grid grid-cols-[1fr_auto] gap-1.5 [&>*]:col-start-1;
- @apply p-4;
- @apply text-center sm:text-left;
-}
-
-.drawer-header-actions {
- @apply row-span-(--row-span) col-start-2 row-start-1;
-}
-
-.drawer-footer {
- @apply mt-auto p-4;
- @apply flex flex-col gap-2;
-}
-
-.drawer-title {
- @apply text-lg font-semibold leading-none tracking-tight;
-}
-
-.drawer-description {
- @apply text-text-secondary text-sm;
-}
-
-.drawer-inner-content {
- @apply px-4;
-}
diff --git a/packages/ui/src/components/drawer/drawer.tsx b/packages/ui/src/components/drawer/drawer.tsx
deleted file mode 100644
index 3f0fd040..00000000
--- a/packages/ui/src/components/drawer/drawer.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from 'react';
-import { Drawer as DrawerPrimitive } from 'vaul';
-
-import styles from '@/components/drawer/drawer.module.css';
-import { cn } from '@/lib/utils';
-import { usePortalContainer } from '@/theme/portal-container';
-
-const Drawer = ({
- shouldScaleBackground = true,
- ...props
-}: React.ComponentProps) => (
-
-);
-Drawer.displayName = 'Drawer';
-
-const DrawerTrigger = DrawerPrimitive.Trigger;
-
-const DrawerPortal = ({ children }: { children: React.ReactNode }) => (
- {children}
-);
-
-const DrawerClose = DrawerPrimitive.Close;
-
-const DrawerOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
-
-const DrawerContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-
-
-
- {children}
-
-
-));
-DrawerContent.displayName = 'DrawerContent';
-
-const DrawerHeader = ({ className, ...props }: React.HTMLAttributes) => (
-
-);
-DrawerHeader.displayName = 'DrawerHeader';
-
-const DrawerHeaderActions = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes & { rowSpan: number }
->(({ className, rowSpan, style, ...props }, ref) => {
- return (
-
- );
-});
-DrawerHeaderActions.displayName = 'DrawerHeaderActions';
-
-const DrawerFooter = ({ className, ...props }: React.HTMLAttributes) => (
-
-);
-DrawerFooter.displayName = 'DrawerFooter';
-
-const DrawerTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
-
-const DrawerDescription = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
-
-const DrawerInnerContent = ({ className, ...props }: React.HTMLAttributes) => (
-
-);
-DrawerInnerContent.displayName = 'DrawerInnerContent';
-
-export {
- Drawer,
- DrawerClose,
- DrawerContent,
- DrawerDescription,
- DrawerFooter,
- DrawerHeader,
- DrawerHeaderActions,
- DrawerInnerContent,
- DrawerOverlay,
- DrawerPortal,
- DrawerTitle,
- DrawerTrigger,
-};
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 1fedde04..5111cacc 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -15,7 +15,6 @@ export * from './copy-button/copy-button';
export * from './date-range-picker/date-range-picker';
export * from './dialog/dialog';
export * from './display-field/display-field';
-export * from './drawer/drawer';
export * from './dropdown-menu/dropdown-menu';
export * from './empty-table-state/empty-table-state';
export * from './filter-dropdown/filter-dropdown';
@@ -27,7 +26,6 @@ export * from './icon/icon';
export * from './info-card/info-card';
export * from './input/input';
export * from './label/label';
-export * from './list-or-grid-view-toggle/list-or-grid-view-toggle';
export * from './loading-overlay/loading-overlay';
export * from './metric-card/metric-card';
export * from './motion-collapsible/motion-collapsible';
@@ -46,7 +44,6 @@ export * from './radial-graph/radial-graph';
export * from './radio-dropdown/radio-dropdown';
export * from './radio-group/radio-group';
export * from './resource-badge/resource-badge';
-export * from './scroll-area/scroll-area';
export * from './search-bar/search-bar';
export * from './section-heading/section-heading';
export * from './segmented-controls/segmented-controls';
diff --git a/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.module.css b/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.module.css
deleted file mode 100644
index b413ddf2..00000000
--- a/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-@reference '../../theme/theme.module.css';
-
-.list-or-grid-view-toggle {
- @apply border-button-tertiary-border border;
- @apply flex rounded-md;
- @apply w-max overflow-hidden;
- @apply bg-button-tertiary-fill;
- @apply relative;
-}
-
-.icon-button {
- @apply rounded-none! border-0;
- @apply z-above relative;
- @apply flex-center size-8;
- @apply cursor-pointer bg-transparent;
-}
-
-.icon-button--active {
- @apply text-button-primary-text;
-}
-
-.icon-button--inactive {
- @apply text-text-secondary hover:text-text-primary;
-}
-
-.active-button-indicator {
- @apply absolute bottom-0 left-0 top-0;
- @apply bg-button-primary-fill;
- @apply transition-transform;
-}
diff --git a/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.tsx b/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.tsx
deleted file mode 100644
index dd9f9113..00000000
--- a/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Grid3X3, List } from 'lucide-react';
-
-import styles from '@/components/list-or-grid-view-toggle/list-or-grid-view-toggle.module.css';
-import { cn } from '@/lib/utils';
-
-export type ViewMode = 'grid' | 'list';
-export type ViewOrder = ['grid', 'list'] | ['list', 'grid'];
-
-interface ListOrGridViewToggleProps {
- viewMode: ViewMode;
- onViewModeChange: (mode: ViewMode) => void;
- order?: ViewOrder;
- className?: string;
-}
-
-/**
- * @deprecated Use `SegmentedControls` instead.
- */
-const ListOrGridViewToggle = ({
- viewMode,
- onViewModeChange,
- order = ['grid', 'list'],
- className,
-}: ListOrGridViewToggleProps) => {
- const currentActiveIndex = order.indexOf(viewMode);
-
- const handleGridClick = () => {
- onViewModeChange('grid');
- };
-
- const handleListClick = () => {
- onViewModeChange('list');
- };
-
- return (
-