bth-ui 0.0.0-stage → 0.0.2

package/dist/esm/index.js

@@ -0,0 +1 @@
+

package/dist/esm/loader.js

@@ -0,0 +1,11 @@
+import { b as bootstrapLazy } from './index-svnzPQiH.js';
+export { s as setNonce } from './index-svnzPQiH.js';
+import { g as globalScripts } from './app-globals-DQuL1Twl.js';
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  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);
+};
+
+export { defineCustomElements };

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

package/dist/types/components/bth-alert/bth-alert-description.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Descrição de um `bth-alert`.
+ *
+ * @usage-when Dentro de um `bth-alert`, para detalhar a mensagem ou orientar o próximo passo.
+ * @usage-avoid Fora de um `bth-alert`; para outros textos, use um parágrafo comum.
+ * @category feedback
+ * @related bth-alert, bth-alert-title
+ * @example
+ * ```html
+ * <bth-alert-description>Uma nova versão está disponível.</bth-alert-description>
+ * ```
+ * @status beta
+ *
+ * @slot - Texto da descrição.
+ * @part description - Elemento da descrição.
+ */
+export declare class BthAlertDescription {
+    render(): any;
+}

package/dist/types/components/bth-alert/bth-alert-title.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Título de um `bth-alert`.
+ *
+ * @usage-when Dentro de um `bth-alert`, para resumir a mensagem em poucas palavras.
+ * @usage-avoid Fora de um `bth-alert`; para outros títulos, use um elemento de título comum.
+ * @category feedback
+ * @related bth-alert, bth-alert-description
+ * @example
+ * ```html
+ * <bth-alert-title>Informação</bth-alert-title>
+ * ```
+ * @status beta
+ *
+ * @slot - Texto do título.
+ * @part title - Elemento do título.
+ */
+export declare class BthAlertTitle {
+    render(): any;
+}

package/dist/types/components/bth-alert/bth-alert.d.ts

@@ -0,0 +1,41 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { AlertVariant } from './bth-alert.types';
+/**
+ * Alerta para destacar uma mensagem importante dentro do conteúdo da página.
+ *
+ * @usage-when Para comunicar o resultado de uma ação, como sucesso ou erro ao salvar.
+ * @usage-when Para avisar sobre um estado ou uma condição que afeta o que a pessoa está fazendo.
+ * @usage-avoid Para mensagens temporárias que somem sozinhas; use uma notificação do tipo toast.
+ * @usage-avoid Para validação de um campo específico; mostre a mensagem junto ao campo.
+ * @category feedback
+ * @related bth-alert-title, bth-alert-description, bth-icon
+ * @example
+ * ```html
+ * <bth-alert variant="info" dismissible>
+ *   <bth-icon slot="icon" name="info"></bth-icon>
+ *   <bth-alert-title>Informação</bth-alert-title>
+ *   <bth-alert-description>Uma nova versão está disponível.</bth-alert-description>
+ * </bth-alert>
+ * ```
+ * @status beta
+ *
+ * @slot - Conteúdo do alerta, normalmente `bth-alert-title` e `bth-alert-description`.
+ * @slot icon - Ícone exibido à esquerda do conteúdo.
+ * @part alert - Contêiner do alerta.
+ * @part dismiss - Botão de fechar, presente quando `dismissible` está ativo.
+ */
+export declare class BthAlert {
+    el: HTMLElement;
+    /** Variante de cor, de acordo com o tipo da mensagem. */
+    variant: AlertVariant;
+    /** Exibe um botão que permite fechar o alerta. */
+    dismissible: boolean;
+    hasIcon: boolean;
+    dismissed: boolean;
+    /** Emitido quando o alerta é fechado pelo botão de fechar. */
+    bthDismiss: EventEmitter<void>;
+    componentWillLoad(): void;
+    private updateHasIcon;
+    private handleDismiss;
+    render(): any;
+}

package/dist/types/components/bth-alert/bth-alert.types.d.ts

@@ -0,0 +1 @@
+export type AlertVariant = 'default' | 'danger' | 'success' | 'warning' | 'info';

package/dist/types/components/bth-badge/bth-badge.d.ts

