{"_id":"@astra-peru/expo-ui-components","_rev":"3-d2c86f167c1c1eccf5d64a461ab2ddaf","name":"@astra-peru/expo-ui-components","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@astra-peru/expo-ui-components","version":"1.0.0","keywords":["expo","react-native","ui-components","nativewind","tailwindcss","components"],"author":"","license":"MIT","_id":"@astra-peru/expo-ui-components@1.0.0","maintainers":[{"name":"snoli2001","email":"sebastian.noli@gmail.com"}],"homepage":"https://github.com/astra/expo-ui-components#readme","bugs":{"url":"https://github.com/astra/expo-ui-components/issues"},"dist":{"shasum":"837eff5975e6f4f91fe9d4fe1839527dde3d670f","tarball":"https://registry.npmjs.org/@astra-peru/expo-ui-components/-/expo-ui-components-1.0.0.tgz","fileCount":97,"integrity":"sha512-ubvlnCrie2ozIwDZ/vcf4CGM8Jy/s8KI0cOUc3mjdi5RU3my4ycNEthTE5ZE4+Eof76aZ5lDYzmmgPhidFvNaQ==","signatures":[{"sig":"MEUCIGrmxMIpxGxwq7f4ymph5QQgSCLFRis/SdhM6uTslUzSAiEArgIoBlII1Ut6Dy8ToNA3SlINLzj/cSJvN/9NmIF0LyQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":209172},"main":"src/index.ts","types":"src/index.ts","scripts":{"setup":"node scripts/setup.js","version":"echo 'Version updated'","postversion":"echo 'Version post-processing complete'","prepublishOnly":"echo 'Preparing to publish...'"},"_npmUser":{"name":"snoli2001","email":"sebastian.noli@gmail.com"},"repository":{"url":"git+https://github.com/astra/expo-ui-components.git","type":"git"},"_npmVersion":"10.9.3","description":"Reusable UI components library for Expo/React Native applications with NativeWind/Tailwind CSS","directories":{},"_nodeVersion":"22.20.0","dependencies":{"expo-image-picker":"~17.0.8","expo-splash-screen":"~0.29.0","react-native-autocomplete-dropdown":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"nativewind":"^4.0.0","typescript":"~5.9.2","@types/react":"~19.1.0"},"peerDependencies":{"react":">=18.0.0","nativewind":"^4.0.0","tailwindcss":"^3.0.0","react-native":">=0.70.0","react-native-safe-area-context":"~5.6.0"},"_npmOperationalInternal":{"tmp":"tmp/expo-ui-components_1.0.0_1766282166917_0.6141305171947138","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@astra-peru/expo-ui-components","version":"1.0.1","keywords":["expo","react-native","ui-components","nativewind","tailwindcss","components"],"author":"","license":"MIT","_id":"@astra-peru/expo-ui-components@1.0.1","maintainers":[{"name":"snoli2001","email":"sebastian.noli@gmail.com"}],"homepage":"https://github.com/astra/expo-ui-components#readme","bugs":{"url":"https://github.com/astra/expo-ui-components/issues"},"dist":{"shasum":"ca8de5f6a088aecae4e13fc71ec760aff43b5574","tarball":"https://registry.npmjs.org/@astra-peru/expo-ui-components/-/expo-ui-components-1.0.1.tgz","fileCount":97,"integrity":"sha512-fiMa2jM/xwVdCmAbB41WvA3HP1I/kOW5u78JmNKCGZGZldQV46Qgl/enk5VmZox61zBZoxXrbs12WdZmAK47AA==","signatures":[{"sig":"MEUCIQD0W4mICkZ8jFMS7Su5zTWTi3I+fbyHyW7z2P06RiFnmQIgUzwxk32QiEKXIqpRzlfLvMLPgWlX9eD30dsqkwIXBfA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":209239},"main":"src/index.ts","types":"src/index.ts","scripts":{"setup":"node scripts/setup.js","version":"echo 'Version updated'","postversion":"echo 'Version post-processing complete'","prepublishOnly":"echo 'Preparing to publish...'"},"_npmUser":{"name":"snoli2001","email":"sebastian.noli@gmail.com"},"repository":{"url":"git+https://github.com/astra/expo-ui-components.git","type":"git"},"_npmVersion":"10.9.3","description":"Reusable UI components library for Expo/React Native applications with NativeWind/Tailwind CSS","directories":{},"_nodeVersion":"22.20.0","dependencies":{"expo-image-picker":"~17.0.8","expo-splash-screen":"~0.29.0","react-native-autocomplete-dropdown":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"nativewind":"^4.0.0","typescript":"~5.9.2","@types/react":"~19.1.0"},"peerDependencies":{"react":">=18.0.0","nativewind":"^4.0.0","tailwindcss":"^3.0.0","react-native":">=0.70.0","react-native-safe-area-context":"~5.6.0"},"_npmOperationalInternal":{"tmp":"tmp/expo-ui-components_1.0.1_1766429672266_0.49637497982039047","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@astra-peru/expo-ui-components","version":"1.0.2","description":"Reusable UI components library for Expo/React Native applications with NativeWind/Tailwind CSS","main":"src/index.ts","types":"src/index.ts","scripts":{"setup":"node scripts/setup.js","prepublishOnly":"echo 'Preparing to publish...'","version":"echo 'Version updated'","postversion":"echo 'Version post-processing complete'"},"keywords":["expo","react-native","ui-components","nativewind","tailwindcss","components"],"author":"","license":"MIT","repository":{"type":"git","url":"git+https://github.com/astra/expo-ui-components.git"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.70.0","react-native-safe-area-context":"~5.6.0","nativewind":"^4.0.0","tailwindcss":"^3.0.0"},"dependencies":{"expo-image-picker":"~17.0.8","expo-splash-screen":"~0.29.0","react-native-autocomplete-dropdown":"^5.0.0"},"devDependencies":{"@types/react":"~19.1.0","@types/react-native":"^0.73.0","nativewind":"^4.0.0","typescript":"~5.9.2"},"_id":"@astra-peru/expo-ui-components@1.0.2","bugs":{"url":"https://github.com/astra/expo-ui-components/issues"},"homepage":"https://github.com/astra/expo-ui-components#readme","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-C26BGEhBXMg1sGLPUWALiqNSqX7PQRfj1H1xVWxnhxD9QANfti01XYAgH0D+95gg0dG0WFNjlC08W19naY+79g==","shasum":"d29e01c42087a4fd05146309362c88b6978d8629","tarball":"https://registry.npmjs.org/@astra-peru/expo-ui-components/-/expo-ui-components-1.0.2.tgz","fileCount":97,"unpackedSize":208967,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDb5rmDi53u85oiambOuHpEPY1AnLshKvlaJ3fTtXZ8ewIhAONWJerK8blrKmeKjgbIRvuMPJxQQY857zYSFIaCbEGX"}]},"_npmUser":{"name":"snoli2001","email":"sebastian.noli@gmail.com"},"directories":{},"maintainers":[{"name":"snoli2001","email":"sebastian.noli@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/expo-ui-components_1.0.2_1766901091810_0.24809212373089373"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-21T01:56:06.822Z","modified":"2025-12-28T05:51:32.293Z","1.0.0":"2025-12-21T01:56:07.062Z","1.0.1":"2025-12-22T18:54:32.439Z","1.0.2":"2025-12-28T05:51:31.991Z"},"bugs":{"url":"https://github.com/astra/expo-ui-components/issues"},"license":"MIT","homepage":"https://github.com/astra/expo-ui-components#readme","keywords":["expo","react-native","ui-components","nativewind","tailwindcss","components"],"repository":{"type":"git","url":"git+https://github.com/astra/expo-ui-components.git"},"description":"Reusable UI components library for Expo/React Native applications with NativeWind/Tailwind CSS","maintainers":[{"name":"snoli2001","email":"sebastian.noli@gmail.com"}],"readme":"# @astra-peru/expo-ui-components\r\n\r\nBiblioteca de componentes UI reutilizables para aplicaciones Expo/React Native con NativeWind/Tailwind CSS.\r\n\r\n## 📦 Instalación\r\n\r\n### Instalar desde npm\r\n\r\n```bash\r\nnpm install @astra-peru/expo-ui-components\r\n```\r\n\r\nO con yarn:\r\n\r\n```bash\r\nyarn add @astra-peru/expo-ui-components\r\n```\r\n\r\nO con pnpm:\r\n\r\n```bash\r\npnpm add @astra-peru/expo-ui-components\r\n```\r\n\r\n### Dependencias Peer\r\n\r\nEste paquete requiere las siguientes dependencias peer que debes instalar en tu proyecto:\r\n\r\n```bash\r\nnpm install react react-native nativewind tailwindcss\r\nnpm install expo-image-picker react-native-safe-area-context react-native-autocomplete-dropdown\r\n```\r\n\r\n**Nota**: Si el paquete es privado y usas el scope `@astra`, asegúrate de estar autenticado en npm y tener acceso al paquete privado.\r\n\r\n### Versiones y Actualizaciones\r\n\r\nPara actualizar a la última versión:\r\n\r\n```bash\r\nnpm update @astra/expo-ui-components\r\n```\r\n\r\nPara instalar una versión específica:\r\n\r\n```bash\r\nnpm install @astra-peru/expo-ui-components@1.0.0\r\n```\r\n\r\nVer todas las versiones disponibles:\r\n\r\n```bash\r\nnpm view @astra/expo-ui-components versions\r\n```\r\n\r\n## ⚡ Configuración Rápida\r\n\r\nEjecuta el script de configuración automática:\r\n\r\n```bash\r\nnpm run setup\r\n```\r\n\r\nEste script:\r\n- Detecta configuraciones existentes\r\n- Hace merge inteligente (no sobrescribe)\r\n- Configura Tailwind, Babel, Metro y TypeScript\r\n- Verifica que `global.css` esté configurado\r\n\r\n## 🔧 Configuración Manual\r\n\r\nSi prefieres configurar manualmente o el script no funciona:\r\n\r\n### 1. Configurar Tailwind CSS\r\n\r\nCrea o actualiza `tailwind.config.js`:\r\n\r\n```javascript\r\n/** @type {import('tailwindcss').Config} */\r\nmodule.exports = {\r\n  content: [\r\n    \"./app/**/*.{js,jsx,ts,tsx}\",\r\n    \"./src/**/*.{js,jsx,ts,tsx}\",\r\n    \"./node_modules/@astra-peru/expo-ui-components/**/*.{js,jsx,ts,tsx}\",\r\n  ],\r\n  presets: [require(\"nativewind/preset\")],\r\n  theme: {\r\n    extend: {\r\n      colors: {\r\n        primary: {\r\n          50: \"#f3f6fc\",\r\n          100: \"#e6edf8\",\r\n          // ... ver templates/tailwind.config.js para colores completos\r\n        },\r\n        // ... otros colores\r\n      },\r\n    },\r\n  },\r\n  plugins: [],\r\n};\r\n```\r\n\r\n### 2. Configurar Babel\r\n\r\nActualiza `babel.config.js`:\r\n\r\n```javascript\r\nmodule.exports = function (api) {\r\n  api.cache(true);\r\n  return {\r\n    presets: [\r\n      [\"babel-preset-expo\", { jsxImportSource: \"nativewind\" }],\r\n      \"nativewind/babel\",\r\n    ],\r\n  };\r\n};\r\n```\r\n\r\n### 3. Configurar Metro\r\n\r\nActualiza `metro.config.js`:\r\n\r\n```javascript\r\nconst { getDefaultConfig } = require(\"expo/metro-config\");\r\nconst { withNativeWind } = require('nativewind/metro');\r\n \r\nconst config = getDefaultConfig(__dirname)\r\n \r\nmodule.exports = withNativeWind(config, { input: './app/global.css' })\r\n```\r\n\r\n### 4. Configurar TypeScript\r\n\r\nCrea o actualiza `nativewind-env.d.ts`:\r\n\r\n```typescript\r\n/// <reference types=\"nativewind/types\" />\r\n```\r\n\r\n### 5. Asegurar global.css\r\n\r\nAsegúrate de tener `app/global.css` con:\r\n\r\n```css\r\n@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;\r\n```\r\n\r\nE importarlo en tu `app/_layout.tsx`:\r\n\r\n```typescript\r\nimport '../global.css';\r\n```\r\n\r\n## 📚 Componentes Disponibles\r\n\r\n### Componentes de Formulario\r\n\r\n- **Button** - Botón con múltiples variantes y colores\r\n- **Input** - Campo de texto con iconos y validación\r\n- **TextAreaInput** - Área de texto multilínea\r\n- **Checkbox** - Casilla de verificación individual y grupo\r\n- **RadioButton** - Botón de radio individual y grupo\r\n- **Toggle** - Interruptor on/off\r\n- **Dropdown** - Selector desplegable (single/multi)\r\n- **AutocompleteDropdown** - Autocompletado con búsqueda\r\n- **FormLabel** - Etiqueta para formularios\r\n- **FormDatePicker** - Selector de fecha\r\n- **FormTimePicker** - Selector de hora\r\n- **FormDateRange** - Selector de rango de fechas\r\n\r\n### Componentes de Media\r\n\r\n- **SingleImageUploader** - Cargador de imagen única\r\n- **MultipleImageUploader** - Cargador de múltiples imágenes\r\n\r\n### Componentes de UI\r\n\r\n- **Chip** - Etiqueta/chip con estados\r\n- **Modal** - Modal base con variantes:\r\n  - AlertModal\r\n  - ConfirmModal\r\n  - ErrorModal\r\n  - LoadingModal\r\n  - LocationPermissionModal\r\n\r\n### Componentes de Layout\r\n\r\n- **LoadingScreen** - Pantalla de carga\r\n- **SplashScreen** - Pantalla de inicio\r\n- **DeviceSafeArea** - Wrapper para safe area\r\n\r\n### Iconos\r\n\r\n34 iconos disponibles: `IconArrowLeft`, `IconCalendar`, `IconCamera`, `IconCheckmark`, `IconChevronDown`, `IconChevronLeft`, `IconChevronRight`, `IconClock`, `IconCloudUpload`, `IconCollection`, `IconDashboard`, `IconDownload`, `IconEdit`, `IconEye`, `IconEyeOff`, `IconFilter`, `IconFlag`, `IconHome`, `IconInfo`, `IconLock`, `IconLogout`, `IconMapPin`, `IconPhone`, `IconPhoto`, `IconQuestion`, `IconRefresh`, `IconSearch`, `IconSearchOff`, `IconSettings`, `IconTrash`, `IconUser`, `IconWhatsapp`, `IconX`\r\n\r\n## 🎯 Ejemplos de Uso\r\n\r\n### Button\r\n\r\n```tsx\r\nimport { Button } from '@astra-peru/expo-ui-components';\r\n\r\n<Button\r\n  variant=\"filled\"\r\n  color=\"primary\"\r\n  size=\"md\"\r\n  onPress={() => console.log('Pressed')}\r\n>\r\n  Click me\r\n</Button>\r\n```\r\n\r\n### Input\r\n\r\n```tsx\r\nimport { Input } from '@astra-peru/expo-ui-components';\r\n\r\n<Input\r\n  label=\"Email\"\r\n  placeholder=\"Enter your email\"\r\n  value={email}\r\n  onChangeText={setEmail}\r\n  format=\"email\"\r\n  leftIcon={{ name: \"user\" }}\r\n  required\r\n/>\r\n```\r\n\r\n### FormDatePicker\r\n\r\n```tsx\r\nimport { FormDatePicker } from '@astra-peru/expo-ui-components';\r\n\r\n<FormDatePicker\r\n  label=\"Fecha de nacimiento\"\r\n  value={date}\r\n  onValueChange={setDate}\r\n  minimumDate={new Date(1900, 0, 1)}\r\n  maximumDate={new Date()}\r\n/>\r\n```\r\n\r\n### Modal\r\n\r\n```tsx\r\nimport { AlertModal, ConfirmModal } from '@astra-peru/expo-ui-components';\r\n\r\n<AlertModal\r\n  visible={showAlert}\r\n  title=\"Éxito\"\r\n  message=\"Operación completada\"\r\n  onClose={() => setShowAlert(false)}\r\n/>\r\n\r\n<ConfirmModal\r\n  visible={showConfirm}\r\n  title=\"Confirmar\"\r\n  message=\"¿Estás seguro?\"\r\n  onConfirm={handleConfirm}\r\n  onClose={() => setShowConfirm(false)}\r\n/>\r\n```\r\n\r\n### useAlert Hook\r\n\r\n```tsx\r\nimport { useAlert } from '@astra-peru/expo-ui-components';\r\nimport { AlertModal } from '@astra-peru/expo-ui-components';\r\n\r\nfunction MyComponent() {\r\n  const { alertState, showAlert, showConfirm, hideAlert } = useAlert();\r\n\r\n  return (\r\n    <>\r\n      <Button onPress={() => showAlert('Título', 'Mensaje')}>\r\n        Mostrar Alerta\r\n      </Button>\r\n      \r\n      <AlertModal\r\n        visible={alertState.visible}\r\n        title={alertState.title}\r\n        message={alertState.message}\r\n        buttons={alertState.buttons}\r\n        onClose={hideAlert}\r\n      />\r\n    </>\r\n  );\r\n}\r\n```\r\n\r\n### Utilidades de Fecha\r\n\r\n```tsx\r\nimport { formatDateForDisplay, formatDateToString, parseDateSafely } from '@astra-peru/expo-ui-components';\r\n\r\nconst date = new Date();\r\nconst display = formatDateForDisplay(date); // \"15/01/2024\"\r\nconst apiFormat = formatDateToString(date); // \"2024-01-15\"\r\nconst parsed = parseDateSafely(\"2024-01-15\"); // Date object\r\n```\r\n\r\n### DeviceSafeArea\r\n\r\n```tsx\r\nimport { DeviceSafeArea } from '@astra-peru/expo-ui-components';\r\n\r\nexport default function App() {\r\n  return (\r\n    <DeviceSafeArea>\r\n      <YourContent />\r\n    </DeviceSafeArea>\r\n  );\r\n}\r\n```\r\n\r\n## 🛠️ Hooks Disponibles\r\n\r\n### useAlert\r\n\r\nHook para mostrar alertas y confirmaciones:\r\n\r\n```tsx\r\nconst {\r\n  alertState,\r\n  showAlert,\r\n  showConfirm,\r\n  showDestructive,\r\n  showCustom,\r\n  hideAlert,\r\n} = useAlert();\r\n```\r\n\r\n## 📝 Tipos Disponibles\r\n\r\n### ApiError\r\n\r\n```typescript\r\ninterface ApiError {\r\n  message: string;\r\n  status?: number;\r\n  code?: string;\r\n  errors?: Record<string, string[]>;\r\n  title?: string;\r\n  traceId?: string;\r\n}\r\n```\r\n\r\n## 🐛 Troubleshooting\r\n\r\n### Los estilos de Tailwind no se aplican\r\n\r\n1. Verifica que `global.css` esté importado en `app/_layout.tsx`\r\n2. Asegúrate de que `tailwind.config.js` incluya la ruta del paquete en `content`\r\n3. Reinicia el servidor de desarrollo\r\n\r\n### Error: \"Cannot find module 'nativewind'\"\r\n\r\nInstala NativeWind:\r\n\r\n```bash\r\nnpm install nativewind\r\n```\r\n\r\n### Los componentes no se renderizan correctamente\r\n\r\n1. Verifica que todas las dependencias peer estén instaladas\r\n2. Asegúrate de que Babel y Metro estén configurados correctamente\r\n3. Revisa que `nativewind-env.d.ts` exista\r\n\r\n### Error de tipos TypeScript\r\n\r\nAsegúrate de tener `nativewind-env.d.ts` con:\r\n\r\n```typescript\r\n/// <reference types=\"nativewind/types\" />\r\n```\r\n\r\nY que esté incluido en tu `tsconfig.json`.\r\n\r\n## 📄 Licencia\r\n\r\nMIT\r\n\r\n## 🤝 Contribuir\r\n\r\nEste es un paquete privado. Para contribuir, contacta al equipo de desarrollo.\r\n\r\n## 📁 Proyecto de Ejemplo\r\n\r\nEste repositorio incluye un proyecto de ejemplo completo en la carpeta `example/` que demuestra el uso de todos los componentes.\r\n\r\n### Ejecutar el Ejemplo\r\n\r\n```bash\r\ncd example\r\nnpm install\r\nnpm start\r\n```\r\n\r\nEl proyecto de ejemplo:\r\n- Usa la versión publicada de `@astra/expo-ui-components` desde npm\r\n- Incluye un formulario completo con validación\r\n- Demuestra todos los componentes disponibles\r\n- Está configurado con Expo Router y NativeWind\r\n\r\nPara más información, consulta [example/README.md](./example/README.md).\r\n\r\n**Nota para Desarrolladores**: Si estás desarrollando el paquete y quieres probar cambios localmente, consulta [example/DEVELOPMENT.md](./example/DEVELOPMENT.md) para configurar desarrollo local.\r\n\r\n## 📞 Soporte\r\n\r\nPara problemas o preguntas, abre un issue en el repositorio del proyecto.\r\n\r\n## 📦 Publicación\r\n\r\nPara información sobre cómo publicar este paquete, consulta [PUBLISHING.md](./PUBLISHING.md).\r\n\r\n","readmeFilename":"README.md"}