@sanity/ui 3.0.0-static.0 → 3.0.0-static.1

package/dist/cli.js

@@ -3,10 +3,12 @@ var cac = require("cac");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
-var cac__default = /* @__PURE__ */ _interopDefaultCompat(cac), version = "3.0.0-static.0";
+var cac__default = /* @__PURE__ */ _interopDefaultCompat(cac), version = "3.0.0-static.1";
 const cli = cac__default.default("ui");
 cli.command("build").option("--cwd [cwd]", "Working directory").option("--outDir [outDir]", "Output directory").action(async (options) => {
-  const { buildCommand } = await Promise.resolve().then(function() {
+  const {
+    buildCommand
+  } = await Promise.resolve().then(function() {
     return require("./_chunks-cjs/buildCommand.js");
   });
   await buildCommand({

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"file":"cli.js","sources":["../src/css/cli/index.ts"],"sourcesContent":["import cac from 'cac'\n\nimport {version} from '../../../package.json'\n\nconst cli = cac('ui')\n\n// cli\n//   .command('dev')\n//   .option('--cwd [cwd]', 'Output directory')\n//   .action(async (options) => {\n//     const {devCommand} = await import('./devCommand')\n\n//     await devCommand({\n//       ...options,\n//       cwd: options.cwd || process.cwd(),\n//     })\n//   })\n\ncli\n  .command('build')\n  .option('--cwd [cwd]', 'Working directory')\n  .option('--outDir [outDir]', 'Output directory')\n  .action(async (options) => {\n    const {buildCommand} = await import('./buildCommand')\n\n    await buildCommand({\n      ...options,\n      cwd: options.cwd || process.cwd(),\n    })\n  })\n\ncli.command('').action(() => {\n  cli.outputHelp()\n})\n\ncli.help()\ncli.version(version)\ncli.parse()\n"],"names":["cac"],"mappings":";;;;;;AAIA,MAAM,MAAMA,qBAAI,IAAI;AAcpB,IACG,QAAQ,OAAO,EACf,OAAO,eAAe,mBAAmB,EACzC,OAAO,qBAAqB,kBAAkB,EAC9C,OAAO,OAAO,YAAY;AACzB,QAAM,EAAC,aAAA,IAAgB,MAAM,QAAA,QAAA,EAAA,KAAA,WAAA;AAAA,WAAA,QAAO,+BAAgB;AAAA,EAAA,CAAA;AAEpD,QAAM,aAAa;AAAA,IACjB,GAAG;AAAA,IACH,KAAK,QAAQ,OAAO,QAAQ,IAAI;AAAA,EAAA,CACjC;AACH,CAAC;AAEH,IAAI,QAAQ,EAAE,EAAE,OAAO,MAAM;AAC3B,MAAI,WAAW;AACjB,CAAC;AAED,IAAI,KAAK;AACT,IAAI,QAAQ,OAAO;AACnB,IAAI,MAAM;"}
+{"version":3,"file":"cli.js","sources":["../src/css/cli/index.ts"],"sourcesContent":["import cac from 'cac'\n\nimport {version} from '../../../package.json'\n\nconst cli = cac('ui')\n\n// cli\n//   .command('dev')\n//   .option('--cwd [cwd]', 'Output directory')\n//   .action(async (options) => {\n//     const {devCommand} = await import('./devCommand')\n\n//     await devCommand({\n//       ...options,\n//       cwd: options.cwd || process.cwd(),\n//     })\n//   })\n\ncli\n  .command('build')\n  .option('--cwd [cwd]', 'Working directory')\n  .option('--outDir [outDir]', 'Output directory')\n  .action(async (options) => {\n    const {buildCommand} = await import('./buildCommand')\n\n    await buildCommand({\n      ...options,\n      cwd: options.cwd || process.cwd(),\n    })\n  })\n\ncli.command('').action(() => {\n  cli.outputHelp()\n})\n\ncli.help()\ncli.version(version)\ncli.parse()\n"],"names":["cli","cac","command","option","action","options","buildCommand","cwd","process","outputHelp","help","version","parse"],"mappings":";;;;;;AAIA,MAAMA,MAAMC,qBAAI,IAAI;AAcpBD,IACGE,QAAQ,OAAO,EACfC,OAAO,eAAe,mBAAmB,EACzCA,OAAO,qBAAqB,kBAAkB,EAC9CC,OAAO,OAAOC,YAAY;AACnB,QAAA;AAAA,IAACC;AAAAA,EAAAA,IAAgB,MAAM,QAAO,QAAA,EAAA,KAAA,WAAA;AAAA,WAAA,QAAA,+BAAgB;AAAA,EAAA,CAAA;AAEpD,QAAMA,aAAa;AAAA,IACjB,GAAGD;AAAAA,IACHE,KAAKF,QAAQE,OAAOC,QAAQD,IAAI;AAAA,EAAA,CACjC;AACH,CAAC;AAEHP,IAAIE,QAAQ,EAAE,EAAEE,OAAO,MAAM;AAC3BJ,MAAIS,WAAW;AACjB,CAAC;AAEDT,IAAIU,KAAK;AACTV,IAAIW,QAAQA,OAAO;AACnBX,IAAIY,MAAM;"}

package/dist/css.d.mts

@@ -10,6 +10,7 @@ import {FontLabelSize} from '@sanity/ui/theme'
 import {FontStyleProps as FontStyleProps_2} from '@sanity/ui/css'
 import {FontTextSize} from '@sanity/ui/theme'
 import {FontWeight} from '@sanity/ui/theme'
+import {GridStyleProps as GridStyleProps_2} from '@sanity/ui/css'
 import {Radius} from '@sanity/ui/theme'
 import {RadiusStyleProps as RadiusStyleProps_2} from '@sanity/ui/css'
 import {RootTheme_v2} from '@sanity/ui/theme'
@@ -26,6 +27,8 @@ import {ThemeColorStateKey} from '@sanity/ui/theme'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {WidthStyleProps as WidthStyleProps_2} from '@sanity/ui/css'
 
+export declare function animatedSpinnerIcon(): string
+
 export declare function avatar(props: AvatarStyleProps): string
 
 export declare function avatarArrow(): string
@@ -64,19 +67,12 @@ export declare interface BorderStyleProps {
 /** @public */
 export declare function box(props: BoxStyleProps): string
 
-/**
- * @public
- */
-export declare type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
-
 /**
  * @public
  */
 export declare type BoxHeight = 'stretch' | 'fill'
 
-/**
- * @public
- */
+/** @public */
 export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
 
 /**
@@ -89,16 +85,18 @@ export declare interface BoxStyleProps
   extends FlexStyleProps,
     FlexItemStyleProps,
     GapStyleProps,
+    GridStyleProps_2,
     GridItemStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
+    OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,
     PositionStyleProps,
     WidthStyleProps {
-  display?: ResponsiveProp<BoxDisplay>
+  display?: ResponsiveProp<Display>
   height?: ResponsiveProp<BoxHeight>
-  overflow?: ResponsiveProp<BoxOverflow>
+  outline?: 'none'
   sizing?: ResponsiveProp<BoxSizing>
 }
 
@@ -197,15 +195,20 @@ export declare type CardScopedVarName =
   | `--card-badge-${ThemeColorStateToneKey}-fg-color`
   | `--card-badge-${ThemeColorStateToneKey}-icon-color`
   | `--card-bg-color`
+  | `--card-bg-image`
+  | `--card-bg2-color`
   | `--card-border-color`
   | `--card-code-bg-color`
   | `--card-code-fg-color`
   | `--card-fg-color`
   | `--card-focus-ring-color`
+  | `--card-hairline-soft-color`
+  | `--card-hairline-hard-color`
   | `--card-icon-color`
   | `--card-kbd-bg-color`
   | `--card-kbd-border-color`
   | `--card-kbd-fg-color`
+  | `--card-link-color`
   | `--card-link-fg-color`
   | `--card-muted-bg-color`
   | `--card-muted-fg-color`
@@ -229,12 +232,22 @@ export declare type CardScopedVarName =
   | `--font-letter-spacing`
   | `--font-line-height`
   | `--font-size`
+  | `--font-skeleton-line-height`
+  | `--font-skeleton-ascender-height`
+  | `--font-skeleton-descender-height`
   | `--font-weight-regular`
   | `--font-weight-medium`
   | `--font-weight-semibold`
   | `--font-weight-bold`
   | `--font-weight`
   | `--fg-color`
+  | `--input-bg-color`
+  | `--input-border-color`
+  | `--input-fg-color`
+  | `--padding-top`
+  | `--padding-right`
+  | `--padding-bottom`
+  | `--padding-left`
 
 export declare interface CardStyleProps extends BoxStyleProps, BorderStyleProps, RadiusStyleProps {
   checkered?: boolean
@@ -251,6 +264,12 @@ export declare function code(props: CodeStyleProps): string
 /** @public */
 export declare type CodeSize = number
 
+export declare function codeSkeleton(props: CodeSkeletonStyleProps): string
+
+export declare interface CodeSkeletonStyleProps {
+  size?: ResponsiveProp<FontCodeSize>
+}
+
 /** @public */
 export declare interface CodeStyleProps extends FontStyleProps_2 {
   size?: ResponsiveProp<CodeSize>
@@ -487,6 +506,8 @@ export declare interface ColorStateVars {
   }
 }
 
+export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+
 /** @public */
 export declare function compileSystem(): string
 
@@ -524,6 +545,11 @@ export declare function dialogHeader(): string
 
 export declare function dialogLayout(): string
 
+/**
+ * @public
+ */
+export declare type Display = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+
 /**
  * @public
  */
@@ -568,11 +594,26 @@ export declare type FlexValue = number | 'none' | 'auto' | 'initial'
  */
 export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
 
+export declare interface FontSizeVars {
+  ascenderHeight: CSSVar
+  descenderHeight: CSSVar
+  fontSize: CSSVar
+  lineHeight: CSSVar
+  letterSpacing: CSSVar
+  iconSize: CSSVar
+}
+
 /** @public */
 export declare interface FontStyleProps {
+  align?: TextAlign
   weight?: FontWeight
 }
 
+export declare interface FontVars<Size extends number> {
+  family: CSSVar
+  sizes: Record<Size, FontSizeVars>
+}
+
 /** @public */
 export declare interface GapStyleProps {
   gap?: ResponsiveProp<Space>
@@ -580,6 +621,21 @@ export declare interface GapStyleProps {
   gapY?: ResponsiveProp<Space>
 }
 
+/**
+ * @public
+ */
+export declare type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
+
+/**
+ * @public
+ */
+export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+
 /**
  * @public
  */
@@ -619,12 +675,27 @@ export declare interface GridItemStyleProps {
   rowEnd?: ResponsiveProp<GridItemRowEnd>
 }
 
+/** @public */
+export declare interface GridStyleProps {
+  autoRows?: ResponsiveProp<GridAutoRows>
+  autoCols?: ResponsiveProp<GridAutoCols>
+  autoFlow?: ResponsiveProp<GridAutoFlow>
+  columns?: ResponsiveProp<Columns>
+  rows?: ResponsiveProp<Rows>
+}
+
 /** @public */
 export declare function heading(props: HeadingStyleProps): string
 
 /** @public */
 export declare type HeadingSize = number
 
+export declare function headingSkeleton(props: HeadingSkeletonStyleProps): string
+
+export declare interface HeadingSkeletonStyleProps {
+  size?: ResponsiveProp<FontHeadingSize>
+}
+
 /** @public */
 export declare interface HeadingStyleProps extends FontStyleProps_2 {
   accent?: boolean
@@ -645,6 +716,12 @@ export declare function label(props: LabelStyleProps): string
 /** @public */
 export declare type LabelSize = number
 
+export declare function labelSkeleton(props: LabelSkeletonStyleProps): string
+
+export declare interface LabelSkeletonStyleProps {
+  size?: ResponsiveProp<FontLabelSize>
+}
+
 /** @public */
 export declare interface LabelStyleProps extends FontStyleProps_2 {
   accent?: boolean
@@ -666,6 +743,15 @@ export declare interface MaxWidthStyleProps {
   maxWidth?: ResponsiveProp<ContainerWidth | 'fill'>
 }
 
+export declare function menuDivider(): string
+
+/** @public */
+export declare interface OverflowStyleProps {
+  overflow?: ResponsiveProp<BoxOverflow>
+  overflowX?: ResponsiveProp<BoxOverflow>
+  overflowY?: ResponsiveProp<BoxOverflow>
+}
+
 /** @public */
 export declare interface PaddingStyleProps {
   padding?: ResponsiveProp<number>
@@ -712,6 +798,8 @@ export declare interface RadiusStyleProps {
 
 export declare type ResponsiveProp<T> = T | Array<T | null | undefined>
 
+export declare type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+
 /** @public */
 export declare interface Rules {
   [className: string]: Properties
@@ -733,6 +821,12 @@ export declare interface SelectableStyleProps extends RadiusStyleProps {
   tone?: SelectableTone
 }
 
+/** @beta */
+export declare function skeleton(props: SkeletonStyleProps): string
+
+/** @beta */
+export declare interface SkeletonStyleProps extends RadiusStyleProps {}
+
 export declare function spinner(): string
 
 export declare function _switch(): string
@@ -740,12 +834,31 @@ export declare function _switch(): string
 /** @public */
 export declare function text(props: TextStyleProps): string
 
+/**
+ * @public
+ */
+export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
+
 export declare function textArea(): string
 
-export declare function textInput(props: {size: ResponsiveProp<number>}): string
+export declare function textInput(props: TextInputStyleProps): string
+
+export declare function textInputElement(): string
+
+/** @public */
+export declare interface TextInputStyleProps {
+  padding: ResponsiveProp<Space>
+  size: ResponsiveProp<FontTextSize>
+}
 
 export declare type TextSize = number
 
+export declare function textSkeleton(props: TextSkeletonStyleProps): string
+
+export declare interface TextSkeletonStyleProps {
+  size?: ResponsiveProp<FontTextSize>
+}
+
 /** @public */
 export declare interface TextStyleProps extends FontStyleProps_2 {
   accent?: boolean
@@ -902,7 +1015,7 @@ export declare type ThemeVarName =
   | '--input-text-focus-ring-width'
   | '--layer-dialog-z-offset'
   | `--radius-${Radius}`
-  | `--space-${Space}`
+  | `--space-${Exclude<Space, 0.5> | '0_5'}`
   | `--shadow-${Shadow}-umbra`
   | `--shadow-${Shadow}-penumbra`
   | `--shadow-${Shadow}-ambient`
@@ -931,6 +1044,12 @@ export declare interface Vars {
     dark: ColorSchemeVars
     light: ColorSchemeVars
   } & ScopedColorVars
+  font: {
+    code: FontVars<FontCodeSize>
+    heading: FontVars<FontHeadingSize>
+    label: FontVars<FontLabelSize>
+    text: FontVars<FontTextSize>
+  }
   space: Record<Space, CSSVar>
 }
 

package/dist/css.d.ts

@@ -10,6 +10,7 @@ import {FontLabelSize} from '@sanity/ui/theme'
 import {FontStyleProps as FontStyleProps_2} from '@sanity/ui/css'
 import {FontTextSize} from '@sanity/ui/theme'
 import {FontWeight} from '@sanity/ui/theme'
+import {GridStyleProps as GridStyleProps_2} from '@sanity/ui/css'
 import {Radius} from '@sanity/ui/theme'
 import {RadiusStyleProps as RadiusStyleProps_2} from '@sanity/ui/css'
 import {RootTheme_v2} from '@sanity/ui/theme'
@@ -26,6 +27,8 @@ import {ThemeColorStateKey} from '@sanity/ui/theme'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {WidthStyleProps as WidthStyleProps_2} from '@sanity/ui/css'
 
+export declare function animatedSpinnerIcon(): string
+
 export declare function avatar(props: AvatarStyleProps): string
 
 export declare function avatarArrow(): string
@@ -64,19 +67,12 @@ export declare interface BorderStyleProps {
 /** @public */
 export declare function box(props: BoxStyleProps): string
 
-/**
- * @public
- */
-export declare type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
-
 /**
  * @public
  */
 export declare type BoxHeight = 'stretch' | 'fill'
 
-/**
- * @public
- */
+/** @public */
 export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
 
 /**
@@ -89,16 +85,18 @@ export declare interface BoxStyleProps
   extends FlexStyleProps,
     FlexItemStyleProps,
     GapStyleProps,
+    GridStyleProps_2,
     GridItemStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
+    OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,
     PositionStyleProps,
     WidthStyleProps {
-  display?: ResponsiveProp<BoxDisplay>
+  display?: ResponsiveProp<Display>
   height?: ResponsiveProp<BoxHeight>
-  overflow?: ResponsiveProp<BoxOverflow>
+  outline?: 'none'
   sizing?: ResponsiveProp<BoxSizing>
 }
 
@@ -197,15 +195,20 @@ export declare type CardScopedVarName =
   | `--card-badge-${ThemeColorStateToneKey}-fg-color`
   | `--card-badge-${ThemeColorStateToneKey}-icon-color`
   | `--card-bg-color`
+  | `--card-bg-image`
+  | `--card-bg2-color`
   | `--card-border-color`
   | `--card-code-bg-color`
   | `--card-code-fg-color`
   | `--card-fg-color`
   | `--card-focus-ring-color`
+  | `--card-hairline-soft-color`
+  | `--card-hairline-hard-color`
   | `--card-icon-color`
   | `--card-kbd-bg-color`
   | `--card-kbd-border-color`
   | `--card-kbd-fg-color`
+  | `--card-link-color`
   | `--card-link-fg-color`
   | `--card-muted-bg-color`
   | `--card-muted-fg-color`
@@ -229,12 +232,22 @@ export declare type CardScopedVarName =
   | `--font-letter-spacing`
   | `--font-line-height`
   | `--font-size`
+  | `--font-skeleton-line-height`
+  | `--font-skeleton-ascender-height`
+  | `--font-skeleton-descender-height`
   | `--font-weight-regular`
   | `--font-weight-medium`
   | `--font-weight-semibold`
   | `--font-weight-bold`
   | `--font-weight`
   | `--fg-color`
+  | `--input-bg-color`
+  | `--input-border-color`
+  | `--input-fg-color`
+  | `--padding-top`
+  | `--padding-right`
+  | `--padding-bottom`
+  | `--padding-left`
 
 export declare interface CardStyleProps extends BoxStyleProps, BorderStyleProps, RadiusStyleProps {
   checkered?: boolean
@@ -251,6 +264,12 @@ export declare function code(props: CodeStyleProps): string
 /** @public */
 export declare type CodeSize = number
 
+export declare function codeSkeleton(props: CodeSkeletonStyleProps): string
+
+export declare interface CodeSkeletonStyleProps {
+  size?: ResponsiveProp<FontCodeSize>
+}
+
 /** @public */
 export declare interface CodeStyleProps extends FontStyleProps_2 {
   size?: ResponsiveProp<CodeSize>
@@ -487,6 +506,8 @@ export declare interface ColorStateVars {
   }
 }
 
+export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+
 /** @public */
 export declare function compileSystem(): string
 
@@ -524,6 +545,11 @@ export declare function dialogHeader(): string
 
 export declare function dialogLayout(): string
 
+/**
+ * @public
+ */
+export declare type Display = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+
 /**
  * @public
  */
@@ -568,11 +594,26 @@ export declare type FlexValue = number | 'none' | 'auto' | 'initial'
  */
 export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
 
+export declare interface FontSizeVars {
+  ascenderHeight: CSSVar
+  descenderHeight: CSSVar
+  fontSize: CSSVar
+  lineHeight: CSSVar
+  letterSpacing: CSSVar
+  iconSize: CSSVar
+}
+
 /** @public */
 export declare interface FontStyleProps {
+  align?: TextAlign
   weight?: FontWeight
 }
 
+export declare interface FontVars<Size extends number> {
+  family: CSSVar
+  sizes: Record<Size, FontSizeVars>
+}
+
 /** @public */
 export declare interface GapStyleProps {
   gap?: ResponsiveProp<Space>
@@ -580,6 +621,21 @@ export declare interface GapStyleProps {
   gapY?: ResponsiveProp<Space>
 }
 
+/**
+ * @public
+ */
+export declare type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
+
+/**
+ * @public
+ */
+export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+
 /**
  * @public
  */
@@ -619,12 +675,27 @@ export declare interface GridItemStyleProps {
   rowEnd?: ResponsiveProp<GridItemRowEnd>
 }
 
+/** @public */
+export declare interface GridStyleProps {
+  autoRows?: ResponsiveProp<GridAutoRows>
+  autoCols?: ResponsiveProp<GridAutoCols>
+  autoFlow?: ResponsiveProp<GridAutoFlow>
+  columns?: ResponsiveProp<Columns>
+  rows?: ResponsiveProp<Rows>
+}
+
 /** @public */
 export declare function heading(props: HeadingStyleProps): string
 
 /** @public */
 export declare type HeadingSize = number
 
+export declare function headingSkeleton(props: HeadingSkeletonStyleProps): string
+
+export declare interface HeadingSkeletonStyleProps {
+  size?: ResponsiveProp<FontHeadingSize>
+}
+
 /** @public */
 export declare interface HeadingStyleProps extends FontStyleProps_2 {
   accent?: boolean
@@ -645,6 +716,12 @@ export declare function label(props: LabelStyleProps): string
 /** @public */
 export declare type LabelSize = number
 
+export declare function labelSkeleton(props: LabelSkeletonStyleProps): string
+
+export declare interface LabelSkeletonStyleProps {
+  size?: ResponsiveProp<FontLabelSize>
+}
+
 /** @public */
 export declare interface LabelStyleProps extends FontStyleProps_2 {
   accent?: boolean
@@ -666,6 +743,15 @@ export declare interface MaxWidthStyleProps {
   maxWidth?: ResponsiveProp<ContainerWidth | 'fill'>
 }
 
+export declare function menuDivider(): string
+
+/** @public */
+export declare interface OverflowStyleProps {
+  overflow?: ResponsiveProp<BoxOverflow>
+  overflowX?: ResponsiveProp<BoxOverflow>
+  overflowY?: ResponsiveProp<BoxOverflow>
+}
+
 /** @public */
 export declare interface PaddingStyleProps {
   padding?: ResponsiveProp<number>
@@ -712,6 +798,8 @@ export declare interface RadiusStyleProps {
 
 export declare type ResponsiveProp<T> = T | Array<T | null | undefined>
 
+export declare type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+
 /** @public */
 export declare interface Rules {
   [className: string]: Properties
@@ -733,6 +821,12 @@ export declare interface SelectableStyleProps extends RadiusStyleProps {
   tone?: SelectableTone
 }
 
+/** @beta */
+export declare function skeleton(props: SkeletonStyleProps): string
+
+/** @beta */
+export declare interface SkeletonStyleProps extends RadiusStyleProps {}
+
 export declare function spinner(): string
 
 export declare function _switch(): string
@@ -740,12 +834,31 @@ export declare function _switch(): string
 /** @public */
 export declare function text(props: TextStyleProps): string
 
+/**
+ * @public
+ */
+export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
+
 export declare function textArea(): string
 
-export declare function textInput(props: {size: ResponsiveProp<number>}): string
+export declare function textInput(props: TextInputStyleProps): string
+
+export declare function textInputElement(): string
+
+/** @public */
+export declare interface TextInputStyleProps {
+  padding: ResponsiveProp<Space>
+  size: ResponsiveProp<FontTextSize>
+}
 
 export declare type TextSize = number
 
+export declare function textSkeleton(props: TextSkeletonStyleProps): string
+
+export declare interface TextSkeletonStyleProps {
+  size?: ResponsiveProp<FontTextSize>
+}
+
 /** @public */
 export declare interface TextStyleProps extends FontStyleProps_2 {
   accent?: boolean
@@ -902,7 +1015,7 @@ export declare type ThemeVarName =
   | '--input-text-focus-ring-width'
   | '--layer-dialog-z-offset'
   | `--radius-${Radius}`
-  | `--space-${Space}`
+  | `--space-${Exclude<Space, 0.5> | '0_5'}`
   | `--shadow-${Shadow}-umbra`
   | `--shadow-${Shadow}-penumbra`
   | `--shadow-${Shadow}-ambient`
@@ -931,6 +1044,12 @@ export declare interface Vars {
     dark: ColorSchemeVars
     light: ColorSchemeVars
   } & ScopedColorVars
+  font: {
+    code: FontVars<FontCodeSize>
+    heading: FontVars<FontHeadingSize>
+    label: FontVars<FontLabelSize>
+    text: FontVars<FontTextSize>
+  }
   space: Record<Space, CSSVar>
 }