{"_id":"@ahmartecnologias/ahmardesign","_rev":"4-e8e8958397fb0ed563c2dd67ece434c1","name":"@ahmartecnologias/ahmardesign","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.0":{"name":"@ahmartecnologias/ahmardesign","version":"1.0.0","keywords":["css","css-framework","vanilla-css","ui-library","design-system","components","utilities","themes","no-dependencies","daisyui","tailwind"],"author":{"name":"Salomão"},"license":"MIT","_id":"@ahmartecnologias/ahmardesign@1.0.0","maintainers":[{"name":"salomaos","email":"salomao.ssn@gmail.com"}],"homepage":"https://github.com/salomaos/ahmardesign#readme","bugs":{"url":"https://github.com/salomaos/ahmardesign/issues"},"dist":{"shasum":"49223e59a113f822b5b78caff651bca66f40b1a3","tarball":"https://registry.npmjs.org/@ahmartecnologias/ahmardesign/-/ahmardesign-1.0.0.tgz","fileCount":5,"integrity":"sha512-EdVnG7sGQ1JCVQy0quht2PhaixmNyGZ7jCM+3tldm1RU2r8lhtacmoffEHejSTOASZJ3C8x/Pp/DUOGFUkY8jQ==","signatures":[{"sig":"MEUCIQDQHNxjT/NK+rSHH9V32/lS9MtOFMV0OF+D/qS9JZ9rsgIgO+GYCBteEccccJUssA4vSulyNLI1wwTVY7qNObUl62I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":319051},"main":"src/js/ahmardesign.js","style":"src/css/ahmardesign.css","exports":{".":{"style":"./src/css/ahmardesign.css","default":"./src/js/ahmardesign.js"},"./package.json":"./package.json","./ahmardesign.js":"./src/js/ahmardesign.js","./ahmardesign.css":"./src/css/ahmardesign.css"},"gitHead":"47a10651f11315e30fe83caf09156386345fead0","scripts":{"dev":"node scripts/build.js && vite","build":"node scripts/build.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"salomaos","email":"salomao.ssn@gmail.com"},"repository":{"url":"git+https://github.com/salomaos/ahmardesign.git","type":"git"},"_npmVersion":"11.17.0","description":"AHMAR Design - lightweight vanilla CSS component library inspired by Daisy UI. Pure CSS, no framework, 10 themes.","directories":{},"sideEffects":true,"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ahmardesign_1.0.0_1786324942875_0.7880363711906309","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@ahmartecnologias/ahmardesign","version":"1.1.0","keywords":["css","css-framework","vanilla-css","ui-library","design-system","components","utilities","themes","no-dependencies","daisyui","tailwind"],"author":{"name":"Salomão"},"license":"MIT","_id":"@ahmartecnologias/ahmardesign@1.1.0","maintainers":[{"name":"salomaos","email":"salomao.ssn@gmail.com"}],"homepage":"https://github.com/salomaos/ahmardesign#readme","bugs":{"url":"https://github.com/salomaos/ahmardesign/issues"},"dist":{"shasum":"2f1f8117f8ac42d8bcc7693ef355f952f120c569","tarball":"https://registry.npmjs.org/@ahmartecnologias/ahmardesign/-/ahmardesign-1.1.0.tgz","fileCount":5,"integrity":"sha512-4163eSXl0JchruPbjw5s7gaKCiz5yGHafPOMbE528YR6/CT0IlvF6eTsmnamuISawqJ2AhZ3hVcGwwD+pbLY+A==","signatures":[{"sig":"MEYCIQD/nhskEA83+IB42DgTBacqHSHH3v4qBBebNElGH4DwXAIhAKVSo2wOrOuFLZiHORvvov431uXK5UbQuAlVB79yZ/kI","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":326449},"main":"src/js/ahmardesign.js","style":"src/css/ahmardesign.css","exports":{".":{"style":"./src/css/ahmardesign.css","default":"./src/js/ahmardesign.js"},"./package.json":"./package.json","./ahmardesign.js":"./src/js/ahmardesign.js","./ahmardesign.css":"./src/css/ahmardesign.css"},"gitHead":"6888891ed9c794c3322fc8966c179a21cecc0be9","scripts":{"dev":"node scripts/build.js && vite","build":"node scripts/build.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"salomaos","email":"salomao.ssn@gmail.com"},"repository":{"url":"git+https://github.com/salomaos/ahmardesign.git","type":"git"},"_npmVersion":"11.17.0","description":"AHMAR Design - lightweight vanilla CSS component library inspired by Daisy UI. Pure CSS, no framework, 10 themes.","directories":{},"sideEffects":true,"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ahmardesign_1.1.0_1787930355693_0.1804113295628671","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@ahmartecnologias/ahmardesign","version":"1.1.1","keywords":["css","css-framework","vanilla-css","ui-library","design-system","components","utilities","themes","no-dependencies","daisyui","tailwind"],"author":{"name":"Salomão"},"license":"MIT","_id":"@ahmartecnologias/ahmardesign@1.1.1","maintainers":[{"name":"salomaos","email":"salomao.ssn@gmail.com"}],"homepage":"https://github.com/salomaos/ahmardesign#readme","bugs":{"url":"https://github.com/salomaos/ahmardesign/issues"},"dist":{"shasum":"42ce5f201bdaaa290981cd79eab05ebd5e6f1f3e","tarball":"https://registry.npmjs.org/@ahmartecnologias/ahmardesign/-/ahmardesign-1.1.1.tgz","fileCount":5,"integrity":"sha512-BTiy3jLInRttXgAcBEmwOi+yrKzqmBIJ/Nr6v1KYXhG6YhMXQwnyNqoTHx6GId3RlNO2OslUWgXN85dSfFC1MA==","signatures":[{"sig":"MEYCIQCLplFzy6UumTPMCwNZfFkaJ+z7lscfvjGTrL5T6y8KnwIhAMFMUMWT83w1pl3ajVMvvgje+RQA+x0idh7i16C1Ylmr","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIQCGd0n4vFaVSh3rZ8c87djDuPdJo5aYP3vCApMskMYdAwIgZC64fm/W3l5rdK8rYZazZ598GzhXa6UXwONZLouWiH8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":326451},"main":"src/js/ahmardesign.js","style":"src/css/ahmardesign.css","exports":{".":{"style":"./src/css/ahmardesign.css","default":"./src/js/ahmardesign.js"},"./package.json":"./package.json","./ahmardesign.js":"./src/js/ahmardesign.js","./ahmardesign.css":"./src/css/ahmardesign.css"},"gitHead":"2443db14c42973bc7b24e128761acf7ae6b12bd6","scripts":{"build":"node scripts/build.js","start":"node scripts/build.js && vite","prepublishOnly":"npm run build"},"_npmUser":{"name":"salomaos","email":"salomao.ssn@gmail.com"},"repository":{"url":"git+https://github.com/salomaos/ahmardesign.git","type":"git"},"_npmVersion":"11.17.0","description":"AHMAR Design - lightweight vanilla CSS component library inspired by Daisy UI. Pure CSS, no framework, 10 themes.","directories":{},"sideEffects":true,"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ahmardesign_1.1.1_1789953296086_0.12567962884529305","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"_id":"@ahmartecnologias/ahmardesign@1.2.0","bugs":{"url":"https://github.com/salomaos/ahmardesign/issues"},"dist":{"shasum":"ca20306df94fbac65f4eeb838b2d76f5fbc50c75","tarball":"https://registry.npmjs.org/@ahmartecnologias/ahmardesign/-/ahmardesign-1.2.0.tgz","fileCount":5,"integrity":"sha512-TNs4aAChPitWNzywIzE76WDHuSft3GP4RT85J/BAJHOqLkcNCPwiscYfQ1Zn86XajE6fX+RtThqZVNtSJYJpCA==","signatures":[{"sig":"MEYCIQCTBIosfm5jO7xYqvxYbnpG1QrfZ8MzkIwdVdZCQBdVcAIhAIg50s6z9CuxzrQ0+cqx1ZeprcLn0GnQvyv2hGSPJASj","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDfsAw3euaLnqkYaKMOVZPX2R9t3l2cEPhNMEmbqqaKAgIhAKUI3Jult84KfPskoFYTPXNOzYknF/9ApsltIwNG/uYY"}],"unpackedSize":441259},"main":"src/js/ahmardesign.js","name":"@ahmartecnologias/ahmardesign","style":"src/css/ahmardesign.css","author":{"name":"Salomão"},"exports":{".":{"style":"./src/css/ahmardesign.css","default":"./src/js/ahmardesign.js"},"./package.json":"./package.json","./ahmardesign.js":"./src/js/ahmardesign.js","./ahmardesign.css":"./src/css/ahmardesign.css"},"gitHead":"c0b0fb7956e195ab1c59fe56ef3de7c2e54f71f6","license":"MIT","scripts":{"build":"node scripts/build.js","start":"node scripts/build.js && vite","prepublishOnly":"npm run build"},"version":"1.2.0","_npmUser":{"name":"salomaos","email":"salomao.ssn@gmail.com"},"homepage":"https://github.com/salomaos/ahmardesign#readme","keywords":["css","css-framework","vanilla-css","ui-library","design-system","components","utilities","themes","no-dependencies","daisyui","tailwind"],"repository":{"url":"git+https://github.com/salomaos/ahmardesign.git","type":"git"},"_npmVersion":"11.17.0","description":"AHMAR Design - lightweight vanilla CSS component library inspired by Daisy UI. Pure CSS, no framework, 10 themes.","directories":{},"maintainers":[{"name":"salomaos","email":"salomao.ssn@gmail.com"}],"sideEffects":true,"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ahmardesign_1.2.0_1790613325620_0.15821509402063438"}}},"time":{"created":"2026-08-10T01:22:22.731Z","modified":"2026-09-28T16:35:25.945Z","1.0.0":"2026-08-10T01:22:23.007Z","1.1.0":"2026-08-28T15:19:15.842Z","1.1.1":"2026-09-21T01:14:56.179Z","1.2.0":"2026-09-28T16:35:25.739Z"},"bugs":{"url":"https://github.com/salomaos/ahmardesign/issues"},"author":{"name":"Salomão"},"license":"MIT","homepage":"https://github.com/salomaos/ahmardesign#readme","keywords":["css","css-framework","vanilla-css","ui-library","design-system","components","utilities","themes","no-dependencies","daisyui","tailwind"],"repository":{"url":"git+https://github.com/salomaos/ahmardesign.git","type":"git"},"description":"AHMAR Design - lightweight vanilla CSS component library inspired by Daisy UI. Pure CSS, no framework, 10 themes.","maintainers":[{"name":"salomaos","email":"salomao.ssn@gmail.com"}],"readme":"# AHMAR Design\n\n> **AHMAR Design** é uma biblioteca de componentes semânticos moderna, leve e premium construída inteiramente em **Vanilla CSS**, inspirada nos conceitos do Daisy UI. Ela permite criar interfaces responsivas e elegantes sem poluir o seu HTML com centenas de classes utilitárias, mantendo a flexibilidade e o controle do CSS puro.\n\n---\n\n## Funcionalidades Principais\n\n- **Componentes Semânticos**: Botões, cards, modais, formulários, alertas, menus, breadcrumbs, etc., com classes legíveis (`.btn`, `.card`, `.modal`).\n- **Sistema de Temas Dinâmico**: Suporte nativo a 10 temas prontos para uso (`light`, `dark`, `cupcake`, `retro`, `cyberpunk`, `synthwave`, `aqua`, `valentine`, `brutalist`, `brutalist-dark`) ativados via atributo `data-theme`.\n- **Utilitários Gerados Dinamicamente**: Um script de build gera utilitários de espaçamento, cores, tipografia, grid, flexbox, dimensões, posicionamento, transformações e visibilidade de forma automatizada — todos com variantes responsivas.\n- **Estados e pseudo-classes**: variantes `hover:` (cores, bordas, opacidade, decoração) e prefixos responsivos `sm:` `md:` `lg:` `xl:` `2xl:`.\n- **Responsividade Out-of-the-Box**: Suporte a breakpoints com prefixos (ex: `md:flex-row`, `lg:grid-cols-4`, `2xl:w-1/2`).\n- **Acessível por padrão**: anel de foco visível via `:focus-visible` e respeito a `prefers-reduced-motion` (tooltips/dropdowns também abrem por teclado).\n- **Utilitários JavaScript**: Helper global `AHMAR` para controle de temas, exibição de modais programaticamente e criação de alertas Toast interativos.\n- **Leve no fio**: ~49 KB gzip / ~19 KB brotli com 5.500+ classes (o `.css` fonte tem 403 KB porque não é minificado).\n\n---\n\n## Estrutura do Projeto\n\nAbaixo está a organização dos diretórios do projeto:\n\n```text\nahmardesign/\n├── scripts/\n│   ├── build.js            # Compila o CSS e gera as escalas dinâmicas de utilitários\n│   └── audit-usage.mjs     # Audita quais classes de um app consumidor não existem no bundle\n├── src/\n│   ├── css/\n│   │   ├── ahmardesign.css   # Arquivo final CSS compilado (gerado pelo build)\n│   │   ├── base.css          # Reset de CSS básico e estilos base globais\n│   │   ├── components.css    # Definições de componentes semânticos (.btn, .card, etc.)\n│   │   ├── utilities.css     # Utilitários estáticos (sombras, bordas arredondadas, etc.)\n│   │   └── variables.css     # Variáveis CSS e definições de tokens dos 10 temas\n│   └── js/\n│       └── ahmardesign.js    # Utilitários JavaScript helper (gerenciamento de temas, toasts, etc.)\n├── index.html            # Playground e página de documentação interativa do projeto\n├── AGENTS.md             # Regras de arquitetura e fluxo de trabalho para agentes/maintenedores\n├── CHANGELOG.md          # Histórico de versões\n├── package.json          # Configurações do npm e scripts de execução/build\n└── README.md             # Documentação do projeto (este arquivo)\n```\n\n---\n\n## Como Utilizar\n\n### 1. Instalação das Dependências\n\nPara rodar o ambiente de desenvolvimento, você precisará instalar as dependências do projeto (principalmente o Vite para servir a página de documentação):\n\n```bash\nnpm install\n```\n\n### 2. Executando em Desenvolvimento\n\nPara rodar o servidor de desenvolvimento com hot-reload automático do Vite e recompilação inicial do CSS:\n\n```bash\nnpm run dev\n```\n\nO projeto estará disponível por padrão em `http://localhost:5173`.\n\n### 3. Compilando o CSS para Produção\n\nPara gerar uma nova versão compilada e otimizada do arquivo `ahmardesign.css` a partir dos arquivos fonte:\n\n```bash\nnpm run build\n```\n\nEste script concatenará as variáveis de tema, a folha base de reset, os componentes semânticos, os utilitários estáticos e gerará os utilitários dinâmicos normais e responsivos.\n\n> **Consumidores não precisam do `scripts/`.** A pasta `scripts/` e o `build.js` existem apenas para **manutenção da biblioteca** (regenerar `src/css/ahmardesign.css` quando um utilitário/token é adicionado ou alterado). Para usar a lib no seu projeto basta o arquivo compilado `src/css/ahmardesign.css` e, se precisar das interações dinâmicas, o `src/js/ahmardesign.js`. O `build.js` **não** é publicado no pacote npm.\n\n---\n\n## Como Integrar no seu HTML\n\nPara utilizar o **AHMAR Design** em qualquer página HTML, basta importar o CSS compilado e o arquivo JavaScript (caso necessite de interações dinâmicas):\n\n```html\n<!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Minha Aplicação</title>\n  <!-- Link para o CSS compilado -->\n  <link rel=\"stylesheet\" href=\"src/css/ahmardesign.css\">\n</head>\n<body data-theme=\"light\">\n\n  <div class=\"container py-8\">\n    <h1 class=\"text-3xl font-bold text-primary mb-4\">Olá, AHMAR Design!</h1>\n    \n    <div class=\"card card-bordered p-6 mb-4\">\n      <h2 class=\"card-title\">Título do Card</h2>\n      <p class=\"opacity-80\">Este é um exemplo simples de card com um botão semântico.</p>\n      <div class=\"card-actions\">\n        <button class=\"btn btn-primary\" onclick=\"AHMAR.toast('Sucesso!', 'success')\">Clique-me</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Scripts Helpers -->\n  <script src=\"src/js/ahmardesign.js\"></script>\n</body>\n</html>\n```\n\n---\n\n## Integração com Bundlers e Frameworks (Vite, Svelte, React, Next.js)\n\nA biblioteca é **agnóstica de framework**: os componentes são CSS puro e o `AHMAR` usa apenas APIs do browser (eventos delegados no `document`, `localStorage`, `CustomEvent`), portanto não entra em conflito com a reatividade/estado do Svelte, React ou Vue.\n\n### Importação via package exports\n\nO `package.json` expõe o CSS e o JS através de subcaminhos (funciona com Vite e bundlers que respeitam o mapa de `exports`):\n\n```js\nimport '@ahmartecnologias/ahmardesign/ahmardesign.css';\nimport '@ahmartecnologias/ahmardesign/ahmardesign.js'; // expõe window.AHMAR e já roda AHMAR.init()\n```\n\n### SPA: elementos renderizados dinamicamente\n\nO `init()` é idempotente e os eventos são delegados no `document`, então componentes criados após o mount (ex.: `{#if}` no Svelte) já são cobertos sem re-binding:\n\n```js\n// Svelte: em onMount (opcional — init() já roda automaticamente no load)\nimport { onMount } from 'svelte';\nonMount(() => AHMAR.init());\n```\n\n### ⚠️ SSR (SvelteKit / Next.js / Nuxt) — carregar só no cliente\n\nO `ahmardesign.js` executa `AHMAR.init()` **imediatamente ao ser carregado**, e `init()` acessa `document.body` e `localStorage` — APIs que **não existem no servidor**. Em ambientes SSR, importe o JS **apenas no cliente**:\n\n- **SvelteKit**: adicione `<script src=\"/path/ahmardesign.js\"></script>` no `src/app.html` (fora do corpo renderizado por componente), **ou** importe dinamicamente dentro de `onMount`:\n\n```js\n// +page.svelte\nimport { onMount } from 'svelte';\nonMount(async () => {\n  await import('@ahmartecnologias/ahmardesign/ahmardesign.js');\n});\n```\n\n- **Next.js**: use `import('@ahmartecnologias/ahmardesign/ahmardesign.js')` dentro de um `useEffect`, ou o componente `<Script>` com `strategy=\"afterInteractive\"`.\n\nO **CSS** pode (e deve) ser importado normalmente, mesmo no servidor — é só estilo.\n\n### Sincronizando o tema com o estado do framework\n\nToda chamada a `AHMAR.setTheme()` dispara o evento customizado `ahmar-theme-change` no `window`. Use-o para manter o estado reativo do framework em sincronia:\n\n```js\n// Svelte\nwindow.addEventListener('ahmar-theme-change', (e) => {\n  currentTheme.set(e.detail.theme); // writable store\n});\n```\n\n---\n\n## Espaçamento entre Componentes\n\nOs componentes **não possuem margem padrão** — o espaçamento é sempre responsabilidade de quem consome, de forma explícita e portável (sem resets em projetos). Use `gap` (flex/grid) ou a utilitária `.space-y-*`:\n\n- **Linha**: `.flex items-center gap-2` (ou `gap-N` com qualquer medida do scale).\n- **Coluna / stack**: `flex flex-col gap-3`, ou `.space-y-3` para empilhar **irmãos que não são flex** (ex.: parágrafos, blocos, campos soltos).\n- **Grid**: `grid gap-4 grid-cols-*`.\n\n```html\n<!-- Linha: use gap -->\n<div class=\"flex items-center gap-2\">\n  <button class=\"btn btn-primary\">Salvar</button>\n  <button class=\"btn btn-ghost\">Cancelar</button>\n</div>\n\n<!-- Coluna flex: use gap -->\n<form class=\"flex flex-col gap-3\">\n  <input class=\"input\" placeholder=\"Nome\">\n  <input class=\"input\" placeholder=\"E-mail\">\n  <textarea class=\"textarea\" placeholder=\"Mensagem\"></textarea>\n  <button class=\"btn btn-primary btn-block\">Enviar</button>\n</form>\n\n<!-- Irmãos não-flex (blocos): use space-y -->\n<section class=\"space-y-4\">\n  <p>Primeiro parágrafo.</p>\n  <p>Segundo parágrafo.</p>\n  <div class=\"alert alert-info\">Aviso.</div>\n</section>\n```\n\n`.space-y-*` aplica `margin-top` entre irmãos diretamente adjacentes (`> * + *`), sem criar margem no primeiro nem no último elemento. Para listas sem marcador, use `.list-none`.\n\n> Escolha sempre **um** mecanismo por container: `gap` **ou** `.space-y-*`, nunca os dois juntos — caso contrário o espaçamento soma (duplica).\n\n---\n\n## Mecanismo de Temas\n\nA biblioteca utiliza variáveis CSS reativas. O tema é determinado pelo atributo `data-theme` na tag `body`.\n\n### Temas Disponíveis:\n- `light` (Padrão)\n- `dark`\n- `cupcake`\n- `retro`\n- `cyberpunk`\n- `synthwave`\n- `aqua`\n- `valentine`\n- `brutalist` (quadrado, preto e branco)\n- `brutalist-dark` (quadrado, preto e branco, variante escura)\n\nPara alterar o tema programaticamente via JS:\n```javascript\nAHMAR.setTheme('dark'); // Define o tema para dark e salva no localStorage\n```\n\nToda troca de tema (via `AHMAR.setTheme` ou `[data-theme-select]`) dispara o evento customizado `ahmar-theme-change` no `window` com o tema em `detail.theme` — útil para sincronizar com o estado de frameworks:\n\n```javascript\nwindow.addEventListener('ahmar-theme-change', (e) => {\n  console.log('Tema ativo:', e.detail.theme);\n});\n```\n\n---\n\n## API do Helper JavaScript (`AHMAR`)\n\nO arquivo [ahmardesign.js](file:///c:/Users/salomaon/Documents/code/AHMAR/ahmardesign/src/js/ahmardesign.js) expõe um objeto global `AHMAR` no objeto `window` com as seguintes funcionalidades:\n\n### 1. `AHMAR.setTheme(themeName)`\nAltera o tema atual do documento e salva a escolha no `localStorage`.\n- **Parâmetros:** `themeName` (String). Deve ser um dos temas válidos.\n\n### 2. `AHMAR.toast(message, type, duration)`\nGera dinamicamente uma notificação Toast animada no canto inferior direito.\n- **Parâmetros:**\n  - `message` (String): A mensagem a ser exibida.\n  - `type` (String, opcional): `'info'` (padrão), `'success'`, `'warning'`, `'error'`.\n  - `duration` (Number, opcional): Duração em milissegundos (padrão: `3000`).\n\n```javascript\nAHMAR.toast('Operação realizada com sucesso!', 'success', 4000);\n```\n\n### 3. `AHMAR.openModal(id)` e `AHMAR.closeModal(id)`\nAbre ou fecha um elemento de modal pelo seu `id`.\n- **Parâmetros:** `id` (String): ID do elemento HTML do modal.\n\n### 4. `AHMAR.init()`\nExecutado automaticamente no load do script. É **seguro e idempotente chamar de novo** — por isso pode (e deve) ser invocado após o mount em frameworks SPA (Svelte, React, Vue) quando elementos como `.collapse` (sem checkbox) são renderizados depois do load. A biblioteca usa delegação de eventos no `document`, então elementos criados dinamicamente já são cobertos sem re-binding manual:\n\n```javascript\n// Exemplo: dentro de onMount / useEffect\nAHMAR.init();\n```\n\n---\n\n## Resumo de Componentes Disponíveis\n\n| Componente | Classe Base | Modificadores de Estilo / Cores | Modificadores de Tamanho / Forma |\n| :--- | :--- | :--- | :--- |\n| **Botões** | `.btn` | `.btn-primary`, `.btn-secondary`, `.btn-accent`, `.btn-neutral`, `.btn-info`, `.btn-success`, `.btn-warning`, `.btn-error`, `.btn-outline`, `.btn-ghost`, `.btn-link`, estado `:disabled` / `.btn-disabled` | `.btn-lg`, `.btn-sm`, `.btn-xs`, `.btn-wide`, `.btn-block`, `.btn-square`, `.btn-circle` |\n| **Badges** | `.badge` | `.badge-primary`, `.badge-secondary`, `.badge-accent`, `.badge-neutral`, `.badge-info`, `.badge-success`, `.badge-warning`, `.badge-error`, `.badge-outline`, `.badge-ghost` | `.badge-lg`, `.badge-md`, `.badge-sm`, `.badge-xs` |\n| **Cards** | `.card` | `.card-bordered`, `.card-side` (horizontal), `.card-compact` | `.card-body`, `.card-title`, `.card-actions` |\n| **Alertas** | `.alert` | `.alert-info`, `.alert-success`, `.alert-warning`, `.alert-error` | Layout flexível para ícones e textos |\n| **Formulários** | `.form-control`, `.label`, `.fieldset`, `.input`, `.textarea`, `.select`, `.checkbox`, `.radio`, `.toggle`, `.range`, `.file-input` | `.input-primary`, `.select-primary`, `.checkbox-primary`, `.radio-primary`, `.toggle-primary`, `.range-primary`, `.input-error`–`.input-success`–`.input-warning`–`.input-info` (também para textarea/select/file-input/checkbox/radio/toggle), `.fieldset-legend`, `.fieldset-label`, estado `:disabled` | `.input-bordered`, `.textarea-bordered`, `.select-bordered`, `.file-input-bordered`, `.input-xs`–`.input-lg`, `.select-xs`–`.select-lg`, `.file-input-xs`–`.file-input-lg`, `.radio-sm`, `.toggle-sm`, `.input-ghost`, `.textarea-ghost`, `.select-ghost`, `.file-input-ghost`, `.join`, `.join-vertical`, `.input-group`, `.input-group-vertical` |\n| **Links** | `.link` | sublinhado semântico | — |\n| **Navegação** | `.navbar`, `.menu`, `.tabs`, `.breadcrumbs` | `.menu-horizontal`, `.active`, `.tab-active`, `.tabs-bordered`, `.tabs-boxed` | Menus e abas responsivas e estilizadas |\n| **Layout** | `.divider`, `.hero`, `.footer` | `.divider-horizontal`, `.footer-title` | Helpers para divisão, banners e rodapés |\n| **Overlays** | `.dropdown`, `.modal`, `.tooltip`, `.collapse`, `.toast` | `.dropdown-end`, `.dropdown-top`, `.dropdown-left`, `.dropdown-right`, `.tooltip-top`, `.tooltip-bottom`, `.tooltip-left`, `.tooltip-right`, `.collapse-open`, `.modal-open` | Abrem via `:focus-within`, `:hover` ou checkbox (collapse/modal) |\n| **Loading** | `.loading`, `.progress`, `.skeleton` | `.loading-primary`, `.loading-dots`, `.loading-bars`, `.loading-ball`, `.btn.loading`, `.progress-primary`, `.progress-indeterminate` | `.loading-xs`–`.loading-lg`, `.progress-xs`–`.progress-xl` |\n| **Tabelas** | `.table` | `.table-zebra`, `.table-hover`, `.table-bordered`, `.table-pin-rows`, `.table-pin-cols` | `.table-xs`–`.table-lg` |\n| **Avatar / Kbd / Indicator** | `.avatar`, `.kbd`, `.indicator` | `.avatar-placeholder`, `.avatar-online`, `.avatar-offline`, `.avatar-error`, `.avatar-group`, `.indicator-item`, `.indicator-start`–`.indicator-center`–`.indicator-end`, `.indicator-top`–`.indicator-middle`–`.indicator-bottom` | `.avatar-xs`–`.avatar-4xl`, `.kbd-xs`–`.kbd-lg` |\n\n---\n\n## Utilitários Dinâmicos e Breakpoints\n\nO script de compilação gera automaticamente classes utilitárias para facilitar ajustes finos de layout. Todas as classes dinâmicas possuem suporte a variações responsivas utilizando os seguintes breakpoints prefixados:\n\n- `sm:` (`@media (min-width: 640px)`)\n- `md:` (`@media (min-width: 768px)`)\n- `lg:` (`@media (min-width: 1024px)`)\n- `xl:` (`@media (min-width: 1280px)`)\n- `2xl:` (`@media (min-width: 1536px)`)\n\n*Exemplo de uso:* `.flex-col md:flex-row` (coluna em telas pequenas, linha em telas médias e maiores).\n\n### Famílias de utilitários\n\n| Família | Exemplos |\n| :--- | :--- |\n| **Espaçamento** | `p-4`, `px-2`, `py-1.5`, `p-0.5`, `m-auto`, `mt-8`, `gap-4`, `space-y-4` |\n| **Exibição & Layout** | `block`, `flex`, `grid`, `hidden`, `flex-row`, `items-center`, `justify-between`, `flex-1`, `grid-cols-12`, `col-span-4`, `list-none` |\n| **Alinhamento de caixa** | `self-center`, `self-end`, `place-items-center`, `place-content-between`, `justify-items-start`, `justify-self-end` |\n| **Dimensões** | `w-64`, `w-full`, `w-fit`, `w-1/2`, `w-screen`, `h-screen`, `min-h-36`, `min-h-screen`, `min-w-28`, `min-w-full`, `max-w-2xl`, `max-h-screen` |\n| **Posicionamento** | `static`, `fixed`, `absolute`, `relative`, `sticky`, `top-0`, `top-16`, `-top-4`, `inset-4`, `-inset-2`, `z-50`, `float-right` |\n| **Tipografia** | `text-sm`–`text-6xl`, `font-bold`, `font-sans`, `font-mono`, `text-center`, `tracking-tight`, `leading-none`, `uppercase`, `truncate`, `line-clamp-2`, `break-words`, `whitespace-nowrap` |\n| **Estilo de texto** | `italic`, `not-italic`, `underline`, `line-through`, `no-underline`, `tabular-nums` |\n| **Cores** | `bg-primary`, `text-base-200`, `border-info`, `border-t-primary`, `divide-y`, `divide-base-200`, `bg-transparent` |\n| **Bordas** | `border`, `border-2`, `border-t`, `border-b-2`, `border-l-info`, `border-x`, `border-y`, `border-x-2`, `border-y-4`, `border-collapse` |\n| **Estados `hover:`** | `hover:bg-primary`, `hover:text-error`, `hover:border-base-content`, `hover:bg-transparent`, `hover:underline`, `hover:border-2`, `hover:opacity-70` |\n| **Efeitos** | `opacity-50`, `z-50`, `shadow-md`, `rounded-box`, `scale-95`, `translate-y-4`, `rotate-45`, `object-cover` |\n| **Overflow** | `overflow-auto`, `overflow-x-hidden`, `overflow-y-auto` |\n\n> Prefixos responsivos (`sm:` `md:` `lg:` `xl:` `2xl:`) valem para **todas** as\n> famílias acima, exceto onde indicado o contrário (ex.: `shadow-*` e\n> `rounded-*` são estáticos, em `utilities.css`).\n\n### Como estender a lib (mantendo a lib genérica)\n\nDuas regras evitam que a lib vire colecionadora de caso isolado:\n\n1. **Escala, não caso isolado.** Antes de criar uma classe, verifique se ela\n   pertence a uma escala existente e **estenda a escala** (o mapa em\n   `scripts/build.js`) em vez de inventar nome. Faltou `min-w-24`? Adicione a\n   chave `'24': '6rem'` em `minWidthValues` — nasce em todos os breakpoints.\n2. **Nenhum nome de domínio.** A lib serve a qualquer projeto. Regras de\n   negócio (`canvas-*`, `mermaid-*`, `editor-*`, `no-print`) são CSS do\n   **app**, não da lib. Se o caso é genérico e falta, estenda a escala; se é\n   específico, ele não entra.\n\nO utilitário de escala nasce em `scripts/build.js` (config + loop); o\nutilitário sem escala vai em `utilities.css`; componente/variante vai em\n`components.css`; token novo vai em `variables.css` **replicado em todos os\n10 temas**. Depois de qualquer mudança: `npm run build` e confira o diff do\nbundle. Detalhes em [`AGENTS.md`](AGENTS.md).\n\n### Auditando o uso da lib em um app consumidor\n\n```bash\nnode scripts/audit-usage.mjs ../meu-app\n```\n\nVarre Svelte/HTML/JSX/TSX/Vue/Astro/JS/TS, extrai as classes dos literais e\ndas expressões (`class={cond ? 'a' : 'b'}`, `class:xyz={...}`) e reporta as\nque **não existem** no bundle, já filtrando artefatos de parser. Serve para\nresponder \"falta alguma coisa na lib?\" sem caçar no CSS na mão.\n\nOpções úteis: `--ext tsx,jsx` (só certaines extensões), `--ignore <regexes>`,\n`--all` (lista também as encontradas) e `--strict` (sai com código 1 se\nhouver ausentes — bom para CI).\n\n> O script é ferramenta de **manutenção**: `scripts/` não é publicado no pacote.\n\n---\n\n## Tecnologias Utilizadas\n\n1. **Vanilla CSS** - Design flexível, moderno e modular sem frameworks pesados.\n2. **Node.js** - Scripting de compilação customizado.\n3. **Vite** - Servidor de desenvolvimento rápido e empacotador de assets.\n","readmeFilename":"README.md"}