@butternutbox/pawprint-native 0.10.6 → 0.10.7

package/.turbo/turbo-build.log

@@ -9,10 +9,10 @@
 DTS Build start
 ESM dist/index.js     1.72 MB
 ESM dist/index.js.map 2.69 MB
-ESM ⚡️ Build success in 11138ms
-CJS dist/index.cjs     1.79 MB
-CJS dist/index.cjs.map 2.69 MB
-CJS ⚡️ Build success in 11141ms
-DTS ⚡️ Build success in 22119ms
-DTS dist/index.d.cts 91.30 KB
-DTS dist/index.d.ts  91.30 KB
+ESM ⚡️ Build success in 11806ms
+CJS dist/index.cjs     1.80 MB
+CJS dist/index.cjs.map 2.70 MB
+CJS ⚡️ Build success in 11807ms
+DTS ⚡️ Build success in 24924ms
+DTS dist/index.d.cts 91.44 KB
+DTS dist/index.d.ts  91.44 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @butternutbox/pawprint-native
 
+## 0.10.7
+
+### Patch Changes
+
+- 7af3414: add inline help text to number fields
+
 ## 0.10.6
 
 ### Patch Changes

package/dist/index.cjs

@@ -4837,7 +4837,10 @@ var StyledInputWrapper = styled50__default.default(reactNative.Animated.View)(({
     flexShrink: containerWidth !== void 0 ? 0 : void 0
   };
 });
