🍏✨ Apple Creative Design System

---

📦 Instalación

``bash
npm install -D @smart-coder-labs/apple-design-system
`

---

💻 CLI (Nuevo)

El Design System ahora incluye una CLI integrada para facilitar la instalación y gestión de componentes.

$3

Configura tu proyecto automáticamente instalando dependencias y configurando Tailwind CSS.

`bash
npx @smart-coder-labs/apple-design-system init
`

$3

Añade componentes individuales a tu proyecto. La CLI descargará el código fuente más reciente directamente desde el repositorio.

`bash
npx @smart-coder-labs/apple-design-system add Button Card
`

Esto:
1. Descarga el código del componente a ./components/ui.
2. Instala automáticamente las dependencias necesarias (framer-motion, radix-ui, etc.) solo para ese componente.

---

$3

Actualiza los componentes instalados en tu proyecto a la última versión disponible.

`bash
npx @smart-coder-labs/apple-design-system update [Componente]
`

Esto:
1. Comprueba si hay versiones nuevas de los componentes en tu carpeta components/ui.
2. Te pregunta antes de sobrescribir cualquier archivo.

---

✨ Características

- 🎨 Estilo Apple Premium - Minimalista, elegante y aireado
- 🌓 Dark Mode Completo - Soporte automático para modo oscuro
- ⚡ Animaciones Fluidas - Springs suaves y transiciones elegantes con Framer Motion
- ♿ Accesibilidad - Componentes accesibles y semánticos
- 🎯 TypeScript - Completamente tipado
- 📱 Responsive - Diseñado para todos los dispositivos
- 🎭 Personalizable - Tokens configurables fácilmente

---

📦 Contenido

$3

| Componente | Descripción | Tecnología |
|------------|-------------|------------|
| Button | Botones con animaciones suaves | Framer Motion |
| Card | Tarjetas con efectos glass | Framer Motion |
| Input | Inputs con focus elegante | Framer Motion |
| Modal | Modales con animación VisionOS | Framer Motion |
| Dropdown | Menús desplegables | Framer Motion |
| Tooltip | Tooltips pequeños y elegantes | Framer Motion |
| Tabs | Segmented control iOS/macOS | Framer Motion |
| Switch | Toggle iOS con spring | Framer Motion |
| Badge | Indicadores de estado | Framer Motion |
| NumberInput | Input numérico con controles | Framer Motion |
| Select | Select nativo estilizado | Framer Motion |
| Checkbox | Checkbox animado | Framer Motion |
| Textarea | Area de texto expandible | Framer Motion |
| Label | Etiquetas accesibles | HTML/CSS |
| NavBar | Navegación minimal | Framer Motion |
| Calendar | Calendario completo | React Day Picker |
| DataGrid | Tabla avanzada con filtros | TanStack Table |
| Kanban | Tablero Trello-like | Dnd Kit |
| Sheet | Panel lateral deslizante | Framer Motion |
| Command | Menú de comandos (CMD+K) | CMDK |
| Popover | Contenido flotante | Framer Motion |
| Toast | Notificaciones tostada | Sonner |

$3

- ✅ Colores (light/dark)
- ✅ Tipografía
- ✅ Espaciado
- ✅ Border Radius
- ✅ Sombras
- ✅ Blur
- ✅ Animaciones
- ✅ Breakpoints

$3

- ✅ README completo
- ✅ Guía de inicio rápido
- ✅ Decisiones de diseño explicadas
- ✅ 50+ ejemplos de código
- ✅ Estructura del proyecto
- ✅ Índice general

---

🚀 Inicio Rápido

$3

Ejecuta el comando init para configurar automáticamente tu entorno:

`bash
npx @smart-coder-labs/apple-design-system init
`

Esto descargará los estilos base a styles/apple-ds.css y configurará las utilidades necesarias.

$3

`bash
npx @smart-coder-labs/apple-design-system add Button
`

`tsx
import { Button } from "@/components/ui/Button";

function App() {
return (
Submit
);
}
`

📖 Ver guía completa de inicio →

---

🧩 Componentes

$3

`tsx

Click me

`

Variantes: primary | secondary | ghost | subtle
Tamaños: sm | md | lg
Estados: loading | disabled

$3

`tsx


Title

Content

`

Variantes: elevated | glass | outlined | flat

$3

`tsx


Title

Content

