@algodomain/smart-forms 0.1.2 → 0.1.4

package/LICENSE

@@ -20,3 +20,6 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
+
+
+

package/README.md

@@ -35,6 +35,7 @@ Built with TypeScript, Tailwind CSS, Zod validation, and shadcn/ui components.
 - 🔄 **API Integration** - Automatic form submission with authentication support
 - 🔗 **Query Params** - Include URL query parameters in form submissions
 - 💾 **Auto-Save** - LocalStorage support for draft saving
+- 🎛️ **Conditional Disabling** - Disable fields and submit buttons based on form data
 - 🎨 **Customizable** - Full theme control via CSS variables
 - 🌙 **Dark Mode** - Built-in support for light and dark themes
 - ♿ **Accessible** - Built on Radix UI primitives
@@ -479,6 +480,7 @@ All form components (`SmartForm`, `MultiTabSmartForm`, `BaseSmartForm`) support
 | `authentication` | `AuthenticationConfig` | - | Authentication configuration |
 | `includeQueryParams` | `boolean` | `false` | Include URL query parameters |
 | `queryParamsToInclude` | `string[]` | - | Filter specific query params |
+| `submitDisabled` | `boolean \| ((formData: any) => boolean)` | `false` | Disable submit button statically or conditionally based on form data |
 | `children` | `ReactNode` | - | Form content |
 
 ### Authentication Configuration
@@ -522,6 +524,8 @@ All field components support these props:
 | `className` | `string` | - | Custom CSS class |
 | `info` | `string` | - | Info tooltip text |
 | `subLabel` | `string` | - | Additional helper text |
+| `disabled` | `boolean \| ((formData: any) => boolean)` | `false` | Disable field statically or conditionally based on form data |
+| `hidden` | `boolean \| ((formData: any) => boolean)` | `false` | Hide field conditionally based on form data |
 
 ### Field-Specific Props
 
@@ -594,6 +598,237 @@ All field components support these props:
 
 ## 🚀 Advanced Features
 
