@tamagui/card 1.13.3 → 1.14.0

package/dist/jsx/Card.mjs

@@ -1,87 +1,2 @@
-import { ThemeableStack } from "@tamagui/stacks";
-import {
-  isTamaguiElement,
-  styled,
-  withStaticProperties
-} from "@tamagui/web";
-import React, { cloneElement, forwardRef } from "react";
-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: "$true"
-  }
-});
-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
-});
-const Card = withStaticProperties(
-  CardFrame.extractable(
-    forwardRef(
-      ({ 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>
-        );
-      }
-    )
-  ),
-  {
-    Header: CardHeader,
-    Footer: CardFooter,
-    Background: CardBackground
-  }
-);
-export {
-  Card,
-  CardBackground,
-  CardFooter,
-  CardFrame,
-  CardHeader
-};
+import{ThemeableStack as o}from"@tamagui/stacks";import{isTamaguiElement as z,styled as t,withStaticProperties as F}from"@tamagui/web";import k,{cloneElement as b,forwardRef as v}from"react";const C=t(o,{name:"Card",variants:{unstyled:{false:{size:"$true",backgroundColor:"$background",position:"relative",overflow:"hidden"}},size:{"...size":(e,{tokens:r})=>({borderRadius:r.radius[e]??e})}},defaultVariants:{unstyled:!1}}),g=t(o,{name:"CardHeader",variants:{unstyled:{false:{zIndex:10,backgroundColor:"transparent",marginBottom:"auto"}},size:{"...size":(e,{tokens:r})=>({padding:r.space[e]??e})}}}),w=t(g,{name:"CardFooter",variants:{unstyled:{false:{zIndex:5,flexDirection:"row",marginTop:"auto",marginBottom:0}}},defaultVariants:{unstyled:!1}}),B=t(o,{name:"CardBackground",variants:{unstyled:{false:{zIndex:0,fullscreen:!0,overflow:"hidden",pointerEvents:"none",padding:0}}},defaultVariants:{unstyled:!1}}),V=F(C.extractable(v(({size:e,__scopeCard:r,children:y,...x},P)=><C ref={P}{...x}>{k.Children.map(y,a=>z(a)&&!a.props.size?b(a,{size:e}):a)}</C>)),{Header:g,Footer:w,Background:B});export{V as Card,B as CardBackground,w as CardFooter,C as CardFrame,g as CardHeader};
 //# sourceMappingURL=Card.mjs.map

