@a4ui/core 0.27.0 → 0.28.0

package/dist/ui/BalanceCard.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface BalanceCardProps {
+    label: string;
+    amount: number;
+    /** ISO 4217 currency code. Defaults to `'USD'`. */
+    currency?: string;
+    /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+    locale?: string;
+    /** Period-over-period change as a fraction (0.042 = +4.2%). Shows an up/down chip. */
+    delta?: number;
+    /** Small line under the balance (e.g. "Available" / account number). */
+    sub?: JSX.Element;
+    class?: string;
+}
+/**
+ * Balance-first summary card: label, large formatted amount, and an optional
+ * signed-percent delta chip (up/down colored via {@link Badge} tones).
+ *
+ * @example
+ * ```tsx
+ * <BalanceCard label="Total balance" amount={128430.52} delta={0.042} />
+ * ```
+ */
+export declare function BalanceCard(props: BalanceCardProps): JSX.Element;

package/dist/ui/KpiBlock.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+export interface KpiBlockProps {
+    label: string;
+    value: string | number;
+    /** Change as a fraction (0.128 = +12.8%). Shows a signed up/down chip. */
+    delta?: number;
+    /** Optional chart node (e.g. a <Sparkline/> from @a4ui/core/charts) shown at the bottom. */
+    chart?: JSX.Element;
+    class?: string;
+}
+/**
+ * Labelled metric tile for dashboards: a large value with a signed
+ * up/down delta chip and an optional chart slot at the bottom. The chart is
+ * consumer-supplied (e.g. a `<Sparkline/>` from `@a4ui/core/charts`) — this
+ * component takes it as a prop rather than importing the charts package.
+ *
+ * @example
+ * ```tsx
+ * <KpiBlock label="Monthly revenue" value="$48,204" delta={0.128} />
+ * ```
+ */
+export declare function KpiBlock(props: KpiBlockProps): JSX.Element;

