@useloops/design-system 1.4.720 → 1.4.721

package/dist/systems/WebCore/FormBuilder/fieldRegistry.d.ts

@@ -0,0 +1,140 @@
+import { CustomFieldProps } from '../CustomField/CustomField.js';
+import { RichTextFieldProps } from '../RichTextField/RichTextField.js';
+import * as react from 'react';
+import { ComponentProps, ReactElement } from 'react';
+import { RankProps } from '../Rank/types.js';
+import { RadioGroupProps } from '../RadioGroup/RadioGroup.js';
+import { LikertProps } from '../Likert/Likert.js';
+import { DifferentialProps } from '../Differential/Differential.js';
+import { StarRatingProps } from '../StarRating/StarRating.js';
+import { SliderProps } from '../Slider/Slider.js';
+import { SwitchProps } from '../Switch/Switch.js';
+import { CheckboxGroupProps } from '../CheckboxGroup/CheckboxGroup.js';
+import { CheckboxProps } from '../Checkbox/Checkbox.js';
+import { AutocompleteFieldProps } from '../AutocompleteSingle/types.js';
+import { SelectProps } from '../Select/types.js';
+import { CreatableAutocompleteProps } from '../CreatableAutocomplete/CreatableAutocomplete.js';
+import { TextareaProps } from '../Textarea/Textarea.js';
+import { NumberFieldProps } from '../NumberField/types.js';
+import { TextFieldProps } from '../TextField/TextField.js';
+import { FieldValues } from 'react-hook-form';
+import { BaseField } from './types.js';
+
+/** Props handed to a field's component on every render — supplied by the form, never the config. */
+interface RhfFieldProps {
+    value: unknown;
+    onChange: (value: any) => void;
+}
+/**
+ * Single source of truth for controlled field types — the `fieldType` union, per-type config
+ * props and default values are all derived from it. Add a field type = add one entry here.
+ */
+declare const FIELD_REGISTRY: {
+    textfield: {
+        component: react.FunctionComponent<TextFieldProps>;
+        getDefault: (f: any) => string;
+    };
+    numberfield: {
+        component: react.NamedExoticComponent<NumberFieldProps>;
+        getDefault: (f: any) => number;
+    };
+    textarea: {
+        component: react.FunctionComponent<TextareaProps>;
+        getDefault: (f: any) => string;
+    };
+    creatableautocomplete: {
+        component: react.FunctionComponent<CreatableAutocompleteProps>;
+        getDefault: (f: any) => string;
+    };
+    select: {
+        component: react.FunctionComponent<SelectProps>;
+        getDefault: (f: any) => any;
+    };
+    autocomplete: {
+        component: react.FunctionComponent<AutocompleteFieldProps>;
+        getDefault: (f: any) => any;
+        adapt: (_field: Record<string, any>, rhf: RhfFieldProps) => {
+            onChange: (_event: unknown, value: unknown) => void;
+        };
+    };
+    checkbox: {
+        component: react.FunctionComponent<CheckboxProps>;
+        getDefault: (f: any) => boolean;
+    };
+    checkboxGroup: {
+        component: react.FunctionComponent<CheckboxGroupProps>;
+        getDefault: (f: any) => string[];
+    };
+    switch: {
+        component: react.FunctionComponent<SwitchProps>;
+        getDefault: (f: any) => boolean;
+        adapt: (field: Record<string, any>) => {
+            label: any;
+        };
+    };
+    slider: {
+        component: react.FunctionComponent<SliderProps>;
+        getDefault: (f: any) => any;
+        adapt: (_field: Record<string, any>, rhf: RhfFieldProps) => {
+            onChange: (_event: unknown, value: number | number[]) => void;
+        };
+    };
+    starRating: {
+        component: react.FunctionComponent<StarRatingProps>;
+        getDefault: (f: any) => number;
+        adapt: (_field: Record<string, any>, rhf: RhfFieldProps) => {
+            onChange: (_event: unknown, value: number | null) => void;
+        };
+    };
+    differential: {
+        component: react.FunctionComponent<DifferentialProps>;
+        getDefault: (f: any) => any;
+    };
+    likert: {
+        component: react.FunctionComponent<LikertProps>;
+        getDefault: (f: any) => number;
+    };
+    radioGroup: {
+        component: react.FunctionComponent<RadioGroupProps>;
+        getDefault: (f: any) => string;
+    };
+    ranking: {
+        component: react.FunctionComponent<RankProps>;
+        getDefault: (f: any) => any;
+    };
+    richTextfield: {
+        component: react.FunctionComponent<RichTextFieldProps>;
+        getDefault: (f: any) => any;
+    };
+    customfield: {
+        component: react.FunctionComponent<CustomFieldProps>;
+        getDefault: (f: any) => any;
+    };
+};
+type DynamicFieldType = keyof typeof FIELD_REGISTRY;
+type ControlProps<K extends DynamicFieldType> = ComponentProps<(typeof FIELD_REGISTRY)[K]['component']>;
+interface FieldTypeExtras {
+    textfield: {
+        strengthIndicator?: boolean;
+    };
+}
+type ExtrasFor<K> = K extends keyof FieldTypeExtras ? FieldTypeExtras[K] : unknown;
+type ControlField<K extends DynamicFieldType, TValues extends FieldValues = FieldValues> = BaseField<TValues> & {
+    fieldType: K;
+    defaultValue?: ControlProps<K> extends {
+        value?: infer V;
+    } ? V : unknown;
+} & ExtrasFor<K> & Partial<Omit<ControlProps<K>, 'value' | 'onChange' | 'name' | 'inputRef' | 'internalChange' | 'defaultValue'>>;
+type DynamicField<TValues extends FieldValues = FieldValues> = {
+    [K in DynamicFieldType]: ControlField<K, TValues>;
+}[DynamicFieldType];
+type HtmlField<TValues extends FieldValues = FieldValues> = Omit<BaseField<TValues>, 'name'> & {
+    name: string;
+    fieldType: 'html';
+    content: ReactElement;
+};
+type FieldTypes<TValues extends FieldValues = FieldValues> = DynamicField<TValues> | HtmlField<TValues>;
+type FieldType = FieldTypes['fieldType'];
+
+export { FIELD_REGISTRY };
+export type { DynamicField, DynamicFieldType, FieldType, FieldTypes, HtmlField };

