@producteca/producteca-ui-kit 1.60.0 → 1.61.0

package/dist/components/modals/index.d.js

@@ -1 +1,5 @@
+export * from './modal';
+export * from './modalBody';
+export * from './modalFooter';
+export * from './modalTitle/modalTitle';
 export * from './warningModal/warningModal';

package/dist/components/modals/index.d.ts

@@ -1 +1,5 @@
+export * from './modal';
+export * from './modalBody';
+export * from './modalFooter';
+export * from './modalTitle/modalTitle';
 export * from './warningModal/warningModal';

package/dist/components/modals/modal/index.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modals/modal/index.d.ts

@@ -0,0 +1,13 @@
+import { Modal as BaseModal } from './modal';
+import { ModalTitle } from '../modalTitle/modalTitle';
+import { ModalBody } from '../modalBody/modalBody';
+import { ModalFooter } from '../modalFooter/modalFooter';
+
+type ModalCompound = typeof BaseModal & {
+    Title: typeof ModalTitle;
+    Body: typeof ModalBody;
+    Footer: typeof ModalFooter;
+};
+declare const Modal: ModalCompound;
+export { Modal };
+export type { ModalProps, ModalSize } from './modal.types';

package/dist/components/modals/modal/modal.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modals/modal/modal.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { ModalProps } from './modal.types';
+
+export declare const ModalContext: React.Context<{
+    isLoading: boolean;
+}>;
+export declare const Modal: React.FC<ModalProps>;

package/dist/components/modals/modal/modal.examples.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modals/modal/modal.examples.d.ts

@@ -0,0 +1,2 @@
+export declare const renderInteractiveModal: (args: any) => import("react/jsx-runtime").JSX.Element;
+export declare const renderLoadingModal: (args: any) => import("react/jsx-runtime").JSX.Element;

package/dist/components/modals/modal/modal.types.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modals/modal/modal.types.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface ModalProps {
+    open: boolean;
+    size?: ModalSize;
+    className?: string;
+    isLoading?: boolean;
+    fitContent?: boolean;
+    onClose?: () => void;
+    children: React.ReactNode;
+}

package/dist/components/modals/modalBody/index.d.js

@@ -0,0 +1 @@
+export { ModalBody } from './modalBody';

package/dist/components/modals/modalBody/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalBody } from './modalBody';
+export type { ModalBodyProps } from './modalBody.types';

package/dist/components/modals/modalBody/modalBody.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modals/modalBody/modalBody.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ModalBodyProps } from './modalBody.types';
+
+export declare const ModalBody: React.FC<ModalBodyProps>;

package/dist/components/modals/modalBody/modalBody.types.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modals/modalBody/modalBody.types.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+
+export interface ModalBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}

package/dist/components/modals/modalFooter/index.d.js

@@ -0,0 +1 @@
+export { ModalFooter } from './modalFooter';

package/dist/components/modals/modalFooter/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalFooter } from './modalFooter';
+export type { ModalFooterProps } from './modalFooter.types';

package/dist/components/modals/modalFooter/modalFooter.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modals/modalFooter/modalFooter.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ModalFooterProps } from './modalFooter.types';
+
+export declare const ModalFooter: React.FC<ModalFooterProps>;

package/dist/components/modals/modalFooter/modalFooter.types.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modals/modalFooter/modalFooter.types.d.ts

@@ -0,0 +1,3 @@
+import { SaveBarProps } from '../../patterns/actionBar/actionBar';
+
+export type ModalFooterProps = Omit<SaveBarProps, 'variant'>;

package/dist/components/modals/modalTitle/index.d.js

@@ -0,0 +1 @@
+export { ModalTitle } from './modalTitle';

package/dist/components/modals/modalTitle/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalTitle } from './modalTitle';
+export type { ModalTitleProps } from './modalTitle.types';

package/dist/components/modals/modalTitle/modalTitle.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modals/modalTitle/modalTitle.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ModalTitleProps } from './modalTitle.types';
+
+export declare const ModalTitle: React.FC<ModalTitleProps>;

package/dist/components/modals/modalTitle/modalTitle.types.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modals/modalTitle/modalTitle.types.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+export interface ModalTitleProps {
+    helpTooltip?: string;
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    helpArticleUrl?: string;
+    subtitle?: React.ReactNode;
+}

package/dist/components/modals/warningModal/warningModal.d.ts

@@ -1,17 +1,6 @@
-import { default as React, ChangeEvent } from 'react';
+import { default as React } from 'react';
+import { WarningModalProps } from './warningModal.types';
 
