@titan-design/react-ui 0.1.1 → 0.2.6

package/src/stories/ThemePresets.stories.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Button, ButtonText } from '../components/ui/button'
+import { Card } from '../components/ui/card'
+import { Input } from '../components/ui/input'
+import { Progress, CircularProgress } from '../components/ui/progress'
+import { Badge } from '../components/ui/badge'
+import { applyThemePreset, audiobookPreset, defaultPreset } from '../theme/presets'
+
+function PresetShowcase({ preset }: { preset: typeof audiobookPreset }) {
+  useEffect(() => {
+    const cleanup = applyThemePreset(preset)
+    return cleanup
+  }, [preset])
+
+  return (
+    <View className="gap-6 p-6 bg-background-default min-h-screen">
+      <Text className="text-2xl font-bold text-text-primary font-heading">
+        {preset.name} preset
+      </Text>
+
+      {/* Buttons */}
+      <View className="flex-row gap-3 flex-wrap">
+        <Button variant="solid" color="primary">
+          <ButtonText>Primary</ButtonText>
+        </Button>
+        <Button variant="solid" color="secondary">
+          <ButtonText>Secondary</ButtonText>
+        </Button>
+        <Button variant="outline" color="primary">
+          <ButtonText>Outline</ButtonText>
+        </Button>
+        <Button variant="ghost" color="primary">
+          <ButtonText>Ghost</ButtonText>
+        </Button>
+      </View>
+
+      {/* Card */}
+      <Card className="p-4 gap-3">
+        <Text className="text-lg font-semibold text-text-primary">Sample Card</Text>
+        <Text className="text-text-secondary">
+          This card demonstrates surface elevation and border colors with the current preset.
+        </Text>
+        <View className="flex-row gap-2">
+          <Badge color="success">Complete</Badge>
+          <Badge color="warning">Pending</Badge>
+          <Badge color="error">Failed</Badge>
+        </View>
+      </Card>
+
+      {/* Input */}
+      <Input placeholder="Type something..." />
+
+      {/* Progress */}
+      <View className="gap-3">
+        <Progress value={65} label="Processing" showValue color="primary" />
+        <View className="flex-row gap-4 items-center">
+          <CircularProgress value={25} size={48} showValue color="primary" />
+          <CircularProgress value={75} size={48} showValue color="secondary" />
+          <CircularProgress value={100} size={48} showValue color="success" />
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const meta: Meta = {
+  title: 'Theme/Presets',
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+
+export const Default: StoryObj = {
+  render: () => <PresetShowcase preset={defaultPreset} />,
+  name: 'Default Preset',
+}
+
+export const Audiobook: StoryObj = {
+  render: () => <PresetShowcase preset={audiobookPreset} />,
+  name: 'Audiobook Preset',
+}

package/src/theme/global.css

@@ -116,6 +116,29 @@
 
     --color-avatar-background: #4B5563;
     --color-avatar-text: #FFFFFF;
+
+    /* RGB decomposed values for glow shadows */
+    --color-brand-primary-rgb: 255, 121, 0;
+    --color-brand-secondary-rgb: 64, 109, 135;
+    --color-status-success-rgb: 20, 184, 166;
+    --color-status-error-rgb: 209, 67, 67;
+    --color-status-warning-rgb: 255, 176, 32;
+    --color-status-info-rgb: 33, 150, 243;
+    --color-background-base-rgb: 16, 16, 16;
+
+    /* Font families */
+    --font-family-sans: 'Inter';
+    --font-family-body: 'Nunito Sans';
+    --font-family-heading: 'Space Grotesk';
+    --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+
+    /* Animation tokens */
+    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --duration-fast: 150ms;
+    --duration-normal: 250ms;
+    --duration-slow: 400ms;
   }
 
   /* Light mode */
@@ -222,11 +245,34 @@
 
     --color-avatar-background: #6B7280;
     --color-avatar-text: #FFFFFF;
+
+    /* RGB decomposed values for glow shadows */
+    --color-brand-primary-rgb: 255, 121, 0;
+    --color-brand-secondary-rgb: 64, 109, 135;
+    --color-status-success-rgb: 20, 184, 166;
+    --color-status-error-rgb: 209, 67, 67;
+    --color-status-warning-rgb: 255, 176, 32;
+    --color-status-info-rgb: 33, 150, 243;
+    --color-background-base-rgb: 16, 16, 16;
+
+    /* Font families */
+    --font-family-sans: 'Inter';
+    --font-family-body: 'Nunito Sans';
+    --font-family-heading: 'Space Grotesk';
+    --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+
+    /* Animation tokens */
+    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --duration-fast: 150ms;
+    --duration-normal: 250ms;
+    --duration-slow: 400ms;
   }
 
   /* Base styles */
   html {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+    font-family: var(--font-family-sans), -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -248,3 +294,85 @@
     color: var(--color-text-primary);
   }
 }
