@xqmsg/ui-core 0.22.4 → 0.23.1-rc.1

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

@@ -10,6 +10,8 @@ export interface FormInput {
     maxLength?: number;
     disabled?: boolean;
     defaultValue?: string;
+    variant?: string;
+    separators?: string[];
 }
 export declare type FormStructure<K extends string | number | symbol> = {
     [key in K]: FormInput[];

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { SelectFieldProps } from '../InputTypes';
-export interface StackedCheckboxProps extends SelectFieldProps {
+import { InputFieldProps } from '../InputTypes';
+export interface StackedCheckboxProps extends InputFieldProps {
     label: string;
+    variant: string;
 }
 /**
  * A functional React component utilized to render the `StackedCheckbox` component.

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

@@ -5,6 +5,8 @@ export interface StackedInputProps extends InputFieldProps {
     allowDefault?: boolean;
     leftElement?: React.ReactNode;
     rightElement?: React.ReactNode;
+    variant?: string;
+    label?: string;
 }
 /**
  * A functional React component utilized to render the `StackedInput` component.

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

@@ -6,6 +6,9 @@ export interface StackedPilledInputProps extends InputFieldProps {
     setError: UseFormSetError<FieldValues>;
     clearErrors: UseFormClearErrors<FieldValues>;
     control: Control<FieldValues, any>;
+    separators?: string[];
+    variant?: string;
+    label?: string;
 }
 /**
  * A functional React component utilized to render the `StackedPilledInput` component.

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

@@ -1,6 +1,10 @@
 import React from 'react';
 import { TextareaFieldProps } from '../InputTypes';
 export interface StackedTextareaProps extends TextareaFieldProps {
+    isRequired?: boolean;
+    allowDefault?: boolean;
+    variant: string;
+    label?: string;
 }
 /**
  * A functional React component utilized to render the `StackedTextarea` component.

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

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

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

@@ -13,7 +13,7 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
     fullOptions?: FieldOptions;
     maxLength?: number;
     helperText?: React.ReactNode;
-    control: Control<T, any>;
+    control: Control<T, unknown>;
     onChange?: (value?: string) => void;
     disabled?: boolean;
     tooltipText?: string;
@@ -23,9 +23,10 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
     leftElement?: React.ReactNode;
     allowDefault?: boolean;
     rightElement?: React.ReactNode;
+    variant: string;
 }
 /**
  * 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, options, tooltipText, isInvalid, errorText, isRequired, maxLength, defaultValue, fullOptions, control, disabled, rightElement, leftElement, allowDefault, onChange, setValue, setError, clearErrors, }: InputProps<T>): React.JSX.Element;
+export declare function Input<T extends FieldValues>({ inputType, label, ariaLabel, className, placeholder, name, helperText, options, tooltipText, isInvalid, errorText, isRequired, maxLength, defaultValue, fullOptions, control, disabled, rightElement, leftElement, allowDefault, variant, onChange, setValue, setError, clearErrors, }: InputProps<T>): React.JSX.Element;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Control, FieldValues, UseFormClearErrors, UseFormSetError, UseFormSetValue } from 'react-hook-form';
+import { FieldOptions, ValidationProps } from 'src/components/input/InputTypes';
+export interface SelectNativeProps<T extends FieldValues> extends ValidationProps {
+    isRequired: boolean;
+    name: string;
+    ariaLabel: string;
+    placeholder?: string;
+    defaultValue?: string;
+    label?: string;
+    className?: string;
+    options?: FieldOptions;
+    fullOptions?: FieldOptions;
+    helperText?: React.ReactNode;
+    control: Control<T, unknown>;
+    onChange?: (value?: string) => void;
+    disabled?: boolean;
+    tooltipText?: string;
+    setValue: UseFormSetValue<T>;
+    setError: UseFormSetError<T>;
+    clearErrors: UseFormClearErrors<T>;
+    allowDefault?: boolean;
+}
+/**
+ * A functional React component utilized to render the `SelectNative` component.
+ */
+export declare const SelectNative: React.FC<SelectNativeProps<HTMLSelectElement>>;

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './components/form';
 export * from './components/form/section';
 export * from './components/icons';
 export * from './components/input';
+export { SelectNative } from './components/select';
 export * from './components/layout';
 export { Link } from './components/link';
 export * from './components/loading';

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

@@ -120,6 +120,119 @@ declare const _default: {
             bgGradient: string;
             shadow: string;
         };
+        'flat-primary': {
+            bg: string;
+            bgGradient: null;
+            minWidth: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            gap: string;
+            height: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textAlign: string;
+            boxShadow: string;
+            color: string;
+            h: string;
+            px: string;
+            py: string;
+            shadow: string;
+            _disabled: {
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+                pointerEvents: string;
+            };
+            _hover: {
+                bg: string;
+            };
+            _active: {
+                color: string;
+                bg: string;
+                bgGradient: string;
+            };
+            _focus: {
+                outline: string;
+                outlineOffset: string;
+            };
+        };
+        'flat-secondary': {
+            fontWeight: string;
+            color: string;
+            bg: string;
+            _hover: {
+                bg: string;
+            };
+            _active: {
+                color: string;
+                bg: string;
+                bgGradient: string;
+            };
+            _focus: {
+                bg: string;
+            };
+            bgGradient: null;
+            minWidth: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            gap: string;
+            height: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textAlign: string;
+            boxShadow: string;
+            h: string;
+            px: string;
+            py: string;
+            shadow: string;
+            _disabled: {
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+                pointerEvents: string;
+            };
+        };
+        'flat-tertiary': {
+            fontWeight: string;
+            color: string;
+            bg: string;
+            _hover: {
+                bg: string;
+            };
+            _active: {
+                color: string;
+                bg: string;
+            };
+            _focus: {
+                color: string;
+                bg: string;
+            };
+            _disabled: {
+                backgroundColor: string;
+                color: string;
+            };
+            bgGradient: null;
+            minWidth: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            gap: string;
+            height: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textAlign: string;
+            boxShadow: string;
+            h: string;
+            px: string;
+            py: string;
+            shadow: string;
+        };
     };
     defaultProps: {
         variant: string;

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

@@ -0,0 +1,29 @@
+declare const _default: {
+    baseStyle?: Partial<Record<"container" | "icon" | "label" | "control", import("@chakra-ui/styled-system").RecursiveCSSObject<import("@chakra-ui/styled-system").CSSWithMultiValues>>> | import("@chakra-ui/styled-system").PartsStyleFunction<{
+        keys: ("container" | "icon" | "label" | "control")[];
+    }> | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("container" | "icon" | "label" | "control")[];
+        }>;
+    } | undefined;
+    variants?: {
+        mobile: {
+            control: {};
+            label: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: string;
+                padding: string;
+            };
+            height: string;
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: "mobile" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("container" | "icon" | "label" | "control")[];
+};
+export default _default;

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

@@ -24,6 +24,9 @@ declare const _default: {
                 border: string;
                 borderColor: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
     };
     variants: {
@@ -51,6 +54,26 @@ declare const _default: {
                     border: string;
                     borderColor: string;
                 };
+                _placeholder: {
+                    color: string;
+                };
+            };
+        };
+        mobile: {
+            field: {
+                fontSize: string;
+                py: string;
+                px: string;
+                cursor: string;
+                lineHeight: string;
+                fontWeight: number;
+                borderRadius: number;
+                height: string;
+                padding: string;
+                border: string;
+                borderColor: string;
+                borderLeft: string;
+                borderRight: string;
             };
         };
     };

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

