{"_id":"@ahmed.tawfik.galal/design-system","name":"@ahmed.tawfik.galal/design-system","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ahmed.tawfik.galal/design-system","version":"1.0.0","description":"TapTap Design System - Reusable design tokens and components","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"keywords":["design-system","taptap","tailwind","tokens","react","typescript"],"author":{"name":"TapTap"},"license":"MIT","peerDependencies":{"react":">=18.0.0","tailwindcss":">=3.0.0"},"devDependencies":{"@types/node":"^25.2.3","@types/react":"^18.2.0","react":"^18.2.0","tailwindcss":"^3.4.0","typescript":"^5.3.0"},"repository":{"type":"git","url":"git+https://github.com/ahmedtaaw/taptap_demo.git"},"publishConfig":{"access":"public"},"gitHead":"d8cdd4886de21926c990aa39a07b5756fd383cc2","_id":"@ahmed.tawfik.galal/design-system@1.0.0","bugs":{"url":"https://github.com/ahmedtaaw/taptap_demo/issues"},"homepage":"https://github.com/ahmedtaaw/taptap_demo#readme","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-dX/juv8gZfhiZlgntb7bXzEyRTdpDrTC7QKRUoZzEsnvpNepYohm74aHaeC8xaCIipoBVOMxH0/A1yMpazlWOA==","shasum":"3eb203e71edce4c10e0f5edb728d83c6f953a5ea","tarball":"https://registry.npmjs.org/@ahmed.tawfik.galal/design-system/-/design-system-1.0.0.tgz","fileCount":18,"unpackedSize":39694,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIACnQePDdOikX97x6y+tAxI5uMQlJBqiyH0jnke80qW/AiAorwHW8GPYf0zg24eEpQsWGkhdvy32IpNqg+kl3ue3Ew=="}]},"_npmUser":{"name":"ahmed.tawfik.galal","email":"ahmed.tawfik.galal@gmail.com"},"directories":{},"maintainers":[{"name":"ahmed.tawfik.galal","email":"ahmed.tawfik.galal@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_1.0.0_1770754814998_0.32337341331536273"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-10T20:20:14.893Z","1.0.0":"2026-02-10T20:20:15.203Z","modified":"2026-02-10T20:20:15.435Z"},"maintainers":[{"name":"ahmed.tawfik.galal","email":"ahmed.tawfik.galal@gmail.com"}],"description":"TapTap Design System - Reusable design tokens and components","homepage":"https://github.com/ahmedtaaw/taptap_demo#readme","keywords":["design-system","taptap","tailwind","tokens","react","typescript"],"repository":{"type":"git","url":"git+https://github.com/ahmedtaaw/taptap_demo.git"},"author":{"name":"TapTap"},"bugs":{"url":"https://github.com/ahmedtaaw/taptap_demo/issues"},"license":"MIT","readme":"# TapTap Design System\n\nA reusable design system package built from the TapTap Figma design specifications. This package provides design tokens, Tailwind configuration, and React components for consistent UI development.\n\n## 📦 Installation\n\n```bash\nnpm install @taptap/design-system\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react tailwindcss\n```\n\n## 🚀 Quick Start\n\n### 1. Configure Tailwind\n\nImport the TapTap preset in your `tailwind.config.js`:\n\n```js\nmodule.exports = {\n  presets: [require('@taptap/design-system/dist/config/tailwind-preset')],\n  content: [\n    './src/**/*.{js,jsx,ts,tsx}',\n    './node_modules/@taptap/design-system/dist/**/*.js',\n  ],\n};\n```\n\n### 2. Use Components\n\n```tsx\nimport { Button, IconButton } from '@taptap/design-system';\n\nfunction App() {\n  return (\n    <div>\n      <Button variant=\"primary\" size=\"large\">\n        Click Me\n      </Button>\n      \n      <Button \n        variant=\"outline\" \n        intent=\"danger\"\n        leftIcon={<TrashIcon />}\n      >\n        Delete\n      </Button>\n\n      <IconButton \n        variant=\"ghost\" \n        shape=\"round\"\n        icon={<SearchIcon />}\n      />\n    </div>\n  );\n}\n```\n\n### 3. Use Design Tokens\n\n```tsx\nimport { colors, typography, spacing } from '@taptap/design-system';\n\n// Direct token usage\nconst primaryColor = colors.primary[600]; // #15C5CE\nconst headingSize = typography.fontSize.h1; // ['30px', '38px']\nconst mediumSpace = spacing[2]; // 8px\n```\n\n## 🎨 Design Tokens\n\n### Colors\n\n```ts\ncolors.black          // #000000\ncolors.white          // #FFFFFF\ncolors.neutral[50-700] // Neutral scale\ncolors.primary[50-700] // Brand primary\ncolors.auxiliary[50-700] // Brand auxiliary\ncolors.danger[50-700]  // Semantic: errors, warnings\ncolors.warning[50-700] // Semantic: caution\ncolors.success[50-700] // Semantic: success states\ncolors.info[50-700]    // Semantic: informational\n```\n\n### Typography\n\n```ts\n// Font families\ntypography.fontFamily.sans // System font stack\ntypography.fontFamily.mono // Monospace for code\n\n// Type scale (size, line-height)\ntypography.fontSize.h1       // [30px, 38px]\ntypography.fontSize.h2       // [24px, 32px]\ntypography.fontSize.h3       // [20px, 28px]\ntypography.fontSize.title    // [18px, 26px]\ntypography.fontSize.subtitle // [16px, 24px]\ntypography.fontSize.body     // [14px, 22px]\ntypography.fontSize.caption  // [12px, 18px]\n\n// Font weights\ntypography.fontWeight.regular // 400\ntypography.fontWeight.medium  // 500\n```\n\n### Spacing\n\n```ts\nspacing[0]  // 0px\nspacing[1]  // 4px  - Small button padding (from spec)\nspacing[2]  // 8px  - Medium/Large button padding (from spec)\nspacing[10] // 40px - Large button height (from spec)\n```\n\n**Note**: Only spacing values explicitly documented in the design system are included. Additional spacing values should be added only after confirmation from the design team.\n\n## 🧩 Components\n\n### Button\n\n```tsx\n<Button\n  variant=\"primary\" | \"outline\" | \"ghost\" | \"link\"\n  size=\"small\" | \"medium\" | \"large\"\n  intent=\"default\" | \"danger\"\n  leftIcon={<Icon />}\n  rightIcon={<Icon />}\n>\n  Button Text\n</Button>\n```\n\n**Variants:**\n- `primary` - Filled background, primary action\n- `outline` - Border only, secondary actions\n- `ghost` - Transparent, tertiary actions\n- `link` - Text only, for external links\n\n**Sizes:**\n- `small` - 24px height\n- `medium` - 36px height (default)\n- `large` - 40px height\n\n**Intent:**\n- `default` - Standard button styling\n- `danger` - Destructive actions (red theme)\n\n### IconButton\n\n```tsx\n<IconButton\n  variant=\"primary\" | \"outline\" | \"ghost\"\n  size=\"small\" | \"medium\" | \"large\"\n  shape=\"fillet\" | \"round\" | \"square\"\n  intent=\"default\" | \"danger\"\n  icon={<Icon />}\n/>\n```\n\n**Shapes:**\n- `fillet` - Rounded corners (default)\n- `round` - Fully circular\n- `square` - Sharp corners\n\n## 🎯 Tailwind Usage\n\nAll design tokens are available as Tailwind utilities:\n\n```tsx\n<div className=\"bg-primary-600 text-white rounded-md p-2\">\n  <h1 className=\"text-h1 font-medium\">Heading</h1>\n  <p className=\"text-body text-neutral-600\">Body text</p>\n</div>\n```\n\n## 🤖 AI Vibe-Coding Tools\n\nThis package is optimized for AI tools like Lovable, Cursor, and v0. The design system provides:\n\n- **Complete type definitions** for IntelliSense\n- **Semantic token names** for natural language prompting\n- **Minimal abstractions** for predictable code generation\n- **Tailwind integration** for rapid prototyping\n\nExample prompts that work well:\n- \"Create a danger outline button with a trash icon\"\n- \"Use the primary-600 color for the header background\"\n- \"Add a large ghost button with right arrow icon\"\n\n## 📁 Package Structure\n\n```\n@taptap/design-system/\n├── dist/\n│   ├── index.js           # Main entry point\n│   ├── index.d.ts         # TypeScript definitions\n│   ├── config/\n│   │   ├── tokens.js      # Raw design tokens\n│   │   ├── theme.js       # Semantic mappings\n│   │   └── tailwind-preset.js\n│   └── components/\n│       ├── Button.js\n│       └── IconButton.js\n```\n\n## 🔧 Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Build the package\nnpm run build\n\n# Prepare for publishing\nnpm run prepublishOnly\n```\n\n## 📄 License\n\nMIT\n\n## 🤝 Contributing\n\nThis design system is based on the official TapTap Figma specifications. All design decisions must align with the source design files.\n\n---\n\n**Version:** 1.0.0  \n**Author:** TapTap  \n**Repository:** https://github.com/ahmedtaaw/taptap_demo\n","readmeFilename":"README.md","_rev":"1-fca71b0de37392d69132f92a534b8376"}