@xqmsg/ui-core 0.26.2 → 0.28.1

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

@@ -6,6 +6,7 @@ export interface BannerProps {
     buttonText?: string;
     onClick?: () => void;
     type?: 'condensed' | 'expanded';
+    centered?: boolean;
 }
 /**
  * A functional React component utilized to render the `Banner` component

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

@@ -8,6 +8,7 @@ interface StoryFormSchema {
     prop4?: string;
     prop5?: string;
     prop6?: boolean;
+    prop7?: number;
 }
 export default meta;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputProps<StoryFormSchema>>;

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

@@ -7,18 +7,18 @@ export declare type FieldProps = {
     isInvalid?: boolean;
     errorText?: string;
 };
-export declare type InputType = 'text' | 'select' | 'multi-select' | 'pilled-text' | 'textarea' | 'radio' | 'checkbox' | 'switch';
+export declare type InputType = 'text' | 'select' | 'multi-select' | 'pilled-text' | 'textarea' | 'radio' | 'checkbox' | 'switch' | 'number';
 export declare type FieldOption = {
     label: string;
     value: string | 'section_header';
-    sortValue: number;
+    sortValue?: number;
 };
 export interface ValidationProps {
     isRequired: boolean;
     isInvalid?: boolean;
     errorText?: string;
 }
-export interface InputFieldProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'color' | 'height' | 'width' | 'size' | 'ref' | 'onChange' | 'defaultValue'>, FieldProps, Partial<InputProps> {
+export interface InputFieldProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'color' | 'height' | 'width' | 'size' | 'ref' | 'onChange' | 'defaultValue' | 'min' | 'max' | 'step'>, FieldProps, Partial<InputProps> {
 }
 export interface TextareaFieldProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'color' | 'height' | 'width' | 'size' | 'ref'>, FieldProps, Partial<TextareaProps> {
 }

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { InputFieldProps } from '../InputTypes';
+export interface StackedNumberInputProps extends InputFieldProps {
+    isRequired?: boolean;
+    leftElement?: React.ReactNode;
+    rightElement?: React.ReactNode;
+    variant?: string;
+    label?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    showStepper?: boolean;
+}
+/**
+ * A functional React component that renders Chakra UI's `NumberInput` wrapped
+ * in an `InputGroup`, following the same pattern as `StackedInput`.
+ */
+declare const StackedNumberInput: React.ForwardRefExoticComponent<StackedNumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export default StackedNumberInput;

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

@@ -6,7 +6,7 @@ export interface InputProps<T extends FieldValues = FieldValues> extends Validat
     name: string;
     ariaLabel: string;
     placeholder?: string;
-    defaultValue?: string;
+    defaultValue?: string | number;
     label?: string;
     className?: string;
     options?: FieldOption[];
@@ -28,9 +28,17 @@ export interface InputProps<T extends FieldValues = FieldValues> extends Validat
     truncatePillLength?: number;
     searchable?: boolean;
     overflowMode?: 'scroll' | 'wrap';
+    /** Minimum value (numberInput only) */
+    min?: number;
+    /** Maximum value (numberInput only) */
+    max?: number;
+    /** Increment/decrement step (numberInput only) */
+    step?: number;
+    /** Number of decimal places (numberInput only) */
+    precision?: number;
 }
 /**
  * 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, variant, onChange, setValue, setError, clearErrors, separators, loadingOptions, truncatePillLength, searchable, overflowMode, }: 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, variant, onChange, setValue, setError, clearErrors, separators, loadingOptions, truncatePillLength, searchable, overflowMode, min, max, step, precision, }: InputProps<T>): React.JSX.Element;

package/dist/ui-core.cjs.development.js

@@ -202,7 +202,9 @@ var Banner = function Banner(_ref) {
     buttonText = _ref.buttonText,
     onClick = _ref.onClick,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'expanded' : _ref$type;
+    type = _ref$type === void 0 ? 'expanded' : _ref$type,
+    _ref$centered = _ref.centered,
+    centered = _ref$centered === void 0 ? false : _ref$centered;
   var Icon = React.useMemo(function () {
     switch (variant) {
       case 'error':
@@ -227,16 +229,20 @@ var Banner = function Banner(_ref) {
   }, [variant]);
   return /*#__PURE__*/React__default.createElement(react.Alert, {
     variant: variant,
-    borderRadius: "4px"
+    borderRadius: "4px",
+    justifyContent: centered ? 'center' : undefined
   }, /*#__PURE__*/React__default.createElement(react.AlertDescription, null, /*#__PURE__*/React__default.createElement(react.Flex, {
-    flexDirection: type === 'condensed' ? 'row' : 'column',
-    alignItems: type === 'condensed' ? 'center' : '',
+    flexDirection: centered || type === 'condensed' ? 'row' : 'column',
+    alignItems: centered || type === 'condensed' ? 'center' : '',
+    justifyContent: centered ? 'center' : undefined,
     minHeight: "26px"
   }, /*#__PURE__*/React__default.createElement(react.Box, {
-    pr: "8px"
+    pr: "8px",
+    pt: !centered && type !== 'condensed' ? '8px' : 0
   }, Icon), /*#__PURE__*/React__default.createElement(react.Box, {
-    flexGrow: "1",
-    pt: type === 'condensed' ? 0 : '8px'
+    flexGrow: centered ? undefined : '1',
+    pt: !centered && type !== 'condensed' ? '8px' : 0,
+    textAlign: centered ? 'center' : 'left'
   }, message), onClick && buttonText && /*#__PURE__*/React__default.createElement(react.Flex, {
     ml: type === 'condensed' ? 'auto' : '',
     pt: type === 'condensed' ? 0 : '8px',
@@ -1471,7 +1477,8 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     });
     setLocalOptions(function (prevLocalOptions) {
       return [].concat(prevLocalOptions, [option]).sort(function (a, b) {
-        return a.sortValue - b.sortValue;
+        var _a$sortValue, _b$sortValue;
+        return ((_a$sortValue = a.sortValue) != null ? _a$sortValue : 0) - ((_b$sortValue = b.sortValue) != null ? _b$sortValue : 0);
       });
     });
     setLocalValues(function (prevLocalValues) {
@@ -1638,6 +1645,69 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   })));
 });
 
