@zealicsolutions/web-ui 1.0.30 → 1.0.31-beta.0

package/dist/cjs/molecules/BasicTextField/BasicTextField.d.ts

@@ -4,6 +4,8 @@ import { ConfigurationItemInfo } from 'containers';
 import { FieldValues, RegisterOptions } from 'react-hook-form';
 export interface BasicTextFieldProps extends MuiTextFieldProps {
     required?: boolean;
+    requiredErrorText?: string;
+    validationErrorText?: string;
     backgroundColor?: string;
     textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
     color?: string;
@@ -28,5 +30,6 @@ export interface BasicTextFieldProps extends MuiTextFieldProps {
     name: string;
     rules?: Omit<RegisterOptions<FieldValues, string>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
     sourceDataModelField?: string;
+    isDisplayOnly?: boolean;
 }
 export declare const BasicTextField: React.FC<BasicTextFieldProps>;

package/dist/cjs/molecules/BasicTextField/BasicTextField.stories.d.ts

@@ -1,4 +1,9 @@
 import { BasicTextFieldProps } from './BasicTextField';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, BasicTextFieldProps>;
+declare type StoryProps = BasicTextFieldProps & {
+    sourceDataModelFieldValue?: string;
+};
+export declare const EditableText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryProps>;
+export declare const PasswordMasked: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryProps>;
+export declare const DisplayOnly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryProps>;

package/dist/cjs/molecules/CurrencyInputtField/CurrencyInputField.d.ts

@@ -2,6 +2,9 @@ import React from 'react';
 import { ConfigurationItemInfo } from 'containers';
 export interface CurrencyInputFieldProps {
     required?: boolean;
+    requiredErrorText?: string;
+    validationErrorText?: string;
+    isDisplayOnly?: boolean;
     backgroundColor?: string;
     textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
     textColor?: string;
@@ -21,18 +24,8 @@ export interface CurrencyInputFieldProps {
     placeholderText?: string;
     configurationItemInfo?: ConfigurationItemInfo;
     name: string;
-    /**
-     * A string representing the precision step for the numeric input
-     * e.g. '1.0' or '0.05' or '0.001'
-     */
     numericPrecision?: string;
-    /**
-     * The currency symbol to display, e.g. '$', '£', '€'.
-     */
     currency?: string;
-    /**
-     * Whether to place the currency symbol on the left or right.
-     */
     placement?: 'left' | 'right';
     sourceDataModelField?: string;
 }

package/dist/cjs/molecules/CurrencyInputtField/CurrencyInputField.stories.d.ts

@@ -1,4 +1,9 @@
 import { CurrencyInputFieldProps } from './CurrencyInputField';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, CurrencyInputFieldProps>;
+export declare const Editable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, CurrencyInputFieldProps>;
+export declare const DisplayOnly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, CurrencyInputFieldProps & {
+    sourceDataModelFieldValue?: string | undefined;
+}>;
+export declare const WithValidationError: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, CurrencyInputFieldProps>;
+export declare const Standalone: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/molecules/DatePicker/DatePicker.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers';
-import { TypographyProps } from '@mui/material';
 import { IconRendererProps } from 'molecules/Icon';
 export interface DatePickerMoleculeProps extends MuiDatePickerProps {
     required?: boolean;
@@ -8,10 +7,10 @@ export interface DatePickerMoleculeProps extends MuiDatePickerProps {
     configurationItemInfo?: any;
     text: string;
     borderColor?: string;
-    fontSize?: TypographyProps['fontSize'];
-    fontFamily?: TypographyProps['fontFamily'];
-    fontWeight?: TypographyProps['fontWeight'];
-    textColor?: TypographyProps['color'];
+    fontSize?: string | number;
+    fontFamily?: string;
+    fontWeight?: string | number;
+    textColor?: string;
     iconColor?: IconRendererProps['color'];
     minDate?: string;
     maxDate?: string;
@@ -26,5 +25,16 @@ export interface DatePickerMoleculeProps extends MuiDatePickerProps {
     paddingBottom?: string;
     name: string;
     sourceDataModelField?: string;
+    /**
+     * If true, disables the actual picker input and just displays
+     * the date in read-only text form.
+     */
+    isDisplayOnly?: boolean;
+    /**
+     * Format to use when displaying date in "display only" mode
+     * or controlling the displayed text in the editable field.
+     * e.g. 'MM/dd/yyyy' or 'yyyy-MM-dd'
+     */
+    displayFormat?: string;
 }
 export declare const DatePickerMolecule: React.FC<DatePickerMoleculeProps>;

package/dist/cjs/molecules/DatePicker/DatePicker.stories.d.ts

@@ -2,3 +2,5 @@ import { DatePickerMoleculeProps } from './DatePicker';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, DatePickerMoleculeProps>;
+export declare const DisplayOnly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, DatePickerMoleculeProps>;
+export declare const CustomFormat: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, DatePickerMoleculeProps>;

package/dist/cjs/molecules/EmailInputField/EmailInputField.d.ts

@@ -1,16 +1,27 @@
 import React from 'react';
 import { ConfigurationItemInfo } from 'containers';
 export interface EmailInputFieldProps {
+    /** If true, show the email as text only (no editing). */
+    isDisplayOnly?: boolean;
+    /** If true, do required validation in RHF + show MUI asterisk. */
     required?: boolean;
+    requiredErrorText?: string;
+    validationErrorText?: string;
+    /** Basic label & placeholder */
+    text?: string;
+    placeholderText?: string;
+    /** If true, apply an email text mask in the editable field. */
+    masked?: boolean;
+    multiLine?: boolean;
+    /** Basic styling props */
     backgroundColor?: string;
-    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    borderColor?: string;
     color?: string;
     fontSize?: number | string;
     fontFamily?: string;
-    fontWeight?: 'normal' | 'bold';
-    masked?: boolean;
-    multiLine?: boolean;
-    borderColor?: string;
+    fontWeight?: 'normal' | 'bold' | number;
+    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    /** Spacing */
     marginLeft?: string;
     marginTop?: string;
     marginRight?: string;
@@ -19,10 +30,13 @@ export interface EmailInputFieldProps {
     paddingTop?: string;
     paddingRight?: string;
     paddingBottom?: string;
-    text?: string;
-    placeholderText?: string;
-    configurationItemInfo?: ConfigurationItemInfo;
     name: string;
     sourceDataModelField?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
 }
+/**
+ * Main EmailInputField:
+ * - display-only => <Typography />
+ * - editable => <TextField> (optionally masked)
+ */
 export declare const EmailInputField: React.FC<EmailInputFieldProps>;

package/dist/cjs/molecules/EmailInputField/EmailInputField.stories.d.ts

@@ -1,4 +1,9 @@
 import { EmailInputFieldProps } from './EmailInputField';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, EmailInputFieldProps>;
+declare type StoryProps = EmailInputFieldProps & {
+    sourceDataModelFieldValue?: string;
+};
+export declare const Editable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryProps>;
+export declare const DisplayOnly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryProps>;
+export declare const Standalone: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/molecules/NumericInputField/NumericInputField.d.ts

@@ -1,14 +1,28 @@
 import React from 'react';
 import { ConfigurationItemInfo } from 'containers';
 export interface NumericInputFieldProps {
+    /** If true, the field shows as text-only (no editing). */
+    isDisplayOnly?: boolean;
+    /** If true, we do required validation in form + show MUI asterisk. */
     required?: boolean;
+    requiredErrorText?: string;
+    validationErrorText?: string;
+    /** Label text for the field */
+    text?: string;
+    placeholderText?: string;
     backgroundColor?: string;
-    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    borderColor?: string;
     textColor?: string;
     fontSize?: number | string;
     fontFamily?: string;
-    fontWeight?: 'normal' | 'bold';
-    borderColor?: string;
+    fontWeight?: 'normal' | 'bold' | number;
+    /** If false => we disallow negative input. */
+    allowNegative?: boolean;
+    /** e.g. "0.01" => step=0.01, 2 decimals */
+    numericPrecision?: string;
+    name: string;
+    sourceDataModelField?: string;
+    /** Basic spacing/styling */
     marginLeft?: string;
     marginTop?: string;
     marginRight?: string;
@@ -17,16 +31,12 @@ export interface NumericInputFieldProps {
     paddingTop?: string;
     paddingRight?: string;
     paddingBottom?: string;
-    text?: string;
-    placeholderText?: string;
     configurationItemInfo?: ConfigurationItemInfo;
-    name: string;
-    allowNegative: boolean;
-    /**
-     * A string representing the precision step for the numeric input
-     * e.g. '1.0' or '0.05' or '0.001'
-     */
-    numericPrecision?: string;
-    sourceDataModelField?: string;
 }
+/**
+ * Main NumericInputField component
+ *
+ * - Display-only -> <Typography>
+ * - Editable -> <TextField> (react-hook-form or local state)
+ */
 export declare const NumericInputField: React.FC<NumericInputFieldProps>;

package/dist/cjs/molecules/NumericInputField/NumericInputField.stories.d.ts

@@ -1,4 +1,10 @@
 import { NumericInputFieldProps } from './NumericInputField';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputFieldProps>;
+declare type StoryProps = NumericInputFieldProps & {
+    sourceDataModelFieldValue?: string;
+};
+export declare const EditableRequired: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryProps>;
+export declare const DisplayOnly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryProps>;
+export declare const AllowNegative: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryProps>;
+export declare const Standalone: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/molecules/PhoneNumberInputField/PhoneNumberInputField.d.ts

@@ -1,16 +1,34 @@
 import React from 'react';
 import { ConfigurationItemInfo } from 'containers';
+/**
+ * formatPhoneDisplay(value):
+ * Takes a raw string (possibly containing digits and non-digits)
+ * and returns a string shaped like + (XXX) XXX-XXXX,
+ * filling placeholders sequentially from `phoneNumberMask`.
+ *
+ * If there are fewer than 10 digits, it will show partial underscores
+ * for missing digits by default.
+ * You can tweak the code if you prefer to truncate or show partial input.
+ */
+export declare function formatPhoneDisplay(value: string): string;
 export interface PhoneNumberInputFieldProps {
+    /** If true, we skip rendering the textfield and just show a text display. */
+    isDisplayOnly?: boolean;
+    /** If true, we do required validation in react-hook-form + show asterisk in MUI FormControl. */
     required?: boolean;
+    requiredErrorText?: string;
+    validationErrorText?: string;
+    text?: string;
+    placeholderText?: string;
+    masked?: boolean;
+    /** Basic style props */
     backgroundColor?: string;
-    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
-    color?: string;
+    borderColor?: string;
+    textColor?: string;
     fontSize?: number | string;
     fontFamily?: string;
-    fontWeight?: 'normal' | 'bold';
-    masked?: boolean;
-    multiLine?: boolean;
-    borderColor?: string;
+    fontWeight?: 'normal' | 'bold' | number;
+    /** Spacing */
     marginLeft?: string;
     marginTop?: string;
     marginRight?: string;
@@ -19,10 +37,13 @@ export interface PhoneNumberInputFieldProps {
     paddingTop?: string;
     paddingRight?: string;
     paddingBottom?: string;
-    text?: string;
-    placeholderText?: string;
-    configurationItemInfo?: ConfigurationItemInfo;
     name: string;
     sourceDataModelField?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
 }
+/**
+ * Main PhoneNumberInputField:
+ *  - display-only -> <Typography>
+ *  - editable -> <TextField> with optional mask
+ */
 export declare const PhoneNumberInputField: React.FC<PhoneNumberInputFieldProps>;

package/dist/cjs/molecules/PhoneNumberInputField/PhoneNumberInputField.stories.d.ts

@@ -1,4 +1,10 @@
 import { PhoneNumberInputFieldProps } from './PhoneNumberInputField';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PhoneNumberInputFieldProps>;
+declare type StoryProps = PhoneNumberInputFieldProps & {
+    sourceDataModelFieldValue?: string;
+};
+/** Editable scenario with required validation */
+export declare const EditableRequired: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryProps>;
+/** Display-only variant reading from stateConfig */
+export declare const DisplayOnly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryProps>;

package/dist/cjs/molecules/Rating/Rating.d.ts

@@ -1,19 +1,30 @@
 import React from 'react';
-export interface RatingMoleculeProps {
+import { RatingProps } from '@mui/material';
+export interface RatingMoleculeProps extends Omit<RatingProps, 'onChange'> {
+    /** Label text displayed above or beside the rating */
     text: string;
+    /** Name used for react-hook-form registration */
     name: string;
+    /** If true, the user can’t change the rating (renders read-only) */
+    isDisplayOnly?: boolean;
+    /** If true, we show an asterisk and require a non-null rating */
+    required?: boolean;
+    /** Custom error text if `required` is not satisfied */
+    requiredErrorText?: string;
+    /** If some other validation fails, show this text */
+    validationErrorText?: string;
+    /** If true, rating icons will show real-time integer value on hover or selection */
+    hoverFeedback?: boolean;
+    /** For hooking up with state config if you store an initial rating there */
+    sourceDataModelField?: string;
+    /** Some style props for customizing layout/appearance */
     textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
     color?: string;
     textColor?: string;
-    selectSize?: string;
     selectColor?: string;
     fontSize?: number | string;
     fontFamily?: string;
-    fontWeight?: 'normal' | 'bold';
-    placement?: 'right' | 'left';
-    ratingPrecision?: number;
-    maxValue?: number;
-    hoverFeedback?: boolean;
+    fontWeight?: 'normal' | 'bold' | number;
     marginLeft?: string;
     marginTop?: string;
     marginRight?: string;
@@ -22,7 +33,14 @@ export interface RatingMoleculeProps {
     paddingTop?: string;
     paddingRight?: string;
     paddingBottom?: string;
+    /** For left or right placement of the hover feedback text */
+    placement?: 'right' | 'left';
+    /** The config item for design-time or telemetry */
     configurationItemInfo?: Record<string, unknown>;
+    /** Disables rating input in editable mode (MUI prop) */
     disabled?: boolean;
+    /** If using react-hook-form, we can track field errors.  */
+    maxValue?: number;
+    ratingPrecision?: number;
 }
 export declare const RatingMolecule: React.FC<RatingMoleculeProps>;

package/dist/cjs/molecules/Rating/Rating.stories.d.ts

@@ -1,4 +1,10 @@
 import { RatingMoleculeProps } from './Rating';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, RatingMoleculeProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, RatingMoleculeProps>;
+/** 1) Editable rating with validation */
+export declare const Editable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, RatingMoleculeProps>;
+/** 2) Display-only rating (read only) */
+export declare const DisplayOnly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, RatingMoleculeProps>;
+/** 3) Disabled rating input */
+export declare const Disabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, RatingMoleculeProps>;
+export declare const Standalone: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, RatingMoleculeProps>;

package/dist/cjs/molecules/Select/Select.d.ts

@@ -1,17 +1,29 @@
 import React from 'react';
 import { TypographyProps } from '@mui/material';
 import { ConfigurationItemInfo } from 'containers';
+export interface SelectMoleculeOption {
+    id: string;
+    value: string;
+}
 export interface SelectMoleculeProps {
+    /** Label text (visible above or inside the select) */
     text: string;
-    options: {
-        id: string;
-        value: string;
-    }[];
+    /** Dropdown options. Each has { id, value } or you can supply string[] */
+    options: SelectMoleculeOption[] | string[];
+    /** For a placeholder, you might use the first item or do a custom approach */
     placeholderText?: string;
-    fontSize?: number | string;
+    /** If true, the field is required in form validation */
     required?: boolean;
+    /** Use this text if required == true and no value selected */
+    requiredErrorText?: string;
+    /** Use this text if user fails some extra validation pattern */
+    validationErrorText?: string;
+    /** If true, show a text label instead of an interactive dropdown */
+    isDisplayOnly?: boolean;
+    /** CSS style props */
+    fontSize?: number | string;
     fontFamily?: TypographyProps['fontFamily'];
-    fontWeight?: 'normal' | 'bold';
+    fontWeight?: 'normal' | 'bold' | number;
     textColor?: string;
     textAlign?: TypographyProps['textAlign'];
     borderColor?: string;
@@ -25,8 +37,11 @@ export interface SelectMoleculeProps {
     paddingTop?: string;
     paddingRight?: string;
     paddingBottom?: string;
+    /** Additional config from system (e.g. for selection in config mode) */
     configurationItemInfo?: ConfigurationItemInfo;
+    /** The name of the field in react-hook-form */
     name: string;
+    /** The data field in global stateConfig to populate/initialize value */
     sourceDataModelField?: string;
 }
 export declare const SelectMolecule: React.FC<SelectMoleculeProps>;

package/dist/cjs/molecules/Select/Select.stories.d.ts

@@ -1,5 +1,6 @@
 import { SelectMoleculeProps } from './Select';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const Controlled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SelectMoleculeProps>;
-export declare const Uncontrolled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SelectMoleculeProps>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SelectMoleculeProps>;
+export declare const DisplayOnly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SelectMoleculeProps>;
+export declare const WithCustomValidation: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SelectMoleculeProps>;

package/dist/cjs/molecules/Slider/Slider.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
 import { SliderProps } from '@mui/material';
 import { ConfigurationItemInfo } from 'containers';
-export declare type SliderMoleculeProps = SliderProps & {
+export interface SliderMoleculeProps extends Omit<SliderProps, 'onChange'> {
+    /** If true, the slider is displayed disabled + text showing the value. */
+    isDisplayOnly?: boolean;
+    /** If true, rely on FormControl to show a required asterisk. */
     required?: boolean;
-    text: string;
+    requiredErrorText?: string;
+    validationErrorText?: string;
+    text?: string;
     startIcon?: string;
     endIcon?: string;
     borderColor?: string;
@@ -13,17 +18,17 @@ export declare type SliderMoleculeProps = SliderProps & {
     textColor?: string;
     fontSize?: number | string;
     fontFamily?: string;
-    fontWeight?: 'normal' | 'bold';
-    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
-    placement?: 'left' | 'right' | 'top' | 'bottom';
+    fontWeight?: 'normal' | 'bold' | number;
+    valueFormat?: string;
+    valueDisplay?: 'on' | 'off' | 'auto';
     iconSize?: string;
     selectColor?: string;
     iconColor?: string;
     minValue?: number;
     maxValue?: number;
-    valueFormat?: string;
-    valueDisplay?: 'on' | 'off' | 'auto';
     step?: number;
+    /** label's placement relative to the slider+icons */
+    labelPlacement?: 'top' | 'bottom';
     marginLeft?: string;
     marginTop?: string;
     marginRight?: string;
@@ -33,7 +38,11 @@ export declare type SliderMoleculeProps = SliderProps & {
     paddingRight?: string;
     paddingBottom?: string;
     configurationItemInfo?: ConfigurationItemInfo;
+    /** For hooking up with react-hook-form */
     name?: string;
     sourceDataModelField?: string;
-};
+}
+/**
+ * SliderMolecule
+ */
 export declare const SliderMolecule: React.FC<SliderMoleculeProps>;

package/dist/cjs/molecules/Slider/Slider.stories.d.ts

@@ -1,4 +1,10 @@
 import { SliderMoleculeProps } from './Slider';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, SliderMoleculeProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SliderMoleculeProps>;
+/** Editable with required validation */
+export declare const EditableRequired: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SliderMoleculeProps>;
+/** Display-only mode (slider is disabled, text shows numeric value) */
+export declare const DisplayOnly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SliderMoleculeProps>;
+/** Vertical usage */
+export declare const VerticalSlider: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SliderMoleculeProps>;
+export declare const Standalone: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SliderMoleculeProps>;

package/dist/cjs/molecules/Switch/Switch.d.ts

@@ -1,25 +1,21 @@
 import React from 'react';
 import { SwitchProps } from '@mui/material';
 import { ConfigurationItemInfo } from 'containers';
-/**
- * SwitchMolecule Component:
- * A reusable switch component with customizable labels and styles.
- */
-export interface SwitchMoleculeProps extends SwitchProps {
+export interface SwitchMoleculeProps extends Omit<SwitchProps, 'onChange'> {
+    /** If true, switch is shown but disabled, with a text next to it that indicates ON/OFF. */
+    isDisplayOnly?: boolean;
+    /** If true, we rely on MUI FormControl to show the required asterisk. */
     required?: boolean;
-    moleculeId?: string;
-    configurationItemInfo?: ConfigurationItemInfo;
+    requiredErrorText?: string;
+    validationErrorText?: string;
     text?: string;
-    textAlign?: 'left' | 'center' | 'right' | 'justify';
-    fontSize?: number | string;
-    fontFamily?: string;
-    fontWeight?: 'normal' | 'bold';
-    placement?: 'left' | 'right' | 'top' | 'bottom';
-    selectColor?: string;
-    color?: string;
-    colorDisabled?: string;
-    textColor?: string;
-    size?: 'small' | 'medium';
+    thumbColor?: string;
+    thumbCheckedColor?: string;
+    trackColor?: string;
+    disabledThumbColor?: string;
+    /** MUI FormControl label placement with a real label. We'll show the label above by default. */
+    labelPlacement?: 'top' | 'bottom';
+    /** Additional MUI styling props if needed */
     marginLeft?: string;
     marginTop?: string;
     marginRight?: string;
@@ -28,8 +24,9 @@ export interface SwitchMoleculeProps extends SwitchProps {
     paddingTop?: string;
     paddingRight?: string;
     paddingBottom?: string;
-    borderColor?: string;
+    /** For hooking up with react-hook-form */
     name: string;
     sourceDataModelField?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
 }
 export declare const SwitchMolecule: React.FC<SwitchMoleculeProps>;

package/dist/cjs/molecules/Switch/Switch.stories.d.ts

@@ -1,4 +1,10 @@
 import { SwitchMoleculeProps } from './Switch';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SwitchMoleculeProps>;
+/** Editable with required */
+export declare const EditableRequired: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SwitchMoleculeProps>;
+/** Display-only variant (shows a disabled switch + ON/OFF text) */
+export declare const DisplayOnly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SwitchMoleculeProps>;
+/** Disabled but still editable? (In effect, can't toggle) */
+export declare const Disabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SwitchMoleculeProps>;
+export declare const Standalone: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SwitchMoleculeProps>;

package/dist/esm/_virtual/index6.js

@@ -1,2 +1,2 @@
-var r={exports:{}};export{r};
+var p={exports:{}};export{p};
 //# sourceMappingURL=index6.js.map

package/dist/esm/_virtual/index7.js

@@ -1,2 +1,2 @@
-var p={exports:{}};export{p};
+var r={exports:{}};export{r};
 //# sourceMappingURL=index7.js.map