siesa-ui-kit 1.0.2 → 1.0.4

package/dist/views/LayoutCommercial/LayoutCommercial.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { LayoutCommercialProps } from './LayoutCommercial.types';
+/**
+ * LayoutCommercial - Layout general comercial del sistema Siesa
+ *
+ * Layout reutilizable que implementa la estructura base del sistema comercial
+ * con NavigationRail lateral, Navbar superior y área de contenido dinámico.
+ * Diseñado para ser usado como wrapper en diferentes vistas comerciales.
+ *
+ * **Composición:**
+ * - Navbar: Barra superior con logo Siesa, título del producto y dropdown de usuario
+ * - NavigationRailCommercial: Rail de navegación lateral con iconos y búsqueda
+ * - Área de contenido: Contenido dinámico pasado como children
+ *
+ * **Mejores prácticas implementadas:**
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Responsive design mobile-first con breakpoints md:, lg:, xl:
+ * - Composición con componentes del sistema (NO reimplementación)
+ * - Type safety con TypeScript estricto
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see src/components/Navbar - Componente Navbar reutilizado
+ * @see src/components/NavigationRailCommercial - Componente NavigationRail reutilizado
+ *
+ * @example
+ * ```tsx
+ * <LayoutCommercial
+ *   productName="SB Comercial"
+ *   userDropdown={{
+ *     avatar: '/avatar.jpg',
+ *     name: 'Carlos',
+ *     email: 'carlos@siesa.com',
+ *   }}
+ *   navigationItems={navigationItems}
+ * >
+ *   <div>
+ *     <h1>Mi contenido personalizado</h1>
+ *     <p>Cualquier contenido puede ir aquí</p>
+ *   </div>
+ * </LayoutCommercial>
+ * ```
+ */
+export declare const LayoutCommercial: React.FC<LayoutCommercialProps>;
+//# sourceMappingURL=LayoutCommercial.d.ts.map

package/dist/views/LayoutCommercial/LayoutCommercial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutCommercial.d.ts","sourceRoot":"","sources":["../../../src/views/LayoutCommercial/LayoutCommercial.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2E5D,CAAC"}

package/dist/views/LayoutCommercial/LayoutCommercial.types.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import type { UserDropdownProps } from '../../components/Navbar/Navbar.types';
+import type { NavigationRailCommercialMenuItem } from '../../components/NavigationRailCommercial/NavigationRailCommercial.types';
+/**
+ * Props del componente LayoutCommercial
+ *
+ * Layout general comercial con NavigationRail lateral, Navbar superior y área
+ * de contenido dinámico. Diseñado para ser reutilizado en diferentes vistas
+ * del sistema comercial.
+ *
+ * **Mejores prácticas implementadas:**
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Responsive design mobile-first
+ * - Composición con componentes del sistema
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ */
+export interface LayoutCommercialProps {
+    /**
+     * Nombre del producto que aparece en el Navbar
+     * @default 'SB Comercial'
+     */
+    productName?: string;
+    /**
+     * Configuración del dropdown de usuario en el Navbar
+     */
+    userDropdown?: UserDropdownProps;
+    /**
+     * Items de navegación para el NavigationRail
+     */
+    navigationItems?: NavigationRailCommercialMenuItem[];
+    /**
+     * Contenido dinámico que se renderiza en el área principal
+     */
+    children?: ReactNode;
+    /**
+     * Clases CSS adicionales para el contenedor principal
+     */
+    className?: string;
+    /**
+     * Clases CSS adicionales para el área de contenido
+     */
+    contentClassName?: string;
+}
+//# sourceMappingURL=LayoutCommercial.types.d.ts.map

package/dist/views/LayoutCommercial/LayoutCommercial.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutCommercial.types.d.ts","sourceRoot":"","sources":["../../../src/views/LayoutCommercial/LayoutCommercial.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,0EAA0E,CAAC;AAEjI;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAEjC;;OAEG;IACH,eAAe,CAAC,EAAE,gCAAgC,EAAE,CAAC;IAErD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}