@@ -0,0 +1,30 @@
+import { BadgeColor, BadgeSize, BadgeVariant } from './bth-badge.types';
+/**
+ * Etiqueta curta para destacar um status, uma categoria ou uma contagem.
+ *
+ * @usage-when Para indicar o status de um item, como "Ativo", "Pendente" ou "Novo".
+ * @usage-when Para rotular ou categorizar um conteúdo, inclusive ao lado de um título.
+ * @usage-avoid Para ações clicáveis; use um `bth-button`.
+ * @usage-avoid Para mensagens longas ou que exigem atenção imediata; use um `bth-alert`.
+ * @category dados
+ * @related bth-button, bth-alert, bth-icon
+ * @example
+ * ```html
+ * <bth-badge variant="solid" color="primary">solid</bth-badge>
+ * <bth-badge variant="subtle" color="primary">subtle</bth-badge>
+ * <bth-badge variant="outline" color="primary">outline</bth-badge>
+ * ```
+ * @status beta
+ *
+ * @slot - Conteúdo do badge.
+ * @part badge - Elemento do badge.
+ */
+export declare class BthBadge {
+    /** Estilo visual: `solid` é preenchido, `subtle` tem um fundo suave e `outline` tem só a borda. */
+    variant: BadgeVariant;
+    /** Cor do badge. */
+    color: BadgeColor;
+    /** Tamanho do badge, proporcional ao tamanho da fonte do contexto onde ele está. */
+    size: BadgeSize;
+    render(): any;
+}

package/dist/types/components/bth-badge/bth-badge.types.d.ts

@@ -0,0 +1,3 @@
+export type BadgeVariant = 'solid' | 'subtle' | 'outline';
+export type BadgeColor = 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'accent' | 'default';
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/types/components/bth-button/bth-button.d.ts

@@ -0,0 +1,34 @@
+import { ButtonVariant, ButtonSize, ButtonColor } from './bth-button.types';
+/**
+ * Botão para disparar ações e enviar formulários.
+ *
+ * @usage-when Para disparar uma ação na página atual, como salvar, confirmar ou abrir um diálogo.
+ * @usage-when Para enviar ou limpar um formulário, com `type="submit"` ou `type="reset"`.
+ * @usage-avoid Para navegar entre páginas; use um link.
+ * @usage-avoid Com mais de um botão de destaque na mesma área; reserve a cor `primary` para a ação principal.
+ * @category formulário
+ * @related bth-icon, bth-alert
+ * @example
+ * ```html
+ * <bth-button color="primary">Salvar</bth-button>
+ * <bth-button variant="outline" color="danger" size="sm">Excluir</bth-button>
+ * ```
+ * @status beta
+ *
+ * @slot - Conteúdo do botão.
+ */
+export declare class BthButton {
+    el: HTMLElement;
+    /** Estilo visual: `default` é preenchido, `outline` tem só a borda e `ghost` tem só o texto. */
+    variant: ButtonVariant;
+    /** Desabilita o botão e impede a interação. */
+    disabled?: boolean;
+    /** Tamanho do botão. */
+    size: ButtonSize;
+    /** Cor do botão. */
+    color: ButtonColor;
+    /** Tipo do botão nativo. `submit` e `reset` atuam sobre o formulário pai. */
+    type: 'submit' | 'reset' | 'button';
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/bth-button/bth-button.types.d.ts

@@ -0,0 +1,3 @@
+export type ButtonVariant = 'outline' | 'ghost' | 'default';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonColor = 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'default';

package/dist/types/components/bth-icon/bth-icon.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Ícone da fonte Material Symbols Outlined.
+ *
+ * @usage-when Para reforçar visualmente o significado de um texto, como o título de um alerta ou o rótulo de um botão.
+ * @usage-when Para preencher o slot `icon` de outros componentes.
+ * @usage-avoid Como único conteúdo de um controle interativo sem um rótulo acessível.
+ * @usage-avoid Para ilustrações ou imagens decorativas grandes; use uma imagem.
+ * @category mídia
+ * @related bth-alert, bth-button
+ * @example
+ * ```html
+ * <bth-icon name="info"></bth-icon>
+ * ```
+ * @status beta
+ */
+export declare class BthIcon {
+    /** Nome do ícone na fonte Material Symbols Outlined, como `info` ou `check_circle`. */
+    name?: string;
+    render(): any;
+}