labx-components 0.1.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+
+exports.format = format;

package/dist/cjs/labx-button_3.cjs.entry.js

@@ -0,0 +1,104 @@
+'use strict';
+
+var index = require('./index-Dw9X5FBB.js');
+
+const labxButtonCss = () => `:host{display:inline-block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:2px solid transparent;border-radius:8px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}.btn:focus-visible{outline:3px solid var(--color-primary-light);outline-offset:2px}.btn--primary{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-bg-surface)}.btn--primary:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn--secondary{background-color:transparent;border-color:var(--color-primary);color:var(--color-primary)}.btn--secondary:hover:not(:disabled){background-color:var(--color-primary-light)}.btn--danger{background-color:var(--color-danger);border-color:var(--color-danger);color:var(--color-bg-surface)}.btn--danger:hover:not(:disabled){background-color:var(--color-danger-light);border-color:var(--color-danger);color:var(--color-danger)}.btn:disabled{background-color:var(--color-bg-subtle);border-color:var(--color-border);color:var(--color-disabled);cursor:not-allowed}`;
+
+const LabxButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.labxClick = index.createEvent(this, "labxClick");
+    }
+    /** Texto del botón */
+    label = 'Button';
+    /** Estilo visual: primary | secondary | danger */
+    variant = 'primary';
+    /** Deshabilita el botón */
+    disabled = false;
+    /** Tipo HTML del botón */
+    type = 'button';
+    /** Se emite cuando el botón es clickeado */
+    labxClick;
+    handleClick() {
+        if (!this.disabled) {
+            this.labxClick.emit();
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '76d607e0f7612ef141b30d884166181402e4e6a0' }, index.h("button", { key: 'cd3204b93d8791529784d04ccf80a566221aab74', type: this.type, disabled: this.disabled, class: `btn btn--${this.variant}`, onClick: () => this.handleClick() }, this.label)));
+    }
+};
+LabxButton.style = labxButtonCss();
+
+const labxIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;color:inherit}.icon{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:inherit;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.icon--filled{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20}`;
+
+const LabxIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Nombre del ícono de Material Symbols (ej: "email", "search", "close") */
+    name;
+    /** Tamaño en px */
+    size = 20;
+    /** Filled (true) u Outlined (false) */
+    filled = false;
+    render() {
+        return (index.h(index.Host, { key: '30e38c191019432490921f13c23fc91f96952e90', style: { fontSize: `${this.size}px` } }, index.h("span", { key: '9ff64363cdb1fcb0f0eec24e13a2fc623506972f', class: { 'icon': true, 'icon--filled': this.filled } }, this.name)));
+    }
+};
+LabxIcon.style = labxIconCss();
+
+const labxInputCss = () => `:host{display:block}.input-wrapper{position:relative;display:flex;align-items:center;background-color:var(--color-bg-surface);border:2px solid var(--color-border);border-radius:8px;transition:border-color 0.2s ease}.input-wrapper--focused{border-color:var(--color-primary)}.input-wrapper--error{border-color:var(--color-danger)}.input-wrapper--disabled{background-color:var(--color-bg-subtle);cursor:not-allowed}.input{width:100%;padding:20px 14px 6px 14px;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;color:var(--color-text-default);cursor:inherit}.input:disabled{color:var(--color-disabled);cursor:not-allowed}.input-wrapper--icon-left .input{padding-left:40px}.input-wrapper--icon-right .input{padding-right:40px}.input-label{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--color-text-muted);pointer-events:none;transition:top 0.2s ease, font-size 0.2s ease, color 0.2s ease}.input-label--floating{top:7px;transform:none;font-size:11px;color:var(--color-primary)}.input-wrapper--error .input-label--floating{color:var(--color-danger)}.input-wrapper--icon-left .input-label{left:40px}.input-icon{position:absolute;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--color-text-muted);pointer-events:none}.input-icon--left{left:12px}.input-icon--right{right:12px}.input-error{display:block;margin-top:4px;padding-left:4px;font-size:12px;color:var(--color-danger)}`;
+
+const LabxInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.labxChange = index.createEvent(this, "labxChange");
+    }
+    /** Texto del label flotante */
+    label;
+    /** Valor del input */
+    value = '';
+    /** Type HTML del input */
+    type = 'text';
+    /** Deshabilita el input */
+    disabled = false;
+    /** Mensaje de error */
+    error;
+    /** El input tiene foco actualmente */
+    focused = false;
+    /** true si el slot icon-left tiene contenido */
+    hasIconLeft = false;
+    /** true si el slot icon-right tiene contenido */
+    hasIconRight = false;
+    /** Se emite cuando el valor cambia */
+    labxChange;
+    handleInput(e) {
+        this.value = e.target.value;
+        this.labxChange.emit(this.value);
+    }
+    onSlotChange(side, e) {
+        const slot = e.target;
+        const hasContent = slot.assignedNodes().length > 0;
+        if (side === 'left')
+            this.hasIconLeft = hasContent;
+        else
+            this.hasIconRight = hasContent;
+    }
+    render() {
+        const isFloating = this.focused || this.value?.length > 0;
+        return (index.h(index.Host, { key: '357eb1c2b3c395801c8d7249c3e649f5ddd33bda' }, index.h("div", { key: '1bc8515582f79c560196c7631cef3de31344234e', class: {
+                'input-wrapper': true,
+                'input-wrapper--focused': this.focused,
+                'input-wrapper--error': !!this.error,
+                'input-wrapper--disabled': this.disabled,
+                'input-wrapper--icon-left': this.hasIconLeft,
+                'input-wrapper--icon-right': this.hasIconRight,
+            } }, index.h("span", { key: 'd3da76f5d96c55179870583faf5931c6008188ec', class: "input-icon input-icon--left" }, index.h("slot", { key: 'eeea94735ef34585bd88eef2e6d753f58733aeb7', name: "icon-left", onSlotchange: (e) => this.onSlotChange('left', e) })), index.h("input", { key: '2792b2634677fe2ebe272248bd75fbd0e993080a', class: "input", type: this.type, value: this.value, disabled: this.disabled, onInput: (e) => this.handleInput(e), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), this.label && (index.h("label", { key: '0d1ae4db30645f2a4a1927f0495b053620d5a3d5', class: { 'input-label': true, 'input-label--floating': isFloating } }, this.label)), index.h("span", { key: '4e25bc9f95998d3d94f36306a353859fa67fc5f3', class: "input-icon input-icon--right" }, index.h("slot", { key: '2492d04ec309a636128fd7da1729875e2c0c93d5', name: "icon-right", onSlotchange: (e) => this.onSlotChange('right', e) }))), this.error && index.h("span", { key: 'bfde298513f8d55f4b36b51afee6565d312f52d3', class: "input-error" }, this.error)));
+    }
+};
+LabxInput.style = labxInputCss();
+
+exports.labx_button = LabxButton;
+exports.labx_icon = LabxIcon;
+exports.labx_input = LabxInput;

package/dist/cjs/labx-components.cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-Dw9X5FBB.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('labx-components.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await index.globalScripts();
+  return index.bootstrapLazy([["labx-button_3.cjs",[[513,"labx-button",{"label":[1],"variant":[1],"disabled":[4],"type":[1]}],[513,"labx-icon",{"name":[1],"size":[2],"filled":[4]}],[769,"labx-input",{"label":[1],"value":[1537],"type":[1],"disabled":[4],"error":[1],"focused":[32],"hasIconLeft":[32],"hasIconRight":[32]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var index = require('./index-Dw9X5FBB.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await index.globalScripts();
+  return index.bootstrapLazy([["labx-button_3.cjs",[[513,"labx-button",{"label":[1],"variant":[1],"disabled":[4],"type":[1]}],[513,"labx-icon",{"name":[1],"size":[2],"filled":[4]}],[769,"labx-input",{"label":[1],"value":[1537],"type":[1],"disabled":[4],"error":[1],"focused":[32],"hasIconLeft":[32],"hasIconRight":[32]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,15 @@
+{
+  "entries": [
+    "components/labx-button/labx-button.js",
+    "components/labx-icon/labx-icon.js",
+    "components/labx-input/labx-input.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.3",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/labx-button/labx-button.css

@@ -0,0 +1,74 @@
+:host {
+  display: inline-block;
+}
+
+/* ─── Base ───────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  padding: 10px 20px;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.btn:focus-visible {
+  outline: 3px solid var(--color-primary-light);
+  outline-offset: 2px;
+}
+
+/* ─── Variant: Primary ───────────────────────────────── */
+.btn--primary {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-bg-surface);
+}
+
+.btn--primary:hover:not(:disabled) {
+  background-color: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
+}
+
+/* ─── Variant: Secondary ─────────────────────────────── */
+.btn--secondary {
+  background-color: transparent;
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+.btn--secondary:hover:not(:disabled) {
+  background-color: var(--color-primary-light);
+}
+
+/* ─── Variant: Danger ────────────────────────────────── */
+.btn--danger {
+  background-color: var(--color-danger);
+  border-color: var(--color-danger);
+  color: var(--color-bg-surface);
+}
+
+.btn--danger:hover:not(:disabled) {
+  background-color: var(--color-danger-light);
+  border-color: var(--color-danger);
+  color: var(--color-danger);
+}
+
+/* ─── Disabled ───────────────────────────────────────── */
+.btn:disabled {
+  background-color: var(--color-bg-subtle);
+  border-color: var(--color-border);
+  color: var(--color-disabled);
+  cursor: not-allowed;
+}

package/dist/collection/components/labx-button/labx-button.js

@@ -0,0 +1,135 @@
+import { Host, h } from "@stencil/core";
+export class LabxButton {
+    /** Texto del botón */
+    label = 'Button';
+    /** Estilo visual: primary | secondary | danger */
+    variant = 'primary';
+    /** Deshabilita el botón */
+    disabled = false;
+    /** Tipo HTML del botón */
+    type = 'button';
+    /** Se emite cuando el botón es clickeado */
+    labxClick;
+    handleClick() {
+        if (!this.disabled) {
+            this.labxClick.emit();
+        }
+    }
+    render() {
+        return (h(Host, { key: '76d607e0f7612ef141b30d884166181402e4e6a0' }, h("button", { key: 'cd3204b93d8791529784d04ccf80a566221aab74', type: this.type, disabled: this.disabled, class: `btn btn--${this.variant}`, onClick: () => this.handleClick() }, this.label)));
+    }
+    static get is() { return "labx-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["labx-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["labx-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto del bot\u00F3n"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Button'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'danger'",
+                    "resolved": "\"danger\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estilo visual: primary | secondary | danger"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilita el bot\u00F3n"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo HTML del bot\u00F3n"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "labxClick",
+                "name": "labxClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Se emite cuando el bot\u00F3n es clickeado"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/labx-icon/labx-icon.css

@@ -0,0 +1,26 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.icon {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: inherit;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+
+  /* Sin relleno por defecto */
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+}
+
+.icon--filled {
+  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+}

package/dist/collection/components/labx-icon/labx-icon.js

@@ -0,0 +1,87 @@
+import { Host, h } from "@stencil/core";
+export class LabxIcon {
+    /** Nombre del ícono de Material Symbols (ej: "email", "search", "close") */
+    name;
+    /** Tamaño en px */
+    size = 20;
+    /** Filled (true) u Outlined (false) */
+    filled = false;
+    render() {
+        return (h(Host, { key: '30e38c191019432490921f13c23fc91f96952e90', style: { fontSize: `${this.size}px` } }, h("span", { key: '9ff64363cdb1fcb0f0eec24e13a2fc623506972f', class: { 'icon': true, 'icon--filled': this.filled } }, this.name)));
+    }
+    static get is() { return "labx-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["labx-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["labx-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre del \u00EDcono de Material Symbols (ej: \"email\", \"search\", \"close\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o en px"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "20"
+            },
+            "filled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Filled (true) u Outlined (false)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/labx-input/labx-input.css

@@ -0,0 +1,117 @@
+:host {
+  display: block;
+}
+
+/* ─── Wrapper ────────────────────────────────────────── */
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  background-color: var(--color-bg-surface);
+  border: 2px solid var(--color-border);
+  border-radius: 8px;
+
+  transition: border-color 0.2s ease;
+}
+
+.input-wrapper--focused {
+  border-color: var(--color-primary);
+}
+
+.input-wrapper--error {
+  border-color: var(--color-danger);
+}
+
+.input-wrapper--disabled {
+  background-color: var(--color-bg-subtle);
+  cursor: not-allowed;
+}
+
+/* ─── Input ──────────────────────────────────────────── */
+.input {
+  width: 100%;
+  padding: 20px 14px 6px 14px;
+  border: none;
+  outline: none;
+  background: transparent;
+
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--color-text-default);
+
+  cursor: inherit;
+}
+
+.input:disabled {
+  color: var(--color-disabled);
+  cursor: not-allowed;
+}
+
+/* Ajuste de padding cuando hay íconos */
+.input-wrapper--icon-left .input {
+  padding-left: 40px;
+}
+
+.input-wrapper--icon-right .input {
+  padding-right: 40px;
+}
+
+/* ─── Label flotante ─────────────────────────────────── */
+.input-label {
+  position: absolute;
+  left: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  font-size: 14px;
+  color: var(--color-text-muted);
+  pointer-events: none;
+
+  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
+}
+
+.input-label--floating {
+  top: 7px;
+  transform: none;
+  font-size: 11px;
+  color: var(--color-primary);
+}
+
+.input-wrapper--error .input-label--floating {
+  color: var(--color-danger);
+}
+
+/* Ajuste del label cuando hay ícono izquierdo */
+.input-wrapper--icon-left .input-label {
+  left: 40px;
+}
+
+/* ─── Íconos ─────────────────────────────────────────── */
+.input-icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--color-text-muted);
+  pointer-events: none;
+}
+
+.input-icon--left {
+  left: 12px;
+}
+
+.input-icon--right {
+  right: 12px;
+}
+
+/* ─── Error ──────────────────────────────────────────── */
+.input-error {
+  display: block;
+  margin-top: 4px;
+  padding-left: 4px;
+  font-size: 12px;
+  color: var(--color-danger);
+}