siesa-ui-kit 1.0.5 → 1.0.7

package/{src/components/Dropdown/index.ts → dist/components/Dropdown/index.d.ts}

@@ -1,8 +1,4 @@
-export { Dropdown, DropdownItem, DropdownHeading, DropdownDivider } from './Dropdown';
-export type {
-  DropdownProps,
-  DropdownItemProps,
-  DropdownHeadingProps,
-  DropdownDividerProps,
-} from './Dropdown.types';
-export { ChevronDownIcon, CogIcon, UserIcon, BellIcon, CreditCardIcon } from './icons';
+export { Dropdown, DropdownItem, DropdownHeading, DropdownDivider } from './Dropdown';
+export type { DropdownProps, DropdownItemProps, DropdownHeadingProps, DropdownDividerProps, } from './Dropdown.types';
+export { ChevronDownIcon, CogIcon, UserIcon, BellIcon, CreditCardIcon } from './icons';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACtF,YAAY,EACV,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import type { DropdownItemCollapsibleProps } from './DropdownItemCollapsible.types';
+/**
+ * Componente DropdownItemCollapsible del sistema de diseño Siesa
+ *
+ * Item colapsable para uso dentro de Dropdowns que permite agrupar
+ * items relacionados en secciones expandibles.
+ *
+ * **Características:**
+ * - Soporte completo para expandir/colapsar
+ * - Iconos personalizables en header y children
+ * - Items anidados indentados automáticamente
+ * - Dark mode completo con inversión de colores
+ * - Estados: default, hover, active, disabled
+ * - Focus rings adaptativos
+ * - Animación suave de rotación del chevron
+ *
+ * **Estados visuales:**
+ * - `collapsed`: Muestra solo el header con chevron apuntando down
+ * - `expanded`: Muestra header y lista de items anidados
+ * - `disabled`: Opacidad 50%, sin interacción
+ * - `hover`: Fondo de hover sutil, color primario del icono
+ * - `active`: Item anidado seleccionado con fondo custom-primary
+ *
+ * **Espaciado según Figma:**
+ * - Header padding: px-4 py-2 (16px horizontal, 8px vertical)
+ * - Item anidado padding: pl-6 pr-4 py-2 (24px left, 16px right, 8px vertical)
+ * - Gap entre elementos: gap-3 (12px)
+ * - Gap interno (icon + text): gap-3 (12px)
+ * - Indent entre niveles: 8px adicional por nivel
+ * - Divisor: borde top de 1px con spacing-0.5 (2px) arriba
+ * - Sección heading: pt-3 pb-1 px-0 (12px top, 4px bottom, sin horizontal)
+ *
+ * **Tipografía:**
+ * - Header: Paragraph/Small (14px, Regular, line-height 20px) - text-content-primary
+ * - Items anidados: Paragraph/Small (14px, Regular, line-height 20px) - text-content-primary
+ * - Heading: Paragraph/Tiny (12px, Regular, line-height 16px) - text-content-tertiary
+ *
+ * **Colores (Light Mode):**
+ * - Header text: content-primary (#18181b)
+ * - Header icon: content-secondary (#a1a1aa)
+ * - Header hover: bg-background-custom-primary (#dbeefe)
+ * - Header text hover: content-custom-primary (#0e79fd)
+ * - Item text: content-primary (#18181b)
+ * - Item hover: bg-transparent (sin fondo)
+ * - Divider: border-border-primary (#e4e4e7)
+ * - Heading text: content-tertiary (#71717a)
+ *
+ * **Colores (Dark Mode):**
+ * - Header text: content-primary/dark (#fafafa)
+ * - Header icon: content-secondary/dark (#a1a1aa)
+ * - Header hover: bg-background-custom-primary/dark (#0e5ab0)
+ * - Header text hover: content-custom-primary/dark (#bfe2fe)
+ * - Item text: content-primary/dark (#fafafa)
+ * - Divider: border-border-primary/dark (#3f3f46)
+ * - Heading text: content-tertiary/dark (#a1a1aa)
+ *
+ * **Border radius:**
+ * - Todos los items: rounded-lg (8px)
+ *
+ * **Sombras:**
+ * - Ninguna (usado dentro de dropdowns)
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-34374
+ *
+ * @example
+ * ```tsx
+ * // Item colapsable simple
+ * <DropdownItemCollapsible
+ *   label="Users"
+ *   icon={<UserIcon />}
+ *   children={[
+ *     { label: "Active Users", icon: <CheckIcon /> },
+ *     { label: "Inactive Users", icon: <CloseIcon /> },
+ *   ]}
+ * />
+ *
+ * // Con encabezado de sección
+ * <DropdownItemCollapsible
+ *   label="Customers"
+ *   icon={<BuildingIcon />}
+ *   showHeading={true}
+ *   headingLabel="SECTION 1"
+ *   children={[...]}
+ * />
+ *
+ * // Item no colapsable (actúa como botón normal)
+ * <DropdownItemCollapsible
+ *   label="Single Item"
+ *   icon={<StarIcon />}
+ *   isCollapsible={false}
+ *   onClick={() => console.log('clicked')}
+ * />
+ * ```
+ */
+export declare const DropdownItemCollapsible: React.FC<DropdownItemCollapsibleProps>;
+export default DropdownItemCollapsible;
+//# sourceMappingURL=DropdownItemCollapsible.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownItemCollapsible.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemCollapsible/DropdownItemCollapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EACV,4BAA4B,EAE7B,MAAM,iCAAiC,CAAC;AAGzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAqL1E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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/Input/Input.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { InputProps } from './Input.types';
+/**
+ * Input - Componente de campo de entrada del sistema de diseño Siesa
+ * Basado en especificaciones de Figma con Tailwind CSS
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Focus rings adaptativos para light y dark mode
+ * - Tokens de color consistentes con la documentación
+ * - Sombra base para inputs con focus
+ * - Estados hover, focus, disabled y error completos
+ * - Typography: Paragraph Regular para texto, Label Bold para labels
+ *
+ * Campo de entrada de texto con soporte para:
+ * - Estados: default, hover, focus, filled, disabled
+ * - Validación con mensajes de error
+ * - Iconos izquierdo y derecho
+ * - Label y helper text
+ * - Dark mode completo
+ * - Accesibilidad completa
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/shadows.md - Sistema de sombras
+ * @see docs/typography.md - Sistema tipográfico (Paragraph, Label)
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   placeholder="tu@email.com"
+ *   leftIcon={<EnvelopeIcon />}
+ *   helperText="Ingresa tu correo electrónico"
+ * />
+ * ```
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,KAAK,qFAkKjB,CAAC"}

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

@@ -0,0 +1,71 @@
+import type { ReactElement, InputHTMLAttributes } from 'react';
+/**
+ * Estados visuales del Input
+ * @description Tipo de referencia para documentar los estados posibles del Input.
+ * Los estados se manejan automáticamente mediante props (disabled) y pseudo-clases CSS (:hover, :focus)
+ */
+export type InputState = 'default' | 'hover' | 'focus' | 'filled' | 'disabled';
+/**
+ * Props del componente Input
+ *
+ * @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
+ */
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * Etiqueta del campo de entrada
+     * @description Texto descriptivo que se muestra encima del input
+     * @example "Email", "Nombre completo", "Contraseña"
+     */
+    label?: string;
+    /**
+     * Texto secundario junto al label (opcional)
+     * @description Se muestra alineado a la derecha del label, útil para indicar campos opcionales
+     * @example "Optional", "Opcional"
+     */
+    labelSecondary?: string;
+    /**
+     * Texto de ayuda debajo del input
+     * @description Proporciona información adicional o instrucciones para el usuario
+     * @example "Ingresa tu correo electrónico", "Mínimo 8 caracteres"
+     */
+    helperText?: string;
+    /**
+     * Indica si hay un error de validación
+     * @description Cambia el estilo del input para indicar error (borde rojo)
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Mensaje de error a mostrar (reemplaza helperText cuando error=true)
+     * @description Se muestra en rojo debajo del input cuando hay un error
+     * @example "Este campo es requerido", "Formato de email inválido"
+     */
+    errorMessage?: string;
+    /**
+     * Icono a mostrar a la izquierda del input
+     * @description Ayuda a identificar el tipo de campo visualmente
+     * @example <EnvelopeIcon />, <UserIcon />, <LockClosedIcon />
+     */
+    leftIcon?: ReactElement;
+    /**
+     * Icono a mostrar a la derecha del input
+     * @description Útil para acciones como mostrar/ocultar contraseña o limpiar campo
+     * @example <EyeIcon />, <XMarkIcon />, <CheckIcon />
+     */
+    rightIcon?: ReactElement;
+    /**
+     * Si el input ocupa todo el ancho del contenedor
+     * @description Por defecto usa w-[265px], con fullWidth usa w-full
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Clases CSS adicionales para personalizar el componente
+     * @description Se aplican al contenedor principal del input
+     */
+    className?: string;
+}
+//# sourceMappingURL=Input.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE/D;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE/E;;;;;;;GAOG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACrF;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB;;;;OAIG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC;IAEzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,15 @@
+/**
+ * Icons para Input Component
+ * Basado en Heroicons Micro
+ */
+export declare const EnvelopeIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const QuestionMarkCircleIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const UserIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const LockClosedIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const MagnifyingGlassIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const EyeIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const EyeSlashIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const XMarkIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const CheckIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ExclamationCircleIcon: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Input/icons.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,YAAY,+CAUxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAalC,CAAC;AAEF,eAAO,MAAM,QAAQ,+CASpB,CAAC;AAEF,eAAO,MAAM,cAAc,+CAa1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAa/B,CAAC;AAEF,eAAO,MAAM,OAAO,+CAcnB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAcxB,CAAC;AAEF,eAAO,MAAM,SAAS,+CASrB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAarB,CAAC;AAEF,eAAO,MAAM,qBAAqB,+CAajC,CAAC"}

package/{src/components/Input/index.ts → dist/components/Input/index.d.ts}

@@ -1,2 +1,3 @@
-export { Input } from './Input';
-export type { InputProps, InputState } from './Input.types';
+export { Input } from './Input';
+export type { InputProps, InputState } from './Input.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}