onpe-voto 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ButtonColor = "blue" | "skyblue" | "skyblue-light" | "yellow" | "light-skyblue" | "gray" | "gray-light" | "gray-extra-light" | "red" | "dark-gray" | "green" | "yellow-light" | "primary";
+type ButtonSize = "small" | "normal" | "large";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    color: ButtonColor;
+    title: string;
+    size?: ButtonSize;
+}
+declare function Button({ color, title, size, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Button, type ButtonProps };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ButtonColor = "blue" | "skyblue" | "skyblue-light" | "yellow" | "light-skyblue" | "gray" | "gray-light" | "gray-extra-light" | "red" | "dark-gray" | "green" | "yellow-light" | "primary";
+type ButtonSize = "small" | "normal" | "large";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    color: ButtonColor;
+    title: string;
+    size?: ButtonSize;
+}
+declare function Button({ color, title, size, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Button, type ButtonProps };

package/dist/index.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Button/Button.tsx
+var colorClasses = {
+  blue: "bg-onpe-blue",
+  skyblue: "bg-onpe-skyblue",
+  "skyblue-light": "bg-onpe-skyblue-light",
+  yellow: "bg-onpe-yellow",
+  "light-skyblue": "bg-onpe-light-skyblue",
+  gray: "bg-onpe-gray",
+  "gray-light": "bg-onpe-gray-light",
+  "gray-extra-light": "bg-onpe-gray-extra-light",
+  red: "bg-onpe-red",
+  "dark-gray": "bg-onpe-dark-gray",
+  green: "bg-onpe-green",
+  "yellow-light": "bg-onpe-yellow-light",
+  primary: "bg-onpe-blue"
+};
+var sizeClasses = {
+  small: "h-10 text-sm",
+  normal: "h-12 text-base",
+  large: "h-14 text-lg"
+};
+function Button({
+  color,
+  title,
+  size = "normal",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: [
+        "inline-flex items-center justify-center",
+        "min-w-[200px] border-none",
+        "text-white font-semibold cursor-pointer",
+        "transition-all duration-300 ease-in-out",
+        "disabled:cursor-default disabled:!bg-onpe-gray",
+        colorClasses[color],
+        sizeClasses[size],
+        className
+      ].filter(Boolean).join(" "),
+      ...props,
+      children: title
+    }
+  );
+}
+
+exports.Button = Button;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.tsx"],"names":["jsx"],"mappings":";;;;;AAwBA,IAAM,YAAA,GAA4C;AAAA,EAChD,IAAA,EAAM,cAAA;AAAA,EACN,OAAA,EAAS,iBAAA;AAAA,EACT,eAAA,EAAiB,uBAAA;AAAA,EACjB,MAAA,EAAQ,gBAAA;AAAA,EACR,eAAA,EAAiB,uBAAA;AAAA,EACjB,IAAA,EAAM,cAAA;AAAA,EACN,YAAA,EAAc,oBAAA;AAAA,EACd,kBAAA,EAAoB,0BAAA;AAAA,EACpB,GAAA,EAAK,aAAA;AAAA,EACL,WAAA,EAAa,mBAAA;AAAA,EACb,KAAA,EAAO,eAAA;AAAA,EACP,cAAA,EAAgB,sBAAA;AAAA,EAChB,OAAA,EAAS;AACX,CAAA;AAEA,IAAM,WAAA,GAA0C;AAAA,EAC9C,KAAA,EAAO,cAAA;AAAA,EACP,MAAA,EAAQ,gBAAA;AAAA,EACR,KAAA,EAAO;AACT,CAAA;AAEO,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,uBACEA,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW;AAAA,QACT,yCAAA;AAAA,QACA,2BAAA;AAAA,QACA,yCAAA;AAAA,QACA,yCAAA;AAAA,QACA,gDAAA;AAAA,QACA,aAAa,KAAK,CAAA;AAAA,QAClB,YAAY,IAAI,CAAA;AAAA,QAChB;AAAA,OACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"index.js","sourcesContent":["type ButtonColor =\n  | \"blue\"\n  | \"skyblue\"\n  | \"skyblue-light\"\n  | \"yellow\"\n  | \"light-skyblue\"\n  | \"gray\"\n  | \"gray-light\"\n  | \"gray-extra-light\"\n  | \"red\"\n  | \"dark-gray\"\n  | \"green\"\n  | \"yellow-light\"\n  | \"primary\";\n\ntype ButtonSize = \"small\" | \"normal\" | \"large\";\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  color: ButtonColor;\n  title: string;\n  size?: ButtonSize;\n}\n\nconst colorClasses: Record<ButtonColor, string> = {\n  blue: \"bg-onpe-blue\",\n  skyblue: \"bg-onpe-skyblue\",\n  \"skyblue-light\": \"bg-onpe-skyblue-light\",\n  yellow: \"bg-onpe-yellow\",\n  \"light-skyblue\": \"bg-onpe-light-skyblue\",\n  gray: \"bg-onpe-gray\",\n  \"gray-light\": \"bg-onpe-gray-light\",\n  \"gray-extra-light\": \"bg-onpe-gray-extra-light\",\n  red: \"bg-onpe-red\",\n  \"dark-gray\": \"bg-onpe-dark-gray\",\n  green: \"bg-onpe-green\",\n  \"yellow-light\": \"bg-onpe-yellow-light\",\n  primary: \"bg-onpe-blue\",\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  small: \"h-10 text-sm\",\n  normal: \"h-12 text-base\",\n  large: \"h-14 text-lg\",\n};\n\nexport function Button({\n  color,\n  title,\n  size = \"normal\",\n  className = \"\",\n  ...props\n}: ButtonProps) {\n  return (\n    <button\n      className={[\n        \"inline-flex items-center justify-center\",\n        \"min-w-[200px] border-none\",\n        \"text-white font-semibold cursor-pointer\",\n        \"transition-all duration-300 ease-in-out\",\n        \"disabled:cursor-default disabled:!bg-onpe-gray\",\n        colorClasses[color],\n        sizeClasses[size],\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {title}\n    </button>\n  );\n}\n\nexport default Button;\n"]}