package/dist/jsx/Card.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Card.tsx"],
-  "sourcesContent": ["import { ScopedProps } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport {\n  GetProps,\n  TamaguiElement,\n  isTamaguiElement,\n  styled,\n  withStaticProperties,\n} from '@tamagui/web'\nimport React, { cloneElement, forwardRef } from 'react'\n\n// const CARD_NAME = 'CARD'\n\n// type CardContextValue = {\n//   size?: SizeTokens\n// }\n\n// const [createCardContext, createCardScope] = createContextScope(CARD_NAME)\n// const [CardProvider, useCardContext] = createCardContext<CardContextValue>(CARD_NAME)\n\nexport const CardFrame = styled(ThemeableStack, {\n  name: 'Card',\n  backgroundColor: '$background',\n  position: 'relative',\n  overflow: 'hidden',\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          borderRadius: tokens.radius[val] ?? val,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    size: '$true',\n  },\n})\n\nexport const CardHeader = styled(ThemeableStack, {\n  name: 'CardHeader',\n  zIndex: 10,\n  backgroundColor: 'transparent',\n  marginBottom: 'auto',\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          padding: tokens.space[val] ?? val,\n        }\n      },\n    },\n  } as const,\n})\n\nexport const CardFooter = styled(CardHeader, {\n  name: 'CardFooter',\n  zIndex: 5,\n  flexDirection: 'row',\n  marginTop: 'auto',\n  marginBottom: 0,\n})\n\nexport const CardBackground = styled(ThemeableStack, {\n  name: 'CardBackground',\n  zIndex: 0,\n  fullscreen: true,\n  overflow: 'hidden',\n  pointerEvents: 'none',\n  padding: 0,\n})\n\nexport type CardHeaderProps = GetProps<typeof CardHeader>\nexport type CardFooterProps = GetProps<typeof CardFooter>\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n  CardFrame.extractable(\n    forwardRef<TamaguiElement, ScopedProps<CardProps, 'Card'>>(\n      ({ size, __scopeCard, children, ...props }, ref) => {\n        return (\n          // <CardProvider scope={__scopeCard} size={size}>\n          <CardFrame ref={ref} {...props}>\n            {React.Children.map(children, (child) => {\n              if (isTamaguiElement(child) && !child.props.size) {\n                return cloneElement(child, {\n                  size,\n                })\n              }\n              return child\n            })}\n          </CardFrame>\n          // </CardProvider>\n        )\n      }\n    )\n  ),\n  {\n    Header: CardHeader,\n    Footer: CardFooter,\n    Background: CardBackground,\n  }\n)\n\n// export { createCardScope, useCardContext }\n"],
-  "mappings": "AACA,SAAS,sBAAsB;AAC/B;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,SAAS,cAAc,kBAAkB;AAWzC,MAAM,YAAY,OAAO,gBAAgB;AAAA,EAC9C,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,OAAO,MAAM;AAC9B,eAAO;AAAA,UACL,cAAc,OAAO,OAAO,GAAG,KAAK;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,aAAa,OAAO,gBAAgB;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,OAAO,MAAM;AAC9B,eAAO;AAAA,UACL,SAAS,OAAO,MAAM,GAAG,KAAK;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,OAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc;AAChB,CAAC;AAEM,MAAM,iBAAiB,OAAO,gBAAgB;AAAA,EACnD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAAS;AACX,CAAC;AAMM,MAAM,OAAO;AAAA,EAClB,UAAU;AAAA,IACR;AAAA,MACE,CAAC,EAAE,MAAM,aAAa,UAAU,GAAG,MAAM,GAAG,QAAQ;AAClD;AAAA;AAAA,UAEE,CAAC,UAAU,KAAK,SAAS,QACtB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,gBAAI,iBAAiB,KAAK,KAAK,CAAC,MAAM,MAAM,MAAM;AAChD,qBAAO,aAAa,OAAO;AAAA,gBACzB;AAAA,cACF,CAAC;AAAA,YACH;AACA,mBAAO;AAAA,UACT,CAAC,EACH,EATC;AAAA;AAAA,MAYL;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AACF;",
-  "names": []
+  "sourcesContent": ["import { ScopedProps } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport {\n  GetProps,\n  TamaguiElement,\n  isTamaguiElement,\n  styled,\n  withStaticProperties,\n} from '@tamagui/web'\nimport React, { cloneElement, forwardRef } from 'react'\n\nexport const CardFrame = styled(ThemeableStack, {\n  name: 'Card',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        backgroundColor: '$background',\n        position: 'relative',\n        overflow: 'hidden',\n      },\n    },\n\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          borderRadius: tokens.radius[val] ?? val,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport const CardHeader = styled(ThemeableStack, {\n  name: 'CardHeader',\n\n  variants: {\n    unstyled: {\n      false: {\n        zIndex: 10,\n        backgroundColor: 'transparent',\n        marginBottom: 'auto',\n      },\n    },\n\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          padding: tokens.space[val] ?? val,\n        }\n      },\n    },\n  } as const,\n})\n\nexport const CardFooter = styled(CardHeader, {\n  name: 'CardFooter',\n\n  variants: {\n    unstyled: {\n      false: {\n        zIndex: 5,\n        flexDirection: 'row',\n        marginTop: 'auto',\n        marginBottom: 0,\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport const CardBackground = styled(ThemeableStack, {\n  name: 'CardBackground',\n\n  variants: {\n    unstyled: {\n      false: {\n        zIndex: 0,\n        fullscreen: true,\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        padding: 0,\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport type CardHeaderProps = GetProps<typeof CardHeader>\nexport type CardFooterProps = GetProps<typeof CardFooter>\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n  CardFrame.extractable(\n    forwardRef<TamaguiElement, ScopedProps<CardProps, 'Card'>>(\n      ({ size, __scopeCard, children, ...props }, ref) => {\n        return (\n          <CardFrame ref={ref} {...props}>\n            {React.Children.map(children, (child) => {\n              if (isTamaguiElement(child) && !child.props.size) {\n                return cloneElement(child, {\n                  size,\n                })\n              }\n              return child\n            })}\n          </CardFrame>\n        )\n      }\n    )\n  ),\n  {\n    Header: CardHeader,\n    Footer: CardFooter,\n    Background: CardBackground,\n  }\n)\n"],
+  "mappings": "AACA,OAAS,kBAAAA,MAAsB,kBAC/B,OAGE,oBAAAC,EACA,UAAAC,EACA,wBAAAC,MACK,eACP,OAAOC,GAAS,gBAAAC,EAAc,cAAAC,MAAkB,QAEzC,MAAMC,EAAYL,EAAOF,EAAgB,CAC9C,KAAM,OAEN,SAAU,CACR,SAAU,CACR,MAAO,CACL,KAAM,QACN,gBAAiB,cACjB,SAAU,WACV,SAAU,QACZ,CACF,EAEA,KAAM,CACJ,UAAW,CAACQ,EAAK,CAAE,OAAAC,CAAO,KACjB,CACL,aAAcA,EAAO,OAAOD,CAAG,GAAKA,CACtC,EAEJ,CACF,EAEA,gBAAiB,CACf,SAAU,EACZ,CACF,CAAC,EAEYE,EAAaR,EAAOF,EAAgB,CAC/C,KAAM,aAEN,SAAU,CACR,SAAU,CACR,MAAO,CACL,OAAQ,GACR,gBAAiB,cACjB,aAAc,MAChB,CACF,EAEA,KAAM,CACJ,UAAW,CAACQ,EAAK,CAAE,OAAAC,CAAO,KACjB,CACL,QAASA,EAAO,MAAMD,CAAG,GAAKA,CAChC,EAEJ,CACF,CACF,CAAC,EAEYG,EAAaT,EAAOQ,EAAY,CAC3C,KAAM,aAEN,SAAU,CACR,SAAU,CACR,MAAO,CACL,OAAQ,EACR,cAAe,MACf,UAAW,OACX,aAAc,CAChB,CACF,CACF,EAEA,gBAAiB,CACf,SAAU,EACZ,CACF,CAAC,EAEYE,EAAiBV,EAAOF,EAAgB,CACnD,KAAM,iBAEN,SAAU,CACR,SAAU,CACR,MAAO,CACL,OAAQ,EACR,WAAY,GACZ,SAAU,SACV,cAAe,OACf,QAAS,CACX,CACF,CACF,EAEA,gBAAiB,CACf,SAAU,EACZ,CACF,CAAC,EAMYa,EAAOV,EAClBI,EAAU,YACRD,EACE,CAAC,CAAE,KAAAQ,EAAM,YAAAC,EAAa,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAExC,CAACX,EAAU,KAAKW,MAASD,IACtBb,EAAM,SAAS,IAAIY,EAAWG,GACzBlB,EAAiBkB,CAAK,GAAK,CAACA,EAAM,MAAM,KACnCd,EAAac,EAAO,CACzB,KAAAL,CACF,CAAC,EAEIK,CACR,EACH,EATCZ,EAYP,CACF,EACA,CACE,OAAQG,EACR,OAAQC,EACR,WAAYC,CACd,CACF",
+  "names": ["ThemeableStack", "isTamaguiElement", "styled", "withStaticProperties", "React", "cloneElement", "forwardRef", "CardFrame", "val", "tokens", "CardHeader", "CardFooter", "CardBackground", "Card", "size", "__scopeCard", "children", "props", "ref", "child"]
 }