-var StyledInput = styled50__default.default(reactNative.TextInput)(({ theme: theme2 }) => {
+var StyledInput = styled50__default.default(reactNative.TextInput)(({
+  theme: theme2,
+  hasInlineHelp
+}) => {
   var _a, _b;
   const { colour, field } = theme2.tokens.components.inputs;
   const typography = field.placeholder.default;
@@ -4847,7 +4850,7 @@ var StyledInput = styled50__default.default(reactNative.TextInput)(({ theme: the
   );
   const fontSize = parseTokenValue12(typography.fontSize);
   const letterSpacing = ((_a = typography.letterSpacing) == null ? void 0 : _a.endsWith("%")) ? parseFloat(typography.letterSpacing) / 100 * fontSize : parseFloat((_b = typography.letterSpacing) != null ? _b : "0");
-  return __spreadValues({
+  return __spreadValues(__spreadValues({
     flex: 1,
     minWidth: 0,
     minHeight: 0,
@@ -4856,7 +4859,7 @@ var StyledInput = styled50__default.default(reactNative.TextInput)(({ theme: the
     fontFamily,
     fontSize,
     letterSpacing
-  }, {
+  }, hasInlineHelp ? { position: "relative", top: -8 } : {}), {
     outlineStyle: "none",
     outlineWidth: 0,
     outlineColor: "transparent"
@@ -4881,6 +4884,7 @@ var InputField = React65__default.default.forwardRef(
       hideStateIcons,
       containerWidth,
       containerHeight,
+      hasInlineHelp,
       style,
       editable,
       onFocus,
@@ -4893,6 +4897,7 @@ var InputField = React65__default.default.forwardRef(
       "hideStateIcons",
       "containerWidth",
       "containerHeight",
+      "hasInlineHelp",
       "style",
       "editable",
       "onFocus",
@@ -5015,7 +5020,8 @@ var InputField = React65__default.default.forwardRef(
               placeholderTextColor: colour.field.text.placeholder,
               editable,
               onFocus: handleFocus,
-              onBlur: handleBlur
+              onBlur: handleBlur,
+              hasInlineHelp
             }, rest)
           ),
           trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { children: trailingIcon }),
@@ -7766,8 +7772,12 @@ var StyledFieldTextWrapper = styled50__default.default(reactNative.View)({
   flexShrink: 0,
   justifyContent: "center"
 });
+var StyledInputContainer = styled50__default.default(reactNative.View)(({ hasInlineHelp }) => ({
+  flexDirection: "column",
+  gap: hasInlineHelp ? 2 : 0
+}));
 var NumberInputField = React65__default.default.forwardRef((_a, ref) => {
-  var _b = _a, { fieldText } = _b, props = __objRest(_b, ["fieldText"]);
+  var _b = _a, { fieldText, inlineHelpText } = _b, props = __objRest(_b, ["fieldText", "inlineHelpText"]);
   const theme2 = react.useTheme();
   const { colour, description } = theme2.tokens.components.inputs;
   const fieldSize = parseTokenValue14(
@@ -7779,15 +7789,47 @@ var NumberInputField = React65__default.default.forwardRef((_a, ref) => {
       keyboardType: "numeric",
       hideStateIcons: true,
       containerWidth: fieldSize,
-      containerHeight: fieldSize,
+      containerHeight: inlineHelpText ? void 0 : fieldSize,
+      hasInlineHelp: !!inlineHelpText,
       ref,
       style: { textAlign: "center" }
     }, props)
   );
-  if (!fieldText) {
-    return inputElement;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(StyledFieldGroup, { children: [
+  const fieldContent = inlineHelpText && fieldText ? /* @__PURE__ */ jsxRuntime.jsxs(StyledFieldGroup, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(StyledInputContainer, { hasInlineHelp: true, children: [
+      inputElement,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          style: {
+            position: "absolute",
+            bottom: 4,
+            left: 0,
+            width: fieldSize,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Typography,
+            {
+              token: description.text.default,
+              color: colour.description.default,
+              children: inlineHelpText
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(StyledFieldTextWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      Typography,
+      {
+        token: description.text.default,
+        color: colour.description.default,
+        children: fieldText
+      }
+    ) })
+  ] }) : fieldText ? /* @__PURE__ */ jsxRuntime.jsxs(StyledFieldGroup, { children: [
     inputElement,
     /* @__PURE__ */ jsxRuntime.jsx(StyledFieldTextWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
       Typography,
@@ -7797,7 +7839,31 @@ var NumberInputField = React65__default.default.forwardRef((_a, ref) => {
         children: fieldText
       }
     ) })
-  ] });
+  ] }) : inlineHelpText ? /* @__PURE__ */ jsxRuntime.jsxs(StyledInputContainer, { hasInlineHelp: true, children: [
+    inputElement,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: {
+          position: "absolute",
+          bottom: 4,
+          width: fieldSize,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Typography,
+          {
+            token: description.text.default,
+            color: colour.description.default,
+            children: inlineHelpText
+          }
+        )
+      }
+    )
+  ] }) : inputElement;
+  return fieldContent;
 });
 NumberInputField.displayName = "NumberInput.Field";
 var parseTokenValue15 = (value) => parseFloat(value);
@@ -7817,6 +7883,7 @@ var NumberInputRoot = React65__default.default.forwardRef(
       optionalText,
       onValueChange,
       fieldText,
+      inlineHelpText,
       children
     } = _b, inputProps = __objRest(_b, [
       "label",
@@ -7826,6 +7893,7 @@ var NumberInputRoot = React65__default.default.forwardRef(
       "optionalText",
       "onValueChange",
       "fieldText",
+      "inlineHelpText",
       "children"
     ]);
     if (children) {
@@ -7838,7 +7906,8 @@ var NumberInputRoot = React65__default.default.forwardRef(
         __spreadValues({
           state,
           onChangeText: onValueChange,
-          fieldText
+          fieldText,
+          inlineHelpText
         }, inputProps)
       ),
       description && /* @__PURE__ */ jsxRuntime.jsx(InputDescription, { state, children: description }),
@@ -10223,6 +10292,7 @@ var StyledFieldWrapper = styled50__default.default(reactNative.View)(
   }) => __spreadValues({
     alignItems: "center",
     justifyContent: "center",
+    position: "relative",
     width: fullWidth ? "100%" : fieldMinWidth,
     minWidth: fieldMinWidth,
     height: fieldHeight,
@@ -10234,19 +10304,27 @@ var StyledFieldWrapper = styled50__default.default(reactNative.View)(
     overflow: "hidden"
   }, fullWidth && { flex: 1 })
 );
-var StyledTextInput = styled50__default.default(reactNative.TextInput)(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => __spreadProps(__spreadValues({
-  textAlign: "center",
-  outlineStyle: "none",
-  padding: 0,
-  minWidth: 0,
-  minHeight: 0,
-  width: "100%",
-  height: "100%",
-  color: inputColor,
-  fontFamily: inputFontFamily
-}, inputFontWeight ? { fontWeight: inputFontWeight } : {}), {
-  fontSize: inputFontSize
-}));
+var StyledTextInput = styled50__default.default(reactNative.TextInput)(
+  ({
+    inputColor,
+    inputFontFamily,
+    inputFontWeight,
+    inputFontSize,
+    hasInlineHelp
+  }) => __spreadValues(__spreadProps(__spreadValues({
+    textAlign: "center",
+    outlineStyle: "none",
+    padding: 0,
+    minWidth: 0,
+    minHeight: 0,
+    width: "100%",
+    height: "100%",
+    color: inputColor,
+    fontFamily: inputFontFamily
+  }, inputFontWeight ? { fontWeight: inputFontWeight } : {}), {
+    fontSize: inputFontSize
+  }), hasInlineHelp ? { position: "relative", top: -8 } : {})
+);
 var StyledRow = styled50__default.default(reactNative.View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
@@ -10267,6 +10345,7 @@ var NumberFieldInput = React65__default.default.forwardRef(
       decrementDisabled = false,
       min,
       max,
+      inlineHelpText,
       style,
       onFocus,
       onBlur,
@@ -10286,6 +10365,7 @@ var NumberFieldInput = React65__default.default.forwardRef(
       "decrementDisabled",
       "min",
       "max",
+      "inlineHelpText",
       "style",
       "onFocus",
       "onBlur",
@@ -10364,7 +10444,7 @@ var NumberFieldInput = React65__default.default.forwardRef(
           disabled: disabled || decrementDisabled || isAtMin
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsxs(
         StyledFieldWrapper,
         {
           fieldBgColor: tokens3.colour.field.background.default,
@@ -10374,24 +10454,48 @@ var NumberFieldInput = React65__default.default.forwardRef(
           fieldHeight,
           fieldPaddingHorizontal,
           fullWidth,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            StyledTextInput,
-            __spreadValues({
-              ref,
-              inputColor: tokens3.colour.field.text.default,
-              inputFontFamily: resolvedInputFontFamily,
-              inputFontWeight: resolvedInputFontFamily === typographyToken.fontFamily ? typographyToken.fontWeight : void 0,
-              inputFontSize: parseTokenValue34(typographyToken.fontSize),
-              keyboardType: "numeric",
-              editable: !disabled,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              onChangeText: handleChangeText,
-              defaultValue,
-              value,
-              style
-            }, rest)
-          )
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              StyledTextInput,
+              __spreadValues({
+                ref,
+                inputColor: tokens3.colour.field.text.default,
+                inputFontFamily: resolvedInputFontFamily,
+                inputFontWeight: resolvedInputFontFamily === typographyToken.fontFamily ? typographyToken.fontWeight : void 0,
+                inputFontSize: parseTokenValue34(typographyToken.fontSize),
+                hasInlineHelp: !!inlineHelpText,
+                keyboardType: "numeric",
+                editable: !disabled,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onChangeText: handleChangeText,
+                defaultValue,
+                value,
+                style
+              }, rest)
+            ),
+            inlineHelpText && /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.View,
+              {
+                style: {
+                  position: "absolute",
+                  bottom: 4,
+                  width: fieldMinWidth,
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Typography,
+                  {
+                    token: inputTokens3.description.text.default,
+                    color: inputTokens3.colour.description.default,
+                    children: inlineHelpText
+                  }
+                )
+              }
+            )
+          ]
         }
       ),
       showIncrementButton && /* @__PURE__ */ jsxRuntime.jsx(