@dexcode-packages/ui 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +53 -0
  2. package/dist/index.cjs +42 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.d.cts +12 -0
  5. package/dist/index.d.ts +12 -0
  6. package/dist/index.js +40 -0
  7. package/dist/index.js.map +1 -0
  8. package/package.json +44 -0
package/README.md ADDED
@@ -0,0 +1,53 @@
1
+ # @dexcode-packages/ui
2
+
3
+ Componentes React (TypeScript + Tailwind CSS) para projetos Next.js, sem
4
+ dependências de terceiros. Os componentes só usam classes utilitárias do
5
+ Tailwind — o CSS não é enviado pelo pacote, quem gera o CSS final é o
6
+ Tailwind do projeto que consome a lib.
7
+
8
+ ## Instalação
9
+
10
+ ```bash
11
+ npm install @dexcode-packages/ui
12
+ ```
13
+
14
+ Requer `react` e `react-dom` >= 18 (peerDependencies) e Tailwind CSS
15
+ configurado no projeto consumidor.
16
+
17
+ ## Configurar o Tailwind para enxergar os componentes
18
+
19
+ O Tailwind v4 ignora `node_modules` por padrão. Adicione a diretiva
20
+ `@source` no seu CSS global apontando para o pacote publicado:
21
+
22
+ ```css
23
+ @import "tailwindcss";
24
+ @source "../node_modules/@dexcode-packages/ui";
25
+ ```
26
+
27
+ (No Tailwind v3, adicione o mesmo caminho no array `content` do
28
+ `tailwind.config.js`.)
29
+
30
+ ## Uso
31
+
32
+ ```tsx
33
+ import { Button } from '@dexcode-packages/ui'
34
+
35
+ export function Example() {
36
+ return (
37
+ <Button variant="primary" size="md" onClick={() => console.log('clicou')}>
38
+ Salvar
39
+ </Button>
40
+ )
41
+ }
42
+ ```
43
+
44
+ ### `Button`
45
+
46
+ | Prop | Tipo | Padrão |
47
+ | --------- | -------------------------------------------------- | ----------- |
48
+ | `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost'` | `'primary'` |
49
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
50
+
51
+ Aceita todas as demais props de `<button>` (`onClick`, `disabled`, etc).
52
+
53
+ Documentação completa com exemplos ao vivo: ver o app `docs` deste monorepo.
package/dist/index.cjs ADDED
@@ -0,0 +1,42 @@
1
+ 'use client'
2
+ 'use strict';
3
+
4
+ var react = require('react');
5
+ var helper = require('@dexcode-packages/helper');
6
+ var jsxRuntime = require('react/jsx-runtime');
7
+
8
+ // src/components/button/button.tsx
9
+ var variantClasses = {
10
+ primary: "bg-slate-900 text-white hover:bg-slate-700 focus-visible:outline-slate-900",
11
+ secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200 focus-visible:outline-slate-400",
12
+ outline: "border border-slate-300 text-slate-900 hover:bg-slate-50 focus-visible:outline-slate-400",
13
+ ghost: "text-slate-900 hover:bg-slate-100 focus-visible:outline-slate-400"
14
+ };
15
+ var sizeClasses = {
16
+ sm: "h-8 px-3 text-sm",
17
+ md: "h-10 px-4 text-sm",
18
+ lg: "h-12 px-6 text-base"
19
+ };
20
+ var Button = react.forwardRef(
21
+ ({ className, variant = "primary", size = "md", type = "button", ...props }, ref) => {
22
+ return /* @__PURE__ */ jsxRuntime.jsx(
23
+ "button",
24
+ {
25
+ ref,
26
+ type,
27
+ className: helper.cn(
28
+ "inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
29
+ variantClasses[variant],
30
+ sizeClasses[size],
31
+ className
32
+ ),
33
+ ...props
34
+ }
35
+ );
36
+ }
37
+ );
38
+ Button.displayName = "Button";
39
+
40
+ exports.Button = Button;
41
+ //# sourceMappingURL=index.cjs.map
42
+ //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/button/button.tsx"],"names":["forwardRef","jsx","cn"],"mappings":";;;;;;;AAcA,IAAM,cAAA,GAAgD;AAAA,EACpD,OAAA,EAAS,4EAAA;AAAA,EACT,SAAA,EAAW,gFAAA;AAAA,EACX,OAAA,EAAS,0FAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAEA,IAAM,WAAA,GAA0C;AAAA,EAC9C,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,mBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,IAAM,MAAA,GAASA,gBAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,OAAA,GAAU,SAAA,EAAW,IAAA,GAAO,IAAA,EAAM,IAAA,GAAO,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACnF,IAAA,uBACEC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAA,EAAWC,SAAA;AAAA,UACT,gNAAA;AAAA,UACA,eAAe,OAAO,CAAA;AAAA,UACtB,YAAY,IAAI,CAAA;AAAA,UAChB;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"index.cjs","sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\nimport type { ButtonHTMLAttributes } from 'react'\nimport { cn } from '@dexcode-packages/helper'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost'\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant\n size?: ButtonSize\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n primary: 'bg-slate-900 text-white hover:bg-slate-700 focus-visible:outline-slate-900',\n secondary: 'bg-slate-100 text-slate-900 hover:bg-slate-200 focus-visible:outline-slate-400',\n outline: 'border border-slate-300 text-slate-900 hover:bg-slate-50 focus-visible:outline-slate-400',\n ghost: 'text-slate-900 hover:bg-slate-100 focus-visible:outline-slate-400'\n}\n\nconst sizeClasses: Record<ButtonSize, string> = {\n sm: 'h-8 px-3 text-sm',\n md: 'h-10 px-4 text-sm',\n lg: 'h-12 px-6 text-base'\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant = 'primary', size = 'md', type = 'button', ...props }, ref) => {\n return (\n <button\n ref={ref}\n type={type}\n className={cn(\n 'inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',\n variantClasses[variant],\n sizeClasses[size],\n className\n )}\n {...props}\n />\n )\n }\n)\n\nButton.displayName = 'Button'\n"]}
package/dist/index.d.cts ADDED
@@ -0,0 +1,12 @@
1
+ import * as react from 'react';
2
+ import { ButtonHTMLAttributes } from 'react';
3
+
4
+ type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
5
+ type ButtonSize = 'sm' | 'md' | 'lg';
6
+ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
7
+ variant?: ButtonVariant;
8
+ size?: ButtonSize;
9
+ }
10
+ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
11
+
12
+ export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };
package/dist/index.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import * as react from 'react';
2
+ import { ButtonHTMLAttributes } from 'react';
3
+
4
+ type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
5
+ type ButtonSize = 'sm' | 'md' | 'lg';
6
+ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
7
+ variant?: ButtonVariant;
8
+ size?: ButtonSize;
9
+ }
10
+ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
11
+
12
+ export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };
package/dist/index.js ADDED
@@ -0,0 +1,40 @@
1
+ 'use client'
2
+ import { forwardRef } from 'react';
3
+ import { cn } from '@dexcode-packages/helper';
4
+ import { jsx } from 'react/jsx-runtime';
5
+
6
+ // src/components/button/button.tsx
7
+ var variantClasses = {
8
+ primary: "bg-slate-900 text-white hover:bg-slate-700 focus-visible:outline-slate-900",
9
+ secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200 focus-visible:outline-slate-400",
10
+ outline: "border border-slate-300 text-slate-900 hover:bg-slate-50 focus-visible:outline-slate-400",
11
+ ghost: "text-slate-900 hover:bg-slate-100 focus-visible:outline-slate-400"
12
+ };
13
+ var sizeClasses = {
14
+ sm: "h-8 px-3 text-sm",
15
+ md: "h-10 px-4 text-sm",
16
+ lg: "h-12 px-6 text-base"
17
+ };
18
+ var Button = forwardRef(
19
+ ({ className, variant = "primary", size = "md", type = "button", ...props }, ref) => {
20
+ return /* @__PURE__ */ jsx(
21
+ "button",
22
+ {
23
+ ref,
24
+ type,
25
+ className: cn(
26
+ "inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
27
+ variantClasses[variant],
28
+ sizeClasses[size],
29
+ className
30
+ ),
31
+ ...props
32
+ }
33
+ );
34
+ }
35
+ );
36
+ Button.displayName = "Button";
37
+
38
+ export { Button };
39
+ //# sourceMappingURL=index.js.map
40
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/button/button.tsx"],"names":[],"mappings":";;;;;AAcA,IAAM,cAAA,GAAgD;AAAA,EACpD,OAAA,EAAS,4EAAA;AAAA,EACT,SAAA,EAAW,gFAAA;AAAA,EACX,OAAA,EAAS,0FAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAEA,IAAM,WAAA,GAA0C;AAAA,EAC9C,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,mBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,IAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,OAAA,GAAU,SAAA,EAAW,IAAA,GAAO,IAAA,EAAM,IAAA,GAAO,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACnF,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,gNAAA;AAAA,UACA,eAAe,OAAO,CAAA;AAAA,UACtB,YAAY,IAAI,CAAA;AAAA,UAChB;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"index.js","sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\nimport type { ButtonHTMLAttributes } from 'react'\nimport { cn } from '@dexcode-packages/helper'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost'\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant\n size?: ButtonSize\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n primary: 'bg-slate-900 text-white hover:bg-slate-700 focus-visible:outline-slate-900',\n secondary: 'bg-slate-100 text-slate-900 hover:bg-slate-200 focus-visible:outline-slate-400',\n outline: 'border border-slate-300 text-slate-900 hover:bg-slate-50 focus-visible:outline-slate-400',\n ghost: 'text-slate-900 hover:bg-slate-100 focus-visible:outline-slate-400'\n}\n\nconst sizeClasses: Record<ButtonSize, string> = {\n sm: 'h-8 px-3 text-sm',\n md: 'h-10 px-4 text-sm',\n lg: 'h-12 px-6 text-base'\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant = 'primary', size = 'md', type = 'button', ...props }, ref) => {\n return (\n <button\n ref={ref}\n type={type}\n className={cn(\n 'inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',\n variantClasses[variant],\n sizeClasses[size],\n className\n )}\n {...props}\n />\n )\n }\n)\n\nButton.displayName = 'Button'\n"]}
package/package.json ADDED
@@ -0,0 +1,44 @@
1
+ {
2
+ "name": "@dexcode-packages/ui",
3
+ "version": "0.1.1",
4
+ "description": "Componentes React (TypeScript + Tailwind CSS) para projetos Next.js, sem dependencias de terceiros.",
5
+ "license": "MIT",
6
+ "type": "module",
7
+ "sideEffects": false,
8
+ "main": "./dist/index.cjs",
9
+ "module": "./dist/index.js",
10
+ "types": "./dist/index.d.ts",
11
+ "exports": {
12
+ ".": {
13
+ "types": {
14
+ "import": "./dist/index.d.ts",
15
+ "require": "./dist/index.d.cts"
16
+ },
17
+ "import": "./dist/index.js",
18
+ "require": "./dist/index.cjs"
19
+ }
20
+ },
21
+ "files": [
22
+ "dist"
23
+ ],
24
+ "publishConfig": {
25
+ "access": "public"
26
+ },
27
+ "scripts": {
28
+ "build": "tsup",
29
+ "dev": "tsup --watch"
30
+ },
31
+ "peerDependencies": {
32
+ "react": ">=18",
33
+ "react-dom": ">=18"
34
+ },
35
+ "dependencies": {
36
+ "@dexcode-packages/helper": "^0.2.0"
37
+ },
38
+ "devDependencies": {
39
+ "@types/react": "^19.2.0",
40
+ "@types/react-dom": "^19.2.0",
41
+ "react": "^19.2.7",
42
+ "react-dom": "^19.2.7"
43
+ }
44
+ }