package/dist/views/LayoutCommercial/index.d.ts

@@ -0,0 +1,3 @@
+export { LayoutCommercial } from './LayoutCommercial';
+export type { LayoutCommercialProps } from './LayoutCommercial.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/views/LayoutCommercial/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/LayoutCommercial/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC"}

package/docs/icons.md

@@ -94,49 +94,30 @@ Iconos disponibles en `src/components/Input/icons.tsx`
 
 ### Patrón de Implementación
 
-Todos los iconos siguen un patrón consistente:
+Utilizamos la librería `@heroicons/react` para todos los iconos estándar. El patrón consiste en envolver el icono de la librería para mantener consistencia y facilitar personalizaciones futuras.
 
 ```typescript
+import { BeakerIcon } from '@heroicons/react/24/outline';
+
 interface IconProps {
   className?: string;
 }
 
-export const IconName: React.FC<IconProps> = ({ className = '' }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
+export const IconName: React.FC<IconProps> = ({ className = 'size-5' }) => (
+  <BeakerIcon
     className={className}
-  >
-    <path d="..." />
-  </svg>
+    aria-hidden="true"
+  />
 );
 ```
 
 ### Características Clave
 
-1. **TypeScript**: Interfaz `IconProps` para type safety
-2. **currentColor**: El fill hereda el color del texto padre
-3. **className**: Permite personalización con Tailwind CSS
-4. **viewBox 16x16**: Tamaño base optimizado
-5. **Props mínimos**: Solo className para máxima flexibilidad
-
-### Tamaños de Iconos
-
-Los iconos se adaptan usando clases de Tailwind CSS:
-
-```typescript
-// En Button Component
-const iconSizeClasses = {
-  xs: 'w-4 h-4',   // 16px - todos los tamaños usan 16px
-  sm: 'w-4 h-4',   // 16px
-  base: 'w-4 h-4', // 16px (default)
-  l: 'w-4 h-4',    // 16px
-  xl: 'w-4 h-4',   // 16px
-};
-```
-
-**Decisión de Diseño**: Todos los botones usan iconos de 16px independientemente del tamaño del botón, según especificaciones de Figma.
+1. **Librería Estándar**: Uso de Heroicons Outline (24x24px) vía `@heroicons/react/24/outline`.
+2. **TypeScript**: Interfaz `IconProps` para type safety.
+3. **Color Heredado**: Los iconos de la librería heredan automáticamente `fill="none" stroke="currentColor"`.
+4. **className**: Permite personalización con Tailwind CSS (ej: `size-5`, `text-primary`).
+5. **Accesibilidad**: Inclusión de `aria-hidden="true"` para iconos decorativos.
 
 ---
 

package/package.json

