@andespindola/ui-core 0.1.0

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

@@ -0,0 +1,64 @@
+'use strict';
+
+var index = require('./index-Cb1tfi_9.js');
+var floatingUi_dom = require('./floating-ui.dom-BPemvNRD.js');
+
+const uiTooltipCss = () => `:host{display:inline-block}.trigger{display:inline-flex}.tooltip{position:fixed;top:0;left:0;z-index:50;width:max-content;max-width:18rem;padding:0.375rem 0.75rem;font-family:var(--ui-font-sans);font-size:0.75rem;line-height:1.4;color:var(--ui-foreground);border:1px solid var(--ui-border);background:var(--ui-panel-strong);box-shadow:var(--ui-shadow-lg);backdrop-filter:blur(22px);border-radius:var(--ui-radius-sm);pointer-events:none;opacity:0;transform:scale(0.96);transition:opacity var(--ui-duration) var(--ui-ease),     transform var(--ui-duration) var(--ui-ease)}.tooltip.is-visible{opacity:1;transform:scale(1)}`;
+
+const UiTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Texto exibido no balão flutuante. */
+        this.content = "";
+        /** Posição preferida do balão relativa ao gatilho. */
+        this.placement = "top";
+        /** Atraso (ms) antes de exibir o balão. */
+        this.openDelay = 200;
+        this.visible = false;
+        this.onEnter = () => {
+            if (this.timer)
+                clearTimeout(this.timer);
+            this.timer = setTimeout(() => {
+                this.visible = true;
+                requestAnimationFrame(() => this.start());
+            }, this.openDelay);
+        };
+        this.onLeave = () => {
+            if (this.timer)
+                clearTimeout(this.timer);
+            this.visible = false;
+            this.stop();
+        };
+    }
+    disconnectedCallback() {
+        this.stop();
+        if (this.timer)
+            clearTimeout(this.timer);
+    }
+    start() {
+        if (!this.triggerEl || !this.floatingEl)
+            return;
+        this.stop();
+        this.cleanup = floatingUi_dom.autoUpdate(this.triggerEl, this.floatingEl, () => {
+            if (!this.triggerEl || !this.floatingEl)
+                return;
+            floatingUi_dom.computePosition(this.triggerEl, this.floatingEl, {
+                placement: this.placement,
+                middleware: [floatingUi_dom.offset(8), floatingUi_dom.flip(), floatingUi_dom.shift({ padding: 8 })],
+            }).then(({ x, y }) => {
+                Object.assign(this.floatingEl.style, { left: `${x}px`, top: `${y}px` });
+            });
+        });
+    }
+    stop() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    render() {
+        return (index.h(index.Host, { key: '49f898bc54da31cf9f6b5189577bae89f6681bf8', onMouseEnter: this.onEnter, onMouseLeave: this.onLeave, onFocusin: this.onEnter, onFocusout: this.onLeave }, index.h("span", { key: '394744f0b34ec0c534b417ba520f2b805b582802', class: "trigger", ref: (el) => (this.triggerEl = el) }, index.h("slot", { key: '7afd6d807490d8af4fffeb38e69de825f7d3c138' })), index.h("div", { key: '3d12cffd7fd903ec6178961bf40476b063ee1563', class: { tooltip: true, "is-visible": this.visible }, role: "tooltip", ref: (el) => (this.floatingEl = el) }, this.content)));
+    }
+    get host() { return index.getElement(this); }
+};
+UiTooltip.style = uiTooltipCss();
+
+exports.ui_tooltip = UiTooltip;