package/dist/ui/MoneyActionButton.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+/** Money-movement action a {@link MoneyActionButton} represents; picks the leading icon. */
+export type MoneyActionKind = 'send' | 'request' | 'pay' | 'withdraw';
+export interface MoneyActionButtonProps {
+    children: JSX.Element;
+    /** Which money-movement action this triggers. Defaults to `'send'`. */
+    kind?: MoneyActionKind;
+    onClick?: () => void;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Bold, full-height pill CTA reserved for value-moving actions — send,
+ * request, pay, withdraw. Uses the app's single accent (`bg-primary`) so it
+ * stands out from ordinary buttons, with a leading icon chosen by `kind`.
+ *
+ * @example
+ * ```tsx
+ * <MoneyActionButton kind="send" onClick={() => sendMoney()}>Send</MoneyActionButton>
+ * ```
+ */
+export declare function MoneyActionButton(props: MoneyActionButtonProps): JSX.Element;

package/dist/ui/ScrollScene.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+export interface ScrollSceneProps {
+    /** Render-prop receiving a reactive progress accessor (0..1). */
+    children: (progress: () => number) => JSX.Element;
+    class?: string;
+}
+/**
+ * Wraps `children` in an element that tracks its own scroll progress: 0 when
+ * its top edge reaches the bottom of the viewport, 1 when its bottom edge
+ * passes the top of the viewport. Progress is exposed as a reactive accessor
+ * via a render prop, so the caller drives whatever transform/animation it
+ * wants — this component only measures. Scroll position isn't itself motion,
+ * so it keeps measuring under `prefers-reduced-motion`; it just never
+ * animates anything on its own.
+ *
+ * @example
+ * ```tsx
+ * <ScrollScene>
+ *   {(progress) => (
+ *     <div style={{ opacity: progress() }}>Reveal on scroll</div>
+ *   )}
+ * </ScrollScene>
+ * ```
+ */
+export declare function ScrollScene(props: ScrollSceneProps): JSX.Element;

package/dist/ui/SideRail.d.ts

@@ -0,0 +1,39 @@
+import { JSX } from 'solid-js';
+/** A single destination within a {@link SideRail}. */
+export interface SideRailItem {
+    value: string;
+    label: string;
+    icon?: JSX.Element;
+    /** Optional badge (e.g. an unread count) rendered on the item. */
+    badge?: JSX.Element;
+}
+export interface SideRailProps {
+    items: SideRailItem[];
+    value: string;
+    onChange: (value: string) => void;
+    /** Show text labels under icons. When false, labels go in a tooltip. @default true */
+    labels?: boolean;
+    class?: string;
+}
+/**
+ * Narrow vertical column of stacked icon+label destinations — the vertical
+ * counterpart to {@link BottomNavigation} for side placement. The active item
+ * is highlighted with a left indicator bar and `aria-selected`. ArrowUp/
+ * ArrowDown move the selection between items (roving activation, matching the
+ * WAI-ARIA tabs pattern). Renders inline where placed — the consumer is
+ * responsible for positioning (e.g. `fixed inset-y-0 left-0`).
+ *
+ * @example
+ * ```tsx
+ * <SideRail
+ *   value={section()}
+ *   onChange={setSection}
+ *   items={[
+ *     { value: 'home', label: 'Home', icon: <HomeIcon /> },
+ *     { value: 'inbox', label: 'Inbox', icon: <InboxIcon />, badge: <Badge tone="info">3</Badge> },
+ *     { value: 'settings', label: 'Settings', icon: <SettingsIcon /> },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function SideRail(props: SideRailProps): JSX.Element;

package/dist/ui/Spaces.d.ts

@@ -0,0 +1,31 @@
+import { JSX } from 'solid-js';
+export interface Space {
+    id: string;
+    label: string;
+    icon?: JSX.Element;
+    content: JSX.Element;
+}
+export interface SpacesProps {
+    spaces: Space[];
+    /** Controlled active space. Uncontrolled (internal signal, defaults to the first space) when omitted. */
+    activeId?: string;
+    onChange?: (id: string) => void;
+    class?: string;
+}
+/**
+ * Swipeable, switchable "context" containers — one space visible at a time,
+ * sliding horizontally between spaces, with a dot/pill indicator rail to jump
+ * directly to one. Drag/touch to swipe (the track follows the pointer and
+ * snaps on release past a threshold), same engine-free approach as Carousel.
+ *
+ * @example
+ * ```tsx
+ * <Spaces
+ *   spaces={[
+ *     { id: 'personal', label: 'Personal', icon: <User class="h-4 w-4" />, content: <PersonalPane /> },
+ *     { id: 'work', label: 'Work', icon: <Briefcase class="h-4 w-4" />, content: <WorkPane /> },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Spaces(props: SpacesProps): JSX.Element;

package/dist/ui/StickyReveal.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface StickyRevealProps {
+    children: JSX.Element;
+    /** Total scroll distance of the section (the taller it is, the longer the pin). CSS length, e.g. '200vh'. @default '180vh' */
+    height?: string;
+    class?: string;
+}
+/**
+ * A pinned hero/feature section: the outer element reserves `height` of
+ * scroll distance while the inner content sticks to the viewport and fades +
+ * rises in as the user scrolls through it. Needs real scroll room above/below
+ * to see the effect — drop it inside a page with enough surrounding content
+ * (or bump `height`) rather than in a short isolated container.
+ *
+ * @example
+ * ```tsx
+ * <StickyReveal height="200vh">
+ *   <Card class="p-10 text-center">
+ *     <h2 class="text-3xl font-bold">Pinned moment</h2>
+ *   </Card>
+ * </StickyReveal>
+ * ```
+ */
+export declare function StickyReveal(props: StickyRevealProps): JSX.Element;

package/dist/ui/TransactionFeed.d.ts

