levannta-ui 1.0.1 → 1.0.3
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.
- package/README.md +42 -54
- package/dist/components/ui/Button.d.ts +12 -2
- package/dist/index.css +1 -1
- package/dist/index.esm.js +322 -274
- package/dist/index.esm.js.map +1 -1
- package/dist/index.umd.js +10 -10
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Levannta UI
|
|
2
2
|
|
|
3
|
-
Una biblioteca de componentes UI moderna construida con React y CSS.
|
|
3
|
+
Una biblioteca de componentes UI moderna construida con React y CSS por Levannta.
|
|
4
4
|
|
|
5
5
|
## Instalación
|
|
6
6
|
|
|
@@ -17,31 +17,6 @@ yarn add levannta-ui
|
|
|
17
17
|
pnpm add levannta-ui
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
-
### Desde GitHub
|
|
21
|
-
|
|
22
|
-
Para instalar la biblioteca directamente desde GitHub, agrega lo siguiente a tu `package.json`:
|
|
23
|
-
|
|
24
|
-
```json
|
|
25
|
-
"dependencies": {
|
|
26
|
-
"levannta-ui": "github:levannta/levannta-ui#main"
|
|
27
|
-
}
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
O usando la línea de comandos:
|
|
31
|
-
|
|
32
|
-
```bash
|
|
33
|
-
# Si estás usando npm
|
|
34
|
-
npm install github:levannta/levannta-ui#main
|
|
35
|
-
|
|
36
|
-
# Si estás usando yarn
|
|
37
|
-
yarn add github:levannta/levannta-ui#main
|
|
38
|
-
|
|
39
|
-
# Si estás usando pnpm
|
|
40
|
-
pnpm add github:levannta/levannta-ui#main
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
Puedes también especificar una versión o commit específico cambiando `#main` por `#tag`, `#semver:x.x.x` o el hash de un commit.
|
|
44
|
-
|
|
45
20
|
## Uso
|
|
46
21
|
|
|
47
22
|
### Importación de componentes
|
|
@@ -117,44 +92,57 @@ El componente Button tiene los siguientes tamaños:
|
|
|
117
92
|
</Button>
|
|
118
93
|
```
|
|
119
94
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
Para usar la biblioteca localmente en otro proyecto:
|
|
95
|
+
## Componentes
|
|
123
96
|
|
|
124
|
-
|
|
125
|
-
# En el directorio de levannta-ui
|
|
126
|
-
npm run build
|
|
127
|
-
```
|
|
97
|
+
### Button
|
|
128
98
|
|
|
129
|
-
|
|
99
|
+
El componente Button permite crear botones con diferentes estilos, tamaños y estados.
|
|
130
100
|
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
{
|
|
134
|
-
"dependencies": {
|
|
135
|
-
"levannta-ui": "file:../path/to/levannta-ui"
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
```
|
|
101
|
+
```jsx
|
|
102
|
+
import { Button } from 'levannta-ui';
|
|
103
|
+
import { HomeIcon } from 'levannta-ui/icons';
|
|
139
104
|
|
|
140
|
-
|
|
105
|
+
// Botón básico
|
|
106
|
+
<Button>Click me</Button>
|
|
141
107
|
|
|
142
|
-
|
|
108
|
+
// Botón con variantes
|
|
109
|
+
<Button variant="outlined" color="error">Cancel</Button>
|
|
143
110
|
|
|
144
|
-
|
|
111
|
+
// Botón con iconos
|
|
112
|
+
<Button iconLeft={<HomeIcon />}>Home</Button>
|
|
113
|
+
<Button iconRight={<HomeIcon />}>Next</Button>
|
|
145
114
|
|
|
146
|
-
|
|
115
|
+
// Botón con iconos justificados (más espacio entre icono y texto)
|
|
116
|
+
<Button iconLeftJustified={<HomeIcon />}>Home</Button>
|
|
117
|
+
<Button iconRightJustified={<HomeIcon />}>Next</Button>
|
|
147
118
|
|
|
148
|
-
|
|
149
|
-
|
|
119
|
+
// Botón de solo icono (variante icon)
|
|
120
|
+
<Button variant="icon" aria-label="Home">
|
|
121
|
+
<HomeIcon />
|
|
122
|
+
</Button>
|
|
150
123
|
|
|
151
|
-
|
|
124
|
+
// Botón de solo icono (usando propiedad iconOnly)
|
|
125
|
+
<Button iconOnly={<HomeIcon />} aria-label="Home" />
|
|
152
126
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
127
|
+
// Botón de solo icono redondo
|
|
128
|
+
<Button iconOnly={<HomeIcon />} pill aria-label="Home" />
|
|
129
|
+
```
|
|
156
130
|
|
|
157
|
-
|
|
131
|
+
#### Props
|
|
132
|
+
|
|
133
|
+
| Prop | Tipo | Opciones | Default | Descripción |
|
|
134
|
+
|------|------|----------|---------|-------------|
|
|
135
|
+
| variant | string | 'filled', 'outlined', 'icon' | 'filled' | Estilo del botón |
|
|
136
|
+
| color | string | 'primary', 'secondary', 'error', 'clear' | 'primary' | Color del botón |
|
|
137
|
+
| size | string | 'sm', 'md', 'lg', 'xl' | 'md' | Tamaño del botón |
|
|
138
|
+
| pill | boolean | - | false | Si el botón tiene bordes completamente redondeados |
|
|
139
|
+
| active | boolean | - | false | Si el botón está en estado activo |
|
|
140
|
+
| disabled | boolean | - | false | Si el botón está deshabilitado |
|
|
141
|
+
| iconLeft | ReactNode | - | - | Icono para mostrar a la izquierda del texto (pegado al texto) |
|
|
142
|
+
| iconRight | ReactNode | - | - | Icono para mostrar a la derecha del texto (pegado al texto) |
|
|
143
|
+
| iconLeftJustified | ReactNode | - | - | Icono para mostrar a la izquierda con mayor espacio respecto al texto |
|
|
144
|
+
| iconRightJustified | ReactNode | - | - | Icono para mostrar a la derecha con mayor espacio respecto al texto |
|
|
145
|
+
| iconOnly | ReactNode | - | - | Icono para mostrar como botón de solo icono (sin texto) |
|
|
158
146
|
|
|
159
147
|
## Desarrollo
|
|
160
148
|
|
|
@@ -178,4 +166,4 @@ npm run build
|
|
|
178
166
|
|
|
179
167
|
## Licencia
|
|
180
168
|
|
|
181
|
-
MIT
|
|
169
|
+
MIT# levannta-ui by Levannta ❤️
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
|
|
4
4
|
declare const buttonVariants: (props?: ({
|
|
@@ -7,9 +7,19 @@ declare const buttonVariants: (props?: ({
|
|
|
7
7
|
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
8
8
|
pill?: boolean | null | undefined;
|
|
9
9
|
active?: boolean | null | undefined;
|
|
10
|
+
iconLeft?: boolean | null | undefined;
|
|
11
|
+
iconRight?: boolean | null | undefined;
|
|
12
|
+
iconLeftJustified?: boolean | null | undefined;
|
|
13
|
+
iconRightJustified?: boolean | null | undefined;
|
|
14
|
+
iconOnly?: boolean | null | undefined;
|
|
10
15
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
11
|
-
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
16
|
+
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, 'iconLeft' | 'iconRight' | 'iconLeftJustified' | 'iconRightJustified' | 'iconOnly'> {
|
|
12
17
|
color?: 'primary' | 'secondary' | 'error' | 'clear';
|
|
18
|
+
iconLeft?: ReactNode;
|
|
19
|
+
iconRight?: ReactNode;
|
|
20
|
+
iconLeftJustified?: ReactNode;
|
|
21
|
+
iconRightJustified?: ReactNode;
|
|
22
|
+
iconOnly?: ReactNode;
|
|
13
23
|
}
|
|
14
24
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
15
25
|
export { Button, buttonVariants };
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.button{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:12px;line-height:24px;font-weight:600;transition:all .2s;outline:none;cursor:pointer;border:none;padding:8px 24px}.button:focus-visible{outline:6px solid #D5FFF2;outline-offset:2px}.button:disabled{opacity:.4;pointer-events:none}.button-filled{background-color:var(--button-bg, hsl(221.2 83.2% 53.3%));color:var(--button-text, white);border:none}.button-filled:hover:not(:disabled){background-color:var(--button-hover, hsl(221.2 83.2% 47.3%))}.button-outlined{background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%));border:1px solid var(--button-border, hsl(214.3 31.8% 91.4%))}.button-outlined:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3));color:var(--button-bg-hover, hsl(221.2 83.2% 47.3%))}.button-icon{width:
|
|
1
|
+
.button{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:12px;line-height:24px;font-weight:600;transition:all .2s;outline:none;cursor:pointer;border:none;padding:8px 24px}.button:focus-visible{outline:6px solid #D5FFF2;outline-offset:2px}.button:disabled{opacity:.4;pointer-events:none}.button-filled{background-color:var(--button-bg, hsl(221.2 83.2% 53.3%));color:var(--button-text, white);border:none}.button-filled:hover:not(:disabled){background-color:var(--button-hover, hsl(221.2 83.2% 47.3%))}.button-outlined{background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%));border:1px solid var(--button-border, hsl(214.3 31.8% 91.4%))}.button-outlined:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3));color:var(--button-bg-hover, hsl(221.2 83.2% 47.3%))}.button-icon{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%))}.button-icon:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3))}.button-icon.button-size-sm{width:36px;height:36px}.button-icon.button-size-md{width:48px;height:48px}.button-icon.button-size-lg{width:56px;height:56px}.button-icon.button-size-xl{width:64px;height:64px}.button-icon.button-pill{border-radius:50%}.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, transparent)}.button-filled.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-outlined.button-active{background-color:transparent;color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, #076046)}.button-icon.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-color-primary{--button-bg: #00F7AA;--button-text:#364153;--button-hover: #AEFFE6;--button-border: #00F7AA;--button-bg-light: hsl(221.2 83.2% 96%);--button-bg-hover: #AEFFE6;--button-bg-active: #076046;--button-text-active: #F9FAFB;--button-border-active: #076046}.button-color-secondary{--button-bg: #00B6FF;--button-text: #364153;--button-hover: #A7F0FF;--button-border: #00B6FF;--button-bg-light: hsl(142.1 76.2% 96%);--button-bg-hover: #A7F0FF;--button-bg-active: #0056B3;--button-text-active: #F9FAFB;--button-border-active: #0056B3}.button-color-error{--button-bg: #FB2C36;--button-text: #F2F3F7;--button-hover: #FF6467;--button-border: #FB2C36;--button-bg-light: hsl(0 84.2% 96%);--button-bg-hover: #FF6467;--button-bg-active: #9F0712;--button-text-active: #F2F3F7;--button-border-active: #9F0712}.button-color-clear{--button-bg: transparent;--button-text: #364153;--button-hover: #F9FAFB;--button-border: #D4D4D4;--button-bg-light: hsl(215.4 16.3% 96%);--button-bg-hover: #F9FAFB;--button-bg-active: transparent;--button-text-active: #364153;--button-border-active: transparent}.button-outlined-primary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-secondary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-error{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-clear{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-primary.button-active,.button-filled-primary.button-active,.button-icon-primary.button-active,.button-outlined-secondary.button-active,.button-filled-secondary.button-active,.button-icon-secondary.button-active,.button-outlined-error.button-active,.button-filled-error.button-active,.button-icon-error.button-active,.button-outlined-clear.button-active,.button-filled-clear.button-active,.button-icon-clear.button-active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active)}.button-filled-primary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-primary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-secondary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-secondary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-error{background-color:var(--button-bg);color:var(--button-text)}.button-filled-error:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-clear{background-color:var(--button-bg);color:var(--button-text)}.button-filled-clear:hover:not(:disabled){background-color:var(--button-hover)}.button-icon-primary{color:var(--button-bg)}.button-icon-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-secondary{color:var(--button-bg)}.button-icon-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-error{color:var(--button-bg)}.button-icon-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-clear{color:var(--button-bg)}.button-icon-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-size-sm{min-width:94px;height:48px;font-size:12px}.button-size-md{min-width:101px;height:56px;font-size:16px}.button-size-lg{min-width:107px;height:72px;font-size:18px}.button-size-xl{min-width:130px;height:80px;font-size:20px}.button-pill{border-radius:9999px}.button-with-icon-left{position:relative;padding-left:3rem}.button-with-icon-right{position:relative;padding-right:3rem}.button-with-icon-left-justified{padding-left:5rem}.button-with-icon-right-justified{padding-right:5rem}.button-icon-left{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-icon-right{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-with-icon-left-justified .button-icon-left{left:1.75rem}.button-with-icon-right-justified .button-icon-right{right:1.75rem}.button-with-icon-left.button-with-icon-right{padding-left:2.5rem;padding-right:2.5rem}.button-size-sm .button-icon-left,.button-size-sm .button-icon-right{font-size:.875rem}.button-size-md .button-icon-left,.button-size-md .button-icon-right{font-size:1rem}.button-size-lg .button-icon-left,.button-size-lg .button-icon-right{font-size:1.125rem}.button-size-xl .button-icon-left,.button-size-xl .button-icon-right{font-size:1.25rem}.button-icon-only{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;display:flex}.button-size-sm.button-icon-only{width:36px;height:36px}.button-size-md.button-icon-only{width:48px;height:48px}.button-size-lg.button-icon-only{width:56px;height:56px}.button-size-xl.button-icon-only{width:64px;height:64px}.button-pill.button-icon-only{border-radius:50%}.button-icon-only.button-color-primary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-secondary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-error{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-clear{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-active{color:var(--button-text-active);background-color:var(--button-bg-active)}
|