siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/Input/icons.tsx

@@ -1,145 +1,145 @@
-/**
- * Icons para Input Component
- * Basado en Heroicons Micro
- */
-
-export const EnvelopeIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
-    <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
-  </svg>
-);
-
-export const QuestionMarkCircleIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path
-      fillRule="evenodd"
-      d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM6.75 6.5a1.25 1.25 0 1 1 2.5 0 .75.75 0 0 0 1.5 0 2.75 2.75 0 0 0-4.25-2.308.75.75 0 0 0 .75 1.298A1.25 1.25 0 0 1 6.75 6.5ZM8 10a.75.75 0 0 0-.75.75v.5a.75.75 0 0 0 1.5 0v-.5A.75.75 0 0 0 8 10Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const UserIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
-  </svg>
-);
-
-export const LockClosedIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path
-      fillRule="evenodd"
-      d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const MagnifyingGlassIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path
-      fillRule="evenodd"
-      d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const EyeIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-    <path
-      fillRule="evenodd"
-      d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const EyeSlashIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path
-      fillRule="evenodd"
-      d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-      clipRule="evenodd"
-    />
-    <path d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z" />
-  </svg>
-);
-
-export const XMarkIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
-  </svg>
-);
-
-export const CheckIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <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 ExclamationCircleIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className="w-4 h-4"
-  >
-    <path
-      fillRule="evenodd"
-      d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
+/**
+ * Icons para Input Component
+ * Basado en Heroicons Micro
+ */
+
+export const EnvelopeIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+    <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+  </svg>
+);
+
+export const QuestionMarkCircleIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path
+      fillRule="evenodd"
+      d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM6.75 6.5a1.25 1.25 0 1 1 2.5 0 .75.75 0 0 0 1.5 0 2.75 2.75 0 0 0-4.25-2.308.75.75 0 0 0 .75 1.298A1.25 1.25 0 0 1 6.75 6.5ZM8 10a.75.75 0 0 0-.75.75v.5a.75.75 0 0 0 1.5 0v-.5A.75.75 0 0 0 8 10Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const UserIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
+  </svg>
+);
+
+export const LockClosedIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path
+      fillRule="evenodd"
+      d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const MagnifyingGlassIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path
+      fillRule="evenodd"
+      d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const EyeIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+    <path
+      fillRule="evenodd"
+      d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const EyeSlashIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path
+      fillRule="evenodd"
+      d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+      clipRule="evenodd"
+    />
+    <path d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z" />
+  </svg>
+);
+
+export const XMarkIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
+  </svg>
+);
+
+export const CheckIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <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 ExclamationCircleIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className="w-4 h-4"
+  >
+    <path
+      fillRule="evenodd"
+      d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/components/Input/index.ts

@@ -1,2 +1,2 @@
-export { Input } from './Input';
-export type { InputProps, InputState } from './Input.types';
+export { Input } from './Input';
+export type { InputProps, InputState } from './Input.types';

package/src/components/LoginView/LoginView.stories.tsx