package/dist/systems/WebCore/FormBuilder/fieldRegistry.js

@@ -0,0 +1 @@
+"use strict";var e=require("../AutocompleteField/AutocompleteField.js"),t=require("../Checkbox/Checkbox.js");require("../Checkbox/StyledCheckbox.js");var l=require("../CheckboxGroup/CheckboxGroup.js"),a=require("../CreatableAutocomplete/CreatableAutocomplete.js"),u=require("../CustomField/CustomField.js"),r=require("../Differential/Differential.js"),o=require("../Likert/Likert.js"),n=require("../NumberField/NumberField.js"),i=require("../RadioGroup/RadioGroup.js"),f=require("../Rank/Rank.js"),d=require("../RichTextField/RichTextField.js");require("../SelectItem/SelectItem.js");var s=require("../Select/Select.js"),c=require("../Slider/Slider.js"),p=require("../StarRating/StarRating.js"),m=require("../Switch/Switch.js"),g=require("../Textarea/Textarea.js");const h={textfield:{component:require("../TextField/TextField.js"),getDefault:e=>e.defaultValue??""},numberfield:{component:n.default,getDefault:e=>e.defaultValue??0},textarea:{component:g,getDefault:e=>e.defaultValue??""},creatableautocomplete:{component:a,getDefault:e=>e.defaultValue??""},select:{component:s,getDefault:e=>e.defaultValue??""},autocomplete:{component:e,getDefault:e=>e.defaultValue,adapt:(e,t)=>({onChange:(e,l)=>t.onChange(l)})},checkbox:{component:t,getDefault:e=>e.defaultValue??!1},checkboxGroup:{component:l,getDefault:e=>e.defaultValue??[]},switch:{component:m,getDefault:e=>e.defaultValue??!1,adapt:e=>({label:e.label})},slider:{component:c,getDefault:e=>Array.isArray(e.defaultValue)?e.defaultValue:e.defaultValue??e.min??0,adapt:(e,t)=>({onChange:(e,l)=>t.onChange(l)})},starRating:{component:p,getDefault:e=>e.defaultValue??0,adapt:(e,t)=>({onChange:(e,l)=>t.onChange(l)})},differential:{component:r,getDefault:e=>e.defaultValue??""},likert:{component:o,getDefault:e=>e.defaultValue??""},radioGroup:{component:i,getDefault:e=>e.defaultValue??""},ranking:{component:f,getDefault:e=>e.defaultValue?e.defaultValue.map(t=>e.options.find(e=>e.id===t)):e.options},richTextfield:{component:d,getDefault:e=>e.defaultValue??""},customfield:{component:u,getDefault:e=>e.defaultValue??""}},x=["fieldType","name","ref","label","labelProps","helperText","helpTextProps","content","styleOverrides","strengthIndicator","defaultValue","hidden"],D=e=>{if(e.noneOfThese)return!0;return(e.name||e.value||"").replace(/-/g,"_").includes("none_of_these")};exports.FIELD_REGISTRY=h,exports.extractNoneOfThese=e=>{if(!e.other?.enabled||!Array.isArray(e.options))return e;const t=e.options,l=t.findIndex(D);return-1===l?e:{...e,options:t.filter((e,t)=>t!==l),noneOfTheseOption:t[l]}},exports.getDefaultValues=e=>e.reduce((e,t)=>("html"!==t.fieldType&&(e[t.name]=h[t.fieldType].getDefault(t)),e),{}),exports.getFieldDefault=e=>"html"===e.fieldType?void 0:h[e.fieldType].getDefault(e),exports.getFieldDefinition=e=>h[e],exports.splitFieldProps=e=>{const t={};for(const l of Object.keys(e))x.includes(l)||(t[l]=e[l]);return t};

