@berdsk/ui 0.2.7 → 0.2.9

package/docs/Button.md

@@ -0,0 +1,76 @@
+# Button
+
+O componente `Button` é um elemento versátil para ações do usuário, suportando diversas variantes, tamanhos e estados.
+
+## Importação
+
+```tsx
+import { Button } from '@berdsk/ui';
+```
+
+## Propriedades
+
+O componente aceita todas as propriedades padrão de um elemento `<button>` ou `<a>` (dependendo do uso de `href`), além das seguintes:
+
+| Propriedade | Tipo                                                | Padrão      | Descrição                                                  |
+| :---------- | :-------------------------------------------------- | :---------- | :--------------------------------------------------------- |
+| `variant`   | `'solid' \| 'outlined' \| 'ghost' \| 'link'`        | `'solid'`   | Estilo visual do botão.                                    |
+| `color`     | `'primary' \| 'secondary' \| 'danger' \| 'success'` | `'primary'` | Cor temática do botão.                                     |
+| `size`      | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`     | `'md'`      | Tamanho do botão.                                          |
+| `rounded`   | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'full'`  | `'md'`      | Arredondamento das bordas.                                 |
+| `leftIcon`  | `React.ReactNode`                                   | -           | Ícone exibido à esquerda do texto.                         |
+| `rightIcon` | `React.ReactNode`                                   | -           | Ícone exibido à direita do texto.                          |
+| `fullWidth` | `boolean`                                           | `false`     | Se verdadeiro, o botão ocupa toda a largura do container.  |
+| `href`      | `string`                                            | -           | Se fornecido, o botão será renderizado como uma tag `<a>`. |
+
+## Exemplo de Uso
+
+### Variantes e Cores
+
+```tsx
+<Button variant="solid" color="primary">Primário Sólido</Button>
+<Button variant="outlined" color="danger">Perigo Outlined</Button>
+<Button variant="ghost" color="success">Sucesso Ghost</Button>
+<Button variant="link">Link</Button>
+```
+
+### Com Ícones
+
+```tsx
+import { Button, Icon } from '@berdsk/ui';
+
+<Button leftIcon={<Icon className="fas fa-plus" />}>
+  Adicionar
+</Button>
+
+<Button
+  variant="outlined"
+  rightIcon={<Icon className="fas fa-arrow-right" />}
+>
+  Continuar
+</Button>
+
+{/* Botão apenas com ícone */}
+<Button rounded="full" leftIcon={<Icon className="fas fa-search" />} />
+```
+
+### Como Link
+
+```tsx
+<Button href="https://berdsk.com.br" variant="link">
+  Visitar Site
+</Button>
+```
+
+## Estilização e Tailwind
+
+O `Button` utiliza utilitários do Tailwind internamente (via injeção de estilos do `ThemeProvider`) e tokens temáticos mapeados para variáveis CSS. Em projetos que usam Tailwind, você pode sobrescrever/estender estilos com `className`:
+
+```tsx
+<Button className="shadow-md hover:scale-105 transition-transform">Ação</Button>
+<Button variant="outlined" color="secondary" className="rounded-full" />
+```
+
+- As cores respeitam o tema: `bg-primary`, `text-secondary`, `border-danger`, etc.
+- Os tamanhos afetam altura e paddings (`h-10 px-4`, etc.). Para botão apenas com ícone, a largura é ajustada automaticamente e `aspect-square` é aplicado.
+- `rounded` mapeia para `rounded-none|xs|sm|md|lg|full` com valores vindos do tema.

package/docs/Icon.md

@@ -0,0 +1,44 @@
+# Icon
+
+O componente `Icon` é utilizado para renderizar ícones na interface, carregando automaticamente o CDN de ícones da Berdsk.
+
+## Importação
+
+```tsx
+import { Icon } from '@berdsk/ui';
+```
+
+## Propriedades
+
+O componente aceita todas as propriedades padrão de um elemento `<i>` do HTML (através de `React.HTMLAttributes<HTMLElement>`), além das seguintes:
+
+| Propriedade | Tipo     | Obrigatório | Descrição                                                                                                                      |
+| :---------- | :------- | :---------- | :----------------------------------------------------------------------------------------------------------------------------- |
+| `className` | `string` | Sim         | Classes CSS para o ícone (ex: `fas fa-user`). Você pode combinar com utilitários Tailwind como `text-primary`, `text-xl`, etc. |
+
+## Funcionamento
+
+Ao ser utilizado pela primeira vez, o componente injeta automaticamente no `<head>` do documento:
+
+1. Um link de `preconnect` para `https://cdn.berdsk.com.br`.
+2. O link para o CSS global de ícones: `https://cdn.berdsk.com.br/berdsk-ui/icons/all.css`.
+
+## Exemplo de Uso
+
+```tsx
+import { Icon } from '@berdsk/ui';
+
+function MyComponent() {
+  return (
+    <div className="flex gap-gap">
+      <Icon className="fas fa-user text-primary" />
+      <Icon className="fas fa-home text-xl" />
+    </div>
+  );
+}
+```
+
+### Dica
+
+- Quando usado com Tailwind, utilize `text-*` para cor/tamanho (ex.: `text-primary`, `text-2xl`).
+- Em projetos sem Tailwind, você ainda pode customizar via `style` inline (ex.: `style={{ color: '#444', fontSize: 20 }}`).

