anima-ds-nucleus 1.0.0

package/src/components/Atoms/Radios/Radios.stories.jsx

@@ -0,0 +1,119 @@
+import { Radios, RADIOS_SCALE } from './Radios';
+
+const sizeOptions = RADIOS_SCALE.map((token) => token.key);
+
+export default {
+  title: 'Atoms/Radios',
+  component: Radios,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: sizeOptions,
+      description: 'Token de radio (px base transformado a rem)',
+    },
+  },
+};
+
+export const Playground = {
+  args: {
+    size: '16',
+    className: 'bg-emerald-500 w-32 h-32',
+  },
+};
+
+export const EscalaCompleta = () => (
+  <div className="space-y-4">
+    <h3 className="text-lg font-semibold text-gray-800 mb-4">Tamaños</h3>
+    {RADIOS_SCALE.map((token) => (
+      <div
+        key={token.key}
+        className="flex items-center gap-6"
+      >
+        <div className={`radius-token radius-token-${token.key}`} />
+        <div className="flex items-center gap-2 text-sm">
+          <span className={`text-gray-800 ${token.key === '16' ? 'font-bold' : ''}`}>
+            {token.px}
+          </span>
+          <span className={`${token.key === '16' ? 'text-emerald-600 font-bold' : 'text-emerald-600'}`}>
+            {token.rem}
+          </span>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+export const EjemplosDeUso = () => (
+  <div className="space-y-6">
+    <div>
+      <p className="text-body-md font-medium text-gray-700 mb-4">
+        Botones con diferentes radios
+      </p>
+      <div className="flex items-center gap-4 flex-wrap">
+        <button className={`px-4 py-2 bg-emerald-500 text-white radius-4 hover:bg-emerald-600 transition-colors`}>
+          radius-4
+        </button>
+        <button className={`px-4 py-2 bg-emerald-500 text-white radius-8 hover:bg-emerald-600 transition-colors`}>
+          radius-8
+        </button>
+        <button className={`px-4 py-2 bg-emerald-500 text-white radius-12 hover:bg-emerald-600 transition-colors`}>
+          radius-12
+        </button>
+        <button className={`px-4 py-2 bg-emerald-500 text-white radius-16 hover:bg-emerald-600 transition-colors`}>
+          radius-16 (Base)
+        </button>
+        <button className={`px-4 py-2 bg-emerald-500 text-white radius-24 hover:bg-emerald-600 transition-colors`}>
+          radius-24
+        </button>
+        <button className={`px-4 py-2 bg-emerald-500 text-white radius-32 hover:bg-emerald-600 transition-colors`}>
+          radius-32
+        </button>
+      </div>
+    </div>
+
+    <div>
+      <p className="text-body-md font-medium text-gray-700 mb-4">
+        Cards con diferentes radios
+      </p>
+      <div className="grid grid-cols-3 gap-4">
+        <div className={`p-4 bg-white border border-gray-200 shadow-sm radius-4`}>
+          <h3 className="font-semibold mb-2">Card radius-4</h3>
+          <p className="text-sm text-gray-600">Bordes más cuadrados</p>
+        </div>
+        <div className={`p-4 bg-white border border-gray-200 shadow-sm radius-16`}>
+          <h3 className="font-semibold mb-2">Card radius-16</h3>
+          <p className="text-sm text-gray-600">Bordes estándar</p>
+        </div>
+        <div className={`p-4 bg-white border border-gray-200 shadow-sm radius-32`}>
+          <h3 className="font-semibold mb-2">Card radius-32</h3>
+          <p className="text-sm text-gray-600">Bordes muy redondeados</p>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <p className="text-body-md font-medium text-gray-700 mb-4">
+        Inputs con diferentes radios
+      </p>
+      <div className="flex flex-col gap-4 max-w-md">
+        <input
+          type="text"
+          placeholder="Input con radius-4"
+          className={`px-4 py-2 border border-gray-300 radius-4 focus:outline-none focus:ring-2 focus:ring-emerald-500`}
+        />
+        <input
+          type="text"
+          placeholder="Input con radius-12"
+          className={`px-4 py-2 border border-gray-300 radius-12 focus:outline-none focus:ring-2 focus:ring-emerald-500`}
+        />
+        <input
+          type="text"
+          placeholder="Input con radius-16 (Base)"
+          className={`px-4 py-2 border border-gray-300 radius-16 focus:outline-none focus:ring-2 focus:ring-emerald-500`}
+        />
+      </div>
+    </div>
+  </div>
+);
+

package/src/components/Atoms/Shadow/Shadow.stories.jsx

@@ -0,0 +1,25 @@
+const ShadowCard = ({ children = 'Default' }) => (
+  <div className="p-12 bg-gradient-to-br from-gray-50 to-white min-h-[240px] flex items-center justify-center">
+    <div className="shadow px-10 py-8 text-center">
+      <p className="text-body-lg text-gray-700">{children}</p>
+    </div>
+  </div>
+);
+
+export default {
+  title: 'Atoms/Shadows',
+};
+
+export const Default = {
+  render: () => (
+    <div className="max-w-lg mx-auto space-y-4">
+      <ShadowCard>Shadow Default</ShadowCard>
+      <div className="text-center">
+        <code className="text-emerald-600 text-sm">.shadow</code>
+        <p className="text-gray-500 text-sm mt-1">Box shadow oficial del sistema</p>
+      </div>
+    </div>
+  ),
+};
+
+

package/src/components/Atoms/Skeleton/Skeleton.jsx

@@ -0,0 +1,50 @@
+export const Skeleton = ({
+  variant = 'text',
+  width,
+  height,
+  className = '',
+  ...props
+}) => {
+  const baseClasses = 'animate-pulse bg-gray-200 rounded';
+
+  const variantClasses = {
+    text: 'h-4',
+    circular: 'rounded-full',
+    rectangular: 'rounded',
+  };
+
+  const style = {};
+  if (width) style.width = width;
+  if (height) style.height = height;
+
+  if (variant === 'circular') {
+    return (
+      <div
+        className={`${baseClasses} ${variantClasses.circular} ${className}`}
+        style={style}
+        {...props}
+      />
+    );
+  }
+
+  if (variant === 'rectangular') {
+    return (
+      <div
+        className={`${baseClasses} ${variantClasses.rectangular} ${className}`}
+        style={style}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={`${baseClasses} ${variantClasses.text} ${className}`}
+      style={style}
+      {...props}
+    />
+  );
+};
+
+export default Skeleton;
+

package/src/components/Atoms/Skeleton/Skeleton.stories.jsx

@@ -0,0 +1,55 @@
+import { Skeleton } from './Skeleton';
+
+export default {
+  title: 'Atoms/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['text', 'circular', 'rectangular'],
+    },
+  },
+};
+
+export const Text = {
+  args: {
+    variant: 'text',
+  },
+};
+
+export const Circular = {
+  args: {
+    variant: 'circular',
+    width: 40,
+    height: 40,
+  },
+};
+
+export const Rectangular = {
+  args: {
+    variant: 'rectangular',
+    width: 200,
+    height: 100,
+  },
+};
+
+export const CustomSize = {
+  args: {
+    variant: 'text',
+    width: '50%',
+    height: 20,
+  },
+};
+
+export const CardSkeleton = {
+  render: () => (
+    <div className="border rounded-lg p-4 space-y-3">
+      <Skeleton variant="circular" width={40} height={40} />
+      <Skeleton variant="text" width="80%" />
+      <Skeleton variant="text" width="60%" />
+      <Skeleton variant="rectangular" width="100%" height={100} />
+    </div>
+  ),
+};
+

package/src/components/Atoms/Spacing/Spacing.jsx

@@ -0,0 +1,56 @@
+const SCALE = [
+  { key: '160', px: '160px', rem: '10rem' },
+  { key: '96', px: '96px', rem: '6rem' },
+  { key: '80', px: '80px', rem: '5rem' },
+  { key: '64', px: '64px', rem: '4rem' },
+  { key: '48', px: '48px', rem: '3rem' },
+  { key: '40', px: '40px', rem: '2.5rem' },
+  { key: '32', px: '32px', rem: '2rem' },
+  { key: '24', px: '24px', rem: '1.5rem' },
+  { key: '16', px: '16px', rem: '1rem' },
+  { key: '12', px: '12px', rem: '0.75rem' },
+  { key: '8', px: '8px', rem: '0.5rem' },
+  { key: '4', px: '4px', rem: '0.25rem' },
+  { key: '2', px: '2px', rem: '0.125rem' },
+];
+
+const scaleMap = SCALE.reduce((acc, token) => {
+  acc[token.key] = token;
+  acc[`space-${token.key}`] = token;
+  return acc;
+}, {});
+
+export const SPACING_SCALE = SCALE;
+
+export const Spacing = ({
+  size = '16',
+  axis = 'vertical',
+  as: Component = 'div',
+  className = '',
+  style = {},
+  thickness = '1px',
+  ...props
+}) => {
+  const normalized = typeof size === 'number' ? String(size) : size;
+  const token = scaleMap[normalized] || scaleMap['16'];
+  const cssVar = `var(--space-${token.key})`;
+
+  const dimensionStyle =
+    axis === 'horizontal'
+      ? { width: cssVar, height: thickness }
+      : axis === 'square'
+        ? { width: cssVar, height: cssVar }
+        : { height: cssVar, width: thickness };
+
+  return (
+    <Component
+      className={className}
+      style={{ display: 'inline-flex', ...dimensionStyle, ...style }}
+      aria-hidden="true"
+      {...props}
+    />
+  );
+};
+
+export default Spacing;
+

package/src/components/Atoms/Spacing/Spacing.stories.jsx

@@ -0,0 +1,78 @@
+import { Spacing, SPACING_SCALE } from './Spacing';
+
+const sizeOptions = SPACING_SCALE.map((token) => token.key);
+
+export default {
+  title: 'Atoms/Spacing',
+  component: Spacing,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: sizeOptions,
+      description: 'Token de espacio (px base transformado a rem)',
+    },
+    axis: {
+      control: 'inline-radio',
+      options: ['vertical', 'horizontal', 'square'],
+    },
+    thickness: {
+      control: 'text',
+      description: 'Grosor usado cuando axis es vertical u horizontal',
+    },
+  },
+};
+
+export const Playground = {
+  args: {
+    size: '32',
+    axis: 'square',
+    className: 'bg-emerald-500 rounded',
+  },
+};
+
+export const EscalaCompleta = () => (
+  <div className="space-y-4">
+    {SPACING_SCALE.map((token) => (
+      <div
+        key={token.key}
+        className="flex items-center gap-6 border border-gray-100 rounded-lg p-4 shadow-sm bg-white"
+      >
+        <div className={`space-token space-token-${token.key}`} />
+        <div className="flex flex-col text-sm text-gray-700">
+          <span className="font-semibold">{`space-${token.key}`}</span>
+          <span>{token.px} / {token.rem}</span>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+export const UsosComunes = () => (
+  <div className="space-y-6">
+    <div>
+      <p className="text-body-md font-medium text-gray-700 mb-2">
+        Separadores verticales
+      </p>
+      <div className="flex flex-col border rounded-lg p-4 gap-0 bg-white">
+        <div className="py-2 text-gray-600">Bloque A</div>
+        <Spacing size="24" axis="vertical" className="bg-transparent" />
+        <div className="py-2 text-gray-600">Bloque B</div>
+      </div>
+    </div>
+
+    <div>
+      <p className="text-body-md font-medium text-gray-700 mb-2">
+        Separadores horizontales
+      </p>
+      <div className="flex items-center border rounded-lg p-4 bg-white">
+        <div className="text-gray-600">Etiqueta</div>
+        <Spacing size="16" axis="horizontal" thickness="1px" className="bg-transparent" />
+        <button className="px-3 py-1 text-sm rounded-md bg-emerald-50 text-emerald-700">
+          Acción
+        </button>
+      </div>
+    </div>
+  </div>
+);
+

package/src/components/Atoms/Spinner/Spinner.jsx

@@ -0,0 +1,47 @@
+export const Spinner = ({
+  size = 'medium',
+  variant = 'primary',
+  className = '',
+  ...props
+}) => {
+  const sizeClasses = {
+    small: 'w-4 h-4',
+    medium: 'w-8 h-8',
+    large: 'w-12 h-12',
+  };
+
+  const variantClasses = {
+    primary: 'text-blue-600',
+    secondary: 'text-gray-600',
+    white: 'text-white',
+  };
+
+  const classes = `animate-spin ${sizeClasses[size]} ${variantClasses[variant]} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+};
+
+export default Spinner;
+

package/src/components/Atoms/Spinner/Spinner.stories.jsx

@@ -0,0 +1,56 @@
+import { Spinner } from './Spinner';
+
+export default {
+  title: 'Atoms/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'white'],
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    size: 'medium',
+    variant: 'primary',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+  },
+};
+
+export const Secondary = {
+  args: {
+    variant: 'secondary',
+  },
+};
+
+export const White = {
+  args: {
+    variant: 'white',
+  },
+  decorators: [
+    (Story) => (
+      <div className="bg-gray-800 p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+

package/src/components/Atoms/Toast/Toast.jsx

@@ -0,0 +1,74 @@
+import { useEffect } from 'react';
+import { Icon } from '../Icon/Icon';
+
+export const Toast = ({
+  message,
+  variant = 'info',
+  duration = 5000,
+  onClose,
+  position = 'top-right',
+  className = '',
+  ...props
+}) => {
+  useEffect(() => {
+    if (duration > 0 && onClose) {
+      const timer = setTimeout(() => {
+        onClose();
+      }, duration);
+      return () => clearTimeout(timer);
+    }
+  }, [duration, onClose]);
+
+  const variantClasses = {
+    info: 'bg-blue-50 border-blue-200 text-blue-800',
+    success: 'bg-green-50 border-green-200 text-green-800',
+    warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+    danger: 'bg-red-50 border-red-200 text-red-800',
+  };
+
+  const iconMap = {
+    info: 'InformationCircleIcon',
+    success: 'CheckCircleIcon',
+    warning: 'ExclamationTriangleIcon',
+    danger: 'XCircleIcon',
+  };
+
+  const positionClasses = {
+    'top-right': 'top-4 right-4',
+    'top-left': 'top-4 left-4',
+    'top-center': 'top-4 left-1/2 transform -translate-x-1/2',
+    'bottom-right': 'bottom-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-center': 'bottom-4 left-1/2 transform -translate-x-1/2',
+  };
+
+  return (
+    <div
+      className={`fixed ${positionClasses[position]} z-50 max-w-sm w-full ${className}`}
+      {...props}
+    >
+      <div
+        className={`border rounded-lg shadow-lg p-4 flex items-start ${variantClasses[variant]}`}
+      >
+        <Icon
+          name={iconMap[variant]}
+          className="mr-3 h-5 w-5 flex-shrink-0 mt-0.5"
+        />
+        <div className="flex-1">
+          <p className="text-sm font-medium">{message}</p>
+        </div>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="ml-4 text-current opacity-50 hover:opacity-75"
+          >
+            <Icon name="XMarkIcon" className="h-5 w-5" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Toast;
+

package/src/components/Atoms/Toast/Toast.stories.jsx

@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import { Toast } from './Toast';
+import { Button } from '../Button/Button';
+
+export default {
+  title: 'Atoms/Toast',
+  component: Toast,
+  tags: ['autodocs'],
+};
+
+export const Info = {
+  render: () => {
+    const [show, setShow] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setShow(true)}>Mostrar Toast Info</Button>
+        {show && (
+          <Toast
+            message="Esta es una notificación informativa"
+            variant="info"
+            onClose={() => setShow(false)}
+          />
+        )}
+      </>
+    );
+  },
+};
+
+export const Success = {
+  render: () => {
+    const [show, setShow] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setShow(true)}>Mostrar Toast Success</Button>
+        {show && (
+          <Toast
+            message="Operación completada exitosamente"
+            variant="success"
+            onClose={() => setShow(false)}
+          />
+        )}
+      </>
+    );
+  },
+};
+
+export const Warning = {
+  render: () => {
+    const [show, setShow] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setShow(true)}>Mostrar Toast Warning</Button>
+        {show && (
+          <Toast
+            message="Por favor revisa esta información"
+            variant="warning"
+            onClose={() => setShow(false)}
+          />
+        )}
+      </>
+    );
+  },
+};
+
+export const Danger = {
+  render: () => {
+    const [show, setShow] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setShow(true)}>Mostrar Toast Error</Button>
+        {show && (
+          <Toast
+            message="Ocurrió un error al procesar la solicitud"
+            variant="danger"
+            onClose={() => setShow(false)}
+          />
+        )}
+      </>
+    );
+  },
+};
+
+export const AutoClose = {
+  render: () => {
+    const [show, setShow] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setShow(true)}>Mostrar Toast (Auto-close 3s)</Button>
+        {show && (
+          <Toast
+            message="Este toast se cerrará automáticamente en 3 segundos"
+            variant="info"
+            duration={3000}
+            onClose={() => setShow(false)}
+          />
+        )}
+      </>
+    );
+  },
+};
+