bth-ui 0.0.0-stage → 0.0.2

package/dist/esm/bth-alert_6.entry.js

@@ -0,0 +1,126 @@
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-svnzPQiH.js';
+
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+const bthAlertCss = () => `:host{display:block;--bth-alert-bg-color:transparent;--bth-alert-text-color:var(--bth-color-text, #222222);--bth-alert-border-color:var(--bth-color-border, #d1d5db);--bth-alert-accent-color:var(--bth-color-text, #222222)}:host([hidden]){display:none}:host([variant=default]){--bth-alert-bg-color:transparent;--bth-alert-text-color:var(--bth-color-text, #222222);--bth-alert-border-color:var(--bth-color-border, #d1d5db);--bth-alert-accent-color:var(--bth-color-text, #222222)}:host([variant=danger]){--bth-alert-bg-color:var(--bth-color-danger, #df4661);--bth-alert-text-color:var(--bth-color-danger-contrast, #ffffff);--bth-alert-border-color:var(--bth-color-danger, #df4661);--bth-alert-accent-color:var(--bth-color-danger, #df4661)}:host([variant=success]){--bth-alert-bg-color:var(--bth-color-success, #26d07c);--bth-alert-text-color:var(--bth-color-success-contrast, #ffffff);--bth-alert-border-color:var(--bth-color-success, #26d07c);--bth-alert-accent-color:var(--bth-color-success, #26d07c)}:host([variant=warning]){--bth-alert-bg-color:var(--bth-color-warning, #f7b500);--bth-alert-text-color:var(--bth-color-warning-contrast, #ffffff);--bth-alert-border-color:var(--bth-color-warning, #f7b500);--bth-alert-accent-color:var(--bth-color-warning, #f7b500)}:host([variant=info]){--bth-alert-bg-color:var(--bth-color-info, #009cde);--bth-alert-text-color:var(--bth-color-info-contrast, #ffffff);--bth-alert-border-color:var(--bth-color-info, #009cde);--bth-alert-accent-color:var(--bth-color-info, #009cde)}:host([variant]){--bth-alert-bg-color:color-mix(in srgb, var(--bth-alert-accent-color) var(--bth-tint-subtle, 10%), transparent);--bth-alert-text-color:var(--bth-color-text, #222222)}:host([variant=default]){--bth-alert-bg-color:transparent}.alert{display:grid;grid-template-columns:0 1fr auto;align-items:start;box-sizing:border-box;padding:var(--bth-spacing-4x, 16px);border:1px solid var(--bth-alert-border-color);border-radius:var(--bth-radius-md, 10px);background-color:var(--bth-alert-bg-color);color:var(--bth-alert-accent-color);font-family:var(--bth-font-family, "Geist", sans-serif)}.alert--has-icon{grid-template-columns:auto 1fr auto}::slotted([slot=icon]){grid-column:1;grid-row:1/span 2;display:flex;align-items:flex-start;margin-right:var(--bth-spacing-3x, 12px);color:currentColor}.alert-dismiss{grid-column:3;grid-row:1/span 2;display:inline-flex;align-items:center;justify-content:center;width:var(--bth-spacing-6x, 24px);height:var(--bth-spacing-6x, 24px);margin-left:var(--bth-spacing-3x, 12px);padding:0;border:0;border-radius:var(--bth-radius-xs, 6px);background-color:transparent;color:var(--bth-alert-text-color);cursor:pointer;transition:background-color 0.15s ease}.alert-dismiss:hover{background-color:color-mix(in srgb, var(--bth-alert-accent-color) var(--bth-tint-hover, 10%), transparent)}.alert-dismiss:active{background-color:color-mix(in srgb, var(--bth-alert-accent-color) var(--bth-tint-active, 18%), transparent)}.alert-dismiss:focus-visible{outline:2px solid var(--bth-alert-accent-color);outline-offset:2px}`;
+
+const BthAlert = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bthDismiss = createEvent(this, "bthDismiss");
+    }
+    get el() { return getElement(this); }
+    /** Variante de cor, de acordo com o tipo da mensagem. */
+    variant = 'default';
+    /** Exibe um botão que permite fechar o alerta. */
+    dismissible = false;
+    hasIcon = false;
+    dismissed = false;
+    /** Emitido quando o alerta é fechado pelo botão de fechar. */
+    bthDismiss;
+    componentWillLoad() {
+        this.updateHasIcon();
+    }
+    updateHasIcon = () => {
+        this.hasIcon = !!this.el.querySelector(':scope > [slot="icon"]');
+    };
+    handleDismiss = () => {
+        this.dismissed = true;
+        this.bthDismiss.emit();
+    };
+    render() {
+        return (h(Host, { key: '92b3322ec6586bea380d12b09b6fc9556db26195', "data-slot": 'alert', hidden: this.dismissed }, h("div", { key: 'c897cc5ef279ad1420dc6b73a99087a6900af1d2', class: clsx('alert', this.hasIcon && 'alert--has-icon'), role: 'alert', part: 'alert' }, h("slot", { key: 'e87cca48b662e26b04fc486c8f6a2c359de99a15', name: 'icon', onSlotchange: this.updateHasIcon }), h("slot", { key: 'dca9b4c45e911bb28632ae419c1b446f302d5333' }), this.dismissible && (h("button", { key: '6a044accbc86dcef7f54369e3f8fb7f6071ee918', class: 'alert-dismiss', type: 'button', "aria-label": 'Fechar', part: 'dismiss', onClick: this.handleDismiss }, h("svg", { key: 'e3472ad3898665a876270cf92681c05aac2989a2', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "aria-hidden": 'true' }, h("path", { key: '8a11a9e5a1cdb140894c2fc8af356c4318605fdb', d: 'M4 4l8 8M12 4l-8 8' })))))));
+    }
+};
+BthAlert.style = bthAlertCss();
+
+const bthAlertDescriptionCss = () => `:host{display:block;grid-column:2}.alert-description{margin:0;font-family:var(--bth-font-family, "Geist", sans-serif);font-size:var(--bth-font-size-md, 0.875rem);line-height:var(--bth-line-height-normal, 1.45);color:var(--bth-alert-text-color, var(--bth-color-text, #222222))}:host(:not(:first-child)) .alert-description{margin-top:var(--bth-spacing-1x, 4px)}`;
+
+const BthAlertDescription = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '27e9214204ef24ab0e97c1773127d2876430dad5', "data-slot": 'alert-description' }, h("div", { key: '4ccf13a8de497058066c392b141f3a20f113c2e4', class: 'alert-description', part: 'description' }, h("slot", { key: '3229468fe358daa760bd6383c4aff6ed26e6504f' }))));
+    }
+};
+BthAlertDescription.style = bthAlertDescriptionCss();
+
+const bthAlertTitleCss = () => `:host{display:block;grid-column:2}.alert-title{margin:0;font-family:var(--bth-font-family, "Geist", sans-serif);font-size:var(--bth-font-size-lg, 1rem);font-weight:var(--bth-font-weight-semibold, 600);line-height:var(--bth-spacing-6x, 24px);color:var(--bth-alert-accent-color, inherit)}`;
+
+const BthAlertTitle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '0c513e02bcbf0ed3e90f855da9e4d93d3b59818f', "data-slot": 'alert-title' }, h("h5", { key: 'df92e7dc279675b15e69c4267e32fdd6c417dc8f', class: 'alert-title', part: 'title' }, h("slot", { key: '79fe942452e0d649a5dbe1920aadc0b74fe08e40' }))));
+    }
+};
+BthAlertTitle.style = bthAlertTitleCss();
+
+const bthBadgeCss = () => `:host{display:inline-block;vertical-align:middle;font-size:var(--bth-badge-font-size);--bth-badge-bg-color:transparent;--bth-badge-text-color:var(--bth-color-text, #222222);--bth-badge-border-color:var(--bth-color-border, #d1d5db);--bth-badge-accent-color:var(--bth-color-text, #222222);--bth-badge-font-size:0.75em}:host([color=default]){--bth-badge-bg-color:transparent;--bth-badge-text-color:var(--bth-color-text, #222222);--bth-badge-border-color:var(--bth-color-border, #d1d5db);--bth-badge-accent-color:var(--bth-color-text, #222222)}:host([color=primary]){--bth-badge-bg-color:var(--bth-color-primary, #0861ff);--bth-badge-text-color:var(--bth-color-primary-contrast, #ffffff);--bth-badge-border-color:var(--bth-color-primary, #0861ff);--bth-badge-accent-color:var(--bth-color-primary, #0861ff)}:host([color=success]){--bth-badge-bg-color:var(--bth-color-success, #26d07c);--bth-badge-text-color:var(--bth-color-success-contrast, #ffffff);--bth-badge-border-color:var(--bth-color-success, #26d07c);--bth-badge-accent-color:var(--bth-color-success, #26d07c)}:host([color=danger]){--bth-badge-bg-color:var(--bth-color-danger, #df4661);--bth-badge-text-color:var(--bth-color-danger-contrast, #ffffff);--bth-badge-border-color:var(--bth-color-danger, #df4661);--bth-badge-accent-color:var(--bth-color-danger, #df4661)}:host([color=warning]){--bth-badge-bg-color:var(--bth-color-warning, #f7b500);--bth-badge-text-color:var(--bth-color-warning-contrast, #ffffff);--bth-badge-border-color:var(--bth-color-warning, #f7b500);--bth-badge-accent-color:var(--bth-color-warning, #f7b500)}:host([color=info]){--bth-badge-bg-color:var(--bth-color-info, #009cde);--bth-badge-text-color:var(--bth-color-info-contrast, #ffffff);--bth-badge-border-color:var(--bth-color-info, #009cde);--bth-badge-accent-color:var(--bth-color-info, #009cde)}:host([color=accent]){--bth-badge-bg-color:var(--bth-color-accent, #7740ff);--bth-badge-text-color:var(--bth-color-accent-contrast, #ffffff);--bth-badge-border-color:var(--bth-color-accent, #7740ff);--bth-badge-accent-color:var(--bth-color-accent, #7740ff)}:host([size=xs]){--bth-badge-font-size:0.55em}:host([size=sm]){--bth-badge-font-size:0.65em}:host([size=md]){--bth-badge-font-size:0.75em}:host([size=lg]){--bth-badge-font-size:0.875em}:host([size=xl]){--bth-badge-font-size:1em}.badge{display:inline-flex;align-items:center;justify-content:center;gap:0.35em;box-sizing:border-box;padding:0.3em 0.7em;border:1px solid var(--bth-badge-border-color);border-radius:0.5em;background-color:var(--bth-badge-bg-color);color:var(--bth-badge-text-color);font-family:var(--bth-font-family, "Geist", sans-serif);font-size:1em;font-weight:var(--bth-font-weight-medium, 500);line-height:var(--bth-line-height-tight, 1.2);letter-spacing:normal;white-space:nowrap}:host([variant=subtle]),:host([variant=outline]){--bth-badge-bg-color:transparent;--bth-badge-text-color:var(--bth-badge-accent-color)}:host([variant=subtle]){--bth-badge-bg-color:color-mix(in srgb, var(--bth-badge-accent-color) var(--bth-tint-subtle, 10%), transparent);--bth-badge-border-color:transparent}`;
+
+const BthBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Estilo visual: `solid` é preenchido, `subtle` tem um fundo suave e `outline` tem só a borda. */
+    variant = 'solid';
+    /** Cor do badge. */
+    color = 'default';
+    /** Tamanho do badge, proporcional ao tamanho da fonte do contexto onde ele está. */
+    size = 'md';
+    render() {
+        return (h(Host, { key: '845476bdaa75c6e1e90b97c14e9055b02a1fef60', "data-slot": 'badge' }, h("span", { key: 'f18a3a971b47b1a6c80131b71278a5c66cbe39b1', class: 'badge', part: 'badge' }, h("slot", { key: 'e296ee90d002f0a25d7bf7fb7aaa3ebfe4952d7f' }))));
+    }
+};
+BthBadge.style = bthBadgeCss();
+
+const bthButtonCss = () => `:host{display:inline-block;vertical-align:middle;--bth-button-bg-color:transparent;--bth-button-text-color:var(--bth-color-text, #222222);--bth-button-border-color:var(--bth-color-border, #d1d5db);--bth-button-accent-color:var(--bth-color-text, #222222);--bth-button-height:var(--bth-control-height-md, 40px);--bth-button-padding:0 var(--bth-spacing-5x, 20px);--bth-button-font-size:var(--bth-font-size-md, 0.875rem);--bth-button-radius:var(--bth-radius-md, 10px)}:host([color=default]){--bth-button-bg-color:transparent;--bth-button-text-color:var(--bth-color-text, #222222);--bth-button-border-color:var(--bth-color-border, #d1d5db);--bth-button-accent-color:var(--bth-color-text, #222222)}:host([color=primary]){--bth-button-bg-color:var(--bth-color-primary, #0861ff);--bth-button-text-color:var(--bth-color-primary-contrast, #ffffff);--bth-button-border-color:var(--bth-color-primary, #0861ff);--bth-button-accent-color:var(--bth-color-primary, #0861ff)}:host([color=success]){--bth-button-bg-color:var(--bth-color-success, #26d07c);--bth-button-text-color:var(--bth-color-success-contrast, #ffffff);--bth-button-border-color:var(--bth-color-success, #26d07c);--bth-button-accent-color:var(--bth-color-success, #26d07c)}:host([color=danger]){--bth-button-bg-color:var(--bth-color-danger, #df4661);--bth-button-text-color:var(--bth-color-danger-contrast, #ffffff);--bth-button-border-color:var(--bth-color-danger, #df4661);--bth-button-accent-color:var(--bth-color-danger, #df4661)}:host([color=warning]){--bth-button-bg-color:var(--bth-color-warning, #f7b500);--bth-button-text-color:var(--bth-color-warning-contrast, #ffffff);--bth-button-border-color:var(--bth-color-warning, #f7b500);--bth-button-accent-color:var(--bth-color-warning, #f7b500)}:host([color=info]){--bth-button-bg-color:var(--bth-color-info, #009cde);--bth-button-text-color:var(--bth-color-info-contrast, #ffffff);--bth-button-border-color:var(--bth-color-info, #009cde);--bth-button-accent-color:var(--bth-color-info, #009cde)}:host([size=xs]){--bth-button-height:var(--bth-control-height-xs, 24px);--bth-button-padding:0 var(--bth-spacing-2x, 8px);--bth-button-font-size:var(--bth-font-size-xs, 0.75rem);--bth-button-radius:var(--bth-radius-xs, 6px)}:host([size=sm]){--bth-button-height:var(--bth-control-height-sm, 32px);--bth-button-padding:0 var(--bth-spacing-3x, 12px);--bth-button-font-size:var(--bth-font-size-sm, 0.8125rem);--bth-button-radius:var(--bth-radius-sm, 8px)}:host([size=md]){--bth-button-height:var(--bth-control-height-md, 40px);--bth-button-padding:0 var(--bth-spacing-5x, 20px);--bth-button-font-size:var(--bth-font-size-md, 0.875rem);--bth-button-radius:var(--bth-radius-md, 10px)}:host([size=lg]){--bth-button-height:var(--bth-control-height-lg, 48px);--bth-button-padding:0 var(--bth-spacing-6x, 24px);--bth-button-font-size:var(--bth-font-size-lg, 1rem);--bth-button-radius:var(--bth-radius-lg, 12px)}:host([size=xl]){--bth-button-height:var(--bth-control-height-xl, 56px);--bth-button-padding:0 var(--bth-spacing-8x, 32px);--bth-button-font-size:var(--bth-font-size-xl, 1.125rem);--bth-button-radius:var(--bth-radius-xl, 14px)}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--bth-spacing-2x, 8px);box-sizing:border-box;width:100%;height:var(--bth-button-height);padding:var(--bth-button-padding);border:1px solid var(--bth-button-border-color);border-radius:var(--bth-button-radius);background-color:var(--bth-button-bg-color);color:var(--bth-button-text-color);font-family:var(--bth-font-family, "Geist", sans-serif);font-size:var(--bth-button-font-size);font-weight:var(--bth-font-weight-medium, 500);line-height:var(--bth-line-height-none, 1);white-space:nowrap;cursor:pointer;user-select:none;transition:background-color 0.15s ease, opacity 0.15s ease}.btn:hover{opacity:var(--bth-opacity-hover, 0.88)}.btn:active{opacity:var(--bth-opacity-active, 0.76)}.btn:focus-visible{outline:2px solid var(--bth-button-accent-color);outline-offset:2px}.btn:disabled{opacity:var(--bth-opacity-disabled, 0.5);cursor:not-allowed}:host([variant=outline]),:host([variant=ghost]){--bth-button-bg-color:transparent;--bth-button-text-color:var(--bth-button-accent-color)}:host([variant=ghost]){--bth-button-border-color:transparent}:host([variant=outline]) .btn:not(:disabled):hover,:host([variant=ghost]) .btn:not(:disabled):hover,:host([color=default]) .btn:not(:disabled):hover,:host(:not([color])) .btn:not(:disabled):hover{opacity:1;background-color:color-mix(in srgb, var(--bth-button-accent-color) var(--bth-tint-hover, 10%), transparent)}:host([variant=outline]) .btn:not(:disabled):active,:host([variant=ghost]) .btn:not(:disabled):active,:host([color=default]) .btn:not(:disabled):active,:host(:not([color])) .btn:not(:disabled):active{opacity:1;background-color:color-mix(in srgb, var(--bth-button-accent-color) var(--bth-tint-active, 18%), transparent)}`;
+
+const BthButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Estilo visual: `default` é preenchido, `outline` tem só a borda e `ghost` tem só o texto. */
+    variant = 'default';
+    /** Desabilita o botão e impede a interação. */
+    disabled = false;
+    /** Tamanho do botão. */
+    size = 'md';
+    /** Cor do botão. */
+    color = 'default';
+    /** Tipo do botão nativo. `submit` e `reset` atuam sobre o formulário pai. */
+    type = 'button';
+    // The native button lives in the shadow DOM, so it can't reach the form by itself
+    handleClick = () => {
+        const form = this.el.closest('form');
+        if (!form)
+            return;
+        if (this.type === 'submit')
+            form.requestSubmit();
+        if (this.type === 'reset')
+            form.reset();
+    };
+    render() {
+        return (h(Host, { key: 'e9e2ad1c81a5fdb14df799afbd9be974e2425363' }, h("button", { key: '6a470817658a809b1c7cc665e5de4e072d25b805', class: "btn", type: this.type, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '63bc7cf6129a9375dca03f8daa83ef04965b6602' }))));
+    }
+};
+BthButton.style = bthButtonCss();
+
+const bthIconCss = () => `:host{display:block}bth-icon{display:inline-block;width:var(--bth-icon-font-size, 24px);height:var(--bth-icon-font-size, 24px)}`;
+
+const BthIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Nome do ícone na fonte Material Symbols Outlined, como `info` ou `check_circle`. */
+    name;
+    render() {
+        return (h("span", { key: '2263cb4f70dea4e88997ffde9bf9fbeaf92dc50a', class: 'material-symbols-outlined' }, this.name));
+    }
+};
+BthIcon.style = bthIconCss();
+
+export { BthAlert as bth_alert, BthAlertDescription as bth_alert_description, BthAlertTitle as bth_alert_title, BthBadge as bth_badge, BthButton as bth_button, BthIcon as bth_icon };

package/dist/esm/bth-ui.js

@@ -0,0 +1,21 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-svnzPQiH.js';
+export { s as setNonce } from './index-svnzPQiH.js';
+import { g as globalScripts } from './app-globals-DQuL1Twl.js';
+
+/*
+ Stencil Client Patch Browser v4.45.2 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["bth-alert_6",[[769,"bth-alert",{"variant":[513],"dismissible":[4],"hasIcon":[32],"dismissed":[32]}],[257,"bth-alert-description"],[257,"bth-alert-title"],[769,"bth-badge",{"variant":[513],"color":[513],"size":[513]}],[769,"bth-button",{"variant":[513],"disabled":[516],"size":[513],"color":[513],"type":[1]}],[512,"bth-icon",{"name":[1]}]]]], options);
+});