@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+import { ColorSchemeCore, ColorSchemeFull, ColorSchemePalette, ColorSchemeSemantic } from "./color-scheme.js";
+export type { ColorSchemeCore, ColorSchemeFull, ColorSchemePalette, ColorSchemeSemantic };

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+import { mergeTwClassNames } from "./merge-class-names.js";
+import { StateClassName, mergeStateClassNames } from "./merge-state-class-names.js";
+import { DataAttribute, normalizeDataAttr } from "./normalize-data-attr.js";
+export { DataAttribute, StateClassName, mergeStateClassNames, mergeTwClassNames, normalizeDataAttr };

package/dist/utils/index.js

@@ -0,0 +1,4 @@
+import { mergeTwClassNames } from "./merge-class-names.js";
+import { mergeStateClassNames } from "./merge-state-class-names.js";
+import { normalizeDataAttr } from "./normalize-data-attr.js";
+export { mergeStateClassNames, mergeTwClassNames, normalizeDataAttr };

package/dist/utils/merge-class-names.d.ts

@@ -0,0 +1,20 @@
+import { ClassValue } from "clsx";
+//#region src/utils/merge-class-names.d.ts
+/**
+ * Função Mesclar Nomes de Classe
+ *
+ * Combina múltiplas classes CSS utilizando clsx para processar diferentes
+ * tipos de valores e twMerge para resolver conflitos entre classes do Tailwind CSS.
+ *
+ *
+ * @param classes - Lista de valores que representam classes CSS.
+ * @returns String contendo as classes combinadas e otimizadas.
+ *
+ * @example
+ *
+ * mergeTwClassNames(['bg-red-500', 'text-white', 'p-4']);
+ * // Retorna: "bg-red-500 text-white p-4"
+ */
+export declare const mergeTwClassNames: (...classes: ClassValue[]) => string;
+//#endregion
+//# sourceMappingURL=merge-class-names.d.ts.map

package/dist/utils/merge-class-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-class-names.d.ts","names":[],"sources":["../../src/utils/merge-class-names.ts"],"mappings":";;;;;;;;;;;;;;;;;qBAkBa,uBAAwB,SAAS"}

package/dist/utils/merge-class-names.js

@@ -0,0 +1,39 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge, validators } from "tailwind-merge";
+//#region src/utils/merge-class-names.ts
+/**
+* Função Mesclar Nomes de Classe
+*
+* Combina múltiplas classes CSS utilizando clsx para processar diferentes
+* tipos de valores e twMerge para resolver conflitos entre classes do Tailwind CSS.
+*
+*
+* @param classes - Lista de valores que representam classes CSS.
+* @returns String contendo as classes combinadas e otimizadas.
+*
+* @example
+*
+* mergeTwClassNames(['bg-red-500', 'text-white', 'p-4']);
+* // Retorna: "bg-red-500 text-white p-4"
+*/
+const mergeTwClassNames = (...classes) => {
+	return extendTwMerge(clsx(...classes));
+};
+/**
+* `tailwind-merge` com os grupos das utilities próprias do tema. Uma utility de fora dos grupos
+* conhecidos nunca é descartada: duas delas na mesma propriedade ficam juntas no elemento, e a
+* ordem do CSS decide, não a `className` de quem usa.
+*/
+const extendTwMerge = extendTailwindMerge({ extend: { classGroups: { "corner-shape": [{ corner: [
+	"normal",
+	"round",
+	"bevel",
+	"notch",
+	"scoop",
+	"squircle",
+	validators.isArbitraryValue
+] }] } } });
+//#endregion
+export { mergeTwClassNames };
+
+//# sourceMappingURL=merge-class-names.js.map

