@tamagui/stacks 1.0.1-beta.18 → 1.0.1-beta.180

package/dist/jsx/variants.js

@@ -0,0 +1,97 @@
+import { getElevation } from "./Stacks";
+const elevate = {
+  true: (_, extras) => {
+    return getElevation(extras.props["size"], extras);
+  }
+};
+const bordered = (val, { props }) => {
+  return {
+    borderWidth: typeof val === "number" ? val : 1,
+    borderColor: "$borderColor",
+    ...props.hoverTheme && {
+      hoverStyle: {
+        borderColor: "$borderColorHover"
+      }
+    },
+    ...props.pressTheme && {
+      pressStyle: {
+        borderColor: "$borderColorPress"
+      }
+    },
+    ...props.focusTheme && {
+      focusStyle: {
+        borderColor: "$borderColorFocus"
+      }
+    }
+  };
+};
+const padded = {
+  true: (_, extras) => {
+    const { tokens, props } = extras;
+    return {
+      padding: tokens.space[props.size] || tokens.space["$4"]
+    };
+  }
+};
+const radiused = {
+  true: (_, extras) => {
+    const { tokens, props } = extras;
+    return {
+      borderRadius: tokens.radius[props.size] || tokens.radius["$4"]
+    };
+  }
+};
+const circular = {
+  true: (_, { props, tokens }) => {
+    const size = tokens.size[props.size];
+    return {
+      width: size,
+      height: size,
+      maxWidth: size,
+      maxHeight: size,
+      minWidth: size,
+      minHeight: size,
+      borderRadius: 1e5,
+      paddingVertical: 0,
+      paddingHorizontal: 0
+    };
+  }
+};
+const hoverTheme = {
+  true: {
+    hoverStyle: {
+      backgroundColor: "$backgroundHover",
+      borderColor: "$borderColorHover"
+    }
+  },
+  false: {}
+};
+const pressTheme = {
+  true: {
+    pressStyle: {
+      backgroundColor: "$backgroundPress",
+      borderColor: "$borderColorPress"
+    }
+  },
+  false: {}
+};
+const focusTheme = {
+  true: {
+    focusStyle: {
+      backgroundColor: "$backgroundFocus",
+      borderColor: "$borderColorFocus"
+    }
+  },
+  false: {}
+};
+export {
+  bordered,
+  circular,
+  elevate,
+  focusTheme,
+  hoverTheme,
+  padded,
+  pressTheme,
+  radiused
+};
+//# sourceMappingURL=variants.js.map

package/dist/jsx/variants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/variants.tsx"],
+  "sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n  true: (_: boolean, extras: any) => {\n    return getElevation(extras.props['size'], extras)\n  },\n}\n\nexport const bordered = (val: boolean | number, { props }) => {\n  return {\n    // TODO size it with size in '...size'\n    borderWidth: typeof val === 'number' ? val : 1,\n    borderColor: '$borderColor',\n\n    ...(props.hoverTheme && {\n      hoverStyle: {\n        borderColor: '$borderColorHover',\n      },\n    }),\n\n    ...(props.pressTheme && {\n      pressStyle: {\n        borderColor: '$borderColorPress',\n      },\n    }),\n\n    ...(props.focusTheme && {\n      focusStyle: {\n        borderColor: '$borderColorFocus',\n      },\n    }),\n  }\n}\n\nexport const padded = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      padding: tokens.space[props.size] || tokens.space['$4'],\n    }\n  },\n}\n\nexport const radiused = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      borderRadius: tokens.radius[props.size] || tokens.radius['$4'],\n    }\n  },\n}\n\nexport const circular = {\n  true: (_, { props, tokens }) => {\n    const size = tokens.size[props.size]\n    return {\n      width: size,\n      height: size,\n      maxWidth: size,\n      maxHeight: size,\n      minWidth: size,\n      minHeight: size,\n      borderRadius: 100_000,\n      paddingVertical: 0,\n      paddingHorizontal: 0,\n    }\n  },\n}\n\nexport const hoverTheme = {\n  true: {\n    hoverStyle: {\n      backgroundColor: '$backgroundHover',\n      borderColor: '$borderColorHover',\n    },\n  },\n  false: {},\n}\n\nexport const pressTheme = {\n  true: {\n    pressStyle: {\n      backgroundColor: '$backgroundPress',\n      borderColor: '$borderColorPress',\n    },\n  },\n  false: {},\n}\n\nexport const focusTheme = {\n  true: {\n    focusStyle: {\n      backgroundColor: '$backgroundFocus',\n      borderColor: '$borderColorFocus',\n    },\n  },\n  false: {},\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAEtB,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAY,WAAgB;AACjC,WAAO,aAAa,OAAO,MAAM,SAAS,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,CAAC,KAAuB,EAAE,MAAM,MAAM;AAC5D,SAAO;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,IAEb,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,SAAS;AAAA,EACpB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,WAAO;AAAA,MACL,SAAS,OAAO,MAAM,MAAM,SAAS,OAAO,MAAM;AAAA,IACpD;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,WAAO;AAAA,MACL,cAAc,OAAO,OAAO,MAAM,SAAS,OAAO,OAAO;AAAA,IAC3D;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,EAAE,OAAO,OAAO,MAAM;AAC9B,UAAM,OAAO,OAAO,KAAK,MAAM;AAC/B,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,mBAAmB;AAAA,IACrB;AAAA,EACF;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;",
+  "names": []
+}

package/package.json

@@ -1,29 +1,34 @@
 {
   "name": "@tamagui/stacks",
-  "version": "1.0.1-beta.18",
-  "sideEffects": false,
+  "version": "1.0.1-beta.180",
+  "sideEffects": [
+    "*.css"
+  ],
   "source": "src/index.ts",
-  "typings": "types",
+  "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
   "scripts": {
     "build": "tamagui-build",
-    "watch": "tamagui-build --watch"
+    "watch": "tamagui-build --watch",
+    "lint": "eslint",
+    "lint:fix": "yarn lint --fix"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.18"
+    "@tamagui/core": "^1.0.1-beta.180"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.18",
+    "@tamagui/build": "^1.0.1-beta.180",
     "react": "*",
     "react-dom": "*"
   },

package/src/SizableStack.tsx

@@ -0,0 +1,29 @@
+import { GetProps, getButtonSize, styled } from '@tamagui/core'
+
+import { YStack } from './Stacks'
+import { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from './variants'
+
+export const SizableStack = styled(YStack, {
+  name: 'SizableStack',
+  backgroundColor: '$background',
+  flexDirection: 'row',
+  flexShrink: 1,
+
+  variants: {
+    // allows the type to come in for use in size
+    fontFamily: () => ({}),
+
+    hoverTheme,
+    pressTheme,
+    focusTheme,
+    circular,
+    elevate,
+    bordered,
+
+    size: {
+      '...size': getButtonSize,
+    },
+  } as const,
+})
+
+export type SizableStackProps = GetProps<typeof SizableStack>

package/src/Stacks.tsx

@@ -0,0 +1,91 @@
+import {
+  GetProps,
+  SizeTokens,
+  SizeVariantSpreadFunction,
+  Stack,
+  StackProps,
+  VariantSpreadExtras,
+  getVariableValue,
+  isVariable,
+  styled,
+} from '@tamagui/core'
+
+export type YStackProps = GetProps<typeof YStack>
+export type XStackProps = YStackProps
+export type ZStackProps = YStackProps
+
+export const getElevation: SizeVariantSpreadFunction<StackProps> = (size, extras) => {
+  if (!size) return
+  const { tokens } = extras
+  const token = tokens.size[size]
+  const sizeNum = (isVariable(token) ? +token.val : size) as number
+  return getSizedElevation(sizeNum, extras)
+}
+
+const fullscreenStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+} as const
+
+const variants = {
+  fullscreen: {
+    true: fullscreenStyle,
+  },
+  elevation: {
+    '...size': getElevation,
+  },
+} as const
+
+export const YStack = styled(Stack, {
+  flexDirection: 'column',
+  name: 'YStack',
+  variants,
+})
+
+export const XStack = styled(Stack, {
+  flexDirection: 'row',
+  name: 'XStack',
+  variants,
+})
+
+export const ZStack = styled(
+  YStack,
+  {
+    name: 'ZStack',
+    position: 'relative',
+  },
+  {
+    neverFlatten: true,
+    isZStack: true,
+  }
+)
+
+export const getSizedElevation = (
+  val: SizeTokens | number | boolean,
+  { theme, tokens }: VariantSpreadExtras<any>
+) => {
+  let num = 0
+  if (val === true) {
+    const val = getVariableValue(tokens.size['true'])
+    if (typeof val === 'number') {
+      num = val
+    } else {
+      num = 10
+    }
+  } else {
+    num = +val
+  }
+  if (process.env.NODE_ENV === 'development') {
+    if (isNaN(num)) console.warn('NaN shadow', num, val)
+  }
+  const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)]
+  const shadow = {
+    shadowColor: theme.shadowColor,
+    shadowRadius,
+    shadowOffset: { height, width: 0 },
+  }
+  return shadow
+}

package/src/ThemeableStack.tsx

@@ -0,0 +1,60 @@
+import { GetProps, styled } from '@tamagui/core'
+
+import { YStack } from './Stacks'
+import {
+  bordered,
+  circular,
+  elevate,
+  focusTheme,
+  hoverTheme,
+  padded,
+  pressTheme,
+  radiused,
+} from './variants'
+
+const chromelessStyle = {
+  backgroundColor: 'transparent',
+  borderColor: 'transparent',
+  shadowColor: 'transparent',
+}
+export const ThemeableStack = styled(YStack, {
+  name: 'SizableStack',
+
+  variants: {
+    // allows the type to come in for use in size
+    fontFamily: () => ({}),
+
+    backgrounded: {
+      true: {
+        backgroundColor: '$background',
+      },
+    },
+
+    radiused,
+    hoverTheme,
+    pressTheme,
+    focusTheme,
+    circular,
+    padded,
+    elevate,
+    bordered,
+
+    transparent: {
+      true: {
+        backgroundColor: 'transparent',
+      },
+    },
+
+    chromeless: {
+      true: chromelessStyle,
+      all: {
+        ...chromelessStyle,
+        hoverStyle: chromelessStyle,
+        pressStyle: chromelessStyle,
+        focusStyle: chromelessStyle,
+      },
+    },
+  } as const,
+})
+
+export type ThemeableStackProps = GetProps<typeof ThemeableStack>

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './Stacks'
+export * from './SizableStack'
+export * from './ThemeableStack'

package/src/variants.tsx

@@ -0,0 +1,98 @@
+import { getElevation } from './Stacks'
+
+export const elevate = {
+  true: (_: boolean, extras: any) => {
+    return getElevation(extras.props['size'], extras)
+  },
+}
+
+export const bordered = (val: boolean | number, { props }) => {
+  return {
+    // TODO size it with size in '...size'
+    borderWidth: typeof val === 'number' ? val : 1,
+    borderColor: '$borderColor',
+
+    ...(props.hoverTheme && {
+      hoverStyle: {
+        borderColor: '$borderColorHover',
+      },
+    }),
+
+    ...(props.pressTheme && {
+      pressStyle: {
+        borderColor: '$borderColorPress',
+      },
+    }),
+
+    ...(props.focusTheme && {
+      focusStyle: {
+        borderColor: '$borderColorFocus',
+      },
+    }),
+  }
+}
+
+export const padded = {
+  true: (_, extras) => {
+    const { tokens, props } = extras
+    return {
+      padding: tokens.space[props.size] || tokens.space['$4'],
+    }
+  },
+}
+
+export const radiused = {
+  true: (_, extras) => {
+    const { tokens, props } = extras
+    return {
+      borderRadius: tokens.radius[props.size] || tokens.radius['$4'],
+    }
+  },
+}
+
+export const circular = {
+  true: (_, { props, tokens }) => {
+    const size = tokens.size[props.size]
+    return {
+      width: size,
+      height: size,
+      maxWidth: size,
+      maxHeight: size,
+      minWidth: size,
+      minHeight: size,
+      borderRadius: 100_000,
+      paddingVertical: 0,
+      paddingHorizontal: 0,
+    }
+  },
+}
+
+export const hoverTheme = {
+  true: {
+    hoverStyle: {
+      backgroundColor: '$backgroundHover',
+      borderColor: '$borderColorHover',
+    },
+  },
+  false: {},
+}
+
+export const pressTheme = {
+  true: {
+    pressStyle: {
+      backgroundColor: '$backgroundPress',
+      borderColor: '$borderColorPress',
+    },
+  },
+  false: {},
+}
+
+export const focusTheme = {
+  true: {
+    focusStyle: {
+      backgroundColor: '$backgroundFocus',
+      borderColor: '$borderColorFocus',
+    },
+  },
+  false: {},
+}

package/types/SizableStack.d.ts

@@ -1,56 +1,52 @@
 import { GetProps } from '@tamagui/core';
 export declare const SizableStack: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
-    fullscreen?: boolean | undefined;
-    elevation?: import("@tamagui/core").SizeTokens | undefined;
-}, "focusable" | "fontFamily" | "disabled" | "size" | "transparent" | "hoverable" | "pressable" | "bordered" | "chromeless"> & {
-    fontFamily?: unknown;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
-    bordered?: boolean | undefined;
-    size?: import("@tamagui/core").SizeTokens | undefined;
-    disabled?: boolean | undefined;
-    transparent?: boolean | undefined;
-    chromeless?: boolean | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
+}, "fontFamily" | "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
+    readonly fontFamily?: unknown;
+    readonly hoverTheme?: boolean | undefined;
+    readonly pressTheme?: boolean | undefined;
+    readonly focusTheme?: boolean | undefined;
+    readonly circular?: boolean | undefined;
+    readonly elevate?: boolean | undefined;
+    readonly bordered?: number | boolean | undefined;
+    readonly size?: import("@tamagui/core").SizeTokens | undefined;
 } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
-    fullscreen?: boolean | undefined;
-    elevation?: import("@tamagui/core").SizeTokens | undefined;
-}, "focusable" | "fontFamily" | "disabled" | "size" | "transparent" | "hoverable" | "pressable" | "bordered" | "chromeless"> & {
-    fontFamily?: unknown;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
-    bordered?: boolean | undefined;
-    size?: import("@tamagui/core").SizeTokens | undefined;
-    disabled?: boolean | undefined;
-    transparent?: boolean | undefined;
-    chromeless?: boolean | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
+}, "fontFamily" | "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
+    readonly fontFamily?: unknown;
+    readonly hoverTheme?: boolean | undefined;
+    readonly pressTheme?: boolean | undefined;
+    readonly focusTheme?: boolean | undefined;
+    readonly circular?: boolean | undefined;
+    readonly elevate?: boolean | undefined;
+    readonly bordered?: number | boolean | undefined;
+    readonly size?: import("@tamagui/core").SizeTokens | undefined;
 }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
-    fullscreen?: boolean | undefined;
-    elevation?: import("@tamagui/core").SizeTokens | undefined;
-}, "focusable" | "fontFamily" | "disabled" | "size" | "transparent" | "hoverable" | "pressable" | "bordered" | "chromeless"> & {
-    fontFamily?: unknown;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
-    bordered?: boolean | undefined;
-    size?: import("@tamagui/core").SizeTokens | undefined;
-    disabled?: boolean | undefined;
-    transparent?: boolean | undefined;
-    chromeless?: boolean | undefined;
-}>>, any, import("@tamagui/core").StackPropsBase, {
-    fullscreen?: boolean | undefined;
-    elevation?: import("@tamagui/core").SizeTokens | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
+}, "fontFamily" | "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
+    readonly fontFamily?: unknown;
+    readonly hoverTheme?: boolean | undefined;
+    readonly pressTheme?: boolean | undefined;
+    readonly focusTheme?: boolean | undefined;
+    readonly circular?: boolean | undefined;
+    readonly elevate?: boolean | undefined;
+    readonly bordered?: number | boolean | undefined;
+    readonly size?: import("@tamagui/core").SizeTokens | undefined;
+}>>, import("@tamagui/core").TamaguiElement, import("@tamagui/core").StackPropsBase, {
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
 } & {
-    fontFamily?: unknown;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
-    bordered?: boolean | undefined;
-    size?: import("@tamagui/core").SizeTokens | undefined;
-    disabled?: boolean | undefined;
-    transparent?: boolean | undefined;
-    chromeless?: boolean | undefined;
+    readonly fontFamily?: unknown;
+    readonly hoverTheme?: boolean | undefined;
+    readonly pressTheme?: boolean | undefined;
+    readonly focusTheme?: boolean | undefined;
+    readonly circular?: boolean | undefined;
+    readonly elevate?: boolean | undefined;
+    readonly bordered?: number | boolean | undefined;
+    readonly size?: import("@tamagui/core").SizeTokens | undefined;
 }>;
 export declare type SizableStackProps = GetProps<typeof SizableStack>;
 //# sourceMappingURL=SizableStack.d.ts.map

package/types/Stacks.d.ts

@@ -1,65 +1,69 @@
-import { GetProps, SizeTokens, VariantSpreadExtras } from '@tamagui/core';
+import { GetProps, SizeTokens, SizeVariantSpreadFunction, StackProps, VariantSpreadExtras } from '@tamagui/core';
 export declare type YStackProps = GetProps<typeof YStack>;
-export declare type XStackProps = GetProps<typeof YStack>;
-export declare type ZStackProps = GetProps<typeof ZStack>;
+export declare type XStackProps = YStackProps;
+export declare type ZStackProps = YStackProps;
+export declare const getElevation: SizeVariantSpreadFunction<StackProps>;
 export declare const YStack: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
-}>>, any, import("@tamagui/core").StackPropsBase, {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
+}>>, import("@tamagui/core").TamaguiElement, import("@tamagui/core").StackPropsBase, {
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 }>;
 export declare const XStack: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
-}>>, any, import("@tamagui/core").StackPropsBase, {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
+}>>, import("@tamagui/core").TamaguiElement, import("@tamagui/core").StackPropsBase, {
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 }>;
 export declare const ZStack: import("@tamagui/core").TamaguiComponent<(Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 }>>) | (Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 }, string | number> & {
     [x: string]: undefined;
 } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 }, string | number> & {
     [x: string]: undefined;
 }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 }, string | number> & {
     [x: string]: undefined;
-}>>), any, import("@tamagui/core").StackPropsBase, {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
-} & ({} | {
+}>>), import("@tamagui/core").TamaguiElement, import("@tamagui/core").StackPropsBase, {
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
+} | ({
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
+} & {
     [x: string]: undefined;
 })>;
 export declare const getSizedElevation: (val: SizeTokens | number | boolean, { theme, tokens }: VariantSpreadExtras<any>) => {
-    shadowColor: import("@tamagui/core").VariableColorVal | undefined;
+    shadowColor: import("@tamagui/core").Variable<import("@tamagui/core").VariableValue> | undefined;
     shadowRadius: number;
     shadowOffset: {
         height: number;