export declare const onChangeSelectField = "\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    interface SelectOption {\n      label: string;\n      value: string | number;\n      [key: string]: any;\n    }\n    ```\n";
export declare const onInputChange = "\n    Callback que se ejecuta cuando escribimos algo en el buscador.\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\n";
export declare const onChangeSearcher = "\n    Callback que se ejecuta cuando seleccionamos una opcion del buscador.\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    interface SelectOption {\n      label: string;\n      value: string | number;\n      [key: string]: any;\n    }\n    ```\n";
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";
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";
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";
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";
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";
export declare const inputSx = "\n    Estilos inline aplicados al `<input>`. \u00DAtil para pisar los estilos del tama\u00F1o elegido,\n    por ejemplo la alineaci\u00F3n del texto.\n\n    ``` typescript\n        <FormField name=\"quantity\" size=\"xs\" sx={{ textAlign: 'right' }} />\n    ```\n";
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";
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";
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";
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";
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";
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";
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  - **`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  - 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' }\n  ]\n\n  <Breadcrumb items={breadcrumbItems} />\n  ```\n";
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";
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**`value`** acepta dos formatos:\n- **string[]**: `[\"valor1\", \"valor2\"]` \u2014 `onChange` devuelve un array de strings.\n- **{ id, value }[]**: `[{ id: 'item-1', value: 'valor1' }, ...]` \u2014 `onChange` devuelve el mismo formato de objetos.\n\n**`canRemove`**: funci\u00F3n opcional `(item: DraggableItem) => boolean`. Se eval\u00FAa por cada item; si devuelve `false`, el bot\u00F3n de eliminar se muestra deshabilitado para ese item.\n\n**`showRemoveAction`**: si es `false`, no se muestra el bot\u00F3n de eliminar en ninguna fila. Por defecto `true`.\n\n### Ejemplo con objetos (id + value):\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 array de strings:\n\n```tsx\n<DraggableList\n  label=\"Nombres\"\n  addLabel=\"+ Agregar\"\n  itemComponent={FormField}\n  componentProps={{ placeholder: 'Texto', size: 'md', type: 'text' }}\n  value={['Uno', 'Dos']}\n  onChange={(event) => setValues(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";
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";
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`), variantes (`default`, `tooltip-link`) y estado `disabled`. El prop `href` es opcional: si se omite, el link se renderiza como una acci\u00F3n con `role=\"button\"` y activable por teclado.\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\n### Dentro de un tooltip (fondo oscuro, sin href):\n\n```tsx\n<Link variant=\"tooltip-link\" size=\"sm\" onClick={handleClick}>\n  Ver detalle\n</Link>\n```\n";
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";
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";
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";
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";
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";
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";
export declare const menuListExample = "\n## Uso del componente\n\nEl componente `MenuList` es la superficie de men\u00FA del kit. Provee el contexto que `MenuItemComponent` necesita para renderizar, de modo que se pueda armar un men\u00FA propio sin pasar por `MenuAction` ni `Dropdown` (ambos traen su propio disparador).\n\n\u00DAsalo cuando necesites anclar o posicionar el men\u00FA vos mismo: una celda de una grilla, un popover propio, un contenedor con scroll.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<MenuList size=\"md\" maxItemsVisible={6}>\n  {options.map((option) => (\n    <MenuItemComponent\n      key={option}\n      label={option}\n      selected={option === value}\n      onClick={() => select(option)}\n    />\n  ))}\n</MenuList>\n```\n\nCon `surface={false}` se apaga el fondo, el borde redondeado y la sombra, para embeberlo en una superficie propia.\n";
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";
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";
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";
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";
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";
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";
export declare const modalExample = "\n## Uso del componente\n\nEl componente `Modal` es un contenedor compuesto. Expone tres subcomponentes accesibles por dot-notation (`Modal.Title`, `Modal.Body`, `Modal.Footer`) que tambi\u00E9n se pueden importar con su nombre propio (`ModalTitle`, `ModalBody`, `ModalFooter`).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Modal open={isOpen} onClose={() => setOpen(false)} size=\"md\">\n  <Modal.Title title=\"T\u00EDtulo\" subtitle=\"Subt\u00EDtulo\" />\n  <Modal.Body>\n    <p>Contenido del modal.</p>\n  </Modal.Body>\n  <Modal.Footer\n    cancelProps={{ onCancel: () => setOpen(false), label: 'Cancelar' }}\n    saveProps={{ onSave: handleSave, label: 'Confirmar' }}\n  />\n</Modal>\n```\n\n### Importando los subcomponentes por separado:\n\n```tsx\nimport { Modal, ModalTitle, ModalBody, ModalFooter } from '@producteca/producteca-ui-kit'\n\n<Modal open={open} onClose={onClose}>\n  <ModalTitle title=\"T\u00EDtulo\" />\n  <ModalBody>{content}</ModalBody>\n  <ModalFooter cancelProps={...} saveProps={...} />\n</Modal>\n```\n";
export declare const modalTitleExample = "\n## Uso del componente\n\nEl componente `ModalTitle` muestra un encabezado reutilizable para modales con t\u00EDtulo, subt\u00EDtulo opcional (acepta cualquier `ReactNode`), \u00EDcono a la izquierda y link a un instructivo (abre en nueva pesta\u00F1a) con tooltip.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<ModalTitle\n  title=\"T\u00EDtulo del modal\"\n  subtitle=\"Subt\u00EDtulo con informaci\u00F3n complementaria\"\n/>\n```\n\n### Con \u00EDcono e instructivo:\n\n```tsx\n<ModalTitle\n  icon={<CustomIcon><SettingsIcon /></CustomIcon>}\n  title=\"Configuraci\u00F3n\"\n  subtitle={<IconWithIdentifier icon={<InfoIcon />} text=\"ID-123\" />}\n  helpArticleUrl=\"https://help.producteca.com/instructivo\"\n/>\n```\n";
export declare const modalBodyExample = "\n## Uso del componente\n\nEl componente `ModalBody` es el contenedor de contenido del modal. Cuando el `Modal` padre tiene `isLoading={true}`, reemplaza el contenido por un `Spinner` centrado.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Modal open={open} onClose={onClose}>\n  <Modal.Body>\n    <p>Contenido del modal.</p>\n  </Modal.Body>\n</Modal>\n```\n\n### Estado de carga \u2014 controlado por el contexto del Modal padre:\n\n```tsx\n<Modal open={open} onClose={onClose} isLoading={true}>\n  <Modal.Body>\n    <p>Este contenido no se muestra mientras carga.</p>\n  </Modal.Body>\n</Modal>\n```\n";
export declare const modalFooterExample = "\n## Uso del componente\n\nEl componente `ModalFooter` renderiza los botones de acci\u00F3n del modal. Es un wrapper de `ActionBar` con variante `modal`, por lo que acepta `saveProps`, `cancelProps` y opcionalmente `previousProps`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Modal open={open} onClose={onClose}>\n  <Modal.Footer\n    cancelProps={{ onCancel: () => setOpen(false), label: 'Cancelar' }}\n    saveProps={{ onSave: handleSave, label: 'Confirmar', variant: 'primary' }}\n  />\n</Modal>\n```\n\n### Con bot\u00F3n anterior:\n\n```tsx\n<Modal.Footer\n  cancelProps={{ onCancel: onClose, label: 'Cancelar' }}\n  previousProps={{ onPrevious: handlePrevious, label: 'Anterior' }}\n  saveProps={{ onSave: handleNext, label: 'Siguiente', variant: 'primary' }}\n/>\n```\n";
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";
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";
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";
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";
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";
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  onChange={(event) => setOperator(event.target.value)}\n/>\n```\n";
export declare const pickChannelModalExample = "\n## Uso del componente\n\nEl componente `PickChannelModal` muestra un modal con una grilla de canales seleccionables. Recibe el listado `channels` con `{ clientId, iconUrl, name?, disabled?, tooltipMessage? }`. Un canal con `disabled` se muestra atenuado y no dispara `onSelectChannel` al clickearlo; `tooltipMessage` agrega un tooltip a la card, visible al pasar el mouse. Opcionalmente, mediante `showGeneralEdition`, agrega una secci\u00F3n superior con la opci\u00F3n Producteca (exportada como `productecaStrategy`) para editar atributos generales \u2014 se comporta como un canal m\u00E1s y se notifica por el mismo `onSelectChannel`. El header acepta cualquier `ModalTitleProps` v\u00EDa `titleProps` (`title`, `icon`, `subtitle`, `helpArticleUrl`, `helpTooltip`).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<PickChannelModal\n  open={open}\n  channels={channels}\n  showGeneralEdition\n  titleProps={{\n    title: 'Editar atributos',\n    icon: <InfoIcon />,\n    subtitle: 'Eleg\u00ED el canal a editar',\n    helpArticleUrl: 'https://help.producteca.com/articles/pick-channel',\n  }}\n  onSelectChannel={(channel) => handleChannelSelected(channel)}\n  onClose={() => setOpen(false)}\n/>\n```\n";
export declare const pickChannelModalDefault = "\nEstado por defecto con `showGeneralEdition` activado. Se muestra la secci\u00F3n de edici\u00F3n general con la card de Producteca y la secci\u00F3n de canales. Clickear cualquier card invoca `onSelectChannel` con el objeto del canal seleccionado.\n";
export declare const pickChannelModalWithoutGeneralEdition = "\nVariante sin la secci\u00F3n de edici\u00F3n general \u2014 solo se renderizan las cards recibidas por `channels`. \u00DAtil cuando el flujo no necesita editar atributos gen\u00E9ricos a nivel Producteca.\n";
export declare const pickChannelModalCustomTexts = "\nDemuestra c\u00F3mo overridear todos los textos visibles (`title`, `generalEditionTitle`, `generalEditionDescription`, `channelEditionTitle`, `channelEditionDescription`) cuando los defaults no encajan con el contexto del producto.\n";
export declare const pickChannelModalWithFullTitle = "\nHeader con todas las `ModalTitleProps` configuradas: `title`, `subtitle`, `icon` (icono al lado del t\u00EDtulo) y `helpArticleUrl` + `helpTooltip` (que renderizan el \u00EDcono de ayuda con tooltip a la derecha). \u00DAtil cuando el modal necesita contextualizar la acci\u00F3n o linkear a documentaci\u00F3n.\n";
export declare const pickChannelModalScrollableContent = "\nMuestra el modal con una gran cantidad de canales para verificar que el contenido scrollea internamente cuando supera la altura m\u00E1xima del modal (`85vh`). El header se mantiene fijo y solo la grilla de cards se desplaza.\n";
export declare const pickChannelModalWithoutText = "\nSin `channelEditionTitle` ni `channelEditionDescription` (ni los textos de edici\u00F3n general): los `<h3>` y `<p>` no se renderizan y la grilla de cards queda sin margen superior. Verifica el render condicional de los textos opcionales y el margen condicional del grid.\n";
export declare const pickChannelModalWithDisabledChannel = "\nUno de los canales se pasa con `disabled` y `tooltipMessage`: la card se muestra atenuada, no dispara `onSelectChannel` al clickearla y expone un tooltip explicando el motivo al pasar el mouse.\n";
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";
export declare const asyncContentExample = "\n## Uso del componente\n\nEl componente `AsyncContent` maneja los estados de una operaci\u00F3n as\u00EDncrona deriv\u00E1ndolos de las props `isLoading`, `error` y `empty`. La prioridad es: `isLoading` \u2192 `error.value` \u2192 `empty.items` vac\u00EDo \u2192 `success`. Muestra el contenido solo en `success`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<AsyncContent\n  isLoading={isLoading}\n  error={{\n    value: hasError,\n    text: 'Ocurri\u00F3 un error',\n    actionText: 'Reintentar',\n    onClick: () => refetch(),\n  }}\n  empty={{\n    items,\n    text: 'No hay datos',\n  }}\n>\n  <div>Contenido cuando hay datos disponibles</div>\n</AsyncContent>\n```\n";
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";
export declare const tableHeaderExample = "\n## Uso del componente\n\n`Table.Header` renderiza el encabezado de la tabla. Lee las columnas del contexto provisto por `Table`. Opcionalmente acepta `columns` como prop para sobrescribir el contexto.\n\n### Usando el contexto de Table (recomendado):\n\n```tsx\nconst columns: TableColumn<MyRow>[] = [\n  { key: 'name', header: 'Nombre' },\n  { key: 'status', header: 'Estado', sx: { textAlign: 'center' } },\n  { key: 'price', header: 'Precio', sx: { textAlign: 'right', width: 100 } },\n]\n\n<Table columns={columns}>\n  <Table.Header />\n</Table>\n```\n\n### Pasando columns directamente como prop:\n\n```tsx\n<Table columns={columns}>\n  <Table.Header columns={customColumns} />\n</Table>\n```\n";
export declare const tableBodyExample = "\n## Uso del componente\n\n`Table.Body` renderiza las filas de datos. Lee las columnas del contexto provisto por `Table`. Integra `AsyncContent` internamente, por lo que acepta las props de estado (`isLoading`, `error`, `empty`, `success`) para mostrar el loader, el error o el estado vac\u00EDo dentro de la tabla.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Table columns={columns}>\n  <Table.Body data={rows} />\n</Table>\n```\n\n### Con estados as\u00EDncronos:\n\n```tsx\n<Table columns={columns}>\n  <Table.Header />\n  <Table.Body\n    data={rows}\n    isLoading={isLoading}\n    empty={{ text: 'No hay datos', actionText: 'Cargar', onClick: loadData }}\n  />\n</Table>\n```\n\n### Filas clickeables:\n\nPasando `onClickRow` la fila queda clickeable: recibe el objeto de la fila y su \u00EDndice. Adem\u00E1s agrega el cursor, el foco por teclado y responde a `Enter` y `Espacio`.\n\n```tsx\n<Table columns={columns}>\n  <Table.Header />\n  <Table.Body data={rows} onClickRow={(row) => navigate(`/products/${row.id}`)} />\n</Table>\n```\n\n### Contenido interactivo dentro de las celdas:\n\nEl click de la fila escucha en el `<tr>`, as\u00ED que un link o un bot\u00F3n dentro de una celda tambi\u00E9n lo dispara. Cuando la celda tiene sus propias acciones, cort\u00E1 la propagaci\u00F3n en el handler de la acci\u00F3n (o en un wrapper que las agrupe):\n\n```tsx\nconst columns = [\n  { key: 'name', header: 'Nombre' },\n  {\n    key: 'actions',\n    header: 'Acciones',\n    render: (row) => (\n      <div onClick={(event) => event.stopPropagation()}>\n        <Button variant=\"link\" label=\"Editar\" onClick={() => edit(row)} />\n      </div>\n    ),\n  },\n]\n```\n";
export declare const tableExample = "\n## Uso del componente\n\nEl componente `Table` es un contenedor compuesto. Recibe `columns` y los distribuye por contexto a `Table.Header` y `Table.Body`, accesibles por dot-notation.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Table columns={columns}>\n  <Table.Header />\n  <Table.Body data={rows} />\n</Table>\n```\n\n### Definici\u00F3n de columnas:\n\n```tsx\nconst columns: TableColumn<MyRow>[] = [\n  { key: 'name', header: 'Nombre' },\n  { key: 'status', header: 'Estado', sx: { textAlign: 'center' } },\n  {\n    key: 'actions',\n    header: 'Acciones',\n    sx: { width: 80 },\n    render: (row) => <Button label=\"Editar\" onClick={() => edit(row)} />,\n  },\n]\n```\n";
export declare const tableAsyncContentExample = "\n`Table.Body` integra `AsyncContent` internamente: recibe las mismas props de estado (`isLoading`, `error`, `empty`, `success`) y resuelve el loader, el error y el estado vac\u00EDo **dentro** de la tabla, sin desmontar el `Table.Header`.\n\nEl estado vac\u00EDo se deriva de `data` (no hace falta pasar `items`). Cuando hay filas y no hay carga/error, se renderizan las filas normalmente.\n\n### Ejemplo:\n\n```tsx\n<Table columns={columns}>\n  <Table.Header />\n  <Table.Body\n    data={rows}\n    isLoading={isLoading}\n    empty={{\n      text: 'No hay datos disponibles',\n      actionText: 'Cargar datos',\n      onClick: loadData,\n    }}\n  />\n</Table>\n```\n";
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";
export declare const generatingStateExample = "\n## Uso del componente\n\nEl componente `GeneratingState` muestra el estado intermedio mientras se genera un recurso (por ejemplo, una planilla). Combina la ilustraci\u00F3n animada, un texto principal con un fragmento opcional resaltado en negrita (`highlight`), un texto secundario y un spinner.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<GeneratingState />\n```\n\n### Con fragmento resaltado:\n\n```tsx\n<GeneratingState\n  text=\"Se est\u00E1 generando la planilla para\"\n  highlight=\"editar datos del producto\"\n  description=\"Esto puede tardar unos segundos\"\n/>\n```\n";
export declare const maintenanceExample = "\n## Uso del componente\n\nEl componente `Maintenance` muestra una vista de p\u00E1gina completa para indicar que el sistema est\u00E1 en mantenimiento. Acepta `title`, `description` y `subtitle` opcionales con valores por defecto en espa\u00F1ol.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Maintenance />\n```\n\n### Con contenido personalizado:\n\n```tsx\n<Maintenance\n  title=\"Estamos mejorando\"\n  description=\"Estamos haciendo algunos ajustes para brindarte una mejor experiencia.\"\n  subtitle=\"Volvemos en unos minutos.\"\n/>\n```\n";
export declare const permissionOptionExample = "\n## Uso del componente\n\nEl componente `PermissionOption` muestra un permiso (Lectura, Edici\u00F3n o Sin acceso) con su \u00EDcono y label. Es clickeable/seleccionable: al definir `onClick` se vuelve interactivo (accesible por teclado). `isActive` lo muestra seleccionado (fondo celeste + texto/\u00EDcono azul) y `disabled` lo aten\u00FAa (opacidad 0.5) sin interacci\u00F3n.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<PermissionOption\n  permission=\"read\"\n  isActive\n  onClick={() => setPermission('read')}\n/>\n```\n";
export declare const permissionSelectorExample = "\n## Uso del componente\n\nEl componente `PermissionSelector` muestra los tres permisos (Sin acceso, Lectura, Edici\u00F3n) en l\u00EDnea como un selector de opci\u00F3n \u00FAnica. Al elegir un permiso, el fondo celeste se desliza desde el permiso actual hacia el seleccionado (misma t\u00E9cnica que `Tabs`).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\nconst [permission, setPermission] = React.useState('noAccess')\n\n<PermissionSelector\n  value={permission}\n  onChange={setPermission}\n/>\n```\n";
export declare const dropzoneExample = "\n## Uso del componente\n\n`Dropzone` es la zona de carga: soporta drag & drop nativo y click para abrir el explorador de archivos. Es **controlado**: no guarda los archivos, solo valida tipo/tama\u00F1o/cantidad y emite `onDrop` con los aceptados y `onReject` con los rechazados. El padre maneja la subida (progreso, errores del backend) y renderiza las filas con [FileRow](/docs/components-filerow--docs).\n\n### Estados\n\n- **Vac\u00EDo**: borde punteado, \u00EDcono de subida, instrucciones y el tama\u00F1o m\u00E1ximo permitido.\n- **Drag activo**: borde s\u00F3lido y fondo celeste mientras se arrastra un archivo encima.\n- **Cargando** (`isLoading`): spinner + texto, sin interacci\u00F3n.\n- **Error** (`error`): borde rojo y mensaje debajo de la zona.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\nconst [files, setFiles] = useState<UploadedFile[]>([])\n\nconst handleDrop = async (dropped: File[]) => {\n  const [file] = dropped\n  setFiles([{ id: file.name, name: file.name, progress: 0 }])\n  await upload(file, (progress) => setFiles([{ id: file.name, name: file.name, progress }]))\n}\n\nconst handleReject = ([{ reason }]: DropRejection[]) =>\n  setError(localize(\\`dropzone.\\${reason}\\`, { maxSize: 10 }))\n\nreturn (\n  <>\n    <Dropzone\n      accept={['PDF', 'XLSX']}\n      maxSize={10}\n      error={error}\n      onDrop={handleDrop}\n      onReject={handleReject}\n    />\n    {files.map(({ id, name, progress }) => (\n      <FileRow key={id} name={name} progress={progress} onRemove={() => remove(id)} />\n    ))}\n  </>\n)\n```\n";
export declare const fileRowExample = "\n## Uso del componente\n\n`FileRow` es la tarjeta de un archivo ya adjuntado. Muestra el nombre, un bot\u00F3n de eliminar y, opcionalmente, el progreso de subida y un mensaje de error.\n\n- `progress` (0-100): al definirlo se muestra la barra lineal y el porcentaje. Omitilo para el estado \"subida terminada\".\n- `autoload`: anima la barra de 0 a 100 al montar, sin necesidad de eventos reales de subida. Al terminar, la barra desaparece y la fila queda en su estado final (nombre + eliminar). \u00DAtil cuando la subida es tan r\u00E1pida que no hay progreso que reportar, o para prototipar. Se ignora si se define `progress`, y avisa el final con `onAutoloadComplete`.\n- `error`: pinta el borde de la tarjeta en rojo y muestra el mensaje debajo.\n- `showRemoveAction={false}`: oculta el bot\u00F3n de eliminar.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<FileRow\n  name=\"Nombre_del_archivo.xlm\"\n  progress={75}\n  onRemove={() => removeFile(id)}\n/>\n```\n";