siesa-ui-kit 1.0.1 → 1.0.3

package/dist/components/DropdownItemCollapsible/DropdownItemCollapsible.types.d.ts

@@ -0,0 +1,95 @@
+import type { ReactNode } from 'react';
+/**
+ * Props del componente DropdownItemCollapsible
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-34374
+ */
+export interface DropdownItemCollapsibleProps {
+    /**
+     * Texto o contenido principal del item
+     * Ejemplo: "Users", "Customers", "Departments"
+     */
+    label: string;
+    /**
+     * Icono a mostrar antes del texto (izquierda)
+     * Recomendado: 16x16px
+     */
+    icon?: ReactNode;
+    /**
+     * Items anidados que se muestran cuando el item está expandido
+     * Cada item anidado tiene label e icono opcional
+     */
+    children?: DropdownItemCollapsibleChildProps[];
+    /**
+     * Si el item está expandido inicialmente
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Si el item está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback cuando el item se expande/contrae
+     * @param open - nuevo estado de expansión
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback cuando se hace click en el item (sin expandir)
+     * Útil para items que actúan como botones normales
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Si el item debería actuar como un botón normal sin colapsable
+     * @default false
+     */
+    isCollapsible?: boolean;
+    /**
+     * Si mostrar un encabezado de sección antes del item
+     * @default false
+     */
+    showHeading?: boolean;
+    /**
+     * Texto del encabezado de sección
+     * Se usa cuando showHeading es true
+     * Ejemplo: "Section Title"
+     */
+    headingLabel?: string;
+    /**
+     * Si mostrar divisor después del item/encabezado
+     * @default true
+     */
+    showDivider?: boolean;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Props de items anidados dentro del colapsable
+ */
+export interface DropdownItemCollapsibleChildProps {
+    /**
+     * Texto del item anidado
+     */
+    label: string;
+    /**
+     * Icono opcional del item anidado
+     */
+    icon?: ReactNode;
+    /**
+     * Si el item anidado está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback cuando se hace click en el item anidado
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+//# sourceMappingURL=DropdownItemCollapsible.types.d.ts.map

package/dist/components/DropdownItemCollapsible/DropdownItemCollapsible.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownItemCollapsible.types.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemCollapsible/DropdownItemCollapsible.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,MAAM,WAAW,4BAA4B;IAC3C;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,iCAAiC,EAAE,CAAC;IAE/C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE3D;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iCAAiC;IAChD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAExD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/DropdownItemCollapsible/icons.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+/**
+ * Icono ChevronDown para el toggle del colapsable
+ * Diseño basado en heroicons-micro/chevron-down
+ * Tamaño: 16x16px
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-34374
+ */
+export declare const ChevronDownIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono de usuario placeholder para ejemplos en stories
+ * Tamaño: 16x16px
+ */
+export declare const UserIcon: React.FC<{
+    className?: string;
+}>;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/DropdownItemCollapsible/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemCollapsible/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAiB5D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAwBrD,CAAC"}

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

@@ -0,0 +1,9 @@
+/**
+ * Exportaciones del componente DropdownItemCollapsible
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-34374
+ */
+export { DropdownItemCollapsible } from './DropdownItemCollapsible';
+export type { DropdownItemCollapsibleProps, DropdownItemCollapsibleChildProps, } from './DropdownItemCollapsible.types';
+export { ChevronDownIcon, UserIcon } from './icons';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DropdownItemCollapsible/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemCollapsible/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,YAAY,EACV,4BAA4B,EAC5B,iCAAiC,GAClC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/DropdownItemHeading/DropdownItemHeading.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { DropdownItemHeadingProps } from './DropdownItemHeading.types';
+/**
+ * Componente DropdownItemHeading del sistema de diseño Siesa
+ *
+ * Implementación pixel-perfect basada en Figma (node 6135:32539)
+ * para encabezados en menús dropdown con icono, label, descripción y acción.
+ *
+ * **Estructura:**
+ * - Icon Wrapper: Opcional, icono de 16x16px
+ * - Content Wrapper: Label + Description (flexible)
+ * - Action Wrapper: Opcional, texto de acción en la derecha
+ *
+ * **Dimensiones:**
+ * - Altura flexible (contenido vertical)
+ * - Width mínimo: 224px
+ * - Padding: 8px vertical, 16px horizontal
+ * - Border radius: 8px (rounded-lg)
+ *
+ * **Tipografía:**
+ * - Label: Label/Small (14px Bold) - content-primary
+ * - Description: Paragraph/Tiny (12px Regular) - content-secondary
+ * - Action: Paragraph/XXSmall (10px Regular) - content-secondary
+ *
+ * **Dark Mode:**
+ * - Label: #18181b (light) → #bfe2fe (dark)
+ * - Description: #a1a1aa (light) → #93d1fd (dark)
+ * - Icon: #0e79fd (light) → #bfe2fe (dark)
+ * - Action: #a1a1aa (light) → #93d1fd (dark)
+ *
+ * **Estados:**
+ * - Default: Sin hover/focus
+ * - Hover: Overlay sutil (managed by parent Dropdown)
+ * - Disabled: Opacity 50% (managed by parent Dropdown)
+ *
+ * **Especificaciones de Figma:**
+ * - Gap entre elementos: 12px
+ * - Gap entre label y description: 2px
+ * - Rounded: 8px (rounded-lg)
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Label/Small, Paragraph/Tiny)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-32539 - Diseño Figma
+ *
+ * @example
+ * ```tsx
+ * // Con icono, label, descripción y acción
+ * <DropdownItemHeading
+ *   label="Settings"
+ *   description="Configure your preferences"
+ *   showDescription={true}
+ *   icon={<SettingsIcon />}
+ *   showIcon={true}
+ *   actionLabel="Clear"
+ *   showAction={true}
+ *   onActionClick={handleClear}
+ * />
+ *
+ * // Solo label y descripción (sin icono ni acción)
+ * <DropdownItemHeading
+ *   label="My Account"
+ *   description="user@example.com"
+ *   showDescription={true}
+ * />
+ *
+ * // Solo label
+ * <DropdownItemHeading
+ *   label="Quick Actions"
+ *   showDescription={false}
+ * />
+ * ```
+ */
+export declare const DropdownItemHeading: React.FC<DropdownItemHeadingProps>;
+//# sourceMappingURL=DropdownItemHeading.d.ts.map

package/dist/components/DropdownItemHeading/DropdownItemHeading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownItemHeading.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemHeading/DropdownItemHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAG5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA0IlE,CAAC"}

package/dist/components/DropdownItemHeading/DropdownItemHeading.types.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Props del componente DropdownItemHeading
+ *
+ * Especificaciones de Figma: node 6135:32539
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-32539&m=dev
+ */
+export interface DropdownItemHeadingProps {
+    /**
+     * Texto del label principal del heading
+     * Tipografía: Label/Small (14px, Bold)
+     * Color: content-primary (#18181b light, #bfe2fe dark)
+     *
+     * @default 'Label'
+     */
+    label?: string;
+    /**
+     * Texto de descripción secundaria bajo el label
+     * Tipografía: Paragraph/Tiny (12px, Regular)
+     * Color: content-secondary (#a1a1aa light, #93d1fd dark)
+     *
+     * @default undefined
+     */
+    description?: string;
+    /**
+     * Si se debe mostrar la descripción
+     * Cuando es false, solo muestra el label
+     *
+     * @default true
+     */
+    showDescription?: boolean;
+    /**
+     * Nombre del icono a mostrar (string)
+     * Iconos disponibles:
+     * - `'cog-6-tooth'`: Icono de engranaje (por defecto)
+     * - `'check'`: Icono de check
+     * - `'x'`: Icono de cerrar
+     * - `'chevron-down'`: Icono de chevron hacia abajo
+     *
+     * Tamaño: 16x16px
+     * Color: primary-custom-600 (#0e79fd light, #bfe2fe dark)
+     *
+     * Si no se proporciona, se usa 'cog-6-tooth' por defecto
+     *
+     * @default 'cog-6-tooth'
+     * @see icons.tsx para ver los iconos disponibles
+     */
+    iconName?: string | null;
+    /**
+     * Si se debe mostrar el icono en la izquierda
+     *
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Texto de acción a mostrar en la derecha
+     * Tipografía: Paragraph/XXSmall (10px, Regular)
+     * Color: content-secondary (#a1a1aa light, #93d1fd dark)
+     *
+     * Comúnmente usado para "Clear", "Reset", etc.
+     *
+     * @default undefined
+     */
+    actionLabel?: string;
+    /**
+     * Si se debe mostrar el action label en la derecha
+     *
+     * @default false
+     */
+    showAction?: boolean;
+    /**
+     * Callback ejecutado al hacer click en el action label
+     */
+    onActionClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Clases CSS adicionales para personalización
+     *
+     * @default ''
+     */
+    className?: string;
+    /**
+     * Atributos HTML adicionales
+     */
+    [key: string]: unknown;
+}
+//# sourceMappingURL=DropdownItemHeading.types.d.ts.map

package/dist/components/DropdownItemHeading/DropdownItemHeading.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownItemHeading.types.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemHeading/DropdownItemHeading.types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAElE;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB"}

package/dist/components/DropdownItemHeading/icons.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Iconos para el componente DropdownItemHeading
+ * Usando heroicons-micro según especificaciones de Figma
+ *
+ * Los iconos se pueden pasar como strings al componente:
+ * - 'cog-6-tooth': Icono de engranaje
+ * - 'check': Icono de check
+ * - 'x': Icono de cerrar
+ * - 'chevron-down': Icono de chevron hacia abajo
+ *
+ * @see DropdownItemHeading.tsx para ver cómo se usan
+ */
+import React from 'react';
+interface IconProps {
+    className?: string;
+}
+/**
+ * Icono Cog (heroicons-micro/cog-6-tooth)
+ * Usado como icono por defecto en DropdownItemHeading
+ * Tamaño: 16x16px
+ */
+export declare const CogIcon: ({ className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono Check (heroicons-micro/check)
+ */
+export declare const CheckIcon: ({ className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono X (heroicons-micro/x-mark)
+ */
+export declare const XIcon: ({ className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Icono ChevronDown (heroicons-micro/chevron-down)
+ */
+export declare const ChevronDownIcon: ({ className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Mapeo de nombres de iconos a componentes
+ * Permite usar strings para referenciar iconos
+ */
+export declare const iconMap: Record<string, React.FC<IconProps>>;
+/**
+ * Obtener un icono por su nombre
+ * @param iconName - Nombre del icono (ej: 'cog-6-tooth', 'check', 'x', 'chevron-down')
+ * @param className - Clases CSS adicionales
+ * @returns Componente del icono o null si no existe
+ */
+export declare const getIcon: (iconName: string | null | undefined, className?: string) => React.ReactNode;
+export {};
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/DropdownItemHeading/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemHeading/icons.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,eAA2B,SAAS,4CAa3D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,eAA2B,SAAS,4CAkB7D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,eAA2B,SAAS,4CASzD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,eAA2B,SAAS,4CAanE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAKvD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAClB,UAAU,MAAM,GAAG,IAAI,GAAG,SAAS,EACnC,YAAY,MAAM,KACjB,KAAK,CAAC,SAUR,CAAC"}

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

@@ -0,0 +1,4 @@
+export { DropdownItemHeading } from './DropdownItemHeading';
+export type { DropdownItemHeadingProps } from './DropdownItemHeading.types';
+export { CogIcon, CheckIcon, XIcon, ChevronDownIcon, getIcon, iconMap } from './icons';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DropdownItemHeading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemHeading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/LoginView/LoginView.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { LoginViewProps } from './LoginView.types';
+/**
+ * LoginView - Vista de inicio de sesión del sistema Siesa
+ *
+ * Vista completa de login con formulario de autenticación que incluye:
+ * - Logo de Siesa
+ * - Campos de email y contraseña
+ * - Opción de "olvidé mi contraseña"
+ * - Link para crear cuenta nueva
+ * - Fondo decorativo opcional
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels y manejo de formulario semántico
+ * - Validación de email básica
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ *
+ * @example
+ * ```tsx
+ * <LoginView
+ *   onSubmit={(email, password) => console.log('Login', email, password)}
+ *   onForgotPassword={() => console.log('Forgot password')}
+ *   onSignUp={() => console.log('Sign up')}
+ * />
+ * ```
+ */
+export declare const LoginView: React.FC<LoginViewProps>;
+//# sourceMappingURL=LoginView.d.ts.map

package/dist/components/LoginView/LoginView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginView.d.ts","sourceRoot":"","sources":["../../../src/components/LoginView/LoginView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoY9C,CAAC"}

package/dist/components/LoginView/LoginView.types.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Props del componente LoginView
+ */
+export interface LoginViewProps {
+    /**
+     * Handler para el submit del formulario de login
+     * @param email - Email ingresado por el usuario
+     * @param password - Contraseña ingresada por el usuario
+     */
+    onSubmit?: (email: string, password: string) => void;
+    /**
+     * Handler para el click en "Olvidé mi Contraseña"
+     */
+    onForgotPassword?: () => void;
+    /**
+     * Handler para el click en "¿No tienes una cuenta?"
+     */
+    onSignUp?: () => void;
+    /**
+     * Estado de carga del botón de submit
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Mensaje de error general para mostrar en el formulario
+     */
+    errorMessage?: string;
+    /**
+     * Clases CSS adicionales para el contenedor
+     */
+    className?: string;
+    /**
+     * Si se muestra el fondo decorativo con imagen
+     * @default true
+     */
+    showBackground?: boolean;
+    /**
+     * Variante de visualización
+     * - 'responsive': Se adapta según el viewport (default)
+     * - 'mobile': Siempre se muestra como mobile sin efectos de card
+     * - 'desktop': Siempre se muestra como desktop con card
+     * @default 'responsive'
+     */
+    variant?: 'responsive' | 'mobile' | 'desktop';
+}
+//# sourceMappingURL=LoginView.types.d.ts.map

package/dist/components/LoginView/LoginView.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginView.types.d.ts","sourceRoot":"","sources":["../../../src/components/LoginView/LoginView.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAErD;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC/C"}

package/dist/components/LoginView/icons.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+/**
+ * Icono de sobre (envelope) para el input de email
+ */
+export declare const EnvelopeIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+/**
+ * Icono de candado cerrado (lock) para el input de contraseña
+ */
+export declare const LockClosedIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+/**
+ * Icono de ojo (eye) para mostrar/ocultar contraseña
+ */
+export declare const EyeIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+/**
+ * Logo de Siesa
+ */
+export declare const SiesaLogo: React.FC<React.SVGProps<SVGSVGElement>>;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/LoginView/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/LoginView/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAUhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAalE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAc3D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CA2B7D,CAAC"}

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

@@ -0,0 +1,4 @@
+export { LoginView } from './LoginView';
+export type { LoginViewProps } from './LoginView.types';
+export { EnvelopeIcon, LockClosedIcon, EyeIcon, SiesaLogo } from './icons';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/LoginView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LoginView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/NavigationRailItem/NavigationRailItem.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+import type { NavigationRailItemProps } from './NavigationRailItem.types';
+/**
+ * NavigationRailItem - Componente independiente para items de NavigationRail
+ *
+ * Item individual de navegación vertical (rail) para aplicaciones. Proporciona
+ * un punto de acceso a destinos mediante un icono, label opcional y badges.
+ *
+ * **Características principales:**
+ * - Ancho fijo de 56px según Figma
+ * - Estados completos: normal, hover, selected, focus, disabled
+ * - Badges de notificación con contador opcional
+ * - Tipografía Label XXSmall (10px Bold) según sistema de diseño
+ * - Dark mode completo con estrategia 'class'
+ * - Focus rings adaptativos para accesibilidad
+ * - Soporte para iconos 16x16px
+ *
+ * **Especificaciones de Figma (node 4294-22931):**
+ * - Ancho: 56px (w-14)
+ * - Icon container: 32px altura, px-4 py-1, rounded-full
+ * - Label: 10px Bold, leading 12px (Label XXSmall)
+ * - Gap: 4px (gap-1)
+ * - Badge: 13x13px, posición absolute
+ *
+ * **Estados visuales (según Figma):**
+ * - **Enabled**: Icon transparent, label text-content-primary
+ * - **Hover**: Icon container bg-primary-custom-100 (#dbeefe), icon text-primary-custom-600
+ * - **Selected**: Icon container bg-primary-custom-100 con overlay, icon text-primary-custom-600
+ * - **Focus**: Focus ring 2px (#60b6fa) con offset 2px (#dbeefe), sombras combinadas
+ * - **Disabled**: Opacity 55%, no interactivo
+ *
+ * **Dark Mode:**
+ * - Background: dark-bg-primary
+ * - Hover icon container: dark-bg-primary/20
+ * - Selected icon container: dark-primary-custom-600/30
+ * - Icon colors: dark-content-primary, dark-white on selected
+ * - Focus ring: dark-border-custom
+ *
+ * **Mejores prácticas implementadas:**
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Tokens de color consistentes con documentación
+ * - Accesibilidad ARIA completa
+ * - Focus visible para keyboard navigation
+ * - Badge positioning absoluto para no afectar layout
+ *
+ * @see docs/colors.md - Sistema de colores (primary-custom, dark-*, content-*)
+ * @see docs/typography.md - Tipografía (Label XXSmall)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras y focus rings
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4294-22931
+ *
+ * @example
+ * ```tsx
+ * // Item básico
+ * <NavigationRailItem
+ *   id="home"
+ *   icon={<HomeIcon />}
+ *   label="Inicio"
+ *   selected={true}
+ *   onClick={() => navigate('/')}
+ * />
+ *
+ * // Con badge de notificación
+ * <NavigationRailItem
+ *   id="notifications"
+ *   icon={<BellIcon />}
+ *   label="Notificaciones"
+ *   badgeCount={5}
+ *   onClick={() => navigate('/notifications')}
+ * />
+ *
+ * // Item deshabilitado
+ * <NavigationRailItem
+ *   id="premium"
+ *   icon={<StarIcon />}
+ *   label="Premium"
+ *   disabled={true}
+ * />
+ *
+ * // Solo icono (sin label)
+ * <NavigationRailItem
+ *   id="home"
+ *   icon={<HomeIcon />}
+ *   label="Inicio"
+ *   showLabelText={false}
+ * />
+ * ```
+ */
+export declare const NavigationRailItem: React.FC<NavigationRailItemProps>;
+//# sourceMappingURL=NavigationRailItem.d.ts.map

package/dist/components/NavigationRailItem/NavigationRailItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRailItem.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailItem/NavigationRailItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA6NhE,CAAC"}