@producteca/producteca-ui-kit 1.21.0 → 1.21.1-beta.0

package/dist/components/patterns/copyButton/copyButton.js

@@ -0,0 +1,69 @@
+import _slicedToArray from "babel-runtime/helpers/slicedToArray";
+var __rest = this && this.__rest || function (s, e) {
+    var t = {};
+    for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { ContentCopy, Check } from '@mui/icons-material';
+import { Button } from '../../button/button';
+import locale from '../../../locales';
+import './copyButton.scss';
+export var CopyButton = function CopyButton(_a) {
+    var _onClick = _a.onClick,
+        _a$copyText = _a.copyText,
+        copyText = _a$copyText === undefined ? locale('copyButton.copy') : _a$copyText,
+        _a$copiedText = _a.copiedText,
+        copiedText = _a$copiedText === undefined ? locale('copyButton.copied') : _a$copiedText,
+        textToCopy = _a.textToCopy,
+        _a$resetTime = _a.resetTime,
+        resetTime = _a$resetTime === undefined ? 2000 : _a$resetTime,
+        props = __rest(_a, ["onClick", "copyText", "copiedText", "textToCopy", "resetTime"]);
+
+    var _useState = useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        copied = _useState2[0],
+        setCopied = _useState2[1];
+
+    var _useState3 = useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        isAnimating = _useState4[0],
+        setIsAnimating = _useState4[1];
+
+    useEffect(function () {
+        if (copied) {
+            setIsAnimating(true);
+            var timer = setTimeout(function () {
+                setIsAnimating(false);
+            }, resetTime / 2);
+            return function () {
+                return clearTimeout(timer);
+            };
+        }
+    }, [copied]);
+    var defaultCopyFunction = function defaultCopyFunction() {
+        if (textToCopy) {
+            setCopied(true);
+            navigator.clipboard.writeText(textToCopy).then(function () {
+                setTimeout(function () {
+                    return setCopied(false);
+                }, resetTime);
+            }).catch(function () {
+                setCopied(false);
+            });
+        }
+    };
+    return _jsx("div", { onClick: function onClick() {
+            return _onClick ? _onClick() : defaultCopyFunction();
+        }, children: _jsx(Button, Object.assign({ className: "copy-btn " + (copied ? 'copied' : '') + " " + (isAnimating ? 'animating' : ''), outline: true, label: copied ? copiedText : copyText, leftAdornment: _jsx(Icons, { copied: copied }) }, props)) });
+};
+var Icons = function Icons(_ref) {
+    var copied = _ref.copied;
+    return _jsxs("div", { className: "copy-btn-icons", children: [_jsx("div", { className: "copy-icon " + (copied ? 'hidden' : ''), children: _jsx(ContentCopy, {}) }), _jsx("div", { className: "check-icon " + (!copied ? 'hidden' : ''), children: _jsx(Check, {}) })] });
+};
+export default CopyButton;

package/dist/components/patterns/copyButton/index.js

@@ -0,0 +1 @@
+export { CopyButton } from './copyButton';

package/dist/components/patterns/emptyState/emptyState.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import locale from '../../../locales';
+import { SearchPublication } from '../../icons';
+import styles from './emptyState.module.scss';
+var DefaultIcon = _jsx(SearchPublication, {});
+export var EmptyState = function EmptyState(_ref) {
+    var onActionClick = _ref.onActionClick,
+        _ref$icon = _ref.icon,
+        icon = _ref$icon === undefined ? DefaultIcon : _ref$icon,
+        _ref$actionText = _ref.actionText,
+        actionText = _ref$actionText === undefined ? locale('reloadPage') : _ref$actionText,
+        _ref$text = _ref.text,
+        text = _ref$text === undefined ? locale('noResultsFound') : _ref$text;
+
+    return _jsxs("div", { className: styles['empty-state-container'], children: [icon, _jsxs("div", { className: styles['link-container'], children: [_jsx("span", { children: text }), onActionClick && _jsx("a", { onClick: onActionClick, children: actionText })] })] });
+};
+export default EmptyState;

package/dist/components/patterns/headerSection/headerSection.js

@@ -0,0 +1,17 @@
+import _defineProperty from 'babel-runtime/helpers/defineProperty';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './headerSection.module.scss';
+import clsx from 'clsx';
+export var HeaderSection = function HeaderSection(_ref) {
+    var breadcrumb = _ref.breadcrumb,
+        image = _ref.image,
+        _ref$dense = _ref.dense,
+        dense = _ref$dense === undefined ? false : _ref$dense,
+        title = _ref.title,
+        subtitle = _ref.subtitle,
+        link = _ref.link,
+        menuAction = _ref.menuAction;
+
+    return _jsxs("div", { className: clsx(styles['header-section-container'], _defineProperty({}, styles['dense'], dense || !!breadcrumb)), children: [!!breadcrumb && breadcrumb, _jsxs("div", { className: styles['header-section'], children: [!!image && image, _jsxs("div", { className: styles.content, children: [title && _jsx("h3", { className: styles.title, children: title }), !!subtitle && subtitle, !!link && link] }), !!menuAction && menuAction] })] });
+};
+export default HeaderSection;

package/dist/components/patterns/headerSection/index.js

@@ -0,0 +1 @@
+export { HeaderSection } from './headerSection';

package/dist/components/patterns/iconWithIdentifier/iconWithIdentifier.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styles from './iconWithIdentifier.module.scss';
+export var IconWithIdentifier = function IconWithIdentifier(_ref) {
+  var text = _ref.text,
+      _ref$showDivider = _ref.showDivider,
+      showDivider = _ref$showDivider === undefined ? true : _ref$showDivider,
+      color = _ref.color,
+      icon = _ref.icon;
+  return _jsxs("div", { className: clsx(styles['icon-with-identifier']), children: [!!icon && icon, showDivider && _jsx("div", { className: styles.divider }), _jsx("span", { className: styles.identifier, style: { color: color }, children: text })] });
+};
+export default IconWithIdentifier;

package/dist/components/patterns/iconWithIdentifier/index.js

@@ -0,0 +1 @@
+export { IconWithIdentifier } from './iconWithIdentifier';

package/dist/components/patterns/{index.d.ts → index.js}

@@ -3,4 +3,4 @@ export * from './actionBar/actionBar';
 export * from './copyButton/copyButton';
 export * from './headerSection';
 export * from './linkWithIcon';
-export * from './iconWithIdentifier';
+export * from './iconWithIdentifier';

package/dist/components/patterns/linkWithIcon/index.js

@@ -0,0 +1 @@
+export { LinkWithIcon } from './linkWithIcon';

package/dist/components/patterns/linkWithIcon/linkWithIcon.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styles from './linkWithIcon.module.scss';
+import Button from '../../button/button';
+import { getColor } from '../../../styles/colors';
+import CustomIcon from '../../icons/customIcon/customIcon';
+var SIZE_TO_ICON = {
+    sm: '8',
+    md: '12',
+    lg: '12'
+};
+var transformSize = function transformSize(size) {
+    return SIZE_TO_ICON[size !== null && size !== void 0 ? size : 'md'];
+};
+export var LinkWithIcon = function LinkWithIcon(_ref) {
+    var text = _ref.text,
+        icon = _ref.icon,
+        onClick = _ref.onClick,
+        className = _ref.className,
+        _ref$size = _ref.size,
+        size = _ref$size === undefined ? 'md' : _ref$size,
+        _ref$otherProps = _ref.otherProps,
+        otherProps = _ref$otherProps === undefined ? {} : _ref$otherProps;
+    return _jsxs("div", { className: clsx(styles.action, className), onClick: onClick, children: [icon && _jsx(CustomIcon, Object.assign({ color: getColor('primary', '500') }, otherProps, { size: transformSize(size), children: icon })), _jsx(Button, Object.assign({ variant: "link", label: text, size: size }, otherProps))] });
+};
+export default LinkWithIcon;

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export { Tabs } from './tabs';

package/dist/components/tabs/tabs.js

@@ -0,0 +1,70 @@
+import _defineProperty from 'babel-runtime/helpers/defineProperty';
+import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import MuiTabs from '@mui/material/Tabs';
+import MuiTab from '@mui/material/Tab';
+import styles from './tabs.module.scss';
+import clsx from 'clsx';
+import { find, isUndefined, map } from 'lodash';
+export var Tabs = function Tabs(_ref) {
+    var items = _ref.items,
+        value = _ref.value,
+        defaultValue = _ref.defaultValue,
+        onChange = _ref.onChange,
+        _ref$className = _ref.className,
+        className = _ref$className === undefined ? '' : _ref$className;
+
+    var _React$useState = React.useState(defaultValue),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        internalValue = _React$useState2[0],
+        setInternalValue = _React$useState2[1];
+
+    var activeId = !isUndefined(value) ? value : internalValue;
+    var firstEnabledId = useMemo(function () {
+        var _a;return (_a = find(items, function (i) {
+            return !i.disabled;
+        })) === null || _a === void 0 ? void 0 : _a.id;
+    }, [items]);
+    React.useEffect(function () {
+        if (activeId === undefined) {
+            setInternalValue(firstEnabledId);
+        }
+    }, [activeId, firstEnabledId]);
+    var handleSelect = function handleSelect(_event, newValue) {
+        var _a;
+        var selectedId = String(newValue);
+        var itemSelected = find(items, function (item) {
+            return item.id === selectedId;
+        });
+        if (itemSelected === null || itemSelected === void 0 ? void 0 : itemSelected.disabled) return;
+        if (value === undefined) setInternalValue(selectedId);
+        onChange === null || onChange === void 0 ? void 0 : onChange(selectedId);
+        (_a = itemSelected === null || itemSelected === void 0 ? void 0 : itemSelected.onClick) === null || _a === void 0 ? void 0 : _a.call(itemSelected);
+    };
+    return _jsx("div", { className: clsx(styles['tabs'], _defineProperty({}, className, !!className)), children: _jsx(MuiTabs, { value: activeId, onChange: handleSelect, className: styles['list'], "aria-label": "tabs", sx: sxTabs, children: map(items, function (_ref2) {
+                var _clsx2;
+
+                var id = _ref2.id,
+                    label = _ref2.label,
+                    disabled = _ref2.disabled;
+
+                return _jsx(MuiTab, { value: id, label: _jsx("span", { className: styles['label'], children: label }), disabled: disabled, disableRipple: true, sx: sxTab, className: clsx(styles['tab'], (_clsx2 = {}, _defineProperty(_clsx2, styles['active'], id === activeId), _defineProperty(_clsx2, styles['disabled'], disabled), _clsx2)) }, id);
+            }) }) });
+};
+var sxTabs = {
+    padding: 0,
+    minHeight: 0,
+    '& .MuiTabs-list': {
+        gap: '24px',
+        padding: '0 16px'
+    },
+    '& .MuiTabs-indicator': {
+        borderRadius: 8
+    }
+};
+var sxTab = {
+    padding: 0,
+    minHeight: 0
+};
+export default Tabs;

package/dist/components/tooltip/index.js

@@ -0,0 +1,2 @@
+export { OverflowChecker } from './overflowChecker';
+export { WithTooltip, WithOverflowTooltip } from './tooltip';

package/dist/components/tooltip/overflowChecker.js

@@ -0,0 +1,27 @@
+import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+export var OverflowChecker = function OverflowChecker(_ref) {
+    var children = _ref.children;
+
+    var ref = useRef(null);
+
+    var _useState = useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        showTooltip = _useState2[0],
+        setShowTooltip = _useState2[1];
+
+    useEffect(function () {
+        var checkOverflow = function checkOverflow() {
+            if (ref.current) {
+                setShowTooltip(ref.current.scrollWidth > ref.current.offsetWidth);
+            }
+        };
+        checkOverflow();
+        window.addEventListener('resize', checkOverflow);
+        return function () {
+            return window.removeEventListener('resize', checkOverflow);
+        };
+    }, [children]);
+    return _jsx(_Fragment, { children: children(ref, showTooltip) });
+};

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,97 @@
+import _defineProperty from "babel-runtime/helpers/defineProperty";
+import _slicedToArray from "babel-runtime/helpers/slicedToArray";
+var __rest = this && this.__rest || function (s, e) {
+    var t = {};
+    for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import Zoom from '@mui/material/Zoom';
+import { OverflowChecker } from './overflowChecker';
+export var WithTooltip = function WithTooltip(_a) {
+    var _sx;
+
+    var children = _a.children,
+        content = _a.content,
+        _a$placement = _a.placement,
+        placement = _a$placement === undefined ? 'top' : _a$placement,
+        _a$arrow = _a.arrow,
+        arrow = _a$arrow === undefined ? false : _a$arrow,
+        _a$maxWidth = _a.maxWidth,
+        maxWidth = _a$maxWidth === undefined ? '600px' : _a$maxWidth,
+        _a$trigger = _a.trigger,
+        trigger = _a$trigger === undefined ? 'hover' : _a$trigger,
+        _a$shouldShowTooltip = _a.shouldShowTooltip,
+        shouldShowTooltip = _a$shouldShowTooltip === undefined ? true : _a$shouldShowTooltip,
+        otherProps = __rest(_a, ["children", "content", "placement", "arrow", "maxWidth", "trigger", "shouldShowTooltip"]);
+
+    var _useState = useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        open = _useState2[0],
+        setOpen = _useState2[1];
+
+    var enhancedChildren = React.cloneElement(children, Object.assign({ style: Object.assign(Object.assign({}, children.props.style || {}), { cursor: 'pointer' }) }, trigger === 'click' && shouldShowTooltip && {
+        onClick: function onClick(e) {
+            if (children.props.onClick) {
+                children.props.onClick(e);
+            }
+            setOpen(!open);
+        }
+    }));
+    var tooltipProps = trigger === 'click' ? {
+        open: shouldShowTooltip ? open : false,
+        onClose: function onClose() {
+            return setOpen(false);
+        },
+        disableHoverListener: true,
+        disableFocusListener: true,
+        disableTouchListener: true
+    } : {};
+    var disabledListeners = !shouldShowTooltip ? {
+        disableHoverListener: true,
+        disableFocusListener: true,
+        disableTouchListener: true
+    } : {};
+    return _jsx(Tooltip, Object.assign({ title: shouldShowTooltip ? content : '', placement: placement, arrow: arrow, slots: {
+            transition: Zoom
+        }, slotProps: {
+            popper: {
+                sx: (_sx = {}, _defineProperty(_sx, "&." + tooltipClasses.popper + " ." + tooltipClasses.tooltip, {
+                    fontFamily: 'Poppins, Open Sans, Helvetica, Arial, sans-serif',
+                    background: 'rgba(102, 102, 102, 1)',
+                    padding: '9px 9px 8px 12px',
+                    fontSize: '12px',
+                    fontWeight: '400',
+                    color: 'white !important',
+                    borderRadius: '4px',
+                    maxWidth: maxWidth
+                }), _defineProperty(_sx, "&." + tooltipClasses.popper + " ." + tooltipClasses.arrow, {
+                    color: 'rgba(102, 102, 102, 1)'
+                }), _defineProperty(_sx, "&." + tooltipClasses.popper + "[data-popper-placement*=\"top\"] ." + tooltipClasses.tooltip, {
+                    marginBottom: '8px'
+                }), _defineProperty(_sx, "&." + tooltipClasses.popper + "[data-popper-placement*=\"bottom\"] ." + tooltipClasses.tooltip, {
+                    marginTop: '8px'
+                }), _defineProperty(_sx, "&." + tooltipClasses.popper + "[data-popper-placement*=\"left\"] ." + tooltipClasses.tooltip, {
+                    marginRight: '8px'
+                }), _defineProperty(_sx, "&." + tooltipClasses.popper + "[data-popper-placement*=\"right\"] ." + tooltipClasses.tooltip, {
+                    marginLeft: '8px'
+                }), _sx)
+            }
+        } }, tooltipProps, disabledListeners, otherProps, { children: enhancedChildren }));
+};
+export var WithOverflowTooltip = function WithOverflowTooltip(_a) {
+    var content = _a.content,
+        _children = _a.children,
+        tooltipProps = __rest(_a, ["content", "children"]);
+
+    return _jsx(OverflowChecker, { children: function children(ref, showTooltip) {
+            var childrenWithRef = React.cloneElement(_children, { ref: ref });
+            return showTooltip && content ? _jsx(WithTooltip, Object.assign({ content: content }, tooltipProps, { children: childrenWithRef })) : childrenWithRef;
+        } });
+};

package/dist/hooks/useReduxFormField.js

@@ -0,0 +1,34 @@
+/**
+ * Hook to unify Redux Form and regular form field handling
+ *
+ * @param params Configuration object containing input, onChange, and transformValue
+ * @returns Object with handleChange and handleBlur functions
+ */
+export function useReduxFormField(_ref) {
+    var input = _ref.input,
+        onChange = _ref.onChange,
+        onBlur = _ref.onBlur,
+        _ref$transformValue = _ref.transformValue,
+        transformValue = _ref$transformValue === undefined ? function (value) {
+        return value;
+    } : _ref$transformValue;
+
+    var handleChange = function handleChange(event) {
+        if (input) {
+            // For Redux Form
+            var transformedValue = transformValue(event, event);
+            input.onChange(transformedValue);
+        } else if (onChange) {
+            // For regular components
+            onChange(event);
+        }
+    };
+    var handleBlur = function handleBlur() {
+        if (input) {
+            input.onBlur();
+        }
+        // Call the additional onBlur if provided
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    };
+    return { handleChange: handleChange, handleBlur: handleBlur };
+}

package/dist/{index.d.ts → index.js}

@@ -1,3 +1,3 @@
 export * from './components';
 export * from './styles/colors';
-export * from './hooks/useReduxFormField';
+export * from './hooks/useReduxFormField';

package/dist/locales/description.js

@@ -0,0 +1,15 @@
+export var onChangeSelectField = "\n    Callback que se dispara cuando cambia el valor del input.\n    \n    #### Par\xE1metros\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 var onInputChange = "\n    Callback que se ejecuta cuando escribimos algo en el buscador.\n    \n    #### Par\xE1metros\n    event: `React.ChangeEvent<HTMLInputElement>`\n      - `event.target.name`: El nombre del input.\n      - `event.target.value`: El valor actual del input\n";
+export var onChangeSearcher = "\n    Callback que se ejecuta cuando seleccionamos una opcion del buscador.\n    \n    #### Par\xE1metros\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 var onChangeCheckboxInput = "\n    Callback que se dispara cuando cambia el valor del input.\n    \n    #### Par\xE1metros\n    event: `React.ChangeEvent<HTMLInputElement>`\n      - `event.target.name`: El nombre del input.\n      - `event.target.value`: Siempre es \"on\"\n";
+export var onChangeInput = "\n    Callback que se dispara cuando cambia el valor del input.\n    \n    #### Par\xE1metros\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 var isOptionDisabled = " \n    Funcion que recibe un valor de tipo SelectOption y deberia devolver un valor booleano\n    Si la opci\xF3n 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 var selectFieldDescription = "\n  #### Ejemplo de uso   \n  ```typescript\n      <SelectField\n      name=\"productId\"\n      options={[{ label: \"1\", value: 1 }, { label: \"2\", value: 2, tooltipMessage: \"Este valor no es representativo\" }]}\n      onChange={(event) => handleChange(event.target.name, event.target.value)}\n      isMultiple\n      isClearable={false}\n      label={localize('product')}\n      isOptionDisabled={(option) => option.value == 2}\n      rightModifier={shouldShowLoader && <Spinner />}\n    />\n  ```\n";
+export var formFieldExample = "\n #### Ejemplo de uso\n \n  ``` typescript\n      <FormField\n        label=\"T\xEDtulo\"\n        name=\"textInput\"\n        onChange={(event) => handleChange(event.target.name, event.target.value)}\n        placeholder=\"Placeholder\"\n        size=\"md\"\n        type=\"text\"\n        isValid={(inputValue) => _.isNumber(inputValue)}\n      />\n  ```\n";
+export var 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 var checkboxInputGroupExample = "\n  #### Ejemplo de uso\n  \n  ``` typescript\n      <CheckboxInput\n        items={[\n          {\n            id: '1',\n            label: 'Opci\xF3n 1'\n          },\n          {\n            id: '2',\n            label: 'Opci\xF3n 2'\n          },\n          {\n            disabled: true,\n            id: '3',\n            label: 'Opci\xF3n 3'\n          }\n        ]}\n        name=\"CheckboxList\"\n        onChange={(event) => handleChange(event.target.name, event.target.value)}\n        size=\"lg\"\n        title=\"Selecciona una opci\xF3n\"\n        type=\"checkbox\"\n      />\n  ```\n";
+export var checkboxInputExample = " \n    Versi\xF3n con una sola opci\xF3n tipo checkbox y un label personalizado:\n    \n    ```typescript\n      const [checked, setChecked] = React.useState(false)\n      <CheckboxInput\n        name=\"Toggle\"\n        checked={checked}\n        onChange={setChecked}\n        label={\"Amazon\"}\n        title={locale('syncStockFromChannel')}\n      />\n    ```\n";
+export var searcherExample = " \n    Note la diferencia entre onChange y onInputChange (oficia de onSearch):\n    \n    ```typescript\n      <Searcher\n        label=\"Search label\"\n        name=\"Searcher\"\n        onChange={(event) => onSelectOption(event.target.value)}\n        onInputChange={(event) => handleSearch(event.target.value)}\n        options={[{ label: 'text', value: 1 }]}\n      />\n    ```\n";
+export var saveBarExample = "\n  #### Uso b\xE1sico\n  ```typescript\n    <SaveBar\n      saveProps={{\n        onSave: () => handleSave(),\n        label: 'Save'\n      }}\n      cancelProps={{\n        onCancel: () => handleCancel(),\n        label: 'Cancel'\n      }}\n    />\n  ```\n    #### Con bot\xF3n de navegaci\xF3n\n  ```typescript\n    <SaveBar\n      saveProps={{\n        onSave: () => handleSave(),\n        label: 'Save',\n        variant: 'primary'\n      }}\n      cancelProps={{\n        onCancel: () => handleCancel(),\n        label: 'Cancel'\n      }}\n      previousProps={{\n        onPrevious: () => handlePrevious(),\n        label: 'Previous'\n      }}\n    />\n  ```\n    #### Ejemplo completo\n  ```typescript\n    <SaveBar\n      saveProps={{\n        onSave: () => handleSave(),\n        label: 'Guardar cambios',\n        variant: 'success',\n        disabled: false,\n        onClick: () => {},\n      }}\n      cancelProps={{\n        onCancel: () => handleCancel(),\n        label: 'Descartar',\n      }}\n      previousProps={{\n        onPrevious: () => handlePrevious(),\n        label: 'Anterior',\n        variant: 'primary',\n        outline: true,\n        disabled: false,\n        onClick: () => console.log('Previous clicked'),\n      }}\n    />\n  ```\n";
+export var checkboxInputReduxFormExample = "\n  #### Ejemplo de uso con Redux Form - CheckboxInput\n  \n  ```typescript\n    <Field\n      name=\"salesSync\"\n      component={CheckboxInput}\n      classComponent={'decrease-stock'}\n      props={{\n        name: 'cancelSales',\n        value: this.salesSync().cancelSales,\n        checked: this.salesSync().cancelSales,\n        label: this.context.localize('settings.cancelSales')\n      }}\n    />\n  ```\n";
+export var 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\xF3n que se ejecuta al hacer click en el item\n  - **`isActive`** (boolean, opcional): Indica si el item est\xE1 activo. Por defecto, el \xFAltimo 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\xE1tico\n  - El \xFAltimo item siempre se considera activo (a menos que se especifique `isActive: true` en otro item)\n  - Cada item se separa autom\xE1ticamente con el s\xEDmbolo \">\"\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";