@1e99/components 0.1.0 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 1e99
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,42 +1,32 @@
 # @1e99/components
 
-Componentes React compartilhados pelos produtos 1e99. `Navbar`,
-`GoogleSignInButton` e `Selector` foram extraídos fielmente de
-`domain-website` e `curriculo`, sem introduzir dependência de Next.js,
-autenticação, i18n ou geração de PDF.
+Componentes React reutilizáveis, estilizados com Tailwind CSS.
 
-## Instalação futura
-
-Após a primeira publicação pública, instale o pacote no app consumidor:
+## Instalação
 
 ```sh
 pnpm add @1e99/components
 ```
 
-O pacote declara `react`, `react-dom`, `react-icons` e `tailwindcss` como
-peer dependencies. Os apps 1e99 já usam `react-icons` 5.7.0; ele fornece os
-ícones Google e Lucide que o pacote renderiza, sem duplicar SVGs manualmente.
+O pacote declara `react`, `react-dom`, `react-icons` e `tailwindcss` como peer
+dependencies.
 
 ### Tailwind CSS 4
 
-O Tailwind 4 não lê automaticamente classes presentes em `node_modules`.
-Adicione esta diretiva à folha CSS que já contém `@import "tailwindcss"`, com
-o caminho relativo àquela folha:
+O Tailwind 4 não examina automaticamente classes em `node_modules`. Na folha
+CSS que importa o Tailwind, adicione uma diretiva `@source` cujo caminho seja
+relativo a ela:
 
 ```css
+@import "tailwindcss";
 @source "../../node_modules/@1e99/components/dist";
 ```
 
-Nos consumidores atuais, a alteração futura será em:
-
-- `domain-website/src/app/globals.css`;
-- `curriculo/src/app/brand.css`.
-
-Os dois projetos já fornecem os tokens usados pela navbar, incluindo
+Os componentes usam tokens Tailwind do tema do aplicativo, como
 `surface-page`, `content-primary`, `content-secondary`, `border-subtle`,
 `action-primary`, `surface-raised`, `content-inverse`, `shadow-card`,
 `shadow-float`, `shadow-focus`, `ease-brand`, `shell`, `control` e `card`.
-O pacote não redefine esses tokens nem importa CSS global no aplicativo.
+O pacote não cria tokens nem importa CSS global.
 
 ## Uso
 
@@ -48,117 +38,65 @@ import {
   Selector,
 } from "@1e99/components";
 
