luis-ui-lib 1.1.5

package/README.md

@@ -0,0 +1,101 @@
+# LUIS (Lean User Interface System)
+
+LUIS (Lean User Interface System) é um design system desenvolvido para fornecer uma biblioteca de componentes React.js flexí­vel e eficiente, garantindo consistência visual e facilidade de uso em diferentes projetos.
+
+## Instalação
+
+Você pode instalar a biblioteca utilizando npm, yarn ou pnpm:
+
+### Usando npm
+```bash
+npm install @luis-ui/lib
+```
+
+### Usando yarn
+```bash
+yarn add @luis-ui/lib
+```
+
+### Usando pnpm
+```bash
+pnpm add @luis-ui/lib
+```
+
+## Configuração
+
+Para utilizar os componentes da biblioteca, adicione as seguintes configurações ao seu projeto:
+
+1. No seu arquivo `global.css`, importe os estilos do design system:
+
+```css
+@layer reset, base, tokens, recipes, utilities;
+@import url('@luis-ui/styles.css');/lib
+```
+
+2. Importe e utilize um componente em seu projeto:
+
+```tsx
+import { Button } from "@luis-ui";/lib
+
+function App() {
+  return (
+    <Button style="gradient" spacing="noSpacing" fullWidth>
+      Entrar
+    </Button>
+  );
+}
+```
+
+## Estilização e Extensibilidade
+
+Se você deseja estender os estilos e criar novos componentes utilizando o Panda CSS, siga os passos abaixo:
+
+1. Instale o Panda CSS:
+
+```bash
+yarn add -D @pandacss/dev
+```
+
+2. Inicialize o Panda CSS no projeto:
+
+```bash
+yarn panda init --postcss
+```
+
+3. Adicione o seguinte script no `package.json` para gerar os estilos:
+
+```json
+"scripts": {
+  "prepare": "panda codegen"
+}
+```
+
+4. Configure o arquivo `panda.config.ts` para incluir os componentes da biblioteca:
+
+```ts
+import { defineConfig } from "@pandacss/dev";
+import { auroraPreset } from "@luis-ui";/lib
+
+export default defineConfig({
+  preflight: true,
+  jsxFramework: "react",
+  presets: [auroraPreset],
+  include: [
+    "./src/components/**/*.{ts,tsx,js,jsx}",
+    "./src/pages/**/*.{ts,tsx,js,jsx}",
+    "./node_modules/@luis-ui/dist/panda.buildinfo.json"/lib
+  ],
+  outExtension: "js",
+  outdir: "styled-system",
+});
+```
+
+## Documentação Adicional
+
+Para mais detalhes sobre a configuração do Panda CSS em diferentes frameworks, consulte:
+
+- [Configuração para Vite](https://panda-css.com/docs/installation/vite)
+- [Configuração para Next.js (App Router)](https://panda-css.com/docs/installation/nextjs?value=app-dir)
+- [Configuração para Next.js (Pages Router)](https://panda-css.com/docs/installation/nextjs?value=pages-dir)
+
+Com isso, seu projeto estará pronto para utilizar os componentes do LUIS com total flexibilidade e performance!