fix: number field

Author: yyyyaaa

packages/react/.ladle/components.tsx

@@ -8,6 +8,7 @@ import {
   ThemeProviderProps,
   createThemes,
 } from "../src";
+import "./reset.css";
 import "../src/styles/global.css";
 
 export const Provider: GlobalProvider = ({

packages/react/.ladle/reset.css

@@ -0,0 +1,107 @@
+/*
+
+  1. Use a more-intuitive box-sizing model.
+
+*/
+
+*,
+*::before,
+*::after {
+
+  box-sizing: border-box;
+
+}
+
+/*
+
+  2. Remove default margin
+
+*/
+
+* {
+
+  margin: 0;
+
+}
+
+/*
+
+  Typographic tweaks!
+
+  3. Add accessible line-height
+
+  4. Improve text rendering
+
+*/
+
+body {
+
+  line-height: 1.5;
+
+  -webkit-font-smoothing: antialiased;
+
+}
+
+/*
+
+  5. Improve media defaults
+
+*/
+
+img,
+picture,
+video,
+canvas,
+svg {
+
+  display: block;
+
+  max-width: 100%;
+
+}
+
+/*
+
+  6. Remove built-in form typography styles
+
+*/
+
+input,
+button,
+textarea,
+select {
+
+  font: inherit;
+
+}
+
+/*
+
+  7. Avoid text overflows
+
+*/
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+
+  overflow-wrap: break-word;
+
+}
+
+/*
+
+  8. Create a root stacking context
+
+*/
+
+#root,
+#__next {
+
+  isolation: isolate;
+
+}

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

@@ -4,17 +4,11 @@ import { useNumberField, useLocale, AriaNumberFieldProps } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 
 import clx from "clsx";
-import {
-  inputStyles,
-  inputSizes,
-  inputIntent,
-  inputRootIntent,
-  rootInput,
-  rootInputFocused,
-} from "@/ui/text-field/text-field.css";
+import * as textFieldStyles from "@/ui/text-field/text-field.css";
 import FieldLabel from "@/ui/field-label";
 import Stack from "@/ui/stack";
 import Box from "@/ui/box";
+import TextFieldAddon from "@/ui/text-field-addon";
 import useTheme from "../hooks/use-theme";
 import * as styles from "./number-field.css";
 import type { NumberInputProps } from "./number-field.types";
@@ -39,12 +33,18 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       id = useId(),
       label,
       isDisabled,
-      size = "sm",
-      intent = "default",
+      disabled,
+      readOnly,
+      isReadOnly,
+      size,
+      intent,
       clampValueOnBlur = true,
       formatOptions = defaultFormatOptions,
     } = props;
 
+    const isFinalDisabled = isDisabled ?? disabled ?? false;
+    const isFinalReadOnly = isReadOnly ?? readOnly ?? false;
+
     const { theme } = useTheme();
     const { locale } = useLocale();
     const [internalValue, setInternalValue] = useState<number | null>(
@@ -135,6 +135,7 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
 
       // Default mode, fallback to react-aria logic
       if (clampValueOnBlur) {
+        console.log("old mode");
         newValue = state.numberValue;
         applyFormatting(newValue);
         inputProps.onBlur?.(e);
@@ -201,6 +202,9 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       }
     }, [state.inputValue, formatValue, internalValue, strValue]);
 
