siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Select/icons.tsx

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

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>
+  ),
+};