+### Conditional Field Disabling
+
+Disable fields or submit buttons based on form data values. Supports both static boolean values and dynamic functions.
+
+#### Disable Fields Conditionally
+
+**Static Disable:**
+```tsx
+<SmartInput
+  field="username"
+  label="Username"
+  disabled={true}
+/>
+```
+
+**Conditional Disable Based on Form Data:**
+```tsx
+<SmartForm api="/api/submit">
+  <SmartCombobox
+    field="country"
+    label="Country"
+    options={[
+      { value: 'us', label: 'United States' },
+      { value: 'ca', label: 'Canada' }
+    ]}
+    placeholder="Please select the country"
+  />
+  
+  <SmartCombobox
+    field="state"
+    label="State"
+    options={stateOptions}
+    disabled={(formData) => !formData.country || formData.country === ""}
+  />
+  
+  <SmartInput
+    field="zipCode"
+    label="Zip Code"
+    disabled={(formData) => !formData.state}
+  />
+</SmartForm>
+```
+
+**How it works:**
+- The `disabled` function receives the current `formData` object
+- It re-evaluates automatically when form data changes
+- Returns `true` to disable, `false` to enable
+- Empty strings, `null`, and `undefined` are all falsy in JavaScript
+
+**Example: Disable until checkbox is checked:**
+```tsx
+<SmartForm api="/api/submit">
+  <SmartCheckbox
+    field="agreeToTerms"
+    label="I agree to the terms and conditions"
+  />
+  
+  <SmartInput
+    field="comments"
+    label="Additional Comments"
+    disabled={(formData) => !formData.agreeToTerms}
+  />
+</SmartForm>
+```
+
+**Example: Complex conditional logic:**
+```tsx
+<SmartInput
+  field="phone"
+  label="Phone Number"
+  disabled={(formData) => {
+    // Disable if email is not provided OR if user is under 18
+    return !formData.email || (formData.age && formData.age < 18)
+  }}
+/>
+```
+
+#### Disable Submit Button Conditionally
+
+**Static Disable:**
+```tsx
+<SmartForm
+  api="/api/submit"
+  submitDisabled={true}
+>
+  {/* Fields */}
+</SmartForm>
+```
+
+**Conditional Disable:**
+```tsx
+<SmartForm
+  api="/api/submit"
+  submitDisabled={(formData) => !formData.agreeToTerms}
+>
+  <SmartInput field="name" label="Name" required />
+  <SmartCheckbox
+    field="agreeToTerms"
+    label="I agree to the terms"
+  />
+</SmartForm>
+```
+
+**Example: Disable submit until all required fields are filled:**
+```tsx
+<SmartForm
+  api="/api/submit"
+  submitDisabled={(formData) => {
+    return !formData.name || !formData.email || !formData.agreeToTerms
+  }}
+>
+  <SmartInput field="name" label="Name" required />
+  <SmartInput field="email" label="Email" required />
+  <SmartCheckbox field="agreeToTerms" label="I agree" required />
+</SmartForm>
+```
+
+**Note:** The submit button is automatically disabled when `isLoading` is `true`. The `submitDisabled` prop is combined with the loading state: `disabled={isLoading || isSubmitDisabled}`.
+
+#### Combining Disabled and Hidden
+
+You can use both `disabled` and `hidden` together for different scenarios:
+
+```tsx
+<SmartForm api="/api/submit">
+  <SmartSelect
+    field="userType"
+    label="User Type"
+    options={[
+      { value: 'admin', label: 'Admin' },
+      { value: 'user', label: 'User' }
+    ]}
+  />
+  
+  {/* Hidden for non-admin users */}
+  <SmartInput
+    field="adminCode"
+    label="Admin Code"
+    hidden={(formData) => formData.userType !== 'admin'}
+  />
+  
+  {/* Disabled (but visible) for admin users */}
+  <SmartInput
+    field="userNotes"
+    label="User Notes"
+    disabled={(formData) => formData.userType === 'admin'}
+  />
+</SmartForm>
+```
+
+#### Hide Fields Conditionally
+
+Hide fields completely from the form based on form data. When a field is hidden, it's not rendered at all (unlike `disabled` which shows the field but makes it non-interactive).
+
+**Static Hide:**
+```tsx
+<SmartInput
+  field="optionalField"
+  label="Optional Field"
+  hidden={true}
+/>
+```
+
+**Conditional Hide:**
+```tsx
+<SmartForm api="/api/submit">
+  <SmartSelect
+    field="accountType"
+    label="Account Type"
+    options={[
+      { value: 'personal', label: 'Personal' },
+      { value: 'business', label: 'Business' }
+    ]}
+  />
+  
+  {/* Only show business fields when account type is business */}
+  <SmartInput
+    field="businessName"
+    label="Business Name"
+    hidden={(formData) => formData.accountType !== 'business'}
+  />
+  
+  <SmartInput
+    field="taxId"
+    label="Tax ID"
+    hidden={(formData) => formData.accountType !== 'business'}
+  />
+</SmartForm>
+```
+
+**Example: Show/hide based on checkbox:**
+```tsx
+<SmartForm api="/api/submit">
+  <SmartCheckbox
+    field="hasSpecialRequirements"
+    label="I have special requirements"
+  />
+  
+  <SmartInput
+    field="specialRequirements"
+    label="Please describe your requirements"
+    type="textarea"
+    hidden={(formData) => !formData.hasSpecialRequirements}
+  />
+</SmartForm>
+```
+
+**Difference between `disabled` and `hidden`:**
+- `disabled`: Field is visible but grayed out and non-interactive
+- `hidden`: Field is completely removed from the DOM (not rendered)
+
+**When to use each:**
+- Use `disabled` when you want to show the field exists but is temporarily unavailable
+- Use `hidden` when you want to completely hide fields that aren't relevant to the current form state
+
+#### All Supported Components
+
+Both `disabled` and `hidden` props are available on all smart field components:
+- `SmartInput`
+- `SmartSelect`
+- `SmartCombobox`
+- `SmartCheckbox`
+- `SmartRadioGroup`
+- `SmartDatePicker`
+- `SmartSlider`
+- `SmartDualRangeSlider`
+- `SmartTags`
+- `SmartFileUpload`
+- `SmartAutoSuggestTags`
+- `SmartBasicRichTextbox`
+
 ### Query Parameters
 
 Automatically include URL query parameters in form submissions.
