@xqmsg/ui-core 0.9.3 → 0.11.0

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

@@ -1,20 +1,16 @@
 import React from 'react';
-import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 import buttonTheme from '../../theme/components/button';
 export interface ButtonProps {
     text: string;
     onClick?: () => void;
+    width: 'variable' | 'fixed';
     variant?: keyof typeof buttonTheme.variants;
-    colorScheme?: string;
-    type: 'button' | 'submit' | 'reset' | undefined;
+    type?: 'button' | 'submit' | 'reset';
     ariaLabel: string;
-    size?: 'sm' | 'md' | 'lg' | 'xs';
     disabled?: boolean;
     className?: string;
-    style?: React.CSSProperties;
-    width?: string | number;
 }
 /**
  * A functional React component utilized to render the `Button` component
  */
-export declare const Button: React.FC<ButtonProps & ChakraButtonProps>;
+export declare const Button: React.FC<ButtonProps>;

package/dist/components/input/Input.stories.d.ts

@@ -3,6 +3,10 @@ import { InputProps } from '.';
 declare const meta: Meta<InputProps<StoryFormSchema>>;
 interface StoryFormSchema {
     prop?: string;
+    prop2?: string;
+    prop3?: string;
+    prop4?: string;
+    prop5?: string;
 }
 export default meta;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputProps<StoryFormSchema>>;

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/button.d.ts

@@ -1,231 +1,92 @@
-declare type Dict = Record<string, any>;
-declare function variantGhost(props: Dict): {
-    color: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-    bg?: undefined;
-} | {
-    color: string;
-    bg: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-};
-declare function variantOutline(props: Dict): {
-    color: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-    bg?: undefined;
-    border: string;
-    borderColor: string;
-} | {
-    color: string;
-    bg: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-    border: string;
-    borderColor: string;
-};
-declare function variantSolid(props: Dict): {
-    color: string;
-    bg: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus?: undefined;
-} | {
-    bg: string;
-    color: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
+declare const _default: {
+    baseStyle: {
+        borderRadius: string;
+        fontSize: string;
         bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-};
-/**
- * A variant that displays a solid variant when an active CSS class is
- * detected, otherwise display a ghost variant.  This is useful for pill nav filters.
- */
-declare function variantActiveSolid(props: Dict): {
-    '&.active': {
         color: string;
-        bg: string;
-        _hover: {
-            bg: string;
-        };
-        _active: {
-            bg: string;
+        px: string;
+        py: string;
+        bgGradient: string;
+        shadow: string;
+        _disabled: {
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+            pointerEvents: string;
         };
-        _focus?: undefined;
-    } | {
-        bg: string;
-        color: string;
         _hover: {
             bg: string;
         };
         _active: {
+            color: string;
             bg: string;
+            bgGradient: string;
         };
         _focus: {
-            boxShadow: string;
-        };
-    };
-    color: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-    bg?: undefined;
-} | {
-    '&.active': {
-        color: string;
-        bg: string;
-        _hover: {
-            bg: string;
-        };
-        _active: {
             bg: string;
-        };
-        _focus?: undefined;
-    } | {
-        bg: string;
-        color: string;
-        _hover: {
-            bg: string;
-        };
-        _active: {
-            bg: string;
-        };
-        _focus: {
-            boxShadow: string;
-        };
-    };
-    color: string;
-    bg: string;
-    _hover: {
-        bg: string;
-    };
-    _active: {
-        bg: string;
-    };
-    _focus: {
-        boxShadow: string;
-    };
-};
-declare function variantLink(props: Dict): {
-    padding: number;
-    height: string;
-    lineHeight: string;
-    color: string;
-    _hover: {
-        textDecoration: string;
-    };
-    _active: {
-        color: string;
-    };
-};
-declare const _default: {
-    baseStyle: {
-        lineHeight: number;
-        borderRadius: string;
-        fontWeight: string;
-        _focus: {
-            boxShadow: string;
-        };
-        _disabled: {
-            opacity: number;
-            cursor: string;
-            boxShadow: string;
+            border: string;
         };
     };
     variants: {
-        ghost: typeof variantGhost;
-        outline: typeof variantOutline;
-        solid: typeof variantSolid;
-        activeSolid: typeof variantActiveSolid;
-        link: typeof variantLink;
-        unstyled: {
-            bg: string;
-            color: string;
-            display: string;
-            lineHeight: string;
-            m: number;
-            p: number;
-        };
-    };
-    sizes: {
-        lg: {
-            borderRadius: string;
-            h: number;
-            minW: number;
-            fontSize: string;
-            px: number;
-        };
-        md: {
-            borderRadius: string;
-            h: number;
-            minW: number;
-            fontSize: string;
-            px: number;
-        };
-        sm: {
+        solid: {
             borderRadius: string;
-            h: number;
-            minW: number;
             fontSize: string;
-            px: number;
-        };
-        xs: {
+            bg: string;
+            color: string;
+            px: string;
+            py: string;
+            bgGradient: string;
+            shadow: string;
+            _disabled: {
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+                pointerEvents: string;
+            };
+            _hover: {
+                bg: string;
+            };
+            _active: {
+                color: string;
+                bg: string;
+                bgGradient: string;
+            };
+            _focus: {
+                bg: string;
+                border: string;
+            };
+        };
+        outline: {
+            color: string;
+            bg: string;
+            border: string;
+            _hover: {
+                bg: string;
+            };
+            _active: {
+                color: string;
+                bg: string;
+                bgGradient: string;
+            };
+            _focus: {
+                bg: string;
+            };
             borderRadius: string;
-            h: number;
-            minW: number;
             fontSize: string;
-            px: number;
+            px: string;
+            py: string;
+            bgGradient: string;
+            shadow: string;
+            _disabled: {
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+                pointerEvents: string;
+            };
         };
     };
     defaultProps: {
-        variant: string;
-        size: string;
-        colorScheme: string;
+        solid: string;
     };
 };
 export default _default;

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;
         };
     };