+/**
+ * A functional React component that renders Chakra UI's `NumberInput` wrapped
+ * in an `InputGroup`, following the same pattern as `StackedInput`.
+ */
+var StackedNumberInput = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var name = _ref.name,
+    id = _ref.id,
+    placeholder = _ref.placeholder,
+    isRequired = _ref.isRequired,
+    isInvalid = _ref.isInvalid,
+    disabled = _ref.disabled,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    min = _ref.min,
+    max = _ref.max,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    _ref$precision = _ref.precision,
+    precision = _ref$precision === void 0 ? 0 : _ref$precision,
+    _ref$showStepper = _ref.showStepper,
+    showStepper = _ref$showStepper === void 0 ? false : _ref$showStepper,
+    variant = _ref.variant,
+    className = _ref.className,
+    label = _ref.label,
+    leftElement = _ref.leftElement,
+    rightElement = _ref.rightElement,
+    _onChange = _ref.onChange,
+    onBlur = _ref.onBlur;
+  var isMobile = variant === 'mobile';
+  var resolvedPlaceholder = isMobile && label ? label : placeholder;
+  var inputValue = typeof value === 'string' || typeof value === 'number' ? value : undefined;
+  var normalizedValue = precision === 0 && inputValue !== undefined && inputValue !== '' ? Number.isNaN(Number(inputValue)) ? inputValue : String(Math.round(Number(inputValue))) : inputValue;
+  return /*#__PURE__*/React__default.createElement(react.InputGroup, null, leftElement && leftElement, label && !isMobile && label, /*#__PURE__*/React__default.createElement(react.NumberInput, {
+    id: id,
+    name: name,
+    isRequired: isRequired,
+    isInvalid: isInvalid,
+    isDisabled: disabled,
+    value: normalizedValue,
+    defaultValue: defaultValue,
+    min: min,
+    max: max,
+    step: step,
+    precision: precision,
+    onChange: function onChange(_, valueAsNumber) {
+      return _onChange == null ? void 0 : _onChange({
+        target: {
+          name: name,
+          value: Number.isNaN(valueAsNumber) ? '' : precision === 0 ? String(Math.round(valueAsNumber)) : String(valueAsNumber)
+        }
+      });
+    },
+    className: className,
+    variant: variant === 'mobile' ? 'mobile' : 'default',
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(react.NumberInputField, {
+    ref: ref,
+    placeholder: resolvedPlaceholder,
+    onBlur: onBlur
+  }), showStepper && /*#__PURE__*/React__default.createElement(react.NumberInputStepper, null, /*#__PURE__*/React__default.createElement(react.NumberIncrementStepper, null), /*#__PURE__*/React__default.createElement(react.NumberDecrementStepper, null))), rightElement && rightElement);
+});
+StackedNumberInput.displayName = 'StackedNumberInput';
+
 /**
  * A functional React component utilized to render the `StackedPilledInput` component.
  */
@@ -2058,7 +2128,11 @@ function Input(_ref) {
     truncatePillLength = _ref.truncatePillLength,
     searchable = _ref.searchable,
     _ref$overflowMode = _ref.overflowMode,
-    overflowMode = _ref$overflowMode === void 0 ? 'scroll' : _ref$overflowMode;
+    overflowMode = _ref$overflowMode === void 0 ? 'scroll' : _ref$overflowMode,
+    min = _ref.min,
+    max = _ref.max,
+    step = _ref.step,
+    precision = _ref.precision;
   function selectedInputField(onChange, onBlur, ref, value) {
     switch (inputType) {
       case 'text':
@@ -2082,6 +2156,31 @@ function Input(_ref) {
           variant: variant,
           label: label
         });
+      case 'number':
+        return /*#__PURE__*/React__default.createElement(StackedNumberInput, {
+          className: "input-" + inputType + " " + (className != null ? className : ''),
+          "aria-label": ariaLabel,
+          name: name,
+          id: name,
+          placeholder: placeholder,
+          maxLength: maxLength,
+          isRequired: isRequired,
+          isInvalid: isInvalid,
+          onChange: onChange,
+          onBlur: onBlur,
+          ref: ref,
+          rightElement: rightElement,
+          leftElement: leftElement,
+          disabled: disabled,
+          defaultValue: defaultValue,
+          value: value,
+          variant: variant,
+          label: label,
+          min: min,
+          max: max,
+          step: step,
+          precision: precision
+        });
       case 'radio':
         return /*#__PURE__*/React__default.createElement(StackedRadioGroup, {
           className: "input-" + inputType + " " + (className != null ? className : ''),
@@ -5048,6 +5147,7 @@ var customXQChakraTheme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends$
     FormError: FormError,
     FormLabel: FormLabel,
     Input: Input$1,
+    NumberInput: Input$1,
     Link: Link$1,
     Menu: Menu$1,
     Modal: Modal$1,