@majapisoftwares/ui 6.0.0 → 6.1.2

package/docs/VALIDATION.md

@@ -1,11 +1,11 @@
-# Validação da base v1
-
-- TypeScript strict, ESLint sem warnings, verificador de padrões, Prettier e build Vite aprovados.
-- CI pública executa npm ci, typecheck, lint, check:standards e build, sem secrets ou acesso à AWS.
-- Catálogo renderizado em navegador real em desktop e mobile (viewport de 500px), incluindo template administrativo, login e cadastro.
-- Cadastro demonstrativo: confirmação divergente de senha foi bloqueada, campo marcado aria-invalid e erro anunciado por role=alert. Nenhuma informação foi enviada ou persistida.
-- DataTable demonstrativa possui busca, filtro por região, ordenação e paginação; DetailsSheet usa Radix com título e descrição. Estados de vazio, erro e carregamento estão expostos no catálogo.
-- O primeiro consumidor real é o Cloud Manager, que importa a biblioteca por commit público fixo e continua exibindo o inventário real AWS. Detalhes de infraestrutura e credenciais permanecem no repo privado do produto.
-- Ajustes de navegação e toolbar mobile foram feitos nos componentes compartilhados e publicados antes de atualizar o consumidor, exercitando a regra de contribuição upstream.
-
-Esta revisão é uma validação inicial de implementação, não uma certificação de acessibilidade nem prova de integração de autenticação. Backend de login/cadastro pertence a cada produto e deve ser validado pelo consumidor.
+# Validação da base v1
+
+- TypeScript strict, ESLint sem warnings, verificador de padrões, Prettier e build Vite aprovados.
+- CI pública executa npm ci, typecheck, lint, check:standards e build, sem secrets ou acesso à AWS.
+- Catálogo renderizado em navegador real em desktop e mobile (viewport de 500px), incluindo template administrativo, login e cadastro.
+- Cadastro demonstrativo: confirmação divergente de senha foi bloqueada, campo marcado aria-invalid e erro anunciado por role=alert. Nenhuma informação foi enviada ou persistida.
+- DataTable demonstrativa possui busca, filtro por região, ordenação e paginação; DetailsSheet usa Radix com título e descrição. Estados de vazio, erro e carregamento estão expostos no catálogo.
+- O primeiro consumidor real é o Cloud Manager, que importa a biblioteca por commit público fixo e continua exibindo o inventário real AWS. Detalhes de infraestrutura e credenciais permanecem no repo privado do produto.
+- Ajustes de navegação e toolbar mobile foram feitos nos componentes compartilhados e publicados antes de atualizar o consumidor, exercitando a regra de contribuição upstream.
+
+Esta revisão é uma validação inicial de implementação, não uma certificação de acessibilidade nem prova de integração de autenticação. Backend de login/cadastro pertence a cada produto e deve ser validado pelo consumidor.

package/docs/VERSIONING.md

