@semantic-components/ui 0.11.0 → 0.12.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, 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 { signal, inject, LOCALE_ID, Injectable, input, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Directive, HostListener, ChangeDetectorRef, viewChild, afterNextRender, forwardRef, ViewContainerRef, contentChildren, model, output, effect, linkedSignal, 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';
@@ -10,14 +10,14 @@ import Heading from '@tiptap/extension-heading';
 import Paragraph from '@tiptap/extension-paragraph';
 import Text from '@tiptap/extension-text';
 import { cva } from 'class-variance-authority';
-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 { 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, SvgClockIcon } 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 { A11yModule, FocusMonitor, ActiveDescendantKeyManager, _IdGenerator } 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';
@@ -32,13 +32,49 @@ import * as i1$4 from '@angular/cdk/accordion';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
 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';
+import { BreakpointObserver, LayoutModule } from '@angular/cdk/layout';
 
 function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
+class ScSettings {
+    dateFormatPattern = signal('');
+    localeId = inject(LOCALE_ID);
+    constructor() {
+        this.dateFormatPattern.set(this.getDateFormatPattern(this.localeId));
+    }
+    getDateFormatPattern(localeId) {
+        const getPatternForPart = (part) => {
+            switch (part.type) {
+                case 'day':
+                    return 'd'.repeat(part.value.length);
+                case 'month':
+                    return 'M'.repeat(part.value.length);
+                case 'year':
+                    return 'y'.repeat(part.value.length);
+                case 'literal':
+                    return part.value;
+                default:
+                    throw new Error('no default');
+            }
+        };
+        return new Intl.DateTimeFormat(localeId)
+            .formatToParts(new Date('2022-01-01'))
+            .map(getPatternForPart)
+            .join('')
+            .toLowerCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSettings, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSettings, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSettings, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 const scHeadingVariants = cva('', {
     variants: {
         level: {
@@ -4971,7 +5007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 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()));
+    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=true]:pointer-events-none data-[disabled=true]: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: `
@@ -5892,11 +5928,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }] });
 
 class ScCalendar {
+    _cdr = inject(ChangeDetectorRef);
     class = input('');
     classes = computed(() => cn('', this.class()));
     localeId = inject(LOCALE_ID);
-    year = signal(0);
-    month = signal(0);
+    date = computed(() => {
+        if (this.value()) {
+            return new Date(this.value());
+        }
+        return new Date();
+    });
+    year = linkedSignal(() => this.date().getFullYear());
+    month = linkedSignal(() => this.date().getMonth());
     weekDaysNames = signal([]);
     monthYear = computed(() => {
         const options = {
@@ -5928,18 +5971,31 @@ class ScCalendar {
             .map((e) => e.long)
             .indexOf(dayName);
     });
-    selectedDay = signal('');
-    ngOnInit() {
-        this.init();
-        this.setLocaleDayNames();
+    value = model('');
+    setSelectedDay(day) {
+        this.value.set(day);
+        this._onChange(day);
+        this._cdr.markForCheck();
     }
-    init() {
-        const today = new Date();
-        this.year.set(today.getFullYear());
-        this.month.set(today.getMonth());
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value);
     }
-    setSelectedDay(day) {
-        this.selectedDay.set(day);
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    _disabledByCva = signal(false);
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
+    ngOnInit() {
+        this.setLocaleDayNames();
     }
     //https://github.com/angular/angular/issues/57193
     setLocaleDayNames() {
@@ -5999,7 +6055,13 @@ class ScCalendar {
         });
     }
     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: `
+    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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ScCalendar),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
     <div sc-card>
       <div sc-card-header>
         <sc-month-year-header [monthYear]="monthYear()" (monthYearChange)="setMonthYear($event)" />
@@ -6010,7 +6072,7 @@ class ScCalendar {
           [weekDaysNames]="weekDaysNames()"
           [days]="monthDays()"
           [firstDayMonth]="firstDayMonth()"
-          [selectedDay]="selectedDay()"
+          [selectedDay]="value()"
           (selectedDayChange)="setSelectedDay($event)"
         />
       </div>
@@ -6043,7 +6105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
           [weekDaysNames]="weekDaysNames()"
           [days]="monthDays()"
           [firstDayMonth]="firstDayMonth()"
-          [selectedDay]="selectedDay()"
+          [selectedDay]="value()"
           (selectedDayChange)="setSelectedDay($event)"
         />
       </div>
@@ -6055,7 +6117,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
     </div>
   `, host: {
                         '[class]': 'classes()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ScCalendar),
+                            multi: true,
+                        },
+                    ] }]
         }] });
 
 class ScFullCalendar {
@@ -6075,9 +6143,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+const scInputStyles = signal('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');
 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()));
+    classes = computed(() => cn(scInputStyles(), 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 />
@@ -6092,35 +6161,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+class ScDateInput {
+    el = inject(ElementRef);
+    dateFormatRegExp = (current) => {
+        switch (current.length) {
+            case 0: {
+                return new RegExp(/^\d$/g);
+            }
+            case 1: {
+                return new RegExp(/^\d{1,2}\/?$/g);
+            }
+            case 2: {
+                return new RegExp(/^\d{1,2}\/\d?$/g);
+            }
+            case 3: {
+                return new RegExp(/^\d{1,2}\/\d{1,2}\/?$/g);
+            }
+            case 4: {
+                return new RegExp(/^\d{1,2}\/\d{1,2}\/?\d?$/g);
+            }
+            case 5: {
+                return new RegExp(/^\d{1,2}\/\d{1,2}\/\d{0,2}$/g);
+            }
+            case 6: {
+                return new RegExp(/^\d{1,2}\/\d{1,2}\/\d{0,3}$/g);
+            }
+            default: {
+                return new RegExp(/^\d{1,2}\/\d{1,2}\/\d{1,4}$/g);
+            }
+        }
+    };
+    previousKey = '';
+    onKeyDown(event) {
+        if (event.key === 'Backspace' ||
+            event.key === 'Delete' ||
+            event.key === 'ArrowLeft' ||
+            event.key === 'ArrowRight' ||
+            (this.previousKey === 'Control' && event.key === 'c') ||
+            (this.previousKey === 'Control' && event.key === 'v') ||
+            (this.previousKey === 'Control' && event.key === 'x')) {
+            this.previousKey = event.key;
+            return;
+        }
+        this.previousKey = event.key;
+        const current = this.el.nativeElement.value;
+        const start = this.el.nativeElement.selectionStart;
+        const end = this.el.nativeElement.selectionEnd;
+        const next = current.slice(0, start) + event.key + current.slice(end);
+        if (this.dateFormatRegExp(current).exec(next) === null) {
+            event.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDateInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: ScDateInput, isStandalone: true, selector: "[scDateInput]", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScDateInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scDateInput]',
+                    host: {
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }] });
+
 class ScDatePicker {
     class = input('');
     classes = computed(() => cn('flex relative', this.class()));
     host = inject(ElementRef);
-    localeId = inject(LOCALE_ID);
-    dateFormatPattern = signal('');
-    ngOnInit() {
-        this.dateFormatPattern.set(this.getDateFormatPattern(this.localeId));
-    }
-    getDateFormatPattern(localeId) {
-        const getPatternForPart = (part) => {
-            switch (part.type) {
-                case 'day':
-                    return 'd'.repeat(part.value.length);
-                case 'month':
-                    return 'M'.repeat(part.value.length);
-                case 'year':
-                    return 'y'.repeat(part.value.length);
-                case 'literal':
-                    return part.value;
-                default:
-                    throw new Error('no default');
-            }
-        };
-        return new Intl.DateTimeFormat(localeId)
-            .formatToParts(new Date('2022-01-01'))
-            .map(getPatternForPart)
-            .join('');
-    }
     _injector = inject(Injector);
     _dir = inject(Directionality, { optional: true });
     _overlay = inject(Overlay);
@@ -6223,16 +6331,16 @@ class ScDatePicker {
     <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 });
+    <input #input sc-input scDateInput 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"] }, { kind: "directive", type: ScDateInput, selector: "[scDateInput]" }], 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, ScButton], template: `
+            args: [{ selector: 'sc-date-picker', imports: [ScInput, SvgCalendarIcon, ScButton, ScDateInput], 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" />
+    <input #input sc-input scDateInput type="text" placeholder="Select date" />
   `, host: {
                         '[class]': 'classes()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
@@ -8972,13 +9080,13 @@ class ScHoverCardTriggerFor {
     viewContainer = inject(ViewContainerRef);
     scHoverCardTriggerFor = input.required();
     overlayRef = null;
-    showTooltip() {
+    showCard() {
         if (this.overlayRef?.hasAttached() === true) {
             return;
         }
         this.attachTooltip();
     }
-    hideTooltip() {
+    hideCard() {
         if (this.overlayRef?.hasAttached() === true) {
             this.overlayRef?.detach();
         }
@@ -8991,14 +9099,6 @@ class ScHoverCardTriggerFor {
             const positionStrategy = this.getPositionStrategy();
             this.overlayRef = this.overlay.create({ positionStrategy });
         }
-        // const injector = Injector.create({
-        //   providers: [
-        //     {
-        //       provide: TOOLTIP_DATA,
-        //       useValue: this.appTooltip,
-        //     },
-        //   ],
-        // });
         const componentPortal = new ComponentPortal(ScHoverCard, this.viewContainer);
         // Attach tooltip portal to overlay
         const componentRef = this.overlayRef.attach(componentPortal);
@@ -9026,26 +9126,20 @@ class ScHoverCardTriggerFor {
         ]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScHoverCardTriggerFor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScHoverCardTriggerFor, isStandalone: true, selector: "[scHoverCardTriggerFor]", inputs: { scHoverCardTriggerFor: { classPropertyName: "scHoverCardTriggerFor", publicName: "scHoverCardTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseover": "showTooltip()", "focus": "showTooltip()", "mouseleave": "hideTooltip()", "blur": "hideTooltip()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScHoverCardTriggerFor, isStandalone: true, selector: "[scHoverCardTriggerFor]", inputs: { scHoverCardTriggerFor: { classPropertyName: "scHoverCardTriggerFor", publicName: "scHoverCardTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseover": "showCard()", "focus": "showCard()", "mouseleave": "hideCard()", "blur": "hideCard()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScHoverCardTriggerFor, decorators: [{
             type: Directive,
             args: [{
                     selector: '[scHoverCardTriggerFor]',
+                    host: {
+                        '(mouseover)': 'showCard()',
+                        '(focus)': 'showCard()',
+                        '(mouseleave)': 'hideCard()',
+                        '(blur)': 'hideCard()',
+                    },
                 }]
-        }], propDecorators: { showTooltip: [{
-                type: HostListener,
-                args: ['mouseover']
-            }, {
-                type: HostListener,
-                args: ['focus']
-            }], hideTooltip: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }, {
-                type: HostListener,
-                args: ['blur']
-            }] } });
+        }] });
 
 class ScAvatarFallback {
     class = input('');
@@ -9584,7 +9678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class ScMenuCheckboxItem {
     _cdkMenuItemCheckbox = inject(CdkMenuItemCheckbox, { host: true });
     class = input('');
-    classes = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class()));
+    classes = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this.class()));
     disabled = input(false, {
         transform: booleanAttribute,
     });
@@ -9646,7 +9740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class ScMenuRadioItem {
     class = input('');
-    classes = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class()));
+    classes = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this.class()));
     value = input('');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ScMenuRadioItem, isStandalone: true, selector: "button[sc-menu-radio-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuItemRadio }], ngImport: i0, template: `
@@ -10172,7 +10266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }] });
 
 class ScSidebar {
-    observer;
+    observer = inject(BreakpointObserver);
     sidebarState = inject(ScSidebarState);
     class = input('');
     classes = computed(() => cn('block relative', this.class()));
@@ -10194,8 +10288,7 @@ class ScSidebar {
     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;
+    constructor() {
         this.observer.observe('(max-width: 768px)').subscribe((result) => {
             this.sidebarState.isMobile.set(result.matches);
             if (!result.matches && this.openMobile()) {
@@ -10203,7 +10296,7 @@ class ScSidebar {
             }
         });
     }
-    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScSidebar, deps: [], 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 />
@@ -10277,7 +10370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
   `, host: {
                         '[class]': 'classes()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: () => [{ type: i1$6.BreakpointObserver }] });
+        }], ctorParameters: () => [] });
 
 class ScSidebarProvider {
     sidebarState = inject(ScSidebarState);
@@ -10470,9 +10563,453 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+class ScTimeOption {
+    /** The unique ID of the option. */
+    id = signal(inject(_IdGenerator).getId('sc-time-option-'));
+    class = input('');
+    _class = 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 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this._active() && 'bg-accent text-accent-foreground', this.class()));
+    _active = signal(false);
+    _selected = signal(false);
+    _disabledByInput = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    _disabled = computed(() => this._disabledByInput() || booleanAttribute(this.disabled));
+    value = input();
+    setActiveStyles() {
+        this._active.set(true);
+    }
+    setInactiveStyles() {
+        this._active.set(false);
+    }
+    disabled;
+    getLabel() {
+        return this.value() ?? '';
+    }
+    _element = inject(ElementRef);
+    /** Gets the host DOM element. */
+    _getHostElement() {
+        return this._element.nativeElement;
+    }
+    /** Selects the option. */
+    select() {
+        if (!this._selected()) {
+            this._selected.set(true);
+        }
+    }
+    /** Deselects the option. */
+    deselect() {
+        if (this._selected()) {
+            this._selected.set(false);
+        }
+    }
+    onClick() {
+        if (this._selected()) {
+            this._selected.set(false);
+        }
+        else {
+            this.selected.emit(this.value());
+            this._selected.set(true);
+        }
+    }
+    selected = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimeOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScTimeOption, isStandalone: true, selector: "sc-time-option", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, _disabledByInput: { classPropertyName: "_disabledByInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "mouseover": "setActiveStyles()", "mouseleave": "setInactiveStyles()", "click": "onClick()" }, properties: { "id": "id()", "class": "_class()", "attr.data-disabled": "_disabled()" } }, ngImport: i0, template: `
+    @if (_selected()) {
+      <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: ScTimeOption, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-time-option', imports: [SvgCheckIcon], template: `
+    @if (_selected()) {
+      <svg-check-icon class="absolute left-2 flex size-4 items-center justify-center" />
+    }
+
+    <ng-content />
+  `, host: {
+                        '[id]': 'id()',
+                        '[class]': '_class()',
+                        '[attr.data-disabled]': '_disabled()',
+                        '(mouseover)': 'setActiveStyles()',
+                        '(mouseleave)': 'setInactiveStyles()',
+                        '(click)': 'onClick()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class ScTimePickerInput {
+    class = input('');
+    classes = computed(() => cn(scInputStyles(), this.class()));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimePickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: ScTimePickerInput, isStandalone: true, selector: "[scTimePickerInput]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimePickerInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scTimePickerInput]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+
+class ScTimePicker {
+    class = input('');
+    classes = computed(() => cn('flex relative', this.class()));
+    _overlay = inject(Overlay);
+    _dir = inject(Directionality, { optional: true });
+    _viewContainerRef = inject(ViewContainerRef);
+    _injector = inject(Injector);
+    // private _defaultConfig = inject(MAT_TIMEPICKER_CONFIG, { optional: true });
+    // private _dateAdapter = inject<DateAdapter<D>>(DateAdapter, { optional: true })!;
+    // private _dateFormats = inject(MAT_DATE_FORMATS, { optional: true })!;
+    _isOpen = signal(false);
+    _activeDescendant = signal(null);
+    _input = viewChild.required('input');
+    _overlayRef = null;
+    _portal = null;
+    _optionsCacheKey = null;
+    _localeChanges;
+    _onOpenRender = null;
+    _panelTemplate = viewChild.required('panelTemplate');
+    _timeOptions = [];
+    _options = viewChildren(ScTimeOption);
+    _keyManager = new ActiveDescendantKeyManager(this._options, this._injector)
+        .withHomeAndEnd(true)
+        .withPageUpDown(true)
+        .withVerticalOrientation(true);
+    /**
+     * Interval between each option in the timepicker. The value can either be an amount of
+     * seconds (e.g. 90) or a number with a unit (e.g. 45m). Supported units are `s` for seconds,
+     * `m` for minutes or `h` for hours.
+     */
+    // readonly interval: InputSignalWithTransform<number | null, number | string | null> = input(
+    //   parseInterval(this._defaultConfig?.interval || null),
+    //   { transform: parseInterval },
+    // );
+    /**
+     * Array of pre-defined options that the user can select from, as an alternative to using the
+     * `interval` input. An error will be thrown if both `options` and `interval` are specified.
+     */
+    options = input(null);
+    /** Whether the timepicker is open. */
+    isOpen = this._isOpen.asReadonly();
+    /** Emits when the user selects a time. */
+    selected = output();
+    /** Emits when the timepicker is opened. */
+    opened = output();
+    /** Emits when the timepicker is closed. */
+    closed = output();
+    /** ID of the active descendant option. */
+    activeDescendant = this._activeDescendant.asReadonly();
+    /** Unique ID of the timepicker's panel */
+    panelId = inject(_IdGenerator).getId('sc-time-picker-panel-');
+    /** Whether ripples within the timepicker should be disabled. */
+    // readonly disableRipple: InputSignalWithTransform<boolean, unknown> = input(
+    //   this._defaultConfig?.disableRipple ?? false,
+    //   {
+    //     transform: booleanAttribute,
+    //   },
+    // );
+    /** ARIA label for the timepicker panel. */
+    ariaLabel = input(null, {
+        alias: 'aria-label',
+    });
+    /** ID of the label element for the timepicker panel. */
+    ariaLabelledby = input(null, {
+        alias: 'aria-labelledby',
+    });
+    /** Whether the timepicker is currently disabled. */
+    disabled = computed(() => !!this._input().nativeElement?.disabled);
+    constructor() {
+        // if (typeof ngDevMode === 'undefined' || ngDevMode) {
+        // validateAdapter(this._dateAdapter, this._dateFormats);
+        effect(() => {
+            const options = this.options();
+            // const interval = this.interval();
+            // if (options !== null && interval !== null) {
+            //   throw new Error(
+            //     'Cannot specify both the `options` and `interval` inputs at the same time',
+            //   );
+            // } else if (options?.length === 0) {
+            //   throw new Error('Value of `options` input cannot be an empty array');
+            // }
+        });
+        // }
+        // Since the panel ID is static, we can set it once without having to maintain a host binding.
+        const element = inject(ElementRef);
+        element.nativeElement.setAttribute('sc-time-picker-panel-id', this.panelId);
+        this._handleLocaleChanges();
+        this._handleInputStateChanges();
+        this._keyManager.change.subscribe(() => this._activeDescendant.set(this._keyManager.activeItem?.id() || null));
+    }
+    /** Opens the timepicker. */
+    open() {
+        const input = this._input();
+        if (!input) {
+            return;
+        }
+        // Focus should already be on the input, but this call is in case the timepicker is opened
+        // programmatically. We need to call this even if the timepicker is already open, because
+        // the user might be clicking the toggle.
+        input.nativeElement.focus();
+        if (this._isOpen()) {
+            return;
+        }
+        this._isOpen.set(true);
+        this._generateOptions();
+        const overlayRef = this._getOverlayRef();
+        overlayRef.updateSize({ width: input.nativeElement.offsetWidth });
+        this._portal ??= new TemplatePortal(this._panelTemplate(), this._viewContainerRef);
+        overlayRef.attach(this._portal);
+        this._onOpenRender?.destroy();
+        this._onOpenRender = afterNextRender(() => {
+            const options = this._options();
+            this._syncSelectedState(input.nativeElement?.value, options, options[0]);
+            this._onOpenRender = null;
+        }, { injector: this._injector });
+        this.opened.emit();
+    }
+    /** Closes the timepicker. */
+    close() {
+        if (this._isOpen()) {
+            this._isOpen.set(false);
+            this._overlayRef?.detach();
+            this.closed.emit();
+        }
+    }
+    /** Registers an input with the timepicker. */
+    // registerInput(input: MatTimepickerInput<D>): void {
+    //   const currentInput = this._input();
+    //   if (currentInput && input !== currentInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+    //     throw new Error('MatTimepicker can only be registered with one input at a time');
+    //   }
+    //   this._input.set(input);
+    // }
+    ngOnDestroy() {
+        this._keyManager.destroy();
+        this._localeChanges.unsubscribe();
+        this._onOpenRender?.destroy();
+        this._overlayRef?.dispose();
+    }
+    /** Selects a specific time value. */
+    _selectValue(value) {
+        //TODO
+        this._input().nativeElement.value = value;
+        this.close();
+        this.selected.emit({ value });
+        this._input().nativeElement?.focus();
+    }
+    /** Gets the value of the `aria-labelledby` attribute. */
+    _getAriaLabelledby() {
+        if (this.ariaLabel()) {
+            return null;
+        }
+        return this.ariaLabelledby() || null;
+    }
+    /** Creates an overlay reference for the timepicker panel. */
+    _getOverlayRef() {
+        if (this._overlayRef) {
+            return this._overlayRef;
+        }
+        const positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this._input())
+            .withFlexibleDimensions(false)
+            .withPush(false)
+            // .withTransformOriginOn('.mat-timepicker-panel')
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                // panelClass: 'mat-timepicker-above',
+            },
+        ]);
+        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._input().nativeElement;
+            if (target && origin && target !== origin && !origin.contains(target)) {
+                this.close();
+            }
+        });
+        return this._overlayRef;
+    }
+    /** Generates the list of options from which the user can select.. */
+    _generateOptions() {
+        // Default the interval to 30 minutes.
+        this._timeOptions = [
+            { value: '1', label: '1' },
+            { value: '2', label: '2' },
+            { value: '3', label: '3' },
+            { value: '4', label: '4' },
+            { value: '5', label: '5' },
+            { value: '6', label: '6' },
+        ];
+    }
+    /**
+     * Synchronizes the internal state of the component based on a specific selected date.
+     * @param value Currently selected date.
+     * @param options Options rendered out in the timepicker.
+     * @param fallback Option to set as active if no option is selected.
+     */
+    _syncSelectedState(value, options, fallback) {
+        let hasSelected = false;
+        for (const option of options) {
+            if (value && option.value() === value) {
+                option.select();
+                scrollOptionIntoView(option, 'center');
+                untracked(() => this._keyManager.setActiveItem(option));
+                hasSelected = true;
+            }
+            else {
+                option.deselect();
+            }
+        }
+        // If no option was selected, we need to reset the key manager since
+        // it might be holding onto an option that no longer exists.
+        if (!hasSelected) {
+            if (fallback) {
+                untracked(() => this._keyManager.setActiveItem(fallback));
+                scrollOptionIntoView(fallback, 'center');
+            }
+            else {
+                untracked(() => this._keyManager.setActiveItem(-1));
+            }
+        }
+    }
+    /** 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) {
+            event.preventDefault();
+            if (this._keyManager.activeItem) {
+                this._selectValue(this._keyManager.activeItem.value() ?? '');
+            }
+            else {
+                this.close();
+            }
+        }
+        else {
+            const previousActive = this._keyManager.activeItem;
+            this._keyManager.onKeydown(event);
+            const currentActive = this._keyManager.activeItem;
+            if (currentActive && currentActive !== previousActive) {
+                scrollOptionIntoView(currentActive, 'nearest');
+            }
+        }
+    }
+    /** Sets up the logic that updates the timepicker when the locale changes. */
+    _handleLocaleChanges() {
+        // Re-generate the options list if the locale changes.
+        // this._localeChanges = this._dateAdapter.localeChanges.subscribe(() => {
+        //   this._optionsCacheKey = null;
+        //   if (this.isOpen()) {
+        //     this._generateOptions();
+        //   }
+        // });
+    }
+    /**
+     * Sets up the logic that updates the timepicker when the state of the connected input changes.
+     */
+    _handleInputStateChanges() {
+        effect(() => {
+            const input = this._input();
+            const options = this._options();
+            if (this._isOpen() && input) {
+                this._syncSelectedState(input.nativeElement.value, options, null);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScTimePicker, isStandalone: true, selector: "sc-time-picker", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", opened: "opened", closed: "closed" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "_options", predicate: ScTimeOption, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button class="absolute inset-y-0 end-0 pe-4" (click)="open()" sc-button variant="ghost">
+      <svg-clock-icon />
+    </button>
+    <input #input scTimePickerInput type="text" placeholder="Select time" />
+
+    <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"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-labelledby]="_getAriaLabelledby()"
+        [id]="panelId"
+        role="listbox"
+      >
+        @for (option of _timeOptions; track option.value) {
+          <sc-time-option [value]="option.value" (selected)="_selectValue(option.value)">
+            {{ option.label }}
+          </sc-time-option>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgClockIcon, selector: "svg-clock-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: ScButton, selector: "button[sc-button], a[sc-button]", inputs: ["variant", "size", "class"] }, { kind: "component", type: ScTimeOption, selector: "sc-time-option", inputs: ["class", "disabled", "value"], outputs: ["selected"] }, { kind: "directive", type: ScTimePickerInput, selector: "[scTimePickerInput]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScTimePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-time-picker', imports: [SvgClockIcon, ScButton, ScTimeOption, ScTimePickerInput], template: `
+    <button class="absolute inset-y-0 end-0 pe-4" (click)="open()" sc-button variant="ghost">
+      <svg-clock-icon />
+    </button>
+    <input #input scTimePickerInput type="text" placeholder="Select time" />
+
+    <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"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-labelledby]="_getAriaLabelledby()"
+        [id]="panelId"
+        role="listbox"
+      >
+        @for (option of _timeOptions; track option.value) {
+          <sc-time-option [value]="option.value" (selected)="_selectValue(option.value)">
+            {{ option.label }}
+          </sc-time-option>
+        }
+      </div>
+    </ng-template>
+  `, host: {
+                        '[class]': 'classes()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [] });
+/**
+ * Scrolls an option into view.
+ * @param option Option to be scrolled into view.
+ * @param position Position to which to align the option relative to the scrollable container.
+ */
+function scrollOptionIntoView(option, position) {
+    option._getHostElement().scrollIntoView({ block: position, inline: position });
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, ScSettings, 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, ScTimePicker, ScToast, ScToastExample, ScToggle, ScTooltip, TelInputComponent, TelModel, Toaster, buttonVariants, cn, scInputStyles, scThemeProvider };
 //# sourceMappingURL=semantic-components-ui.mjs.map