@sanity/ui 4.0.0-static.8 → 4.0.0-v4.1

package/src/core/primitives/tooltip/{tooltip.tsx → Tooltip.tsx}

@@ -37,18 +37,19 @@ import {origin} from '../../middleware/origin'
 import type {ComponentType, Delay, Placement, Props} from '../../types'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
 import {getElementRef} from '../../utils/getElementRef'
-import {Portal} from '../../utils/portal/portal'
+import {Portal} from '../../utils/portal/Portal'
 import {usePortal} from '../../utils/portal/usePortal'
-import {CardProvider} from '../card/cardProvider'
+import {CardProvider} from '../card/CardProvider'
 import {useCard} from '../card/useCard'
-import type {LayerOwnProps} from '../layer/layer'
+import type {LayerOwnProps} from '../layer/Layer'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_TOOLTIP_DISTANCE,
   DEFAULT_TOOLTIP_PADDING,
 } from './constants'
-import {useTooltipDelayGroup} from './tooltipDelayGroup'
-import {TooltipLayer} from './tooltipLayer'
+import {useTooltipDelayGroup} from './tooltipDelayGroup/useTooltipDelayGroup'
+// import {useTooltipDelayGroup} from './TooltipDelayGroup'
+import {TooltipLayer} from './TooltipLayer'
 
 /** @public */
 export const DEFAULT_TOOLTIP_ELEMENT = 'div'

package/src/core/primitives/tooltip/{tooltipLayer.tsx → TooltipLayer.tsx}

@@ -3,8 +3,8 @@ import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
 import type {Placement} from '../../types'
-import {Arrow} from '../arrow/arrow'
-import {Layer, type LayerOwnProps, type LayerProps} from '../layer/layer'
+import {Arrow} from '../arrow/Arrow'
+import {Layer, type LayerOwnProps, type LayerProps} from '../layer/Layer'
 import {
   DEFAULT_TOOLTIP_ARROW_HEIGHT,
   DEFAULT_TOOLTIP_ARROW_RADIUS,

package/src/core/primitives/tooltip/__workshop__/{customPortal.tsx → 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 → 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 → 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 → 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/core/primitives/tooltip/__workshop__/index.ts

@@ -8,22 +8,22 @@ const scope: WorkshopScope = {
     {
       name: 'props',
       title: 'Props',
-      component: lazy(() => import('./props')),
+      component: lazy(() => import('./Props')),
     },
     {
       name: 'resizableBoundary',
       title: 'Resizable Boundary',
-      component: lazy(() => import('./resizableBoundary')),
+      component: lazy(() => import('./ResizableBoundary')),
     },
     {
       name: 'overflowBoundary',
       title: 'Overflowing Boundary',
-      component: lazy(() => import('./overflowingBoundary')),
+      component: lazy(() => import('./OverflowingBoundary')),
     },
     {
       name: 'customPortalStory',
       title: 'Custom Portal',
-      component: lazy(() => import('./customPortal')),
+      component: lazy(() => import('./CustomPortal')),
     },
   ],
 }

package/src/core/primitives/tooltip/tooltipDelayGroup/{tooltipDelayGroupProvider.tsx → TooltipDelayGroupProvider.tsx}

@@ -2,7 +2,7 @@ import {type ReactNode, useMemo} from 'react'
 
 import {useDelayedState} from '../../../hooks/useDelayedState'
 import type {Delay} from '../../../types'
-import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
+import {TooltipDelayGroupContext} from './TooltipDelayGroupContext'
 import type {TooltipDelayGroupContextValue} from './types'
 
 /**

package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts

@@ -1,6 +1,6 @@
 import {useContext} from 'react'
 
-import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
+import {TooltipDelayGroupContext} from './TooltipDelayGroupContext'
 import type {TooltipDelayGroupContextValue} from './types'
 
 /**

package/src/core/utils/{errorBoundary.tsx → ErrorBoundary.tsx}

@@ -1,6 +1,6 @@
 import {Component, type ErrorInfo, type PropsWithChildren, type ReactNode} from 'react'
 
-import {Code} from '../primitives/code/code'
+import {Code} from '../primitives/code/Code'
 
 /**
  * DO NOT USE IN PRODUCTION

package/src/core/utils/boundaryElement/{boundaryElement.test.tsx → BoundaryElement.test.tsx}

@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContext} from './BoundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
 import {useBoundaryElement} from './useBoundaryElement'
 

package/src/core/utils/boundaryElement/{boundaryElementProvider.tsx → BoundaryElementProvider.tsx}

@@ -1,6 +1,6 @@
 import {type ReactNode, useMemo} from 'react'
 
-import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContext} from './BoundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
 
 /** @public */

package/src/core/utils/boundaryElement/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
   ],
 }

package/src/core/utils/boundaryElement/useBoundaryElement.ts

@@ -1,7 +1,7 @@
 import {useContext} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContext} from './BoundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
 
 const DEFAULT_VALUE: BoundaryElementContextValue = {

package/src/core/utils/elementQuery/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'custom-media',
       title: 'Custom media',
-      component: lazy(() => import('./customMedia')),
+      component: lazy(() => import('./CustomMedia')),
     },
   ],
 }

package/src/core/utils/portal/{portal.test.tsx → Portal.test.tsx}

@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {PortalContext} from './portalContext'
+import {PortalContext} from './PortalContext'
 import type {PortalContextValue} from './types'
 import {usePortal} from './usePortal'
 

package/src/core/utils/portal/{portal.tsx → Portal.tsx}

@@ -1,7 +1,7 @@
 import type {ReactNode, ReactPortal} from 'react'
 import {createPortal} from 'react-dom'
 
-import {CardProvider} from '../../primitives/card/cardProvider'
+import {CardProvider} from '../../primitives/card/CardProvider'
 import {useCard} from '../../primitives/card/useCard'
 import {usePortal} from './usePortal'
 

package/src/core/utils/portal/{portalProvider.tsx → PortalProvider.tsx}

@@ -1,6 +1,6 @@
 import {type ReactNode, useContext, useMemo, useRef, useSyncExternalStore} from 'react'
 
-import {PortalContext} from './portalContext'
+import {PortalContext} from './PortalContext'
 import type {PortalContextValue} from './types'
 
 /** @public */

package/src/core/utils/portal/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'named',
       title: 'Named portals',
-      component: lazy(() => import('./named')),
+      component: lazy(() => import('./Named')),
     },
   ],
 }

package/src/core/utils/portal/usePortal.ts

@@ -1,7 +1,7 @@
 import {useContext} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {PortalContext} from './portalContext'
+import {PortalContext} from './PortalContext'
 import type {PortalContextValue} from './types'
 
 /** @public */

package/src/css/_responsiveStyle.css.ts

@@ -21,8 +21,8 @@ export function _responsiveStyle(layer: string, rule: StyleRule): ResponsiveRule
       rules[index] = style({
         '@layer': {
           [layer]: {
-            '@media': {
-              [`screen and (min-width: ${bp}px)`]: rule,
+            '@container': {
+              [`(min-width: ${bp}px)`]: rule,
             },
           },
         },

package/src/css/primitives/card/__workshop__/{color.tsx → 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/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'color',
       title: 'Color',
-      component: lazy(() => import('./color')),
+      component: lazy(() => import('./Color')),
     },
   ],
 }

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/primitives/root/root.css.ts

@@ -2,6 +2,7 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
 export const _root: string = _style(layers.primitives, {
+  containerType: 'inline-size',
   WebkitFontSmoothing: 'antialiased',
   // minWidth: `${320 / 16}rem`, // 320px
 

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;;"}