levannta-ui 1.0.2 → 1.0.4
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 +55 -0
- package/dist/components/ui/Button.d.ts +13 -2
- package/dist/index.css +1 -1
- package/dist/index.esm.js +339 -282
- 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
|
@@ -92,7 +92,62 @@ El componente Button tiene los siguientes tamaños:
|
|
|
92
92
|
</Button>
|
|
93
93
|
```
|
|
94
94
|
|
|
95
|
+
## Componentes
|
|
95
96
|
|
|
97
|
+
### Button
|
|
98
|
+
|
|
99
|
+
El componente Button permite crear botones con diferentes estilos, tamaños y estados.
|
|
100
|
+
|
|
101
|
+
```jsx
|
|
102
|
+
import { Button } from 'levannta-ui';
|
|
103
|
+
import { HomeIcon } from 'levannta-ui/icons';
|
|
104
|
+
|
|
105
|
+
// Botón básico
|
|
106
|
+
<Button>Click me</Button>
|
|
107
|
+
|
|
108
|
+
// Botón con variantes
|
|
109
|
+
<Button variant="outlined" color="error">Cancel</Button>
|
|
110
|
+
|
|
111
|
+
// Botón con iconos
|
|
112
|
+
<Button iconLeft={<HomeIcon />}>Home</Button>
|
|
113
|
+
<Button iconRight={<HomeIcon />}>Next</Button>
|
|
114
|
+
|
|
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>
|
|
118
|
+
|
|
119
|
+
// Botón de solo icono (variante icon)
|
|
120
|
+
<Button variant="icon" aria-label="Home">
|
|
121
|
+
<HomeIcon />
|
|
122
|
+
</Button>
|
|
123
|
+
|
|
124
|
+
// Botón de solo icono (usando propiedad iconOnly)
|
|
125
|
+
<Button iconOnly={<HomeIcon />} aria-label="Home" />
|
|
126
|
+
|
|
127
|
+
// Botón de solo icono redondo
|
|
128
|
+
<Button iconOnly={<HomeIcon />} pill aria-label="Home" />
|
|
129
|
+
|
|
130
|
+
// Botón con ancho personalizado
|
|
131
|
+
<Button width="200px">Ancho fijo</Button>
|
|
132
|
+
<Button width="100%">Ancho completo</Button>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
#### Props
|
|
136
|
+
|
|
137
|
+
| Prop | Tipo | Opciones | Default | Descripción |
|
|
138
|
+
|------|------|----------|---------|-------------|
|
|
139
|
+
| variant | string | 'filled', 'outlined', 'icon' | 'filled' | Estilo del botón |
|
|
140
|
+
| color | string | 'primary', 'secondary', 'error', 'clear' | 'primary' | Color del botón |
|
|
141
|
+
| size | string | 'sm', 'md', 'lg', 'xl' | 'md' | Tamaño del botón |
|
|
142
|
+
| pill | boolean | - | false | Si el botón tiene bordes completamente redondeados |
|
|
143
|
+
| active | boolean | - | false | Si el botón está en estado activo |
|
|
144
|
+
| disabled | boolean | - | false | Si el botón está deshabilitado |
|
|
145
|
+
| iconLeft | ReactNode | - | - | Icono para mostrar a la izquierda del texto (pegado al texto) |
|
|
146
|
+
| iconRight | ReactNode | - | - | Icono para mostrar a la derecha del texto (pegado al texto) |
|
|
147
|
+
| iconLeftJustified | ReactNode | - | - | Icono para mostrar a la izquierda con mayor espacio respecto al texto |
|
|
148
|
+
| iconRightJustified | ReactNode | - | - | Icono para mostrar a la derecha con mayor espacio respecto al texto |
|
|
149
|
+
| iconOnly | ReactNode | - | - | Icono para mostrar como botón de solo icono (sin texto) |
|
|
150
|
+
| width | string \| number | - | - | Ancho personalizado (ej: '200px', '100%', 300) |
|
|
96
151
|
|
|
97
152
|
## Desarrollo
|
|
98
153
|
|
|
@@ -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,20 @@ 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;
|
|
23
|
+
width?: string | number;
|
|
13
24
|
}
|
|
14
25
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
15
26
|
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)}
|