@eduboxpro/studio 0.1.6 → 0.1.8

package/fesm2022/eduboxpro-studio.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, viewChild, forwardRef, model } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, forwardRef, viewChild, model } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i1 from 'lucide-angular';
-import { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS, Moon, Sun, ShoppingCart, Loader2, Loader, RotateCw, RefreshCw, Printer, Save, Image, Folder, FileText, File, HelpCircle, XCircle, CheckCircle, Info, AlertTriangle, AlertCircle, LogOut, LogIn, Unlock, Lock, EyeOff, Eye, Clock, Calendar, Bell, MoreHorizontal, MoreVertical, Menu, Home, Share2, Copy, Link, ExternalLink, Filter, Search, X, Check, Minus, Plus, Edit, Trash2, User, Settings, Star, Heart, Phone, Mail, Upload, Download, ChevronRight, ChevronLeft, ChevronUp, ChevronDown, ArrowLeft, ArrowRight } from 'lucide-angular';
+import { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS, Laptop, MessageSquare, List, Grid3x3, Strikethrough, Underline, Italic, Bold, AlignJustify, AlignRight, AlignCenter, AlignLeft, Moon, Sun, ShoppingCart, Loader2, Loader, RotateCw, RefreshCw, Printer, Save, Image, Folder, FileText, File, HelpCircle, XCircle, CheckCircle, Info, AlertTriangle, AlertCircle, LogOut, LogIn, Unlock, Lock, EyeOff, Eye, Clock, Calendar, Bell, MoreHorizontal, MoreVertical, Menu, Home, Share2, Copy, Link, ExternalLink, Filter, Search, X, Check, Minus, Plus, Edit, Trash2, User, Settings, Star, Heart, Phone, Mail, Upload, Download, ChevronRight, ChevronLeft, ChevronUp, ChevronDown, ArrowLeft, ArrowRight } from 'lucide-angular';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
@@ -442,7 +443,19 @@ function provideStudioIcons() {
                 Loader2,
                 ShoppingCart,
                 Sun,
-                Moon
+                Moon,
+                AlignLeft,
+                AlignCenter,
+                AlignRight,
+                AlignJustify,
+                Bold,
+                Italic,
+                Underline,
+                Strikethrough,
+                Grid3x3,
+                List,
+                MessageSquare,
+                Laptop
             })
         }
     ]);
@@ -868,6 +881,302 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Button component
  */
 
