@glyphui/ui 0.0.0-stage → 0.1.1

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,92 @@
+import { Tabs as TabsPrimitive } from 'radix-ui'
+import { type ComponentProps, createContext, useContext } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const tabsStyles = tv({
+  slots: {
+    root: 'flex flex-col gap-4',
+    list: 'flex items-center',
+    trigger: [
+      'relative inline-flex cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap text-small font-medium text-muted-foreground',
+      transition,
+      focusRing,
+      'hover:text-foreground data-[state=active]:text-foreground disabled:pointer-events-none disabled:opacity-50',
+      '[&>svg]:size-4',
+    ],
+    content: 'outline-none',
+  },
+  variants: {
+    variant: {
+      underline: {
+        list: 'gap-5 border-b border-border',
+        trigger:
+          'h-9 after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:rounded-pill after:bg-transparent data-[state=active]:after:bg-foreground',
+      },
+      pill: {
+        list: ['inline-flex w-fit gap-0.5 rounded-md border-border bg-muted p-0.5', themedBorder],
+        trigger:
+          'h-7 rounded-[calc(var(--radius-md)-2px)] px-3 data-[state=active]:bg-raised data-[state=active]:shadow-xs',
+      },
+    },
+  },
+  defaultVariants: { variant: 'underline' },
+})
+
+type TabsVariants = VariantProps<typeof tabsStyles>
+const TabsContext = createContext<TabsVariants>({})
+
+export interface TabsProps extends ComponentProps<typeof TabsPrimitive.Root>, TabsVariants {}
+
+export function Tabs(inProps: TabsProps) {
+  const [{ variant, className, ...rest }, slots] = useComponentConfig('Tabs', inProps)
+  return (
+    <TabsContext.Provider value={{ variant }}>
+      <TabsPrimitive.Root
+        data-slot="tabs"
+        className={tabsStyles({ variant }).root({ class: [slots.root, className] })}
+        {...rest}
+      />
+    </TabsContext.Provider>
+  )
+}
+
+function useTabsParts() {
+  const { variant } = useContext(TabsContext)
+  const [, slots] = useComponentConfig('Tabs', {})
+  return { s: tabsStyles({ variant }), slots }
+}
+
+export function TabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>) {
+  const { s, slots } = useTabsParts()
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={s.list({ class: [slots.list, className] })}
+      {...props}
+    />
+  )
+}
+
+export function TabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>) {
+  const { s, slots } = useTabsParts()
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={s.trigger({ class: [slots.trigger, className] })}
+      {...props}
+    />
+  )
+}
+
+export function TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>) {
+  const { s, slots } = useTabsParts()
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={s.content({ class: [slots.content, className] })}
+      {...props}
+    />
+  )
+}

package/src/components/text/index.ts

@@ -0,0 +1,2 @@
+export { Text, type TextProps } from './text'
+export { type TextVariants, textStyles } from './text.styles'

package/src/components/text/text.styles.ts

@@ -0,0 +1,32 @@
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const textStyles = tv({
+  slots: { base: '' },
+  variants: {
+    size: {
+      lead: { base: 'text-lead' },
+      body: { base: 'text-body' },
+      small: { base: 'text-small' },
+      caption: { base: 'text-caption' },
+    },
+    tone: {
+      default: { base: 'text-foreground' },
+      muted: { base: 'text-muted-foreground' },
+      faint: { base: 'text-faint-foreground' },
+      primary: { base: 'text-primary' },
+      success: { base: 'text-success' },
+      warning: { base: 'text-warning' },
+      danger: { base: 'text-danger' },
+    },
+    weight: {
+      regular: { base: 'font-normal' },
+      medium: { base: 'font-medium' },
+      semibold: { base: 'font-semibold' },
+    },
+    mono: { true: { base: 'font-mono' } },
+    truncate: { true: { base: 'truncate' } },
+  },
+  defaultVariants: { size: 'body', tone: 'default' },
+})
+
+export type TextVariants = VariantProps<typeof textStyles>

package/src/components/text/text.tsx

