@denisluyo/react-web 0.1.0
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/LICENSE +21 -0
- package/README.md +27 -0
- package/dist/Button.d.ts +19 -0
- package/dist/Button.d.ts.map +1 -0
- package/dist/Button.js +7 -0
- package/dist/Checkbox.d.ts +13 -0
- package/dist/Checkbox.d.ts.map +1 -0
- package/dist/Checkbox.js +11 -0
- package/dist/Chip.d.ts +21 -0
- package/dist/Chip.d.ts.map +1 -0
- package/dist/Chip.js +24 -0
- package/dist/RadioButton.d.ts +14 -0
- package/dist/RadioButton.d.ts.map +1 -0
- package/dist/RadioButton.js +10 -0
- package/dist/TextArea.d.ts +23 -0
- package/dist/TextArea.d.ts.map +1 -0
- package/dist/TextArea.js +19 -0
- package/dist/TextField.d.ts +44 -0
- package/dist/TextField.d.ts.map +1 -0
- package/dist/TextField.js +23 -0
- package/dist/Toast.d.ts +20 -0
- package/dist/Toast.d.ts.map +1 -0
- package/dist/Toast.js +14 -0
- package/dist/assets/checkbox-check.svg +5 -0
- package/dist/assets/chip-info-mark.svg +3 -0
- package/dist/assets/chip-info-ring.svg +3 -0
- package/dist/assets/password-eye-slash.svg +3 -0
- package/dist/assets/toast-close-backward.svg +1 -0
- package/dist/assets/toast-close-forward.svg +1 -0
- package/dist/assets/toast-error.svg +1 -0
- package/dist/assets/toast-information.svg +1 -0
- package/dist/assets/toast-success.svg +1 -0
- package/dist/assets/toast-warning.svg +1 -0
- package/dist/button.css +204 -0
- package/dist/checkbox.css +79 -0
- package/dist/chip.css +106 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +7 -0
- package/dist/radio-button.css +138 -0
- package/dist/styles.css +7 -0
- package/dist/text-area.css +119 -0
- package/dist/text-field.css +181 -0
- package/dist/toast.css +152 -0
- package/package.json +39 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Denis Luyo
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# @denisluyo/react-web
|
|
2
|
+
|
|
3
|
+
Componentes React generales del Design System. No contiene valores de marca: consume las variables semánticas del tema instalado por el producto.
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
import { Button } from '@denisluyo/react-web';
|
|
7
|
+
import '@denisluyo/theme-english-product/css';
|
|
8
|
+
import '@denisluyo/react-web/styles.css';
|
|
9
|
+
|
|
10
|
+
<Button variant="contained-contrast" size="large">
|
|
11
|
+
Continuar
|
|
12
|
+
</Button>;
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
`Button` ofrece las variantes `contained-contrast`, `contained`, `outlined` y `text`; tamaños `large`, `medium` y `small`; estados nativos hover, active y disabled; `loading`; y slots `startIcon`/`endIcon`.
|
|
16
|
+
|
|
17
|
+
`RadioButton` usa un `input[type="radio"]` nativo, tamaños `medium` y `small`, selección mediante `checked`, label opcional, estados hover/active/disabled y `loading` como traducción de Skeleton.
|
|
18
|
+
|
|
19
|
+
`Checkbox` usa un `input[type="checkbox"]` nativo de 24 px, permite labels antes y después del control y conserva los estados Default, Selected, Empty, Disabled-Default y Disabled-Selected de Figma.
|
|
20
|
+
|
|
21
|
+
`TextField` usa un `input` nativo, conecta label y ayuda, expone error y disabled, y permite adornos configurables con switches de visibilidad independientes. Con `type="password"` y `showPasswordToggle` incorpora el control accesible para mostrar u ocultar la contraseña sin duplicar el componente.
|
|
22
|
+
|
|
23
|
+
`TextArea` usa un `textarea` nativo de 120 px de alto, conecta label y ayuda, expone error y disabled y permite configurar el redimensionamiento con `resize`.
|
|
24
|
+
|
|
25
|
+
`Chip` usa un botón toggle nativo de 24 px, comunica selección con `aria-pressed`, admite estado controlado/no controlado y expone iconos inicial/final con switches independientes.
|
|
26
|
+
|
|
27
|
+
`Toast` comunica feedback posterior a una acción mediante los estados `information`, `success`, `warning` y `error`; deriva `status`/`alert`, permite ocultar icono y cierre y delega la duración y la cola al proyecto consumidor.
|
package/dist/Button.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type ButtonVariant = 'contained-contrast' | 'contained' | 'outlined' | 'text';
|
|
3
|
+
export type ButtonSize = 'large' | 'medium' | 'small';
|
|
4
|
+
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
/** Jerarquía visual del botón. */
|
|
6
|
+
variant?: ButtonVariant;
|
|
7
|
+
/** Altura: large 56px, medium 48px y small 40px. */
|
|
8
|
+
size?: ButtonSize;
|
|
9
|
+
/** Sustituye el contenido por el skeleton de Figma y deshabilita la acción. */
|
|
10
|
+
loading?: boolean;
|
|
11
|
+
/** Texto anunciado mientras el botón está cargando. */
|
|
12
|
+
loadingLabel?: string;
|
|
13
|
+
/** Icono decorativo previo al label. */
|
|
14
|
+
startIcon?: ReactNode;
|
|
15
|
+
/** Icono decorativo posterior al label. */
|
|
16
|
+
endIcon?: ReactNode;
|
|
17
|
+
}
|
|
18
|
+
export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
19
|
+
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,aAAa,GAAG,oBAAoB,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AACrF,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,kCAAkC;IAClC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,oDAAoD;IACpD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAID,eAAO,MAAM,MAAM,2GA0CjB,CAAC"}
|
package/dist/Button.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
const classes = (...values) => values.filter(Boolean).join(' ');
|
|
4
|
+
export const Button = forwardRef(function Button({ children, className, disabled = false, endIcon, loading = false, loadingLabel = 'Cargando', size = 'large', startIcon, type = 'button', variant = 'contained-contrast', ...props }, ref) {
|
|
5
|
+
const isDisabled = disabled || loading;
|
|
6
|
+
return (_jsx("button", { ...props, ref: ref, type: type, className: classes('ds-button', `ds-button--${variant}`, `ds-button--${size}`, className), disabled: isDisabled, "aria-busy": loading || undefined, "data-loading": loading || undefined, children: loading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "ds-button__skeleton", "aria-hidden": "true" }), _jsx("span", { className: "ds-visually-hidden", children: loadingLabel })] })) : (_jsxs(_Fragment, { children: [startIcon ? _jsx("span", { className: "ds-button__icon", "aria-hidden": "true", children: startIcon }) : null, _jsx("span", { className: "ds-button__label", children: children }), endIcon ? _jsx("span", { className: "ds-button__icon", "aria-hidden": "true", children: endIcon }) : null] })) }));
|
|
7
|
+
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
|
|
3
|
+
/** Texto asociado al control. */
|
|
4
|
+
label?: ReactNode;
|
|
5
|
+
/** Muestra el texto antes del control, equivalente a ←Text en Figma. */
|
|
6
|
+
showLabelBefore?: boolean;
|
|
7
|
+
/** Muestra el texto después del control, equivalente a Text→ en Figma. */
|
|
8
|
+
showLabelAfter?: boolean;
|
|
9
|
+
/** Aplica el estado informativo Empty definido en Figma. */
|
|
10
|
+
empty?: boolean;
|
|
11
|
+
}
|
|
12
|
+
export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
13
|
+
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjG,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0EAA0E;IAC1E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAKD,eAAO,MAAM,QAAQ,4GA4CnB,CAAC"}
|
package/dist/Checkbox.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useId } from 'react';
|
|
3
|
+
const checkIcon = new URL('./assets/checkbox-check.svg', import.meta.url).href;
|
|
4
|
+
const classes = (...values) => values.filter(Boolean).join(' ');
|
|
5
|
+
export const Checkbox = forwardRef(function Checkbox({ 'aria-label': ariaLabel, checked, className, disabled = false, empty = false, id: providedId, label = 'Texto', showLabelAfter = true, showLabelBefore = true, ...props }, ref) {
|
|
6
|
+
const generatedId = useId();
|
|
7
|
+
const id = providedId ?? generatedId;
|
|
8
|
+
const hasVisibleLabel = (showLabelBefore || showLabelAfter) && label != null;
|
|
9
|
+
const fallbackLabel = !hasVisibleLabel && typeof label === 'string' ? label : undefined;
|
|
10
|
+
return (_jsxs("label", { className: classes('ds-checkbox', className), htmlFor: id, "data-empty": empty && !checked ? true : undefined, "data-selected": checked || undefined, children: [showLabelBefore && label != null ? _jsx("span", { className: "ds-checkbox__label ds-checkbox__label--before", children: label }) : null, _jsx("input", { ...props, ref: ref, id: id, type: "checkbox", className: "ds-checkbox__input", checked: checked, disabled: disabled, "aria-label": ariaLabel ?? fallbackLabel }), _jsx("span", { className: "ds-checkbox__control", "aria-hidden": "true", children: checked ? _jsx("img", { className: "ds-checkbox__check", src: checkIcon, alt: "" }) : null }), showLabelAfter && label != null ? _jsx("span", { className: "ds-checkbox__label ds-checkbox__label--after", children: label }) : null] }));
|
|
11
|
+
});
|
package/dist/Chip.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
|
|
3
|
+
/** Texto visible del chip. */
|
|
4
|
+
label?: ReactNode;
|
|
5
|
+
/** Estado seleccionado controlado. */
|
|
6
|
+
selected?: boolean;
|
|
7
|
+
/** Estado seleccionado inicial cuando no está controlado. */
|
|
8
|
+
defaultSelected?: boolean;
|
|
9
|
+
/** Se ejecuta cuando el usuario cambia la selección. */
|
|
10
|
+
onSelectedChange?: (selected: boolean) => void;
|
|
11
|
+
/** Icono previo al label; usa Info de Figma cuando no se proporciona. */
|
|
12
|
+
startIcon?: ReactNode;
|
|
13
|
+
/** Icono posterior al label; usa Info de Figma cuando no se proporciona. */
|
|
14
|
+
endIcon?: ReactNode;
|
|
15
|
+
/** Muestra u oculta el icono inicial. */
|
|
16
|
+
showStartIcon?: boolean;
|
|
17
|
+
/** Muestra u oculta el icono final. */
|
|
18
|
+
showEndIcon?: boolean;
|
|
19
|
+
}
|
|
20
|
+
export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
21
|
+
//# sourceMappingURL=Chip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../src/Chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC1F,8BAA8B;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,yEAAyE;IACzE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yCAAyC;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAaD,eAAO,MAAM,IAAI,yGAwDf,CAAC"}
|
package/dist/Chip.js
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useState } from 'react';
|
|
3
|
+
const classes = (...values) => values.filter(Boolean).join(' ');
|
|
4
|
+
function InfoIcon() {
|
|
5
|
+
return (_jsxs("span", { className: "ds-chip__info", "aria-hidden": "true", children: [_jsx("span", { className: "ds-chip__info-ring" }), _jsx("span", { className: "ds-chip__info-mark" })] }));
|
|
6
|
+
}
|
|
7
|
+
export const Chip = forwardRef(function Chip({ className, defaultSelected = false, disabled = false, endIcon, label = 'Texto', onClick, onSelectedChange, selected, showEndIcon = true, showStartIcon = true, startIcon, type = 'button', ...props }, ref) {
|
|
8
|
+
const [internalSelected, setInternalSelected] = useState(defaultSelected);
|
|
9
|
+
const isSelected = selected ?? internalSelected;
|
|
10
|
+
const startContent = startIcon === undefined ? _jsx(InfoIcon, {}) : startIcon;
|
|
11
|
+
const endContent = endIcon === undefined ? _jsx(InfoIcon, {}) : endIcon;
|
|
12
|
+
const hasStartIcon = showStartIcon && startContent != null;
|
|
13
|
+
const hasEndIcon = showEndIcon && endContent != null;
|
|
14
|
+
const handleClick = (event) => {
|
|
15
|
+
if (!disabled) {
|
|
16
|
+
const nextSelected = !isSelected;
|
|
17
|
+
if (selected === undefined)
|
|
18
|
+
setInternalSelected(nextSelected);
|
|
19
|
+
onSelectedChange?.(nextSelected);
|
|
20
|
+
}
|
|
21
|
+
onClick?.(event);
|
|
22
|
+
};
|
|
23
|
+
return (_jsxs("button", { ...props, ref: ref, type: type, className: classes('ds-chip', className), disabled: disabled, "aria-pressed": isSelected, "data-selected": isSelected || undefined, "data-has-start-icon": hasStartIcon || undefined, "data-has-end-icon": hasEndIcon || undefined, onClick: handleClick, children: [hasStartIcon ? (_jsx("span", { className: "ds-chip__icon", "aria-hidden": "true", children: startContent })) : null, _jsx("span", { className: "ds-chip__label", children: label }), hasEndIcon ? (_jsx("span", { className: "ds-chip__icon", "aria-hidden": "true", children: endContent })) : null] }));
|
|
24
|
+
});
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type RadioButtonSize = 'medium' | 'small';
|
|
3
|
+
export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
|
|
4
|
+
/** Escala visual del control: medium 24px o small 16px. */
|
|
5
|
+
size?: RadioButtonSize;
|
|
6
|
+
/** Contenido asociado al radio button. */
|
|
7
|
+
label?: ReactNode;
|
|
8
|
+
/** Permite ocultar visualmente el label conservando un nombre accesible. */
|
|
9
|
+
showLabel?: boolean;
|
|
10
|
+
/** Traduce el estado Skeleton de Figma a un estado no interactivo. */
|
|
11
|
+
loading?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export declare const RadioButton: import("react").ForwardRefExoticComponent<RadioButtonProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
14
|
+
//# sourceMappingURL=RadioButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../src/RadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpG,2DAA2D;IAC3D,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAID,eAAO,MAAM,WAAW,+GAuCtB,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useId } from 'react';
|
|
3
|
+
const classes = (...values) => values.filter(Boolean).join(' ');
|
|
4
|
+
export const RadioButton = forwardRef(function RadioButton({ 'aria-label': ariaLabel, checked, className, disabled = false, id: providedId, label = 'Texto', loading = false, showLabel = true, size = 'medium', ...props }, ref) {
|
|
5
|
+
const generatedId = useId();
|
|
6
|
+
const id = providedId ?? generatedId;
|
|
7
|
+
const isDisabled = disabled || loading;
|
|
8
|
+
const fallbackLabel = !showLabel && typeof label === 'string' ? label : undefined;
|
|
9
|
+
return (_jsxs("label", { className: classes('ds-radio', `ds-radio--${size}`, className), htmlFor: id, "data-loading": loading || undefined, children: [_jsx("input", { ...props, ref: ref, id: id, type: "radio", className: "ds-radio__input", checked: checked, disabled: isDisabled, "aria-busy": loading || undefined, "aria-label": ariaLabel ?? fallbackLabel }), _jsx("span", { className: "ds-radio__control", "aria-hidden": "true", children: _jsx("span", { className: "ds-radio__dot" }) }), showLabel && label != null ? _jsx("span", { className: "ds-radio__label", children: label }) : null] }));
|
|
10
|
+
});
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { ReactNode, TextareaHTMLAttributes } from 'react';
|
|
2
|
+
export type TextAreaPreviewState = 'focus' | 'writing' | 'error-writing';
|
|
3
|
+
export type TextAreaResize = 'none' | 'vertical' | 'horizontal' | 'both';
|
|
4
|
+
export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
5
|
+
/** Etiqueta visible asociada al área de texto. */
|
|
6
|
+
label?: ReactNode;
|
|
7
|
+
/** Mensaje de ayuda o validación situado debajo del control. */
|
|
8
|
+
helpText?: ReactNode;
|
|
9
|
+
/** Oculta la etiqueta sin eliminar el nombre accesible. */
|
|
10
|
+
showLabel?: boolean;
|
|
11
|
+
/** Oculta el espacio y el contenido del mensaje de ayuda. */
|
|
12
|
+
showHelpText?: boolean;
|
|
13
|
+
/** Aplica el tratamiento de error y aria-invalid. */
|
|
14
|
+
error?: boolean;
|
|
15
|
+
/** Define si el usuario puede redimensionar el área. */
|
|
16
|
+
resize?: TextAreaResize;
|
|
17
|
+
/** Clase aplicada al contenedor raíz. */
|
|
18
|
+
rootClassName?: string;
|
|
19
|
+
/** Fuerza un estado dinámico únicamente en documentación y pruebas visuales. */
|
|
20
|
+
'data-preview-state'?: TextAreaPreviewState;
|
|
21
|
+
}
|
|
22
|
+
export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
23
|
+
//# sourceMappingURL=TextArea.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../src/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAE/D,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,SAAS,GAAG,eAAe,CAAC;AACzE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAEzE,MAAM,WAAW,aAAc,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC;IAChF,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;CAC7C;AAID,eAAO,MAAM,QAAQ,+GAgFnB,CAAC"}
|
package/dist/TextArea.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useId, useState } from 'react';
|
|
3
|
+
const classes = (...values) => values.filter(Boolean).join(' ');
|
|
4
|
+
export const TextArea = forwardRef(function TextArea({ 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, 'data-preview-state': previewState, className, defaultValue, disabled = false, error = false, helpText = 'Help text area', id: providedId, label = 'Text-area', onChange, resize = 'none', rootClassName, showHelpText = true, showLabel = true, style, value, ...props }, ref) {
|
|
5
|
+
const generatedId = useId();
|
|
6
|
+
const id = providedId ?? generatedId;
|
|
7
|
+
const helpId = `${id}-help`;
|
|
8
|
+
const visibleHelp = showHelpText && helpText != null;
|
|
9
|
+
const describedBy = [ariaDescribedBy, visibleHelp ? helpId : undefined].filter(Boolean).join(' ') || undefined;
|
|
10
|
+
const fallbackLabel = !showLabel && typeof label === 'string' ? label : undefined;
|
|
11
|
+
const [uncontrolledHasValue, setUncontrolledHasValue] = useState(() => String(defaultValue ?? '').length > 0);
|
|
12
|
+
const previewValue = value ?? defaultValue ?? '';
|
|
13
|
+
const hasValue = value == null ? uncontrolledHasValue : String(value).length > 0;
|
|
14
|
+
const showPreviewCaret = previewState === 'focus' || previewState === 'writing' || previewState === 'error-writing';
|
|
15
|
+
return (_jsxs("div", { className: classes('ds-text-area', rootClassName), "data-disabled": disabled || undefined, "data-error": error || undefined, "data-has-value": hasValue || undefined, "data-preview-state": previewState, children: [showLabel && label != null ? (_jsx("label", { className: "ds-text-area__label", htmlFor: id, children: label })) : null, _jsxs("span", { className: "ds-text-area__control", children: [_jsx("textarea", { ...props, ref: ref, id: id, className: classes('ds-text-area__input', className), value: value, defaultValue: defaultValue, disabled: disabled, "aria-describedby": describedBy, "aria-invalid": error || undefined, "aria-label": ariaLabel ?? fallbackLabel, "data-preview-state": previewState, onChange: (event) => {
|
|
16
|
+
setUncontrolledHasValue(event.target.value.length > 0);
|
|
17
|
+
onChange?.(event);
|
|
18
|
+
}, style: { ...style, resize } }), showPreviewCaret ? (_jsxs("span", { className: "ds-text-area__preview", "aria-hidden": "true", children: [_jsx("span", { className: "ds-text-area__preview-value", children: String(previewValue) }), _jsx("span", { className: "ds-text-area__preview-caret" })] })) : null] }), visibleHelp ? (_jsx("span", { className: "ds-text-area__help", id: helpId, children: helpText })) : null] }));
|
|
19
|
+
});
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type TextFieldPreviewState = 'focus' | 'writing' | 'error-writing';
|
|
3
|
+
export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
4
|
+
/** Etiqueta visible asociada al campo. */
|
|
5
|
+
label?: ReactNode;
|
|
6
|
+
/** Mensaje de ayuda o validación situado debajo del campo. */
|
|
7
|
+
helpText?: ReactNode;
|
|
8
|
+
/** Oculta la etiqueta sin eliminar el nombre accesible del input. */
|
|
9
|
+
showLabel?: boolean;
|
|
10
|
+
/** Oculta el espacio y el contenido del mensaje de ayuda. */
|
|
11
|
+
showHelpText?: boolean;
|
|
12
|
+
/** Aplica el tratamiento de error y aria-invalid. */
|
|
13
|
+
error?: boolean;
|
|
14
|
+
/** Contenido decorativo situado antes del valor. */
|
|
15
|
+
startAdornment?: ReactNode;
|
|
16
|
+
/** Muestra u oculta el adorno inicial cuando fue proporcionado. */
|
|
17
|
+
showStartAdornment?: boolean;
|
|
18
|
+
/** Segundo contenido decorativo, útil para marcas o medios de pago. */
|
|
19
|
+
secondaryAdornment?: ReactNode;
|
|
20
|
+
/** Muestra u oculta el adorno secundario cuando fue proporcionado. */
|
|
21
|
+
showSecondaryAdornment?: boolean;
|
|
22
|
+
/** Contenido decorativo situado al final del campo. */
|
|
23
|
+
endAdornment?: ReactNode;
|
|
24
|
+
/** Muestra u oculta el adorno final cuando fue proporcionado. */
|
|
25
|
+
showEndAdornment?: boolean;
|
|
26
|
+
/** Añade el control integrado para mostrar u ocultar un input de tipo password. */
|
|
27
|
+
showPasswordToggle?: boolean;
|
|
28
|
+
/** Controla externamente si la contraseña se muestra como texto. */
|
|
29
|
+
passwordVisible?: boolean;
|
|
30
|
+
/** Define la visibilidad inicial cuando el toggle no está controlado. */
|
|
31
|
+
defaultPasswordVisible?: boolean;
|
|
32
|
+
/** Se ejecuta al cambiar la visibilidad de la contraseña. */
|
|
33
|
+
onPasswordVisibilityChange?: (visible: boolean) => void;
|
|
34
|
+
/** Nombre accesible del botón cuando la contraseña está oculta. */
|
|
35
|
+
showPasswordLabel?: string;
|
|
36
|
+
/** Nombre accesible del botón cuando la contraseña está visible. */
|
|
37
|
+
hidePasswordLabel?: string;
|
|
38
|
+
/** Clase aplicada al contenedor raíz. */
|
|
39
|
+
rootClassName?: string;
|
|
40
|
+
/** Fuerza un estado visual únicamente para documentación y pruebas visuales. */
|
|
41
|
+
'data-preview-state'?: TextFieldPreviewState;
|
|
42
|
+
}
|
|
43
|
+
export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
44
|
+
//# sourceMappingURL=TextField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,SAAS,GAAG,eAAe,CAAC;AAE1E,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACzF,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oDAAoD;IACpD,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,sEAAsE;IACtE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uDAAuD;IACvD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oEAAoE;IACpE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yEAAyE;IACzE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,6DAA6D;IAC7D,0BAA0B,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,oBAAoB,CAAC,EAAE,qBAAqB,CAAC;CAC9C;AAID,eAAO,MAAM,SAAS,6GA+GpB,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useId, useState } from 'react';
|
|
3
|
+
const classes = (...values) => values.filter(Boolean).join(' ');
|
|
4
|
+
export const TextField = forwardRef(function TextField({ 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, 'data-preview-state': previewState, className, defaultValue, defaultPasswordVisible = false, disabled = false, endAdornment, error = false, helpText = 'Help text', id: providedId, label = 'Label', hidePasswordLabel = 'Ocultar contraseña', onPasswordVisibilityChange, passwordVisible, rootClassName, secondaryAdornment, showEndAdornment = true, showHelpText = true, showLabel = true, showPasswordLabel = 'Mostrar contraseña', showPasswordToggle = false, showSecondaryAdornment = true, showStartAdornment = true, startAdornment, type, value, ...props }, ref) {
|
|
5
|
+
const generatedId = useId();
|
|
6
|
+
const id = providedId ?? generatedId;
|
|
7
|
+
const helpId = `${id}-help`;
|
|
8
|
+
const visibleHelp = showHelpText && helpText != null;
|
|
9
|
+
const describedBy = [ariaDescribedBy, visibleHelp ? helpId : undefined].filter(Boolean).join(' ') || undefined;
|
|
10
|
+
const fallbackLabel = !showLabel && typeof label === 'string' ? label : undefined;
|
|
11
|
+
const previewValue = value ?? defaultValue ?? '';
|
|
12
|
+
const showPreviewCaret = previewState === 'focus' || previewState === 'writing' || previewState === 'error-writing';
|
|
13
|
+
const [internalPasswordVisible, setInternalPasswordVisible] = useState(defaultPasswordVisible);
|
|
14
|
+
const hasPasswordToggle = showPasswordToggle && type === 'password';
|
|
15
|
+
const isPasswordVisible = passwordVisible ?? internalPasswordVisible;
|
|
16
|
+
const togglePasswordVisibility = () => {
|
|
17
|
+
const nextVisible = !isPasswordVisible;
|
|
18
|
+
if (passwordVisible === undefined)
|
|
19
|
+
setInternalPasswordVisible(nextVisible);
|
|
20
|
+
onPasswordVisibilityChange?.(nextVisible);
|
|
21
|
+
};
|
|
22
|
+
return (_jsxs("div", { className: classes('ds-text-field', rootClassName), "data-disabled": disabled || undefined, "data-error": error || undefined, "data-password-field": hasPasswordToggle || undefined, "data-password-visible": hasPasswordToggle ? isPasswordVisible : undefined, "data-preview-state": previewState, children: [showLabel && label != null ? (_jsx("label", { className: "ds-text-field__label", htmlFor: id, children: label })) : null, _jsxs("div", { className: "ds-text-field__field", children: [showStartAdornment && startAdornment != null ? _jsx("span", { className: "ds-text-field__adornment", children: startAdornment }) : null, showSecondaryAdornment && secondaryAdornment != null ? _jsx("span", { className: "ds-text-field__adornment", children: secondaryAdornment }) : null, _jsxs("span", { className: "ds-text-field__input-shell", children: [_jsx("input", { ...props, ref: ref, id: id, className: classes('ds-text-field__input', className), value: value, defaultValue: defaultValue, disabled: disabled, type: hasPasswordToggle && isPasswordVisible ? 'text' : type, "aria-describedby": describedBy, "aria-invalid": error || undefined, "aria-label": ariaLabel ?? fallbackLabel, "data-preview-state": previewState }), showPreviewCaret ? (_jsxs("span", { className: "ds-text-field__preview", "aria-hidden": "true", children: [_jsx("span", { className: "ds-text-field__preview-value", children: String(previewValue) }), _jsx("span", { className: "ds-text-field__preview-caret" })] })) : null] }), showEndAdornment && endAdornment != null ? _jsx("span", { className: "ds-text-field__adornment", children: endAdornment }) : null, hasPasswordToggle ? (_jsx("button", { className: "ds-text-field__password-toggle", type: "button", disabled: disabled, "aria-label": isPasswordVisible ? hidePasswordLabel : showPasswordLabel, "aria-pressed": isPasswordVisible, onClick: togglePasswordVisibility, children: _jsx("span", { className: "ds-text-field__password-icon", "aria-hidden": "true" }) })) : null] }), visibleHelp ? (_jsx("span", { className: "ds-text-field__help", id: helpId, children: helpText })) : null] }));
|
|
23
|
+
});
|
package/dist/Toast.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type ToastState = 'information' | 'success' | 'warning' | 'error';
|
|
3
|
+
export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
4
|
+
/** Mensaje visible que comunica el resultado de una acción. */
|
|
5
|
+
label?: ReactNode;
|
|
6
|
+
/** Intención semántica y tratamiento visual del mensaje. */
|
|
7
|
+
state?: ToastState;
|
|
8
|
+
/** Muestra u oculta el icono asociado al estado. */
|
|
9
|
+
showIcon?: boolean;
|
|
10
|
+
/** Reemplaza el icono predeterminado del estado. */
|
|
11
|
+
icon?: ReactNode;
|
|
12
|
+
/** Muestra u oculta el botón para cerrar el mensaje. */
|
|
13
|
+
showClose?: boolean;
|
|
14
|
+
/** Nombre accesible del botón de cierre. */
|
|
15
|
+
closeLabel?: string;
|
|
16
|
+
/** Se ejecuta cuando la persona activa el botón de cierre. */
|
|
17
|
+
onClose?: () => void;
|
|
18
|
+
}
|
|
19
|
+
export declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
20
|
+
//# sourceMappingURL=Toast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEzE,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAClF,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAiBD,eAAO,MAAM,KAAK,uGAqChB,CAAC"}
|
package/dist/Toast.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
const classes = (...values) => values.filter(Boolean).join(' ');
|
|
4
|
+
function StateIcon({ state }) {
|
|
5
|
+
return _jsx("span", { className: `ds-toast__state-icon ds-toast__state-icon--${state}`, "aria-hidden": "true" });
|
|
6
|
+
}
|
|
7
|
+
function CloseIcon() {
|
|
8
|
+
return (_jsxs("span", { className: "ds-toast__close-icon", "aria-hidden": "true", children: [_jsx("span", { className: "ds-toast__close-stroke ds-toast__close-stroke--forward" }), _jsx("span", { className: "ds-toast__close-stroke ds-toast__close-stroke--backward" })] }));
|
|
9
|
+
}
|
|
10
|
+
export const Toast = forwardRef(function Toast({ className, closeLabel = 'Cerrar notificación', icon, label = 'Used to notify the user about something happening in the app', onClose, role, showClose = true, showIcon = true, state = 'information', ...props }, ref) {
|
|
11
|
+
const iconContent = icon === undefined ? _jsx(StateIcon, { state: state }) : icon;
|
|
12
|
+
const hasIcon = showIcon && iconContent != null;
|
|
13
|
+
return (_jsxs("div", { ...props, ref: ref, className: classes('ds-toast', className), "data-state": state, role: role ?? (state === 'error' ? 'alert' : 'status'), children: [_jsxs("span", { className: "ds-toast__content", children: [hasIcon ? _jsx("span", { className: "ds-toast__icon", children: iconContent }) : null, _jsx("span", { className: "ds-toast__label", children: label })] }), showClose ? (_jsx("button", { className: "ds-toast__close", type: "button", "aria-label": closeLabel, onClick: onClose, children: _jsx(CloseIcon, {}) })) : null] }));
|
|
14
|
+
});
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="14.0001" height="11" viewBox="0 0 14.0001 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="Group 1">
|
|
3
|
+
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M13.7475 1.66438C14.1144 1.2516 14.0772 0.619524 13.6645 0.252605C13.2517 -0.114315 12.6196 -0.0771377 12.2527 0.335643L4.95721 8.54297L1.7071 5.29289C1.31658 4.90237 0.683412 4.90237 0.29289 5.2929C-0.0976326 5.68342 -0.0976295 6.31659 0.292897 6.70711L4.28465 10.6988C4.30012 10.7146 4.31621 10.73 4.33291 10.745C4.40068 10.8058 4.47476 10.8557 4.55288 10.8948C4.84102 11.039 5.1816 11.0339 5.46396 10.8862C5.55664 10.8377 5.64304 10.7738 5.71927 10.6948C5.73135 10.6823 5.74304 10.6695 5.75434 10.6566L13.7475 1.66438Z" fill="#FAFAFA"/>
|
|
4
|
+
</g>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="1" height="6" viewBox="0 0 1 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0C0.776133 0 1 0.223854 1 0.5V0.54216C1 0.8183 0.776133 1.04216 0.5 1.04216C0.223867 1.04216 0 0.8183 0 0.54216V0.5C0 0.223854 0.223867 0 0.5 0ZM0.5038 2.06839C0.779933 2.06839 1.0038 2.29225 1.0038 2.56839V5.43479C1.0038 5.71092 0.779933 5.93479 0.5038 5.93479C0.227667 5.93479 0.00380007 5.71092 0.00380007 5.43479V2.56839C0.00380007 2.29225 0.227667 2.06839 0.5038 2.06839Z" fill="#FAFAFA"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M6.5 1C3.46219 1 1 3.46219 1 6.5C1 9.5372 3.46223 12 6.5 12C9.5378 12 12 9.5372 12 6.5C12 3.46219 9.5378 1 6.5 1ZM0 6.5C0 2.90991 2.90991 0 6.5 0C10.0901 0 13 2.90991 13 6.5C13 10.0894 10.0901 13 6.5 13C2.90987 13 0 10.0894 0 6.5Z" fill="#FAFAFA"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M13.8176 8.73771C13.8144 8.74099 13.8112 8.74425 13.808 8.74748L8.74797 13.8075C8.74151 13.8139 8.73497 13.8203 8.72837 13.8264L1.2775 21.2773C1.1275 21.4273 0.9375 21.4973 0.7475 21.4973C0.5575 21.4973 0.3675 21.4273 0.2175 21.2773C-0.0725 20.9873 -0.0725 20.5073 0.2175 20.2173L3.59081 16.844C2.62772 15.9783 1.75906 14.9384 1.00789 13.7475C-0.0521094 12.0975 -0.0521094 9.40754 1.00789 7.74754C3.44789 3.92754 6.99789 1.72754 10.7479 1.72754C12.8371 1.72754 14.8992 2.4129 16.7287 3.70654L20.2178 0.2175C20.5078 -0.0725 20.9878 -0.0725 21.2778 0.2175C21.5678 0.5075 21.5678 0.9875 21.2778 1.2775L13.8176 8.73771ZM13.2325 7.20276C12.5076 6.69194 11.6461 6.41748 10.748 6.41748C8.35797 6.41748 6.41797 8.35748 6.41797 10.7475C6.41797 11.6455 6.69236 12.5069 7.20305 13.2317L4.65208 15.7827C3.77158 14.9916 2.97135 14.0349 2.26789 12.9375C1.51789 11.7675 1.51789 9.72754 2.26789 8.55754C4.42789 5.16754 7.51789 3.22754 10.7479 3.22754C12.4425 3.22754 14.129 3.76136 15.6509 4.78434L13.2325 7.20276ZM10.748 7.91748C11.248 7.91748 11.728 8.04748 12.148 8.28748L8.28797 12.1475C8.04797 11.7275 7.91797 11.2475 7.91797 10.7475C7.91797 9.18748 9.18797 7.91748 10.748 7.91748ZM10.7476 19.7676C9.41762 19.7676 8.11762 19.4976 6.86762 18.9676C6.48762 18.8076 6.30762 18.3676 6.46762 17.9876C6.62762 17.6076 7.06762 17.4276 7.44762 17.5876C8.50762 18.0376 9.61762 18.2676 10.7376 18.2676C13.9676 18.2676 17.0576 16.3276 19.2176 12.9376C19.9676 11.7676 19.9676 9.72756 19.2176 8.55756C18.9076 8.06756 18.5676 7.59756 18.2076 7.15756C17.9476 6.83756 17.9976 6.36756 18.3176 6.09756C18.6376 5.83756 19.1076 5.87756 19.3776 6.20756C19.7676 6.68756 20.1476 7.20756 20.4876 7.74756C21.5476 9.39756 21.5476 12.0876 20.4876 13.7476C18.0476 17.5676 14.4976 19.7676 10.7476 19.7676ZM10.6976 14.4074C10.7676 14.7674 11.0876 15.0174 11.4376 15.0174C11.4547 15.0174 11.4706 15.0163 11.4861 15.0151C11.5161 15.0129 11.5447 15.0108 11.5776 15.0174C13.2976 14.6974 14.6776 13.3274 14.9976 11.5974C15.0776 11.1874 14.8076 10.7974 14.3976 10.7174C13.9876 10.6474 13.5976 10.9074 13.5176 11.3174C13.3176 12.4174 12.3976 13.3374 11.2976 13.5374C10.8876 13.6074 10.6176 13.9974 10.6976 14.4074Z" fill="#404040"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.75 0.75L0.75 10.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.75 0.75L10.75 10.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.364 12.358C12.218 12.504 12.026 12.578 11.834 12.578C11.642 12.578 11.45 12.504 11.303 12.358L9.497 10.551L7.696 12.353C7.403 12.646 6.928 12.646 6.635 12.353C6.343 12.06 6.343 11.586 6.635 11.293L8.436 9.491L6.634 7.688C6.341 7.395 6.341 6.921 6.634 6.628C6.927 6.335 7.401 6.335 7.694 6.628L9.497 8.43L11.298 6.629C11.591 6.337 12.065 6.337 12.358 6.629C12.651 6.922 12.651 7.397 12.358 7.69L10.558 9.491L12.364 11.297C12.657 11.59 12.657 12.065 12.364 12.358ZM13.717 0H5.282C2.122 0 0 2.22 0 5.526V13.474C0 16.779 2.122 19 5.282 19H13.716C16.876 19 19 16.779 19 13.474V5.526C19 2.22 16.877 0 13.717 0Z" fill="black"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.755 7H9.746C9.332 7 8.996 6.664 8.996 6.25C8.996 5.836 9.332 5.5 9.746 5.5C10.16 5.5 10.501 5.836 10.501 6.25C10.501 6.664 10.169 7 9.755 7ZM10.5 13.645C10.5 14.059 10.164 14.395 9.75 14.395C9.336 14.395 9 14.059 9 13.645V9.75003C9 9.33603 9.336 9.00003 9.75 9.00003C10.164 9.00003 10.5 9.33603 10.5 9.75003V13.645ZM9.75 0C2.552 0 0 2.552 0 9.75003C0 16.948 2.552 19.5 9.75 19.5C16.948 19.5 19.5 16.948 19.5 9.75003C19.5 2.552 16.948 0 9.75 0Z" fill="black"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.841 7.90703L9.091 12.653C8.95 12.794 8.76 12.873 8.561 12.873C8.362 12.873 8.171 12.794 8.03 12.653L5.659 10.28C5.366 9.98703 5.366 9.51203 5.659 9.21903C5.953 8.92603 6.428 8.92803 6.72 9.21903L8.561 11.062L12.78 6.846C13.073 6.553 13.548 6.554 13.841 6.846C14.134 7.139 14.134 7.61403 13.841 7.90703ZM9.75 0C2.552 0 0 2.552 0 9.75003C0 16.948 2.552 19.5 9.75 19.5C16.948 19.5 19.5 16.948 19.5 9.75003C19.5 2.552 16.948 0 9.75 0Z" fill="black"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.2624 9.88496C10.2624 10.299 9.92639 10.635 9.51239 10.635C9.09839 10.635 8.76239 10.299 8.76239 9.88496V6.87296C8.76239 6.459 9.09839 6.123 9.51239 6.123C9.92639 6.123 10.2624 6.459 10.2624 6.87296V9.88496ZM9.5104 13.656C9.0964 13.656 8.7604 13.344 8.7604 12.93V12.881C8.7604 12.467 9.0964 12.131 9.5104 12.131C9.9244 12.131 10.2604 12.467 10.2604 12.881C10.2604 13.295 9.9244 13.656 9.5104 13.656ZM18.6714 13.475L11.7114 1.259C11.2624 0.473 10.4544 0.002 9.54939 0H9.54439C8.64339 0 7.83639 0.467 7.38637 1.248L0.338375 13.463C-0.112625 14.243 -0.112625 15.176 0.337375 15.956C0.787375 16.737 1.59537 17.202 2.49637 17.202H16.5044C17.4034 17.202 18.2084 16.739 18.6604 15.961C19.1124 15.185 19.1164 14.255 18.6714 13.475Z" fill="black"/></svg>
|