@hopper-ui/components 1.0.11 → 1.0.12

package/dist/inputs/src/NumberField.js

@@ -0,0 +1,177 @@
+import { NumberFieldContext } from '../../chunk-ZQ3AWYRR.js';
+import { useScale } from '../../chunk-MTDFS4CZ.js';
+import '../../chunk-LJXTJRSB.js';
+import '../../chunk-L6GOPZJM.js';
+import '../../chunk-Z4S37Y6Z.js';
+import '../../chunk-TXZ6BMFR.js';
+import { _InputGroup } from '../../chunk-R5TKT4GV.js';
+import '../../chunk-6BFSSZCY.js';
+import { LabelContext } from '../../chunk-QCA3ZR56.js';
+import { composeClassnameRenderProps } from '../../chunk-65JPI4FL.js';
+import { HelperMessageContext } from '../../chunk-HZKFQ33E.js';
+import { ErrorMessageContext } from '../../chunk-FAE27DLF.js';
+import { isTextOnlyChildren } from '../../chunk-ZWU6DRRZ.js';
+import '../../chunk-GLJ23R4O.js';
+import '../../chunk-WPNVVGFW.js';
+import { _Text } from '../../chunk-4GSKU4TS.js';
+import { TextContext } from '../../chunk-X6SER3TZ.js';
+import { ClearContainerSlots } from '../../chunk-HXI3MEEK.js';
+import { SlotProvider } from '../../chunk-M36KANKC.js';
+import { cssModule } from '../../chunk-KVDXQMWI.js';
+import '../../chunk-JSBRDJBE.js';
+import { IconContext, AngleUpIcon, AngleDownIcon } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { mergeRefs } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import { forwardRef, useCallback } from 'react';
+import { useObjectRef } from 'react-aria';
+import { useContextProps, composeRenderProps, Input, NumberField as NumberField$1, Button } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./NumberField.module.css#css-module
+var NumberField_module_default = { "hop-NumberField": "NumberField-module__hop-NumberField___pmsDi", "hop-NumberField--fluid": "NumberField-module__hop-NumberField--fluid___ssYWg", "hop-NumberField--mobile": "NumberField-module__hop-NumberField--mobile___fKaqn", "hop-NumberField__Label": "NumberField-module__hop-NumberField__Label___3SEGQ", "hop-NumberField__prefix": "NumberField-module__hop-NumberField__prefix___pmpD1", "hop-NumberField__InputGroup": "NumberField-module__hop-NumberField__InputGroup___nFsKz", "hop-NumberField__ErrorMessage": "NumberField-module__hop-NumberField__ErrorMessage___EwALA", "hop-NumberField__HelperMessage": "NumberField-module__hop-NumberField__HelperMessage___HNtPz", "hop-NumberField__stepper-button": "NumberField-module__hop-NumberField__stepper-button___JzEOw", "hop-NumberField__stepper-button--increment": "NumberField-module__hop-NumberField__stepper-button--increment___IVUOE", "hop-NumberField__stepper-button--decrement": "NumberField-module__hop-NumberField__stepper-button--decrement___X75F0", "hop-NumberField__stepper-button--mobile": "NumberField-module__hop-NumberField__stepper-button--mobile___N-J-Q", "hop-NumberField__stepper-button__icon": "NumberField-module__hop-NumberField__stepper-button__icon___QlB4g", "hop-NumberField__input": "NumberField-module__hop-NumberField__input___V7-pl" };
+var GlobalNumberFieldCssSelector = "hop-NumberField";
+var StepperButton = ({ direction }) => {
+  const scale = useScale();
+  const isMobile = scale === "large";
+  const StepperIcon = direction === "increment" ? AngleUpIcon : AngleDownIcon;
+  const stepperClasses = cssModule(
+    NumberField_module_default,
+    "hop-NumberField__stepper-button",
+    direction,
+    isMobile && "mobile"
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: stepperClasses,
+      slot: direction,
+      children: /* @__PURE__ */ jsx(
+        StepperIcon,
+        {
+          className: NumberField_module_default["hop-NumberField__stepper-button__icon"],
+          size: {
+            base: "md",
+            xs: "sm"
+          }
+        }
+      )
+    }
+  );
+};
+function NumberField(props, ref) {
+  var _a;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, NumberFieldContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style: styleProp,
+    size,
+    prefix,
+    placeholder,
+    onChange: onChangeProp,
+    children,
+    defaultValue,
+    value: valueProp,
+    isFluid: isFluidProp,
+    isDisabled,
+    isInvalid,
+    ...otherProps
+  } = ownProps;
+  const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
+  const scale = useScale();
+  const isMobile = scale === "large";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalNumberFieldCssSelector,
+    cssModule(
+      NumberField_module_default,
+      "hop-NumberField",
+      isFluid && "fluid",
+      isMobile && "mobile"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const handleTextChanged = useCallback((value2) => {
+    onChangeProp == null ? void 0 : onChangeProp(value2);
+  }, [onChangeProp]);
+  const [value, onChange] = useControlledState(valueProp, defaultValue || 0, handleTextChanged);
+  const prefixMarkup = prefix ? /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, { size, className: NumberField_module_default["hop-NumberField__prefix"] }],
+        [IconContext, { size, className: NumberField_module_default["hop-NumberField__prefix"] }]
+      ],
+      children: isTextOnlyChildren(prefix) ? /* @__PURE__ */ jsx(_Text, { children: prefix }) : prefix
+    }
+  ) : null;
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isFluid,
+      size,
+      className: NumberField_module_default["hop-NumberField__InputGroup"],
+      isDisabled,
+      isInvalid,
+      inputClassName: NumberField_module_default["hop-NumberField__input"],
+      children: [
+        prefixMarkup,
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: inputRef,
+            placeholder
+          }
+        ),
+        /* @__PURE__ */ jsx(StepperButton, { direction: "increment" }),
+        /* @__PURE__ */ jsx(StepperButton, { direction: "decrement" })
+      ]
+    }
+  ) });
+  const childrenMarkup = composeRenderProps(children, (prev) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [LabelContext, { className: NumberField_module_default["hop-NumberField__Label"] }],
+            [HelperMessageContext, { className: NumberField_module_default["hop-NumberField__HelperMessage"] }],
+            [ErrorMessageContext, { className: NumberField_module_default["hop-NumberField__ErrorMessage"] }]
+          ],
+          children: prev
+        }
+      ),
+      inputMarkup
+    ] });
+  });
+  return /* @__PURE__ */ jsx(
+    NumberField$1,
+    {
+      ref,
+      value,
+      style,
+      className: classNames,
+      onChange,
+      isDisabled,
+      isInvalid,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+var _NumberField = forwardRef(NumberField);
+_NumberField.displayName = "NumberField";
+
+export { GlobalNumberFieldCssSelector, _NumberField as NumberField };

package/dist/inputs/src/NumberFieldContext.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import { NumberFieldProps } from './NumberField.js';
+import '@hopper-ui/styled-system';
+
+declare const NumberFieldContext: react.Context<ContextValue<NumberFieldProps, HTMLDivElement>>;
+
+export { NumberFieldContext };

package/dist/inputs/src/NumberFieldContext.js

@@ -0,0 +1,2 @@
+export { NumberFieldContext } from '../../chunk-ZQ3AWYRR.js';
+import '../../chunk-JSBRDJBE.js';