-interface WarningModalProps {
-    title?: React.ReactNode;
-    cancelLabel?: string;
-    onSave?: () => void;
-    onCancel?: () => void;
-    confirmLabel?: string;
-    icon?: React.ReactNode;
-    dontShowAgainLabel?: string;
-    description: React.ReactNode;
-    onClickGuide?: (e: React.MouseEvent<SVGSVGElement>) => void;
-    onChangeDontShowAgain?: (event: ChangeEvent<HTMLInputElement>) => void;
-}
 export declare const WarningModal: React.FC<WarningModalProps>;
-export type { WarningModalProps };
+export type { WarningModalProps } from './warningModal.types';
 export default WarningModal;

package/dist/components/modals/warningModal/warningModal.examples.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modals/warningModal/warningModal.examples.d.ts

@@ -0,0 +1 @@
+export declare const renderInteractiveWarningModal: (args: any) => import("react/jsx-runtime").JSX.Element;

package/dist/components/modals/warningModal/warningModal.types.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modals/warningModal/warningModal.types.d.ts

@@ -0,0 +1,15 @@
+import { ChangeEvent } from 'react';
+import { ModalProps } from '../modal/modal.types';
+
+export interface WarningModalProps extends Omit<ModalProps, 'children'> {
+    onSave?: () => void;
+    cancelLabel?: string;
+    onCancel?: () => void;
+    confirmLabel?: string;
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    helpArticleHref?: string;
+    dontShowAgainLabel?: string;
+    description: React.ReactNode;
+    onChangeDontShowAgain?: (event: ChangeEvent<HTMLInputElement>) => void;
+}

package/dist/components/patterns/helpArticleLink/helpArticleLink.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/patterns/helpArticleLink/helpArticleLink.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { HelpArticleLinkProps } from './helpArticleLink.types';
+
+export declare const HelpArticleLink: React.NamedExoticComponent<HelpArticleLinkProps>;

package/dist/components/patterns/helpArticleLink/helpArticleLink.types.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/patterns/helpArticleLink/helpArticleLink.types.d.ts

@@ -0,0 +1,4 @@
+export interface HelpArticleLinkProps {
+    href?: string;
+    tooltip: string;
+}

package/dist/components/patterns/helpArticleLink/index.d.js

@@ -0,0 +1 @@
+export { HelpArticleLink } from './helpArticleLink';

package/dist/components/patterns/helpArticleLink/index.d.ts

@@ -0,0 +1,2 @@
+export { HelpArticleLink } from './helpArticleLink';
+export type { HelpArticleLinkProps } from './helpArticleLink.types';

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

@@ -5,4 +5,5 @@ export * from './copyButton/copyButton';
 export * from './headerSection';
 export * from './linkWithIcon';
 export * from './iconWithIdentifier';
-export * from './conditionalOperator';
+export * from './conditionalOperator';
+export * from './helpArticleLink';

package/dist/components/patterns/index.d.ts

@@ -6,3 +6,4 @@ export * from './headerSection';
 export * from './linkWithIcon';
 export * from './iconWithIdentifier';
 export * from './conditionalOperator';
+export * from './helpArticleLink';

package/dist/locales/description.d.ts

@@ -29,6 +29,10 @@ export declare const imageExample = "\n## Uso del componente\n\nEl componente `I
 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";

package/dist/locales/es.d.ts

@@ -183,6 +183,18 @@ declare const _default: {
         warningModal: {
             example: string;
         };
+        modalTitle: {
+            example: string;
+        };
+        modalBody: {
+            example: string;
+        };
+        modalFooter: {
+            example: string;
+        };
+        modal: {
+            example: string;
+        };
         copyButton: {
             example: string;
         };
@@ -335,6 +347,16 @@ declare const _default: {
         warning: string;
         dontShowAgain: string;
     };
+    modalTitle: {
+        title: string;
+        instructive: string;
+        subtitle: string;
+    };
+    modal: {
+        body: string;
+        confirm: string;
+        openModal: string;
+    };
     tab: {
         tab1: string;
         tab2: string;

package/dist/playground/ComponentDemos.d.ts

@@ -29,6 +29,7 @@ export declare const DemoLinkWithIcon: DemoComponent;
 export declare const DemoIconWithIdentifier: DemoComponent;
 export declare const DemoSidebar: DemoComponent;
 export declare const DemoDraggableList: DemoComponent;
+export declare const DemoModal: DemoComponent;
 export declare const DemoWarningModal: DemoComponent;
 export declare const DemoMenuAction: DemoComponent;
 export declare const ComponentDemos: Record<string, DemoComponent>;