@sanity/ui 4.0.0-static.2 → 4.0.0-static.21

package/src/core/primitives/textInput/__workshop__/typed.tsx

@@ -5,6 +5,7 @@ import {useCallback, useState} from 'react'
 import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '$workshop'
 
 export default function TypedStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text')
 
   const [value, setValue] = useState('')
@@ -16,7 +17,12 @@ export default function TypedStory(): React.JSX.Element {
   return (
     <Box padding={4}>
       <Container width={1}>
-        <TextInput onChange={handleChange} type={type} value={value} />
+        <TextInput
+          onChange={handleChange}
+          // @ts-expect-error - TODO: fix this
+          type={type}
+          value={value}
+        />
       </Container>
     </Box>
   )

package/src/core/primitives/textInput/textInput.tsx

@@ -99,7 +99,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     suffix,
     customValidity,
     type = 'text',
-    weight: _width, // eslint-disable-line @typescript-eslint/no-unused-vars
+    weight: _width,
     width,
     ...rest
   } = props as TextInputProps<typeof DEFAULT_TEXT_INPUT_ELEMENT>

package/src/core/primitives/tooltip/__workshop__/customPortal.tsx

@@ -25,6 +25,7 @@ export default function CustomPortalStory(): React.JSX.Element {
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useSelect('Portal', PORTAL_OPTIONS)
   const useBoundaryElement = useBoolean('Use boundary element', true)
@@ -60,6 +61,7 @@ export default function CustomPortalStory(): React.JSX.Element {
                     boundaryElement={useBoundaryElement ? boundaryElement : null}
                     content={content ? <Text size={1}>{content}</Text> : undefined}
                     padding={2}
+                    // @ts-expect-error - TODO: fix this
                     placement={placement}
                     portal={portal}
                   >

package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx

@@ -9,6 +9,7 @@ export default function OverflowingBoundaryStory(): React.JSX.Element {
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useBoolean('Portal', false)
   const useBoundaryElement = useBoolean('Use boundary element', true)
@@ -56,6 +57,7 @@ export default function OverflowingBoundaryStory(): React.JSX.Element {
             <Tooltip
               content={<Text size={1}>{content}</Text>}
               padding={2}
+              // @ts-expect-error - TODO: fix this
               placement={placement}
               portal={portal}
             >

package/src/core/primitives/tooltip/__workshop__/props.tsx

@@ -11,11 +11,14 @@ import {
 export default function PropsStory(): React.JSX.Element {
   const arrow = useBoolean('Arrow', false)
   const content = useText('Content', 'Tooltip content')
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useBoolean('Portal', true)
   const openDelay = useNumber('Open Delay', 200)
   const closeDelay = useNumber('Close Delay', 200)
+  // @ts-expect-error - TODO: fix this
   const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
 
   return (
@@ -41,9 +44,12 @@ export default function PropsStory(): React.JSX.Element {
             <Tooltip
               arrow={arrow}
               content={<Text size={1}>{content}</Text>}
+              // @ts-expect-error - TODO: fix this
               padding={padding}
+              // @ts-expect-error - TODO: fix this
               placement={placement}
               portal={portal}
+              // @ts-expect-error - TODO: fix this
               shadow={shadow}
               delay={{
                 open: openDelay,
@@ -81,9 +87,12 @@ export default function PropsStory(): React.JSX.Element {
                   close: 100,
                 }}
                 content={<Text size={1}>{content}</Text>}
+                // @ts-expect-error - TODO: fix this
                 padding={padding}
+                // @ts-expect-error - TODO: fix this
                 placement={placement}
                 portal={portal}
+                // @ts-expect-error - TODO: fix this
                 shadow={shadow}
               >
                 <Button mode="bleed" text="Hover me" />
@@ -96,9 +105,12 @@ export default function PropsStory(): React.JSX.Element {
                   close: 100,
                 }}
                 content={<Text size={1}>{content}</Text>}
+                // @ts-expect-error - TODO: fix this
                 padding={padding}
+                // @ts-expect-error - TODO: fix this
                 placement={placement}
                 portal={portal}
+                // @ts-expect-error - TODO: fix this
                 shadow={shadow}
               >
                 <Button mode="bleed" text="Or me" />

package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx

@@ -9,6 +9,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'right')
   const portal = useBoolean('Portal', true)
   const useBoundaryElement = useBoolean('Use boundary element', true)
@@ -38,6 +39,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >
@@ -46,6 +48,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >
@@ -58,6 +61,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >
@@ -70,6 +74,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >

package/src/css/primitives/avatar/avatar.css.ts

@@ -137,11 +137,15 @@ export const image: string = _style(layers.primitives, {
 })
 
 globalStyle(`${image} img`, {
-  display: 'block',
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover',
-  borderRadius: 'inherit',
+  '@layer': {
+    [layers.primitives]: {
+      display: 'block',
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      borderRadius: 'inherit',
+    },
+  },
 })
 
 export const imageOutline: string = _style(layers.primitives, {

package/src/css/primitives/card/__workshop__/color.tsx

@@ -20,10 +20,18 @@ interface ColorRecordNode extends Record<string, ColorNode> {}
 type ColorNode = string | ColorRecordNode
 
 export default function ColorStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
 
   return (
-    <Card display="flex" flexDirection="column" gap={4} padding={4} tone={tone}>
+    <Card
+      display="flex"
+      flexDirection="column"
+      gap={4}
+      padding={4}
+      // @ts-expect-error - TODO: fix this
+      tone={tone}
+    >
       {Object.entries(vars.color).map(([key, value]) => {
         if (key === 'palette') {
           return null

package/src/css/primitives/card/card.css.ts

@@ -134,6 +134,16 @@ export const root: string = _style(layers.primitives, {
         [vars.color.muted.fg]: vars.color.tinted.default.border[2],
       },
     },
+
+    'a&[data-focus-ring]:focus, button&[data-focus-ring]:focus': {
+      outline: `${vars.card.focusRing.width} solid ${vars.color.focusRing}`,
+      outlineOffset: vars.card.focusRing.offset,
+    },
+
+    'a&[data-focus-ring]:focus:not(:focus-visible), button&[data-focus-ring]:focus:not(:focus-visible)':
+      {
+        outline: 'none',
+      },
   },
 })
 

package/src/css/theme/buildCSSTheme.ts

@@ -79,6 +79,10 @@ export function buildCSSTheme(options?: CSSThemeOptions): ThemeTokens {
       border: {
         width: px(theme.card.border.width),
       },
+      focusRing: {
+        offset: px(theme.card.focusRing.offset),
+        width: px(theme.card.focusRing.width),
+      },
       shadow: {
         outline: px(theme.card.shadow.outline),
       },

package/src/css/types.ts

@@ -183,6 +183,10 @@ export type CoreThemeTokens = {
     border: {
       width: string
     }
+    focusRing: {
+      offset: string
+      width: string
+    }
     shadow: {
       outline: string
     }

package/src/css/vars.css.ts

@@ -74,6 +74,10 @@ const themeTokens: CoreThemeTokens = {
     border: {
       width: '',
     },
+    focusRing: {
+      offset: '',
+      width: '',
+    },
     shadow: {
       outline: '',
     },

package/dist/_chunks-cjs/refractor.cjs

@@ -1,22 +0,0 @@
-"use strict";
-var jsxRuntime = require("react/jsx-runtime"), compilerRuntime = require("react/compiler-runtime"), reactRefractor = require("react-refractor");
-function LazyRefractor(props) {
-  const $ = compilerRuntime.c(13), {
-    language: languageProp,
-    value
-  } = props, language = typeof languageProp == "string" ? languageProp : void 0;
-  let t0;
-  $[0] !== language ? (t0 = language ? reactRefractor.hasLanguage(language) : !1, $[0] = language, $[1] = t0) : t0 = $[1];
-  const registered = t0;
-  let t1;
-  $[2] !== language || $[3] !== registered || $[4] !== value ? (t1 = !(language && registered) && /* @__PURE__ */ jsxRuntime.jsx("code", { children: value }), $[2] = language, $[3] = registered, $[4] = value, $[5] = t1) : t1 = $[5];
-  let t2;
-  $[6] !== language || $[7] !== registered || $[8] !== value ? (t2 = language && registered && /* @__PURE__ */ jsxRuntime.jsx(reactRefractor.Refractor, { inline: !0, language, value: String(value) }), $[6] = language, $[7] = registered, $[8] = value, $[9] = t2) : t2 = $[9];
-  let t3;
-  return $[10] !== t1 || $[11] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    t1,
-    t2
-  ] }), $[10] = t1, $[11] = t2, $[12] = t3) : t3 = $[12], t3;
-}
-exports.default = LazyRefractor;
-//# sourceMappingURL=refractor.cjs.map

package/dist/_chunks-cjs/refractor.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"refractor.cjs","sources":["../../src/core/primitives/code/refractor.tsx"],"sourcesContent":["import {hasLanguage, Refractor} from 'react-refractor'\n\nexport default function LazyRefractor(\n  props: Partial<Pick<React.ComponentProps<typeof Refractor>, 'language'>> & {\n    value: React.ReactNode\n  },\n): React.JSX.Element {\n  const {language: languageProp, value} = props\n  const language = typeof languageProp === 'string' ? languageProp : undefined\n  const registered = language ? hasLanguage(language) : false\n\n  return (\n    <>\n      {!(language && registered) && <code>{value}</code>}\n      {language && registered && <Refractor inline language={language} value={String(value)} />}\n    </>\n  )\n}\n"],"names":["LazyRefractor","props","$","_c","language","languageProp","value","undefined","t0","hasLanguage","registered","t1","t2","Refractor","String","t3"],"mappings":";;AAEA,SAAeA,cAAAC,OAAA;AAAA,QAAAC,IAAAC,kBAAA,EAAA,GAKb;AAAA,IAAAC,UAAAC;AAAAA,IAAAC;AAAAA,EAAAA,IAAwCL,OACxCG,WAAiB,OAAOC,gBAAiB,WAAWA,eAAYE;AAAY,MAAAC;AAAAN,WAAAE,YACzDI,KAAAJ,WAAWK,eAAAA,YAAYL,QAAQ,IAAC,IAAQF,OAAAE,UAAAF,OAAAM,MAAAA,KAAAN,EAAA,CAAA;AAA3D,QAAAQ,aAAmBF;AAAwC,MAAAG;AAAAT,IAAA,CAAA,MAAAE,YAAAF,SAAAQ,cAAAR,EAAA,CAAA,MAAAI,SAItDK,KAAA,EAAEP,YAAYM,wDAAsBJ,UAAAA,MAAAA,CAAM,GAAOJ,OAAAE,UAAAF,OAAAQ,YAAAR,OAAAI,OAAAJ,OAAAS,MAAAA,KAAAT,EAAA,CAAA;AAAA,MAAAU;AAAAV,IAAA,CAAA,MAAAE,YAAAF,SAAAQ,cAAAR,EAAA,CAAA,MAAAI,SACjDM,KAAAR,YAAYM,6CAAeG,eAAAA,WAAA,EAAU,QAAA,IAAiBT,UAAiB,OAAAU,OAAOR,KAAK,EAAA,CAAC,GAAIJ,OAAAE,UAAAF,OAAAQ,YAAAR,OAAAI,OAAAJ,OAAAU,MAAAA,KAAAV,EAAA,CAAA;AAAA,MAAAa;AAAA,SAAAb,EAAA,EAAA,MAAAS,MAAAT,UAAAU,MAF3FG,4DACGJ,UAAAA;AAAAA,IAAAA;AAAAA,IACAC;AAAAA,EAAAA,EAAAA,CAAwF,GACxFV,QAAAS,IAAAT,QAAAU,IAAAV,QAAAa,MAAAA,KAAAb,EAAA,EAAA,GAHHa;AAGG;;"}