@semantic-components/ui 0.10.0 → 0.11.0

package/fesm2022/semantic-components-ui.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { input, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, inject, ElementRef, Directive, HostListener, signal, Injectable, ChangeDetectorRef, viewChild, afterNextRender, forwardRef, output, effect, LOCALE_ID, Injector, ViewContainerRef, contentChildren, model, booleanAttribute, untracked } from '@angular/core';
+import { input, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, signal, inject, ElementRef, Directive, HostListener, Injectable, ChangeDetectorRef, viewChild, afterNextRender, forwardRef, ViewContainerRef, contentChildren, model, output, effect, LOCALE_ID, Injector, booleanAttribute, untracked, viewChildren } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormArray, NgForm, FormGroupDirective, NgControl, FormBuilder, FormsModule } from '@angular/forms';
 import { Editor } from '@tiptap/core';
@@ -9,34 +9,87 @@ import Document from '@tiptap/extension-document';
 import Heading from '@tiptap/extension-heading';
 import Paragraph from '@tiptap/extension-paragraph';
 import Text from '@tiptap/extension-text';
-import { SvgQuoteIcon, SvgBoldIcon, SvgListIcon, SvgCodeIcon, SvgPaletteIcon, SvgHighlighterIcon, SvgUndoIcon, SvgRedoIcon, SvgMinusIcon, SvgItalicIcon, SvgListOrderedIcon, SvgStrikethroughIcon, SvgAlignLeftIcon, SvgAlignRightIcon, SvgAlignCenterIcon, SvgUnderlineIcon, SvgEllipsisIcon, SvgChevronLeftIcon, SvgChevronsLeftIcon, SvgChevronRightIcon, SvgChevronsRightIcon, SvgCalendarIcon, SvgMoonIcon, SvgSunIcon, SvgChevronDownIcon, SvgCheckIcon, SvgMenuIcon, SvgXIcon, SvgChevronUpIcon, SvgCircleIcon, SvgDotIcon, SvgSearchIcon } from '@semantic-icons/lucide-icons';
 import { cva } from 'class-variance-authority';