@@ -0,0 +1,40 @@
+import { JSX } from 'solid-js';
+/** A single row in a {@link TransactionFeed}. */
+export interface Transaction {
+    id: string;
+    title: string;
+    subtitle?: string;
+    /** Negative = outgoing, positive (or zero) = incoming. */
+    amount: number;
+    /** ISO or display string. Required to group rows when `groupByDate` is set. */
+    date?: string;
+    icon?: JSX.Element;
+}
+export interface TransactionFeedProps {
+    transactions: Transaction[];
+    /** ISO 4217 currency code. Defaults to `'USD'`. */
+    currency?: string;
+    /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+    locale?: string;
+    /** Group rows under date headers (uses each tx.date). @default false */
+    groupByDate?: boolean;
+    class?: string;
+}
+/**
+ * Dense vertical list of transactions/activity for finance dashboards. Each
+ * row shows an optional leading icon, a title + subtitle, and the amount
+ * formatted as currency — incoming (`amount >= 0`) in a success text tone,
+ * outgoing as `-$X` in the default foreground. Optionally groups rows under
+ * `text-xs uppercase` date headers via `groupByDate`.
+ *
+ * @example
+ * ```tsx
+ * <TransactionFeed
+ *   transactions={[
+ *     { id: '1', title: 'Acme Corp', subtitle: 'Invoice #1042', amount: 1200, date: '2026-07-18' },
+ *     { id: '2', title: 'Cloud Hosting', subtitle: 'Monthly plan', amount: -49.99, date: '2026-07-17' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function TransactionFeed(props: TransactionFeedProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.27.0'
+export const A4UI_VERSION = '0.28.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -168,6 +168,16 @@ export { MasterDetail, type MasterDetailProps, type MasterDetailItem } from './u
 export { SlashMenu, type SlashMenuProps, type SlashItem } from './ui/SlashMenu'
 export { DataView, type DataViewProps, type DataViewColumn, type DataViewMode } from './ui/DataView'
 
+// Phase 3 — scroll storytelling, finance, spaces/rail.
+export { ScrollScene, type ScrollSceneProps } from './ui/ScrollScene'
+export { StickyReveal, type StickyRevealProps } from './ui/StickyReveal'
+export { BalanceCard, type BalanceCardProps } from './ui/BalanceCard'
+export { TransactionFeed, type TransactionFeedProps, type Transaction } from './ui/TransactionFeed'
+export { KpiBlock, type KpiBlockProps } from './ui/KpiBlock'
+export { MoneyActionButton, type MoneyActionButtonProps, type MoneyActionKind } from './ui/MoneyActionButton'
+export { Spaces, type SpacesProps, type Space } from './ui/Spaces'
+export { SideRail, type SideRailProps, type SideRailItem } from './ui/SideRail'
+
 // Motion components (src/ui) — animation primitives built on the `motion` engine
 // (adapted from motion.dev examples). All tree-shakeable and reduced-motion aware;
 // `motion` is external, so importing one of these is the only thing that pulls it.

package/src/ui/BalanceCard.tsx

@@ -0,0 +1,68 @@
+// Balance-first summary card for finance dashboards: a label, a large
+// formatted balance, and an optional up/down delta chip.
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+import { TrendingDown, TrendingUp } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+import { Badge } from './Badge'
+import { Card, CardContent } from './Card'
+
+export interface BalanceCardProps {
+  label: string
+  amount: number
+  /** ISO 4217 currency code. Defaults to `'USD'`. */
+  currency?: string
+  /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+  locale?: string
+  /** Period-over-period change as a fraction (0.042 = +4.2%). Shows an up/down chip. */
+  delta?: number
+  /** Small line under the balance (e.g. "Available" / account number). */
+  sub?: JSX.Element
+  class?: string
+}
+
+/**
+ * Balance-first summary card: label, large formatted amount, and an optional
+ * signed-percent delta chip (up/down colored via {@link Badge} tones).
+ *
+ * @example
+ * ```tsx
+ * <BalanceCard label="Total balance" amount={128430.52} delta={0.042} />
+ * ```
+ */
+export function BalanceCard(props: BalanceCardProps): JSX.Element {
+  const format = () =>
+    new Intl.NumberFormat(props.locale ?? 'en-US', {
+      style: 'currency',
+      currency: props.currency ?? 'USD',
+    }).format(props.amount)
+
+  const isPositive = () => (props.delta ?? 0) >= 0
+
+  const deltaLabel = () => {
+    const pct = Math.abs(props.delta as number) * 100
+    const rounded = Math.round(pct * 10) / 10
+    return `${isPositive() ? '+' : '-'}${rounded}%`
+  }
+
+  return (
+    <Card glass class={cn('inline-block', props.class)}>
+      <CardContent class="flex flex-col gap-2">
+        <span class="text-sm text-muted-foreground">{props.label}</span>
+        <div class="flex items-center gap-3">
+          <span class="text-3xl font-bold text-foreground">{format()}</span>
+          <Show when={props.delta !== undefined}>
+            <Badge tone={isPositive() ? 'success' : 'danger'}>
+              <Show when={isPositive()} fallback={<TrendingDown class="h-3 w-3" aria-hidden="true" />}>
+                <TrendingUp class="h-3 w-3" aria-hidden="true" />
+              </Show>
+              {deltaLabel()}
+            </Badge>
+          </Show>
+        </div>
+        <Show when={props.sub}>{props.sub}</Show>
+      </CardContent>
+    </Card>
+  )
+}