package/dist/cjs/uikit.cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-Cb1tfi_9.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.43.5 | 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('uikit.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([["ui-loading-overlay.cjs",[[1,"ui-loading-overlay",{"visible":[4],"label":[1],"spinnerSize":[1,"spinner-size"]}]]],["ui-toaster.cjs",[[1,"ui-toaster",{"items":[32],"toast":[64]}]]],["ui-accordion.cjs",[[257,"ui-accordion"]]],["ui-accordion-item.cjs",[[257,"ui-accordion-item",{"heading":[1],"open":[1540]}]]],["ui-avatar.cjs",[[1,"ui-avatar",{"src":[1],"alt":[1],"fallback":[1]}]]],["ui-badge.cjs",[[257,"ui-badge",{"variant":[1]}]]],["ui-button.cjs",[[257,"ui-button",{"variant":[1],"size":[1],"disabled":[4],"loading":[4],"type":[1]}]]],["ui-card.cjs",[[257,"ui-card"]]],["ui-checkbox.cjs",[[1,"ui-checkbox",{"checked":[1540],"disabled":[4],"name":[1],"value":[1]}]]],["ui-dialog.cjs",[[257,"ui-dialog",{"open":[1540],"show":[64],"close":[64]},null,{"open":[{"onOpenChange":0}]}]]],["ui-drawer.cjs",[[257,"ui-drawer",{"open":[1540],"side":[513],"show":[64],"close":[64]},null,{"open":[{"onOpenChange":0}]}]]],["ui-dropdown-item.cjs",[[257,"ui-dropdown-item",{"disabled":[516]}]]],["ui-dropdown-menu.cjs",[[257,"ui-dropdown-menu",{"open":[1540],"placement":[1],"show":[64],"close":[64]},[[0,"uiDropdownClose","onItemClose"]],{"open":[{"onOpenChange":0}]}]]],["ui-field.cjs",[[257,"ui-field",{"label":[1],"description":[1],"error":[1],"required":[4],"fieldId":[1,"field-id"]}]]],["ui-input.cjs",[[1,"ui-input",{"value":[1025],"placeholder":[1],"type":[1],"disabled":[4],"invalid":[4],"name":[1]}]]],["ui-label.cjs",[[257,"ui-label"]]],["ui-popover.cjs",[[257,"ui-popover",{"open":[1540],"placement":[1],"show":[64],"close":[64]},null,{"open":[{"onOpenChange":0}]}]]],["ui-progress.cjs",[[1,"ui-progress",{"value":[2],"max":[2],"indeterminate":[4]}]]],["ui-radio-group.cjs",[[1,"ui-radio-group",{"value":[1025],"name":[1],"options":[16],"disabled":[4]}]]],["ui-reveal.cjs",[[257,"ui-reveal",{"delay":[2],"visible":[32]}]]],["ui-scroll-progress.cjs",[[1,"ui-scroll-progress",{"progress":[32]}]]],["ui-section.cjs",[[257,"ui-section",{"eyebrow":[1],"heading":[1],"description":[1]}]]],["ui-select.cjs",[[1,"ui-select",{"value":[1025],"disabled":[4],"name":[1],"options":[16],"placeholder":[1]}]]],["ui-separator.cjs",[[1,"ui-separator",{"orientation":[513]}]]],["ui-skeleton.cjs",[[1,"ui-skeleton"]]],["ui-slider.cjs",[[1,"ui-slider",{"value":[1026],"min":[2],"max":[2],"step":[2],"disabled":[4]}]]],["ui-switch.cjs",[[1,"ui-switch",{"checked":[1540],"disabled":[4]}]]],["ui-tabs.cjs",[[257,"ui-tabs",{"value":[1537],"items":[16]}]]],["ui-textarea.cjs",[[1,"ui-textarea",{"value":[1025],"placeholder":[1],"disabled":[4],"invalid":[4],"name":[1],"rows":[2]}]]],["ui-theme-toggle.cjs",[[1,"ui-theme-toggle",{"isDark":[32]}]]],["ui-tooltip.cjs",[[257,"ui-tooltip",{"content":[1],"placement":[1],"openDelay":[2,"open-delay"],"visible":[32]}]]],["ui-spinner.cjs",[[1,"ui-spinner",{"size":[1]}]]],["ui-toast.cjs",[[1,"ui-toast",{"open":[1540],"variant":[1],"heading":[1],"description":[1],"duration":[2],"show":[64],"close":[64]},null,{"open":[{"onOpenChange":0}]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,45 @@
+{
+  "entries": [
+    "components/ui-badge/ui-badge.js",
+    "components/ui-button/ui-button.js",
+    "components/ui-spinner/ui-spinner.js",
+    "components/ui-radio-group/ui-radio-group.js",
+    "components/ui-select/ui-select.js",
+    "components/ui-separator/ui-separator.js",
+    "components/ui-tabs/ui-tabs.js",
+    "components/ui-toast/ui-toast.js",
+    "components/ui-toaster/ui-toaster.js",
+    "components/ui-accordion/ui-accordion.js",
+    "components/ui-accordion-item/ui-accordion-item.js",
+    "components/ui-avatar/ui-avatar.js",
+    "components/ui-card/ui-card.js",
+    "components/ui-checkbox/ui-checkbox.js",
+    "components/ui-dialog/ui-dialog.js",
+    "components/ui-drawer/ui-drawer.js",
+    "components/ui-dropdown-item/ui-dropdown-item.js",
+    "components/ui-dropdown-menu/ui-dropdown-menu.js",
+    "components/ui-field/ui-field.js",
+    "components/ui-input/ui-input.js",
+    "components/ui-label/ui-label.js",
+    "components/ui-loading-overlay/ui-loading-overlay.js",
+    "components/ui-popover/ui-popover.js",
+    "components/ui-progress/ui-progress.js",
+    "components/ui-reveal/ui-reveal.js",
+    "components/ui-scroll-progress/ui-scroll-progress.js",
+    "components/ui-section/ui-section.js",
+    "components/ui-skeleton/ui-skeleton.js",
+    "components/ui-slider/ui-slider.js",
+    "components/ui-switch/ui-switch.js",
+    "components/ui-textarea/ui-textarea.js",
+    "components/ui-theme-toggle/ui-theme-toggle.js",
+    "components/ui-tooltip/ui-tooltip.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.5",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  font-family: var(--ui-font-sans);
+}

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

@@ -0,0 +1,18 @@
+import { h, Host } from "@stencil/core";
+export class UiAccordion {
+    render() {
+        return (h(Host, { key: '0d6a0faf16d8cacc925818349b38f8acaa186fdb' }, h("slot", { key: '060f07d2ed0104666101f2984affc84eb33239d0' })));
+    }
+    static get is() { return "ui-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-accordion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-accordion.css"]
+        };
+    }
+}

