@sanity/ui 4.2.0 → 5.0.0-alpha.10

package/src/css/classes/system/padding.css

@@ -0,0 +1,78 @@
+@breakpoints {
+  .sui-p0 { padding: var(--space-0); }
+  .sui-p1 { padding: var(--space-1); }
+  .sui-p2 { padding: var(--space-2); }
+  .sui-p3 { padding: var(--space-3); }
+  .sui-p4 { padding: var(--space-4); }
+  .sui-p5 { padding: var(--space-5); }
+  .sui-p6 { padding: var(--space-6); }
+  .sui-p7 { padding: var(--space-7); }
+  .sui-p8 { padding: var(--space-8); }
+  .sui-p9 { padding: var(--space-9); }
+
+  .sui-px0 { padding-left: var(--space-0); padding-right: var(--space-0); }
+  .sui-px1 { padding-left: var(--space-1); padding-right: var(--space-1); }
+  .sui-px2 { padding-left: var(--space-2); padding-right: var(--space-2); }
+  .sui-px3 { padding-left: var(--space-3); padding-right: var(--space-3); }
+  .sui-px4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+  .sui-px5 { padding-left: var(--space-5); padding-right: var(--space-5); }
+  .sui-px6 { padding-left: var(--space-6); padding-right: var(--space-6); }
+  .sui-px7 { padding-left: var(--space-7); padding-right: var(--space-7); }
+  .sui-px8 { padding-left: var(--space-8); padding-right: var(--space-8); }
+  .sui-px9 { padding-left: var(--space-9); padding-right: var(--space-9); }
+
+  .sui-py0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
+  .sui-py1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
+  .sui-py2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
+  .sui-py3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
+  .sui-py4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
+  .sui-py5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
+  .sui-py6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
+  .sui-py7 { padding-top: var(--space-7); padding-bottom: var(--space-7); }
+  .sui-py8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
+  .sui-py9 { padding-top: var(--space-9); padding-bottom: var(--space-9); }
+
+  .sui-pt0 { padding-top: var(--space-0); }
+  .sui-pt1 { padding-top: var(--space-1); }
+  .sui-pt2 { padding-top: var(--space-2); }
+  .sui-pt3 { padding-top: var(--space-3); }
+  .sui-pt4 { padding-top: var(--space-4); }
+  .sui-pt5 { padding-top: var(--space-5); }
+  .sui-pt6 { padding-top: var(--space-6); }
+  .sui-pt7 { padding-top: var(--space-7); }
+  .sui-pt8 { padding-top: var(--space-8); }
+  .sui-pt9 { padding-top: var(--space-9); }
+
+  .sui-pr0 { padding-right: var(--space-0); }
+  .sui-pr1 { padding-right: var(--space-1); }
+  .sui-pr2 { padding-right: var(--space-2); }
+  .sui-pr3 { padding-right: var(--space-3); }
+  .sui-pr4 { padding-right: var(--space-4); }
+  .sui-pr5 { padding-right: var(--space-5); }
+  .sui-pr6 { padding-right: var(--space-6); }
+  .sui-pr7 { padding-right: var(--space-7); }
+  .sui-pr8 { padding-right: var(--space-8); }
+  .sui-pr9 { padding-right: var(--space-9); }
+
+  .sui-pb0 { padding-bottom: var(--space-0); }
+  .sui-pb1 { padding-bottom: var(--space-1); }
+  .sui-pb2 { padding-bottom: var(--space-2); }
+  .sui-pb3 { padding-bottom: var(--space-3); }
+  .sui-pb4 { padding-bottom: var(--space-4); }
+  .sui-pb5 { padding-bottom: var(--space-5); }
+  .sui-pb6 { padding-bottom: var(--space-6); }
+  .sui-pb7 { padding-bottom: var(--space-7); }
+  .sui-pb8 { padding-bottom: var(--space-8); }
+  .sui-pb9 { padding-bottom: var(--space-9); }
+
+  .sui-pl0 { padding-left: var(--space-0); }
+  .sui-pl1 { padding-left: var(--space-1); }
+  .sui-pl2 { padding-left: var(--space-2); }
+  .sui-pl3 { padding-left: var(--space-3); }
+  .sui-pl4 { padding-left: var(--space-4); }
+  .sui-pl5 { padding-left: var(--space-5); }
+  .sui-pl6 { padding-left: var(--space-6); }
+  .sui-pl7 { padding-left: var(--space-7); }
+  .sui-pl8 { padding-left: var(--space-8); }
+  .sui-pl9 { padding-left: var(--space-9); }
+}