package/docs/Section.md

@@ -0,0 +1,92 @@
+# Section
+
+O componente `Section` ajuda a estruturar áreas da página com largura total ou centralização automática, além de oferecer divisores decorativos no topo e/ou base.
+
+## Importação
+
+```tsx
+import { Section } from '@berdsk/ui';
+```
+
+## Propriedades
+
+| Propriedade          | Tipo               | Padrão        | Descrição                                                                        |
+| :------------------- | :----------------- | :------------ | :------------------------------------------------------------------------------- | ----- | ----------------------------- | ------- | ----------- | -------------------------------- |
+| `as`                 | `'section'         | 'header'      | 'footer'                                                                         | 'nav' | 'article'                     | 'main'` | `'section'` | Elemento HTML a ser renderizado. |
+| `fullWidth`          | `boolean`          | `false`       | Se `true`, renderiza os filhos ocupando 100% da largura (sem container central). |
+| `screenHeight`       | `boolean`          | `false`       | Se `true`, a altura mínima será a altura total da tela (`min-h-screen`).         |
+| `flex`               | `boolean`          | `false`       | Habilita comportamento flex para a `Section` (`flex-1` quando aplicável).        |
+| `centerX`            | `boolean`          | `false`       | Centraliza conteúdo no eixo X (horizontal).                                      |
+| `centerY`            | `boolean`          | `false`       | Centraliza conteúdo no eixo Y (vertical).                                        |
+| `containerClassName` | `string`           | `''`          | Classes extras aplicadas ao container interno quando `fullWidth` é `false`.      |
+| `divisorTop`         | `{ variant: 'wavy' | 'wavy-simple' | 'arched'; color?: string; className?: string; height?: number; }`                | `-`   | Exibe um divisor SVG no topo. |
+| `divisorBottom`      | `{ variant: 'wavy' | 'wavy-simple' | 'arched'; color?: string; className?: string; height?: number; }`                | `-`   | Exibe um divisor SVG na base. |
+| `className`          | `string`           | `''`          | Classes adicionais para a `Section` (útil para Tailwind).                        |
+
+## Comportamento do Container
+
+- Quando `fullWidth = false` (padrão): o conteúdo é envolvido por um container central (`max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8`).
+- Quando `fullWidth = true`: os filhos são renderizados diretamente, ocupando toda a largura disponível.
+
+## Divisores (Dividers)
+
+- `variant`: Escolha entre `wavy`, `wavy-simple` e `arched`.
+- `color`: Cor do divisor. Aceita cores CSS (ex: `#fff`, `rgb(255,0,0)`) ou qualquer classe do Tailwind (ex: `text-primary-200`, `bg-sky-500`, `fill-red-500`). O componente tenta detectar automaticamente se o valor é uma cor CSS ou uma classe Tailwind. Por padrão usa `currentColor`.
+- `height`: Altura em pixels (padrão `100`).
+- `className`: Classes extras; ex.: `text-primary/60` para aplicar opacidade com Tailwind.
+
+### Comportamento dos Divisores
+
+Os divisores são posicionados de forma absoluta no topo ou base **do lado de fora** da seção (`z-50`). Eles utilizam tradução negativa (`translate-y`) para garantir que a transição entre seções seja suave e decorativa, sem ocupar espaço no fluxo do documento.
+
+**Dica de Design:** Como os divisores ficam fora da seção, eles geralmente sobrepõem a seção vizinha. Certifique-se de que as cores dos divisores combinem com as seções adjacentes para um efeito visual harmonioso. Se você tiver problemas de visibilidade (ex: divisor sumindo sob outra seção), pode ser necessário ajustar o `z-index` das seções em seu projeto.
+
+## Exemplos
+
+### Seção padrão centralizada
+
+```tsx
+<Section>
+  <h1 className="text-2xl">Título</h1>
+  <p>Conteúdo</p>
+</Section>
+```
+
+### Full width com centralização e altura da tela
+
+```tsx
+<Section fullWidth screenHeight centerX centerY className="bg-primary/5">
+  <div className="text-center">
+    <h2 className="text-xl text-primary">Bem-vindo</h2>
+    <p>Seção com 100% da largura e altura da tela.</p>
+  </div>
+</Section>
+```
+
+### Com divisores decorativos
+
+```tsx
+<Section
+  screenHeight
+  centerX
+  centerY
+  className="bg-secondary/10"
+  divisorTop={{ variant: 'wavy', className: 'text-secondary', height: 80 }}
+  divisorBottom={{
+    variant: 'arched',
+    className: 'text-secondary',
+    height: 120,
+  }}
+>
+  <div className="text-center">
+    <h2 className="text-xl">Seção com Divisores</h2>
+    <p>Topo ondulado e base arqueada.</p>
+  </div>
+</Section>
+```
+
+## Tailwind e Tema
+
+- A `Section` utiliza utilitários como `relative`, `w-full`, `min-h-screen`, `flex`, `items-center`, `justify-center`, etc.
+- Em projetos sem Tailwind, o `ThemeProvider` injeta os utilitários essenciais para funcionamento out-of-the-box.
+- Em projetos com Tailwind, use `className` para estender o visual. As cores `primary|secondary|danger|success` vêm do tema via variáveis CSS e mapeamentos no Tailwind.

