@titan-design/react-ui 0.12.1 → 0.14.0

package/src/components/shell/AppShell.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Surface } from '../ui/surface'
+import { Pill } from '../ui/pill'
+import { Typography } from '../custom/Typography'
+import { BotIcon, BrainIcon, HeadphonesIcon, LayersIcon, StarIcon } from '../icons'
+import { AppShell } from './AppShell'
+import { brandKeys } from './brands'
+import { type SideNavItem } from './SideNav'
+
+const brainNav: SideNavItem[] = [
+  { key: 'notes', label: 'Notes', icon: <LayersIcon size={20} color="currentColor" /> },
+  { key: 'graph', label: 'Graph', icon: <BrainIcon size={20} color="currentColor" /> },
+  { key: 'agents', label: 'Agents', icon: <BotIcon size={20} color="currentColor" /> },
+]
+
+const audiobookNav: SideNavItem[] = [
+  { key: 'library', label: 'Library', icon: <HeadphonesIcon size={20} color="currentColor" /> },
+  { key: 'saved', label: 'Saved', icon: <StarIcon size={20} color="currentColor" /> },
+]
+
+function Page({ title }: { title: string }) {
+  return (
+    <View className="flex-1 gap-1.5 p-7">
+      <Typography variant="h4" color="primary">
+        {title}
+      </Typography>
+      <Typography variant="body2" color="tertiary">
+        A page mounts its content here; the shell keeps the nav + top-bar chrome persistent.
+      </Typography>
+    </View>
+  )
+}
+
+/**
+ * `Pages/AppShell` — the generic dashboard chrome as one registered surface.
+ * The app supplies its brand, its nav categories and its own top-bar chrome.
+ */
+const meta: Meta<typeof AppShell> = {
+  title: 'Pages/AppShell',
+  component: AppShell,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          '**Page shell (generic).** Composes ' +
+          '[SideNav](?path=/docs/shell-sidenav--docs) + ' +
+          '[TopBar](?path=/docs/shell-topbar--docs) over a `children` content slot.\n\n' +
+          '**Composition (AW-132).** It knows nothing about any one app. Chrome arrives ' +
+          'through `topBarTrailing`; categories through `navItems`; `topBar` and `nav` ' +
+          'replace those regions outright. An app builds its own shell by composing this one ' +
+          '— see [WorkoutShell](?path=/docs/pages-workoutshell--docs).',
+      },
+    },
+  },
+  argTypes: {
+    brand: { control: 'select', options: brandKeys },
+    onNavigate: { control: false },
+    topBar: { control: false },
+    nav: { control: false },
+    topBarTrailing: { control: false },
+    navItems: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      <Surface level="base" className="min-h-screen">
+        <Story />
+      </Surface>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof AppShell>
+
+/** No app chrome at all — the frame on its own. */
+export const Default: Story = {
+  args: { brand: 'voltras', navItems: brainNav, activeKey: 'notes' },
+}
+
+/** The brain app: its own brand, categories, top-bar chrome and page. */
+export const BrainApp: Story = {
+  args: {
+    brand: 'brain',
+    navItems: brainNav,
+    activeKey: 'graph',
+    topBarTrailing: [
+      <Pill key="index" tone="success" leading="dot" size="xs">
+        indexed
+      </Pill>,
+      <Pill key="vaults" tone="neutral" size="xs">
+        4 vaults
+      </Pill>,
+    ],
+  },
+  render: (args) => (
+    <AppShell {...args}>
+      <Page title="Graph" />
+    </AppShell>
+  ),
+}
+
+/** The audiobook app in the same frame — different brand, categories and chrome. */
+export const AudiobookApp: Story = {
+  args: {
+    brand: 'audiobook',
+    navItems: audiobookNav,
+    activeKey: 'library',
+    liveKey: 'saved',
+    topBarTrailing: (
+      <Pill tone="brand-secondary" leading="dot" size="xs">
+        3 downloading
+      </Pill>
+    ),
+  },
+  render: (args) => (
+    <AppShell {...args}>
+      <Page title="Library" />
+    </AppShell>
+  ),
+}
+
+/** Both slots replaced: the app brings its own bar and its own rail. */
+export const ReplacedRegions: Story = {
+  args: { navItems: brainNav, activeKey: 'notes' },
+  render: (args) => (
+    <AppShell
+      {...args}
+      topBar={
+        <Surface level="elevated" className="h-[46px] justify-center border-b border-hairline px-4">
+          <Text className="font-heading text-sm text-text-secondary">an app-owned bar</Text>
+        </Surface>
+      }
+      nav={
+        <Surface
+          level="base"
+          className="w-[60px] items-center justify-center border-r border-hairline"
+        >
+          <Typography variant="microLabel" color="tertiary">
+            rail
+          </Typography>
+        </Surface>
+      }
+    >
+      <Page title="Anything" />
+    </AppShell>
+  ),
+}

package/src/components/shell/AppShell.test.tsx

@@ -0,0 +1,70 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Text } from 'react-native'
+import { axe } from 'jest-axe'
+import { AppShell } from './AppShell'
+import { type SideNavItem } from './SideNav'
+
+const navItems: SideNavItem[] = [
+  { key: 'notes', label: 'Notes', icon: null },
+  { key: 'graph', label: 'Graph', icon: null },
+]
+
+describe('AppShell', () => {
+  it('composes the SideNav rail from the supplied categories', () => {
+    render(<AppShell navItems={navItems} activeKey="notes" />)
+    expect(screen.getByRole('tablist')).toBeInTheDocument()
+    ;['Notes', 'Graph'].forEach((name) => {
+      expect(screen.getByRole('tab', { name })).toBeInTheDocument()
+    })
+  })
+
+  it('renders the content-slot placeholder when no children are given', () => {
+    render(<AppShell navItems={navItems} activeKey="notes" />)
+    expect(screen.getByText('main content region')).toBeInTheDocument()
+  })
+
+  it('mounts children in the content slot and drops the placeholder', () => {
+    render(
+      <AppShell navItems={navItems} activeKey="graph">
+        <Text>my page body</Text>
+      </AppShell>
+    )
+    expect(screen.getByText('my page body')).toBeInTheDocument()
+    expect(screen.queryByText('main content region')).not.toBeInTheDocument()
+  })
+
+  it('forwards nav taps through onNavigate', () => {
+    const onNavigate = vi.fn()
+    render(<AppShell navItems={navItems} activeKey="notes" onNavigate={onNavigate} />)
+    fireEvent.click(screen.getByRole('tab', { name: 'Graph' }))
+    expect(onNavigate).toHaveBeenCalledWith('graph')
+  })
+
+  it('renders app chrome in the top bar without knowing what it is', () => {
+    render(<AppShell navItems={navItems} activeKey="notes" topBarTrailing={<Text>3 jobs</Text>} />)
+    expect(screen.getByText('3 jobs')).toBeInTheDocument()
+  })
+
+  it('takes a whole replacement top bar and nav', () => {
+    render(
+      <AppShell topBar={<Text>my own bar</Text>} nav={<Text>my own rail</Text>}>
+        <Text>body</Text>
+      </AppShell>
+    )
+    expect(screen.getByText('my own bar')).toBeInTheDocument()
+    expect(screen.getByText('my own rail')).toBeInTheDocument()
+    expect(screen.queryByText('VOLTRAS')).not.toBeInTheDocument()
+    expect(screen.queryByRole('tablist')).not.toBeInTheDocument()
+  })
+
+  it('carries the brand through to the top bar', () => {
+    render(<AppShell brand="agents" navItems={navItems} activeKey="notes" />)
+    expect(screen.getByText('AGENTS')).toBeInTheDocument()
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(<AppShell navItems={navItems} activeKey="notes" />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/shell/AppShell.tsx

@@ -0,0 +1,90 @@
+import type { ReactNode } from 'react'
+import { View, Text } from 'react-native'
+import { cn } from '../../utils/cn'
+import { Surface } from '../ui/surface'
+import { SideNav, type SideNavItem } from './SideNav'
+import { TopBar } from './TopBar'
+import { brandPresets, type BrandKey } from './brands'
+
+export interface AppShellProps {
+  /** Which app identity the default {@link TopBar} and nav accent render. */
+  brand?: BrandKey
+  /** Brand subtitle on the default top bar. */
+  subtitle?: string
+  /** App chrome for the default top bar's right cluster (divider-separated). */
+  topBarTrailing?: ReactNode | ReactNode[]
+  /** Replace the whole top bar. Wins over `brand` / `subtitle` / `topBarTrailing`. */
+  topBar?: ReactNode
+  /** Nav categories, top → bottom. */
+  navItems?: SideNavItem[]
+  /** Active nav category key. */
+  activeKey?: string
+  /** A category with off-view live activity → a quiet cue on that item. */
+  liveKey?: string | null
+  onNavigate?: (key: string) => void
+  /** Replace the whole left rail. Wins over `navItems` / `activeKey` / `liveKey`. */
+  nav?: ReactNode
+  /** Main content region. A placeholder renders when omitted. */
+  children?: ReactNode
+  className?: string
+}
+
+function ContentPlaceholder() {
+  return (
+    <View className="flex-1 items-center justify-center">
+      <Text className="font-heading text-sm text-text-tertiary">main content region</Text>
+    </View>
+  )
+}
+
+/**
+ * `AppShell` — the generic dashboard chrome: a {@link TopBar} band over a
+ * {@link SideNav} rail and a `children` content region. It knows nothing about
+ * any one app: chrome arrives through the `topBarTrailing` slot (or the whole
+ * `topBar` / `nav` slots), and categories through `navItems`. An app builds its
+ * own shell by composing this one — see `shell/workout/WorkoutShell`.
+ *
+ * @example
+ * <AppShell brand="brain" navItems={brainNavItems} activeKey={key} onNavigate={go}>
+ *   <BrainPage />
+ * </AppShell>
+ */
+export function AppShell({
+  brand = 'voltras',
+  subtitle,
+  topBarTrailing,
+  topBar,
+  navItems = [],
+  activeKey = '',
+  liveKey = null,
+  onNavigate,
+  nav,
+  children,
+  className,
+}: AppShellProps) {
+  const { accentClassName, accentBarClassName } = brandPresets[brand]
+
+  return (
+    // Column: the TopBar spans the FULL width across the top, and the SideNav sits BELOW it
+    // in the content row (not a full-height left rail). This keeps the brand/status band
+    // unbroken edge-to-edge and lets the nav align under it. The shell is the outermost
+    // Surface — it owns the base plane and seeds the on-surface colour context (mode) for
+    // the whole dashboard tree.
+    <Surface level="base" className={cn('flex-1', className)}>
+      {topBar ?? <TopBar brand={brand} subtitle={subtitle} trailing={topBarTrailing} />}
+      <View className="flex-1 flex-row">
+        {nav ?? (
+          <SideNav
+            items={navItems}
+            activeKey={activeKey}
+            liveKey={liveKey}
+            accentClassName={accentClassName}
+            accentBarClassName={accentBarClassName}
+            onNavigate={onNavigate}
+          />
+        )}
+        <View className="flex-1">{children ?? <ContentPlaceholder />}</View>
+      </View>
+    </Surface>
+  )
+}

package/src/components/shell/BrandLockup.stories.tsx

@@ -1,22 +1,37 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Surface } from '../ui/surface'
+import { Typography } from '../custom/Typography'
+import { StarIcon } from '../icons'
 import { BrandLockup } from './BrandLockup'
+import { brandKeys } from './brands'
 
 const meta: Meta<typeof BrandLockup> = {
   title: 'Shell/BrandLockup',
   component: BrandLockup,
-  tags: ['autodocs'],
-  args: { subtitle: 'wall dashboard', showSubtitle: true },
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: { brand: 'voltras', showSubtitle: true },
   argTypes: {
+    brand: { control: 'select', options: brandKeys },
     subtitle: { control: 'text' },
+    wordmark: { control: 'text' },
+    accentClassName: { control: 'text' },
     showSubtitle: { control: 'boolean' },
+    mark: { control: false },
   },
   parameters: {
     docs: {
       description: {
         component:
-          '**Molecule.** Composes [VoltrasMark](?path=/docs/foundations-icons--docs) (icon) + ' +
-          '[Typography](?path=/docs/foundations-typography--docs) (wordmark + subtitle). ' +
-          'Toggle `showSubtitle` to see the responsive collapse.',
+          '**Molecule.** Composes an [icon](?path=/docs/foundations-icons--docs) mark + ' +
+          '[Typography](?path=/docs/foundations-typography--docs) (wordmark + subtitle).\n\n' +
+          '**Generic over the app (AW-132).** Pick a `brand` preset, or override `mark` / ' +
+          '`wordmark` / `accentClassName` / `subtitle` for an app that has no preset yet. ' +
+          "Accents come from `data-*` rather than `status-*`: `data-*` is the library's set of " +
+          'distinct, CVD-checked hues with no semantic load, which is what a per-app identity ' +
+          'accent needs. Voltras keeps the real `brand-primary` token.\n\n' +
+          '**Try it:** switch `brand` in the **Controls**, or toggle `showSubtitle` to see the ' +
+          'responsive collapse.',
       },
     },
   },
@@ -25,3 +40,49 @@ export default meta
 type Story = StoryObj<typeof BrandLockup>
 
 export const Default: Story = {}
+
+/** Every app likely to mount this shell, in the chrome band's own surface. */
+export const BrandVariants: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The five branding presets. Each is a mark, a wordmark, a semantic accent token and a ' +
+          'default subtitle — nothing else in the shell changes between them.',
+      },
+    },
+  },
+  render: () => (
+    <Surface level="elevated" className="gap-4 p-5">
+      {brandKeys.map((brand) => (
+        <View key={brand} className="gap-1">
+          <Typography variant="microLabel" color="tertiary">
+            {brand}
+          </Typography>
+          <BrandLockup brand={brand} />
+        </View>
+      ))}
+    </Surface>
+  ),
+}
+
+/** Collapsed subtitle — what every brand looks like below ~1024px. */
+export const BrandVariantsCollapsed: Story = {
+  render: () => (
+    <Surface level="elevated" className="gap-4 p-5">
+      {brandKeys.map((brand) => (
+        <BrandLockup key={brand} brand={brand} showSubtitle={false} />
+      ))}
+    </Surface>
+  ),
+}
+
+/** An app with no preset: supply mark, wordmark, accent and subtitle directly. */
+export const CustomBrand: Story = {
+  args: {
+    mark: <StarIcon size={14} color="currentColor" />,
+    wordmark: 'HYPERFRAMES',
+    subtitle: 'renders',
+    accentClassName: 'text-data-6',
+  },
+}

package/src/components/shell/BrandLockup.test.tsx

@@ -2,9 +2,10 @@ import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { BrandLockup } from './BrandLockup'
+import { brandKeys, brandPresets } from './brands'
 
 describe('BrandLockup', () => {
-  it('renders the wordmark', () => {
+  it('renders the voltras wordmark by default', () => {
     render(<BrandLockup />)
     expect(screen.getByText('VOLTRAS')).toBeInTheDocument()
   })
@@ -16,6 +17,38 @@ describe('BrandLockup', () => {
     expect(screen.queryByText('/ wall dashboard')).not.toBeInTheDocument()
   })
 
+  it.each(brandKeys)('renders the %s preset wordmark and subtitle', (brand) => {
+    render(<BrandLockup brand={brand} />)
+    expect(screen.getByText(brandPresets[brand].wordmark)).toBeInTheDocument()
+    expect(screen.getByText(`/ ${brandPresets[brand].subtitle}`)).toBeInTheDocument()
+  })
+
+  it('lets an app override the preset parts', () => {
+    render(<BrandLockup brand="brain" wordmark="HYPERFRAMES" subtitle="renders" />)
+    expect(screen.getByText('HYPERFRAMES')).toBeInTheDocument()
+    expect(screen.getByText('/ renders')).toBeInTheDocument()
+    expect(screen.queryByText('BRAIN')).not.toBeInTheDocument()
+  })
+
+  // nativewind compiles className to style, so the rendered accent colour is not
+  // assertable in jsdom. Assert the token CHOICE instead: every preset picks a
+  // semantic `text-*` token, and no two apps share one.
+  it('gives every brand a distinct semantic accent token', () => {
+    const accents = brandKeys.map((brand) => brandPresets[brand].accentClassName)
+    accents.forEach((accent) => expect(accent).toMatch(/^text-(brand|data)-/))
+    expect(new Set(accents).size).toBe(accents.length)
+  })
+
+  // The nav's active bar needs the accent as a background, and a mismatched pair
+  // would render a lockup and an active nav item in two different hues.
+  it('pairs every accent with the same token as a background', () => {
+    brandKeys.forEach((brand) => {
+      const { accentClassName, accentBarClassName } = brandPresets[brand]
+      expect(accentBarClassName).toMatch(/^bg-(brand|data)-/)
+      expect(accentBarClassName).toBe(accentClassName.replace(/^text-/, 'bg-'))
+    })
+  })
+
   it('has no accessibility violations', async () => {
     const { container } = render(<BrandLockup />)
     expect(await axe(container)).toHaveNoViolations()

package/src/components/shell/BrandLockup.tsx

@@ -1,10 +1,19 @@
+import type { ReactNode } from 'react'
 import { View, type ViewProps } from 'react-native'
 import { cn } from '../../utils/cn'
 import { Typography } from '../custom/Typography'
-import { VoltrasMark } from '../icons'
+import { brandPresets, type BrandKey } from './brands'
 
 export interface BrandLockupProps extends ViewProps {
-  /** The "/ subtitle" that follows the wordmark. Default "wall dashboard". */
+  /** Which app's identity to render. Defaults to `voltras`. */
+  brand?: BrandKey
+  /** Replace the preset's mark glyph. */
+  mark?: ReactNode
+  /** Replace the preset's wordmark. */
+  wordmark?: string
+  /** Replace the preset's accent — a semantic `text-*` token class for the mark. */
+  accentClassName?: string
+  /** The "/ subtitle" that follows the wordmark. Defaults to the brand's own. */
   subtitle?: string
   /** Show the subtitle. Hidden at tablet width and below (S1-Q4 responsive). */
   showSubtitle?: boolean
@@ -12,34 +21,41 @@ export interface BrandLockupProps extends ViewProps {
 }
 
 /**
- * Product identity lockup for the top bar: ◇ mark + VOLTRAS wordmark + optional
- * subtitle. Composes the VoltrasMark icon + Typography. S1 · BrandLockup.
+ * Product identity lockup for the top bar: mark + wordmark + optional subtitle.
+ * Generic over the app: pick a `brand` preset, or override `mark` / `wordmark` /
+ * `accentClassName` / `subtitle` piecemeal for an app that has no preset yet.
+ * Composes an icon primitive + Typography. S1 · BrandLockup.
  */
 export function BrandLockup({
-  subtitle = 'wall dashboard',
+  brand = 'voltras',
+  mark,
+  wordmark,
+  accentClassName,
+  subtitle,
   showSubtitle = true,
   className,
   ...props
 }: BrandLockupProps) {
+  const preset = brandPresets[brand]
+  const resolvedSubtitle = subtitle ?? preset.subtitle
+
   return (
     <View className={cn('flex-row items-center gap-[7px]', className)} {...props}>
-      <View className="text-brand-primary">
-        <VoltrasMark size={14} color="currentColor" />
-      </View>
+      <View className={accentClassName ?? preset.accentClassName}>{mark ?? preset.mark}</View>
       <Typography
         variant="button"
         color="primary"
         className="text-[12px] font-extrabold tracking-[1.5px]"
       >
-        VOLTRAS
+        {wordmark ?? preset.wordmark}
       </Typography>
-      {showSubtitle && subtitle ? (
+      {showSubtitle && resolvedSubtitle ? (
         <Typography
           variant="button"
           color="tertiary"
           className="text-[10px] font-semibold tracking-[0.4px]"
         >
-          / {subtitle}
+          / {resolvedSubtitle}
         </Typography>
       ) : null}
     </View>

package/src/components/shell/NavItem.stories.tsx

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { NavItem } from './NavItem'
 import { ActivityIcon } from '../icons'
+import { Surface } from '../ui/surface'
 
 const meta: Meta<typeof NavItem> = {
   title: 'Shell/NavItem',
   component: NavItem,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   args: { label: 'Live', active: false, live: false },
   argTypes: {
     label: { control: 'text' },
@@ -17,9 +17,9 @@ const meta: Meta<typeof NavItem> = {
   },
   decorators: [
     (Story) => (
-      <View className="w-[60px] items-center bg-background-base py-2">
+      <Surface level="background" className="w-[60px] items-center py-2">
         <Story />
-      </View>
+      </Surface>
     ),
   ],
   parameters: {

package/src/components/shell/NavItem.test.tsx

@@ -32,4 +32,21 @@ describe('NavItem', () => {
     const { container } = render(<NavItem icon={icon} label="Live" live />)
     expect(container.firstChild).toBeInTheDocument()
   })
+
+  // nativewind compiles className to style, so jsdom cannot see the accent colour.
+  // Assert an app-supplied accent leaves the rest of the active state intact; the
+  // colour itself is guarded by the paired-token test in BrandLockup.test.
+  it('keeps the active state when an app supplies its own accent', () => {
+    render(
+      <NavItem
+        icon={icon}
+        label="Graph"
+        active
+        accentClassName="text-data-3"
+        accentBarClassName="bg-data-3"
+      />
+    )
+    expect(screen.getByTestId('nav-item-accent')).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Graph' })).toBeInTheDocument()
+  })
 })

package/src/components/shell/NavItem.tsx

@@ -8,13 +8,17 @@ export interface NavItemProps {
   icon: ReactNode
   /** Short label shown under the glyph (uppercased for display; used as the accessible name). */
   label: string
-  /** Active category → left accent bar + brand-colored glyph & label. */
+  /** Active category → left accent bar + accent-colored glyph & label. */
   active?: boolean
   /**
    * A set is running for this category while it is NOT the active view
    * (live-elsewhere) → a quiet muted-green label tint. Ignored when `active`.
    */
   live?: boolean
+  /** Semantic `text-*` token for the active glyph and label. Defaults to the Voltras brand. */
+  accentClassName?: string
+  /** Semantic `bg-*` token for the active bar. Pair it with `accentClassName`. */
+  accentBarClassName?: string
   onPress?: () => void
   className?: string
 }
@@ -23,20 +27,25 @@ export interface NavItemProps {
  * Shell S2 · NavItem — one category button in the {@link SideNav}: a 20px glyph
  * over an uppercase micro-label in a 46×46 target. The button spans the full 60px
  * rail so the active **left accent bar** sits flush to the rail's edge. States:
- * active = accent bar + `brand-primary`; `live` (while not active) tints only the
+ * active = accent bar + the accent token; `live` (while not active) tints only the
  * label `status-success-dark` (the glyph stays dim); otherwise dim `text-tertiary`.
+ *
+ * The accent follows the mounting app's brand, so a Brain shell reads yellow
+ * throughout rather than showing a Voltras-orange active item under its own lockup.
  */
 export function NavItem({
   icon,
   label,
   active = false,
   live = false,
+  accentClassName = 'text-brand-primary',
+  accentBarClassName = 'bg-brand-primary',
   onPress,
   className,
 }: NavItemProps) {
-  const glyphColor = active ? 'text-brand-primary' : 'text-text-tertiary'
+  const glyphColor = active ? accentClassName : 'text-text-tertiary'
   const labelColor = active
-    ? 'text-brand-primary'
+    ? accentClassName
     : live
       ? 'text-status-live-muted'
       : 'text-text-tertiary'
@@ -52,7 +61,10 @@ export function NavItem({
       {active ? (
         <View
           testID="nav-item-accent"
-          className="absolute left-0 top-[13px] bottom-[13px] w-[3px] rounded-r-[3px] bg-brand-primary"
+          className={cn(
+            'absolute left-0 top-[13px] bottom-[13px] w-[3px] rounded-r-[3px]',
+            accentBarClassName
+          )}
         />
       ) : null}
       <View