package/src/css/classes/system/radius.css

@@ -0,0 +1,10 @@
+@breakpoints {
+  .sui-radius0 { border-radius: var(--radius-0); }
+  .sui-radius1 { border-radius: var(--radius-1); }
+  .sui-radius2 { border-radius: var(--radius-2); }
+  .sui-radius3 { border-radius: var(--radius-3); }
+  .sui-radius4 { border-radius: var(--radius-4); }
+  .sui-radius5 { border-radius: var(--radius-5); }
+  .sui-radius6 { border-radius: var(--radius-6); }
+  .sui-radius-full { border-radius: var(--radius-round); }
+}

package/src/css/classes/system/readme.md

@@ -0,0 +1,3 @@
+# System classes
+
+System classes apply custom properties defined in our design tokens library. They do not apply custom properties defined locally to the component library, and they do not apply CSS keyword values.

package/src/css/classes/system/shadow.css

@@ -0,0 +1,6 @@
+.sui-shadow0 { box-shadow: var(--shadow0); }
+.sui-shadow1 { box-shadow: var(--shadow1); }
+.sui-shadow2 { box-shadow: var(--shadow2); }
+.sui-shadow3 { box-shadow: var(--shadow3); }
+.sui-shadow4 { box-shadow: var(--shadow4); }
+.sui-shadow5 { box-shadow: var(--shadow5); }

package/src/css/classes/system/typography.css

@@ -0,0 +1,31 @@
+@breakpoints {
+  .sui-text-body0 { font: var(--body-0); }
+  .sui-text-body1 { font: var(--body-1); }
+  .sui-text-body2 { font: var(--body-2); }
+  .sui-text-body3 { font: var(--body-3); }
+  .sui-text-body4 { font: var(--body-4); }
+
+  .sui-text-code0 { font: var(--code-0); }
+  .sui-text-code1 { font: var(--code-1); }
+  .sui-text-code2 { font: var(--code-2); }
+  .sui-text-code3 { font: var(--code-3); }
+  .sui-text-code4 { font: var(--code-4); }
+
+  .sui-text-heading0 { font: var(--heading-0); }
+  .sui-text-heading1 { font: var(--heading-1); }
+  .sui-text-heading2 { font: var(--heading-2); }
+  .sui-text-heading3 { font: var(--heading-3); }
+  .sui-text-heading4 { font: var(--heading-4); }
+  .sui-text-heading5 { font: var(--heading-5); }
+  .sui-text-heading6 { font: var(--heading-6); }
+  .sui-text-heading7 { font: var(--heading-7); }
+  .sui-text-heading8 { font: var(--heading-8); }
+  .sui-text-heading9 { font: var(--heading-9); }
+
+  .sui-text-eyebrow0 { font: var(--label-0); }
+  .sui-text-eyebrow1 { font: var(--label-1); }
+  .sui-text-eyebrow2 { font: var(--label-2); }
+  .sui-text-eyebrow3 { font: var(--label-3); }
+  .sui-text-eyebrow4 { font: var(--label-4); }
+  .sui-text-eyebrow5 { font: var(--label-5); }
+}

package/src/css/global/font-face.css

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url('https://design-system-static.sanity.io/InterVariable-latin-20260728.woff2') format('woff2-variations');
+  src: url('https://design-system-static.sanity.io/InterVariable-latin-20260728.woff2') format('woff2')
+    tech('variations');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url('https://design-system-static.sanity.io/InterVariable-Italic-latin-20260728.woff2')
+    format('woff2-variations');
+  src: url('https://design-system-static.sanity.io/InterVariable-Italic-latin-20260728.woff2') format('woff2')
+    tech('variations');
+}

package/src/css/global/index.css

@@ -0,0 +1,2 @@
+@import './reset.css';
+@import './font-face.css';

package/src/css/global/reset.css

