@prokodo/ui 0.1.15 → 1.0.1

package/dist/types/components/RTE/RTE.d.ts

@@ -43,6 +43,7 @@ export declare const RTE: import("react").ComponentType<{
     vocab?: string | undefined | undefined;
     autoCorrect?: string | undefined | undefined;
     autoSave?: string | undefined | undefined;
+    color?: import("../../types/variants").Variants | undefined;
     itemProp?: string | undefined | undefined;
     itemScope?: boolean | undefined | undefined;
     itemType?: string | undefined | undefined;
@@ -323,6 +324,10 @@ export declare const RTE: import("react").ComponentType<{
     hideLegend?: boolean | undefined;
     minRows?: number | undefined;
     maxRows?: number | undefined;
+    trailingIcon?: import("../icon").IconName | undefined;
+    trailingIconLabel?: string | undefined;
+    onTrailingIconClick?: (() => void) | undefined;
+    trailingIconButtonProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick"> | undefined;
     errorTranslations?: import("../input").InputErrorTranslations | undefined;
     onValidate?: import("../input").InputValidateEvent | undefined;
 } & {

package/dist/types/components/RTE/RTE.lazy.d.ts

@@ -43,6 +43,7 @@ declare const _default: import("react").ComponentType<{
     vocab?: string | undefined | undefined;
     autoCorrect?: string | undefined | undefined;
     autoSave?: string | undefined | undefined;
+    color?: import("../../types/variants").Variants | undefined;
     itemProp?: string | undefined | undefined;
     itemScope?: boolean | undefined | undefined;
     itemType?: string | undefined | undefined;
@@ -323,6 +324,10 @@ declare const _default: import("react").ComponentType<{
     hideLegend?: boolean | undefined;
     minRows?: number | undefined;
     maxRows?: number | undefined;
+    trailingIcon?: import("../icon").IconName | undefined;
+    trailingIconLabel?: string | undefined;
+    onTrailingIconClick?: (() => void) | undefined;
+    trailingIconButtonProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick"> | undefined;
     errorTranslations?: import("../input").InputErrorTranslations | undefined;
     onValidate?: import("../input").InputValidateEvent | undefined;
 } & {

package/dist/types/components/RTE/RTE.view.d.ts

@@ -7,5 +7,5 @@ type RTEViewProps = RTEProps & {
     showResize?: boolean;
     onStartResize?: (e: MouseEvent<HTMLButtonElement>) => void;
 };
-export declare function RTEView({ name, value, disabled, readOnly, required, placeholder, maxLength, errorText, htmlValue, surfaceRef, mountRef, showResize, onStartResize, onChange, onValidate, errorTranslations, rteToolbar, rteOptions, ...rest }: RTEViewProps): JSX.Element;
+export declare function RTEView({ name, value, disabled, readOnly, required, placeholder, maxLength, errorText, htmlValue, surfaceRef, mountRef, showResize, onStartResize, onChange, onValidate, errorTranslations, rteToolbar, rteOptions, color, ...rest }: RTEViewProps): JSX.Element;
 export {};

package/dist/types/components/accordion/Accordion.d.ts

@@ -5,7 +5,7 @@ export declare const Accordion: import("react").ComponentType<{
     headerToggleClassName?: string;
     expanded?: number | null;
     className?: string;
-    variant?: import("../../types/variants").Variants;
+    color?: import("../../types/variants").Variants;
     titleOptions?: import("../headline").HeadlineProps;
     iconProps?: import("../icon").IconProps;
     items: import("./Accordion.model").AccordionItem[];

package/dist/types/components/accordion/Accordion.lazy.d.ts

@@ -5,7 +5,7 @@ declare const _default: import("react").ComponentType<{
     headerToggleClassName?: string;
     expanded?: number | null;
     className?: string;
-    variant?: import("../../types/variants").Variants;
+    color?: import("../../types/variants").Variants;
     titleOptions?: import("../headline").HeadlineProps;
     iconProps?: import("../icon").IconProps;
     items: import("./Accordion.model").AccordionItem[];

package/dist/types/components/accordion/Accordion.model.d.ts

@@ -23,7 +23,7 @@ export type AccordionProps = {
     headerToggleClassName?: string;
     expanded?: number | null;
     className?: string;
-    variant?: Variants;
+    color?: Variants;
     titleOptions?: HeadlineProps;
     iconProps?: IconProps;
     items: AccordionItem[];

package/dist/types/components/accordion/Accordion.view.d.ts

@@ -1,3 +1,3 @@
 import type { AccordionViewProps } from "./Accordion.model";
 import type { JSX } from "react";
-export declare function AccordionView({ id, type, headerWrapperClassName, headerToggleClassName, variant, className, items, expandedIndex, onToggle, titleOptions, iconProps, ...domRest }: AccordionViewProps): JSX.Element;
+export declare function AccordionView({ id, type, headerWrapperClassName, headerToggleClassName, color, className, items, expandedIndex, onToggle, titleOptions, iconProps, ...domRest }: AccordionViewProps): JSX.Element;

package/dist/types/components/autocomplete/Autocomplete.model.d.ts

@@ -1,4 +1,5 @@
 import type { InputProps } from "../input";
+import type { Variants } from "@/types/variants";
 import type { KeyboardEventHandler } from "react";
 type AutocompleteInputProps = Omit<Extract<InputProps, {
     multiline?: false;
@@ -28,6 +29,7 @@ export type AutocompleteProps = {
     required?: boolean;
     disabled?: boolean;
     fullWidth?: boolean;
+    color?: Variants;
     readOnly?: boolean;
     autoComplete?: string;
     "aria-describedby"?: string;

package/dist/types/components/autocomplete/Autocomplete.view.d.ts

@@ -1,3 +1,3 @@
 import type { AutocompleteViewProps } from "./Autocomplete.model";
 import type { JSX } from "react";
-export declare function AutocompleteView({ id, name, label, placeholder, required, disabled, fullWidth, readOnly, autoComplete, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, value, items, loading, loadingText, emptyText, minQueryLength, minQueryLengthText, className, inputClassName, listClassName, itemClassName, inputProps, _clientState, onChange, onSelect, }: AutocompleteViewProps): JSX.Element;
+export declare function AutocompleteView({ id, name, label, placeholder, required, disabled, fullWidth, readOnly, autoComplete, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, value, items, loading, loadingText, emptyText, minQueryLength, minQueryLengthText, className, inputClassName, listClassName, itemClassName, inputProps, color, _clientState, onChange, onSelect, }: AutocompleteViewProps): JSX.Element;

package/dist/types/components/avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 export declare const Avatar: import("react").ComponentType<{
     priority?: boolean;
-    variant?: import("../../types/variants").Variants;
+    color?: import("../../types/variants").Variants;
     size?: import("./Avatar.model").AvatarSize;
     image?: import("../image").ImageProps;
     redirect?: import("../link").LinkProps;

package/dist/types/components/avatar/Avatar.lazy.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import("react").ComponentType<{
     priority?: boolean;
-    variant?: import("../../types/variants").Variants;
+    color?: import("../../types/variants").Variants;
     size?: import("./Avatar.model").AvatarSize;
     image?: import("../image").ImageProps;
     redirect?: import("../link").LinkProps;

package/dist/types/components/avatar/Avatar.model.d.ts

@@ -5,7 +5,7 @@ import type { ReactNode, HTMLAttributes } from "react";
 export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | number;
 export type AvatarProps = {
     priority?: boolean;
-    variant?: Variants;
+    color?: Variants;
     size?: AvatarSize;
     image?: ImageProps;
     redirect?: LinkProps;

package/dist/types/components/avatar/Avatar.view.d.ts

@@ -1,3 +1,3 @@
 import type { AvatarProps } from "./Avatar.model";
 import type { JSX } from "react";
-export declare function AvatarView({ className, variant, size, image, redirect, iconOverride, ...rest }: AvatarProps): JSX.Element;
+export declare function AvatarView({ className, color, size, image, redirect, iconOverride, ...rest }: AvatarProps): JSX.Element;

package/dist/types/components/calendly/Calendly.view.d.ts

@@ -1,3 +1,3 @@
 import type { CalendlyProps } from "./Calendly.model";
 import type { JSX } from "react";
-export declare function CalendlyView({ animationProps, hideLoading, LoadingComponent, calendlyId: _calendlyId, ...rest }: CalendlyProps): JSX.Element;
+export declare function CalendlyView({ animationProps, hideLoading, LoadingComponent, calendlyId: _calendlyId, className, ...rest }: CalendlyProps): JSX.Element;

package/dist/types/components/card/Card.model.d.ts

@@ -12,7 +12,7 @@ export type CardBackgroundProps = {
 } & Omit<ImageProps, "src" | "alt" | "width" | "height">;
 export type CardProps = {
     ref?: Ref<HTMLDivElement>;
-    variant?: CardVariant;
+    color?: CardVariant;
     loading?: boolean;
     skeletonProps?: SkeletonProps;
     highlight?: boolean;

package/dist/types/components/card/Card.view.d.ts

@@ -2,7 +2,7 @@ import { type LinkProps } from "@/components/link";
 import type { CardProps } from "./Card.model";
 import type { AnimatedViewProps } from "@/components/animated/Animated.model";
 import type { JSX } from "react";
-export declare function CardView({ isClickable, variant, loading, skeletonProps, highlight, gradiant, gradiantClassName, enableShadow, animated, customAnimation, className, contentClassName, background, backgroundProps, children, redirect, role, tabIndex, animatedProps, onClick, onKeyDown, onMouseEnter, onMouseLeave, }: CardProps & {
+export declare function CardView({ isClickable, color, loading, skeletonProps, highlight, gradiant, gradiantClassName, enableShadow, animated, customAnimation, className, contentClassName, background, backgroundProps, children, redirect, role, tabIndex, animatedProps, onClick, onKeyDown, onMouseEnter, onMouseLeave, }: CardProps & {
     role?: string;
     tabIndex?: number;
     animationProps?: AnimatedViewProps;

package/dist/types/components/checkbox/Checkbox.d.ts

@@ -11,6 +11,7 @@ export declare const Checkbox: import("react").ComponentType<Omit<import("react"
     showRequiredMark?: boolean;
     disabled?: boolean;
     variant?: import("./Checkbox.model").CheckboxVariant;
+    color?: import("../../types/variants").Variants;
     onChange?: (event: import("react").ChangeEvent<HTMLInputElement>, checked: boolean) => void;
     className?: string;
 } & {

package/dist/types/components/checkbox/Checkbox.lazy.d.ts

@@ -11,6 +11,7 @@ declare const _default: import("react").ComponentType<Omit<import("react").HTMLA
     showRequiredMark?: boolean;
     disabled?: boolean;
     variant?: import("./Checkbox.model").CheckboxVariant;
+    color?: import("../../types/variants").Variants;
     onChange?: (event: import("react").ChangeEvent<HTMLInputElement>, checked: boolean) => void;
     className?: string;
 } & {

package/dist/types/components/checkbox/Checkbox.model.d.ts

@@ -1,4 +1,5 @@
 import type { IconProps } from "@/components/icon";
+import type { Variants } from "@/types/variants";
 import type { ChangeEvent, HTMLAttributes, ReactNode } from "react";
 export type CheckboxVariant = "plain" | "card";
 export type CheckboxProps<T extends string = string> = Omit<HTMLAttributes<HTMLInputElement>, "onChange" | "title"> & {
@@ -14,6 +15,7 @@ export type CheckboxProps<T extends string = string> = Omit<HTMLAttributes<HTMLI
     showRequiredMark?: boolean;
     disabled?: boolean;
     variant?: CheckboxVariant;
+    color?: Variants;
     onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
     className?: string;
 };

package/dist/types/components/checkbox/Checkbox.view.d.ts

@@ -1,3 +1,3 @@
 import type { CheckboxViewProps } from "./Checkbox.model";
 import type { JSX } from "react";
-export declare function CheckboxView<T extends string = string>({ className, name, value, title, description, icon, iconLabel, required, showRequiredMark, disabled, variant, isChecked, onChangeInternal, }: CheckboxViewProps<T>): JSX.Element;
+export declare function CheckboxView<T extends string = string>({ className, name, value, title, description, icon, iconLabel, required, showRequiredMark, disabled, variant, color, isChecked, onChangeInternal, }: CheckboxViewProps<T>): JSX.Element;

package/dist/types/components/checkbox-group/CheckboxGroup.model.d.ts

@@ -1,4 +1,5 @@
 import type { IconProps } from "@/components/icon";
+import type { Variants } from "@/types/variants";
 import type { HTMLAttributes } from "react";
 export type CheckboxGroupOption<T extends string> = {
     value: T;
@@ -29,6 +30,7 @@ export type CheckboxGroupProps<T extends string> = {
     hiddenInputName?: string;
     layout?: CheckboxGroupLayout;
     variant?: CheckboxGroupVariant;
+    color?: Variants;
     translations?: CheckboxGroupTranslations;
 };
 export type CheckboxGroupViewProps<T extends string> = CheckboxGroupProps<T> & {

package/dist/types/components/checkbox-group/CheckboxGroup.view.d.ts

@@ -1,3 +1,3 @@
 import type { CheckboxGroupViewProps } from "./CheckboxGroup.model";
 import type { JSX } from "react";
-export declare function CheckboxGroupView<T extends string>({ ariaLabel, legend, hideLegend, legendProps, name, disabled, required, options, selectedValues, hiddenInputName, layout, variant, translations: t, isChecked, onToggle, }: CheckboxGroupViewProps<T>): JSX.Element | null;
+export declare function CheckboxGroupView<T extends string>({ ariaLabel, legend, hideLegend, legendProps, name, disabled, required, options, selectedValues, hiddenInputName, layout, variant, color, translations: t, isChecked, onToggle, }: CheckboxGroupViewProps<T>): JSX.Element | null;

package/dist/types/components/datePicker/DatePicker.model.d.ts

@@ -1,12 +1,67 @@
 import type { InputProps } from "../input";
+import type { IconName } from "@/components/icon";
+import type { Variants } from "@/types/variants";
 import type { Dayjs } from "dayjs";
+import type { TouchEventHandler } from "react";
+export type DatePickerViewMode = "days" | "months" | "years";
+export interface CalendarDay {
+    date: Dayjs;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isDisabled: boolean;
+}
+export interface DatePickerDialogBehavior {
+    isOpen: boolean;
+    viewMode: DatePickerViewMode;
+    viewingMonth: Dayjs;
+    selectedDate: Dayjs | null;
+    onToggle: () => void;
+    onPrevMonth: () => void;
+    onNextMonth: () => void;
+    onViewModeChange: (mode: DatePickerViewMode) => void;
+    onMonthSelect: (month: number) => void;
+    onYearSelect: (year: number) => void;
+    onDayClick: (day: Dayjs) => void;
+    onToday: () => void;
+    onClear: () => void;
+    onApply: () => void;
+    onTimeChange: (value: number, unit: "hour" | "minute") => void;
+}
+export interface DatePickerDialogCustomization {
+    prevIcon?: IconName;
+    nextIcon?: IconName;
+    prevAriaLabel?: string;
+    nextAriaLabel?: string;
+    weekdays?: readonly string[];
+    monthFormat?: string;
+    dayAriaFormat?: string;
+    todayLabel?: string;
+    clearLabel?: string;
+    applyLabel?: string;
+    timeLabel?: string;
+    closeIcon?: IconName;
+    closeLabel?: string;
+    dialogColor?: Variants;
+}
+export interface DatePickerDialogProps extends Omit<DatePickerDialogBehavior, "isOpen" | "onToggle">, DatePickerDialogCustomization {
+    name: string;
+    label: string;
+    withTime?: boolean;
+    minuteStep?: number;
+    minDate?: DatePickerValue;
+    maxDate?: DatePickerValue;
+    onClose?: () => void;
+    onDialogTouchStart?: TouchEventHandler<HTMLDivElement>;
+    onDialogTouchEnd?: TouchEventHandler<HTMLDivElement>;
+}
 export type DatePickerValue = Dayjs | string | null;
 export type DatePickerErrorTranslations = {
     required?: string;
     minDate?: string;
     maxDate?: string;
 };
-export interface DatePickerProps extends Omit<InputProps, "onChange" | "value" | "errorTranslations" | "type"> {
+export interface DatePickerProps extends Omit<InputProps, "onChange" | "value" | "errorTranslations" | "type" | "color"> {
+    color?: Variants;
     multiline?: false;
     rows?: undefined;
     minRows?: undefined;
@@ -24,4 +79,18 @@ export interface DatePickerProps extends Omit<InputProps, "onChange" | "value" |
     withTime?: boolean;
     format?: string;
     minuteStep?: number;
+    prevIcon?: IconName;
+    nextIcon?: IconName;
+    prevAriaLabel?: string;
+    nextAriaLabel?: string;
+    weekdays?: readonly string[];
+    monthFormat?: string;
+    dayAriaFormat?: string;
+    todayLabel?: string;
+    clearLabel?: string;
+    applyLabel?: string;
+    timeLabel?: string;
+    closeIcon?: IconName;
+    closeLabel?: string;
+    dialogColor?: Variants;
 }

package/dist/types/components/datePicker/DatePicker.utils.d.ts

@@ -0,0 +1,10 @@
+import { type Dayjs } from "dayjs";
+import type { CalendarDay, DatePickerValue } from "./DatePicker.model";
+export declare const WEEKDAYS: readonly ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+export declare const MONTHS_SHORT: readonly ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+export declare function buildCalendarGrid(viewingMonth: Dayjs, minDate?: DatePickerValue, maxDate?: DatePickerValue): CalendarDay[];
+export declare function buildHours(): number[];
+export declare function buildMinutes(step: number): number[];
+export declare function pad2(n: number): string;
+export declare function isMonthDisabled(month: number, year: number, minDate?: DatePickerValue, maxDate?: DatePickerValue): boolean;
+export declare function isYearDisabled(year: number, minDate?: DatePickerValue, maxDate?: DatePickerValue): boolean;

package/dist/types/components/datePicker/DatePicker.view.d.ts

@@ -1,5 +1,8 @@
-import type { DatePickerProps } from "./DatePicker.model";
-import type { JSX } from "react";
-export declare function DatePickerView({ name, label, value, helperText, errorText, format, placeholder, minDate, maxDate, withTime, minuteStep, onChangeInput, ...rest }: DatePickerProps & {
-    onChangeInput?: (raw: string) => void;
+import type { DatePickerDialogBehavior, DatePickerProps } from "./DatePicker.model";
+import type { JSX, TouchEventHandler } from "react";
+export type { DatePickerDialogBehavior } from "./DatePicker.model";
+export declare function DatePickerView({ name, label, helperText, errorText, format, placeholder, minDate, maxDate, withTime, minuteStep, color, required, prevIcon, nextIcon, prevAriaLabel, nextAriaLabel, weekdays, monthFormat, dayAriaFormat, todayLabel, clearLabel, applyLabel, timeLabel, closeIcon, closeLabel, dialogColor, isOpen, dialogPortalTarget, viewingMonth, selectedDate, onToggle, onPrevMonth, onNextMonth, onDayClick, onToday, onClear, onApply, onTimeChange, onDialogTouchStart, onDialogTouchEnd, viewMode, onViewModeChange, onMonthSelect, onYearSelect, }: Omit<DatePickerProps, "onChange" | "value"> & DatePickerDialogBehavior & {
+    dialogPortalTarget?: Element | null;
+    onDialogTouchStart?: TouchEventHandler<HTMLDivElement>;
+    onDialogTouchEnd?: TouchEventHandler<HTMLDivElement>;
 }): JSX.Element;

package/dist/types/components/datePicker/DatePickerDialog.view.d.ts

@@ -0,0 +1,4 @@
+import type { DatePickerDialogProps } from "./DatePicker.model";
+import type { JSX } from "react";
+export type { DatePickerDialogProps } from "./DatePicker.model";
+export declare function DatePickerDialog({ name, label, withTime, minuteStep, selectedDate, viewingMonth, minDate, maxDate, prevIcon, nextIcon, prevAriaLabel, nextAriaLabel, weekdays, monthFormat: _monthFormat, dayAriaFormat, todayLabel, clearLabel, applyLabel, timeLabel, closeIcon, closeLabel, dialogColor, onPrevMonth, onNextMonth, onDayClick, onToday, onClear, onApply, onTimeChange, onClose, onDialogTouchStart, onDialogTouchEnd, viewMode, onViewModeChange, onMonthSelect, onYearSelect, }: DatePickerDialogProps): JSX.Element;

package/dist/types/components/dynamic-list/DynamicList.model.d.ts

@@ -2,6 +2,7 @@ import type { ButtonProps } from "../button";
 import type { InputProps } from "../input";
 import type { LabelProps } from "../label";
 import type { SelectProps } from "../select";
+import type { Variants } from "@/types/variants";
 import type { MouseEvent } from "react";
 export type DynamicListFieldInput = Omit<InputProps, "id"> & {
     fieldType?: "input";
@@ -27,6 +28,7 @@ export type DynamicListDefault = {
     required?: boolean;
     errorText?: string;
     helperText?: string;
+    color?: Variants;
 };
 export type DynamicListPropsSingle = DynamicListDefault & {
     fields: [DynamicListField];

package/dist/types/components/dynamic-list/DynamicList.view.d.ts

@@ -6,5 +6,5 @@ type DynamicListViewProps = Omit<DynamicListProps, "onChange" | "buttonAddProps"
     buttonDeleteProps?: Omit<ButtonProps, "title">;
     readOnly?: boolean;
 };
-export declare function DynamicListView({ id, label, labelProps, disabled, required, className, classNameList, fields, value, buttonAddProps, buttonDeleteProps, name, errorText, helperText, }: DynamicListViewProps): ReactNode;
+export declare function DynamicListView({ id, label, labelProps, disabled, required, className, classNameList, fields, value, buttonAddProps, buttonDeleteProps, name, errorText, helperText, color, }: DynamicListViewProps): ReactNode;
 export {};

package/dist/types/components/form/Form.d.ts

@@ -1,7 +1,7 @@
 export declare const Form: import("react").ComponentType<{
     label: string;
     disabled?: boolean;
-    variant?: import("./Form.model").FormVariants;
+    color?: import("./Form.model").FormVariants;
     hideResponse?: boolean;
     fields?: import("./Form.model").FormField[];
     hideHeadline?: boolean;

package/dist/types/components/form/Form.lazy.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("react").ComponentType<{
     label: string;
     disabled?: boolean;
-    variant?: import("./Form.model").FormVariants;
+    color?: import("./Form.model").FormVariants;
     hideResponse?: boolean;
     fields?: import("./Form.model").FormField[];
     hideHeadline?: boolean;

package/dist/types/components/form/Form.model.d.ts

@@ -1,6 +1,9 @@
 import type { FormEvent, ReactElement, FormHTMLAttributes, HTMLAttributes, InputHTMLAttributes } from "react";
 import type { ButtonProps } from "../button";
 import type { HeadlineProps } from "../headline";
+import { Autocomplete, type AutocompleteProps } from "../autocomplete";
+import { Checkbox, type CheckboxProps } from "../checkbox";
+import { CheckboxGroup, type CheckboxGroupProps } from "../checkbox-group";
 import { DatePicker, type DatePickerProps, type DatePickerErrorTranslations } from "../datePicker";
 import { DynamicList, type DynamicListProps } from "../dynamic-list";
 import { Input, type InputProps, type InputErrorTranslations } from "../input";
@@ -11,7 +14,7 @@ import { Switch, type SwitchProps } from "../switch";
 import { Rating, type RatingProps } from "../rating";
 import type { FormFieldProps } from "./FormField.client";
 export type FormVariants = "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
-export type FormFieldTypes = "input" | "select" | "switch" | "slider" | "date" | "dynamic-list" | "rating";
+export type FormFieldTypes = "input" | "select" | "switch" | "slider" | "date" | "dynamic-list" | "rating" | "checkbox" | "checkbox-group" | "autocomplete";
 export type FormFieldValue = string | boolean | string[] | Record<string, string>[] | undefined;
 export type FormFieldCondition = {
     fieldId: string;
@@ -20,6 +23,9 @@ export type FormFieldCondition = {
 };
 export type FormFieldOptionals = {
     fieldType?: FormFieldTypes;
+    id?: string;
+    label?: string;
+    errorText?: string;
     visible?: boolean;
     conditions?: FormFieldCondition[];
     value?: FormFieldValue;
@@ -45,7 +51,16 @@ export type FormFieldDynamicList = FormFieldOptionals & {
 export type FormFieldRating = FormFieldOptionals & {
     fieldType: "rating";
 } & RatingProps;
-export type FormField = FormFieldInput | FormFieldSelect | FormFieldSwitch | FormFieldSlider | FormFieldDate | FormFieldDynamicList | FormFieldRating;
+export type FormFieldCheckbox = FormFieldOptionals & {
+    fieldType: "checkbox";
+} & Omit<CheckboxProps, "value">;
+export type FormFieldCheckboxGroup = FormFieldOptionals & {
+    fieldType: "checkbox-group";
+} & CheckboxGroupProps<string>;
+export type FormFieldAutocomplete = FormFieldOptionals & {
+    fieldType: "autocomplete";
+} & AutocompleteProps;
+export type FormField = FormFieldInput | FormFieldSelect | FormFieldSwitch | FormFieldSlider | FormFieldDate | FormFieldDynamicList | FormFieldRating | FormFieldCheckbox | FormFieldCheckboxGroup | FormFieldAutocomplete;
 export type FormMessagesErrors = {
     [key: string]: string[];
 };
@@ -63,7 +78,7 @@ export type FormFieldMessagesErrors = {
 export type FormFieldMessages = {
     errors?: FormFieldMessagesErrors;
 };
-export type FormAllowedChildren = ReactElement<typeof DatePicker> | ReactElement<typeof Input> | ReactElement<typeof InputOTP> | ReactElement<typeof Select> | ReactElement<typeof Slider> | ReactElement<typeof Switch> | ReactElement<typeof DynamicList> | ReactElement<typeof Rating>;
+export type FormAllowedChildren = ReactElement<typeof Autocomplete> | ReactElement<typeof Checkbox> | ReactElement<typeof CheckboxGroup> | ReactElement<typeof DatePicker> | ReactElement<typeof Input> | ReactElement<typeof InputOTP> | ReactElement<typeof Select> | ReactElement<typeof Slider> | ReactElement<typeof Switch> | ReactElement<typeof DynamicList> | ReactElement<typeof Rating>;
 export type ParentComponentProps = {
     children: FormAllowedChildren | FormAllowedChildren[];
 };
@@ -77,7 +92,7 @@ export type FormButton = Omit<ButtonProps, "title"> & {
 export type FormProps = {
     label: string;
     disabled?: boolean;
-    variant?: FormVariants;
+    color?: FormVariants;
     hideResponse?: boolean;
     fields?: FormField[];
     hideHeadline?: boolean;

package/dist/types/components/form/FormField.client.d.ts

@@ -1,9 +1,9 @@
 import { type JSX } from "react";
 import type { FormVariants, FormFieldValue, FormFieldMessages, FormField as FormFieldModel } from "./Form.model";
 export type FormFieldProps = Omit<FormFieldModel, "onChange"> & {
-    variant?: FormVariants;
+    color?: FormVariants;
     messagesFields?: FormFieldMessages;
     onChange?: (field: FormFieldModel, value?: FormFieldValue) => void;
     onValidate?: (field: FormFieldModel, err?: string) => void;
 };
-export default function FormFieldClient({ fieldType, visible, variant, messagesFields, onChange, onValidate, ...props }: FormFieldProps): JSX.Element | null;
+export default function FormFieldClient({ fieldType, visible, color, messagesFields, onChange, onValidate, ...props }: FormFieldProps): JSX.Element | null;

package/dist/types/components/form/FormField.d.ts

@@ -1,5 +1,5 @@
 export declare const FormField: import("react").ComponentType<Omit<import("./Form.model").FormField, "onChange"> & {
-    variant?: import("./Form.model").FormVariants;
+    color?: import("./Form.model").FormVariants;
     messagesFields?: import("./Form.model").FormFieldMessages;
     onChange?: (field: import("./Form.model").FormField, value?: import("./Form.model").FormFieldValue) => void;
     onValidate?: (field: import("./Form.model").FormField, err?: string) => void;

package/dist/types/components/form/FormField.lazy.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("react").ComponentType<Omit<import("./Form.model").FormField, "onChange"> & {
-    variant?: import("./Form.model").FormVariants;
+    color?: import("./Form.model").FormVariants;
     messagesFields?: import("./Form.model").FormFieldMessages;
     onChange?: (field: import("./Form.model").FormField, value?: import("./Form.model").FormFieldValue) => void;
     onValidate?: (field: import("./Form.model").FormField, err?: string) => void;

package/dist/types/components/form/FormField.server.d.ts

@@ -1,9 +1,9 @@
 import type { FormVariants, FormFieldValue, FormFieldMessages, FormField as FormFieldModel } from "./Form.model";
 import type { JSX } from "react";
 export type FormFieldProps = Omit<FormFieldModel, "onChange"> & {
-    variant?: FormVariants;
+    color?: FormVariants;
     messagesFields?: FormFieldMessages;
     onChange?: (field: FormFieldModel, value?: FormFieldValue) => void;
     onValidate?: (field: FormFieldModel, err?: string) => void;
 };
-export default function FormFieldServer({ fieldType, visible, variant, messagesFields, ...props }: FormFieldProps): JSX.Element | null;
+export default function FormFieldServer({ fieldType, visible, color, messagesFields, ...props }: FormFieldProps): JSX.Element | null;

package/dist/types/components/headline/Headline.model.d.ts

@@ -12,7 +12,7 @@ export type HeadlineProps = HTMLAttributes<HTMLHeadElement> & {
     size?: HeadlineSizeProps;
     highlight?: boolean;
     schema?: Schema;
-    variant?: HeadlineVariant;
+    color?: HeadlineVariant;
     className?: string;
     align?: "left" | "center" | "right";
     isRichtext?: boolean;

package/dist/types/components/input/Input.model.d.ts

@@ -1,5 +1,7 @@
 import type { LabelProps } from "../label";
-import type { Ref, ChangeEvent, ChangeEventHandler, FocusEvent, HTMLInputTypeAttribute, TextareaHTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+import type { IconName } from "@/components/icon";
+import type { Variants } from "@/types/variants";
+import type { Ref, ButtonHTMLAttributes, ChangeEvent, ChangeEventHandler, FocusEvent, HTMLInputTypeAttribute, TextareaHTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
 export type FieldType = Omit<HTMLInputTypeAttribute, "date" | "datetime-local" | "month" | "week" | "time">;
 export type InputChangeEvent = ChangeEvent<HTMLTextAreaElement | HTMLInputElement>;
 export type InputChangeEventHandler = ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
@@ -36,6 +38,7 @@ export type InputProps = {
     inputRef?: Ref<HTMLInputElement>;
     customRegexPattern?: string;
     fieldClassName?: string;
+    color?: Variants;
     hideCounter?: boolean;
     inputContainerClassName?: string;
     inputClassName?: string;
@@ -58,6 +61,10 @@ export type InputProps = {
     onFocus?: InputFocusEventHandler;
     onBlur?: InputBlurEventHandler;
     renderNode?: (args: InputRenderNodeArgs) => ReactNode;
+    trailingIcon?: IconName;
+    trailingIconLabel?: string;
+    onTrailingIconClick?: () => void;
+    trailingIconButtonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">;
 } & ({
     multiline?: false;
     type?: FieldType;

package/dist/types/components/input/Input.view.d.ts

@@ -1,3 +1,3 @@
 import type { InputProps } from "./Input.model";
 import type { JSX } from "react";
-export declare function InputView({ inputRef, name, label, disabled, placeholder, isFocused, labelProps, value, helperText, errorText, required, fullWidth, multiline, maxLength, className, fieldClassName, inputContainerClassName, inputClassName, hideCounter, rows, hideLegend: _hideLegend, minRows, maxRows, type, renderNode, ...rest }: InputProps): JSX.Element;
+export declare function InputView({ inputRef, name, label, disabled, placeholder, isFocused, labelProps, value, helperText, errorText, required, fullWidth, multiline, maxLength, className, fieldClassName, inputContainerClassName, inputClassName, hideCounter, rows, hideLegend: _hideLegend, minRows, maxRows, type, renderNode, color, trailingIcon, trailingIconLabel, onTrailingIconClick, trailingIconButtonProps, ...rest }: InputProps): JSX.Element;

package/dist/types/components/inputOTP/InputOTP.client.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from "react";
+import type { InputOTPProps } from "./InputOTP.model";
+declare const InputOTPClient: FC<InputOTPProps>;
+export default InputOTPClient;

package/dist/types/components/inputOTP/InputOTP.d.ts

@@ -1,3 +1,10 @@
-import { type FC } from "react";
-import type { InputOTPProps } from "./InputOTP.model";
-export declare const InputOTP: FC<InputOTPProps>;
+export declare const InputOTP: import("react").ComponentType<Omit<import("../input").InputProps, "name" | "onChange" | "rows" | "multiline" | "minRows" | "maxRows"> & {
+    name?: string;
+    groupLabel?: string;
+    groupInstruction?: string;
+    length?: number;
+    onChange?: (otp: string) => void;
+    onComplete?: (otp: string) => void;
+} & {
+    priority?: boolean;
+}>;

package/dist/types/components/inputOTP/InputOTP.lazy.d.ts

@@ -0,0 +1,11 @@
+declare const _default: import("react").ComponentType<Omit<import("../input").InputProps, "name" | "onChange" | "rows" | "multiline" | "minRows" | "maxRows"> & {
+    name?: string;
+    groupLabel?: string;
+    groupInstruction?: string;
+    length?: number;
+    onChange?: (otp: string) => void;
+    onComplete?: (otp: string) => void;
+} & {
+    priority?: boolean;
+}>;
+export default _default;

package/dist/types/components/inputOTP/InputOTP.model.d.ts

@@ -1,8 +1,18 @@
 import type { InputProps } from "../input";
+import type { ChangeEvent, ClipboardEvent, KeyboardEvent } from "react";
 export type InputOTPProps = Omit<InputProps, "onChange" | "name" | "multiline" | "maxRows" | "minRows" | "rows"> & {
+    name?: string;
     groupLabel?: string;
     groupInstruction?: string;
     length?: number;
     onChange?: (otp: string) => void;
     onComplete?: (otp: string) => void;
 };
+export interface InputOTPViewProps extends Omit<InputOTPProps, "onChange" | "onComplete"> {
+    otp: string[];
+    getInputRef: (index: number) => (el: HTMLInputElement | null) => void;
+    onDigitFocus: (index: number) => void;
+    onDigitChange: (e: ChangeEvent<HTMLInputElement>, index: number) => void;
+    onDigitKeyDown: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>, index: number) => void;
+    onGroupPaste: (e: ClipboardEvent<HTMLDivElement>) => void;
+}

package/dist/types/components/inputOTP/InputOTP.server.d.ts

@@ -0,0 +1,3 @@
+import type { InputOTPProps } from "./InputOTP.model";
+import type { JSX } from "react";
+export default function InputOTPServer({ length, ...props }: InputOTPProps): JSX.Element;

package/dist/types/components/inputOTP/InputOTP.view.d.ts

@@ -0,0 +1,3 @@
+import type { InputOTPViewProps } from "./InputOTP.model";
+import type { JSX } from "react";
+export declare function InputOTPView({ className, groupLabel, groupInstruction, label, labelProps, helperText, errorText, name, length, otp, color, disabled, required, getInputRef, onDigitFocus, onDigitChange, onDigitKeyDown, onGroupPaste, ...props }: InputOTPViewProps): JSX.Element;

package/dist/types/components/inputOTP/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./InputOTP";
-export type { InputOTPProps } from "./InputOTP.model";
+export type { InputOTPProps, InputOTPViewProps } from "./InputOTP.model";