npm package: @1dance/swiftui
Description: A SwiftUI-inspired declarative UI framework for React Native
Latest version: 1.0.23
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @1dance/swiftui

A SwiftUI-inspired declarative UI framework for React Native. Build beautiful, type-safe mobile apps with a familiar, chainable API.

[![npm version](https://badge.fury.io/js/%401dance%2Fswiftui.svg)](https://www.npmjs.com/package/@1dance/swiftui)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
[![React Native](https://img.shields.io/badge/React%20Native-0.70+-green.svg)](https://reactnative.dev/)

## Table of Contents

- [Installation](#installation)
- [Quick Start](#quick-start)
- [Core Concepts](#core-concepts)
  - [DView Component](#dview-component)
  - [Modifier System](#modifier-system)
  - [Style Builder (style)](#style-builder-style)
  - [Swift Modifiers (swift)](#swift-modifiers-swift)
- [Layout Components](#layout-components)
  - [VStack](#vstack)
  - [HStack](#hstack)
  - [ZStack](#zstack)
  - [Spacer](#spacer)
  - [LazyVGrid / LazyHGrid](#lazyvgrid--lazyhgrid)
- [Views](#views)
  - [Text](#text)
  - [Image](#image)
  - [Button](#button)
  - [Toggle](#toggle)
  - [Divider](#divider)
  - [ScrollView](#scrollview)
- [Styling](#styling)
  - [Color System](#color-system)
  - [Font System](#font-system)
  - [Shapes](#shapes)
- [State Management](#state-management)
  - [useStateValue](#usestatevalue)
  - [Bindings](#bindings)
  - [Observable Objects](#observable-objects)
- [Environment](#environment)
- [Examples](#examples)
- [API Reference](#api-reference)
- [Migration Guide](#migration-guide)

---

## Installation

```bash
npm install @1dance/swiftui
# or
yarn add @1dance/swiftui
```

### Peer Dependencies

```bash
npm install react react-native
```

---

## Quick Start

```tsx
import React from 'react';
import {
  DView,
  VStack,
  Text,
  Button,
  Color,
  Font,
  modifier,
  style,
  swift,
  useStateValue,
  EnvironmentProvider,
} from '@1dance/swiftui';

export default function App() {
  const [count, countBinding] = useStateValue(0);

  return (
    <EnvironmentProvider>
      <DView modifiers={modifier().style(
        style()
          .flex(1)
          .padding(20)
          .background(Color.background.toString())
      )}>
        <VStack spacing={20}>
          {Text('Hello, SwiftUI!')
            .font(Font.largeTitle)
            .foregroundColor(Color.blue)
            .bold()
            .render()}

          {Text(`Count: ${count}`)
            .font(Font.title)
            .render()}

          <Button
            title="Increment"
            action={() => countBinding.set(count + 1)}
            style="borderedProminent"
          />
        </VStack>
      </DView>
    </EnvironmentProvider>
  );
}
```

---

## Core Concepts

### DView Component

`DView` is the foundational view component that replaces React Native's `View`. It uses modifiers instead of the style prop.

```tsx
import { DView, modifier, style } from '@1dance/swiftui';

// Basic usage
<DView modifiers={modifier().style(
  style()
    .flex(1)
    .padding(20)
    .background('#ffffff')
)}>
  {/* children */}
</DView>
```

### Modifier System

The modifier system provides a chainable API for applying styles, interactions, and accessibility properties.

```tsx
import { modifier, style, swift } from '@1dance/swiftui';

// Combining style and swift modifiers
<DView modifiers={modifier()
  .style(style()           // ViewStyle properties
    .flex(1)
    .padding(20)
    .background('#fff')
    .cornerRadius(12)
  )
  .swift(swift()           // SwiftUI-like modifiers
    .onTapGesture(() => console.log('Tapped!'))
    .accessibilityLabel('My View')
  )
}>
```

### Style Builder (style)

The `style()` builder handles all React Native ViewStyle properties with a chainable API.

```tsx
import { style } from '@1dance/swiftui';

const myStyle = style()
  // Flexbox
  .flex(1)
  .flexDirection('row')
  .justifyContent('space-between')
  .alignItems('center')
  
  // Sizing
  .width(200)
  .height(100)
  .minWidth(100)
  .maxWidth('100%')
  .aspectRatio(16/9)
  
  // Spacing
  .padding(20)
  .paddingHorizontal(16)
  .paddingVertical(12)
  .margin(10)
  .gap(8)
  
  // Position
  .position('absolute')
  .top(0)
  .right(0)
  .bottom(0)
  .left(0)
  .zIndex(10)
  
  // Background & Border
  .background('#007AFF')
  .cornerRadius(12)
  .border('#ccc', 1)
  .borderWidth(2)
  .borderColor('#333')
  
  // Shadow
  .shadow({ radius: 8, x: 0, y: 4, opacity: 0.2 })
  .elevation(4)
  
  // Visibility
  .opacity(0.9)
  .overflow('hidden')
  .display('flex');
```

#### Style Methods Reference

| Category | Methods |
|----------|---------|
| **Flexbox** | `flex()`, `flexGrow()`, `flexShrink()`, `flexBasis()`, `flexDirection()`, `flexWrap()`, `justifyContent()`, `alignItems()`, `alignSelf()`, `alignContent()` |
| **Sizing** | `width()`, `height()`, `size()`, `minWidth()`, `maxWidth()`, `minHeight()`, `maxHeight()`, `aspectRatio()` |
| **Spacing** | `padding()`, `paddingTop()`, `paddingRight()`, `paddingBottom()`, `paddingLeft()`, `paddingHorizontal()`, `paddingVertical()`, `margin()`, `marginTop()`, `marginRight()`, `marginBottom()`, `marginLeft()`, `marginHorizontal()`, `marginVertical()`, `gap()`, `rowGap()`, `columnGap()` |
| **Position** | `position()`, `absolute()`, `relative()`, `top()`, `right()`, `bottom()`, `left()`, `inset()`, `zIndex()` |
| **Background** | `background()`, `backgroundColor()` |
| **Border** | `border()`, `borderWidth()`, `borderColor()`, `borderStyle()`, `borderTopWidth()`, `borderRightWidth()`, `borderBottomWidth()`, `borderLeftWidth()`, `borderTopColor()`, `borderRightColor()`, `borderBottomColor()`, `borderLeftColor()` |
| **Border Radius** | `cornerRadius()`, `borderRadius()`, `borderTopLeftRadius()`, `borderTopRightRadius()`, `borderBottomLeftRadius()`, `borderBottomRightRadius()`, `rounded()`, `circular()` |
| **Shadow** | `shadow()`, `shadowColor()`, `shadowOffset()`, `shadowOpacity()`, `shadowRadius()`, `elevation()` |
| **Visibility** | `opacity()`, `hidden()`, `visible()`, `display()`, `overflow()`, `overflowHidden()` |
| **Transform** | `rotate()`, `scale()`, `scaleX()`, `scaleY()`, `translateX()`, `translateY()`, `translate()` |

#### Preset Styles

```tsx
import { Styles } from '@1dance/swiftui';

// Available presets
<DView modifiers={modifier().style(Styles.fullWidth)} />
<DView modifiers={modifier().style(Styles.fullHeight)} />
<DView modifiers={modifier().style(Styles.fullScreen)} />
<DView modifiers={modifier().style(Styles.centered)} />
<DView modifiers={modifier().style(Styles.row)} />
<DView modifiers={modifier().style(Styles.rowBetween)} />
<DView modifiers={modifier().style(Styles.rowCenter)} />
<DView modifiers={modifier().style(Styles.column)} />
<DView modifiers={modifier().style(Styles.columnCenter)} />
<DView modifiers={modifier().style(Styles.absoluteFill)} />
<DView modifiers={modifier().style(Styles.card)} />
<DView modifiers={modifier().style(Styles.circle)} />
<DView modifiers={modifier().style(Styles.rounded)} />
<DView modifiers={modifier().style(Styles.roundedLarge)} />
```

### Swift Modifiers (swift)

The `swift()` builder handles SwiftUI-like modifiers: typography, transforms, gestures, and accessibility.

```tsx
import { swift, Font, Color } from '@1dance/swiftui';

const mySwiftModifiers = swift()
  // Typography
  .font(Font.title)
  .fontWeight('bold')
  .fontSize(24)
  .bold()
  .italic()
  .foregroundColor(Color.blue)
  
  // Text decoration
  .underline()
  .strikethrough()
  .kerning(2)
  .lineSpacing(4)
  .lineLimit(2)
  .multilineTextAlignment('center')
  
  // Transforms
  .rotation(45)
  .scale(1.2)
  .offset(10, 20)
  
  // Clipping
  .clipCircle()
  .clipRoundedRect(12)
  .clipCapsule()
  
  // Gestures
  .onTapGesture(() => console.log('Tapped'))
  .onLongPressGesture(() => console.log('Long pressed'), 500)
  .disabled(false)
  
  // Accessibility
  .accessibilityLabel('My Button')
  .accessibilityHint('Double tap to activate')
  .accessibilityRole('button')
  .accessibilitySelected(true)
  .accessibilityExpanded(false);
```

#### Swift Methods Reference

| Category | Methods |
|----------|---------|
| **Font** | `font()`, `fontWeight()`, `fontSize()`, `bold()`, `italic()`, `monospaced()` |
| **Color** | `foregroundColor()`, `foregroundStyle()`, `tint()` |
| **Decoration** | `underline()`, `strikethrough()`, `kerning()`, `tracking()`, `lineSpacing()`, `lineHeight()`, `lineLimit()`, `multilineTextAlignment()`, `textCase()` |
| **Transforms** | `rotationEffect()`, `rotation()`, `scaleEffect()`, `scale()`, `scaleX()`, `scaleY()`, `offset()`, `offsetX()`, `offsetY()` |
| **Clipping** | `clipShape()`, `clipCircle()`, `clipRoundedRect()`, `clipCapsule()` |
| **Gestures** | `onTapGesture()`, `onLongPressGesture()`, `disabled()`, `allowsHitTesting()` |
| **Accessibility** | `accessibilityLabel()`, `accessibilityHint()`, `accessibilityValue()`, `accessibilityElement()`, `accessibilityHidden()`, `accessibilityRole()`, `accessibilityAddTraits()`, `accessibilitySelected()`, `accessibilityDisabled()`, `accessibilityChecked()`, `accessibilityExpanded()`, `accessibilityBusy()` |

#### Preset Swift Modifiers

```tsx
import { SwiftModifiers } from '@1dance/swiftui';

// Typography presets
SwiftModifiers.title
SwiftModifiers.headline
SwiftModifiers.body
SwiftModifiers.caption

// Action presets
SwiftModifiers.primaryAction
SwiftModifiers.secondaryAction
SwiftModifiers.destructiveAction
SwiftModifiers.link
SwiftModifiers.disabled
```

---

## Layout Components

### VStack

Vertical stack layout.

```tsx
import { VStack, HorizontalAlignment } from '@1dance/swiftui';

<VStack 
  spacing={16} 
  alignment={HorizontalAlignment.Leading}
>
  {Text('First').render()}
  {Text('Second').render()}
  {Text('Third').render()}
</VStack>
```

**Props:**
- `spacing?: number` - Space between children
- `alignment?: HorizontalAlignment` - `.Leading`, `.Center`, `.Trailing`
- `modifiers?: ModifierBuilder` - Additional modifiers

### HStack

Horizontal stack layout.

```tsx
import { HStack, VerticalAlignment } from '@1dance/swiftui';

<HStack 
  spacing={12} 
  alignment={VerticalAlignment.Center}
>
  {Text('Left').render()}
  <Spacer />
  {Text('Right').render()}
</HStack>
```

**Props:**
- `spacing?: number` - Space between children
- `alignment?: VerticalAlignment` - `.Top`, `.Center`, `.Bottom`
- `modifiers?: ModifierBuilder` - Additional modifiers

### ZStack

Overlapping stack layout.

```tsx
import { ZStack, Alignments } from '@1dance/swiftui';

<ZStack alignment={Alignments.center}>
  {Image('background.jpg').render()}
  {Text('Overlay Text').render()}
</ZStack>
```

**Props:**
- `alignment?: Alignment` - Use `Alignments.topLeading`, `.center`, `.bottomTrailing`, etc.
- `modifiers?: ModifierBuilder` - Additional modifiers

### Spacer

Flexible space that expands to fill available space.

```tsx
import { Spacer } from '@1dance/swiftui';

<HStack>
  {Text('Left').render()}
  <Spacer />
  {Text('Right').render()}
</HStack>

// With minimum length
<Spacer minLength={20} />
```

### LazyVGrid / LazyHGrid

Grid layouts for efficient rendering.

```tsx
import { LazyVGrid, GridItems } from '@1dance/swiftui';

<LazyVGrid
  columns={GridItems.adaptive(100)} // Adaptive columns
  spacing={10}
>
  {items.map(item => (
    <GridItem key={item.id}>{item.content}</GridItem>
  ))}
</LazyVGrid>

// Fixed columns
<LazyVGrid columns={GridItems.fixed(3)} spacing={8}>
  {/* children */}
</LazyVGrid>
```

---

## Views

### Text

Declarative text with chainable modifiers.

```tsx
import { Text, Font, Color } from '@1dance/swiftui';

// Basic text
{Text('Hello World').render()}

// Styled text
{Text('Styled Text')
  .font(Font.title)
  .foregroundColor(Color.blue)
  .bold()
  .italic()
  .underline()
  .kerning(2)
  .lineLimit(2)
  .multilineTextAlignment('center')
  .render()}

// All available methods
Text('content')
  .font(Font)                    // Set font style
  .foregroundColor(Color)        // Set text color
  .bold()                        // Bold text
  .italic()                      // Italic text
  .underline(active?, color?)    // Underline decoration
  .strikethrough(active?, color?)// Strikethrough decoration
  .kerning(number)               // Letter spacing
  .lineSpacing(number)           // Line spacing
  .lineLimit(number | null)      // Max lines
  .multilineTextAlignment(align) // 'leading' | 'center' | 'trailing'
  .frame(options)                // Size constraints
  .padding(number)               // Padding
  .background(Color)             // Background color
  .render()                      // Returns ReactElement
```

### Image

Declarative image with modifiers.

```tsx
import { Image, SystemImage, ContentMode } from '@1dance/swiftui';

// Remote image
{Image('https://example.com/image.jpg')
  .resizable()
  .aspectRatio(16/9)
  .frame({ width: 200, height: 112 })
  .cornerRadius(8)
  .render()}

// System image (SF Symbols style)
{SystemImage('star.fill')
  .foregroundColor(Color.yellow)
  .frame({ width: 24, height: 24 })
  .render()}

// Content modes
{Image(source)
  .resizable()
  .scaledToFit()   // Contain
  .scaledToFill()  // Cover
  .render()}
```

### Button

Interactive button with multiple styles.

```tsx
import { Button } from '@1dance/swiftui';

// Button styles
<Button title="Default" action={() => {}} style="default" />
<Button title="Bordered" action={() => {}} style="bordered" />
<Button title="Prominent" action={() => {}} style="borderedProminent" />
<Button title="Borderless" action={() => {}} style="borderless" />
<Button title="Plain" action={() => {}} style="plain" />

// Disabled state
<Button title="Disabled" action={() => {}} disabled />

// Custom content
<Button action={() => {}}>
  <HStack spacing={8}>
    {SystemImage('plus').render()}
    {Text('Add Item').render()}
  </HStack>
</Button>
```

**Props:**
- `title?: string` - Button text
- `action: () => void` - Tap handler
- `style?: ButtonStyle` - `'default'` | `'bordered'` | `'borderedProminent'` | `'borderless'` | `'plain'`
- `disabled?: boolean` - Disabled state
- `children?: ReactNode` - Custom content

### Toggle

Switch control with label.

```tsx
import { Toggle, useStateValue } from '@1dance/swiftui';

function MyComponent() {
  const [isOn, binding] = useStateValue(false);
  
  return (
    <Toggle
      isOn={isOn}
      onToggle={(value) => binding.set(value)}
      label="Enable Feature"
    />
  );
}
```

### Divider

Visual separator line.

```tsx
import { Divider, Color } from '@1dance/swiftui';

<Divider />

// Custom color
<Divider color={Color.gray} />
```

### ScrollView

Scrollable container.

```tsx
import { DScrollView, Axis } from '@1dance/swiftui';

// Vertical scroll (default)
<DScrollView>
  {/* content */}
</DScrollView>

// Horizontal scroll
<DScrollView axes={Axis.Horizontal}>
  {/* content */}
</DScrollView>

// Hide scroll indicator
<DScrollView showsIndicators={false}>
  {/* content */}
</DScrollView>
```

---

## Styling

### Color System

Semantic colors that adapt to light/dark mode.

```tsx
import { Color } from '@1dance/swiftui';

// Semantic colors (adapt to color scheme)
Color.label              // Primary text
Color.secondaryLabel     // Secondary text
Color.tertiaryLabel      // Tertiary text
Color.background         // Primary background
Color.secondaryBackground// Secondary background
Color.separator          // Divider lines
Color.fill               // Fill color

// System colors
Color.blue
Color.green
Color.red
Color.orange
Color.yellow
Color.pink
Color.purple
Color.teal
Color.indigo
Color.gray
Color.white
Color.black
Color.clear

// Create custom colors
Color.hex('#FF5733')
Color.rgb(255, 87, 51)
Color.rgba(255, 87, 51, 0.8)

// Color with opacity
Color.blue.opacity(0.5)

// Resolve for color scheme
const colorScheme = useColorSchemeValue();
const resolvedColor = Color.blue.resolve(colorScheme);
```

### Font System

Type-safe font definitions.

```tsx
import { Font } from '@1dance/swiftui';

// Semantic fonts
Font.largeTitle   // 34pt, regular
Font.title        // 28pt, regular
Font.title2       // 22pt, regular
Font.title3       // 20pt, regular
Font.headline     // 17pt, semibold
Font.body         // 17pt, regular
Font.callout      // 16pt, regular
Font.subheadline  // 15pt, regular
Font.footnote     // 13pt, regular
Font.caption      // 12pt, regular
Font.caption2     // 11pt, regular

// Custom font
Font.system(20)                           // Size only
Font.system(20, 'bold')                   // Size + weight
Font.system(20, 'bold', 'monospaced')     // Size + weight + design

// Font weights
'ultraLight' | 'thin' | 'light' | 'regular' | 
'medium' | 'semibold' | 'bold' | 'heavy' | 'black'

// Font designs
'default' | 'serif' | 'rounded' | 'monospaced'
```

### Shapes

Shape primitives for clipping and backgrounds.

```tsx
import { 
  Rectangle, 
  RoundedRectangle, 
  Circle, 
  Ellipse, 
  Capsule,
  ShapeView,
  fill,
  stroke 
} from '@1dance/swiftui';

// Shape views
<ShapeView shape={new Circle()} fill={Color.blue} size={{ width: 100, height: 100 }} />
<ShapeView shape={new RoundedRectangle(12)} stroke={Color.gray} strokeWidth={2} />
<ShapeView shape={new Capsule()} fill={Color.green} />

// Clip to shape using swift()
<DView modifiers={modifier()
  .style(style().size(100))
  .swift(swift().clipCircle())
}>
  {Image(url).render()}
</DView>

// Clip to rounded rectangle
<DView modifiers={modifier()
  .swift(swift().clipRoundedRect(16))
}>
  {/* content */}
</DView>
```

---

## State Management

### useStateValue

React hook for state with binding support.

```tsx
import { useStateValue } from '@1dance/swiftui';

function Counter() {
  const [count, countBinding] = useStateValue(0);
  
  return (
    <VStack>
      {Text(`Count: ${count}`).render()}
      <Button 
        title="Increment" 
        action={() => countBinding.set(count + 1)} 
      />
    </VStack>
  );
}

// With complex state
interface FormState {
  name: string;
  email: string;
}

function Form() {
  const [form, formBinding] = useStateValue<FormState>({
    name: '',
    email: '',
  });
  
  const updateName = (name: string) => {
    formBinding.set({ ...form, name });
  };
  
  return (/* ... */);
}
```

### Bindings

Two-way data binding for form controls.

```tsx
import { createBinding, useStateValue } from '@1dance/swiftui';

// From useStateValue
const [value, binding] = useStateValue('');
binding.get();           // Get current value
binding.set('new value');// Set new value

// Create custom binding
const customBinding = createBinding(
  () => someValue,           // Getter
  (newValue) => setSomeValue(newValue) // Setter
);

// Derived binding
const derivedBinding = createBinding(
  () => form.email,
  (email) => setForm({ ...form, email })
);
```

### Observable Objects

For complex state management.

```tsx
import { Observable, useObservedObject } from '@1dance/swiftui';

// Create observable class
class UserStore extends Observable {
  name = '';
  email = '';
  
  setName(name: string) {
    this.name = name;
    this.notifyListeners();
  }
  
  setEmail(email: string) {
    this.email = email;
    this.notifyListeners();
  }
}

// Use in component
const userStore = new UserStore();

function Profile() {
  useObservedObject(userStore);
  
  return (
    <VStack>
      {Text(userStore.name).render()}
      {Text(userStore.email).render()}
    </VStack>
  );
}
```

---

## Environment

Provide and consume environment values.

```tsx
import { 
  EnvironmentProvider, 
  useEnvironment, 
  useColorSchemeValue,
  useIsDarkMode,
  ColorScheme 
} from '@1dance/swiftui';

// Wrap app with provider
function App() {
  return (
    <EnvironmentProvider colorScheme={ColorScheme.Light}>
      <MyApp />
    </EnvironmentProvider>
  );
}

// Consume environment
function MyComponent() {
  const env = useEnvironment();
  const colorScheme = useColorSchemeValue();
  const isDark = useIsDarkMode();
  
  return (
    <DView modifiers={modifier().style(
      style().background(isDark ? '#000' : '#fff')
    )}>
      {/* content */}
    </DView>
  );
}
```

---

## Examples

### Profile Card

```tsx
import React from 'react';
import {
  DView,
  VStack,
  HStack,
  Text,
  Button,
  Color,
  Font,
  modifier,
  style,
  swift,
  useStateValue,
} from '@1dance/swiftui';
import { Image as RNImage } from 'react-native';

function ProfileCard() {
  const [isFollowing, followingBinding] = useStateValue(false);

  return (
    <DView modifiers={modifier()
      .style(style()
        .background('#F2F2F7')
        .cornerRadius(16)
        .padding(20)
        .alignItems('center')
        .shadow({ radius: 8, y: 4, opacity: 0.1 })
      )
      .swift(swift().accessibilityLabel('User profile card'))
    }>
      {/* Avatar */}
      <DView modifiers={modifier()
        .style(style().size(100).marginBottom(16))
        .swift(swift().clipCircle())
      }>
        <RNImage
          source={{ uri: 'https://i.pravatar.cc/150' }}
          style={{ width: '100%', height: '100%' }}
        />
      </DView>

      {/* Name */}
      {Text('Sarah Johnson')
        .font(Font.title2)
        .bold()
        .render()}

      {/* Handle */}
      {Text('@sarahj')
        .font(Font.subheadline)
        .foregroundColor(Color.secondaryLabel)
        .render()}

      {/* Stats */}
      <HStack spacing={32}>
        <VStack>
          {Text('1.2K').font(Font.headline).bold().render()}
          {Text('Posts').font(Font.caption).foregroundColor(Color.secondaryLabel).render()}
        </VStack>
        <VStack>
          {Text('45.8K').font(Font.headline).bold().render()}
          {Text('Followers').font(Font.caption).foregroundColor(Color.secondaryLabel).render()}
        </VStack>
      </HStack>

      {/* Follow Button */}
      <Button
        title={isFollowing ? 'Following' : 'Follow'}
        action={() => followingBinding.set(!isFollowing)}
        style={isFollowing ? 'bordered' : 'borderedProminent'}
      />
    </DView>
  );
}
```

### Todo List

```tsx
import React from 'react';
import {
  DView,
  VStack,
  HStack,
  Text,
  Toggle,
  Divider,
  Color,
  Font,
  modifier,
  style,
  useStateValue,
} from '@1dance/swiftui';
import { ScrollView } from 'react-native';

interface Todo {
  id: string;
  title: string;
  completed: boolean;
}

function TodoList() {
  const [todos, todosBinding] = useStateValue<Todo[]>([
    { id: '1', title: 'Learn SwiftUI', completed: true },
    { id: '2', title: 'Build an app', completed: false },
    { id: '3', title: 'Ship to production', completed: false },
  ]);

  const toggleTodo = (id: string) => {
    todosBinding.set(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <ScrollView style={{ flex: 1 }}>
      {/* Header */}
      <DView modifiers={modifier().style(
        style().background('#007AFF').padding(20)
      )}>
        {Text('My Tasks')
          .font(Font.largeTitle)
          .bold()
          .foregroundColor(Color.white)
          .render()}
      </DView>

      {/* Task List */}
      <DView modifiers={modifier().style(style().padding(16))}>
        {todos.map((todo, index) => (
          <DView key={todo.id}>
            <HStack spacing={12}>
              <Toggle
                isOn={todo.completed}
                onToggle={() => toggleTodo(todo.id)}
              />
              {Text(todo.title)
                .strikethrough(todo.completed)
                .foregroundColor(
                  todo.completed ? Color.secondaryLabel : Color.label
                )
                .render()}
            </HStack>
            {index < todos.length - 1 && <Divider />}
          </DView>
        ))}
      </DView>
    </ScrollView>
  );
}
```

### Form with Validation

```tsx
import React from 'react';
import {
  DView,
  VStack,
  Text,
  Button,
  Color,
  Font,
  modifier,
  style,
  useStateValue,
} from '@1dance/swiftui';
import { TextInput, ScrollView } from 'react-native';

interface FormState {
  name: string;
  email: string;
}

interface FormErrors {
  name?: string;
  email?: string;
}

function SignUpForm() {
  const [form, formBinding] = useStateValue<FormState>({
    name: '',
    email: '',
  });
  const [errors, errorsBinding] = useStateValue<FormErrors>({});

  const validate = (): boolean => {
    const newErrors: FormErrors = {};
    
    if (!form.name.trim()) {
      newErrors.name = 'Name is required';
    }
    
    if (!form.email.trim()) {
      newErrors.email = 'Email is required';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
      newErrors.email = 'Invalid email format';
    }
    
    errorsBinding.set(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = () => {
    if (validate()) {
      console.log('Form submitted:', form);
    }
  };

  return (
    <ScrollView style={{ flex: 1 }}>
      <DView modifiers={modifier().style(style().padding(20).gap(20))}>
        {Text('Sign Up').font(Font.title).bold().render()}

        {/* Name Field */}
        <DView modifiers={modifier().style(style().gap(8))}>
          {Text('Name').font(Font.headline).render()}
          <TextInput
            value={form.name}
            onChangeText={(name) => formBinding.set({ ...form, name })}
            placeholder="Enter your name"
            style={{
              padding: 16,
              backgroundColor: '#F5F5F5',
              borderRadius: 10,
              fontSize: 16,
              borderWidth: errors.name ? 1 : 0,
              borderColor: '#FF3B30',
            }}
          />
          {errors.name && (
            Text(errors.name).font(Font.caption).foregroundColor(Color.red).render()
          )}
        </DView>

        {/* Email Field */}
        <DView modifiers={modifier().style(style().gap(8))}>
          {Text('Email').font(Font.headline).render()}
          <TextInput
            value={form.email}
            onChangeText={(email) => formBinding.set({ ...form, email })}
            placeholder="Enter your email"
            keyboardType="email-address"
            autoCapitalize="none"
            style={{
              padding: 16,
              backgroundColor: '#F5F5F5',
              borderRadius: 10,
              fontSize: 16,
              borderWidth: errors.email ? 1 : 0,
              borderColor: '#FF3B30',
            }}
          />
          {errors.email && (
            Text(errors.email).font(Font.caption).foregroundColor(Color.red).render()
          )}
        </DView>

        <Button
          title="Create Account"
          action={handleSubmit}
          style="borderedProminent"
        />
      </DView>
    </ScrollView>
  );
}
```

---

## API Reference

### Components

| Component | Description |
|-----------|-------------|
| `DView` | Base view with modifier support |
| `VStack` | Vertical stack layout |
| `HStack` | Horizontal stack layout |
| `ZStack` | Overlapping stack layout |
| `Spacer` | Flexible space |
| `Divider` | Visual separator |
| `Button` | Interactive button |
| `Toggle` | Switch control |
| `DScrollView` | Scrollable container |
| `LazyVGrid` | Vertical grid |
| `LazyHGrid` | Horizontal grid |
| `List` | Scrollable list |
| `GeometryReader` | Size/position reader |
| `Group` | Grouping container |

### Declarative Views

| View | Description |
|------|-------------|
| `Text(string)` | Text with chainable modifiers |
| `Image(source)` | Image with chainable modifiers |
| `SystemImage(name)` | Icon image |
| `ColorView(color)` | Solid color view |
| `ShapeView` | Shape rendering |

### Builders

| Builder | Description |
|---------|-------------|
| `modifier()` | Creates ModifierBuilder |
| `style()` | Creates DStyleBuilder for ViewStyle |
| `swift()` | Creates DSwiftBuilder for SwiftUI modifiers |

### Hooks

| Hook | Description |
|------|-------------|
| `useStateValue(initial)` | State with binding |
| `useObservedObject(obj)` | Observable subscription |
| `useEnvironment()` | Environment access |
| `useColorSchemeValue()` | Current color scheme |
| `useIsDarkMode()` | Dark mode check |
| `useWindowSize()` | Window dimensions |

---

## Migration Guide

### From React Native View

```tsx
// Before (React Native)
<View style={{ 
  flex: 1, 
  padding: 20, 
  backgroundColor: '#fff',
  borderRadius: 10,
}}>
  <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Hello</Text>
</View>

// After (@1dance/swiftui)
<DView modifiers={modifier().style(
  style()
    .flex(1)
    .padding(20)
    .background('#fff')
    .cornerRadius(10)
)}>
  {Text('Hello').font(Font.title).bold().render()}
</DView>
```

### From StyleSheet

```tsx
// Before (React Native StyleSheet)
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  card: {
    padding: 20,
    backgroundColor: '#f0f0f0',
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
});

// After (@1dance/swiftui)
const containerStyle = style()
  .flex(1)
  .justifyContent('center')
  .alignItems('center');

const cardStyle = style()
  .padding(20)
  .background('#f0f0f0')
  .cornerRadius(12)
  .shadow({ radius: 4, y: 2, opacity: 0.1 });
```

---

## License

MIT © 1Dance

---

## Contributing

Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.

## Support

- 📖 [Documentation](https://1dance.github.io/swiftui)
- 💬 [Discord Community](https://discord.gg/1dance)
- 🐛 [Issue Tracker](https://github.com/1dance/swiftui/issues)