@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,133 @@
+import * as _angular_core from '@angular/core';
+import { FormCheckboxControl } from '@angular/forms/signals';
+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 checkmarkThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "full" | "large" | "medium" | "none" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const checkboxContainerLabelThemeVariants: (theme: ThemeStyle) => (props?: ({
+    labelSize?: "large" | "medium" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const checkboxDirectiveThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "full" | "large" | "medium" | "none" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CheckboxVariantProps = VariantProps<ReturnType<typeof checkboxContainerLabelThemeVariants>>;
+type CheckboxVariantInput = VariantInputs<CheckboxVariantProps>;
+type CheckmarkVariantProps = VariantProps<ReturnType<typeof checkmarkThemeVariants>>;
+type CheckmarkVariantInput = VariantInputs<CheckmarkVariantProps>;
+type CheckboxDirectiveVariantProps = VariantProps<ReturnType<typeof checkboxDirectiveThemeVariants>>;
+type CheckboxDirectiveVariantInput = VariantInputs<CheckboxDirectiveVariantProps>;
+
+declare class CheckBoxComponent implements CheckboxVariantInput, CheckmarkVariantInput, FormCheckboxControl {
+    #private;
+    protected readonly checkBoxClasses: _angular_core.Signal<string>;
+    protected readonly checkMarkClasses: _angular_core.Signal<string>;
+    protected readonly containerLabelClasses: _angular_core.Signal<string>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
+    /**
+     * @description Whether the control is checked.
+     * @default false
+     */
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    /**
+     * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Activates indeterminate mode, showing a dash instead of a checkmark.
+     * @default false
+     */
+    readonly indeterminate: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Emitted when the checkbox input loses focus.
+     */
+    readonly inputBlur: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * @description Emitted when the checkbox value changes.
+     */
+    readonly inputChange: _angular_core.OutputEmitterRef<Event>;
+    /**
+     * @description Emitted when the checkbox input gains focus.
+     */
+    readonly inputFocus: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * @description Marks the checkbox as invalid. When bound to a signal form field via `[field]`,
+     * this is written by the signal forms `Field` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Text label displayed alongside the checkbox. When provided, takes precedence over projected content.
+     * @default ""
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * @description Position of the label relative to the checkbox.
+     * @default "after"
+     */
+    readonly labelPosition: _angular_core.InputSignal<"before" | "after">;
+    /**
+     * @description Controls the font size of the label text.
+     * @default "medium"
+     */
+    readonly labelSize: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
+    /**
+     * @description Marks the control as required for form validation.
+     * @default false
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Border-radius preset applied to the checkmark box.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Tab index of the native checkbox input.
+     * @default 0
+     */
+    readonly tabIndex: _angular_core.InputSignal<number>;
+    /**
+     * @description Emitted when the checkbox loses focus or its value changes.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Marks the checkbox as touched. When bound to a signal form field via `[field]`,
+     * this is written by the signal forms `Field` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Additional CSS classes merged onto the label container via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    protected onCheckedChange(checked: boolean): void;
+    protected onInputChange(event: Event): void;
+    protected onInputBlur(event: FocusEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckBoxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckBoxComponent, "mona-check-box", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labelSize": { "alias": "labelSize"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "inputBlur": "inputBlur"; "inputChange": "inputChange"; "inputFocus": "inputFocus"; "touch": "touch"; }, never, ["*"], true, never>;
+}
+
+declare class CheckboxDirective implements CheckboxDirectiveVariantInput {
+    #private;
+    protected readonly classes: _angular_core.Signal<string>;
+    /**
+     * @description Border-radius preset applied to the checkbox.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "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<CheckboxDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CheckboxDirective, "input[type='checkbox'][monaCheckbox]", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { CheckBoxComponent, CheckboxDirective };
+export type { CheckboxDirectiveVariantProps, CheckboxVariantProps, CheckmarkVariantProps };

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

@@ -0,0 +1,130 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+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 chipThemeVariants: (theme: ThemeStyle) => (props?: ({
+    disabled?: boolean | null | undefined;
+    look?: "default" | "primary" | "success" | "error" | "warning" | "info" | "outline" | "secondary" | "ghost" | null | undefined;
+    rounded?: "full" | "large" | "medium" | "none" | "small" | null | undefined;
+    size?: "large" | "medium" | "small" | null | undefined;
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ChipVariantProps = VariantProps<ReturnType<typeof chipThemeVariants>>;
+type ChipVariantInputs = VariantInputs<ChipVariantProps>;
+
+declare class ChipComponent implements ChipVariantInputs {
+    #private;
+    protected readonly ariaChecked: _angular_core.Signal<"true" | "false" | undefined>;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly effectiveAriaLabel: _angular_core.Signal<string | undefined>;
+    protected readonly effectiveTabIndex: _angular_core.Signal<string | number>;
+    protected readonly iconSize: _angular_core.Signal<13 | 14 | 16>;
+    protected readonly prefixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly role: _angular_core.Signal<"checkbox" | undefined>;
+    /**
+     * @description Accessible name for the host element. Describe what the chip represents.
+     * When empty, assistive technology announces the role without a label.
+     * @default ""
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @description Emitted when the chip body is clicked or activated via Enter or Space.
+     * Not emitted when the remove button is activated.
+     */
+    readonly contentClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Renders the chip with reduced visual emphasis and removes pointer interaction.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Text label displayed inside the chip. When non-empty, takes precedence over projected content.
+     * @default ""
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * @description Visual style variant controlling the chip's background color, border, and interaction states.
+     * @default "default"
+     */
+    readonly look: _angular_core.InputSignal<"default" | "primary" | "success" | "error" | "warning" | "info" | "outline" | "secondary" | "ghost" | null | undefined>;
+    /**
+     * @description Renders a remove button inside the chip. When activated, emits the `remove` output.
+     * @default false
+     */
+    readonly removable: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Emitted when the remove button is clicked. Only fires when `removable` is `true`.
+     * Emits the originating `Event`.
+     */
+    readonly remove: _angular_core.OutputEmitterRef<Event>;
+    /**
+     * @description Accessible label for the remove button, overriding the auto-computed `"Remove, <label>"` fallback.
+     * Use when the chip shows only projected content and the default label is not descriptive enough.
+     * @default undefined
+     */
+    readonly removeLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @description Tab index for the remove button, independent of the chip host's own tabindex.
+     * Set to `-1` to exclude the remove button from tab order when an equivalent keyboard path exists elsewhere.
+     * @default 0
+     */
+    readonly removeTabIndex: _angular_core.InputSignal<string | number>;
+    /**
+     * @description Border-radius preset applied to the chip.
+     * @default "full"
+     */
+    readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Whether the chip is selected. When `toggleable` is `true`, each activation flips this value.
+     * Supports two-way binding via `[(selected)]`.
+     * @default false
+     */
+    readonly selected: _angular_core.ModelSignal<boolean>;
+    /**
+     * @description Size preset controlling the chip's padding and remove button dimensions.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
+    /**
+     * @description Tab index override for the chip host element. When not set, computed automatically:
+     * `0` when `toggleable` or `removable` is `true`, `-1` otherwise. Overridden to `-1` when `disabled` is `true`.
+     * @default undefined
+     */
+    readonly tabindex: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * @description Enables toggle behavior. When `true`, each activation flips `selected`
+     * and the host receives `role="checkbox"` with `aria-checked`.
+     * @default false
+     */
+    readonly toggleable: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Arbitrary value associated with this chip.
+     * Useful for identifying which chip was selected or removed in a collection.
+     * @default undefined
+     */
+    readonly value: _angular_core.InputSignal<unknown>;
+    constructor();
+    protected onRemoveClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipComponent, "mona-chip", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "removeTabIndex": { "alias": "removeTabIndex"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "contentClick": "contentClick"; "remove": "remove"; "selected": "selectedChange"; }, ["prefixTemplate"], ["*"], true, never>;
+}
+
+/**
+ * @description Apply to an `<ng-template>` directly inside `<mona-chip>` to render prefix content
+ * (e.g., an avatar or icon) before the chip label or projected content. The template receives no context.
+ */
+declare class ChipPrefixTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChipPrefixTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ChipPrefixTemplateDirective, "ng-template[monaChipPrefixTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+export { ChipComponent, ChipPrefixTemplateDirective };
+export type { ChipVariantProps };

package/types/nanahoshi-mona-ui-circular-progress-bar.d.ts

@@ -0,0 +1,113 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { VariantInputs, Action } from '@nanahoshi/mona-ui/internal';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantProps } from 'class-variance-authority';
+
+interface LabelTemplateContext {
+    $implicit: number;
+    max: number;
+    min: number;
+    percent: number;
+}
+
+declare class CircularProgressBarLabelTemplateDirective {
+    readonly templateRef: TemplateRef<LabelTemplateContext>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CircularProgressBarLabelTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CircularProgressBarLabelTemplateDirective, "ng-template[monaCircularProgressBarLabelTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare const circularProgressBarBaseThemeVariants: (theme: ThemeStyle) => (props?: ({
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CircularProgressBarBaseVariantProps = VariantProps<ReturnType<typeof circularProgressBarBaseThemeVariants>>;
+type CircularProgressBarBaseVariantInput = VariantInputs<CircularProgressBarBaseVariantProps>;
+
+declare class CircularProgressBarComponent implements CircularProgressBarBaseVariantInput {
+    #private;
+    protected readonly baseClasses: _angular_core.Signal<string>;
+    protected readonly center: _angular_core.Signal<{
+        x: number;
+        y: number;
+    }>;
+    protected readonly circumference: _angular_core.Signal<number>;
+    protected readonly labelTemplate: _angular_core.Signal<CircularProgressBarLabelTemplateDirective | undefined>;
+    protected readonly pixelSize: _angular_core.Signal<string>;
+    protected readonly progress: _angular_core.Signal<number>;
+    protected readonly radius: _angular_core.Signal<number>;
+    protected readonly strokeColor: _angular_core.Signal<string | Action<number, string>>;
+    protected readonly strokeDashOffset: _angular_core.Signal<number>;
+    /**
+     * @description Enables CSS transitions on stroke and color changes.
+     * Set to `false` when updating `value` at a high frequency.
+     * @default true
+     */
+    readonly animate: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Accessible name for the host element. Describe what the component represents (e.g., "Upload progress").
+     * When empty, assistive technology announces the role without a label.
+     * @default ""
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @description Human-readable override for the `aria-valuenow` announcement.
+     * Useful in indeterminate mode — set to a localized string such as `"Loading"`
+     * so screen readers announce state rather than silence.
+     * When empty, assistive technology falls back to the numeric value.
+     * @default ""
+     */
+    readonly ariaValueText: _angular_core.InputSignal<string>;
+    /**
+     * @description Accent color. Pass a CSS color string, or a function receiving the current percentage (0–100) and
+     * returning a string. When empty, falls back to the primary theme color.
+     * @default ""
+     */
+    readonly color: _angular_core.InputSignal<string | Action<number, string>>;
+    /**
+     * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Activates indeterminate mode when the completion value is unknown.
+     * ARIA value attributes are removed and `aria-busy` is set on the host element.
+     * @default false
+     */
+    readonly indeterminate: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Upper bound of the value range. Must be greater than `min`.
+     * @default 100
+     */
+    readonly max: _angular_core.InputSignal<number>;
+    /**
+     * @description Lower bound of the value range.
+     * @default 0
+     */
+    readonly min: _angular_core.InputSignal<number>;
+    /**
+     * @description Diameter of the indicator in pixels. Controls both width and height of the host element.
+     * @default 100
+     */
+    readonly size: _angular_core.InputSignal<number>;
+    /**
+     * @description Stroke width of the circular track in pixels.
+     * @default 6
+     */
+    readonly thickness: _angular_core.InputSignal<number>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Current progress value within `[min, max]`. Values outside the range are clamped before rendering; non-finite values are treated as `0`.
+     * @default 0
+     */
+    readonly value: _angular_core.InputSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CircularProgressBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CircularProgressBarComponent, "mona-circular-progress-bar", never, { "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaValueText": { "alias": "aria-valuetext"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "thickness": { "alias": "thickness"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, ["labelTemplate"], never, true, never>;
+}
+
+export { CircularProgressBarComponent, CircularProgressBarLabelTemplateDirective };
+export type { LabelTemplateContext };

package/types/nanahoshi-mona-ui-color-gradient.d.ts

@@ -0,0 +1,201 @@
+import * as _angular_core from '@angular/core';
+import { Signal, ElementRef } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import { VariantInputs, HSV, RGB, HSVChannel, RGBChannel } from '@nanahoshi/mona-ui/internal';
+import { ColorMode, ColorOutputFormat } from '@nanahoshi/mona-ui/common';
+import { Subject } from 'rxjs';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+
+interface ColorInput {
+    key: string;
+    label: string;
+    value: number | null;
+    min: number;
+    max: number;
+    change: (value: number | null) => void;
+}
+
+declare const colorGradientBaseThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const colorGradientHsvRectangleThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const colorGradientHsvRectangleHandleThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const colorGradientPreviewThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const colorGradientSliderHandleThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type ColorGradientBaseVariantProps = VariantProps<ReturnType<typeof colorGradientBaseThemeVariants>>;
+type ColorGradientVaseVariantInput = VariantInputs<ColorGradientBaseVariantProps>;
+type ColorGradientHsvRectangleVariantProps = VariantProps<ReturnType<typeof colorGradientHsvRectangleThemeVariants>>;
+type ColorGradientHsvRectangleVariantInput = VariantInputs<ColorGradientHsvRectangleVariantProps>;
+type ColorGradientHsvRectangleHandleVariantProps = VariantProps<ReturnType<typeof colorGradientHsvRectangleHandleThemeVariants>>;
+type ColorGradientHsvRectangleHandleVariantInput = VariantInputs<ColorGradientHsvRectangleHandleVariantProps>;
+type ColorGradientPreviewVariantProps = VariantProps<ReturnType<typeof colorGradientPreviewThemeVariants>>;
+type ColorGradientPreviewVariantInput = VariantInputs<ColorGradientPreviewVariantProps>;
+type ColorGradientSliderHandleVariantProps = VariantProps<ReturnType<typeof colorGradientSliderHandleThemeVariants>>;
+type ColorGradientSliderHandleVariantInput = VariantInputs<ColorGradientSliderHandleVariantProps>;
+type ColorGradientVariantProps = ColorGradientBaseVariantProps & ColorGradientHsvRectangleVariantProps & ColorGradientHsvRectangleHandleVariantProps & ColorGradientPreviewVariantProps & ColorGradientSliderHandleVariantProps;
+type ColorGradientVariantInputs = ColorGradientVaseVariantInput & ColorGradientHsvRectangleVariantInput & ColorGradientHsvRectangleHandleVariantInput & ColorGradientPreviewVariantInput & ColorGradientSliderHandleVariantInput;
+
+declare class ColorGradientComponent implements ColorGradientVariantInputs, FormValueControl<string | null | undefined> {
+    #private;
+    protected readonly alpha: _angular_core.WritableSignal<number>;
+    protected readonly alphaInputColor: Signal<string>;
+    protected readonly alphaSliderBackground: Signal<string>;
+    protected readonly baseClasses: Signal<string>;
+    protected readonly colorInputs: Signal<ColorInput[]>;
+    protected readonly colorMode: _angular_core.WritableSignal<ColorMode>;
+    protected readonly colorPreviewClasses: Signal<string>;
+    protected readonly colorPreviews: Signal<({
+        type: string;
+        color: string;
+        title: string;
+        onClick?: undefined;
+    } | {
+        type: string;
+        color: string;
+        title: string;
+        onClick: () => void;
+    })[]>;
+    protected readonly hex: Signal<string>;
+    protected readonly hexFocused: _angular_core.WritableSignal<boolean>;
+    protected readonly hsvHandle: Signal<ElementRef<HTMLDivElement>>;
+    protected readonly hsvHandleLeft: _angular_core.WritableSignal<number>;
+    protected readonly hsvHandleTop: _angular_core.WritableSignal<number>;
+    protected readonly hexInputValue: _angular_core.WritableSignal<string>;
+    protected readonly hsv: _angular_core.WritableSignal<HSV>;
+    protected readonly hsvRectangle: Signal<ElementRef<HTMLDivElement>>;
+    protected readonly hsvRectangleBackground: Signal<string>;
+    protected readonly hsvRectangleClasses: Signal<string>;
+    protected readonly hsvRectangleHandleClasses: Signal<string>;
+    protected readonly hueValue$: Subject<number>;
+    protected readonly invalidState: Signal<boolean>;
+    protected readonly lastSelectedColor: _angular_core.WritableSignal<string>;
+    protected readonly rgb: _angular_core.WritableSignal<RGB>;
+    protected readonly selectedColor: Signal<string>;
+    protected readonly sliderHandleClasses: Signal<string>;
+    protected readonly sliderHeight = 10;
+    /**
+     * @description Emits when the Apply button is clicked.
+     * The `Apply` button is only displayed when `showButtons` is set to true.
+     */
+    readonly apply: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Emits when the Cancel button is clicked.
+     * The `Cancel` button is only displayed when `showButtons` is set to true.
+     */
+    readonly cancel: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the disabled state of the color gradient.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Specifies the format of the color output.
+     * @default "hex"
+     */
+    readonly format: _angular_core.InputSignal<ColorOutputFormat>;
+    /**
+     * @description Marks the color gradient as invalid. When bound to a signal form field via `[field]`,
+     * this is written by the signal forms `Field` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Specifies whether the color picker should display the alpha slider.
+     * @default true
+     */
+    readonly opacity: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Marks the color gradient as required for form validation.
+     * @default false
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Specifies the rounded variant of the color picker.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"none" | "small" | "medium" | "large" | "full" | null | undefined>;
+    /**
+     * @description Specifies whether the color picker should display the buttons.
+     * When set to true, the color picker will display the "Apply" and "Cancel" buttons.
+     * When set to false, the color picker will not display the buttons and will emit the color value on change.
+     * @default true
+     */
+    readonly showButtons: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Specifies whether the color picker should display the hex input.
+     * @default true
+     */
+    readonly showHexInput: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Specifies whether the color picker should display the channel inputs (RGB or HSV).
+     * @default true
+     */
+    readonly showColorInputs: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Emitted when the color gradient is interacted with on blur or value adjustment.
+     * The `FormField` directive listens to this to mark the field as touched.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Marks the color gradient as touched. When bound to a signal form field via `[field]`,
+     * this is written by the signal forms `Field` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Two-way bindable current color value.
+     * When undefined, the component keeps its default internal color state (white, #ffffffff).
+     * @default undefined
+     */
+    readonly value: _angular_core.ModelSignal<string | null | undefined>;
+    constructor();
+    protected onAlphaChange(value: number | null): void;
+    protected onApply(): void;
+    protected onCancel(): void;
+    protected onClearClick(): void;
+    protected onCopyColorSelect(mode: "hex" | "rgb"): void;
+    protected onHexChange(value: string): void;
+    protected onHexInputBlur(): void;
+    protected onHexInputFocus(): void;
+    protected onHsvChange(value: number | null, channel: HSVChannel): void;
+    protected onHsvHandleBlur(): void;
+    protected onHsvHandleKeyDown(event: KeyboardEvent): void;
+    protected onNumericInputBlur(): void;
+    protected onPreviousColorKeyDown(event: KeyboardEvent, handler?: () => void): void;
+    protected onResetColorClick(): void;
+    protected onRgbChange(value: number | null, channel: RGBChannel): void;
+    protected onSliderBlur(): void;
+    protected onSwitchColorModeClick(): void;
+    private afterNextRender;
+    private clear;
+    private createHsvInputList;
+    private createRgbInputList;
+    private emitValue;
+    private getPositionFromSaturation;
+    private getPositionFromValue;
+    private getSaturationFromPosition;
+    private getValidChannelValue;
+    private getValueFromPosition;
+    private loadColorFromString;
+    private setHsvRectPointerEvents;
+    private setSubscriptions;
+    private syncValue;
+    private updateHexInputValue;
+    private updateHsv;
+    private updateHsvRectPointerPosition;
+    private updateHsvValues;
+    private updateOtherNullChannels;
+    private updateRgb;
+    private updateRgbFromHsv;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorGradientComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorGradientComponent, "mona-color-gradient", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "opacity": { "alias": "opacity"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showButtons": { "alias": "showButtons"; "required": false; "isSignal": true; }; "showHexInput": { "alias": "showHexInput"; "required": false; "isSignal": true; }; "showColorInputs": { "alias": "showColorInputs"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "apply": "apply"; "cancel": "cancel"; "touch": "touch"; "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { ColorGradientComponent };
+export type { ColorGradientVariantProps };