package/dist/index.mjs

@@ -0,0 +1,52 @@
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Button/Button.tsx
+var colorClasses = {
+  blue: "bg-onpe-blue",
+  skyblue: "bg-onpe-skyblue",
+  "skyblue-light": "bg-onpe-skyblue-light",
+  yellow: "bg-onpe-yellow",
+  "light-skyblue": "bg-onpe-light-skyblue",
+  gray: "bg-onpe-gray",
+  "gray-light": "bg-onpe-gray-light",
+  "gray-extra-light": "bg-onpe-gray-extra-light",
+  red: "bg-onpe-red",
+  "dark-gray": "bg-onpe-dark-gray",
+  green: "bg-onpe-green",
+  "yellow-light": "bg-onpe-yellow-light",
+  primary: "bg-onpe-blue"
+};
+var sizeClasses = {
+  small: "h-10 text-sm",
+  normal: "h-12 text-base",
+  large: "h-14 text-lg"
+};
+function Button({
+  color,
+  title,
+  size = "normal",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: [
+        "inline-flex items-center justify-center",
+        "min-w-[200px] border-none",
+        "text-white font-semibold cursor-pointer",
+        "transition-all duration-300 ease-in-out",
+        "disabled:cursor-default disabled:!bg-onpe-gray",
+        colorClasses[color],
+        sizeClasses[size],
+        className
+      ].filter(Boolean).join(" "),
+      ...props,
+      children: title
+    }
+  );
+}
+
+export { Button };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.tsx"],"names":[],"mappings":";;;AAwBA,IAAM,YAAA,GAA4C;AAAA,EAChD,IAAA,EAAM,cAAA;AAAA,EACN,OAAA,EAAS,iBAAA;AAAA,EACT,eAAA,EAAiB,uBAAA;AAAA,EACjB,MAAA,EAAQ,gBAAA;AAAA,EACR,eAAA,EAAiB,uBAAA;AAAA,EACjB,IAAA,EAAM,cAAA;AAAA,EACN,YAAA,EAAc,oBAAA;AAAA,EACd,kBAAA,EAAoB,0BAAA;AAAA,EACpB,GAAA,EAAK,aAAA;AAAA,EACL,WAAA,EAAa,mBAAA;AAAA,EACb,KAAA,EAAO,eAAA;AAAA,EACP,cAAA,EAAgB,sBAAA;AAAA,EAChB,OAAA,EAAS;AACX,CAAA;AAEA,IAAM,WAAA,GAA0C;AAAA,EAC9C,KAAA,EAAO,cAAA;AAAA,EACP,MAAA,EAAQ,gBAAA;AAAA,EACR,KAAA,EAAO;AACT,CAAA;AAEO,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW;AAAA,QACT,yCAAA;AAAA,QACA,2BAAA;AAAA,QACA,yCAAA;AAAA,QACA,yCAAA;AAAA,QACA,gDAAA;AAAA,QACA,aAAa,KAAK,CAAA;AAAA,QAClB,YAAY,IAAI,CAAA;AAAA,QAChB;AAAA,OACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"index.mjs","sourcesContent":["type ButtonColor =\n  | \"blue\"\n  | \"skyblue\"\n  | \"skyblue-light\"\n  | \"yellow\"\n  | \"light-skyblue\"\n  | \"gray\"\n  | \"gray-light\"\n  | \"gray-extra-light\"\n  | \"red\"\n  | \"dark-gray\"\n  | \"green\"\n  | \"yellow-light\"\n  | \"primary\";\n\ntype ButtonSize = \"small\" | \"normal\" | \"large\";\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  color: ButtonColor;\n  title: string;\n  size?: ButtonSize;\n}\n\nconst colorClasses: Record<ButtonColor, string> = {\n  blue: \"bg-onpe-blue\",\n  skyblue: \"bg-onpe-skyblue\",\n  \"skyblue-light\": \"bg-onpe-skyblue-light\",\n  yellow: \"bg-onpe-yellow\",\n  \"light-skyblue\": \"bg-onpe-light-skyblue\",\n  gray: \"bg-onpe-gray\",\n  \"gray-light\": \"bg-onpe-gray-light\",\n  \"gray-extra-light\": \"bg-onpe-gray-extra-light\",\n  red: \"bg-onpe-red\",\n  \"dark-gray\": \"bg-onpe-dark-gray\",\n  green: \"bg-onpe-green\",\n  \"yellow-light\": \"bg-onpe-yellow-light\",\n  primary: \"bg-onpe-blue\",\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  small: \"h-10 text-sm\",\n  normal: \"h-12 text-base\",\n  large: \"h-14 text-lg\",\n};\n\nexport function Button({\n  color,\n  title,\n  size = \"normal\",\n  className = \"\",\n  ...props\n}: ButtonProps) {\n  return (\n    <button\n      className={[\n        \"inline-flex items-center justify-center\",\n        \"min-w-[200px] border-none\",\n        \"text-white font-semibold cursor-pointer\",\n        \"transition-all duration-300 ease-in-out\",\n        \"disabled:cursor-default disabled:!bg-onpe-gray\",\n        colorClasses[color],\n        sizeClasses[size],\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {title}\n    </button>\n  );\n}\n\nexport default Button;\n"]}

