@tamagui/stacks 1.0.1-beta.56 → 1.0.1-beta.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/stacks",
-  "version": "1.0.1-beta.56",
+  "version": "1.0.1-beta.60",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -8,6 +8,7 @@
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -16,14 +17,14 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.56"
+    "@tamagui/core": "^1.0.1-beta.60"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.56",
+    "@tamagui/build": "^1.0.1-beta.60",
     "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, focusable, hoverable, pressable } 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: () => ({}),
+
+    hoverable,
+    pressable,
+    focusable,
+    circular,
+    elevate,
+    bordered,
+
+    size: {
+      '...size': getButtonSize,
+    },
+  },
+})
+
+export type SizableStackProps = GetProps<typeof SizableStack>

package/src/Stacks.tsx

@@ -0,0 +1,90 @@
+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) => {
+  const { tokens } = extras
+  const token = tokens.size[size]
+  const sizeNum = (isVariable(token) ? +token.val : size) as number
+  // TODO this could be configurable with require('tamagui').configure({ elevation: () => {} })
+  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>
+) => {
+  const num =
+    val === false
+      ? 0
+      : val === true
+      ? // handles true
+        (() => {
+          const val = getVariableValue(tokens.size['true'])
+          if (typeof val === 'number') {
+            return val
+          }
+          return 10
+        })()
+      : +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,53 @@
+import { GetProps, styled } from '@tamagui/core'
+
+import { YStack } from './Stacks'
+import {
+  bordered,
+  circular,
+  elevate,
+  focusable,
+  hoverable,
+  padded,
+  pressable,
+  radiused,
+} from './variants'
+
+export const ThemeableStack = styled(YStack, {
+  name: 'SizableStack',
+
+  variants: {
+    // allows the type to come in for use in size
+    fontFamily: () => ({}),
+
+    backgrounded: {
+      true: {
+        backgroundColor: '$background',
+      },
+    },
+
+    radiused,
+    hoverable,
+    pressable,
+    focusable,
+    circular,
+    padded,
+    elevate,
+    bordered,
+
+    transparent: {
+      true: {
+        backgroundColor: 'transparent',
+      },
+    },
+
+    chromeless: {
+      true: {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        shadowColor: 'transparent',
+      },
+    },
+  },
+})
+
+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,113 @@
+import { getElevation } from './Stacks'
+
+export const elevate = {
+  true: (_, extras) => {
+    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.hoverable && {
+      hoverStyle: {
+        borderColor: '$borderColorHover',
+      },
+    }),
+
+    ...(props.pressable && {
+      pressStyle: {
+        borderColor: '$borderColorPress',
+      },
+    }),
+
+    ...(props.focusable && {
+      focusStyle: {
+        borderColor: '$borderColorFocus',
+      },
+    }),
+  }
+}
+
+export const padded = {
+  true: (_, extras) => {
+    const { tokens, props } = extras
+    return {
+      padding: tokens.size[props.size] || tokens.size['$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 hoverable = {
+  true: {
+    hoverStyle: {
+      backgroundColor: '$backgroundHover',
+      borderColor: '$borderColorHover',
+    },
+  },
+  false: {
+    hoverStyle: {
+      backgroundColor: '$background',
+      borderColor: '$borderColor',
+    },
+  },
+}
+
+export const pressable = {
+  true: {
+    pressStyle: {
+      backgroundColor: '$backgroundPress',
+      borderColor: '$borderColorPress',
+    },
+  },
+  false: {
+    pressStyle: {
+      backgroundColor: '$background',
+      borderColor: '$borderColor',
+    },
+  },
+}
+
+export const focusable = {
+  true: {
+    focusStyle: {
+      backgroundColor: '$backgroundFocus',
+      borderColor: '$borderColorFocus',
+    },
+  },
+  false: {
+    focusStyle: {
+      backgroundColor: '$background',
+      borderColor: '$borderColor',
+    },
+  },
+}