@tempots/beatui 0.17.0 → 0.19.0

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

@@ -1,10 +1,12 @@
-export * from './types';
-export * from './schemas';
-export * from './utils';
 export * from './auth-container';
+export * from './auth-divider';
+export * from './auth-email-prop';
+export * from './password-strength-indicator';
+export * from './reset-password-form';
+export * from './schemas';
 export * from './signin-form';
 export * from './signup-form';
-export * from './reset-password-form';
 export * from './social-login-button';
-export * from './password-strength-indicator';
-export * from './auth-divider';
+export * from './social-providers';
+export * from './types';
+export * from './utils';

package/dist/types/components/auth/password-strength-indicator.d.ts

@@ -1,5 +1,5 @@
-import { TNode } from '@tempots/dom';
+import { Renderable } from '@tempots/dom';
 import { PasswordStrengthIndicatorOptions } from './index';
-export declare function PasswordStrengthIndicator({ password, rules, showLabel, className, }: PasswordStrengthIndicatorOptions): TNode;
-export declare function PasswordStrengthBar({ password, rules, className, }: Omit<PasswordStrengthIndicatorOptions, 'showLabel'>): TNode;
-export declare function PasswordStrengthText({ password, rules, className, }: Omit<PasswordStrengthIndicatorOptions, 'showLabel'>): TNode;
+export declare function PasswordStrengthIndicator({ password, rules, showLabel, className, }: PasswordStrengthIndicatorOptions): Renderable;
+export declare function PasswordStrengthBar({ password, rules, className, }: Omit<PasswordStrengthIndicatorOptions, 'showLabel'>): Renderable;
+export declare function PasswordStrengthText({ password, rules, className, }: Omit<PasswordStrengthIndicatorOptions, 'showLabel'>): Renderable;

package/dist/types/components/auth/reset-password-form.d.ts

@@ -1,3 +1,3 @@
-import { TNode } from '@tempots/dom';
+import { Renderable } from '@tempots/dom';
 import { ResetPasswordFormOptions } from './index';
-export declare function ResetPasswordForm({ onResetPassword, labels, }: ResetPasswordFormOptions): TNode;
+export declare function ResetPasswordForm({ onResetPassword, labels, }: ResetPasswordFormOptions): Renderable;

package/dist/types/components/auth/signin-form.d.ts

@@ -1,3 +1,3 @@
-import { TNode } from '@tempots/dom';
+import { Renderable } from '@tempots/dom';
 import { SignInFormOptions } from './index';
-export declare function SignInForm({ onSignIn, passwordRules, labels, showRememberMe, }: SignInFormOptions): TNode;
+export declare function SignInForm({ onSignIn, passwordRules, labels, showRememberMe, }: SignInFormOptions): Renderable;

package/dist/types/components/auth/signup-form.d.ts

@@ -1,3 +1,3 @@
-import { TNode } from '@tempots/dom';
+import { Renderable } from '@tempots/dom';
 import { SignUpFormOptions } from './index';
-export declare function SignUpForm({ passwordRules, labels, showPasswordStrength, onSignUp, showNameField, showConfirmPassword, showAcceptTermsAndConditions, termsAndConditions, }: SignUpFormOptions): TNode;
+export declare function SignUpForm({ passwordRules, labels, showPasswordStrength, onSignUp, showNameField, showConfirmPassword, showAcceptTermsAndConditions, termsAndConditions, }: SignUpFormOptions): Renderable;

package/dist/types/components/auth/social-login-button.d.ts

@@ -1,8 +1,8 @@
-import { TNode, Value } from '@tempots/dom';
+import { Renderable, Value } from '@tempots/dom';
 import { SocialLoginButtonOptions, AuthProviderName } from './index';
 import { ControlSize } from '../theme';
 import { ThemeColorName } from '@/tokens';
-export declare function SocialLoginButton({ provider, onClick, size, name, icon, color, flow, labels, }: SocialLoginButtonOptions): TNode;
+export declare function SocialLoginButton({ provider, onClick, size, name, icon, color, flow, labels, }: SocialLoginButtonOptions): Renderable;
 export type AuthProviderInfo = {
     provider: AuthProviderName;
     flow?: 'redirect' | 'popup';
@@ -12,34 +12,34 @@ export declare function SocialLoginButtons({ providers, onProviderClick, size, c
     onProviderClick?: (provider: AuthProviderName) => Promise<void>;
     size?: Value<ControlSize>;
     className?: Value<string>;
-}): TNode;
+}): Renderable;
 export declare const socialProviderInfo: Record<AuthProviderName, {
     name: string;
     icon: string;
     color: ThemeColorName | 'black';
 }>;
 export type SpecialSocialLoginButtonOptions = Omit<SocialLoginButtonOptions, 'provider' | 'name' | 'icon' | 'color'>;
