@titan-design/react-ui 0.6.0 → 0.8.0

package/src/components/ui/chip/Chip.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Chip } from './Chip'
 
 const meta: Meta<typeof Chip> = {
-  title: 'Components/Chip',
+  title: 'Components/Atoms/Chip',
   component: Chip,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/collapse/Collapse.stories.tsx

@@ -12,7 +12,7 @@ import {
 } from './Collapse'
 
 const meta: Meta<typeof Accordion> = {
-  title: 'Components/Accordion',
+  title: 'Components/Organisms/Accordion',
   component: Accordion,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/data-row/DataRow.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { DataRow } from './DataRow'
 
 const meta: Meta<typeof DataRow> = {
-  title: 'Components/DataRow',
+  title: 'Components/Molecules/DataRow',
   component: DataRow,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/divider/Divider.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Divider } from './Divider'
 
 const meta: Meta<typeof Divider> = {
-  title: 'Components/Divider',
+  title: 'Components/Atoms/Divider',
   component: Divider,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/drawer/Drawer.stories.tsx

@@ -5,7 +5,7 @@ import { Drawer, DrawerBody, DrawerFooter } from './Drawer'
 import { Button, ButtonText } from '../button'
 
 const meta: Meta<typeof Drawer> = {
-  title: 'Components/Drawer',
+  title: 'Components/Organisms/Drawer',
   component: Drawer,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/form-field/FormField.stories.tsx

@@ -5,7 +5,7 @@ import { Button, ButtonText } from '../button'
 import { Input } from '../input'
 
 const meta: Meta<typeof FormField> = {
-  title: 'Components/FormField',
+  title: 'Components/Molecules/FormField',
   component: FormField,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/help-tip/HelpTip.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { HelpTip, LabelWithHelp } from './HelpTip'
 
 const meta: Meta<typeof HelpTip> = {
-  title: 'Components/HelpTip',
+  title: 'Components/Molecules/HelpTip',
   component: HelpTip,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/icon-box/IconBox.stories.tsx

@@ -53,7 +53,7 @@ function BoltIcon({ size = 20, className }: { size?: number; className?: string
 }
 
 const meta: Meta<typeof IconBox> = {
-  title: 'Components/IconBox',
+  title: 'Components/Atoms/IconBox',
   component: IconBox,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/index.ts

@@ -36,3 +36,4 @@ export * from './surface'
 export * from './list-item'
 export * from './indicator'
 export * from './pill'
+export * from './tile'

package/src/components/ui/indicator/Indicator.stories.tsx

@@ -3,14 +3,14 @@ import { View } from 'react-native'
 import { Indicator } from './Indicator'
 
 const meta: Meta<typeof Indicator> = {
-  title: 'Components/Indicator',
+  title: 'Components/Atoms/Indicator',
   component: Indicator,
   tags: ['autodocs'],
   argTypes: {
     size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
     color: {
       control: 'select',
-      options: ['default', 'primary', 'success', 'error', 'warning', 'info'],
+      options: ['default', 'primary', 'success', 'live', 'error', 'warning', 'info'],
     },
     glow: { control: 'boolean' },
     ring: { control: 'boolean' },

package/src/components/ui/indicator/Indicator.test.tsx

@@ -22,6 +22,7 @@ describe('Indicator', () => {
       'default',
       'primary',
       'success',
+      'live',
       'error',
       'warning',
       'info',

package/src/components/ui/indicator/Indicator.tsx

@@ -6,6 +6,7 @@ export type IndicatorColor =
   | 'default'
   | 'primary'
   | 'success'
+  | 'live'
   | 'error'
   | 'warning'
   | 'info'
@@ -42,6 +43,7 @@ const colorStyles: Record<IndicatorColor, string> = {
   default: 'bg-text-tertiary',
   primary: 'bg-brand-primary',
   success: 'bg-status-success',
+  live: 'bg-status-live',
   error: 'bg-status-error',
   warning: 'bg-status-warning',
   info: 'bg-status-info',
@@ -98,7 +100,10 @@ export function Indicator({
         colorClass,
         pulseMode === 'opacity' && 'animate-pulse',
         ring && 'border-2 border-background-base',
-        glow && !customColor && color === 'success' && 'shadow-[0_0_6px_rgba(46,213,115,0.6)]',
+        glow &&
+          !customColor &&
+          (color === 'success' || color === 'live') &&
+          'shadow-[0_0_6px_rgba(46,213,115,0.6)]',
         glow && !customColor && color === 'error' && 'shadow-[0_0_6px_rgba(239,68,68,0.6)]',
         glow && !customColor && color === 'warning' && 'shadow-[0_0_6px_rgba(245,158,11,0.6)]',
         glow && !customColor && color === 'primary' && 'shadow-[0_0_6px_rgba(255,121,0,0.6)]',

package/src/components/ui/input/Input.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Input, InputGroup, PasswordInput } from './Input'
 
 const meta: Meta<typeof Input> = {
-  title: 'Components/Input',
+  title: 'Components/Molecules/Input',
   component: Input,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/link/Link.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Link } from './Link'
 
 const meta: Meta<typeof Link> = {
-  title: 'Components/Link',
+  title: 'Components/Atoms/Link',
   component: Link,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/list-item/ListItem.stories.tsx

@@ -45,7 +45,7 @@ function ChevronRight({ size = 16 }: { size?: number }) {
 }
 
 const meta: Meta<typeof ListItem> = {
-  title: 'Components/ListItem',
+  title: 'Components/Molecules/ListItem',
   component: ListItem,
   tags: ['autodocs'],
 }

package/src/components/ui/menu/Menu.stories.tsx

@@ -4,7 +4,7 @@ import { Menu, MenuTrigger, MenuList, MenuItem, MenuDivider, MenuGroup } from '.
 import { Button, ButtonText } from '../button/Button'
 
 const meta: Meta<typeof Menu> = {
-  title: 'Components/Menu',
+  title: 'Components/Molecules/Menu',
   component: Menu,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/modal/Modal.stories.tsx

@@ -13,7 +13,7 @@ import {
 import { Button, ButtonText } from '../button/Button'
 
 const meta: Meta<typeof Modal> = {
-  title: 'Components/Modal',
+  title: 'Components/Organisms/Modal',
   component: Modal,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/pill/Pill.stories.tsx

@@ -4,7 +4,7 @@ import { Pill } from './Pill'
 import { Indicator } from '../indicator'
 
 const meta: Meta<typeof Pill> = {
-  title: 'Components/Pill',
+  title: 'Components/Atoms/Pill',
   component: Pill,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/popover/Popover.stories.tsx

@@ -4,7 +4,7 @@ import { Popover, PopoverTrigger, PopoverContent, PopoverCloseButton } from './P
 import { Button, ButtonText } from '../button/Button'
 
 const meta: Meta<typeof Popover> = {
-  title: 'Components/Popover',
+  title: 'Components/Molecules/Popover',
   component: Popover,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/progress/Progress.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Progress, CircularProgress, ProgressSteps } from './Progress'
 
 const meta: Meta<typeof Progress> = {
-  title: 'Components/Progress',
+  title: 'Components/Molecules/Progress',
   component: Progress,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/progress/Progress.tsx

@@ -7,7 +7,7 @@ export type ProgressColor = 'primary' | 'secondary' | 'success' | 'error' | 'war
 export type ProgressVariant = 'linear' | 'circular'
 
 /** Maps the color prop to a CSS variable reference for inline styles */
-const colorVarMap: Record<ProgressColor, string> = {
+export const colorVarMap: Record<ProgressColor, string> = {
   primary: 'var(--color-brand-primary)',
   secondary: 'var(--color-brand-secondary)',
   success: 'var(--color-status-success)',
@@ -101,13 +101,9 @@ export function Progress({
       {/* Label and Value Row */}
       {(label || showValue) && (
         <View className="flex-row justify-between items-center mb-1">
-          {label && (
-            <Text className="text-sm text-text-secondary">{label}</Text>
-          )}
+          {label && <Text className="text-sm text-text-secondary">{label}</Text>}
           {showValue && !isIndeterminate && (
-            <Text className="text-sm font-medium text-text-primary">
-              {formatValue(value, max)}
-            </Text>
+            <Text className="text-sm font-medium text-text-primary">{formatValue(value, max)}</Text>
           )}
         </View>
       )}
@@ -162,6 +158,19 @@ export interface CircularProgressProps extends ViewProps {
   showValue?: boolean
   /** Custom value format function */
   formatValue?: (value: number, max: number) => string
+  /**
+   * Custom center content (a numeral, a timer readout, an icon). When provided it
+   * replaces the {@link showValue} text — the ring becomes a generic container for
+   * any centered element. See {@link CircularTimer} for the batteries-included timer.
+   */
+  children?: React.ReactNode
+  /**
+   * Fill the parent container (responsive) instead of drawing a fixed `size` box.
+   * The SVG uses a `0 0 size size` viewBox scaled to the container, so `size` still
+   * sets the geometry proportions (radius, stroke) while the ring grows/shrinks with
+   * its parent — e.g. a wall column. Default false (fixed `size` px).
+   */
+  fill?: boolean
   /** Additional className */
   className?: string
 }
@@ -181,6 +190,8 @@ export function CircularProgress({
   color = 'primary',
   showValue = false,
   formatValue = (v, m) => `${Math.round((v / m) * 100)}%`,
+  children,
+  fill = false,
   className,
   ...props
 }: CircularProgressProps) {
@@ -189,11 +200,14 @@ export function CircularProgress({
   const circumference = 2 * Math.PI * radius
   const strokeDashoffset = circumference - (percentage / 100) * circumference
   const center = size / 2
+  // Fixed: a `size × size` px box. Fill: fill the parent, staying square, and let
+  // the `0 0 size size` viewBox scale the geometry to fit (a responsive ring).
+  const boxStyle = fill ? { width: '100%' as const, aspectRatio: 1 } : { width: size, height: size }
 
   return (
     <View
       className={cn('items-center justify-center', className)}
-      style={{ width: size, height: size }}
+      style={boxStyle}
       accessibilityRole="progressbar"
       accessibilityValue={{
         min: 0,
@@ -202,14 +216,11 @@ export function CircularProgress({
       }}
       {...props}
     >
-      {/* SVG implementation for web */}
-      <View
-        className={cn(isIndeterminate && 'animate-spin')}
-        style={{ width: size, height: size }}
-      >
+      {/* SVG implementation for web — width/height 100% so it scales with `boxStyle`. */}
+      <View className={cn(isIndeterminate && 'animate-spin')} style={boxStyle}>
         <svg
-          width={size}
-          height={size}
+          width="100%"
+          height="100%"
           viewBox={`0 0 ${size} ${size}`}
           style={{ position: 'absolute' }}
         >
@@ -239,14 +250,28 @@ export function CircularProgress({
         </svg>
       </View>
 
-      {/* Center value */}
-      {showValue && !isIndeterminate && (
-        <Text
-          className="text-xs font-semibold text-text-primary absolute"
-          style={{ fontSize: Math.max(size * 0.22, 10) }}
+      {/* Center: custom children take precedence over the showValue readout. */}
+      {children != null ? (
+        <View
+          style={{
+            position: 'absolute',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+          }}
         >
-          {formatValue(value, max)}
-        </Text>
+          {children}
+        </View>
+      ) : (
+        showValue &&
+        !isIndeterminate && (
+          <Text
+            className="text-xs font-semibold text-text-primary absolute"
+            style={{ fontSize: Math.max(size * 0.22, 10) }}
+          >
+            {formatValue(value, max)}
+          </Text>
+        )
       )}
     </View>
   )

package/src/components/ui/radio/Radio.stories.tsx

@@ -4,7 +4,7 @@ import { View, Text } from 'react-native'
 import { Radio, RadioGroup } from './Radio'
 
 const meta: Meta<typeof RadioGroup> = {
-  title: 'Components/Radio',
+  title: 'Components/Molecules/Radio',
   component: RadioGroup,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/section/Section.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Section, SectionHeader, SectionContent } from './Section'
 
 const meta: Meta<typeof Section> = {
-  title: 'Components/Section',
+  title: 'Components/Atoms/Section',
   component: Section,
   tags: ['autodocs'],
 }

package/src/components/ui/select/Select.stories.tsx

@@ -12,7 +12,7 @@ const basicOptions: SelectOption[] = [
 ]
 
 const meta: Meta<typeof Select> = {
-  title: 'Components/Select',
+  title: 'Components/Molecules/Select',
   component: Select,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/skeleton/Skeleton.stories.tsx

@@ -9,7 +9,7 @@ import {
 } from './Skeleton'
 
 const meta: Meta<typeof Skeleton> = {
-  title: 'Components/Skeleton',
+  title: 'Components/Atoms/Skeleton',
   component: Skeleton,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/spinner/Spinner.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Spinner } from './Spinner'
 
 const meta: Meta<typeof Spinner> = {
-  title: 'Components/Spinner',
+  title: 'Components/Atoms/Spinner',
   component: Spinner,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/stack/Stack.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Stack, HStack, VStack } from './Stack'
 
 const meta: Meta<typeof Stack> = {
-  title: 'Components/Stack',
+  title: 'Components/Atoms/Stack',
   component: Stack,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/surface/Surface.stories.tsx

@@ -4,7 +4,7 @@ import { Surface } from './Surface'
 import type { ElevationLevel } from '../../../theme/elevation'
 
 const meta: Meta<typeof Surface> = {
-  title: 'Components/Surface',
+  title: 'Components/Atoms/Surface',
   component: Surface,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/switch/Switch.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Switch } from './Switch'
 
 const meta: Meta<typeof Switch> = {
-  title: 'Components/Switch',
+  title: 'Components/Molecules/Switch',
   component: Switch,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/tabs/Tabs.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs'
 
 const meta: Meta<typeof Tabs> = {
-  title: 'Components/Tabs',
+  title: 'Components/Molecules/Tabs',
   component: Tabs,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/tile/Tile.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Tile } from './Tile'
+import { getSemanticColors } from '../../../theme'
+
+const ACCENT = getSemanticColors('dark')['status-warning']
+const SUCCESS = getSemanticColors('dark')['status-success']
+
+const meta: Meta<typeof Tile> = {
+  title: 'Components/Atoms/Tile',
+  component: Tile,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '**Atom.** A compact card preset; grouped by SessionMetrics / ScheduleTiles.',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: 'text', description: 'Uppercase micro-label' },
+    value: { control: 'text', description: 'Primary mono value' },
+    valueColor: { control: 'color', description: 'Tints the value' },
+    align: {
+      control: 'radio',
+      options: ['center', 'start'],
+      description: 'Content alignment',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Tile>
+
+export const Default: Story = {
+  args: {
+    label: 'Volume',
+    value: '76%',
+    align: 'center',
+  },
+}
+
+export const Row: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 4, width: 246 }}>
+      <Tile label="Volume" value="76%" />
+      <Tile label="Load" value="7.3k" />
+      <Tile label="Fatigue" value="MOD" valueColor={ACCENT} />
+    </View>
+  ),
+}
+
+export const ScheduleTiles: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 4, width: 246 }}>
+      <Tile label="Date" value="Jul 10" />
+      <Tile label="Time" value="6:30 PM" />
+      <Tile label="Until" value="5h" valueColor={ACCENT} />
+    </View>
+  ),
+}
+
+export const ValueColors: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 4, width: 246 }}>
+      <Tile label="Default" value="12" />
+      <Tile label="Success" value="OK" valueColor={SUCCESS} />
+      <Tile label="Warning" value="MOD" valueColor={ACCENT} />
+    </View>
+  ),
+}
+
+export const StartAligned: Story = {
+  args: {
+    label: 'Program',
+    value: 'Pull A',
+    align: 'start',
+  },
+}

package/src/components/ui/tile/Tile.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Tile } from './Tile'
+
+describe('Tile', () => {
+  it('renders label and value', () => {
+    render(<Tile label="Volume" value="76%" />)
+    expect(screen.getByText('Volume')).toBeInTheDocument()
+    expect(screen.getByText('76%')).toBeInTheDocument()
+  })
+
+  it('applies valueColor to the value text', () => {
+    render(<Tile label="Fatigue" value="MOD" valueColor="#F5A623" />)
+    const value = screen.getByText('MOD')
+    expect(value).toHaveStyle({ color: '#F5A623' })
+  })
+
+  it('does not set an inline color when valueColor is omitted', () => {
+    render(<Tile label="Volume" value="76%" />)
+    const value = screen.getByText('76%')
+    expect(value.style.color).toBe('')
+  })
+
+  it('renders with start alignment', () => {
+    render(<Tile label="Program" value="Pull A" align="start" />)
+    expect(screen.getByText('Program')).toBeInTheDocument()
+    expect(screen.getByText('Pull A')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Tile label="Load" value="7.3k" className="custom-class" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('passes additional props through', () => {
+    render(<Tile label="Load" value="7.3k" testID="tile-test" />)
+    expect(screen.getByText('7.3k')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Tile label="Volume" value="76%" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/tile/Tile.tsx

@@ -0,0 +1,64 @@
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface TileProps extends ViewProps {
+  /** Uppercase micro-label shown above the value */
+  label: string
+  /** Primary value, rendered in a bold mono face */
+  value: string
+  /** Tints the value (status/accent hex or CSS color); defaults to primary text */
+  valueColor?: string
+  /** Content alignment within the tile (default: 'center') */
+  align?: 'center' | 'start'
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Tile — a compact label-over-value stat card.
+ *
+ * A rounded raised box with an uppercase micro-label stacked over a bold mono
+ * value. Fills its flex slot so a row of Tiles reads as an even HStack.
+ *
+ * @example
+ * <Tile label="Volume" value="76%" />
+ * <Tile label="Fatigue" value="MOD" valueColor="#F5A623" />
+ */
+export function Tile({
+  label,
+  value,
+  valueColor,
+  align = 'center',
+  className,
+  ...props
+}: TileProps) {
+  const isCenter = align === 'center'
+  return (
+    <View
+      className={cn(
+        'flex-1 rounded-md bg-surface-raised px-1.5 py-2',
+        isCenter ? 'items-center' : 'items-start',
+        className
+      )}
+      {...props}
+    >
+      <Text
+        className={cn(
+          'text-[10px] font-bold uppercase tracking-wider text-text-tertiary',
+          isCenter ? 'text-center' : 'text-left'
+        )}
+      >
+        {label}
+      </Text>
+      <Text
+        className={cn(
+          'mt-0.5 font-mono text-sm font-bold text-text-primary',
+          isCenter ? 'text-center' : 'text-left'
+        )}
+        style={valueColor ? { color: valueColor } : undefined}
+      >
+        {value}
+      </Text>
+    </View>
+  )
+}

package/src/components/ui/tile/index.ts

@@ -0,0 +1,2 @@
+export { Tile } from './Tile'
+export type { TileProps } from './Tile'

package/src/components/ui/toast/Toast.stories.tsx

@@ -4,7 +4,7 @@ import { Toast, ToastProvider, useToast } from './Toast'
 import { Button, ButtonText } from '../button'
 
 const meta: Meta<typeof Toast> = {
-  title: 'Components/Toast',
+  title: 'Components/Molecules/Toast',
   component: Toast,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/toolbar-button/ToolbarButton.stories.tsx

@@ -4,7 +4,7 @@ import { View, Text } from 'react-native'
 import { ToolbarButton, ToolbarButtonGroup } from './ToolbarButton'
 
 const meta: Meta<typeof ToolbarButton> = {
-  title: 'Components/ToolbarButton',
+  title: 'Components/Molecules/ToolbarButton',
   component: ToolbarButton,
   tags: ['autodocs'],
   argTypes: {