+class ButtonGroupComponent {
+    elementRef = inject(ElementRef);
+    configService = inject(StudioConfigService);
+    groupDefaults = computed(() => this.configService.config().components?.buttonGroup, ...(ngDevMode ? [{ debugName: "groupDefaults" }] : []));
+    orientationInput = input(undefined, ...(ngDevMode ? [{ debugName: "orientationInput", alias: 'orientation' }] : [{ alias: 'orientation' }]));
+    sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
+    variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
+    colorInput = input(undefined, ...(ngDevMode ? [{ debugName: "colorInput", alias: 'color' }] : [{ alias: 'color' }]));
+    radiusInput = input(undefined, ...(ngDevMode ? [{ debugName: "radiusInput", alias: 'radius' }] : [{ alias: 'radius' }]));
+    orientation = withConfigDefault(this.orientationInput, computed(() => this.groupDefaults()?.orientation), 'horizontal');
+    size = withConfigDefault(this.sizeInput, computed(() => this.groupDefaults()?.size), undefined);
+    variant = withConfigDefault(this.variantInput, computed(() => this.groupDefaults()?.variant), undefined);
+    color = withConfigDefault(this.colorInput, computed(() => this.groupDefaults()?.color), undefined);
+    radius = withConfigDefault(this.radiusInput, computed(() => this.groupDefaults()?.radius), undefined);
+    attached = input(false, ...(ngDevMode ? [{ debugName: "attached" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    spacing = input('sm', ...(ngDevMode ? [{ debugName: "spacing" }] : []));
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    role = input('group', ...(ngDevMode ? [{ debugName: "role" }] : []));
+    hostClasses = computed(() => classNames('studio-button-group', `studio-button-group--${this.orientation()}`, `studio-button-group--spacing-${this.spacing()}`, `studio-button-group--align-${this.align()}`, this.attached() && 'studio-button-group--attached', this.fullWidth() && 'studio-button-group--full', this.disabled() && 'studio-button-group--disabled'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    constructor() {
+        effect(() => {
+            const isAttached = this.attached();
+            const hostElement = this.elementRef.nativeElement;
+            const buttonElements = hostElement.querySelectorAll('studio-button');
+            buttonElements.forEach((buttonEl, index) => {
+                const isFirst = index === 0;
+                const isLast = index === buttonElements.length - 1;
+                const isMiddle = !isFirst && !isLast;
+                if (isAttached) {
+                    buttonEl.classList.add('studio-button-group__item--attached');
+                    if (isFirst)
+                        buttonEl.classList.add('studio-button-group__item--first');
+                    if (isLast)
+                        buttonEl.classList.add('studio-button-group__item--last');
+                    if (isMiddle)
+                        buttonEl.classList.add('studio-button-group__item--middle');
+                }
+                else {
+                    buttonEl.classList.remove('studio-button-group__item--attached');
+                    buttonEl.classList.remove('studio-button-group__item--first');
+                    buttonEl.classList.remove('studio-button-group__item--last');
+                    buttonEl.classList.remove('studio-button-group__item--middle');
+                }
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: ButtonGroupComponent, isStandalone: true, selector: "studio-button-group", inputs: { orientationInput: { classPropertyName: "orientationInput", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, colorInput: { classPropertyName: "colorInput", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radiusInput: { classPropertyName: "radiusInput", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, attached: { classPropertyName: "attached", publicName: "attached", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "role()", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: `<ng-content select="studio-button" />`, isInline: true, styles: [":host{display:inline-flex;align-items:center;position:relative}:host(.studio-button-group--horizontal){flex-direction:row}:host(.studio-button-group--vertical){flex-direction:column}:host(.studio-button-group--spacing-none){gap:0}:host(.studio-button-group--spacing-xs){gap:var(--studio-spacing-xs)}:host(.studio-button-group--spacing-sm){gap:var(--studio-spacing-sm)}:host(.studio-button-group--spacing-md){gap:var(--studio-spacing-md)}:host(.studio-button-group--spacing-lg){gap:var(--studio-spacing-lg)}:host(.studio-button-group--align-start){justify-content:flex-start}:host(.studio-button-group--align-center){justify-content:center}:host(.studio-button-group--align-end){justify-content:flex-end}:host(.studio-button-group--align-stretch){align-items:stretch}:host(.studio-button-group--align-stretch) ::ng-deep studio-button{flex:1}:host(.studio-button-group--full){width:100%}:host(.studio-button-group--full) ::ng-deep studio-button{flex:1}:host(.studio-button-group--attached){gap:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--attached{margin:0;position:relative}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--middle{border-radius:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--first:not(.studio-button-group__item--last){border-top-right-radius:0;border-bottom-right-radius:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--last:not(.studio-button-group__item--first){border-top-left-radius:0;border-bottom-left-radius:0}:host(.studio-button-group--attached).studio-button-group--horizontal ::ng-deep studio-button.studio-button-group__item--attached:not(:last-child){border-right:1px solid rgba(0,0,0,.1)}:host(.studio-button-group--attached).studio-button-group--horizontal ::ng-deep studio-button.studio-button-group__item--attached.studio-button--outline:not(:last-child){margin-right:-1px}:host(.studio-button-group--vertical){align-items:stretch}:host(.studio-button-group--vertical) ::ng-deep studio-button{width:100%;justify-content:flex-start}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--first:not(.studio-button-group__item--last){border-top-right-radius:var(--studio-radius-sm);border-bottom-right-radius:0;border-top-left-radius:var(--studio-radius-sm);border-bottom-left-radius:0}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--last:not(.studio-button-group__item--first){border-top-left-radius:0;border-bottom-left-radius:var(--studio-radius-sm);border-top-right-radius:0;border-bottom-right-radius:var(--studio-radius-sm)}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--attached:not(:last-child){border-right:none;border-bottom:1px solid rgba(255,255,255,.2)}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--middle{border-radius:0}:host(.studio-button-group--vertical.studio-button-group--full) ::ng-deep studio-button{width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-button-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': 'role()',
+                        '[attr.aria-label]': 'ariaLabel()'
+                    }, template: `<ng-content select="studio-button" />`, styles: [":host{display:inline-flex;align-items:center;position:relative}:host(.studio-button-group--horizontal){flex-direction:row}:host(.studio-button-group--vertical){flex-direction:column}:host(.studio-button-group--spacing-none){gap:0}:host(.studio-button-group--spacing-xs){gap:var(--studio-spacing-xs)}:host(.studio-button-group--spacing-sm){gap:var(--studio-spacing-sm)}:host(.studio-button-group--spacing-md){gap:var(--studio-spacing-md)}:host(.studio-button-group--spacing-lg){gap:var(--studio-spacing-lg)}:host(.studio-button-group--align-start){justify-content:flex-start}:host(.studio-button-group--align-center){justify-content:center}:host(.studio-button-group--align-end){justify-content:flex-end}:host(.studio-button-group--align-stretch){align-items:stretch}:host(.studio-button-group--align-stretch) ::ng-deep studio-button{flex:1}:host(.studio-button-group--full){width:100%}:host(.studio-button-group--full) ::ng-deep studio-button{flex:1}:host(.studio-button-group--attached){gap:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--attached{margin:0;position:relative}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--middle{border-radius:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--first:not(.studio-button-group__item--last){border-top-right-radius:0;border-bottom-right-radius:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--last:not(.studio-button-group__item--first){border-top-left-radius:0;border-bottom-left-radius:0}:host(.studio-button-group--attached).studio-button-group--horizontal ::ng-deep studio-button.studio-button-group__item--attached:not(:last-child){border-right:1px solid rgba(0,0,0,.1)}:host(.studio-button-group--attached).studio-button-group--horizontal ::ng-deep studio-button.studio-button-group__item--attached.studio-button--outline:not(:last-child){margin-right:-1px}:host(.studio-button-group--vertical){align-items:stretch}:host(.studio-button-group--vertical) ::ng-deep studio-button{width:100%;justify-content:flex-start}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--first:not(.studio-button-group__item--last){border-top-right-radius:var(--studio-radius-sm);border-bottom-right-radius:0;border-top-left-radius:var(--studio-radius-sm);border-bottom-left-radius:0}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--last:not(.studio-button-group__item--first){border-top-left-radius:0;border-bottom-left-radius:var(--studio-radius-sm);border-top-right-radius:0;border-bottom-right-radius:var(--studio-radius-sm)}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--attached:not(:last-child){border-right:none;border-bottom:1px solid rgba(255,255,255,.2)}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--middle{border-radius:0}:host(.studio-button-group--vertical.studio-button-group--full) ::ng-deep studio-button{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], colorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], attached: [{ type: i0.Input, args: [{ isSignal: true, alias: "attached", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
+
+/**
+ * Checkbox component for selecting boolean values
+ *
+ * @example
+ * <studio-checkbox
+ *   [(ngModel)]="accepted"
+ *   label="I accept terms and conditions"
+ *   (changed)="onAccept($event)"
+ * />
+ */
+class CheckboxComponent {
+    configService = inject(StudioConfigService);
+    checkboxDefaults = computed(() => this.configService.config().components?.checkbox, ...(ngDevMode ? [{ debugName: "checkboxDefaults" }] : []));
+    // ==========================================
+    // INPUTS - Appearance
+    // ==========================================
+    /**
+     * Size of the checkbox
+     */
+    size = input(this.checkboxDefaults()?.size ?? 'md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Color scheme
+     */
+    color = input(this.checkboxDefaults()?.color ?? 'primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    /**
+     * Visual variant
+     */
+    variant = input(this.checkboxDefaults()?.variant ?? 'default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * Border radius
+     */
+    radius = input(this.checkboxDefaults()?.radius ?? 'sm', ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    // ==========================================
+    // INPUTS - Labels & Description
+    // ==========================================
+    /**
+     * Label text
+     */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    /**
+     * Label position relative to checkbox
+     */
+    labelPosition = input(this.checkboxDefaults()?.labelPosition ?? 'right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    /**
+     * Additional description text
+     */
+    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+    /**
+     * Helper text
+     */
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : []));
+    // ==========================================
+    // INPUTS - Validation
+    // ==========================================
+    /**
+     * Required field
+     */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /**
+     * Error state
+     */
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /**
+     * Error message
+     */
+    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : []));
+    // ==========================================
+    // INPUTS - Behavior
+    // ==========================================
+    /**
+     * Disabled state
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Readonly state
+     */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    /**
+     * Indeterminate state (for "select all" checkboxes)
+     */
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
+    /**
+     * Name attribute for form control
+     */
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    /**
+     * Tab index
+     */
+    tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+    /**
+     * Value for checkbox groups
+     */
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    // ==========================================
+    // OUTPUTS
+    // ==========================================
+    /**
+     * Emitted when checkbox state changes
+     */
+    changed = output();
+    // ==========================================
+    // STATE
+    // ==========================================
+    /**
+     * Internal checked state
+     */
+    internalChecked = signal(false, ...(ngDevMode ? [{ debugName: "internalChecked" }] : []));
+    /**
+     * Internal focus state
+     */
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    /**
+     * Unique ID for accessibility
+     */
+    checkboxId = signal(`studio-checkbox-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "checkboxId" }] : []));
+    // ==========================================
+    // COMPUTED
+    // ==========================================
+    /**
+     * Host CSS classes
+     */
+    hostClasses = computed(() => ({
+        'studio-checkbox-wrapper': true,
+        [`studio-checkbox-wrapper--${this.size()}`]: true,
+        'studio-checkbox-wrapper--disabled': this.disabled(),
+        'studio-checkbox-wrapper--error': this.error(),
+        'studio-checkbox-wrapper--focused': this.isFocused(),
+        'studio-checkbox-wrapper--label-left': this.labelPosition() === 'left'
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    /**
+     * Checkbox element CSS classes
+     */
+    checkboxClasses = computed(() => ({
+        'studio-checkbox': true,
+        [`studio-checkbox--${this.size()}`]: true,
+        [`studio-checkbox--${this.color()}`]: true,
+        [`studio-checkbox--${this.variant()}`]: true,
+        [`studio-checkbox--radius-${this.radius()}`]: true,
+        'studio-checkbox--checked': this.internalChecked(),
+        'studio-checkbox--indeterminate': this.indeterminate(),
+        'studio-checkbox--disabled': this.disabled(),
+        'studio-checkbox--error': this.error()
+    }), ...(ngDevMode ? [{ debugName: "checkboxClasses" }] : []));
+    /**
+     * Show error message
+     */
+    showError = computed(() => this.error() && this.errorMessage(), ...(ngDevMode ? [{ debugName: "showError" }] : []));
+    /**
+     * Show hint
+     */
+    showHint = computed(() => !this.error() && this.hint(), ...(ngDevMode ? [{ debugName: "showHint" }] : []));
+    /**
+     * ARIA checked state
+     */
+    ariaChecked = computed(() => {
+        if (this.indeterminate())
+            return 'mixed';
+        return this.internalChecked() ? 'true' : 'false';
+    }, ...(ngDevMode ? [{ debugName: "ariaChecked" }] : []));
+    // ==========================================
+    // CONTROL VALUE ACCESSOR
+    // ==========================================
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.internalChecked.set(value ?? false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Disabled state is controlled via input
+    }
+    // ==========================================
+    // METHODS
+    // ==========================================
+    /**
+     * Handle checkbox toggle
+     */
+    handleChange(event) {
+        if (this.disabled() || this.readonly()) {
+            event.preventDefault();
+            return;
+        }
+        const newValue = event.target.checked;
+        this.internalChecked.set(newValue);
+        this.onChange(newValue);
+        this.changed.emit(newValue);
+    }
+    /**
+     * Handle focus
+     */
+    handleFocus() {
+        this.isFocused.set(true);
+    }
+    /**
+     * Handle blur
+     */
+    handleBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    /**
+     * Handle label click
+     */
+    handleLabelClick(event) {
+        if (this.disabled() || this.readonly()) {
+            event.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: CheckboxComponent, isStandalone: true, selector: "studio-checkbox", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", 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 }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { properties: { "class": "hostClasses()", "attr.data-size": "size()", "attr.data-color": "color()", "attr.data-disabled": "disabled()", "attr.data-error": "error()" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CheckboxComponent),
+                multi: true
+            }], ngImport: i0, template: "<label\n  [for]=\"checkboxId()\"\n  [ngClass]=\"hostClasses()\"\n  (click)=\"handleLabelClick($event)\"\n>\n  <!-- Checkbox input -->\n  <input\n    type=\"checkbox\"\n    [id]=\"checkboxId()\"\n    [name]=\"name()\"\n    [checked]=\"internalChecked()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [tabIndex]=\"tabIndex()\"\n    [attr.aria-checked]=\"ariaChecked()\"\n    [attr.aria-label]=\"label() || undefined\"\n    [attr.aria-describedby]=\"showHint() || showError() ? checkboxId() + '-description' : undefined\"\n    [attr.aria-invalid]=\"error()\"\n    [attr.aria-required]=\"required()\"\n    class=\"studio-checkbox__input\"\n    (change)=\"handleChange($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Custom checkbox -->\n  <span [ngClass]=\"checkboxClasses()\">\n    <!-- Checkmark icon -->\n    @if (internalChecked() && !indeterminate()) {\n      <svg\n        class=\"studio-checkbox__icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M13.3333 4L6 11.3333L2.66666 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n\n    <!-- Indeterminate icon -->\n    @if (indeterminate()) {\n      <svg\n        class=\"studio-checkbox__icon studio-checkbox__icon--indeterminate\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M4 8H12\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  </span>\n\n  <!-- Label content -->\n  @if (label() || description()) {\n    <span class=\"studio-checkbox__label-wrapper\">\n      @if (label()) {\n        <span class=\"studio-checkbox__label\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"studio-checkbox__required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n\n      @if (description()) {\n        <span class=\"studio-checkbox__description\">\n          {{ description() }}\n        </span>\n      }\n    </span>\n  }\n</label>\n\n<!-- Helper text / Error message -->\n@if (showHint() || showError()) {\n  <div\n    [id]=\"checkboxId() + '-description'\"\n    class=\"studio-checkbox__info\"\n  >\n    @if (showError()) {\n      <span class=\"studio-checkbox__error\">\n        {{ errorMessage() }}\n      </span>\n    }\n\n    @if (showHint()) {\n      <span class=\"studio-checkbox__hint\">\n        {{ hint() }}\n      </span>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-direction:column;font-family:var(--studio-font-family)!important}.studio-checkbox-wrapper{display:inline-flex;align-items:flex-start;gap:var(--studio-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.studio-checkbox-wrapper--label-left{flex-direction:row-reverse}.studio-checkbox-wrapper--disabled{cursor:not-allowed;opacity:.5}.studio-checkbox-wrapper--sm{font-size:var(--studio-font-size-sm)}.studio-checkbox-wrapper--md{font-size:var(--studio-font-size-base)}.studio-checkbox-wrapper--lg{font-size:var(--studio-font-size-lg)}.studio-checkbox__input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.studio-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--studio-border-primary);background-color:var(--studio-bg-primary);transition:all var(--studio-transition-base)}.studio-checkbox--sm{width:1rem;height:1rem}.studio-checkbox--md{width:1.25rem;height:1.25rem}.studio-checkbox--lg{width:1.5rem;height:1.5rem}.studio-checkbox--radius-none{border-radius:0}.studio-checkbox--radius-sm{border-radius:var(--studio-radius-sm)}.studio-checkbox--radius-md{border-radius:var(--studio-radius-md)}.studio-checkbox--radius-lg{border-radius:var(--studio-radius-lg)}.studio-checkbox--radius-full{border-radius:var(--studio-radius-full)}.studio-checkbox--default.studio-checkbox--checked,.studio-checkbox--default.studio-checkbox--indeterminate{border-color:transparent}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--primary{background-color:var(--studio-primary);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--secondary{background-color:var(--studio-secondary);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--success{background-color:var(--studio-success);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--error{background-color:var(--studio-error);color:var(--studio-text-inverse)}.studio-checkbox--outlined.studio-checkbox--checked,.studio-checkbox--outlined.studio-checkbox--indeterminate{background-color:transparent}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--primary{border-color:var(--studio-primary);color:var(--studio-primary)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--secondary{border-color:var(--studio-secondary);color:var(--studio-secondary)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--success{border-color:var(--studio-success);color:var(--studio-success)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--error{border-color:var(--studio-error);color:var(--studio-error)}.studio-checkbox--filled.studio-checkbox--primary{background-color:var(--studio-primary-bg);border-color:var(--studio-primary-bg)}.studio-checkbox--filled.studio-checkbox--secondary{background-color:var(--studio-secondary-bg);border-color:var(--studio-secondary-bg)}.studio-checkbox--filled.studio-checkbox--success{background-color:var(--studio-success-bg);border-color:var(--studio-success-bg)}.studio-checkbox--filled.studio-checkbox--error{background-color:var(--studio-error-bg);border-color:var(--studio-error-bg)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--primary{background-color:var(--studio-primary);border-color:var(--studio-primary);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--secondary{background-color:var(--studio-secondary);border-color:var(--studio-secondary);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--success{background-color:var(--studio-success);border-color:var(--studio-success);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--error{background-color:var(--studio-error);border-color:var(--studio-error);color:var(--studio-text-inverse)}.studio-checkbox--error:not(.studio-checkbox--checked):not(.studio-checkbox--indeterminate){border-color:var(--studio-error)}.studio-checkbox:hover:not(.studio-checkbox--disabled){border-color:var(--studio-border-secondary)}.studio-checkbox__input:focus-visible+.studio-checkbox{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-checkbox__icon{width:100%;height:100%;opacity:0;transform:scale(.8);transition:all var(--studio-transition-fast)}.studio-checkbox--checked .studio-checkbox__icon,.studio-checkbox--indeterminate .studio-checkbox__icon{opacity:1;transform:scale(1)}.studio-checkbox__label-wrapper{display:flex;flex-direction:column;gap:var(--studio-spacing-xs)}.studio-checkbox__label{font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);line-height:var(--studio-line-height-normal)}.studio-checkbox__description{font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-checkbox__required{color:var(--studio-error);margin-left:var(--studio-spacing-xs)}.studio-checkbox__info{display:flex;flex-direction:column;gap:var(--studio-spacing-xs);margin-top:var(--studio-spacing-xs);padding-left:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-checkbox-wrapper--label-left+.studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-checkbox-wrapper--sm .studio-checkbox__info{padding-left:calc(var(--studio-spacing-sm) + 1rem)}.studio-checkbox-wrapper--sm.studio-checkbox-wrapper--label-left .studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1rem)}.studio-checkbox-wrapper--lg .studio-checkbox__info{padding-left:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-checkbox-wrapper--lg.studio-checkbox-wrapper--label-left .studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-checkbox__hint{font-size:var(--studio-font-size-xs);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-checkbox__error{font-size:var(--studio-font-size-xs);color:var(--studio-error);line-height:var(--studio-line-height-normal)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-checkbox', standalone: true, imports: [CommonModule], providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                            multi: true
+                        }], host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-color]': 'color()',
+                        '[attr.data-disabled]': 'disabled()',
+                        '[attr.data-error]': 'error()'
+                    }, template: "<label\n  [for]=\"checkboxId()\"\n  [ngClass]=\"hostClasses()\"\n  (click)=\"handleLabelClick($event)\"\n>\n  <!-- Checkbox input -->\n  <input\n    type=\"checkbox\"\n    [id]=\"checkboxId()\"\n    [name]=\"name()\"\n    [checked]=\"internalChecked()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [tabIndex]=\"tabIndex()\"\n    [attr.aria-checked]=\"ariaChecked()\"\n    [attr.aria-label]=\"label() || undefined\"\n    [attr.aria-describedby]=\"showHint() || showError() ? checkboxId() + '-description' : undefined\"\n    [attr.aria-invalid]=\"error()\"\n    [attr.aria-required]=\"required()\"\n    class=\"studio-checkbox__input\"\n    (change)=\"handleChange($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Custom checkbox -->\n  <span [ngClass]=\"checkboxClasses()\">\n    <!-- Checkmark icon -->\n    @if (internalChecked() && !indeterminate()) {\n      <svg\n        class=\"studio-checkbox__icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M13.3333 4L6 11.3333L2.66666 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n\n    <!-- Indeterminate icon -->\n    @if (indeterminate()) {\n      <svg\n        class=\"studio-checkbox__icon studio-checkbox__icon--indeterminate\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M4 8H12\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  </span>\n\n  <!-- Label content -->\n  @if (label() || description()) {\n    <span class=\"studio-checkbox__label-wrapper\">\n      @if (label()) {\n        <span class=\"studio-checkbox__label\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"studio-checkbox__required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n\n      @if (description()) {\n        <span class=\"studio-checkbox__description\">\n          {{ description() }}\n        </span>\n      }\n    </span>\n  }\n</label>\n\n<!-- Helper text / Error message -->\n@if (showHint() || showError()) {\n  <div\n    [id]=\"checkboxId() + '-description'\"\n    class=\"studio-checkbox__info\"\n  >\n    @if (showError()) {\n      <span class=\"studio-checkbox__error\">\n        {{ errorMessage() }}\n      </span>\n    }\n\n    @if (showHint()) {\n      <span class=\"studio-checkbox__hint\">\n        {{ hint() }}\n      </span>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-direction:column;font-family:var(--studio-font-family)!important}.studio-checkbox-wrapper{display:inline-flex;align-items:flex-start;gap:var(--studio-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.studio-checkbox-wrapper--label-left{flex-direction:row-reverse}.studio-checkbox-wrapper--disabled{cursor:not-allowed;opacity:.5}.studio-checkbox-wrapper--sm{font-size:var(--studio-font-size-sm)}.studio-checkbox-wrapper--md{font-size:var(--studio-font-size-base)}.studio-checkbox-wrapper--lg{font-size:var(--studio-font-size-lg)}.studio-checkbox__input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.studio-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--studio-border-primary);background-color:var(--studio-bg-primary);transition:all var(--studio-transition-base)}.studio-checkbox--sm{width:1rem;height:1rem}.studio-checkbox--md{width:1.25rem;height:1.25rem}.studio-checkbox--lg{width:1.5rem;height:1.5rem}.studio-checkbox--radius-none{border-radius:0}.studio-checkbox--radius-sm{border-radius:var(--studio-radius-sm)}.studio-checkbox--radius-md{border-radius:var(--studio-radius-md)}.studio-checkbox--radius-lg{border-radius:var(--studio-radius-lg)}.studio-checkbox--radius-full{border-radius:var(--studio-radius-full)}.studio-checkbox--default.studio-checkbox--checked,.studio-checkbox--default.studio-checkbox--indeterminate{border-color:transparent}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--primary{background-color:var(--studio-primary);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--secondary{background-color:var(--studio-secondary);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--success{background-color:var(--studio-success);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--error{background-color:var(--studio-error);color:var(--studio-text-inverse)}.studio-checkbox--outlined.studio-checkbox--checked,.studio-checkbox--outlined.studio-checkbox--indeterminate{background-color:transparent}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--primary{border-color:var(--studio-primary);color:var(--studio-primary)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--secondary{border-color:var(--studio-secondary);color:var(--studio-secondary)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--success{border-color:var(--studio-success);color:var(--studio-success)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--error{border-color:var(--studio-error);color:var(--studio-error)}.studio-checkbox--filled.studio-checkbox--primary{background-color:var(--studio-primary-bg);border-color:var(--studio-primary-bg)}.studio-checkbox--filled.studio-checkbox--secondary{background-color:var(--studio-secondary-bg);border-color:var(--studio-secondary-bg)}.studio-checkbox--filled.studio-checkbox--success{background-color:var(--studio-success-bg);border-color:var(--studio-success-bg)}.studio-checkbox--filled.studio-checkbox--error{background-color:var(--studio-error-bg);border-color:var(--studio-error-bg)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--primary{background-color:var(--studio-primary);border-color:var(--studio-primary);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--secondary{background-color:var(--studio-secondary);border-color:var(--studio-secondary);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--success{background-color:var(--studio-success);border-color:var(--studio-success);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--error{background-color:var(--studio-error);border-color:var(--studio-error);color:var(--studio-text-inverse)}.studio-checkbox--error:not(.studio-checkbox--checked):not(.studio-checkbox--indeterminate){border-color:var(--studio-error)}.studio-checkbox:hover:not(.studio-checkbox--disabled){border-color:var(--studio-border-secondary)}.studio-checkbox__input:focus-visible+.studio-checkbox{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-checkbox__icon{width:100%;height:100%;opacity:0;transform:scale(.8);transition:all var(--studio-transition-fast)}.studio-checkbox--checked .studio-checkbox__icon,.studio-checkbox--indeterminate .studio-checkbox__icon{opacity:1;transform:scale(1)}.studio-checkbox__label-wrapper{display:flex;flex-direction:column;gap:var(--studio-spacing-xs)}.studio-checkbox__label{font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);line-height:var(--studio-line-height-normal)}.studio-checkbox__description{font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-checkbox__required{color:var(--studio-error);margin-left:var(--studio-spacing-xs)}.studio-checkbox__info{display:flex;flex-direction:column;gap:var(--studio-spacing-xs);margin-top:var(--studio-spacing-xs);padding-left:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-checkbox-wrapper--label-left+.studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-checkbox-wrapper--sm .studio-checkbox__info{padding-left:calc(var(--studio-spacing-sm) + 1rem)}.studio-checkbox-wrapper--sm.studio-checkbox-wrapper--label-left .studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1rem)}.studio-checkbox-wrapper--lg .studio-checkbox__info{padding-left:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-checkbox-wrapper--lg.studio-checkbox-wrapper--label-left .studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-checkbox__hint{font-size:var(--studio-font-size-xs);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-checkbox__error{font-size:var(--studio-font-size-xs);color:var(--studio-error);line-height:var(--studio-line-height-normal)}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
 /**
  * Input component with form control support, variants, and accessibility
  *
@@ -1138,11 +1447,518 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Switch component
  */
 
+/**
+ * Textarea component for multi-line text input
+ *
+ * @example
+ * <studio-textarea
+ *   [(ngModel)]="message"
+ *   label="Your message"
+ *   placeholder="Enter your message..."
+ *   [rows]="4"
+ * />
+ */
+class TextareaComponent {
+    configService = inject(StudioConfigService);
+    textareaDefaults = computed(() => this.configService.config().components?.textarea, ...(ngDevMode ? [{ debugName: "textareaDefaults" }] : []));
+    variant = input(this.textareaDefaults()?.variant ?? 'outline', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input(this.textareaDefaults()?.size ?? 'md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    color = input(this.textareaDefaults()?.color ?? 'primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    radius = input(this.textareaDefaults()?.radius ?? 'md', ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    // ==========================================
+    // INPUTS - Labels & Description
+    // ==========================================
+    /**
+     * Label text
+     */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    /**
+     * Floating label (moves up when focused/filled)
+     */
+    floatingLabel = input(false, ...(ngDevMode ? [{ debugName: "floatingLabel" }] : []));
+    /**
+     * Placeholder text
+     */
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+    /**
+     * Helper text
+     */
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : []));
+    // ==========================================
+    // INPUTS - Textarea Specific
+    // ==========================================
+    /**
+     * Number of visible text rows
+     */
+    rows = input(this.textareaDefaults()?.rows ?? 3, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    /**
+     * Minimum rows for auto-resize
+     */
+    minRows = input(...(ngDevMode ? [undefined, { debugName: "minRows" }] : []));
+    /**
+     * Maximum rows for auto-resize
+     */
+    maxRows = input(...(ngDevMode ? [undefined, { debugName: "maxRows" }] : []));
+    /**
+     * Enable auto-resize based on content
+     */
+    autoResize = input(this.textareaDefaults()?.autoResize ?? false, ...(ngDevMode ? [{ debugName: "autoResize" }] : []));
+    /**
+     * Resize behavior
+     */
+    resize = input(this.textareaDefaults()?.resize ?? 'vertical', ...(ngDevMode ? [{ debugName: "resize" }] : []));
+    // ==========================================
+    // INPUTS - Character Count
+    // ==========================================
+    /**
+     * Maximum character length
+     */
+    maxLength = input(...(ngDevMode ? [undefined, { debugName: "maxLength" }] : []));
+    /**
+     * Show character counter
+     */
+    showCharCount = input(this.textareaDefaults()?.showCharCount ?? false, ...(ngDevMode ? [{ debugName: "showCharCount" }] : []));
+    /**
+     * Character counter position
+     */
+    charCountPosition = input('bottom-right', ...(ngDevMode ? [{ debugName: "charCountPosition" }] : []));
+    // ==========================================
+    // INPUTS - Validation
+    // ==========================================
+    /**
+     * Required field
+     */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /**
+     * Minimum character length
+     */
+    minLength = input(...(ngDevMode ? [undefined, { debugName: "minLength" }] : []));
+    /**
+     * Error state
+     */
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /**
+     * Error message
+     */
+    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : []));
+    // ==========================================
+    // INPUTS - Behavior
+    // ==========================================
+    /**
+     * Disabled state
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Readonly state
+     */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    /**
+     * Full width (100% of parent)
+     */
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    /**
+     * Name attribute for form control
+     */
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    /**
+     * Autocomplete attribute
+     */
+    autocomplete = input(...(ngDevMode ? [undefined, { debugName: "autocomplete" }] : []));
+    /**
+     * Spellcheck attribute
+     */
+    spellcheck = input(true, ...(ngDevMode ? [{ debugName: "spellcheck" }] : []));
+    /**
+     * Show clear button
+     */
+    clearable = input(this.textareaDefaults()?.clearable ?? false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    /**
+     * Loading state
+     */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    // ==========================================
+    // OUTPUTS
+    // ==========================================
+    /**
+     * Emitted when value changes
+     */
+    changed = output();
+    /**
+     * Emitted on focus
+     */
+    focused = output();
+    /**
+     * Emitted on blur
+     */
+    blurred = output();
+    /**
+     * Emitted on key press
+     */
+    keyPressed = output();
+    // ==========================================
+    // STATE
+    // ==========================================
+    /**
+     * Internal value
+     */
+    internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    /**
+     * Internal focus state
+     */
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    /**
+     * Unique ID for accessibility
+     */
+    textareaId = signal(`studio-textarea-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "textareaId" }] : []));
+    /**
+     * Textarea element reference
+     */
+    textareaEl = viewChild('textarea', ...(ngDevMode ? [{ debugName: "textareaEl" }] : []));
+    // ==========================================
+    // COMPUTED
+    // ==========================================
+    hostClasses = computed(() => classNames('studio-textarea-wrapper', `studio-textarea-wrapper--${this.size()}`, `studio-textarea-wrapper--${this.variant()}`, this.disabled() && 'studio-textarea-wrapper--disabled', this.error() && 'studio-textarea-wrapper--error', this.isFocused() && 'studio-textarea-wrapper--focused', this.fullWidth() && 'studio-textarea-wrapper--full-width', this.floatingLabel() && 'studio-textarea-wrapper--floating-label'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    /**
+     * Textarea element CSS classes
+     */
+    textareaClasses = computed(() => classNames('studio-textarea', `studio-textarea--${this.size()}`, `studio-textarea--${this.variant()}`, `studio-textarea--${this.color()}`, `studio-textarea--radius-${this.radius()}`, `studio-textarea--resize-${this.resize()}`, this.disabled() && 'studio-textarea--disabled', this.readonly() && 'studio-textarea--readonly', this.error() && 'studio-textarea--error', this.internalValue().length > 0 && 'studio-textarea--has-value', this.autoResize() && 'studio-textarea--auto-resize'), ...(ngDevMode ? [{ debugName: "textareaClasses" }] : []));
+    /**
+     * Show error message
+     */
+    showError = computed(() => this.error() && this.errorMessage(), ...(ngDevMode ? [{ debugName: "showError" }] : []));
+    /**
+     * Show hint
+     */
+    showHint = computed(() => !this.error() && this.hint(), ...(ngDevMode ? [{ debugName: "showHint" }] : []));
+    /**
+     * Character count text
+     */
+    charCountText = computed(() => {
+        const length = this.internalValue().length;
+        const max = this.maxLength();
+        return max ? `${length}/${max}` : `${length}`;
+    }, ...(ngDevMode ? [{ debugName: "charCountText" }] : []));
+    /**
+     * Is character limit exceeded
+     */
+    isCharLimitExceeded = computed(() => {
+        const max = this.maxLength();
+        return max ? this.internalValue().length > max : false;
+    }, ...(ngDevMode ? [{ debugName: "isCharLimitExceeded" }] : []));
+    /**
+     * Computed placeholder (empty if floating label)
+     */
+    computedPlaceholder = computed(() => {
+        if (this.floatingLabel()) {
+            return '';
+        }
+        return this.placeholder();
+    }, ...(ngDevMode ? [{ debugName: "computedPlaceholder" }] : []));
+    /**
+     * Show floating label in "up" position
+     */
+    showFloatingLabelUp = computed(() => {
+        return this.floatingLabel() && (this.isFocused() || this.internalValue().length > 0);
+    }, ...(ngDevMode ? [{ debugName: "showFloatingLabelUp" }] : []));
+    // ==========================================
+    // CONTROL VALUE ACCESSOR
+    // ==========================================
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.internalValue.set(value ?? '');
+        this.adjustHeightIfNeeded();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Disabled state is controlled via input
+    }
+    // ==========================================
+    // CONSTRUCTOR & EFFECTS
+    // ==========================================
+    constructor() {
+        // Auto-resize effect
+        effect(() => {
+            if (this.autoResize()) {
+                this.adjustHeightIfNeeded();
+            }
+        });
+    }
+    // ==========================================
+    // METHODS
+    // ==========================================
+    /**
+     * Handle textarea input
+     */
+    handleInput(event) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        const newValue = event.target.value;
+        this.internalValue.set(newValue);
+        this.onChange(newValue);
+        this.changed.emit(newValue);
+        if (this.autoResize()) {
+            this.adjustHeight(event.target);
+        }
+    }
+    /**
+     * Handle focus
+     */
+    handleFocus(event) {
+        this.isFocused.set(true);
+        this.focused.emit(event);
+    }
+    /**
+     * Handle blur
+     */
+    handleBlur(event) {
+        this.isFocused.set(false);
+        this.onTouched();
+        this.blurred.emit(event);
+    }
+    /**
+     * Handle key press
+     */
+    handleKeyPress(event) {
+        this.keyPressed.emit(event);
+    }
+    /**
+     * Clear textarea value
+     */
+    handleClear() {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.internalValue.set('');
+        this.onChange('');
+        this.changed.emit('');
+        // Focus textarea after clearing
+        this.textareaEl()?.nativeElement.focus();
+    }
+    /**
+     * Adjust textarea height for auto-resize
+     */
+    adjustHeightIfNeeded() {
+        if (this.autoResize()) {
+            setTimeout(() => {
+                const textarea = this.textareaEl()?.nativeElement;
+                if (textarea) {
+                    this.adjustHeight(textarea);
+                }
+            });
+        }
+    }
+    /**
+     * Adjust textarea height based on content
+     */
+    adjustHeight(textarea) {
+        // Reset height to auto to get proper scrollHeight
+        textarea.style.height = 'auto';
+        const minRows = this.minRows() ?? this.rows();
+        const maxRows = this.maxRows();
+        // Calculate line height
+        const lineHeight = parseInt(getComputedStyle(textarea).lineHeight);
+        const padding = parseInt(getComputedStyle(textarea).paddingTop) +
+            parseInt(getComputedStyle(textarea).paddingBottom);
+        // Calculate min and max heights
+        const minHeight = minRows * lineHeight + padding;
+        const maxHeight = maxRows ? maxRows * lineHeight + padding : Infinity;
+        // Set new height within bounds
+        const newHeight = Math.max(minHeight, Math.min(textarea.scrollHeight, maxHeight));
+        textarea.style.height = `${newHeight}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: TextareaComponent, isStandalone: true, selector: "studio-textarea", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCharCount: { classPropertyName: "showCharCount", publicName: "showCharCount", isSignal: true, isRequired: false, transformFunction: null }, charCountPosition: { classPropertyName: "charCountPosition", publicName: "charCountPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", focused: "focused", blurred: "blurred", keyPressed: "keyPressed" }, host: { properties: { "class": "hostClasses()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-disabled": "disabled()", "attr.data-error": "error()", "attr.data-full-width": "fullWidth()" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextareaComponent),
+                multi: true
+            }], viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"studio-textarea-container\">\n  <!-- Label (static or floating) -->\n  @if (label() && !floatingLabel()) {\n    <label\n      [for]=\"textareaId()\"\n      class=\"studio-textarea-label\"\n      [class.studio-textarea-label--required]=\"required()\"\n    >\n      {{ label() }}\n      @if (required()) {\n        <span class=\"studio-textarea-label__required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Textarea wrapper -->\n  <div class=\"studio-textarea-input-wrapper\">\n    <!-- Floating label -->\n    @if (floatingLabel() && label()) {\n      <label\n        [for]=\"textareaId()\"\n        class=\"studio-textarea-label studio-textarea-label--floating\"\n        [class.studio-textarea-label--floating-up]=\"showFloatingLabelUp()\"\n        [class.studio-textarea-label--required]=\"required()\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"studio-textarea-label__required\">*</span>\n        }\n      </label>\n    }\n\n    <!-- Textarea element -->\n    <textarea\n      #textarea\n      [id]=\"textareaId()\"\n      [class]=\"textareaClasses()\"\n      [value]=\"internalValue()\"\n      [placeholder]=\"computedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [rows]=\"rows()\"\n      [attr.maxlength]=\"maxLength()\"\n      [attr.minlength]=\"minLength()\"\n      [required]=\"required()\"\n      [name]=\"name()\"\n      [autocomplete]=\"autocomplete()\"\n      [spellcheck]=\"spellcheck()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"error()\"\n      [attr.aria-describedby]=\"showHint() || showError() ? textareaId() + '-description' : undefined\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keypress)=\"handleKeyPress($event)\"\n    ></textarea>\n\n    <!-- Clear button -->\n    @if (clearable() && internalValue().length > 0 && !disabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"studio-textarea-clear\"\n        [attr.aria-label]=\"'Clear textarea'\"\n        (click)=\"handleClear()\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Loading indicator -->\n    @if (loading()) {\n      <div class=\"studio-textarea-loading\">\n        <svg\n          class=\"studio-textarea-spinner\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <circle\n            class=\"opacity-25\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n          ></circle>\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          ></path>\n        </svg>\n      </div>\n    }\n\n    <!-- Character counter -->\n    @if (showCharCount()) {\n      <div\n        class=\"studio-textarea-char-count\"\n        [class.studio-textarea-char-count--exceeded]=\"isCharLimitExceeded()\"\n        [attr.data-position]=\"charCountPosition()\"\n      >\n        {{ charCountText() }}\n      </div>\n    }\n  </div>\n\n  <!-- Helper text / Error message -->\n  @if (showError()) {\n    <div\n      class=\"studio-textarea-message studio-textarea-message--error\"\n      [id]=\"textareaId() + '-description'\"\n      role=\"alert\"\n    >\n      {{ errorMessage() }}\n    </div>\n  } @else if (showHint()) {\n    <div\n      class=\"studio-textarea-message studio-textarea-message--hint\"\n      [id]=\"textareaId() + '-description'\"\n    >\n      {{ hint() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:.375rem;font-family:var(--studio-font-family)}:host(.studio-textarea-wrapper--full-width){width:100%}.studio-textarea-label{display:block;font-size:.875rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);margin-bottom:.25rem}.studio-textarea-label__required{color:var(--studio-error);margin-left:.125rem}.studio-textarea-label--floating{position:absolute;top:.75rem;left:.75rem;pointer-events:none;background:transparent;padding:0 .25rem;z-index:1;transition:all .2s ease}.studio-textarea-label--floating-up{top:-.5rem;font-size:.75rem;background:var(--studio-background);color:var(--studio-primary)}.studio-textarea-input-wrapper{position:relative;display:flex;flex-direction:column;transition:all var(--studio-transition-fast)}.studio-textarea{width:100%;padding:.75rem;font-size:1rem;font-family:inherit;color:var(--studio-text-primary);background:transparent;border:none;outline:none;resize:vertical;transition:all var(--studio-transition-fast)}.studio-textarea::placeholder{color:var(--studio-text-tertiary)}.studio-textarea:disabled{cursor:not-allowed;opacity:.6}.studio-textarea:read-only{cursor:default}.studio-textarea-clear,.studio-textarea-loading{position:absolute;top:.5rem;right:.5rem;display:flex;align-items:center;justify-content:center}.studio-textarea-clear{padding:.25rem;background:none;border:none;color:var(--studio-text-secondary);cursor:pointer;border-radius:var(--studio-radius-sm);transition:all var(--studio-transition-fast)}.studio-textarea-clear:hover{background:var(--studio-background-hover);color:var(--studio-text-primary)}.studio-textarea-clear svg{width:1rem;height:1rem}.studio-textarea-spinner{width:1rem;height:1rem;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-textarea-char-count{position:absolute;bottom:.5rem;font-size:.75rem;color:var(--studio-text-muted);pointer-events:none}.studio-textarea-char-count[data-position=bottom-right]{right:.75rem}.studio-textarea-char-count[data-position=bottom-left]{left:.75rem}.studio-textarea-char-count--exceeded{color:var(--studio-error);font-weight:500}.studio-textarea-message{font-size:.75rem;line-height:1.4}.studio-textarea-message--hint{color:var(--studio-text-secondary)}.studio-textarea-message--error{color:var(--studio-error)}:host(.studio-textarea-wrapper--outline) .studio-textarea-input-wrapper{border:1px solid var(--studio-border-primary);background:var(--studio-bg-primary);border-radius:var(--studio-radius-md)}:host(.studio-textarea-wrapper--outline) .studio-textarea-input-wrapper:hover:not(:has(.studio-textarea:disabled)){border-color:var(--studio-primary)}:host(.studio-textarea-wrapper--outline.studio-textarea-wrapper--focused) .studio-textarea-input-wrapper{border-color:var(--studio-primary);box-shadow:0 0 0 3px var(--studio-primary-bg)}:host(.studio-textarea-wrapper--outline.studio-textarea-wrapper--error) .studio-textarea-input-wrapper{border-color:var(--studio-error)}:host(.studio-textarea-wrapper--outline.studio-textarea-wrapper--error) .studio-textarea-input-wrapper:hover{border-color:var(--studio-error)}:host(.studio-textarea-wrapper--outline.studio-textarea-wrapper--disabled) .studio-textarea-input-wrapper{background:var(--studio-bg-secondary);border-color:var(--studio-border-secondary)}:host(.studio-textarea-wrapper--filled) .studio-textarea-input-wrapper{background:var(--studio-bg-secondary);border:none;border-bottom:2px solid var(--studio-border-primary);border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-textarea-wrapper--filled) .studio-textarea-input-wrapper:hover:not(:has(.studio-textarea:disabled)){background:var(--studio-bg-tertiary)}:host(.studio-textarea-wrapper--filled.studio-textarea-wrapper--focused) .studio-textarea-input-wrapper{border-bottom-color:var(--studio-primary);background:var(--studio-bg-tertiary)}:host(.studio-textarea-wrapper--filled.studio-textarea-wrapper--error) .studio-textarea-input-wrapper{border-bottom-color:var(--studio-error)}:host(.studio-textarea-wrapper--filled.studio-textarea-wrapper--disabled) .studio-textarea-input-wrapper{background:var(--studio-bg-secondary);opacity:.6}:host(.studio-textarea-wrapper--underline) .studio-textarea-input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--studio-border-primary);border-radius:0}:host(.studio-textarea-wrapper--underline) .studio-textarea-input-wrapper .studio-textarea{padding-left:0;padding-right:0}:host(.studio-textarea-wrapper--underline) .studio-textarea-input-wrapper:hover:not(:has(.studio-textarea:disabled)){border-bottom-color:var(--studio-primary)}:host(.studio-textarea-wrapper--underline.studio-textarea-wrapper--focused) .studio-textarea-input-wrapper{border-bottom-color:var(--studio-primary)}:host(.studio-textarea-wrapper--underline.studio-textarea-wrapper--error) .studio-textarea-input-wrapper{border-bottom-color:var(--studio-error)}:host(.studio-textarea-wrapper--sm) .studio-textarea{padding:.5rem .75rem;font-size:.875rem}:host(.studio-textarea-wrapper--md) .studio-textarea{padding:.75rem;font-size:1rem}:host(.studio-textarea-wrapper--lg) .studio-textarea{padding:1rem;font-size:1.125rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-textarea', standalone: true, imports: [CommonModule], providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextareaComponent),
+                            multi: true
+                        }], host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-disabled]': 'disabled()',
+                        '[attr.data-error]': 'error()',
+                        '[attr.data-full-width]': 'fullWidth()'
+                    }, template: "<div class=\"studio-textarea-container\">\n  <!-- Label (static or floating) -->\n  @if (label() && !floatingLabel()) {\n    <label\n      [for]=\"textareaId()\"\n      class=\"studio-textarea-label\"\n      [class.studio-textarea-label--required]=\"required()\"\n    >\n      {{ label() }}\n      @if (required()) {\n        <span class=\"studio-textarea-label__required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Textarea wrapper -->\n  <div class=\"studio-textarea-input-wrapper\">\n    <!-- Floating label -->\n    @if (floatingLabel() && label()) {\n      <label\n        [for]=\"textareaId()\"\n        class=\"studio-textarea-label studio-textarea-label--floating\"\n        [class.studio-textarea-label--floating-up]=\"showFloatingLabelUp()\"\n        [class.studio-textarea-label--required]=\"required()\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"studio-textarea-label__required\">*</span>\n        }\n      </label>\n    }\n\n    <!-- Textarea element -->\n    <textarea\n      #textarea\n      [id]=\"textareaId()\"\n      [class]=\"textareaClasses()\"\n      [value]=\"internalValue()\"\n      [placeholder]=\"computedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [rows]=\"rows()\"\n      [attr.maxlength]=\"maxLength()\"\n      [attr.minlength]=\"minLength()\"\n      [required]=\"required()\"\n      [name]=\"name()\"\n      [autocomplete]=\"autocomplete()\"\n      [spellcheck]=\"spellcheck()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"error()\"\n      [attr.aria-describedby]=\"showHint() || showError() ? textareaId() + '-description' : undefined\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keypress)=\"handleKeyPress($event)\"\n    ></textarea>\n\n    <!-- Clear button -->\n    @if (clearable() && internalValue().length > 0 && !disabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"studio-textarea-clear\"\n        [attr.aria-label]=\"'Clear textarea'\"\n        (click)=\"handleClear()\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Loading indicator -->\n    @if (loading()) {\n      <div class=\"studio-textarea-loading\">\n        <svg\n          class=\"studio-textarea-spinner\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <circle\n            class=\"opacity-25\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n          ></circle>\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          ></path>\n        </svg>\n      </div>\n    }\n\n    <!-- Character counter -->\n    @if (showCharCount()) {\n      <div\n        class=\"studio-textarea-char-count\"\n        [class.studio-textarea-char-count--exceeded]=\"isCharLimitExceeded()\"\n        [attr.data-position]=\"charCountPosition()\"\n      >\n        {{ charCountText() }}\n      </div>\n    }\n  </div>\n\n  <!-- Helper text / Error message -->\n  @if (showError()) {\n    <div\n      class=\"studio-textarea-message studio-textarea-message--error\"\n      [id]=\"textareaId() + '-description'\"\n      role=\"alert\"\n    >\n      {{ errorMessage() }}\n    </div>\n  } @else if (showHint()) {\n    <div\n      class=\"studio-textarea-message studio-textarea-message--hint\"\n      [id]=\"textareaId() + '-description'\"\n    >\n      {{ hint() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:.375rem;font-family:var(--studio-font-family)}:host(.studio-textarea-wrapper--full-width){width:100%}.studio-textarea-label{display:block;font-size:.875rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);margin-bottom:.25rem}.studio-textarea-label__required{color:var(--studio-error);margin-left:.125rem}.studio-textarea-label--floating{position:absolute;top:.75rem;left:.75rem;pointer-events:none;background:transparent;padding:0 .25rem;z-index:1;transition:all .2s ease}.studio-textarea-label--floating-up{top:-.5rem;font-size:.75rem;background:var(--studio-background);color:var(--studio-primary)}.studio-textarea-input-wrapper{position:relative;display:flex;flex-direction:column;transition:all var(--studio-transition-fast)}.studio-textarea{width:100%;padding:.75rem;font-size:1rem;font-family:inherit;color:var(--studio-text-primary);background:transparent;border:none;outline:none;resize:vertical;transition:all var(--studio-transition-fast)}.studio-textarea::placeholder{color:var(--studio-text-tertiary)}.studio-textarea:disabled{cursor:not-allowed;opacity:.6}.studio-textarea:read-only{cursor:default}.studio-textarea-clear,.studio-textarea-loading{position:absolute;top:.5rem;right:.5rem;display:flex;align-items:center;justify-content:center}.studio-textarea-clear{padding:.25rem;background:none;border:none;color:var(--studio-text-secondary);cursor:pointer;border-radius:var(--studio-radius-sm);transition:all var(--studio-transition-fast)}.studio-textarea-clear:hover{background:var(--studio-background-hover);color:var(--studio-text-primary)}.studio-textarea-clear svg{width:1rem;height:1rem}.studio-textarea-spinner{width:1rem;height:1rem;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-textarea-char-count{position:absolute;bottom:.5rem;font-size:.75rem;color:var(--studio-text-muted);pointer-events:none}.studio-textarea-char-count[data-position=bottom-right]{right:.75rem}.studio-textarea-char-count[data-position=bottom-left]{left:.75rem}.studio-textarea-char-count--exceeded{color:var(--studio-error);font-weight:500}.studio-textarea-message{font-size:.75rem;line-height:1.4}.studio-textarea-message--hint{color:var(--studio-text-secondary)}.studio-textarea-message--error{color:var(--studio-error)}:host(.studio-textarea-wrapper--outline) .studio-textarea-input-wrapper{border:1px solid var(--studio-border-primary);background:var(--studio-bg-primary);border-radius:var(--studio-radius-md)}:host(.studio-textarea-wrapper--outline) .studio-textarea-input-wrapper:hover:not(:has(.studio-textarea:disabled)){border-color:var(--studio-primary)}:host(.studio-textarea-wrapper--outline.studio-textarea-wrapper--focused) .studio-textarea-input-wrapper{border-color:var(--studio-primary);box-shadow:0 0 0 3px var(--studio-primary-bg)}:host(.studio-textarea-wrapper--outline.studio-textarea-wrapper--error) .studio-textarea-input-wrapper{border-color:var(--studio-error)}:host(.studio-textarea-wrapper--outline.studio-textarea-wrapper--error) .studio-textarea-input-wrapper:hover{border-color:var(--studio-error)}:host(.studio-textarea-wrapper--outline.studio-textarea-wrapper--disabled) .studio-textarea-input-wrapper{background:var(--studio-bg-secondary);border-color:var(--studio-border-secondary)}:host(.studio-textarea-wrapper--filled) .studio-textarea-input-wrapper{background:var(--studio-bg-secondary);border:none;border-bottom:2px solid var(--studio-border-primary);border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-textarea-wrapper--filled) .studio-textarea-input-wrapper:hover:not(:has(.studio-textarea:disabled)){background:var(--studio-bg-tertiary)}:host(.studio-textarea-wrapper--filled.studio-textarea-wrapper--focused) .studio-textarea-input-wrapper{border-bottom-color:var(--studio-primary);background:var(--studio-bg-tertiary)}:host(.studio-textarea-wrapper--filled.studio-textarea-wrapper--error) .studio-textarea-input-wrapper{border-bottom-color:var(--studio-error)}:host(.studio-textarea-wrapper--filled.studio-textarea-wrapper--disabled) .studio-textarea-input-wrapper{background:var(--studio-bg-secondary);opacity:.6}:host(.studio-textarea-wrapper--underline) .studio-textarea-input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--studio-border-primary);border-radius:0}:host(.studio-textarea-wrapper--underline) .studio-textarea-input-wrapper .studio-textarea{padding-left:0;padding-right:0}:host(.studio-textarea-wrapper--underline) .studio-textarea-input-wrapper:hover:not(:has(.studio-textarea:disabled)){border-bottom-color:var(--studio-primary)}:host(.studio-textarea-wrapper--underline.studio-textarea-wrapper--focused) .studio-textarea-input-wrapper{border-bottom-color:var(--studio-primary)}:host(.studio-textarea-wrapper--underline.studio-textarea-wrapper--error) .studio-textarea-input-wrapper{border-bottom-color:var(--studio-error)}:host(.studio-textarea-wrapper--sm) .studio-textarea{padding:.5rem .75rem;font-size:.875rem}:host(.studio-textarea-wrapper--md) .studio-textarea{padding:.75rem;font-size:1rem}:host(.studio-textarea-wrapper--lg) .studio-textarea{padding:1rem;font-size:1.125rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCharCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCharCount", required: false }] }], charCountPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "charCountPosition", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], spellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellcheck", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], keyPressed: [{ type: i0.Output, args: ["keyPressed"] }], textareaEl: [{ type: i0.ViewChild, args: ['textarea', { isSignal: true }] }] } });
+
 /**
  * Primitives (Atoms)
  * Basic building blocks
  */
 
+class ButtonToggleGroupComponent {
+    configService = inject(StudioConfigService);
+    toggleGroupDefaults = computed(() => this.configService.config().components?.buttonToggleGroup, ...(ngDevMode ? [{ debugName: "toggleGroupDefaults" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    allowEmpty = input(true, ...(ngDevMode ? [{ debugName: "allowEmpty" }] : []));
+    orientationInput = input(undefined, ...(ngDevMode ? [{ debugName: "orientationInput", alias: 'orientation' }] : [{ alias: 'orientation' }]));
+    sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
+    variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
+    colorInput = input(undefined, ...(ngDevMode ? [{ debugName: "colorInput", alias: 'color' }] : [{ alias: 'color' }]));
+    radiusInput = input(undefined, ...(ngDevMode ? [{ debugName: "radiusInput", alias: 'radius' }] : [{ alias: 'radius' }]));
+    shadowInput = input(undefined, ...(ngDevMode ? [{ debugName: "shadowInput", alias: 'shadow' }] : [{ alias: 'shadow' }]));
+    orientation = withConfigDefault(this.orientationInput, computed(() => this.toggleGroupDefaults()?.orientation), 'horizontal');
+    size = withConfigDefault(this.sizeInput, computed(() => this.toggleGroupDefaults()?.size), 'md');
+    variant = withConfigDefault(this.variantInput, computed(() => this.toggleGroupDefaults()?.variant), 'outline');
+    color = withConfigDefault(this.colorInput, computed(() => this.toggleGroupDefaults()?.color), 'primary');
+    radius = withConfigDefault(this.radiusInput, computed(() => this.toggleGroupDefaults()?.radius), 'sm');
+    shadow = withConfigDefault(this.shadowInput, computed(() => this.toggleGroupDefaults()?.shadow), 'none');
+    attached = input(true, ...(ngDevMode ? [{ debugName: "attached" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    spacing = input('sm', ...(ngDevMode ? [{ debugName: "spacing" }] : []));
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    showIcons = input(true, ...(ngDevMode ? [{ debugName: "showIcons" }] : []));
+    iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    valueChange = output();
+    hostClasses = computed(() => classNames('studio-button-toggle-group', this.disabled() && 'studio-button-toggle-group--disabled'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    isSelected(optionValue) {
+        const currentValue = this.value();
+        if (this.multiple()) {
+            return Array.isArray(currentValue) && currentValue.includes(optionValue);
+        }
+        return currentValue === optionValue;
+    }
+    handleToggle(optionValue) {
+        if (this.disabled())
+            return;
+        let newValue;
+        if (this.multiple()) {
+            const currentArray = Array.isArray(this.value()) ? this.value() : [];
+            const index = currentArray.indexOf(optionValue);
+            if (index > -1) {
+                if (!this.allowEmpty() && currentArray.length === 1) {
+                    return;
+                }
+                newValue = currentArray.filter(v => v !== optionValue);
+            }
+            else {
+                newValue = [...currentArray, optionValue];
+            }
+        }
+        else {
+            const currentValue = this.value();
+            if (currentValue === optionValue && !this.allowEmpty()) {
+                return;
+            }
+            newValue = currentValue === optionValue ? (this.allowEmpty() ? '' : optionValue) : optionValue;
+        }
+        this.value.set(newValue);
+        this.onChange(newValue);
+        this.onTouched();
+        this.valueChange.emit(newValue);
+    }
+    writeValue(val) {
+        if (val !== undefined && val !== null) {
+            this.value.set(val);
+        }
+        else {
+            this.value.set(this.multiple() ? [] : '');
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // disabled handled via input signal
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ButtonToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ButtonToggleGroupComponent, isStandalone: true, selector: "studio-button-toggle-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, orientationInput: { classPropertyName: "orientationInput", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, colorInput: { classPropertyName: "colorInput", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radiusInput: { classPropertyName: "radiusInput", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, shadowInput: { classPropertyName: "shadowInput", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, attached: { classPropertyName: "attached", publicName: "attached", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ButtonToggleGroupComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <studio-button-group
+      [orientation]="orientation()"
+      [attached]="attached()"
+      [fullWidth]="fullWidth()"
+      [spacing]="spacing()"
+      [align]="align()"
+      [ariaLabel]="ariaLabel()">
+      @for (option of options(); track option.value) {
+        <studio-button
+          [variant]="isSelected(option.value) ? 'solid' : variant()"
+          [size]="size()"
+          [color]="isSelected(option.value) ? color() : 'secondary'"
+          [radius]="radius()"
+          [shadow]="shadow()"
+          [disabled]="disabled() || option.disabled || false"
+          [icon]="showIcons() ? option.icon : undefined"
+          [iconPosition]="iconPosition()"
+          [ariaLabel]="option.ariaLabel"
+          (clicked)="handleToggle(option.value)">
+          @if (iconPosition() !== 'only') {
+            {{ option.label }}
+          }
+        </studio-button>
+      }
+    </studio-button-group>
+  `, isInline: true, styles: [":host{display:inline-block}:host(.studio-button-toggle-group--disabled){opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "studio-button", inputs: ["variant", "size", "color", "radius", "shadow", "compact", "disabled", "loading", "loadingText", "fullWidth", "type", "icon", "iconPosition", "href", "target", "badge", "badgeColor", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: ButtonGroupComponent, selector: "studio-button-group", inputs: ["orientation", "size", "variant", "color", "radius", "attached", "fullWidth", "disabled", "spacing", "align", "ariaLabel", "role"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ButtonToggleGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-button-toggle-group', standalone: true, imports: [ButtonComponent, ButtonGroupComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ButtonToggleGroupComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[class]': 'hostClasses()'
+                    }, template: `
+    <studio-button-group
+      [orientation]="orientation()"
+      [attached]="attached()"
+      [fullWidth]="fullWidth()"
+      [spacing]="spacing()"
+      [align]="align()"
+      [ariaLabel]="ariaLabel()">
+      @for (option of options(); track option.value) {
+        <studio-button
+          [variant]="isSelected(option.value) ? 'solid' : variant()"
+          [size]="size()"
+          [color]="isSelected(option.value) ? color() : 'secondary'"
+          [radius]="radius()"
+          [shadow]="shadow()"
+          [disabled]="disabled() || option.disabled || false"
+          [icon]="showIcons() ? option.icon : undefined"
+          [iconPosition]="iconPosition()"
+          [ariaLabel]="option.ariaLabel"
+          (clicked)="handleToggle(option.value)">
+          @if (iconPosition() !== 'only') {
+            {{ option.label }}
+          }
+        </studio-button>
+      }
+    </studio-button-group>
+  `, styles: [":host{display:inline-block}:host(.studio-button-toggle-group--disabled){opacity:.6;pointer-events:none}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], orientationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], colorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], shadowInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], attached: [{ type: i0.Input, args: [{ isSignal: true, alias: "attached", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
 /**
  * Theme toggle switch with sun/moon icons
  *
@@ -1244,5 +2060,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, ButtonComponent, IconComponent, InputComponent, STUDIO_CONFIG, StudioConfigService, SwitchComponent, ThemeSwitchComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { BadgeComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CheckboxComponent, IconComponent, InputComponent, STUDIO_CONFIG, StudioConfigService, SwitchComponent, TextareaComponent, ThemeSwitchComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map