package/src/ui/KpiBlock.tsx

@@ -0,0 +1,58 @@
+// Labelled metric block for dashboards: value + a signed delta chip, with an
+// optional inline chart slot (e.g. a Sparkline from @a4ui/core/charts) passed
+// in by the consumer — this component never imports the charts package.
+import { ArrowDown, ArrowUp } from 'lucide-solid'
+import { Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Badge } from './Badge'
+import { Card, CardContent } from './Card'
+
+export interface KpiBlockProps {
+  label: string
+  value: string | number
+  /** Change as a fraction (0.128 = +12.8%). Shows a signed up/down chip. */
+  delta?: number
+  /** Optional chart node (e.g. a <Sparkline/> from @a4ui/core/charts) shown at the bottom. */
+  chart?: JSX.Element
+  class?: string
+}
+
+const formatDelta = (delta: number) => `${delta >= 0 ? '+' : ''}${(delta * 100).toFixed(1)}%`
+
+/**
+ * Labelled metric tile for dashboards: a large value with a signed
+ * up/down delta chip and an optional chart slot at the bottom. The chart is
+ * consumer-supplied (e.g. a `<Sparkline/>` from `@a4ui/core/charts`) — this
+ * component takes it as a prop rather than importing the charts package.
+ *
+ * @example
+ * ```tsx
+ * <KpiBlock label="Monthly revenue" value="$48,204" delta={0.128} />
+ * ```
+ */
+export function KpiBlock(props: KpiBlockProps): JSX.Element {
+  return (
+    <Card glass class={props.class}>
+      <CardContent class="p-5">
+        <p class="text-sm text-muted-foreground">{props.label}</p>
+        <div class="mt-1 flex items-center gap-2">
+          <span class="text-2xl font-semibold text-foreground">{props.value}</span>
+          <Show when={props.delta !== undefined}>
+            <Badge tone={(props.delta as number) >= 0 ? 'success' : 'danger'}>
+              {(props.delta as number) >= 0 ? (
+                <ArrowUp class="h-3 w-3" aria-hidden="true" />
+              ) : (
+                <ArrowDown class="h-3 w-3" aria-hidden="true" />
+              )}
+              {formatDelta(props.delta as number)}
+            </Badge>
+          </Show>
+        </div>
+        <Show when={props.chart}>
+          <div class={cn('mt-3')}>{props.chart}</div>
+        </Show>
+      </CardContent>
+    </Card>
+  )
+}

package/src/ui/MoneyActionButton.tsx