+
+@layer utilities {
+  /* Opt-in styled scrollbar — apply to scrollable containers */
+  .scrollbar-styled::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .scrollbar-styled::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-styled::-webkit-scrollbar-thumb {
+    background: var(--color-border-strong);
+    border-radius: 4px;
+  }
+
+  .scrollbar-styled::-webkit-scrollbar-thumb:hover {
+    background: var(--color-text-tertiary);
+  }
+
+  /* Thin variant */
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background: var(--color-border-strong);
+    border-radius: 2px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: var(--color-text-tertiary);
+  }
+
+  /* Hide scrollbar but keep scrollable */
+  .scrollbar-none::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scrollbar-none {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  /* Atmosphere: subtle radial gradient washes for ambient color */
+  .atmosphere-warm {
+    position: relative;
+  }
+
+  .atmosphere-warm::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background:
+      radial-gradient(ellipse 140% 100% at 15% 5%, rgba(var(--color-brand-primary-rgb, 255, 121, 0), 0.06) 0%, transparent 45%),
+      radial-gradient(ellipse 120% 80% at 85% 95%, rgba(var(--color-brand-secondary-rgb, 64, 109, 135), 0.04) 0%, transparent 45%);
+  }
+
+  /* Film grain overlay for vintage texture */
+  .grain {
+    position: relative;
+  }
+
+  .grain::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0.015;
+    mix-blend-mode: overlay;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  }
+}

package/src/theme/index.ts

@@ -37,3 +37,4 @@ export {
   type ElevationConfig,
   type ComponentType,
 } from './elevation'
+export * from './presets'

package/src/theme/presets/apply.ts

@@ -0,0 +1,97 @@
+import type { ThemePreset } from './types'
+
+function colorKeyToVar(key: string): string {
+  return `--color-${key}`
+}
+
+function applyColorOverrides(colors: Record<string, string | undefined>, root: HTMLElement) {
+  for (const [key, value] of Object.entries(colors)) {
+    if (value !== undefined) {
+      root.style.setProperty(colorKeyToVar(key), value)
+    }
+  }
+}
+
+function applyFontOverrides(fonts: Record<string, string | undefined>, root: HTMLElement) {
+  const fontVarMap: Record<string, string> = {
+    sans: '--font-family-sans',
+    body: '--font-family-body',
+    heading: '--font-family-heading',
+    mono: '--font-family-mono',
+  }
+  for (const [key, value] of Object.entries(fonts)) {
+    if (value !== undefined && fontVarMap[key]) {
+      root.style.setProperty(fontVarMap[key], value)
+    }
+  }
+}
+
+function injectFontImport(url: string) {
+  if (typeof document === 'undefined') return
+  const existing = document.querySelector(`link[href="${url}"]`)
+  if (existing) return
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = url
+  document.head.appendChild(link)
+}
+
+export function applyThemePreset(preset: ThemePreset): () => void {
+  if (typeof document === 'undefined') {
+    return () => {}
+  }
+
+  const root = document.documentElement
+  const removals: (() => void)[] = []
+
+  // Inject font import if specified
+  if (preset.fontImport) {
+    injectFontImport(preset.fontImport)
+  }
+
+  // Determine current theme mode
+  const isLight = root.classList.contains('light')
+  const modeColors = isLight ? preset.colors?.light : preset.colors?.dark
+
+  // Apply color overrides
+  if (modeColors) {
+    const previousValues: Record<string, string | null> = {}
+    for (const key of Object.keys(modeColors)) {
+      previousValues[colorKeyToVar(key)] = root.style.getPropertyValue(colorKeyToVar(key)) || null
+    }
+    applyColorOverrides(modeColors, root)
+    removals.push(() => {
+      for (const [varName, prev] of Object.entries(previousValues)) {
+        if (prev === null) {
+          root.style.removeProperty(varName)
+        } else {
+          root.style.setProperty(varName, prev)
+        }
+      }
+    })
+  }
+
+  // Apply font overrides
+  if (preset.fonts) {
+    applyFontOverrides(preset.fonts as Record<string, string | undefined>, root)
+  }
+
+  // Apply root classes
+  if (preset.rootClasses) {
+    for (const cls of preset.rootClasses) {
+      root.classList.add(cls)
+    }
+    removals.push(() => {
+      for (const cls of preset.rootClasses!) {
+        root.classList.remove(cls)
+      }
+    })
+  }
+
+  // Return cleanup function
+  return () => {
+    for (const remove of removals) {
+      remove()
+    }
+  }
+}

