siesa-ui-kit 1.0.4 → 1.0.5

package/package.json

@@ -1,111 +1,83 @@
-{
-  "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"
-  }
-}
+{
+  "name": "siesa-ui-kit",
+  "private": false,
+  "version": "1.0.5",
+  "description": "SIESA UI Kit - Biblioteca de componentes React con Tailwind CSS, Storybook y agentes Claude AI",
+  "type": "module",
+  "main": "src/index.ts",
+  "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": "tsc -b && vite build",
+    "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": [
+    "claude/**/*",
+    "storybook/**/*",
+    "docs/**/*",
+    "src/**/*",
+    "public/**/*",
+    "bin/**/*",
+    "README.md",
+    "tailwind.config.js",
+    "postcss.config.cjs"
+  ],
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "dependencies": {
+    "fs-extra": "^11.3.2",
+    "path": "^0.12.7",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "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",
+    "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"
+  }
+}

package/postcss.config.cjs

@@ -1,6 +1,6 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/App.css

@@ -1,42 +1,42 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/src/App.tsx

@@ -1,8 +1,8 @@
-import './App.css'
-import { ButtonTest } from './ButtonTest'
-
-function App() {
-  return <ButtonTest />
-}
-
-export default App
+import './App.css'
+import { ButtonTest } from './ButtonTest'
+
+function App() {
+  return <ButtonTest />
+}
+
+export default App

package/src/ButtonTest.tsx

