{"_id":"@bulpara/digitoon-design-system","name":"@bulpara/digitoon-design-system","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bulpara/digitoon-design-system","version":"1.0.0","description":"Production-grade design system for Digitoon web and mobile applications","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./tokens":{"types":"./dist/tokens.d.ts","import":"./dist/tokens.mjs","require":"./dist/tokens.js"},"./themes":{"types":"./dist/themes.d.ts","import":"./dist/themes.mjs","require":"./dist/themes.js"},"./config":{"types":"./dist/config.d.ts","import":"./dist/config.mjs","require":"./dist/config.js"}},"scripts":{"build":"pnpm run clean && pnpm run build:lib","build:lib":"tsup","dev":"tsup --watch","clean":"rimraf dist","typecheck":"tsc --noEmit","lint":"eslint src --ext .ts,.tsx","lint:fix":"eslint src --ext .ts,.tsx --fix","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","prepublishOnly":"pnpm run build","release":"changeset publish"},"dependencies":{"@tamagui/core":"^1.129.17","@tamagui/stacks":"^1.129.17","@tamagui/text":"^1.129.17","@tamagui/button":"^1.129.17","@tamagui/input":"^1.129.17","@tamagui/animations-react-native":"^1.129.17","@tamagui/font-inter":"^1.129.17"},"devDependencies":{"@changesets/cli":"^2.27.9","@types/jest":"^29.5.14","@types/react":"^19.0.0","@typescript-eslint/eslint-plugin":"^8.18.1","@typescript-eslint/parser":"^8.18.1","eslint":"^9.18.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","jest":"^29.7.0","prettier":"^3.4.2","rimraf":"^6.0.1","ts-jest":"^29.2.5","tsup":"^8.5.0","typescript":"^5.8.0"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.70.0"},"peerDependenciesMeta":{"react-native":{"optional":true}},"repository":{"type":"git","url":"git+https://github.com/your-username/digitoon.git","directory":"design-system"},"keywords":["design-system","tamagui","react-native","nextjs","cross-platform","typescript","ui-components"],"author":{"name":"Digitoon Team"},"license":"MIT","publishConfig":{"access":"public"},"engines":{"node":">=18.0.0","pnpm":">=8.0.0"},"_id":"@bulpara/digitoon-design-system@1.0.0","gitHead":"81e0686f389ffe93073c21b028114eb3a9c9e644","bugs":{"url":"https://github.com/your-username/digitoon/issues"},"homepage":"https://github.com/your-username/digitoon#readme","_nodeVersion":"24.2.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-DYNp3YTgLsnYJnC6p4RnY6iSwqR+Q3DCh5aIMIRVlpetB5uK+gGaGXxcCCkZRcYWXrfsPcQHqo8vH7E23LOlqA==","shasum":"28e09364a1de4779b4483a800d063fbf49fbe335","tarball":"https://registry.npmjs.org/@bulpara/digitoon-design-system/-/digitoon-design-system-1.0.0.tgz","fileCount":18,"unpackedSize":388578,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDWEyoEFaChcm9iaRVVjzMSDvUYNffUm9jbOqkg1OyIeAiEAhCrR0KjTUTt/UPIaDA1KZhiX+vCfSzu/ucPM4tWNyL8="}]},"_npmUser":{"name":"bulpara","email":"eralp@bulpara.com","actor":{"name":"bulpara","email":"eralp@bulpara.com","type":"user"}},"directories":{},"maintainers":[{"name":"bulpara","email":"eralp@bulpara.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/digitoon-design-system_1.0.0_1751614275928_0.2028339200369489"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-04T07:31:15.820Z","1.0.0":"2025-07-04T07:31:16.105Z","modified":"2025-07-04T07:31:16.522Z"},"maintainers":[{"name":"bulpara","email":"eralp@bulpara.com"}],"description":"Production-grade design system for Digitoon web and mobile applications","homepage":"https://github.com/your-username/digitoon#readme","keywords":["design-system","tamagui","react-native","nextjs","cross-platform","typescript","ui-components"],"repository":{"type":"git","url":"git+https://github.com/your-username/digitoon.git","directory":"design-system"},"author":{"name":"Digitoon Team"},"bugs":{"url":"https://github.com/your-username/digitoon/issues"},"license":"MIT","readme":"# @digitoon/design-system\n\nProduction-grade design system for Digitoon web and mobile applications, built with Tamagui for universal compatibility.\n\n## Features\n\n- 🎨 **Universal Design System** - Works across React Native, Next.js, and web\n- 🎯 **TypeScript First** - Full type safety and IntelliSense support\n- 🚀 **Performance Optimized** - Tree-shakeable, optimized bundle sizes\n- 📱 **Mobile & Web** - Responsive design with platform-specific optimizations\n- 🎭 **Multiple Themes** - Light, dark, and sepia themes with easy customization\n- 🔧 **Production Ready** - Comprehensive testing, linting, and build pipeline\n\n## Installation\n\n```bash\n# Using pnpm (recommended)\npnpm add @digitoon/design-system\n\n# Using npm\nnpm install @digitoon/design-system\n\n# Using yarn\nyarn add @digitoon/design-system\n```\n\n### Peer Dependencies\n\nMake sure you have the required peer dependencies installed:\n\n```bash\npnpm add react react-native # react-native is optional for web-only projects\n```\n\n## Quick Start\n\n### Next.js Setup\n\n1. Install the Next.js plugin:\n\n```bash\npnpm add @tamagui/next-plugin\n```\n\n2. Configure your `next.config.js`:\n\n```javascript\nimport { withTamagui } from '@tamagui/next-plugin'\n\nconst nextConfig = {\n  transpilePackages: ['@digitoon/design-system'],\n}\n\nexport default withTamagui(nextConfig, {\n  config: './tamagui.config.ts',\n  components: ['@digitoon/design-system'],\n})\n```\n\n3. Create `tamagui.config.ts`:\n\n```typescript\nimport { config } from '@digitoon/design-system/config'\nexport default config\n```\n\n4. Wrap your app with TamaguiProvider:\n\n```tsx\nimport { TamaguiProvider } from '@digitoon/design-system'\nimport { config } from '@digitoon/design-system/config'\n\nexport default function App({ children }) {\n  return (\n    <TamaguiProvider config={config} defaultTheme=\"light\">\n      {children}\n    </TamaguiProvider>\n  )\n}\n```\n\n### React Native Setup\n\n1. Install Tamagui core packages:\n\n```bash\npnpm add @tamagui/core\n```\n\n2. Configure your app:\n\n```tsx\nimport { TamaguiProvider } from '@digitoon/design-system'\nimport { config } from '@digitoon/design-system/config'\n\nexport default function App() {\n  return (\n    <TamaguiProvider config={config} defaultTheme=\"light\">\n      {/* Your app content */}\n    </TamaguiProvider>\n  )\n}\n```\n\n## Usage\n\n### Basic Components\n\n```tsx\nimport {\n  DigitoonButton,\n  DigitoonCard,\n  DigitoonText,\n  DigitoonHeading,\n  XStack,\n  YStack,\n} from '@digitoon/design-system'\n\nfunction MyComponent() {\n  return (\n    <YStack padding=\"$4\" gap=\"$4\">\n      <DigitoonHeading level={1}>Welcome to Digitoon</DigitoonHeading>\n      \n      <DigitoonCard variant=\"elevated\">\n        <DigitoonText>This is a card component</DigitoonText>\n      </DigitoonCard>\n      \n      <XStack gap=\"$2\">\n        <DigitoonButton variant=\"primary\">Primary</DigitoonButton>\n        <DigitoonButton variant=\"secondary\">Secondary</DigitoonButton>\n      </XStack>\n    </YStack>\n  )\n}\n```\n\n### Theming\n\n```tsx\nimport { Theme, useTheme } from '@digitoon/design-system'\n\nfunction ThemedComponent() {\n  const theme = useTheme()\n  \n  return (\n    <Theme name=\"dark\">\n      <YStack backgroundColor=\"$background\" padding=\"$4\">\n        <DigitoonText color=\"$color\">Dark theme content</DigitoonText>\n      </YStack>\n    </Theme>\n  )\n}\n```\n\n### Design Tokens\n\n```tsx\nimport { tokens, themes } from '@digitoon/design-system'\n\n// Access design tokens\nconst primaryColor = tokens.color.primary500\nconst spacing = tokens.space[4]\n\n// Use in styled components\nconst StyledView = styled(View, {\n  backgroundColor: '$primary',\n  padding: '$4',\n  borderRadius: '$md',\n})\n```\n\n## Available Components\n\n### Layout\n- `XStack`, `YStack`, `ZStack` - Flex layout components\n- `View`, `Stack` - Basic view components\n\n### Typography\n- `DigitoonText` - Customizable text component\n- `DigitoonHeading` - Heading component with levels 1-6\n- Standard HTML headings: `H1`, `H2`, `H3`, `H4`, `H5`, `H6`\n\n### Form Controls\n- `DigitoonButton` - Button with multiple variants\n- `DigitoonInput` - Input field with validation states\n\n### Containers\n- `DigitoonCard` - Card container with variants\n- `CardHeader`, `CardContent`, `CardFooter` - Card sections\n\n### Theming\n- `Theme` - Theme provider component\n- `TamaguiProvider` - Root provider\n\n## Design Tokens\n\nThe design system includes comprehensive design tokens:\n\n- **Colors**: Brand colors, semantic colors, neutral scales\n- **Typography**: Font sizes, weights, line heights\n- **Spacing**: Consistent spacing scale\n- **Radii**: Border radius values\n- **Shadows**: Elevation and shadow tokens\n\n## Themes\n\nThree built-in themes:\n- **Light**: Default light theme\n- **Dark**: Dark theme optimized for night reading\n- **Sepia**: Warm theme for comfortable reading\n\n## Development\n\n### Prerequisites\n\n- Node.js 18+\n- pnpm 8+\n\n### Setup\n\n```bash\ngit clone <repository-url>\ncd design-system\npnpm install\n```\n\n### Available Scripts\n\n```bash\npnpm build          # Build the package\npnpm dev            # Watch mode for development\npnpm test           # Run tests\npnpm test:watch     # Run tests in watch mode\npnpm test:coverage  # Run tests with coverage\npnpm lint           # Lint the code\npnpm lint:fix       # Fix linting issues\npnpm typecheck      # Type checking\n```\n\n### Testing\n\nThe design system includes comprehensive testing setup with Jest and Testing Library:\n\n```bash\n# Run all tests\npnpm test\n\n# Run tests in watch mode\npnpm test:watch\n\n# Generate coverage report\npnpm test:coverage\n```\n\n## Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/new-component`\n3. Make your changes\n4. Run tests: `pnpm test`\n5. Run linting: `pnpm lint:fix`\n6. Commit your changes: `git commit -m 'Add new component'`\n7. Push to the branch: `git push origin feature/new-component`\n8. Submit a pull request\n\n## License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n\n## Support\n\nFor questions and support:\n- Create an issue in the repository\n- Check the documentation\n- Contact the Digitoon team","readmeFilename":"README.md","_rev":"1-dd9f0b7b38ddf67a45c4feb27ff1d3b2"}