package/dist/jsx/index.js

@@ -1,2 +1,2 @@
-export * from "./Card";
+export*from"./Card";
 //# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.ts"],
   "sourcesContent": ["export * from './Card'\n"],
-  "mappings": "AAAA,cAAc;",
+  "mappings": "AAAA,WAAc",
   "names": []
 }

package/dist/jsx/index.mjs

@@ -1,2 +1,2 @@
-export * from "./Card";
+export*from"./Card";
 //# sourceMappingURL=index.mjs.map

package/dist/jsx/index.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.ts"],
   "sourcesContent": ["export * from './Card'\n"],
-  "mappings": "AAAA,cAAc;",
+  "mappings": "AAAA,WAAc",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/card",
-  "version": "1.13.3",
+  "version": "1.14.0",
   "sideEffects": [
     "*.css"
   ],
@@ -31,16 +31,16 @@
     }
   },
   "dependencies": {
-    "@tamagui/create-context": "1.13.3",
-    "@tamagui/stacks": "1.13.3",
-    "@tamagui/web": "1.13.3"
+    "@tamagui/create-context": "1.14.0",
+    "@tamagui/stacks": "1.14.0",
+    "@tamagui/web": "1.14.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.13.3",
+    "@tamagui/build": "1.14.0",
     "react": "^18.2.0",
     "react-native": "^0.71.4"
   },