@@ -0,0 +1,54 @@
+// Prominent CTA reserved for value-moving actions (send / request / pay /
+// withdraw). One accent, tightly scoped to money movement — deliberately
+// bolder than the generic Button so it reads as "this moves money" at a
+// glance, distinct from ordinary actions elsewhere in the UI.
+import { ArrowDownLeft, ArrowUpRight, Banknote, CreditCard } from 'lucide-solid'
+import type { Component, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+
+/** Money-movement action a {@link MoneyActionButton} represents; picks the leading icon. */
+export type MoneyActionKind = 'send' | 'request' | 'pay' | 'withdraw'
+
+const KIND_ICON: Record<MoneyActionKind, Component<{ class?: string }>> = {
+  send: ArrowUpRight,
+  request: ArrowDownLeft,
+  pay: CreditCard,
+  withdraw: Banknote,
+}
+
+export interface MoneyActionButtonProps {
+  children: JSX.Element
+  /** Which money-movement action this triggers. Defaults to `'send'`. */
+  kind?: MoneyActionKind
+  onClick?: () => void
+  disabled?: boolean
+  class?: string
+}
+
+const BASE =
+  'inline-flex h-full items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold bg-primary text-primary-foreground transition-[background-color,transform] duration-150 motion-reduce:transition-none hover:bg-primary/90 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:opacity-50'
+
+/**
+ * Bold, full-height pill CTA reserved for value-moving actions — send,
+ * request, pay, withdraw. Uses the app's single accent (`bg-primary`) so it
+ * stands out from ordinary buttons, with a leading icon chosen by `kind`.
+ *
+ * @example
+ * ```tsx
+ * <MoneyActionButton kind="send" onClick={() => sendMoney()}>Send</MoneyActionButton>
+ * ```
+ */
+export function MoneyActionButton(props: MoneyActionButtonProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['children', 'kind', 'class'])
+  const Icon = () => KIND_ICON[local.kind ?? 'send']
+
+  return (
+    <button type="button" class={cn(BASE, local.class)} {...rest}>
+      <Dynamic component={Icon()} class="h-4 w-4 shrink-0" aria-hidden="true" />
+      {local.children}
+    </button>
+  )
+}

package/src/ui/ScrollScene.tsx

