ten-minds-ui-kit 0.0.1

package/fesm2022/ten-minds-ui-kit.mjs

@@ -0,0 +1,921 @@
+import * as i0 from '@angular/core';
+import { Component, input, output, computed, model, signal, ChangeDetectionStrategy, Injectable, inject, Directive, ViewContainerRef, ElementRef, TemplateRef, ViewChild, HostListener, ContentChild } from '@angular/core';
+import * as i1 from 'lucide-angular';
+import { LucideAngularModule, Info, CircleX, TriangleAlert, CircleCheck, X, ShoppingCart, Sun, Moon, ChevronDown, CheckIcon } from 'lucide-angular';
+import { FormsModule } from '@angular/forms';
+import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+
+class TwCart {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TwCart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: TwCart, isStandalone: true, selector: "lib-tw-cart", ngImport: i0, template: "<div class=\"bg-[#161616] border border-[#2a2a2a] rounded-2xl overflow-hidden w-full max-w-md\">\n\n  <!-- Header -->\n  <div class=\"flex items-center justify-between px-6 py-5 border-b border-[#1f1f1f]\">\n    <div class=\"flex items-center gap-2.5\">\n      <div class=\"w-8 h-8 bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg flex items-center justify-center\">\n        <svg class=\"w-4 h-4 text-[#e2e2e2]\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path d=\"M1 1h2l2.5 8h7l1.5-5H4.5\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <circle cx=\"7\" cy=\"13\" r=\"1\" fill=\"currentColor\"/>\n          <circle cx=\"11\" cy=\"13\" r=\"1\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <span class=\"text-[15px] font-medium text-[#e2e2e2] tracking-tight\">Your cart</span>\n      <span class=\"text-[11px] font-mono bg-[#1f1f1f] border border-[#2a2a2a] text-[#666] px-2 py-0.5 rounded-full\">3</span>\n    </div>\n  </div>\n\n  <!-- Items -->\n  <div class=\"divide-y divide-[#1f1f1f]\">\n\n    <!-- Item -->\n    <div class=\"flex items-center gap-4 px-6 py-4\">\n      <div class=\"w-12 h-12 rounded-xl bg-[#1e2a20] border border-[#2a3a2c] flex-shrink-0 flex items-center justify-center text-xl\">\n        \uD83C\uDFA7\n      </div>\n      <div class=\"flex-1 min-w-0\">\n        <p class=\"text-[13px] font-medium text-[#d8d8d8] truncate\">Studio Headphones Pro</p>\n        <p class=\"text-[11px] text-[#555] mt-0.5 font-mono\">Midnight Black</p>\n      </div>\n      <div class=\"flex items-center gap-3 flex-shrink-0\">\n        <div class=\"flex items-center bg-[#1f1f1f] border border-[#2a2a2a] rounded-lg overflow-hidden\">\n          <span class=\"w-7 h-7 flex items-center justify-center text-[#555] text-sm\">\u2212</span>\n          <span class=\"text-[12px] text-[#d8d8d8] font-mono min-w-[20px] text-center\">1</span>\n          <span class=\"w-7 h-7 flex items-center justify-center text-[#555] text-sm\">+</span>\n        </div>\n        <span class=\"text-[13px] font-semibold text-[#e2e2e2] font-mono w-14 text-right\">$249</span>\n      </div>\n    </div>\n\n    <!-- Item -->\n    <div class=\"flex items-center gap-4 px-6 py-4\">\n      <div class=\"w-12 h-12 rounded-xl bg-[#201a2a] border border-[#362a40] flex-shrink-0 flex items-center justify-center text-xl\">\n        \u231A\n      </div>\n      <div class=\"flex-1 min-w-0\">\n        <p class=\"text-[13px] font-medium text-[#d8d8d8] truncate\">Smart Watch Series X</p>\n        <p class=\"text-[11px] text-[#555] mt-0.5 font-mono\">45mm \u00B7 Space Gray</p>\n      </div>\n      <div class=\"flex items-center gap-3 flex-shrink-0\">\n        <div class=\"flex items-center bg-[#1f1f1f] border border-[#2a2a2a] rounded-lg overflow-hidden\">\n          <span class=\"w-7 h-7 flex items-center justify-center text-[#555] text-sm\">\u2212</span>\n          <span class=\"text-[12px] text-[#d8d8d8] font-mono min-w-[20px] text-center\">2</span>\n          <span class=\"w-7 h-7 flex items-center justify-center text-[#555] text-sm\">+</span>\n        </div>\n        <span class=\"text-[13px] font-semibold text-[#e2e2e2] font-mono w-14 text-right\">$798</span>\n      </div>\n    </div>\n\n    <!-- Item -->\n    <div class=\"flex items-center gap-4 px-6 py-4\">\n      <div class=\"w-12 h-12 rounded-xl bg-[#2a1e1a] border border-[#402d28] flex-shrink-0 flex items-center justify-center text-xl\">\n        \uD83D\uDDB1\uFE0F\n      </div>\n      <div class=\"flex-1 min-w-0\">\n        <p class=\"text-[13px] font-medium text-[#d8d8d8] truncate\">Ergonomic Mouse Ultra</p>\n        <p class=\"text-[11px] text-[#555] mt-0.5 font-mono\">Wireless \u00B7 Graphite</p>\n      </div>\n      <div class=\"flex items-center gap-3 flex-shrink-0\">\n        <div class=\"flex items-center bg-[#1f1f1f] border border-[#2a2a2a] rounded-lg overflow-hidden\">\n          <span class=\"w-7 h-7 flex items-center justify-center text-[#555] text-sm\">\u2212</span>\n          <span class=\"text-[12px] text-[#d8d8d8] font-mono min-w-[20px] text-center\">1</span>\n          <span class=\"w-7 h-7 flex items-center justify-center text-[#555] text-sm\">+</span>\n        </div>\n        <span class=\"text-[13px] font-semibold text-[#e2e2e2] font-mono w-14 text-right\">$89</span>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Summary -->\n  <div class=\"px-6 py-4 border-t border-[#1f1f1f] flex flex-col gap-2\">\n    <div class=\"flex justify-between\">\n      <span class=\"text-[12px] text-[#555]\">Subtotal</span>\n      <span class=\"text-[12px] text-[#888] font-mono\">$1,136.00</span>\n    </div>\n    <div class=\"flex justify-between\">\n      <span class=\"text-[12px] text-[#555]\">Shipping</span>\n      <span class=\"text-[12px] text-emerald-400 font-mono\">Free</span>\n    </div>\n    <div class=\"flex justify-between pt-3 mt-1 border-t border-[#1f1f1f]\">\n      <span class=\"text-[14px] font-medium text-[#d8d8d8] tracking-tight\">Total</span>\n      <span class=\"text-[16px] font-semibold text-[#e2e2e2] font-mono tracking-tight\">$1,136.00</span>\n    </div>\n  </div>\n\n  <!-- CTA -->\n  <div class=\"px-6 pb-6 flex flex-col gap-2\">\n    <button class=\"w-full py-3.5 bg-[#e2e2e2] rounded-xl text-[14px] font-semibold text-[#0f0f0f] tracking-tight\">\n      Checkout \u2014 $1,136.00\n    </button>\n    <button class=\"w-full py-2.5 text-[12px] text-[#444] bg-transparent border-none\">\n      Continue shopping \u2192\n    </button>\n  </div>\n\n</div>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TwCart, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tw-cart', imports: [], template: "<div class=\"bg-[#161616] border border-[#2a2a2a] rounded-2xl overflow-hidden w-full max-w-md\">\n\n  <!-- Header -->\n  <div class=\"flex items-center justify-between px-6 py-5 border-b border-[#1f1f1f]\">\n    <div class=\"flex items-center gap-2.5\">\n      <div class=\"w-8 h-8 bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg flex items-center justify-center\">\n        <svg class=\"w-4 h-4 text-[#e2e2e2]\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path d=\"M1 1h2l2.5 8h7l1.5-5H4.5\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <circle cx=\"7\" cy=\"13\" r=\"1\" fill=\"currentColor\"/>\n          <circle cx=\"11\" cy=\"13\" r=\"1\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <span class=\"text-[15px] font-medium text-[#e2e2e2] tracking-tight\">Your cart</span>\n      <span class=\"text-[11px] font-mono bg-[#1f1f1f] border border-[#2a2a2a] text-[#666] px-2 py-0.5 rounded-full\">3</span>\n    </div>\n  </div>\n\n  <!-- Items -->\n  <div class=\"divide-y divide-[#1f1f1f]\">\n\n    <!-- Item -->\n    <div class=\"flex items-center gap-4 px-6 py-4\">\n      <div class=\"w-12 h-12 rounded-xl bg-[#1e2a20] border border-[#2a3a2c] flex-shrink-0 flex items-center justify-center text-xl\">\n        \uD83C\uDFA7\n      </div>\n      <div class=\"flex-1 min-w-0\">\n        <p class=\"text-[13px] font-medium text-[#d8d8d8] truncate\">Studio Headphones Pro</p>\n        <p class=\"text-[11px] text-[#555] mt-0.5 font-mono\">Midnight Black</p>\n      </div>\n      <div class=\"flex items-center gap-3 flex-shrink-0\">\n        <div class=\"flex items-center bg-[#1f1f1f] border border-[#2a2a2a] rounded-lg overflow-hidden\">\n          <span class=\"w-7 h-7 flex items-center justify-center text-[#555] text-sm\">\u2212</span>\n          <span class=\"text-[12px] text-[#d8d8d8] font-mono min-w-[20px] text-center\">1</span>\n          <span class=\"w-7 h-7 flex items-center justify-center text-[#555] text-sm\">+</span>\n        </div>\n        <span class=\"text-[13px] font-semibold text-[#e2e2e2] font-mono w-14 text-right\">$249</span>\n      </div>\n    </div>\n\n    <!-- Item -->\n    <div class=\"flex items-center gap-4 px-6 py-4\">\n      <div class=\"w-12 h-12 rounded-xl bg-[#201a2a] border border-[#362a40] flex-shrink-0 flex items-center justify-center text-xl\">\n        \u231A\n      </div>\n      <div class=\"flex-1 min-w-0\">\n        <p class=\"text-[13px] font-medium text-[#d8d8d8] truncate\">Smart Watch Series X</p>\n        <p class=\"text-[11px] text-[#555] mt-0.5 font-mono\">45mm \u00B7 Space Gray</p>\n      </div>\n      <div class=\"flex items-center gap-3 flex-shrink-0\">\n        <div class=\"flex items-center bg-[#1f1f1f] border border-[#2a2a2a] rounded-lg overflow-hidden\">\n          <span class=\"w-7 h-7 flex items-center justify-center text-[#555] text-sm\">\u2212</span>\n          <span class=\"text-[12px] text-[#d8d8d8] font-mono min-w-[20px] text-center\">2</span>\n          <span class=\"w-7 h-7 flex items-center justify-center text-[#555] text-sm\">+</span>\n        </div>\n        <span class=\"text-[13px] font-semibold text-[#e2e2e2] font-mono w-14 text-right\">$798</span>\n      </div>\n    </div>\n\n    <!-- Item -->\n    <div class=\"flex items-center gap-4 px-6 py-4\">\n      <div class=\"w-12 h-12 rounded-xl bg-[#2a1e1a] border border-[#402d28] flex-shrink-0 flex items-center justify-center text-xl\">\n        \uD83D\uDDB1\uFE0F\n      </div>\n      <div class=\"flex-1 min-w-0\">\n        <p class=\"text-[13px] font-medium text-[#d8d8d8] truncate\">Ergonomic Mouse Ultra</p>\n        <p class=\"text-[11px] text-[#555] mt-0.5 font-mono\">Wireless \u00B7 Graphite</p>\n      </div>\n      <div class=\"flex items-center gap-3 flex-shrink-0\">\n        <div class=\"flex items-center bg-[#1f1f1f] border border-[#2a2a2a] rounded-lg overflow-hidden\">\n          <span class=\"w-7 h-7 flex items-center justify-center text-[#555] text-sm\">\u2212</span>\n          <span class=\"text-[12px] text-[#d8d8d8] font-mono min-w-[20px] text-center\">1</span>\n          <span class=\"w-7 h-7 flex items-center justify-center text-[#555] text-sm\">+</span>\n        </div>\n        <span class=\"text-[13px] font-semibold text-[#e2e2e2] font-mono w-14 text-right\">$89</span>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Summary -->\n  <div class=\"px-6 py-4 border-t border-[#1f1f1f] flex flex-col gap-2\">\n    <div class=\"flex justify-between\">\n      <span class=\"text-[12px] text-[#555]\">Subtotal</span>\n      <span class=\"text-[12px] text-[#888] font-mono\">$1,136.00</span>\n    </div>\n    <div class=\"flex justify-between\">\n      <span class=\"text-[12px] text-[#555]\">Shipping</span>\n      <span class=\"text-[12px] text-emerald-400 font-mono\">Free</span>\n    </div>\n    <div class=\"flex justify-between pt-3 mt-1 border-t border-[#1f1f1f]\">\n      <span class=\"text-[14px] font-medium text-[#d8d8d8] tracking-tight\">Total</span>\n      <span class=\"text-[16px] font-semibold text-[#e2e2e2] font-mono tracking-tight\">$1,136.00</span>\n    </div>\n  </div>\n\n  <!-- CTA -->\n  <div class=\"px-6 pb-6 flex flex-col gap-2\">\n    <button class=\"w-full py-3.5 bg-[#e2e2e2] rounded-xl text-[14px] font-semibold text-[#0f0f0f] tracking-tight\">\n      Checkout \u2014 $1,136.00\n    </button>\n    <button class=\"w-full py-2.5 text-[12px] text-[#444] bg-transparent border-none\">\n      Continue shopping \u2192\n    </button>\n  </div>\n\n</div>\n" }]
+        }] });
+
+class BtnPrimary {
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    type = input('filled', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    iconLeft = input(...(ngDevMode ? [undefined, { debugName: "iconLeft" }] : /* istanbul ignore next */ []));
+    iconRight = input(...(ngDevMode ? [undefined, { debugName: "iconRight" }] : /* istanbul ignore next */ []));
+    rounded = input('default', ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    clicked = output();
+    iconSize = computed(() => {
+        const sizeMap = { lg: 20, md: 16, sm: 14 };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    leftIcon = computed(() => !!this.iconLeft(), ...(ngDevMode ? [{ debugName: "leftIcon" }] : /* istanbul ignore next */ []));
+    rightIcon = computed(() => !!this.iconRight(), ...(ngDevMode ? [{ debugName: "rightIcon" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const base = 'inline-flex items-center justify-center font-medium transition-all duration-200 whitespace-nowrap';
+        const roundedMap = {
+            default: 'rounded-lg',
+            full: 'rounded-full',
+        };
+        const sizes = {
+            lg: 'h-11 min-h-11 px-5 py-3 gap-2.5 text-sm-medium ',
+            md: 'h-10 px-4 py-2.5 gap-2 text-sm-medium',
+            sm: 'h-9 px-3 py-2 gap-2 text-xs-medium',
+        };
+        const variants = {
+            primary: {
+                filled: 'bg-tm-brand text-tm-inverse hover:bg-tm-brand-hover-default hover:border-tm-brand-hover-default',
+                outlined: 'border border-tm-default text-tm-primary hover:bg-tm-brand-hover-subtle hover:border-tm-default',
+                ghost: 'text-tm-primary border-transparent hover:bg-tm-brand-hover-subtle',
+            },
+            danger: {
+                filled: 'bg-tm-red-500 text-tm-base-white hover:bg-tm-red-600 hover:border-tm-red-600',
+                outlined: 'text-red-500 border border-tm-default hover:bg-tm-red-500/10 hover:border-tm-default',
+                ghost: 'text-tm-red-500 border-transparent hover:bg-tm-red-500/10',
+            },
+            success: {
+                filled: 'bg-tm-green-500 text-tm-base-white hover:bg-tm-green-600 hover:border-tm-green-600',
+                outlined: 'text-tm-green-500 border border-tm-default hover:bg-tm-green-500/10',
+                ghost: 'text-tm-green-500 border-transparent hover:bg-tm-green-500/10',
+            },
+            warning: {
+                filled: 'bg-tm-yellow-500 text-tm-base-black hover:bg-tm-yellow-600 hover:border-tm-yellow-600',
+                outlined: 'text-tm-yellow-500 border border-tm-default hover:bg-tm-yellow-500/10',
+                ghost: 'text-tm-yellow-600 border-transparent hover:bg-tm-yellow-500/10',
+            },
+        };
+        const activeClass = this.active() ? 'brightness-90' : '';
+        const disabledClass = this.disabled() ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer';
+        return [
+            base,
+            sizes[this.size()],
+            variants[this.color()][this.type()],
+            roundedMap[this.rounded()],
+            activeClass,
+            disabledClass,
+            this.customClass(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onButtonClick(event) {
+        if (!this.disabled()) {
+            this.clicked.emit(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BtnPrimary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: BtnPrimary, isStandalone: true, selector: "tm-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.disabled": "disabled() || null" } }, ngImport: i0, template: "<button [class]=\"classes()\" [disabled]=\"disabled()\" (click)=\"onButtonClick($event)\">\n  @if (leftIcon()) {\n    <lucide-icon [img]=\"iconLeft()!\" [size]=\"iconSize()\" [strokeWidth]=\"1.75\" />\n  }\n  <span><ng-content /></span>\n  @if (rightIcon()) {\n    <lucide-icon [img]=\"iconRight()!\" [size]=\"iconSize()\" [strokeWidth]=\"1.75\" />\n  }\n</button>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BtnPrimary, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-button', imports: [LucideAngularModule], host: {
+                        '[attr.disabled]': 'disabled() || null',
+                    }, template: "<button [class]=\"classes()\" [disabled]=\"disabled()\" (click)=\"onButtonClick($event)\">\n  @if (leftIcon()) {\n    <lucide-icon [img]=\"iconLeft()!\" [size]=\"iconSize()\" [strokeWidth]=\"1.75\" />\n  }\n  <span><ng-content /></span>\n  @if (rightIcon()) {\n    <lucide-icon [img]=\"iconRight()!\" [size]=\"iconSize()\" [strokeWidth]=\"1.75\" />\n  }\n</button>\n" }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], iconRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRight", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+const SIZE_WRAPPER$1 = {
+    md: 'h-11 min-h-11 px-4 py-2 gap-2.5 text-sm',
+    sm: 'h-10 min-h-10 px-4 py-2 gap-2 text-xs',
+};
+const ICON_SIZE_PX = {
+    md: 20,
+    sm: 16,
+};
+const BASE_WRAPPER$1 = 'inline-flex items-center rounded-lg border w-[273px] ' +
+    'transition-all duration-300 cursor-text hover:shadow-md';
+const STATE_WRAPPER$1 = {
+    default: 'border-tm-default text-tm-secondary hover:border-tm-strong',
+    active: 'border-tm-default text-tm-primary ring-2 ring-tm-default/20 ',
+    hover: 'border-tm-strong text-tm-secondary',
+    disabled: 'border-tm-subtle text-tm-secondary bg-tm-subtle cursor-not-allowed hover:shadow-none',
+    error: 'border-tm-red-500 text-tm-secondary',
+};
+const BASE_INPUT = 'flex-1 bg-transparent outline-none ' +
+    'placeholder:text-tm-secondary disabled:cursor-not-allowed';
+class InputTen {
+    // ── Inputs
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    placeholder = input('placeholder', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    iconLeft = input(...(ngDevMode ? [undefined, { debugName: "iconLeft" }] : /* istanbul ignore next */ []));
+    iconRight = input(...(ngDevMode ? [undefined, { debugName: "iconRight" }] : /* istanbul ignore next */ []));
+    // ── Outputs
+    focused = output();
+    blurred = output();
+    // ── Estado interno
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    currentState = computed(() => {
+        if (this.disabled())
+            return 'disabled';
+        if (this.error())
+            return 'error';
+        if (this.isFocused())
+            return 'active';
+        return 'default';
+    }, ...(ngDevMode ? [{ debugName: "currentState" }] : /* istanbul ignore next */ []));
+    iconSizePx = computed(() => ICON_SIZE_PX[this.size()], ...(ngDevMode ? [{ debugName: "iconSizePx" }] : /* istanbul ignore next */ []));
+    wrapperClasses = computed(() => [BASE_WRAPPER$1, SIZE_WRAPPER$1[this.size()], STATE_WRAPPER$1[this.currentState()]].join(' '), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    iconColorClass = computed(() => {
+        if (this.currentState() === 'error')
+            return 'text-tm-color-500';
+        if (this.currentState() === 'active')
+            return 'text-tm-primary';
+        return 'text-tm-secondary';
+    }, ...(ngDevMode ? [{ debugName: "iconColorClass" }] : /* istanbul ignore next */ []));
+    showLabel = computed(() => !!this.label(), ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    showHint = computed(() => !!this.hint() && this.currentState() !== 'error', ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    showError = computed(() => !!this.error(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    inputClasses = BASE_INPUT;
+    onFocus(event) {
+        this.isFocused.set(true);
+        this.focused.emit(event);
+    }
+    onBlur(event) {
+        this.isFocused.set(false);
+        this.blurred.emit(event);
+    }
+    onInput(event) {
+        const val = event.target.value;
+        this.value.set(val);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputTen, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: InputTen, isStandalone: true, selector: "tm-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focused: "focused", blurred: "blurred" }, ngImport: i0, template: "<!-- Label -->\n@if (showLabel()) {\n  <label class=\"block text-sm font-medium text-tm-primary mb-1.5\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"text-text-danger ml-0.5\">*</span>\n    }\n  </label>\n}\n\n<!-- Wrapper del input -->\n<div [class]=\"wrapperClasses()\">\n\n  <!-- Icono izquierdo -->\n  @if (iconLeft()) {\n    <lucide-icon\n      [img]=\"iconLeft()!\"\n      [size]=\"iconSizePx()\"\n      [strokeWidth]=\"1.75\"\n      [class]=\"iconColorClass()\"\n    />\n  }\n\n  <!-- Input nativo -->\n  <input\n    [class]=\"inputClasses\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [value]=\"value()\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (input)=\"onInput($event)\"\n  />\n\n  <!-- Icono derecho -->\n  @if (iconRight()) {\n    <lucide-icon\n      [img]=\"iconRight()!\"\n      [size]=\"iconSizePx()\"\n      [strokeWidth]=\"1.75\"\n      [class]=\"iconColorClass()\"\n    />\n  }\n\n</div>\n\n<!-- Hint -->\n@if (showHint()) {\n  <p class=\"mt-1.5 text-xs text-tm-secondary\">\n    {{ hint() }}\n  </p>\n}\n\n<!-- Error -->\n@if (showError()) {\n  <p class=\"mt-1.5 text-xs text-tm-red-500\">\n    {{ error() }}\n  </p>\n}\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputTen, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-input', standalone: true, imports: [LucideAngularModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Label -->\n@if (showLabel()) {\n  <label class=\"block text-sm font-medium text-tm-primary mb-1.5\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"text-text-danger ml-0.5\">*</span>\n    }\n  </label>\n}\n\n<!-- Wrapper del input -->\n<div [class]=\"wrapperClasses()\">\n\n  <!-- Icono izquierdo -->\n  @if (iconLeft()) {\n    <lucide-icon\n      [img]=\"iconLeft()!\"\n      [size]=\"iconSizePx()\"\n      [strokeWidth]=\"1.75\"\n      [class]=\"iconColorClass()\"\n    />\n  }\n\n  <!-- Input nativo -->\n  <input\n    [class]=\"inputClasses\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [value]=\"value()\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (input)=\"onInput($event)\"\n  />\n\n  <!-- Icono derecho -->\n  @if (iconRight()) {\n    <lucide-icon\n      [img]=\"iconRight()!\"\n      [size]=\"iconSizePx()\"\n      [strokeWidth]=\"1.75\"\n      [class]=\"iconColorClass()\"\n    />\n  }\n\n</div>\n\n<!-- Hint -->\n@if (showHint()) {\n  <p class=\"mt-1.5 text-xs text-tm-secondary\">\n    {{ hint() }}\n  </p>\n}\n\n<!-- Error -->\n@if (showError()) {\n  <p class=\"mt-1.5 text-xs text-tm-red-500\">\n    {{ error() }}\n  </p>\n}\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], iconRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRight", required: false }] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
+
+class Snackbar {
+    color = input('success', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    type = input('alert', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+    position = input('top-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    closed = output();
+    iconMap = {
+        success: CircleCheck,
+        warning: TriangleAlert,
+        error: CircleX,
+        info: Info,
+    };
+    closeIcon = X;
+    icon = computed(() => this.iconMap[this.color()], ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    alertClasses = {
+        success: 'bg-tm-green-500/10 outline outline-1 outline-offset-[-1px] outline-tm-green-500/50',
+        warning: 'bg-tm-yellow-500/10 outline outline-1 outline-offset-[-1px] outline-tm-yellow-500/50',
+        error: 'bg-tm-red-500/10 outline outline-1 outline-offset-[-1px] outline-tm-red-500/50',
+        info: 'bg-tm-blue-500/10 outline outline-1 outline-offset-[-1px] outline-tm-blue-500/50',
+    };
+    iconColorClasses = {
+        success: 'text-tm-green-500',
+        warning: 'text-tm-yellow-500',
+        error: 'text-tm-red-500',
+        info: 'text-tm-blue-500',
+    };
+    accentBarColorMap = {
+        success: 'bg-tm-green-500',
+        warning: 'bg-tm-yellow-500',
+        error: 'bg-tm-red-500',
+        info: 'bg-tm-blue-500',
+    };
+    accentBarClasses = computed(() => `w-1.5 self-stretch ${this.accentBarColorMap[this.color()]}`, ...(ngDevMode ? [{ debugName: "accentBarClasses" }] : /* istanbul ignore next */ []));
+    titleAlertClasses = {
+        success: 'text-tm-green-700',
+        warning: 'text-tm-yellow-700',
+        error: 'text-tm-red-700',
+        info: 'text-tm-blue-700',
+    };
+    positionClasses = {
+        'top-left': 'top-4 left-4 items-start',
+        'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',
+        'top-right': 'top-4 right-4 items-end',
+        'bottom-left': 'bottom-4 left-4 items-start',
+        'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center',
+        'bottom-right': 'bottom-4 right-4 items-end',
+    };
+    containerClasses = computed(() => {
+        const base = 'animate-slide-in-right flex items-stretch w-96 rounded-xl overflow-hidden';
+        const typeClass = this.type() === 'alert' ? this.alertClasses[this.color()] : 'bg-tm-surface shadow-md';
+        return `${base} ${typeClass}`;
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    wrapperClasses = computed(() => {
+        return `fixed z-50 flex flex-col ${this.positionClasses[this.position()]}`;
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => this.iconColorClasses[this.color()], ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    titleClasses = computed(() => {
+        const colorClass = this.type() === 'notification' ? 'text-tm-primary' : this.titleAlertClasses[this.color()];
+        return `text-sm-semibold ${colorClass}`;
+    }, ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Snackbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Snackbar, isStandalone: true, selector: "tm-snackbar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  @if (type() === 'notification') {\n    <div [class]=\"accentBarClasses()\"></div>\n  }\n  <div class=\"flex items-start gap-3 flex-1 p-5\">\n    <lucide-icon [img]=\"icon()\" [size]=\"20\" [class]=\"iconClasses()\" />\n    <div class=\"flex-1 flex flex-col gap-0.5\">\n      <span [class]=\"titleClasses()\">{{ title() }}</span>\n      @if (description()) {\n        <span class=\"text-xs-regular text-tm-secondary\">{{ description() }}</span>\n      }\n    </div>\n    @if (type() === 'notification') {\n      <button\n        (click)=\"closed.emit()\"\n        class=\"text-tm-tertiary hover:text-tm-primary transition-colors cursor-pointer\"\n      >\n        <lucide-icon [img]=\"closeIcon\" [size]=\"16\" />\n      </button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Snackbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-snackbar', imports: [NgIf, LucideAngularModule], template: "<div [class]=\"containerClasses()\">\n  @if (type() === 'notification') {\n    <div [class]=\"accentBarClasses()\"></div>\n  }\n  <div class=\"flex items-start gap-3 flex-1 p-5\">\n    <lucide-icon [img]=\"icon()\" [size]=\"20\" [class]=\"iconClasses()\" />\n    <div class=\"flex-1 flex flex-col gap-0.5\">\n      <span [class]=\"titleClasses()\">{{ title() }}</span>\n      @if (description()) {\n        <span class=\"text-xs-regular text-tm-secondary\">{{ description() }}</span>\n      }\n    </div>\n    @if (type() === 'notification') {\n      <button\n        (click)=\"closed.emit()\"\n        class=\"text-tm-tertiary hover:text-tm-primary transition-colors cursor-pointer\"\n      >\n        <lucide-icon [img]=\"closeIcon\" [size]=\"16\" />\n      </button>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class SnackbarService {
+    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    add(type, color, title, description, duration, position) {
+        const id = crypto.randomUUID();
+        this.items.update((current) => [
+            { id, type, color, title, description, duration: duration ?? 5000, position: position ?? 'top-right' },
+            ...current,
+        ]);
+        if (type === 'alert') {
+            setTimeout(() => this.remove(id), duration ?? 5000);
+        }
+    }
+    alert(color, title, description, duration, position) {
+        this.add('alert', color, title, description, duration, position);
+    }
+    notify(color, title, description, position) {
+        this.add('notification', color, title, description, undefined, position);
+    }
+    remove(id) {
+        this.items.update((current) => current.filter((item) => item.id !== id));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SnackbarHost {
+    snackbarService = inject(SnackbarService);
+    containerClasses = {
+        'top-left': 'fixed top-4 left-4 flex flex-col gap-3 z-50',
+        'top-center': 'fixed top-4 left-1/2 -translate-x-1/2 flex flex-col gap-3 z-50',
+        'top-right': 'fixed top-4 right-4 flex flex-col gap-3 z-50',
+        'bottom-left': 'fixed bottom-4 left-4 flex flex-col-reverse gap-3 z-50',
+        'bottom-center': 'fixed bottom-4 left-1/2 -translate-x-1/2 flex flex-col-reverse gap-3 z-50',
+        'bottom-right': 'fixed bottom-4 right-4 flex flex-col-reverse gap-3 z-50',
+    };
+    positions = [
+        'top-left', 'top-center', 'top-right',
+        'bottom-left', 'bottom-center', 'bottom-right',
+    ];
+    itemsByPosition = computed(() => {
+        const items = this.snackbarService.items();
+        return this.positions.map(position => ({
+            position,
+            classes: this.containerClasses[position],
+            items: items.filter(i => i.position === position),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "itemsByPosition" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnackbarHost, isStandalone: true, selector: "tm-snackbar-host", ngImport: i0, template: "@for (group of itemsByPosition(); track group.position) {\n  @if (group.items.length > 0) {\n    <div [class]=\"group.classes\">\n      <tm-snackbar\n        *ngFor=\"let item of group.items\"\n        [type]=\"item.type\"\n        [color]=\"item.color\"\n        [title]=\"item.title\"\n        [description]=\"item.description\"\n        [position]=\"item.position\"\n        (closed)=\"snackbarService.remove(item.id)\"\n      />\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: Snackbar, selector: "tm-snackbar", inputs: ["color", "type", "title", "description", "position"], outputs: ["closed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarHost, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-snackbar-host', imports: [NgFor, Snackbar], template: "@for (group of itemsByPosition(); track group.position) {\n  @if (group.items.length > 0) {\n    <div [class]=\"group.classes\">\n      <tm-snackbar\n        *ngFor=\"let item of group.items\"\n        [type]=\"item.type\"\n        [color]=\"item.color\"\n        [title]=\"item.title\"\n        [description]=\"item.description\"\n        [position]=\"item.position\"\n        (closed)=\"snackbarService.remove(item.id)\"\n      />\n    </div>\n  }\n}\n" }]
+        }] });
+
+class Chip {
+    status = input('brand', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    type = input('filled', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    rounded = input('default', ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    iconLeft = input(...(ngDevMode ? [undefined, { debugName: "iconLeft" }] : /* istanbul ignore next */ []));
+    iconRight = input(...(ngDevMode ? [undefined, { debugName: "iconRight" }] : /* istanbul ignore next */ []));
+    clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
+    clicked = output();
+    roundedClasses = {
+        default: 'rounded-md',
+        full: 'rounded-[999px]',
+    };
+    filledClasses = {
+        success: 'bg-tm-green-500 text-tm-base-white',
+        warning: 'bg-tm-yellow-500 text-tm-base-black',
+        indigo: 'bg-tm-indigo-500 text-tm-base-white',
+        danger: 'bg-tm-red-500 text-tm-base-white',
+        info: 'bg-tm-blue-500 text-tm-base-white',
+        brand: 'bg-tm-brand text-tm-inverse',
+    };
+    subtleClasses = {
+        success: 'bg-tm-green-500/10 text-tm-green-500',
+        warning: 'bg-tm-yellow-500/10 text-tm-yellow-500',
+        indigo: 'bg-tm-indigo-500/10 text-tm-indigo-500',
+        danger: 'bg-tm-red-500/10 text-tm-red-500',
+        info: 'bg-tm-blue-500/10 text-tm-blue-500',
+        brand: 'bg-tm-brand/10 text-tm-secondary',
+    };
+    outlinedClasses = {
+        success: 'outline outline-1 outline-tm-default text-tm-green-500',
+        warning: 'outline outline-1 outline-tm-default text-tm-yellow-500',
+        indigo: 'outline outline-1 outline-tm-default text-indigo-500',
+        danger: 'outline outline-1 outline-tm-default text-tm-red-500',
+        info: 'outline outline-1 outline-tm-default text-tm-blue-500',
+        brand: 'outline outline-1 outline-tm-default text-tm-secondary',
+    };
+    containerClasses = computed(() => {
+        const typeMap = {
+            filled: this.filledClasses[this.status()],
+            subtle: this.subtleClasses[this.status()],
+            outlined: this.outlinedClasses[this.status()],
+        };
+        const base = 'h-7 min-w-10 min-h-7 inline-flex items-center gap-2 px-2.5 py-1 text-xs-medium transition-colors inline-flex justify-center leading-none';
+        const rounded = this.roundedClasses[this.rounded()];
+        const typeClass = typeMap[this.type()];
+        const cursor = this.clickable() ? 'cursor-pointer hover:opacity-80' : 'cursor-default';
+        return `${base} ${rounded} ${typeClass} ${cursor}`;
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    handleClick() {
+        if (this.clickable()) {
+            this.clicked.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Chip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Chip, isStandalone: true, selector: "tm-chip", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span [class]=\"containerClasses()\" (click)=\"handleClick()\">\n  @if (iconLeft()) {\n    <lucide-icon [img]=\"iconLeft()!\" [size]=\"14\" [strokeWidth]=\"1.75\" />\n  }\n  <ng-content />\n  @if (iconRight()) {\n    <lucide-icon [img]=\"iconRight()!\" [size]=\"14\" [strokeWidth]=\"1.75\" />\n  }\n</span>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Chip, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-chip', imports: [LucideAngularModule], template: "<span [class]=\"containerClasses()\" (click)=\"handleClick()\">\n  @if (iconLeft()) {\n    <lucide-icon [img]=\"iconLeft()!\" [size]=\"14\" [strokeWidth]=\"1.75\" />\n  }\n  <ng-content />\n  @if (iconRight()) {\n    <lucide-icon [img]=\"iconRight()!\" [size]=\"14\" [strokeWidth]=\"1.75\" />\n  }\n</span>\n" }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], iconRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRight", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+class Toggle {
+    value = input(false, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    changed = output();
+    trackClasses = computed(() => {
+        const base = 'relative w-12 h-7 rounded-[999px] border border-tm-strong transition-colors duration-200';
+        const state = this.value() ? 'bg-bg-brand' : 'bg-tm-subtle';
+        const cursor = this.disabled() ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';
+        return `${base} ${state} ${cursor}`;
+    }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
+    thumbClasses = computed(() => {
+        const base = 'absolute top-[3px] w-5 h-5 rounded-full bg-tm-base-white shadow-md transition-all duration-200';
+        const position = this.value() ? 'left-[22px]' : 'left-[4px]';
+        return `${base} ${position}`;
+    }, ...(ngDevMode ? [{ debugName: "thumbClasses" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (!this.disabled()) {
+            this.changed.emit(!this.value());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Toggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: Toggle, isStandalone: true, selector: "tm-toggle", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"switch\"\n  [attr.aria-checked]=\"value()\"\n  [disabled]=\"disabled() || null\"\n  [class]=\"trackClasses()\"\n  (click)=\"toggle()\"\n>\n  <span [class]=\"thumbClasses()\"></span>\n</button>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Toggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-toggle', template: "<button\n  type=\"button\"\n  role=\"switch\"\n  [attr.aria-checked]=\"value()\"\n  [disabled]=\"disabled() || null\"\n  [class]=\"trackClasses()\"\n  (click)=\"toggle()\"\n>\n  <span [class]=\"thumbClasses()\"></span>\n</button>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+class CheckboxButton {
+    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    id = input(`checkbox-${Math.random().toString(36).slice(2)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    changed = output();
+    containerClasses = computed(() => {
+        const base = 'flex items-center gap-2';
+        const cursor = this.disabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer';
+        return `${base} ${cursor}`;
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    boxClasses = computed(() => {
+        const base = 'w-5 h-5 rounded-sm border-2 flex items-center justify-center transition-all duration-200';
+        if (this.disabled()) {
+            return `${base} border-tm-subtle`;
+        }
+        return this.checked()
+            ? `${base} bg-tm-brand border-tm-brand text-tm-inverse`
+            : `${base} border-tm-default`;
+    }, ...(ngDevMode ? [{ debugName: "boxClasses" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (!this.disabled()) {
+            this.changed.emit(!this.checked());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckboxButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CheckboxButton, isStandalone: true, selector: "tm-checkbox-button", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<label [for]=\"id()\" [class]=\"containerClasses()\">\n  <div class=\"relative\">\n    <input\n      type=\"checkbox\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      class=\"sr-only\"\n      (change)=\"toggle()\"\n    />\n    <div [class]=\"boxClasses()\">\n      @if(checked()) {\n        <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\">\n          <path\n            d=\"M1 5L4.5 8.5L11 1.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      }\n    </div>\n  </div>\n\n  @if(label()) {\n    <span [class]=\"'text-sm-regular ' + (disabled() ? 'text-tm-tertiary' : 'text-tm-primary')\">{{ label() }}</span>\n  }\n</label>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckboxButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-checkbox-button', template: "<label [for]=\"id()\" [class]=\"containerClasses()\">\n  <div class=\"relative\">\n    <input\n      type=\"checkbox\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      class=\"sr-only\"\n      (change)=\"toggle()\"\n    />\n    <div [class]=\"boxClasses()\">\n      @if(checked()) {\n        <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\">\n          <path\n            d=\"M1 5L4.5 8.5L11 1.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      }\n    </div>\n  </div>\n\n  @if(label()) {\n    <span [class]=\"'text-sm-regular ' + (disabled() ? 'text-tm-tertiary' : 'text-tm-primary')\">{{ label() }}</span>\n  }\n</label>\n" }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+class RadioButton {
+    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    name = input('radio-group', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    id = input(`radio-${Math.random().toString(36).slice(2)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    changed = output();
+    containerClasses = computed(() => {
+        const base = 'flex items-center gap-2';
+        const cursor = this.disabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer';
+        return `${base} ${cursor}`;
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    circleClasses = computed(() => {
+        const base = 'w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200';
+        if (this.disabled())
+            return `${base} border-tm-strong`;
+        if (this.checked())
+            return `${base} border-tm-brand`;
+        return `${base} border-tm-default`;
+    }, ...(ngDevMode ? [{ debugName: "circleClasses" }] : /* istanbul ignore next */ []));
+    innerClasses = 'w-6 h-6 relative flex items-center justify-center';
+    dotClasses = computed(() => {
+        const base = 'w-5 h-5 rounded-full absolute';
+        if (this.disabled())
+            return `${base} border-tm-subtle`;
+        if (this.checked())
+            return `${base} border-tm-brand`;
+        return `${base} border-tm-default`;
+    }, ...(ngDevMode ? [{ debugName: "dotClasses" }] : /* istanbul ignore next */ []));
+    select() {
+        if (!this.disabled()) {
+            this.changed.emit(this.value());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RadioButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: RadioButton, isStandalone: true, selector: "tm-radio-button", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<label [for]=\"id()\" [class]=\"containerClasses()\">\n  <div class=\"relative\">\n    <input\n      type=\"radio\"\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      class=\"sr-only\"\n      (change)=\"select()\"\n    />\n    <div [class]=\"circleClasses()\">\n      @if(checked()) {\n        <div class=\"w-2.5 h-2.5 rounded-full bg-tm-brand\"></div>\n      }\n    </div>\n  </div>\n\n  @if(label()) {\n    <span [class]=\"'text-sm-regular ' + (disabled() ? 'text-tm-tertiary' : 'text-tm-primary')\">{{ label() }}</span>\n  }\n</label>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RadioButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-radio-button', template: "<label [for]=\"id()\" [class]=\"containerClasses()\">\n  <div class=\"relative\">\n    <input\n      type=\"radio\"\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      class=\"sr-only\"\n      (change)=\"select()\"\n    />\n    <div [class]=\"circleClasses()\">\n      @if(checked()) {\n        <div class=\"w-2.5 h-2.5 rounded-full bg-tm-brand\"></div>\n      }\n    </div>\n  </div>\n\n  @if(label()) {\n    <span [class]=\"'text-sm-regular ' + (disabled() ? 'text-tm-tertiary' : 'text-tm-primary')\">{{ label() }}</span>\n  }\n</label>\n" }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+const AVATAR_SIZE_CLASSES = {
+    xs: 'w-7 h-7 text-xs', // 28px
+    sm: 'w-10 h-10 text-sm', // 40px
+    md: 'w-12 h-12 text-lg', // 48px
+    lg: 'w-15 h-15 text-xl', // 60px
+    xl: 'w-20 h-20 text-2xl', // 80px
+};
+const AVATAR_STATUS_CLASSES = {
+    online: 'bg-tm-green-500',
+    busy: 'bg-tm-yellow-500',
+    disconnect: 'bg-tm-gray-500',
+};
+// Posición y tamaño del indicador de status según el tamaño del avatar
+const AVATAR_STATUS_POSITION = {
+    xs: 'w-2.5 h-2.5 bottom-0 right-0',
+    sm: 'w-3 h-3 bottom-0 right-0',
+    md: 'w-3.5 h-3.5 bottom-0 right-0',
+    lg: 'w-4 h-4 bottom-0.5 right-0.5',
+    xl: 'w-4 h-4 bottom-0.5 right-0.5',
+};
+
+class Avatar {
+    /** Imagen del avatar. Si no se provee, se muestran las iniciales. */
+    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    initials = input('', ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    /** Texto alternativo para accesibilidad */
+    alt = input('Avatar', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    status = input(null, ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    showImage = computed(() => !!this.src(), ...(ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []));
+    showInitials = computed(() => !this.src() && !!this.initials(), ...(ngDevMode ? [{ debugName: "showInitials" }] : /* istanbul ignore next */ []));
+    showStatus = computed(() => !!this.status(), ...(ngDevMode ? [{ debugName: "showStatus" }] : /* istanbul ignore next */ []));
+    avatarClasses = computed(() => [
+        'relative inline-flex items-center justify-center',
+        'rounded-full font-medium bg-tm-brand text-tm-inverse',
+        'select-none shrink-0',
+        AVATAR_SIZE_CLASSES[this.size()],
+    ].join(' '), ...(ngDevMode ? [{ debugName: "avatarClasses" }] : /* istanbul ignore next */ []));
+    statusClasses = computed(() => [
+        'absolute rounded-full border-[1.5px] border-white',
+        AVATAR_STATUS_CLASSES[this.status()],
+        AVATAR_STATUS_POSITION[this.size()],
+    ].join(' '), ...(ngDevMode ? [{ debugName: "statusClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Avatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Avatar, isStandalone: true, selector: "tm-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"avatarClasses()\">\n\n  <!-- Imagen -->\n  @if (showImage()) {\n    <img\n      [src]=\"src()\"\n      [alt]=\"alt()\"\n      class=\"w-full h-full rounded-full object-cover\"\n    />\n  }\n\n  <!-- Iniciales -->\n  @if (showInitials()) {\n    <span class=\"leading-none\">{{ initials() }}</span>\n  }\n\n  <!-- Indicador de status -->\n  @if (showStatus()) {\n    <span\n      [class]=\"statusClasses()\"\n      [attr.aria-label]=\"status()!\"\n      role=\"status\"\n    ></span>\n  }\n\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Avatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-avatar', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"avatarClasses()\">\n\n  <!-- Imagen -->\n  @if (showImage()) {\n    <img\n      [src]=\"src()\"\n      [alt]=\"alt()\"\n      class=\"w-full h-full rounded-full object-cover\"\n    />\n  }\n\n  <!-- Iniciales -->\n  @if (showInitials()) {\n    <span class=\"leading-none\">{{ initials() }}</span>\n  }\n\n  <!-- Indicador de status -->\n  @if (showStatus()) {\n    <span\n      [class]=\"statusClasses()\"\n      [attr.aria-label]=\"status()!\"\n      role=\"status\"\n    ></span>\n  }\n\n</div>\n" }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
+
+class CloseDialog {
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Cerrar', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    closed = output();
+    xIcon = X;
+    onClick() {
+        if (!this.disabled()) {
+            this.closed.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CloseDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: CloseDialog, isStandalone: true, selector: "tm-close-dialog", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<button\n  type=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onClick()\"\n  class=\"\n    inline-flex items-center justify-center\n    w-9 h-9 rounded-full\n    bg-transparent text-tm-gray-500\n    transition-colors duration-200\n    hover:bg-tm-subtle\n    disabled:opacity-40 disabled:cursor-not-allowed\n    cursor-pointer\n  \"\n>\n  <lucide-icon\n    [img]=\"xIcon\"\n    [size]=\"20\"\n    [strokeWidth]=\"1.75\"\n  />\n</button>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CloseDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-close-dialog', standalone: true, imports: [LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onClick()\"\n  class=\"\n    inline-flex items-center justify-center\n    w-9 h-9 rounded-full\n    bg-transparent text-tm-gray-500\n    transition-colors duration-200\n    hover:bg-tm-subtle\n    disabled:opacity-40 disabled:cursor-not-allowed\n    cursor-pointer\n  \"\n>\n  <lucide-icon\n    [img]=\"xIcon\"\n    [size]=\"20\"\n    [strokeWidth]=\"1.75\"\n  />\n</button>\n" }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class CardButton {
+    count = input(0, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Carrito de compras', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    clicked = output();
+    cartIcon = ShoppingCart;
+    /* Muestra el badge solo si hay items */
+    showBadge = computed(() => this.count() > 0, ...(ngDevMode ? [{ debugName: "showBadge" }] : /* istanbul ignore next */ []));
+    displayCount = computed(() => {
+        const c = this.count();
+        if (c > 9)
+            return '9+';
+        return c.toString();
+    }, ...(ngDevMode ? [{ debugName: "displayCount" }] : /* istanbul ignore next */ []));
+    onClick() {
+        if (!this.disabled()) {
+            this.clicked.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CardButton, isStandalone: true, selector: "tm-card-button", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  type=\"button\"\n  [attr.aria-label]=\"ariaLabel() + (showBadge() ? ', ' + count() + ' items' : '')\"\n  [disabled]=\"disabled()\"\n  (click)=\"onClick()\"\n  class=\"\n    relative inline-flex items-center justify-center\n    w-6 h-6\n    bg-transparent text-tm-secondary\n    transition-colors duration-200\n    hover:text-tm-secondary\n    disabled:opacity-40 disabled:cursor-not-allowed\n    cursor-pointer text-tm-tertiary\n  \"\n>\n  <!-- Icono del carrito -->\n  <lucide-icon\n    [img]=\"cartIcon\"\n    [size]=\"24\"\n    [strokeWidth]=\"1.75\"\n  />\n\n  <!-- Badge con cantidad -->\n  @if (showBadge()) {\n    <span\n      class=\"\n        absolute -top-2.5 -right-2.5\n        inline-flex items-center justify-center\n        min-w-5 h-5 px-1\n        rounded-full\n        bg-tm-base-black text-tm-base-white\n        text-[10px] font-medium leading-none\n        select-none\n      \"\n      aria-hidden=\"true\"\n    >\n      {{ displayCount() }}\n    </span>\n  }\n</button>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-card-button', standalone: true, imports: [LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  [attr.aria-label]=\"ariaLabel() + (showBadge() ? ', ' + count() + ' items' : '')\"\n  [disabled]=\"disabled()\"\n  (click)=\"onClick()\"\n  class=\"\n    relative inline-flex items-center justify-center\n    w-6 h-6\n    bg-transparent text-tm-secondary\n    transition-colors duration-200\n    hover:text-tm-secondary\n    disabled:opacity-40 disabled:cursor-not-allowed\n    cursor-pointer text-tm-tertiary\n  \"\n>\n  <!-- Icono del carrito -->\n  <lucide-icon\n    [img]=\"cartIcon\"\n    [size]=\"24\"\n    [strokeWidth]=\"1.75\"\n  />\n\n  <!-- Badge con cantidad -->\n  @if (showBadge()) {\n    <span\n      class=\"\n        absolute -top-2.5 -right-2.5\n        inline-flex items-center justify-center\n        min-w-5 h-5 px-1\n        rounded-full\n        bg-tm-base-black text-tm-base-white\n        text-[10px] font-medium leading-none\n        select-none\n      \"\n      aria-hidden=\"true\"\n    >\n      {{ displayCount() }}\n    </span>\n  }\n</button>\n" }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+class BtnTheme {
+    mode = input('light', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /* Emite el nuevo modo luego del toggle */
+    modeChange = output();
+    sunIcon = Sun;
+    moonIcon = Moon;
+    isDark = computed(() => this.mode() === 'dark', ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    currentIcon = computed(() => (this.isDark() ? this.moonIcon : this.sunIcon), ...(ngDevMode ? [{ debugName: "currentIcon" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => this.isDark() ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    onClick() {
+        if (!this.disabled()) {
+            this.modeChange.emit(this.isDark() ? 'light' : 'dark');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BtnTheme, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: BtnTheme, isStandalone: true, selector: "tm-btn-theme", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modeChange: "modeChange" }, ngImport: i0, template: "<button\n  type=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onClick()\"\n  class=\"\n    inline-flex items-center justify-center\n    w-10 h-10 p-2 rounded-full\n    bg-transparent text-tm-secondary\n    border border-tm-subtle\n    transition-all duration-50 linear\n    hover:border-tm-default\n    hover:text-tm-primary\n    disabled:opacity-40 disabled:cursor-not-allowed\n    cursor-pointer\n  \"\n>\n  <lucide-icon\n    [img]=\"currentIcon()\"\n    [size]=\"20\"\n    [strokeWidth]=\"1.75\"\n    class=\"text-current transition-transform duration-50 linear\"\n  />\n</button>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BtnTheme, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-btn-theme', standalone: true, imports: [LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onClick()\"\n  class=\"\n    inline-flex items-center justify-center\n    w-10 h-10 p-2 rounded-full\n    bg-transparent text-tm-secondary\n    border border-tm-subtle\n    transition-all duration-50 linear\n    hover:border-tm-default\n    hover:text-tm-primary\n    disabled:opacity-40 disabled:cursor-not-allowed\n    cursor-pointer\n  \"\n>\n  <lucide-icon\n    [img]=\"currentIcon()\"\n    [size]=\"20\"\n    [strokeWidth]=\"1.75\"\n    class=\"text-current transition-transform duration-50 linear\"\n  />\n</button>\n" }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }] } });
+
+class MenuTriggerDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MenuTriggerDirective, isStandalone: true, selector: "[tmMenuTrigger]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tmMenuTrigger]',
+                    standalone: true,
+                }]
+        }] });
+
+class MenuComponent {
+    // ── Inputs
+    placement = input('bottom-end', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    triggerOn = input('click', ...(ngDevMode ? [{ debugName: "triggerOn" }] : /* istanbul ignore next */ []));
+    opened = output();
+    closed = output();
+    // ── ContentChild
+    triggerTemplate;
+    // ── State
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    // ── CDK
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    el = inject(ElementRef);
+    overlayRef;
+    // ── Trigger handlers
+    onClickHost() {
+        const mode = this.triggerOn();
+        if (mode === 'click' || mode === 'both') {
+            this.isOpen() ? this.close() : this.open();
+        }
+    }
+    onMouseEnter() {
+        if (this.triggerOn() === 'hover' || this.triggerOn() === 'both') {
+            this.open();
+        }
+    }
+    onMouseLeave() {
+        if (this.triggerOn() === 'hover' || this.triggerOn() === 'both') {
+            this.close();
+        }
+    }
+    open() {
+        if (this.overlayRef?.hasAttached())
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.el)
+            .withPositions([this.getPosition()]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: this.triggerOn() !== 'hover',
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        this.overlayRef.backdropClick().subscribe(() => this.close());
+        const portal = new TemplatePortal(this.menuTemplate, this.vcr);
+        this.overlayRef.attach(portal);
+        this.isOpen.set(true);
+        this.opened.emit();
+    }
+    close() {
+        this.overlayRef?.detach();
+        this.isOpen.set(false);
+        this.closed.emit();
+    }
+    getPosition() {
+        const map = {
+            'bottom-end': { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+            'bottom-start': { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            'top-end': { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+            'top-start': { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+        };
+        return map[this.placement()];
+    }
+    ngOnDestroy() {
+        this.overlayRef?.dispose();
+    }
+    // referencia al template del menú
+    menuTemplate;
+    set setMenuTemplate(t) {
+        this.menuTemplate = t;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MenuComponent, isStandalone: true, selector: "tm-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, triggerOn: { classPropertyName: "triggerOn", publicName: "triggerOn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onClickHost()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: MenuTriggerDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "setMenuTemplate", first: true, predicate: ["menuPanel"], descendants: true }], ngImport: i0, template: "@if (triggerTemplate) {\n  <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n}\n\n<ng-template #menuPanel>\n  <div class=\"bg-tm-surface rounded-xl shadow-md flex flex-col min-w-48\">\n\n    <!-- Header opcional (avatar, nombre, rol) -->\n    <ng-content select=\"[menuHeader]\" />\n\n    <!-- Items -->\n    <div class=\"px-2 py-1 flex flex-col w-full\">\n      <ng-content />\n    </div>\n\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-menu', standalone: true, imports: [NgTemplateOutlet, OverlayModule], template: "@if (triggerTemplate) {\n  <ng-container [ngTemplateOutlet]=\"triggerTemplate\" />\n}\n\n<ng-template #menuPanel>\n  <div class=\"bg-tm-surface rounded-xl shadow-md flex flex-col min-w-48\">\n\n    <!-- Header opcional (avatar, nombre, rol) -->\n    <ng-content select=\"[menuHeader]\" />\n\n    <!-- Items -->\n    <div class=\"px-2 py-1 flex flex-col w-full\">\n      <ng-content />\n    </div>\n\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], triggerOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerOn", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], triggerTemplate: [{
+                type: ContentChild,
+                args: [MenuTriggerDirective, { read: TemplateRef }]
+            }], onClickHost: [{
+                type: HostListener,
+                args: ['click']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], setMenuTemplate: [{
+                type: ViewChild,
+                args: ['menuPanel']
+            }] } });
+
+class MenuItem {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    danger = input(false, ...(ngDevMode ? [{ debugName: "danger" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    selected = output();
+    onClick() {
+        if (!this.disabled()) {
+            this.selected.emit();
+        }
+    }
+    divider = input(false, ...(ngDevMode ? [{ debugName: "divider" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MenuItem, isStandalone: true, selector: "tm-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "@if (divider()) {\n  <div class=\"-mx-2 self-stretch h-px bg-tm-subtle my-1\"></div>\n}\n<tm-button\n  type=\"ghost\"\n  size=\"md\"\n  [color]=\"danger() ? 'danger' : 'primary'\"\n  [disabled]=\"disabled()\"\n  [iconLeft]=\"icon()\"\n  customClass=\"w-full justify-start\"\n  (clicked)=\"onClick()\"\n>\n  {{ label() }}\n</tm-button>\n", dependencies: [{ kind: "component", type: BtnPrimary, selector: "tm-button", inputs: ["color", "size", "type", "active", "disabled", "iconLeft", "iconRight", "rounded", "customClass"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MenuItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-menu-item', standalone: true, imports: [BtnPrimary], template: "@if (divider()) {\n  <div class=\"-mx-2 self-stretch h-px bg-tm-subtle my-1\"></div>\n}\n<tm-button\n  type=\"ghost\"\n  size=\"md\"\n  [color]=\"danger() ? 'danger' : 'primary'\"\n  [disabled]=\"disabled()\"\n  [iconLeft]=\"icon()\"\n  customClass=\"w-full justify-start\"\n  (clicked)=\"onClick()\"\n>\n  {{ label() }}\n</tm-button>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }] } });
+
+const TmMenu = [
+    MenuComponent,
+    MenuTriggerDirective,
+    MenuItem,
+];
+
+const BASE = 'inline-flex items-center justify-center flex-shrink-0 ' + 'transition-all duration-200';
+const ROUNDED = {
+    default: 'rounded-lg',
+    full: 'rounded-full',
+};
+// Cuadrado — mismo valor en width y height
+const SIZES = {
+    lg: 'w-11 h-11', // 44px
+    md: 'w-10 h-10', // 40px
+    sm: 'w-9 h-9', // 36px
+};
+const ICON_SIZES = {
+    lg: 20,
+    md: 18,
+    sm: 16,
+};
+const VARIANTS = {
+    primary: {
+        filled: 'bg-tm-brand text-tm-inverse hover:bg-tm-brand-hover-default',
+        outlined: 'border border-tm-default text-tm-primary hover:bg-tm-brand-hover-subtle',
+        ghost: 'text-tm-primary hover:bg-tm-brand-hover-subtle',
+    },
+    danger: {
+        filled: 'bg-tm-red-500 text-tm-base-white hover:bg-tm-red-600',
+        outlined: 'border border-tm-default text-red-500 hover:bg-tm-red-500/10',
+        ghost: 'text-tm-red-500 hover:bg-tm-red-500/10',
+    },
+    success: {
+        filled: 'bg-tm-green-500 text-tm-base-white hover:bg-tm-green-600',
+        outlined: 'border border-tm-default text-tm-green-500 hover:bg-tm-green-500/10',
+        ghost: 'text-tm-green-500 hover:bg-tm-green-500/10',
+    },
+    warning: {
+        filled: 'bg-tm-yellow-500 text-tm-base-black hover:bg-tm-yellow-600',
+        outlined: 'border border-tm-default text-tm-yellow-500 hover:bg-tm-yellow-500/10',
+        ghost: 'text-tm-yellow-600 hover:bg-tm-yellow-500/10',
+    },
+};
+class BtnIcon {
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    type = input('filled', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    rounded = input('default', ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    clicked = output();
+    iconSize = computed(() => ICON_SIZES[this.size()], ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        BASE,
+        SIZES[this.size()],
+        VARIANTS[this.color()][this.type()],
+        ROUNDED[this.rounded()],
+        this.active() ? 'brightness-90' : '',
+        this.disabled() ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer',
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (!this.disabled())
+            this.clicked.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BtnIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: BtnIcon, isStandalone: true, selector: "tm-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.disabled": "disabled() || null" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  [class]=\"classes()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"onClick($event)\"\n>\n  <lucide-icon [img]=\"icon()\" [size]=\"iconSize()\" [strokeWidth]=\"1.75\" class=\"text-current\" />\n</button>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BtnIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-icon-button', standalone: true, imports: [LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.disabled]': 'disabled() || null',
+                    }, template: "<button\n  type=\"button\"\n  [class]=\"classes()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"onClick($event)\"\n>\n  <lucide-icon [img]=\"icon()\" [size]=\"iconSize()\" [strokeWidth]=\"1.75\" class=\"text-current\" />\n</button>\n" }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+const SIZE_WRAPPER = {
+    md: 'h-11 min-h-11 px-4 py-2 gap-2.5 text-sm',
+    sm: 'h-10 min-h-10 px-4 py-2 gap-2 text-xs',
+};
+const BASE_WRAPPER = 'inline-flex items-center rounded-lg border w-full transition-all duration-300 hover:shadow-md cursor-text';
+const STATE_WRAPPER = {
+    default: 'border-tm-default text-tm-secondary hover:border-tm-strong',
+    active: 'border-tm-default text-tm-primary ring-2 ring-tm-default/20',
+    disabled: 'border-tm-subtle text-tm-secondary bg-tm-subtle cursor-not-allowed hover:shadow-none',
+    error: 'border-tm-red-500 text-tm-secondary',
+};
+class TmSelect {
+    el = inject(ElementRef);
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    overlayRef;
+    // ── Inputs
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    placeholder = input('Seleccionar...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    // ── Model
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    // ── Output
+    changed = output();
+    // ── State
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    // ── Icons
+    chevronDown = ChevronDown;
+    xIcon = X;
+    checkIcon = CheckIcon;
+    dropdownPanel;
+    // ── Computed
+    currentState = computed(() => {
+        if (this.disabled())
+            return 'disabled';
+        if (this.error())
+            return 'error';
+        if (this.isOpen())
+            return 'active';
+        return 'default';
+    }, ...(ngDevMode ? [{ debugName: "currentState" }] : /* istanbul ignore next */ []));
+    wrapperClasses = computed(() => [BASE_WRAPPER, SIZE_WRAPPER[this.size()], STATE_WRAPPER[this.currentState()]].join(' '), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    selectedOption = computed(() => this.options().find(o => o.value === this.value()) ?? null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
+    selectedLabel = computed(() => this.selectedOption()?.label ?? '', ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const term = this.search().toLowerCase();
+        return term
+            ? this.options().filter(o => o.label.toLowerCase().includes(term))
+            : this.options();
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    // ── CDK
+    open() {
+        if (this.overlayRef?.hasAttached() || this.disabled())
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.el)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+        ]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            minWidth: this.el.nativeElement.getBoundingClientRect().width,
+        });
+        this.overlayRef.backdropClick().subscribe(() => this.close());
+        this.overlayRef.attach(new TemplatePortal(this.dropdownPanel, this.vcr));
+        this.isOpen.set(true);
+    }
+    close() {
+        this.overlayRef?.detach();
+        this.isOpen.set(false);
+        this.search.set('');
+    }
+    toggle() {
+        this.isOpen() ? this.close() : this.open();
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        this.value.set(option.value);
+        this.changed.emit(option);
+        this.close();
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.value.set(null);
+        this.changed.emit(null);
+    }
+    onInput(event) {
+        this.search.set(event.target.value);
+        if (!this.isOpen())
+            this.open();
+    }
+    ngOnDestroy() {
+        this.overlayRef?.dispose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TmSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TmSelect, isStandalone: true, selector: "tm-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { classAttribute: "block w-full" }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-1.5 w-full\">\n  @if (label()) {\n    <label class=\"block text-sm font-medium text-tm-primary mb-1.5\">{{ label() }}</label>\n  }\n\n  <div [class]=\"wrapperClasses()\" (click)=\"toggle()\">\n    <div class=\"flex items-center gap-2 min-w-0 flex-1\">\n      @if (selectedOption()?.avatar) {\n        <img [src]=\"selectedOption()!.avatar\" class=\"w-5 h-5 rounded-full object-cover shrink-0\" />\n      } @else if (selectedOption()?.icon) {\n        <lucide-icon\n          [img]=\"selectedOption()!.icon!\"\n          [size]=\"16\"\n          class=\"shrink-0 text-tm-secondary\"\n        />\n      }\n\n      <input\n        class=\"flex-1 bg-transparent outline-none focus:outline-none border-0 text-tm-primary placeholder:text-tm-secondary min-w-0\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [class.cursor-pointer]=\"!disabled()\"\n        [placeholder]=\"isOpen() ? 'Buscar...' : selectedLabel() || placeholder()\"\n        [value]=\"isOpen() ? search() : ''\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (click)=\"$event.stopPropagation(); open()\"\n      />\n    </div>\n\n    <div class=\"flex items-center gap-1 shrink-0\">\n      @if (value() !== null && !disabled()) {\n        <button\n          (click)=\"clear($event)\"\n          class=\"p-0.5 rounded text-tm-tertiary hover:text-tm-primary transition-colors\"\n        >\n          <lucide-icon [img]=\"xIcon\" [size]=\"14\" />\n        </button>\n      }\n      <lucide-icon\n        [img]=\"chevronDown\"\n        [size]=\"16\"\n        class=\"text-tm-tertiary transition-transform duration-200\"\n        [class.rotate-180]=\"isOpen()\"\n      />\n    </div>\n  </div>\n\n  <ng-template #dropdownPanel>\n    <div\n      class=\"rounded-xl bg-tm-surface shadow-lg shadow-black/10 border border-tm-default py-1.5 mt-1 overflow-hidden\"\n    >\n      <div class=\"overflow-y-auto max-h-52\">\n        @for (opt of filteredOptions(); track opt.value) {\n          <div\n            class=\"flex items-center gap-2.5 px-3 py-2 text-sm cursor-pointer transition-colors\"\n            [class]=\"\n              opt.disabled\n                ? 'opacity-40 cursor-not-allowed'\n                : value() === opt.value\n                  ? 'bg-tm-subtle text-tm-primary font-medium'\n                  : 'text-tm-primary hover:bg-tm-canvas'\n            \"\n            (click)=\"selectOption(opt)\"\n          >\n            @if (opt.avatar) {\n              <img [src]=\"opt.avatar\" class=\"w-6 h-6 rounded-full object-cover shrink-0\" />\n            } @else if (opt.icon) {\n              <lucide-icon [img]=\"opt.icon\" [size]=\"16\" class=\"shrink-0 text-tm-secondary\" />\n            }\n            <span class=\"truncate flex-1\">{{ opt.label }}</span>\n            @if (value() === opt.value) {\n              <lucide-icon [img]=\"checkIcon\" [size]=\"14\" class=\"text-tm-brand shrink-0\" />\n            }\n          </div>\n        }\n\n        @if (filteredOptions().length === 0) {\n          <div class=\"px-3 py-4 text-sm text-tm-tertiary text-center\">Sin resultados</div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  @if (error()) {\n    <span class=\"text-xs text-tm-red-500\">{{ error() }}</span>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: OverlayModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TmSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'tm-select', standalone: true, host: { class: 'block w-full' }, imports: [FormsModule, LucideAngularModule, OverlayModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1.5 w-full\">\n  @if (label()) {\n    <label class=\"block text-sm font-medium text-tm-primary mb-1.5\">{{ label() }}</label>\n  }\n\n  <div [class]=\"wrapperClasses()\" (click)=\"toggle()\">\n    <div class=\"flex items-center gap-2 min-w-0 flex-1\">\n      @if (selectedOption()?.avatar) {\n        <img [src]=\"selectedOption()!.avatar\" class=\"w-5 h-5 rounded-full object-cover shrink-0\" />\n      } @else if (selectedOption()?.icon) {\n        <lucide-icon\n          [img]=\"selectedOption()!.icon!\"\n          [size]=\"16\"\n          class=\"shrink-0 text-tm-secondary\"\n        />\n      }\n\n      <input\n        class=\"flex-1 bg-transparent outline-none focus:outline-none border-0 text-tm-primary placeholder:text-tm-secondary min-w-0\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [class.cursor-pointer]=\"!disabled()\"\n        [placeholder]=\"isOpen() ? 'Buscar...' : selectedLabel() || placeholder()\"\n        [value]=\"isOpen() ? search() : ''\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (click)=\"$event.stopPropagation(); open()\"\n      />\n    </div>\n\n    <div class=\"flex items-center gap-1 shrink-0\">\n      @if (value() !== null && !disabled()) {\n        <button\n          (click)=\"clear($event)\"\n          class=\"p-0.5 rounded text-tm-tertiary hover:text-tm-primary transition-colors\"\n        >\n          <lucide-icon [img]=\"xIcon\" [size]=\"14\" />\n        </button>\n      }\n      <lucide-icon\n        [img]=\"chevronDown\"\n        [size]=\"16\"\n        class=\"text-tm-tertiary transition-transform duration-200\"\n        [class.rotate-180]=\"isOpen()\"\n      />\n    </div>\n  </div>\n\n  <ng-template #dropdownPanel>\n    <div\n      class=\"rounded-xl bg-tm-surface shadow-lg shadow-black/10 border border-tm-default py-1.5 mt-1 overflow-hidden\"\n    >\n      <div class=\"overflow-y-auto max-h-52\">\n        @for (opt of filteredOptions(); track opt.value) {\n          <div\n            class=\"flex items-center gap-2.5 px-3 py-2 text-sm cursor-pointer transition-colors\"\n            [class]=\"\n              opt.disabled\n                ? 'opacity-40 cursor-not-allowed'\n                : value() === opt.value\n                  ? 'bg-tm-subtle text-tm-primary font-medium'\n                  : 'text-tm-primary hover:bg-tm-canvas'\n            \"\n            (click)=\"selectOption(opt)\"\n          >\n            @if (opt.avatar) {\n              <img [src]=\"opt.avatar\" class=\"w-6 h-6 rounded-full object-cover shrink-0\" />\n            } @else if (opt.icon) {\n              <lucide-icon [img]=\"opt.icon\" [size]=\"16\" class=\"shrink-0 text-tm-secondary\" />\n            }\n            <span class=\"truncate flex-1\">{{ opt.label }}</span>\n            @if (value() === opt.value) {\n              <lucide-icon [img]=\"checkIcon\" [size]=\"14\" class=\"text-tm-brand shrink-0\" />\n            }\n          </div>\n        }\n\n        @if (filteredOptions().length === 0) {\n          <div class=\"px-3 py-4 text-sm text-tm-tertiary text-center\">Sin resultados</div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  @if (error()) {\n    <span class=\"text-xs text-tm-red-500\">{{ error() }}</span>\n  }\n</div>\n" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], dropdownPanel: [{
+                type: ViewChild,
+                args: ['dropdownPanel']
+            }] } });
+
+/*
+ * Public API Surface of tm-ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Avatar, BtnIcon, BtnPrimary, BtnTheme, CardButton, CheckboxButton, Chip, CloseDialog, InputTen, MenuComponent, MenuItem, MenuTriggerDirective, RadioButton, Snackbar, SnackbarHost, SnackbarService, TmMenu, TmSelect, Toggle, TwCart };
+//# sourceMappingURL=ten-minds-ui-kit.mjs.map