package/dist/systems/WebCore/FormBuilder/types.d.ts

@@ -0,0 +1,69 @@
+import { SxProps, Theme } from '@mui/material';
+import { Ref, ReactElement, ReactNode } from 'react';
+import { FieldValues, FieldPath, Resolver, SubmitHandler, FieldErrors, UseFormSetValue, UseFormGetFieldState, UseFormTrigger, UseFormWatch } from 'react-hook-form';
+import '../../../index.js';
+import '../Text/types.js';
+import { ZodType } from 'zod';
+import { FieldTypes } from './fieldRegistry.js';
+export { DynamicFieldType, FieldType, HtmlField } from './fieldRegistry.js';
+import { InputLabelProps } from '../InputLabel/InputLabel.js';
+import { InputLabelHelpProps } from '../InputLabelHelp/InputLabelHelp.js';
+
+interface BaseField<TValues extends FieldValues = FieldValues> {
+    name: FieldPath<TValues>;
+    id?: string;
+    ref?: Ref<HTMLElement>;
+    label?: string | ReactElement;
+    labelProps?: InputLabelProps;
+    helperText?: string | ReactNode;
+    helpTextProps?: InputLabelHelpProps;
+    hidden?: boolean;
+    disabled?: boolean;
+    styleOverrides?: {
+        sxInputWrapper?: SxProps<Theme>;
+        sxInputBase?: SxProps<Theme>;
+        sxInputStack?: SxProps<Theme>;
+    };
+}
+interface FormBuilderConfig<TValues extends FieldValues = FieldValues> {
+    fields: FieldTypes<TValues>[];
+    schema?: ZodType<TValues>;
+    resolver?: Resolver<TValues>;
+    autoComplete?: 'off';
+    mode?: 'onSubmit' | 'onBlur' | 'onChange';
+    reValidateMode?: 'onSubmit' | 'onBlur' | 'onChange';
+    formId?: string;
+    validateOnInit?: boolean;
+    disableInvalidSubmit?: boolean;
+    styleOverrides?: {
+        sxForm?: SxProps<Theme>;
+        sxButtons?: SxProps<Theme>;
+        sxStack?: SxProps<Theme>;
+    };
+}
+interface FormBuilderHandle<TValues extends FieldValues = FieldValues> {
+    submit: () => void;
+    reset: () => void;
+    values: () => TValues;
+    valid: () => boolean;
+    errors: () => FieldErrors<TValues>;
+    focus: (name: FieldPath<TValues>) => void;
+    setValue: UseFormSetValue<TValues>;
+    getFieldState: UseFormGetFieldState<TValues>;
+    trigger: UseFormTrigger<TValues>;
+    watch: UseFormWatch<TValues>;
+}
+interface FormBuilderProps<TValues extends FieldValues = FieldValues> {
+    formConfig: FormBuilderConfig<TValues>;
+    onSubmit?: SubmitHandler<TValues>;
+    onChange?: (values: TValues) => void;
+    submitButton?: ReactElement;
+    secondaryButton?: ReactElement;
+    /** @deprecated alias for `onSubmit`. */
+    onFormSubmit?: SubmitHandler<TValues>;
+    /** @deprecated alias for `onChange`. */
+    onFormChange?: (values: TValues) => void;
+}
+
+export { FieldTypes };
+export type { BaseField, FormBuilderConfig, FormBuilderHandle, FormBuilderProps };