+    const hasStartAddon = props.canDecrement && props.decrementButton != null;
+    const hasEndAddon = props.canIncrement && props.incrementButton != null;
+
     return (
       <Box className={props.className} {...props.attributes}>
         <Stack direction="vertical" space="$4">
@@ -209,22 +213,51 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           <div
             {...groupProps}
             className={clx(
-              rootInput,
-              isFocused ? rootInputFocused : null,
-              props.isDisabled
-                ? inputRootIntent.disabled
-                : inputRootIntent[props.intent],
+              textFieldStyles.textField({
+                intent: intent,
+                size: size,
+                theme: theme,
+              }),
               props.inputContainer,
             )}
+            tabIndex={props.disabled ? undefined : 0}
+            data-element-type="input"
+            data-intent={props.intent ?? "none"}
+            data-state={
+              isFocused ? "focused" : props.disabled ? "disabled" : "default"
+            }
           >
-            {props.canDecrement && React.isValidElement(props.decrementButton)
-              ? React.cloneElement(props.decrementButton, decrementButtonProps)
-              : props?.decrementButton}
+            {hasStartAddon && (
+              <TextFieldAddon
+                position="start"
+                divider={props.addonDivider ?? true}
+                intent={props.intent}
+                disabled={props.disabled}
+              >
+                {hasStartAddon && React.isValidElement(props.decrementButton)
+                  ? React.cloneElement(
+                      props.decrementButton,
+                      decrementButtonProps,
+                    )
+                  : props?.decrementButton}
+              </TextFieldAddon>
+            )}
 
             <Box
               as="input"
               attributes={{
                 ...inputProps,
+                "data-state": isFinalReadOnly
+                  ? "readonly"
+                  : isFocused
+                    ? "focused"
+                    : isFinalDisabled
+                      ? "disabled"
+                      : "default",
+                "data-intent": props.intent ?? "none",
+                "data-theme": theme,
+                readOnly: isFinalReadOnly,
+                disabled: isFinalDisabled,
                 value: inputValue,
                 onChange: clampValueOnBlur ? inputProps.onChange : handleChange,
                 onBlur: clampValueOnBlur ? inputProps.onBlur : handleBlur,
@@ -233,23 +266,42 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
               textAlign={props.textAlign}
               fontSize={props.fontSize}
               className={clx(
-                inputStyles[theme],
-                inputSizes[size],
-                props.isDisabled ? inputIntent.disabled : inputIntent[intent],
-                props.inputClassName,
-                isDisabled && props.decrementButton
+                textFieldStyles.input,
+                isFinalDisabled && props.decrementButton
                   ? styles.withDecrementButton
                   : null,
-                isDisabled && props.incrementButton
+                isFinalDisabled && props.incrementButton
                   ? styles.withIncrementButton
                   : null,
                 props.borderless ? styles.borderless : null,
+                props.inputClassName,
               )}
             />
 
-            {props.canIncrement && React.isValidElement(props.incrementButton)
-              ? React.cloneElement(props.incrementButton, incrementButtonProps)
-              : props?.incrementButton}
+            <div
+              className={textFieldStyles.borderElement}
+              data-theme={theme}
+              data-intent={props.intent ?? "none"}
+              data-state={
+                isFocused ? "focused" : props.disabled ? "disabled" : "default"
+              }
+            />
+
+            {hasEndAddon && (
+              <TextFieldAddon
+                position="end"
+                divider={props.addonDivider ?? true}
+                intent={props.intent}
+                disabled={props.disabled}
+              >
+                {hasEndAddon && React.isValidElement(props.incrementButton)
+                  ? React.cloneElement(
+                      props.incrementButton,
+                      incrementButtonProps,
+                    )
+                  : props?.incrementButton}
+              </TextFieldAddon>
+            )}
           </div>
         </Stack>
       </Box>

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

@@ -1,6 +1,11 @@
 import { ReactNode } from "react";
 import type { Sprinkles } from "@/styles/rainbow-sprinkles.css";
 import type { AriaNumberFieldProps } from "react-aria";
+import { TextFieldProps } from "@/ui/text-field/text-field.types";
+
+export type NumberFieldSize = TextFieldProps["size"];
+export type NumberFieldIntent = TextFieldProps["intent"];
+export type NumberFieldTextAlignment = Sprinkles["textAlign"];
 
 export interface NumberInputProps {
   // ==== Core logic props
@@ -16,7 +21,9 @@ export interface NumberInputProps {
   // ==== Form field props
   id?: string;
   isDisabled?: boolean;
+  disabled?: boolean;
   isReadOnly?: boolean;
+  readOnly?: boolean;
   autoFocus?: boolean;
   formatOptions?: AriaNumberFieldProps["formatOptions"];
   name?: string;
@@ -29,14 +36,15 @@ export interface NumberInputProps {
   onKeyDown?: AriaNumberFieldProps["onKeyDown"];
   onKeyUp?: AriaNumberFieldProps["onKeyUp"];
   // ==== Style props
-  textAlign?: Sprinkles["textAlign"];
+  textAlign?: NumberFieldTextAlignment;
   fontSize?: Sprinkles["fontSize"];
   attributes?: Sprinkles & React.HTMLAttributes<HTMLDivElement>;
-  size?: "sm" | "md" | "lg";
+  size?: NumberFieldSize;
   placeholder?: string | undefined;
-  intent?: "default" | "error";
+  intent?: NumberFieldIntent;
   className?: string;
   inputContainer?: string;
   inputClassName?: string;
   borderless?: boolean;
+  addonDivider?: boolean;
 }