package/docs/Theme.md

@@ -0,0 +1,158 @@
+# Tematização (ThemeProvider)
+
+A biblioteca `@berdsk/ui` utiliza um sistema de tematização baseado em CSS Variables para garantir que os componentes sejam consistentes e facilmente customizáveis.
+
+## Uso Básico
+
+Para que os estilos dos componentes funcionem corretamente e para ter acesso ao esquema de cores padrão, envolva sua aplicação com o `ThemeProvider`.
+
+```tsx
+import { ThemeProvider } from '@berdsk/ui';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <YourAppContent />
+    </ThemeProvider>
+  );
+}
+```
+
+## Customização
+
+Você pode passar um objeto `theme` para o `ThemeProvider` para sobrescrever as cores, espaçamentos e arredondamentos padrão.
+
+```tsx
+import { ThemeProvider, Button } from '@berdsk/ui';
+
+const myTheme = {
+  colors: {
+    primary: '#6200ee',
+    secondary: '#03dac6',
+    danger: '#b00020',
+    success: '#4caf50',
+  },
+  spacing: {
+    gap: '1rem',
+  },
+  border: {
+    color: '#e0e0e0',
+    size: '2px',
+    radius: {
+      md: '8px',
+      full: '50px',
+    },
+  },
+};
+
+function App() {
+  return (
+    <ThemeProvider theme={myTheme}>
+      <Button color="primary">Meu Botão Customizado</Button>
+    </ThemeProvider>
+  );
+}
+```
+
+## Integração com Tailwind (opcional)
+
+A biblioteca já funciona "zero-config". Caso seu projeto utilize Tailwind, você pode aproveitar os tokens do tema mapeados para utilitários Tailwind:
+
+- Cores: `bg-primary`, `text-secondary`, `border-danger`, `bg-success`, etc.
+- Bordas: `rounded-none|xs|sm|md|lg|full` (valores vindos do tema).
+- Espaçamento customizado: `gap-gap`.
+
+Exemplo de `tailwind.config.js` (já incluso na biblioteca como referência):
+
+```js
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'var(--berdsk-color-primary)',
+        secondary: 'var(--berdsk-color-secondary)',
+        danger: 'var(--berdsk-color-danger)',
+        success: 'var(--berdsk-color-success)',
+      },
+      borderRadius: {
+        none: 'var(--berdsk-rounded-none)',
+        xs: 'var(--berdsk-rounded-xs)',
+        sm: 'var(--berdsk-rounded-sm)',
+        md: 'var(--berdsk-rounded-md)',
+        lg: 'var(--berdsk-rounded-lg)',
+        full: 'var(--berdsk-rounded-full)',
+      },
+      spacing: {
+        gap: 'var(--berdsk-spacing-gap)',
+      },
+    },
+  },
+  plugins: [],
+};
+```
+
+Observações:
+
+- Em projetos sem Tailwind, o `ThemeProvider` injeta utilitários essenciais (usados por `Button`, `Icon`, `Section`) para funcionamento imediato.
+- Em projetos com Tailwind, utilize `className` para estender/ajustar o visual facilmente.
+
+## Tipografia e Fontes do Next.js
+
+Para utilizar fontes do Next.js (`next/font/google`) no `ThemeProvider`, você pode passar o `fontFamily` diretamente do objeto de estilo da fonte.
+
+```tsx
+'use client';
+
+import { ThemeProvider } from '@berdsk/ui';
+import { Zain } from 'next/font/google';
+import { PropsWithChildren } from 'react';
+
+const zain = Zain({
+  subsets: ['latin'],
+  weight: ['400', '700'],
+});
+
+const Theme = ({ children }: PropsWithChildren) => {
+  return (
+    <ThemeProvider
+      theme={{
+        typography: {
+          fontFamily: zain.style.fontFamily,
+          fontWeight: '700',
+        },
+      }}
+    >
+      {children}
+    </ThemeProvider>
+  );
+};
+
+export default Theme;
+```
+
+## Esquema de Cores Padrão
+
+Por padrão, a biblioteca utiliza as seguintes cores:
+
+| Nome           | Valor Hex | Variável CSS               |
+| :------------- | :-------- | :------------------------- |
+| `primary`      | `#007bff` | `--berdsk-color-primary`   |
+| `secondary`    | `#6c757d` | `--berdsk-color-secondary` |
+| `danger`       | `#dc3545` | `--berdsk-color-danger`    |
+| `success`      | `#28a745` | `--berdsk-color-success`   |
+| `border.color` | `#dee2e6` | `--berdsk-border-color`    |
+| `border.size`  | `1px`     | `--berdsk-border-size`     |
+| `spacing.gap`  | `0.5rem`  | `--berdsk-spacing-gap`     |
+
+## Arredondamentos Padrão (border.radius)
+
+| Nome   | Valor      | Variável CSS            |
+| :----- | :--------- | :---------------------- |
+| `none` | `0`        | `--berdsk-rounded-none` |
+| `xs`   | `0.125rem` | `--berdsk-rounded-xs`   |
+| `sm`   | `0.25rem`  | `--berdsk-rounded-sm`   |
+| `md`   | `0.375rem` | `--berdsk-rounded-md`   |
+| `lg`   | `0.5rem`   | `--berdsk-rounded-lg`   |
+| `full` | `9999px`   | `--berdsk-rounded-full` |