@@ -0,0 +1,70 @@
+// ScrollScene — binds a render prop to the element's own scroll progress (0
+// as it enters the viewport from the bottom, 1 as it leaves past the top),
+// for scroll-driven storytelling. Unlike Parallax (which applies a fixed
+// transform via Motion's `scroll`), this exposes the raw progress signal so
+// the caller decides what to do with it.
+import { createSignal, onCleanup, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface ScrollSceneProps {
+  /** Render-prop receiving a reactive progress accessor (0..1). */
+  children: (progress: () => number) => JSX.Element
+  class?: string
+}
+
+/**
+ * Wraps `children` in an element that tracks its own scroll progress: 0 when
+ * its top edge reaches the bottom of the viewport, 1 when its bottom edge
+ * passes the top of the viewport. Progress is exposed as a reactive accessor
+ * via a render prop, so the caller drives whatever transform/animation it
+ * wants — this component only measures. Scroll position isn't itself motion,
+ * so it keeps measuring under `prefers-reduced-motion`; it just never
+ * animates anything on its own.
+ *
+ * @example
+ * ```tsx
+ * <ScrollScene>
+ *   {(progress) => (
+ *     <div style={{ opacity: progress() }}>Reveal on scroll</div>
+ *   )}
+ * </ScrollScene>
+ * ```
+ */
+export function ScrollScene(props: ScrollSceneProps): JSX.Element {
+  let root!: HTMLDivElement
+  const [progress, setProgress] = createSignal(0)
+
+  onMount(() => {
+    let ticking = false
+
+    const measure = () => {
+      ticking = false
+      const rect = root.getBoundingClientRect()
+      const viewportH = window.innerHeight
+      const raw = (viewportH - rect.top) / (viewportH + rect.height)
+      setProgress(Math.min(1, Math.max(0, raw)))
+    }
+
+    const onScrollOrResize = () => {
+      if (ticking) return
+      ticking = true
+      requestAnimationFrame(measure)
+    }
+
+    measure()
+    window.addEventListener('scroll', onScrollOrResize, { passive: true })
+    window.addEventListener('resize', onScrollOrResize, { passive: true })
+
+    onCleanup(() => {
+      window.removeEventListener('scroll', onScrollOrResize)
+      window.removeEventListener('resize', onScrollOrResize)
+    })
+  })
+
+  return (
+    <div ref={root} class={cn(props.class)}>
+      {props.children(progress)}
+    </div>
+  )
+}

package/src/ui/SideRail.tsx

@@ -0,0 +1,120 @@
+// Vertical navigation rail — the vertical alternative to BottomNavigation / a
+// compact sidebar. Icon-first, optional labels under each icon; when labels
+// are hidden, the icon is wrapped in a Tooltip instead.
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Tooltip } from './Tooltip'
+
+/** A single destination within a {@link SideRail}. */
+export interface SideRailItem {
+  value: string
+  label: string
+  icon?: JSX.Element
+  /** Optional badge (e.g. an unread count) rendered on the item. */
+  badge?: JSX.Element
+}
+
+export interface SideRailProps {
+  items: SideRailItem[]
+  value: string
+  onChange: (value: string) => void
+  /** Show text labels under icons. When false, labels go in a tooltip. @default true */
+  labels?: boolean
+  class?: string
+}
+
+/**
+ * Narrow vertical column of stacked icon+label destinations — the vertical
+ * counterpart to {@link BottomNavigation} for side placement. The active item
+ * is highlighted with a left indicator bar and `aria-selected`. ArrowUp/
+ * ArrowDown move the selection between items (roving activation, matching the
+ * WAI-ARIA tabs pattern). Renders inline where placed — the consumer is
+ * responsible for positioning (e.g. `fixed inset-y-0 left-0`).
+ *
+ * @example
+ * ```tsx
+ * <SideRail
+ *   value={section()}
+ *   onChange={setSection}
+ *   items={[
+ *     { value: 'home', label: 'Home', icon: <HomeIcon /> },
+ *     { value: 'inbox', label: 'Inbox', icon: <InboxIcon />, badge: <Badge tone="info">3</Badge> },
+ *     { value: 'settings', label: 'Settings', icon: <SettingsIcon /> },
+ *   ]}
+ * />
+ * ```
+ */
+export function SideRail(props: SideRailProps): JSX.Element {
+  const showLabels = () => props.labels ?? true
+
+  const move = (delta: 1 | -1, currentIndex: number) => {
+    const count = props.items.length
+    const nextIndex = (currentIndex + delta + count) % count
+    const next = props.items[nextIndex]
+    if (next) props.onChange(next.value)
+  }
+
+  return (
+    <div
+      role="tablist"
+      aria-orientation="vertical"
+      class={cn('flex w-20 flex-col items-stretch gap-1 border-r border-border bg-glass py-2', props.class)}
+    >
+      <For each={props.items}>
+        {(item, index) => {
+          const active = () => item.value === props.value
+
+          const onKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'ArrowDown') {
+              event.preventDefault()
+              move(1, index())
+            } else if (event.key === 'ArrowUp') {
+              event.preventDefault()
+              move(-1, index())
+            }
+          }
+
+          const button = (
+            <button
+              type="button"
+              role="tab"
+              aria-selected={active()}
+              tabIndex={active() ? 0 : -1}
+              onClick={() => props.onChange(item.value)}
+              onKeyDown={onKeyDown}
+              class={cn(
+                'relative flex flex-col items-center gap-1 px-2 py-2.5 text-[11px] transition-colors',
+                active() ? 'text-primary' : 'text-muted-foreground hover:text-foreground',
+              )}
+            >
+              <span
+                aria-hidden="true"
+                class={cn(
+                  'absolute inset-y-1 left-0 w-0.5 rounded-full bg-primary transition-opacity',
+                  active() ? 'opacity-100' : 'opacity-0',
+                )}
+              />
+              <span class="relative inline-flex">
+                {item.icon}
+                <Show when={item.badge}>
+                  <span class="absolute -right-2 -top-2">{item.badge}</span>
+                </Show>
+              </span>
+              <Show when={showLabels()}>
+                <span class="truncate">{item.label}</span>
+              </Show>
+            </button>
+          )
+
+          return (
+            <Show when={showLabels()} fallback={<Tooltip content={item.label}>{button}</Tooltip>}>
+              {button}
+            </Show>
+          )
+        }}
+      </For>
+    </div>
+  )
+}