fix: number input borderless and typography props, upgrade deps (#109)

package.json

@@ -52,9 +52,9 @@
     "@vanilla-extract/dynamic": "^2.0.3",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vue/babel-preset-app": "^5.0.8",
-    "@zag-js/number-input": "^0.15.0",
-    "@zag-js/react": "^0.15.0",
-    "@zag-js/vue": "^0.15.0",
+    "@zag-js/number-input": "^0.26.0",
+    "@zag-js/react": "^0.26.0",
+    "@zag-js/vue": "^0.26.0",
     "autoprefixer": "^10.4.14",
     "command-line-args": "^5.2.1",
     "copy-to-clipboard": "^3.3.3",

packages/react/package.json

@@ -50,8 +50,8 @@
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/dynamic": "^2.0.3",
     "@vanilla-extract/recipes": "^0.4.0",
-    "@zag-js/number-input": "^0.15.0",
-    "@zag-js/react": "^0.15.0",
+    "@zag-js/number-input": "^0.26.0",
+    "@zag-js/react": "^0.26.0",
     "animejs": "^3.2.1",
     "bignumber.js": "^9.1.1",
     "clsx": "^1.2.1",

packages/react/scaffolds/number-input/number-input.css.ts

@@ -1,11 +1,12 @@
 import { style } from "@vanilla-extract/css";
 
 export const borderless = style({
-  border: "0",
-  padding: "0",
+  border: "0 !important",
+  paddingTop: "0 !important",
+  paddingBottom: "0 !important",
   selectors: {
     "&:focus": {
-      boxShadow: "none",
+      boxShadow: "none !important",
     },
   },
 });

packages/react/scaffolds/number-input/number-input.tsx

@@ -1,4 +1,4 @@
-import React, { useId, useEffect, forwardRef } from "react";
+import React, { useId, forwardRef } from "react";
 import clx from "clsx";
 import * as numberInput from "@zag-js/number-input";
 import { useMachine, normalizeProps } from "@zag-js/react";
@@ -11,13 +11,17 @@ import {
   rootInput,
   rootInputFocused,
 } from "@/ui/text-field/text-field.css";
+import FieldLabel from "@/ui/field-label";
+import Stack from "@/ui/stack";
+import Box from "@/ui/box";
 import useTheme from "../hooks/use-theme";
 import * as styles from "./number-input.css";
 
 const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
   (props, forwardedRef) => {
     const {
       id = useId(),
+      label,
       disabled,
       readOnly,
       value,
@@ -26,7 +30,6 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       step,
       onChange,
       onFocus,
-      onBlur,
       size = "sm",
       intent = "default",
       name,
@@ -35,6 +38,7 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     } = props;
 
     const { theme } = useTheme();
+
     const [state, send] = useMachine(
       numberInput.machine({
         id,
@@ -45,65 +49,65 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         max,
         step,
         name,
-        minFractionDigits,
-        maxFractionDigits,
-        onChange: (details) => {
-          onChange?.(details);
-        },
-        onFocus: (details) => {
-          onFocus?.(details);
-        },
-        onBlur: (details) => {
-          onBlur?.(details);
+        formatOptions: {
+          maximumFractionDigits: maxFractionDigits,
+          minimumFractionDigits: minFractionDigits,
         },
+        onValueChange: onChange,
+        onFocusChange: onFocus,
       })
     );
 
     const api = numberInput.connect(state, send, normalizeProps);
 
-    useEffect(() => {
-      if (!api.isFocused && value) {
-        api.setValue(value);
-      }
-    }, [value]);
-
     return (
       <div {...api.rootProps} className={props?.className}>
-        <div
-          className={clx(
-            rootInput,
-            api.isFocused ? rootInputFocused : null,
-            props.disabled
-              ? inputRootIntent.disabled
-              : inputRootIntent[props.intent],
-            props.inputContainer
+        <Stack direction="vertical" space="$4">
+          {label && (
+            <FieldLabel htmlFor={id} label={label} {...api.labelProps} />
           )}
-        >
-          {props.canDecrese && React.isValidElement(props.startAddon)
-            ? React.cloneElement(props.startAddon, api.decrementTriggerProps)
-            : props?.startAddon}
 
-          <input
-            {...api.inputProps}
-            ref={forwardedRef}
-            disabled={disabled}
-            id={id}
-            value={value}
+          <div
             className={clx(
-              inputStyles[theme],
-              inputSizes[size],
-              props.disabled ? inputIntent.disabled : inputIntent[intent],
-              props.inputClassName,
-              props.borderless && styles.borderless,
-              disabled && props.startAddon ? styles.withStartAddon : null,
-              disabled && props.endAddon ? styles.withEndAddon : null
+              rootInput,
+              api.isFocused ? rootInputFocused : null,
+              props.disabled
+                ? inputRootIntent.disabled
+                : inputRootIntent[props.intent],
+              props.inputContainer
             )}
-          />
+          >
+            {props.canDecrese && React.isValidElement(props.startAddon)
+              ? React.cloneElement(props.startAddon, api.decrementTriggerProps)
+              : props?.startAddon}
+
+            <Box
+              as="input"
+              attributes={{
+                ...api.inputProps,
+                id,
+                disabled,
+                value,
+              }}
+              ref={forwardedRef}
+              textAlign={props.textAlign}
+              fontSize={props.fontSize}
+              className={clx(
+                inputStyles[theme],
+                inputSizes[size],
+                props.disabled ? inputIntent.disabled : inputIntent[intent],
+                props.inputClassName,
+                props.borderless && styles.borderless,
+                disabled && props.startAddon ? styles.withStartAddon : null,
+                disabled && props.endAddon ? styles.withEndAddon : null
+              )}
+            />
 
-          {props.canIncrease && React.isValidElement(props.endAddon)
-            ? React.cloneElement(props.endAddon, api.decrementTriggerProps)
-            : props?.endAddon}
-        </div>
+            {props.canIncrease && React.isValidElement(props.endAddon)
+              ? React.cloneElement(props.endAddon, api.decrementTriggerProps)
+              : props?.endAddon}
+          </div>
+        </Stack>
       </div>
     );
   }

packages/react/scaffolds/number-input/number-input.types.tsx

@@ -1,10 +1,15 @@
 import { ReactNode } from "react";
+import type { Sprinkles } from "@/styles/rainbow-sprinkles.css";
 
 type Value = {
   value: string;
   valueAsNumber: number;
 };
 
+type FocusChangeValue = {
+  focused: boolean;
+} & Value;
+
 export interface NumberInputProps {
   id?: string;
   /**
@@ -38,15 +43,9 @@ export interface NumberInputProps {
   /**
    * Function invoked when the number input is focused
    */
-  onFocus?: (
-    details: Value & {
-      srcElement: HTMLElement | null;
-    }
-  ) => void;
-  /**
-   * The value of the input when it is blurred
-   */
-  onBlur?: (details: Value) => void;
+  onFocus?: (details: FocusChangeValue) => void;
+  textAlign?: Sprinkles["textAlign"];
+  fontSize?: Sprinkles["fontSize"];
   size?: "sm" | "md";
   placeholder?: string | undefined;
   intent?: "default" | "error";

packages/react/stories/NumberInput.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import NumberInput from "../src/ui/number-input";
+
+const meta: Meta<typeof NumberInput> = {
+  component: NumberInput,
+  title: "NumberInput",
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {},
+  render: () => {
+    const [value, setValue] = React.useState("0");
+
+    return (
+      <NumberInput
+        id="my-num-input"
+        label="My Amount"
+        min={0}
+        max={2000}
+        textAlign="right"
+        value={value}
+        onChange={(details) => {
+          console.log("Change", details.value);
+          setValue(details.value);
+        }}
+      />
+    );
+  },
+};

packages/vue/package.json

@@ -21,7 +21,7 @@
     "@vanilla-extract/css": "^1.12.0",
     "@vanilla-extract/dynamic": "^2.0.3",
     "@vanilla-extract/recipes": "^0.4.0",
-    "@zag-js/vue": "^0.2.10",
+    "@zag-js/vue": "^0.26.0",
     "animejs": "^3.2.1",
     "copy-to-clipboard": "^3.3.3",
     "immer": "^9.0.19",

src/ui/field-label/field-label.lite.tsx

@@ -18,7 +18,11 @@ export default function FieldLabel(props: FieldLabelProps) {
             <Show
               when={props.htmlFor === false}
               else={
-                <label id={props.id} htmlFor={props.htmlFor as any}>
+                <label
+                  id={props.id}
+                  htmlFor={props.htmlFor as any}
+                  {...props.labelAttributes}
+                >
                   <span
                     className={clx(
                       fieldlabelStyle,
@@ -30,7 +34,10 @@ export default function FieldLabel(props: FieldLabelProps) {
                 </label>
               }
             >
-              <p className={clx(fieldlabelStyle, fieldLabelSizes[props.size])}>
+              <p
+                className={clx(fieldlabelStyle, fieldLabelSizes[props.size])}
+                {...props.labelAttributes}
+              >
                 <span>{props.label}</span>
               </p>
             </Show>

src/ui/field-label/field-label.types.tsx

@@ -8,6 +8,6 @@ export interface FieldLabelProps extends BaseComponentProps {
   size?: "sm" | "md" | "lg";
   description?: BaseComponentProps["children"];
   descriptionId?: string;
-  data?: any;
   attributes?: any;
+  labelAttributes?: any;
 }