package/package.json

@@ -1,53 +1,57 @@
-{
-  "name": "@berdsk/ui",
-  "version": "0.2.7",
-  "description": "Biblioteca de componentes UI profissional da Berdsk",
-  "author": "Berdsk",
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "keywords": [],
-  "sideEffects": false,
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "engines": {
-    "node": ">=18"
-  },
-  "scripts": {
-    "build": "tsup",
-    "clean": "rimraf dist",
-    "prepublishOnly": "npm run build",
-    "dev": "tsup --watch"
-  },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.0",
-    "autoprefixer": "^10.4.24",
-    "classnames": "^2.5.1",
-    "postcss": "^8.5.6",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "rimraf": "^5.0.0",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.18",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
-  }
-}
+{
+  "name": "@berdsk/ui",
+  "version": "0.2.9",
+  "description": "Biblioteca de componentes UI profissional da Berdsk",
+  "author": "Berdsk",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "keywords": [],
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "docs"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rimraf dist",
+    "prepublishOnly": "npm run build",
+    "dev": "tsup --watch",
+    "format": "prettier --write ."
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.0",
+    "autoprefixer": "^10.4.24",
+    "classnames": "^2.5.1",
+    "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "rimraf": "^5.0.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}

package/dist/chunk-ACL5MABU.js

@@ -1,2 +0,0 @@
-import {a}from'./chunk-JD5SEMO3.js';import {jsx}from'react/jsx-runtime';var s=({className:e,...o})=>jsx("i",{className:a(e),...o});export{s as a};//# sourceMappingURL=chunk-ACL5MABU.js.map
-//# sourceMappingURL=chunk-ACL5MABU.js.map

package/dist/chunk-ACL5MABU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Icon.tsx"],"names":["Icon","className","props","jsx","cn"],"mappings":"wEAOO,IAAMA,EAA4B,CAAC,CAAE,UAAAC,CAAAA,CAAW,GAAGC,CAAM,CAAA,GACvDC,IAAC,GAAA,CAAA,CAAE,SAAA,CAAWC,EAAGH,CAAS,CAAA,CAAI,GAAGC,CAAAA,CAAO","file":"chunk-ACL5MABU.js","sourcesContent":["import * as React from \"react\";\r\nimport cn from \"../utils/cn\";\r\n\r\nexport interface IconProps extends React.HTMLAttributes<HTMLElement> {\r\n  className: string;\r\n}\r\n\r\nexport const Icon: React.FC<IconProps> = ({ className, ...props }) => {\r\n  return <i className={cn(className)} {...props} />;\r\n};\r\n"]}

