@producteca/producteca-ui-kit 1.50.0 → 1.52.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.
|
@@ -7,10 +7,11 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
|
|
|
7
7
|
size?: LinkSize;
|
|
8
8
|
decoration?: LinkDecoration;
|
|
9
9
|
weight?: LinkWeight;
|
|
10
|
+
disabled?: boolean;
|
|
10
11
|
href: string;
|
|
11
12
|
onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
12
13
|
children: React.ReactNode;
|
|
13
14
|
}
|
|
14
|
-
export declare const Link: React.MemoExoticComponent<({ size, decoration, weight, href, onClick, children, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element>;
|
|
15
|
+
export declare const Link: React.MemoExoticComponent<({ size, decoration, weight, disabled, href, onClick, children, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element>;
|
|
15
16
|
export type { LinkSize, LinkDecoration, LinkWeight };
|
|
16
17
|
export default Link;
|
|
@@ -4,14 +4,38 @@ export declare const onChangeSearcher = "\n Callback que se ejecuta cuando se
|
|
|
4
4
|
export declare const onChangeCheckboxInput = "\n Callback que se dispara cuando cambia el valor del input.\n \n #### Par\u00E1metros\n event: `React.ChangeEvent<HTMLInputElement>`\n - `event.target.name`: El nombre del input.\n - `event.target.value`: Siempre es \"on\"\n";
|
|
5
5
|
export declare const onChangeInput = "\n Callback que se dispara cuando cambia el valor del input.\n \n #### Par\u00E1metros\n event: `React.ChangeEvent<HTMLInputElement>`\n - `event.target.name`: El nombre del input.\n - `event.target.value`: El valor actual del input, que debe cumplir con la siguiente interfaz:\n \n ``` typescript\n value: string | number; \n ```\n";
|
|
6
6
|
export declare const isOptionDisabled = " \n Funcion que recibe un valor de tipo SelectOption y deberia devolver un valor booleano\n Si la opci\u00F3n tiene definida un tooltipMessage se va a mostrar al hacer hover.\n \n#### Ejemplo\n ``` typescript\n const isOptionDisabled = (option: SelectOption) => option.value === 2;\n ```\n \n #### Interfaz\n ```typescript\n interface SelectOption {\n label: string;\n value: string | number;\n tooltipMessage?: string;\n [key: string]: any;\n }\n ```\n";
|
|
7
|
-
export declare const selectFieldDescription = "\n
|
|
8
|
-
export declare const formFieldExample = "\n
|
|
7
|
+
export declare const selectFieldDescription = "\n## Uso del componente\n\nEl componente `SelectField` permite seleccionar una o varias opciones de una lista con soporte para b\u00FAsqueda, opciones deshabilitadas y modificadores.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<SelectField\n name=\"productId\"\n label=\"Producto\"\n placeholder=\"Seleccionar...\"\n options={[\n { label: 'Opci\u00F3n 1', value: 1 },\n { label: 'Opci\u00F3n 2', value: 2 },\n { label: 'Opci\u00F3n 3', value: 3, tooltipMessage: 'No disponible' },\n ]}\n onChange={(event) => handleChange(event.target.name, event.target.value)}\n isSearchable\n isClearable\n/>\n```\n\n### Ejemplo con m\u00FAltiple selecci\u00F3n y loader:\n\n```tsx\n<SelectField\n name=\"productIds\"\n label=\"Productos\"\n isMultiple\n options={options}\n rightModifier={isLoading && <Spinner size=\"sm\" />}\n isOptionDisabled={(option) => option.value === 2}\n onChange={(event) => setValue(event.target.value)}\n/>\n```\n";
|
|
8
|
+
export declare const formFieldExample = "\n## Uso del componente\n\nEl componente `FormField` es un input de formulario con label, mensajes de error y soporte para iconos y adornos.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<FormField\n label=\"T\u00EDtulo\"\n name=\"textInput\"\n placeholder=\"Placeholder\"\n size=\"md\"\n type=\"text\"\n onChange={(event) => handleChange(event.target.name, event.target.value)}\n/>\n```\n\n### Ejemplo con validaci\u00F3n personalizada:\n\n```tsx\n<FormField\n label=\"Solo n\u00FAmeros\"\n name=\"numberInput\"\n type=\"number\"\n isValid={(inputValue) => _.isNumber(inputValue)}\n onChange={(event) => setValue(event.target.value)}\n/>\n```\n";
|
|
9
9
|
export declare const isValidInput = "\n Funcion que recibe un valor de tipo inputValue y deberia devolver un valor booleano.\n \n #### Por ejemplo: (inputValue) => _.isNumber(inputValue)\n \n ``` typescript\n type inputValue = string | number; \n ```\n";
|
|
10
10
|
export declare const checkboxInputGroupExample = "\n #### Ejemplo de uso\n \n ``` typescript\n <CheckboxInput\n items={[\n {\n id: '1',\n label: 'Opci\u00F3n 1'\n },\n {\n id: '2',\n label: 'Opci\u00F3n 2'\n },\n {\n disabled: true,\n id: '3',\n label: 'Opci\u00F3n 3'\n }\n ]}\n name=\"CheckboxList\"\n onChange={(event) => handleChange(event.target.name, event.target.value)}\n size=\"lg\"\n title=\"Selecciona una opci\u00F3n\"\n type=\"checkbox\"\n />\n ```\n";
|
|
11
|
-
export declare const checkboxInputExample = " \n
|
|
12
|
-
export declare const searcherExample = " \n
|
|
13
|
-
export declare const saveBarExample = "\n
|
|
14
|
-
export declare const checkboxInputReduxFormExample = "\n
|
|
11
|
+
export declare const checkboxInputExample = "\n## Uso del componente\n\nEl componente `CheckboxInput` / `CheckboxInputGroup` permite mostrar uno o varios checkboxes o radios con label y soporte para Redux Form.\n\n### Ejemplo b\u00E1sico (un solo checkbox):\n\n```tsx\nconst [checked, setChecked] = React.useState(false)\n\n<CheckboxInput\n name=\"Toggle\"\n checked={checked}\n onChange={(e) => setChecked(e.target.checked)}\n label=\"Amazon\"\n title=\"Selecciona qu\u00E9 sincronizar\"\n/>\n```\n\n### Ejemplo con grupo de opciones:\n\n```tsx\n<CheckboxInputGroup\n name=\"options\"\n title=\"Selecciona opciones\"\n type=\"checkbox\"\n items={[\n { id: '1', label: 'Opci\u00F3n 1' },\n { id: '2', label: 'Opci\u00F3n 2' },\n { id: '3', label: 'Opci\u00F3n 3', disabled: true },\n ]}\n onChange={(event) => handleChange(event.target.value)}\n/>\n```\n";
|
|
12
|
+
export declare const searcherExample = "\n## Uso del componente\n\nEl componente `Searcher` permite buscar y seleccionar opciones con soporte para carga as\u00EDncrona (`loadOptions`). `onChange` se dispara al seleccionar una opci\u00F3n; `onInputChange` al escribir (\u00FAtil como onSearch).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Searcher\n label=\"Buscar opci\u00F3n\"\n name=\"searcher\"\n placeholder=\"Escrib\u00ED para buscar...\"\n options={[\n { label: 'Opci\u00F3n 1', value: 1 },\n { label: 'Opci\u00F3n 2', value: 2 },\n ]}\n onChange={(event) => onSelectOption(event.target.value)}\n onInputChange={(event) => handleSearch(event.target.value)}\n/>\n```\n\n### Ejemplo con carga as\u00EDncrona:\n\n```tsx\n<Searcher\n name=\"api-searcher\"\n label=\"Buscar\"\n options={[]}\n loadOptions={(inputValue, callback) => {\n fetchOptions(inputValue).then(callback)\n }}\n cacheOptions\n defaultOptions\n onChange={(event) => setSelected(event.target.value)}\n/>\n```\n";
|
|
13
|
+
export declare const saveBarExample = "\n## Uso del componente\n\nEl componente `ActionBar` (SaveBar) muestra una barra de acciones con botones de guardar, cancelar y opcionalmente anterior. Soporta variantes `page`, `modal` y `fullPage`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<ActionBar\n saveProps={{\n onSave: () => handleSave(),\n label: 'Guardar',\n }}\n cancelProps={{\n onCancel: () => handleCancel(),\n label: 'Cancelar',\n }}\n/>\n```\n\n### Con bot\u00F3n anterior:\n\n```tsx\n<ActionBar\n saveProps={{\n onSave: () => handleSave(),\n label: 'Continuar',\n variant: 'primary',\n }}\n cancelProps={{\n onCancel: () => handleCancel(),\n label: 'Cancelar',\n }}\n previousProps={{\n onPrevious: () => handlePrevious(),\n label: 'Anterior',\n }}\n/>\n```\n";
|
|
14
|
+
export declare const checkboxInputReduxFormExample = "\n### Ejemplo con Redux Form (Field):\n\n```tsx\n<Field\n name=\"cancelSales\"\n component={CheckboxInput}\n props={{\n name: 'cancelSales',\n label: 'Cancelar ventas',\n title: 'Opciones de sincronizaci\u00F3n',\n }}\n/>\n```\n";
|
|
15
15
|
export declare const breadcrumbItemFormat = "\n ## Formato de BreadcrumbItem\n\n El componente Breadcrumb acepta un array de objetos `BreadcrumbItem` con las siguientes propiedades:\n\n ### Propiedades disponibles:\n\n - **`text`** (string, requerido): El texto que se muestra para el item del breadcrumb\n - **`onClick`** (function, opcional): Funci\u00F3n que se ejecuta al hacer click en el item\n - **`isActive`** (boolean, opcional): Indica si el item est\u00E1 activo. Por defecto, el \u00FAltimo item se considera activo\n - **`href`** (string, opcional): URL del enlace (actualmente no implementado en el renderizado)\n\n ### Comportamiento:\n\n - Los items con `onClick` se renderizan como botones clickeables\n - Los items sin `onClick` se renderizan como texto est\u00E1tico\n - El \u00FAltimo item siempre se considera activo (a menos que se especifique `isActive: true` en otro item)\n - Cada item se separa autom\u00E1ticamente con el s\u00EDmbolo \">\"\n\n ### Ejemplo de uso:\n\n ```tsx\n const breadcrumbItems = [\n { text: 'Dashboard' },\n { text: 'Productos', onClick: () => navigate('/products') },\n { text: 'Detalles', isActive: true }\n ]\n\n <Breadcrumb items={breadcrumbItems} />\n ```\n";
|
|
16
16
|
export declare const menuItems = "Lista de \u00EDtems que se mostrar\u00E1n en el men\u00FA.\n \n**Tipo:** `MenuActionItem[]`\n\n```ts\ninterface MenuActionItem {\n label: React.ReactNode\n icon?: React.ReactElement\n onClick?: () => void\n selected?: boolean\n disabled?: boolean\n}\n```\n";
|
|
17
|
-
export declare const draggableListExample = "\n## Uso del componente\n\nEl componente `DraggableList` permite crear listas de items arrastrables con un componente personalizado para cada item.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<DraggableList\n label=\"Seleccionar un deposito\"\n addLabel=\"+ Agregar\"\n itemComponent={SelectField}\n componentProps={{\n placeholder: 'Seleccionar...',\n options: [\n { value: 'option1', label: 'Opci\u00F3n 1' },\n { value: 'option2', label: 'Opci\u00F3n 2' },\n ],\n size: 'md',\n }}\n value={[\n { id: 'item-1', value: 'option1' },\n { id: 'item-2', value: 'option2' },\n ]}\n onChange={(event) => console.log('Items actualizados:', event.target.value)}\n/>\n```\n\n### Ejemplo con Redux Form (Field):\n\n```tsx\n<Field\n name=\"warehouses\"\n component={DraggableList}\n itemComponent={
|
|
17
|
+
export declare const draggableListExample = "\n## Uso del componente\n\nEl componente `DraggableList` permite crear listas de items arrastrables con un componente personalizado para cada item.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<DraggableList\n label=\"Seleccionar un deposito\"\n addLabel=\"+ Agregar\"\n itemComponent={SelectField}\n componentProps={{\n placeholder: 'Seleccionar...',\n options: [\n { value: 'option1', label: 'Opci\u00F3n 1' },\n { value: 'option2', label: 'Opci\u00F3n 2' },\n ],\n size: 'md',\n }}\n value={[\n { id: 'item-1', value: 'option1' },\n { id: 'item-2', value: 'option2' },\n ]}\n onChange={(event) => console.log('Items actualizados:', event.target.value)}\n/>\n```\n\n### Ejemplo con Redux Form (Field):\n\n```tsx\n<Field\n name=\"warehouses\"\n component={DraggableList}\n itemComponent={FormField}\n label=\"Dep\u00F3sitos\"\n addLabel=\"+ Agregar\"\n componentProps={{\n placeholder: 'Nombre del dep\u00F3sito',\n size: 'md',\n type: 'text',\n }}\n value={[\n { id: 'item-1', value: 'Texto 1' },\n { id: 'item-2', value: 'Texto 2' },\n ]}\n/>\n```\n";
|
|
18
|
+
export declare const switchInputExample = "\n## Uso del componente\n\nEl componente `SwitchInput` / `SwitchInputGroup` muestra switches (toggle) individuales o en grupo. Soporta tama\u00F1os `sm`, `md`, `lg` e integraci\u00F3n con Redux Form.\n\n### Ejemplo b\u00E1sico (grupo):\n\n```tsx\n<SwitchInputGroup\n name=\"options\"\n title=\"Opciones\"\n size=\"md\"\n items={[\n { id: '1', label: 'Opci\u00F3n 1' },\n { id: '2', label: 'Opci\u00F3n 2' },\n { id: '3', label: 'Opci\u00F3n 3', disabled: true },\n ]}\n onChange={(event) => handleChange(event.target.value)}\n/>\n```\n\n### Ejemplo (un solo switch):\n\n```tsx\nconst [checked, setChecked] = React.useState(false)\n\n<SwitchInput\n name=\"toggle\"\n checked={checked}\n onChange={(e) => setChecked(e.target.checked)}\n label=\"Activar\"\n title=\"Configuraci\u00F3n\"\n/>\n```\n";
|
|
19
|
+
export declare const linkExample = "\n## Uso del componente\n\nEl componente `Link` renderiza un enlace con estilos del design system. Soporta tama\u00F1os (`sm`, `md`, `lg`), decoraci\u00F3n (`none`, `underline`) y estado `disabled`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Link href=\"/productos\" size=\"md\">\n Ver productos\n</Link>\n```\n\n### Con underline y tama\u00F1o:\n\n```tsx\n<Link href=\"/historial\" decoration=\"underline\" size=\"lg\">\n Historial de cambios\n</Link>\n```\n";
|
|
20
|
+
export declare const alertExample = "\n## Uso del componente\n\nEl componente `Alert` muestra mensajes de feedback con variantes `success`, `error`, `warning` e `info`. Soporta \u00EDcono personalizado y link de acci\u00F3n.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Alert\n variant=\"success\"\n message=\"Operaci\u00F3n completada correctamente.\"\n/>\n```\n\n### Con link:\n\n```tsx\n<Alert\n variant=\"info\"\n message=\"Revis\u00E1 tu bandeja de entrada.\"\n link={{\n text: 'No volver a mostrar',\n href: '#',\n }}\n/>\n```\n";
|
|
21
|
+
export declare const buttonExample = "\n## Uso del componente\n\nEl componente `Button` renderiza un bot\u00F3n con variantes (`primary`, `secondary`, `success`, `error`, `link`, `tooltip-link`), tama\u00F1os y soporte para iconos.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Button\n variant=\"primary\"\n size=\"lg\"\n label=\"Continuar\"\n onClick={() => handleSubmit()}\n/>\n```\n\n### Con \u00EDcono:\n\n```tsx\n<Button\n variant=\"secondary\"\n label=\"Agregar\"\n rightAdornment={<Add />}\n onClick={() => openModal()}\n/>\n```\n";
|
|
22
|
+
export declare const cardExample = "\n## Uso del componente\n\nEl componente `Card` muestra una tarjeta con t\u00EDtulo, descripci\u00F3n, \u00EDcono opcional y acci\u00F3n al hacer click.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Card\n title=\"T\u00EDtulo\"\n description=\"Descripci\u00F3n de la tarjeta.\"\n icon={<CustomIcon><ShareIcon /></CustomIcon>}\n onClick={() => navigate('/detalle')}\n isActive={false}\n/>\n```\n";
|
|
23
|
+
export declare const chipExample = "\n## Uso del componente\n\nEl componente `Chip` muestra una etiqueta con texto, variante de color y opci\u00F3n de remover. Variantes: `default`, `success`, `error`, `warning`, `info`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Chip\n text=\"Etiqueta\"\n title=\"T\u00EDtulo del chip\"\n onRemove={() => removeChip(id)}\n/>\n```\n\n### Con variante y deshabilitado:\n\n```tsx\n<Chip\n text=\"Fijo\"\n variant=\"success\"\n disabled\n/>\n```\n";
|
|
24
|
+
export declare const dropdownExample = "\n## Uso del componente\n\nEl componente `Dropdown` muestra un bot\u00F3n que al hacer click despliega una lista de opciones con \u00EDconos opcionales.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\nconst items = [\n { id: 'edit', label: 'Editar', icon: <EditIcon />, onClick: () => {} },\n { id: 'delete', label: 'Eliminar', icon: <DeleteIcon />, onClick: () => {} },\n]\n\n<Dropdown\n label=\"M\u00E1s opciones\"\n options={items}\n onItemSelect={(id) => handleSelect(id)}\n/>\n```\n";
|
|
25
|
+
export declare const menuActionExample = "\n## Uso del componente\n\nEl componente `MenuAction` muestra un bot\u00F3n (por defecto con \u00EDcono de tres puntos) que abre un men\u00FA de acciones. Cada \u00EDtem puede tener `label`, `icon`, `onClick`, `disabled` y `selected`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<MenuAction\n items={[\n { label: 'Editar', icon: <EditIcon />, onClick: () => edit() },\n { label: 'Eliminar', onClick: () => remove(), disabled: true },\n ]}\n/>\n```\n";
|
|
26
|
+
export declare const tabsExample = "\n## Uso del componente\n\nEl componente `Tabs` renderiza pesta\u00F1as. Acepta `items` (array de `{ id, label, href?, onClick? }`), `value` (id activo) y `onChange`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\nconst [value, setValue] = React.useState('tab-1')\n\n<Tabs\n value={value}\n items={[\n { id: 'tab-1', label: 'Pesta\u00F1a 1' },\n { id: 'tab-2', label: 'Pesta\u00F1a 2' },\n ]}\n onChange={(item) => item && setValue(item.id)}\n/>\n```\n";
|
|
27
|
+
export declare const sidebarExample = "\n## Uso del componente\n\nEl componente `Sidebar` renderiza una barra lateral de navegaci\u00F3n con \u00EDtems que pueden tener `label`, `isActive`, `icon` y `onClick`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\nconst items = [\n { label: 'Dashboard', isActive: true, onClick: () => navigate('/') },\n { label: 'Productos', icon: <BoxIcon />, onClick: () => navigate('/products') },\n]\n\n<Sidebar items={items} />\n```\n";
|
|
28
|
+
export declare const imageExample = "\n## Uso del componente\n\nEl componente `Image` muestra una imagen con soporte para `src`, `alt` y estilos `sx` (MUI).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Image\n src=\"https://example.com/photo.jpg\"\n alt=\"Descripci\u00F3n\"\n sx={{ width: 200, height: 200, borderRadius: 1 }}\n/>\n```\n";
|
|
29
|
+
export declare const datePickerExample = "\n## Uso del componente\n\nEl componente `DatePicker` permite seleccionar fecha (y opcionalmente hora). Soporta `format`, `minDate`, `maxDate`, `disabled` y Redux Form.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<DatePicker\n name=\"fecha\"\n label=\"Fecha\"\n placeholder=\"Seleccionar fecha\"\n format=\"DD/MM/YYYY\"\n onChange={(event) => setDate(event.target.value)}\n/>\n```\n";
|
|
30
|
+
export declare const dateRangePickerExample = "\n## Uso del componente\n\nEl componente `DateRangePicker` permite seleccionar un rango de fechas (desde / hasta). Soporta `minDate`, `maxDate`, `disabled` y Redux Form.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<DateRangePicker\n name=\"rangoFechas\"\n label=\"Rango de fechas\"\n placeholder=\"Seleccionar rango\"\n onChange={(event) => setRange(event.target.value)}\n/>\n```\n";
|
|
31
|
+
export declare const progressbarExample = "\n## Uso del componente\n\nEl componente `Progressbar` muestra una barra de progreso. Acepta `progress` (0-100), `variant` (`determinate`, `indeterminate`, `buffer`, `query`) y `size` (`sm`, `lg`).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Progressbar progress={60} variant=\"determinate\" />\n```\n";
|
|
32
|
+
export declare const warningModalExample = "\n## Uso del componente\n\nEl componente `WarningModal` muestra un modal de advertencia con t\u00EDtulo, mensaje, botones de confirmar/cancelar y opci\u00F3n \"No volver a mostrar\".\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<WarningModal\n open={isOpen}\n onClose={() => setIsOpen(false)}\n title=\"Atenci\u00F3n\"\n description=\"\u00BFEst\u00E1s seguro de que deseas continuar?\"\n confirmLabel=\"Confirmar\"\n cancelLabel=\"Cancelar\"\n onConfirm={() => {}}\n/>\n```\n";
|
|
33
|
+
export declare const copyButtonExample = "\n## Uso del componente\n\nEl componente `CopyButton` copia texto al portapapeles y muestra un mensaje configurable al hacer click.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<CopyButton\n textToCopy=\"Texto a copiar\"\n copyText=\"Copiar\"\n copiedText=\"Copiado\"\n resetTime={2000}\n/>\n```\n";
|
|
34
|
+
export declare const headerSectionExample = "\n## Uso del componente\n\nEl componente `HeaderSection` agrupa breadcrumb, t\u00EDtulo, subt\u00EDtulo, imagen, link y men\u00FA de acciones en una cabecera de p\u00E1gina o detalle.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<HeaderSection\n title=\"Pedido N\u00B0 150078523\"\n breadcrumb={<Breadcrumb items={[{ text: 'Inicio' }, { text: 'Pedidos' }]} />}\n subtitle={<IconWithIdentifier text=\"#ID123\" icon={<Image src=\"...\" />} />}\n image={<Image src=\"...\" />}\n link={<LinkWithIcon text=\"Historial\" icon={<History />} onClick={() => {}} />}\n menuAction={<MenuAction items={[{ label: 'Editar', onClick: () => {} }]} />}\n/>\n```\n";
|
|
35
|
+
export declare const iconWithIdentifierExample = "\n## Uso del componente\n\nEl componente `IconWithIdentifier` muestra un \u00EDcono junto a un texto (por ejemplo un ID o c\u00F3digo).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<IconWithIdentifier\n icon={<Image src=\"/flag.png\" />}\n text=\"#ID8765\"\n showDivider\n/>\n```\n";
|
|
36
|
+
export declare const linkWithIconExample = "\n## Uso del componente\n\nEl componente `LinkWithIcon` muestra un enlace con un \u00EDcono a la izquierda.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<LinkWithIcon\n text=\"Historial de cambios\"\n icon={<CustomIcon><History /></CustomIcon>}\n onClick={() => navigate('/history')}\n/>\n```\n";
|
|
37
|
+
export declare const conditionalOperatorExample = "\n## Uso del componente\n\nEl componente `ConditionalOperator` permite elegir entre operador l\u00F3gico \"Y\" u \"O\" para filtrar o combinar condiciones.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<ConditionalOperator\n value=\"or\"\n options={[{ value: 'and', label: 'Y' }, { value: 'or', label: 'O' }]}\n onOperatorChange={(value) => setOperator(value)}\n/>\n```\n";
|
|
38
|
+
export declare const emptyStateExample = "\n## Uso del componente\n\nEl componente `EmptyState` muestra un estado vac\u00EDo con mensaje, \u00EDcono opcional y acci\u00F3n (por ejemplo \"Agregar\").\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<EmptyState\n message=\"No hay resultados\"\n actionLabel=\"Agregar\"\n onAction={() => openCreate()}\n/>\n```\n";
|
|
39
|
+
export declare const asyncContentExample = "\n## Uso del componente\n\nEl componente `AsyncContent` maneja los estados de una operaci\u00F3n as\u00EDncrona: `loading`, `error`, `empty` y `success`. Muestra el contenido solo en `success`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<AsyncContent\n status={status}\n errorText=\"Ocurri\u00F3 un error\"\n emptyText=\"No hay datos\"\n onRetry={() => refetch()}\n>\n <div>Contenido cuando status === 'success'</div>\n</AsyncContent>\n```\n";
|
|
40
|
+
export declare const tooltipExample = "\n## Uso del componente\n\nLos componentes de tooltip (`WithTooltip`, `WithOverflowTooltip`) muestran un mensaje al hacer hover o click. `WithOverflowTooltip` solo muestra el tooltip cuando el contenido se desborda.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<WithTooltip content=\"Texto del tooltip\" placement=\"top\">\n <span>Hover sobre m\u00ED</span>\n</WithTooltip>\n```\n\n### Solo si hay overflow:\n\n```tsx\n<WithOverflowTooltip maxWidth=\"200px\">\n <span>Texto que puede truncarse...</span>\n</WithOverflowTooltip>\n```\n";
|
|
41
|
+
export declare const spinnerExample = "\n## Uso del componente\n\nEl componente `Spinner` muestra un indicador de carga. Acepta `size` (`xs`, `sm`, `md`, `lg`).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Spinner size=\"md\" />\n```\n";
|
package/dist/locales/es.d.ts
CHANGED
|
@@ -140,6 +140,73 @@ declare const _default: {
|
|
|
140
140
|
infoMessage: string;
|
|
141
141
|
dontShowAgain: string;
|
|
142
142
|
customAlert: string;
|
|
143
|
+
example: string;
|
|
144
|
+
};
|
|
145
|
+
link: {
|
|
146
|
+
example: string;
|
|
147
|
+
};
|
|
148
|
+
button: {
|
|
149
|
+
example: string;
|
|
150
|
+
};
|
|
151
|
+
card: {
|
|
152
|
+
example: string;
|
|
153
|
+
};
|
|
154
|
+
chip: {
|
|
155
|
+
example: string;
|
|
156
|
+
};
|
|
157
|
+
dropdown: {
|
|
158
|
+
example: string;
|
|
159
|
+
};
|
|
160
|
+
menuAction: {
|
|
161
|
+
example: string;
|
|
162
|
+
};
|
|
163
|
+
tabs: {
|
|
164
|
+
example: string;
|
|
165
|
+
};
|
|
166
|
+
sidebar: {
|
|
167
|
+
example: string;
|
|
168
|
+
};
|
|
169
|
+
image: {
|
|
170
|
+
example: string;
|
|
171
|
+
};
|
|
172
|
+
datePicker: {
|
|
173
|
+
example: string;
|
|
174
|
+
};
|
|
175
|
+
dateRangePicker: {
|
|
176
|
+
example: string;
|
|
177
|
+
};
|
|
178
|
+
progressbar: {
|
|
179
|
+
example: string;
|
|
180
|
+
};
|
|
181
|
+
warningModal: {
|
|
182
|
+
example: string;
|
|
183
|
+
};
|
|
184
|
+
copyButton: {
|
|
185
|
+
example: string;
|
|
186
|
+
};
|
|
187
|
+
headerSection: {
|
|
188
|
+
example: string;
|
|
189
|
+
};
|
|
190
|
+
iconWithIdentifier: {
|
|
191
|
+
example: string;
|
|
192
|
+
};
|
|
193
|
+
linkWithIcon: {
|
|
194
|
+
example: string;
|
|
195
|
+
};
|
|
196
|
+
conditionalOperator: {
|
|
197
|
+
example: string;
|
|
198
|
+
};
|
|
199
|
+
emptyState: {
|
|
200
|
+
example: string;
|
|
201
|
+
};
|
|
202
|
+
asyncContent: {
|
|
203
|
+
example: string;
|
|
204
|
+
};
|
|
205
|
+
tooltip: {
|
|
206
|
+
example: string;
|
|
207
|
+
};
|
|
208
|
+
spinner: {
|
|
209
|
+
example: string;
|
|
143
210
|
};
|
|
144
211
|
};
|
|
145
212
|
headerSection: {
|
|
@@ -314,6 +381,7 @@ declare const _default: {
|
|
|
314
381
|
label: string;
|
|
315
382
|
size: string;
|
|
316
383
|
decoration: string;
|
|
384
|
+
disabled: string;
|
|
317
385
|
weight: string;
|
|
318
386
|
href: string;
|
|
319
387
|
onClick: string;
|