siesa-ui-kit 1.0.6 → 1.0.7

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

@@ -0,0 +1,162 @@
+import type { ReactNode } from 'react';
+import type { BadgeColor } from '../Badge/Badge.types';
+/**
+ * Tipo de botón según el sistema de diseño Siesa (Figma node 4001-17240)
+ *
+ * - `default`: Botón primario con fondo sólido (#0e79fd) y borde (#3c9bf6)
+ *   - Background: primary-custom-600 (#0e79fd)
+ *   - Border: primary-inverse-border (#3c9bf6)
+ *   - Text: primary-inverse-content (#eff8ff)
+ *   - Sombra interna: shadow-button-inset
+ *
+ * - `outline-solid`: Botón secundario con borde, sin fondo
+ *   - Background: transparent
+ *   - Border: primary-custom-300 (#93d1fd)
+ *   - Text: primary-custom-600 (#0e79fd)
+ *   - Sombra: shadow-xs
+ *
+ * - `plain`: Botón terciario sin borde visible (hover overlay)
+ *   - Background: transparent
+ *   - Border: transparent
+ *   - Text: primary-custom-600 (#0e79fd)
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240
+ */
+export type ButtonType = 'default' | 'outline' | 'outline-solid' | 'plain';
+/**
+ * Tamaños de botón según especificaciones de Figma (node 4001-17240)
+ *
+ * | Size | Height | Padding H | Padding V | Gap  | Font Size  |
+ * |------|--------|-----------|-----------|------|------------|
+ * | xs   | 24px   | 8px       | 4px       | 8px  | 12px (xs)  |
+ * | sm   | 28px   | 8px       | 4px       | 8px  | 14px (sm)  |
+ * | base | 32px   | 10px      | 6px       | 8px  | 14px (sm)  |
+ * | l    | 36px   | 12px      | 8px       | 12px | 14px (sm)  |
+ * | xl   | 40px   | 16px      | 8px       | 12px | 14px (sm)  |
+ *
+ * Icon-only buttons son cuadrados perfectos con el mismo width y height.
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240
+ */
+export type ButtonSize = 'xs' | 'sm' | 'base' | 'l' | 'xl';
+/**
+ * Estados del botón según especificaciones de Figma
+ *
+ * - `default`: Estado normal con colores base
+ * - `hover`: Overlay visual (bg-primary-custom-500 para default, bg-hover-overlay para plain)
+ * - `focus`: Focus ring de 4px (#60b6fa) con offset de 2px (#dbeefe)
+ * - `disabled`: Opacity 50% con pointer-events-none
+ *
+ * @note Los estados hover y focus son manejados automáticamente por CSS.
+ */
+export type ButtonState = 'default' | 'hover' | 'focus' | 'disabled';
+/**
+ * Props del componente Button
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240
+ */
+export interface ButtonProps {
+    /**
+     * Tipo de botón (visual) - determina la jerarquía y estilo del botón
+     *
+     * - `default`: Acción principal (Guardar, Enviar, Confirmar)
+     * - `outline-solid`: Acción secundaria (Cancelar, Volver)
+     * - `plain`: Acción terciaria (Cerrar, Ver más, Links)
+     *
+     * @default 'default'
+     */
+    type?: ButtonType;
+    /**
+     * Tamaño del botón - determina altura, padding y tipografía
+     *
+     * - `xs`: 24px - Espacios muy compactos, inline actions
+     * - `sm`: 28px - Barras de herramientas, acciones secundarias
+     * - `base`: 32px - Tamaño estándar para la mayoría de casos
+     * - `l`: 36px - Botones destacados, CTAs
+     * - `xl`: 40px - Heroes, landing pages
+     *
+     * @default 'base'
+     */
+    size?: ButtonSize;
+    /**
+     * Si true, el botón solo muestra iconos (sin texto)
+     * El botón se vuelve cuadrado perfecto (width = height)
+     *
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Icono a mostrar antes del texto (izquierda)
+     * Todos los iconos son 16x16px según especificaciones de Figma
+     */
+    leftIcon?: ReactNode;
+    /**
+     * Icono a mostrar después del texto (derecha)
+     * Todos los iconos son 16x16px según especificaciones de Figma
+     */
+    rightIcon?: ReactNode;
+    /**
+     * Contenido del botón (texto o elementos React)
+     */
+    children?: ReactNode;
+    /**
+     * Si el botón está deshabilitado
+     * Aplica opacity: 50% y pointer-events: none
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Clases CSS adicionales para personalización
+     */
+    className?: string;
+    /**
+     * Función callback ejecutada al hacer click
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Tipo de botón HTML (comportamiento de formulario)
+     *
+     * - `button`: Botón normal (no envía formularios)
+     * - `submit`: Envía el formulario al hacer click
+     * - `reset`: Resetea el formulario al hacer click
+     *
+     * @default 'button'
+     */
+    htmlType?: 'button' | 'submit' | 'reset';
+    /**
+     * Si el botón ocupa todo el ancho disponible de su contenedor
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Etiqueta accesible para lectores de pantalla
+     * **Requerido** para botones iconOnly para accesibilidad
+     */
+    ariaLabel?: string;
+    /**
+     * Si true, muestra un badge de notificación (dot) en la esquina superior derecha
+     *
+     * @default false
+     */
+    badge?: boolean;
+    /**
+     * Número a mostrar en el badge de notificación
+     * Si se proporciona, muestra un badge con contador en lugar de un dot
+     * Números mayores a 99 se muestran como "99+"
+     */
+    badgeCount?: number;
+    /**
+     * Color del badge de notificación
+     * Usa los colores del sistema de diseño
+     *
+     * @default 'red' (content-extensions-red: #b91c1c)
+     */
+    badgeColor?: BadgeColor;
+    /**
+     * Atributos HTML adicionales para el elemento button
+     */
+    [key: string]: unknown;
+}
+//# sourceMappingURL=Button.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,eAAe,GAAG,OAAO,CAAC;AAE3E;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC;AAE3D;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAErE;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB"}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+interface IconProps {
+    className?: string;
+}
+/**
+ * Icono Plus (heroicons-micro/plus)
+ */
+export declare const PlusIcon: React.FC<IconProps>;
+/**
+ * Icono ChevronDown (heroicons-micro/chevron-down)
+ */
+export declare const ChevronDownIcon: React.FC<IconProps>;
+/**
+ * Icono ArrowRight (heroicons-micro/arrow-right)
+ */
+export declare const ArrowRightIcon: React.FC<IconProps>;
+/**
+ * Icono Check (heroicons-micro/check)
+ */
+export declare const CheckIcon: React.FC<IconProps>;
+/**
+ * Icono X (heroicons-micro/x-mark)
+ */
+export declare const XIcon: React.FC<IconProps>;
+export {};
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Button/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CASxC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAa/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAa9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAazC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CASrC,CAAC"}

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