@@ -1,110 +1,111 @@
-{
-  "name": "siesa-ui-kit",
-  "private": false,
-  "version": "1.0.2",
-  "description": "SIESA UI Kit - Biblioteca de componentes React con Tailwind CSS, Storybook y agentes Claude AI",
-  "type": "module",
-  "main": "dist/siesa-ui-kit.cjs",
-  "module": "dist/siesa-ui-kit.mjs",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/siesa-ui-kit.mjs",
-      "require": "./dist/siesa-ui-kit.cjs"
-    },
-    "./styles.css": "./dist/style.css"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "bin": {
-    "siesa-ui-kit": "./bin/install.cjs"
-  },
-  "scripts": {
-    "postinstall": "node ./bin/install.cjs",
-    "prepublishOnly": "node ./bin/prepare-publish.cjs",
-    "postpublish": "node ./bin/restore-folders.cjs",
-    "dev": "vite",
-    "build": "vite build && tsc -p tsconfig.build.json",
-    "build:lib": "vite build && tsc -p tsconfig.build.json",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "keywords": [
-    "siesa",
-    "ui-kit",
-    "react",
-    "tailwindcss",
-    "storybook",
-    "components",
-    "design-system",
-    "claude-ai"
-  ],
-  "author": "Sistemas de Información Empresarial",
-  "license": "MIT",
-  "files": [
-    "dist/**/*",
-    "claude/**/*",
-    "storybook/**/*",
-    "docs/**/*",
-    "src/**/*",
-    "public/**/*",
-    "bin/**/*",
-    "README.md",
-    "tailwind.config.js",
-    "postcss.config.cjs"
-  ],
-  "engines": {
-    "node": ">=14.0.0"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": false
-    },
-    "react-dom": {
-      "optional": false
-    }
-  },
-  "dependencies": {
-    "fs-extra": "^11.3.2",
-    "path": "^0.12.7"
-  },
-  "devDependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "@chromatic-com/storybook": "^4.1.2",
-    "@eslint/js": "^9.36.0",
-    "@storybook/addon-a11y": "^10.0.5",
-    "@storybook/addon-docs": "^10.0.5",
-    "@storybook/addon-onboarding": "^10.0.5",
-    "@storybook/addon-vitest": "^10.0.5",
-    "@storybook/react-vite": "^10.0.5",
-    "@types/node": "^24.6.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "@vitest/browser-playwright": "^4.0.7",
-    "@vitest/coverage-v8": "^4.0.7",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.36.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.22",
-    "eslint-plugin-storybook": "^10.0.5",
-    "globals": "^16.4.0",
-    "playwright": "^1.56.1",
-    "postcss": "^8.5.6",
-    "storybook": "^10.0.5",
-    "tailwindcss": "^3.4.18",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.7",
-    "vitest": "^4.0.7"
-  }
-}
+{
+  "name": "siesa-ui-kit",
+  "private": false,
+  "version": "1.0.4",
+  "description": "SIESA UI Kit - Biblioteca de componentes React con Tailwind CSS, Storybook y agentes Claude AI",
+  "type": "module",
+  "main": "dist/siesa-ui-kit.cjs",
+  "module": "dist/siesa-ui-kit.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/siesa-ui-kit.mjs",
+      "require": "./dist/siesa-ui-kit.cjs"
+    },
+    "./styles.css": "./dist/style.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "bin": {
+    "siesa-ui-kit": "./bin/install.cjs"
+  },
+  "scripts": {
+    "postinstall": "node ./bin/install.cjs",
+    "prepublishOnly": "node ./bin/prepare-publish.cjs",
+    "postpublish": "node ./bin/restore-folders.cjs",
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "build:lib": "vite build && tsc -p tsconfig.build.json",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [
+    "siesa",
+    "ui-kit",
+    "react",
+    "tailwindcss",
+    "storybook",
+    "components",
+    "design-system",
+    "claude-ai"
+  ],
+  "author": "Sistemas de Información Empresarial",
+  "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "claude/**/*",
+    "storybook/**/*",
+    "docs/**/*",
+    "src/**/*",
+    "public/**/*",
+    "bin/**/*",
+    "README.md",
+    "tailwind.config.js",
+    "postcss.config.cjs"
+  ],
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "fs-extra": "^11.3.2",
+    "path": "^0.12.7"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.2",
+    "@eslint/js": "^9.36.0",
+    "@storybook/addon-a11y": "^10.0.5",
+    "@storybook/addon-docs": "^10.0.5",
+    "@storybook/addon-onboarding": "^10.0.5",
+    "@storybook/addon-vitest": "^10.0.5",
+    "@storybook/react-vite": "^10.0.5",
+    "@types/node": "^24.6.0",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser-playwright": "^4.0.7",
+    "@vitest/coverage-v8": "^4.0.7",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
+    "eslint-plugin-storybook": "^10.0.5",
+    "globals": "^16.4.0",
+    "playwright": "^1.56.1",
+    "postcss": "^8.5.6",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "storybook": "^10.0.5",
+    "tailwindcss": "^3.4.18",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.7",
+    "vitest": "^4.0.7"
+  }
+}