-export declare const GoogleLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const GitHubLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const AppleLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const FacebookLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const XLoginButtin: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const TwitterLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const MicrosoftLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const DiscordLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const LinkedInLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const InstagramLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const TiktokLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const SnapchatLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const RedditLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const PinterestLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const TwitchLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const SteamLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const EpicLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const PlayStationLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const XboxLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const WhatsAppLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const WeChatLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const AmazonLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const YahooLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
-export declare const PayPalLoginButton: (options: SpecialSocialLoginButtonOptions) => TNode;
+export declare const GoogleLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const GitHubLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const AppleLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const FacebookLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const XLoginButtin: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const TwitterLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const MicrosoftLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const DiscordLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const LinkedInLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const InstagramLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const TiktokLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const SnapchatLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const RedditLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const PinterestLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const TwitchLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const SteamLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const EpicLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const PlayStationLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const XboxLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const WhatsAppLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const WeChatLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const AmazonLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const YahooLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+export declare const PayPalLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;

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

@@ -64,20 +64,18 @@ export interface AuthContainerOptions {
     className?: Value<string>;
     socialProviders?: AuthProviderInfo[];
     passwordRules?: PasswordRules;
-    showRememberMe?: boolean;
-    showSocialDivider?: boolean;
-    allowSignUp?: boolean;
-    allowPasswordReset?: boolean;
+    showRememberMe?: Value<boolean>;
+    showSocialDivider?: Value<boolean>;
     labels?: AuthContainerLabels;
     onSignIn?: (data: SignInData) => Promise<string | null>;
     onSignUp?: (data: SignUpData) => Promise<string | null>;
     onResetPassword?: (data: ResetPasswordData) => Promise<string | null>;
     onModeChange?: (mode: AuthMode) => void;
-    showPasswordStrength?: boolean;
+    showPasswordStrength?: Value<boolean>;
     showAlreadyHaveAccountLink?: boolean;
     showNameField?: boolean;
-    showConfirmPassword?: boolean;
-    showAcceptTermsAndConditions?: boolean;
+    showConfirmPassword?: Value<boolean>;
+    showAcceptTermsAndConditions?: Value<boolean>;
     termsAndConditions?: TNode;
     showContainer?: Value<boolean>;
 }
