@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/src/insertFont.ts

@@ -41,11 +41,11 @@ export function parseFont<A extends GenericFont>(definition: A): DeepVariableObj
       parsed[attrKey] = {}
       for (const key in attr) {
         let val = attr[key] as any
-        // is a theme reference
-        if (val.val?.[0] === '$') {
+        // Font color names resolve against the active theme at use time.
+        if (attrKey === 'color' && typeof val.val === 'string') {
           val = val.val
         }
-        parsed[attrKey][`$${key}`] = val
+        parsed[attrKey][key] = val
       }
     }
   }
@@ -66,7 +66,7 @@ export function registerFontVariables(parsedFont: any) {
         for (const fskey in parsedFont[fkey]) {
           const fval = parsedFont[fkey][fskey]
           if (typeof fval === 'string') {
-            // no need to add its a theme reference like "$borderColor"
+            // theme references do not register font variables
           } else {
             const val = parsedFont[fkey][fskey] as Variable
             registerCSSVariable(val)

package/src/interfaces/CSSColorNames.tsx

@@ -1,149 +1,152 @@
-export type CSSColorNames =
-  | 'aliceblue'
-  | 'antiquewhite'
-  | 'aqua'
-  | 'aquamarine'
-  | 'azure'
-  | 'beige'
-  | 'bisque'
-  | 'black'
-  | 'blanchedalmond'
-  | 'blue'
-  | 'blueviolet'
-  | 'brown'
-  | 'burlywood'
-  | 'cadetblue'
-  | 'chartreuse'
-  | 'chocolate'
-  | 'coral'
-  | 'cornflowerblue'
-  | 'cornsilk'
-  | 'crimson'
-  | 'cyan'
-  | 'darkblue'
-  | 'darkcyan'
-  | 'darkgoldenrod'
-  | 'darkgray'
-  | 'darkgreen'
-  | 'darkgrey'
-  | 'darkkhaki'
-  | 'darkmagenta'
-  | 'darkolivegreen'
-  | 'darkorange'
-  | 'darkorchid'
-  | 'darkred'
-  | 'darksalmon'
-  | 'darkseagreen'
-  | 'darkslateblue'
-  | 'darkslategray'
-  | 'darkslategrey'
-  | 'darkturquoise'
-  | 'darkviolet'
-  | 'deeppink'
-  | 'deepskyblue'
-  | 'dimgray'
-  | 'dimgrey'
-  | 'dodgerblue'
-  | 'firebrick'
-  | 'floralwhite'
-  | 'forestgreen'
-  | 'fuchsia'
-  | 'gainsboro'
-  | 'ghostwhite'
-  | 'gold'
-  | 'goldenrod'
-  | 'gray'
-  | 'green'
-  | 'greenyellow'
-  | 'grey'
-  | 'honeydew'
-  | 'hotpink'
-  | 'indianred '
-  | 'indigo'
-  | 'ivory'
-  | 'khaki'
-  | 'lavender'
-  | 'lavenderblush'
-  | 'lawngreen'
-  | 'lemonchiffon'
-  | 'lightblue'
-  | 'lightcoral'
-  | 'lightcyan'
-  | 'lightgoldenrodyellow'
-  | 'lightgray'
-  | 'lightgreen'
-  | 'lightgrey'
-  | 'lightpink'
-  | 'lightsalmon'
-  | 'lightseagreen'
-  | 'lightskyblue'
-  | 'lightslategray'
-  | 'lightslategrey'
-  | 'lightsteelblue'
-  | 'lightyellow'
-  | 'lime'
-  | 'limegreen'
-  | 'linen'
-  | 'magenta'
-  | 'maroon'
-  | 'mediumaquamarine'
-  | 'mediumblue'
-  | 'mediumorchid'
-  | 'mediumpurple'
-  | 'mediumseagreen'
-  | 'mediumslateblue'
-  | 'mediumspringgreen'
-  | 'mediumturquoise'
-  | 'mediumvioletred'
-  | 'midnightblue'
-  | 'mintcream'
-  | 'mistyrose'
-  | 'moccasin'
-  | 'navajowhite'
-  | 'navy'
-  | 'oldlace'
-  | 'olive'
-  | 'olivedrab'
-  | 'orange'
-  | 'orangered'
-  | 'orchid'
-  | 'palegoldenrod'
-  | 'palegreen'
-  | 'paleturquoise'
-  | 'palevioletred'
-  | 'papayawhip'
-  | 'peachpuff'
-  | 'peru'
-  | 'pink'
-  | 'plum'
-  | 'powderblue'
-  | 'purple'
-  | 'rebeccapurple'
-  | 'red'
-  | 'rosybrown'
-  | 'royalblue'
-  | 'saddlebrown'
-  | 'salmon'
-  | 'sandybrown'
-  | 'seagreen'
-  | 'seashell'
-  | 'sienna'
-  | 'silver'
-  | 'skyblue'
-  | 'slateblue'
-  | 'slategray'
-  | 'slategrey'
-  | 'snow'
-  | 'springgreen'
-  | 'steelblue'
-  | 'tan'
-  | 'teal'
-  | 'thistle'
-  | 'tomato'
-  | 'turquoise'
-  | 'violet'
-  | 'wheat'
-  | 'white'
-  | 'whitesmoke'
-  | 'yellow'
-  | 'yellowgreen'
+export const cssColorNames = [
+  'aliceblue',
+  'antiquewhite',
+  'aqua',
+  'aquamarine',
+  'azure',
+  'beige',
+  'bisque',
+  'black',
+  'blanchedalmond',
+  'blue',
+  'blueviolet',
+  'brown',
+  'burlywood',
+  'cadetblue',
+  'chartreuse',
+  'chocolate',
+  'coral',
+  'cornflowerblue',
+  'cornsilk',
+  'crimson',
+  'cyan',
+  'darkblue',
+  'darkcyan',
+  'darkgoldenrod',
+  'darkgray',
+  'darkgreen',
+  'darkgrey',
+  'darkkhaki',
+  'darkmagenta',
+  'darkolivegreen',
+  'darkorange',
+  'darkorchid',
+  'darkred',
+  'darksalmon',
+  'darkseagreen',
+  'darkslateblue',
+  'darkslategray',
+  'darkslategrey',
+  'darkturquoise',
+  'darkviolet',
+  'deeppink',
+  'deepskyblue',
+  'dimgray',
+  'dimgrey',
+  'dodgerblue',
+  'firebrick',
+  'floralwhite',
+  'forestgreen',
+  'fuchsia',
+  'gainsboro',
+  'ghostwhite',
+  'gold',
+  'goldenrod',
+  'gray',
+  'green',
+  'greenyellow',
+  'grey',
+  'honeydew',
+  'hotpink',
+  'indianred',
+  'indigo',
+  'ivory',
+  'khaki',
+  'lavender',
+  'lavenderblush',
+  'lawngreen',
+  'lemonchiffon',
+  'lightblue',
+  'lightcoral',
+  'lightcyan',
+  'lightgoldenrodyellow',
+  'lightgray',
+  'lightgreen',
+  'lightgrey',
+  'lightpink',
+  'lightsalmon',
+  'lightseagreen',
+  'lightskyblue',
+  'lightslategray',
+  'lightslategrey',
+  'lightsteelblue',
+  'lightyellow',
+  'lime',
+  'limegreen',
+  'linen',
+  'magenta',
+  'maroon',
+  'mediumaquamarine',
+  'mediumblue',
+  'mediumorchid',
+  'mediumpurple',
+  'mediumseagreen',
+  'mediumslateblue',
+  'mediumspringgreen',
+  'mediumturquoise',
+  'mediumvioletred',
+  'midnightblue',
+  'mintcream',
+  'mistyrose',
+  'moccasin',
+  'navajowhite',
+  'navy',
+  'oldlace',
+  'olive',
+  'olivedrab',
+  'orange',
+  'orangered',
+  'orchid',
+  'palegoldenrod',
+  'palegreen',
+  'paleturquoise',
+  'palevioletred',
+  'papayawhip',
+  'peachpuff',
+  'peru',
+  'pink',
+  'plum',
+  'powderblue',
+  'purple',
+  'rebeccapurple',
+  'red',
+  'rosybrown',
+  'royalblue',
+  'saddlebrown',
+  'salmon',
+  'sandybrown',
+  'seagreen',
+  'seashell',
+  'sienna',
+  'silver',
+  'skyblue',
+  'slateblue',
+  'slategray',
+  'slategrey',
+  'snow',
+  'springgreen',
+  'steelblue',
+  'tan',
+  'teal',
+  'thistle',
+  'tomato',
+  'turquoise',
+  'violet',
+  'wheat',
+  'white',
+  'whitesmoke',
+  'yellow',
+  'yellowgreen',
+] as const
+
+export type CSSColorNames = (typeof cssColorNames)[number]

package/src/interfaces/RNExclusiveTypes.ts

@@ -44,6 +44,7 @@ export type RNOnlyProps =
   | 'rel'
   | 'download'
   | 'dir'
+  | 'focusable'
   // GestureResponderHandlers
   | 'onStartShouldSetResponder'
   | 'onMoveShouldSetResponder'

package/src/interfaces/TamaguiComponentEvents.tsx

@@ -5,7 +5,6 @@ export type TamaguiComponentEvents = {
   delayLongPress?: any
   delayPressIn?: any
   delayPressOut?: any
-  focusable?: any
   minPressDuration?: number | undefined
   onPressIn: ((e: any) => void) | undefined
   onPress: ((e: any) => void) | undefined

package/src/interfaces/TamaguiComponentPropsBaseBase.tsx

@@ -78,10 +78,8 @@ export type TamaguiComponentPropsBaseBase = {
    */
   untilMeasured?: 'hide' | 'show'
 
-  /**
-   * Equivalent to "name" property on styled() for automatically applying a theme
-   */
-  componentName?: string
+  /** web: forwards to the HTML name attribute. */
+  name?: string
 
   /**
    * Used for controlling the order of focus with keyboard or assistive device enavigation

package/src/internal-runtime.ts

@@ -0,0 +1,107 @@
+/**
+ * Private implementation boundary for building another style frontend on the shared
+ * Tamagui runtime. Not public API: never reexport it from `@tamagui/web`,
+ * `@tamagui/core`, `tamagui`, or `@tamagui/tailwind` roots — doing so would
+ * reconnect the frontend graphs the package split exists to keep apart.
+ *
+ * It deliberately exposes purpose-built, explicitly typed wrappers rather than raw
+ * module reexports. That keeps the emitted declaration entry on the frontend
+ * descriptor and component factory only: it never resolves the regular View, Text,
+ * styled, or inline style-prop declarations.
+ */
+import type { FunctionComponent } from 'react'
+import type { ParsedValue } from '@tamagui/style-grammar/runtime'
+import { stylePropsUnitless } from '@tamagui/helpers'
+import { createComponent } from './createComponent'
+import { setComponentDisplayName } from './helpers/componentDisplayName'
+import { createFrontendProgram as createFrontendProgramImpl } from './helpers/frontendProgram'
+import type { FrontendComponent, StyleFrontend } from './helpers/styleFrontend'
+import type { FrontendProgramValue } from './internalRuntimeTypes'
+import { createTamagui as createTamaguiImpl } from './createTamagui'
+import { setupHooks as setupHooksImpl } from './setupHooks'
+import { createFrontendStyled as createFrontendStyledImpl } from './styled'
+import { TamaguiProvider as TamaguiProviderImpl } from './views/TamaguiProvider'
+import { textStaticConfig } from './views/Text'
+import { viewStaticConfig } from './views/View'
+
+export {
+  STYLE_FRONTEND_PASSTHROUGH_PREFIX,
+  STYLE_FRONTEND_PREPROCESSED,
+  regularStyleFrontend,
+} from './helpers/styleFrontend'
+export type * from './internalRuntimeTypes'
+
+// the frontend-program contribution channel: a frontend hands getSplitStyles
+// a pre-parsed (property, program) pair that contributes at the exact
+// forward-pass position of the equivalent authored string. values are only
+// recognized when minted by this factory (module-private WeakSet), so the
+// channel cannot become publicly authorable
+export const createFrontendProgram: (
+  property: string,
+  value: ParsedValue
+) => FrontendProgramValue = createFrontendProgramImpl
+
+// the one scalar-to-css boundary used by frontends before they mint a conditional
+// value. strings already carry their authored units; finite numbers use the same
+// property table as direct atomic styles on both web and native.
+export const plainValueToPayload = (value: unknown, property: string): string | null => {
+  if (typeof value === 'string') return value
+  if (typeof value !== 'number' || !Number.isFinite(value)) return null
+  if (
+    property === 'rotate' ||
+    property === 'rotateX' ||
+    property === 'rotateY' ||
+    property === 'rotateZ'
+  ) {
+    return value === 0 ? '0' : `${value}deg`
+  }
+  if (
+    property === 'x' ||
+    property === 'y' ||
+    property === 'perspective' ||
+    property === 'translateX' ||
+    property === 'translateY'
+  ) {
+    return value === 0 ? '0' : `${value}px`
+  }
+  return stylePropsUnitless[property] ? String(value) : `${value}px`
+}
+
+// shared-runtime pieces the platform setup module in `@tamagui/core` needs. They are
+// explicitly typed here rather than reexported from their source modules, so the
+// private declaration entry does not reconnect those modules' public type graph.
+export const createTamagui: (config: any) => any = createTamaguiImpl
+export const setupHooks: (hooks: Record<string, any>) => void = setupHooksImpl
+export const TamaguiProvider: FunctionComponent<any> = TamaguiProviderImpl
+
+export function createFrontendStyled(
+  frontend: StyleFrontend
+): (
+  ComponentIn: any,
+  optionsOrBaseClassName?: any,
+  configOrOptions?: any,
+  maybeConfig?: any
+) => FrontendComponent {
+  return createFrontendStyledImpl(frontend)
+}
+
+/**
+ * Distinct View/Text component objects carrying `frontend`. The regular singletons
+ * are untouched: only their static configuration is shared, and `createComponent`
+ * does not mutate the config it receives.
+ */
+export function createFrontendViews(frontend: StyleFrontend): {
+  View: FrontendComponent
+  Text: FrontendComponent
+} {
+  return {
+    View: setComponentDisplayName(
+      createComponent({ ...viewStaticConfig, styleFrontend: frontend }),
+      'View'
+    ),
+    Text: setComponentDisplayName(
+      createComponent({ ...textStaticConfig, styleFrontend: frontend }),
+      'Text'
+    ),
+  }
+}

package/src/internalRuntimeTypes.ts

@@ -0,0 +1,22 @@
+import type { ParsedValue } from '@tamagui/style-grammar/runtime'
+
+/**
+ * The narrow type surface another style frontend needs to build components on the
+ * shared runtime.
+ *
+ * The descriptor contract is self-contained: it names only the shared grammar's
+ * dependency-free config projection and the static-config fields a frontend
+ * rewrites. Component behavior props belong to each public frontend package, so
+ * this private construction entry never reaches `./types`.
+ */
+export type {
+  FrontendComponent,
+  FrontendStaticConfig,
+  StyleFrontend,
+  StyleFrontendConfig,
+} from './helpers/styleFrontend'
+
+export interface FrontendProgramValue {
+  readonly property: string
+  readonly value: ParsedValue
+}

package/src/setupHooks.ts

@@ -17,7 +17,15 @@ type InternalHooks = {
 
   setElementProps?: (node?: any) => void
 
-  useChildren?: (elementType: any, children: any, viewProps: Record<string, any>) => any
+  // native-only. reads TextAncestor context, so createComponent must call it
+  // unconditionally every render — including passthrough renders, where the
+  // implementation returns early right after its hook
+  useChildren?: (
+    elementType: any,
+    children: any,
+    viewProps: Record<string, any>,
+    isPassthrough?: boolean
+  ) => any
 
   getBaseViews?: () => {
     View: any