{"_id":"@andylow/retro-futuristic-ui","name":"@andylow/retro-futuristic-ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@andylow/retro-futuristic-ui","version":"1.0.0","description":"A retro-futuristic React component library with glassmorphism effects and bold comic-book styling","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"keywords":["react","components","ui","retro","futuristic","glassmorphism","typescript","tailwind"],"author":{"name":"Andres Lopez"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/react":"^18.3.26","@types/react-dom":"^18.3.7","react":"^18.3.1","react-dom":"^18.3.1","tsup":"^8.5.1","typescript":"^5.9.3"},"repository":{"type":"git","url":"git+https://github.com/andylow92/retro-library.git"},"_id":"@andylow/retro-futuristic-ui@1.0.0","gitHead":"edc55f9b196d2396b52e775d936e96f613804283","bugs":{"url":"https://github.com/andylow92/retro-library/issues"},"homepage":"https://github.com/andylow92/retro-library#readme","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-OrfOgDwcVIN6iTYLunU7/qBoZ//1uzgvovZD4WLXw3aY+MXZLvB5zvVb3tQ9SYhdDWKxFant2uuU1cMKJuvz2w==","shasum":"9cdb63d042cf4d35257748651331f1e1105371f1","tarball":"https://registry.npmjs.org/@andylow/retro-futuristic-ui/-/retro-futuristic-ui-1.0.0.tgz","fileCount":9,"unpackedSize":119211,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCaTVPpWP8gF8Vhq0HJKxa9DPLBRq1SdkJ7uTJth/wj+gIhALJuYCGwCjmwUcF5wFlgZbXbuUD2zsEjpzVQXCOJASgy"}]},"_npmUser":{"name":"andylow","email":"aalc928@gmail.com"},"directories":{},"maintainers":[{"name":"andylow","email":"aalc928@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/retro-futuristic-ui_1.0.0_1763292140688_0.8002537335091351"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-16T11:22:20.584Z","1.0.0":"2025-11-16T11:22:20.877Z","modified":"2025-11-16T11:22:21.185Z"},"maintainers":[{"name":"andylow","email":"aalc928@gmail.com"}],"description":"A retro-futuristic React component library with glassmorphism effects and bold comic-book styling","homepage":"https://github.com/andylow92/retro-library#readme","keywords":["react","components","ui","retro","futuristic","glassmorphism","typescript","tailwind"],"repository":{"type":"git","url":"git+https://github.com/andylow92/retro-library.git"},"author":{"name":"Andres Lopez"},"bugs":{"url":"https://github.com/andylow92/retro-library/issues"},"license":"MIT","readme":"# Retro Futuristic UI 🎨\n\nA retro-futuristic React component library featuring glassmorphism effects, bold comic-book styling, and vibrant aesthetics. Perfect for creating eye-catching, nostalgic interfaces with a modern twist.\n\n## Features\n\n- ✨ **Glassmorphism Effects**: Beautiful frosted glass aesthetics with backdrop blur\n- 🎭 **Bold Comic Book Styling**: Thick borders, dramatic shadows, and vibrant colors\n- 📦 **TypeScript First**: Fully typed components with comprehensive type definitions\n- 🎨 **Customizable**: Multiple variants, sizes, and style options\n- ⚡ **Lightweight**: Tree-shakeable exports, minimal dependencies\n- 🔧 **Easy to Use**: Simple API with sensible defaults\n\n## Installation\n\n```bash\nnpm install retro-futuristic-ui\n```\n\nor\n\n```bash\nyarn add retro-futuristic-ui\n```\n\n## Prerequisites\n\nThis library requires:\n- React >= 16.8.0\n- TailwindCSS (for utility classes)\n\nMake sure you have TailwindCSS installed and configured in your project.\n\n## Components\n\n### RetroButton\n\nBold, pressable buttons with glassmorphism effects.\n\n```tsx\nimport { RetroButton } from 'retro-futuristic-ui';\n\n<RetroButton variant=\"primary\" size=\"md\" onClick={() => console.log('Clicked!')}>\n  Click Me!\n</RetroButton>\n```\n\n**Props:**\n- `variant`: 'primary' | 'secondary' | 'success' | 'danger'\n- `size`: 'sm' | 'md' | 'lg'\n- `onClick`: Click handler function\n- `disabled`: Boolean to disable the button\n- `className`: Additional CSS classes\n\n### RetroCard\n\nContainer cards with glassmorphism and optional titles.\n\n```tsx\nimport { RetroCard } from 'retro-futuristic-ui';\n\n<RetroCard title=\"My Card\" variant=\"blue\">\n  <p>Card content goes here</p>\n</RetroCard>\n```\n\n**Props:**\n- `variant`: 'default' | 'blue' | 'red' | 'yellow' | 'green'\n- `title`: Optional card title\n- `className`: Additional CSS classes\n\n### RetroBadge\n\nSmall badges for labels and tags.\n\n```tsx\nimport { RetroBadge } from 'retro-futuristic-ui';\n\n<RetroBadge variant=\"primary\" size=\"md\">NEW!</RetroBadge>\n```\n\n**Props:**\n- `variant`: 'primary' | 'secondary' | 'success' | 'danger'\n- `size`: 'sm' | 'md' | 'lg'\n\n### RetroInput\n\nStylized text input with glassmorphism.\n\n```tsx\nimport { RetroInput } from 'retro-futuristic-ui';\n\n<RetroInput\n  placeholder=\"Enter text...\"\n  value={value}\n  onChange={(e) => setValue(e.target.value)}\n  type=\"text\"\n/>\n```\n\n**Props:**\n- `placeholder`: Placeholder text\n- `value`: Controlled value\n- `onChange`: Change handler\n- `type`: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'\n- `disabled`: Boolean to disable input\n- `className`: Additional CSS classes\n\n### RetroTextarea\n\nMulti-line text input with retro styling.\n\n```tsx\nimport { RetroTextarea } from 'retro-futuristic-ui';\n\n<RetroTextarea\n  placeholder=\"Enter text...\"\n  value={value}\n  onChange={(e) => setValue(e.target.value)}\n  rows={4}\n/>\n```\n\n**Props:**\n- `placeholder`: Placeholder text\n- `value`: Controlled value\n- `onChange`: Change handler\n- `rows`: Number of visible rows\n- `disabled`: Boolean to disable textarea\n- `className`: Additional CSS classes\n\n### RetroSpeechBubble\n\nComic-book style speech bubbles.\n\n```tsx\nimport { RetroSpeechBubble } from 'retro-futuristic-ui';\n\n<RetroSpeechBubble direction=\"left\" variant=\"default\">\n  \"Hello World!\"\n</RetroSpeechBubble>\n```\n\n**Props:**\n- `direction`: 'left' | 'right'\n- `variant`: 'default' | 'thought' | 'shout'\n\n### RetroPanel\n\nComic panel with optional sound effects.\n\n```tsx\nimport { RetroPanel } from 'retro-futuristic-ui';\n\n<RetroPanel sound=\"BAM!\" color=\"#DC2626\">\n  <p>Panel content here</p>\n</RetroPanel>\n```\n\n**Props:**\n- `sound`: Optional sound effect text\n- `color`: Color for the sound effect\n- `children`: Panel content\n\n### RetroStarburst\n\nStar-shaped badge for callouts and highlights.\n\n```tsx\nimport { RetroStarburst } from 'retro-futuristic-ui';\n\n<RetroStarburst size=\"md\" color=\"#FBBF24\">\n  NEW!\n</RetroStarburst>\n```\n\n**Props:**\n- `size`: 'sm' | 'md' | 'lg'\n- `color`: Background color\n\n### RetroProgressBar\n\nAnimated progress bars with patterns.\n\n```tsx\nimport { RetroProgressBar } from 'retro-futuristic-ui';\n\n<RetroProgressBar\n  progress={75}\n  variant=\"primary\"\n  showLabel={true}\n/>\n```\n\n**Props:**\n- `progress`: Number between 0-100\n- `variant`: 'primary' | 'secondary' | 'success' | 'danger'\n- `showLabel`: Boolean to show percentage label\n\n### RetroToggle\n\nToggle switches with smooth animations.\n\n```tsx\nimport { RetroToggle } from 'retro-futuristic-ui';\n\n<RetroToggle\n  checked={isEnabled}\n  onChange={setIsEnabled}\n  label=\"Enable Feature\"\n/>\n```\n\n**Props:**\n- `checked`: Boolean checked state\n- `onChange`: Change handler\n- `label`: Optional label text\n- `disabled`: Boolean to disable toggle\n\n## Usage Example\n\n```tsx\nimport React, { useState } from 'react';\nimport {\n  RetroButton,\n  RetroCard,\n  RetroBadge,\n  RetroInput,\n  RetroProgressBar\n} from 'retro-futuristic-ui';\n\nfunction App() {\n  const [inputValue, setInputValue] = useState('');\n  const [progress, setProgress] = useState(50);\n\n  return (\n    <div className=\"min-h-screen bg-gradient-to-br from-yellow-200 via-red-400 to-blue-500 p-8\">\n      <RetroCard title=\"Welcome!\" variant=\"default\">\n        <RetroBadge variant=\"primary\">NEW</RetroBadge>\n\n        <RetroInput\n          placeholder=\"Enter your name...\"\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n        />\n\n        <RetroProgressBar\n          progress={progress}\n          variant=\"success\"\n        />\n\n        <RetroButton\n          variant=\"primary\"\n          size=\"lg\"\n          onClick={() => setProgress(progress + 10)}\n        >\n          Increase Progress\n        </RetroButton>\n      </RetroCard>\n    </div>\n  );\n}\n```\n\n## Styling Notes\n\nThis library uses:\n- **TailwindCSS** for utility classes (required)\n- Inline styles for glassmorphism and special effects\n- Impact, Arial Black fonts for bold text (system fonts)\n\nFor best results, use vibrant gradient backgrounds to showcase the glassmorphism effects.\n\n## TypeScript Support\n\nAll components are fully typed with comprehensive TypeScript definitions. Import types as needed:\n\n```tsx\nimport type {\n  RetroButtonProps,\n  ButtonVariant,\n  ButtonSize\n} from 'retro-futuristic-ui';\n```\n\n## Browser Support\n\nThis library uses modern CSS features including:\n- `backdrop-filter` (glassmorphism)\n- CSS gradients\n- CSS transforms\n\nEnsure your target browsers support these features or use appropriate polyfills.\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Build the library\nnpm run build\n\n# Run type checking\nnpm run typecheck\n\n# Watch mode for development\nnpm run dev\n```\n\n## License\n\nMIT\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## Credits\n\nCreated with React, TypeScript, and TailwindCSS.\n","readmeFilename":"README.md","_rev":"1-028bfa43a79d0a0277cc59504b860526"}