package/src/theme/presets/audiobook.ts

@@ -0,0 +1,93 @@
+import type { ThemePreset } from './types'
+
+/**
+ * Audiobook Studio preset.
+ *
+ * Warm copper/patina aesthetic inspired by vintage audio equipment
+ * and reading lounges. Dark-mode only design with editorial typography.
+ */
+export const audiobookPreset: ThemePreset = {
+  name: 'audiobook',
+  description: 'Warm copper/patina theme with editorial typography',
+  fontImport:
+    "https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap",
+  fonts: {
+    sans: "'Outfit', 'Avenir', 'Avenir Next', system-ui, sans-serif",
+    body: "'Outfit', 'Avenir', 'Avenir Next', system-ui, sans-serif",
+    heading: "'Newsreader', 'Libre Baskerville', Georgia, serif",
+    mono: "'JetBrains Mono', 'SF Mono', 'Fira Code', monospace",
+  },
+  colors: {
+    dark: {
+      // Brand: Copper accent
+      'brand-primary': '#d4782a',
+      'brand-primary-light': '#e8944a',
+      'brand-primary-dark': '#9a4a15',
+      'brand-primary-subtle': 'rgba(212, 120, 42, 0.12)',
+      'brand-primary-hover': '#e8944a',
+      'brand-primary-active': '#f5b070',
+
+      // Brand secondary: Patina/verdigris
+      'brand-secondary': '#3a9b8a',
+      'brand-secondary-light': '#55baa7',
+      'brand-secondary-dark': '#1f5c52',
+      'brand-secondary-subtle': 'rgba(58, 155, 138, 0.12)',
+      'brand-secondary-hover': '#55baa7',
+      'brand-secondary-active': '#7ed4c4',
+
+      'on-brand-primary': '#FFFFFF',
+      'on-brand-secondary': '#FFFFFF',
+
+      // Status colors (audiobook's warmer status palette)
+      'status-success': '#5fb870',
+      'status-error': '#d85c4a',
+      'status-warning': '#d4a43a',
+      'status-info': '#5a8fd4',
+
+      // Text: warm off-whites
+      'text-primary': '#f4f3f1',
+      'text-secondary': '#b5b3af',
+      'text-tertiary': '#7a7875',
+
+      // Surfaces: warm charcoals (not pure gray)
+      'surface-base': '#101114',
+      'surface-elevated': '#15171c',
+      'surface-raised': '#1a1d24',
+      'surface-overlay': '#15171c',
+      'surface-input': '#15171c',
+
+      // Backgrounds
+      'background-base': '#0a0b0d',
+      'background-default': '#101114',
+      'background-subtle': '#1a1d24',
+
+      // Borders
+      'border-default': 'rgba(255, 255, 255, 0.06)',
+      'border-subtle': 'rgba(255, 255, 255, 0.03)',
+      'border-strong': '#2d323d',
+      'border-focus': '#d4782a',
+      'border-input': '#2d323d',
+      'border-input-hover': '#454c5c',
+      'border-input-focus': '#d4782a',
+      'border-input-error': '#d85c4a',
+
+      // Interactive
+      'interactive-hover': 'rgba(255, 255, 255, 0.04)',
+      'interactive-focus': 'rgba(255, 255, 255, 0.12)',
+      'interactive-active': 'rgba(255, 255, 255, 0.16)',
+      'interactive-selected': 'rgba(255, 255, 255, 0.08)',
+
+      'divider': 'rgba(255, 255, 255, 0.06)',
+
+      // Glow RGB values for shadow utilities
+      'brand-primary-rgb': '212, 120, 42',
+      'brand-secondary-rgb': '58, 155, 138',
+      'status-success-rgb': '95, 184, 112',
+      'status-error-rgb': '216, 92, 74',
+      'status-warning-rgb': '212, 164, 58',
+      'status-info-rgb': '90, 143, 212',
+      'background-base-rgb': '10, 11, 13',
+    },
+  },
+  rootClasses: ['atmosphere-warm', 'grain'],
+}

