@nanahoshi/mona-ui 0.1.0

package/types/nanahoshi-mona-ui-text-box.d.ts

@@ -0,0 +1,164 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, TemplateRef } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import { VariantInputs, AttributeConfig } from '@nanahoshi/mona-ui/internal';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+
+type InputType = "email" | "password" | "text";
+
+declare const textBoxThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "full" | "large" | "medium" | "none" | "small" | null | undefined;
+    size?: "large" | "medium" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const inputThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "full" | "large" | "medium" | "none" | "small" | null | undefined;
+    size?: "large" | "medium" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TextBoxVariantProps = VariantProps<ReturnType<typeof textBoxThemeVariants>>;
+type TextBoxVariantInput = VariantInputs<TextBoxVariantProps>;
+type InputVariantProps = VariantProps<ReturnType<typeof inputThemeVariants>>;
+type InputVariantInput = VariantInputs<InputVariantProps>;
+
+declare class TextBoxComponent implements TextBoxVariantInput, FormValueControl<string> {
+    #private;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    protected readonly invalidInput: _angular_core.Signal<boolean>;
+    protected readonly prefixTemplateList: _angular_core.Signal<readonly TemplateRef<any>[]>;
+    protected readonly suffixTemplateList: _angular_core.Signal<readonly TemplateRef<any>[]>;
+    /**
+     * @description Displays a clear button that resets the value to empty.
+     * @default false
+     */
+    readonly clearButton: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Additional HTML attributes applied directly to the inner `<input>` element.
+     * @default {}
+     */
+    readonly inputAttributes: _angular_core.InputSignal<AttributeConfig>;
+    /**
+     * @description Emitted when the inner input loses focus.
+     */
+    readonly inputBlur: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * @description Emitted when the inner input gains focus.
+     */
+    readonly inputFocus: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * @description Additional CSS classes applied to the inner `<input>` element.
+     * @default ""
+     */
+    readonly inputClass: _angular_core.InputSignal<string | string[]>;
+    /**
+     * @description Inline styles applied to the inner `<input>` element.
+     * Accepts a style string or a `CSSStyleDeclaration` partial.
+     * @default null
+     */
+    readonly inputStyle: _angular_core.InputSignal<string | Partial<CSSStyleDeclaration> | null>;
+    /**
+     * @description Marks the text box as invalid. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Placeholder text shown when no value has been entered.
+     * @default ""
+     */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * @description Prevents value changes while preserving the component's visual state.
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Marks the text box as required.
+     * Triggers the invalid state when the value is empty and the field has been touched.
+     * @default false
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Border-radius preset applied to the component.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Size preset controlling the component's dimensions.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
+    /**
+     * @description Emitted when the text box is interacted with — on blur, value change, or clear.
+     * The `FormField` directive listens to this to mark the field as touched.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the touched state of the text box. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the `type` attribute of the inner `<input>` element.
+     * @default "text"
+     */
+    readonly type: _angular_core.InputSignal<InputType>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Two-way bindable current value of the text box.
+     * @default ""
+     */
+    readonly value: _angular_core.ModelSignal<string>;
+    focus(): void;
+    onClearClick(): void;
+    onInputBlur(event: FocusEvent): void;
+    onValueChange(value: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextBoxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextBoxComponent, "mona-text-box", never, { "clearButton": { "alias": "clearButton"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; "touch": "touch"; "value": "valueChange"; }, ["prefixTemplateList", "suffixTemplateList"], never, true, never>;
+}
+
+declare class TextBoxDirective implements InputVariantInput {
+    #private;
+    protected readonly classes: _angular_core.Signal<string>;
+    /**
+     * @description Border-radius preset applied to the component.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Size preset controlling the component's dimensions.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextBoxDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TextBoxDirective, "input[monaTextBox]", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class TextBoxPrefixTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextBoxPrefixTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TextBoxPrefixTemplateDirective, "ng-template[monaTextBoxPrefixTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class TextBoxSuffixTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextBoxSuffixTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TextBoxSuffixTemplateDirective, "ng-template[monaTextBoxSuffixTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+export { TextBoxComponent, TextBoxDirective, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
+export type { InputType, TextBoxVariantProps };

package/types/nanahoshi-mona-ui-theme.d.ts

@@ -0,0 +1,23 @@
+import * as _angular_core from '@angular/core';
+
+type ThemeStyle = "mona";
+type ThemeVariant = "light" | "dark";
+type ThemeId = `${ThemeStyle}-${ThemeVariant}`;
+
+declare class ThemeService {
+    #private;
+    readonly themeId: _angular_core.WritableSignal<"mona-light" | "mona-dark">;
+    readonly theme: _angular_core.Signal<"mona">;
+    readonly themeVariant: _angular_core.Signal<ThemeVariant>;
+    constructor();
+    setThemeId(themeId: ThemeId): void;
+    private getActiveThemeVariables;
+    private getMonaDarkThemeVariables;
+    private getMonaLightThemeVariables;
+    private updateThemeVariables;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
+}
+
+export { ThemeService };
+export type { ThemeId, ThemeStyle, ThemeVariant };

package/types/nanahoshi-mona-ui-time-picker.d.ts

@@ -0,0 +1,184 @@
+import * as _angular_core from '@angular/core';
+import { Signal, TemplateRef } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import { PreventableEvent } from '@nanahoshi/mona-ui/common';
+import { HourFormat } from '@nanahoshi/mona-ui/date-input';
+import { VariantInputs, AttributeConfig } from '@nanahoshi/mona-ui/internal';
+import { ListSizeInputType } from '@nanahoshi/mona-ui/internal/list';
+import { PopupCloseEvent } from '@nanahoshi/mona-ui/popup';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantProps } from 'class-variance-authority';
+import * as i1 from '@nanahoshi/mona-ui/dropdowns';
+
+declare const timePickerBaseThemeVariants: (theme: ThemeStyle) => (props?: ({
+    focused?: boolean | null | undefined;
+    rounded?: "full" | "large" | "medium" | "none" | "small" | null | undefined;
+    size?: "large" | "medium" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TimePickerBaseVariantProps = VariantProps<ReturnType<typeof timePickerBaseThemeVariants>>;
+type TimePickerBaseVariantInput = VariantInputs<TimePickerBaseVariantProps>;
+type TimePickerVariantProps = TimePickerBaseVariantProps;
+type TimePickerVariantInput = Omit<TimePickerBaseVariantInput, "focused">;
+
+declare class TimePickerComponent implements FormValueControl<Date | null>, TimePickerVariantInput {
+    #private;
+    protected readonly baseClass: Signal<string>;
+    protected readonly currentDateString: _angular_core.WritableSignal<string>;
+    protected readonly expanded: Signal<boolean>;
+    protected readonly inputAttributes: Signal<AttributeConfig>;
+    protected readonly invalidState: Signal<boolean>;
+    protected readonly navigatedDate: _angular_core.WritableSignal<Date>;
+    protected readonly pickerPopupClass: Signal<string>;
+    protected readonly popupId: string;
+    protected readonly timePopupTemplateRef: Signal<TemplateRef<unknown>>;
+    /**
+     * @description Emits when the popup is about to close. This event is preventable.
+     */
+    readonly close: _angular_core.OutputEmitterRef<PopupCloseEvent<unknown>>;
+    /**
+     * @description Emits after the popup is closed.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the disabled state of the time picker.
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the format of the time picker.
+     */
+    readonly format: _angular_core.InputSignal<string>;
+    /**
+     * @description Sets the hour format of the time picker.
+     * @default 24
+     */
+    readonly hourFormat: _angular_core.InputSignal<HourFormat>;
+    /**
+     * @description Sets the hour step of the time picker.
+     * @default 1
+     */
+    readonly hourStep: _angular_core.InputSignal<number>;
+    /**
+     * @description Marks the time picker as invalid. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the maximum date of the time picker.
+     * @default null
+     */
+    readonly max: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
+    /**
+     * @description Sets the minimum date of the time picker.
+     * @default null
+     */
+    readonly min: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
+    /**
+     * @description Sets the minute step of the time picker.
+     * @default 1
+     */
+    readonly minuteStep: _angular_core.InputSignal<number>;
+    /**
+     * @description Emits when the popup is about to open. This event is preventable.
+     */
+    readonly open: _angular_core.OutputEmitterRef<PreventableEvent<Event>>;
+    /**
+     * @description Emits after the popup is opened.
+     */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the placeholder of the time picker.
+     */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * @description Sets the class of the popup element.
+     * @default ""
+     */
+    readonly popupClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Sets the height of the popup element.
+     * @default 200
+     */
+    readonly popupHeight: _angular_core.InputSignal<ListSizeInputType>;
+    /**
+     * @description Sets the width of the popup element.
+     * @default null
+     */
+    readonly popupWidth: _angular_core.InputSignal<ListSizeInputType>;
+    /**
+     * @description Sets the readonly state of the time picker.
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * @description When true, the input is readonly but the popup button remains enabled.
+     * @default false
+     */
+    readonly readonlyInput: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the required state of the time picker.
+     * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the border radius of the time picker.
+     */
+    readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Sets the second step of the time picker.
+     * @default 1
+     */
+    readonly secondStep: _angular_core.InputSignal<number>;
+    /**
+     * @description Sets the visibility of the clear button.
+     */
+    readonly showClearButton: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the visibility of the second selector.
+     */
+    readonly showSeconds: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the size of the time picker.
+     */
+    readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
+    /**
+     * @description Emitted when the time picker is interacted with via blur, selection, or clear.
+     * The `FormField` directive listens to this to mark the field as touched.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the touched state of the time picker. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Two-way bindable current time value.
+     * @default null
+     */
+    readonly value: _angular_core.ModelSignal<Date | null>;
+    constructor();
+    protected onDateStringEdit(dateString: string): void;
+    protected onTimeInputBlur(): void;
+    protected onTimeInputButtonClick(): void;
+    protected onTimeSelectorValueChange(date: Date | null): void;
+    private dateStringEquals;
+    focus(): void;
+    private generateValidDateTime;
+    private handleKeydown;
+    private openPopup;
+    private processTimeInput;
+    private setCurrentDate;
+    private setCurrentDateString;
+    private setDateValues;
+    private setKeyboardNavigation;
+    private setSubscriptions;
+    private updateCurrentDateString;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimePickerComponent, "mona-time-picker", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "hourStep": { "alias": "hourStep"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, never, never, true, [{ directive: typeof i1.DropdownPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+}
+
+export { TimePickerComponent };
+export type { TimePickerVariantProps };

package/types/nanahoshi-mona-ui-time-selector.d.ts

@@ -0,0 +1,143 @@
+import * as _mirei_ts_collections from '@mirei/ts-collections';
+import * as _nanahoshi_mona_ui_date_input from '@nanahoshi/mona-ui/date-input';
+import { Meridiem, HourFormat } from '@nanahoshi/mona-ui/date-input';
+import * as luxon from 'luxon';
+import { DateTime } from 'luxon';
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+
+type TimeListType = "hours" | "minutes" | "seconds" | "meridiem";
+
+declare const timeSelectorBaseThemeVariants: (theme: ThemeStyle) => (props?: ({
+    disabled?: boolean | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const timeSelectorHeaderThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const timeSelectorInfoContainerThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const timeSelectorListThemeVariants: (theme: ThemeStyle) => (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const timeSelectorListItemThemeVariants: (theme: ThemeStyle) => (props?: ({
+    selected?: boolean | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TimeSelectorBaseVariantProps = VariantProps<ReturnType<typeof timeSelectorBaseThemeVariants>>;
+type TimeSelectorBaseVariantInput = VariantInputs<TimeSelectorBaseVariantProps>;
+type TimeSelectorHeaderVariantProps = VariantProps<ReturnType<typeof timeSelectorHeaderThemeVariants>>;
+type TimeSelectorHeaderVariantInput = VariantInputs<TimeSelectorHeaderVariantProps>;
+type TimeSelectorInfoContainerVariantProps = VariantProps<ReturnType<typeof timeSelectorInfoContainerThemeVariants>>;
+type TimeSelectorInfoContainerVariantInput = VariantInputs<TimeSelectorInfoContainerVariantProps>;
+type TimeSelectorListVariantProps = VariantProps<ReturnType<typeof timeSelectorListThemeVariants>>;
+type TimeSelectorListVariantInput = VariantInputs<TimeSelectorListVariantProps>;
+type TimeSelectorListItemVariantProps = VariantProps<ReturnType<typeof timeSelectorListItemThemeVariants>>;
+type TimeSelectorListItemVariantInput = VariantInputs<TimeSelectorListItemVariantProps>;
+type TimeSelectorVariantProps = TimeSelectorBaseVariantProps & TimeSelectorHeaderVariantProps & TimeSelectorInfoContainerVariantProps & Omit<TimeSelectorListVariantProps, "size"> & Omit<TimeSelectorListItemVariantProps, "size">;
+type TimeSelectorVariantInput = TimeSelectorBaseVariantInput & TimeSelectorHeaderVariantInput & TimeSelectorInfoContainerVariantInput & Omit<TimeSelectorListVariantInput, "size"> & Omit<TimeSelectorListItemVariantInput, "size" | "selected">;
+
+declare class TimeSelectorComponent implements FormValueControl<Date | null>, TimeSelectorVariantInput {
+    #private;
+    protected readonly amMeridiemVisible: _angular_core.Signal<boolean>;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly computedPopupHeight: _angular_core.Signal<number>;
+    protected readonly focusedList: _angular_core.WritableSignal<TimeListType>;
+    protected readonly footerClass: _angular_core.Signal<string>;
+    protected readonly headerClass: _angular_core.Signal<string>;
+    protected readonly hour: _angular_core.Signal<number>;
+    protected readonly hourListId: string;
+    protected readonly hourListRef: _angular_core.Signal<ElementRef<HTMLOListElement>>;
+    protected readonly infoContainerClass: _angular_core.Signal<string>;
+    protected readonly listContainerClass: _angular_core.Signal<string>;
+    protected readonly maxDate: _angular_core.Signal<DateTime<true> | DateTime<false> | null>;
+    protected readonly meridiem: _angular_core.WritableSignal<Meridiem>;
+    protected readonly meridiemListId: string;
+    protected readonly meridiemListRef: _angular_core.Signal<ElementRef<HTMLOListElement> | undefined>;
+    protected readonly minDate: _angular_core.Signal<DateTime<true> | DateTime<false> | null>;
+    protected readonly minute: _angular_core.Signal<luxon.SecondNumbers>;
+    protected readonly minuteListId: string;
+    protected readonly minuteListRef: _angular_core.Signal<ElementRef<HTMLOListElement>>;
+    protected readonly minutes: _angular_core.Signal<_mirei_ts_collections.ImmutableSet<_nanahoshi_mona_ui_date_input.TimeUnit>>;
+    protected readonly navigatedDate: _angular_core.WritableSignal<DateTime<true>>;
+    protected readonly navigatedDateText: _angular_core.Signal<string>;
+    protected readonly pmMeridiemVisible: _angular_core.Signal<boolean>;
+    protected readonly second: _angular_core.Signal<luxon.SecondNumbers>;
+    protected readonly secondListId: string;
+    protected readonly secondListRef: _angular_core.Signal<ElementRef<HTMLOListElement> | undefined>;
+    protected readonly seconds: _angular_core.Signal<_mirei_ts_collections.ImmutableSet<_nanahoshi_mona_ui_date_input.TimeUnit>>;
+    protected readonly viewHours: _angular_core.Signal<_mirei_ts_collections.ImmutableSet<_nanahoshi_mona_ui_date_input.TimeUnit>>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly focusOnMount: _angular_core.InputSignal<boolean>;
+    readonly footer: _angular_core.InputSignal<boolean>;
+    readonly hourFormat: _angular_core.InputSignal<HourFormat>;
+    readonly hourStep: _angular_core.InputSignal<number>;
+    /**
+     * @description Marks the time selector as invalid. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    readonly max: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
+    readonly min: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
+    readonly minuteStep: _angular_core.InputSignal<number>;
+    /**
+     * @description Prevents value changes while preserving the component's visual state.
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets whether the time selector is required. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly rounded: _angular_core.InputSignal<"small" | "medium" | "large" | "full" | "none" | null | undefined>;
+    readonly secondStep: _angular_core.InputSignal<number>;
+    readonly showSeconds: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<"small" | "medium" | "large" | null | undefined>;
+    /**
+     * @description Emitted when the time selector is interacted with via blur or value selection.
+     * The `FormField` directive listens to this to mark the field as touched.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the touched state of the time selector. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Two-way bindable current time value.
+     * @default null
+     */
+    readonly value: _angular_core.ModelSignal<Date | null>;
+    constructor();
+    focus(): void;
+    protected onBlur(): void;
+    protected onHourChange(hour: number): void;
+    protected onMeridiemClick(meridiem: "AM" | "PM"): void;
+    protected onMinuteChange(minute: number): void;
+    protected onNowClick(event: Event): void;
+    protected onSecondChange(second: number): void;
+    protected onSetTimeClick(): void;
+    private getListRef;
+    private getNextList;
+    private handleKeydown;
+    private focusList;
+    private dateValuesEqual;
+    private initializeNavigatedDate;
+    private navigateItem;
+    private navigateToEdge;
+    private setDateValues;
+    private setupKeyboardNavigation;
+    private updateValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimeSelectorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimeSelectorComponent, "mona-time-selector", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusOnMount": { "alias": "focusOnMount"; "required": false; "isSignal": true; }; "footer": { "alias": "footer"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "hourStep": { "alias": "hourStep"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { TimeSelectorComponent };
+export type { TimeSelectorVariantProps };

package/types/nanahoshi-mona-ui-tooltip.d.ts

@@ -0,0 +1,130 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { Position } from '@nanahoshi/mona-ui/common';
+import { PopupAnchor, PopupOffset, ConnectionPoint } from '@nanahoshi/mona-ui/popup';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantProps } from 'class-variance-authority';
+
+declare const tooltipBaseThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "full" | "large" | "medium" | "none" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const tooltipArrowThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type TooltipBaseVariantProps = VariantProps<ReturnType<typeof tooltipBaseThemeVariants>>;
+type TooltipBaseVariantInputs = VariantInputs<TooltipBaseVariantProps>;
+type TooltipArrowVariantsProps = VariantProps<ReturnType<typeof tooltipArrowThemeVariants>>;
+type TooltipArrowVariantsInputs = VariantInputs<TooltipArrowVariantsProps>;
+type TooltipVariantInputs = TooltipBaseVariantInputs & TooltipArrowVariantsInputs;
+
+declare class TooltipComponent implements TooltipVariantInputs {
+    #private;
+    protected readonly arrowClasses: _angular_core.Signal<string>;
+    protected readonly baseClasses: _angular_core.Signal<string>;
+    protected readonly currentArrowPosition: _angular_core.WritableSignal<Position>;
+    protected readonly templateRef: _angular_core.Signal<TemplateRef<any>>;
+    protected readonly tooltipId: string;
+    /**
+     * @description Whether the tooltip is disabled. When disabled, the tooltip will not be shown.
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Emitted when the tooltip popup is hidden.
+     */
+    readonly hidden: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description The delay in milliseconds before hiding the tooltip after the trigger event ends.
+     */
+    readonly hideDelay: _angular_core.InputSignal<number>;
+    /**
+     * @description The position of the tooltip relative to the target element.
+     */
+    readonly position: _angular_core.InputSignal<Position>;
+    /**
+     * @description The border radius of the tooltip.
+     */
+    readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description The delay in milliseconds before showing the tooltip after the trigger event.
+     */
+    readonly showDelay: _angular_core.InputSignal<number>;
+    /**
+     * @description Emitted when the tooltip popup is shown.
+     */
+    readonly shown: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description The target element(s) to which the tooltip is attached.
+     * Can be an Element, ElementRef, or CSS selector string.
+     */
+    readonly target: _angular_core.InputSignal<PopupAnchor>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipComponent, "mona-tooltip", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "hideDelay"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showDelay": { "alias": "showDelay"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": true; "isSignal": true; }; }, { "hidden": "hidden"; "shown": "shown"; }, never, ["*"], true, never>;
+}
+
+declare class TooltipDirective implements TooltipVariantInputs {
+    #private;
+    protected readonly originalTitle: _angular_core.WritableSignal<string>;
+    /**
+     * @description Whether the tooltip is disabled. When disabled, the tooltip will not be shown.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description The filter to select elements that will have tooltips.
+     * It can be a CSS selector that matches elements within the host element.
+     * Only applies when `mode` is set to `content`.
+     * @default "[title]"
+     */
+    readonly filter: _angular_core.InputSignal<string>;
+    /**
+     * @description The delay in milliseconds before hiding the tooltip.
+     * @default 0
+     */
+    readonly hideDelay: _angular_core.InputSignal<number>;
+    /**
+     * @description The mode of the tooltip.
+     * "host" mode receives the tooltip from the host element's title attribute.
+     * "content" mode uses the title attribute of elements matching the filter.
+     * @default "host"
+     */
+    readonly mode: _angular_core.InputSignal<"host" | "content">;
+    /**
+     * @description The position of the tooltip relative to the target element.
+     * @default "top"
+     */
+    readonly position: _angular_core.InputSignal<Position>;
+    /**
+     * @description The border radius of the tooltip.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description The delay in milliseconds before showing the tooltip after the trigger event.
+     * @default 0
+     */
+    readonly showDelay: _angular_core.InputSignal<number>;
+    /**
+     * @description Emitted when the tooltip popup is hidden.
+     */
+    readonly hidden: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Emitted when the tooltip popup is shown.
+     */
+    readonly shown: _angular_core.OutputEmitterRef<void>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[monaTooltip]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "hideDelay"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "rounded": { "alias": "tooltipRounded"; "required": false; "isSignal": true; }; "showDelay": { "alias": "showDelay"; "required": false; "isSignal": true; }; }, { "hidden": "hidden"; "shown": "shown"; }, never, never, true, never>;
+}
+
+/**
+ * Gets the appropriate offset for a tooltip based on its position.
+ * The offset ensures proper spacing between the tooltip and its anchor element.
+ */
+declare function getOffsetForPosition(position: Position, arrowVisible: boolean): PopupOffset;
+declare function getPositionConnectionPoints(position: Position): {
+    anchor: ConnectionPoint;
+    popup: ConnectionPoint;
+};
+
+export { TooltipComponent, TooltipDirective, getOffsetForPosition, getPositionConnectionPoints, tooltipArrowThemeVariants };