@@ -1,28 +1,28 @@
-# Versionamento
-
-`@majapisoftwares/ui` segue [SemVer](https://semver.org) sobre a **API pública**: subpaths exportados no `package.json`, nomes de componentes, props e seus tipos, variantes, tokens CSS, classes documentadas (ex.: `orb-*`) e comportamento que um app possa ter usado.
-
-## Qual número subir
-
-| Mudança                                                                                                                                                                                       | Versão    |
-| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| Correção de bug, acessibilidade, tradução, ajuste visual que não muda a API                                                                                                                   | **patch** |
-| Componente, padrão, export, prop opcional ou variante novos; mudança de visual padrão (preset, tokens) que não exige alteração no código do app; deprecação                                   | **minor** |
-| Remover ou renomear export, componente, prop, variante ou token; tornar prop obrigatória; mudar o tipo ou o significado de uma prop; mudança de comportamento que obriga o app a mudar código | **major** |
-
-Na dúvida, a pergunta é: **um app que compilava com a versão anterior continua compilando e funcionando sem alterações?** Se sim, não é major.
-
-## Evitar majors
-
-- Prefira mudanças aditivas: nova prop ao lado da antiga, novo componente em vez de mudar o existente.
-- Para trocar uma API, mantenha a antiga funcionando, marque-a com `@deprecated` (JSDoc, com a alternativa) e só remova no próximo major planejado.
-- Agrupe remoções num único major, com `docs/MIGRATION-<versão>.md` e os consumidores conhecidos atualizados em seguida.
-- Um major precisa de aprovação explícita do responsável antes da publicação; o agente propõe e justifica.
-
-## Publicar
-
-1. Escolha o número pela tabela acima e justifique no commit (`feat:` → minor, `fix:` → patch, `feat!:`/`BREAKING CHANGE:` → major).
-2. Atualize `version` no `package.json`; o starter acompanha a mesma versão no mesmo commit (`npm run test:starter` verifica).
-3. Valide (typecheck, lint, check:standards, build, test:starter, starter contra o pacote empacotado).
-4. `npm publish`, tag `v<versão>` no GitHub e registre no plano.
-5. Apps fixam a versão exata (`--save-exact`) e atualizam por PR.
+# Versionamento
+
+`@majapisoftwares/ui` segue [SemVer](https://semver.org) sobre a **API pública**: subpaths exportados no `package.json`, nomes de componentes, props e seus tipos, variantes, tokens CSS, classes documentadas (ex.: `orb-*`) e comportamento que um app possa ter usado.
+
+## Qual número subir
+
+| Mudança                                                                                                                                                                                       | Versão    |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
+| Correção de bug, acessibilidade, tradução, ajuste visual que não muda a API                                                                                                                   | **patch** |
+| Componente, padrão, export, prop opcional ou variante novos; mudança de visual padrão (preset, tokens) que não exige alteração no código do app; deprecação                                   | **minor** |
+| Remover ou renomear export, componente, prop, variante ou token; tornar prop obrigatória; mudar o tipo ou o significado de uma prop; mudança de comportamento que obriga o app a mudar código | **major** |
+
+Na dúvida, a pergunta é: **um app que compilava com a versão anterior continua compilando e funcionando sem alterações?** Se sim, não é major.
+
+## Evitar majors
+
+- Prefira mudanças aditivas: nova prop ao lado da antiga, novo componente em vez de mudar o existente.
+- Para trocar uma API, mantenha a antiga funcionando, marque-a com `@deprecated` (JSDoc, com a alternativa) e só remova no próximo major planejado.
+- Agrupe remoções num único major, com `docs/MIGRATION-<versão>.md` e os consumidores conhecidos atualizados em seguida.
+- Um major precisa de aprovação explícita do responsável antes da publicação; o agente propõe e justifica.
+
+## Publicar
+
+1. Escolha o número pela tabela acima e justifique no commit (`feat:` → minor, `fix:` → patch, `feat!:`/`BREAKING CHANGE:` → major).
+2. Atualize `version` no `package.json`; o starter acompanha a mesma versão no mesmo commit (`npm run test:starter` verifica).
+3. Valide (typecheck, lint, check:standards, build, test:starter, starter contra o pacote empacotado).
+4. `npm publish`, tag `v<versão>` no GitHub e registre no plano.
+5. Apps fixam a versão exata (`--save-exact`) e atualizam por PR.

package/docs/validation/preference-titles.md

@@ -0,0 +1,22 @@
+# Saved-language titles
+
+The initial preference state matched server HTML in English. Child title effects
+ran before browser preferences were loaded, briefly writing the English title.
+The pre-paint visibility mask also expired after two seconds, independently of
+whether hydration had completed.
+
+`Preferences` now exposes internal readiness to `useDocumentTitle`. Titles are
+written only after the stored/browser language is resolved. The pre-paint mask
+is removed only when React has committed that language. The public API remains
+compatible, including `useDocumentTitle` outside Preferences.
+
+The catalog and generated starter consume the shared implementation. Cloud and
+the starter pin the corrected public Git source archive by its full commit SHA;
+no registry authentication or mutable dependency ref is required.
+
+Validation: Portuguese and English hydration tests record every document-title
+write and verify that all writes use the selected language. Library typecheck,
+lint, standards and build pass. Generated-starter lint, typecheck, UI standards
+and build pass. Local Chrome refresh shows `Padrões · Majapi UI` and
+`Repositórios · Majapi Cloud`, with visible Portuguese content and the button
+`Conectar repositórios`. No production deployment was performed.

package/package.json

@@ -1,84 +1,88 @@
-{
-  "name": "@majapisoftwares/ui",
-  "version": "6.0.0",
-  "description": "Shared Workbench UI and UX standards based on shadcn/ui",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/majapisoftwares/workbench-ui.git"
-  },
-  "homepage": "https://ui.majapi.com",
-  "type": "module",
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "files": [
-    "scripts/check-standards.mjs",
-    "src",
-    "components.json",
-    "docs",
-    "AGENTS.md",
-    "THIRD_PARTY_NOTICES.md"
-  ],
-  "exports": {
-    "./components/*": "./src/components/ui/*.tsx",
-    "./patterns/*": "./src/patterns/*.tsx",
-    "./templates/*": "./src/templates/*.tsx",
-    "./hooks/*": "./src/hooks/*.ts",
-    "./styles.css": "./src/styles.css",
-    "./lib/utils": "./src/lib/utils.ts",
-    "./lib/i18n": "./src/lib/i18n.tsx"
-  },
-  "scripts": {
-    "create:app": "node scripts/create-app.mjs",
-    "test:starter": "node --test scripts/create-app.test.mjs",
-    "dev": "npm run dev -w catalog",
-    "build": "node scripts/write-release.mjs && tsc --noEmit && npm run build -w catalog",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint . --max-warnings=0",
-    "format:check": "prettier --check src examples scripts *.json *.ts *.md docs/*.md",
-    "check:standards": "node scripts/check-standards.mjs",
-    "normalize:ui": "node scripts/normalize-ui.mjs && prettier --write src/components/ui src/hooks"
-  },
-  "peerDependencies": {
-    "react": "19.3.1",
-    "react-dom": "19.3.1"
-  },
-  "engines": {
-    "node": ">=22"
-  },
-  "dependencies": {
-    "@base-ui/react": "1.9.0",
-    "@dnd-kit/core": "6.3.1",
-    "@dnd-kit/modifiers": "9.0.0",
-    "@dnd-kit/sortable": "10.0.0",
-    "@dnd-kit/utilities": "3.2.2",
-    "@fontsource-variable/geist": "^5.3.0",
-    "@tanstack/react-table": "8.21.3",
-    "class-variance-authority": "0.7.1",
-    "clsx": "2.1.1",
-    "cn": "^0.5.0",
-    "lucide-react": "1.61.0",
-    "shadcn": "^4.22.1",
-    "sonner": "^2.0.8",
-    "tailwind-merge": "3.7.0",
-    "tw-animate-css": "^1.4.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "10.0.1",
-    "@types/node": "26.6.5",
-    "@types/react": "19.3.0",
-    "@types/react-dom": "19.3.0",
-    "eslint": "10.13.0",
-    "eslint-plugin-react-hooks": "7.1.1",
-    "prettier": "3.9.10",
-    "tailwindcss": "4.3.3",
-    "typescript": "6.0.3",
-    "typescript-eslint": "8.72.0"
-  },
-  "workspaces": [
-    "catalog"
-  ]
-}
+{
+  "name": "@majapisoftwares/ui",
+  "version": "6.1.2",
+  "description": "Shared Majapi UI and UX standards based on shadcn/ui",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/majapisoftwares/ui.git"
+  },
+  "homepage": "https://ui.majapi.com",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "scripts/check-standards.mjs",
+    "src",
+    "components.json",
+    "docs",
+    "AGENTS.md",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "exports": {
+    "./components/*": "./src/components/ui/*.tsx",
+    "./patterns/*": "./src/patterns/*.tsx",
+    "./templates/*": "./src/templates/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./styles.css": "./src/styles.css",
+    "./lib/utils": "./src/lib/utils.ts",
+    "./lib/i18n": "./src/lib/i18n.tsx"
+  },
+  "scripts": {
+    "create:app": "node scripts/create-app.mjs",
+    "test:starter": "node --test scripts/create-app.test.mjs",
+    "dev": "npm run dev -w catalog",
+    "build": "node scripts/write-release.mjs && tsc --noEmit && npm run build -w catalog",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . --max-warnings=0",
+    "format:check": "prettier --check src examples scripts *.json *.ts *.md docs/*.md",
+    "check:standards": "node scripts/check-standards.mjs",
+    "normalize:ui": "node scripts/normalize-ui.mjs && prettier --write src/components/ui src/hooks",
+    "test:preferences": "tsx --test scripts/preferences.test.tsx"
+  },
+  "peerDependencies": {
+    "react": "19.3.1",
+    "react-dom": "19.3.1"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "dependencies": {
+    "@base-ui/react": "1.9.0",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/modifiers": "9.0.0",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@fontsource-variable/geist": "^5.3.0",
+    "@tanstack/react-table": "8.21.3",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cn": "^0.5.0",
+    "lucide-react": "1.61.0",
+    "shadcn": "^4.22.1",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "3.7.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "10.0.1",
+    "@types/jsdom": "30.0.0",
+    "@types/node": "26.6.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "eslint": "10.13.0",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "jsdom": "29.1.1",
+    "prettier": "3.9.10",
+    "tailwindcss": "4.3.3",
+    "tsx": "4.23.15",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.72.0"
+  },
+  "workspaces": [
+    "catalog"
+  ]
+}

package/scripts/check-standards.mjs

@@ -1,41 +1,41 @@
-import { readdir, readFile } from "node:fs/promises";
-import { resolve, relative } from "node:path";
-const consumer = process.argv[2];
-const root = resolve(consumer ?? "src");
-const violations = [];
-async function visit(path) {
-  for (const entry of await readdir(path, { withFileTypes: true })) {
-    if (["node_modules", "dist", ".git"].includes(entry.name)) continue;
-    const file = resolve(path, entry.name);
-    if (entry.isDirectory()) {
-      await visit(file);
-      continue;
-    }
-    if (!/\.[jt]sx?$/.test(entry.name)) continue;
-    const text = await readFile(file, "utf8"),
-      name = relative(root, file).replaceAll("\\", "/");
-    if (/from\s+["'](?:radix-ui|@radix-ui\/)/.test(text))
-      violations.push(`${name}: the Workbench foundation uses Base UI`);
-    if (!consumer && name.startsWith("components/ui/")) continue;
-    if (consumer && /(?:^|\/)components\/ui\//.test(name))
-      violations.push(`${name}: local UI primitive copies are forbidden`);
-    if (/components\/native-select|<NativeSelect\b/.test(text))
-      violations.push(`${name}: use Select (Base UI), not a native select`);
-    if (/<(?:button|input|select|table|dialog)(?:\s|>)/.test(text))
-      violations.push(`${name}: use the shared UI primitive`);
-    if (
-      /(?:bg|text|border)-(?:red|blue|green|orange|gray|slate|zinc)-\d|(?:bg|text|border)-\[#[a-f\d]/i.test(
-        text,
-      )
-    )
-      violations.push(`${name}: use semantic tokens instead of local colors`);
-    if (!consumer && /from ["']@\//.test(text))
-      violations.push(`${name}: library internals must use portable imports`);
-  }
-}
-await visit(root);
-if (violations.length) {
-  console.error(violations.join("\n"));
-  process.exitCode = 1;
-} else
-  console.log(`UI standards passed (${consumer ? "consumer" : "library"}).`);
+import { readdir, readFile } from "node:fs/promises";
+import { resolve, relative } from "node:path";
+const consumer = process.argv[2];
+const root = resolve(consumer ?? "src");
+const violations = [];
+async function visit(path) {
+  for (const entry of await readdir(path, { withFileTypes: true })) {
+    if (["node_modules", "dist", ".git"].includes(entry.name)) continue;
+    const file = resolve(path, entry.name);
+    if (entry.isDirectory()) {
+      await visit(file);
+      continue;
+    }
+    if (!/\.[jt]sx?$/.test(entry.name)) continue;
+    const text = await readFile(file, "utf8"),
+      name = relative(root, file).replaceAll("\\", "/");
+    if (/from\s+["'](?:radix-ui|@radix-ui\/)/.test(text))
+      violations.push(`${name}: the Workbench foundation uses Base UI`);
+    if (!consumer && name.startsWith("components/ui/")) continue;
+    if (consumer && /(?:^|\/)components\/ui\//.test(name))
+      violations.push(`${name}: local UI primitive copies are forbidden`);
+    if (/components\/native-select|<NativeSelect\b/.test(text))
+      violations.push(`${name}: use Select (Base UI), not a native select`);
+    if (/<(?:button|input|select|table|dialog)(?:\s|>)/.test(text))
+      violations.push(`${name}: use the shared UI primitive`);
+    if (
+      /(?:bg|text|border)-(?:red|blue|green|orange|gray|slate|zinc)-\d|(?:bg|text|border)-\[#[a-f\d]/i.test(
+        text,
+      )
+    )
+      violations.push(`${name}: use semantic tokens instead of local colors`);
+    if (!consumer && /from ["']@\//.test(text))
+      violations.push(`${name}: library internals must use portable imports`);
+  }
+}
+await visit(root);
+if (violations.length) {
+  console.error(violations.join("\n"));
+  process.exitCode = 1;
+} else
+  console.log(`UI standards passed (${consumer ? "consumer" : "library"}).`);

package/src/components/ui/accordion.tsx

@@ -1,82 +1,82 @@
-"use client";
-
-import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
-import { cn } from "cn";
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-
-function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
-  return (
-    <AccordionPrimitive.Root
-      data-slot="accordion"
-      className={cn(
-        "flex w-full flex-col overflow-hidden rounded-2xl border",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("not-last:border-b data-open:bg-muted/50", className)}
-      {...props}
-    />
-  );
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: AccordionPrimitive.Trigger.Props) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon
-          data-slot="accordion-trigger-icon"
-          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
-        />
-        <ChevronUpIcon
-          data-slot="accordion-trigger-icon"
-          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
-        />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  );
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: AccordionPrimitive.Panel.Props) {
-  return (
-    <AccordionPrimitive.Panel
-      data-slot="accordion-content"
-      className="overflow-hidden px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
-      {...props}
-    >
-      <div
-        className={cn(
-          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
-          className,
-        )}
-      >
-        {children}
-      </div>
-    </AccordionPrimitive.Panel>
-  );
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+"use client";
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { cn } from "cn";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn(
+        "flex w-full flex-col overflow-hidden rounded-2xl border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b data-open:bg-muted/50", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };