@tamagui/web 3.0.0-beta.807.1 → 3.0.0-beta.831.1

package/src/helpers/getVariantExtras.tsx

@@ -33,9 +33,9 @@ export const getVariantExtras = (styleState: GetStyleState) => {
       const found = fonts[this.fontFamily]
       if (found) return found
 
-      // When a component re-processes already-resolved props (useProps -> inner
-      // render), fontFamily arrives as the opaque var(--f-family) reference. The
-      // font identity survives in the font_<name> class.
+      // When an inner component re-processes already-resolved props, fontFamily
+      // arrives as the opaque var(--f-family) reference. The font identity
+      // survives in the font_<name> class.
       const className = props.className
       if (typeof className === 'string') {
         let start = 0

package/src/helpers/splitStyleProps.ts

@@ -0,0 +1,166 @@
+import { stylePropsAll } from '@tamagui/helpers'
+
+import { getConfig } from '../config'
+import type { Shorthands } from '../types'
+
+type StringKey<Props> = Extract<keyof Props, string>
+type Simplify<Value> = { [Key in keyof Value]: Value[Key] }
+
+type ExpandedShorthandKey<
+  Key extends PropertyKey,
+  ShorthandMap extends object = Shorthands,
+> = Key extends keyof ShorthandMap
+  ? ShorthandMap[Key] extends PropertyKey
+    ? ShorthandMap[Key]
+    : Key
+  : Key
+
+type ShorthandKeysMatchingFilter<
+  Filter extends object,
+  ShorthandMap extends object = Shorthands,
+> = {
+  [Key in keyof ShorthandMap]-?: ShorthandMap[Key] extends keyof Filter ? Key : never
+}[keyof ShorthandMap]
+
+type KeysMatchingFilter<Filter extends object, ShorthandMap extends object = Shorthands> =
+  | keyof Filter
+  | ShorthandKeysMatchingFilter<Filter, ShorthandMap>
+
+type StyleKeys = KeysMatchingFilter<typeof stylePropsAll>
+
+type ExpandedProps<
+  Props extends object,
+  Keys extends keyof Props,
+  ShorthandMap extends object,
+> = Simplify<
+  {
+    [Key in Extract<Keys, keyof ShorthandMap> as ExpandedShorthandKey<
+      Key,
+      ShorthandMap
+    >]: Props[Key]
+  } & Omit<Pick<Props, Keys>, keyof ShorthandMap>
+>
+
+type SelectedProps<
+  Props extends object,
+  Keys extends keyof Props,
+  ExpandShorthands extends boolean,
+  ShorthandMap extends object = Shorthands,
+> = ExpandShorthands extends true
+  ? ExpandedProps<Props, Keys, ShorthandMap>
+  : Pick<Props, Keys>
+
+export type SplitStylePropsResult<
+  Props extends object,
+  Keys extends PropertyKey,
+  ExpandShorthands extends boolean = false,
+  ShorthandMap extends object = Shorthands,
+> = [
+  SelectedProps<Props, Extract<keyof Props, Keys>, ExpandShorthands, ShorthandMap>,
+  Omit<Props, Keys>,
+]
+
+export type SplitStylePropsFilterCallback<Props extends object> = (
+  key: string,
+  value: Props[StringKey<Props>],
+  originalKey: StringKey<Props>,
+  isStyleProp: boolean
+) => boolean
+
+export type SplitStylePropsFilter<Props extends object> =
+  | Readonly<Record<string, unknown>>
+  | SplitStylePropsFilterCallback<Props>
+
+export type SplitStylePropsOptions<Props extends object> = {
+  expandShorthands?: boolean
+  filter?: SplitStylePropsFilter<Props>
+}
+
+/** partitions authored props in one pass without resolving style values */
+export function splitStyleProps<
+  Props extends object,
+  const ExpandShorthands extends boolean = false,
+>(
+  props: Props,
+  options?: { expandShorthands?: ExpandShorthands }
+): SplitStylePropsResult<Props, StyleKeys, ExpandShorthands>
+
+export function splitStyleProps<
+  Props extends object,
+  const Filter extends Readonly<Record<string, unknown>>,
+  const ExpandShorthands extends boolean = false,
+>(
+  props: Props,
+  options: { expandShorthands?: ExpandShorthands; filter: Filter }
+): SplitStylePropsResult<Props, KeysMatchingFilter<Filter>, ExpandShorthands>
+
+export function splitStyleProps<
+  Props extends object,
+  SelectedKey extends StringKey<Props>,
+  const ExpandShorthands extends boolean = false,
+>(
+  props: Props,
+  options: {
+    expandShorthands?: ExpandShorthands
+    filter: (
+      key: string,
+      value: Props[StringKey<Props>],
+      originalKey: StringKey<Props>,
+      isStyleProp: boolean
+    ) => originalKey is SelectedKey
+  }
+): SplitStylePropsResult<Props, SelectedKey, ExpandShorthands>
+
+export function splitStyleProps<
+  Props extends object,
+  const ExpandShorthands extends boolean = false,
+>(
+  props: Props,
+  options: {
+    expandShorthands?: ExpandShorthands
+    filter: SplitStylePropsFilterCallback<Props>
+  }
+): [Partial<SelectedProps<Props, keyof Props, ExpandShorthands>>, Partial<Props>]
+
+export function splitStyleProps(
+  props: object,
+  options: {
+    expandShorthands?: boolean
+    filter?:
+      | Readonly<Record<string, unknown>>
+      | ((
+          key: string,
+          value: unknown,
+          originalKey: string,
+          isStyleProp: boolean
+        ) => boolean)
+  } = {}
+) {
+  const styleProps: Record<string, unknown> = {}
+  const regularProps: Record<string, unknown> = {}
+  const { expandShorthands = false, filter } = options
+  const shorthands = getConfig().shorthands
+  const filterIsFunction = typeof filter === 'function'
+  const propsRecord = props as Record<string, unknown>
+
+  for (const originalKey in props) {
+    if (!Object.hasOwn(props, originalKey)) continue
+
+    const value = propsRecord[originalKey]
+    const key = shorthands[originalKey] || originalKey
+    const isStyleProp = key in stylePropsAll
+    const selected = filter
+      ? filterIsFunction
+        ? filter(key, value, originalKey, isStyleProp)
+        : Object.hasOwn(filter, key)
+      : isStyleProp
+
+    if (selected) {
+      styleProps[expandShorthands ? key : originalKey] = value
+    } else {
+      regularProps[originalKey] = value
+    }
+  }
+
+  return [styleProps, regularProps]
+}

package/src/helpers/styleFrontend.ts

@@ -30,10 +30,14 @@ export type FrontendStaticConfig = {
    */
   passthroughClassName?: string
   variants?: Record<string, Record<string, any>>
-  compoundVariants?: readonly Record<string, any>[]
   styleFrontend?: StyleFrontend
 }
 
+export type FrontendStaticConfigNormalization = Pick<
+  FrontendStaticConfig,
+  'baseStyle' | 'passthroughClassName' | 'variants'
+>
+
 /**
  * What the internal View/Text factory and a frontend-bound `styled()` hand back: an
  * opaque component object carrying its static config. Deliberately not core's
@@ -81,13 +85,13 @@ export type StyleFrontend = {
 
   /**
    * Resolves frontend-specific static style input (a class-string base, string
-   * variant values, string compound-variant styles) into ordinary style objects.
-   * Called once per (staticConfig, config) pair; implementations memoize.
+   * variant values) into ordinary style objects.
+   * Called once per (staticConfig, config revision) by the shared runtime cache.
    */
   normalizeStaticConfig?: <Config extends FrontendStaticConfig>(
     staticConfig: Config,
     config: StyleFrontendConfig
-  ) => Config
+  ) => FrontendStaticConfigNormalization
 }
 
 /**

package/src/helpers/styleStaticConfig.ts

@@ -0,0 +1,88 @@
+import { stylePropsText, validStyles as validStylesView } from '@tamagui/helpers'
+import type { StaticConfig, TamaguiInternalConfig } from '../types'
+import { getConfigRevisionState } from './grammarConfig'
+
+export type StyleStaticConfig = {
+  baseStyle: Record<string, any> | undefined
+  baseVariantProps: Record<string, any> | undefined
+  defaultProps: Record<string, any> | undefined
+  styledContextKeys: Set<string> | null
+  variants: StaticConfig['variants']
+  passthroughClassName: string | undefined
+}
+
+const styleStaticConfigCache = new WeakMap<
+  StaticConfig,
+  WeakMap<TamaguiInternalConfig, { revision: number; value: StyleStaticConfig }>
+>()
+
+/**
+ * styled() takes styles and props in one options object. The styles belong to the
+ * base layer the style pass writes before any prop, so call-site props and
+ * variants always land on top of them; everything else stays a prop.
+ *
+ * Split lazily rather than in styled(), because classifying a key needs
+ * `conf.shorthands` and styled() runs at module scope before createTamagui.
+ */
+export function getStyleStaticConfig(
+  staticConfig: StaticConfig,
+  conf: TamaguiInternalConfig
+): StyleStaticConfig {
+  let configCache = styleStaticConfigCache.get(staticConfig)
+  const revision = getConfigRevisionState(conf).revision
+  const cached = configCache?.get(conf)
+  if (cached?.revision === revision) return cached.value
+
+  const normalized = staticConfig.styleFrontend?.normalizeStaticConfig?.(
+    staticConfig,
+    conf
+  )
+  const variants = normalized ? normalized.variants : staticConfig.variants
+  const authoredBaseStyle = normalized ? normalized.baseStyle : staticConfig.baseStyle
+  const authoredDefaultProps = staticConfig.defaultProps
+  let baseStyle: Record<string, any> | undefined
+  let baseVariantProps: Record<string, any> | undefined
+  let defaultProps: Record<string, any> | undefined
+  if (authoredDefaultProps) {
+    const validStyles =
+      staticConfig.validStyles ||
+      (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStylesView)
+    for (const key in authoredDefaultProps) {
+      const isVariant = Boolean(variants?.[key])
+      // transition selects an animation driver preset. It stays a prop even
+      // though the web style table recognizes the CSS property spelling.
+      const isStyle =
+        key !== 'transition' && (key in validStyles || key in conf.shorthands)
+      if (isVariant || isStyle) {
+        ;(baseStyle ||= authoredBaseStyle ? { ...authoredBaseStyle } : {})[key] =
+          authoredDefaultProps[key]
+      }
+      // variants also stay in the merged props for context and HOC forwarding,
+      // while their style contribution runs at its authored base position
+      if (isVariant || !isStyle) {
+        ;(defaultProps ||= {})[key] = authoredDefaultProps[key]
+      }
+      if (isVariant) {
+        ;(baseVariantProps ||= {})[key] = authoredDefaultProps[key]
+      }
+    }
+  }
+  const keys = staticConfig.contextProps || staticConfig.context?.propKeys
+  const value: StyleStaticConfig = {
+    baseStyle: baseStyle || authoredBaseStyle,
+    baseVariantProps,
+    defaultProps,
+    styledContextKeys: keys ? new Set(keys) : null,
+    variants,
+    passthroughClassName: normalized
+      ? normalized.passthroughClassName
+      : staticConfig.passthroughClassName,
+  }
+
+  if (!configCache) {
+    configCache = new WeakMap()
+    styleStaticConfigCache.set(staticConfig, configCache)
+  }
+  configCache.set(conf, { revision, value })
+  return value
+}