package/dist/chunk-ASY4HDST.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Section.tsx"],"names":["DivisorSVG","variant","color","className","height","position","hasColor","isCssColor","style","wrapperClasses","cn","naturalFlatSide","desiredTouchSide","svgCommonStyle","jsxs","jsx","Section","children","Component","fullWidth","screenHeight","flex","centerX","centerY","containerClassName","divisorTop","divisorBottom","props","isSectionColumn","sectionClasses","containerClasses","Section_default"],"mappings":"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","file":"chunk-ASY4HDST.cjs","sourcesContent":["import { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\r\nimport cn from \"../utils/cn\";\r\n\r\ntype DivisorVariant = \"wavy\" | \"wavy-simple\" | \"arched\";\r\n\r\ninterface DivisorOptions {\r\n  variant: DivisorVariant;\r\n  color?: string; // CSS color (hex, rgb, hsl ou token tailwind via className externa)\r\n  className?: string; // Classes adicionais (ex: text-primary-500)\r\n  height?: number; // altura em px (default 100)\r\n}\r\n\r\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\r\n  children: ReactNode;\r\n  as?: \"section\" | \"header\" | \"footer\" | \"nav\" | \"article\" | \"main\";\r\n  fullWidth?: boolean;\r\n  screenHeight?: boolean;\r\n  flex?: boolean;\r\n  centerX?: boolean;\r\n  centerY?: boolean;\r\n  containerClassName?: string;\r\n  divisorTop?: DivisorOptions;\r\n  divisorBottom?: DivisorOptions;\r\n}\r\n\r\nconst DivisorSVG = ({\r\n  variant,\r\n  color,\r\n  className,\r\n  height = 100,\r\n  position,\r\n}: DivisorOptions & { position: \"top\" | \"bottom\" }) => {\r\n  // Se não houver color nem className, usamos currentColor\r\n  const hasColor = !!color;\r\n  \r\n  // Verifica se o color passado parece uma classe Tailwind (não contém #, rgb, hsl e não é uma cor nomeada simples se quisermos ser rigorosos, \r\n  // mas geralmente se tem espaços ou começa com text-/bg-/fill- é tailwind)\r\n  // Uma abordagem melhor: se não contém caracteres especiais de cores CSS, tratamos como classe.\r\n  const isCssColor = hasColor && (color.includes(\"#\") || color.includes(\"rgb\") || color.includes(\"hsl\") || color.includes(\"(\"));\r\n\r\n  const style: CSSProperties = { \r\n    height,\r\n    ...(isCssColor ? { color } : {})\r\n  };\r\n\r\n  const wrapperClasses = cn(\r\n    \"absolute left-0 w-full z-50 pointer-events-none\",\r\n    position === \"top\" ? \"bottom-full\" : \"top-full\",\r\n    hasColor && !isCssColor ? color : \"\", // Se for classe Tailwind, joga no cn\r\n    className,\r\n  );\r\n\r\n  // Lado \"reto\" natural de cada SVG\r\n  const naturalFlatSide: Record<DivisorVariant, \"top\" | \"bottom\"> = {\r\n    wavy: \"bottom\",\r\n    \"wavy-simple\": \"top\",\r\n    arched: \"bottom\",\r\n  };\r\n\r\n  // Se o divisor está no TOPO da section (lado de fora), a base reta do SVG deve estar no BOTTOM\r\n  // (para encostar na borda superior da section).\r\n  // Se o divisor está na BASE da section (lado de fora), a base reta do SVG deve estar no TOP\r\n  // (para encostar na borda inferior da section).\r\n  const desiredTouchSide = position === \"top\" ? \"bottom\" : \"top\";\r\n  const needsFlip = naturalFlatSide[variant] !== desiredTouchSide;\r\n  const svgCommonStyle: CSSProperties = needsFlip\r\n    ? { transform: \"scaleY(-1)\", transformOrigin: \"center\" }\r\n    : {};\r\n\r\n  return (\r\n    <div className={wrapperClasses} style={style} aria-hidden>\r\n      {variant === \"wavy\" && (\r\n        <svg\r\n          width=\"100%\"\r\n          height=\"100%\"\r\n          viewBox=\"0 0 1280 140\"\r\n          preserveAspectRatio=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          style={svgCommonStyle}\r\n        >\r\n          <g fill=\"currentColor\">\r\n            <path\r\n              d=\"M1280 3.4C1050.59 18 1019.4 84.89 734.42 84.89c-320 0-320-84.3-640-84.3C59.4.59 28.2 1.6 0 3.4V140h1280z\"\r\n              fillOpacity=\".3\"\r\n            />\r\n            <path\r\n              d=\"M0 24.31c43.46-5.69 94.56-9.25 158.42-9.25 320 0 320 89.24 640 89.24 256.13 0 307.28-57.16 481.58-80V140H0z\"\r\n              fillOpacity=\".5\"\r\n            />\r\n            <path d=\"M1280 51.76c-201 12.49-242.43 53.4-513.58 53.4-320 0-320-57-640-57-48.85.01-90.21 1.35-126.42 3.6V140h1280z\" />\r\n          </g>\r\n        </svg>\r\n      )}\r\n      {variant === \"wavy-simple\" && (\r\n        <svg\r\n          width=\"100%\"\r\n          height=\"100%\"\r\n          viewBox=\"0 0 1280 140\"\r\n          preserveAspectRatio=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          style={svgCommonStyle}\r\n        >\r\n          <g fill=\"currentColor\">\r\n            <path d=\"M320 28C160 28 80 49 0 70V0h1280v70c-80 21-160 42-320 42-320 0-320-84-640-84z\" />\r\n          </g>\r\n        </svg>\r\n      )}\r\n      {variant === \"arched\" && (\r\n        <svg\r\n          width=\"100%\"\r\n          height=\"100%\"\r\n          viewBox=\"0 0 1280 140\"\r\n          preserveAspectRatio=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          style={svgCommonStyle}\r\n        >\r\n          <g fill=\"currentColor\">\r\n            <path\r\n              d=\"M725.29 101.2C325.22 122.48 0 0 0 0v140h1280V0s-154.64 79.92-554.71 101.2z\"\r\n              fillOpacity=\".3\"\r\n            />\r\n            <path\r\n              d=\"M556.45 119.74C953.41 140 1280 14 1280 14v126H0V0s159.5 99.48 556.45 119.74z\"\r\n              fillOpacity=\".5\"\r\n            />\r\n            <path d=\"M640 140c353.46 0 640-140 640-139v140H0V0s286.54 140 640 140z\" />\r\n          </g>\r\n        </svg>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const Section = ({\r\n  children,\r\n  as: Component = \"section\",\r\n  fullWidth = false,\r\n  screenHeight = false,\r\n  flex = false,\r\n  centerX = false,\r\n  centerY = false,\r\n  className = \"\",\r\n  containerClassName = \"\",\r\n  divisorTop,\r\n  divisorBottom,\r\n  ...props\r\n}: SectionProps) => {\r\n  const isSectionColumn = !!screenHeight;\r\n\r\n  const sectionClasses = cn(\r\n    \"relative w-full\",\r\n    screenHeight && \"min-h-screen\",\r\n    flex && \"flex-1\",\r\n    screenHeight && \"flex flex-col\",\r\n    (centerX || centerY) && \"flex\",\r\n    // Centralização quando é fullWidth ou screenHeight (flex-col)\r\n    centerX && (fullWidth || isSectionColumn) && \"items-center\",\r\n    centerY && (fullWidth || isSectionColumn) && \"justify-center\",\r\n    // Centralização quando é fullWidth e NÃO é coluna (flex-row padrão)\r\n    centerX && fullWidth && !isSectionColumn && \"justify-center\",\r\n    centerY && fullWidth && !isSectionColumn && \"items-center\",\r\n    className,\r\n  );\r\n\r\n  const containerClasses = cn(\r\n    \"mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl w-full\",\r\n    {\r\n      \"flex-1\": screenHeight,\r\n      flex: centerX || centerY,\r\n      \"justify-center\": centerX,\r\n      \"items-center\": centerY,\r\n    },\r\n    containerClassName,\r\n  );\r\n\r\n  return (\r\n    <Component className={sectionClasses} {...props}>\r\n      {divisorTop && (\r\n        <DivisorSVG\r\n          position=\"top\"\r\n          variant={divisorTop.variant}\r\n          color={divisorTop.color}\r\n          className={divisorTop.className}\r\n          height={divisorTop.height}\r\n        />\r\n      )}\r\n      {fullWidth ? (\r\n        children\r\n      ) : (\r\n        <div className={containerClasses}>{children}</div>\r\n      )}\r\n      {divisorBottom && (\r\n        <DivisorSVG\r\n          position=\"bottom\"\r\n          variant={divisorBottom.variant}\r\n          color={divisorBottom.color}\r\n          className={divisorBottom.className}\r\n          height={divisorBottom.height}\r\n        />\r\n      )}\r\n    </Component>\r\n  );\r\n};\r\n\r\nexport default Section;\r\n"]}