@@ -0,0 +1,76 @@
+/* Default to border-box sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Zero out default margins, padding, and borders */
+* {
+  margin: 0;
+  padding: 0;
+  border: 0 solid transparent;
+}
+
+:root {
+  color-scheme: light dark;
+}
+
+/* Prevent adjustments of font size after orientation changes in iOS. */
+:where(html) {
+  -webkit-text-size-adjust: 100%;
+}
+
+:where(body) {
+  background: light-dark(var(--white), var(--black));
+  font-family: var(--sans);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Display multimedia as block by default */
+:where(
+  audio,
+  canvas,
+  embed,
+  iframe,
+  img,
+  object,
+  picture,
+  video
+){
+  display: block;
+  max-width: 100%;
+}
+:where(img, picture, video) {
+  block-size: auto;
+}
+
+/* Inherit typography in form controls */
+:where(
+  button,
+  input,
+  select,
+  textarea
+) {
+  font: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+/* Remove excess space for table borders */
+:where(table) {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Enforce no animations for users that prefer reduced motion*/
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/css/tokens/index.css

@@ -0,0 +1,3 @@
+@import './opacity.css';
+@import './semantic.css';
+@import './surface.css';

package/src/css/tokens/opacity.css

@@ -0,0 +1,6 @@
+:root {
+  --opacity-low: 0.25;
+  --opacity-mid: 0.5;
+  --opacity-high: 0.8;
+  --opacity-full: 1.0;
+}

package/src/css/tokens/semantic.css

@@ -0,0 +1,25 @@
+:root {
+  --backdrop: light-dark(var(--white), var(--black));
+  --brand-background: #eb5228;
+  --brand-foreground: var(--black);
+  --placeholder-opacity: var(--opacity-mid);
+  --overlay-opacity: var(--opacity-mid);
+  /* State */
+  --active-background-normal: light-dark(var(--blue-50), var(--blue-950));
+  --active-foreground-normal: light-dark(var(--blue-800), var(--blue-200));
+  --active-background-emphasized: light-dark(var(--blue-600), var(--blue-400));
+  --active-foreground-emphasized: light-dark(var(--white), var(--black));
+  --error-background-emphasized: light-dark(var(--red-600), var(--red-400));
+  --error-foreground: light-dark(var(--red-800), var(--red-200));
+  --error-separator: light-dark(var(--red-600), var(--red-400));
+  --focus-outline: 2px solid var(--blue-500);
+  --focus-offset: 2px;
+  --hover-lightness-delta: 0.125;
+  --hover-transition: border-color 100ms linear, background-color 100ms linear;
+  --inert-background: light-dark(var(--gray-50), var(--gray-950));
+  --inert-foreground: light-dark(var(--gray-400), var(--gray-600));
+  --fade-in-transition:
+    opacity 200ms cubic-bezier(0.34, 1.2, 0.64, 1),
+    scale 200ms cubic-bezier(0.34, 1.2, 0.64, 1), visibility 0s linear,
+    display 200ms linear allow-discrete;
+}

package/src/css/tokens/surface.css

@@ -0,0 +1,27 @@
+:root {
+  /* Default surface */
+  --background-high: light-dark(var(--gray-100), var(--gray-900));
+  --background-high-emphasized: light-dark(var(--gray-800), var(--gray-200));
+  --background-low: light-dark(var(--gray-50), var(--gray-950));
+  --background-low-emphasized: light-dark(var(--gray-600), var(--gray-400));
+  --separator-high: light-dark(var(--gray-400), var(--gray-600));
+  --separator-low: rgb(from var(--separator-high) r g b / var(--opacity-low));
+  --foreground-high: light-dark(var(--gray-800), var(--gray-200));
+  --foreground-high-emphasized: light-dark(var(--white), var(--black));
+  --foreground-low: light-dark(var(--gray-600), var(--gray-400));
+  --foreground-low-emphasized: light-dark(var(--gray-100), var(--gray-900));
+}
+
+[class*='sui-tone'] {
+  /* Toned surface */
+  --background-high: var(--tone-100);
+  --background-high-emphasized: var(--tone-800);
+  --background-low: var(--tone-50);
+  --background-low-emphasized: var(--tone-600);
+  --separator-high: var(--tone-400);
+  --separator-low: rgb(from var(--separator-high) r g b / var(--opacity-low));
+  --foreground-high: var(--tone-800);
+  --foreground-high-emphasized: var(--tone-0);
+  --foreground-low: var(--tone-600);
+  --foreground-low-emphasized: var(--tone-100);
+}

package/src/hooks/useIsClient.ts

@@ -0,0 +1,10 @@
+import {useSyncExternalStore} from 'react'
+
+/** @public */
+export function useIsClient() {
+  return useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false,
+  )
+}

package/src/index.css

@@ -0,0 +1,18 @@
+/* SUI layer for base styles (currently just our global styles) */
+@layer sui;
+
+/* Import order is important in this file as it maintains
+   correct specificity resolution within the package. */
+
+/* 1. Globals (layered to avoid conflicts with end user resets) */
+@import './css/global/index.css' layer(sui.global);
+
+/* 2. Tokens */
+@import '@sanity-labs/design-tokens/dist/css/index.css';
+@import './css/tokens/index.css';
+
+/* 3. Component styles */
+@import './components/index.css';
+
+/* 4. Classes */
+@import './css/classes/index.css';

package/src/index.ts

@@ -0,0 +1,65 @@
+export * from './components/box/Box'
+export * from './components/button/Button'
+export * from './components/card/Card'
+export * from './components/checkbox/Checkbox'
+export * from './components/code/Code'
+export * from './components/container/Container'
+export * from './components/dialog/Dialog'
+export * from './components/divider/Divider'
+export * from './components/eyebrow/Eyebrow'
+export * from './components/flex/Flex'
+export * from './components/grid/Grid'
+export * from './components/h-stack/HStack'
+export * from './components/heading/Heading'
+export * from './components/icon/Icon'
+export * from './components/icon-button/IconButton'
+export * from './components/indicator/Indicator'
+export * from './components/indicator-stack/IndicatorStack'
+export * from './components/inline/Inline'
+export * from './components/label/Label'
+export * from './components/link/Link'
+export * from './components/list/List'
+export * from './components/popover/Popover'
+export * from './components/press-area/PressArea'
+export * from './components/radio/Radio'
+export * from './components/skip-to-content/SkipToContent'
+export * from './components/spinner/Spinner'
+export * from './components/switch/Switch'
+export * from './components/text/Text'
+export * from './components/tooltip/Tooltip'
+export * from './components/tooltip-group/TooltipGroup'
+export * from './components/v-stack/VStack'
+export * from './components/visually-hidden/VisuallyHidden'
+
+export * from './hooks/useIsClient'
+
+export type {FlexParentProps} from './props/flexParent'
+export type {GapProps} from './props/gap'
+export type {GridParentProps} from './props/gridParent'
+export type {LayoutProps} from './props/layout'
+export type {MarginProps} from './props/margin'
+export type {PaddingProps} from './props/padding'
+export type {PlacementProps} from './props/placement'
+export type {TypographyProps} from './props/typography'
+
+export type {CodeSize} from './types/Code'
+export type {ContainerSize} from './types/Container'
+export type {Density} from './types/Density'
+export type {DisplayBlock, DisplayFlex, DisplayGrid} from './types/Display'
+export type {EyebrowSize} from './types/Eyebrow'
+export type {AlignItems, FlexDirection, FlexWrap, JustifyContent} from './types/Flex'
+export type {GridAutoFlow} from './types/Grid'
+export type {HeadingSize} from './types/Heading'
+export type {IconSize} from './types/Icon'
+export type {Overflow} from './types/Overflow'
+export type {Placement} from './types/Placement'
+export type {Position} from './types/Position'
+export type {Radius} from './types/Radius'
+export type {Responsive} from './types/Responsive'
+export type {Shadow} from './types/Shadow'
+export type {Space, SpaceAuto, SpaceAutoNegative, SpaceInherit} from './types/Space'
+export type {TextSize} from './types/Text'
+export type {TextAlign} from './types/TextAlign'
+export type {FontWeight} from './types/FontWeight'
+export type {Tone} from './types/Tone'
+export * from './components/badge/Badge'

package/src/polyfills.ts

@@ -0,0 +1,15 @@
+import {
+  apply as applyClosedByPolyfill,
+  isSupported as isClosedBySupported,
+} from 'dialog-closedby-polyfill'
+
+if (
+  typeof HTMLButtonElement !== 'undefined' &&
+  !('interestForElement' in HTMLButtonElement.prototype)
+) {
+  void import('interestfor')
+}
+
+if (typeof HTMLDialogElement !== 'undefined' && !isClosedBySupported()) {
+  applyClosedByPolyfill()
+}

package/src/props/border.ts

@@ -0,0 +1,51 @@
+import {type PropDef} from '../types/PropDef'
+import {RADIUS, type Radius} from '../types/Radius'
+import {type Responsive} from '../types/Responsive'
+
+export type BorderProps = {
+  /** CSS **border** property */
+  border?: Responsive<boolean>
+  /** CSS **border-top** property */
+  borderTop?: Responsive<boolean>
+  /** CSS **border-right** property */
+  borderRight?: Responsive<boolean>
+  /** CSS **border-bottom** property */
+  borderBottom?: Responsive<boolean>
+  /** CSS **border-left** property */
+  borderLeft?: Responsive<boolean>
+  /** CSS **border-radius** property */
+  radius?: Responsive<Radius>
+}
+
+export const borderProps: Record<string, PropDef> = {
+  border: {
+    type: 'boolean',
+    className: 'border',
+    inverseClassName: 'border-none',
+  },
+  borderTop: {
+    type: 'boolean',
+    className: 'border-top',
+    inverseClassName: 'border-top-none',
+  },
+  borderRight: {
+    type: 'boolean',
+    className: 'border-right',
+    inverseClassName: 'border-right-none',
+  },
+  borderBottom: {
+    type: 'boolean',
+    className: 'border-bottom',
+    inverseClassName: 'border-bottom-none',
+  },
+  borderLeft: {
+    type: 'boolean',
+    className: 'border-left',
+    inverseClassName: 'border-left-none',
+  },
+  radius: {
+    type: 'union',
+    className: 'radius',
+    values: RADIUS,
+  },
+}

package/src/props/flexChild.ts

@@ -0,0 +1,29 @@
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+
+export type FlexChildProps = {
+  /** CSS **flex-basis** property */
+  flexBasis?: Responsive<string>
+  /** CSS **flex-grow** property */
+  flexGrow?: Responsive<number>
+  /** CSS **flex-shrink** property */
+  flexShrink?: Responsive<number>
+}
+
+export const flexChildProps: Record<string, PropDef> = {
+  flexBasis: {
+    type: 'string',
+    className: 'flex-basis',
+    variable: '--flex-basis',
+  },
+  flexGrow: {
+    type: 'number',
+    className: 'flex-grow',
+    variable: '--flex-grow',
+  },
+  flexShrink: {
+    type: 'number',
+    className: 'flex-shrink',
+    variable: '--flex-shrink',
+  },
+}

package/src/props/flexParent.ts

@@ -0,0 +1,47 @@
+import {
+  ALIGN_ITEMS,
+  type AlignItems,
+  FLEX_DIRECTION,
+  FLEX_WRAP,
+  type FlexDirection,
+  type FlexWrap,
+  JUSTIFY_CONTENT,
+  type JustifyContent,
+} from '../types/Flex'
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+
+/** @public */
+export type FlexParentProps = {
+  /** CSS **align-items** property */
+  alignItems?: Responsive<AlignItems>
+  /** CSS **justify-content** property */
+  justifyContent?: Responsive<JustifyContent>
+  /** CSS **flex-direction** property */
+  flexDirection?: Responsive<FlexDirection>
+  /** CSS **flex-wrap** property */
+  flexWrap?: Responsive<FlexWrap>
+}
+
+export const flexParentProps: Record<string, PropDef> = {
+  alignItems: {
+    type: 'union',
+    className: 'align-items',
+    values: ALIGN_ITEMS,
+  },
+  justifyContent: {
+    type: 'union',
+    className: 'justify-content',
+    values: JUSTIFY_CONTENT,
+  },
+  flexDirection: {
+    type: 'union',
+    className: 'flex-direction',
+    values: FLEX_DIRECTION,
+  },
+  flexWrap: {
+    type: 'union',
+    className: 'flex',
+    values: FLEX_WRAP,
+  },
+}

package/src/props/gap.ts

@@ -0,0 +1,31 @@
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+import {SPACE_INHERIT, type SpaceInherit} from '../types/Space'
+
+/** @public */
+export type GapProps = {
+  /** CSS **gap** property */
+  gap?: Responsive<SpaceInherit>
+  /** CSS **row-gap** property */
+  rowGap?: Responsive<SpaceInherit>
+  /** CSS **column-gap** property */
+  columnGap?: Responsive<SpaceInherit>
+}
+
+export const gapProps: Record<string, PropDef> = {
+  gap: {
+    type: 'union',
+    className: 'gap',
+    values: SPACE_INHERIT,
+  },
+  rowGap: {
+    type: 'union',
+    className: 'row-gap',
+    values: SPACE_INHERIT,
+  },
+  columnGap: {
+    type: 'union',
+    className: 'column-gap',
+    values: SPACE_INHERIT,
+  },
+}

package/src/props/gridChild.ts

@@ -0,0 +1,50 @@
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+
+export type GridChildProps = {
+  /** CSS **grid-column** property */
+  gridColumn?: Responsive<string>
+  /** CSS **grid-column-start** property */
+  gridColumnStart?: Responsive<string>
+  /** CSS **grid-column-end** property */
+  gridColumnEnd?: Responsive<string>
+  /** CSS **grid-row** property */
+  gridRow?: Responsive<string>
+  /** CSS **grid-row-start** property */
+  gridRowStart?: Responsive<string>
+  /** CSS **grid-row-end** property */
+  gridRowEnd?: Responsive<string>
+}
+
+export const gridChildProps: Record<string, PropDef> = {
+  gridColumn: {
+    type: 'string',
+    className: 'grid-column',
+    variable: '--grid-column',
+  },
+  gridColumnStart: {
+    type: 'string',
+    className: 'grid-column-start',
+    variable: '--grid-column-start',
+  },
+  gridColumnEnd: {
+    type: 'string',
+    className: 'grid-column-end',
+    variable: '--grid-column-end',
+  },
+  gridRow: {
+    type: 'string',
+    className: 'grid-row',
+    variable: '--grid-row',
+  },
+  gridRowStart: {
+    type: 'string',
+    className: 'grid-row-start',
+    variable: '--grid-row-start',
+  },
+  gridRowEnd: {
+    type: 'string',
+    className: 'grid-row-end',
+    variable: '--grid-row-end',
+  },
+}

package/src/props/gridParent.ts

@@ -0,0 +1,45 @@
+import {GRID_AUTO_FLOW, type GridAutoFlow} from '../types/Grid'
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+
+/** @public */
+export type GridParentProps = {
+  /** CSS **grid-auto-flow** property */
+  gridAutoFlow?: Responsive<GridAutoFlow>
+  /** CSS **grid-auto-columns** property */
+  gridAutoColumns?: Responsive<string>
+  /** CSS **grid-auto-row** property */
+  gridAutoRows?: Responsive<string>
+  /** CSS **grid-template-columns** property */
+  gridTemplateColumns?: Responsive<string>
+  /** CSS **grid-template-rows** property */
+  gridTemplateRows?: Responsive<string>
+}
+
+export const gridParentProps: Record<string, PropDef> = {
+  gridAutoFlow: {
+    type: 'union',
+    className: 'grid-auto-flow',
+    values: GRID_AUTO_FLOW,
+  },
+  gridAutoColumns: {
+    type: 'string',
+    className: 'grid-auto-columns',
+    variable: '--grid-auto-columns',
+  },
+  gridAutoRows: {
+    type: 'string',
+    className: 'grid-auto-rows',
+    variable: '--grid-auto-rows',
+  },
+  gridTemplateColumns: {
+    type: 'string',
+    className: 'grid-template-columns',
+    variable: '--grid-template-columns',
+  },
+  gridTemplateRows: {
+    type: 'string',
+    className: 'grid-template-rows',
+    variable: '--grid-template-rows',
+  },
+}