-type LocaleOption = {
-  label: string;
-  languageTag: string;
-  value: string;
-};
-
-const localeOptions = [
-  { value: "pt", label: "Português", languageTag: "pt-BR" },
-  { value: "en", label: "English", languageTag: "en" },
-  { value: "es", label: "Español", languageTag: "es" },
-] satisfies readonly LocaleOption[];
+const languageOptions = [
+  {label: "Português", value: "pt"},
+  {label: "English", value: "en"},
+] as const;
 
 function Header() {
-  const [locale, setLocale] = useState("pt");
+  const [language, setLanguage] = useState("pt");
 
   return (
     <Navbar
-      brand={<a href="/"><BrandLogo /></a>}
-      items={[
-        { href: "/apps", label: "Apps" },
-        { href: "/about", label: "Sobre" },
-      ]}
-      navigationLabel="Navegação principal"
-      renderLink={({ href, children, className }) => (
-        <Link className={className} href={href}>{children}</Link>
-      )}
       actions={
         <div className="hidden items-center gap-3 md:flex">
           <Selector
-            label={t("language")}
-            onValueChange={setLocale}
-            options={localeOptions}
-            renderOption={({ option }) => (
-              <span lang={option.languageTag}>{option.label}</span>
-            )}
-            renderTrigger={({ selectedOption, value }) => (
-              <span lang={selectedOption?.languageTag}>
-                {selectedOption?.label ?? value}
-              </span>
-            )}
-            value={locale}
+            label="Idioma"
+            onValueChange={setLanguage}
+            options={languageOptions}
+            value={language}
           />
           <GoogleSignInButton
-            label={t("signInWithGoogle")}
-            onClick={startGoogleLogin}
+            label="Entrar com Google"
+            onClick={() => undefined}
           />
         </div>
       }
-      width="content"
-      layer="above"
-      linkTreatment="underlined"
-      linkWeight="semibold"
-      mobileNavigation={{
-        menuLabel: t("openNavigation"),
-        navigationLabel: t("mobileNavigation"),
-        actions: <MobileAccountActions />,
-      }}
+      brand={<a aria-label="Início" href="/">Marca</a>}
+      items={[
+        {href: "/products", label: "Produtos"},
+        {href: "/about", label: "Sobre"},
+      ]}
+      navigationLabel="Navegação principal"
     />
   );
 }
 ```
 
-| Prop | Opções | Uso nos projetos existentes |
-| --- | --- | --- |
-| `width` | `content` (padrão), `wide` | domain-website / curriculo |
-| `layer` | `standard` (padrão), `above` | curriculo / domain-website |
-| `linkTreatment` | `plain` (padrão), `underlined` | curriculo / domain-website |
-| `linkWeight` | `semibold` (padrão), `bold` | domain-website / curriculo |
-| `mobileNavigation` | ausente ou objeto de disclosure | curriculo / domain-website |
-
-`brand` e `actions` são slots e, junto da navegação desktop, permanecem como
-regiões irmãs no container — o mesmo layout dos dois headers fonte. O objeto
-`mobileNavigation` reproduz o menu do domain (botão azul de 48px e painel
-elevado); ele fica ausente no perfil do currículo. `renderLink` recebe `href`,
-`children` e `className`, permitindo usar `next/link`, `next-intl/link` ou
-outro roteador sem acoplar o pacote a ele.
-
-### Controles de header
+`Navbar` mantém marca, itens de navegação e ações como regiões independentes.
+Use `renderLink` para integrar um roteador próprio sem acoplar o pacote a uma
+biblioteca de navegação. Os itens podem ser adicionados ou removidos, e
+`actions` e `mobileNavigation.actions` aceitam qualquer nó React.
 
-`GoogleSignInButton` é o único tratamento visual para entrar com Google e
-segue o botão do `domain-website` em todos os usos. `label` é obrigatório e
-deve receber a string já traduzida pelo consumidor; também aceita atributos
-comportamentais nativos de botão (`onClick`, `disabled`, `aria-*`). Não aceita
-variante nem `className`; autenticação e estado de carregamento são do
-consumidor.
-
-`Selector` é um disclosure genérico para uma coleção controlada. Cada opção
-tem apenas `value` estável e `label` como contrato-base; o consumidor pode
-acrescentar campos ao tipar sua própria coleção, como `languageTag`, descrição
-ou ícone. `value` e `onValueChange` são controlados pelo consumidor: ao clicar
-em uma opção, o componente informa o novo valor e fecha o disclosure, mas não
-navega nem atualiza estado por conta própria.
+| Prop | Opções | Finalidade |
+| --- | --- | --- |
+| `width` | `content` (padrão), `wide` | Largura máxima da navegação |
+| `layer` | `standard` (padrão), `above` | Camada de empilhamento |
+| `linkTreatment` | `plain` (padrão), `underlined` | Aparência dos links |
+| `linkWeight` | `semibold` (padrão), `bold` | Peso dos links |
+| `mobileNavigation` | ausente ou objeto de disclosure | Navegação móvel opcional |
 
-`renderOption` recebe `option`, `isSelected` e `select`; ele renderiza somente
-o conteúdo interno do botão que o pacote controla. `renderTrigger` recebe
-`selectedOption` e `value` para personalizar o conteúdo do gatilho. Dessa
-forma, atributos como `lang` ficam no conteúdo do aplicativo consumidor, não
-no tipo genérico do pacote. O componente preserva botões com `aria-pressed`,
-`select-none`, as densidades `standard` (padrão), `compact` e
-`compact-mobile` e `whiteSurface`. Sem `triggerAriaLabel`, o nome acessível do
-gatilho vem do conteúdo selecionado visível; use essa prop quando o consumidor
-precisar de um nome mais descritivo e atualize-o junto do valor controlado.
+`GoogleSignInButton` recebe uma `label` obrigatória e os atributos nativos de
+um botão, como `onClick`, `disabled` e `aria-*`. Autenticação, estado de
+carregamento e traduções pertencem ao aplicativo que o utiliza.
 
-`Navbar` não recebe props de idioma nem de autenticação. `items`, `actions` e
-`mobileNavigation.actions` são os pontos de composição para qualquer controle
-ou CTA do produto. No Storybook, `Navigation/Navbar` inclui o playground de
-referência com o logo oficial fixo; seus args serializáveis controlam itens,
-seletor, botão Google e menu móvel. O seletor e o botão também possuem stories
-próprias em `Controls/Selector` e `Controls/GoogleSignInButton`.
+`Selector` é controlado: `value` determina a opção visível e
+`onValueChange` informa uma nova escolha. As opções exigem somente `value` e
+`label`, mas podem ser estendidas com outros campos e apresentadas por
+`renderOption` e `renderTrigger`. O componente não navega nem muda estado por
+conta própria.
 
-## Desenvolvimento e testes
+## Desenvolvimento
 
 ```sh
 pnpm lint