package/dist/chunk-BQKAOXAV.js

@@ -1,2 +0,0 @@
-import {a}from'./chunk-JD5SEMO3.js';import*as p from'react';import {jsxs,Fragment,jsx}from'react/jsx-runtime';var R=p.forwardRef(({children:s,variant:t="solid",color:u="primary",size:o="md",rounded:x="md",leftIcon:r,rightIcon:n,fullWidth:m=false,className:g="",href:c,...d},l)=>{let h={solid:{primary:"bg-primary text-white hover:brightness-90",secondary:"bg-secondary text-white hover:brightness-90",danger:"bg-danger text-white hover:brightness-90",success:"bg-success text-white hover:brightness-90"},outlined:{primary:"border-primary text-primary hover:bg-black/5 bg-transparent",secondary:"border-secondary text-secondary hover:bg-black/5 bg-transparent",danger:"border-danger text-danger hover:bg-black/5 bg-transparent",success:"border-success text-success hover:bg-black/5 bg-transparent"},ghost:{primary:"text-primary hover:bg-black/5 bg-transparent border-transparent",secondary:"text-secondary hover:bg-black/5 bg-transparent border-transparent",danger:"text-danger hover:bg-black/5 bg-transparent border-transparent",success:"text-success hover:bg-black/5 bg-transparent border-transparent"},link:{primary:"text-primary hover:opacity-80 underline bg-transparent border-none p-0 h-auto",secondary:"text-secondary hover:opacity-80 underline bg-transparent border-none p-0 h-auto",danger:"text-danger hover:opacity-80 underline bg-transparent border-none p-0 h-auto",success:"text-success hover:opacity-80 underline bg-transparent border-none p-0 h-auto"}},y={xs:"h-6 px-2 text-xs",sm:"h-8 px-3 text-sm",md:"h-10 px-4 text-base",lg:"h-12 px-6 text-lg",xl:"h-14 px-8 text-xl","2xl":"h-16 px-10 text-2xl"},f={xs:"w-6",sm:"w-8",md:"w-10",lg:"w-12",xl:"w-14","2xl":"w-16"},v={none:"rounded-none",xs:"rounded-xs",sm:"rounded-sm",md:"rounded-md",lg:"rounded-lg",full:"rounded-full"},w=!s&&(r||n),i=a("inline-flex items-center justify-center font-medium cursor-pointer transition-all border disabled:opacity-60 disabled:cursor-not-allowed gap-gap",t!=="link"?y[o]:"",t!=="link"&&w?`${f[o]} aspect-square px-0`:"",t!=="link"?v[x]:"",h[t][u],m?"w-full flex":"",g),b=jsxs(Fragment,{children:[r&&jsx("span",{className:"flex items-center justify-center",children:r}),s&&jsx("span",{className:a("text-center",{"flex-1":!!(r||n)}),children:s}),n&&jsx("span",{className:"flex items-center justify-center",children:n})]});return c?jsx("a",{href:c,className:i,ref:l,...d,children:b}):jsx("button",{className:i,ref:l,...d,children:b})});R.displayName="Button";export{R as a};//# sourceMappingURL=chunk-BQKAOXAV.js.map
-//# sourceMappingURL=chunk-BQKAOXAV.js.map

