@zealicsolutions/web-ui 0.3.1 → 0.3.2

package/dist/cjs/src/atoms/RadioButtons/RadioButtons.d.ts

@@ -1,37 +1,56 @@
 /// <reference types="react" />
+import { RadioGroup } from '@mui/material';
+import { RefCallBack } from 'react-hook-form/dist/types';
 import { SizesTypes, ThemeColors } from 'theme';
-import { StylesType } from 'typescript';
-export declare type RadioButtonInternalConfigProps = {
+import type { Callback, OverrideStyles, StyledTransientProps, StylesType } from 'typescript';
+import { SelectOption } from '../Select/Select';
+export declare type RadioButtonInternalConfigProps = Partial<{
     selectedRadioOptionBackgroundColor: ThemeColors | string;
     selectedRadioOptionIndicatorColor: ThemeColors | string;
     buttonPadding: number;
     textPadding: number;
     styles: StylesType;
     wrapperStyles: StylesType;
-    buttonOptionSpacing?: SizesTypes;
-};
-export declare type RadioButtonType<T extends string = string> = {
-    id: T;
-    label?: string;
-    error?: boolean;
-    disabled?: boolean;
-    isRichText?: boolean;
-};
+    buttonOptionSpacing: SizesTypes;
+    radioGroupWrapperStyles: StylesType;
+}>;
 export declare type RadioButtonsProps<T extends string> = Partial<{
-    isEditMode: boolean;
-    onChange: (value: T) => void;
+    ref: RefCallBack;
+    name: string;
     value: T;
+    options: SelectOption[];
+    onBlur: Callback;
+    onChange: (value: T) => void;
     isRow: boolean;
-    items: RadioButtonType<T>[];
-    name: string;
+    isError: boolean;
+    disabled: boolean;
+    isEditMode: boolean;
+    isRichText: boolean;
     internalConfig: RadioButtonInternalConfigProps;
 }>;
