@re-code/ui-components 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,3 @@
+'use strict';
+
+//! Autogenerated index

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var index = require('./index-CwGon_W1.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await index.globalScripts();
+  return index.bootstrapLazy([["ui-label.cjs",[[257,"ui-label",{"label":[1],"variant":[1],"color":[1],"weight":[1],"italic":[4]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,51 @@
+'use strict';
+
+var index = require('./index-CwGon_W1.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.41.2 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  if (index.BUILD.isDev && !index.BUILD.isTesting) {
+    index.consoleDevInfo("Running in development mode.");
+  }
+  if (index.BUILD.cloneNodeFix) {
+    patchCloneNodeFix(index.H.prototype);
+  }
+  const scriptElm = index.BUILD.scriptDataOpts ? index.win.document && Array.from(index.win.document.querySelectorAll("script")).find(
+    (s) => new RegExp(`/${index.NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) || s.getAttribute("data-stencil-namespace") === index.NAMESPACE
+  ) : null;
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('ui-components.cjs.js', document.baseURI).href));
+  const opts = index.BUILD.scriptDataOpts ? (scriptElm || {})["data-opts"] || {} : {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+var patchCloneNodeFix = (HTMLElementPrototype) => {
+  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+  HTMLElementPrototype.cloneNode = function(deep) {
+    if (this.nodeName === "TEMPLATE") {
+      return nativeCloneNodeFn.call(this, deep);
+    }
+    const clonedNode = nativeCloneNodeFn.call(this, false);
+    const srcChildNodes = this.childNodes;
+    if (deep) {
+      for (let i = 0; i < srcChildNodes.length; i++) {
+        if (srcChildNodes[i].nodeType !== 2) {
+          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+        }
+      }
+    }
+    return clonedNode;
+  };
+};
+
+patchBrowser().then(async (options) => {
+  await index.globalScripts();
+  return index.bootstrapLazy([["ui-label.cjs",[[257,"ui-label",{"label":[1],"variant":[1],"color":[1],"weight":[1],"italic":[4]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/cjs/ui-label.cjs.entry.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var index = require('./index-CwGon_W1.js');
+
+const uiLabelCss = () => `:host{display:inline-block;font-family:"Roboto", system-ui, -apple-system, sans-serif;color:#1D1B20;transition:all 0.2s ease-in-out}:host(.ui-label--display-large){font-size:57px;line-height:64px;font-weight:400;letter-spacing:-0.25px}:host(.ui-label--display-medium){font-size:45px;line-height:52px;font-weight:400;letter-spacing:0px}:host(.ui-label--display-small){font-size:36px;line-height:44px;font-weight:400;letter-spacing:0px}:host(.ui-label--headline-large){font-size:32px;line-height:40px;font-weight:400;letter-spacing:0px}:host(.ui-label--headline-medium){font-size:28px;line-height:36px;font-weight:400;letter-spacing:0px}:host(.ui-label--headline-small){font-size:24px;line-height:32px;font-weight:400;letter-spacing:0px}:host(.ui-label--title-large){font-size:22px;line-height:28px;font-weight:400;letter-spacing:0px}:host(.ui-label--title-medium){font-size:16px;line-height:24px;font-weight:500;letter-spacing:0.15px}:host(.ui-label--title-small){font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}:host(.ui-label--body-large){font-size:16px;line-height:24px;font-weight:400;letter-spacing:0.5px}:host(.ui-label--body-medium){font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.25px}:host(.ui-label--body-small){font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.4px}:host(.ui-label--label-large){font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}:host(.ui-label--label-medium){font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.5px}:host(.ui-label--label-small){font-size:11px;line-height:16px;font-weight:500;letter-spacing:0.5px}:host(.ui-label--color-primary){color:#6750A4}:host(.ui-label--color-on-primary){color:#FFFFFF}:host(.ui-label--color-primary-container){color:#EADDFF}:host(.ui-label--color-on-primary-container){color:#21005D}:host(.ui-label--color-secondary){color:#625B71}:host(.ui-label--color-on-secondary){color:#FFFFFF}:host(.ui-label--color-secondary-container){color:#E8DEF8}:host(.ui-label--color-on-secondary-container){color:#1D192B}:host(.ui-label--color-tertiary){color:#7D5260}:host(.ui-label--color-on-tertiary){color:#FFFFFF}:host(.ui-label--color-tertiary-container){color:#FFD8E4}:host(.ui-label--color-on-tertiary-container){color:#31111D}:host(.ui-label--color-error){color:#B3261E}:host(.ui-label--color-on-error){color:#FFFFFF}:host(.ui-label--color-surface){color:#FEF7FF}:host(.ui-label--color-on-surface){color:#1D1B20}:host(.ui-label--color-on-surface-variant){color:#49454F}:host(.ui-label--color-outline){color:#79747E}:host(.ui-label--weight-normal){font-weight:400}:host(.ui-label--weight-medium){font-weight:500}:host(.ui-label--weight-bold){font-weight:700}:host(.ui-label--italic){font-style:italic !important}`;
+
+const UiLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.variant = 'body-medium';
+        this.color = 'on-surface';
+        this.italic = false;
+    }
+    render() {
+        const classMap = {
+            [`ui-label--${this.variant}`]: true,
+            [`ui-label--color-${this.color}`]: true,
+            [`ui-label--weight-${this.weight}`]: !!this.weight,
+            'ui-label--italic': this.italic
+        };
+        return (index.h(index.Host, { key: 'aa90dba620bb302ef1f8d2d9452eab3cb1c993db', class: classMap }, index.h("span", { key: '09e6a2daad525a3946a4d926799e866970a70fc3' }, this.label, " ", index.h("slot", { key: '972f325c8826a2bc3f7d1a36bf5adb4335285904' }))));
+    }
+};
+UiLabel.style = uiLabelCss();
+
+exports.ui_label = UiLabel;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/ui-label/ui-label.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.41.2",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/ui-label/ui-label.css

@@ -0,0 +1,199 @@
+:host {
+  display: inline-block;
+  font-family: "Roboto", system-ui, -apple-system, sans-serif;
+  color: #1D1B20;
+  transition: all 0.2s ease-in-out;
+}
+
+:host(.ui-label--display-large) {
+  font-size: 57px;
+  line-height: 64px;
+  font-weight: 400;
+  letter-spacing: -0.25px;
+}
+
+:host(.ui-label--display-medium) {
+  font-size: 45px;
+  line-height: 52px;
+  font-weight: 400;
+  letter-spacing: 0px;
+}
+
+:host(.ui-label--display-small) {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 400;
+  letter-spacing: 0px;
+}
+
+:host(.ui-label--headline-large) {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 400;
+  letter-spacing: 0px;
+}
+
+:host(.ui-label--headline-medium) {
+  font-size: 28px;
+  line-height: 36px;
+  font-weight: 400;
+  letter-spacing: 0px;
+}
+
+:host(.ui-label--headline-small) {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 400;
+  letter-spacing: 0px;
+}
+
+:host(.ui-label--title-large) {
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 400;
+  letter-spacing: 0px;
+}
+
+:host(.ui-label--title-medium) {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  letter-spacing: 0.15px;
+}
+
+:host(.ui-label--title-small) {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  letter-spacing: 0.1px;
+}
+
+:host(.ui-label--body-large) {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  letter-spacing: 0.5px;
+}
+
+:host(.ui-label--body-medium) {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  letter-spacing: 0.25px;
+}
+
+:host(.ui-label--body-small) {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.4px;
+}
+
+:host(.ui-label--label-large) {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  letter-spacing: 0.1px;
+}
+
+:host(.ui-label--label-medium) {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+:host(.ui-label--label-small) {
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+:host(.ui-label--color-primary) {
+  color: #6750A4;
+}
+
+:host(.ui-label--color-on-primary) {
+  color: #FFFFFF;
+}
+
+:host(.ui-label--color-primary-container) {
+  color: #EADDFF;
+}
+
+:host(.ui-label--color-on-primary-container) {
+  color: #21005D;
+}
+
+:host(.ui-label--color-secondary) {
+  color: #625B71;
+}
+
+:host(.ui-label--color-on-secondary) {
+  color: #FFFFFF;
+}
+
+:host(.ui-label--color-secondary-container) {
+  color: #E8DEF8;
+}
+
+:host(.ui-label--color-on-secondary-container) {
+  color: #1D192B;
+}
+
+:host(.ui-label--color-tertiary) {
+  color: #7D5260;
+}
+
+:host(.ui-label--color-on-tertiary) {
+  color: #FFFFFF;
+}
+
+:host(.ui-label--color-tertiary-container) {
+  color: #FFD8E4;
+}
+
+:host(.ui-label--color-on-tertiary-container) {
+  color: #31111D;
+}
+
+:host(.ui-label--color-error) {
+  color: #B3261E;
+}
+
+:host(.ui-label--color-on-error) {
+  color: #FFFFFF;
+}
+
+:host(.ui-label--color-surface) {
+  color: #FEF7FF;
+}
+
+:host(.ui-label--color-on-surface) {
+  color: #1D1B20;
+}
+
+:host(.ui-label--color-on-surface-variant) {
+  color: #49454F;
+}
+
+:host(.ui-label--color-outline) {
+  color: #79747E;
+}
+
+:host(.ui-label--weight-normal) {
+  font-weight: 400;
+}
+
+:host(.ui-label--weight-medium) {
+  font-weight: 500;
+}
+
+:host(.ui-label--weight-bold) {
+  font-weight: 700;
+}
+
+:host(.ui-label--italic) {
+  font-style: italic !important;
+}

package/dist/collection/components/ui-label/ui-label.js

@@ -0,0 +1,152 @@
+import { Host, h } from "@stencil/core";
+export class UiLabel {
+    constructor() {
+        this.variant = 'body-medium';
+        this.color = 'on-surface';
+        this.italic = false;
+    }
+    render() {
+        const classMap = {
+            [`ui-label--${this.variant}`]: true,
+            [`ui-label--color-${this.color}`]: true,
+            [`ui-label--weight-${this.weight}`]: !!this.weight,
+            'ui-label--italic': this.italic
+        };
+        return (h(Host, { key: 'aa90dba620bb302ef1f8d2d9452eab3cb1c993db', class: classMap }, h("span", { key: '09e6a2daad525a3946a4d926799e866970a70fc3' }, this.label, " ", h("slot", { key: '972f325c8826a2bc3f7d1a36bf5adb4335285904' }))));
+    }
+    static get is() { return "ui-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-label.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-label.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TypographyVariant",
+                    "resolved": "\"body-large\" | \"body-medium\" | \"body-small\" | \"display-large\" | \"display-medium\" | \"display-small\" | \"headline-large\" | \"headline-medium\" | \"headline-small\" | \"label-large\" | \"label-medium\" | \"label-small\" | \"title-large\" | \"title-medium\" | \"title-small\"",
+                    "references": {
+                        "TypographyVariant": {
+                            "location": "import",
+                            "path": "../../global/types",
+                            "id": "src/global/types.ts::TypographyVariant",
+                            "referenceLocation": "TypographyVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'body-medium'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorVariant",
+                    "resolved": "\"error\" | \"on-error\" | \"on-primary\" | \"on-primary-container\" | \"on-secondary\" | \"on-secondary-container\" | \"on-surface\" | \"on-surface-variant\" | \"on-tertiary\" | \"on-tertiary-container\" | \"outline\" | \"primary\" | \"primary-container\" | \"secondary\" | \"secondary-container\" | \"surface\" | \"tertiary\" | \"tertiary-container\"",
+                    "references": {
+                        "ColorVariant": {
+                            "location": "import",
+                            "path": "../../global/types",
+                            "id": "src/global/types.ts::ColorVariant",
+                            "referenceLocation": "ColorVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'on-surface'"
+            },
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FontWeight",
+                    "resolved": "\"bold\" | \"medium\" | \"normal\" | undefined",
+                    "references": {
+                        "FontWeight": {
+                            "location": "import",
+                            "path": "../../global/types",
+                            "id": "src/global/types.ts::FontWeight",
+                            "referenceLocation": "FontWeight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "weight"
+            },
+            "italic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "italic",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/ui-label/ui-label.stories.js

@@ -0,0 +1,67 @@
+import { html } from "lit";
+const meta = {
+    title: 'Components/UiLabel',
+    component: 'ui-label',
+    // Esta etiqueta habilita la generación automática de la página Docs
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The text content of the label.',
+        },
+        variant: {
+            control: 'select',
+            options: [
+                'display-large', 'display-medium', 'display-small',
+                'headline-large', 'headline-medium', 'headline-small',
+                'title-large', 'title-medium', 'title-small',
+                'body-large', 'body-medium', 'body-small',
+                'label-large', 'label-medium', 'label-small'
+            ],
+            description: 'Material Design 3 Typography Role.',
+        },
+        color: {
+            control: 'select',
+            options: [
+                'primary', 'on-primary', 'primary-container', 'on-primary-container',
+                'secondary', 'on-secondary', 'secondary-container', 'on-secondary-container',
+                'tertiary', 'on-tertiary', 'tertiary-container', 'on-tertiary-container',
+                'error', 'on-error',
+                'surface', 'on-surface', 'on-surface-variant', 'outline'
+            ],
+            description: 'Material Design 3 Color Role.',
+        },
+        weight: {
+            control: 'radio',
+            options: ['normal', 'medium', 'bold'],
+            description: 'Override typography weight (MD3 Standard: 400, 500, 700).',
+        },
+        italic: {
+            control: 'boolean',
+            description: 'Applies italic style to the text.',
+        },
+    },
+    args: {
+        label: 'Label Text',
+        variant: 'body-medium',
+        color: 'on-surface',
+        italic: false,
+    },
+};
+export default meta;
+// Template base
+const Template = (args) => html `
+  <ui-label
+    label="${args.label}"
+    variant="${args.variant}"
+    color="${args.color}"
+    weight="${args.weight}"
+    ?italic="${args.italic}"
+  >
+  </ui-label>
+`;
+// Historia Playground
+export const Playground = {
+    render: Template,
+    args: {},
+};

package/dist/collection/global/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/dist/components/index.js

@@ -0,0 +1,6 @@
+import { g as globalScripts } from './index2.js';
+export { a as getAssetPath, r as render, s as setAssetPath, b as setNonce, c as setPlatformOptions } from './index2.js';
+
+//! Autogenerated index
+
+globalScripts();