@xenide-io/the-old-ui-theme 0.2.9 → 0.3.1

package/src/components/ui/index.ts

@@ -1,17 +1,84 @@
-export { Button as Button, type ButtonProps as ButtonProps, type ButtonShape as ButtonShape, type ButtonSize as ButtonSize, type ButtonVariant as ButtonVariant } from "@/components/ui/Button";
-export { ButtonChrome as ButtonChrome, type ButtonChromeProps as ButtonChromeProps } from "@/components/ui/ButtonChrome";
-export { Alert as Alert, type AlertProps as AlertProps, type AlertStatus as AlertStatus } from "@/components/ui/Alert";
-export { Badge as Badge, type BadgeProps as BadgeProps, type BadgeSize as BadgeSize, type BadgeVariant as BadgeVariant } from "@/components/ui/Badge";
-export { Card as Card, type CardProps as CardProps, type CardVariant as CardVariant } from "@/components/ui/Card";
-export { Drawer as Drawer, type DrawerProps as DrawerProps, type DrawerSide as DrawerSide, type DrawerSize as DrawerSize } from "@/components/ui/Drawer";
-export { Kbd as Kbd, type KbdProps as KbdProps, type KbdVariant as KbdVariant } from "@/components/ui/Kbd";
+"use client";
+
+export {
+  Button as Button,
+  type ButtonProps as ButtonProps,
+  type ButtonShape as ButtonShape,
+  type ButtonSize as ButtonSize,
+  type ButtonVariant as ButtonVariant,
+} from "@/components/ui/Button";
+export {
+  ButtonChrome as ButtonChrome,
+  type ButtonChromeProps as ButtonChromeProps,
+} from "@/components/ui/ButtonChrome";
+export {
+  Alert as Alert,
+  type AlertProps as AlertProps,
+  type AlertStatus as AlertStatus,
+} from "@/components/ui/Alert";
+export {
+  Badge as Badge,
+  type BadgeProps as BadgeProps,
+  type BadgeSize as BadgeSize,
+  type BadgeVariant as BadgeVariant,
+} from "@/components/ui/Badge";
+export {
+  Card as Card,
+  type CardProps as CardProps,
+  type CardVariant as CardVariant,
+} from "@/components/ui/Card";
+export {
+  Drawer as Drawer,
+  type DrawerProps as DrawerProps,
+  type DrawerSide as DrawerSide,
+  type DrawerSize as DrawerSize,
+} from "@/components/ui/Drawer";
+export {
+  Kbd as Kbd,
+  type KbdPlatform as KbdPlatform,
+  type KbdProps as KbdProps,
+  type KbdVariant as KbdVariant,
+} from "@/components/ui/Kbd";
+export {
+  Loader,
+  LoadingState,
+  Skeleton,
+  type LoaderProps,
+  type LoaderSize,
+  type LoaderVariant,
+  type LoadingStateProps,
+  type SkeletonProps,
+  type SkeletonShape,
+} from "@/components/ui/Loader";
+export {
+  AuthCard,
+  AuthDivider,
+  AuthLayout,
+  type AuthCardProps,
+  type AuthDividerProps,
+  type AuthLayoutProps,
+} from "@/components/ui/AuthLayout";
+export {
+  SettingsLayout,
+  SettingsNav,
+  type SettingsLayoutProps,
+  type SettingsNavGroup,
+  type SettingsNavItem,
+  type SettingsNavProps,
+} from "@/components/ui/SettingsLayout";
 export {
   DropdownButton as DropdownButton,
   DropdownItem as DropdownItem,
   DropdownMenu as DropdownMenu,
+  DropdownRadioGroup as DropdownRadioGroup,
+  DropdownRadioItem as DropdownRadioItem,
   type DropdownAlign as DropdownAlign,
   type DropdownButtonProps as DropdownButtonProps,
+  type DropdownItemProps as DropdownItemProps,
   type DropdownMenuProps as DropdownMenuProps,
+  type DropdownRadioGroupProps as DropdownRadioGroupProps,
+  type DropdownRadioItemProps as DropdownRadioItemProps,
+  type DropdownSide as DropdownSide,
 } from "@/components/ui/DropdownMenu";
 export {
   Checkbox as Checkbox,
@@ -33,32 +100,133 @@ export {
   type TextareaProps as TextareaProps,
   type ToggleProps as ToggleProps,
 } from "@/components/ui/Input";
-export { Modal as Modal, type ModalProps as ModalProps, type ModalSize as ModalSize } from "@/components/ui/Modal";
-export { Breadcrumbs as Breadcrumbs, Pagination as Pagination, type BreadcrumbItem as BreadcrumbItem, type BreadcrumbsProps as BreadcrumbsProps, type PaginationProps as PaginationProps } from "@/components/ui/Navigation";
-export { Panel as Panel, type PanelProps as PanelProps } from "@/components/ui/Panel";
-export { Rating as Rating, type RatingProps as RatingProps } from "@/components/ui/Rating";
-export { SearchGroup as SearchGroup, SearchInput as SearchInput, type SearchGroupProps as SearchGroupProps, type SearchInputProps as SearchInputProps } from "@/components/ui/SearchInput";
-export { Table as Table, type TableColumn as TableColumn, type TableProps as TableProps } from "@/components/ui/Table";
-export { Stat as Stat, type StatProps as StatProps, type StatTone as StatTone } from "@/components/ui/Stat";
-export { Toast as Toast, ToastStack as ToastStack, type ToastProps as ToastProps, type ToastStackProps as ToastStackProps, type ToastStatus as ToastStatus } from "@/components/ui/Toast";
-export { Tabs as Tabs, type TabItem as TabItem, type TabsProps as TabsProps, type TabsVariant as TabsVariant } from "@/components/ui/Tabs";
+export {
+  FormField as FormField,
+  type FormFieldControlProps as FormFieldControlProps,
+  type FormFieldProps as FormFieldProps,
+} from "@/components/ui/FormField";
+export {
+  Modal as Modal,
+  type ModalProps as ModalProps,
+  type ModalSize as ModalSize,
+} from "@/components/ui/Modal";
+export {
+  Breadcrumbs as Breadcrumbs,
+  Pagination as Pagination,
+  type BreadcrumbItem as BreadcrumbItem,
+  type BreadcrumbsProps as BreadcrumbsProps,
+  type PaginationProps as PaginationProps,
+} from "@/components/ui/Navigation";
+export {
+  Panel as Panel,
+  type PanelProps as PanelProps,
+} from "@/components/ui/Panel";
+export {
+  Rating as Rating,
+  type RatingProps as RatingProps,
+} from "@/components/ui/Rating";
+export {
+  SearchGroup as SearchGroup,
+  SearchInput as SearchInput,
+  type SearchGroupProps as SearchGroupProps,
+  type SearchInputProps as SearchInputProps,
+} from "@/components/ui/SearchInput";
+export {
+  Table as Table,
+  type TableColumn as TableColumn,
+  type TableProps as TableProps,
+} from "@/components/ui/Table";
+export {
+  Stat as Stat,
+  type StatProps as StatProps,
+  type StatTone as StatTone,
+} from "@/components/ui/Stat";
+export {
+  Toast as Toast,
+  ToastStack as ToastStack,
+  type ToastProps as ToastProps,
+  type ToastStackProps as ToastStackProps,
+  type ToastStatus as ToastStatus,
+} from "@/components/ui/Toast";
+export {
+  Tabs as Tabs,
+  type TabItem as TabItem,
+  type TabsProps as TabsProps,
+  type TabsVariant as TabsVariant,
+} from "@/components/ui/Tabs";
 export { ThemeDomSync } from "@/components/ui/ThemeDomSync";
-export { ThemeManager, type ThemeManagerProps } from "@/components/ui/ThemeManager";
-export { ThemeSwitcher, type ThemeSwitcherProps } from "@/components/ui/ThemeSwitcher";
-export { IconBase as Icon, IconByName as IconByName, type IconProps as IconProps, type IconName as IconName } from "@/components/icons";
+export {
+  ThemeManager,
+  type ThemeManagerProps,
+} from "@/components/ui/ThemeManager";
+export {
+  ThemeSwitcher,
+  type ThemeSwitcherProps,
+} from "@/components/ui/ThemeSwitcher";
+export {
+  IconBase as Icon,
+  IconByName as IconByName,
+  type CanonicalIconName as CanonicalIconName,
+  type IconAliasName as IconAliasName,
+  type IconProps as IconProps,
+  type IconName as IconName,
+} from "@/components/icons";
 export { Accordion } from "@/components/ui/Accordion";
 export { Stepper } from "@/components/ui/Stepper";
 export { SegmentedControl } from "@/components/ui/SegmentedControl";
 export { CommandPalette } from "@/components/ui/CommandPalette";
 export { Calendar } from "@/components/ui/Calendar";
 export { HoverCard } from "@/components/ui/HoverCard";
+export {
+  Tooltip,
+  TooltipProvider,
+  type TooltipAlign,
+  type TooltipProps,
+  type TooltipProviderProps,
+  type TooltipSide,
+} from "@/components/ui/Tooltip";
 export { EmptyState } from "@/components/ui/EmptyState";
-export { FilterChips } from "@/components/ui/FilterChips";
+export {
+  FilterChips,
+  type FilterChip,
+  type FilterChipsProps,
+} from "@/components/ui/FilterChips";
+export {
+  FilterBar,
+  FilterMenu,
+  SortMenu,
+  type FilterBarProps,
+  type FilterMenuOption,
+  type FilterMenuProps,
+  type SortMenuProps,
+} from "@/components/ui/FilterBar";
+export {
+  FilterControls,
+  type FilterControlsProps,
+} from "@/components/ui/FilterControls";
 export { CodeBlock } from "@/components/ui/CodeBlock";
-export { ComponentDocs, type ComponentDocsProps, type ComponentPropRow } from "@/components/ui/ComponentDocs";
+export {
+  ComponentDocs,
+  type ComponentDocsProps,
+  type ComponentPropRow,
+} from "@/components/ui/ComponentDocs";
 export { ShowcaseWrapper } from "@/components/ui/ShowcaseWrapper";
 export { CollapsibleSection } from "@/components/ui/CollapsibleSection";
-export { Display, H1, H2, H3, H4, H5, P, Small, Caption, Overline, Lead, Mono, Label } from "@/components/ui/Typography";
+export {
+  Display,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  P,
+  Small,
+  Caption,
+  Overline,
+  Lead,
+  Mono,
+  Label,
+} from "@/components/ui/Typography";
 export {
   Avatar as Avatar,
   AvatarGroup as AvatarGroup,
@@ -90,3 +258,148 @@ export {
   type TimelineProps as TimelineProps,
   type TimelineEvent as TimelineEvent,
 } from "@/components/ui/Timeline";
+export {
+  Banner as Banner,
+  type BannerProps as BannerProps,
+  type BannerType as BannerType,
+} from "@/components/ui/Banner";
+export {
+  Dialog as Dialog,
+  type DialogProps as DialogProps,
+} from "@/components/ui/Dialog";
+export {
+  Divider as Divider,
+  type DividerProps as DividerProps,
+} from "@/components/ui/Divider";
+export {
+  Tag as Tag,
+  type TagProps as TagProps,
+  type TagType as TagType,
+} from "@/components/ui/Tag";
+export {
+  ProgressCircle as ProgressCircle,
+  type ProgressCircleProps as ProgressCircleProps,
+} from "@/components/ui/ProgressCircle";
+export {
+  Row as Row,
+  type RowProps as RowProps,
+} from "@/components/ui/Row";
+export {
+  Widget as Widget,
+  type WidgetProps as WidgetProps,
+} from "@/components/ui/Widget";
+export {
+  Lettermark as Lettermark,
+  type LettermarkProps as LettermarkProps,
+} from "@/components/ui/Lettermark";
+export {
+  Splotch as Splotch,
+  type SplotchProps as SplotchProps,
+  type SplotchColor as SplotchColor,
+} from "@/components/ui/Splotch";
+export {
+  Popover as Popover,
+  type PopoverProps as PopoverProps,
+} from "@/components/ui/Popover";
+export {
+  LoadingBar as LoadingBar,
+  type LoadingBarProps as LoadingBarProps,
+} from "@/components/ui/LoadingBar";
+export {
+  Link as Link,
+  type LinkProps as LinkProps,
+} from "@/components/ui/Link";
+export {
+  Spinner as Spinner,
+  type SpinnerProps as SpinnerProps,
+} from "@/components/ui/Spinner";
+export {
+  Snack as Snack,
+  type SnackProps as SnackProps,
+} from "@/components/ui/Snack";
+export {
+  Combobox as Combobox,
+  type ComboboxProps as ComboboxProps,
+  type ComboboxOption as ComboboxOption,
+} from "@/components/ui/Combobox";
+export {
+  Autocomplete as Autocomplete,
+  type AutocompleteProps as AutocompleteProps,
+  type AutocompleteOption as AutocompleteOption,
+} from "@/components/ui/Autocomplete";
+export {
+  ContextMenu as ContextMenu,
+  type ContextMenuProps as ContextMenuProps,
+  type ContextMenuItem as ContextMenuItem,
+} from "@/components/ui/ContextMenu";
+export {
+  Resizable as Resizable,
+  type ResizableProps as ResizableProps,
+} from "@/components/ui/Resizable";
+export {
+  ScrollArea as ScrollArea,
+  type ScrollAreaProps as ScrollAreaProps,
+} from "@/components/ui/ScrollArea";
+export {
+  NumberField as NumberField,
+  type NumberFieldProps as NumberFieldProps,
+} from "@/components/ui/NumberField";
+export {
+  InputGroup as InputGroup,
+  type InputGroupProps as InputGroupProps,
+} from "@/components/ui/InputGroup";
+export {
+  ButtonGroup as ButtonGroup,
+  type ButtonGroupProps as ButtonGroupProps,
+} from "@/components/ui/ButtonGroup";
+export {
+  ToggleButton as ToggleButton,
+  ToggleGroup as ToggleGroup,
+  type ToggleButtonProps as ToggleButtonProps,
+  type ToggleGroupProps as ToggleGroupProps,
+} from "@/components/ui/Toggle";
+export {
+  Menubar as Menubar,
+  type MenubarProps as MenubarProps,
+  type MenubarItem as MenubarItem,
+} from "@/components/ui/Menubar";
+export {
+  AlertDialog as AlertDialog,
+  type AlertDialogProps as AlertDialogProps,
+} from "@/components/ui/AlertDialog";
+export {
+  Dot as Dot,
+  type DotProps as DotProps,
+} from "@/components/ui/Dot";
+export {
+  Collapsible as Collapsible,
+  type CollapsibleProps as CollapsibleProps,
+} from "@/components/ui/Collapsible";
+export {
+  Metric as Metric,
+  type MetricProps as MetricProps,
+} from "@/components/ui/Metric";
+export {
+  Chip as Chip,
+  type ChipProps as ChipProps,
+} from "@/components/ui/Chip";
+export {
+  DataTable as DataTable,
+  type DataTableProps as DataTableProps,
+  type DataTableColumn as DataTableColumn,
+} from "@/components/ui/DataTable";
+export {
+  DatePicker as DatePicker,
+  type DatePickerProps as DatePickerProps,
+} from "@/components/ui/DatePicker";
+export {
+  AppLayout as AppLayout,
+  type AppLayoutProps as AppLayoutProps,
+} from "@/components/ui/AppLayout";
+
+export {
+  Sidebar as Sidebar,
+  type SidebarProps as SidebarProps,
+  type SidebarGroup as SidebarGroup,
+  type SidebarItemDef as SidebarItemDef,
+} from "@/components/ui/Sidebar";

package/src/components/ui/interaction-primitives.test.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { DropdownButton, DropdownItem } from "@/components/ui/DropdownMenu";
+import { FilterMenu } from "@/components/ui/FilterBar";
+import { FilterChips } from "@/components/ui/FilterChips";
+
+describe("adaptive dropdown", () => {
+  it("supports keyboard navigation, selection, closing, and focus restoration", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    render(
+      <DropdownButton label="Actions">
+        <DropdownItem onClick={onSelect}>Export report</DropdownItem>
+        <DropdownItem>Duplicate</DropdownItem>
+      </DropdownButton>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Actions" });
+    await user.click(trigger);
+    expect(screen.getByRole("menu")).toBeInTheDocument();
+
+    await user.keyboard("{ArrowDown}{Enter}");
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+
+  it("exposes filter choices as a controlled radio menu", async () => {
+    const user = userEvent.setup();
+
+    function Fixture() {
+      const [value, setValue] = useState("active");
+      return (
+        <FilterMenu
+          label="Status"
+          value={value}
+          onValueChange={setValue}
+          options={[
+            { value: "active", label: "Active" },
+            { value: "draft", label: "Draft" },
+          ]}
+        />
+      );
+    }
+
+    render(<Fixture />);
+    await user.click(screen.getByRole("button", { name: "Status: Active" }));
+    expect(screen.getByRole("menuitemradio", { name: "Active" })).toHaveAttribute("data-state", "checked");
+    await user.click(screen.getByRole("menuitemradio", { name: "Draft" }));
+    expect(screen.getByRole("button", { name: "Status: Draft" })).toBeInTheDocument();
+  });
+});
+
+describe("filter chips", () => {
+  it("keeps toggle and removal as independent keyboard controls", async () => {
+    const user = userEvent.setup();
+    const onToggle = vi.fn();
+    const onRemove = vi.fn();
+
+    render(
+      <FilterChips
+        chips={[{ id: "status", label: "Status", value: "Active", active: true }]}
+        onToggle={onToggle}
+        onRemove={onRemove}
+      />,
+    );
+
+    const toggle = screen.getByRole("button", { name: "Status Active" });
+    expect(toggle).toHaveAttribute("aria-pressed", "true");
+    await user.click(screen.getByRole("button", { name: "Remove Status: Active filter" }));
+    expect(onRemove).toHaveBeenCalledWith("status");
+    expect(onToggle).not.toHaveBeenCalled();
+  });
+});

package/src/components/ui/kbd-icons.test.tsx

@@ -0,0 +1,90 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  CANONICAL_ICONS,
+  OLD_UI_ICONS,
+  PH_ICONS,
+  PH_ICON_ALIASES,
+  IconByName,
+  IconInfo,
+  IconOldWindow,
+  IconTerminal,
+} from "@/components/icons";
+import { Kbd } from "@/components/ui/Kbd";
+
+describe("Kbd", () => {
+  it("renders shortcuts as separate, spoken keycaps", () => {
+    render(<Kbd keys={["Command", "K"]} platform="mac" />);
+    const shortcut = screen.getByLabelText("Command + K");
+
+    expect(shortcut).toHaveClass("ph-keycap");
+    expect(shortcut.querySelectorAll(".ph-shortcut-key")).toHaveLength(2);
+    expect(shortcut).toHaveTextContent("⌘K");
+  });
+
+  it("keeps platform conversion explicit and preserves React nodes", () => {
+    const { rerender } = render(<Kbd keys={["Control", "K"]} />);
+    expect(screen.getByLabelText("Control + K")).toHaveTextContent("ControlK");
+
+    rerender(<Kbd keys={[<span key="mod">Fn</span>, "K"]} aria-label="Function + K" />);
+    expect(screen.getByLabelText("Function + K")).toHaveTextContent("FnK");
+    expect(screen.getByLabelText("Function + K")).not.toHaveTextContent("[object Object]");
+  });
+
+  it("distinguishes a physical key from a code token", () => {
+    render(
+      <>
+        <Kbd variant="key">Escape</Kbd>
+        <Kbd variant="token">HogQL</Kbd>
+      </>,
+    );
+
+    expect(screen.getByText("Escape")).toHaveClass("ph-keycap");
+    expect(screen.getByText("HogQL")).toHaveClass("ph-code-token");
+  });
+});
+
+describe("icons", () => {
+  it("hides decorative icons but exposes labeled icons", () => {
+    const { rerender } = render(<IconInfo data-testid="icon" />);
+    expect(screen.getByTestId("icon")).toHaveAttribute("aria-hidden", "true");
+
+    rerender(<IconInfo data-testid="icon" aria-label="Information" />);
+    expect(screen.getByRole("img", { name: "Information" })).not.toHaveAttribute("aria-hidden");
+  });
+
+  it("honors size, forwards refs, and renders original glyphs", () => {
+    const ref = createRef<SVGSVGElement>();
+    render(
+      <>
+        <IconTerminal ref={ref} size={16} data-testid="terminal" />
+        <IconOldWindow aria-label="Old window" />
+      </>,
+    );
+
+    expect(ref.current).toBe(screen.getByTestId("terminal"));
+    expect(screen.getByTestId("terminal")).toHaveStyle({ width: "16px", height: "16px" });
+    expect(screen.getByRole("img", { name: "Old window" })).toBeInTheDocument();
+  });
+
+  it("keeps aliases runtime-identical while originals stay canonical", () => {
+    expect(PH_ICONS.grid).toBe(CANONICAL_ICONS.gridView);
+    expect(PH_ICONS.play).toBe(CANONICAL_ICONS.playCircle);
+    expect(PH_ICONS.warning).toBe(CANONICAL_ICONS.exclamation);
+    expect(Object.keys(PH_ICON_ALIASES)).toEqual(expect.arrayContaining(["grid", "play", "warning"]));
+
+    for (const name of Object.keys(OLD_UI_ICONS)) {
+      expect(name in CANONICAL_ICONS).toBe(true);
+    }
+  });
+
+  it("gives generated icons useful identities and forwards dynamic refs", () => {
+    const ref = createRef<SVGSVGElement>();
+    render(<IconByName ref={ref} name="grid" data-testid="dynamic-icon" />);
+
+    expect(CANONICAL_ICONS.areaChart.displayName).toBe("IconAreaChart");
+    expect(ref.current).toBe(screen.getByTestId("dynamic-icon"));
+    expect(ref.current).toHaveAttribute("aria-hidden", "true");
+  });
+});

package/src/components/ui/product-patterns.test.tsx

@@ -0,0 +1,77 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AuthCard, AuthLayout } from "@/components/ui/AuthLayout";
+import { FilterControls } from "@/components/ui/FilterControls";
+import { Loader, LoadingState, Skeleton } from "@/components/ui/Loader";
+import { SettingsLayout, SettingsNav } from "@/components/ui/SettingsLayout";
+import { getTheme, isThemeId, THEMES } from "@/themes/registry";
+
+describe("loading patterns", () => {
+  it("announces one useful loading status and keeps skeleton geometry decorative", () => {
+    render(
+      <>
+        <Loader variant="dots" label="Loading events" />
+        <LoadingState label="Preparing workspace" title="Almost ready" />
+        <Skeleton shape="block" data-testid="skeleton" />
+      </>,
+    );
+
+    expect(screen.getByRole("status", { name: "Loading events" })).toBeInTheDocument();
+    expect(screen.getByRole("status", { name: "Preparing workspace" })).toHaveTextContent("Almost ready");
+    expect(screen.getByTestId("skeleton")).toHaveAttribute("aria-hidden", "true");
+  });
+});
+
+describe("product layouts", () => {
+  it("labels auth and settings regions without owning their application state", () => {
+    render(
+      <>
+        <AuthLayout brand="Acme">
+          <AuthCard title="Welcome back"><input aria-label="Email" /></AuthCard>
+        </AuthLayout>
+        <SettingsLayout
+          title="Workspace settings"
+          navigation={
+            <SettingsNav groups={[{
+              label: "Workspace",
+              items: [{ id: "general", label: "General", href: "/settings", active: true }],
+            }]} />
+          }
+        >
+          Settings content
+        </SettingsLayout>
+      </>,
+    );
+
+    expect(screen.getByRole("heading", { name: "Welcome back" })).toBeInTheDocument();
+    expect(screen.getAllByRole("navigation", { name: "Settings" })).toHaveLength(2);
+    for (const link of screen.getAllByRole("link", { name: "General" })) {
+      expect(link).toHaveAttribute("aria-current", "page");
+    }
+  });
+
+  it("composes filter controls and applied chips in one explicit pattern", () => {
+    render(
+      <FilterControls
+        barProps={{ resultCount: "12 results" }}
+        chipsProps={{ chips: [{ id: "status", label: "Status", value: "Active", active: true }] }}
+      >
+        <button type="button">Add filter</button>
+      </FilterControls>,
+    );
+
+    expect(screen.getByRole("button", { name: "Add filter" })).toBeInTheDocument();
+    expect(screen.getByText("12 results")).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Applied filters" })).toHaveTextContent("StatusActive");
+  });
+});
+
+describe("Kraken themes", () => {
+  it("registers a complete light and dark pair", () => {
+    expect(isThemeId("kraken-light")).toBe(true);
+    expect(isThemeId("kraken-dark")).toBe(true);
+    expect(getTheme("kraken-light")).toMatchObject({ colorScheme: "light", group: "Kraken" });
+    expect(getTheme("kraken-dark")).toMatchObject({ colorScheme: "dark", group: "Kraken" });
+    expect(THEMES.filter((theme) => theme.group === "Kraken")).toHaveLength(2);
+  });
+});