From 62d82786aaee4477cf123780e0a80943c84d3ce3 Mon Sep 17 00:00:00 2001
From: Gabriele Petronella <gabriele@buildo.io>
Date: Mon, 21 Oct 2024 14:59:48 +0200
Subject: [PATCH 1/9] Use flex positioning for BaseTextInput accessories

---
 .../src/TextField/BaseTextInput.tsx           | 57 ++++++++-----------
 1 file changed, 23 insertions(+), 34 deletions(-)

diff --git a/packages/bento-design-system/src/TextField/BaseTextInput.tsx b/packages/bento-design-system/src/TextField/BaseTextInput.tsx
index 07c04d6ab..571877b25 100644
--- a/packages/bento-design-system/src/TextField/BaseTextInput.tsx
+++ b/packages/bento-design-system/src/TextField/BaseTextInput.tsx
@@ -6,7 +6,6 @@ import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
 import { inputRecipe } from "../Field/Field.css";
 import { bodyRecipe } from "../Typography/Body/Body.css";
 import { getReadOnlyBackgroundStyle } from "../Field/utils";
-import useDimensions from "react-cool-dimensions";
 import { match } from "ts-pattern";
 import { Columns } from "../Layout/Columns";
 import { IconButton } from "../IconButton/IconButton";
@@ -18,9 +17,10 @@ type Props = {
   inputRef: React.Ref<HTMLInputElement>;
   placeholder?: LocalizedString;
   validationState?: "valid" | "invalid";
-  type?: "text" | "email" | "url" | "password";
+  type?: "text" | "email" | "url" | "password" | "search";
   disabled?: boolean;
   isReadOnly?: boolean;
+  leftAccessory?: Children;
   rightAccessory?: Children;
   showPasswordLabel?: never;
   hidePasswordLabel?: never;
@@ -30,11 +30,6 @@ export function BaseTextInput(props: Props) {
   const config = useBentoConfig().input;
   const { defaultMessages } = useDefaultMessages();
 
-  const { observe: rightAccessoryRef, width: rightAccessoryWidth } = useDimensions({
-    // This is needed to include the padding in the width
-    useBorderBoxSize: true,
-  });
-
   const [showPassword, setShowPassword] = useState(false);
   const passwordIcon = showPassword ? config.passwordHideIcon : config.passwordShowIcon;
   const passwordIconLabel = showPassword
@@ -43,13 +38,13 @@ export function BaseTextInput(props: Props) {
 
   const type = match(props.type ?? "text")
     .with("password", () => (showPassword ? "text" : "password"))
-    .with("text", "email", "url", () => props.type)
+    .with("text", "email", "url", "search", () => props.type)
     .exhaustive();
 
   const rightAccessory = match(props.type ?? "text")
     .with("password", () => (
       // if we have both a rightAccessory and type='password', display the accessory on the left of the password toggle field
-      <Columns space={config.paddingX} alignY="center">
+      <Columns space={config.internalSpacing} alignY="center">
         <IconButton
           size={config.passwordIconSize}
           icon={passwordIcon}
@@ -61,11 +56,25 @@ export function BaseTextInput(props: Props) {
         {props.rightAccessory}
       </Columns>
     ))
-    .with("email", "text", "url", () => props.rightAccessory)
+    .with("email", "text", "url", "search", () => props.rightAccessory)
     .exhaustive();
 
   return (
-    <Box position="relative" display="flex">
+    <Box
+      display="flex"
+      className={inputRecipe({ validation: "valid" })}
+      gap={config.internalSpacing}
+      paddingX={config.paddingX}
+      paddingY={config.paddingY}
+      background={config.background.default}
+      {...getRadiusPropsFromConfig(config.radius)}
+      style={getReadOnlyBackgroundStyle(config)}
+    >
+      {props.leftAccessory && (
+        <Box display="flex" justifyContent="center" alignItems="center">
+          {props.leftAccessory}
+        </Box>
+      )}
       <Box
         as="input"
         {...props.inputProps}
@@ -77,9 +86,6 @@ export function BaseTextInput(props: Props) {
         width="full"
         height={undefined}
         className={[
-          inputRecipe({
-            validation: props.isReadOnly ? "notSet" : props.validationState ?? "notSet",
-          }),
           bodyRecipe({
             color: props.disabled ? "disabled" : "primary",
             weight: "default",
@@ -87,28 +93,11 @@ export function BaseTextInput(props: Props) {
             ellipsis: false,
           }),
         ]}
-        {...getRadiusPropsFromConfig(config.radius)}
-        paddingX={config.paddingX}
-        paddingY={config.paddingY}
-        background={config.background.default}
-        style={{
-          paddingRight: rightAccessory ? rightAccessoryWidth : undefined,
-          flexGrow: 1,
-          ...getReadOnlyBackgroundStyle(config),
-        }}
+        outline="none"
+        flexGrow={1}
       />
       {rightAccessory && (
-        <Box
-          ref={rightAccessoryRef}
-          position="absolute"
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-          paddingX={config.paddingX}
-          top={0}
-          bottom={0}
-          right={0}
-        >
+        <Box display="flex" justifyContent="center" alignItems="center">
           {rightAccessory}
         </Box>
       )}

From 349397804c67334068273ae9a6037bcba92c8f70 Mon Sep 17 00:00:00 2001
From: Gabriele Petronella <gabriele@buildo.io>
Date: Mon, 21 Oct 2024 15:00:07 +0200
Subject: [PATCH 2/9] Use BaseTextInput in SearchBar

---
 .../src/SearchBar/SearchBar.css.ts            | 20 -------
 .../src/SearchBar/SearchBar.tsx               | 58 ++++---------------
 packages/bento-design-system/src/reset.css.ts |  8 +++
 3 files changed, 19 insertions(+), 67 deletions(-)
 delete mode 100644 packages/bento-design-system/src/SearchBar/SearchBar.css.ts

diff --git a/packages/bento-design-system/src/SearchBar/SearchBar.css.ts b/packages/bento-design-system/src/SearchBar/SearchBar.css.ts
deleted file mode 100644
index 97209f0c7..000000000
--- a/packages/bento-design-system/src/SearchBar/SearchBar.css.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { bentoSprinkles } from "../internal";
-
-export const input = style([
-  bentoSprinkles({
-    outline: "none",
-  }),
-  {
-    selectors: {
-      [`&::-webkit-search-decoration,
-      &::-webkit-search-cancel-button,
-      &::-webkit-search-results-button,
-      &::-webkit-search-results-decoration`]: {
-        WebkitAppearance: "none",
-      },
-    },
-  },
-]);
-
-export const inputContainer = style({});
diff --git a/packages/bento-design-system/src/SearchBar/SearchBar.tsx b/packages/bento-design-system/src/SearchBar/SearchBar.tsx
index 9d9ce6c19..1a0dc91db 100644
--- a/packages/bento-design-system/src/SearchBar/SearchBar.tsx
+++ b/packages/bento-design-system/src/SearchBar/SearchBar.tsx
@@ -1,14 +1,9 @@
 import { useTextField } from "@react-aria/textfield";
 import { HTMLAttributes, useRef } from "react";
-import { LocalizedString, Box, Field, IconButton } from "..";
-import { inputRecipe } from "../Field/Field.css";
-import { bodyRecipe } from "../Typography/Body/Body.css";
-import { input, inputContainer } from "./SearchBar.css";
+import { LocalizedString, Field, IconButton, BaseTextInput } from "..";
 import { useDefaultMessages } from "../util/useDefaultMessages";
 import { useBentoConfig } from "../BentoConfigContext";
 import { AtLeast } from "../util/AtLeast";
-import { getReadOnlyBackgroundStyle } from "../Field/utils";
-import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
 
 type Props = AtLeast<Pick<HTMLAttributes<HTMLInputElement>, "aria-label" | "aria-labelledby">> & {
   value: string;
@@ -34,7 +29,7 @@ export function SearchBar(props: Props) {
 
   const { defaultMessages } = useDefaultMessages();
 
-  const rightAccessoryContent =
+  const rightAccessory =
     props.value.length > 0 ? (
       <IconButton
         label={props.clearButtonLabel ?? defaultMessages.SearchBar.clearButtonLabel}
@@ -53,46 +48,15 @@ export function SearchBar(props: Props) {
       assistiveTextProps={descriptionProps}
       errorMessageProps={errorMessageProps}
     >
-      <Box
-        display="flex"
-        className={[inputRecipe({ validation: "valid" }), inputContainer]}
-        gap={config.internalSpacing}
-        paddingX={config.paddingX}
-        background={config.background.default}
-        paddingY={config.paddingY}
-        {...getRadiusPropsFromConfig(config.radius)}
-        style={getReadOnlyBackgroundStyle(config)}
-      >
-        <Box display="flex" justifyContent="center" alignItems="center">
-          {config.searchIcon({ size: config.searchIconSize })}
-        </Box>
-        <Box
-          as="input"
-          type="search"
-          ref={inputRef}
-          {...inputProps}
-          // NOTE(gabro): this is to please TS, since the inputProps type is very broad
-          color={undefined}
-          width="full"
-          height={undefined}
-          className={[
-            input,
-            bodyRecipe({
-              color: props.disabled ? "disabled" : "primary",
-              weight: "default",
-              size: config.fontSize,
-              ellipsis: false,
-            }),
-          ]}
-          display="flex"
-          flexGrow={1}
-        />
-        {rightAccessoryContent && (
-          <Box display="flex" justifyContent="center" alignItems="center">
-            {rightAccessoryContent}
-          </Box>
-        )}
-      </Box>
+      <BaseTextInput
+        leftAccessory={config.searchIcon({ size: config.searchIconSize })}
+        rightAccessory={rightAccessory}
+        inputProps={inputProps}
+        inputRef={inputRef}
+        validationState="valid"
+        type="search"
+        {...props}
+      />
     </Field>
   );
 }
diff --git a/packages/bento-design-system/src/reset.css.ts b/packages/bento-design-system/src/reset.css.ts
index 1a892f577..264efb39e 100644
--- a/packages/bento-design-system/src/reset.css.ts
+++ b/packages/bento-design-system/src/reset.css.ts
@@ -36,6 +36,14 @@ const input = style({
   ":disabled": {
     cursor: "inherit",
   },
+  selectors: {
+    [`&::-webkit-search-decoration,
+      &::-webkit-search-cancel-button,
+      &::-webkit-search-results-button,
+      &::-webkit-search-results-decoration`]: {
+      WebkitAppearance: "none",
+    },
+  },
 });
 
 const label = style({

From 0cb2bf797d17c4be742859f1ef875a2903c1207d Mon Sep 17 00:00:00 2001
From: Gabriele Petronella <gabriele@buildo.io>
Date: Mon, 21 Oct 2024 15:03:55 +0200
Subject: [PATCH 3/9] Use flex positioning for DateField's Input

---
 .../src/DateField/Input.tsx                   | 23 ++++---------------
 1 file changed, 4 insertions(+), 19 deletions(-)

diff --git a/packages/bento-design-system/src/DateField/Input.tsx b/packages/bento-design-system/src/DateField/Input.tsx
index 37fecc06d..ef7149117 100644
--- a/packages/bento-design-system/src/DateField/Input.tsx
+++ b/packages/bento-design-system/src/DateField/Input.tsx
@@ -19,7 +19,6 @@ import { useBentoConfig } from "../BentoConfigContext";
 import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
 import { Body } from "../Typography/Body/Body";
 import { Inline } from "../Layout/Inline";
-import useDimensions from "react-cool-dimensions";
 import { IconCalendar, IconMinus } from "../Icons";
 import { AriaButtonProps } from "@react-types/button";
 import { IconButton } from "../IconButton/IconButton";
@@ -89,11 +88,6 @@ export function Input(props: Props) {
   const config = useBentoConfig().input;
   const dateFieldConfig = useBentoConfig().dateField;
 
-  const { observe: rightAccessoryRef, width: rightAccessoryWidth } = useDimensions({
-    // This is needed to include the padding in the width
-    useBorderBoxSize: true,
-  });
-
   const { validationState, isDisabled, isReadOnly } = match(props)
     .with({ type: "single" }, (props) => {
       return {
@@ -128,6 +122,8 @@ export function Input(props: Props) {
   return (
     <Box
       {...getRadiusPropsFromConfig(config.radius)}
+      display="flex"
+      gap={config.internalSpacing}
       paddingX={config.paddingX}
       paddingY={config.paddingY}
       background={config.background.default}
@@ -144,8 +140,7 @@ export function Input(props: Props) {
           readOnly: isReadOnly,
         },
       ]}
-      style={{ paddingRight: rightAccessoryWidth, ...getReadOnlyBackgroundStyle(config) }}
-      position="relative"
+      style={{ ...getReadOnlyBackgroundStyle(config), justifyContent: "space-between" }}
       disabled={isDisabled}
       readOnly={isReadOnly}
     >
@@ -163,17 +158,7 @@ export function Input(props: Props) {
         </Columns>
       )}
       {!isReadOnly && (
-        <Box
-          ref={rightAccessoryRef}
-          position="absolute"
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-          paddingX={config.paddingX}
-          top={0}
-          bottom={0}
-          right={0}
-        >
+        <Box display="flex" justifyContent="center" alignItems="center">
           <IconButton
             kind="transparent"
             hierarchy="secondary"

From c3c4188ebfabc3df7bf6c0f9465b73cf31b4358e Mon Sep 17 00:00:00 2001
From: Gabriele Petronella <gabriele@buildo.io>
Date: Mon, 21 Oct 2024 15:06:50 +0200
Subject: [PATCH 4/9] Use flex positioning for BaseNumberInput

---
 .../src/NumberField/BaseNumberInput.tsx       | 42 ++++++-------------
 1 file changed, 13 insertions(+), 29 deletions(-)

diff --git a/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx b/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
index aa414d370..0e5977e62 100644
--- a/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
+++ b/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
@@ -1,6 +1,5 @@
 import { useLocale } from "@react-aria/i18n";
 import { useMemo } from "react";
-import useDimensions from "react-cool-dimensions";
 import { Label, LocalizedString, Box, Children, Columns } from "..";
 import { inputRecipe } from "../Field/Field.css";
 import { bodyRecipe } from "../Typography/Body/Body.css";
@@ -21,11 +20,6 @@ export function BaseNumberInput(props: Props) {
   const config = useBentoConfig().input;
   const { locale } = useLocale();
 
-  const { observe: rightAccessoryRef, width: rightAccessoryWidth } = useDimensions({
-    // This is needed to include the padding in the width
-    useBorderBoxSize: true,
-  });
-
   // Memoizing the currency code calculation to avoid repeating it at every render
   const currencyCode = useMemo((): LocalizedString | undefined => {
     if (props.kind === "currency") {
@@ -73,7 +67,7 @@ export function BaseNumberInput(props: Props) {
     .with([__.nullish, not(__.nullish)], () => rightAccessoryContent)
     .with([not(__.nullish), __.nullish], () => props.rightAccessory)
     .with([not(__.nullish), not(__.nullish)], () => (
-      <Columns space={config.paddingX} alignY="center">
+      <Columns space={config.internalSpacing} alignY="center">
         {props.rightAccessory}
         {rightAccessoryContent}
       </Columns>
@@ -81,7 +75,14 @@ export function BaseNumberInput(props: Props) {
     .exhaustive();
 
   return (
-    <Box position="relative" display="flex">
+    <Box
+      className={inputRecipe({ validation: props.isReadOnly ? "notSet" : props.validationState })}
+      style={getRadiusPropsFromConfig(config.radius)}
+      display="flex"
+      paddingX={config.paddingX}
+      paddingY={config.paddingY}
+      gap={config.internalSpacing}
+    >
       <Box
         as="input"
         {...props.inputProps}
@@ -92,7 +93,6 @@ export function BaseNumberInput(props: Props) {
         width="full"
         height={undefined}
         className={[
-          inputRecipe({ validation: props.isReadOnly ? "notSet" : props.validationState }),
           bodyRecipe({
             color: props.disabled ? "disabled" : "primary",
             weight: "default",
@@ -100,29 +100,13 @@ export function BaseNumberInput(props: Props) {
             ellipsis: false,
           }),
         ]}
-        {...getRadiusPropsFromConfig(config.radius)}
-        paddingX={config.paddingX}
-        paddingY={config.paddingY}
         background={config.background.default}
-        display="flex"
-        style={{
-          paddingRight: rightAccessoryWidth,
-          flexGrow: 1,
-          ...getReadOnlyBackgroundStyle(config),
-        }}
+        outline="none"
+        flexGrow={1}
+        style={getReadOnlyBackgroundStyle(config)}
       />
       {rightAccessory && (
-        <Box
-          ref={rightAccessoryRef}
-          position="absolute"
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-          paddingX={16}
-          top={0}
-          bottom={0}
-          right={0}
-        >
+        <Box display="flex" justifyContent="center" alignItems="center">
           {rightAccessory}
         </Box>
       )}

From 08df5592e703b071c6187286c0e0e3f10367b923 Mon Sep 17 00:00:00 2001
From: Gabriele Petronella <gabriele@buildo.io>
Date: Mon, 21 Oct 2024 15:07:40 +0200
Subject: [PATCH 5/9] Remove unused react-cool-dimensions dependency

---
 packages/bento-design-system/package.json |  1 -
 pnpm-lock.yaml                            | 10 ----------
 2 files changed, 11 deletions(-)

diff --git a/packages/bento-design-system/package.json b/packages/bento-design-system/package.json
index ad48c5270..44654907e 100644
--- a/packages/bento-design-system/package.json
+++ b/packages/bento-design-system/package.json
@@ -121,7 +121,6 @@
     "clsx": "1.2.1",
     "deepmerge-ts": "4.3.0",
     "lodash.pick": "4.4.0",
-    "react-cool-dimensions": "2.0.7",
     "react-dropzone": "14.2.9",
     "react-input-mask": "2.0.4",
     "react-is": "18.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f1d3cf6a..1877c81eb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -131,7 +131,6 @@ importers:
       postcss: 8.4.47
       prettier: 2.8.8
       react: 18.3.1
-      react-cool-dimensions: 2.0.7
       react-dom: 18.3.1
       react-dropzone: 14.2.9
       react-input-mask: 2.0.4
@@ -206,7 +205,6 @@ importers:
       clsx: 1.2.1
       deepmerge-ts: 4.3.0
       lodash.pick: 4.4.0
-      react-cool-dimensions: 2.0.7_react@18.3.1
       react-dropzone: 14.2.9_react@18.3.1
       react-input-mask: 2.0.4_nnrd3gsncyragczmpvfhocinkq
       react-is: 18.3.1
@@ -18667,14 +18665,6 @@ packages:
       react-dom: 18.3.1_react@18.3.1
     dev: true
 
-  /react-cool-dimensions/2.0.7_react@18.3.1:
-    resolution: {integrity: sha512-z1VwkAAJ5d8QybDRuYIXTE41RxGr5GYsv1bQhbOBE8cMfoZQZpcF0odL64vdgrQVzat2jayedj1GoYi80FWcbA==}
-    peerDependencies:
-      react: '>= 16.8.0 || 18'
-    dependencies:
-      react: 18.3.1
-    dev: false
-
   /react-dev-utils/12.0.1_ui7adrgquoqvodctsjvyz7u2xe:
     resolution: {integrity: sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==}
     engines: {node: '>=14'}

From 52991a8921da529432273ad4fc092a20362d583b Mon Sep 17 00:00:00 2001
From: Gabriele Petronella <gabriele@buildo.io>
Date: Mon, 21 Oct 2024 15:35:11 +0200
Subject: [PATCH 6/9] Fix typo

---
 .../bento-design-system/src/NumberField/BaseNumberInput.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx b/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
index 0e5977e62..2ac1a9375 100644
--- a/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
+++ b/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
@@ -77,11 +77,11 @@ export function BaseNumberInput(props: Props) {
   return (
     <Box
       className={inputRecipe({ validation: props.isReadOnly ? "notSet" : props.validationState })}
-      style={getRadiusPropsFromConfig(config.radius)}
       display="flex"
       paddingX={config.paddingX}
       paddingY={config.paddingY}
       gap={config.internalSpacing}
+      {...getRadiusPropsFromConfig(config.radius)}
     >
       <Box
         as="input"

From 166dcc9010818b05f69728b8ae7af9fe65a565e2 Mon Sep 17 00:00:00 2001
From: Gabriele Petronella <gabriele@buildo.io>
Date: Mon, 21 Oct 2024 16:02:20 +0200
Subject: [PATCH 7/9] Fix input styles

---
 .../src/Field/Field.css.ts                    | 113 ++++++++++--------
 .../src/NumberField/BaseNumberInput.tsx       |   7 +-
 .../src/TextField/BaseTextInput.tsx           |   9 +-
 3 files changed, 75 insertions(+), 54 deletions(-)

diff --git a/packages/bento-design-system/src/Field/Field.css.ts b/packages/bento-design-system/src/Field/Field.css.ts
index a7e756db9..43939501a 100644
--- a/packages/bento-design-system/src/Field/Field.css.ts
+++ b/packages/bento-design-system/src/Field/Field.css.ts
@@ -1,4 +1,4 @@
-import { createVar } from "@vanilla-extract/css";
+import { createVar, style } from "@vanilla-extract/css";
 import { bentoSprinkles } from "../internal/sprinkles.css";
 import { strictRecipe } from "../util/strictRecipe";
 import { vars } from "../vars.css";
@@ -7,66 +7,79 @@ export const readOnlyBackground = createVar();
 
 const notDisabled = ":not(:disabled):not([disabled])";
 
-export const inputRecipe = strictRecipe({
-  base: [
-    {
-      "::placeholder": {
-        color: vars.textColor.textSecondary,
-      },
-      selectors: {
-        "&:disabled, &[disabled]": {
-          background: vars.backgroundColor.backgroundPrimary,
+export const input = style({
+  background: "transparent",
+  "::placeholder": {
+    color: vars.textColor.textSecondary,
+  },
+  selectors: {
+    [`&:disabled::placeholder`]: {
+      color: vars.textColor.textDisabled,
+    },
+  },
+});
+
+const inputContainerRecipeVariants = {
+  validation: {
+    valid: [
+      bentoSprinkles({
+        boxShadow: {
+          default: "outlineInputEnabled",
+          hover: "outlineInputHover",
+          focus: "outlineInputFocus",
         },
-        "&:disabled::placeholder": {
-          color: vars.textColor.textDisabled,
+      }),
+      {
+        selectors: {
+          [`&:focus-within${notDisabled}`]: {
+            boxShadow: vars.boxShadow.outlineInputFocus,
+          },
         },
-        [`input&:read-only${notDisabled}, textarea&:read-only${notDisabled}, &.readOnly${notDisabled}, &[readonly]${notDisabled}`]:
-          {
-            background: readOnlyBackground,
+      },
+    ],
+    invalid: [
+      bentoSprinkles({
+        boxShadow: {
+          default: "outlineNegative",
+          focus: "outlineNegativeStrong",
+        },
+      }),
+      {
+        selectors: {
+          [`&:focus-within${notDisabled}`]: {
+            boxShadow: vars.boxShadow.outlineNegativeStrong,
           },
+        },
       },
-    },
+    ],
+    notSet: {},
+  },
+} as const;
+
+export const inputContainerRecipe = strictRecipe({
+  base: [
     bentoSprinkles({
       boxShadow: {
         disabled: "outlineInputDisabled",
       },
       outline: "none",
     }),
-  ],
-  variants: {
-    validation: {
-      valid: [
-        bentoSprinkles({
-          boxShadow: {
-            default: "outlineInputEnabled",
-            hover: "outlineInputHover",
-            focus: "outlineInputFocus",
-          },
-        }),
-        {
-          selectors: {
-            [`&:focus-within${notDisabled}`]: {
-              boxShadow: vars.boxShadow.outlineInputFocus,
-            },
-          },
+    {
+      selectors: {
+        [`&:disabled${notDisabled}, &[disabled]${notDisabled}`]: {
+          background: vars.backgroundColor.backgroundPrimary,
         },
-      ],
-      invalid: [
-        bentoSprinkles({
-          boxShadow: {
-            default: "outlineNegative",
-            focus: "outlineNegativeStrong",
-          },
-        }),
-        {
-          selectors: {
-            [`&:focus-within${notDisabled}`]: {
-              boxShadow: vars.boxShadow.outlineNegativeStrong,
-            },
+        [`input&:read-only${notDisabled}, textarea&:read-only${notDisabled}, &.readOnly${notDisabled}, &[readonly]${notDisabled}`]:
+          {
+            background: readOnlyBackground,
           },
-        },
-      ],
-      notSet: {},
+      },
     },
-  },
+  ],
+  variants: inputContainerRecipeVariants,
+});
+
+export const inputRecipe = strictRecipe({
+  base: input,
+  variants: inputContainerRecipeVariants,
 });
diff --git a/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx b/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
index 2ac1a9375..aa7f8d2cd 100644
--- a/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
+++ b/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
@@ -1,7 +1,7 @@
 import { useLocale } from "@react-aria/i18n";
 import { useMemo } from "react";
 import { Label, LocalizedString, Box, Children, Columns } from "..";
-import { inputRecipe } from "../Field/Field.css";
+import { inputContainerRecipe, input } from "../Field/Field.css";
 import { bodyRecipe } from "../Typography/Body/Body.css";
 import { BaseNumberProps, FormatProps } from "./types";
 import { useBentoConfig } from "../BentoConfigContext";
@@ -76,7 +76,9 @@ export function BaseNumberInput(props: Props) {
 
   return (
     <Box
-      className={inputRecipe({ validation: props.isReadOnly ? "notSet" : props.validationState })}
+      className={inputContainerRecipe({
+        validation: props.isReadOnly ? "notSet" : props.validationState,
+      })}
       display="flex"
       paddingX={config.paddingX}
       paddingY={config.paddingY}
@@ -93,6 +95,7 @@ export function BaseNumberInput(props: Props) {
         width="full"
         height={undefined}
         className={[
+          input,
           bodyRecipe({
             color: props.disabled ? "disabled" : "primary",
             weight: "default",
diff --git a/packages/bento-design-system/src/TextField/BaseTextInput.tsx b/packages/bento-design-system/src/TextField/BaseTextInput.tsx
index 571877b25..c4f75f3c1 100644
--- a/packages/bento-design-system/src/TextField/BaseTextInput.tsx
+++ b/packages/bento-design-system/src/TextField/BaseTextInput.tsx
@@ -3,7 +3,7 @@ import { Box } from "../Box/Box";
 import { Children } from "../util/Children";
 import { LocalizedString } from "../util/LocalizedString";
 import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
-import { inputRecipe } from "../Field/Field.css";
+import { inputContainerRecipe, input } from "../Field/Field.css";
 import { bodyRecipe } from "../Typography/Body/Body.css";
 import { getReadOnlyBackgroundStyle } from "../Field/utils";
 import { match } from "ts-pattern";
@@ -62,13 +62,17 @@ export function BaseTextInput(props: Props) {
   return (
     <Box
       display="flex"
-      className={inputRecipe({ validation: "valid" })}
+      className={inputContainerRecipe({
+        validation: props.isReadOnly ? "notSet" : props.validationState ?? "notSet",
+      })}
       gap={config.internalSpacing}
       paddingX={config.paddingX}
       paddingY={config.paddingY}
       background={config.background.default}
       {...getRadiusPropsFromConfig(config.radius)}
       style={getReadOnlyBackgroundStyle(config)}
+      disabled={props.disabled}
+      readOnly={props.isReadOnly}
     >
       {props.leftAccessory && (
         <Box display="flex" justifyContent="center" alignItems="center">
@@ -86,6 +90,7 @@ export function BaseTextInput(props: Props) {
         width="full"
         height={undefined}
         className={[
+          input,
           bodyRecipe({
             color: props.disabled ? "disabled" : "primary",
             weight: "default",

From c5f26ca666fcd5c1ce0625ce9a27525d0f36b6c5 Mon Sep 17 00:00:00 2001
From: Gabriele Petronella <gabriele@buildo.io>
Date: Wed, 23 Oct 2024 14:57:02 +0200
Subject: [PATCH 8/9] Fix layout glitches

---
 .../src/DateField/Input.tsx                   | 28 ++++++++++---------
 .../src/Field/Field.css.ts                    | 13 +++++++--
 .../src/NumberField/BaseNumberInput.tsx       |  1 +
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/packages/bento-design-system/src/DateField/Input.tsx b/packages/bento-design-system/src/DateField/Input.tsx
index ef7149117..40e9016a1 100644
--- a/packages/bento-design-system/src/DateField/Input.tsx
+++ b/packages/bento-design-system/src/DateField/Input.tsx
@@ -144,19 +144,21 @@ export function Input(props: Props) {
       disabled={isDisabled}
       readOnly={isReadOnly}
     >
-      {props.type === "single" ? (
-        <DateField fieldProps={props.fieldProps} />
-      ) : (
-        <Columns space={dateFieldConfig.internalPadding} alignY="stretch">
-          <DateField fieldProps={props.fieldProps.start} />
-          <Column width="content">
-            <Box display="flex" height="full" alignItems="center">
-              <IconMinus size={dateFieldConfig.rangeSeparatorSize} />
-            </Box>
-          </Column>
-          <DateField fieldProps={props.fieldProps.end} />
-        </Columns>
-      )}
+      <Box flexGrow={1}>
+        {props.type === "single" ? (
+          <DateField fieldProps={props.fieldProps} />
+        ) : (
+          <Columns space={dateFieldConfig.internalPadding} alignY="stretch">
+            <DateField fieldProps={props.fieldProps.start} />
+            <Column width="content">
+              <Box display="flex" height="full" alignItems="center">
+                <IconMinus size={dateFieldConfig.rangeSeparatorSize} />
+              </Box>
+            </Column>
+            <DateField fieldProps={props.fieldProps.end} />
+          </Columns>
+        )}
+      </Box>
       {!isReadOnly && (
         <Box display="flex" justifyContent="center" alignItems="center">
           <IconButton
diff --git a/packages/bento-design-system/src/Field/Field.css.ts b/packages/bento-design-system/src/Field/Field.css.ts
index 43939501a..a518b792d 100644
--- a/packages/bento-design-system/src/Field/Field.css.ts
+++ b/packages/bento-design-system/src/Field/Field.css.ts
@@ -66,7 +66,7 @@ export const inputContainerRecipe = strictRecipe({
     }),
     {
       selectors: {
-        [`&:disabled${notDisabled}, &[disabled]${notDisabled}`]: {
+        [`&:disabled, &[disabled]`]: {
           background: vars.backgroundColor.backgroundPrimary,
         },
         [`input&:read-only${notDisabled}, textarea&:read-only${notDisabled}, &.readOnly${notDisabled}, &[readonly]${notDisabled}`]:
@@ -80,6 +80,15 @@ export const inputContainerRecipe = strictRecipe({
 });
 
 export const inputRecipe = strictRecipe({
-  base: input,
+  base: [
+    input,
+    {
+      selectors: {
+        "&[disabled], &:disabled": {
+          boxShadow: vars.boxShadow.outlineInputDisabled,
+        },
+      },
+    },
+  ],
   variants: inputContainerRecipeVariants,
 });
diff --git a/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx b/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
index aa7f8d2cd..267d093fe 100644
--- a/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
+++ b/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
@@ -83,6 +83,7 @@ export function BaseNumberInput(props: Props) {
       paddingX={config.paddingX}
       paddingY={config.paddingY}
       gap={config.internalSpacing}
+      disabled={props.disabled}
       {...getRadiusPropsFromConfig(config.radius)}
     >
       <Box

From b6ee04e87e0c0958aa4ed3b8f2887b661275bff2 Mon Sep 17 00:00:00 2001
From: Gabriele Petronella <gabriele@buildo.io>
Date: Wed, 23 Oct 2024 15:03:43 +0200
Subject: [PATCH 9/9] Fix build

---
 packages/bento-design-system/src/Field/Field.css.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bento-design-system/src/Field/Field.css.ts b/packages/bento-design-system/src/Field/Field.css.ts
index a518b792d..72e7638d4 100644
--- a/packages/bento-design-system/src/Field/Field.css.ts
+++ b/packages/bento-design-system/src/Field/Field.css.ts
@@ -54,7 +54,7 @@ const inputContainerRecipeVariants = {
     ],
     notSet: {},
   },
-} as const;
+};
 
 export const inputContainerRecipe = strictRecipe({
   base: [