package/dist/utils/merge-class-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-class-names.js","names":[],"sources":["../../src/utils/merge-class-names.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { extendTailwindMerge, validators } from 'tailwind-merge';\n\n/**\n * Função Mesclar Nomes de Classe\n *\n * Combina múltiplas classes CSS utilizando clsx para processar diferentes\n * tipos de valores e twMerge para resolver conflitos entre classes do Tailwind CSS.\n *\n *\n * @param classes - Lista de valores que representam classes CSS.\n * @returns String contendo as classes combinadas e otimizadas.\n *\n * @example\n *\n * mergeTwClassNames(['bg-red-500', 'text-white', 'p-4']);\n * // Retorna: \"bg-red-500 text-white p-4\"\n */\nexport const mergeTwClassNames = (...classes: ClassValue[]): string => {\n  return extendTwMerge(clsx(...classes));\n};\n\n/**\n * `tailwind-merge` com os grupos das utilities próprias do tema. Uma utility de fora dos grupos\n * conhecidos nunca é descartada: duas delas na mesma propriedade ficam juntas no elemento, e a\n * ordem do CSS decide, não a `className` de quem usa.\n */\nconst extendTwMerge = extendTailwindMerge<'corner-shape'>({\n  extend: {\n    classGroups: {\n      // `theme/utilities/corner-shape.css`.\n      'corner-shape': [\n        {\n          corner: [\n            'normal',\n            'round',\n            'bevel',\n            'notch',\n            'scoop',\n            'squircle',\n            validators.isArbitraryValue,\n          ],\n        },\n      ],\n    },\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAa,qBAAqB,GAAG,YAAkC;CACrE,OAAO,cAAc,KAAK,GAAG,OAAO,CAAC;AACvC;;;;;;AAOA,MAAM,gBAAgB,oBAAoC,EACxD,QAAQ,EACN,aAAa,EAEX,gBAAgB,CACd,EACE,QAAQ;CACN;CACA;CACA;CACA;CACA;CACA;CACA,WAAW;AACb,EACF,CACF,EACF,EACF,EACF,CAAC"}

package/dist/utils/merge-state-class-names.d.ts

@@ -0,0 +1,36 @@
+import { ClassValue } from "clsx";
+//#region src/utils/merge-state-class-names.d.ts
+/**
+ * `className` aceito pelos componentes do Base UI: uma string ou uma função
+ * que recebe o estado do componente e devolve a string.
+ *
+ * @template State - Estado que o componente do Base UI entrega à função.
+ */
+export type StateClassName<State> = string | ((state: State) => string | undefined) | undefined;
+/**
+ * Função Mesclar Nomes de Classe com Estado
+ *
+ * Versão do `mergeTwClassNames` para wrappers de componentes do Base UI, cujo
+ * `className` pode ser uma função do estado. Passar essa função direto ao
+ * `mergeTwClassNames` a descartaria sem erro, porque o `clsx` ignora funções.
+ *
+ * Com string (ou `undefined`), devolve as classes já mescladas. Com função,
+ * devolve outra função, que o Base UI chama com o estado; as classes base vêm
+ * primeiro e as de quem usa por último, vencendo os conflitos.
+ *
+ * @template State - Estado do componente do Base UI.
+ * @param baseClassName - Classes do componente (array, string ou saída do `cva`).
+ * @param className - `className` recebido nas props.
+ * @returns String mesclada ou função do estado que devolve a string mesclada.
+ *
+ * @example
+ * ```tsx
+ * <BaseTabs.Tab
+ *   className={mergeStateClassNames(tabsTabVariants({ size }), className)}
+ *   {...rest}
+ * />
+ * ```
+ */
+export declare const mergeStateClassNames: <State>(baseClassName: ClassValue, className: StateClassName<State>) => string | ((state: State) => string);
+//#endregion
+//# sourceMappingURL=merge-state-class-names.d.ts.map

package/dist/utils/merge-state-class-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-state-class-names.d.ts","names":[],"sources":["../../src/utils/merge-state-class-names.ts"],"mappings":";;;;;;;;YASY,eAAe,oBAErB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;qBA2BA,uBAAwB,OACnC,eAAe,YACf,WAAW,eAAe,sBACd,OAAO"}

package/dist/utils/merge-state-class-names.js

@@ -0,0 +1,34 @@
+import { mergeTwClassNames } from "./merge-class-names.js";
+//#region src/utils/merge-state-class-names.ts
+/**
+* Função Mesclar Nomes de Classe com Estado
+*
+* Versão do `mergeTwClassNames` para wrappers de componentes do Base UI, cujo
+* `className` pode ser uma função do estado. Passar essa função direto ao
+* `mergeTwClassNames` a descartaria sem erro, porque o `clsx` ignora funções.
+*
+* Com string (ou `undefined`), devolve as classes já mescladas. Com função,
+* devolve outra função, que o Base UI chama com o estado; as classes base vêm
+* primeiro e as de quem usa por último, vencendo os conflitos.
+*
+* @template State - Estado do componente do Base UI.
+* @param baseClassName - Classes do componente (array, string ou saída do `cva`).
+* @param className - `className` recebido nas props.
+* @returns String mesclada ou função do estado que devolve a string mesclada.
+*
+* @example
+* ```tsx
+* <BaseTabs.Tab
+*   className={mergeStateClassNames(tabsTabVariants({ size }), className)}
+*   {...rest}
+* />
+* ```
+*/
+const mergeStateClassNames = (baseClassName, className) => {
+	if (typeof className === "function") return (state) => mergeTwClassNames(baseClassName, className(state));
+	return mergeTwClassNames(baseClassName, className);
+};
+//#endregion
+export { mergeStateClassNames };
+
+//# sourceMappingURL=merge-state-class-names.js.map

package/dist/utils/merge-state-class-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-state-class-names.js","names":[],"sources":["../../src/utils/merge-state-class-names.ts"],"sourcesContent":["import type { ClassValue } from 'clsx';\nimport { mergeTwClassNames } from './merge-class-names';\n\n/**\n * `className` aceito pelos componentes do Base UI: uma string ou uma função\n * que recebe o estado do componente e devolve a string.\n *\n * @template State - Estado que o componente do Base UI entrega à função.\n */\nexport type StateClassName<State> =\n  | string\n  | ((state: State) => string | undefined)\n  | undefined;\n\n/**\n * Função Mesclar Nomes de Classe com Estado\n *\n * Versão do `mergeTwClassNames` para wrappers de componentes do Base UI, cujo\n * `className` pode ser uma função do estado. Passar essa função direto ao\n * `mergeTwClassNames` a descartaria sem erro, porque o `clsx` ignora funções.\n *\n * Com string (ou `undefined`), devolve as classes já mescladas. Com função,\n * devolve outra função, que o Base UI chama com o estado; as classes base vêm\n * primeiro e as de quem usa por último, vencendo os conflitos.\n *\n * @template State - Estado do componente do Base UI.\n * @param baseClassName - Classes do componente (array, string ou saída do `cva`).\n * @param className - `className` recebido nas props.\n * @returns String mesclada ou função do estado que devolve a string mesclada.\n *\n * @example\n * ```tsx\n * <BaseTabs.Tab\n *   className={mergeStateClassNames(tabsTabVariants({ size }), className)}\n *   {...rest}\n * />\n * ```\n */\nexport const mergeStateClassNames = <State>(\n  baseClassName: ClassValue,\n  className: StateClassName<State>,\n): string | ((state: State) => string) => {\n  if (typeof className === 'function') {\n    return (state: State) => mergeTwClassNames(baseClassName, className(state));\n  }\n\n  return mergeTwClassNames(baseClassName, className);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAa,wBACX,eACA,cACwC;CACxC,IAAI,OAAO,cAAc,YACvB,QAAQ,UAAiB,kBAAkB,eAAe,UAAU,KAAK,CAAC;CAG5E,OAAO,kBAAkB,eAAe,SAAS;AACnD"}

package/dist/utils/normalize-data-attr.d.ts

@@ -0,0 +1,22 @@
+//#region src/utils/normalize-data-attr.d.ts
+/**
+ * Valor normalizado de um atributo de dados HTML (`data-*`).
+ *
+ * `true` indica que o atributo deve ser incluído no elemento; `undefined`
+ * indica que ele deve ser omitido. Esse formato é útil para aplicar atributos
+ * condicionalmente em elementos DOM ou componentes React.
+ */
+export type DataAttribute = true | undefined;
+/**
+ * Normaliza uma condição em um valor apropriado para um atributo `data-*`.
+ *
+ * Retorna `true` quando a condição é verdadeira e `undefined` quando é falsa,
+ * nula ou não definida. Assim, o atributo é incluído somente quando a condição
+ * é atendida.
+ *
+ * @param condition - Condição que determina se o atributo deve ser incluído.
+ * @returns `true` quando a condição é verdadeira; caso contrário, `undefined`.
+ */
+export declare function normalizeDataAttr(condition: boolean | null | undefined): DataAttribute;
+//#endregion
+//# sourceMappingURL=normalize-data-attr.d.ts.map

package/dist/utils/normalize-data-attr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize-data-attr.d.ts","names":[],"sources":["../../src/utils/normalize-data-attr.ts"],"mappings":";;;;;;;;YAOY;;;;;;;;;;;wBAYI,kBACd,wCACC"}

package/dist/utils/normalize-data-attr.js

@@ -0,0 +1,18 @@
+//#region src/utils/normalize-data-attr.ts
+/**
+* Normaliza uma condição em um valor apropriado para um atributo `data-*`.
+*
+* Retorna `true` quando a condição é verdadeira e `undefined` quando é falsa,
+* nula ou não definida. Assim, o atributo é incluído somente quando a condição
+* é atendida.
+*
+* @param condition - Condição que determina se o atributo deve ser incluído.
+* @returns `true` quando a condição é verdadeira; caso contrário, `undefined`.
+*/
+function normalizeDataAttr(condition) {
+	return condition ? true : void 0;
+}
+//#endregion
+export { normalizeDataAttr };
+
+//# sourceMappingURL=normalize-data-attr.js.map

package/dist/utils/normalize-data-attr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize-data-attr.js","names":[],"sources":["../../src/utils/normalize-data-attr.ts"],"sourcesContent":["/**\n * Valor normalizado de um atributo de dados HTML (`data-*`).\n *\n * `true` indica que o atributo deve ser incluído no elemento; `undefined`\n * indica que ele deve ser omitido. Esse formato é útil para aplicar atributos\n * condicionalmente em elementos DOM ou componentes React.\n */\nexport type DataAttribute = true | undefined;\n\n/**\n * Normaliza uma condição em um valor apropriado para um atributo `data-*`.\n *\n * Retorna `true` quando a condição é verdadeira e `undefined` quando é falsa,\n * nula ou não definida. Assim, o atributo é incluído somente quando a condição\n * é atendida.\n *\n * @param condition - Condição que determina se o atributo deve ser incluído.\n * @returns `true` quando a condição é verdadeira; caso contrário, `undefined`.\n */\nexport function normalizeDataAttr(\n  condition: boolean | null | undefined,\n): DataAttribute {\n  return condition ? true : undefined;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,SAAgB,kBACd,WACe;CACf,OAAO,YAAY,OAAO,KAAA;AAC5B"}

package/package.json

@@ -1,6 +1,103 @@
 {
   "name": "@lucasbernardosn/react-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.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.",
+  "type": "module",
+  "imports": {
+    "#*": {
+      "development": "./src/*/index.ts",
+      "types": "./dist/*/index.d.ts",
+      "default": "./dist/*/index.js"
+    }
+  },
+  "exports": {
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "default": "./dist/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "default": "./dist/utils/index.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/types/index.js"
+    },
+    "./*": {
+      "types": "./dist/components/*/index.d.ts",
+      "default": "./dist/components/*/index.js"
+    },
+    "./theme.css": {
+      "default": "./src/theme/theme.css"
+    }
+  },
+  "dependencies": {
+    "@base-ui/react": "1.9.0",
+    "@base-ui/utils": "0.5.0",
+    "@lucasbernardosn/utils": "^0.2.0",
+    "@phosphor-icons/react": "2.1.10",
+    "@zag-js/clipboard": "1.44.0",
+    "@zag-js/collection": "1.44.0",
+    "@zag-js/password-input": "1.44.0",
+    "@zag-js/react": "1.44.0",
+    "@zag-js/splitter": "1.44.0",
+    "@zag-js/steps": "1.44.0",
+    "@zag-js/tree-view": "1.44.0",
+    "@zag-js/types": "1.44.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "react-number-format": "5.4.5",
+    "react-select": "5.10.2",
+    "tailwind-merge": "3.7.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.5.15",
+    "@lucasbernardosn/react-utils": "0.2.0",
+    "@lucasbernardosn/tsconfig": "0.2.0",
+    "@testing-library/jest-dom": "7.0.1",
+    "@testing-library/react": "16.3.3",
+    "@testing-library/user-event": "14.6.7",
+    "@types/node": "26.6.3",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.1.1",
+    "jsdom": "30.1.1",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "tailwind-scrollbar": "4.0.2",
+    "tailwindcss": "4.3.3",
+    "tsdown": "0.23.0",
+    "typescript": "6.0.3",
+    "vitest": "5.0.3"
+  },
+  "peerDependencies": {
+    "@lucasbernardosn/react-utils": "^0.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "files": [
+    "dist",
+    "src/theme/**/*.css"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LucasBernardoSN/react-monorepo.git",
+    "directory": "packages/react/ui"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "build:report": "tsdown --report",
+    "lint": "biome lint --write",
+    "format": "biome format --write",
+    "check": "biome check --write",
+    "test": "vitest",
+    "test:run": "vitest run"
+  }
 }