@lucasbernardosn/react-ui 0.4.0 → 0.5.0

package/dist/components/typography/pre/pre-variants.js

@@ -35,40 +35,40 @@ const preVariants = cva([
 	variants: {
 		colorScheme: {
 			gray: [
-				"[--pre-surface-bg:var(--color-gray-2)]",
-				"[--pre-subtle-bg:var(--color-gray-3)]",
-				"[--pre-border:var(--color-gray-alpha-6)]",
-				"[--pre-fg:var(--color-gray-12)]"
+				"[--pre-surface-bg:var(--gray-2)]",
+				"[--pre-subtle-bg:var(--gray-3)]",
+				"[--pre-border:var(--gray-6)]",
+				"[--pre-fg:var(--gray-12)]"
 			],
-			brand: [
-				"[--pre-surface-bg:var(--color-brand-2)]",
-				"[--pre-subtle-bg:var(--color-brand-3)]",
-				"[--pre-border:var(--color-brand-alpha-6)]",
-				"[--pre-fg:var(--color-brand-12)]"
+			accent: [
+				"[--pre-surface-bg:var(--accent-2)]",
+				"[--pre-subtle-bg:var(--accent-3)]",
+				"[--pre-border:var(--accent-6)]",
+				"[--pre-fg:var(--accent-12)]"
 			],
 			red: [
-				"[--pre-surface-bg:var(--color-red-2)]",
-				"[--pre-subtle-bg:var(--color-red-3)]",
-				"[--pre-border:var(--color-red-alpha-6)]",
-				"[--pre-fg:var(--color-red-12)]"
+				"[--pre-surface-bg:var(--red-2)]",
+				"[--pre-subtle-bg:var(--red-3)]",
+				"[--pre-border:var(--red-6)]",
+				"[--pre-fg:var(--red-12)]"
 			],
 			green: [
-				"[--pre-surface-bg:var(--color-green-2)]",
-				"[--pre-subtle-bg:var(--color-green-3)]",
-				"[--pre-border:var(--color-green-alpha-6)]",
-				"[--pre-fg:var(--color-green-12)]"
+				"[--pre-surface-bg:var(--green-2)]",
+				"[--pre-subtle-bg:var(--green-3)]",
+				"[--pre-border:var(--green-6)]",
+				"[--pre-fg:var(--green-12)]"
 			],
 			amber: [
-				"[--pre-surface-bg:var(--color-amber-2)]",
-				"[--pre-subtle-bg:var(--color-amber-3)]",
-				"[--pre-border:var(--color-amber-alpha-6)]",
-				"[--pre-fg:var(--color-amber-12)]"
+				"[--pre-surface-bg:var(--amber-2)]",
+				"[--pre-subtle-bg:var(--amber-3)]",
+				"[--pre-border:var(--amber-6)]",
+				"[--pre-fg:var(--amber-12)]"
 			],
 			blue: [
-				"[--pre-surface-bg:var(--color-blue-2)]",
-				"[--pre-subtle-bg:var(--color-blue-3)]",
-				"[--pre-border:var(--color-blue-alpha-6)]",
-				"[--pre-fg:var(--color-blue-12)]"
+				"[--pre-surface-bg:var(--blue-2)]",
+				"[--pre-subtle-bg:var(--blue-3)]",
+				"[--pre-border:var(--blue-6)]",
+				"[--pre-fg:var(--blue-12)]"
 			]
 		},
 		variant: {

package/dist/components/typography/pre/pre-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"pre-variants.js","names":[],"sources":["../../../../src/components/typography/pre/pre-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type PreVariants = {\n  /**\n   * Cor do texto, do fundo e da borda do bloco.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeSemantic;\n  /**\n   * Desenho do bloco: `surface` com fundo suave e borda, `subtle` só com o fundo, `outline` só com\n   * a borda e `plain` sem fundo nem borda.\n   *\n   * @default 'surface'\n   */\n  variant?: 'surface' | 'subtle' | 'outline' | 'plain';\n};\n\nexport const preDefaultVariants: Required<PreVariants> = {\n  colorScheme: 'gray',\n  variant: 'surface',\n};\n\n/**\n * A cor só declara `--pre-surface-bg`, `--pre-subtle-bg`, `--pre-border` e `--pre-fg`, e a\n * `variant` decide onde cada uma entra. Assim não há um bloco por combinação de cor e `variant`.\n *\n * Toda `variant` tem borda, transparente onde não aparece: trocar de `variant` não muda o tamanho\n * do bloco, e o anel de foco tem onde pintar.\n */\nexport const preVariants = cva(\n  [\n    'block',\n\n    'rounded-md',\n    'corner-squircle',\n    'text-sm',\n    'px-4',\n    'py-2',\n\n    // Sem o `min-w-0`, uma linha longa dentro de um pai flex ou grid alarga o\n    // pai em vez de rolar dentro do bloco.\n    'min-w-0',\n    'max-w-full',\n    'overflow-x-auto',\n\n    'border',\n\n    'corner-squircle',\n\n    'text-(--pre-fg)',\n\n    'font-mono',\n    'whitespace-pre',\n    // Sem efeito com `whitespace-pre`. Com `whitespace-pre-wrap`, quebra também\n    // o token sem espaço (uma URL, um hash), que senão volta a rolar.\n    'wrap-break-word',\n    // O padrão do navegador é 8, largo demais para código indentado com tab.\n    'tab-2',\n\n    'outline-none',\n    // O anel herda a cor do texto, que já contrasta com o fundo em qualquer\n    // variante e esquema.\n    'ring-(--pre-fg)',\n    'focus-ring-inside',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--pre-surface-bg:var(--color-gray-2)]',\n          '[--pre-subtle-bg:var(--color-gray-3)]',\n          '[--pre-border:var(--color-gray-alpha-6)]',\n          '[--pre-fg:var(--color-gray-12)]',\n        ],\n        brand: [\n          '[--pre-surface-bg:var(--color-brand-2)]',\n          '[--pre-subtle-bg:var(--color-brand-3)]',\n          '[--pre-border:var(--color-brand-alpha-6)]',\n          '[--pre-fg:var(--color-brand-12)]',\n        ],\n        red: [\n          '[--pre-surface-bg:var(--color-red-2)]',\n          '[--pre-subtle-bg:var(--color-red-3)]',\n          '[--pre-border:var(--color-red-alpha-6)]',\n          '[--pre-fg:var(--color-red-12)]',\n        ],\n        green: [\n          '[--pre-surface-bg:var(--color-green-2)]',\n          '[--pre-subtle-bg:var(--color-green-3)]',\n          '[--pre-border:var(--color-green-alpha-6)]',\n          '[--pre-fg:var(--color-green-12)]',\n        ],\n        amber: [\n          '[--pre-surface-bg:var(--color-amber-2)]',\n          '[--pre-subtle-bg:var(--color-amber-3)]',\n          '[--pre-border:var(--color-amber-alpha-6)]',\n          '[--pre-fg:var(--color-amber-12)]',\n        ],\n        blue: [\n          '[--pre-surface-bg:var(--color-blue-2)]',\n          '[--pre-subtle-bg:var(--color-blue-3)]',\n          '[--pre-border:var(--color-blue-alpha-6)]',\n          '[--pre-fg:var(--color-blue-12)]',\n        ],\n      },\n      variant: {\n        surface: ['border-(--pre-border)', 'bg-(--pre-surface-bg)'],\n        subtle: ['border-transparent', 'bg-(--pre-subtle-bg)'],\n        outline: ['border-(--pre-border)', 'bg-transparent'],\n        plain: ['border-transparent', 'bg-transparent'],\n      },\n    },\n    defaultVariants: {\n      colorScheme: preDefaultVariants.colorScheme,\n      variant: preDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,qBAA4C;CACvD,aAAa;CACb,SAAS;AACX;;;;;;;;AASA,MAAa,cAAc,IACzB;CACE;CAEA;CACA;CACA;CACA;CACA;CAIA;CACA;CACA;CAEA;CAEA;CAEA;CAEA;CACA;CAGA;CAEA;CAEA;CAGA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,SAAS,CAAC,yBAAyB,uBAAuB;GAC1D,QAAQ,CAAC,sBAAsB,sBAAsB;GACrD,SAAS,CAAC,yBAAyB,gBAAgB;GACnD,OAAO,CAAC,sBAAsB,gBAAgB;EAChD;CACF;CACA,iBAAiB;EACf,aAAa,mBAAmB;EAChC,SAAS,mBAAmB;CAC9B;AACF,CACF"}
+{"version":3,"file":"pre-variants.js","names":[],"sources":["../../../../src/components/typography/pre/pre-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type PreVariants = {\n  /**\n   * Cor do texto, do fundo e da borda do bloco.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeSemantic;\n  /**\n   * Desenho do bloco: `surface` com fundo suave e borda, `subtle` só com o fundo, `outline` só com\n   * a borda e `plain` sem fundo nem borda.\n   *\n   * @default 'surface'\n   */\n  variant?: 'surface' | 'subtle' | 'outline' | 'plain';\n};\n\nexport const preDefaultVariants: Required<PreVariants> = {\n  colorScheme: 'gray',\n  variant: 'surface',\n};\n\n/**\n * A cor só declara `--pre-surface-bg`, `--pre-subtle-bg`, `--pre-border` e `--pre-fg`, e a\n * `variant` decide onde cada uma entra. Assim não há um bloco por combinação de cor e `variant`.\n *\n * Toda `variant` tem borda, transparente onde não aparece: trocar de `variant` não muda o tamanho\n * do bloco, e o anel de foco tem onde pintar.\n */\nexport const preVariants = cva(\n  [\n    'block',\n\n    'rounded-md',\n    'corner-squircle',\n    'text-sm',\n    'px-4',\n    'py-2',\n\n    // Sem o `min-w-0`, uma linha longa dentro de um pai flex ou grid alarga o\n    // pai em vez de rolar dentro do bloco.\n    'min-w-0',\n    'max-w-full',\n    'overflow-x-auto',\n\n    'border',\n\n    'corner-squircle',\n\n    'text-(--pre-fg)',\n\n    'font-mono',\n    'whitespace-pre',\n    // Sem efeito com `whitespace-pre`. Com `whitespace-pre-wrap`, quebra também\n    // o token sem espaço (uma URL, um hash), que senão volta a rolar.\n    'wrap-break-word',\n    // O padrão do navegador é 8, largo demais para código indentado com tab.\n    'tab-2',\n\n    'outline-none',\n    // O anel herda a cor do texto, que já contrasta com o fundo em qualquer\n    // variante e esquema.\n    'ring-(--pre-fg)',\n    'focus-ring-inside',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--pre-surface-bg:var(--gray-2)]',\n          '[--pre-subtle-bg:var(--gray-3)]',\n          '[--pre-border:var(--gray-6)]',\n          '[--pre-fg:var(--gray-12)]',\n        ],\n        accent: [\n          '[--pre-surface-bg:var(--accent-2)]',\n          '[--pre-subtle-bg:var(--accent-3)]',\n          '[--pre-border:var(--accent-6)]',\n          '[--pre-fg:var(--accent-12)]',\n        ],\n        red: [\n          '[--pre-surface-bg:var(--red-2)]',\n          '[--pre-subtle-bg:var(--red-3)]',\n          '[--pre-border:var(--red-6)]',\n          '[--pre-fg:var(--red-12)]',\n        ],\n        green: [\n          '[--pre-surface-bg:var(--green-2)]',\n          '[--pre-subtle-bg:var(--green-3)]',\n          '[--pre-border:var(--green-6)]',\n          '[--pre-fg:var(--green-12)]',\n        ],\n        amber: [\n          '[--pre-surface-bg:var(--amber-2)]',\n          '[--pre-subtle-bg:var(--amber-3)]',\n          '[--pre-border:var(--amber-6)]',\n          '[--pre-fg:var(--amber-12)]',\n        ],\n        blue: [\n          '[--pre-surface-bg:var(--blue-2)]',\n          '[--pre-subtle-bg:var(--blue-3)]',\n          '[--pre-border:var(--blue-6)]',\n          '[--pre-fg:var(--blue-12)]',\n        ],\n      },\n      variant: {\n        surface: ['border-(--pre-border)', 'bg-(--pre-surface-bg)'],\n        subtle: ['border-transparent', 'bg-(--pre-subtle-bg)'],\n        outline: ['border-(--pre-border)', 'bg-transparent'],\n        plain: ['border-transparent', 'bg-transparent'],\n      },\n    },\n    defaultVariants: {\n      colorScheme: preDefaultVariants.colorScheme,\n      variant: preDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,qBAA4C;CACvD,aAAa;CACb,SAAS;AACX;;;;;;;;AASA,MAAa,cAAc,IACzB;CACE;CAEA;CACA;CACA;CACA;CACA;CAIA;CACA;CACA;CAEA;CAEA;CAEA;CAEA;CACA;CAGA;CAEA;CAEA;CAGA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,SAAS,CAAC,yBAAyB,uBAAuB;GAC1D,QAAQ,CAAC,sBAAsB,sBAAsB;GACrD,SAAS,CAAC,yBAAyB,gBAAgB;GACnD,OAAO,CAAC,sBAAsB,gBAAgB;EAChD;CACF;CACA,iBAAiB;EACf,aAAa,mBAAmB;EAChC,SAAS,mBAAmB;CAC9B;AACF,CACF"}

package/dist/types/color-scheme.d.ts

@@ -4,13 +4,13 @@
  * a anterior, e cada componente aceita só a camada que faz sentido para ele.
  *
  * Cada valor corresponde a uma escala de cor do tema (`--color-<escala>-1` a
- * `-12`), inspirada no Radix Colors; `brand` é a escala da cor da marca.
+ * `-12`), inspirada no Radix Colors; `accent` é a escala da cor da marca.
  */
 /**
  * Cor neutra e cor da marca. Para controles e estrutura (tabs, select,
  * checkbox, input).
  */
-export type ColorSchemeCore = 'gray' | 'brand';
+export type ColorSchemeCore = 'gray' | 'accent';
 /**
  * Cores de estado: erro, sucesso, aviso e informação. Para o que comunica
  * estado (botão destrutivo, alerta, toast).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lucasbernardosn/react-ui",
-  "version": "0.4.0",
-  "description": "A React component library built with TypeScript and Tailwind CSS, designed to provide a comprehensive set of customizable UI components for modern web applications.",
+  "version": "0.5.0",
+  "description": "Biblioteca de componentes React sobre Base UI e Zag.js, estilizada com Tailwind CSS v4, com tema claro e escuro e textos padrão em pt-BR.",
   "type": "module",
   "imports": {
     "#*": {
@@ -34,7 +34,7 @@
   "dependencies": {
     "@base-ui/react": "1.9.0",
     "@base-ui/utils": "0.5.0",
-    "@lucasbernardosn/ts-utils": "^0.4.0",
+    "@lucasbernardosn/ts-utils": "^0.5.0",
     "@phosphor-icons/react": "2.1.10",
     "@zag-js/clipboard": "1.44.0",
     "@zag-js/collection": "1.44.0",
@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.6.3",
-    "@lucasbernardosn/react-utils": "0.4.0",
+    "@lucasbernardosn/react-utils": "0.5.0",
     "@lucasbernardosn/ts-config": "0.2.0",
     "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "16.3.3",
@@ -70,7 +70,7 @@
     "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "@lucasbernardosn/react-utils": "^0.4.0",
+    "@lucasbernardosn/react-utils": "^0.5.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.0.0"
@@ -82,6 +82,18 @@
   "sideEffects": [
     "**/*.css"
   ],
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "component-library",
+    "design-system",
+    "tailwindcss",
+    "base-ui",
+    "zag-js",
+    "typescript",
+    "pt-br"
+  ],
   "license": "MIT",
   "publishConfig": {
     "access": "public"