@@ -0,0 +1,4 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonType, ButtonSize, ButtonState } from './Button.types';
+export { PlusIcon, ChevronDownIcon, ArrowRightIcon, CheckIcon, XIcon } from './icons';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,31 @@
+import type { CheckboxProps } from './Checkbox.types';
+/**
+ * Checkbox del sistema de diseño Siesa
+ *
+ * Componente de checkbox con soporte completo para estados interactivos,
+ * indeterminate, y dark mode pixel-perfect según especificaciones de Figma.
+ *
+ * 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
+ * - Sombra button-inset para estado checked
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con input nativo y ARIA
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Label/Paragraph)
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   label="Show on Events Page"
+ *   description="Make this event visible on your profile"
+ *   checked={true}
+ *   onChange={(e) => console.log(e.target.checked)}
+ * />
+ * ```
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,QAAQ,4GA8KpB,CAAC"}

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

@@ -0,0 +1,53 @@
+import type { InputHTMLAttributes } from 'react';
+/**
+ * Estados visuales del Checkbox
+ */
+export type CheckboxState = 'default' | 'hover' | 'focus' | 'disabled';
+/**
+ * Props del componente Checkbox
+ *
+ * Extiende HTMLInputElement con props adicionales específicas del componente.
+ * Excluye 'type' y 'size' que son manejados internamente.
+ */
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /**
+     * Etiqueta del checkbox
+     * Tipografía: Label/Small (14px, Bold)
+     */
+    label?: string;
+    /**
+     * Descripción debajo del label
+     * Tipografía: Paragraph/Small (14px, Regular)
+     */
+    description?: string;
+    /**
+     * Si el checkbox está marcado
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Si el checkbox está en estado indeterminado (parcialmente seleccionado)
+     * Útil para "select all" cuando solo algunos items están seleccionados
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Si el checkbox está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Clases CSS adicionales para el contenedor principal
+     */
+    className?: string;
+    /**
+     * ID único para el checkbox
+     * Si no se proporciona, se genera automáticamente
+     */
+    id?: string;
+    /**
+     * Callback cuando el estado del checkbox cambia
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+//# sourceMappingURL=Checkbox.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAEvE;;;;;GAKG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjG;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACjE"}

package/dist/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,38 @@
+import type { DescriptionListProps } from './DescriptionList.types';
+/**
+ * DescriptionList del sistema de diseño Siesa
+ *
+ * Componente para mostrar información estructurada en formato clave-valor (term/details).
+ * Layout de dos columnas con separador inferior entre items.
+ *
+ * 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
+ * - Layout flexible y responsive
+ * - Tipografía del sistema (Paragraph/Small - 14px)
+ *
+ * @see docs/colors.md - Sistema de colores (content-primary, content-secondary)
+ * @see docs/typography.md - Sistema tipográfico (Paragraph/Small)
+ * @see docs/spacing.md - Sistema de espaciado (padding, gaps)
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4103-8449 - Especificaciones Figma
+ *
+ * @example
+ * ```tsx
+ * // Item básico
+ * <DescriptionList
+ *   term="Customer"
+ *   details="Jhonatan Diaz"
+ * />
+ *
+ * // Lista completa
+ * <div>
+ *   <DescriptionList term="Event" details="Bear Hug: Live in Concert" />
+ *   <DescriptionList term="Amount" details="$120,000 COP" />
+ *   <DescriptionList term="Fee" details="$20,000 COP" />
+ * </div>
+ * ```
+ */
+export declare const DescriptionList: import("react").ForwardRefExoticComponent<DescriptionListProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=DescriptionList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DescriptionList.d.ts","sourceRoot":"","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,eAAe,iHAuD3B,CAAC"}

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

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'react';
+/**
+ * Props del componente DescriptionList
+ *
+ * Componente para mostrar pares clave-valor en formato de dos columnas.
+ */
+export interface DescriptionListProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Término o etiqueta (columna izquierda)
+     * Mostrado en color secundario para diferenciarlo del valor
+     *
+     * @example "Customer", "Event", "Amount"
+     */
+    term: string;
+    /**
+     * Detalles o valor (columna derecha)
+     * Mostrado en color primario como información principal
+     *
+     * @example "Jhonatan Diaz", "Bear Hug: Live in Concert", "$120,000 COP"
+     */
+    details: string;
+    /**
+     * Clases CSS adicionales para el contenedor
+     */
+    className?: string;
+}
+//# sourceMappingURL=DescriptionList.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DescriptionList.types.d.ts","sourceRoot":"","sources":["../../../src/components/DescriptionList/DescriptionList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;;OAKG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;;;OAKG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,33 @@
+import type { DividerProps } from './Divider.types';
+/**
+ * Divider del sistema de diseño Siesa
+ *
+ * Línea horizontal de 1px para separar contenido visual o semánticamente.
+ * Implementa dos variantes con soporte completo de dark mode.
+ *
+ * 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
+ * - Componente semántico usando elemento <hr>
+ *
+ * @see docs/colors.md - Sistema de colores (border-primary, border-secondary)
+ * @see docs/spacing.md - Sistema de espaciado (altura de 1px)
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4096-8445 - Especificaciones Figma
+ *
+ * @example
+ * ```tsx
+ * // Default divider (más visible)
+ * <Divider />
+ * <Divider type="default" />
+ *
+ * // Soft divider (más sutil)
+ * <Divider type="soft" />
+ *
+ * // Con clases personalizadas
+ * <Divider className="my-6" />
+ * ```
+ */
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLHRElement>>;
+//# sourceMappingURL=Divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,OAAO,wGA4CnB,CAAC"}

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

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react';
+/**
+ * Tipo de divider
+ */
+export type DividerType = 'default' | 'soft';
+/**
+ * Props del componente Divider
+ */
+export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+    /**
+     * Tipo de divider
+     * - default: Línea más visible (border-primary)
+     * - soft: Línea más sutil (border-secondary)
+     * @default 'default'
+     */
+    type?: DividerType;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+//# sourceMappingURL=Divider.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.types.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,aAAa,CAAC;IACjE;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { DropdownProps, DropdownItemProps, DropdownHeadingProps, DropdownDividerProps } from './Dropdown.types';
+/**
+ * Componente Dropdown 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')
+ * - Tokens de color consistentes con la documentación
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels y keyboard navigation
+ * - Cierre automático al hacer click fuera
+ *
+ * @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
+ * <Dropdown
+ *   placeholder="Options"
+ *   items={[
+ *     { children: 'Account', icon: <UserIcon /> },
+ *     { children: 'Settings', icon: <CogIcon /> },
+ *     { isDivider: true },
+ *     { children: 'Logout' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Dropdown: React.FC<DropdownProps>;
+/**
+ * Componente DropdownItem
+ * Item individual dentro del menú dropdown
+ *
+ * @example
+ * ```tsx
+ * <DropdownItem icon={<UserIcon />} shortcut="⌘ P">
+ *   Profile
+ * </DropdownItem>
+ * ```
+ */
+export declare const DropdownItem: React.FC<DropdownItemProps>;
+/**
+ * Componente DropdownHeading
+ * Encabezado de sección dentro del menú dropdown
+ *
+ * @example
+ * ```tsx
+ * <DropdownHeading>My events</DropdownHeading>
+ * ```
+ */
+export declare const DropdownHeading: React.FC<DropdownHeadingProps>;
+/**
+ * Componente DropdownDivider
+ * Separador visual entre items del menú dropdown
+ *
+ * @example
+ * ```tsx
+ * <DropdownDivider />
+ * ```
+ */
+export declare const DropdownDivider: React.FC<DropdownDividerProps>;
+//# sourceMappingURL=Dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,kBAAkB,CAAC;AAG1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqN5C,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqFpD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2B1D,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsB1D,CAAC"}

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