package/dist/collection/components/ui-accordion-item/ui-accordion-item.css

@@ -0,0 +1,42 @@
+:host {
+  display: block;
+  font-family: var(--ui-font-sans);
+  border-bottom: 1px solid var(--ui-border);
+}
+
+summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 0;
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--ui-foreground);
+  list-style: none;
+  outline: none;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+summary:focus-visible {
+  box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px var(--ui-ring);
+  border-radius: var(--ui-radius-sm);
+}
+
+.chevron {
+  flex: none;
+  color: var(--ui-text-muted);
+  transition: transform var(--ui-duration) var(--ui-ease);
+}
+
+details[open] .chevron {
+  transform: rotate(180deg);
+}
+
+.content {
+  padding-bottom: 1rem;
+  color: var(--ui-text-muted);
+}

package/dist/collection/components/ui-accordion-item/ui-accordion-item.js

@@ -0,0 +1,91 @@
+import { h, Host } from "@stencil/core";
+export class UiAccordionItem {
+    constructor() {
+        /** Título exibido no cabeçalho. */
+        this.heading = "";
+        /** Estado aberto/fechado. */
+        this.open = false;
+        this.onToggle = (event) => {
+            const details = event.currentTarget;
+            this.open = details.open;
+            this.uiToggle.emit(this.open);
+        };
+    }
+    render() {
+        return (h(Host, { key: 'c1c8a792a0e8ab52c4750af995c98ffda3b47cf0' }, h("details", { key: '3eaa096ad9a9b0f22fe0b2a34b254deb4e6b7df5', open: this.open, onToggle: this.onToggle }, h("summary", { key: 'eb86d25aa684879440b87ce1113d282fb07e81ce' }, h("span", { key: 'c70e1823bec0a32432cf74438c6d62a7b145e067', class: "heading" }, this.heading), h("svg", { key: '65f9e9179ec29d10115a6938be5fb2481bdcbcfc', class: "chevron", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { key: 'def877261275e0eb0f830651fe35d524497686b9', points: "6 9 12 15 18 9" }))), h("div", { key: '91c0120a4a7c02cbdb97bded4c77e6eeea63ce83', class: "content" }, h("slot", { key: '590ed083fb0a3969bdadb2376532b4ceb9bcc597' })))));
+    }
+    static get is() { return "ui-accordion-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-accordion-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-accordion-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "T\u00EDtulo exibido no cabe\u00E7alho."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "\"\""
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado aberto/fechado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiToggle",
+                "name": "uiToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o item \u00E9 aberto ou fechado."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,30 @@
+:host {
+  display: inline-block;
+  /* Tamanho customizável via --ui-avatar-size (default 2.5rem). */
+}
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ui-avatar-size, 2.5rem);
+  height: var(--ui-avatar-size, 2.5rem);
+  border-radius: var(--ui-radius-full);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-chip);
+  overflow: hidden;
+  font-family: var(--ui-font-sans);
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.fallback {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--ui-text-muted);
+  line-height: 1;
+}

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

