siesa-ui-kit 1.0.3 → 1.0.4

package/package.json

@@ -1,103 +1,111 @@
-{
-  "name": "siesa-ui-kit",
-  "private": false,
-  "version": "1.0.3",
-  "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/**/*",
-    "bin/**/*",
-    "README.md"
-  ],
-  "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"
+  }
+}

package/postcss.config.cjs

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

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.css

@@ -0,0 +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;
+}

package/src/App.tsx

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

package/src/ButtonTest.tsx

@@ -0,0 +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>
+  );
+};