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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/card",
-  "version": "1.0.1-beta.56",
+  "version": "1.0.1-beta.60",
   "sideEffects": true,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -8,6 +8,7 @@
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -18,9 +19,9 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.56",
-    "@tamagui/create-context": "^1.0.1-beta.56",
-    "@tamagui/stacks": "^1.0.1-beta.56"
+    "@tamagui/core": "^1.0.1-beta.60",
+    "@tamagui/create-context": "^1.0.1-beta.60",
+    "@tamagui/stacks": "^1.0.1-beta.60"
   },
   "peerDependencies": {
     "react": "*",
@@ -28,7 +29,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.56",
+    "@tamagui/build": "^1.0.1-beta.60",
     "@types/react-native": "^0.67.3",
     "react": "*",
     "react-dom": "*",

package/src/Card.tsx

@@ -0,0 +1,114 @@
+import {
+  GetProps,
+  SizeTokens,
+  isTamaguiElement,
+  styled,
+  themeable,
+  withStaticProperties,
+} from '@tamagui/core'
+import { ScopedProps, createContextScope } from '@tamagui/create-context'
+import { ThemeableStack } from '@tamagui/stacks'
+import React, { cloneElement, forwardRef } from 'react'
+import { View } from 'react-native'
+
+// bugfix esbuild strips react jsx: 'preserve'
+React['createElement']
+
+const CARD_NAME = 'CARD'
+
+type CardContextValue = {
+  size?: SizeTokens
+}
+
+const [createCardContext, createCardScope] = createContextScope(CARD_NAME)
+const [CardProvider, useCardContext] = createCardContext<CardContextValue>(CARD_NAME)
+
+const CardFrame = styled(ThemeableStack, {
+  name: 'Card',
+  backgroundColor: '$background',
+  position: 'relative',
+  overflow: 'hidden',
+
+  variants: {
+    size: {
+      '...size': (val, { tokens }) => {
+        return {
+          borderRadius: tokens.radius[val] ?? val,
+        }
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: '$4',
+  },
+})
+
+const CardHeader = styled(ThemeableStack, {
+  name: 'CardHeader',
+  zIndex: 10,
+  backgroundColor: 'transparent',
+  marginBottom: 'auto',
+
+  variants: {
+    size: {
+      '...size': (val, { tokens }) => {
+        return {
+          padding: tokens.space[val] ?? val,
+        }
+      },
+    },
+  },
+})
+
+const CardFooter = styled(CardHeader, {
+  name: 'CardFooter',
+  zIndex: 5,
+  flexDirection: 'row',
+  marginTop: 'auto',
+  marginBottom: 0,
+})
+
+const CardBackground = styled(ThemeableStack, {
+  name: 'CardBackground',
+  zIndex: 0,
+  fullscreen: true,
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  padding: 0,
+})
+
+export type CardHeaderProps = GetProps<typeof CardHeader>
+export type CardFooterProps = GetProps<typeof CardFooter>
+
+export type CardProps = GetProps<typeof CardFrame>
+
+export const Card = withStaticProperties(
+  themeable(
+    forwardRef<HTMLElement | View, ScopedProps<CardProps, 'Card'>>(
+      ({ size, __scopeCard, children, ...props }, ref) => {
+        return (
+          <CardProvider scope={__scopeCard} size={size}>
+            <CardFrame ref={ref} {...props}>
+              {React.Children.map(children, (child) => {
+                if (isTamaguiElement(child) && !child.props.size) {
+                  return cloneElement(child, {
+                    size,
+                  })
+                }
+                return child
+              })}
+            </CardFrame>
+          </CardProvider>
+        )
+      }
+    )
+  ),
+  {
+    Header: CardHeader,
+    Footer: CardFooter,
+    Background: CardBackground,
+  }
+)
+
+export { createCardScope, useCardContext, CardHeader, CardFooter, CardBackground }

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Card'