siesa-ui-kit 1.0.0 → 1.0.2

package/package.json

@@ -1,10 +1,23 @@
 {
   "name": "siesa-ui-kit",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "SIESA UI Kit - Biblioteca de componentes React con Tailwind CSS, Storybook y agentes Claude AI",
   "type": "module",
-  "main": "src/index.ts",
+  "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"
   },
@@ -13,7 +26,8 @@
     "prepublishOnly": "node ./bin/prepare-publish.cjs",
     "postpublish": "node ./bin/restore-folders.cjs",
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "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",
@@ -32,6 +46,7 @@
   "author": "Sistemas de Información Empresarial",
   "license": "MIT",
   "files": [
+    "dist/**/*",
     "claude/**/*",
     "storybook/**/*",
     "docs/**/*",
@@ -45,13 +60,25 @@
   "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",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "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",

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