@smart-coder-labs/apple-design-system

v1.0.17

Published

7 hours ago

Design system completo estilo Apple (macOS/iOS/VisionOS) con Framer Motion

0High
0Medium
0Low

coder_0806

apple-design-system apple macos ios visionos framer-motion radix-ui react typescript tailwindcss

🍏✨ Apple Creative Design System

Un design system completo inspirado en macOS, iOS y VisionOS

Construido con Framer Motion + Tailwind CSS ✨ Creado con Inteligencia Artificial ✨

📦 Instalación • 📖 Documentación • 🧩 Componentes • 🎨 Demo • 📚 Storybook

📦 Instalación

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.

`init`

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

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

`add`

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

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

Esto:

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

`update`

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

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

Esto:

Comprueba si hay versiones nuevas de los componentes en tu carpeta components/ui.
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

🧩 Componentes

| 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 |

🎨 Tokens Completos

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

📚 Documentación Extensa

✅ 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

1. Inicializar el proyecto

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

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

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

2. Usar en tu proyecto

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

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

function App() {
  return (
    <Button variant="primary">Submit</Button>
  );
}

📖 Ver guía completa de inicio →

🧩 Componentes

Button

<Button variant="primary" size="md">
  Click me
</Button>

Card

<Card variant="glass" hoverable>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>Content</CardContent>
</Card>

Variantes: elevated | glass | outlined | flat

Modal

<Modal open={open} onOpenChange={setOpen}>
  <ModalHeader>
    <ModalTitle>Title</ModalTitle>
  </ModalHeader>
  <ModalContent>Content</ModalContent>
</Modal>

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

Minimalismo

Espacio negativo amplio
Elementos esenciales solamente
Sin decoraciones innecesarias

Elegancia

Bordes suaves (12-20px)
Sombras sutiles
Transiciones fluidas (160-260ms)

Premium

Paleta neutra con acentos elegantes
Tipografía cuidada (Inter/SF Pro)
Efectos glass y translucidez

🎨 Ver decisiones completas →

🌓 Dark Mode

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

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

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

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

🎨 Personalización

Modificar colores

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

📖 Lee el índice - Vista general
🚀 Instalación rápida - 5 minutos
📖 Copia ejemplos - Código listo
🎨 Personaliza - Hazlo tuyo
🎬 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

Actualizando desde v1.0.2 o anterior

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

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

Actualiza tu tailwind.config.js:

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

🙏 Agradecimientos

Construido con:

Hecho con ❤️ e IA inspirado en Apple

⬆ Volver arriba

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

🍏✨ Apple Creative Design System

📦 Instalación

💻 CLI (Nuevo)

init

add

update

✨ Características

📦 Contenido

🧩 Componentes

🎨 Tokens Completos

📚 Documentación Extensa

🚀 Inicio Rápido

1. Inicializar el proyecto

2. Usar en tu proyecto

🧩 Componentes

Button

Card

Modal

🎨 Demo

📚 Storybook

📖 Documentación

🎯 Filosofía de Diseño

Minimalismo

Elegancia

Premium

🌓 Dark Mode

🎨 Personalización

Modificar colores

📊 Estadísticas

🛠️ Tecnologías

♿ Accesibilidad

📱 Responsive

🎯 Casos de Uso

📂 Estructura

🚀 Próximos Pasos

💡 Inspiración

🔄 Migración

Actualizando desde v1.0.2 o anterior

📄 Licencia

🙏 Agradecimientos

`init`

`add`

`update`