@@ -29,6 +29,9 @@ declare const _default: {
                 border: string;
                 borderColor: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
         icon: {
             color: string;
@@ -63,6 +66,26 @@ declare const _default: {
                     border: string;
                     borderColor: string;
                 };
+                _placeholder: {
+                    color: string;
+                };
+            };
+        };
+        mobile: {
+            field: {
+                fontSize: string;
+                py: string;
+                px: string;
+                cursor: string;
+                lineHeight: string;
+                fontWeight: number;
+                borderRadius: number;
+                height: string;
+                padding: string;
+                border: string;
+                borderColor: string;
+                borderLeft: string;
+                borderRight: string;
             };
         };
     };

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

@@ -27,6 +27,84 @@ declare const _default: {
             border: string;
             borderColor: string;
         };
+        _placeholder: {
+            color: string;
+        };
+    };
+    variants: {
+        default: {
+            fontSize: string;
+            display: string;
+            paddingY: string;
+            paddingX: string;
+            height: string;
+            lineHeight: string;
+            h: string;
+            '::placeholder': {
+                color: string;
+            };
+            py: string;
+            px: string;
+            border: string;
+            borderColor: string;
+            _disabled: {
+                opacity: number;
+                cursor: string;
+                bg: string;
+                color: string;
+                border: string;
+                borderColor: string;
+            };
+            _focus: {
+                bg: string;
+                border: string;
+                borderColor: string;
+            };
+            _placeholder: {
+                color: string;
+            };
+        };
+        mobile: {
+            border: string;
+            borderRadius: number;
+            paddingY: string;
+            paddingX: string;
+            cursor: string;
+            lineHeight: string;
+            fontWeight: number;
+            resize: string;
+            overflowY: string;
+            fontSize: string;
+            minHeight: string;
+            py: string;
+            px: string;
+            height: string;
+            padding: string;
+            borderColor: string;
+            borderLeft: string;
+            borderRight: string;
+            display: string;
+            h: string;
+            '::placeholder': {
+                color: string;
+            };
+            _disabled: {
+                opacity: number;
+                cursor: string;
+                bg: string;
+                color: string;
+                border: string;
+                borderColor: string;
+            };
+            _focus: {
+                bg: string;
+                border: string;
+                borderColor: string;
+            };
+            _placeholder: {
+                color: string;
+            };
+        };
     };
     defaultProps: {
         variant: string;