{"_id":"@1dance/flex","name":"@1dance/flex","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@1dance/flex","version":"1.0.0","description":"A SwiftUI-inspired declarative UI framework for React Native","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./examples":{"types":"./dist/examples/index.d.ts","default":"./dist/examples/index.js"}},"scripts":{"build":"tsc","clean":"rm -rf dist"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.71.0"},"devDependencies":{"@types/react":"18.2.48","react":"18.2.0","react-native":"^0.73.11","typescript":"5.3.3"},"overrides":{"@types/react":"18.2.48"},"license":"MIT","_id":"@1dance/flex@1.0.0","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-A/pA+q9stMOFGtJPhtDif/P54pQT7p8fCO8dwZEC0Uh5k9Q6afnZOSmPlbbAJY+B6MYw2nfGyp6+0UYzuOuKwg==","shasum":"edc8e3a97b180f3d947d4d28e1e7e1c054df89fc","tarball":"https://registry.npmjs.org/@1dance/flex/-/flex-1.0.0.tgz","fileCount":108,"unpackedSize":521427,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID4HyhOf6Of2WOpq4VsjJUSM+d6GGvZ2ltGO40l2DkxZAiEAg0fOu/exhQVFOWJEQyAAl1vgiJ6GZU2FypTgh5m004Q="}]},"_npmUser":{"name":"1dance","email":"engineering@1-dance.tech"},"directories":{},"maintainers":[{"name":"1dance","email":"engineering@1-dance.tech"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/flex_1.0.0_1768499196218_0.7063878566290815"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-15T17:46:36.068Z","1.0.0":"2026-01-15T17:46:36.367Z","modified":"2026-01-15T17:46:36.635Z"},"maintainers":[{"name":"1dance","email":"engineering@1-dance.tech"}],"description":"A SwiftUI-inspired declarative UI framework for React Native","license":"MIT","readme":"# @1dance/flex\n\nA SwiftUI-inspired declarative UI framework for React Native. Build beautiful, type-safe mobile apps with a familiar, chainable API.\n\n[![npm version](https://badge.fury.io/js/%401dance%2Fflex.svg)](https://www.npmjs.com/package/@1dance/flex)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n[![React Native](https://img.shields.io/badge/React%20Native-0.70+-green.svg)](https://reactnative.dev/)\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [Core Concepts](#core-concepts)\n  - [DView Component](#dview-component)\n  - [Modifier System](#modifier-system)\n  - [Style Builder (style)](#style-builder-style)\n  - [Swift Modifiers (swift)](#swift-modifiers-swift)\n- [Layout Components](#layout-components)\n- [Views](#views)\n- [Styling](#styling)\n- [State Management](#state-management)\n- [Examples](#examples)\n- [API Reference](#api-reference)\n\n---\n\n## Installation\n\n```bash\nnpm install @1dance/flex\n# or\nyarn add @1dance/flex\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-native\n```\n\n---\n\n## Quick Start\n\n```tsx\nimport React from 'react';\nimport {\n  DView,\n  VStack,\n  Text,\n  Button,\n  Color,\n  Font,\n  modifier,\n  style,\n  useStateValue,\n  EnvironmentProvider,\n  HorizontalAlignment,\n} from '@1dance/flex';\n\nexport default function App() {\n  const [count, countBinding] = useStateValue(0);\n\n  return (\n    <EnvironmentProvider>\n      <DView modifiers={modifier().style(\n        style()\n          .flex(1)\n          .padding(20)\n          .background(Color.background.toString())\n      )}>\n        <VStack spacing={20} alignment={HorizontalAlignment.Center}>\n          {Text('Hello, Flex!')\n            .font(Font.largeTitle)\n            .foregroundColor(Color.blue)\n            .bold()\n            .render()}\n\n          {Text(`Count: ${count}`)\n            .font(Font.title)\n            .render()}\n\n          <Button\n            title=\"Increment\"\n            action={() => countBinding.set(count + 1)}\n            style=\"borderedProminent\"\n          />\n        </VStack>\n      </DView>\n    </EnvironmentProvider>\n  );\n}\n```\n\n---\n\n## Core Concepts\n\n### DView Component\n\n`DView` is the foundational view component that replaces React Native's `View`. It uses modifiers instead of the style prop.\n\n```tsx\nimport { DView, modifier, style } from '@1dance/flex';\n\n<DView modifiers={modifier().style(\n  style()\n    .flex(1)\n    .padding(20)\n    .background('#ffffff')\n)}>\n  {/* children */}\n</DView>\n```\n\n### Modifier System\n\nThe modifier system provides a chainable API combining `style()` for layout properties and `swift()` for interactions/accessibility.\n\n```tsx\nimport { modifier, style, swift } from '@1dance/flex';\n\n<DView modifiers={modifier()\n  .style(style()           // ViewStyle properties\n    .flex(1)\n    .padding(20)\n    .background('#fff')\n    .cornerRadius(12)\n  )\n  .swift(swift()           // SwiftUI-like modifiers\n    .onTapGesture(() => console.log('Tapped!'))\n    .accessibilityLabel('My View')\n  )\n}>\n```\n\n### Style Builder (style)\n\nThe `style()` builder handles all React Native ViewStyle properties:\n\n```tsx\nimport { style } from '@1dance/flex';\n\nconst myStyle = style()\n  // Flexbox\n  .flex(1)\n  .flexDirection('row')\n  .justifyContent('space-between')\n  .alignItems('center')\n  \n  // Sizing\n  .width(200)\n  .height(100)\n  .size(50)              // width & height\n  .aspectRatio(16/9)\n  \n  // Spacing\n  .padding(20)\n  .paddingHorizontal(16)\n  .margin(10)\n  .gap(8)\n  \n  // Position\n  .position('absolute')\n  .top(0).right(0).bottom(0).left(0)\n  .zIndex(10)\n  \n  // Background & Border\n  .background('#007AFF')\n  .cornerRadius(12)\n  .border('#ccc', 1)\n  \n  // Shadow\n  .shadow({ radius: 8, x: 0, y: 4, opacity: 0.2 })\n  \n  // Visibility\n  .opacity(0.9)\n  .overflow('hidden');\n```\n\n#### Preset Styles\n\n```tsx\nimport { Styles } from '@1dance/flex';\n\n<DView modifiers={modifier().style(Styles.card)} />\n<DView modifiers={modifier().style(Styles.centered)} />\n<DView modifiers={modifier().style(Styles.row)} />\n<DView modifiers={modifier().style(Styles.absoluteFill)} />\n```\n\n### Swift Modifiers (swift)\n\nThe `swift()` builder handles interactions, transforms, and accessibility:\n\n```tsx\nimport { swift, Font, Color } from '@1dance/flex';\n\nconst mySwiftModifiers = swift()\n  // Typography\n  .font(Font.title)\n  .bold()\n  .foregroundColor(Color.blue)\n  \n  // Transforms\n  .rotation(45)\n  .scale(1.2)\n  .offset(10, 20)\n  \n  // Clipping\n  .clipCircle()\n  .clipRoundedRect(12)\n  \n  // Gestures\n  .onTapGesture(() => console.log('Tapped'))\n  .onLongPressGesture(() => console.log('Long pressed'))\n  .disabled(false)\n  \n  // Accessibility\n  .accessibilityLabel('My Button')\n  .accessibilityRole('button');\n```\n\n---\n\n## Layout Components\n\n### VStack\n\nVertical stack layout. Default alignment is `Leading` (left-aligned).\n\n```tsx\nimport { VStack, HorizontalAlignment } from '@1dance/flex';\n\n// Left-aligned (default)\n<VStack spacing={16}>\n  {Text('First').render()}\n  {Text('Second').render()}\n</VStack>\n\n// Centered\n<VStack spacing={16} alignment={HorizontalAlignment.Center}>\n  {Text('Centered').render()}\n</VStack>\n```\n\n### HStack\n\nHorizontal stack layout.\n\n```tsx\nimport { HStack, Spacer } from '@1dance/flex';\n\n<HStack spacing={12}>\n  {Text('Left').render()}\n  <Spacer />\n  {Text('Right').render()}\n</HStack>\n```\n\n### ZStack\n\nOverlapping stack layout.\n\n```tsx\nimport { ZStack, Alignments } from '@1dance/flex';\n\n<ZStack alignment={Alignments.center}>\n  {Image('background.jpg').render()}\n  {Text('Overlay').render()}\n</ZStack>\n```\n\n### Spacer\n\nFlexible space that expands to fill available space.\n\n```tsx\n<HStack>\n  {Text('Left').render()}\n  <Spacer />\n  {Text('Right').render()}\n</HStack>\n```\n\n---\n\n## Views\n\n### Text\n\nDeclarative text with chainable modifiers.\n\n```tsx\nimport { Text, Font, Color } from '@1dance/flex';\n\n{Text('Hello World')\n  .font(Font.title)\n  .foregroundColor(Color.blue)\n  .bold()\n  .italic()\n  .underline()\n  .lineLimit(2)\n  .render()}\n```\n\n### Image\n\nDeclarative image with modifiers.\n\n```tsx\nimport { Image } from '@1dance/flex';\n\n{Image('https://example.com/image.jpg')\n  .resizable()\n  .aspectRatio(16/9)\n  .frame({ width: 200, height: 112 })\n  .cornerRadius(8)\n  .render()}\n```\n\n### Button\n\nInteractive button with multiple styles.\n\n```tsx\nimport { Button } from '@1dance/flex';\n\n<Button title=\"Default\" action={() => {}} style=\"default\" />\n<Button title=\"Bordered\" action={() => {}} style=\"bordered\" />\n<Button title=\"Prominent\" action={() => {}} style=\"borderedProminent\" />\n<Button title=\"Borderless\" action={() => {}} style=\"borderless\" />\n```\n\n### Toggle\n\nSwitch control.\n\n```tsx\nimport { Toggle, useStateValue } from '@1dance/flex';\n\nconst [isOn, binding] = useStateValue(false);\n\n<Toggle\n  isOn={isOn}\n  onToggle={(value) => binding.set(value)}\n  label=\"Enable Feature\"\n/>\n```\n\n### Divider\n\nVisual separator line.\n\n```tsx\nimport { Divider } from '@1dance/flex';\n\n<Divider />\n```\n\n---\n\n## Styling\n\n### Color System\n\nSemantic colors that adapt to light/dark mode.\n\n```tsx\nimport { Color } from '@1dance/flex';\n\n// Semantic colors\nColor.label              // Primary text\nColor.secondaryLabel     // Secondary text\nColor.background         // Primary background\nColor.separator          // Divider lines\n\n// System colors\nColor.blue\nColor.green\nColor.red\nColor.orange\n\n// Custom colors\nColor.hex('#FF5733')\nColor.rgb(255, 87, 51)\n\n// With opacity\nColor.blue.opacity(0.5)\n```\n\n### Font System\n\nType-safe font definitions.\n\n```tsx\nimport { Font } from '@1dance/flex';\n\nFont.largeTitle   // 34pt\nFont.title        // 28pt\nFont.title2       // 22pt\nFont.headline     // 17pt, semibold\nFont.body         // 17pt\nFont.caption      // 12pt\n\n// Custom font\nFont.system(20, 'bold')\n```\n\n---\n\n## State Management\n\n### useStateValue\n\nReact hook for state with binding support.\n\n```tsx\nimport { useStateValue } from '@1dance/flex';\n\nfunction Counter() {\n  const [count, countBinding] = useStateValue(0);\n  \n  return (\n    <VStack>\n      {Text(`Count: ${count}`).render()}\n      <Button \n        title=\"Increment\" \n        action={() => countBinding.set(count + 1)} \n      />\n    </VStack>\n  );\n}\n```\n\n---\n\n## Examples\n\n### Hello World\n\n```tsx\nimport React from 'react';\nimport {\n  DView,\n  Text,\n  VStack,\n  Color,\n  Font,\n  modifier,\n  style,\n  swift,\n  HorizontalAlignment,\n} from '@1dance/flex';\n\nexport function HelloWorldExample() {\n  return (\n    <DView modifiers={modifier().style(\n      style()\n        .flex(1)\n        .padding(20)\n    )}>\n      <VStack spacing={16} alignment={HorizontalAlignment.Center}>\n        {Text('Hello, Flex!')\n          .font(Font.largeTitle)\n          .foregroundColor(Color.blue)\n          .bold()\n          .render()}\n        \n        {Text('Build beautiful React Native apps')\n          .font(Font.title2)\n          .foregroundColor(Color.secondaryLabel)\n          .render()}\n        \n        {Text('with a SwiftUI-inspired API')\n          .font(Font.body)\n          .italic()\n          .foregroundColor(Color.gray)\n          .render()}\n        \n        <DView modifiers={modifier()\n          .style(style().padding(16).background(Color.blue.toString()).cornerRadius(10))\n          .swift(swift()\n            .onTapGesture(() => console.log('Button tapped!'))\n            .accessibilityLabel('Welcome button')\n            .accessibilityRole('button')\n          )\n        }>\n          {Text('Get Started')\n            .font(Font.headline)\n            .foregroundColor(Color.white)\n            .render()}\n        </DView>\n      </VStack>\n    </DView>\n  );\n}\n```\n\n### Counter\n\n```tsx\nimport React from 'react';\nimport {\n  DView,\n  Text,\n  Button,\n  VStack,\n  HStack,\n  Color,\n  Font,\n  modifier,\n  style,\n  useStateValue,\n  HorizontalAlignment,\n} from '@1dance/flex';\n\nexport function CounterExample() {\n  const [count, countBinding] = useStateValue(0);\n\n  return (\n    <DView modifiers={modifier().style(\n      style()\n        .flex(1)\n        .padding(20)\n    )}>\n      <VStack spacing={24} alignment={HorizontalAlignment.Center}>\n        {Text('Counter').font(Font.title).bold().render()}\n        \n        {Text(`${count}`)\n          .font(Font.system(64))\n          .foregroundColor(count >= 0 ? Color.blue : Color.red)\n          .render()}\n\n        <HStack spacing={16}>\n          <Button title=\"  −  \" action={() => countBinding.set(count - 1)} style=\"bordered\" />\n          <Button title=\"Reset\" action={() => countBinding.set(0)} style=\"borderless\" />\n          <Button title=\"  +  \" action={() => countBinding.set(count + 1)} style=\"bordered\" />\n        </HStack>\n\n        <Button title=\"Add 10\" action={() => countBinding.set(count + 10)} style=\"borderedProminent\" />\n      </VStack>\n    </DView>\n  );\n}\n```\n\n### Profile Card\n\n```tsx\nimport React from 'react';\nimport { ScrollView, Image as RNImage } from 'react-native';\nimport {\n  DView,\n  Text,\n  Button,\n  VStack,\n  HStack,\n  Color,\n  Font,\n  modifier,\n  style,\n  swift,\n  useStateValue,\n  HorizontalAlignment,\n} from '@1dance/flex';\n\nexport function ProfileCardExample() {\n  const [isFollowing, followingBinding] = useStateValue(false);\n\n  return (\n    <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 20 }}>\n      <DView modifiers={modifier()\n        .style(\n          style()\n            .background('#F2F2F7')\n            .cornerRadius(16)\n            .padding(20)\n            .alignItems('center')\n            .shadow({ radius: 8, y: 4, opacity: 0.1 })\n        )\n        .swift(swift().accessibilityLabel('Profile card for Sarah Johnson'))\n      }>\n        {/* Avatar */}\n        <DView modifiers={modifier()\n          .style(style().size(100).marginBottom(16))\n          .swift(swift().clipCircle())\n        }>\n          <RNImage\n            source={{ uri: 'https://i.pravatar.cc/150' }}\n            style={{ width: '100%', height: '100%' }}\n          />\n        </DView>\n\n        <VStack spacing={4} alignment={HorizontalAlignment.Center}>\n          {Text('Sarah Johnson').font(Font.title2).bold().render()}\n          {Text('@sarahj')\n            .font(Font.subheadline)\n            .foregroundColor(Color.secondaryLabel)\n            .render()}\n        </VStack>\n\n        {/* Stats */}\n        <DView modifiers={modifier().style(style().marginVertical(16))}>\n          <HStack spacing={32}>\n            <VStack alignment={HorizontalAlignment.Center}>\n              {Text('1.2K').font(Font.headline).bold().render()}\n              {Text('Posts').font(Font.caption).foregroundColor(Color.secondaryLabel).render()}\n            </VStack>\n            <VStack alignment={HorizontalAlignment.Center}>\n              {Text('45.8K').font(Font.headline).bold().render()}\n              {Text('Followers').font(Font.caption).foregroundColor(Color.secondaryLabel).render()}\n            </VStack>\n          </HStack>\n        </DView>\n\n        <Button\n          title={isFollowing ? 'Following' : 'Follow'}\n          action={() => followingBinding.set(!isFollowing)}\n          style={isFollowing ? 'bordered' : 'borderedProminent'}\n        />\n      </DView>\n    </ScrollView>\n  );\n}\n```\n\n### Form with Validation\n\n```tsx\nimport React from 'react';\nimport { ScrollView, TextInput, Switch, Text as RNText } from 'react-native';\nimport {\n  DView,\n  Text,\n  Button,\n  HStack,\n  Color,\n  Font,\n  modifier,\n  style,\n  useStateValue,\n} from '@1dance/flex';\n\nexport function FormExample() {\n  const [form, formBinding] = useStateValue({\n    name: '',\n    email: '',\n    agreedToTerms: false,\n  });\n  const [errors, errorsBinding] = useStateValue<Record<string, string>>({});\n\n  const validate = () => {\n    const newErrors: Record<string, string> = {};\n    if (!form.name.trim()) newErrors.name = 'Name is required';\n    if (!form.email.trim()) newErrors.email = 'Email is required';\n    if (!form.agreedToTerms) newErrors.terms = 'You must agree';\n    errorsBinding.set(newErrors);\n    return Object.keys(newErrors).length === 0;\n  };\n\n  const handleSubmit = () => {\n    if (validate()) {\n      console.log('Form submitted:', form);\n    }\n  };\n\n  return (\n    <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 20 }}>\n      {Text('Sign Up').font(Font.title).bold().render()}\n\n      <DView modifiers={modifier().style(style().marginTop(24).gap(20))}>\n        {/* Name Field */}\n        <DView modifiers={modifier().style(style().gap(8))}>\n          {Text('Name').font(Font.headline).render()}\n          <TextInput\n            value={form.name}\n            onChangeText={(name) => formBinding.set({ ...form, name })}\n            placeholder=\"Enter your name\"\n            style={{\n              padding: 16,\n              backgroundColor: '#F5F5F5',\n              borderRadius: 10,\n              fontSize: 16,\n            }}\n          />\n          {errors.name && (\n            <RNText style={{ color: '#FF3B30', fontSize: 12 }}>{errors.name}</RNText>\n          )}\n        </DView>\n\n        {/* Email Field */}\n        <DView modifiers={modifier().style(style().gap(8))}>\n          {Text('Email').font(Font.headline).render()}\n          <TextInput\n            value={form.email}\n            onChangeText={(email) => formBinding.set({ ...form, email })}\n            placeholder=\"Enter your email\"\n            keyboardType=\"email-address\"\n            style={{\n              padding: 16,\n              backgroundColor: '#F5F5F5',\n              borderRadius: 10,\n              fontSize: 16,\n            }}\n          />\n          {errors.email && (\n            <RNText style={{ color: '#FF3B30', fontSize: 12 }}>{errors.email}</RNText>\n          )}\n        </DView>\n\n        {/* Terms Toggle */}\n        <HStack spacing={12}>\n          {Text('I agree to the Terms').font(Font.body).render()}\n          <Switch\n            value={form.agreedToTerms}\n            onValueChange={(agreedToTerms) => formBinding.set({ ...form, agreedToTerms })}\n          />\n        </HStack>\n\n        <Button\n          title=\"Create Account\"\n          action={handleSubmit}\n          style=\"borderedProminent\"\n        />\n      </DView>\n    </ScrollView>\n  );\n}\n```\n\n---\n\n## API Reference\n\n### Components\n\n| Component | Description |\n|-----------|-------------|\n| `DView` | Base view with modifier support |\n| `VStack` | Vertical stack (default: left-aligned) |\n| `HStack` | Horizontal stack |\n| `ZStack` | Overlapping stack |\n| `Spacer` | Flexible space |\n| `Divider` | Visual separator |\n| `Button` | Interactive button |\n| `Toggle` | Switch control |\n\n### Declarative Views\n\n| View | Description |\n|------|-------------|\n| `Text(string)` | Text with chainable modifiers |\n| `Image(source)` | Image with chainable modifiers |\n\n### Builders\n\n| Builder | Description |\n|---------|-------------|\n| `modifier()` | Creates ModifierBuilder |\n| `style()` | Creates DStyleBuilder for ViewStyle |\n| `swift()` | Creates DSwiftBuilder for interactions |\n\n### Hooks\n\n| Hook | Description |\n|------|-------------|\n| `useStateValue(initial)` | State with binding |\n| `useEnvironment()` | Environment access |\n| `useColorSchemeValue()` | Current color scheme |\n\n---\n\n## License\n\nMIT © 1Dance\n","readmeFilename":"README.md","_rev":"1-9b7b21eaef7e82c46bbbac0ad22078d8"}