@delightui/components 0.1.160 → 0.1.162-alpha.0

package/dist/esm/components/atoms/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
+declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & import("../..").ControlledFormComponentProps<boolean> & {
     children?: React.ReactNode;
     size?: import("./Checkbox.types").CheckboxSizeEnum;
     type?: import("./Checkbox.types").CheckboxTypeEnum;

package/dist/esm/components/atoms/Checkbox/Checkbox.presenter.d.ts

@@ -271,8 +271,8 @@ declare const usePresenter: (props: CheckboxProps) => {
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
         pattern?: string | undefined;
         step?: number | string | undefined;
-        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
         accept?: string | undefined;
+        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
         capture?: boolean | "user" | "environment" | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;

package/dist/esm/components/atoms/CheckboxItem/CheckboxItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const CheckboxItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
+declare const CheckboxItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & import("../..").ControlledFormComponentProps<boolean> & {
     children?: React.ReactNode;
     size?: import("..").CheckboxSizeEnum;
     type?: import("..").CheckboxTypeEnum;

package/dist/esm/components/atoms/CheckboxItem/CheckboxItem.presenter.d.ts

@@ -278,9 +278,8 @@ declare const usePresenter: (props: CheckboxItemProps) => {
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
         pattern?: string | undefined;
         step?: number | string | undefined;
-        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
-        name?: string | undefined;
         accept?: string | undefined;
+        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
         capture?: boolean | "user" | "environment" | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
@@ -293,6 +292,7 @@ declare const usePresenter: (props: CheckboxItemProps) => {
         min?: number | string | undefined;
         minLength?: number | undefined;
         multiple?: boolean | undefined;
+        name?: string | undefined;
         placeholder?: string | undefined;
         readOnly?: boolean | undefined;
         initialValue?: boolean | undefined;

package/dist/esm/components/atoms/CustomToggle/CustomToggle.d.ts

@@ -1,4 +1,4 @@
-declare const CustomToggle: import("react").ForwardRefExoticComponent<import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
+declare const CustomToggle: import("react").ForwardRefExoticComponent<import("../..").ControlledFormComponentProps<boolean> & {
     offContent?: import("react").ReactNode;
     onContent?: import("react").ReactNode;
     className?: string;

package/dist/esm/components/atoms/Input/Input.d.ts

@@ -1,4 +1,4 @@
-declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<string> & {
+declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & import("../..").ControlledFormComponentProps<string> & {
     inputType?: import("./Input.types").InputTypeEnum;
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;

package/dist/esm/components/atoms/Input/Input.presenter.d.ts

@@ -280,9 +280,8 @@ declare const usePresenter: (props: InputProps, ref: React.ForwardedRef<HTMLInpu
         pattern?: string | undefined;
         size?: number | undefined;
         step?: number | string | undefined;
-        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
-        name?: string | undefined;
         accept?: string | undefined;
+        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
         capture?: boolean | "user" | "environment" | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
@@ -295,6 +294,7 @@ declare const usePresenter: (props: InputProps, ref: React.ForwardedRef<HTMLInpu
         min?: number | string | undefined;
         minLength?: number | undefined;
         multiple?: boolean | undefined;
+        name?: string | undefined;
         placeholder?: string | undefined;
         readOnly?: boolean | undefined;
         initialValue?: string | undefined;

package/dist/esm/components/atoms/Password/Password.presenter.d.ts

@@ -287,9 +287,8 @@ declare const usePresenter: (props: PasswordProps) => {
         size?: number | undefined;
         leadingIcon?: React.ReactNode;
         step?: number | string | undefined;
-        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
-        name?: string | undefined;
         accept?: string | undefined;
+        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
         capture?: boolean | "user" | "environment" | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
@@ -302,6 +301,7 @@ declare const usePresenter: (props: PasswordProps) => {
         min?: number | string | undefined;
         minLength?: number | undefined;
         multiple?: boolean | undefined;
+        name?: string | undefined;
         placeholder?: string | undefined;
         readOnly?: boolean | undefined;
         onValueChange?: ((value: string) => void) | undefined;

package/dist/esm/components/atoms/RadioButton/RadioButton.d.ts

@@ -1,4 +1,4 @@
-declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<string | number> & {
+declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & import("../..").ControlledFormComponentProps<string | number> & {
     children?: React.ReactNode;
     size?: import("./RadioButton.types").RadioButtonSizeEnum;
     labelAlignment?: import("./RadioButton.types").RadioButtonLabelAlignmentEnum;

package/dist/esm/components/atoms/RadioButtonItem/RadioButtonItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const RadioButtonItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<string | number> & {
+declare const RadioButtonItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & import("../..").ControlledFormComponentProps<string | number> & {
     children?: React.ReactNode;
     size?: import("..").RadioButtonSizeEnum;
     labelAlignment?: import("..").RadioButtonLabelAlignmentEnum;

package/dist/esm/components/atoms/RadioButtonItem/RadioButtonItem.presenter.d.ts

@@ -285,9 +285,8 @@ declare const usePresenter: (props: RadioButtonItemProps) => {
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
         pattern?: string | undefined;
         step?: number | string | undefined;
-        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
-        name?: string | undefined;
         accept?: string | undefined;
+        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
         capture?: boolean | "user" | "environment" | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
@@ -300,6 +299,7 @@ declare const usePresenter: (props: RadioButtonItemProps) => {
         min?: number | string | undefined;
         minLength?: number | undefined;
         multiple?: boolean | undefined;
+        name?: string | undefined;
         placeholder?: string | undefined;
         readOnly?: boolean | undefined;
         initialValue?: string | number | undefined;

package/dist/esm/components/atoms/TextArea/TextArea.d.ts

@@ -1,2 +1,2 @@
-declare const TextArea: import("react").ForwardRefExoticComponent<Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<string> & import("react").RefAttributes<HTMLTextAreaElement>>;
+declare const TextArea: import("react").ForwardRefExoticComponent<Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & import("../..").ControlledFormComponentProps<string> & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

package/dist/esm/components/atoms/TextArea/TextArea.presenter.d.ts

@@ -273,9 +273,9 @@ declare const usePresenter: (props: TextAreaProps) => {
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLTextAreaElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLTextAreaElement> | undefined;
         autoComplete?: string | undefined;
-        name?: string | undefined;
         maxLength?: number | undefined;
         minLength?: number | undefined;
+        name?: string | undefined;
         placeholder?: string | undefined;
         readOnly?: boolean | undefined;
         cols?: number | undefined;

package/dist/esm/components/atoms/Toggle/Toggle.d.ts

@@ -1,4 +1,4 @@
-declare const Toggle: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
+declare const Toggle: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & import("../..").ControlledFormComponentProps<boolean> & {
     children?: React.ReactNode;
     labelAlignment?: import("./Toggle.types").ToggleLabelAlignmentEnum;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/components/atoms/Toggle/Toggle.presenter.d.ts

@@ -278,9 +278,8 @@ declare const usePresenter: (props: ToggleProps) => {
         pattern?: string | undefined;
         size?: number | undefined;
         step?: number | string | undefined;
-        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
-        name?: string | undefined;
         accept?: string | undefined;
+        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
         capture?: boolean | "user" | "environment" | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
@@ -293,6 +292,7 @@ declare const usePresenter: (props: ToggleProps) => {
         min?: number | string | undefined;
         minLength?: number | undefined;
         multiple?: boolean | undefined;
+        name?: string | undefined;
         placeholder?: string | undefined;
         readOnly?: boolean | undefined;
         initialValue?: boolean | undefined;

package/dist/esm/components/atoms/ToggleButton/ToggleButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const ToggleButton: React.ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "type" | "actionType"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
+declare const ToggleButton: React.ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "type" | "actionType"> & import("../..").ControlledFormComponentProps<boolean> & {
     defaultChecked?: boolean;
     children?: React.ReactNode;
     className?: string;

package/dist/esm/components/molecules/FormField/FormField.d.ts

@@ -1,3 +1,29 @@
-import { FormFieldProps } from './FormField.types';
-declare const FormField: (props: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
+import type { FieldValues, Path } from 'react-hook-form';
+import type { FormFieldProps, StandaloneFieldProps } from './FormField.types';
+/**
+ * Smart FormField component that works both inside and outside Form context
+ *
+ * Usage inside Form:
+ * ```tsx
+ * <Form defaultValues={{ email: '' }}>
+ *   <FormField name="email" label="Email" required>
+ *     <Input placeholder="Enter email" />
+ *   </FormField>
+ * </Form>
+ * ```
+ *
+ * Usage standalone:
+ * ```tsx
+ * <FormField
+ *   name="email"
+ *   label="Email"
+ *   value={email}
+ *   onChange={setEmail}
+ *   required
+ * >
+ *   <Input placeholder="Enter email" />
+ * </FormField>
+ * ```
+ */
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>(props: FormFieldProps<TFieldValues, TName> | StandaloneFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default FormField;

package/dist/esm/components/molecules/FormField/FormField.presenter.d.ts

@@ -1,16 +1,22 @@
-import { FormFieldProps } from './FormField.types';
-declare const usePresenter: (props: FormFieldProps) => {
+import { type FieldValues, type Path } from 'react-hook-form';
+import type { FormFieldProps, StandaloneFieldProps } from './FormField.types';
+/**
+ * Presenter hook for FormField
+ * Handles both Form-integrated and standalone modes
+ */
+declare const usePresenter: <TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>(props: FormFieldProps<TFieldValues, TName> | StandaloneFieldProps) => {
+    fieldId: string;
     label: string | undefined;
     required: boolean | undefined;
-    infoIcon: import("react").ReactNode;
-    children: import("react").ReactNode;
     messageText: string | undefined;
-    fieldId: string;
+    isInvalid: boolean;
+    isValidating: boolean;
+    infoIcon: import("react").ReactNode;
     variantProps: {
         'component-variant': string;
     };
-    showMessageContainer: string | true | undefined;
-    showErrorIcon: string | false | undefined;
-    showInfoIcon: string | false | undefined;
+    field: import("react-hook-form").ControllerRenderProps<TFieldValues, TName>;
+    children: import("react").ReactNode;
+    disabled: boolean | undefined;
 };
 export default usePresenter;

package/dist/esm/components/molecules/FormField/FormField.types.d.ts

@@ -1,64 +1,20 @@
-import type { HTMLAttributes } from 'react';
-import { FieldValidationFunction, FieldValue } from '../../organisms/Form/Form.types';
+import type { ReactNode } from 'react';
+import type { FieldValues, Path, PathValue } from 'react-hook-form';
 /**
- * Props for the FormField component.
+ * Type representing allowed field values
  */
-export type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Name of the form field
-     */
-    name: string;
-    /**
-     * Label for the form field
-     */
-    label?: string;
-    /**
-     * Children for the form field
-     */
-    children: React.ReactNode;
-    /**
-     * Message for the form field
-     */
-    message?: string;
-    /**
-     * There is a message/error for the form field
-     */
-    hasMessage?: boolean;
-    /**
-     * Info icon for the form field
-     */
-    infoIcon?: React.ReactNode;
-    /**
-     * Indicates if the form field is required
-     */
-    required?: boolean;
-    /**
-     * Validation function for the form field
-     */
-    validate?: FieldValidationFunction;
-    /**
-     * Indicates if the form field is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Indicates if the form field is invalid
-     */
-    invalid?: boolean;
-    /**
-     * Id for the form field
-     */
-    id?: string;
-};
+export type FieldValue = string | number | Date | boolean | File | null | Array<string | number | Date | File | Record<string, unknown>> | Record<string, unknown>;
 /**
- * Props that must be implemented by all form field components that are controlled inputs
+ * Props that all controlled form components should accept
+ * This allows them to work both standalone and within FormField
  */
 export type ControlledFormComponentProps<T extends FieldValue> = {
     /**
-     * the initial value for the field
+     * The initial value for the field
      */
     initialValue?: T;
     /**
-     * the initial value for the field
+     * The initial checked state (for checkboxes/toggles)
      */
     checked?: boolean;
     /**
@@ -90,3 +46,80 @@ export type ControlledFormComponentProps<T extends FieldValue> = {
      */
     id?: string;
 };
+/**
+ * Field-level validation function
+ * Returns error message string if invalid, undefined if valid
+ */
+export type FieldValidationFunction<TValue = FieldValue> = (value: TValue) => string | undefined;
+/**
+ * Field-level async validation function
+ * Returns error message string if invalid, undefined if valid
+ */
+export type AsyncFieldValidationFunction<TValue = FieldValue> = (value: TValue) => Promise<string | undefined>;
+/**
+ * FormField component props for use within a Form
+ */
+export type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {
+    /** Field name (must match form value key) - type-safe */
+    name: TName;
+    /** Field label */
+    label?: string;
+    /** Display name for validation messages (defaults to label or name) */
+    displayName?: string;
+    /**
+     * Child component - will be cloned with injected props:
+     * value, onValueChange, onBlur, ref, disabled, invalid, required, id, name
+     */
+    children: ReactNode;
+    /** Field is required */
+    required?: boolean;
+    /** Sync validation function */
+    validate?: FieldValidationFunction<PathValue<TFieldValues, TName>>;
+    /** Async validation function */
+    asyncValidate?: AsyncFieldValidationFunction<PathValue<TFieldValues, TName>>;
+    /** Default value for this field */
+    defaultValue?: PathValue<TFieldValues, TName>;
+    /** Info message to display */
+    message?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** External invalid state */
+    invalid?: boolean;
+    /** Info icon element */
+    infoIcon?: ReactNode;
+    /** Field ID */
+    id?: string;
+};
+/**
+ * Standalone FormField props (works without Form context)
+ */
+export type StandaloneFieldProps<TValue = FieldValue> = {
+    /** Field name */
+    name: string;
+    /** Field label */
+    label?: string;
+    /** Display name for validation messages */
+    displayName?: string;
+    /** Child component to render */
+    children: ReactNode;
+    /** Field is required */
+    required?: boolean;
+    /** Sync validation function */
+    validate?: FieldValidationFunction<TValue>;
+    /** Async validation function */
+    asyncValidate?: AsyncFieldValidationFunction<TValue>;
+    /** Controlled value */
+    value?: TValue;
+    /** Controlled onChange */
+    onChange?: (value: TValue) => void;
+    /** External error */
+    error?: string;
+    /** Info message */
+    message?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Info icon element */
+    infoIcon?: ReactNode;
+    /** Field ID */
+    id?: string;
+};

package/dist/esm/components/molecules/FormField/FormField.utils.d.ts

@@ -1,11 +1,8 @@
-import React from 'react';
-import { FieldValue } from '../../organisms';
-export declare const injectPropsToMatchingFields: (node: React.ReactNode, propsToInject: {
-    id: string;
-    name: string;
-    value: any;
-    onValueChange: (value: FieldValue) => void;
-    disabled?: boolean;
-    invalid?: boolean;
-    required?: boolean;
-}, shouldInjectValueProps: boolean) => React.ReactNode;
+/**
+ * Shared utilities for FormField components
+ */
+/**
+ * Check if a value is empty for required validation
+ * Handles strings, numbers, booleans, arrays, objects, null, undefined
+ */
+export declare const isEmpty: (val: unknown) => boolean;

package/dist/esm/components/molecules/FormField/index.d.ts

@@ -1,4 +1,3 @@
 import FormField from './FormField';
-import type { FormFieldProps } from './FormField.types';
-export type { FormFieldProps };
 export default FormField;
+export * from './FormField.types';

package/dist/esm/components/molecules/FormField/useSafeController.d.ts

@@ -0,0 +1,14 @@
+import { type UseControllerProps, type UseControllerReturn, type FieldValues, type Path } from 'react-hook-form';
+type SafeControllerProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>, TTransformedValues = TFieldValues> = UseControllerProps<TFieldValues, TName, TTransformedValues> & {
+    value?: unknown;
+    onChange?: (value: any) => void;
+    externalError?: string;
+};
+/**
+ * Standalone controller hook that manages local state and validation
+ * Used when there's no Form context
+ *
+ * Has the same signature as useController with a few additional props for standalone mode
+ */
+export declare const useSafeController: <TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>, TTransformedValues = TFieldValues>(props: SafeControllerProps<TFieldValues, TName, TTransformedValues>) => UseControllerReturn<TFieldValues, TName>;
+export {};

package/dist/esm/components/molecules/FormField/useSafeFormContext.d.ts

@@ -0,0 +1,8 @@
+import { type FieldValues, type Control } from 'react-hook-form';
+/**
+ * Safely attempt to get form context without throwing
+ * Returns the control object if available, undefined otherwise
+ *
+ * This allows components to work both inside and outside Form context
+ */
+export declare const useSafeFormContext: <TFieldValues extends FieldValues = FieldValues>() => Control<TFieldValues> | undefined;

package/dist/esm/components/molecules/Modal/DemoModal.d.ts

@@ -3,6 +3,7 @@ import type { ModalComponentProps } from './ModalContext';
 interface DemoModalProps extends ModalComponentProps {
     title?: string;
     message?: string;
+    isLoading?: boolean;
 }
 declare const DemoModal: React.FC<DemoModalProps>;
 export default DemoModal;

package/dist/esm/components/molecules/Modal/ModalContext/ModalContext.types.d.ts

@@ -15,7 +15,8 @@ export type ModalInstance = {
     /** Unique identifier for the modal instance */
     id: string;
     /** The rendered React component for the modal */
-    component: ReactNode;
+    component: React.ComponentType<any>;
+    props: ModalComponentProps;
 };
 /**
  * The context type that provides modal management functionality.
@@ -43,6 +44,21 @@ export type ModalContextType = {
      * ```
      */
     openModal: <T extends ModalComponentProps>(id: string, Component: ComponentType<T>, props: T) => void;
+    /**
+     * Updates the props of an existing modal by its unique identifier.
+     *
+     * @template T - The props type for the modal component (must extend ModalComponentProps)
+     * @param id - The unique identifier of the modal to update
+     * @param newProps - The new props to merge with the existing props
+     * @returns void
+     *
+     * @example
+     * ```tsx
+     * const { updateModal } = useModalContext();
+     * updateModal('confirmation', { title: 'Updated Title' });
+     * ```
+     */
+    updateModal: <T extends ModalComponentProps>(id: string, newProps: Partial<T>) => void;
     /**
      * Closes and removes a modal by its unique identifier.
      *
@@ -84,4 +100,11 @@ export type UseModalReturn<T extends ModalComponentProps> = {
     closeModal: () => void;
     /** The unique identifier for this modal instance */
     modalId: string;
+    /**
+     * Updates the props of the modal instance managed by this hook.
+     *
+     * @param newProps - The new props to merge with the existing props
+     * @returns void
+     */
+    updateModal: (newProps: Partial<T>) => void;
 };

package/dist/esm/components/molecules/Search/Search.d.ts

@@ -5,7 +5,7 @@
  * @param ref - Forward ref to the input element
  * @returns Search component
  */
-declare const Search: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & import("../FormField/FormField.types").ControlledFormComponentProps<string> & {
+declare const Search: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & import("..").ControlledFormComponentProps<string> & {
     style?: import("./Search.types").SearchStyleEnum;
     onSearch?: import("./Search.types").SearchCallback;
     onClear?: () => void;

package/dist/esm/components/molecules/Search/Search.presenter.d.ts

@@ -295,9 +295,8 @@ declare const useSearchPresenter: (props: SearchProps) => {
         pattern?: string | undefined;
         size?: number | undefined;
         step?: number | string | undefined;
-        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
-        name?: string | undefined;
         accept?: string | undefined;
+        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
         capture?: boolean | "user" | "environment" | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
@@ -310,6 +309,7 @@ declare const useSearchPresenter: (props: SearchProps) => {
         min?: number | string | undefined;
         minLength?: number | undefined;
         multiple?: boolean | undefined;
+        name?: string | undefined;
         placeholder?: string | undefined;
         readOnly?: boolean | undefined;
         invalid?: boolean;

package/dist/esm/components/molecules/Select/Select.presenter.d.ts

@@ -12,17 +12,17 @@ declare const usePresenter: (props: SelectProps) => {
         'component-variant': string;
     };
     isOpen: boolean;
-    selectedValue: import("../..").FieldValue;
+    selectedValue: import("..").FieldValue;
     resetSelectedValue: () => void;
     triggerProps: {
         disabled?: boolean;
         required?: boolean;
         checked?: boolean;
-        value?: import("../..").FieldValue | undefined;
+        value?: import("..").FieldValue | undefined;
         id?: string;
         invalid?: boolean;
-        onValueChange?: ((value: import("../..").FieldValue) => void) | undefined;
-        initialValue?: import("../..").FieldValue | undefined;
+        onValueChange?: ((value: import("..").FieldValue) => void) | undefined;
+        initialValue?: import("..").FieldValue | undefined;
         closeSelectOptions?: () => void;
         role?: import("react").AriaRole | undefined;
         onLoad?: import("react").ReactEventHandler<HTMLElement> | undefined;

package/dist/esm/components/organisms/Form/Form.d.ts

@@ -1,3 +1,24 @@
+import { type FieldValues } from 'react-hook-form';
 import type { FormProps } from './Form.types';
-declare const Form: (props: FormProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Form component - clean wrapper around React Hook Form
+ *
+ * Usage:
+ * ```tsx
+ * <Form defaultValues={{ name: '' }} onSubmit={handleSubmit}>
+ *   <FormField name="name" label="Name">
+ *     <Input />
+ *   </FormField>
+ *   <Button actionType="submit">Submit</Button>
+ * </Form>
+ * ```
+ *
+ * Access RHF methods anywhere in form:
+ * ```tsx
+ * import { useFormContext, useWatch } from 'react-hook-form';
+ * const { setValue, reset } = useFormContext();
+ * const name = useWatch({ name: 'name' });
+ * ```
+ */
+declare const Form: <TFormValues extends FieldValues = FieldValues>(props: FormProps<TFormValues>) => import("react/jsx-runtime").JSX.Element;
 export default Form;

package/dist/esm/components/organisms/Form/Form.presenter.d.ts

@@ -0,0 +1,21 @@
+import { type FieldValues } from 'react-hook-form';
+import type { FormProps } from './Form.types';
+/**
+ * Presenter hook for Form component
+ * Handles RHF initialization and form state management
+ */
+declare const usePresenter: <TFormValues extends FieldValues = FieldValues>(props: FormProps<TFormValues>) => {
+    methods: import("react-hook-form").UseFormReturn<TFormValues, any, TFormValues>;
+    onFormSubmit: import("react").FormEventHandler<HTMLFormElement>;
+    autosave: boolean;
+    onSubmit: import("./Form.types").FormSubmitHandler<TFormValues> | undefined;
+    autosaveDelayMs: number;
+    variantProps: {
+        'component-variant': string;
+    };
+    children: import("react").ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    formRef?: React.Ref<HTMLFormElement>;
+};
+export default usePresenter;