@@ -843,6 +1078,7 @@ export function RegistrationForm() {
       api="https://api.example.com/register"
       method="POST"
       submitButtonText="Register"
+      submitDisabled={(formData) => !formData.agreeToTerms}
       onSuccess={(data) => {
         toast.success('Account created successfully!')
       }}
@@ -871,6 +1107,13 @@ export function RegistrationForm() {
         required
       />
       
+      <SmartSelect
+        field="state"
+        label="State"
+        options={stateOptions}
+        disabled={(formData) => !formData.country}
+      />
+      
       <SmartDatePicker
         field="birthDate"
         label="Date of Birth"

package/dist/{SmartFormProvider-DyJoDBjQ.d.cts → SmartFormProvider-BdyRQakk.d.cts}

@@ -57,6 +57,7 @@ interface FormConfig {
     authentication?: AuthenticationConfig;
     includeQueryParams?: boolean;
     queryParamsToInclude?: string[];
+    submitDisabled?: boolean | ((formData: any) => boolean);
 }
 interface FormContextType {
     formData: any;

package/dist/{SmartFormProvider-DyJoDBjQ.d.ts → SmartFormProvider-BdyRQakk.d.ts}

@@ -57,6 +57,7 @@ interface FormConfig {
     authentication?: AuthenticationConfig;
     includeQueryParams?: boolean;
     queryParamsToInclude?: string[];
+    submitDisabled?: boolean | ((formData: any) => boolean);
 }
 interface FormContextType {
     formData: any;

package/dist/{SmartTags-HmvmCJPT.d.cts → SmartTags-DEpmTDF5.d.cts}

@@ -1,16 +1,22 @@
 import React__default from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface SmartInputProps {
     field: string;
     label?: string;
-    type?: 'text' | 'email' | 'password' | 'tel' | 'number' | 'textarea';
+    type?: 'text' | 'email' | 'password' | 'tel' | 'number' | 'textarea' | 'date';
     placeholder?: string;
     validation?: any;
     className?: string;
     required?: boolean;
     defaultValue?: any;
+    syncValue?: any;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
+    icon?: React__default.ReactNode;
+    iconPosition?: 'left' | 'right';
 }
 declare const SmartInput: React__default.FC<SmartInputProps>;
 
@@ -23,6 +29,8 @@ interface SmartCheckboxProps {
     defaultValue?: boolean;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartCheckbox: React__default.FC<SmartCheckboxProps>;
 
@@ -42,6 +50,8 @@ interface SmartRadioGroupProps {
     defaultValue?: string;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartRadioGroup: React__default.FC<SmartRadioGroupProps>;
 
@@ -60,33 +70,46 @@ interface SmartSelectProps {
     defaultValue?: string;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartSelect: React__default.FC<SmartSelectProps>;
 
-interface SmartDatePickerProps {
+interface SmartComboboxOption {
+    value: string;
+    label: string;
+}
+interface SmartComboboxProps {
     field: string;
     label?: string;
+    options: SmartComboboxOption[];
     className?: string;
     placeholder?: string;
+    allowCustom?: boolean;
     validation?: any;
     required?: boolean;
-    allowPast?: boolean;
-    allowFuture?: boolean;
-    /**
-     * When true, value will be stored/returned as ISO string (yyyy-MM-dd).
-     * Otherwise the underlying form value will be a Date instance.
-     */
-    valueAsString?: boolean;
-    /** Optional minimum selectable date */
-    minDate?: Date;
-    /** Optional maximum selectable date */
-    maxDate?: Date;
-    /** Default value for the date picker (can be Date or string depending on valueAsString) */
-    defaultValue?: Date | string;
+    defaultValue?: string;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
-declare const SmartDatePicker: React__default.FC<SmartDatePickerProps>;
+declare const SmartCombobox: React__default.FC<SmartComboboxProps>;
+
+type SmartDatePickerProps = {
+    field: string;
+    label?: string;
+    placeholder?: string;
+    validation?: any;
+    className?: string;
+    required?: boolean;
+    defaultValue?: any;
+    info?: string;
+    subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
+};
+declare const SmartDatePicker: ({ field, label, className, ...props }: SmartDatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface SmartTagsProps {
     field: string;
@@ -100,7 +123,8 @@ interface SmartTagsProps {
     maxLength?: number;
     minLength?: number;
     allowDuplicates?: boolean;
-    disabled?: boolean;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
     onTagAdd?: (tagText: string) => void;
     onTagRemove?: (tagText: string) => void;
     info?: string;
@@ -108,4 +132,4 @@ interface SmartTagsProps {
 }
 declare const SmartTags: React__default.FC<SmartTagsProps>;
 
-export { SmartInput as S, SmartCheckbox as a, SmartRadioGroup as b, SmartSelect as c, SmartDatePicker as d, SmartTags as e, type SmartInputProps as f, type SmartTagsProps as g };
+export { SmartInput as S, SmartCheckbox as a, SmartRadioGroup as b, SmartSelect as c, SmartCombobox as d, SmartDatePicker as e, SmartTags as f, type SmartInputProps as g, type SmartTagsProps as h, type SmartDatePickerProps as i, type SmartComboboxProps as j, type SmartComboboxOption as k };

package/dist/{SmartTags-HmvmCJPT.d.ts → SmartTags-DEpmTDF5.d.ts}

@@ -1,16 +1,22 @@
 import React__default from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface SmartInputProps {
     field: string;
     label?: string;
-    type?: 'text' | 'email' | 'password' | 'tel' | 'number' | 'textarea';
+    type?: 'text' | 'email' | 'password' | 'tel' | 'number' | 'textarea' | 'date';
     placeholder?: string;
     validation?: any;
     className?: string;
     required?: boolean;
     defaultValue?: any;
+    syncValue?: any;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
+    icon?: React__default.ReactNode;
+    iconPosition?: 'left' | 'right';
 }
 declare const SmartInput: React__default.FC<SmartInputProps>;
 
@@ -23,6 +29,8 @@ interface SmartCheckboxProps {
     defaultValue?: boolean;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartCheckbox: React__default.FC<SmartCheckboxProps>;
 
@@ -42,6 +50,8 @@ interface SmartRadioGroupProps {
     defaultValue?: string;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartRadioGroup: React__default.FC<SmartRadioGroupProps>;
 
@@ -60,33 +70,46 @@ interface SmartSelectProps {
     defaultValue?: string;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartSelect: React__default.FC<SmartSelectProps>;
 
-interface SmartDatePickerProps {
+interface SmartComboboxOption {
+    value: string;
+    label: string;
+}
+interface SmartComboboxProps {
     field: string;
     label?: string;
+    options: SmartComboboxOption[];
     className?: string;
     placeholder?: string;
+    allowCustom?: boolean;
     validation?: any;
     required?: boolean;
-    allowPast?: boolean;
-    allowFuture?: boolean;
-    /**
-     * When true, value will be stored/returned as ISO string (yyyy-MM-dd).
-     * Otherwise the underlying form value will be a Date instance.
-     */
-    valueAsString?: boolean;
-    /** Optional minimum selectable date */
-    minDate?: Date;
-    /** Optional maximum selectable date */
-    maxDate?: Date;
-    /** Default value for the date picker (can be Date or string depending on valueAsString) */
-    defaultValue?: Date | string;
+    defaultValue?: string;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
-declare const SmartDatePicker: React__default.FC<SmartDatePickerProps>;
+declare const SmartCombobox: React__default.FC<SmartComboboxProps>;
+
+type SmartDatePickerProps = {
+    field: string;
+    label?: string;
+    placeholder?: string;
+    validation?: any;
+    className?: string;
+    required?: boolean;
+    defaultValue?: any;
+    info?: string;
+    subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
+};
+declare const SmartDatePicker: ({ field, label, className, ...props }: SmartDatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface SmartTagsProps {
     field: string;
@@ -100,7 +123,8 @@ interface SmartTagsProps {
     maxLength?: number;
     minLength?: number;
     allowDuplicates?: boolean;
-    disabled?: boolean;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
     onTagAdd?: (tagText: string) => void;
     onTagRemove?: (tagText: string) => void;
     info?: string;
@@ -108,4 +132,4 @@ interface SmartTagsProps {
 }
 declare const SmartTags: React__default.FC<SmartTagsProps>;
 
-export { SmartInput as S, SmartCheckbox as a, SmartRadioGroup as b, SmartSelect as c, SmartDatePicker as d, SmartTags as e, type SmartInputProps as f, type SmartTagsProps as g };
+export { SmartInput as S, SmartCheckbox as a, SmartRadioGroup as b, SmartSelect as c, SmartCombobox as d, SmartDatePicker as e, SmartTags as f, type SmartInputProps as g, type SmartTagsProps as h, type SmartDatePickerProps as i, type SmartComboboxProps as j, type SmartComboboxOption as k };