siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/Select/Select.types.ts

@@ -1,148 +1,148 @@
-import type { ReactNode } from 'react';
-
-/**
- * Opción individual del Select
- */
-export interface SelectOption {
-  /**
-   * Valor único de la opción
-   */
-  value: string | number;
-
-  /**
-   * Label visible de la opción
-   */
-  label: string;
-
-  /**
-   * Si la opción está deshabilitada
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Icono personalizado para la opción
-   */
-  icon?: ReactNode;
-}
-
-/**
- * Props del componente Select
- */
-export interface SelectProps {
-  /**
-   * Opciones disponibles para seleccionar
-   */
-  options: SelectOption[];
-
-  /**
-   * Valor seleccionado actual
-   */
-  value?: string | number;
-
-  /**
-   * Valor por defecto inicial
-   */
-  defaultValue?: string | number;
-
-  /**
-   * Texto del placeholder cuando no hay selección
-   * @default 'Seleccionar...'
-   */
-  placeholder?: string;
-
-  /**
-   * Si el select está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Si el select muestra un error
-   * @default false
-   */
-  error?: boolean;
-
-  /**
-   * Label del select (opcional)
-   */
-  label?: string;
-
-  /**
-   * Texto descriptivo que aparece debajo del label y antes del trigger
-   * Equivale al "Description" de Figma
-   * @example "This will be visible to clients on the project."
-   */
-  description?: string;
-
-  /**
-   * Muestra el label
-   * @default true
-   */
-  showLabel?: boolean;
-
-  /**
-   * Muestra la descripción
-   * @default true
-   */
-  showDescription?: boolean;
-
-  /**
-   * Header opcional que aparece al inicio del menú
-   * @example "Header ..."
-   */
-  menuHeader?: string;
-
-  /**
-   * Handler cuando cambia la selección
-   */
-  onChange?: (value: string | number) => void;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-
-  /**
-   * Clases CSS adicionales para el trigger
-   */
-  triggerClassName?: string;
-
-  /**
-   * Clases CSS adicionales para el menu
-   */
-  menuClassName?: string;
-
-  /**
-   * Label para accesibilidad (ARIA)
-   */
-  ariaLabel?: string;
-
-  /**
-   * ID del select para asociar con label
-   */
-  id?: string;
-
-  /**
-   * Nombre del campo para formularios
-   */
-  name?: string;
-
-  /**
-   * Si el campo es requerido
-   * @default false
-   */
-  required?: boolean;
-
-  /**
-   * Posición del menú desplegable
-   * @default 'bottom'
-   */
-  menuPosition?: 'top' | 'bottom';
-
-  /**
-   * Ancho completo
-   * @default false
-   */
-  fullWidth?: boolean;
-}
+import type { ReactNode } from 'react';
+
+/**
+ * Opción individual del Select
+ */
+export interface SelectOption {
+  /**
+   * Valor único de la opción
+   */
+  value: string | number;
+
+  /**
+   * Label visible de la opción
+   */
+  label: string;
+
+  /**
+   * Si la opción está deshabilitada
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Icono personalizado para la opción
+   */
+  icon?: ReactNode;
+}
+
+/**
+ * Props del componente Select
+ */
+export interface SelectProps {
+  /**
+   * Opciones disponibles para seleccionar
+   */
+  options: SelectOption[];
+
+  /**
+   * Valor seleccionado actual
+   */
+  value?: string | number;
+
+  /**
+   * Valor por defecto inicial
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Texto del placeholder cuando no hay selección
+   * @default 'Seleccionar...'
+   */
+  placeholder?: string;
+
+  /**
+   * Si el select está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Si el select muestra un error
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Label del select (opcional)
+   */
+  label?: string;
+
+  /**
+   * Texto descriptivo que aparece debajo del label y antes del trigger
+   * Equivale al "Description" de Figma
+   * @example "This will be visible to clients on the project."
+   */
+  description?: string;
+
+  /**
+   * Muestra el label
+   * @default true
+   */
+  showLabel?: boolean;
+
+  /**
+   * Muestra la descripción
+   * @default true
+   */
+  showDescription?: boolean;
+
+  /**
+   * Header opcional que aparece al inicio del menú
+   * @example "Header ..."
+   */
+  menuHeader?: string;
+
+  /**
+   * Handler cuando cambia la selección
+   */
+  onChange?: (value: string | number) => void;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+
+  /**
+   * Clases CSS adicionales para el trigger
+   */
+  triggerClassName?: string;
+
+  /**
+   * Clases CSS adicionales para el menu
+   */
+  menuClassName?: string;
+
+  /**
+   * Label para accesibilidad (ARIA)
+   */
+  ariaLabel?: string;
+
+  /**
+   * ID del select para asociar con label
+   */
+  id?: string;
+
+  /**
+   * Nombre del campo para formularios
+   */
+  name?: string;
+
+  /**
+   * Si el campo es requerido
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Posición del menú desplegable
+   * @default 'bottom'
+   */
+  menuPosition?: 'top' | 'bottom';
+
+  /**
+   * Ancho completo
+   * @default false
+   */
+  fullWidth?: boolean;
+}

package/src/components/Select/icons.tsx

@@ -1,50 +1,50 @@
-import React from 'react';
-
-/**
- * Icono ChevronUpDown para el trigger del Select
- * Heroicons Micro (16x16px)
- */
-export const ChevronUpDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => {
-  return (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z"
-        clipRule="evenodd"
-      />
-      <path
-        fillRule="evenodd"
-        d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-};
-
-/**
- * Icono Check para los items seleccionados del menu
- * Heroicons Micro (16x16px)
- */
-export const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => {
-  return (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-};
+import React from 'react';
+
+/**
+ * Icono ChevronUpDown para el trigger del Select
+ * Heroicons Micro (16x16px)
+ */
+export const ChevronUpDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z"
+        clipRule="evenodd"
+      />
+      <path
+        fillRule="evenodd"
+        d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+/**
+ * Icono Check para los items seleccionados del menu
+ * Heroicons Micro (16x16px)
+ */
+export const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};

package/src/components/Select/index.ts

@@ -1,3 +1,3 @@
-export { Select } from './Select';
-export type { SelectProps, SelectOption } from './Select.types';
-export { ChevronUpDownIcon, CheckIcon } from './icons';
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select.types';
+export { ChevronUpDownIcon, CheckIcon } from './icons';