package/dist/styles.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-semibold:600;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-onpe-blue:#003770;--color-onpe-skyblue:#0073cf;--color-onpe-skyblue-light:#69b2e8;--color-onpe-yellow:#ffb81c;--color-onpe-light-skyblue:#aaeff6;--color-onpe-gray:#bcbcbc;--color-onpe-gray-light:#bdbdbd;--color-onpe-gray-extra-light:#f2f2f2;--color-onpe-red:#e3002b;--color-onpe-dark-gray:#4f4f4f;--color-onpe-green:#76bd43;--color-onpe-yellow-light:#fff1d2}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.flex{display:flex}.inline-flex{display:inline-flex}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.min-w-\[200px\]{min-width:200px}.cursor-pointer{cursor:pointer}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-4{gap:calc(var(--spacing) * 4)}.border-none{--tw-border-style:none;border-style:none}.bg-onpe-blue{background-color:var(--color-onpe-blue)}.bg-onpe-dark-gray{background-color:var(--color-onpe-dark-gray)}.bg-onpe-gray{background-color:var(--color-onpe-gray)}.bg-onpe-gray-extra-light{background-color:var(--color-onpe-gray-extra-light)}.bg-onpe-gray-light{background-color:var(--color-onpe-gray-light)}.bg-onpe-green{background-color:var(--color-onpe-green)}.bg-onpe-light-skyblue{background-color:var(--color-onpe-light-skyblue)}.bg-onpe-red{background-color:var(--color-onpe-red)}.bg-onpe-skyblue{background-color:var(--color-onpe-skyblue)}.bg-onpe-skyblue-light{background-color:var(--color-onpe-skyblue-light)}.bg-onpe-yellow{background-color:var(--color-onpe-yellow)}.bg-onpe-yellow-light{background-color:var(--color-onpe-yellow-light)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-white{color:var(--color-white)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.disabled\:cursor-default:disabled{cursor:default}.disabled\:\!bg-onpe-gray:disabled{background-color:var(--color-onpe-gray)!important}}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "onpe-voto",
+  "version": "0.1.0",
+  "description": "Librería de componentes UI para proyectos ONPE",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup && npm run build:css",
+    "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
+    "dev": "tsup --watch",
+    "dev:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "eslint src --ext .ts,.tsx"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.17",
+    "@storybook/addon-interactions": "^8.6.17",
+    "@storybook/react": "^8.6.17",
+    "@storybook/react-vite": "^8.6.17",
+    "@storybook/test": "^8.6.17",
+    "@tailwindcss/cli": "^4.2.0",
+    "@tailwindcss/vite": "^4.2.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "storybook": "^8.6.17",
+    "tailwindcss": "^4.2.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1"
+  }
+}