-export declare const RadioButtons: <T extends string>({ value, items, isRow, isEditMode, onChange, name, internalConfig, }: Partial<{
-    isEditMode: boolean;
-    onChange: (value: T) => void;
+export declare const RadioButtons: <T extends string>({ ref, name, value, options, onBlur, onChange, isRow, isError, disabled, isEditMode, isRichText, internalConfig, }: Partial<{
+    ref: RefCallBack;
+    name: string;
     value: T;
+    options: SelectOption[];
+    onBlur: Callback;
+    onChange: (value: T) => void;
     isRow: boolean;
-    items: RadioButtonType<T>[];
-    name: string;
-    internalConfig: RadioButtonInternalConfigProps;
+    isError: boolean;
+    disabled: boolean;
+    isEditMode: boolean;
+    isRichText: boolean;
+    internalConfig: Partial<{
+        selectedRadioOptionBackgroundColor: ThemeColors | string;
+        selectedRadioOptionIndicatorColor: ThemeColors | string;
+        buttonPadding: number;
+        textPadding: number;
+        styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        buttonOptionSpacing: SizesTypes;
+        radioGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+    }>;
 }>) => JSX.Element;
+export declare const RadioGroupWrapper: import("styled-components").StyledComponent<typeof RadioGroup, import("styled-components").DefaultTheme, StyledTransientProps<{
+    isRow: boolean;
+}> & OverrideStyles, never>;

package/dist/cjs/src/atoms/RadioButtons/RadioButtons.stories.d.ts

@@ -1,17 +1,31 @@
 /// <reference types="react" />
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 import { RadioButtons as RadioButtonsComponent } from './RadioButtons';
 declare const _default: {
     title: string;
-    component: <T extends string>({ value, items, isRow, isEditMode, onChange, name, internalConfig, }: Partial<{
-        isEditMode: boolean;
-        onChange: (value: T) => void;
+    component: <T extends string>({ ref, name, value, options, onBlur, onChange, isRow, isError, disabled, isEditMode, isRichText, internalConfig, }: Partial<{
+        ref: import("react-hook-form").RefCallBack;
+        name: string;
         value: T;
+        options: import("..").SelectOption[];
+        onBlur: import("../../typescript").Callback;
+        onChange: (value: T) => void;
         isRow: boolean;
-        items: import("./RadioButtons").RadioButtonType<T>[];
-        name: string;
-        internalConfig: import("./RadioButtons").RadioButtonInternalConfigProps;
+        isError: boolean;
+        disabled: boolean;
+        isEditMode: boolean;
+        isRichText: boolean;
+        internalConfig: Partial<{
+            selectedRadioOptionBackgroundColor: string;
+            selectedRadioOptionIndicatorColor: string;
+            buttonPadding: number;
+            textPadding: number;
+            styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            buttonOptionSpacing: import("theme").SizesTypes;
+            radioGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        }>;
     }>) => JSX.Element;
 };
 export default _default;
-export declare const RadioButtons: ComponentStory<typeof RadioButtonsComponent>;
+export declare const RadioButtons: StoryFn<typeof RadioButtonsComponent>;

package/dist/cjs/src/atoms/RadioButtons/RadioOption.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
-import { RadioButtonInternalConfigProps, RadioButtonType } from 'atoms';
+import { RadioButtonInternalConfigProps, SelectOption } from 'atoms';
 declare type RadioOptionProps = {
-    item: RadioButtonType;
+    option: SelectOption;
+    isError?: boolean;
+    disabled?: boolean;
     isEditMode?: boolean;
+    isRichText?: boolean;
     internalConfig?: RadioButtonInternalConfigProps;
 };
-export declare const RadioOption: ({ item, internalConfig, isEditMode }: RadioOptionProps) => JSX.Element;
+export declare const RadioOption: ({ option, isError, disabled, isEditMode, isRichText, internalConfig, }: RadioOptionProps) => JSX.Element;
 export {};

package/dist/cjs/src/atoms/RadioButtons/helpers.d.ts

@@ -1,9 +1,15 @@
-import { RadioButtonInternalConfigProps, RadioButtonType } from 'atoms';
-import { StylesType } from 'typescript';
+import { RadioButtonInternalConfigProps } from 'atoms';
+import type { StylesType } from 'typescript';
 declare type RadioOptionStylesConfig = {
     textStyles: StylesType;
+    groupWrapperStyles: StylesType;
     radioIconWrapperStyles: StylesType;
     radioLabelWrapperStyles: StylesType;
 };
-export declare const getRadioOptionStyles: (item: RadioButtonType, internalConfig?: RadioButtonInternalConfigProps) => RadioOptionStylesConfig;
+declare type GetRadioOptionStylesProps = Partial<{
+    isError: boolean;
+    disabled: boolean;
+    internalConfig: RadioButtonInternalConfigProps;
+}>;
+export declare const getRadioOptionStyles: ({ isError, disabled, internalConfig, }: GetRadioOptionStylesProps) => RadioOptionStylesConfig;
 export {};

package/dist/cjs/src/atoms/RadioButtons/styles.d.ts

@@ -1,9 +1,9 @@
 import { FormControlLabel, Radio } from '@mui/material';
-import { OverrideStyles } from 'typescript';
-export declare const RadioLabelWrapper: import("styled-components").StyledComponent<typeof FormControlLabel, import("styled-components").DefaultTheme, {
-    error: boolean;
-} & OverrideStyles, never>;
-export declare const RadioIconWrapper: import("styled-components").StyledComponent<typeof Radio, import("styled-components").DefaultTheme, {
+import type { OverrideStyles, StyledTransientProps } from 'typescript';
+export declare const RadioLabelWrapper: import("styled-components").StyledComponent<typeof FormControlLabel, import("styled-components").DefaultTheme, StyledTransientProps<{
+    isError?: boolean | undefined;
+}> & OverrideStyles, never>;
+export declare const RadioIconWrapper: import("styled-components").StyledComponent<typeof Radio, import("styled-components").DefaultTheme, StyledTransientProps<{
     disabled: boolean;
-    error: boolean;
-} & OverrideStyles, never>;
+    isError?: boolean | undefined;
+}> & OverrideStyles, never>;

package/dist/cjs/src/atoms/Select/Select.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { ThemeColors } from 'theme';
-import { StylesType } from 'typescript';
+import type { Callback, StylesType } from 'typescript';
+import { RefCallBack } from 'react-hook-form/dist/types';
 export declare type SelectOption = {
     id: string;
     label: string;
@@ -15,16 +16,18 @@ export declare type SelectInternalConfigurationOptions = {
     wrapperStyles: StylesType;
     styles: StylesType;
 };
-export declare type SelectProps = {
-    value?: string;
-    optionsPresentation?: boolean;
-    onChange?: (value: string) => void;
-    placeholder?: string;
-    disabled?: boolean;
-    options?: SelectOption[];
-    isError?: boolean;
-    isEditMode?: boolean;
-    selectInternalConfig?: SelectInternalConfigurationOptions;
-    isRichText?: boolean;
-};
-export declare const Select: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;
+export declare type SelectProps = Partial<{
+    ref: RefCallBack;
+    onBlur: Callback;
+    value: string;
+    optionsPresentation: boolean;
+    onChange: (value: string) => void;
+    placeholder: string;
+    disabled: boolean;
+    options: SelectOption[];
+    isError: boolean;
+    isEditMode: boolean;
+    selectInternalConfig: SelectInternalConfigurationOptions;
+    isRichText: boolean;
+}>;
+export declare const Select: ({ ref, onBlur, onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;

package/dist/cjs/src/atoms/Select/Select.stories.d.ts

@@ -3,7 +3,20 @@ import { StoryFn } from '@storybook/react';
 import { SelectProps } from './Select';
 declare const _default: {
     title: string;
-    component: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;
+    component: ({ ref, onBlur, onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: Partial<{
+        ref: import("react-hook-form").RefCallBack;
+        onBlur: import("../../typescript").Callback;
+        value: string;
+        optionsPresentation: boolean;
+        onChange: (value: string) => void;
+        placeholder: string;
+        disabled: boolean;
+        options: import("./Select").SelectOption[];
+        isError: boolean;
+        isEditMode: boolean;
+        selectInternalConfig: import("./Select").SelectInternalConfigurationOptions;
+        isRichText: boolean;
+    }>) => JSX.Element;
 };
 export default _default;
 export declare const Select: StoryFn<SelectProps>;

package/dist/cjs/src/molecules/CheckboxField/CheckboxGroup.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
+import { RefCallBack } from 'react-hook-form/dist/types';
+import type { Callback } from 'typescript';
 import { CheckboxesProps } from './CheckboxField';
 export declare type CheckboxGroupProps = Partial<{
+    ref: RefCallBack;
+    onBlur: Callback;
     onChange: (checkedIds: string[]) => void;
     checkboxesProps: CheckboxesProps;
 }>;
-export declare const CheckboxGroup: ({ onChange, checkboxesProps }: CheckboxGroupProps) => JSX.Element;
+export declare const CheckboxGroup: ({ ref, onBlur, onChange, checkboxesProps }: CheckboxGroupProps) => JSX.Element;

package/dist/cjs/src/molecules/RadioButtonField/RadioButtonField.d.ts

@@ -1,35 +1,60 @@
 /// <reference types="react" />
-import { RadioButtonsProps } from 'atoms';
+import { RadioButtonInternalConfigProps, RadioButtonsProps } from 'atoms';
 import { Control, ControllerProps } from 'react-hook-form/dist/types';
-import { CSSProperties } from 'styled-components';
+import type { StylesType } from 'typescript';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
 export declare type RadioButtonFieldProps<T extends string> = Partial<{
     name: string;
-    control: Control<any>;
     rules: ControllerProps['rules'];
-    required: boolean;
+    styles: StylesType;
+    control: Control<any>;
     optional: boolean;
+    required: boolean;
+    labelsProps: FieldLabelsProps;
     defaultValue: string;
-    styles: CSSProperties;
     radioButtonsProps: RadioButtonsProps<T>;
-    labelsProps: FieldLabelsProps;
+    internalConfig: RadioButtonInternalConfigProps;
 }>;
-export declare const RadioButtonField: <T extends string>({ control, name, radioButtonsProps, styles, labelsProps, defaultValue, optional, required, rules, }: Partial<{
+export declare const RadioButtonField: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, }: Partial<{
     name: string;
-    control: Control<any>;
     rules: ControllerProps['rules'];
-    required: boolean;
+    styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+    control: Control<any>;
     optional: boolean;
+    required: boolean;
+    labelsProps: FieldLabelsProps;
     defaultValue: string;
-    styles: CSSProperties;
     radioButtonsProps: Partial<{
-        isEditMode: boolean;
-        onChange: (value: T) => void;
+        ref: import("react-hook-form").RefCallBack;
+        name: string;
         value: T;
+        options: import("atoms").SelectOption[];
+        onBlur: import("typescript").Callback;
+        onChange: (value: T) => void;
         isRow: boolean;
-        items: import("atoms").RadioButtonType<T>[];
-        name: string;
-        internalConfig: import("atoms").RadioButtonInternalConfigProps;
+        isError: boolean;
+        disabled: boolean;
+        isEditMode: boolean;
+        isRichText: boolean;
+        internalConfig: Partial<{
+            selectedRadioOptionBackgroundColor: string;
+            selectedRadioOptionIndicatorColor: string;
+            buttonPadding: number;
+            textPadding: number;
+            styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            buttonOptionSpacing: import("../..").SizesTypes;
+            radioGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        }>;
+    }>;
+    internalConfig: Partial<{
+        selectedRadioOptionBackgroundColor: string;
+        selectedRadioOptionIndicatorColor: string;
+        buttonPadding: number;
+        textPadding: number;
+        styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        buttonOptionSpacing: import("../..").SizesTypes;
+        radioGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
     }>;
-    labelsProps: FieldLabelsProps;
 }>) => JSX.Element;

package/dist/cjs/src/molecules/RadioButtonField/RadioButtonField.stories.d.ts

@@ -3,24 +3,48 @@ import type { ComponentStory } from '@storybook/react';
 import { RadioButtonField as RadioButtonFieldComponent } from './RadioButtonField';
 declare const _default: {
     title: string;
-    component: <T extends string>({ control, name, radioButtonsProps, styles, labelsProps, defaultValue, optional, required, rules, }: Partial<{
+    component: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, }: Partial<{
         name: string;
-        control: import("react-hook-form").Control<any, any>;
         rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
-        required: boolean;
+        styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        control: import("react-hook-form").Control<any, any>;
         optional: boolean;
+        required: boolean;
+        labelsProps: import("..").FieldLabelsProps;
         defaultValue: string;
-        styles: import("styled-components").CSSProperties;
         radioButtonsProps: Partial<{
-            isEditMode: boolean;
-            onChange: (value: T) => void;
+            ref: import("react-hook-form").RefCallBack;
+            name: string;
             value: T;
+            options: import("../..").SelectOption[];
+            onBlur: import("typescript").Callback;
+            onChange: (value: T) => void;
             isRow: boolean;
-            items: import("../..").RadioButtonType<T>[];
-            name: string;
-            internalConfig: import("../..").RadioButtonInternalConfigProps;
+            isError: boolean;
+            disabled: boolean;
+            isEditMode: boolean;
+            isRichText: boolean;
+            internalConfig: Partial<{
+                selectedRadioOptionBackgroundColor: string;
+                selectedRadioOptionIndicatorColor: string;
+                buttonPadding: number;
+                textPadding: number;
+                styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+                wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+                buttonOptionSpacing: import("theme").SizesTypes;
+                radioGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            }>;
+        }>;
+        internalConfig: Partial<{
+            selectedRadioOptionBackgroundColor: string;
+            selectedRadioOptionIndicatorColor: string;
+            buttonPadding: number;
+            textPadding: number;
+            styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            buttonOptionSpacing: import("theme").SizesTypes;
+            radioGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
         }>;
-        labelsProps: import("..").FieldLabelsProps;
     }>) => JSX.Element;
 };
 export default _default;

package/dist/cjs/src/molecules/SelectField/SelectField.stories.d.ts

@@ -4,7 +4,20 @@ import { SelectFieldProps } from './SelectField';
 declare const _default: {
     title: string;
     component: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, }: Partial<{
-        selectProps: import("../..").SelectProps;
+        selectProps: Partial<{
+            ref: import("react-hook-form").RefCallBack;
+            onBlur: import("typescript").Callback;
+            value: string;
+            optionsPresentation: boolean;
+            onChange: (value: string) => void;
+            placeholder: string;
+            disabled: boolean;
+            options: import("../..").SelectOption[];
+            isError: boolean;
+            isEditMode: boolean;
+            selectInternalConfig: import("../..").SelectInternalConfigurationOptions;
+            isRichText: boolean;
+        }>;
         labelsProps: import("..").FieldLabelsProps;
         name: string;
         rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;

package/dist/cjs/src/typescript.d.ts

@@ -1,5 +1,8 @@
 import { DefaultTheme, ThemedCssFunction } from 'styled-components';
 export declare type StylesType = ReturnType<ThemedCssFunction<DefaultTheme>>;
+export declare type StyledTransientProps<T> = {
+    [K in keyof T & string as `$${K}`]: T[K];
+};
 export declare type OverrideStyles = {
     $styles?: StylesType;
 };