siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/Dropdown/index.ts

@@ -1,8 +1,8 @@
-export { Dropdown, DropdownItem, DropdownHeading, DropdownDivider } from './Dropdown';
-export type {
-  DropdownProps,
-  DropdownItemProps,
-  DropdownHeadingProps,
-  DropdownDividerProps,
-} from './Dropdown.types';
-export { ChevronDownIcon, CogIcon, UserIcon, BellIcon, CreditCardIcon } from './icons';
+export { Dropdown, DropdownItem, DropdownHeading, DropdownDivider } from './Dropdown';
+export type {
+  DropdownProps,
+  DropdownItemProps,
+  DropdownHeadingProps,
+  DropdownDividerProps,
+} from './Dropdown.types';
+export { ChevronDownIcon, CogIcon, UserIcon, BellIcon, CreditCardIcon } from './icons';

package/src/components/DropdownItemCollapsible/DropdownItemCollapsible.stories.tsx

@@ -0,0 +1,317 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DropdownItemCollapsible } from './DropdownItemCollapsible';
+import { UserIcon } from './icons';
+
+const meta = {
+  title: 'Components/DropdownItemCollapsible',
+  component: DropdownItemCollapsible,
+  parameters: {
+    layout: 'padded',
+    backgrounds: {
+      default: 'light',
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof DropdownItemCollapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Item colapsable básico sin encabezado ni divisor
+ * Muestra estructura simple con header colapsable
+ */
+export const Basic: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Users"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      children={[
+        {
+          label: 'Active Users',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Inactive Users',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Users',
+  },
+};
+
+/**
+ * Item colapsable con encabezado de sección
+ * Útil para agrupar items relacionados
+ */
+export const WithHeading: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Customers"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      showHeading={true}
+      headingLabel="SECTION 1"
+      children={[
+        {
+          label: 'Enterprise',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'SMB',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Startup',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+      showDivider={true}
+    />
+  ),
+  args: {
+    label: 'Customers',
+  },
+};
+
+/**
+ * Item colapsable expandido por defecto
+ */
+export const DefaultOpen: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Departments"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      defaultOpen={true}
+      children={[
+        {
+          label: 'Sales',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Marketing',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Engineering',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Operations',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Departments',
+  },
+};
+
+/**
+ * Item deshabilitado
+ * No se puede expandir ni interactuar
+ */
+export const Disabled: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Archived"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      disabled={true}
+      children={[
+        {
+          label: 'Old Item 1',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+        {
+          label: 'Old Item 2',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Archived',
+  },
+};
+
+/**
+ * Item simple sin items anidados (no colapsable)
+ * Actúa como un botón normal
+ */
+export const Simple: Story = {
+  args: {
+    label: 'Single Item',
+    icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+    isCollapsible: false,
+  },
+};
+
+/**
+ * Item sin icono
+ */
+export const WithoutIcon: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="No Icon Item"
+      children={[
+        {
+          label: 'Child 1',
+        },
+        {
+          label: 'Child 2',
+        },
+        {
+          label: 'Child 3',
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'No Icon Item',
+  },
+};
+
+/**
+ * Items anidados sin iconos
+ */
+export const ChildrenWithoutIcons: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Groups"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      children={[
+        {
+          label: 'Admins',
+        },
+        {
+          label: 'Users',
+        },
+        {
+          label: 'Guests',
+        },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Groups',
+  },
+};
+
+/**
+ * Múltiples items colapsables para simular dropdown completo
+ */
+export const MultipleItems: Story = {
+  args: {
+    label: 'Multi Demo',
+  },
+  render: () => (
+    <div className="flex flex-col gap-0 w-56 bg-bg-primary dark:bg-dark-bg-primary rounded-lg border border-border-primary dark:border-dark-border-primary p-2">
+      <DropdownItemCollapsible
+        label="Users"
+        icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+        showHeading={true}
+        headingLabel="RESOURCES"
+        showDivider={true}
+        children={[
+          {
+            label: 'Active Users',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+          {
+            label: 'Inactive Users',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+        ]}
+      />
+
+      <DropdownItemCollapsible
+        label="Departments"
+        icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+        showDivider={true}
+        children={[
+          {
+            label: 'Sales',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+          {
+            label: 'Marketing',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+          {
+            label: 'Engineering',
+            icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          },
+        ]}
+      />
+
+      <DropdownItemCollapsible
+        label="Settings"
+        icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+        showDivider={false}
+        isCollapsible={false}
+      />
+    </div>
+  ),
+};
+
+/**
+ * Ejemplo con callbacks
+ */
+export const WithCallbacks: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Actions"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      defaultOpen={false}
+      children={[
+        {
+          label: 'Edit',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          onClick: () => console.log('Edit clicked'),
+        },
+        {
+          label: 'Delete',
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+          onClick: () => console.log('Delete clicked'),
+        },
+        {
+          label: 'Archive',
+          disabled: true,
+          icon: <UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />,
+        },
+      ]}
+      onOpenChange={(open) => console.log('Toggle state:', open)}
+    />
+  ),
+  args: {
+    label: 'Actions',
+  },
+};
+
+/**
+ * Item con muchos items anidados
+ */
+export const ManyChildren: Story = {
+  render: () => (
+    <DropdownItemCollapsible
+      label="Countries"
+      icon={<UserIcon className="w-4 h-4 stroke-content-secondary dark:stroke-content-secondary" />}
+      children={[
+        { label: 'United States' },
+        { label: 'Canada' },
+        { label: 'Mexico' },
+        { label: 'Brazil' },
+        { label: 'Argentina' },
+        { label: 'Chile' },
+        { label: 'Colombia' },
+        { label: 'Peru' },
+      ]}
+    />
+  ),
+  args: {
+    label: 'Countries',
+  },
+};

package/src/components/DropdownItemCollapsible/DropdownItemCollapsible.tsx

@@ -0,0 +1,287 @@
+import React, { useState } from 'react';
+import type {
+  DropdownItemCollapsibleProps,
+  DropdownItemCollapsibleChildProps,
+} from './DropdownItemCollapsible.types';
+import { ChevronDownIcon } from './icons';
+
+/**
+ * Componente DropdownItemCollapsible del sistema de diseño Siesa
+ *
+ * Item colapsable para uso dentro de Dropdowns que permite agrupar
+ * items relacionados en secciones expandibles.
+ *
+ * **Características:**
+ * - Soporte completo para expandir/colapsar
+ * - Iconos personalizables en header y children
+ * - Items anidados indentados automáticamente
+ * - Dark mode completo con inversión de colores
+ * - Estados: default, hover, active, disabled
+ * - Focus rings adaptativos
+ * - Animación suave de rotación del chevron
+ *
+ * **Estados visuales:**
+ * - `collapsed`: Muestra solo el header con chevron apuntando down
+ * - `expanded`: Muestra header y lista de items anidados
+ * - `disabled`: Opacidad 50%, sin interacción
+ * - `hover`: Fondo de hover sutil, color primario del icono
+ * - `active`: Item anidado seleccionado con fondo custom-primary
+ *
+ * **Espaciado según Figma:**
+ * - Header padding: px-4 py-2 (16px horizontal, 8px vertical)
+ * - Item anidado padding: pl-6 pr-4 py-2 (24px left, 16px right, 8px vertical)
+ * - Gap entre elementos: gap-3 (12px)
+ * - Gap interno (icon + text): gap-3 (12px)
+ * - Indent entre niveles: 8px adicional por nivel
+ * - Divisor: borde top de 1px con spacing-0.5 (2px) arriba
+ * - Sección heading: pt-3 pb-1 px-0 (12px top, 4px bottom, sin horizontal)
+ *
+ * **Tipografía:**
+ * - Header: Paragraph/Small (14px, Regular, line-height 20px) - text-content-primary
+ * - Items anidados: Paragraph/Small (14px, Regular, line-height 20px) - text-content-primary
+ * - Heading: Paragraph/Tiny (12px, Regular, line-height 16px) - text-content-tertiary
+ *
+ * **Colores (Light Mode):**
+ * - Header text: content-primary (#18181b)
+ * - Header icon: content-secondary (#a1a1aa)
+ * - Header hover: bg-background-custom-primary (#dbeefe)
+ * - Header text hover: content-custom-primary (#0e79fd)
+ * - Item text: content-primary (#18181b)
+ * - Item hover: bg-transparent (sin fondo)
+ * - Divider: border-border-primary (#e4e4e7)
+ * - Heading text: content-tertiary (#71717a)
+ *
+ * **Colores (Dark Mode):**
+ * - Header text: content-primary/dark (#fafafa)
+ * - Header icon: content-secondary/dark (#a1a1aa)
+ * - Header hover: bg-background-custom-primary/dark (#0e5ab0)
+ * - Header text hover: content-custom-primary/dark (#bfe2fe)
+ * - Item text: content-primary/dark (#fafafa)
+ * - Divider: border-border-primary/dark (#3f3f46)
+ * - Heading text: content-tertiary/dark (#a1a1aa)
+ *
+ * **Border radius:**
+ * - Todos los items: rounded-lg (8px)
+ *
+ * **Sombras:**
+ * - Ninguna (usado dentro de dropdowns)
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-34374
+ *
+ * @example
+ * ```tsx
+ * // Item colapsable simple
+ * <DropdownItemCollapsible
+ *   label="Users"
+ *   icon={<UserIcon />}
+ *   children={[
+ *     { label: "Active Users", icon: <CheckIcon /> },
+ *     { label: "Inactive Users", icon: <CloseIcon /> },
+ *   ]}
+ * />
+ *
+ * // Con encabezado de sección
+ * <DropdownItemCollapsible
+ *   label="Customers"
+ *   icon={<BuildingIcon />}
+ *   showHeading={true}
+ *   headingLabel="SECTION 1"
+ *   children={[...]}
+ * />
+ *
+ * // Item no colapsable (actúa como botón normal)
+ * <DropdownItemCollapsible
+ *   label="Single Item"
+ *   icon={<StarIcon />}
+ *   isCollapsible={false}
+ *   onClick={() => console.log('clicked')}
+ * />
+ * ```
+ */
+export const DropdownItemCollapsible: React.FC<DropdownItemCollapsibleProps> = ({
+  label,
+  icon,
+  children = [],
+  defaultOpen = false,
+  disabled = false,
+  onOpenChange,
+  onClick,
+  isCollapsible = children.length > 0,
+  showHeading = false,
+  headingLabel,
+  showDivider = true,
+  className = '',
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const handleToggle = () => {
+    if (disabled || !isCollapsible) return;
+
+    const newOpen = !isOpen;
+    setIsOpen(newOpen);
+    onOpenChange?.(newOpen);
+  };
+
+  const handleHeaderClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+
+    if (isCollapsible) {
+      handleToggle();
+    } else {
+      onClick?.(e);
+    }
+  };
+
+  const handleChildClick = (child: DropdownItemCollapsibleChildProps) => (
+    e: React.MouseEvent<HTMLDivElement>,
+  ) => {
+    if (child.disabled) return;
+    child.onClick?.(e);
+  };
+
+  return (
+    <div className={`flex flex-col gap-0.5 w-full ${className}`}>
+      {/* Section Heading */}
+      {showHeading && headingLabel && (
+        <div className="flex flex-col gap-0 items-start pb-1 pt-3 px-0 w-full">
+          <p className="font-['Inter:Regular',sans-serif] font-normal leading-4 not-italic text-xs text-content-tertiary dark:text-content-tertiary w-full">
+            {headingLabel}
+          </p>
+        </div>
+      )}
+
+      {/* Header Button */}
+      <button
+        onClick={handleHeaderClick}
+        disabled={disabled}
+        className={[
+          // Base
+          'flex items-center gap-3 px-4 py-2 w-full',
+          'rounded-lg cursor-pointer',
+          'transition-all duration-150',
+
+          // Colores y estados (Light Mode)
+          !disabled && 'text-content-primary',
+          !disabled && 'hover:bg-primary-custom-100',
+          !disabled && 'hover:text-primary-custom-600',
+
+          // Dark Mode
+          !disabled && 'dark:text-content-primary',
+          !disabled && 'dark:hover:bg-dark-bg-custom',
+          !disabled && 'dark:hover:text-dark-content-custom',
+
+          // Focus ring
+          !disabled && 'focus:outline-none',
+          !disabled && 'focus:ring-2',
+          !disabled && 'focus:ring-offset-2',
+          !disabled && 'focus:ring-primary-custom-400',
+          !disabled && 'focus:ring-offset-bg-primary',
+          !disabled && 'dark:focus:ring-offset-dark-bg-primary',
+
+          // Disabled
+          disabled && 'opacity-50',
+          disabled && 'cursor-not-allowed',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        aria-expanded={isOpen && isCollapsible}
+        aria-disabled={disabled}
+      >
+        {/* Icon Wrapper */}
+        {icon && (
+          <div className="flex items-center justify-center w-4 h-4 shrink-0 text-content-secondary dark:text-content-secondary">
+            {icon}
+          </div>
+        )}
+
+        {/* Content Wrapper */}
+        <div className="flex flex-1 flex-col items-start justify-center gap-0.5">
+          <p className="font-['Inter:Regular',sans-serif] font-normal leading-5 not-italic text-sm text-left">
+            {label}
+          </p>
+        </div>
+
+        {/* Chevron (solo visible si es colapsable) */}
+        {isCollapsible && (
+          <div
+            className={[
+              'flex items-center justify-center w-4 h-4 shrink-0',
+              'text-content-secondary dark:text-content-secondary',
+              'transition-transform duration-200',
+              isOpen ? 'rotate-180' : 'rotate-0',
+            ].join(' ')}
+          >
+            <ChevronDownIcon className="w-4 h-4" />
+          </div>
+        )}
+      </button>
+
+      {/* Divider */}
+      {showDivider && <div className="w-full h-px bg-border-primary dark:bg-dark-border-primary" />}
+
+      {/* Children Container (expanded) */}
+      {isOpen && isCollapsible && children.length > 0 && (
+        <div className="flex flex-col gap-0.5 w-full py-2 px-0">
+          {children.map((child, index) => (
+            <div
+              key={index}
+              onClick={handleChildClick(child)}
+              className={[
+                // Base
+                'flex gap-3 items-center pl-6 pr-4 py-2 w-full',
+                'rounded-lg cursor-pointer',
+                'transition-all duration-150',
+
+                // Colores y estados (Light Mode)
+                !child.disabled && 'text-content-primary',
+                !child.disabled && 'hover:bg-primary-custom-100',
+                !child.disabled && 'hover:text-primary-custom-600',
+
+                // Dark Mode
+                !child.disabled && 'dark:text-content-primary',
+                !child.disabled && 'dark:hover:bg-dark-bg-custom',
+                !child.disabled && 'dark:hover:text-dark-content-custom',
+
+                // Focus ring
+                !child.disabled && 'focus:outline-none',
+                !child.disabled && 'focus:ring-2',
+                !child.disabled && 'focus:ring-offset-2',
+                !child.disabled && 'focus:ring-primary-custom-400',
+                !child.disabled && 'focus:ring-offset-bg-primary',
+                !child.disabled && 'dark:focus:ring-offset-dark-bg-primary',
+
+                // Disabled
+                child.disabled && 'opacity-50',
+                child.disabled && 'cursor-not-allowed',
+
+                // Custom classes
+                child.className,
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              {/* Child Icon Wrapper */}
+              {child.icon && (
+                <div className="flex items-center justify-center w-4 h-4 shrink-0 text-content-secondary dark:text-content-secondary">
+                  {child.icon}
+                </div>
+              )}
+
+              {/* Child Content Wrapper */}
+              <div className="flex flex-1 flex-col items-start justify-center gap-0.5">
+                <p className="font-['Inter:Regular',sans-serif] font-normal leading-5 not-italic text-sm text-left">
+                  {child.label}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DropdownItemCollapsible;