package/dist/systems/WebCore/FormGenerator/FormGenerator.d.ts

@@ -1,5 +1,9 @@
 import { FormGeneratorProps } from './types.js';
 
+/**
+ * @deprecated Use `FormBuilder` instead — same config shape plus zod schema validation and
+ * per-field render isolation. FormGenerator will be removed in a future major version.
+ */
 declare const FormGenerator: FormGeneratorProps;
 
 export { FormGenerator as default };

package/dist/systems/WebCore/FormGenerator/types.d.ts

@@ -9,19 +9,19 @@ import { CreatableAutocompleteProps } from '../CreatableAutocomplete/CreatableAu
 import { CustomFieldProps } from '../CustomField/CustomField.js';
 import { DifferentialProps } from '../Differential/Differential.js';
 import '../Text/types.js';
-import { HtmlProps } from '../Html/Html.js';
-import { InputLabelProps } from '../InputLabel/InputLabel.js';
-import { InputLabelHelpProps } from '../InputLabelHelp/InputLabelHelp.js';
-import { LikertProps } from '../Likert/Likert.js';
-import { NumberFieldProps } from '../NumberField/types.js';
-import { RadioGroupProps } from '../RadioGroup/RadioGroup.js';
-import { RankProps } from '../Rank/types.js';
 import { RichTextFieldProps } from '../RichTextField/RichTextField.js';
-import { SliderProps } from '../Slider/Slider.js';
+import { RankProps } from '../Rank/types.js';
+import { RadioGroupProps } from '../RadioGroup/RadioGroup.js';
+import { LikertProps } from '../Likert/Likert.js';
 import { StarRatingProps } from '../StarRating/StarRating.js';
+import { SliderProps } from '../Slider/Slider.js';
 import { SwitchProps } from '../Switch/Switch.js';
 import { TextareaProps } from '../Textarea/Textarea.js';
+import { NumberFieldProps } from '../NumberField/types.js';
 import { TextFieldProps } from '../TextField/TextField.js';