@@ -0,0 +1,17 @@
+import { Slot } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { type TextVariants, textStyles } from './text.styles'
+
+export interface TextProps extends ComponentProps<'p'>, TextVariants {
+  /** Render the child element (e.g. `<span>`, `<label>`) with text styles instead of a `<p>`. */
+  asChild?: boolean
+}
+
+export function Text(inProps: TextProps) {
+  const [props, slots] = useComponentConfig('Text', inProps)
+  const { size, tone, weight, mono, truncate, asChild, className, ...rest } = props
+  const s = textStyles({ size, tone, weight, mono, truncate })
+  const Comp = asChild ? Slot.Root : 'p'
+  return <Comp data-slot="text" className={s.base({ class: [slots.base, className] })} {...rest} />
+}

package/src/components/textarea/index.ts

@@ -0,0 +1 @@
+export { Textarea, textareaStyles } from './textarea'

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,27 @@
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { tv } from '../../utils/tv'
+import { useFieldControl } from '../field/field-context'
+import { fieldControl } from '../input/input.styles'
+
+export const textareaStyles = tv({
+  slots: {
+    base: [
+      ...fieldControl,
+      'field-sizing-content min-h-20 resize-y rounded-[min(var(--radius-md),var(--radius-lg))] px-3 py-2 text-small',
+      'outline-none placeholder:text-faint-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+  },
+})
+
+export function Textarea(inProps: ComponentProps<'textarea'>) {
+  const [{ className, ...rest }, slots] = useComponentConfig('Textarea', useFieldControl(inProps))
+  return (
+    <textarea
+      data-slot="textarea"
+      className={textareaStyles().base({ class: [slots.base, className] })}
+      {...rest}
+    />
+  )
+}

package/src/components/tooltip/index.ts

@@ -0,0 +1 @@
+export { Tooltip, type TooltipProps, tooltipStyles } from './tooltip'

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,42 @@
+import { Tooltip as TooltipPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { tv } from '../../utils/tv'
+
+export const tooltipStyles = tv({
+  slots: {
+    content:
+      'z-50 max-w-xs animate-pop-in rounded-sm bg-secondary px-2 py-1 text-caption text-secondary-foreground shadow-md',
+  },
+})
+
+export interface TooltipProps
+  extends Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'content'> {
+  content: ReactNode
+  children: ReactNode
+  /** Skip the tooltip entirely, e.g. when the label is already visible. */
+  disabled?: boolean
+  delayDuration?: number
+}
+
+/** A short hint on hover or focus. The child must be focusable (a button or link). */
+export function Tooltip(inProps: TooltipProps) {
+  const [props, slots] = useComponentConfig('Tooltip', inProps)
+  const { content, children, disabled, delayDuration, className, sideOffset = 6, ...rest } = props
+  if (disabled) return children
+  return (
+    <TooltipPrimitive.Root {...(delayDuration !== undefined && { delayDuration })}>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+          data-slot="tooltip"
+          sideOffset={sideOffset}
+          className={tooltipStyles().content({ class: [slots.content, className] })}
+          {...rest}
+        >
+          {content}
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  )
+}

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { type SlotClasses, useComponentConfig } from './use-component-config'
+export { useControllableState } from './use-controllable-state'
+export { useMediaQuery } from './use-media-query'
+export { useScrolled } from './use-scrolled'

package/src/hooks/use-component-config.ts

@@ -0,0 +1,42 @@
+import type { ComponentName, GlyphComponentRegistry } from '@glyphui/tokens'
+import { useContext } from 'react'
+import { GlyphContext } from '../provider/glyph-context'
+
+type SlotsOf<K extends ComponentName> = GlyphComponentRegistry[K] extends {
+  slots: infer S extends string
+}
+  ? S
+  : never
+
+export type SlotClasses<K extends ComponentName> = Partial<Record<SlotsOf<K>, string>>
+
+interface LooseOverride {
+  defaultVariants?: Record<string, unknown>
+  className?: Record<string, string>
+}
+
+/**
+ * Applies the theme's per-component settings (`theme.components[name]`):
+ * fills unset variant props from `defaultVariants` and returns the extra slot classes.
+ * Every styled component calls this first.
+ */
+export function useComponentConfig<K extends ComponentName, P extends object>(
+  name: K,
+  props: P,
+): [props: P, slotClasses: SlotClasses<K>] {
+  const theme = useContext(GlyphContext)?.theme
+  const override = theme?.components[name] as LooseOverride | undefined
+  if (!override) return [props, {}]
+
+  let merged = props
+  const defaults = override.defaultVariants
+  if (defaults) {
+    merged = { ...props }
+    for (const [key, value] of Object.entries(defaults)) {
+      if ((merged as Record<string, unknown>)[key] === undefined) {
+        ;(merged as Record<string, unknown>)[key] = value
+      }
+    }
+  }
+  return [merged, (override.className ?? {}) as SlotClasses<K>]
+}

package/src/hooks/use-controllable-state.ts

@@ -0,0 +1,27 @@
+import { useCallback, useRef, useState } from 'react'
+
+interface Options<T> {
+  value?: T | undefined
+  defaultValue: T
+  onChange?: ((value: T) => void) | undefined
+}
+
+/** State that can be controlled by a parent (`value` + `onChange`) or left uncontrolled. */
+export function useControllableState<T>({ value, defaultValue, onChange }: Options<T>) {
+  const [internal, setInternal] = useState(defaultValue)
+  const isControlled = value !== undefined
+  const current = isControlled ? value : internal
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+
+  const setValue = useCallback(
+    (next: T | ((prev: T) => T)) => {
+      const resolved = typeof next === 'function' ? (next as (prev: T) => T)(current) : next
+      if (!isControlled) setInternal(resolved)
+      onChangeRef.current?.(resolved)
+    },
+    [current, isControlled],
+  )
+
+  return [current, setValue] as const
+}

package/src/hooks/use-media-query.ts

@@ -0,0 +1,14 @@
+import { useSyncExternalStore } from 'react'
+
+/** Subscribes to a CSS media query. Returns `fallback` during SSR. */
+export function useMediaQuery(query: string, fallback = false): boolean {
+  return useSyncExternalStore(
+    (onChange) => {
+      const list = window.matchMedia(query)
+      list.addEventListener('change', onChange)
+      return () => list.removeEventListener('change', onChange)
+    },
+    () => window.matchMedia(query).matches,
+    () => fallback,
+  )
+}

package/src/hooks/use-scrolled.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+
+/** True once the window has scrolled past `threshold` pixels. */
+export function useScrolled(threshold = 8, enabled = true): boolean {
+  const [scrolled, setScrolled] = useState(false)
+  useEffect(() => {
+    if (!enabled) return
+    const update = () => setScrolled(window.scrollY > threshold)
+    update()
+    window.addEventListener('scroll', update, { passive: true })
+    return () => window.removeEventListener('scroll', update)
+  }, [threshold, enabled])
+  return scrolled
+}

package/src/index.ts

@@ -0,0 +1,52 @@
+import './register'
+
+// Theme engine (re-exported so apps only import from @glyphui/ui).
+export {
+  type ColorMode,
+  type ColorToken,
+  type ComponentOverrides,
+  defineTheme,
+  type RadiusToken,
+  type ShadowToken,
+  type TextToken,
+  type Theme,
+  type ThemeInput,
+  type Tone,
+  themeToCss,
+  tokenVar,
+} from '@glyphui/tokens'
+// Components
+export * from './components/avatar'
+export * from './components/badge'
+export * from './components/button'
+export * from './components/card'
+export * from './components/checkbox'
+export * from './components/container'
+export * from './components/eyebrow'
+export * from './components/field'
+export * from './components/heading'
+export * from './components/input'
+export * from './components/kbd'
+export * from './components/label'
+export * from './components/section'
+export * from './components/segmented-control'
+export * from './components/select'
+export * from './components/separator'
+export * from './components/skeleton'
+export * from './components/spinner'
+export * from './components/stack'
+export * from './components/switch'
+export * from './components/table'
+export * from './components/tabs'
+export * from './components/text'
+export * from './components/textarea'
+export * from './components/tooltip'
+export * from './hooks'
+// Patterns
+export * from './patterns/app-shell'
+export * from './patterns/async'
+// Providers and hooks
+export * from './provider'
+export { brutalist, editorial, glyph, type PresetName, playful, presets } from './themes'
+export { type ClassValue, cn } from './utils/cn'
+export { tv, type VariantProps } from './utils/tv'

package/src/internal/icons.tsx

@@ -0,0 +1,99 @@
+import type { SVGProps } from 'react'
+
+/** Minimal internal icon set, so components don't force an icon library on consumers. */
+type IconProps = SVGProps<SVGSVGElement>
+
+function Icon({ children, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      {children}
+    </svg>
+  )
+}
+
+export const CheckIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="M20 6 9 17l-5-5" />
+  </Icon>
+)
+export const MinusIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="M5 12h14" />
+  </Icon>
+)
+export const ChevronDownIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="m6 9 6 6 6-6" />
+  </Icon>
+)
+export const ChevronLeftIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="m15 18-6-6 6-6" />
+  </Icon>
+)
+export const ChevronRightIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="m9 18 6-6-6-6" />
+  </Icon>
+)
+export const ArrowUpIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="m5 12 7-7 7 7M12 19V5" />
+  </Icon>
+)
+export const ArrowDownIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="M12 5v14M19 12l-7 7-7-7" />
+  </Icon>
+)
+export const ChevronsUpDownIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="m7 15 5 5 5-5M7 9l5-5 5 5" />
+  </Icon>
+)
+export const XIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="M18 6 6 18M6 6l12 12" />
+  </Icon>
+)
+export const MenuIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="M4 6h16M4 12h16M4 18h16" />
+  </Icon>
+)
+export const PanelLeftIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+    <path d="M9 3v18" />
+  </Icon>
+)
+export const SearchIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <circle cx="11" cy="11" r="7" />
+    <path d="m20 20-3.5-3.5" />
+  </Icon>
+)
+export const InboxIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="M22 12h-6l-2 3h-4l-2-3H2" />
+    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+  </Icon>
+)
+export const AlertIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 8v4M12 16h.01" />
+  </Icon>
+)