package/dist/chunk-BQKAOXAV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Button.tsx"],"names":["Button","children","variant","color","size","rounded","leftIcon","rightIcon","fullWidth","className","href","props","ref","variants","sizes","iconOnlySizes","roundness","isIconOnly","combinedClasses","cn","content","jsxs","Fragment","jsx"],"mappings":"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","file":"chunk-BQKAOXAV.js","sourcesContent":["import * as React from \"react\";\r\nimport { Icon } from \"./Icon\";\r\nimport cn from \"../utils/cn\";\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\r\n  variant?: \"solid\" | \"outlined\" | \"ghost\" | \"link\";\r\n  color?: \"primary\" | \"secondary\" | \"danger\" | \"success\";\r\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\r\n  rounded?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"full\";\r\n  leftIcon?: React.ReactNode;\r\n  rightIcon?: React.ReactNode;\r\n  fullWidth?: boolean;\r\n  href?: string;\r\n}\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\r\n  (\r\n    {\r\n      children,\r\n      variant = \"solid\",\r\n      color = \"primary\",\r\n      size = \"md\",\r\n      rounded = \"md\",\r\n      leftIcon,\r\n      rightIcon,\r\n      fullWidth = false,\r\n      className = \"\",\r\n      href,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const variants = {\r\n      solid: {\r\n        primary: \"bg-primary text-white hover:brightness-90\",\r\n        secondary: \"bg-secondary text-white hover:brightness-90\",\r\n        danger: \"bg-danger text-white hover:brightness-90\",\r\n        success: \"bg-success text-white hover:brightness-90\",\r\n      },\r\n      outlined: {\r\n        primary: \"border-primary text-primary hover:bg-black/5 bg-transparent\",\r\n        secondary: \"border-secondary text-secondary hover:bg-black/5 bg-transparent\",\r\n        danger: \"border-danger text-danger hover:bg-black/5 bg-transparent\",\r\n        success: \"border-success text-success hover:bg-black/5 bg-transparent\",\r\n      },\r\n      ghost: {\r\n        primary: \"text-primary hover:bg-black/5 bg-transparent border-transparent\",\r\n        secondary: \"text-secondary hover:bg-black/5 bg-transparent border-transparent\",\r\n        danger: \"text-danger hover:bg-black/5 bg-transparent border-transparent\",\r\n        success: \"text-success hover:bg-black/5 bg-transparent border-transparent\",\r\n      },\r\n      link: {\r\n        primary: \"text-primary hover:opacity-80 underline bg-transparent border-none p-0 h-auto\",\r\n        secondary: \"text-secondary hover:opacity-80 underline bg-transparent border-none p-0 h-auto\",\r\n        danger: \"text-danger hover:opacity-80 underline bg-transparent border-none p-0 h-auto\",\r\n        success: \"text-success hover:opacity-80 underline bg-transparent border-none p-0 h-auto\",\r\n      },\r\n    };\r\n\r\n    const sizes = {\r\n      xs: \"h-6 px-2 text-xs\",\r\n      sm: \"h-8 px-3 text-sm\",\r\n      md: \"h-10 px-4 text-base\",\r\n      lg: \"h-12 px-6 text-lg\",\r\n      xl: \"h-14 px-8 text-xl\",\r\n      \"2xl\": \"h-16 px-10 text-2xl\",\r\n    };\r\n\r\n    const iconOnlySizes = {\r\n      xs: \"w-6\",\r\n      sm: \"w-8\",\r\n      md: \"w-10\",\r\n      lg: \"w-12\",\r\n      xl: \"w-14\",\r\n      \"2xl\": \"w-16\",\r\n    };\r\n\r\n    const roundness = {\r\n      none: \"rounded-none\",\r\n      xs: \"rounded-xs\",\r\n      sm: \"rounded-sm\",\r\n      md: \"rounded-md\",\r\n      lg: \"rounded-lg\",\r\n      full: \"rounded-full\",\r\n    };\r\n\r\n    const isIconOnly = !children && (leftIcon || rightIcon);\r\n\r\n    const combinedClasses = cn(\r\n      \"inline-flex items-center justify-center font-medium cursor-pointer transition-all border disabled:opacity-60 disabled:cursor-not-allowed gap-gap\",\r\n      variant !== \"link\" ? sizes[size] : \"\",\r\n      variant !== \"link\" && isIconOnly ? `${iconOnlySizes[size]} aspect-square px-0` : \"\",\r\n      variant !== \"link\" ? roundness[rounded] : \"\",\r\n      variants[variant][color],\r\n      fullWidth ? \"w-full flex\" : \"\",\r\n      className\r\n    );\r\n\r\n    const content = (\r\n      <>\r\n        {leftIcon && (\r\n          <span className=\"flex items-center justify-center\">\r\n            {leftIcon}\r\n          </span>\r\n        )}\r\n        {children && (\r\n          <span className={cn(\"text-center\", { \"flex-1\": !!(leftIcon || rightIcon) })}>\r\n            {children}\r\n          </span>\r\n        )}\r\n        {rightIcon && (\r\n          <span className=\"flex items-center justify-center\">\r\n            {rightIcon}\r\n          </span>\r\n        )}\r\n      </>\r\n    );\r\n\r\n    if (href) {\r\n      return (\r\n        <a\r\n          href={href}\r\n          className={combinedClasses}\r\n          ref={ref as React.ForwardedRef<HTMLAnchorElement>}\r\n          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\r\n        >\r\n          {content}\r\n        </a>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <button\r\n        className={combinedClasses}\r\n        ref={ref as React.ForwardedRef<HTMLButtonElement>}\r\n        {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\r\n      >\r\n        {content}\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n"]}