package/src/helpers/tokenCategories.ts

@@ -1,104 +1,73 @@
-// The prop -> token-category tables.
-//
-// Its own module because both `propMapper` and `directStyle` bind props to
-// these categories, and `propMapper` needs `directStyle`'s condition resolver:
-// leaving the tables where the resolver's consumer lives made the two files
-// import each other.
-
-import { tokenCategories } from '@tamagui/helpers'
+import {
+  getTokenCategoryName,
+  propToTokenCategoryCode,
+  tokenCategoryColor,
+  tokenCategoryFontFamily,
+  tokenCategoryFontSize,
+  tokenCategoryFontWeight,
+  tokenCategoryLetterSpacing,
+  tokenCategoryLineHeight,
+  tokenCategoryRadius,
+  tokenCategorySize,
+  tokenCategorySpace,
+  tokenCategoryZIndex,
+} from '@tamagui/helpers'
 
 export type StyleTokenCategory = 'size' | 'space' | 'radius' | 'zIndex' | 'fontSize'
+export type RuntimeTokenCategory = StyleTokenCategory | 'color' | 'font' | 'fontFamily'
 
-function mapTokenCategory(keys: Record<string, boolean>, category: StyleTokenCategory) {
-  return Object.fromEntries(Object.keys(keys).map((key) => [key, category]))
-}
-
-// exported so the flat-value grammar adapter binds props to the same token
-// categories the bare-token path already uses, rather than keeping a second table
-export const tokenCategoryByProperty: Record<string, StyleTokenCategory> = {
-  ...mapTokenCategory(tokenCategories.size, 'size'),
-  ...mapTokenCategory(tokenCategories.radius, 'radius'),
-  ...mapTokenCategory(tokenCategories.zIndex, 'zIndex'),
-  // the transform family's x/y are lengths from the space scale (v6 decision:
-  // `x="4"` resolves like `p="4"`), never the size category
-  x: 'space',
-  y: 'space',
-  fontSize: 'fontSize',
-  borderWidth: 'space',
-  borderTopWidth: 'space',
-  borderRightWidth: 'space',
-  borderBottomWidth: 'space',
-  borderLeftWidth: 'space',
-  borderBlockWidth: 'space',
-  borderBlockStartWidth: 'space',
-  borderBlockEndWidth: 'space',
-  borderInlineWidth: 'space',
-  borderInlineStartWidth: 'space',
-  borderInlineEndWidth: 'space',
-  outlineOffset: 'space',
-  outlineWidth: 'space',
-  gap: 'space',
-  rowGap: 'space',
-  columnGap: 'space',
-  top: 'space',
-  right: 'space',
-  bottom: 'space',
-  left: 'space',
-  inset: 'space',
-  insetBlock: 'space',
-  insetBlockEnd: 'space',
-  insetBlockStart: 'space',
-  insetInline: 'space',
-  insetInlineEnd: 'space',
-  insetInlineStart: 'space',
-  margin: 'space',
-  marginBlock: 'space',
-  marginBlockEnd: 'space',
-  marginBlockStart: 'space',
-  marginInline: 'space',
-  marginInlineEnd: 'space',
-  marginInlineStart: 'space',
-  marginTop: 'space',
-  marginRight: 'space',
-  marginBottom: 'space',
-  marginEnd: 'space',
-  marginLeft: 'space',
-  marginHorizontal: 'space',
-  marginStart: 'space',
-  marginVertical: 'space',
-  padding: 'space',
-  paddingBlock: 'space',
-  paddingBlockEnd: 'space',
-  paddingBlockStart: 'space',
-  paddingInline: 'space',
-  paddingInlineEnd: 'space',
-  paddingInlineStart: 'space',
-  paddingTop: 'space',
-  paddingRight: 'space',
-  paddingBottom: 'space',
-  paddingEnd: 'space',
-  paddingLeft: 'space',
-  paddingHorizontal: 'space',
-  paddingStart: 'space',
-  paddingVertical: 'space',
+const legacyCategory = (property: string): StyleTokenCategory | undefined => {
+  const category = getTokenCategoryName(propToTokenCategoryCode[property])
+  return category === 'space' ||
+    category === 'size' ||
+    category === 'radius' ||
+    category === 'zIndex' ||
+    category === 'fontSize'
+    ? category
+    : undefined
 }
 
-export type RuntimeTokenCategory = StyleTokenCategory | 'color' | 'font' | 'fontFamily'
+// compatibility view for internal consumers that enumerated the old string map.
+// the proxy keeps the numeric table canonical and only allocates keys on enumeration
+export const tokenCategoryByProperty: Readonly<Record<string, StyleTokenCategory>> =
+  /* @__PURE__ */ new Proxy(Object.create(null), {
+    get(_, property) {
+      return typeof property === 'string' ? legacyCategory(property) : undefined
+    },
+    has(_, property) {
+      return typeof property === 'string' && legacyCategory(property) !== undefined
+    },
+    ownKeys() {
+      return Object.keys(propToTokenCategoryCode).filter(
+        (property) => legacyCategory(property) !== undefined
+      )
+    },
+    getOwnPropertyDescriptor(_, property) {
+      if (typeof property !== 'string' || legacyCategory(property) === undefined) return
+      return { configurable: true, enumerable: true }
+    },
+  })
 
 export function getTokenCategoryForProperty(
   property: string
 ): RuntimeTokenCategory | undefined {
-  if (property === 'fontFamily') return 'fontFamily'
-  if (
-    property === 'fontSize' ||
-    property === 'fontWeight' ||
-    property === 'lineHeight' ||
-    property === 'letterSpacing'
-  ) {
-    return 'font'
+  switch (propToTokenCategoryCode[property]) {
+    case tokenCategorySpace:
+      return 'space'
+    case tokenCategorySize:
+      return 'size'
+    case tokenCategoryRadius:
+      return 'radius'
+    case tokenCategoryZIndex:
+      return 'zIndex'
+    case tokenCategoryColor:
+      return 'color'
+    case tokenCategoryFontFamily:
+      return 'fontFamily'
+    case tokenCategoryFontSize:
+    case tokenCategoryFontWeight:
+    case tokenCategoryLineHeight:
+    case tokenCategoryLetterSpacing:
+      return 'font'
   }
-  return (
-    tokenCategoryByProperty[property] ||
-    (property in tokenCategories.color ? 'color' : undefined)
-  )
 }

package/src/helpers/variantResolvers.ts

@@ -0,0 +1,121 @@
+import { isVariable } from '../createVariable'
+import type { GetStyleState, TamaguiInternalConfig, VariantResolverName } from '../types'
+
+type CompiledVariantResolver = {
+  key: string
+  parts: VariantResolverName[]
+}
+
+const variantResolverCache = new WeakMap<object, readonly CompiledVariantResolver[]>()
+
+// a variant key may list several resolvers: `'Size | Space'`. compiled once per
+// variant object on first use, never again on the render path
+export function getCompiledVariantResolvers(variant: object) {
+  let compiled = variantResolverCache.get(variant)
+  if (!compiled) {
+    const next: CompiledVariantResolver[] = []
+    for (const key in variant) {
+      const parts = parseVariantResolverKey(key)
+      if (parts) next.push({ key, parts })
+    }
+    compiled = next
+    variantResolverCache.set(variant, compiled)
+  }
+  return compiled
+}
+
+function parseVariantResolverKey(key: string): VariantResolverName[] | null {
+  if (!key) return null
+  return key.split('|').map((part) => part.trim()) as VariantResolverName[]
+}
+
+// goes through specificity finding best matching variant function
+export function getVariantDefinition(
+  variant: any,
+  value: any,
+  conf: TamaguiInternalConfig,
+  { theme }: Partial<GetStyleState>
+): any {
+  if (!variant) return
+  if (value === undefined) return
+  if (typeof variant === 'function') {
+    return variant
+  }
+  if (value in variant) {
+    return variant[value]
+  }
+  for (const { key, parts } of getCompiledVariantResolvers(variant)) {
+    for (const part of parts) {
+      if (matchesVariantResolver(part, value, conf, theme)) {
+        return variant[key]
+      }
+    }
+  }
+}
+
+function matchesVariantResolver(
+  resolverName: VariantResolverName,
+  value: any,
+  conf: TamaguiInternalConfig,
+  theme: Partial<GetStyleState>['theme']
+) {
+  const string = typeof value === 'string'
+  const number = typeof value === 'number'
+  const rem =
+    string &&
+    value.length > 3 &&
+    value.endsWith('rem') &&
+    Number.isFinite(Number(value.slice(0, -3)))
+
+  switch (resolverName) {
+    case 'Size':
+    case 'Space':
+    case 'Radius':
+    case 'ZIndex':
+      // styles are authored by devs and never validated at runtime: any number
+      // or string routes to the token variant, which passes unknown values
+      // through. Size keeps its historical variable exclusion so variables
+      // route to the Space/Radius/ZIndex fallbacks.
+      return (
+        value === true ||
+        number ||
+        string ||
+        (resolverName !== 'Size' && isVariable(value))
+      )
+    // a token or theme color, otherwise any string is taken to be a raw CSS
+    // color and left for the browser to resolve. checking that against a CSS
+    // color-name table costs 2.3KB gzip to reject values that were never valid
+    // anyway. `red/50` opacity modifiers stay limited to token and theme
+    // colors, which the branches above already covered.
+    case 'Color':
+      return string
+    case 'Theme':
+      return string && !!theme && value in theme
+    case 'FontSize':
+      return value === true || !!conf.fontsParsed.body?.size?.[value] || number || rem
+    case 'FontStyle':
+      return (
+        !!conf.fontsParsed.body?.style?.[value] ||
+        value === 'normal' ||
+        value === 'italic'
+      )
+    case 'FontTransform':
+      return (
+        !!conf.fontsParsed.body?.transform?.[value] ||
+        value === 'none' ||
+        value === 'capitalize' ||
+        value === 'uppercase' ||
+        value === 'lowercase'
+      )
+    case 'FontLineHeight':
+      return !!conf.fontsParsed.body?.lineHeight?.[value] || number || rem
+    case 'FontLetterSpacing':
+      return !!conf.fontsParsed.body?.letterSpacing?.[value] || number || rem
+    case 'number':
+    case 'string':
+    case 'boolean':
+      return typeof value === resolverName
+    case 'any':
+      return true
+  }
+}

package/src/hooks/useSplitStyles.tsx

@@ -9,10 +9,25 @@ const useInsertEffectCompat = isWeb
   : () => {}
 
 // perf: ...args a bit expensive on native
-export const useSplitStyles: StyleSplitter = (a, b, c, d, e, f, g, h, i, j, k, l, m) => {
+export const useSplitStyles: StyleSplitter = (
+  a,
+  b,
+  c,
+  d,
+  e,
+  f,
+  g,
+  h,
+  i,
+  j,
+  k,
+  l,
+  m,
+  n
+) => {
   'use no memo'
 
-  const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m)
+  const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m, n)
 
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS && process.env.TAMAGUI_TARGET !== 'native') {
     useInsertEffectCompat(() => {

package/src/hooks/useTheme.tsx

@@ -31,7 +31,7 @@ export const useThemeWithState = (
   // <Theme> components push their themeState.id into ThemeStateContext,
   // so their descendants subscribe under this id; <Theme> needs to schedule
   // descendant updates when its propsKey changes. Leaf styled components
-  // (createComponent, useProps, useTheme, animation hooks) do NOT push a
+  // (createComponent, useTheme, animation hooks) do NOT push a
   // context — listenersByParent[componentId] is always empty — so the
   // schedule-update effect is a no-op for them and can be skipped to save
   // one hook slot per styled component on mount. Theme.tsx passes true.

package/src/index.ts

@@ -11,14 +11,13 @@ export { _withStableStyle } from './_withStableStyle'
 export { _withNativeStyle } from './_withNativeStyle'
 export { createComponent } from './createComponent'
 export { createStyledContext } from './helpers/createStyledContext'
-export { getDefaultProps } from './helpers/getDefaultProps'
 export { getCSSStylesAtomic } from './helpers/getCSSStylesAtomic'
 export { getExpandedShorthand } from './helpers/getExpandedShorthands'
 export { formatDiagnostic } from './helpers/formatDiagnostic'
 export {
+  getStyleStaticConfig,
   getSplitStyles,
   isValidStyleKey,
-  prepareStyleStaticConfig,
 } from './helpers/getSplitStyles'
 export {
   setNativeStyleEngine,
@@ -42,10 +41,16 @@ export { isTamaguiElement } from './helpers/isTamaguiElement'
 export { matchMedia, setupMatchMedia } from './helpers/matchMedia'
 export { mergeProps } from './helpers/mergeProps'
 export { mergeSlotStyleProps } from './helpers/mergeSlotStyleProps'
+export {
+  splitStyleProps,
+  type SplitStylePropsFilter,
+  type SplitStylePropsFilterCallback,
+  type SplitStylePropsOptions,
+  type SplitStylePropsResult,
+} from './helpers/splitStyleProps'
 export { normalizeColor } from './helpers/normalizeColor'
 export { normalizeStyle } from './helpers/normalizeStyle'
 export { containsThemeRef, themeRefKey } from './helpers/themeRef'
-export { themeable } from './helpers/themeable'
 export { getStyleTags } from './helpers/wrapStyleTags'
 
 export { createFont } from './createFont'
@@ -276,7 +281,6 @@ export {
   useAnimatedNumbersStyle,
   useAnimationDriver,
 } from './hooks/useAnimationDriver'
-export { useProps, usePropsAndStyle, useStyle } from './hooks/useProps'
 export { useTheme } from './hooks/useTheme'
 export { usePortalThemeState } from './hooks/usePortalThemeState'
 export { useThemeName } from './hooks/useThemeName'