@xqmsg/ui-core 0.26.1 → 0.27.0

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,7 +7,7 @@ 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';
@@ -18,7 +18,7 @@ export interface ValidationProps {
     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

@@ -819,6 +819,7 @@ var _excluded = ["type", "isRequired", "rightElement", "leftElement", "defaultVa
  * A functional React component utilized to render the `StackedInput` component.
  */
 var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
+  var _props$placeholder;
   var _ref2$type = _ref2.type,
     type = _ref2$type === void 0 ? 'text' : _ref2$type,
     isRequired = _ref2.isRequired,
@@ -831,7 +832,7 @@ var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref)
   var isMobile = variant === 'mobile';
   var placeholder = isMobile && label ? label : undefined;
   return /*#__PURE__*/React__default.createElement(react.InputGroup, null, leftElement && leftElement, label, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({}, props, {
-    placeholder: placeholder,
+    placeholder: (_props$placeholder = props.placeholder) != null ? _props$placeholder : placeholder,
     type: type,
     isRequired: isRequired,
     ref: _ref,
@@ -1637,6 +1638,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.
  */
@@ -2057,7 +2121,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':
@@ -2081,6 +2149,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 : ''),
@@ -5047,6 +5140,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,