siesa-ui-kit 1.0.4 → 1.0.5

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,25 +1,50 @@
-import React from 'react';
-import {
-  ChevronUpDownIcon as HeroChevronUpDown,
-  CheckIcon as HeroCheck
-} from '@heroicons/react/24/outline';
-
-/**
- * Icono ChevronUpDown para el trigger del Select
- * Basado en Heroicons 24/outline (24x24px)
- *
- * @see https://heroicons.com/
- */
-export const ChevronUpDownIcon: React.FC<{ className?: string }> = ({ className = 'size-5' }) => (
-  <HeroChevronUpDown className={className} aria-hidden="true" />
-);
-
-/**
- * Icono Check para los items seleccionados del menu
- * Basado en Heroicons 24/outline (24x24px)
- *
- * @see https://heroicons.com/
- */
-export const CheckIcon: React.FC<{ className?: string }> = ({ className = 'size-4' }) => (
-  <HeroCheck className={className} aria-hidden="true" />
-);
+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';

package/src/components/SignUpView/SignUpView.stories.tsx

@@ -1,129 +1,129 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SignUpView } from './SignUpView';
-
-const meta = {
-  title: 'Siesa UI Kit/SignUpView',
-  component: SignUpView,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Vista completa de registro con formulario para crear una nueva cuenta. Incluye campos de nombre, email y contraseña, botón de registro, enlace para iniciar sesión, y aceptación de términos y condiciones.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    onSubmit: {
-      action: 'submitted',
-      description: 'Handler para el submit del formulario de registro',
-    },
-    onSignIn: {
-      action: 'signInClicked',
-      description: 'Handler para el click en "Ya tengo una cuenta"',
-    },
-    onTermsClick: {
-      action: 'termsClicked',
-      description: 'Handler para el click en "Condiciones de Uso"',
-    },
-    onPrivacyClick: {
-      action: 'privacyClicked',
-      description: 'Handler para el click en "Políticas de Privacidad"',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Estado de carga del botón de submit',
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'Mensaje de error general para mostrar en el formulario',
-    },
-    showBackground: {
-      control: 'boolean',
-      description: 'Si se muestra el fondo decorativo con imagen',
-    },
-    variant: {
-      control: 'select',
-      options: ['responsive', 'mobile', 'desktop'],
-      description: 'Variante de visualización',
-    },
-  },
-} satisfies Meta<typeof SignUpView>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. DESKTOP (DEFAULT)
-// ============================================
-export const Desktop: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <SignUpView
-        onSubmit={(name, email, password) => {
-          console.log('Sign up:', { name, email, password });
-        }}
-        onSignIn={() => console.log('Go to sign in')}
-        onTermsClick={() => console.log('View terms')}
-        onPrivacyClick={() => console.log('View privacy')}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 2. LOADING STATE
-// ============================================
-export const Loading: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <SignUpView
-        isLoading={true}
-        onSubmit={(name, email, password) => {
-          console.log('Sign up:', { name, email, password });
-        }}
-        onSignIn={() => console.log('Go to sign in')}
-        onTermsClick={() => console.log('View terms')}
-        onPrivacyClick={() => console.log('View privacy')}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 3. WITH ERROR
-// ============================================
-export const WithError: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <SignUpView
-        errorMessage="El email ya está registrado. Por favor usa otro email o inicia sesión."
-        onSubmit={(name, email, password) => {
-          console.log('Sign up:', { name, email, password });
-        }}
-        onSignIn={() => console.log('Go to sign in')}
-        onTermsClick={() => console.log('View terms')}
-        onPrivacyClick={() => console.log('View privacy')}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 4. WITHOUT BACKGROUND
-// ============================================
-export const WithoutBackground: Story = {
-  render: () => (
-    <div className="min-h-screen w-full bg-gray-100 dark:bg-gray-900">
-      <SignUpView
-        showBackground={false}
-        onSubmit={(name, email, password) => {
-          console.log('Sign up:', { name, email, password });
-        }}
-        onSignIn={() => console.log('Go to sign in')}
-        onTermsClick={() => console.log('View terms')}
-        onPrivacyClick={() => console.log('View privacy')}
-      />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { SignUpView } from './SignUpView';
+
+const meta = {
+  title: 'Siesa UI Kit/SignUpView',
+  component: SignUpView,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Vista completa de registro con formulario para crear una nueva cuenta. Incluye campos de nombre, email y contraseña, botón de registro, enlace para iniciar sesión, y aceptación de términos y condiciones.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    onSubmit: {
+      action: 'submitted',
+      description: 'Handler para el submit del formulario de registro',
+    },
+    onSignIn: {
+      action: 'signInClicked',
+      description: 'Handler para el click en "Ya tengo una cuenta"',
+    },
+    onTermsClick: {
+      action: 'termsClicked',
+      description: 'Handler para el click en "Condiciones de Uso"',
+    },
+    onPrivacyClick: {
+      action: 'privacyClicked',
+      description: 'Handler para el click en "Políticas de Privacidad"',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Estado de carga del botón de submit',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Mensaje de error general para mostrar en el formulario',
+    },
+    showBackground: {
+      control: 'boolean',
+      description: 'Si se muestra el fondo decorativo con imagen',
+    },
+    variant: {
+      control: 'select',
+      options: ['responsive', 'mobile', 'desktop'],
+      description: 'Variante de visualización',
+    },
+  },
+} satisfies Meta<typeof SignUpView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. DESKTOP (DEFAULT)
+// ============================================
+export const Desktop: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <SignUpView
+        onSubmit={(name, email, password) => {
+          console.log('Sign up:', { name, email, password });
+        }}
+        onSignIn={() => console.log('Go to sign in')}
+        onTermsClick={() => console.log('View terms')}
+        onPrivacyClick={() => console.log('View privacy')}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 2. LOADING STATE
+// ============================================
+export const Loading: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <SignUpView
+        isLoading={true}
+        onSubmit={(name, email, password) => {
+          console.log('Sign up:', { name, email, password });
+        }}
+        onSignIn={() => console.log('Go to sign in')}
+        onTermsClick={() => console.log('View terms')}
+        onPrivacyClick={() => console.log('View privacy')}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 3. WITH ERROR
+// ============================================
+export const WithError: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <SignUpView
+        errorMessage="El email ya está registrado. Por favor usa otro email o inicia sesión."
+        onSubmit={(name, email, password) => {
+          console.log('Sign up:', { name, email, password });
+        }}
+        onSignIn={() => console.log('Go to sign in')}
+        onTermsClick={() => console.log('View terms')}
+        onPrivacyClick={() => console.log('View privacy')}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 4. WITHOUT BACKGROUND
+// ============================================
+export const WithoutBackground: Story = {
+  render: () => (
+    <div className="min-h-screen w-full bg-gray-100 dark:bg-gray-900">
+      <SignUpView
+        showBackground={false}
+        onSubmit={(name, email, password) => {
+          console.log('Sign up:', { name, email, password });
+        }}
+        onSignIn={() => console.log('Go to sign in')}
+        onTermsClick={() => console.log('View terms')}
+        onPrivacyClick={() => console.log('View privacy')}
+      />
+    </div>
+  ),
+};