@@ -0,0 +1,84 @@
+import { h, Host } from "@stencil/core";
+export class UiAvatar {
+    constructor() {
+        /** Texto alternativo da imagem. */
+        this.alt = "";
+    }
+    render() {
+        return (h(Host, { key: '5c1258b170c4bb32cca3177574292a2b7661ebf2' }, h("span", { key: '35991cb32d1958e8c5b11ccba182e9d43531aadb', class: "avatar" }, this.src ? (h("img", { class: "image", src: this.src, alt: this.alt })) : (h("span", { class: "fallback" }, this.fallback)))));
+    }
+    static get is() { return "ui-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-avatar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL da imagem do avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto alternativo da imagem."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "\"\""
+            },
+            "fallback": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto exibido quando n\u00E3o h\u00E1 imagem (ex.: iniciais)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fallback"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,46 @@
+:host {
+  display: inline-flex;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius-full);
+  padding: 0.25rem 0.75rem;
+  font-family: var(--ui-font-sans);
+  font-size: 0.75rem;
+  font-weight: 500;
+  backdrop-filter: blur(22px);
+}
+
+.variant-default {
+  background: var(--ui-chip);
+  border-color: var(--ui-border);
+  color: var(--ui-text-soft);
+}
+.variant-solid {
+  background: var(--ui-accent);
+  color: var(--ui-accent-contrast);
+}
+.variant-outline {
+  border-color: var(--ui-border-strong);
+  color: var(--ui-foreground);
+}
+.variant-success {
+  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
+  color: var(--ui-success);
+}
+.variant-warning {
+  background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
+  color: var(--ui-warning);
+}
+.variant-danger {
+  background: color-mix(in srgb, var(--ui-danger) 15%, transparent);
+  color: var(--ui-danger);
+}
+.variant-info {
+  background: color-mix(in srgb, var(--ui-info) 15%, transparent);
+  color: var(--ui-info);
+}

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

@@ -0,0 +1,52 @@
+import { h, Host } from "@stencil/core";
+export class UiBadge {
+    constructor() {
+        /** Variante visual. */
+        this.variant = "default";
+    }
+    render() {
+        return (h(Host, { key: '260e9e23ffa9a624e17e5a794217402ab2167f31' }, h("span", { key: '1b0d40c5b9a46c5928132d050e3c2f9e3bcd4ea8', class: { badge: true, [`variant-${this.variant}`]: true } }, h("slot", { key: '9680659040a4d48bdb53415e40bbbef9819063d9' }))));
+    }
+    static get is() { return "ui-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiBadgeVariant",
+                    "resolved": "\"danger\" | \"default\" | \"info\" | \"outline\" | \"solid\" | \"success\" | \"warning\"",
+                    "references": {
+                        "UiBadgeVariant": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-badge/ui-badge.tsx",
+                            "id": "src/components/ui-badge/ui-badge.tsx::UiBadgeVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante visual."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"default\""
+            }
+        };
+    }
+}

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

@@ -0,0 +1,130 @@
+:host {
+  display: inline-block;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius-full);
+  font-family: var(--ui-font-sans);
+  font-weight: 500;
+  cursor: pointer;
+  outline: none;
+  transition: all var(--ui-duration) var(--ui-ease);
+}
+
+.btn:active {
+  transform: scale(0.98);
+}
+
+.btn:focus-visible {
+  box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px var(--ui-ring);
+}
+
+.btn:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* Tamanhos */
+.size-sm {
+  height: 2.25rem;
+  padding: 0 1rem;
+  font-size: 0.75rem;
+}
+.size-md {
+  height: 2.75rem;
+  padding: 0 1.25rem;
+  font-size: 0.875rem;
+}
+.size-lg {
+  height: 3rem;
+  padding: 0 1.5rem;
+  font-size: 1rem;
+}
+.size-icon {
+  height: 2.5rem;
+  width: 2.5rem;
+  padding: 0;
+}
+
+/* Variantes */
+.variant-solid {
+  background: var(--ui-accent);
+  color: var(--ui-accent-contrast);
+  box-shadow: var(--ui-shadow);
+}
+.variant-solid:hover {
+  filter: brightness(1.1);
+}
+
+.variant-default {
+  background: var(--ui-panel-strong);
+  color: var(--ui-foreground);
+  border-color: var(--ui-border);
+  backdrop-filter: blur(22px);
+}
+.variant-default:hover {
+  border-color: var(--ui-border-strong);
+}
+
+.variant-subtle {
+  background: var(--ui-chip);
+  color: var(--ui-foreground);
+  border-color: var(--ui-border);
+  backdrop-filter: blur(22px);
+}
+.variant-subtle:hover {
+  background: var(--ui-panel);
+}
+
+.variant-outline {
+  color: var(--ui-foreground);
+  border-color: var(--ui-border-strong);
+}
+.variant-outline:hover {
+  background: var(--ui-chip);
+}
+
+.variant-ghost {
+  color: var(--ui-text-soft);
+}
+.variant-ghost:hover {
+  background: var(--ui-chip);
+}
+
+.variant-destructive {
+  background: var(--ui-danger);
+  color: var(--ui-on-status);
+}
+.variant-destructive:hover {
+  filter: brightness(1.1);
+}
+
+.variant-link {
+  color: var(--ui-accent);
+  text-underline-offset: 4px;
+}
+.variant-link:hover {
+  text-decoration: underline;
+}
+
+/* Spinner de loading */
+.spinner {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  animation: ui-button-spin 0.7s linear infinite;
+}
+
+@keyframes ui-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}