@xqmsg/ui-core 0.9.2 → 0.10.0

package/dist/components/input/InputTypes.d.ts

@@ -8,10 +8,12 @@ export declare type FieldProps = {
     errorText?: string;
 };
 export declare type InputType = 'text' | 'select' | 'multi-select' | 'pilled-text' | 'textarea' | 'radio' | 'checkbox' | 'switch';
-export declare type FieldOptions = {
+export declare type FieldOption = {
     label: string;
-    value: string;
-}[];
+    value: string | 'section_header';
+    sortValue: number;
+};
+export declare type FieldOptions = FieldOption[];
 export interface ValidationProps {
     isRequired: boolean;
     isInvalid?: boolean;

package/dist/components/input/StackedInput/StackedInput.d.ts

@@ -1,10 +1,7 @@
 import React from 'react';
 import { InputFieldProps } from '../InputTypes';
 export interface StackedInputProps extends InputFieldProps {
-    label?: string;
     isRequired?: boolean;
-    leftElement?: React.ReactNode;
-    rightElement?: React.ReactNode;
 }
 /**
  * A functional React component utilized to render the `StackedInput` component.

package/dist/components/input/StackedMultiSelect/index.d.ts

@@ -9,5 +9,5 @@ export interface StackedMultiSelectProps extends ReactSelectFieldProps {
 /**
  * A functional React component utilized to render the `StackedMultiSelect` component.
  */
-declare const StackedMultiSelect: React.ForwardRefExoticComponent<StackedMultiSelectProps & React.RefAttributes<HTMLSelectElement>>;
+declare const StackedMultiSelect: React.ForwardRefExoticComponent<StackedMultiSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default StackedMultiSelect;

package/dist/components/input/StackedSelect/StackedSelect.d.ts

@@ -1,10 +1,14 @@
 import React from 'react';
-import { FieldOptions, SelectFieldProps } from '../InputTypes';
-export interface StackedSelectProps extends SelectFieldProps {
+import { FieldOptions } from '../InputTypes';
+import { StackedInputProps } from '../StackedInput/StackedInput';
+import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
+export interface StackedSelectProps extends StackedInputProps {
     options: FieldOptions;
+    setValue: UseFormSetValue<FieldValues>;
+    control: Control<FieldValues, any>;
 }
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
-declare const StackedSelect: React.ForwardRefExoticComponent<StackedSelectProps & React.RefAttributes<HTMLSelectElement>>;
+declare const StackedSelect: React.ForwardRefExoticComponent<StackedSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default StackedSelect;

package/dist/components/input/components/dropdown/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FieldOption, FieldOptions } from '../../InputTypes';
+export interface DropdownProps {
+    onSelectItem: (option: FieldOption) => void;
+    options: FieldOptions;
+}
+/**
+ * A functional React component utilized to render the `Dropdown` component
+ */
+export declare const Dropdown: React.FC<DropdownProps>;

package/dist/components/input/components/label/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface LabelProps {
+    label: string;
+    isRequired?: boolean;
+}
+/**
+ * A functional React component utilized to render the `Label` component
+ */
+export declare const Label: React.FC<LabelProps>;

package/dist/components/input/components/token/Token.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { TokenProps } from '.';
+declare const meta: Meta<TokenProps>;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TokenProps>;

package/dist/components/input/components/token/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface TokenProps {
+    label: any;
+    onDelete: any;
+}
+declare const Token: React.FC<TokenProps>;
+export default Token;

package/dist/components/input/index.d.ts

@@ -12,8 +12,6 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
     options?: FieldOptions;
     maxLength?: number;
     helperText?: React.ReactNode;
-    leftElement?: React.ReactNode;
-    rightElement?: React.ReactNode;
     control?: Control<T, any>;
     onChange?: (args?: any) => void;
     disabled?: boolean;
@@ -23,4 +21,4 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
  * A functional React component utilized to render the `Input` component. Utilizes a switch statement
  * to render the correct input based on the `inputType`.
  */
-export declare function Input<T extends FieldValues>({ inputType, label, ariaLabel, className, placeholder, name, helperText, leftElement, rightElement, options, isInvalid, errorText, isRequired, maxLength, defaultValue, control, disabled, onChange, setValue, }: InputProps<T>): JSX.Element;
+export declare function Input<T extends FieldValues>({ inputType, label, ariaLabel, className, placeholder, name, helperText, options, isInvalid, errorText, isRequired, maxLength, defaultValue, control, disabled, onChange, setValue, }: InputProps<T>): JSX.Element;

package/dist/theme/components/form-error.d.ts

@@ -1,14 +1,14 @@
 declare const _default: {
     parts: string[];
-    baseStyle: (props: Record<string, any>) => {
+    baseStyle: () => {
         text: {
             color: string;
             mt: number;
-            lineHeight: string;
+            ml: number;
             fontSize: string;
         };
         icon: {
-            mr: string;
+            ml: number;
             color: string;
         };
     };

package/dist/theme/components/form-label.d.ts

@@ -1,15 +1,13 @@
 declare const _default: {
     baseStyle: {
         fontSize: string;
-        mr: number;
+        position: string;
+        top: number;
+        display: string;
+        ml: number;
         mb: number;
-        fontWeight: string;
         color: string;
-        transition: string;
         opacity: number;
-        _disabled: {
-            opacity: number;
-        };
     };
 };
 export default _default;

package/dist/theme/components/form.d.ts

@@ -1,14 +1,14 @@
 declare const _default: {
     parts: string[];
-    baseStyle: (props: Record<string, any>) => {
+    baseStyle: () => {
         requiredIndicator: {
             ml: number;
             color: string;
         };
         helperText: {
-            mt: number;
             color: string;
-            lineHeight: string;
+            mt: number;
+            ml: number;
             fontSize: string;
         };
     };

package/dist/theme/components/input.d.ts

@@ -1,181 +1,52 @@
-declare type Dict = Record<string, any>;
-declare function variantOutline(props: Dict): {
-    field: {
-        border: string;
-        borderColor: string;
-        bg: string;
-        _hover: {
-            borderColor: string;
-        };
-        _readOnly: {
-            boxShadow: string;
-            userSelect: string;
-        };
-        _disabled: {
-            opacity: number;
-            cursor: string;
-        };
-        _focus: {
-            zIndex: number;
-            borderColor: any;
-            boxShadow: string;
-        };
-        _invalid: {
-            borderColor: any;
-            boxShadow: string;
-            _focus: {
-                boxShadow: string;
-            };
-        };
-    };
-    addon: {
-        border: string;
-        borderColor: string;
-        bg: string;
-    };
-};
-declare function variantFilled(props: Dict): {
-    field: {
-        border: string;
-        borderColor: string;
-        bg: string;
-        _hover: {
-            bg: string;
-        };
-        _readOnly: {
-            boxShadow: string;
-            userSelect: string;
-        };
-        _disabled: {
-            opacity: number;
-            cursor: string;
-        };
-        _focus: {
-            bg: string;
-            borderColor: any;
-        };
-        _invalid: {
-            borderColor: any;
-        };
-    };
-    addon: {
-        border: string;
-        borderColor: string;
-        bg: string;
-    };
-};
-declare function variantFlushed(props: Dict): {
-    field: {
-        borderBottom: string;
-        borderRadius: number;
-        pl: number;
-        pr: number;
-        bg: string;
-        _readOnly: {
-            boxShadow: string;
-            userSelect: string;
-        };
-        _focus: {
-            borderColor: any;
-            boxShadow: string;
-        };
-        _invalid: {
-            borderColor: any;
-        };
-    };
-    addon: {
-        borderBottom: string;
-        borderColor: string;
-        borderRadius: number;
-        paddingX: number;
-        bg: string;
-    };
-};
 declare const _default: {
     parts: string[];
     baseStyle: {
         field: {
-            width: string;
-            outline: number;
-            position: string;
-            appearance: string;
-            transition: string;
+            fontSize: string;
             '::placeholder': {
                 color: string;
             };
-        };
-    };
-    sizes: {
-        lg: {
-            field: {
-                fontSize: string;
-                pl: number;
-                pr: number;
-                h: number;
-                borderRadius: string;
-            };
-            addon: {
-                fontSize: string;
-                pl: number;
-                pr: number;
-                h: number;
-                borderRadius: string;
-            };
-        };
-        md: {
-            field: {
-                fontSize: string;
-                pl: number;
-                pr: number;
-                h: number;
-                borderRadius: string;
-            };
-            addon: {
-                fontSize: string;
-                pl: number;
-                pr: number;
-                h: number;
-                borderRadius: string;
-            };
-        };
-        sm: {
-            field: {
-                fontSize: string;
-                pl: number;
-                pr: number;
-                h: number;
-                borderRadius: string;
+            py: string;
+            px: string;
+            border: string;
+            borderColor: string;
+            _disabled: {
+                cursor: string;
+                bg: string;
+                color: string;
             };
-            addon: {
-                fontSize: string;
-                pl: number;
-                pr: number;
-                h: number;
-                borderRadius: string;
+            _focus: {
+                bg: string;
+                border: string;
+                borderColor: string;
             };
         };
     };
     variants: {
-        outline: typeof variantOutline;
-        filled: typeof variantFilled;
-        flushed: typeof variantFlushed;
-        unstyled: {
+        default: {
             field: {
-                bg: string;
-                pl: number;
-                pr: number;
-                height: string;
-            };
-            addon: {
-                bg: string;
-                pl: number;
-                pr: number;
-                height: string;
+                fontSize: string;
+                '::placeholder': {
+                    color: string;
+                };
+                py: string;
+                px: string;
+                border: string;
+                borderColor: string;
+                _disabled: {
+                    cursor: string;
+                    bg: string;
+                    color: string;
+                };
+                _focus: {
+                    bg: string;
+                    border: string;
+                    borderColor: string;
+                };
             };
         };
     };
     defaultProps: {
-        size: string;
         variant: string;
     };
 };

package/dist/theme/components/select.d.ts

@@ -1,21 +1,30 @@
 declare const _default: {
     parts: string[];
-    baseStyle: (props: Record<string, any>) => {
+    baseStyle: () => {
         field: {
             appearance: string;
             paddingBottom: string;
             lineHeight: string;
             bg: string;
-            '> option': {
-                bg: string;
-            };
-            width: string;
-            outline: number;
-            position: string;
-            transition: string;
+            '> option': {};
+            fontSize: string;
             '::placeholder': {
                 color: string;
             };
+            py: string;
+            px: string;
+            border: string;
+            borderColor: string;
+            _disabled: {
+                cursor: string;
+                bg: string;
+                color: string;
+            };
+            _focus: {
+                bg: string;
+                border: string;
+                borderColor: string;
+            };
         };
         icon: {
             color: string;
@@ -25,166 +34,31 @@ declare const _default: {
             };
         };
     };
-    sizes: {
-        lg: {
-            field: {
-                fontSize: string;
-                pl: number;
-                pr: number;
-                h: number;
-                borderRadius: string;
-            };
-            addon: {
-                fontSize: string;
-                pl: number;
-                pr: number;
-                h: number;
-                borderRadius: string;
-            };
-        };
-        md: {
-            field: {
-                fontSize: string;
-                pl: number;
-                pr: number;
-                h: number;
-                borderRadius: string;
-            };
-            addon: {
-                fontSize: string;
-                pl: number;
-                pr: number;
-                h: number;
-                borderRadius: string;
-            };
-        };
-        sm: {
-            field: {
-                fontSize: string;
-                pl: number;
-                pr: number;
-                h: number;
-                borderRadius: string;
-            };
-            addon: {
-                fontSize: string;
-                pl: number;
-                pr: number;
-                h: number;
-                borderRadius: string;
-            };
-        };
-    };
     variants: {
-        outline: (props: Record<string, any>) => {
+        default: {
             field: {
-                border: string;
-                borderColor: string;
-                bg: string;
-                _hover: {
-                    borderColor: string;
-                };
-                _readOnly: {
-                    boxShadow: string;
-                    userSelect: string;
-                };
-                _disabled: {
-                    opacity: number;
-                    cursor: string;
-                };
-                _focus: {
-                    zIndex: number;
-                    borderColor: any;
-                    boxShadow: string;
-                };
-                _invalid: {
-                    borderColor: any;
-                    boxShadow: string;
-                    _focus: {
-                        boxShadow: string;
-                    };
+                fontSize: string;
+                '::placeholder': {
+                    color: string;
                 };
-            };
-            addon: {
-                border: string;
-                borderColor: string;
-                bg: string;
-            };
-        };
-        filled: (props: Record<string, any>) => {
-            field: {
+                py: string;
+                px: string;
                 border: string;
                 borderColor: string;
-                bg: string;
-                _hover: {
-                    bg: string;
-                };
-                _readOnly: {
-                    boxShadow: string;
-                    userSelect: string;
-                };
                 _disabled: {
-                    opacity: number;
                     cursor: string;
-                };
-                _focus: {
                     bg: string;
-                    borderColor: any;
-                };
-                _invalid: {
-                    borderColor: any;
-                };
-            };
-            addon: {
-                border: string;
-                borderColor: string;
-                bg: string;
-            };
-        };
-        flushed: (props: Record<string, any>) => {
-            field: {
-                borderBottom: string;
-                borderRadius: number;
-                pl: number;
-                pr: number;
-                bg: string;
-                _readOnly: {
-                    boxShadow: string;
-                    userSelect: string;
+                    color: string;
                 };
                 _focus: {
-                    borderColor: any;
-                    boxShadow: string;
-                };
-                _invalid: {
-                    borderColor: any;
+                    bg: string;
+                    border: string;
+                    borderColor: string;
                 };
             };
-            addon: {
-                borderBottom: string;
-                borderColor: string;
-                borderRadius: number;
-                paddingX: number;
-                bg: string;
-            };
-        };
-        unstyled: {
-            field: {
-                bg: string;
-                pl: number;
-                pr: number;
-                height: string;
-            };
-            addon: {
-                bg: string;
-                pl: number;
-                pr: number;
-                height: string;
-            };
         };
     };
     defaultProps: {
-        size: string;
         variant: string;
     };
 };