@@ -172,90 +110,21 @@ pnpm build-storybook
 pnpm pack:check
 ```
 
-`pnpm lint` aplica o padrão Google para TypeScript e React; `pnpm lint:fix`
-corrige automaticamente o que for seguro, e `pnpm format` é seu atalho. O
-Husky executa `pnpm lint` e `pnpm test` antes de cada commit local, portanto
-ambos devem passar antes de o histórico ser criado.
-
-`pnpm test` roda testes de contrato em Vitest + Testing Library. As stories
-exibem o playground configurável da navbar, o seletor genérico e o botão
-Google, incluindo o SVG oficial somente como asset de demonstração do
-Storybook. Elas são verificadas em Chromium por `pnpm test:stories`, com os
-addons oficiais de acessibilidade e Vitest.
-
-Em uma máquina Linux nova, instale as dependências do Chromium uma vez antes
-do teste de stories:
+Husky executa `pnpm lint` e `pnpm test` antes de cada commit. As stories são
+verificadas em Chromium por `pnpm test:stories`; em uma máquina Linux nova,
+instale as dependências uma vez:
 
 ```sh
 pnpm exec playwright install chromium
 sudo pnpm exec playwright install-deps chromium
 ```
 
-## Organização do código
+Cada componente fica em `src/components/<nome>/`, junto dos seus testes e
+stories. `src/index.ts` é o ponto de entrada público, e testes transversais
+ficam em `test/`.
 
-Cada componente é uma unidade em `src/components/<nome>/`: implementação,
-testes e story (quando houver) ficam juntos. `src/index.ts` é o único ponto de
-entrada público; mudar a organização interna não altera como os aplicativos
-importam `@1e99/components`. Testes transversais ficam em `test/`.
+## Licença
 
-## Publicação
-
-O destino recomendado é o npm público, como `@1e99/components`: ele evita
-configuração de registry e token em cada consumidor. GitHub Packages é uma
-alternativa para distribuição privada, mas exige registry e token GitHub nos
-aplicativos.
-
-`.github/workflows/ci.yml` valida pull requests e pushes para `main` com lint,
-tipos, testes, build, Storybook e prévia do tarball. `.github/workflows/publish.yml`
-repete essas verificações e publica somente quando uma tag `vX.Y.Z` corresponde
-exatamente à versão em `package.json` e aponta para um commit ancestral de
-`main`. Os actions usados nos workflows estão fixados em commits revisáveis.
-
-### Primeiro release pelo CI
-
-O bootstrap usa temporariamente o secret de repositório `NPM_TOKEN`. Crie-o no
-npm como token granular, com **Bypass two-factor authentication**, permissão
-**Read and write (publish and stage)** limitada ao escopo `@1e99` e expiração
-curta. Salve-o em GitHub → `1e99/components` → Settings → Secrets and variables
-→ Actions como `NPM_TOKEN`. Nunca grave ou compartilhe esse valor por chat,
-issues, commits ou logs.
-
-Como `@1e99/components` ainda não existe antes do primeiro publish, o escopo
-inteiro é uma exceção temporária de bootstrap: revogue o token assim que OIDC
-for configurado. O npm anuncia a remoção do publish direto com tokens granular
-de bypass de 2FA em janeiro de 2027; se o primeiro release for adiado além
-disso, use o fluxo de staged publishing do npm em vez de manter um token.
-
-Antes de criar a tag pública, confirme a política de licença: o pacote está
-como `UNLICENSED` e essa decisão precisa de aprovação explícita para publicação
-pública.
-
-Envie os commits e a tag correspondente à versão:
-
-```sh
-git push origin main
-git tag v0.1.0
-git push origin v0.1.0
-```
-
-O workflow recusa a tag se `package.json` não estiver em `0.1.0` e publica com
-`publishConfig.access: public` se todas as verificações passarem.
-Configure também regras do GitHub para exigir o CI antes de merge em `main` e
-restringir a criação e atualização de tags `v*` a mantenedores autorizados.
-
-### Migrar para Trusted Publishing
-
-Depois que a primeira release for publicada, habilite 2FA na conta npm e abra
-as configurações de `@1e99/components` no npm. Em **Trusted Publisher**, escolha
-GitHub Actions e informe organização `1e99`, repositório `components` e arquivo
-de workflow `publish.yml`; permita publicação direta com `npm publish`.
-
-Em seguida, apague o secret `NPM_TOKEN` do GitHub e revogue o token no npm. As
-tags futuras usarão OIDC com credenciais efêmeras do GitHub Actions e gerarão
-provenance automaticamente. Para uma próxima versão, atualize a versão e envie
-a tag criada pelo gerenciador:
-
-```sh
-pnpm version patch
-git push origin main --follow-tags
-```
+Este pacote é licenciado sob a [MIT License](LICENSE). Você pode usar, copiar,
+modificar, distribuir e sublicenciar o software, inclusive comercialmente,
+desde que preserve o aviso de copyright e a licença.

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@1e99/components",
-  "version": "0.1.0",
-  "description": "Shared React components for 1e99 applications.",
+  "version": "0.1.1",
+  "description": "Reusable React components built with Tailwind CSS.",
   "repository": {
     "type": "git",
     "url": "https://github.com/1e99/components.git"
   },
-  "license": "UNLICENSED",
+  "license": "MIT",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -19,6 +19,7 @@
   },
   "files": [
     "dist",
+    "LICENSE",
     "README.md"
   ],
   "scripts": {