@sanity/ui 1.0.0-beta.29 → 1.0.0-beta.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.0.0-beta.29",
+  "version": "1.0.0-beta.30",
   "sideEffects": false,
   "types": "./dist/types/src/index.d.ts",
   "source": "./src/index.ts",
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^1.0.0",
-    "@sanity/color": "2.1.19-beta.0",
-    "@sanity/icons": "1.3.9-beta.0",
+    "@sanity/color": "2.1.19-beta.1",
+    "@sanity/icons": "1.3.9-beta.1",
     "framer-motion": "^7.5.3",
     "react-refractor": "^2.1.7"
   },
@@ -69,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ce4a5a2a78b3368407da8910038c5cc19e3b9a2d"
+  "gitHead": "9555be81dc9d9ad2997ab34ecb59c91ec0b27a49"
 }

package/src/primitives/textArea/textArea.tsx

@@ -89,10 +89,10 @@ export const TextArea = forwardRef(function TextArea(
           ref={ref}
         />
         <Presentation
-          $border={border}
           $radius={useArrayProp(radius)}
           $scheme={rootTheme.scheme}
           $tone={rootTheme.tone}
+          data-border={border ? '' : undefined}
           data-scheme={rootTheme.scheme}
           data-tone={rootTheme.tone}
         />

package/src/primitives/textInput/textInput.tsx

@@ -211,12 +211,12 @@ export const TextInput = forwardRef(function TextInput(
   const presentationNode = useMemo(
     () => (
       <Presentation
-        $border={border}
         $hasPrefix={$hasPrefix}
         $hasSuffix={$hasSuffix}
         $radius={radius}
         $scheme={rootTheme.scheme}
         $tone={rootTheme.tone}
+        data-border={border ? '' : undefined}
         data-scheme={rootTheme.scheme}
         data-tone={rootTheme.tone}
       >

package/src/styles/input/textInputStyle.ts

@@ -19,7 +19,6 @@ export interface TextInputInputStyleProps {
  * @internal
  */
 export interface TextInputRepresentationStyleProps {
-  $border?: boolean
   $hasPrefix?: boolean
   $hasSuffix?: boolean
   $scheme: ThemeColorSchemeKey
@@ -129,7 +128,7 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
 export function textInputRepresentationStyle(
   props: TextInputRepresentationStyleProps & ThemeProps
 ): FlattenSimpleInterpolation {
-  const {$border, $hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
+  const {$hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
   const {focusRing, input} = theme.sanity
   const color = theme.sanity.color.input
 
@@ -158,41 +157,51 @@ export function textInputRepresentationStyle(
       --card-fg-color: ${color.default.enabled.fg};
 
       /* enabled */
-      *:not(:disabled) + & {
-        --input-box-shadow: ${$border
-          ? focusRingBorderStyle({color: color.default.enabled.border, width: input.border.width})
-          : undefined};
+      *:not(:disabled) + &[data-border] {
+        --input-box-shadow: ${focusRingBorderStyle({
+          color: color.default.enabled.border,
+          width: input.border.width,
+        })};
       }
 
       /* invalid */
       *:not(:disabled):invalid + & {
         --card-bg-color: ${color.invalid.enabled.bg};
         --card-fg-color: ${color.invalid.enabled.fg};
-        --input-box-shadow: ${$border
-          ? focusRingBorderStyle({color: color.invalid.enabled.border, width: input.border.width})
-          : 'none'};
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.invalid.enabled.border,
+            width: input.border.width,
+          })};
+        }
       }
 
       /* focused */
       *:not(:disabled):focus + & {
-        --input-box-shadow: ${focusRingStyle({
-          border: $border
-            ? {color: color.default.enabled.border, width: input.border.width}
-            : undefined,
-          focusRing,
-        })};
+        &[data-border] {
+          --input-box-shadow: ${focusRingStyle({
+            border: {color: color.default.enabled.border, width: input.border.width},
+            focusRing,
+          })};
+        }
+
+        &:not([data-border]) {
+          --input-box-shadow: ${focusRingStyle({focusRing})};
+        }
       }
 
       /* disabled */
       *:disabled + & {
         --card-bg-color: ${color.default.disabled.bg} !important;
         --card-fg-color: ${color.default.disabled.fg} !important;
-        --input-box-shadow: ${$border
-          ? focusRingBorderStyle({
-              color: color.default.disabled.border,
-              width: input.border.width,
-            })
-          : 'none'};
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.default.disabled.border,
+            width: input.border.width,
+          })};
+        }
       }
 
       /* readOnly */
@@ -208,13 +217,11 @@ export function textInputRepresentationStyle(
           --card-fg-color: ${color.default.hovered.fg};
         }
 
-        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + & {
-          --input-box-shadow: ${$border
-            ? focusRingBorderStyle({
-                color: color.default.hovered.border,
-                width: input.border.width,
-              })
-            : 'none'};
+        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.default.hovered.border,
+            width: input.border.width,
+          })};
         }
       }
     }