@@ -0,0 +1,124 @@
+import type { ReactNode, MouseEvent } from 'react';
+/**
+ * Props del componente Dropdown (trigger button)
+ */
+export interface DropdownProps {
+    /**
+     * Variante visual del dropdown
+     * - 'default': Botón con texto + ícono
+     * - 'icon-only': Solo ícono (sin texto)
+     * @default 'default'
+     */
+    variant?: 'default' | 'icon-only';
+    /**
+     * Texto o contenido del botón trigger
+     */
+    children?: ReactNode;
+    /**
+     * Items del menú dropdown
+     */
+    items: DropdownItemProps[];
+    /**
+     * Si el dropdown está abierto (controlado)
+     */
+    open?: boolean;
+    /**
+     * Callback cuando el dropdown cambia de estado
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Si el dropdown está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Clases CSS adicionales para el trigger
+     */
+    className?: string;
+    /**
+     * Clases CSS adicionales para el menú
+     */
+    menuClassName?: string;
+    /**
+     * Label para accesibilidad (ARIA)
+     */
+    ariaLabel?: string;
+    /**
+     * Placeholder cuando no hay children
+     * @default 'Options'
+     */
+    placeholder?: string;
+}
+/**
+ * Props del componente DropdownItem
+ */
+export interface DropdownItemProps {
+    /**
+     * Contenido del item
+     * No requerido cuando isDivider es true
+     */
+    children?: ReactNode;
+    /**
+     * Icono a mostrar antes del texto (izquierda)
+     */
+    icon?: ReactNode;
+    /**
+     * Descripción secundaria del item
+     */
+    description?: string;
+    /**
+     * Atajo de teclado a mostrar (derecha)
+     */
+    shortcut?: string;
+    /**
+     * Si el item está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Si el item está seleccionado
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Función onClick del item
+     */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+    /**
+     * Indica si este item es un divider (separador)
+     * @default false
+     */
+    isDivider?: boolean;
+    /**
+     * Indica si este item es un heading (encabezado)
+     * @default false
+     */
+    isHeading?: boolean;
+}
+/**
+ * Props del componente DropdownHeading
+ */
+export interface DropdownHeadingProps {
+    /**
+     * Texto del heading
+     */
+    children: ReactNode;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Props del componente DropdownDivider
+ */
+export interface DropdownDividerProps {
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+//# sourceMappingURL=Dropdown.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAE3B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,10 @@
+/**
+ * Iconos para el componente Dropdown
+ * Usando heroicons-micro según especificaciones de Figma
+ */
+export declare const ChevronDownIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const CogIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const UserIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const BellIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const CreditCardIcon: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/icons.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,eAAe,+CAa3B,CAAC;AAEF,eAAO,MAAM,OAAO,+CAanB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CASpB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAapB,CAAC;AAEF,eAAO,MAAM,cAAc,+CAU1B,CAAC"}

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

@@ -0,0 +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';
+//# 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"}