@sanity/ui 3.0.0-static.41 → 3.0.0-static.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.41",
+  "version": "3.0.0-static.43",
   "keywords": [
     "react",
     "ui",
@@ -29,12 +29,6 @@
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
-    "./_visual-editing": {
-      "source": "./exports/_visual-editing.ts",
-      "import": "./dist/_visual-editing.js",
-      "require": "./dist/_visual-editing.cjs",
-      "default": "./dist/_visual-editing.js"
-    },
     "./css": {
       "source": "./exports/css.ts",
       "import": "./dist/css/index.js",
@@ -55,9 +49,6 @@
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
-      "_visual-editing": [
-        "./dist/_visual-editing.d.ts"
-      ],
       "css": [
         "./dist/css.d.ts"
       ],

package/src/css/getVarName.ts

@@ -0,0 +1,27 @@
+import type {CSSVarFunction, CSSVarName} from './types'
+
+const RE_CSS_VAR = /^var\((.*)\)$/
+
+/**
+ * Extract the name of a CSS variable.
+ *
+ * @example
+ * ```ts
+ * getVarName('var(--color-primary)') // '--color-primary'
+ * ```
+ *
+ * @public
+ */
+export function getVarName(variable: CSSVarFunction): CSSVarName {
+  const matches = variable.match(RE_CSS_VAR)
+
+  if (matches) {
+    return matches[1] as CSSVarName
+  }
+
+  // NOTE: This code path should not occur when using TypeScript,
+  // and is a potential source of bugs.
+
+  // If the variable is not a CSS variable, return it as is.
+  return variable as CSSVarName
+}

package/src/css/index.ts

@@ -1,13 +1,19 @@
-/* eslint-disable simple-import-sort/exports */
+// NOTE: Order is important, as it affects the order of compiled CSS.
 
+// API
+export * from './constants'
+export * from './getVarName'
+export * from './theme/buildCSSTheme'
+export * from './types'
+
+// CSS: variables
 export * from './layers.css'
 export * from './vars.css'
 
-// theme
-export * from './theme/buildCSSTheme'
+// CSS: theme
 export * from './theme/defaultTheme.css'
 
-// props
+// CSS: props
 export * from './props/alignItems/alignItems'
 export * from './props/alignItems/types'
 export * from './props/border/border'
@@ -80,15 +86,13 @@ export * from './props/textAlign/textAlign'
 export * from './props/textAlign/types'
 export * from './props/textOverflow/textOverflow'
 export * from './props/textOverflow/types'
-export * from './props/width/width'
 export * from './props/width/types'
+export * from './props/width/width'
 
-// primitives
+// CSS:primitives
 export * from './primitives/_arrow/_arrow'
 export * from './primitives/_input/input'
 export * from './primitives/_input/types'
-export * from './primitives/selectable/selectable'
-export * from './primitives/selectable/types'
 export * from './primitives/avatar/avatar'
 export * from './primitives/avatar/types'
 export * from './primitives/badge/badge'
@@ -116,6 +120,8 @@ export * from './primitives/root/root'
 export * from './primitives/root/types'
 export * from './primitives/select/select'
 export * from './primitives/select/types'
+export * from './primitives/selectable/selectable'
+export * from './primitives/selectable/types'
 export * from './primitives/spinner/spinner'
 export * from './primitives/spinner/types'
 export * from './primitives/srOnly/srOnly'
@@ -130,7 +136,7 @@ export * from './primitives/textInput/types'
 export * from './primitives/tooltip/tooltip'
 export * from './primitives/tooltip/types'
 
-// components
+// CSS: components
 export * from './components/breadcrumbs/breadcrumbs'
 export * from './components/dialog/dialog'
 export * from './components/menu/menu'
@@ -138,6 +144,3 @@ export * from './components/skeleton/skeleton'
 export * from './components/skeleton/types'
 export * from './components/toast/toast'
 export * from './components/tree/tree'
-
-export * from './constants'
-export * from './types'

package/src/css/types.ts

@@ -33,7 +33,10 @@ export type ResponsiveRules = Record<Breakpoint, string>
 export type ResponsiveRuleOptions<K extends string | number> = Record<K, ResponsiveRules>
 
 /** @public */
-export type CSSVarFunction = `var(--${string})`
+export type CSSVarName = `--${string}`
+
+/** @public */
+export type CSSVarFunction = `var(${CSSVarName})`
 
 /** @public */
 export type ElementColorTokens = {