package/src/Card.tsx

@@ -9,22 +9,19 @@ import {
 } from '@tamagui/web'
 import React, { cloneElement, forwardRef } from 'react'
 
-// const CARD_NAME = 'CARD'
-
-// type CardContextValue = {
-//   size?: SizeTokens
-// }
-
-// const [createCardContext, createCardScope] = createContextScope(CARD_NAME)
-// const [CardProvider, useCardContext] = createCardContext<CardContextValue>(CARD_NAME)
-
 export const CardFrame = styled(ThemeableStack, {
   name: 'Card',
-  backgroundColor: '$background',
-  position: 'relative',
-  overflow: 'hidden',
 
   variants: {
+    unstyled: {
+      false: {
+        size: '$true',
+        backgroundColor: '$background',
+        position: 'relative',
+        overflow: 'hidden',
+      },
+    },
+
     size: {
       '...size': (val, { tokens }) => {
         return {
@@ -35,17 +32,22 @@ export const CardFrame = styled(ThemeableStack, {
   } as const,
 
   defaultVariants: {
-    size: '$true',
+    unstyled: false,
   },
 })
 
 export const CardHeader = styled(ThemeableStack, {
   name: 'CardHeader',
-  zIndex: 10,
-  backgroundColor: 'transparent',
-  marginBottom: 'auto',
 
   variants: {
+    unstyled: {
+      false: {
+        zIndex: 10,
+        backgroundColor: 'transparent',
+        marginBottom: 'auto',
+      },
+    },
+
     size: {
       '...size': (val, { tokens }) => {
         return {
@@ -58,19 +60,41 @@ export const CardHeader = styled(ThemeableStack, {
 
 export const CardFooter = styled(CardHeader, {
   name: 'CardFooter',
-  zIndex: 5,
-  flexDirection: 'row',
-  marginTop: 'auto',
-  marginBottom: 0,
+
+  variants: {
+    unstyled: {
+      false: {
+        zIndex: 5,
+        flexDirection: 'row',
+        marginTop: 'auto',
+        marginBottom: 0,
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: false,
+  },
 })
 
 export const CardBackground = styled(ThemeableStack, {
   name: 'CardBackground',
-  zIndex: 0,
-  fullscreen: true,
-  overflow: 'hidden',
-  pointerEvents: 'none',
-  padding: 0,
+
+  variants: {
+    unstyled: {
+      false: {
+        zIndex: 0,
+        fullscreen: true,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        padding: 0,
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: false,
+  },
 })
 
 export type CardHeaderProps = GetProps<typeof CardHeader>
@@ -82,7 +106,6 @@ export const Card = withStaticProperties(
     forwardRef<TamaguiElement, 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) {
@@ -93,7 +116,6 @@ export const Card = withStaticProperties(
               return child
             })}
           </CardFrame>
-          // </CardProvider>
         )
       }
     )
@@ -104,5 +126,3 @@ export const Card = withStaticProperties(
     Background: CardBackground,
   }
 )
-
-// export { createCardScope, useCardContext }