@titan-design/react-ui 0.12.1 → 0.13.0

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

@@ -6,7 +6,7 @@ import { Radio, RadioGroup } from './Radio'
 const meta: Meta<typeof RadioGroup> = {
   title: 'Components/Molecules/Radio',
   component: RadioGroup,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     size: {
       control: 'select',
@@ -60,12 +60,7 @@ export const Horizontal: Story = {
   render: function Render() {
     const [value, setValue] = useState<string | null>('monthly')
     return (
-      <RadioGroup
-        value={value}
-        onChange={setValue}
-        orientation="horizontal"
-        label="Billing Cycle"
-      >
+      <RadioGroup value={value} onChange={setValue} orientation="horizontal" label="Billing Cycle">
         <Radio value="monthly">Monthly</Radio>
         <Radio value="quarterly">Quarterly</Radio>
         <Radio value="yearly">Yearly</Radio>
@@ -79,7 +74,7 @@ export const AllSizes: Story = {
     const [small, setSmall] = useState<string | null>('a')
     const [medium, setMedium] = useState<string | null>('a')
     const [large, setLarge] = useState<string | null>('a')
-    
+
     return (
       <View className="gap-6">
         <View>
@@ -114,22 +109,46 @@ export const AllColors: Story = {
     const [secondary, setSecondary] = useState<string | null>('a')
     const [success, setSuccess] = useState<string | null>('a')
     const [error, setError] = useState<string | null>('a')
-    
+
     return (
       <View className="gap-6">
-        <RadioGroup value={primary} onChange={setPrimary} color="primary" orientation="horizontal" label="Primary">
+        <RadioGroup
+          value={primary}
+          onChange={setPrimary}
+          color="primary"
+          orientation="horizontal"
+          label="Primary"
+        >
           <Radio value="a">Option A</Radio>
           <Radio value="b">Option B</Radio>
         </RadioGroup>
-        <RadioGroup value={secondary} onChange={setSecondary} color="secondary" orientation="horizontal" label="Secondary">
+        <RadioGroup
+          value={secondary}
+          onChange={setSecondary}
+          color="secondary"
+          orientation="horizontal"
+          label="Secondary"
+        >
           <Radio value="a">Option A</Radio>
           <Radio value="b">Option B</Radio>
         </RadioGroup>
-        <RadioGroup value={success} onChange={setSuccess} color="success" orientation="horizontal" label="Success">
+        <RadioGroup
+          value={success}
+          onChange={setSuccess}
+          color="success"
+          orientation="horizontal"
+          label="Success"
+        >
           <Radio value="a">Option A</Radio>
           <Radio value="b">Option B</Radio>
         </RadioGroup>
-        <RadioGroup value={error} onChange={setError} color="error" orientation="horizontal" label="Error">
+        <RadioGroup
+          value={error}
+          onChange={setError}
+          color="error"
+          orientation="horizontal"
+          label="Error"
+        >
           <Radio value="a">Option A</Radio>
           <Radio value="b">Option B</Radio>
         </RadioGroup>
@@ -154,7 +173,9 @@ export const Disabled: Story = {
           <Text className="text-text-secondary text-sm mb-2">Individual option disabled</Text>
           <RadioGroup value={value} onChange={setValue}>
             <Radio value="option1">Option 1 (enabled)</Radio>
-            <Radio value="option2" isDisabled>Option 2 (disabled)</Radio>
+            <Radio value="option2" isDisabled>
+              Option 2 (disabled)
+            </Radio>
             <Radio value="option3">Option 3 (enabled)</Radio>
           </RadioGroup>
         </View>
@@ -167,27 +188,27 @@ export const FormExample: Story = {
   render: function Render() {
     const [plan, setPlan] = useState<string | null>('pro')
     const [billing, setBilling] = useState<string | null>('monthly')
-    
+
     return (
       <View className="gap-6 p-4 bg-surface-base rounded-lg max-w-md">
         <Text className="text-lg font-semibold text-text-primary">Subscription Settings</Text>
-        
+
         <RadioGroup value={plan} onChange={setPlan} label="Select Plan">
           <Radio value="free">Free - Basic features</Radio>
           <Radio value="pro">Pro - Advanced features</Radio>
           <Radio value="enterprise">Enterprise - Custom solutions</Radio>
         </RadioGroup>
-        
-        <RadioGroup 
-          value={billing} 
-          onChange={setBilling} 
+
+        <RadioGroup
+          value={billing}
+          onChange={setBilling}
           orientation="horizontal"
           label="Billing Frequency"
         >
           <Radio value="monthly">Monthly</Radio>
           <Radio value="yearly">Yearly (save 20%)</Radio>
         </RadioGroup>
-        
+
         <View className="pt-4 border-t border-hairline">
           <Text className="text-sm text-text-secondary">
             Selected: {plan} plan, billed {billing}

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

@@ -68,7 +68,9 @@ describe('Radio', () => {
     render(
       <RadioGroup value="a" onChange={onChange}>
         <Radio value="a">A</Radio>
-        <Radio value="b" isDisabled>B</Radio>
+        <Radio value="b" isDisabled>
+          B
+        </Radio>
       </RadioGroup>
     )
     const radios = screen.getAllByRole('radio')
@@ -134,7 +136,9 @@ describe('Radio', () => {
   it('allows Radio to override group size and color', () => {
     render(
       <RadioGroup value="a" onChange={() => {}} size="sm" color="primary">
-        <Radio value="a" size="lg" color="error">A</Radio>
+        <Radio value="a" size="lg" color="error">
+          A
+        </Radio>
       </RadioGroup>
     )
     expect(screen.getByRole('radio')).toBeInTheDocument()

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

@@ -78,11 +78,7 @@ export function RadioGroup({
         accessibilityLabel={label}
         {...props}
       >
-        {label && (
-          <Text className="text-sm font-medium text-text-primary mb-2">
-            {label}
-          </Text>
-        )}
+        {label && <Text className="text-sm font-medium text-text-primary mb-2">{label}</Text>}
         <View
           className={cn(
             orientation === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col',
@@ -117,9 +113,18 @@ const sizeConfig: Record<RadioSize, { outer: string; inner: string; text: string
 }
 
 const colorStyles: Record<RadioColor, { checked: string; unchecked: string }> = {
-  primary: { checked: 'border-brand-primary bg-brand-primary', unchecked: 'border-hairline-strong' },
-  secondary: { checked: 'border-brand-secondary bg-brand-secondary', unchecked: 'border-hairline-strong' },
-  success: { checked: 'border-status-success bg-status-success', unchecked: 'border-hairline-strong' },
+  primary: {
+    checked: 'border-brand-primary bg-brand-primary',
+    unchecked: 'border-hairline-strong',
+  },
+  secondary: {
+    checked: 'border-brand-secondary bg-brand-secondary',
+    unchecked: 'border-hairline-strong',
+  },
+  success: {
+    checked: 'border-status-success bg-status-success',
+    unchecked: 'border-hairline-strong',
+  },
   error: { checked: 'border-status-error bg-status-error', unchecked: 'border-hairline-strong' },
 }
 
@@ -144,7 +149,13 @@ export function Radio({
     throw new Error('Radio must be used within a RadioGroup')
   }
 
-  const { value: selectedValue, onChange, isDisabled: groupDisabled, size: groupSize, color: groupColor } = context
+  const {
+    value: selectedValue,
+    onChange,
+    isDisabled: groupDisabled,
+    size: groupSize,
+    color: groupColor,
+  } = context
 
   const isDisabled = radioDisabled ?? groupDisabled ?? false
   const size = radioSize ?? groupSize ?? 'md'
@@ -166,11 +177,7 @@ export function Radio({
       disabled={isDisabled}
       accessibilityRole="radio"
       accessibilityState={{ checked: isChecked, disabled: isDisabled }}
-      className={cn(
-        'flex-row items-center',
-        isDisabled && 'opacity-50',
-        className
-      )}
+      className={cn('flex-row items-center', isDisabled && 'opacity-50', className)}
       {...props}
     >
       {/* Radio circle */}
@@ -184,17 +191,11 @@ export function Radio({
         )}
       >
         {/* Inner dot */}
-        {isChecked && (
-          <View className={cn('rounded-full bg-white', inner)} />
-        )}
+        {isChecked && <View className={cn('rounded-full bg-white', inner)} />}
       </View>
 
       {/* Label */}
-      {children && (
-        <Text className={cn('ml-2 text-text-primary', text)}>
-          {children}
-        </Text>
-      )}
+      {children && <Text className={cn('ml-2 text-text-primary', text)}>{children}</Text>}
     </Pressable>
   )
 }

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

@@ -5,7 +5,7 @@ import { Section, SectionHeader, SectionContent } from './Section'
 const meta: Meta<typeof Section> = {
   title: 'Components/Atoms/Section',
   component: Section,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
 }
 
 export default meta
@@ -25,10 +25,7 @@ export const Default: Story = {
 export const WithSubtitle: Story = {
   render: () => (
     <Section>
-      <SectionHeader
-        title="Workout Stats"
-        subtitle="Last 7 days"
-      />
+      <SectionHeader title="Workout Stats" subtitle="Last 7 days" />
       <SectionContent>
         <Text style={{ color: '#a0a0a0' }}>Stats content</Text>
       </SectionContent>
@@ -41,9 +38,7 @@ export const WithTrailingAction: Story = {
     <Section>
       <SectionHeader
         title="Exercises"
-        trailing={
-          <Text style={{ color: '#6366f1', fontSize: 13 }}>View All</Text>
-        }
+        trailing={<Text style={{ color: '#6366f1', fontSize: 13 }}>View All</Text>}
       />
       <SectionContent>
         <Text style={{ color: '#a0a0a0' }}>Exercise list</Text>
@@ -58,9 +53,7 @@ export const FullExample: Story = {
       <SectionHeader
         title="Performance"
         subtitle="Average velocity by set"
-        trailing={
-          <Text style={{ color: '#6366f1', fontSize: 13 }}>Details</Text>
-        }
+        trailing={<Text style={{ color: '#6366f1', fontSize: 13 }}>Details</Text>}
       />
       <SectionContent className="rounded-lg bg-surface-elevated p-4">
         <Text style={{ color: '#a0a0a0' }}>Chart or data visualization</Text>
@@ -83,9 +76,7 @@ export const MultipleSections: Story = {
         <SectionHeader
           title="This Week"
           subtitle="12 sets completed"
-          trailing={
-            <Text style={{ color: '#6366f1', fontSize: 13 }}>See All</Text>
-          }
+          trailing={<Text style={{ color: '#6366f1', fontSize: 13 }}>See All</Text>}
         />
         <SectionContent className="rounded-lg bg-surface-elevated p-4">
           <Text style={{ color: '#a0a0a0' }}>Weekly summary</Text>

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

@@ -42,12 +42,7 @@ describe('SectionHeader', () => {
   })
 
   it('renders trailing action when provided', () => {
-    render(
-      <SectionHeader
-        title="Title"
-        trailing={<Text>View All</Text>}
-      />
-    )
+    render(<SectionHeader title="Title" trailing={<Text>View All</Text>} />)
     expect(screen.getByText('View All')).toBeInTheDocument()
   })
 

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

@@ -29,9 +29,7 @@ export function SectionHeader({ title, subtitle, trailing, className }: SectionH
         <Text className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
           {title}
         </Text>
-        {subtitle && (
-          <Text className="text-xs text-text-tertiary mt-0.5">{subtitle}</Text>
-        )}
+        {subtitle && <Text className="text-xs text-text-tertiary mt-0.5">{subtitle}</Text>}
       </View>
       {trailing && <View>{trailing}</View>}
     </View>

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

@@ -1,6 +1,2 @@
 export { Section, SectionHeader, SectionContent } from './Section'
-export type {
-  SectionProps,
-  SectionHeaderProps,
-  SectionContentProps,
-} from './Section'
+export type { SectionProps, SectionHeaderProps, SectionContentProps } from './Section'

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

@@ -101,12 +101,7 @@ export const Disabled: Story = {
       </View>
       <View style={{ gap: 4 }}>
         <Text className="text-sm text-text-secondary">Disabled with value</Text>
-        <Select
-          value="banana"
-          onChange={() => {}}
-          options={basicOptions}
-          isDisabled
-        />
+        <Select value="banana" onChange={() => {}} options={basicOptions} isDisabled />
       </View>
     </View>
   ),
@@ -235,16 +230,11 @@ export const Controlled: Story = {
               </Text>
             </View>
           ))}
-          <Text
-            className="text-sm text-status-error underline"
-            onPress={() => setValue(null)}
-          >
+          <Text className="text-sm text-status-error underline" onPress={() => setValue(null)}>
             Clear
           </Text>
         </View>
-        <Text className="text-sm text-text-secondary">
-          Current value: {value ?? 'null'}
-        </Text>
+        <Text className="text-sm text-text-secondary">Current value: {value ?? 'null'}</Text>
       </View>
     )
   },

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

@@ -94,14 +94,7 @@ describe('Select', () => {
 
     it('calls onChangeMulti when toggling options', () => {
       const onChangeMulti = vi.fn()
-      render(
-        <Select
-          options={defaultOptions}
-          isMulti
-          values={[]}
-          onChangeMulti={onChangeMulti}
-        />
-      )
+      render(<Select options={defaultOptions} isMulti values={[]} onChangeMulti={onChangeMulti} />)
 
       fireEvent.click(screen.getByRole('combobox'))
       fireEvent.click(screen.getByText('Option 1'))
@@ -163,9 +156,7 @@ describe('Select', () => {
 
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <Select options={defaultOptions} value="1" />
-      )
+      const { container } = render(<Select options={defaultOptions} value="1" />)
       const results = await axe(container, {
         rules: {
           'aria-input-field-name': { enabled: false },

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

@@ -1,6 +1,7 @@
 import React, { useState, createContext, useContext } from 'react'
 import { View, Text, Pressable, ScrollView, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Surface } from '../surface'
 
 export interface SelectOption<T = string> {
   value: T
@@ -91,9 +92,7 @@ export function Select<T extends string = string>({
 
   const selectValue = (val: T) => {
     if (isMulti) {
-      const newValues = values.includes(val)
-        ? values.filter((v) => v !== val)
-        : [...values, val]
+      const newValues = values.includes(val) ? values.filter((v) => v !== val) : [...values, val]
       onChangeMulti?.(newValues)
     } else {
       onChange?.(val)
@@ -152,12 +151,7 @@ export function Select<T extends string = string>({
             isDisabled && 'opacity-50 cursor-not-allowed'
           )}
         >
-          <Text
-            className={cn(
-              'flex-1',
-              hasValue ? 'text-text-primary' : 'text-text-tertiary'
-            )}
-          >
+          <Text className={cn('flex-1', hasValue ? 'text-text-primary' : 'text-text-tertiary')}>
             {getDisplayValue()}
           </Text>
           <View className="flex-row items-center gap-2">
@@ -184,11 +178,12 @@ export function Select<T extends string = string>({
               className="fixed inset-0 z-40"
               style={{ position: 'absolute' }}
             />
-            <View
+            <Surface
+              elevation={4}
+              rounded={false}
               className={cn(
                 'absolute z-50 top-full left-0 right-0 mt-1',
-                'bg-surface-elevated rounded-md shadow-lg border border-hairline',
-                'max-h-60 overflow-hidden'
+                'rounded-md max-h-60 overflow-hidden'
               )}
             >
               <ScrollView className="py-1">
@@ -196,7 +191,7 @@ export function Select<T extends string = string>({
                   <SelectOption key={option.value} option={option} />
                 ))}
               </ScrollView>
-            </View>
+            </Surface>
           </>
         )}
       </View>
@@ -235,7 +230,12 @@ function SelectOption<T>({ option }: SelectOptionComponentProps<T>) {
           {selected && <Text className="text-white text-xs text-center">✓</Text>}
         </View>
       )}
-      <Text className={cn('text-sm', selected && !isMulti ? 'text-brand-primary font-medium' : 'text-text-primary')}>
+      <Text
+        className={cn(
+          'text-sm',
+          selected && !isMulti ? 'text-brand-primary font-medium' : 'text-text-primary'
+        )}
+      >
         {option.label}
       </Text>
     </Pressable>

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

@@ -1,17 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
-import {
-  Skeleton,
-  SkeletonText,
-  SkeletonCircle,
-  SkeletonCard,
-  SkeletonListItem,
-} from './Skeleton'
+import { Skeleton, SkeletonText, SkeletonCircle, SkeletonCard, SkeletonListItem } from './Skeleton'
 
 const meta: Meta<typeof Skeleton> = {
   title: 'Components/Atoms/Skeleton',
   component: Skeleton,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     variant: {
       control: 'select',
@@ -64,9 +58,7 @@ export const RectVariant: Story = {
 }
 
 export const RoundedVariant: Story = {
-  render: () => (
-    <Skeleton variant="rounded" width={300} height={200} />
-  ),
+  render: () => <Skeleton variant="rounded" width={300} height={200} />,
 }
 
 export const TextBlock: Story = {

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

@@ -136,11 +136,7 @@ export interface SkeletonCircleProps {
 /**
  * Circle skeleton for avatars.
  */
-export function SkeletonCircle({
-  size = 40,
-  animation = 'pulse',
-  className,
-}: SkeletonCircleProps) {
+export function SkeletonCircle({ size = 40, animation = 'pulse', className }: SkeletonCircleProps) {
   return (
     <Skeleton
       variant="circle"
@@ -179,12 +175,7 @@ export function SkeletonCard({
   return (
     <View className={cn('rounded-lg overflow-hidden bg-surface-elevated', className)}>
       {hasImage && (
-        <Skeleton
-          variant="rect"
-          width="100%"
-          height={imageHeight}
-          animation={animation}
-        />
+        <Skeleton variant="rect" width="100%" height={imageHeight} animation={animation} />
       )}
       <View className="p-4 gap-3">
         <Skeleton variant="text" width="70%" animation={animation} />
@@ -218,9 +209,7 @@ export function SkeletonListItem({
 }: SkeletonListItemProps) {
   return (
     <View className={cn('flex-row items-center gap-3 p-3', className)}>
-      {hasAvatar && (
-        <SkeletonCircle size={avatarSize} animation={animation} />
-      )}
+      {hasAvatar && <SkeletonCircle size={avatarSize} animation={animation} />}
       <View className="flex-1">
         <SkeletonText lines={lines} animation={animation} />
       </View>

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

@@ -1,10 +1,4 @@
-export {
-  Skeleton,
-  SkeletonText,
-  SkeletonCircle,
-  SkeletonCard,
-  SkeletonListItem,
-} from './Skeleton'
+export { Skeleton, SkeletonText, SkeletonCircle, SkeletonCard, SkeletonListItem } from './Skeleton'
 export type {
   SkeletonProps,
   SkeletonTextProps,

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

@@ -5,7 +5,7 @@ import { Spinner } from './Spinner'
 const meta: Meta<typeof Spinner> = {
   title: 'Components/Atoms/Spinner',
   component: Spinner,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     size: {
       control: 'select',

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

@@ -64,10 +64,7 @@ export function Spinner({
       className={cn('items-center justify-center', containerSizes[size], className)}
       {...props}
     >
-      <ActivityIndicator
-        size={sizeMap[size]}
-        color={colorMap[color]}
-      />
+      <ActivityIndicator size={sizeMap[size]} color={colorMap[color]} />
     </View>
   )
 }

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

@@ -5,7 +5,7 @@ import { Stack, HStack, VStack } from './Stack'
 const meta: Meta<typeof Stack> = {
   title: 'Components/Atoms/Stack',
   component: Stack,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     gap: {
       control: 'select',

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

@@ -58,7 +58,7 @@ export function Stack({
         align && alignMap[align],
         justify && justifyMap[justify],
         wrap && 'flex-wrap',
-        className,
+        className
       )}
       {...props}
     >

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

@@ -7,21 +7,30 @@ import type { ElevationLevel } from '../../../theme/elevation'
 const meta: Meta<typeof Surface> = {
   title: 'Components/Atoms/Surface',
   component: Surface,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     elevation: {
       control: { type: 'range', min: -2, max: 5, step: 1 },
-      description: 'Elevation level (-2 to 5)',
+      description:
+        'Depth relative to the enclosing Surface: <0 recess, 0 flat, 1–3 lift a plane each, 4–5 float',
+    },
+    raise: {
+      control: { type: 'range', min: 1, max: 3, step: 1 },
+      description: 'Planes to step UP from the enclosing Surface, with the lift treatment',
     },
     level: {
       control: 'select',
       options: ['frame', 'background', 'base', 'elevated', 'raised', 'overlay'],
-      description: 'Named grey plane (flat background from a semantic token)',
+      description: 'Absolute grey plane for a shell root (flat, no lift)',
     },
     pressed: {
       control: 'boolean',
       description: 'Sunken well: one ramp step DOWN from the parent level + inner-shadow recess',
     },
+    lift: {
+      control: 'boolean',
+      description: 'Force the rim + shadow treatment on or off',
+    },
     theme: {
       control: 'select',
       options: ['light', 'dark'],
@@ -54,15 +63,18 @@ export const Default: Story = {
   ),
 }
 
+// Every level is a ramp plane. Negative levels recess, 0 sits flat on the page,
+// 1–3 climb one plane each with the lift treatment, 4–5 float on overlay with a
+// larger shadow. Rendered on a `base` page so the relative model has a host.
 export const ElevationLevels: Story = {
   render: () => (
-    <View style={{ gap: 16, padding: 24 }}>
+    <Surface level="base" style={{ gap: 16, padding: 24 }}>
       {([-2, -1, 0, 1, 2, 3, 4, 5] as ElevationLevel[]).map((level) => (
         <Surface key={level} elevation={level} style={{ padding: 16 }}>
           <Text style={{ color: '#fff' }}>Elevation {level}</Text>
         </Surface>
       ))}
-    </View>
+    </Surface>
   ),
 }