package/src/theme/presets/default.ts

@@ -0,0 +1,6 @@
+import type { ThemePreset } from './types'
+
+export const defaultPreset: ThemePreset = {
+  name: 'default',
+  description: 'Titan Design System default theme — orange accent, steel secondary',
+}

package/src/theme/presets/index.ts

@@ -0,0 +1,4 @@
+export type { ThemePreset, ThemePresetColors, ThemePresetFonts, ThemePresetRadii, ThemePresetShadows } from './types'
+export { applyThemePreset } from './apply'
+export { defaultPreset } from './default'
+export { audiobookPreset } from './audiobook'

package/src/theme/presets/presets.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { applyThemePreset } from './apply'
+import type { ThemePreset } from './types'
+
+describe('applyThemePreset', () => {
+  let cleanup: () => void
+
+  afterEach(() => {
+    cleanup?.()
+  })
+
+  it('applies color overrides to document root', () => {
+    const preset: ThemePreset = {
+      name: 'test',
+      colors: {
+        dark: {
+          'brand-primary': '#FF0000',
+        },
+      },
+    }
+    cleanup = applyThemePreset(preset)
+    const value = document.documentElement.style.getPropertyValue('--color-brand-primary')
+    expect(value).toBe('#FF0000')
+  })
+
+  it('returns cleanup function that removes overrides', () => {
+    const preset: ThemePreset = {
+      name: 'test',
+      colors: {
+        dark: {
+          'brand-primary': '#FF0000',
+        },
+      },
+    }
+    cleanup = applyThemePreset(preset)
+    cleanup()
+    const value = document.documentElement.style.getPropertyValue('--color-brand-primary')
+    expect(value).toBe('')
+  })
+
+  it('adds root classes', () => {
+    const preset: ThemePreset = {
+      name: 'test',
+      rootClasses: ['atmosphere-warm'],
+    }
+    cleanup = applyThemePreset(preset)
+    expect(document.documentElement.classList.contains('atmosphere-warm')).toBe(true)
+    cleanup()
+    expect(document.documentElement.classList.contains('atmosphere-warm')).toBe(false)
+  })
+})

package/src/theme/presets/types.ts

