{"_id":"@carlosdavid0/ui-components","name":"@carlosdavid0/ui-components","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@carlosdavid0/ui-components","version":"1.0.0","description":"Biblioteca de componentes UI com TypeScript e NativeWind","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"tsc","dev":"tsc --watch","clean":"rm -rf lib","prepublishOnly":"npm run clean && npm run build"},"keywords":["react-native","typescript","nativewind","tailwind","ui","components"],"author":{"name":"SuperApp Team"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-native":">=0.60.0","nativewind":"^2.0.11"},"devDependencies":{"@types/react":"^18.2.0","@types/react-native":"^0.72.0","typescript":"^5.0.0","tailwindcss":"^3.3.0","nativewind":"^2.0.11"},"dependencies":{"clsx":"^2.0.0"},"repository":{"type":"git","url":"git+https://github.com/carlosdavid0/ui-components.git"},"bugs":{"url":"https://github.com/carlosdavid0/ui-components/issues"},"homepage":"https://github.com/carlosdavid0/ui-components#readme","_id":"@carlosdavid0/ui-components@1.0.0","_nodeVersion":"22.17.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-YtTnkGlSQCVRvijBrejHdVvQC6BZp5FhAGTe5cGIP8d4wr6JdeIUpdcSjTSxHO9yYhfSzM2lHuBsmARvtsC16Q==","shasum":"4889badaac418830bd266bf1893dffee9ca77dba","tarball":"https://registry.npmjs.org/@carlosdavid0/ui-components/-/ui-components-1.0.0.tgz","fileCount":23,"unpackedSize":26532,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIH+mmNeMcpKxruKtUL1vovmo9l7U/17A394dU0gsx267AiApAprVtJvD4ZkVtxvTyyOBqnDBr0agRs+rwW4x0wNxGw=="}]},"_npmUser":{"name":"carlosdavid0","email":"romao.carlosdavi@gmail.com","actor":{"name":"carlosdavid0","email":"romao.carlosdavi@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"carlosdavid0","email":"romao.carlosdavi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-components_1.0.0_1752155898351_0.27136251288657065"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-10T13:58:18.277Z","1.0.0":"2025-07-10T13:58:18.526Z","modified":"2025-07-10T13:58:18.762Z"},"maintainers":[{"name":"carlosdavid0","email":"romao.carlosdavi@gmail.com"}],"description":"Biblioteca de componentes UI com TypeScript e NativeWind","homepage":"https://github.com/carlosdavid0/ui-components#readme","keywords":["react-native","typescript","nativewind","tailwind","ui","components"],"repository":{"type":"git","url":"git+https://github.com/carlosdavid0/ui-components.git"},"author":{"name":"SuperApp Team"},"bugs":{"url":"https://github.com/carlosdavid0/ui-components/issues"},"license":"MIT","readme":"# SuperApp UI Components\n\nUma biblioteca de componentes UI moderna para React Native usando TypeScript e NativeWind.\n\n## 🚀 Características\n\n- ✅ **TypeScript**: Tipagem completa para melhor experiência de desenvolvimento\n- ✅ **NativeWind**: Sistema de design baseado em Tailwind CSS\n- ✅ **Customizável**: Componentes flexíveis e personalizáveis\n- ✅ **Acessível**: Componentes com suporte a testID e acessibilidade\n- ✅ **Moderno**: Sintaxe moderna e padrões atuais do React Native\n\n## 📦 Instalação\n\n```bash\nnpm install @superapp/ui-components\n# ou\nyarn add @superapp/ui-components\n```\n\n### Dependências Peer\n\nEsta biblioteca requer as seguintes dependências em seu projeto:\n\n```bash\nnpm install react react-native nativewind\n# ou\nyarn add react react-native nativewind\n```\n\n### Configuração do NativeWind\n\nCertifique-se de ter configurado o NativeWind em seu projeto. Adicione ao seu `tailwind.config.js`:\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\n    \"./App.{js,jsx,ts,tsx}\",\n    \"./src/**/*.{js,jsx,ts,tsx}\",\n    \"./node_modules/@superapp/ui-components/lib/**/*.{js,jsx,ts,tsx}\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};\n```\n\n## 🎯 Uso Básico\n\n```tsx\nimport React from \"react\";\nimport { View, Text, Button } from \"@superapp/ui-components\";\n\nexport default function App() {\n  return (\n    <View p={4} bg=\"gray-50\" flex justify=\"center\" align=\"center\">\n      <Text size=\"lg\" weight=\"bold\" mb={4}>\n        Bem-vindo ao SuperApp!\n      </Text>\n\n      <Button\n        title=\"Clique aqui\"\n        variant=\"primary\"\n        size=\"lg\"\n        onPress={() => console.log(\"Botão pressionado!\")}\n      />\n    </View>\n  );\n}\n```\n\n## 📚 Componentes\n\n### Button\n\nComponente de botão customizável com múltiplas variantes e estados.\n\n```tsx\nimport { Button } from '@superapp/ui-components';\n\n// Botão básico\n<Button title=\"Clique aqui\" onPress={() => {}} />\n\n// Botão com variante\n<Button\n  title=\"Sucesso\"\n  variant=\"success\"\n  size=\"lg\"\n  onPress={() => {}}\n/>\n\n// Botão outline\n<Button\n  title=\"Cancelar\"\n  variant=\"danger\"\n  outline\n  onPress={() => {}}\n/>\n\n// Botão com loading\n<Button\n  title=\"Carregando...\"\n  loading\n  onPress={() => {}}\n/>\n\n// Botão full width\n<Button\n  title=\"Full Width\"\n  fullWidth\n  onPress={() => {}}\n/>\n```\n\n**Props:**\n\n- `title: string` - Texto do botão\n- `onPress?: () => void` - Função chamada ao pressionar\n- `variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger'` - Variante de cor\n- `size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` - Tamanho do botão\n- `loading?: boolean` - Estado de carregamento\n- `disabled?: boolean` - Estado desabilitado\n- `fullWidth?: boolean` - Ocupa toda a largura disponível\n- `outline?: boolean` - Estilo outline\n- `icon?: React.ReactNode` - Ícone do botão\n- `iconPosition?: 'left' | 'right'` - Posição do ícone\n\n### Text\n\nComponente de texto com tipografia consistente.\n\n```tsx\nimport { Text } from '@superapp/ui-components';\n\n// Texto básico\n<Text>Texto simples</Text>\n\n// Texto com tamanho e peso\n<Text size=\"lg\" weight=\"bold\">Título</Text>\n\n// Texto com cor\n<Text variant=\"primary\">Texto colorido</Text>\n\n// Texto customizado\n<Text\n  size=\"xl\"\n  weight=\"semibold\"\n  align=\"center\"\n  color=\"#FF6B6B\"\n>\n  Texto customizado\n</Text>\n```\n\n**Props:**\n\n- `children: React.ReactNode` - Conteúdo do texto\n- `variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger'` - Variante de cor\n- `size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` - Tamanho do texto\n- `weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold'` - Peso da fonte\n- `align?: 'left' | 'center' | 'right' | 'justify'` - Alinhamento\n- `color?: string` - Cor customizada\n\n### View\n\nComponente de container flexível com sistema de layout.\n\n```tsx\nimport { View } from '@superapp/ui-components';\n\n// Container básico\n<View p={4}>\n  <Text>Conteúdo</Text>\n</View>\n\n// Layout flexível\n<View\n  direction=\"row\"\n  justify=\"between\"\n  align=\"center\"\n  p={4}\n>\n  <Text>Esquerda</Text>\n  <Text>Direita</Text>\n</View>\n\n// Card com sombra\n<View\n  bg=\"white\"\n  p={6}\n  borderRadius=\"lg\"\n  shadow\n  m={4}\n>\n  <Text>Conteúdo do card</Text>\n</View>\n```\n\n**Props:**\n\n- `children?: React.ReactNode` - Conteúdo do container\n- `flex?: boolean | number` - Propriedade flex\n- `direction?: 'row' | 'column'` - Direção do flexbox\n- `justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'` - Justify content\n- `align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline'` - Align items\n- `wrap?: boolean` - Flex wrap\n- `gap?: number` - Espaçamento entre elementos\n- `bg?: string` - Cor de fundo\n- `border?: boolean` - Adicionar borda\n- `borderColor?: string` - Cor da borda\n- `borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'` - Raio da borda\n- `shadow?: boolean` - Adicionar sombra\n\n**Props de Espaçamento:**\n\n- `m, mt, mr, mb, ml, mx, my` - Margin\n- `p, pt, pr, pb, pl, px, py` - Padding\n\n## 🎨 Sistema de Cores\n\nA biblioteca inclui um sistema de cores pré-definido:\n\n- **Primary**: Azul (`#3b82f6`)\n- **Secondary**: Cinza (`#64748b`)\n- **Success**: Verde (`#22c55e`)\n- **Warning**: Amarelo (`#f59e0b`)\n- **Danger**: Vermelho (`#ef4444`)\n\nCada cor possui 9 variações (50-900) disponíveis no Tailwind.\n\n## 🛠️ Utilitários\n\n### cn()\n\nUtilitário para combinar classes CSS de forma condicional:\n\n```tsx\nimport { cn } from \"@superapp/ui-components\";\n\nconst classes = cn(\n  \"base-class\",\n  condition && \"conditional-class\",\n  \"another-class\"\n);\n```\n\n## 🏗️ Build e Publicação\n\nPara fazer build da biblioteca:\n\n```bash\nnpm run build\n```\n\nPara publicar no NPM:\n\n```bash\nnpm publish\n```\n\n## 📄 Licença\n\nMIT\n\n---\n\nDesenvolvido com ❤️ pela equipe SuperApp\n","readmeFilename":"README.md","_rev":"1-211bcc1e6b834fc30155eac902d488c9"}