-import { Overlay, OverlayModule, OverlayContainer } from '@angular/cdk/overlay';
+import { SvgQuoteIcon, SvgBoldIcon, SvgListIcon, SvgCodeIcon, SvgPaletteIcon, SvgHighlighterIcon, SvgUndoIcon, SvgRedoIcon, SvgMinusIcon, SvgItalicIcon, SvgListOrderedIcon, SvgStrikethroughIcon, SvgAlignLeftIcon, SvgAlignRightIcon, SvgAlignCenterIcon, SvgUnderlineIcon, SvgCheckIcon, SvgChevronDownIcon, SvgEllipsisIcon, SvgChevronLeftIcon, SvgChevronsLeftIcon, SvgChevronRightIcon, SvgChevronsRightIcon, SvgCalendarIcon, SvgMoonIcon, SvgSunIcon, SvgXIcon, SvgChevronUpIcon, SvgCircleIcon, SvgDotIcon, SvgSearchIcon } from '@semantic-icons/lucide-icons';
+import { Overlay, OverlayModule, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i1$5 from '@angular/cdk/menu';
 import { CdkMenuTrigger, CdkMenu, CdkMenuItem, CdkContextMenuTrigger, CdkMenuItemCheckbox, CdkMenuGroup, CdkMenuItemRadio, CdkMenuBar } from '@angular/cdk/menu';
 import { DialogRef, Dialog, DialogModule } from '@angular/cdk/dialog';
+import * as i1$1 from '@angular/cdk/a11y';
+import { A11yModule, FocusMonitor, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
+import { TAB, ESCAPE, hasModifierKey, ENTER } from '@angular/cdk/keycodes';
+import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
 import { _getEventTarget } from '@angular/cdk/platform';
 import * as i1$3 from '@angular/common';
-import { NgClass, DOCUMENT, CommonModule, AsyncPipe, JsonPipe, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
-import { TAB, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
-import * as i1$2 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import * as i1$1 from 'ngx-scrollbar';
+import { NgClass, DOCUMENT, NgTemplateOutlet, CommonModule, AsyncPipe, JsonPipe, NgOptimizedImage } from '@angular/common';
+import * as i1$2 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
 import EmblaCarousel from 'embla-carousel';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i1$4 from '@angular/cdk/accordion';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject } from 'rxjs';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { Subject, debounceTime } from 'rxjs';
+import * as i1$6 from '@angular/cdk/layout';
+import { LayoutModule } from '@angular/cdk/layout';
 
 function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
+const scHeadingVariants = cva('', {
+    variants: {
+        level: {
+            1: 'text-4xl font-extrabold tracking-tight lg:text-5xl',
+            2: 'text-3xl font-semibold tracking-tight',
+            3: 'text-2xl font-semibold tracking-tight',
+            4: 'text-xl font-semibold tracking-tight',
+            5: '',
+            6: '',
+        },
+    },
+    defaultVariants: {
+        level: 1,
+    },
+});
+class ScHeading {
+    level = input(1);
+    class = input('');
+    classes = computed(() => cn(scHeadingVariants({ level: this.level() }), this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScHeading, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScHeading, isStandalone: true, selector: "h1[sc-heading], h2[sc-heading], h3[sc-heading], h4[sc-heading], h5[sc-heading], h6[sc-heading]", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScHeading, decorators: [{
+            type: Component,
+            args: [{ selector: 'h1[sc-heading], h2[sc-heading], h3[sc-heading], h4[sc-heading], h5[sc-heading], h6[sc-heading]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+const scArticleClasses = signal('prose prose-sm sm:prose lg:prose-lg xl:prose-2xl');
+class ScArticle {
+    class = input('');
+    classes = computed(() => cn(scArticleClasses(), this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScArticle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScArticle, isStandalone: true, selector: "sc-article", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScArticle, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-article', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
 const toggleVariants = cva('inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_.svg]:pointer-events-none [&_.svg]:size-4 [&_.svg]:shrink-0', {
     variants: {
         variant: {
@@ -4571,6 +4624,9 @@ class ScEditor {
     _value = signal('');
     _isEditable = signal(true);
     class = input('');
+    classes = computed(() => cn('', this.class()));
+    editorClass = input('');
+    editorClasses = computed(() => cn('mx-auto focus:outline-none', scArticleClasses(), this.editorClass()));
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onChange = () => { };
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -4685,7 +4741,7 @@ class ScEditor {
             editable: this._isEditable(),
             editorProps: {
                 attributes: {
-                    class: this.class(),
+                    class: this.editorClasses(),
                 },
             },
         });
@@ -4714,7 +4770,7 @@ class ScEditor {
         this._cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScEditor, isStandalone: true, selector: "sc-editor", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScEditor, isStandalone: true, selector: "sc-editor", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, editorClass: { classPropertyName: "editorClass", publicName: "editorClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ScEditor),
@@ -4844,7 +4900,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         ></div>
       </div>
     </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ScEditor),
@@ -4894,6 +4952,301 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+class ScListbox {
+    class = input('');
+    classes = computed(() => cn('relative z-50 max-h-96 w-full min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScListbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScListbox, isStandalone: true, selector: "ul[sc-listbox]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScListbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'ul[sc-listbox]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScListboxOption {
+    class = input('');
+    classes = computed(() => cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class()));
+    isSelected = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScListboxOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScListboxOption, isStandalone: true, selector: "li[sc-listbox-option]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    @if (isSelected()) {
+      <svg-check-icon class="absolute left-2 flex size-4 items-center justify-center" />
+    }
+
+    <ng-content />
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScListboxOption, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[sc-listbox-option]', imports: [SvgCheckIcon], template: `
+    @if (isSelected()) {
+      <svg-check-icon class="absolute left-2 flex size-4 items-center justify-center" />
+    }
+
+    <ng-content />
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScOption {
+    value = input.required();
+    labelEl = viewChild.required('label');
+    label = computed(() => {
+        return this.labelEl().nativeElement.textContent?.trim();
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScOption, isStandalone: true, selector: "sc-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "labelEl", first: true, predicate: ["label"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <span #label>
+      <ng-content />
+    </span>
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScOption, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-option', imports: [], template: `
+    <span #label>
+      <ng-content />
+    </span>
+  `, host: {}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScSelect {
+    static nextId = 0;
+    id = 0;
+    _getPanelId() {
+        return `panel-${this.id}`;
+    }
+    _cdr = inject(ChangeDetectorRef);
+    _overlay = inject(Overlay);
+    _dir = inject(Directionality, { optional: true });
+    _viewContainerRef = inject(ViewContainerRef);
+    _portal = null;
+    scSelectTrigger = viewChild.required('scSelectTrigger');
+    _panelTemplate = viewChild.required('panelTemplate');
+    placeholder = input('');
+    isOpen = signal(false);
+    constructor() {
+        this.id = ++ScSelect.nextId;
+    }
+    options = contentChildren(ScOption);
+    value = model(undefined);
+    isDisabled = signal(false);
+    writeValue(value) {
+        this.value.set(value);
+    }
+    handleValueChange(v) {
+        this.setValue(v[0]);
+        this.close();
+    }
+    setValue(value) {
+        this.value.set(value);
+        this._onChange(value);
+        this._cdr.markForCheck();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onTouched = () => { };
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    label = computed(() => {
+        if (this.value()) {
+            return this.options()
+                .find((element) => element.value() === this.value())
+                ?.label();
+        }
+        return this.placeholder();
+    });
+    _isExpanded = computed(() => {
+        return this.isOpen();
+    });
+    _overlayRef = null;
+    _getOverlayRef() {
+        if (this._overlayRef) {
+            return this._overlayRef;
+        }
+        const positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this.scSelectTrigger())
+            .withFlexibleDimensions(false)
+            .withPush(false)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 8,
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -8,
+            },
+        ]);
+        this._overlayRef = this._overlay.create({
+            positionStrategy,
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            direction: this._dir || 'ltr',
+            hasBackdrop: false,
+        });
+        this._overlayRef.keydownEvents().subscribe((event) => {
+            this._handleKeydown(event);
+        });
+        this._overlayRef.outsidePointerEvents().subscribe((event) => {
+            const target = _getEventTarget(event);
+            const origin = this.scSelectTrigger().nativeElement;
+            if (target && target !== origin && !origin.contains(target)) {
+                this.close();
+            }
+        });
+        return this._overlayRef;
+    }
+    open() {
+        if (this.isOpen()) {
+            return;
+        }
+        this.isOpen.set(true);
+        const overlayRef = this._getOverlayRef();
+        overlayRef.updateSize({ width: this.scSelectTrigger().nativeElement.offsetWidth });
+        this._portal ??= new TemplatePortal(this._panelTemplate(), this._viewContainerRef);
+        overlayRef.attach(this._portal);
+    }
+    close() {
+        if (this.isOpen()) {
+            this.isOpen.set(false);
+            this._overlayRef?.detach();
+        }
+    }
+    /** Handles keyboard events while the overlay is open. */
+    _handleKeydown(event) {
+        const keyCode = event.keyCode;
+        if (keyCode === TAB) {
+            this.close();
+        }
+        else if (keyCode === ESCAPE && !hasModifierKey(event)) {
+            event.preventDefault();
+            this.close();
+        }
+        else if (keyCode === ENTER) {
+            //TODO for me it's mean it's was selected
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScSelect, isStandalone: true, selector: "sc-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ScSelect),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "options", predicate: ScOption, isSignal: true }], viewQueries: [{ propertyName: "scSelectTrigger", first: true, predicate: ["scSelectTrigger"], descendants: true, isSignal: true }, { propertyName: "_panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button
+      class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"
+      #scSelectTrigger
+      [disabled]="isDisabled()"
+      [attr.aria-expanded]="_isExpanded()"
+      [attr.aria-controls]="_getPanelId()"
+      (click)="open()"
+      type="button"
+      role="combobox"
+    >
+      {{ label() }}
+      <svg-chevron-down-icon class="size-4 opacity-50" />
+    </button>
+
+    <ng-template #panelTemplate>
+      <ul
+        [id]="_getPanelId()"
+        [cdkTrapFocusAutoCapture]="true"
+        (cdkListboxValueChange)="handleValueChange($event.value)"
+        sc-listbox
+        cdkListbox
+        cdkTrapFocus
+      >
+        @for (option of options(); track $index) {
+          <li
+            [isSelected]="option.value() === this.value()"
+            [cdkOption]="option.value()"
+            sc-listbox-option
+          >
+            {{ option.label() }}
+          </li>
+        }
+      </ul>
+    </ng-template>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgChevronDownIcon, selector: "svg-chevron-down-icon", inputs: ["class", "svgClass"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "component", type: ScListbox, selector: "ul[sc-listbox]", inputs: ["class"] }, { kind: "component", type: ScListboxOption, selector: "li[sc-listbox-option]", inputs: ["class", "isSelected"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-select', imports: [
+                        SvgChevronDownIcon,
+                        OverlayModule,
+                        ScListbox,
+                        ScListboxOption,
+                        CdkOption,
+                        CdkListbox,
+                        A11yModule,
+                    ], template: `
+    <button
+      class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"
+      #scSelectTrigger
+      [disabled]="isDisabled()"
+      [attr.aria-expanded]="_isExpanded()"
+      [attr.aria-controls]="_getPanelId()"
+      (click)="open()"
+      type="button"
+      role="combobox"
+    >
+      {{ label() }}
+      <svg-chevron-down-icon class="size-4 opacity-50" />
+    </button>
+
+    <ng-template #panelTemplate>
+      <ul
+        [id]="_getPanelId()"
+        [cdkTrapFocusAutoCapture]="true"
+        (cdkListboxValueChange)="handleValueChange($event.value)"
+        sc-listbox
+        cdkListbox
+        cdkTrapFocus
+      >
+        @for (option of options(); track $index) {
+          <li
+            [isSelected]="option.value() === this.value()"
+            [cdkOption]="option.value()"
+            sc-listbox-option
+          >
+            {{ option.label() }}
+          </li>
+        }
+      </ul>
+    </ng-template>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ScSelect),
+                            multi: true,
+                        },
+                    ] }]
+        }], ctorParameters: () => [] });
+
 class ScPageItem {
     currentPage = input.required();
     page = input.required();
@@ -5083,11 +5436,11 @@ class ScPaginator {
     @if (!hidePageSize()) {
       <div>
         <label class="" for="items-per-page">Items per page:</label>
-        <select class="" id="items-per-page" [formControl]="pageSizeFormControl">
+        <sc-select class="" id="items-per-page" [formControl]="pageSizeFormControl">
           @for (pageSizeOption of pageSizeOptions(); track $index) {
-            <option [value]="pageSizeOption">{{ pageSizeOption }}</option>
+            <sc-option [value]="pageSizeOption">{{ pageSizeOption }}</sc-option>
           }
-        </select>
+        </sc-select>
       </div>
     }
 
@@ -5169,7 +5522,7 @@ class ScPaginator {
         }
       </ul>
     </nav>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScPageItem, selector: "sc-page-item", inputs: ["currentPage", "page"], outputs: ["pageChanged"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScPagination, selector: "nav[sc-pagination]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgChevronLeftIcon, selector: "svg-chevron-left-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronsLeftIcon, selector: "svg-chevrons-left-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronRightIcon, selector: "svg-chevron-right-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronsRightIcon, selector: "svg-chevrons-right-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScPageItem, selector: "sc-page-item", inputs: ["currentPage", "page"], outputs: ["pageChanged"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScPagination, selector: "nav[sc-pagination]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgChevronLeftIcon, selector: "svg-chevron-left-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronsLeftIcon, selector: "svg-chevrons-left-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronRightIcon, selector: "svg-chevron-right-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgChevronsRightIcon, selector: "svg-chevrons-right-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScSelect, selector: "sc-select", inputs: ["placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: ScOption, selector: "sc-option", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScPaginator, decorators: [{
             type: Component,
@@ -5182,15 +5535,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         SvgChevronsLeftIcon,
                         SvgChevronRightIcon,
                         SvgChevronsRightIcon,
+                        ScSelect,
+                        ScOption,
                     ], template: `
     @if (!hidePageSize()) {
       <div>
         <label class="" for="items-per-page">Items per page:</label>
-        <select class="" id="items-per-page" [formControl]="pageSizeFormControl">
+        <sc-select class="" id="items-per-page" [formControl]="pageSizeFormControl">
           @for (pageSizeOption of pageSizeOptions(); track $index) {
-            <option [value]="pageSizeOption">{{ pageSizeOption }}</option>
+            <sc-option [value]="pageSizeOption">{{ pageSizeOption }}</sc-option>
           }
-        </select>
+        </sc-select>
       </div>
     }
 
@@ -5277,24 +5632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
 
-class ScInput {
-    class = input('');
-    classes = computed(() => cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', this.class()));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScInput, isStandalone: true, selector: "input[sc-input]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
-    <ng-content />
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScInput, decorators: [{
-            type: Component,
-            args: [{ selector: 'input[sc-input]', imports: [], template: `
-    <ng-content />
-  `, host: {
-                        '[class]': 'classes()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScCard {
+class ScCard {
     class = input('');
     classes = computed(() => cn('rounded-lg border bg-card text-card-foreground shadow-sm', this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -5397,6 +5735,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }] });
 
 class ScMonthDays {
+    class = input('');
+    classes = computed(() => cn('grid grid-cols-7 place-items-center', this.class()));
     weekDaysNames = input.required();
     days = input.required();
     firstDayMonth = input.required();
@@ -5411,88 +5751,87 @@ class ScMonthDays {
         this.selectedDayChange.emit(selectedDay);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMonthDays, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScMonthDays, isStandalone: true, selector: "sc-month-days", inputs: { weekDaysNames: { classPropertyName: "weekDaysNames", publicName: "weekDaysNames", isSignal: true, isRequired: true, transformFunction: null }, days: { classPropertyName: "days", publicName: "days", isSignal: true, isRequired: true, transformFunction: null }, firstDayMonth: { classPropertyName: "firstDayMonth", publicName: "firstDayMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDay: { classPropertyName: "selectedDay", publicName: "selectedDay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedDayChange: "selectedDayChange" }, ngImport: i0, template: `
-    <div class="grid grid-cols-7">
-      @for (weekDayName of weekDaysNames(); track weekDayName.long) {
-        <abbr
-          class="text-center text-muted-foreground"
-          [title]="weekDayName.long"
-          [attr.aria-label]="weekDayName.long"
-        >
-          {{ weekDayName.short }}
-        </abbr>
-      }
-
-      @for (day of days(); track $index; let index = $index) {
-        <button
-          [ngClass]="{
-            'col-start-1': index === 0 && firstDayMonth() === 0,
-            'col-start-2': index === 0 && firstDayMonth() === 1,
-            'col-start-3': index === 0 && firstDayMonth() === 2,
-            'col-start-4': index === 0 && firstDayMonth() === 3,
-            'col-start-5': index === 0 && firstDayMonth() === 4,
-            'col-start-6': index === 0 && firstDayMonth() === 5,
-            'col-start-7': index === 0 && firstDayMonth() === 6,
-          }"
-          [attr.data-sc-day]="day"
-          [variant]="isSelected(day) ? 'primary' : 'ghost'"
-          (click)="setSelectedDay($event)"
-          sc-button
-          size="icon"
-        >
-          {{ day.slice(-2) }}
-        </button>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScMonthDays, isStandalone: true, selector: "sc-month-days", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, weekDaysNames: { classPropertyName: "weekDaysNames", publicName: "weekDaysNames", isSignal: true, isRequired: true, transformFunction: null }, days: { classPropertyName: "days", publicName: "days", isSignal: true, isRequired: true, transformFunction: null }, firstDayMonth: { classPropertyName: "firstDayMonth", publicName: "firstDayMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDay: { classPropertyName: "selectedDay", publicName: "selectedDay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedDayChange: "selectedDayChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    @for (weekDayName of weekDaysNames(); track weekDayName.long) {
+      <abbr
+        class="size-10 text-center text-muted-foreground"
+        [title]="weekDayName.long"
+        [attr.aria-label]="weekDayName.long"
+      >
+        {{ weekDayName.short }}
+      </abbr>
+    }
+
+    @for (day of days(); track $index; let index = $index) {
+      <button
+        [ngClass]="{
+          'col-start-1': index === 0 && firstDayMonth() === 0,
+          'col-start-2': index === 0 && firstDayMonth() === 1,
+          'col-start-3': index === 0 && firstDayMonth() === 2,
+          'col-start-4': index === 0 && firstDayMonth() === 3,
+          'col-start-5': index === 0 && firstDayMonth() === 4,
+          'col-start-6': index === 0 && firstDayMonth() === 5,
+          'col-start-7': index === 0 && firstDayMonth() === 6,
+        }"
+        [attr.data-sc-day]="day"
+        [variant]="isSelected(day) ? 'primary' : 'ghost'"
+        (click)="setSelectedDay($event)"
+        sc-button
+        size="icon"
+      >
+        {{ day.slice(-2) }}
+      </button>
+    }
   `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMonthDays, decorators: [{
             type: Component,
             args: [{ selector: 'sc-month-days', imports: [NgClass, ScButton], template: `
-    <div class="grid grid-cols-7">
-      @for (weekDayName of weekDaysNames(); track weekDayName.long) {
-        <abbr
-          class="text-center text-muted-foreground"
-          [title]="weekDayName.long"
-          [attr.aria-label]="weekDayName.long"
-        >
-          {{ weekDayName.short }}
-        </abbr>
-      }
-
-      @for (day of days(); track $index; let index = $index) {
-        <button
-          [ngClass]="{
-            'col-start-1': index === 0 && firstDayMonth() === 0,
-            'col-start-2': index === 0 && firstDayMonth() === 1,
-            'col-start-3': index === 0 && firstDayMonth() === 2,
-            'col-start-4': index === 0 && firstDayMonth() === 3,
-            'col-start-5': index === 0 && firstDayMonth() === 4,
-            'col-start-6': index === 0 && firstDayMonth() === 5,
-            'col-start-7': index === 0 && firstDayMonth() === 6,
-          }"
-          [attr.data-sc-day]="day"
-          [variant]="isSelected(day) ? 'primary' : 'ghost'"
-          (click)="setSelectedDay($event)"
-          sc-button
-          size="icon"
-        >
-          {{ day.slice(-2) }}
-        </button>
-      }
-    </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+    @for (weekDayName of weekDaysNames(); track weekDayName.long) {
+      <abbr
+        class="size-10 text-center text-muted-foreground"
+        [title]="weekDayName.long"
+        [attr.aria-label]="weekDayName.long"
+      >
+        {{ weekDayName.short }}
+      </abbr>
+    }
+
+    @for (day of days(); track $index; let index = $index) {
+      <button
+        [ngClass]="{
+          'col-start-1': index === 0 && firstDayMonth() === 0,
+          'col-start-2': index === 0 && firstDayMonth() === 1,
+          'col-start-3': index === 0 && firstDayMonth() === 2,
+          'col-start-4': index === 0 && firstDayMonth() === 3,
+          'col-start-5': index === 0 && firstDayMonth() === 4,
+          'col-start-6': index === 0 && firstDayMonth() === 5,
+          'col-start-7': index === 0 && firstDayMonth() === 6,
+        }"
+        [attr.data-sc-day]="day"
+        [variant]="isSelected(day) ? 'primary' : 'ghost'"
+        (click)="setSelectedDay($event)"
+        sc-button
+        size="icon"
+      >
+        {{ day.slice(-2) }}
+      </button>
+    }
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
 class ScMonthYearHeader {
-    classes = signal('flex justify-between');
+    class = input('');
+    classes = computed(() => cn('flex justify-between', this.class()));
     monthYear = input.required();
     monthYearChange = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMonthYearHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMonthYearHeader, isStandalone: true, selector: "sc-month-year-header", inputs: { monthYear: { classPropertyName: "monthYear", publicName: "monthYear", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { monthYearChange: "monthYearChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMonthYearHeader, isStandalone: true, selector: "sc-month-year-header", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, monthYear: { classPropertyName: "monthYear", publicName: "monthYear", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { monthYearChange: "monthYearChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
     <button
-      [attr.aria-label]="'Previous month'"
       (click)="monthYearChange.emit(-1)"
+      aria-label="Previous month"
       sc-button
       variant="outline"
       type="button"
@@ -5506,8 +5845,8 @@ class ScMonthYearHeader {
     </button>
 
     <button
-      [attr.aria-label]="'Next month'"
       (click)="monthYearChange.emit(1)"
+      aria-label="Next month"
       sc-button
       variant="outline"
       type="button"
@@ -5522,8 +5861,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Component,
             args: [{ selector: 'sc-month-year-header', imports: [SvgChevronRightIcon, SvgChevronLeftIcon, ScButton], template: `
     <button
-      [attr.aria-label]="'Previous month'"
       (click)="monthYearChange.emit(-1)"
+      aria-label="Previous month"
       sc-button
       variant="outline"
       type="button"
@@ -5537,8 +5876,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
     </button>
 
     <button
-      [attr.aria-label]="'Next month'"
       (click)="monthYearChange.emit(1)"
+      aria-label="Next month"
       sc-button
       variant="outline"
       type="button"
@@ -5552,7 +5891,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-class ScInlineDatePicker {
+class ScCalendar {
+    class = input('');
+    classes = computed(() => cn('', this.class()));
     localeId = inject(LOCALE_ID);
     year = signal(0);
     month = signal(0);
@@ -5657,8 +5998,8 @@ class ScInlineDatePicker {
             useGrouping: false,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScInlineDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScInlineDatePicker, isStandalone: true, selector: "sc-inline-date-picker", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScCalendar, isStandalone: true, selector: "sc-calendar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
     <div sc-card>
       <div sc-card-header>
         <sc-month-year-header [monthYear]="monthYear()" (monthYearChange)="setMonthYear($event)" />
@@ -5679,11 +6020,11 @@ class ScInlineDatePicker {
         <button sc-button type="button">Done</button>
       </div>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScMonthYearHeader, selector: "sc-month-year-header", inputs: ["monthYear"], outputs: ["monthYearChange"] }, { kind: "component", type: ScMonthDays, selector: "sc-month-days", inputs: ["weekDaysNames", "days", "firstDayMonth", "selectedDay"], outputs: ["selectedDayChange"] }, { kind: "component", type: ScCard, selector: "div[sc-card]", inputs: ["class"] }, { kind: "component", type: ScCardHeader, selector: "div[sc-card-header]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: ScCardFooter, selector: "div[sc-card-footer]", inputs: ["class"] }, { kind: "component", type: ScCardContent, selector: "div[sc-card-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScMonthYearHeader, selector: "sc-month-year-header", inputs: ["class", "monthYear"], outputs: ["monthYearChange"] }, { kind: "component", type: ScMonthDays, selector: "sc-month-days", inputs: ["class", "weekDaysNames", "days", "firstDayMonth", "selectedDay"], outputs: ["selectedDayChange"] }, { kind: "component", type: ScCard, selector: "div[sc-card]", inputs: ["class"] }, { kind: "component", type: ScCardHeader, selector: "div[sc-card-header]", inputs: ["class"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: ScCardFooter, selector: "div[sc-card-footer]", inputs: ["class"] }, { kind: "component", type: ScCardContent, selector: "div[sc-card-content]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScInlineDatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCalendar, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-inline-date-picker', imports: [
+            args: [{ selector: 'sc-calendar', imports: [
                         ScMonthYearHeader,
                         ScMonthDays,
                         ScCard,
@@ -5712,10 +6053,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         <button sc-button type="button">Done</button>
       </div>
     </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScFullCalendar {
+    class = input('');
+    classes = computed(() => cn('', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFullCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScFullCalendar, isStandalone: true, selector: "sc-full-calendar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScFullCalendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-full-calendar', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScInput {
+    class = input('');
+    classes = computed(() => cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScInput, isStandalone: true, selector: "input[sc-input]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'input[sc-input]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
 class ScDatePicker {
+    class = input('');
+    classes = computed(() => cn('flex relative', this.class()));
+    host = inject(ElementRef);
     localeId = inject(LOCALE_ID);
     dateFormatPattern = signal('');
     ngOnInit() {
@@ -5746,7 +6126,7 @@ class ScDatePicker {
     _overlay = inject(Overlay);
     _isOpen = signal(false);
     _input = viewChild('input');
-    _overlayOrigin = viewChild('overlayOrigin');
+    // private readonly _overlayOrigin = viewChild<ElementRef<HTMLDivElement>>('overlayOrigin');
     _overlayRef = null;
     _portal = null;
     /** Emits when the datepicker is opened. */
@@ -5772,7 +6152,7 @@ class ScDatePicker {
         const overlayRef = this._getOverlayRef();
         //overlayRef.updateSize({ width: this._overlayOrigin()?.nativeElement.offsetWidth });
         overlayRef.updateSize({ width: 400 });
-        this._portal ??= new ComponentPortal(ScInlineDatePicker);
+        this._portal ??= new ComponentPortal(ScCalendar);
         overlayRef.attach(this._portal);
         this.opened.emit();
     }
@@ -5789,7 +6169,7 @@ class ScDatePicker {
         if (this._overlayRef) {
             return this._overlayRef;
         }
-        const _overlayOrigin = this._overlayOrigin();
+        const _overlayOrigin = this.host;
         if (_overlayOrigin === undefined) {
             throw new Error('_overlayOrigin is undefined');
         }
@@ -5825,7 +6205,7 @@ class ScDatePicker {
         });
         this._overlayRef.outsidePointerEvents().subscribe((event) => {
             const target = _getEventTarget(event);
-            const origin = this._overlayOrigin()?.nativeElement;
+            const origin = this.host?.nativeElement;
             if (target && target !== origin && !origin?.contains(target)) {
                 this.close();
             }
@@ -5839,27 +6219,23 @@ class ScDatePicker {
         this._input()?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScDatePicker, isStandalone: true, selector: "sc-date-picker", outputs: { opened: "opened", closed: "closed", selected: "selected" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    {{ dateFormatPattern() }}
-    <div class="relative" #overlayOrigin>
-      <button class="absolute inset-y-0 end-0  pe-2" (click)="open()">
-        <svg-calendar-icon />
-      </button>
-      <input #input sc-input type="text" placeholder="Select date" />
-    </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScInput, selector: "input[sc-input]", inputs: ["class"] }, { kind: "component", type: SvgCalendarIcon, selector: "svg-calendar-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScDatePicker, isStandalone: true, selector: "sc-date-picker", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", selected: "selected" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button class="absolute inset-y-0 end-0 pe-4" (click)="open()" sc-button variant="ghost">
+      <svg-calendar-icon />
+    </button>
+    <input #input sc-input type="text" placeholder="Select date" />
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScInput, selector: "input[sc-input]", inputs: ["class"] }, { kind: "component", type: SvgCalendarIcon, selector: "svg-calendar-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDatePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-date-picker', imports: [ScInput, SvgCalendarIcon], template: `
-    {{ dateFormatPattern() }}
-    <div class="relative" #overlayOrigin>
-      <button class="absolute inset-y-0 end-0  pe-2" (click)="open()">
-        <svg-calendar-icon />
-      </button>
-      <input #input sc-input type="text" placeholder="Select date" />
-    </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+            args: [{ selector: 'sc-date-picker', imports: [ScInput, SvgCalendarIcon, ScButton], template: `
+    <button class="absolute inset-y-0 end-0 pe-4" (click)="open()" sc-button variant="ghost">
+      <svg-calendar-icon />
+    </button>
+    <input #input sc-input type="text" placeholder="Select date" />
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
 class ScNav {
@@ -6125,1648 +6501,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-class ScSelectState {
-    selectedValue = signal('');
-    selectedLabel = signal('');
-    isOpen = signal(false);
-    closeOverlay = signal(false);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelectState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelectState });
+class ScProgress {
+    class = input('');
+    classes = computed(() => cn('block relative h-4 w-full overflow-hidden rounded-full bg-secondary', this.class()));
+    /** Current value of the progressbar. */
+    value = input(0);
+    transform = computed(() => {
+        return `translateX(-${100 - this.value()}%)`;
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScProgress, isStandalone: true, selector: "sc-progress", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "attr.aria-valuenow": "value()", "class": "classes()" } }, ngImport: i0, template: `
+    <div class="size-full flex-1 bg-primary transition-all" [style.transform]="transform()"></div>
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelectState, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScProgress, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-progress', imports: [], template: `
+    <div class="size-full flex-1 bg-primary transition-all" [style.transform]="transform()"></div>
+  `, host: {
+                        // Sets the role for this component to "progressbar"
+                        role: 'progressbar',
+                        // Sets the minimum and maximum values for the progressbar role.
+                        'aria-valuemin': '0',
+                        'aria-valuemax': '100',
+                        // Binding that updates the current value of the progressbar.
+                        '[attr.aria-valuenow]': 'value()',
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-class ScSelect {
-    static nextId = 0;
-    id = 0;
-    _getPanelId() {
-        return `panel-${this.id}`;
+const scOverlayClasses = signal([
+    'bg-black/80',
+    'data-[state=open]:animate-in',
+    'data-[state=closed]:animate-out',
+    'data-[state=closed]:fade-out-0',
+    'data-[state=open]:fade-in-0',
+]);
+
+class ScSheetContainer {
+    class = input('');
+    classes = computed(() => cn('block size-full', this.class()));
+    templateRef = signal(null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheetContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScSheetContainer, isStandalone: true, selector: "sc-sheet-container", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    @if (templateRef()) {
+      <ng-container *ngTemplateOutlet="templateRef()"></ng-container>
     }
-    _cdr = inject(ChangeDetectorRef);
-    state = inject(ScSelectState);
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheetContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-sheet-container', imports: [NgTemplateOutlet], template: `
+    @if (templateRef()) {
+      <ng-container *ngTemplateOutlet="templateRef()"></ng-container>
+    }
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScSheetTrigger {
+    _overlayContainer = inject(OverlayContainer);
     _overlay = inject(Overlay);
-    _dir = inject(Directionality, { optional: true });
-    _viewContainerRef = inject(ViewContainerRef);
-    _portal = null;
-    scSelectTrigger = viewChild.required('scSelectTrigger');
-    _panelTemplate = viewChild.required('panelTemplate');
-    placeholder = input('');
+    _overlayRef;
+    state = signal('closed');
+    side = signal('right');
     constructor() {
-        this.id = ++ScSelect.nextId;
         effect(() => {
-            const selectedValue = this.state.selectedValue();
-            this.setValue(selectedValue);
-            const closeOverlay = this.state.closeOverlay();
-            if (closeOverlay) {
-                this.close();
-                this.state.closeOverlay.set(false);
+            if (this.state() === 'open') {
+                this._overlayContainer.getContainerElement().classList.add(...scOverlayClasses());
             }
-        });
-    }
-    _value = signal('');
-    isDisabled = signal(false);
-    writeValue(value) {
-        this._value.set(value);
-    }
-    setValue(value) {
-        this._value.set(value);
-        this._onChange(value);
-        this._cdr.markForCheck();
-    }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    _onChange = () => { };
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    _onTouched = () => { };
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.isDisabled.set(isDisabled);
-    }
-    label = computed(() => {
-        if (this.state.selectedLabel()) {
-            return this.state.selectedLabel();
-        }
-        return this.placeholder();
-    });
-    _isExpanded = computed(() => {
-        return this.state.isOpen();
-    });
-    _overlayRef = null;
-    _getOverlayRef() {
-        if (this._overlayRef) {
-            return this._overlayRef;
-        }
-        const positionStrategy = this._overlay
-            .position()
-            .flexibleConnectedTo(this.scSelectTrigger())
-            .withFlexibleDimensions(false)
-            .withPush(false)
-            .withPositions([
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: 8,
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetY: -8,
-            },
-        ]);
-        this._overlayRef = this._overlay.create({
-            positionStrategy,
-            scrollStrategy: this._overlay.scrollStrategies.reposition(),
-            direction: this._dir || 'ltr',
-            hasBackdrop: false,
-        });
-        this._overlayRef.keydownEvents().subscribe((event) => {
-            this._handleKeydown(event);
-        });
-        this._overlayRef.outsidePointerEvents().subscribe((event) => {
-            const target = _getEventTarget(event);
-            const origin = this.scSelectTrigger().nativeElement;
-            if (target && target !== origin && !origin.contains(target)) {
-                this.close();
+            if (this.state() === 'closed') {
+                this._overlayContainer.getContainerElement().classList.remove(...scOverlayClasses());
             }
+            this._overlayContainer.getContainerElement().setAttribute('data-state', this.state());
         });
-        return this._overlayRef;
-    }
-    open() {
-        if (this.state.isOpen()) {
-            return;
-        }
-        this.state.isOpen.set(true);
-        const overlayRef = this._getOverlayRef();
-        overlayRef.updateSize({ width: this.scSelectTrigger().nativeElement.offsetWidth });
-        this._portal ??= new TemplatePortal(this._panelTemplate(), this._viewContainerRef);
-        overlayRef.attach(this._portal);
-    }
-    close() {
-        if (this.state.isOpen()) {
-            this.state.isOpen.set(false);
-            this._overlayRef?.detach();
-        }
-    }
-    /** Handles keyboard events while the overlay is open. */
-    _handleKeydown(event) {
-        const keyCode = event.keyCode;
-        if (keyCode === TAB) {
-            this.close();
-        }
-        else if (keyCode === ESCAPE && !hasModifierKey(event)) {
-            event.preventDefault();
-            this.close();
-        }
-        //TODO handle keyCode === ENTER and other cases
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: ScSelect, isStandalone: true, selector: "sc-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ScSelect),
-                multi: true,
-            },
-            ScSelectState,
-        ], viewQueries: [{ propertyName: "scSelectTrigger", first: true, predicate: ["scSelectTrigger"], descendants: true, isSignal: true }, { propertyName: "_panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <button
-      class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"
-      #scSelectTrigger
-      [disabled]="isDisabled()"
-      [attr.aria-expanded]="_isExpanded()"
-      [attr.aria-controls]="_getPanelId()"
-      (click)="open()"
-      type="button"
-      role="combobox"
-    >
-      {{ label() }}
-      <svg-chevron-down-icon class="size-4 opacity-50" />
-    </button>
-
-    <ng-template #panelTemplate>
-      <div
-        class="relative z-50 max-h-96 w-full min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-        [id]="_getPanelId()"
-      >
-        <ng-content />
-      </div>
-    </ng-template>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgChevronDownIcon, selector: "svg-chevron-down-icon", inputs: ["class", "svgClass"] }, { kind: "ngmodule", type: OverlayModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSelect, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-select', imports: [SvgChevronDownIcon, OverlayModule], template: `
-    <button
-      class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"
-      #scSelectTrigger
-      [disabled]="isDisabled()"
-      [attr.aria-expanded]="_isExpanded()"
-      [attr.aria-controls]="_getPanelId()"
-      (click)="open()"
-      type="button"
-      role="combobox"
-    >
-      {{ label() }}
-      <svg-chevron-down-icon class="size-4 opacity-50" />
-    </button>
-
-    <ng-template #panelTemplate>
-      <div
-        class="relative z-50 max-h-96 w-full min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-        [id]="_getPanelId()"
-      >
-        <ng-content />
-      </div>
-    </ng-template>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ScSelect),
-                            multi: true,
-                        },
-                        ScSelectState,
-                    ] }]
-        }], ctorParameters: () => [] });
-
-class ScOption {
-    state = inject(ScSelectState);
-    value = input.required();
-    label = viewChild.required('label');
-    select() {
-        this.state.selectedValue.set(this.value());
-        this.state.selectedLabel.set(this.label().nativeElement.textContent ?? '');
-        this.state.closeOverlay.set(true);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScOption, isStandalone: true, selector: "sc-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <button
-      class="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-      (click)="select()"
-      type="button"
-    >
-      @if (state.selectedValue() === value()) {
-        <span class="absolute left-2 flex size-3.5 items-center justify-center">
-          <svg-check-icon class="size-4" />
-        </span>
-      }
-
-      <span #label>
-        <ng-content />
-      </span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScOption, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-option', imports: [SvgCheckIcon], template: `
-    <button
-      class="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-      (click)="select()"
-      type="button"
-    >
-      @if (state.selectedValue() === value()) {
-        <span class="absolute left-2 flex size-3.5 items-center justify-center">
-          <svg-check-icon class="size-4" />
-        </span>
-      }
-
-      <span #label>
-        <ng-content />
-      </span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScProgress {
-    class = input('');
-    classes = computed(() => cn('block relative h-4 w-full overflow-hidden rounded-full bg-secondary', this.class()));
-    /** Current value of the progressbar. */
-    value = input(0);
-    transform = computed(() => {
-        return `translateX(-${100 - this.value()}%)`;
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScProgress, isStandalone: true, selector: "sc-progress", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "attr.aria-valuenow": "value()", "class": "classes()" } }, ngImport: i0, template: `
-    <div class="size-full flex-1 bg-primary transition-all" [style.transform]="transform()"></div>
-  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScProgress, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-progress', imports: [], template: `
-    <div class="size-full flex-1 bg-primary transition-all" [style.transform]="transform()"></div>
-  `, host: {
-                        // Sets the role for this component to "progressbar"
-                        role: 'progressbar',
-                        // Sets the minimum and maximum values for the progressbar role.
-                        'aria-valuemin': '0',
-                        'aria-valuemax': '100',
-                        // Binding that updates the current value of the progressbar.
-                        '[attr.aria-valuenow]': 'value()',
-                        '[class]': 'classes()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScSheetTrigger {
-    _overlayContainer = inject(OverlayContainer);
-    overlay = inject(Overlay);
-    overlayRef;
-    open = signal(false);
-    openSheet() {
-        const side = 'left';
-        this._overlayContainer.getContainerElement().classList.add('sc-overlay-container');
-        const positionStrategy = this.getPositionStrategy(side);
-        this.overlayRef = this.overlay.create({ positionStrategy });
-        this.updateSize(side);
-        const tooltipPortal = new ComponentPortal(ScSheet);
-        const tooltipRef = this.overlayRef.attach(tooltipPortal);
-        tooltipRef.instance.side.set(side);
-    }
-    toggle() {
-        if (this.overlayRef?.hasAttached() === true) {
-            this.overlayRef?.detach();
-            this.open.set(false);
-            this._overlayContainer.getContainerElement().classList.remove('sc-overlay-container');
-        }
-        else {
-            this.openSheet();
-            this.open.set(true);
-        }
-    }
-    getPositionStrategy(side) {
-        return this.overlay
-            .position()
-            .flexibleConnectedTo(this._overlayContainer.getContainerElement())
-            .withPositions(this.getPositions(side));
-    }
-    getPositions(side) {
-        switch (side) {
-            case 'top': {
-                return [
-                    {
-                        originX: 'start',
-                        originY: 'top',
-                        overlayX: 'start',
-                        overlayY: 'top',
-                    },
-                ];
-            }
-            case 'bottom': {
-                return [
-                    {
-                        originX: 'end',
-                        originY: 'bottom',
-                        overlayX: 'end',
-                        overlayY: 'bottom',
-                    },
-                ];
-            }
-            case 'left': {
-                return [
-                    {
-                        originX: 'start',
-                        originY: 'top',
-                        overlayX: 'start',
-                        overlayY: 'top',
-                    },
-                ];
-            }
-            case 'right': {
-                return [
-                    {
-                        originX: 'end',
-                        originY: 'top',
-                        overlayX: 'end',
-                        overlayY: 'top',
-                    },
-                ];
-            }
-            default: {
-                throw new Error('Error in switch case');
-            }
-        }
-    }
-    updateSize(side) {
-        switch (side) {
-            case 'top': {
-                this.overlayRef.updateSize({ height: 300, width: '100%' });
-                return;
-            }
-            case 'bottom': {
-                this.overlayRef.updateSize({ height: 300, width: '100%' });
-                return;
-            }
-            case 'left': {
-                this.overlayRef.updateSize({ width: 620 });
-                return;
-            }
-            case 'right': {
-                this.overlayRef.updateSize({ width: 620 });
-                return;
-            }
-            default: {
-                throw new Error('Error in switch case');
-            }
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheetTrigger, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheetTrigger, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheetTrigger, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class ScSheetToggler {
-    sidebarState = inject(ScSheetTrigger);
-    class = input('');
-    classes = computed(() => cn('', this.class()));
-    toggle() {
-        this.sidebarState.toggle();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheetToggler, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScSheetToggler, isStandalone: true, selector: "sc-sheet-toggler", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <button
-      [class]="classes()"
-      (click)="toggle()"
-      sc-button
-      data-sidebar="trigger"
-      variant="ghost"
-      size="icon"
-      type="button"
-    >
-      @if (sidebarState.open()) {
-        <svg-x-icon />
-      }
-
-      @if (!sidebarState.open()) {
-        <svg-menu-icon />
-      }
-
-      <span class="sr-only">Toggle Sidebar</span>
-    </button>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: SvgMenuIcon, selector: "svg-menu-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheetToggler, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-sheet-toggler', imports: [ScButton, SvgMenuIcon, SvgXIcon], template: `
-    <button
-      [class]="classes()"
-      (click)="toggle()"
-      sc-button
-      data-sidebar="trigger"
-      variant="ghost"
-      size="icon"
-      type="button"
-    >
-      @if (sidebarState.open()) {
-        <svg-x-icon />
-      }
-
-      @if (!sidebarState.open()) {
-        <svg-menu-icon />
-      }
-
-      <span class="sr-only">Toggle Sidebar</span>
-    </button>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class ScScrollArea {
-    host = inject(ElementRef);
-    class = input('');
-    classes = computed(() => cn('', this.class()));
-    visibility = input('native');
-    //TODO remove use of ngAfterViewInit
-    ngAfterViewInit() {
-        const height = this.host.nativeElement.scrollHeight;
-        console.log(height);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScScrollArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScScrollArea, isStandalone: true, selector: "div[sc-scroll-area]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
-    <ng-scrollbar
-      [visibility]="visibility()"
-      [style]="{
-        '--scrollbar-border-radius': '100px',
-        '--scrollbar-padding': '1px',
-        '--scrollbar-thumb-color': 'hsl(var(--border))',
-        '--scrollbar-thumb-hover-color': 'hsl(var(--border))',
-        '--scrollbar-size': '7px',
-      }"
-    >
-      <ng-content />
-    </ng-scrollbar>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i1$1.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScScrollArea, decorators: [{
-            type: Component,
-            args: [{ selector: 'div[sc-scroll-area]', imports: [NgScrollbarModule], template: `
-    <ng-scrollbar
-      [visibility]="visibility()"
-      [style]="{
-        '--scrollbar-border-radius': '100px',
-        '--scrollbar-padding': '1px',
-        '--scrollbar-thumb-color': 'hsl(var(--border))',
-        '--scrollbar-thumb-hover-color': 'hsl(var(--border))',
-        '--scrollbar-size': '7px',
-      }"
-    >
-      <ng-content />
-    </ng-scrollbar>
-  `, host: {
-                        '[class]': 'classes()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class SidebarContent {
-    class = input('');
-    classes = computed(() => cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', this.class()));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidebarContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: SidebarContent, isStandalone: true, selector: "app-sidebar-content", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
-    <div class="w-full pl-5 pt-5" sc-scroll-area>
-      <div class="pb-4">
-        <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Getting Started</h4>
-        <div class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs"
-          >
-            Introduction
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation"
-          >
-            Installation
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components-json"
-          >
-            components.json
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/theming"
-          >
-            Theming
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/dark-mode"
-          >
-            Dark mode
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/cli"
-          >
-            CLI
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/react-19"
-          >
-            Next.js 15 + React 19
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/typography"
-          >
-            Typography
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/v0"
-          >
-            Open in v0
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/figma"
-          >
-            Figma
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/changelog"
-          >
-            Changelog
-          </a>
-        </div>
-      </div>
-      <div class="pb-4">
-        <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Installation</h4>
-        <div class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/next"
-          >
-            Next.js
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/vite"
-          >
-            Vite
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/remix"
-          >
-            Remix
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/astro"
-          >
-            Astro
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/laravel"
-          >
-            Laravel
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/gatsby"
-          >
-            Gatsby
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/manual"
-          >
-            Manual
-          </a>
-        </div>
-      </div>
-      <div class="pb-4">
-        <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Components</h4>
-        <div class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline underline-offset-2 hover:underline"
-            routerLink="/editor"
-          >
-            Editor
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline underline-offset-2 hover:underline"
-            routerLink="/theme-toggler"
-          >
-            Theme toggler
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline underline-offset-2 hover:underline"
-            routerLink="/dropdown"
-          >
-            Dropdown
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/sidebar"
-          >
-            Sidebar
-            <span
-              class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline"
-            >
-              New
-            </span>
-          </a>
-
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/accordion"
-          >
-            Accordion
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/alert"
-          >
-            Alert
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/alert-dialog"
-          >
-            Alert Dialog
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/aspect-ratio"
-          >
-            Aspect Ratio
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/avatar"
-          >
-            Avatar
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/badge"
-          >
-            Badge
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/breadcrumb"
-          >
-            Breadcrumb
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/button"
-          >
-            Button
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/date-picker"
-          >
-            Calendar
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/card"
-          >
-            Card
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/carousel"
-          >
-            Carousel
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/chart"
-          >
-            Chart
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/checkbox"
-          >
-            Checkbox
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/collapsible"
-          >
-            Collapsible
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/combobox"
-          >
-            Combobox
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/command"
-          >
-            Command
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/context-menu"
-          >
-            Context Menu
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/data-table"
-          >
-            Data Table
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/date-picker"
-          >
-            Date Picker
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/dialog"
-          >
-            Dialog
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/drawer"
-          >
-            Drawer
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/dropdown-menu"
-          >
-            Dropdown Menu
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/form"
-          >
-            Form
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/hover-card"
-          >
-            Hover Card
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/input"
-          >
-            Input
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/input-otp"
-          >
-            Input OTP
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/label"
-          >
-            Label
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/menubar"
-          >
-            Menubar
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/nav"
-          >
-            Navigation Menu
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/paginator"
-          >
-            Pagination
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/popover"
-          >
-            Popover
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/progress"
-          >
-            Progress
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/radio-group"
-          >
-            Radio Group
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/resizable"
-          >
-            Resizable
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/scroll-area"
-          >
-            Scroll Area
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/select"
-          >
-            Select
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/separator"
-          >
-            Separator
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/sheet"
-          >
-            Sheet
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/skeleton"
-          >
-            Skeleton
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/slider"
-          >
-            Slider
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/sonner"
-          >
-            Sonner
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/switch"
-          >
-            Switch
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/table"
-          >
-            Table
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/editor"
-          >
-            Tabs
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/textarea"
-          >
-            Textarea
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/toast"
-          >
-            Toast
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/nav"
-          >
-            Toggle
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/toggle-group"
-          >
-            Toggle Group
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/tooltip"
-          >
-            Tooltip
-          </a>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ScScrollArea, selector: "div[sc-scroll-area]", inputs: ["class", "visibility"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidebarContent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-sidebar-content', imports: [RouterModule, ScScrollArea], template: `
-    <div class="w-full pl-5 pt-5" sc-scroll-area>
-      <div class="pb-4">
-        <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Getting Started</h4>
-        <div class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs"
-          >
-            Introduction
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation"
-          >
-            Installation
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components-json"
-          >
-            components.json
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/theming"
-          >
-            Theming
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/dark-mode"
-          >
-            Dark mode
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/cli"
-          >
-            CLI
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/react-19"
-          >
-            Next.js 15 + React 19
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/typography"
-          >
-            Typography
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/v0"
-          >
-            Open in v0
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/figma"
-          >
-            Figma
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/changelog"
-          >
-            Changelog
-          </a>
-        </div>
-      </div>
-      <div class="pb-4">
-        <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Installation</h4>
-        <div class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/next"
-          >
-            Next.js
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/vite"
-          >
-            Vite
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/remix"
-          >
-            Remix
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/astro"
-          >
-            Astro
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/laravel"
-          >
-            Laravel
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/gatsby"
-          >
-            Gatsby
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/installation/manual"
-          >
-            Manual
-          </a>
-        </div>
-      </div>
-      <div class="pb-4">
-        <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Components</h4>
-        <div class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline underline-offset-2 hover:underline"
-            routerLink="/editor"
-          >
-            Editor
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline underline-offset-2 hover:underline"
-            routerLink="/theme-toggler"
-          >
-            Theme toggler
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline underline-offset-2 hover:underline"
-            routerLink="/dropdown"
-          >
-            Dropdown
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/sidebar"
-          >
-            Sidebar
-            <span
-              class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline"
-            >
-              New
-            </span>
-          </a>
-
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/accordion"
-          >
-            Accordion
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/alert"
-          >
-            Alert
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/alert-dialog"
-          >
-            Alert Dialog
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/aspect-ratio"
-          >
-            Aspect Ratio
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/avatar"
-          >
-            Avatar
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/badge"
-          >
-            Badge
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/breadcrumb"
-          >
-            Breadcrumb
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/button"
-          >
-            Button
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/date-picker"
-          >
-            Calendar
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/card"
-          >
-            Card
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/carousel"
-          >
-            Carousel
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/chart"
-          >
-            Chart
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/checkbox"
-          >
-            Checkbox
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/collapsible"
-          >
-            Collapsible
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/combobox"
-          >
-            Combobox
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/command"
-          >
-            Command
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/context-menu"
-          >
-            Context Menu
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/data-table"
-          >
-            Data Table
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/date-picker"
-          >
-            Date Picker
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/dialog"
-          >
-            Dialog
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/drawer"
-          >
-            Drawer
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/dropdown-menu"
-          >
-            Dropdown Menu
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/form"
-          >
-            Form
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/hover-card"
-          >
-            Hover Card
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/input"
-          >
-            Input
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/input-otp"
-          >
-            Input OTP
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/label"
-          >
-            Label
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/menubar"
-          >
-            Menubar
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/nav"
-          >
-            Navigation Menu
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/paginator"
-          >
-            Pagination
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/popover"
-          >
-            Popover
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/progress"
-          >
-            Progress
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/radio-group"
-          >
-            Radio Group
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/resizable"
-          >
-            Resizable
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/scroll-area"
-          >
-            Scroll Area
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/select"
-          >
-            Select
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/separator"
-          >
-            Separator
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/sheet"
-          >
-            Sheet
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/skeleton"
-          >
-            Skeleton
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/slider"
-          >
-            Slider
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/sonner"
-          >
-            Sonner
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/switch"
-          >
-            Switch
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/table"
-          >
-            Table
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/editor"
-          >
-            Tabs
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/textarea"
-          >
-            Textarea
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/toast"
-          >
-            Toast
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/nav"
-          >
-            Toggle
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            target=""
-            rel=""
-            href="/docs/components/toggle-group"
-          >
-            Toggle Group
-          </a>
-          <a
-            class="group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline"
-            routerLink="/tooltip"
-          >
-            Tooltip
-          </a>
-        </div>
-      </div>
-    </div>
-  `, host: {
-                        '[class]': 'classes()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
+    }
+    open(templateRef, config) {
+        this.state.set('open');
+        this.side.set(config.side);
+        const overlayConfig = this.getOverlayConfig(config);
+        this._overlayRef = this._overlay.create(overlayConfig);
+        const scSheetPortal = new ComponentPortal(ScSheetContainer);
+        const scSheetRef = this._overlayRef.attach(scSheetPortal);
+        scSheetRef.instance.templateRef.set(templateRef);
+        this._overlayRef.backdropClick().subscribe(() => this.close());
+    }
+    close() {
+        if (this._overlayRef?.hasAttached()) {
+            this._overlayRef?.detach();
+            this.state.set('closed');
+        }
+    }
+    getOverlayConfig(config) {
+        switch (config.side) {
+            case 'top': {
+                return new OverlayConfig({
+                    positionStrategy: this._overlay.position().global().top(),
+                    width: config.width,
+                    height: config.height,
+                    hasBackdrop: true,
+                });
+            }
+            case 'bottom': {
+                return new OverlayConfig({
+                    positionStrategy: this._overlay.position().global().bottom(),
+                    width: config.width,
+                    height: config.height,
+                    hasBackdrop: true,
+                });
+            }
+            case 'left': {
+                return new OverlayConfig({
+                    positionStrategy: this._overlay.position().global().left(),
+                    width: config.width,
+                    height: config.height,
+                    hasBackdrop: true,
+                });
+            }
+            case 'right': {
+                return new OverlayConfig({
+                    positionStrategy: this._overlay.position().global().right(),
+                    width: config.width,
+                    height: config.height,
+                    hasBackdrop: true,
+                });
+            }
+            default: {
+                throw new Error('Error in switch case');
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheetTrigger, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheetTrigger, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheetTrigger, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
 const sheetVariants = cva('relative z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out', {
     variants: {
         side: {
             top: 'size-full border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
             bottom: 'size-full border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-            left: 'size-full border-r  data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-            right: 'size-full border-l  data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+            left: 'size-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+            right: 'size-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
         },
     },
     defaultVariants: {
@@ -7774,32 +6656,58 @@ const sheetVariants = cva('relative z-50 gap-4 bg-background p-6 shadow-lg trans
     },
 });
 class ScSheet {
-    sidebarState = inject(ScSheetTrigger);
+    scSheetTrigger = inject(ScSheetTrigger);
     state = computed(() => {
-        return this.sidebarState.open() ? 'open' : 'closed';
+        return this.scSheetTrigger.state();
+    });
+    side = computed(() => {
+        return this.scSheetTrigger.side();
     });
-    side = signal('right');
     class = input('');
     classes = computed(() => cn(sheetVariants({ side: this.side() }), this.class()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScSheet, isStandalone: true, selector: "sc-sheet", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-state": "state()" } }, ngImport: i0, template: `
-    <sc-sheet-toggler class="absolute right-1 top-1" />
-
-    <app-sidebar-content />
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScSheetToggler, selector: "sc-sheet-toggler", inputs: ["class"] }, { kind: "component", type: SidebarContent, selector: "app-sidebar-content", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScSheet, isStandalone: true, selector: "div[sc-sheet]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-state": "state()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheet, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-sheet', imports: [ScSheetToggler, SidebarContent], template: `
-    <sc-sheet-toggler class="absolute right-1 top-1" />
-
-    <app-sidebar-content />
+            args: [{ selector: 'div[sc-sheet]', imports: [], template: `
+    <ng-content />
   `, host: {
                         '[class]': 'classes()',
                         '[attr.data-state]': 'state()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+class ScSheetConfig {
+    side = 'right';
+    width = '100%';
+    height = '100%';
+}
+
+class ScSheetClose {
+    scSheetTrigger = inject(ScSheetTrigger);
+    class = input('');
+    classes = computed(() => cn('absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', this.class()));
+    close() {
+        this.scSheetTrigger.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheetClose, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScSheetClose, isStandalone: true, selector: "button[sc-sheet-close]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "close()" }, properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSheetClose, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[sc-sheet-close]', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'classes()',
+                        '(click)': 'close()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
 class ScBreadcrumb {
     ariaLabel = 'breadcrumb';
     class = input('');
@@ -8321,6 +7229,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+class ScScrollArea {
+    host = inject(ElementRef);
+    class = input('');
+    classes = computed(() => cn('', this.class()));
+    visibility = input('native');
+    //TODO remove use of ngAfterViewInit
+    ngAfterViewInit() {
+        const height = this.host.nativeElement.scrollHeight;
+        console.log(height);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScScrollArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScScrollArea, isStandalone: true, selector: "div[sc-scroll-area]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <ng-scrollbar
+      [visibility]="visibility()"
+      [style]="{
+        '--scrollbar-border-radius': '100px',
+        '--scrollbar-padding': '1px',
+        '--scrollbar-thumb-color': 'hsl(var(--border))',
+        '--scrollbar-thumb-hover-color': 'hsl(var(--border))',
+        '--scrollbar-size': '7px',
+      }"
+    >
+      <ng-content />
+    </ng-scrollbar>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i1$2.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScScrollArea, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[sc-scroll-area]', imports: [NgScrollbarModule], template: `
+    <ng-scrollbar
+      [visibility]="visibility()"
+      [style]="{
+        '--scrollbar-border-radius': '100px',
+        '--scrollbar-padding': '1px',
+        '--scrollbar-thumb-color': 'hsl(var(--border))',
+        '--scrollbar-thumb-hover-color': 'hsl(var(--border))',
+        '--scrollbar-size': '7px',
+      }"
+    >
+      <ng-content />
+    </ng-scrollbar>
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
 class ScTab {
     class = input('');
     classes = computed(() => cn('', this.class()));
@@ -11100,9 +10054,425 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+
+class ScSidebarState {
+    open = signal(true);
+    openMobile = signal(false);
+    isMobile = signal(false);
+    // Helper to toggle the sidebar.
+    toggleSidebar() {
+        return this.isMobile()
+            ? this.openMobile.update((open) => !open)
+            : this.open.update((open) => !open);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebarState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebarState, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebarState, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ScSidebarToggler {
+    sidebarState = inject(ScSidebarState);
+    toggleSidebar() {
+        this.sidebarState.toggleSidebar();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebarToggler, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ScSidebarToggler, isStandalone: true, selector: "sc-sidebar-toggler", ngImport: i0, template: `
+    <button
+      class="size-7"
+      (click)="toggleSidebar()"
+      sc-button
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+    >
+      <ng-content />
+      <span class="sr-only">Toggle Sidebar</span>
+    </button>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebarToggler, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-sidebar-toggler', imports: [ScButton], template: `
+    <button
+      class="size-7"
+      (click)="toggleSidebar()"
+      sc-button
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+    >
+      <ng-content />
+      <span class="sr-only">Toggle Sidebar</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScSidebarMobile {
+    sidebarState = inject(ScSidebarState);
+    styles = signal(`--sidebar-width: ${SIDEBAR_WIDTH_MOBILE};`);
+    side = input.required();
+    openMobile = computed(() => this.sidebarState.openMobile());
+    state = computed(() => {
+        return this.openMobile() ? 'open' : 'closed';
+    });
+    class = input('');
+    classes = computed(() => cn('absolute top-0 h-full bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out', this.openMobile() && 'w-[--sidebar-width]', !this.openMobile() && 'w-0 overflow-hidden', this.side() === 'left' &&
+        'left-0 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left', this.side() === 'right' &&
+        'right-0 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right', this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebarMobile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScSidebarMobile, isStandalone: true, selector: "sc-sidebar-mobile", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style": "styles()", "attr.data-sidebar": "\"sidebar\"", "attr.data-mobile": "\"true\"", "attr.data-state": "state()" } }, ngImport: i0, template: `
+    <div class="flex size-full flex-col">
+      <sc-sidebar-toggler class="absolute right-1 top-1">
+        <svg-x-icon />
+      </sc-sidebar-toggler>
+
+      <br />
+      <br />
+      open : {{ sidebarState.open() }}
+      <br />
+      openMobile : {{ sidebarState.openMobile() }}
+      <br />
+      isMobile : {{ sidebarState.isMobile() }}
+
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScSidebarToggler, selector: "sc-sidebar-toggler" }, { kind: "component", type: SvgXIcon, selector: "svg-x-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebarMobile, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-sidebar-mobile', imports: [ScSidebarToggler, SvgXIcon], template: `
+    <div class="flex size-full flex-col">
+      <sc-sidebar-toggler class="absolute right-1 top-1">
+        <svg-x-icon />
+      </sc-sidebar-toggler>
+
+      <br />
+      <br />
+      open : {{ sidebarState.open() }}
+      <br />
+      openMobile : {{ sidebarState.openMobile() }}
+      <br />
+      isMobile : {{ sidebarState.isMobile() }}
+
+      <ng-content />
+    </div>
+  `, host: {
+                        '[class]': 'classes()',
+                        '[style]': 'styles()',
+                        '[attr.data-sidebar]': '"sidebar"',
+                        '[attr.data-mobile]': '"true"',
+                        '[attr.data-state]': 'state()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScSidebar {
+    observer;
+    sidebarState = inject(ScSidebarState);
+    class = input('');
+    classes = computed(() => cn('block relative', this.class()));
+    side = input('left');
+    variant = input('sidebar');
+    collapsible = input('offcanvas');
+    isMobile = computed(() => this.sidebarState.isMobile());
+    openMobile = computed(() => this.sidebarState.openMobile());
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    state = computed(() => (this.sidebarState.open() ? 'expanded' : 'collapsed'));
+    classes1 = signal(cn('duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', this.variant() === 'floating' || this.variant() === 'inset'
+        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'));
+    classes2 = signal(cn('duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex', this.side() === 'left'
+        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 
+    // Adjust the padding for floating and inset variants.
+    this.variant() === 'floating' || this.variant() === 'inset'
+        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l'));
+    constructor(observer) {
+        this.observer = observer;
+        this.observer.observe('(max-width: 768px)').subscribe((result) => {
+            this.sidebarState.isMobile.set(result.matches);
+            if (!result.matches && this.openMobile()) {
+                this.sidebarState.openMobile.set(false);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebar, deps: [{ token: i1$6.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScSidebar, isStandalone: true, selector: "sc-sidebar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <ng-template #sc_sidebar_content>
+      <ng-content />
+    </ng-template>
+
+    @if (collapsible() === 'none') {
+      <div class="flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground">
+        <ng-container *ngTemplateOutlet="sc_sidebar_content" />
+      </div>
+    } @else if (isMobile()) {
+      <sc-sidebar-mobile [side]="side()">
+        <ng-container *ngTemplateOutlet="sc_sidebar_content" />
+      </sc-sidebar-mobile>
+    } @else {
+      <div
+        class="group peer hidden text-sidebar-foreground md:block"
+        [attr.data-state]="state()"
+        [attr.data-collapsible]="state() === 'collapsed' ? collapsible() : ''"
+        [attr.data-variant]="variant()"
+        [attr.data-side]="side()"
+      >
+        <!-- This is what handles the sidebar gap on desktop -->
+        <div [class]="classes1()"></div>
+        <div [class]="classes2()">
+          <div
+            class="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+            data-sidebar="sidebar"
+          >
+            <ng-container *ngTemplateOutlet="sc_sidebar_content" />
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: LayoutModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScSidebarMobile, selector: "sc-sidebar-mobile", inputs: ["side", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebar, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-sidebar', imports: [LayoutModule, NgTemplateOutlet, ScSidebarMobile], template: `
+    <ng-template #sc_sidebar_content>
+      <ng-content />
+    </ng-template>
+
+    @if (collapsible() === 'none') {
+      <div class="flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground">
+        <ng-container *ngTemplateOutlet="sc_sidebar_content" />
+      </div>
+    } @else if (isMobile()) {
+      <sc-sidebar-mobile [side]="side()">
+        <ng-container *ngTemplateOutlet="sc_sidebar_content" />
+      </sc-sidebar-mobile>
+    } @else {
+      <div
+        class="group peer hidden text-sidebar-foreground md:block"
+        [attr.data-state]="state()"
+        [attr.data-collapsible]="state() === 'collapsed' ? collapsible() : ''"
+        [attr.data-variant]="variant()"
+        [attr.data-side]="side()"
+      >
+        <!-- This is what handles the sidebar gap on desktop -->
+        <div [class]="classes1()"></div>
+        <div [class]="classes2()">
+          <div
+            class="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+            data-sidebar="sidebar"
+          >
+            <ng-container *ngTemplateOutlet="sc_sidebar_content" />
+          </div>
+        </div>
+      </div>
+    }
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [{ type: i1$6.BreakpointObserver }] });
+
+class ScSidebarProvider {
+    sidebarState = inject(ScSidebarState);
+    class = input('');
+    classes = computed(() => cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', this.sidebarState.openMobile() && scOverlayClasses(), this.class()));
+    styles = signal(`--sidebar-width: ${SIDEBAR_WIDTH}; --sidebar-width-icon: ${SIDEBAR_WIDTH_ICON};`);
+    stateMobile = computed(() => {
+        return this.sidebarState.openMobile() ? 'open' : 'closed';
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebarProvider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScSidebarProvider, isStandalone: true, selector: "sc-sidebar-provider", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style": "styles()", "attr.data-state": "stateMobile()" } }, providers: [], ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebarProvider, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-sidebar-provider', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        '[class]': 'classes()',
+                        '[style]': 'styles()',
+                        '[attr.data-state]': 'stateMobile()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [] }]
+        }] });
+
+class ScAutocompleteItem {
+    class = input('');
+    classes = computed(() => cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none hover:bg-accent hover:text-accent-foreground data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_.svg]:pointer-events-none [&_.svg]:size-4 [&_.svg]:shrink-0', this.class()));
+    _disabled = input(false, {
+        transform: booleanAttribute,
+    });
+    item = input.required();
+    selectedItem = input(undefined);
+    isSelected = computed(() => {
+        return this.item().id === this.selectedItem()?.id;
+    });
+    _isActive = signal(false);
+    disabled;
+    getLabel() {
+        return this.item.name;
+    }
+    setActiveStyles() {
+        this._isActive.set(true);
+    }
+    setInactiveStyles() {
+        this._isActive.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAutocompleteItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScAutocompleteItem, isStandalone: true, selector: "sc-autocomplete-item", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "_disabled", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-disabled": "_disabled()", "attr.data-selected": "_isActive()" } }, ngImport: i0, template: `
+    <ng-content />
+
+    @if (isSelected()) {
+      <svg-check-icon class="ml-auto" />
+    }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAutocompleteItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-autocomplete-item', imports: [SvgCheckIcon], template: `
+    <ng-content />
+
+    @if (isSelected()) {
+      <svg-check-icon class="ml-auto" />
+    }
+  `, host: {
+                        '[class]': 'classes()',
+                        '[attr.data-disabled]': '_disabled()',
+                        '[attr.data-selected]': '_isActive()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScAutocomplete {
+    class = input('');
+    classes = computed(() => cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', this.class()));
+    items = signal([
+        {
+            id: '5b902934d965e7501f4e1c6f',
+            label: 'Caroline Hodges',
+        },
+        {
+            id: '5b9029348f7eed8b6f5f02db',
+            label: 'Delores Rivas',
+        },
+        {
+            id: '5b9029346f48c8407c64d0d5',
+            label: 'Darlene Franklin',
+        },
+        {
+            id: '5b9029341eff315fa87f9e21',
+            label: 'Alfreda Love',
+        },
+        {
+            id: '5b9029342e8917c6ccdb9865',
+            label: 'Marcy Ratliff',
+        },
+        {
+            id: '5b9029349dbb48013460e01f',
+            label: 'Beulah Nielsen',
+        },
+        {
+            id: '5b902934f4f1586e5e72d74a',
+            label: 'Morton Kerr',
+        },
+        {
+            id: '5b9029347918bb204bf7014e',
+            label: 'Autumn Tillman',
+        },
+        {
+            id: '5b902934b86f80e1fc60c626',
+            label: 'Diane Bennett',
+        },
+        {
+            id: '5b9029348999f59215020349',
+            label: 'June Eaton',
+        },
+    ]);
+    searchControl = new FormControl();
+    input = toSignal(this.searchControl.valueChanges.pipe(debounceTime(300)));
+    filteredItems = computed(() => {
+        if (!this.input()) {
+            return this.items();
+        }
+        return this.items().filter((item) => item.label.toLowerCase().indexOf(this.input().toLowerCase()) !== -1);
+    });
+    selectedItem = signal(undefined);
+    viewItems = viewChildren(ScAutocompleteItem);
+    keyManager;
+    ngAfterViewInit() {
+        this.keyManager = new ActiveDescendantKeyManager(this.viewItems()).withWrap().withTypeAhead();
+    }
+    onKeydown(event) {
+        if (event.keyCode === ENTER) {
+            this.selectedItem.set(this.keyManager.activeItem ? this.keyManager.activeItem.item() : undefined);
+        }
+        else {
+            this.keyManager.onKeydown(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScAutocomplete, isStandalone: true, selector: "sc-autocomplete", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "viewItems", predicate: ScAutocompleteItem, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <!--sc-autocomplete-input /-->
+
+    <input
+      [formControl]="searchControl"
+      (keyup)="onKeydown($event)"
+      sc-input
+      placeholder="Search..."
+    />
+
+    @for (item of filteredItems(); track $index) {
+      <sc-autocomplete-item [item]="item" [selectedItem]="selectedItem()">
+        {{ item.label }}
+      </sc-autocomplete-item>
+    }
+
+    <br />
+    <br />
+    <br />
+    <br />
+
+    selectedItem : {{ selectedItem() | json }}
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ScInput, selector: "input[sc-input]", inputs: ["class"] }, { kind: "component", type: ScAutocompleteItem, selector: "sc-autocomplete-item", inputs: ["class", "_disabled", "item", "selectedItem"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScAutocomplete, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-autocomplete', imports: [ScInput, ScAutocompleteItem, ReactiveFormsModule, JsonPipe], template: `
+    <!--sc-autocomplete-input /-->
+
+    <input
+      [formControl]="searchControl"
+      (keyup)="onKeydown($event)"
+      sc-input
+      placeholder="Search..."
+    />
+
+    @for (item of filteredItems(); track $index) {
+      <sc-autocomplete-item [item]="item" [selectedItem]="selectedItem()">
+        {{ item.label }}
+      </sc-autocomplete-item>
+    }
+
+    <br />
+    <br />
+    <br />
+    <br />
+
+    selectedItem : {{ selectedItem() | json }}
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FormFieldCustomControlComponent, ScAccordion, ScAccordionContent, ScAccordionHeader, ScAccordionItem, ScAccordionItemDescription, ScAccordionTrigger, ScAlert, ScAlertDescription, ScAlertDialog, ScAlertTitle, ScAspectRatio, ScAvatar, ScBadge, ScBreadcrumb, ScBreadcrumbEllipsis, ScBreadcrumbItem, ScBreadcrumbLink, ScBreadcrumbList, ScBreadcrumbPage, ScBreadcrumbSeparator, ScButton, ScCard, ScCardContent, ScCardDescription, ScCardFooter, ScCardHeader, ScCardTitle, ScCarousel, ScCarouselContainer, ScCarouselItem, ScCarouselItems, ScCarouselNext, ScCarouselPrevious, ScCheckbox, ScCollapsible, ScCollapsibleContent, ScCollapsibleTrigger, ScCommand, ScCommandDialog, ScCommandEmpty, ScCommandError, ScCommandGroup, ScCommandInput, ScCommandItem, ScCommandList, ScCommandLoading, ScCommandSeparator, ScCommandShortcut, ScContextMenuTriggerFor, ScDataTable, ScDatePicker, ScDialog, ScDialogClose, ScDialogContent, ScDialogDescription, ScDialogFooter, ScDialogHeader, ScDialogTitle, ScEditor, ScHoverCard, ScHoverCardTriggerFor, ScInlineDatePicker, ScInput, ScInputOTPGroup, ScInputOTPSeparator, ScInputOTPSlot, ScInputOtp, ScLabel, ScMenu, ScMenuBar, ScMenuBarItem, ScMenuCheckboxGroup, ScMenuCheckboxItem, ScMenuGroup, ScMenuItem, ScMenuLabel, ScMenuRadioGroup, ScMenuRadioItem, ScMenuSeparator, ScMenuShortcut, ScMenuTriggerFor, ScNav, ScNavItem, ScNavItemDropdown, ScNavLink, ScNavList, ScOption, ScPaginator, ScPopoverTriggerFor, ScProgress, ScRadioGroup, ScRadioItem, ScScrollArea, ScSelect, ScSheet, ScSheetToggler, ScSheetTrigger, ScSkeleton, ScSlider, ScSwitch, ScTab, ScTabContent, ScTabLabel, ScTable, ScTableBody, ScTableCaption, ScTableCell, ScTableContainer, ScTableFooter, ScTableHead, ScTableHeader, ScTableRow, ScTabs, ScTextarea, ScThemeToggler, ScToast, ScToastExample, ScToggle, ScTooltip, TelInputComponent, TelModel, Toaster, buttonVariants, cn, scThemeProvider };
+export { FormFieldCustomControlComponent, ScAccordion, ScAccordionContent, ScAccordionHeader, ScAccordionItem, ScAccordionItemDescription, ScAccordionTrigger, ScAlert, ScAlertDescription, ScAlertDialog, ScAlertTitle, ScAspectRatio, ScAutocomplete, ScAvatar, ScBadge, ScBreadcrumb, ScBreadcrumbEllipsis, ScBreadcrumbItem, ScBreadcrumbLink, ScBreadcrumbList, ScBreadcrumbPage, ScBreadcrumbSeparator, ScButton, ScCalendar, ScCard, ScCardContent, ScCardDescription, ScCardFooter, ScCardHeader, ScCardTitle, ScCarousel, ScCarouselContainer, ScCarouselItem, ScCarouselItems, ScCarouselNext, ScCarouselPrevious, ScCheckbox, ScCollapsible, ScCollapsibleContent, ScCollapsibleTrigger, ScCommand, ScCommandDialog, ScCommandEmpty, ScCommandError, ScCommandGroup, ScCommandInput, ScCommandItem, ScCommandList, ScCommandLoading, ScCommandSeparator, ScCommandShortcut, ScContextMenuTriggerFor, ScDataTable, ScDatePicker, ScDialog, ScDialogClose, ScDialogContent, ScDialogDescription, ScDialogFooter, ScDialogHeader, ScDialogTitle, ScEditor, ScFullCalendar, ScHoverCard, ScHoverCardTriggerFor, ScInput, ScInputOTPGroup, ScInputOTPSeparator, ScInputOTPSlot, ScInputOtp, ScLabel, ScMenu, ScMenuBar, ScMenuBarItem, ScMenuCheckboxGroup, ScMenuCheckboxItem, ScMenuGroup, ScMenuItem, ScMenuLabel, ScMenuRadioGroup, ScMenuRadioItem, ScMenuSeparator, ScMenuShortcut, ScMenuTriggerFor, ScNav, ScNavItem, ScNavItemDropdown, ScNavLink, ScNavList, ScOption, ScPaginator, ScPopoverTriggerFor, ScProgress, ScRadioGroup, ScRadioItem, ScScrollArea, ScSelect, ScSheet, ScSheetClose, ScSheetConfig, ScSheetTrigger, ScSidebar, ScSidebarProvider, ScSidebarState, ScSidebarToggler, ScSkeleton, ScSlider, ScSwitch, ScTab, ScTabContent, ScTabLabel, ScTable, ScTableBody, ScTableCaption, ScTableCell, ScTableContainer, ScTableFooter, ScTableHead, ScTableHeader, ScTableRow, ScTabs, ScTextarea, ScThemeToggler, ScToast, ScToastExample, ScToggle, ScTooltip, TelInputComponent, TelModel, Toaster, buttonVariants, cn, scThemeProvider };
 //# sourceMappingURL=semantic-components-ui.mjs.map