@hanzogui/web 8.3.5 → 8.4.0

package/src/createComponent.tsx

@@ -34,6 +34,7 @@ import {
 import { setElementProps } from './helpers/setElementProps.tsx'
 import { subscribeToContextGroup } from './helpers/subscribeToContextGroup.tsx'
 import { themeable } from './helpers/themeable.tsx'
+import { axisOf, place } from './helpers/tracks.ts'
 import { getStyleTags } from './helpers/wrapStyleTags.tsx'
 import { useComponentState } from './hooks/useComponentState.ts'
 import { setMediaShouldUpdate, useMedia } from './hooks/useMedia.tsx'
@@ -1042,7 +1043,7 @@ export function createComponent<
 
     const {
       asChild,
-      children,
+      children: childrenIn,
       themeShallow,
       spaceDirection: _spaceDirection,
       onPress,
@@ -1068,6 +1069,25 @@ export function createComponent<
       ...nonGuiProps
     } = viewPropsIn || {}
 
+    // a tracks stack (helpers/tracks.ts): on native the stack stays flex and
+    // each child takes its track as a flex style; on web its children learn
+    // its axis through ComponentContext, and a direct child clears it for its own
+    const tracksIn = (props as { tracks?: unknown }).tracks
+    const tracks =
+      !isHOC && !isText && !asChild && typeof tracksIn === 'string' ? tracksIn : null
+    const children =
+      process.env.GUI_TARGET === 'native' && tracks
+        ? place(childrenIn, tracks)
+        : childrenIn
+    const childTracks = tracks ? axisOf(props) : null
+    const tracksScope =
+      process.env.GUI_TARGET === 'web' &&
+      !isHOC &&
+      !asChild &&
+      childTracks !== (componentContext.tracks ?? null)
+        ? { tracks: childTracks }
+        : null
+
     // these can ultimately be for DOM, react-native-web views, or animated views
     // so the type is pretty loose
     let viewProps = nonGuiProps
@@ -1696,11 +1716,13 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`create-element`
 
-    if ('focusWithinStyle' in propsIn || pseudos?.focusWithinStyle) {
+    const focusWithin = 'focusWithinStyle' in propsIn || !!pseudos?.focusWithinStyle
+    if (focusWithin) {
       content = (
         <ComponentContext.Provider
           {...componentContext}
           setParentFocusState={setStateShallow}
+          {...tracksScope}
         >
           {content}
         </ComponentContext.Provider>
@@ -1714,9 +1736,19 @@ export function createComponent<
     }
 
     // Text components set inText context for children so nested Text can inherit styles
-    if (process.env.GUI_TARGET === 'web' && !asChild && isText && !hasTextAncestor) {
+    const textScope =
+      process.env.GUI_TARGET === 'web' && !asChild && isText && !hasTextAncestor
+    if (textScope) {
+      content = (
+        <ComponentContext.Provider {...componentContext} inText={true} {...tracksScope}>
+          {content}
+        </ComponentContext.Provider>
+      )
+    }
+
+    if (tracksScope && !focusWithin && !textScope) {
       content = (
-        <ComponentContext.Provider {...componentContext} inText={true}>
+        <ComponentContext.Provider {...componentContext} {...tracksScope}>
           {content}
         </ComponentContext.Provider>
       )

package/src/helpers/createDesignSystem.ts

@@ -252,6 +252,7 @@ export function getCSS(
 .is_Text { display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0; }
 @scope (.is_Text) to (.is_View) { .is_Text { white-space: inherit; word-wrap: inherit; } }
 ._dsp_contents {display:contents;}
+[data-i18n-mirror]:dir(rtl) {transform:scaleX(-1);}
 ._no_backdrop::backdrop {display: none;}
 .is_Input::selection, .is_TextArea::selection {background-color: var(--t_selectionColor);}
 .is_Input::placeholder, .is_TextArea::placeholder {color: var(--t_placeholderColor);}

package/src/helpers/expandStyle.ts

@@ -78,6 +78,19 @@ export function expandStyle(
       return expandFlex(value, styleCompat)
     }
 
+    // react-native's direction-relative names are not CSS: `paddingStart`
+    // hyphenates to `padding-start`, which no browser parses, so the rule was
+    // dropped and the element laid out as if the prop were absent. They land on
+    // the CSS logical property that follows the writing direction.
+    if (key in webInlineNames) {
+      return [[webInlineNames[key], value]]
+    }
+    // two-sided inline shorthands split into the longhands above, so a later
+    // `paddingInlineEnd` replaces one side instead of racing the shorthand
+    if (key in webInlineExpansions) {
+      return webInlineExpansions[key].map((k) => [k, value])
+    }
+
     switch (key) {
       case 'writingDirection': {
         return [['direction', value]]
@@ -166,6 +179,18 @@ export function expandStyle(
         }
         return
       }
+      case 'textAlign': {
+        // react-native has no start/end alignment; its left/right already
+        // swap under RTL (I18nManager.doLeftAndRightSwapInRTL), so they are
+        // the direction-relative values there
+        if (value === 'start') {
+          return [['textAlign', 'left']]
+        }
+        if (value === 'end') {
+          return [['textAlign', 'right']]
+        }
+        return
+      }
     }
 
     // native-only logical expansions (RTL-aware inline props output RN-style
@@ -295,6 +320,36 @@ const nativeInlineExpansions: Record<string, string[]> = {
   paddingInline: ['paddingEnd', 'paddingStart'],
   paddingInlineStart: ['paddingStart'],
   paddingInlineEnd: ['paddingEnd'],
-  insetInlineStart: ['left'],
-  insetInlineEnd: ['right'],
+  // start/end follow the layout direction on native; left/right do not
+  insetInline: ['start', 'end'],
+  insetInlineStart: ['start'],
+  insetInlineEnd: ['end'],
+}
+
+// react-native's direction-relative names -> the CSS logical property each one
+// means. Radii read block-then-inline: top-start is start-start.
+const webInlineNames: Record<string, string> = {
+  start: 'insetInlineStart',
+  end: 'insetInlineEnd',
+  marginStart: 'marginInlineStart',
+  marginEnd: 'marginInlineEnd',
+  paddingStart: 'paddingInlineStart',
+  paddingEnd: 'paddingInlineEnd',
+  borderStartColor: 'borderInlineStartColor',
+  borderEndColor: 'borderInlineEndColor',
+  borderStartWidth: 'borderInlineStartWidth',
+  borderEndWidth: 'borderInlineEndWidth',
+  borderTopStartRadius: 'borderStartStartRadius',
+  borderTopEndRadius: 'borderStartEndRadius',
+  borderBottomStartRadius: 'borderEndStartRadius',
+  borderBottomEndRadius: 'borderEndEndRadius',
+}
+
+const webInlineExpansions: Record<string, string[]> = {
+  insetInline: ['insetInlineStart', 'insetInlineEnd'],
+  marginInline: ['marginInlineStart', 'marginInlineEnd'],
+  paddingInline: ['paddingInlineStart', 'paddingInlineEnd'],
+  borderInlineColor: ['borderInlineStartColor', 'borderInlineEndColor'],
+  borderInlineWidth: ['borderInlineStartWidth', 'borderInlineEndWidth'],
+  borderInlineStyle: ['borderInlineStartStyle', 'borderInlineEndStyle'],
 }

package/src/helpers/getSplitStyles.tsx

@@ -80,6 +80,7 @@ import { sortString } from './sortString.ts'
 import { styleOriginalValues } from './styleOriginalValues.ts'
 import { type StyleTokenProvenance, setStyleTokenProvenance } from './styleProvenance.ts'
 import { transformsToString } from './transformsToString.ts'
+import { axisOf, gridOf, renamesOf } from './tracks.ts'
 
 export { styleOriginalValues }
 export { getStyleTokenProvenance, STYLE_TOKEN_PROVENANCE_KEY } from './styleProvenance.ts'
@@ -274,6 +275,15 @@ export const getSplitStyles: StyleSplitter = (
     animationDriver: driver,
   }
 
+  // a stack that lays its children on grid tracks (helpers/tracks.ts). an HOC
+  // passes the prop to the component it wraps, which does the work.
+  const tracks =
+    !isHOC && !isText && typeof props.tracks === 'string' ? props.tracks : null
+  const tracksAxis = tracks ? axisOf(props) : null
+  if (process.env.GUI_TARGET === 'web' && !isHOC) {
+    styleState.renames = renamesOf(tracksAxis, componentContext?.tracks)
+  }
+
   // only used by compiler
   if (process.env.IS_STATIC === 'is_static') {
     const { fallbackProps } = styleProps
@@ -1217,6 +1227,12 @@ export const getSplitStyles: StyleSplitter = (
     time`split-styles-propsend`
   }
 
+  // the grid a tracks stack is, under any of these the author named themselves
+  if (process.env.GUI_TARGET === 'web' && tracks) {
+    const grid = gridOf(tracks, tracksAxis!)
+    for (const key in grid) mergeStyle(styleState, key, grid[key], 0)
+  }
+
   // style prop after:
 
   const avoidNormalize = styleProps.noNormalize === false

package/src/helpers/propMapper.ts

@@ -29,6 +29,14 @@ import { styleOriginalValues } from './styleOriginalValues.ts'
 export { getTokenForKey } from './getTokenForKey.ts'
 
 export const propMapper: PropMapper = (key, value, styleState, disabled, map) => {
+  // a vertical tracks stack and its direct children read alignment across
+  // (helpers/tracks.ts); every key this call emits passes through the rename
+  const { renames } = styleState
+  if (renames) {
+    const emit = map
+    map = (k, v, o) => emit(renames[k] || k, v, o)
+  }
+
   if (disabled) {
     return map(key, value)
   }

package/src/helpers/skipProps.ts

@@ -17,6 +17,7 @@ export const skipProps = {
   render: 1,
   style: 1, // handled after loop so pseudos set usedKeys and override it if necessary
   group: 1,
+  tracks: 1, // read by getSplitStyles and createComponent (helpers/tracks.ts)
   animatePresence: 1,
 }
 

package/src/helpers/tracks.ts

@@ -0,0 +1,206 @@
+/**
+ * `tracks`: a stack that lays its children on CSS grid tracks along its own
+ * axis, so the parent sizes them and the children carry no flex props.
+ *
+ *   <YStack tracks="auto 1fr auto">   header, body that fills, footer
+ *   <XStack tracks="240px 1fr">       a fixed rail and the page beside it
+ *
+ * The axis is the stack's own flexDirection: `row` and `row-reverse` run across
+ * (x), everything else runs down (y). A reverse direction is not mirrored —
+ * grid has no reverse flow — so the children sit on the tracks in source order.
+ *
+ * WEB is the browser's grid:
+ *
+ *                 y (YStack)                     x (XStack)
+ *   display       grid                           grid
+ *   flow          grid-auto-flow: row            grid-auto-flow: column
+ *   tracks        grid-template-rows             grid-template-columns
+ *   cross axis    grid-auto-columns:             grid-auto-rows:
+ *                   minmax(0, 1fr)                 minmax(0, 1fr)
+ *
+ * The cross-axis track is one that fills the stack and has no content floor,
+ * which is what a flex line's cross size is: a child stretched across a column
+ * is exactly as wide as the column, however wide its content.
+ *
+ * A prop the author names on the stack wins over all of these, so
+ * `display="none"` still hides it and an explicit `gridAutoFlow` stays.
+ *
+ * ALIGNMENT KEEPS ITS FLEX MEANING. On x, grid's block axis is the row's cross
+ * axis and its inline axis the main axis, so `items`, `justify` and `self` mean
+ * what they meant and pass through. On y the two axes swap, so they are
+ * renamed:
+ *
+ *   on the stack     items   (alignItems)      ->  justifyItems
+ *                    justify (justifyContent)  ->  alignContent
+ *                    content (alignContent)    ->  justifyContent
+ *   on a child       self    (alignSelf)       ->  justifySelf
+ *
+ * The rename happens where every style key is mapped (propMapper), so it holds
+ * for a key written in a media query, a pseudo style or a variant as well as a
+ * plain prop. A child learns that it sits in a vertical stack from
+ * ComponentContext; the context reaches only the stack's direct children, and
+ * each of them clears it for its own.
+ *
+ * NATIVE falls back to flex: the stack stays the flex column or row it is, and
+ * each child takes the track at its position as its flex style. Every child
+ * gets one, written as longhands, so a flex prop the child set on itself does
+ * not combine with it: the track wins, as it does on web.
+ *
+ *   Nfr, minmax(_, Nfr)          flexGrow N, flexShrink 1, flexBasis 0  (flex: N)
+ *   Npx, N%, 0                   flexGrow 0, flexShrink 0, flexBasis N  (px as a number)
+ *   repeat(K, list)              the list written out K times
+ *   anything else, and every     flexGrow 0, flexShrink 0, flexBasis auto
+ *   child past the list          (content-sized, as an auto track is)
+ *
+ * `repeat(auto-fill, …)` and `repeat(auto-fit, …)` need the stack's measured
+ * size, so the list ends there and the children from that position on are
+ * content-sized.
+ *
+ * Positions count each child that renders, through fragments, and skip a child
+ * whose `position` prop is absolute or fixed, as grid does. A gui child takes
+ * the style as props; any other element as a `style` entry after its own, which
+ * a custom component has to pass to its root. Alignment is not renamed on
+ * native: the stack is still flex there.
+ */
+import React from 'react'
+
+import { isGuiComponent } from './isGuiComponent.tsx'
+
+export type Axis = 'x' | 'y'
+
+/** The axis a stack lays its tracks on, from its own flexDirection. */
+export const axisOf = (props: Record<string, any>): Axis =>
+  props.flexDirection === 'row' || props.flexDirection === 'row-reverse' ? 'x' : 'y'
+
+/** Grid styles for a tracks stack on web. */
+export const gridOf = (tracks: string, axis: Axis): Record<string, string> =>
+  axis === 'x'
+    ? {
+        display: 'grid',
+        gridAutoFlow: 'column',
+        gridTemplateColumns: tracks,
+        gridAutoRows: 'minmax(0, 1fr)',
+      }
+    : {
+        display: 'grid',
+        gridAutoFlow: 'row',
+        gridTemplateRows: tracks,
+        gridAutoColumns: 'minmax(0, 1fr)',
+      }
+
+const STACK: Record<string, string> = {
+  alignItems: 'justifyItems',
+  justifyContent: 'alignContent',
+  alignContent: 'justifyContent',
+}
+const ITEM: Record<string, string> = { alignSelf: 'justifySelf' }
+const BOTH: Record<string, string> = { ...STACK, ...ITEM }
+
+/**
+ * The renames for one component on web: as a vertical tracks stack, as a
+ * direct child of one, or both. Undefined when neither, which is every
+ * component that does not opt in.
+ */
+export function renamesOf(
+  own: Axis | null,
+  parent: Axis | null | undefined
+): Record<string, string> | undefined {
+  if (own === 'y') return parent === 'y' ? BOTH : STACK
+  return parent === 'y' ? ITEM : undefined
+}
+
+type Flex = { flexGrow: number; flexShrink: number; flexBasis: number | string }
+
+const CONTENT: Flex = { flexGrow: 0, flexShrink: 0, flexBasis: 'auto' }
+
+const FR = /^(\d*\.?\d+)fr$/
+const PX = /^(\d*\.?\d+)px$/
+const PERCENT = /^\d*\.?\d+%$/
+
+/** One track as a child's flex style. */
+function flexOf(track: string): Flex {
+  const fr = FR.exec(track)
+  if (fr) return { flexGrow: Number(fr[1]), flexShrink: 1, flexBasis: 0 }
+  const px = PX.exec(track)
+  if (px) return { flexGrow: 0, flexShrink: 0, flexBasis: Number(px[1]) }
+  if (track === '0') return { flexGrow: 0, flexShrink: 0, flexBasis: 0 }
+  if (PERCENT.test(track)) return { flexGrow: 0, flexShrink: 0, flexBasis: track }
+  if (track.startsWith('minmax(')) {
+    const max = split(track.slice(7, -1), ',')[1]
+    if (max && FR.test(max)) return flexOf(max)
+  }
+  return CONTENT
+}
+
+/** Split at the top level only, so `minmax(0, 1fr)` stays one piece. */
+function split(list: string, at: ' ' | ','): string[] {
+  const out: string[] = []
+  let depth = 0
+  let part = ''
+  for (const c of list) {
+    if (c === '(') depth++
+    if (c === ')') depth--
+    if (depth === 0 && (at === ' ' ? /\s/.test(c) : c === ',')) {
+      if (part.trim()) out.push(part.trim())
+      part = ''
+    } else {
+      part += c
+    }
+  }
+  if (part.trim()) out.push(part.trim())
+  return out
+}
+
+const REPEAT = /^repeat\(\s*(\d+)\s*,([\s\S]*)\)$/
+
+const cache = new Map<string, Flex[]>()
+
+/** The flex style for each position, read once per distinct track list. */
+export function flexesOf(tracks: string): Flex[] {
+  let flexes = cache.get(tracks)
+  if (flexes) return flexes
+  flexes = []
+  for (const part of split(tracks, ' ')) {
+    if (!part.startsWith('repeat(')) {
+      flexes.push(flexOf(part))
+      continue
+    }
+    const fixed = REPEAT.exec(part)
+    if (!fixed) break
+    const inner = split(fixed[2], ' ').map(flexOf)
+    for (let i = 0; i < Number(fixed[1]); i++) flexes.push(...inner)
+  }
+  cache.set(tracks, flexes)
+  return flexes
+}
+
+const placed = (child: React.ReactElement<any>) => {
+  const position = child.props?.position
+  return position !== 'absolute' && position !== 'fixed'
+}
+
+/** Native: each child takes the flex style of the track at its position. */
+export function place(children: React.ReactNode, tracks: string): React.ReactNode {
+  const flexes = flexesOf(tracks)
+  const at = { i: 0 }
+  const walk = (list: React.ReactNode): React.ReactNode =>
+    React.Children.map(list, (node) => {
+      if (node == null || typeof node === 'boolean') return node
+      if (!React.isValidElement(node)) {
+        at.i++
+        return node
+      }
+      const child = node as React.ReactElement<any>
+      if (child.type === React.Fragment) {
+        return React.cloneElement(child, undefined, walk(child.props.children))
+      }
+      if (!placed(child)) return child
+      const flex = flexes[at.i++] ?? CONTENT
+      if (isGuiComponent(child.type)) return React.cloneElement(child, flex)
+      const own = child.props.style
+      return React.cloneElement(child, {
+        style: own == null ? flex : [...(Array.isArray(own) ? own : [own]), flex],
+      })
+    })
+  return walk(children)
+}

package/src/types.tsx

@@ -588,6 +588,11 @@ export type ComponentContextI = {
   mediaEmit?: (state: UseMediaState) => void
   mediaEmitListeners?: Set<(state: UseMediaState) => void>
   insets?: { top: number; right: number; bottom: number; left: number } | null
+  /**
+   * The axis of the `tracks` stack this component sits in directly, on web.
+   * A direct child of a vertical one reads `self` across (helpers/tracks.ts).
+   */
+  tracks?: 'x' | 'y' | null
 }
 
 export type GuiComponentStateRef = {
@@ -2646,7 +2651,12 @@ export interface StackStyleBase
   extends Omit<ViewStyle, keyof ExtendedBaseProps | 'elevation'>, ExtendedBaseProps {}
 
 export interface TextStylePropsBase
-  extends Omit<RNTextStyle, keyof ExtendedBaseProps>, ExtendedBaseProps {
+  extends Omit<RNTextStyle, keyof ExtendedBaseProps | 'textAlign'>, ExtendedBaseProps {
+  /**
+   * `start` and `end` follow the writing direction: the CSS logical values on
+   * web, and on native the left/right react-native swaps under RTL.
+   */
+  textAlign?: RNTextStyle['textAlign'] | 'start' | 'end'
   ellipsis?: boolean
   numberOfLines?: number
   textDecorationDistance?: number
@@ -2704,6 +2714,20 @@ export interface StackNonStyleProps
     GuiComponentPropsBase {
   // we allow either RN or web style props, of course only web css props only works on web
   style?: StyleProp<LooseCombinedObjects<React.CSSProperties, ViewStyle>>
+
+  /**
+   * Lays the children on grid tracks along the stack's axis, sized by the
+   * stack: a CSS track list, one track per child in order.
+   *
+   * On web the stack becomes a grid: an XStack's tracks are its columns, a
+   * YStack's its rows, and `items`, `justify` and a child's `self` keep their
+   * flex meaning. On native it stays flex and each child takes its track as a
+   * flex style (`1fr` is `flex: 1`). The full mapping is helpers/tracks.ts.
+   *
+   * @example <YStack tracks="auto 1fr auto">
+   * @example <XStack tracks="240px 1fr" gap="$4">
+   */
+  tracks?: string
 }
 
 export type StackStyle = WithThemeShorthandsPseudosMedia<StackStyleBase>
@@ -2948,6 +2972,8 @@ export type GetStyleState = {
   pseudoTransitions?: PseudoTransitions | null
   // Resolved animation driver (respects animatedBy prop)
   animationDriver?: AnimationDriver | null
+  // style keys renamed for a vertical `tracks` stack and its direct children (helpers/tracks.ts)
+  renames?: Record<string, string>
 }
 
 export type StyleResolver<Response = PropMappedValue> = (

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2C,MAAM,OAAO,CAAA;AA6B/D,OAAO,KAAK,EAQV,YAAY,EAEZ,YAAY,EACZ,iBAAiB,EACjB,UAAU,EAOX,MAAM,aAAa,CAAA;AAkCpB,KAAK,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAEhF,eAAO,MAAM,kBAAkB,wBAA+B,CAAA;AAwK9D,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,EACnD,GAAG,SAAS,UAAU,GAAG,UAAU,EACnC,SAAS,GAAG,KAAK,EACjB,UAAU,SAAS,MAAM,GAAG,KAAK,EACjC,YAAY,EAAE,YAAY,oEAyoD3B"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2C,MAAM,OAAO,CAAA;AA8B/D,OAAO,KAAK,EAQV,YAAY,EAEZ,YAAY,EACZ,iBAAiB,EACjB,UAAU,EAOX,MAAM,aAAa,CAAA;AAkCpB,KAAK,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAEhF,eAAO,MAAM,kBAAkB,wBAA+B,CAAA;AAwK9D,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,EACnD,GAAG,SAAS,UAAU,GAAG,UAAU,EACnC,SAAS,GAAG,KAAK,EACjB,UAAU,SAAS,MAAM,GAAG,KAAK,EACjC,YAAY,EAAE,YAAY,oEAwqD3B"}

package/types/helpers/createDesignSystem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createDesignSystem.d.ts","sourceRoot":"","sources":["../../src/helpers/createDesignSystem.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAU5D,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,iBAAiB,EAAE,MAAM,MAAM,EAAE,CAAA;CAClC,CAAA;AAGD,iBAAS,2BAA2B,CAClC,UAAU,EAAE,GAAG,EACf,QAAQ,GAAE,MAAgB,GACzB,MAAM,EAAE,CAwBV;AAED,OAAO,EAAE,2BAA2B,EAAE,CAAA;AAEtC;;GAEG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,EAChD,4BAA4B,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,GAC1D,MAAM,EAAE,CAuBV;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,EAC5C,qBAAqB,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,MAAM,EAAE,GACnD,MAAM,CACP,MAAM,EACN;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,GAAG,CAAA;CAAE,CAC7E,CAyBA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,YAAY,EAAE,MAAM,EAAE,EACtB,gBAAgB,EAAE,MAAM,CACtB,MAAM,EACN;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,GAAG,CAAA;CAAE,CAC7E,EACD,gBAAgB,GAAE,MAAgB,GACjC,MAAM,EAAE,CA6CV;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,aAAa,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,CAAC,EACrD,QAAQ,EAAE,cAAc,GACvB,MAAM,EAAE,CAmBV;AAED;;GAEG;AACH,wBAAgB,MAAM,CACpB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE;IACJ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,QAAQ,GAAG,eAAe,GAAG,MAAM,GAAG,IAAI,CAAA;CACrD,YAAK,EACN,SAAS,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAC3B,MAAM,CAyDR"}
+{"version":3,"file":"createDesignSystem.d.ts","sourceRoot":"","sources":["../../src/helpers/createDesignSystem.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAU5D,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,iBAAiB,EAAE,MAAM,MAAM,EAAE,CAAA;CAClC,CAAA;AAGD,iBAAS,2BAA2B,CAClC,UAAU,EAAE,GAAG,EACf,QAAQ,GAAE,MAAgB,GACzB,MAAM,EAAE,CAwBV;AAED,OAAO,EAAE,2BAA2B,EAAE,CAAA;AAEtC;;GAEG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,EAChD,4BAA4B,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,GAC1D,MAAM,EAAE,CAuBV;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,EAC5C,qBAAqB,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,MAAM,EAAE,GACnD,MAAM,CACP,MAAM,EACN;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,GAAG,CAAA;CAAE,CAC7E,CAyBA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,YAAY,EAAE,MAAM,EAAE,EACtB,gBAAgB,EAAE,MAAM,CACtB,MAAM,EACN;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,GAAG,CAAA;CAAE,CAC7E,EACD,gBAAgB,GAAE,MAAgB,GACjC,MAAM,EAAE,CA6CV;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,aAAa,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,CAAC,EACrD,QAAQ,EAAE,cAAc,GACvB,MAAM,EAAE,CAmBV;AAED;;GAEG;AACH,wBAAgB,MAAM,CACpB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE;IACJ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,QAAQ,GAAG,eAAe,GAAG,MAAM,GAAG,IAAI,CAAA;CACrD,YAAK,EACN,SAAS,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAC3B,MAAM,CA0DR"}

package/types/helpers/expandStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandStyle.d.ts","sourceRoot":"","sources":["../../src/helpers/expandStyle.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AA8DnD,wBAAgB,WAAW,CACzB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,GAAG,EACV,WAAW,GAAE,WAA8B,GAC1C,eAAe,CAkHjB"}
+{"version":3,"file":"expandStyle.d.ts","sourceRoot":"","sources":["../../src/helpers/expandStyle.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AA8DnD,wBAAgB,WAAW,CACzB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,GAAG,EACV,WAAW,GAAE,WAA8B,GAC1C,eAAe,CA2IjB"}

package/types/helpers/getSplitStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EAEf,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAIb,eAAe,EACf,YAAY,EAEZ,iBAAiB,EAEjB,SAAS,EACT,WAAW,EAEZ,MAAM,cAAc,CAAA;AA8BrB,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAI9D,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,OAAO,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAA;AAC1F,YAAY,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAEnF,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAM3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAIhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,iBAAiB,EACjC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAC3B,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,EAEtC,WAAW,CAAC,EAAE,MAAM,EACpB,iBAAiB,CAAC,EAAE,OAAO,EAC3B,KAAK,CAAC,EAAE,SAAS,EAEjB,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,KACrC,IAAI,GAAG,cAAc,CAAA;AAE1B,eAAO,MAAM,UAAU,MAAM,CAAA;AA8D7B,eAAO,MAAM,cAAc,EAAE,aA63C5B,CAAA;AAqFD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,wBACO,OAAO,KAC5B,SA6HF,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,aAc5B,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EAEf,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAIb,eAAe,EACf,YAAY,EAEZ,iBAAiB,EAEjB,SAAS,EACT,WAAW,EAEZ,MAAM,cAAc,CAAA;AA8BrB,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAK9D,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,OAAO,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAA;AAC1F,YAAY,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAEnF,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAM3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAIhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,iBAAiB,EACjC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAC3B,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,EAEtC,WAAW,CAAC,EAAE,MAAM,EACpB,iBAAiB,CAAC,EAAE,OAAO,EAC3B,KAAK,CAAC,EAAE,SAAS,EAEjB,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,KACrC,IAAI,GAAG,cAAc,CAAA;AAE1B,eAAO,MAAM,UAAU,MAAM,CAAA;AA8D7B,eAAO,MAAM,cAAc,EAAE,aA44C5B,CAAA;AAqFD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,wBACO,OAAO,KAC5B,SA6HF,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,aAc5B,CAAA"}

package/types/helpers/propMapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"propMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/propMapper.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,UAAU,EAGV,iBAAiB,EAGlB,MAAM,cAAc,CAAA;AAkBrB,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,eAAO,MAAM,UAAU,EAAE,UAqHxB,CAAA;AAqGD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,iBAAiB,sBAkBlF"}
+{"version":3,"file":"propMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/propMapper.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,UAAU,EAGV,iBAAiB,EAGlB,MAAM,cAAc,CAAA;AAkBrB,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,eAAO,MAAM,UAAU,EAAE,UA6HxB,CAAA;AAqGD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,iBAAiB,sBAkBlF"}

package/types/helpers/skipProps.d.ts

@@ -14,6 +14,7 @@ export declare const skipProps: {
     render: number;
     style: number;
     group: number;
+    tracks: number;
     animatePresence: number;
 };
 //# sourceMappingURL=skipProps.d.ts.map

package/types/helpers/skipProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skipProps.d.ts","sourceRoot":"","sources":["../../src/helpers/skipProps.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,SAAS;IACpB,aAAa;IACb,UAAU;IACV,KAAK;IACL,WAAW;IACX,UAAU;IACV,gBAAgB;IAChB,KAAK;IACL,aAAa;IACb,mBAAmB;IACnB,MAAM;IACN,KAAK;IACL,KAAK;IACL,eAAe;CAChB,CAAA"}
+{"version":3,"file":"skipProps.d.ts","sourceRoot":"","sources":["../../src/helpers/skipProps.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,SAAS;IACpB,aAAa;IACb,UAAU;IACV,KAAK;IACL,WAAW;IACX,UAAU;IACV,gBAAgB;IAChB,KAAK;IACL,aAAa;IACb,mBAAmB;IACnB,MAAM;IACN,KAAK;IACL,KAAK;IACL,MAAM;IACN,eAAe;CAChB,CAAA"}

package/types/helpers/tracks.d.ts

@@ -0,0 +1,87 @@
+/**
+ * `tracks`: a stack that lays its children on CSS grid tracks along its own
+ * axis, so the parent sizes them and the children carry no flex props.
+ *
+ *   <YStack tracks="auto 1fr auto">   header, body that fills, footer
+ *   <XStack tracks="240px 1fr">       a fixed rail and the page beside it
+ *
+ * The axis is the stack's own flexDirection: `row` and `row-reverse` run across
+ * (x), everything else runs down (y). A reverse direction is not mirrored —
+ * grid has no reverse flow — so the children sit on the tracks in source order.
+ *
+ * WEB is the browser's grid:
+ *
+ *                 y (YStack)                     x (XStack)
+ *   display       grid                           grid
+ *   flow          grid-auto-flow: row            grid-auto-flow: column
+ *   tracks        grid-template-rows             grid-template-columns
+ *   cross axis    grid-auto-columns:             grid-auto-rows:
+ *                   minmax(0, 1fr)                 minmax(0, 1fr)
+ *
+ * The cross-axis track is one that fills the stack and has no content floor,
+ * which is what a flex line's cross size is: a child stretched across a column
+ * is exactly as wide as the column, however wide its content.
+ *
+ * A prop the author names on the stack wins over all of these, so
+ * `display="none"` still hides it and an explicit `gridAutoFlow` stays.
+ *
+ * ALIGNMENT KEEPS ITS FLEX MEANING. On x, grid's block axis is the row's cross
+ * axis and its inline axis the main axis, so `items`, `justify` and `self` mean
+ * what they meant and pass through. On y the two axes swap, so they are
+ * renamed:
+ *
+ *   on the stack     items   (alignItems)      ->  justifyItems
+ *                    justify (justifyContent)  ->  alignContent
+ *                    content (alignContent)    ->  justifyContent
+ *   on a child       self    (alignSelf)       ->  justifySelf
+ *
+ * The rename happens where every style key is mapped (propMapper), so it holds
+ * for a key written in a media query, a pseudo style or a variant as well as a
+ * plain prop. A child learns that it sits in a vertical stack from
+ * ComponentContext; the context reaches only the stack's direct children, and
+ * each of them clears it for its own.
+ *
+ * NATIVE falls back to flex: the stack stays the flex column or row it is, and
+ * each child takes the track at its position as its flex style. Every child
+ * gets one, written as longhands, so a flex prop the child set on itself does
+ * not combine with it: the track wins, as it does on web.
+ *
+ *   Nfr, minmax(_, Nfr)          flexGrow N, flexShrink 1, flexBasis 0  (flex: N)
+ *   Npx, N%, 0                   flexGrow 0, flexShrink 0, flexBasis N  (px as a number)
+ *   repeat(K, list)              the list written out K times
+ *   anything else, and every     flexGrow 0, flexShrink 0, flexBasis auto
+ *   child past the list          (content-sized, as an auto track is)
+ *
+ * `repeat(auto-fill, …)` and `repeat(auto-fit, …)` need the stack's measured
+ * size, so the list ends there and the children from that position on are
+ * content-sized.
+ *
+ * Positions count each child that renders, through fragments, and skip a child
+ * whose `position` prop is absolute or fixed, as grid does. A gui child takes
+ * the style as props; any other element as a `style` entry after its own, which
+ * a custom component has to pass to its root. Alignment is not renamed on
+ * native: the stack is still flex there.
+ */
+import React from 'react';
+export type Axis = 'x' | 'y';
+/** The axis a stack lays its tracks on, from its own flexDirection. */
+export declare const axisOf: (props: Record<string, any>) => Axis;
+/** Grid styles for a tracks stack on web. */
+export declare const gridOf: (tracks: string, axis: Axis) => Record<string, string>;
+/**
+ * The renames for one component on web: as a vertical tracks stack, as a
+ * direct child of one, or both. Undefined when neither, which is every
+ * component that does not opt in.
+ */
+export declare function renamesOf(own: Axis | null, parent: Axis | null | undefined): Record<string, string> | undefined;
+type Flex = {
+    flexGrow: number;
+    flexShrink: number;
+    flexBasis: number | string;
+};
+/** The flex style for each position, read once per distinct track list. */
+export declare function flexesOf(tracks: string): Flex[];
+/** Native: each child takes the flex style of the track at its position. */
+export declare function place(children: React.ReactNode, tracks: string): React.ReactNode;
+export {};
+//# sourceMappingURL=tracks.d.ts.map

package/types/helpers/tracks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracks.d.ts","sourceRoot":"","sources":["../../src/helpers/tracks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG,CAAA;AAE5B,uEAAuE;AACvE,eAAO,MAAM,MAAM,UAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,IACgC,CAAA;AAEpF,6CAA6C;AAC7C,eAAO,MAAM,MAAM,WAAY,MAAM,QAAQ,IAAI,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAalE,CAAA;AAUP;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,IAAI,GAAG,IAAI,EAChB,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,GAC9B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAGpC;AAED,KAAK,IAAI,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AA8ChF,2EAA2E;AAC3E,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,CAgB/C;AAOD,4EAA4E;AAC5E,wBAAgB,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAuBhF"}