@form-eng/mui 1.0.0 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # @form-eng/mui
 
-Material UI (MUI) field components for [`@form-eng/core`](https://www.npmjs.com/package/@form-eng/core). Provides 13 editable and 6 read-only field types that plug into the core form engine.
+Material UI (MUI) field components for [`@form-eng/core`](https://www.npmjs.com/package/@form-eng/core). Provides 22 editable and 6 read-only field types that plug into the core form engine.
 
 ## Install
 
@@ -83,6 +83,15 @@ function App() {
 | `DocumentLinks` | `HookDocumentLinks` | `List` + `TextField` + `IconButton` | URL link CRUD |
 | `StatusDropdown` | `HookStatusDropdown` | `Select` with color dots | Dropdown with color status indicator |
 | `DynamicFragment` | `HookFragment` | Hidden input | Hidden field (form state only) |
+| `RadioGroup` | `HookRadioGroup` | `RadioGroup` + `FormControlLabel` | Single-select radio button group |
+| `CheckboxGroup` | `HookCheckboxGroup` | `FormGroup` + `Checkbox` | Multi-select checkbox group (value: `string[]`) |
+| `Rating` | `HookRating` | `Rating` | Star rating input (value: `number`; configurable `max`, `allowHalf`) |
+| `ColorPicker` | `HookColorPicker` | `<input type="color">` | Native color picker returning hex string |
+| `Autocomplete` | `HookAutocomplete` | `Autocomplete` | Searchable single-select with type-ahead |
+| `FileUpload` | `HookFileUpload` | `<input type="file">` + drag zone | File picker (single or multiple); validates size via `config.maxSizeMb` |
+| `DateRange` | `HookDateRange` | Two `TextField` (type=date) | Two date inputs (From / To); value: `{ start, end }` ISO strings |
+| `DateTime` | `HookDateTime` | `TextField` (type=datetime-local) | Combined date+time input; value: ISO datetime-local string |
+| `PhoneInput` | `HookPhoneInput` | `TextField` with mask | Phone input with inline masking (`us`, `international`, `raw` formats) |
 
 ### Read-Only Fields
 

package/dist/index.d.mts

@@ -64,6 +64,44 @@ interface IStatusDropdownProps {
 }
 declare const StatusDropdown: (props: IFieldProps<IStatusDropdownProps>) => react_jsx_runtime.JSX.Element;
 
+declare const RadioGroup: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+declare const CheckboxGroup: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+interface IRatingConfig {
+    max?: number;
+    allowHalf?: boolean;
+}
+declare const Rating: (props: IFieldProps<IRatingConfig>) => react_jsx_runtime.JSX.Element;
+
+declare const ColorPicker: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+declare const Autocomplete: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+interface IFileUploadConfig {
+    multiple?: boolean;
+    accept?: string;
+    maxSizeMb?: number;
+}
+declare const FileUpload: (props: IFieldProps<IFileUploadConfig>) => react_jsx_runtime.JSX.Element;
+
+interface IDateRangeConfig {
+    minDate?: string;
+    maxDate?: string;
+}
+declare const DateRange: (props: IFieldProps<IDateRangeConfig>) => react_jsx_runtime.JSX.Element;
+
+interface IDateTimeConfig {
+    minDateTime?: string;
+    maxDateTime?: string;
+}
+declare const DateTime: (props: IFieldProps<IDateTimeConfig>) => react_jsx_runtime.JSX.Element;
+
+interface IPhoneInputConfig {
+    format?: "us" | "international" | "raw";
+}
+declare const PhoneInput: (props: IFieldProps<IPhoneInputConfig>) => react_jsx_runtime.JSX.Element;
+
 interface IReadOnlyFieldProps {
     readonly value?: string;
     readonly fieldName?: string;
@@ -138,4 +176,4 @@ declare const DocumentLinksStrings: {
     save: string;
 };
 
-export { DateControl, DocumentLinks, DocumentLinksStrings, Dropdown, DynamicFragment, FieldClassName, FormLoading, GetFieldDataTestId, type IDocumentLink, type IReadOnlyFieldProps, MultiSelect, MultiSelectSearch, NumberField as Number, PopOutEditor, ReadOnly, ReadOnlyArray, ReadOnlyCumulativeNumber, ReadOnlyDateTime, ReadOnlyRichText, ReadOnlyText, ReadOnlyWithButton, SimpleDropdown, Slider, StatusDropdown, StatusMessage, Textbox, Toggle, createMuiFieldRegistry, formatDateTime };
+export { Autocomplete, CheckboxGroup, ColorPicker, DateControl, DateRange, DateTime, DocumentLinks, DocumentLinksStrings, Dropdown, DynamicFragment, FieldClassName, FileUpload, FormLoading, GetFieldDataTestId, type IDocumentLink, type IReadOnlyFieldProps, MultiSelect, MultiSelectSearch, NumberField as Number, PhoneInput, PopOutEditor, RadioGroup, Rating, ReadOnly, ReadOnlyArray, ReadOnlyCumulativeNumber, ReadOnlyDateTime, ReadOnlyRichText, ReadOnlyText, ReadOnlyWithButton, SimpleDropdown, Slider, StatusDropdown, StatusMessage, Textbox, Toggle, createMuiFieldRegistry, formatDateTime };

package/dist/index.d.ts

@@ -64,6 +64,44 @@ interface IStatusDropdownProps {
 }
 declare const StatusDropdown: (props: IFieldProps<IStatusDropdownProps>) => react_jsx_runtime.JSX.Element;
 
+declare const RadioGroup: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+declare const CheckboxGroup: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+interface IRatingConfig {
+    max?: number;
+    allowHalf?: boolean;
+}
+declare const Rating: (props: IFieldProps<IRatingConfig>) => react_jsx_runtime.JSX.Element;
+
+declare const ColorPicker: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+declare const Autocomplete: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+interface IFileUploadConfig {
+    multiple?: boolean;
+    accept?: string;
+    maxSizeMb?: number;
+}
+declare const FileUpload: (props: IFieldProps<IFileUploadConfig>) => react_jsx_runtime.JSX.Element;
+
+interface IDateRangeConfig {
+    minDate?: string;
+    maxDate?: string;
+}
+declare const DateRange: (props: IFieldProps<IDateRangeConfig>) => react_jsx_runtime.JSX.Element;
+
+interface IDateTimeConfig {
+    minDateTime?: string;
+    maxDateTime?: string;
+}
+declare const DateTime: (props: IFieldProps<IDateTimeConfig>) => react_jsx_runtime.JSX.Element;
+
+interface IPhoneInputConfig {
+    format?: "us" | "international" | "raw";
+}
+declare const PhoneInput: (props: IFieldProps<IPhoneInputConfig>) => react_jsx_runtime.JSX.Element;
+
 interface IReadOnlyFieldProps {
     readonly value?: string;
     readonly fieldName?: string;
@@ -138,4 +176,4 @@ declare const DocumentLinksStrings: {
     save: string;
 };
 
-export { DateControl, DocumentLinks, DocumentLinksStrings, Dropdown, DynamicFragment, FieldClassName, FormLoading, GetFieldDataTestId, type IDocumentLink, type IReadOnlyFieldProps, MultiSelect, MultiSelectSearch, NumberField as Number, PopOutEditor, ReadOnly, ReadOnlyArray, ReadOnlyCumulativeNumber, ReadOnlyDateTime, ReadOnlyRichText, ReadOnlyText, ReadOnlyWithButton, SimpleDropdown, Slider, StatusDropdown, StatusMessage, Textbox, Toggle, createMuiFieldRegistry, formatDateTime };
+export { Autocomplete, CheckboxGroup, ColorPicker, DateControl, DateRange, DateTime, DocumentLinks, DocumentLinksStrings, Dropdown, DynamicFragment, FieldClassName, FileUpload, FormLoading, GetFieldDataTestId, type IDocumentLink, type IReadOnlyFieldProps, MultiSelect, MultiSelectSearch, NumberField as Number, PhoneInput, PopOutEditor, RadioGroup, Rating, ReadOnly, ReadOnlyArray, ReadOnlyCumulativeNumber, ReadOnlyDateTime, ReadOnlyRichText, ReadOnlyText, ReadOnlyWithButton, SimpleDropdown, Slider, StatusDropdown, StatusMessage, Textbox, Toggle, createMuiFieldRegistry, formatDateTime };