@@ -0,0 +1,76 @@
+export interface ThemePresetColors {
+  'brand-primary'?: string
+  'brand-primary-light'?: string
+  'brand-primary-dark'?: string
+  'brand-primary-subtle'?: string
+  'brand-primary-hover'?: string
+  'brand-primary-active'?: string
+  'brand-secondary'?: string
+  'brand-secondary-light'?: string
+  'brand-secondary-dark'?: string
+  'brand-secondary-subtle'?: string
+  'brand-secondary-hover'?: string
+  'brand-secondary-active'?: string
+  'on-brand-primary'?: string
+  'on-brand-secondary'?: string
+  'status-success'?: string
+  'status-error'?: string
+  'status-warning'?: string
+  'status-info'?: string
+  'text-primary'?: string
+  'text-secondary'?: string
+  'text-tertiary'?: string
+  'surface-base'?: string
+  'surface-elevated'?: string
+  'surface-raised'?: string
+  'surface-overlay'?: string
+  'surface-input'?: string
+  'background-base'?: string
+  'background-default'?: string
+  'background-subtle'?: string
+  'border-default'?: string
+  'border-subtle'?: string
+  'border-strong'?: string
+  'border-focus'?: string
+  'divider'?: string
+  [key: `${string}`]: string | undefined
+}
+
+export interface ThemePresetFonts {
+  sans?: string
+  body?: string
+  heading?: string
+  mono?: string
+}
+
+export interface ThemePresetRadii {
+  sm?: string
+  DEFAULT?: string
+  md?: string
+  lg?: string
+  xl?: string
+}
+
+export interface ThemePresetShadows {
+  sm?: string
+  DEFAULT?: string
+  md?: string
+  lg?: string
+  xl?: string
+}
+
+export interface ThemePreset {
+  name: string
+  description?: string
+  colors?: {
+    dark?: ThemePresetColors
+    light?: ThemePresetColors
+  }
+  fonts?: ThemePresetFonts
+  radii?: ThemePresetRadii
+  shadows?: ThemePresetShadows
+  /** Additional CSS classes to add to root element */
+  rootClasses?: string[]
+  /** Google Fonts import URL (appended to existing imports) */
+  fontImport?: string
+}

package/src/utils/avatar-color.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { avatarColor, getInitials, AVATAR_COLORS } from './avatar-color'
+
+describe('avatarColor', () => {
+  it('returns a color from the palette', () => {
+    expect(AVATAR_COLORS).toContain(avatarColor('Alice'))
+  })
+  it('is deterministic', () => {
+    expect(avatarColor('Bob')).toBe(avatarColor('Bob'))
+  })
+  it('varies across names', () => {
+    const colors = new Set(['Alice', 'Bob', 'Charlie', 'Dave'].map(avatarColor))
+    expect(colors.size).toBeGreaterThan(1)
+  })
+})
+
+describe('getInitials', () => {
+  it('returns first+last initials', () => {
+    expect(getInitials('John Doe')).toBe('JD')
+  })
+  it('handles single name', () => {
+    expect(getInitials('Alice')).toBe('A')
+  })
+  it('handles empty string', () => {
+    expect(getInitials('')).toBe('?')
+  })
+  it('handles multi-part names', () => {
+    expect(getInitials('Mary Jane Watson')).toBe('MW')
+  })
+})

package/src/utils/avatar-color.ts

@@ -0,0 +1,20 @@
+const AVATAR_COLORS = [
+  '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8'
+]
+
+export function avatarColor(name: string): string {
+  let hash = 0
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length]
+}
+
+export function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/)
+  if (parts.length === 0) return '?'
+  if (parts.length === 1) return parts[0][0]?.toUpperCase() ?? '?'
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+}
+
+export { AVATAR_COLORS }

package/src/web-jsx/jsx-dev-runtime.ts

@@ -0,0 +1,28 @@
+/**
+ * Development-mode custom JSX runtime for titan-design's web distribution.
+ * See jsx-runtime-web.ts for details on the $$css conversion approach.
+ */
+import { jsxDEV as reactJsxDEV, Fragment } from 'react/jsx-dev-runtime'
+import type { StyleProp } from 'react-native'
+
+type JsxDevFn = typeof reactJsxDEV
+
+function wrapJsxDev(fn: JsxDevFn): JsxDevFn {
+  return function (type, props: Record<string, any>, ...rest) {
+    if (props && typeof props.className === 'string' && props.className) {
+      const cn = props.className
+      const cssStyle = { $$css: true, [cn]: cn } as unknown as StyleProp<any>
+      const existing = props.style
+      props = {
+        ...props,
+        style: existing ? [cssStyle, existing] : cssStyle,
+      }
+      delete props.className
+    }
+    return fn(type, props, ...rest)
+  } as JsxDevFn
+}
+
+const jsxDEV = wrapJsxDev(reactJsxDEV)
+
+export { jsxDEV, Fragment }