+import { HtmlProps } from '../Html/Html.js';
+import { InputLabelProps } from '../InputLabel/InputLabel.js';
+import { InputLabelHelpProps } from '../InputLabelHelp/InputLabelHelp.js';
 
 /**
  * Form Generator Core Types

package/dist/systems/WebCore/InputLabelHelp/InputLabelHelp.d.ts

@@ -9,6 +9,8 @@ interface InputLabelHelpProps {
     disabled?: boolean;
     required?: boolean;
     paddingLeft?: string | number;
+    id?: string;
+    role?: string;
 }
 declare const InputLabelHelp: FunctionComponent<InputLabelHelpProps>;
 

package/dist/systems/WebCore/InputLabelHelp/InputLabelHelp.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/icons-material"),s=require("@mui/material"),a=require("../../BrandCore/Icon/Icon.js"),i=require("../InputLabelBase/InputLabelBase.js"),r=require("../utils/typography.util.js");module.exports=n=>{const{icon:l=null,state:o="default",disabled:d,showicon:u=!0,paddingLeft:c,...p}=n,x=s.useTheme();return e.jsxs(s.Box,{sx:{display:"inline-flex",alignItems:"center",paddingLeft:c,color:d?x.custom.palette.text.disabled:(()=>{switch(o){case"disabled":return x.custom.palette.text.disabled;case"positive":return x.custom.palette.text.positive;case"negative":return x.custom.palette.text.negative;default:return x.custom.palette.text.secondary}})(),"& svg":{marginRight:x.spacing(x.custom.margin.xs),width:a.iconSizeMap.xs,height:a.iconSizeMap.xs,color:"inherit"}},children:[(()=>{if(!u)return null;if(l)return l;switch(o){case"disabled":default:return e.jsx(s.Box,{sx:{height:20,display:"flex",alignItems:"center",alignSelf:"flex-start"},children:e.jsx(t.InfoOutlined,{})});case"positive":return e.jsx(s.Box,{sx:{height:20,display:"flex",alignItems:"center",alignSelf:"flex-start"},children:e.jsx(t.Check,{})});case"negative":return e.jsx(s.Box,{sx:{height:20,display:"flex",alignItems:"center",alignSelf:"flex-start"},children:e.jsx(t.ErrorOutlined,{})})}})(),e.jsx(i,{...p,disabled:d,sx:{fontSize:{xs:r.typographyVariantMap.sm.body.sm,sm:r.typographyVariantMap.sm.body.sm,md:r.typographyVariantMap.sm.body.sm,lg:r.typographyVariantMap.lg.body.sm,xl:r.typographyVariantMap.lg.body.sm}}})]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/icons-material"),i=require("@mui/material"),s=require("../../BrandCore/Icon/Icon.js"),a=require("../InputLabelBase/InputLabelBase.js"),r=require("../utils/typography.util.js");module.exports=l=>{const{icon:n=null,state:o="default",disabled:d,showicon:u=!0,paddingLeft:c,id:p,role:x,...g}=l,m=i.useTheme();return e.jsxs(i.Box,{id:p,role:x,sx:{display:"inline-flex",alignItems:"center",paddingLeft:c,color:d?m.custom.palette.text.disabled:(()=>{switch(o){case"disabled":return m.custom.palette.text.disabled;case"positive":return m.custom.palette.text.positive;case"negative":return m.custom.palette.text.negative;default:return m.custom.palette.text.secondary}})(),"& svg":{marginRight:m.spacing(m.custom.margin.xs),width:s.iconSizeMap.xs,height:s.iconSizeMap.xs,color:"inherit"}},children:[(()=>{if(!u)return null;if(n)return n;switch(o){case"disabled":default:return e.jsx(i.Box,{sx:{height:20,display:"flex",alignItems:"center",alignSelf:"flex-start"},children:e.jsx(t.InfoOutlined,{})});case"positive":return e.jsx(i.Box,{sx:{height:20,display:"flex",alignItems:"center",alignSelf:"flex-start"},children:e.jsx(t.Check,{})});case"negative":return e.jsx(i.Box,{sx:{height:20,display:"flex",alignItems:"center",alignSelf:"flex-start"},children:e.jsx(t.ErrorOutlined,{})})}})(),e.jsx(a,{...g,disabled:d,sx:{fontSize:{xs:r.typographyVariantMap.sm.body.sm,sm:r.typographyVariantMap.sm.body.sm,md:r.typographyVariantMap.sm.body.sm,lg:r.typographyVariantMap.lg.body.sm,xl:r.typographyVariantMap.lg.body.sm}}})]})};

package/dist/systems/WebCore/Select/types.d.ts

@@ -1,7 +1,8 @@
 import { SelectProps as SelectProps$1 } from '@mui/material';
-import { GenericSizeMap } from 'index';
+import '../../../index.js';
 import { ReactElement } from 'react';
 import { SelectOption, SelectItemProps } from '../SelectItem/types.js';
+import { GenericSizeMap } from '../../BrandCore/primitiveVariables.js';
 
 type InputSizing = Exclude<GenericSizeMap, 'none' | 'xxs' | 'xxl' | 'xxxl'>;
 type SelectProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@useloops/design-system",
-    "version": "1.4.720",
+    "version": "1.4.721",
     "description": "The official React based Loops design system",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",
@@ -221,6 +221,7 @@
         "@dnd-kit/utilities": "^3.2.2",
         "@gsap/react": "^2.1.2",
         "@hookform/error-message": "^2.0.1",
+        "@hookform/resolvers": "^5.4.0",
         "@lottiefiles/dotlottie-react": "^0.13.5",
         "@mui/lab": "^9.0.0-beta.4",
         "@number-flow/react": "^0.5.14",
@@ -251,7 +252,8 @@
         "react-truncate-list": "^1.0.5",
         "stylis": "^4.4.0",
         "stylis-plugin-rtl": "^2.1.1",
-        "yup": "^1.7.1"
+        "yup": "^1.7.1",
+        "zod": "^4.4.3"
     },
     "overrides": {
         "serialize-javascript": "7.0.5",