@@ -1,148 +1,148 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { LoginView } from './LoginView';
-
-const meta = {
-  title: 'Siesa UI Kit/LoginView',
-  component: LoginView,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Vista completa de inicio de sesión del sistema Siesa.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    onSubmit: {
-      action: 'submit',
-      description: 'Handler cuando se envía el formulario con (email, password)',
-    },
-    onForgotPassword: {
-      action: 'forgot-password',
-      description: 'Handler cuando se hace click en "Olvidé mi Contraseña"',
-    },
-    onSignUp: {
-      action: 'sign-up',
-      description: 'Handler cuando se hace click en "¿No tienes una cuenta?"',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Si el formulario está en estado de carga',
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'Mensaje de error general a mostrar',
-    },
-    showBackground: {
-      control: 'boolean',
-      description: 'Si se muestra el fondo decorativo con imagen',
-    },
-    variant: {
-      control: 'select',
-      options: ['responsive', 'mobile', 'desktop'],
-      description: 'Variante de visualización: responsive (adapta al viewport), mobile (siempre mobile), desktop (siempre desktop)',
-      defaultValue: 'responsive',
-    },
-  },
-} satisfies Meta<typeof LoginView>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. DESKTOP
-// ============================================
-export const Desktop: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <LoginView
-        onSubmit={(email, password) => {
-          console.log('Login:', { email, password });
-          alert(`Login con:\nEmail: ${email}\nPassword: ${password}`);
-        }}
-        onForgotPassword={() => {
-          console.log('Forgot password clicked');
-          alert('Redirigiendo a recuperación de contraseña...');
-        }}
-        onSignUp={() => {
-          console.log('Sign up clicked');
-          alert('Redirigiendo a registro...');
-        }}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 2. CON ESTADO DE CARGA
-// ============================================
-export const Loading: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <LoginView
-        isLoading={true}
-        onSubmit={(email, password) => {
-          console.log('Login:', { email, password });
-        }}
-        onForgotPassword={() => {
-          console.log('Forgot password clicked');
-        }}
-        onSignUp={() => {
-          console.log('Sign up clicked');
-        }}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 3. CON MENSAJE DE ERROR
-// ============================================
-export const WithError: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <LoginView
-        errorMessage="Credenciales incorrectas. Por favor verifica tu email y contraseña."
-        onSubmit={(email, password) => {
-          console.log('Login:', { email, password });
-          alert(`Login con:\nEmail: ${email}\nPassword: ${password}`);
-        }}
-        onForgotPassword={() => {
-          console.log('Forgot password clicked');
-          alert('Redirigiendo a recuperación de contraseña...');
-        }}
-        onSignUp={() => {
-          console.log('Sign up clicked');
-          alert('Redirigiendo a registro...');
-        }}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 4. SIN FONDO DECORATIVO
-// ============================================
-export const WithoutBackground: Story = {
-  render: () => (
-    <div className="min-h-screen w-full bg-gray-100 dark:bg-gray-900">
-      <LoginView
-        showBackground={false}
-        onSubmit={(email, password) => {
-          console.log('Login:', { email, password });
-          alert(`Login con:\nEmail: ${email}\nPassword: ${password}`);
-        }}
-        onForgotPassword={() => {
-          console.log('Forgot password clicked');
-          alert('Redirigiendo a recuperación de contraseña...');
-        }}
-        onSignUp={() => {
-          console.log('Sign up clicked');
-          alert('Redirigiendo a registro...');
-        }}
-      />
-    </div>
-  ),
-};
-
+import type { Meta, StoryObj } from '@storybook/react';
+import { LoginView } from './LoginView';
+
+const meta = {
+  title: 'Siesa UI Kit/LoginView',
+  component: LoginView,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Vista completa de inicio de sesión del sistema Siesa.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    onSubmit: {
+      action: 'submit',
+      description: 'Handler cuando se envía el formulario con (email, password)',
+    },
+    onForgotPassword: {
+      action: 'forgot-password',
+      description: 'Handler cuando se hace click en "Olvidé mi Contraseña"',
+    },
+    onSignUp: {
+      action: 'sign-up',
+      description: 'Handler cuando se hace click en "¿No tienes una cuenta?"',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Si el formulario está en estado de carga',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Mensaje de error general a mostrar',
+    },
+    showBackground: {
+      control: 'boolean',
+      description: 'Si se muestra el fondo decorativo con imagen',
+    },
+    variant: {
+      control: 'select',
+      options: ['responsive', 'mobile', 'desktop'],
+      description: 'Variante de visualización: responsive (adapta al viewport), mobile (siempre mobile), desktop (siempre desktop)',
+      defaultValue: 'responsive',
+    },
+  },
+} satisfies Meta<typeof LoginView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. DESKTOP
+// ============================================
+export const Desktop: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <LoginView
+        onSubmit={(email, password) => {
+          console.log('Login:', { email, password });
+          alert(`Login con:\nEmail: ${email}\nPassword: ${password}`);
+        }}
+        onForgotPassword={() => {
+          console.log('Forgot password clicked');
+          alert('Redirigiendo a recuperación de contraseña...');
+        }}
+        onSignUp={() => {
+          console.log('Sign up clicked');
+          alert('Redirigiendo a registro...');
+        }}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 2. CON ESTADO DE CARGA
+// ============================================
+export const Loading: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <LoginView
+        isLoading={true}
+        onSubmit={(email, password) => {
+          console.log('Login:', { email, password });
+        }}
+        onForgotPassword={() => {
+          console.log('Forgot password clicked');
+        }}
+        onSignUp={() => {
+          console.log('Sign up clicked');
+        }}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 3. CON MENSAJE DE ERROR
+// ============================================
+export const WithError: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <LoginView
+        errorMessage="Credenciales incorrectas. Por favor verifica tu email y contraseña."
+        onSubmit={(email, password) => {
+          console.log('Login:', { email, password });
+          alert(`Login con:\nEmail: ${email}\nPassword: ${password}`);
+        }}
+        onForgotPassword={() => {
+          console.log('Forgot password clicked');
+          alert('Redirigiendo a recuperación de contraseña...');
+        }}
+        onSignUp={() => {
+          console.log('Sign up clicked');
+          alert('Redirigiendo a registro...');
+        }}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 4. SIN FONDO DECORATIVO
+// ============================================
+export const WithoutBackground: Story = {
+  render: () => (
+    <div className="min-h-screen w-full bg-gray-100 dark:bg-gray-900">
+      <LoginView
+        showBackground={false}
+        onSubmit={(email, password) => {
+          console.log('Login:', { email, password });
+          alert(`Login con:\nEmail: ${email}\nPassword: ${password}`);
+        }}
+        onForgotPassword={() => {
+          console.log('Forgot password clicked');
+          alert('Redirigiendo a recuperación de contraseña...');
+        }}
+        onSignUp={() => {
+          console.log('Sign up clicked');
+          alert('Redirigiendo a registro...');
+        }}
+      />
+    </div>
+  ),
+};
+