package/src/patterns/app-shell/app-shell-context.ts

@@ -0,0 +1,27 @@
+import { createContext, useContext } from 'react'
+
+export interface AppShellContextValue {
+  /** Desktop sidebar is collapsed to an icon rail. */
+  collapsed: boolean
+  setCollapsed: (collapsed: boolean) => void
+  /** Mobile navigation drawer is open. */
+  mobileOpen: boolean
+  setMobileOpen: (open: boolean) => void
+  /** True for the sidebar copy rendered inside the mobile drawer. */
+  inDrawer: boolean
+}
+
+export const AppShellContext = createContext<AppShellContextValue | null>(null)
+
+/** Sidebar state. Works outside an AppShell too (always expanded). */
+export function useAppShell(): AppShellContextValue {
+  return (
+    useContext(AppShellContext) ?? {
+      collapsed: false,
+      setCollapsed: () => {},
+      mobileOpen: false,
+      setMobileOpen: () => {},
+      inDrawer: false,
+    }
+  )
+}

package/src/patterns/app-shell/app-shell.styles.ts

@@ -0,0 +1,127 @@
+import { focusRing, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const appShellStyles = tv({
+  slots: {
+    root: 'flex w-full bg-background',
+    sidebar: 'hidden shrink-0 md:flex',
+    main: 'flex min-w-0 flex-1 flex-col',
+    mobileBar: [
+      'flex h-14 shrink-0 items-center gap-2 border-b-border px-3 md:hidden',
+      'border-b-(length:--glyph-border-width)',
+    ],
+    overlay: 'fixed inset-0 z-50 animate-fade-in bg-overlay',
+    drawer:
+      'fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] animate-slide-in-left shadow-lg outline-none [&>[data-slot=sidebar]]:w-full',
+  },
+  variants: {
+    layout: {
+      page: {
+        root: 'min-h-dvh',
+        sidebar: 'sticky top-0 h-dvh',
+        mobileBar: 'sticky top-0 z-30 bg-background/80 backdrop-blur-xl',
+      },
+      embedded: {
+        root: 'h-full min-h-0 overflow-hidden',
+        sidebar: 'h-full',
+        main: 'overflow-y-auto',
+      },
+    },
+  },
+  defaultVariants: { layout: 'page' },
+})
+
+export type AppShellVariants = VariantProps<typeof appShellStyles>
+
+export const sidebarStyles = tv({
+  slots: {
+    root: [
+      'group/sidebar flex h-full w-60 flex-col overflow-hidden border-r-border bg-subtle',
+      'border-r-(length:--glyph-border-width)',
+      'transition-[width] duration-(--glyph-duration-base) ease-standard data-[collapsed=true]:w-15',
+    ],
+    header: 'flex h-14 shrink-0 items-center gap-2 px-3',
+    content: 'flex flex-1 flex-col gap-5 overflow-y-auto overflow-x-hidden px-3 py-3',
+    section: 'flex flex-col gap-0.5',
+    sectionLabel:
+      'mb-1 truncate px-2 font-mono text-caption uppercase tracking-[0.1em] text-faint-foreground group-data-[collapsed=true]/sidebar:sr-only',
+    item: [
+      'relative flex h-8 w-full shrink-0 cursor-pointer items-center gap-2.5 rounded-sm px-2 text-small font-medium text-muted-foreground',
+      transition,
+      focusRing,
+      'hover:bg-muted hover:text-foreground',
+      'aria-[current=page]:bg-muted aria-[current=page]:text-foreground',
+      'before:absolute before:inset-y-1.5 before:-left-3 before:w-0.5 before:rounded-r-pill before:bg-transparent aria-[current=page]:before:bg-primary',
+      'group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-0',
+    ],
+    itemIcon: 'flex size-4 shrink-0 items-center justify-center [&>svg]:size-4',
+    itemLabel: 'min-w-0 flex-1 truncate text-left group-data-[collapsed=true]/sidebar:hidden',
+    itemBadge:
+      'ml-auto font-mono text-caption text-faint-foreground tabular-nums group-data-[collapsed=true]/sidebar:hidden',
+    footer: [
+      'mt-auto flex shrink-0 items-center gap-2 border-t-border px-3 py-3 group-data-[collapsed=true]/sidebar:justify-center',
+      'border-t-(length:--glyph-border-width)',
+    ],
+  },
+})
+
+export const navbarStyles = tv({
+  slots: {
+    root: [
+      'top-0 z-40 w-full border-b-transparent',
+      'border-b-(length:--glyph-border-width)',
+      'transition-[background-color,border-color,backdrop-filter] duration-(--glyph-duration-base) ease-standard',
+    ],
+    inner: 'flex h-16 items-center gap-6',
+    brand: 'flex shrink-0 items-center gap-2 font-display text-h4 text-foreground',
+    links: 'hidden items-center gap-1 md:flex',
+    link: [
+      'rounded-sm px-3 py-1.5 text-small font-medium text-muted-foreground',
+      transition,
+      focusRing,
+      'hover:text-foreground aria-[current=page]:text-foreground',
+    ],
+    actions: 'ml-auto hidden items-center gap-2 md:flex',
+    menuButton: 'ml-auto md:hidden',
+    overlay: 'fixed inset-0 z-50 animate-fade-in bg-overlay',
+    panel: [
+      'fixed inset-x-0 top-0 z-50 max-h-dvh overflow-y-auto border-b-border bg-background px-4 pb-6 shadow-lg outline-none animate-slide-in-top',
+      'border-b-(length:--glyph-border-width)',
+    ],
+    panelHeader: 'flex h-16 items-center justify-between',
+    panelLinks: 'flex flex-col gap-1',
+    panelLink: [
+      'rounded-md px-3 py-2.5 text-body font-medium text-muted-foreground',
+      focusRing,
+      'hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground',
+    ],
+    panelActions: [
+      'mt-4 flex flex-col gap-2 border-t-border pt-4',
+      'border-t-(length:--glyph-border-width)',
+    ],
+  },
+  variants: {
+    sticky: { true: { root: 'sticky' }, false: { root: 'relative' } },
+    blur: {
+      true: {
+        root: 'data-[scrolled=true]:border-b-border data-[scrolled=true]:bg-background/72 data-[scrolled=true]:backdrop-blur-xl data-[scrolled=true]:backdrop-saturate-150',
+      },
+      false: { root: 'border-b-border bg-background' },
+    },
+  },
+  defaultVariants: { sticky: true, blur: true },
+})
+
+export const pageHeaderStyles = tv({
+  slots: {
+    root: [
+      'flex flex-col gap-4 border-b-border pb-5 sm:flex-row sm:items-end sm:justify-between',
+      'border-b-(length:--glyph-border-width)',
+    ],
+    text: 'grid min-w-0 gap-1',
+    eyebrow: 'font-mono text-caption uppercase tracking-[0.12em] text-faint-foreground',
+    title: 'font-display text-h3 text-foreground',
+    description: 'max-w-2xl text-small text-muted-foreground',
+    actions: 'flex shrink-0 flex-wrap items-center gap-2',
+  },
+})