@@ -1,147 +1,147 @@
-import React from 'react';
-import { Button, PlusIcon, ChevronDownIcon, ArrowRightIcon } from './components/Button';
-
-/**
- * Página de prueba para el componente Button
- */
-export const ButtonTest: React.FC = () => {
-  return (
-    <div className="p-8 space-y-8 bg-bg-primary min-h-screen">
-      <h1 className="text-heading-lg text-content-primary mb-8">
-        Siesa UI Kit - Button Component
-      </h1>
-
-      {/* Sección: Tipos de Botón */}
-      <section className="space-y-4">
-        <h2 className="text-2xl font-bold text-content-primary">Tipos de Botón</h2>
-        <div className="flex gap-4 items-center flex-wrap">
-          <Button type="default">Default Button</Button>
-          <Button type="outline">Outline Button</Button>
-          <Button type="plain">Plain Button</Button>
-        </div>
-      </section>
-
-      {/* Sección: Tamaños */}
-      <section className="space-y-4">
-        <h2 className="text-2xl font-bold text-content-primary">Tamaños</h2>
-        <div className="flex gap-4 items-center flex-wrap">
-          <Button type="default" size="xs">Extra Small</Button>
-          <Button type="default" size="sm">Small</Button>
-          <Button type="default" size="base">Base</Button>
-          <Button type="default" size="l">Large</Button>
-          <Button type="default" size="xl">Extra Large</Button>
-        </div>
-      </section>
-
-      {/* Sección: Con Iconos */}
-      <section className="space-y-4">
-        <h2 className="text-2xl font-bold text-content-primary">Con Iconos</h2>
-        <div className="flex gap-4 items-center flex-wrap">
-          <Button type="default" leftIcon={<PlusIcon />}>
-            Con Icono Izquierdo
-          </Button>
-          <Button type="outline" rightIcon={<ChevronDownIcon />}>
-            Con Icono Derecho
-          </Button>
-          <Button
-            type="default"
-            leftIcon={<PlusIcon />}
-            rightIcon={<ArrowRightIcon />}
-          >
-            Con Ambos Iconos
-          </Button>
-        </div>
-      </section>
-
-      {/* Sección: Solo Iconos */}
-      <section className="space-y-4">
-        <h2 className="text-2xl font-bold text-content-primary">Solo Iconos</h2>
-        <div className="flex gap-4 items-center flex-wrap">
-          <Button type="default" size="xs" iconOnly leftIcon={<PlusIcon />} />
-          <Button type="default" size="sm" iconOnly leftIcon={<PlusIcon />} />
-          <Button type="default" size="base" iconOnly leftIcon={<PlusIcon />} />
-          <Button type="default" size="l" iconOnly leftIcon={<PlusIcon />} />
-          <Button type="default" size="xl" iconOnly leftIcon={<PlusIcon />} />
-        </div>
-      </section>
-
-      {/* Sección: Outline + Solo Iconos */}
-      <section className="space-y-4">
-        <h2 className="text-2xl font-bold text-content-primary">
-          Outline - Solo Iconos
-        </h2>
-        <div className="flex gap-4 items-center flex-wrap">
-          <Button type="outline" size="xs" iconOnly leftIcon={<PlusIcon />} />
-          <Button type="outline" size="sm" iconOnly leftIcon={<PlusIcon />} />
-          <Button type="outline" size="base" iconOnly leftIcon={<PlusIcon />} />
-          <Button type="outline" size="l" iconOnly leftIcon={<PlusIcon />} />
-          <Button type="outline" size="xl" iconOnly leftIcon={<PlusIcon />} />
-        </div>
-      </section>
-
-      {/* Sección: Plain + Solo Iconos */}
-      <section className="space-y-4">
-        <h2 className="text-2xl font-bold text-content-primary">
-          Plain - Solo Iconos
-        </h2>
-        <div className="flex gap-4 items-center flex-wrap">
-          <Button type="plain" size="xs" iconOnly leftIcon={<PlusIcon />} />
-          <Button type="plain" size="sm" iconOnly leftIcon={<PlusIcon />} />
-          <Button type="plain" size="base" iconOnly leftIcon={<PlusIcon />} />
-          <Button type="plain" size="l" iconOnly leftIcon={<PlusIcon />} />
-          <Button type="plain" size="xl" iconOnly leftIcon={<PlusIcon />} />
-        </div>
-      </section>
-
-      {/* Sección: Estados Deshabilitados */}
-      <section className="space-y-4">
-        <h2 className="text-2xl font-bold text-content-primary">
-          Estados Deshabilitados
-        </h2>
-        <div className="flex gap-4 items-center flex-wrap">
-          <Button type="default" disabled>
-            Default Disabled
-          </Button>
-          <Button type="outline" disabled>
-            Outline Disabled
-          </Button>
-          <Button type="plain" disabled>
-            Plain Disabled
-          </Button>
-        </div>
-      </section>
-
-      {/* Sección: Full Width */}
-      <section className="space-y-4">
-        <h2 className="text-2xl font-bold text-content-primary">Full Width</h2>
-        <div className="space-y-2 max-w-md">
-          <Button type="default" fullWidth>
-            Full Width Default
-          </Button>
-          <Button type="outline" fullWidth>
-            Full Width Outline
-          </Button>
-        </div>
-      </section>
-
-      {/* Sección: Comparación con Figma */}
-      <section className="space-y-4">
-        <h2 className="text-2xl font-bold text-content-primary">
-          Comparación Pixel-Perfect con Figma
-        </h2>
-        <div className="bg-white p-6 rounded-lg border border-border-primary">
-          <p className="text-sm text-content-primary mb-4">
-            Estos botones replican exactamente las especificaciones de Figma:
-          </p>
-          <div className="flex gap-4 items-center flex-wrap">
-            <Button type="default" size="xs" leftIcon={<PlusIcon />} rightIcon={<ChevronDownIcon />}>
-              Button text
-            </Button>
-            <Button type="outline" size="xs" iconOnly leftIcon={<PlusIcon />} />
-            <Button type="plain" size="xs" iconOnly leftIcon={<PlusIcon />} />
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-};
+import React from 'react';
+import { Button, PlusIcon, ChevronDownIcon, ArrowRightIcon } from './components/Button';
+
+/**
+ * Página de prueba para el componente Button
+ */
+export const ButtonTest: React.FC = () => {
+  return (
+    <div className="p-8 space-y-8 bg-bg-primary min-h-screen">
+      <h1 className="text-heading-lg text-content-primary mb-8">
+        Siesa UI Kit - Button Component
+      </h1>
+
+      {/* Sección: Tipos de Botón */}
+      <section className="space-y-4">
+        <h2 className="text-2xl font-bold text-content-primary">Tipos de Botón</h2>
+        <div className="flex gap-4 items-center flex-wrap">
+          <Button type="default">Default Button</Button>
+          <Button type="outline">Outline Button</Button>
+          <Button type="plain">Plain Button</Button>
+        </div>
+      </section>
+
+      {/* Sección: Tamaños */}
+      <section className="space-y-4">
+        <h2 className="text-2xl font-bold text-content-primary">Tamaños</h2>
+        <div className="flex gap-4 items-center flex-wrap">
+          <Button type="default" size="xs">Extra Small</Button>
+          <Button type="default" size="sm">Small</Button>
+          <Button type="default" size="base">Base</Button>
+          <Button type="default" size="l">Large</Button>
+          <Button type="default" size="xl">Extra Large</Button>
+        </div>
+      </section>
+
+      {/* Sección: Con Iconos */}
+      <section className="space-y-4">
+        <h2 className="text-2xl font-bold text-content-primary">Con Iconos</h2>
+        <div className="flex gap-4 items-center flex-wrap">
+          <Button type="default" leftIcon={<PlusIcon />}>
+            Con Icono Izquierdo
+          </Button>
+          <Button type="outline" rightIcon={<ChevronDownIcon />}>
+            Con Icono Derecho
+          </Button>
+          <Button
+            type="default"
+            leftIcon={<PlusIcon />}
+            rightIcon={<ArrowRightIcon />}
+          >
+            Con Ambos Iconos
+          </Button>
+        </div>
+      </section>
+
+      {/* Sección: Solo Iconos */}
+      <section className="space-y-4">
+        <h2 className="text-2xl font-bold text-content-primary">Solo Iconos</h2>
+        <div className="flex gap-4 items-center flex-wrap">
+          <Button type="default" size="xs" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="default" size="sm" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="default" size="base" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="default" size="l" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="default" size="xl" iconOnly leftIcon={<PlusIcon />} />
+        </div>
+      </section>
+
+      {/* Sección: Outline + Solo Iconos */}
+      <section className="space-y-4">
+        <h2 className="text-2xl font-bold text-content-primary">
+          Outline - Solo Iconos
+        </h2>
+        <div className="flex gap-4 items-center flex-wrap">
+          <Button type="outline" size="xs" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="outline" size="sm" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="outline" size="base" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="outline" size="l" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="outline" size="xl" iconOnly leftIcon={<PlusIcon />} />
+        </div>
+      </section>
+
+      {/* Sección: Plain + Solo Iconos */}
+      <section className="space-y-4">
+        <h2 className="text-2xl font-bold text-content-primary">
+          Plain - Solo Iconos
+        </h2>
+        <div className="flex gap-4 items-center flex-wrap">
+          <Button type="plain" size="xs" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="plain" size="sm" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="plain" size="base" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="plain" size="l" iconOnly leftIcon={<PlusIcon />} />
+          <Button type="plain" size="xl" iconOnly leftIcon={<PlusIcon />} />
+        </div>
+      </section>
+
+      {/* Sección: Estados Deshabilitados */}
+      <section className="space-y-4">
+        <h2 className="text-2xl font-bold text-content-primary">
+          Estados Deshabilitados
+        </h2>
+        <div className="flex gap-4 items-center flex-wrap">
+          <Button type="default" disabled>
+            Default Disabled
+          </Button>
+          <Button type="outline" disabled>
+            Outline Disabled
+          </Button>
+          <Button type="plain" disabled>
+            Plain Disabled
+          </Button>
+        </div>
+      </section>
+
+      {/* Sección: Full Width */}
+      <section className="space-y-4">
+        <h2 className="text-2xl font-bold text-content-primary">Full Width</h2>
+        <div className="space-y-2 max-w-md">
+          <Button type="default" fullWidth>
+            Full Width Default
+          </Button>
+          <Button type="outline" fullWidth>
+            Full Width Outline
+          </Button>
+        </div>
+      </section>
+
+      {/* Sección: Comparación con Figma */}
+      <section className="space-y-4">
+        <h2 className="text-2xl font-bold text-content-primary">
+          Comparación Pixel-Perfect con Figma
+        </h2>
+        <div className="bg-white p-6 rounded-lg border border-border-primary">
+          <p className="text-sm text-content-primary mb-4">
+            Estos botones replican exactamente las especificaciones de Figma:
+          </p>
+          <div className="flex gap-4 items-center flex-wrap">
+            <Button type="default" size="xs" leftIcon={<PlusIcon />} rightIcon={<ChevronDownIcon />}>
+              Button text
+            </Button>
+            <Button type="outline" size="xs" iconOnly leftIcon={<PlusIcon />} />
+            <Button type="plain" size="xs" iconOnly leftIcon={<PlusIcon />} />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};