`

Animación VisionOS-like con backdrop blur

📖 Ver todos los componentes →

---

🎨 Demo

Explora nuestra demostración interactiva de Storybook con una Landing Page completa construida con nuestro Sistema de Diseño. Experimenta el cambio de modo oscuro, diseño responsivo y varios componentes de UI en acción.

🎬 Ver demo completa →

---

📚 Storybook

Explora y prueba nuestros componentes de forma interactiva en nuestro Storybook oficial:

👉 https://smart-coder-labs.github.io/design-system/

---

📖 Documentación

| Archivo | Descripción |
|---------|-------------|
| INDEX.md | 📑 Índice general de todo el proyecto |
| QUICKSTART.md | 🚀 Instalación y configuración rápida |
| README.md | 📘 Documentación completa |
| EXAMPLES.md | 📖 50+ ejemplos de código |
| DESIGN_DECISIONS.md | 🎨 Decisiones de diseño explicadas |
| PROJECT_STRUCTURE.md | 📂 Estructura del proyecto |
| SUMMARY.md | 📊 Resumen ejecutivo |

---

🎯 Filosofía de Diseño

$3

`tsx
import { Switch } from '@smart-coder-labs/apple-design-system';

const [darkMode, setDarkMode] = useState(false);

useEffect(() => {
document.documentElement.classList.toggle('dark', darkMode);
}, [darkMode]);

checked={darkMode}
onCheckedChange={setDarkMode}
label="Dark Mode"
/>
`

---

🎨 Personalización

$3

`typescript
import { tokens } from '@smart-coder-labs/apple-design-system';

const customTokens = {
...tokens,
colors: {
...tokens.colors,
light: {
...tokens.colors.light,
accent: {
blue: '#0066CC', // Tu color
},
},
},
};
`

🔧 Ver guía completa →

---

📊 Estadísticas

`
📁 Archivos: 150+
📝 Líneas de código: 10,000+
🧩 Componentes: 50+
🎨 Tokens: 100+
📖 Documentación: 7 archivos
`

---

🛠️ Tecnologías

- React 18+ - UI Library
- TypeScript 5+ - Type Safety
- Framer Motion 12+ - Animaciones
- Tailwind CSS 4+ - Estilos
- PostCSS - Procesamiento CSS

---

♿ Accesibilidad

✅ WCAG 2.1 nivel AA
✅ Navegación por teclado
✅ Focus visible
✅ ARIA labels
✅ Touch targets 40x40px
✅ Screen reader friendly

---

📱 Responsive

Todos los componentes son responsive por defecto.

Breakpoints:
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
- 2xl: 1536px

---

🎯 Casos de Uso

- ✅ Aplicaciones web premium
- ✅ Dashboards administrativos
- ✅ Landing pages elegantes
- ✅ Aplicaciones SaaS
- ✅ Portfolios profesionales
- ✅ E-commerce moderno

---

📂 Estructura

`
apple-design-system/
├── 📄 Documentación (7 archivos)
├── 🎨 Configuración (tokens, tailwind, globals)
├── 🧩 Componentes (10 componentes)
├── 📦 Package.json
└── 🎬 DemoPage.tsx
`

📂 Ver estructura completa →

---

🚀 Próximos Pasos

1. 📖 Lee el índice - Vista general
2. 🚀 Instalación rápida - 5 minutos
3. 📖 Copia ejemplos - Código listo
4. 🎨 Personaliza - Hazlo tuyo
5. 🎬 Ve la demo - Inspiración

---

💡 Inspiración

Este design system está inspirado en:

- macOS System Preferences
- iOS Settings
- VisionOS Cards y UI
- Apple Human Interface Guidelines

---

🔄 Migración

$3

A partir de v1.0.3, es necesario usar el preset de Tailwind:

`bash
npm install -D @smart-coder-labs/apple-design-system@latest
`

Actualiza tu tailwind.config.js:

`javascript
import preset from '@smart-coder-labs/apple-design-system/tailwind.preset';

export default {
presets: [preset],
content: [
'./src/*/.{js,ts,jsx,tsx}',
'./node_modules/@smart-coder-labs/apple-design-system/*/.{js,ts,jsx,tsx}',
],
};
``

📖 Ver guía completa de migración →

---

📄 Licencia

MIT © 2025

---

🙏 Agradecimientos

Construido con:
- Framer Motion
- Tailwind CSS
- Apple Human Interface Guidelines

---