@widergy/energy-ui 3.158.0 → 3.159.0

package/dist/esm/components/UTPanel/UTPanel.stories.js

@@ -0,0 +1,966 @@
+/* eslint-disable no-alert */
+import React from 'react';
+import { joinArgTypes } from 'stories/utils';
+import UTLabel from '../UTLabel';
+import UTButton from '../UTButton';
+import UTPanel from '.';
+const CustomHeaderAction = () => /*#__PURE__*/React.createElement(UTButton, {
+  onClick: () => alert('Custom header action clicked'),
+  variant: "text",
+  colorTheme: "primary"
+}, "Custom");
+
+// Mock content for the panel
+const mockContent = /*#__PURE__*/React.createElement("div", {
+  style: {
+    padding: '16px'
+  }
+}, /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body1",
+  style: {
+    marginBottom: '16px'
+  }
+}, "Este es el contenido del panel. Aqu\xED puedes agregar cualquier componente o contenido que necesites."), /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body2",
+  colorTheme: "gray",
+  style: {
+    marginBottom: '16px'
+  }
+}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), /*#__PURE__*/React.createElement("div", {
+  style: {
+    marginTop: '24px'
+  }
+}, /*#__PURE__*/React.createElement(UTButton, {
+  variant: "filled",
+  colorTheme: "primary",
+  style: {
+    marginRight: '8px'
+  }
+}, "Acci\xF3n Principal"), /*#__PURE__*/React.createElement(UTButton, {
+  variant: "outlined",
+  colorTheme: "gray"
+}, "Acci\xF3n Secundaria")));
+const headerItemsExample = [{
+  title: 'Estado',
+  icon: 'IconCheck',
+  value: 'Completado'
+}, {
+  title: 'Fecha',
+  icon: 'IconCalendar',
+  value: '15/12/2023'
+}, {
+  title: 'Usuario',
+  icon: 'IconUser',
+  value: 'Juan Pérez'
+}];
+
+// Mock components for AdditionalContent
+const SettingsBodyComponent = () => /*#__PURE__*/React.createElement("div", {
+  style: {
+    padding: '16px'
+  }
+}, /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "title3",
+  weight: "medium",
+  style: {
+    marginBottom: '12px'
+  }
+}, "Configuraci\xF3n"), /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body2",
+  colorTheme: "gray",
+  style: {
+    marginBottom: '16px'
+  }
+}, "Ajusta los par\xE1metros de la aplicaci\xF3n desde aqu\xED."), /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px'
+  }
+}, /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body2"
+}, "\u2022 Tema oscuro"), /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body2"
+}, "\u2022 Notificaciones"), /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body2"
+}, "\u2022 Privacidad")));
+const NotificationsBodyComponent = () => /*#__PURE__*/React.createElement("div", {
+  style: {
+    padding: '16px'
+  }
+}, /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "title3",
+  weight: "medium",
+  style: {
+    marginBottom: '12px'
+  }
+}, "Notificaciones"), /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body2",
+  colorTheme: "gray",
+  style: {
+    marginBottom: '16px'
+  }
+}, "Gestiona tus notificaciones aqu\xED."), /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px'
+  }
+}, /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body2"
+}, "\u2022 Notificaciones por email"), /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body2"
+}, "\u2022 Alertas de sistema"), /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body2"
+}, "\u2022 Recordatorios")));
+const HelpBodyComponent = () => /*#__PURE__*/React.createElement("div", {
+  style: {
+    padding: '16px'
+  }
+}, /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "title3",
+  weight: "medium",
+  style: {
+    marginBottom: '12px'
+  }
+}, "Ayuda"), /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body2",
+  colorTheme: "gray",
+  style: {
+    marginBottom: '16px'
+  }
+}, "Encuentra respuestas a tus preguntas."), /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px'
+  }
+}, /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body2"
+}, "\u2022 Documentaci\xF3n"), /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body2"
+}, "\u2022 Preguntas frecuentes"), /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body2"
+}, "\u2022 Soporte t\xE9cnico")));
+export default {
+  args: {
+    children: mockContent,
+    open: false,
+    title: 'Título del Panel',
+    version: 'V0'
+  },
+  argTypes: {
+    version: {
+      control: 'select',
+      description: 'Versión del componente a utilizar.',
+      options: ['V0', 'V1'],
+      table: {
+        defaultValue: {
+          summary: 'V0'
+        },
+        type: {
+          summary: joinArgTypes(['V0', 'V1'])
+        }
+      }
+    },
+    open: {
+      control: 'boolean',
+      description: 'Controla si el panel está abierto o cerrado.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Título que se muestra en el header del panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    subtitle: {
+      control: 'text',
+      description: '(V1 only) Subtítulo que se muestra debajo del título.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    panelSide: {
+      control: 'select',
+      description: 'Lado desde el cual aparece el panel.',
+      options: ['left', 'right', 'top', 'bottom'],
+      table: {
+        defaultValue: {
+          summary: 'right'
+        },
+        type: {
+          summary: joinArgTypes(['left', 'right', 'top', 'bottom'])
+        }
+      }
+    },
+    size: {
+      control: 'select',
+      description: '(V1 only) Tamaño del panel.',
+      options: ['S', 'M', 'L'],
+      table: {
+        defaultValue: {
+          summary: 'M'
+        },
+        type: {
+          summary: joinArgTypes(['S', 'M', 'L'])
+        }
+      }
+    },
+    disableScrollbar: {
+      control: 'boolean',
+      description: 'Deshabilita el scrollbar del contenido.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    hideCloseButton: {
+      control: 'boolean',
+      description: '(V1 only) Oculta el botón de cerrar.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    hideHeader: {
+      control: 'boolean',
+      description: '(V1 only) Oculta completamente el header.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    hideMainButton: {
+      control: 'boolean',
+      description: '(V1 only) Oculta el botón principal del footer.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    showBackButton: {
+      control: 'boolean',
+      description: '(V1 only) Muestra el botón de volver.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    showTag: {
+      control: 'boolean',
+      description: '(V1 only) Muestra un tag en el header.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    showMainStatus: {
+      control: 'boolean',
+      description: '(V1 only) Muestra un status principal en el header.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    showPagination: {
+      control: 'boolean',
+      description: '(V1 only) Muestra controles de paginación.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    inline: {
+      control: 'boolean',
+      description: '(V1 only) Renderiza el panel inline en lugar de modal.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    collapsablePanel: {
+      control: 'boolean',
+      description: '(V1 only) Permite colapsar el panel cuando está inline.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    collapsableHeader: {
+      control: 'boolean',
+      description: '(V1 only) Permite colapsar el contenido del header.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    isWorkflow: {
+      control: 'boolean',
+      description: '(V1 only) Activa el modo workflow con barra de progreso.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    currentStep: {
+      control: 'number',
+      description: '(V1 only) Paso actual del workflow.',
+      table: {
+        defaultValue: {
+          summary: '1'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    stepsCount: {
+      control: 'number',
+      description: '(V1 only) Total de pasos del workflow.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    onClose: {
+      control: false,
+      description: 'Callback ejecutado al cerrar el panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'function'
+        }
+      }
+    },
+    onOpen: {
+      control: false,
+      description: 'Callback ejecutado al abrir el panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'function'
+        }
+      }
+    },
+    onGoBack: {
+      control: false,
+      description: '(V1 only) Callback ejecutado al presionar el botón de volver.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'function'
+        }
+      }
+    },
+    children: {
+      control: false,
+      description: 'Contenido del panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'ReactNode'
+        }
+      }
+    },
+    classes: {
+      control: false,
+      description: 'Clases CSS personalizadas para diferentes elementos.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    classNames: {
+      control: false,
+      description: '(V1 only) Clases CSS personalizadas para diferentes elementos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    CustomHeaderComponent: {
+      control: false,
+      description: '(V1 only) Componente custom a la derecha de las acciones del header.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'elementType'
+        }
+      }
+    },
+    pretitleComponent: {
+      control: false,
+      description: '(V1 only) Nodo React renderizado dentro del headerContainer, antes del headerArea. Ocupa el ancho completo del header. Útil para breadcrumbs o labels de contexto sobre el título.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'ReactNode'
+        }
+      }
+    }
+  },
+  component: UTPanel,
+  parameters: {
+    controls: {
+      exclude: ['modalProps', 'perfectScrollbarOptions', 'containerRef', 'TitleComponent', 'TitleIcon', 'HeaderComponent', 'headerItems', 'headerMainActionButton', 'headerSecondaryActionButton', 'mainButton', 'statusProps', 'tagProps', 'titleProps', 'paginationProps', 'BackdropProps', 'onEndReachedCallback', 'titleDataTestId', 'closeButtonDataTestId', 'backButtonDataTestId', 'mainActionDataTestId', 'secondaryActionDataTestId', 'singleHeaderItemsColumn']
+    },
+    docs: {
+      description: {
+        component: 'Componente Panel con dos versiones disponibles. V0 es una versión básica con funcionalidad de drawer. V1 es una versión avanzada con múltiples características como workflow, header items, botones de acción, etc.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTPanel'
+};
+
+// V0 Stories
+export const V0Default = {
+  args: {
+    version: 'V0',
+    open: false,
+    title: 'Panel V0 - Básico',
+    panelSide: 'right',
+    disableScrollbar: false
+  },
+  name: 'V0 - Básico'
+};
+export const V0WithCustomTitle = {
+  args: {
+    version: 'V0',
+    open: false,
+    title: 'Panel con Título Personalizado',
+    panelSide: 'right',
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "title2",
+      weight: "medium",
+      style: {
+        marginBottom: '16px'
+      }
+    }, "Contenido del Panel V0"), /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1"
+    }, "Este panel utiliza la versi\xF3n V0 que es m\xE1s simple y b\xE1sica."))
+  },
+  name: 'V0 - Con Título Personalizado'
+};
+export const V0LeftSide = {
+  args: {
+    version: 'V0',
+    open: false,
+    title: 'Panel desde la Izquierda',
+    panelSide: 'left',
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1"
+    }, "Este panel aparece desde el lado izquierdo de la pantalla."))
+  },
+  name: 'V0 - Lado Izquierdo'
+};
+
+// V1 Stories
+export const V1Default = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel V1 - Avanzado',
+    subtitle: 'Subtítulo descriptivo',
+    panelSide: 'right',
+    size: 'M'
+  },
+  name: 'V1 - Básico'
+};
+export const V1WithHeaderItems = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Header Items',
+    subtitle: 'Información adicional en el header',
+    panelSide: 'right',
+    size: 'M',
+    headerItems: headerItemsExample,
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1"
+    }, "Este panel V1 incluye items adicionales en el header que muestran informaci\xF3n relevante."))
+  },
+  name: 'V1 - Con Header Items'
+};
+export const V1WithActions = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Acciones',
+    subtitle: 'Panel con botones de acción',
+    panelSide: 'right',
+    size: 'M',
+    headerMainActionButton: {
+      colorTheme: 'error',
+      text: 'Guardar',
+      onClick: () => alert('Acción principal ejecutada')
+    },
+    headerSecondaryActionButton: {
+      text: 'Cancelar',
+      onClick: () => alert('Acción secundaria ejecutada')
+    },
+    mainButton: {
+      text: 'Confirmar',
+      onClick: () => alert('Botón principal ejecutado')
+    },
+    CustomHeaderComponent: CustomHeaderAction,
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1"
+    }, "Este panel incluye botones de acci\xF3n tanto en el header como en el footer."))
+  },
+  name: 'V1 - Con Acciones'
+};
+export const V1WithStatus = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Status',
+    subtitle: 'Panel con tag y status principal',
+    panelSide: 'right',
+    size: 'M',
+    showTag: true,
+    showMainStatus: true,
+    tagProps: {
+      variant: 'information',
+      children: 'Nuevo'
+    },
+    statusProps: {
+      variant: 'success',
+      label: 'Activo'
+    },
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1"
+    }, "Este panel muestra un tag y un status principal en el header."))
+  },
+  name: 'V1 - Con Status y Tag'
+};
+export const V1Workflow = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Workflow Panel',
+    subtitle: 'Panel en modo workflow',
+    panelSide: 'right',
+    size: 'L',
+    isWorkflow: true,
+    currentStep: 2,
+    stepsCount: 5,
+    showBackButton: true,
+    onGoBack: () => alert('Volver al paso anterior'),
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "title3",
+      weight: "medium",
+      style: {
+        marginBottom: '16px'
+      }
+    }, "Paso 2 de 5"), /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1"
+    }, "Este panel est\xE1 en modo workflow y muestra una barra de progreso en la parte superior."))
+  },
+  name: 'V1 - Workflow'
+};
+export const V1WithPagination = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Paginación',
+    subtitle: 'Navegación por páginas',
+    panelSide: 'right',
+    size: 'M',
+    showPagination: true,
+    paginationProps: {
+      currentPage: 2,
+      totalPages: 10,
+      nextButton: {
+        onClick: () => alert('Página siguiente')
+      },
+      backButton: {
+        onClick: () => alert('Página anterior')
+      }
+    },
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1"
+    }, "Este panel incluye controles de paginaci\xF3n en la parte superior."))
+  },
+  name: 'V1 - Con Paginación'
+};
+export const V1Inline = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel Inline',
+    subtitle: 'Panel renderizado inline',
+    panelSide: 'right',
+    size: 'M',
+    inline: true,
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1"
+    }, "Este panel est\xE1 renderizado inline en lugar de como un modal."))
+  },
+  name: 'V1 - Inline',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Panel renderizado inline. Útil cuando se necesita integrar el panel como parte del layout principal.'
+      }
+    }
+  }
+};
+export const V1Collapsible = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel Colapsable',
+    subtitle: 'Panel que se puede colapsar',
+    panelSide: 'right',
+    size: 'M',
+    inline: true,
+    collapsablePanel: true,
+    collapsableHeader: true,
+    headerItems: headerItemsExample,
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1"
+    }, "Este panel se puede colapsar completamente y tambi\xE9n tiene un header colapsable."))
+  },
+  name: 'V1 - Colapsable',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Panel con capacidad de colapsar tanto el contenido completo como el header.'
+      }
+    }
+  }
+};
+export const V1LargeSize = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel Grande',
+    subtitle: 'Panel con tamaño Large',
+    panelSide: 'right',
+    size: 'L',
+    headerItems: headerItemsExample,
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1"
+    }, "Este panel utiliza el tama\xF1o Large (L) para mostrar m\xE1s contenido."), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: '20px'
+      }
+    }, Array.from({
+      length: 10
+    }, (_, i) => /*#__PURE__*/React.createElement(UTLabel, {
+      key: i,
+      variant: "body2",
+      style: {
+        display: 'block',
+        marginBottom: '8px'
+      }
+    }, "L\xEDnea de contenido ", i + 1, " - Lorem ipsum dolor sit amet consectetur."))))
+  },
+  name: 'V1 - Tamaño Grande'
+};
+export const V1WithAdditionalContent = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Contenido Adicional',
+    subtitle: 'Panel con sidebar de navegación',
+    panelSide: 'right',
+    size: 'M',
+    additionalContent: [{
+      id: 'settings',
+      Icon: 'IconSettings',
+      BodyComponent: SettingsBodyComponent,
+      tooltipProps: {
+        content: 'Configuración'
+      }
+    }, {
+      id: 'notifications',
+      Icon: 'IconBell',
+      BodyComponent: NotificationsBodyComponent,
+      tooltipProps: {
+        content: 'Notificaciones'
+      }
+    }, {
+      id: 'help',
+      Icon: 'IconHelpCircle',
+      BodyComponent: HelpBodyComponent,
+      tooltipProps: {
+        content: 'Ayuda'
+      }
+    }],
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "title2",
+      weight: "medium",
+      style: {
+        marginBottom: '16px'
+      }
+    }, "Contenido Principal"), /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1",
+      style: {
+        marginBottom: '12px'
+      }
+    }, "Este panel demuestra el nuevo m\xF3dulo AdditionalContent."), /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body2",
+      colorTheme: "gray"
+    }, "Haz click en los iconos de la barra lateral derecha para ver el contenido adicional. El panel ahora tiene una arquitectura modular con subcomponentes separados."))
+  },
+  name: 'V1 - Con Contenido Adicional',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Panel V1 con el nuevo módulo AdditionalContent. Incluye una barra lateral de navegación con tooltips y componentes de contenido dinámico.'
+      }
+    }
+  }
+};
+export const V1WithPretitle = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: '#4605',
+    subtitle: 'Tramite de cuenta',
+    panelSide: 'right',
+    size: 'M',
+    pretitleComponent: /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'inline-flex',
+        alignItems: 'baseline'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body2"
+    }, "Pertenece a "), /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: "primary",
+      variant: "body2",
+      style: {
+        cursor: 'pointer',
+        textDecoration: 'underline',
+        paddingLeft: '8px'
+      }
+    }, "#4624")),
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1"
+    }, "Caso hijo con referencia al caso padre. El n\xFAmero clickeable navega al padre."))
+  },
+  name: 'V1 - Con Pretítulo (parent case)',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Usa `pretitleComponent` para mostrar un label de contexto sobre el título, como "Pertenece a #4624". Solo el número es interactivo; el texto plano no lo es.'
+      }
+    }
+  }
+};
+export const V1WithAdditionalContentBadge = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Badge en Sidebar',
+    subtitle: 'Íconos con contador',
+    panelSide: 'right',
+    size: 'M',
+    additionalContent: [{
+      id: 'tasks',
+      Icon: 'IconChecklist',
+      count: 6,
+      BodyComponent: SettingsBodyComponent,
+      tooltipProps: {
+        content: 'Tareas relacionadas (6)'
+      }
+    }, {
+      id: 'notifications',
+      Icon: 'IconBell',
+      count: 0,
+      BodyComponent: NotificationsBodyComponent,
+      tooltipProps: {
+        content: 'Notificaciones'
+      }
+    }, {
+      id: 'help',
+      Icon: 'IconHelpCircle',
+      BodyComponent: HelpBodyComponent,
+      tooltipProps: {
+        content: 'Ayuda'
+      }
+    }],
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1"
+    }, "El primer \xEDcono muestra un badge con contador (count: 6). El segundo tiene count: 0 y no muestra badge. El tercero no tiene count."))
+  },
+  name: 'V1 - Sidebar con Badge',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Usa la prop `count` en un item de `additionalContent` para mostrar un badge numérico sobre el ícono de la sidebar. Solo se renderiza cuando `count > 0`.'
+      }
+    }
+  }
+};
+export const Playground = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel Playground',
+    subtitle: 'Experimenta con todas las opciones',
+    panelSide: 'right',
+    size: 'M',
+    disableScrollbar: false,
+    hideCloseButton: false,
+    hideHeader: false,
+    hideMainButton: false,
+    showBackButton: false,
+    showTag: false,
+    showMainStatus: false,
+    showPagination: false,
+    inline: false,
+    collapsablePanel: false,
+    collapsableHeader: false,
+    isWorkflow: false,
+    currentStep: 1,
+    stepsCount: 3
+  },
+  name: 'Playground'
+};