@@ -96,7 +94,7 @@ export interface SignInFormOptions {
     onSignIn?: (data: SignInData) => Promise<string | null>;
     passwordRules?: PasswordRules;
     labels?: SignInFormLabels;
-    showRememberMe?: boolean;
+    showRememberMe?: Value<boolean>;
 }
 export interface SignUpFormLabels {
     nameLabel?: Value<string>;
@@ -111,11 +109,11 @@ export interface SignUpFormOptions {
     passwordRules?: PasswordRules;
     labels?: SignUpFormLabels;
     onSignUp?: (data: SignUpData) => Promise<string | null>;
-    showPasswordStrength?: boolean;
+    showPasswordStrength?: Value<boolean>;
     showAlreadyHaveAccountLink?: boolean;
     showNameField?: boolean;
-    showConfirmPassword?: boolean;
-    showAcceptTermsAndConditions?: boolean;
+    showConfirmPassword?: Value<boolean>;
+    showAcceptTermsAndConditions?: Value<boolean>;
     termsAndConditions?: TNode;
 }
 export interface ResetPasswordFormLabels {
@@ -136,7 +134,7 @@ export interface SocialLoginButtonOptions {
     flow?: Value<'redirect' | 'popup' | undefined>;
     name: Value<string>;
     icon: Value<string>;
-    color: Value<ThemeColorName | 'black'>;
+    color: Value<ThemeColorName | 'black' | 'white'>;
     labels?: {
         continueWithProvider?: Value<(provider: string) => string>;
     };
@@ -150,5 +148,5 @@ export interface PasswordStrengthIndicatorOptions {
 export interface ProviderInfo {
     name: string;
     icon: string;
-    color: ThemeColorName;
+    color: ThemeColorName | 'black' | 'white';
 }

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

@@ -8,7 +8,7 @@ export interface ButtonOptions {
     loading?: Value<boolean>;
     variant?: Value<ButtonVariant>;
     size?: Value<ControlSize>;
-    color?: Value<ThemeColorName | 'black'>;
+    color?: Value<ThemeColorName | 'black' | 'white'>;
     roundedness?: Value<RadiusName>;
     onClick?: () => void;
 }

package/dist/types/components/button/close-button.d.ts

@@ -0,0 +1,15 @@
+import { Renderable, TNode, Value } from '@tempots/dom';
+import { ControlSize } from '../theme';
+import { ThemeColorName } from '@/tokens';
+import { RadiusName } from '@/tokens/radius';
+export type CloseButtonOptions = {
+    size?: Value<ControlSize>;
+    icon?: Value<string>;
+    disabled?: Value<boolean>;
+    roundedness?: Value<RadiusName>;
+    color?: Value<ThemeColorName | 'black' | 'white'>;
+    onClick?: () => void;
+    /** Optional localized label for screen readers; defaults to t.$.closeModal */
+    label?: Value<string>;
+};
+export declare function CloseButton({ size, icon, disabled, roundedness, color, onClick, label, }: CloseButtonOptions, ...children: TNode[]): Renderable;

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

@@ -1 +1,2 @@
 export * from './button';
+export * from './close-button';

package/dist/types/components/data/tag.d.ts

@@ -1,10 +1,11 @@
 import { Value } from '@tempots/dom';
 import { ThemeColorName } from '../../tokens';
 import { ControlSize } from '../theme';
-export declare const Tag: ({ disabled, value, color, onClose, size, }: {
+export declare const Tag: ({ value, color, onClose, size, class: cls, disabled, }: {
     value: Value<string>;
-    disabled?: Value<boolean>;
     color?: Value<ThemeColorName>;
     onClose?: (value: string) => void;
     size?: Value<ControlSize>;
+    class?: Value<string>;
+    disabled?: Value<boolean>;
 }) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/control-factory.d.ts

@@ -0,0 +1,24 @@
+import { Merge, TNode } from '@tempots/dom';
+import { InputOptions } from '../input/input-options';
+import { Controller } from '../controller';
+import { InputWrapperOptions } from '../input';
+export declare const makeOnBlurHandler: (_controller: Controller<any>, onBlur?: () => void) => () => void;
+export declare const makeOnChangeHandler: <T>(controller: Controller<T>, onChange?: (value: T) => void) => (value: T) => void;
+export type BaseControlOptions = InputOptions<any>;
+export type ControlOptions = Merge<BaseControlOptions, InputWrapperOptions>;
+export type BaseControllerOptions<T, O extends BaseControlOptions> = Merge<Omit<O, 'value'>, {
+    controller: Controller<T>;
+}>;
+export type ControllerOptions<T, O extends BaseControlOptions> = Merge<Omit<InputWrapperOptions, 'content'>, Merge<Omit<O, 'value'>, {
+    controller: Controller<T>;
+}>>;
+export declare function BaseControl<T, O extends BaseControlOptions>(InputComponent: (options: O) => TNode, options: BaseControllerOptions<T, O>): TNode;
+export declare function Control<T, O extends BaseControlOptions>(InputComponent: (options: O) => TNode, options: ControllerOptions<T, O>, ...children: TNode[]): import("@tempots/dom").Renderable;
+export declare function BaseMappedControl<T, U, O extends BaseControlOptions>(InputComponent: (options: O) => TNode, options: Merge<BaseControllerOptions<T, O>, {
+    toInput: (value: T) => U;
+    fromInput: (value: U) => T;
+}>): TNode;
+export declare function MappedControl<T, U, O extends BaseControlOptions>(InputComponent: (options: O) => TNode, options: Merge<BaseControllerOptions<T, O>, {
+    toInput: (value: T) => U;
+    fromInput: (value: U) => T;
+}>, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/form/control/date-utils.d.ts

@@ -0,0 +1,6 @@
+export declare const dateTimeToISO: (date: Date) => string;
+export declare const dateToISO: (date: Date) => string;
+export declare const stringToDate: (value: string) => Date;
+export declare const nullableStringToDate: (value: string | null) => Date | null;
+export declare const nullableDateTimeToISO: (date: Date | null) => string | null;
+export declare const nullableDateToISO: (date: Date | null) => string | null;

package/dist/types/components/form/control/index.d.ts

@@ -1,23 +1,4 @@
-export * from './combobox-control';
-export * from './control-input-wrapper';
-export * from './control-options';
-export * from './date-control';
-export * from './date-time-control';
-export * from './email-control';
-export * from './file-control';
+export * from './control-factory';
+export * from './ensure-control';
+export * from './list-control';
 export * from './form-status';
-export * from './lazy-native-select-control';
-export * from './native-select-control';
-export * from './nullable-date-control';
-export * from './nullable-date-time-control';
-export * from './nullable-string-date-control';
-export * from './nullable-string-date-time-control';
-export * from './nullable-text-area-control';
-export * from './nullable-text-control';
-export * from './number-control';
-export * from './password-control';
-export * from './segmented-control';
-export * from './string-date-control';
-export * from './tags-control';
-export * from './text-area-control';
-export * from './text-control';

package/dist/types/components/form/control/list-control.d.ts

@@ -1,14 +1,23 @@
-import { ElementPosition, Signal, TNode } from '@tempots/dom';
-import { ArrayController, Controller } from '../controller/controller';
-export type ListControllerPayload<T> = {
-    list: ArrayController<T[]>;
-    item: Controller<T>;
-    position: ElementPosition;
-    remove: () => void;
-    move: (direction: MoveDirection) => void;
-    canMove: (direction: MovableDirection) => Signal<boolean>;
-    cannotMove: (direction: MovableDirection) => Signal<boolean>;
-};
-export type MoveDirection = 'up' | 'down' | 'first' | 'last';
-export type MovableDirection = 'up' | 'down';
-export declare function ListControl<T>(controller: ArrayController<T[]>, element: (payload: ListControllerPayload<T>) => TNode, separator?: (pos: ElementPosition) => TNode): import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
+import { TNode, ElementPosition, Value, Merge } from '@tempots/dom';
+import { ArrayController } from '../controller/controller';
+import { ListInputPayload, MoveDirection, MovableDirection } from '../input/list-input';
+import { InputWrapperOptions } from '../input';
+export type ListControllerPayload<T> = ListInputPayload<T>;
+export type { MoveDirection, MovableDirection };
+export type ListControlsLayout = 'below' | 'aside';
+export type ListControlOptions<T> = Merge<Omit<InputWrapperOptions, 'content'>, {
+    controller: ArrayController<T[]>;
+    element: (payload: ListInputPayload<T>) => TNode;
+    separator?: (pos: ElementPosition) => TNode;
+    showMove?: Value<boolean>;
+    showRemove?: Value<boolean>;
+    showAdd?: Value<boolean>;
+    /** When true, disables the remove button instead of hiding it */
+    removeDisabled?: Value<boolean>;
+    /** When true, disables the add button (if visible) */
+    addDisabled?: Value<boolean>;
+    createItem?: () => T;
+    addLabel?: TNode;
+    controlsLayout?: Value<ListControlsLayout>;
+}>;
+export declare const ListControl: <T>(options: ListControlOptions<T>, ...children: TNode[]) => import("@tempots/dom").Renderable;

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

@@ -1,6 +1,7 @@
 import { Signal } from '@tempots/dom';
 import { Path, PathSegment } from './path';
 import { ControllerError, ControllerValidation } from './controller-validation';
+import { ValidationMode } from './union-controller';
 export declare class Controller<T> {
     #private;
     readonly path: Path;
@@ -9,35 +10,51 @@ export declare class Controller<T> {
     readonly status: Signal<ControllerValidation>;
     readonly error: Signal<undefined | string>;
     readonly hasError: Signal<boolean>;
+    readonly touched: Signal<boolean>;
+    readonly errorVisible: Signal<boolean>;
+    readonly dirty: Signal<boolean>;
     readonly dependencyErrors: Signal<undefined | Record<string | number, ControllerError>>;
     protected readonly parent: {
         disabled: Signal<boolean>;
+        validationMode?: Signal<ValidationMode>;
     };
     readonly disabled: Signal<boolean>;
     readonly disabledOrHasErrors: Signal<boolean>;
     constructor(path: Path, change: (value: T) => void, value: Signal<T>, status: Signal<ControllerValidation>, parent: {
         disabled: Signal<boolean>;
-    });
+        validationMode?: Signal<ValidationMode>;
+    }, equals?: (a: T, b: T) => boolean);
     get name(): string;
     readonly onDispose: (callback: () => void) => void;
     readonly dispose: () => void;
     readonly setDisabled: (disabled: boolean) => void;
     readonly disable: () => void;
     readonly enable: () => void;
+    readonly markTouched: () => void;
+    readonly resetTouched: () => void;
+    readonly markPristine: () => void;
+    readonly reset: () => void;
     readonly array: (equals?: (a: T, b: T) => boolean) => ArrayController<T extends any[] ? T : never>;
     readonly object: (equals?: (a: T, b: T) => boolean) => ObjectController<T extends Record<string, any> ? T : never>;
     readonly transform: <Out>(transform: (value: T) => Out, untransform: (value: Out) => T, subpath?: PathSegment[], equals?: (a: Out, b: Out) => boolean) => Controller<Out>;
+    readonly asyncTransform: <Out>(transform: (value: T) => Promise<Out>, untransform: (value: Out) => Promise<T>, alt: Out, subpath?: PathSegment[], equals?: (a: Out, b: Out) => boolean) => Controller<Out>;
 }
 export declare class ObjectController<T extends Record<keyof T, T[keyof T]>> extends Controller<T> {
     #private;
+    readonly touchedDeep: Signal<boolean>;
+    readonly dirtyDeep: Signal<boolean>;
     constructor(path: Path, change: (value: T) => void, value: Signal<T>, status: Signal<ControllerValidation>, parent: {
         disabled: Signal<boolean>;
     }, equals: (a: T, b: T) => boolean);
     readonly field: <K extends keyof T & string>(field: K) => Controller<T[K]>;
+    readonly markAllTouched: () => void;
+    readonly markAllPristine: () => void;
 }
 export declare class ArrayController<T extends unknown[]> extends Controller<T> {
     #private;
     readonly length: Signal<number>;
+    readonly touchedDeep: Signal<boolean>;
+    readonly dirtyDeep: Signal<boolean>;
     constructor(path: Path, change: (value: T) => void, value: Signal<T>, status: Signal<ControllerValidation>, parent: {
         disabled: Signal<boolean>;
     }, equals: (a: T, b: T) => boolean);
@@ -49,4 +66,6 @@ export declare class ArrayController<T extends unknown[]> extends Controller<T>
     readonly removeAt: (index: number) => void;
     readonly splice: (start: number, deleteCount?: number) => void;
     readonly move: (from: number, to: number, length?: number) => void;
+    readonly markAllTouched: () => void;
+    readonly markAllPristine: () => void;
 }

package/dist/types/components/form/controller/index.d.ts

@@ -4,3 +4,5 @@ export * from './path';
 export * from './controller-validation';
 export * from './controller';
 export * from './color-controller';
+export * from './union-controller';
+export * from './utils';

package/dist/types/components/form/controller/union-controller.d.ts

@@ -0,0 +1,53 @@
+import { Signal } from '@tempots/dom';
+import { Path } from './path';
+import { Controller } from './controller';
+import { ControllerValidation } from './controller-validation';
+/**
+ * Union type definition for the controller
+ */
+export interface UnionBranch<T = unknown> {
+    /** Unique identifier for this branch */
+    key: string;
+    /** Display label for this branch */
+    label: string;
+    /** Type guard function to detect if a value belongs to this branch */
+    detect: (value: unknown) => boolean;
+    /** Function to convert a value to this branch type */
+    convert?: (value: unknown) => {
+        ok: true;
+        value: T;
+    } | {
+        ok: false;
+    };
+    /** Default value for this branch when switching to it */
+    defaultValue: () => T;
+}
+export type ValidationMode = 'onSubmit' | 'continuous' | 'touchedOrSubmit';
+/**
+ * Controller for union types that manages multiple possible value types
+ */
+export declare class UnionController<T> extends Controller<T> {
+    #private;
+    readonly branches: readonly UnionBranch[];
+    readonly activeBranch: Signal<string>;
+    constructor(path: Path, change: (value: T) => void, value: Signal<T>, status: Signal<ControllerValidation>, parent: {
+        disabled: Signal<boolean>;
+        validationMode?: Signal<ValidationMode>;
+    }, branches: UnionBranch[], equals?: (a: T, b: T) => boolean);
+    /**
+     * Get the controller for the currently active branch
+     */
+    get activeController(): Controller<unknown>;
+    /**
+     * Get a controller for a specific branch
+     */
+    getBranchController(branchKey: string): Controller<unknown>;
+    /**
+     * Switch to a different branch
+     */
+    switchToBranch(branchKey: string, confirmChange?: boolean): boolean;
+    /**
+     * Get the current active branch definition
+     */
+    get activeBranchDefinition(): UnionBranch | undefined;
+}

package/dist/types/components/form/controller/utils.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from './controller';
+export declare function transformNullToUndefined<T>(controller: Controller<NonNullable<T> | undefined>): Controller<NonNullable<T> | null>;
+export declare function transformEmptyStringToUndefined(controller: Controller<NonNullable<string> | undefined>): Controller<NonNullable<string>>;
+export declare function transformUndefinedToNull<T>(controller: Controller<NonNullable<T> | null>): Controller<NonNullable<T> | undefined>;

package/dist/types/components/form/input/appearance-selector.d.ts

@@ -3,6 +3,7 @@ import { Value } from '@tempots/dom';
 export type AppearanceSelectorOptions = {
     value: Value<AppearancePreference>;
     onChange?: (value: AppearancePreference) => void;
+    disabled?: Value<boolean>;
 };
-export declare function AppearanceSelector({ value, onChange, }: AppearanceSelectorOptions): import("@tempots/dom").Renderable;
+export declare function AppearanceSelector({ value, onChange, disabled, }: AppearanceSelectorOptions): import("@tempots/dom").Renderable;
 export declare function StandaloneAppearanceSelector(): import("@tempots/dom").Renderable;

package/dist/types/components/form/input/base64-input.d.ts

@@ -0,0 +1,10 @@
+import { Merge, Value } from '@tempots/dom';
+import { InputOptions } from './input-options';
+import { FileInputMode } from './files-input';
+export type Base64InputOptions = Merge<InputOptions<string | undefined>, {
+    accept?: Value<string>;
+    maxFileSize?: Value<number>;
+    mode?: Value<FileInputMode>;
+    showFileList?: Value<boolean>;
+}>;
+export declare function Base64Input(options: Base64InputOptions): import("@tempots/dom").Renderable;

package/dist/types/components/form/input/base64s-input.d.ts

@@ -0,0 +1,12 @@
+import { Merge, Value } from '@tempots/dom';
+import { FileInputMode } from './files-input';
+import { InputOptions } from './input-options';
+export type Base64sInputOptions = Merge<InputOptions<string[]>, {
+    accept?: Value<string>;
+    maxFiles?: Value<number>;
+    maxFileSize?: Value<number>;
+    mode?: Value<FileInputMode>;
+    showFileList?: Value<boolean>;
+}>;
+export declare function fileToBase64(file: File): Promise<string>;
+export declare function Base64sInput(options: Base64sInputOptions): import("@tempots/dom").Renderable;

package/dist/types/components/form/input/bigint-input.d.ts

@@ -0,0 +1,9 @@
+import { Value } from '@tempots/dom';
+import { Merge } from '@tempots/std';
+import { InputOptions } from './input-options';
+export type BigintInputOptions = Merge<InputOptions<bigint>, {
+    step?: Value<bigint>;
+    min?: Value<bigint>;
+    max?: Value<bigint>;
+}>;
+export declare const BigintInput: (options: BigintInputOptions) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/color-input.d.ts

@@ -1,2 +1,9 @@
+import { Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
-export declare const ColorInput: (options: InputOptions<string>) => import("@tempots/dom").Renderable;
+export type ColorInputOptions = InputOptions<string> & {
+    displayValue?: Value<boolean>;
+    size?: Value<number>;
+    withAlpha?: Value<boolean>;
+    colorTextFormat?: Value<'hex' | 'rgb' | 'hsl' | 'hwb' | 'oklch'>;
+};
+export declare const ColorInput: (options: ColorInputOptions) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/combobox-input.d.ts

@@ -0,0 +1,16 @@
+import { Merge, Renderable, Signal, TNode, Value } from '@tempots/dom';
+import { InputOptions } from './input-options';
+import { BaseControllerOptions, ControllerOptions } from '../control';
+import { DropdownOption } from './option';
+export type ComboboxOptions<T> = Merge<InputOptions<T>, {
+    loadOptions: (search: string) => Promise<DropdownOption<T>[]>;
+    renderOption: (value: Signal<T>) => TNode;
+    renderValue?: (value: Signal<T>) => TNode;
+    equality?: (a: T, b: T) => boolean;
+    placeholder?: Value<string>;
+    searchPlaceholder?: Value<string>;
+    debounceMs?: number;
+}>;
+export declare const ComboboxInput: <T>(options: ComboboxOptions<T>) => Renderable;
+export declare const BaseComboboxControl: <T>(options: BaseControllerOptions<T, ComboboxOptions<T>>) => Renderable;
+export declare const ComboboxControl: <T>(options: ControllerOptions<T, ComboboxOptions<T>>) => Renderable;

package/dist/types/components/form/input/combobox-tags-input.d.ts

@@ -0,0 +1,16 @@
+import { TNode, Value } from '@tempots/dom';
+import { InputOptions } from './input-options';
+import { DropdownOption } from './option';
+import { BaseControllerOptions, ControllerOptions } from '../control';
+export type ComboboxTagsOptions<T> = {
+    options: Value<DropdownOption<T>[]>;
+    equality?: (a: T, b: T) => boolean;
+    placeholder?: Value<string>;
+    searchPlaceholder?: Value<string>;
+    filter?: (q: string, opt: {
+        label: string;
+    }) => boolean;
+} & InputOptions<T[]>;
+export declare function ComboboxTagsInput<T>(options: ComboboxTagsOptions<T>): import("@tempots/dom").Renderable;
+export declare function BaseComboboxTagsControl<T>(options: BaseControllerOptions<T[], ComboboxTagsOptions<T>>): TNode;
+export declare function ComboboxTagsControl<T>(options: ControllerOptions<T[], ComboboxTagsOptions<T>>): import("@tempots/dom").Renderable;

package/dist/types/components/form/input/dropdown-base.d.ts

@@ -0,0 +1,19 @@
+import { Signal, TNode, Value } from '@tempots/dom';
+import { InputOptions } from './input-options';
+import { DropdownOption } from './option';
+export type DropdownBaseOptions<T> = InputOptions<T> & {
+    role: 'combobox' | 'dropdown';
+    display: TNode;
+    optionsSource: Value<DropdownOption<T>[]>;
+    allowSpaceToggle?: Value<boolean>;
+    onBeforeOpen?: () => void;
+    onAfterOpen?: () => void;
+    buildListboxContent: (ctx: {
+        dropdownId: string;
+        listboxId: string;
+        focusedValue: Signal<T | null>;
+        handleKeyDown: (ev: KeyboardEvent) => void;
+        onSelect: (value: T) => void;
+    }) => TNode;
+};
+export declare const DropdownBase: <T>(options: DropdownBaseOptions<T>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/dropdown-input.d.ts

@@ -0,0 +1,14 @@
+import { Renderable, Value, Merge } from '@tempots/dom';
+import { InputOptions } from './input-options';
+import { BaseControllerOptions, ControllerOptions } from '../control';
+import { DropdownOption } from './option';
+export type DropdownOptions<T> = Merge<InputOptions<T>, {
+    options: Value<DropdownOption<T>[]>;
+    unselectedLabel?: Value<string>;
+    equality?: (a: T, b: T) => boolean;
+    placeholder?: Value<string>;
+    searchable?: Value<boolean>;
+}>;
+export declare const DropdownInput: <T>(options: DropdownOptions<T>) => Renderable;
+export declare const BaseDropdownControl: <T>(options: BaseControllerOptions<T, DropdownOptions<T>>) => Renderable;
+export declare const DropdownControl: <T>(options: ControllerOptions<T, DropdownOptions<T>>) => Renderable;

package/dist/types/components/form/input/duration-input.d.ts

@@ -0,0 +1,3 @@
+import { InputOptions } from './input-options';
+import { Duration } from '@/temporal';
+export declare const DurationInput: (options: InputOptions<Duration>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/duration-mask.d.ts

@@ -0,0 +1,12 @@
+export declare const DURATION_PARTIAL_RE: RegExp;
+export declare const DURATION_FULL_RE: RegExp;
+export declare function durationMaskConfig(parse: (s: string) => unknown): {
+    mask: null;
+    allowMode: "custom";
+    allow: (c: string) => boolean;
+    pipe: (conformed: string) => string | false;
+    completion: {
+        mode: "custom";
+        isComplete: (conformed: string) => boolean;
+    };
+};