@tamagui/card 2.7.7 → 3.0.0-beta.1091.1

package/dist/esm/Card.mjs

@@ -1,95 +1,50 @@
 import { YStack } from "@tamagui/stacks";
+import { resolveSize } from "@tamagui/size";
 import { createStyledContext, styled, withStaticProperties } from "@tamagui/web";
-const CardContext = createStyledContext({
-  size: "$true"
+
+const CardContext = createStyledContext({ size: true });
+const cardRadiusVariant = styled.dynamic((val, env) => {
+	return { borderRadius: resolveSize(val, env).frame.borderRadius };
+});
+const cardPaddingVariant = styled.dynamic((val, env) => {
+	return { padding: resolveSize(val, env).frame.paddingHorizontal };
 });
 const CardFrame = styled(YStack, {
-  name: "Card",
-  context: CardContext,
-  variants: {
-    unstyled: {
-      false: {
-        size: "$true",
-        backgroundColor: "$background",
-        position: "relative"
-      }
-    },
-    size: {
-      "...size": (val, {
-        tokens
-      }) => {
-        return {
-          borderRadius: tokens.radius[val] ?? val
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "Card",
+	context: CardContext,
+	size: true,
+	position: "relative",
+	variants: { size: cardRadiusVariant }
 });
 const CardHeader = styled(YStack, {
-  name: "CardHeader",
-  context: CardContext,
-  variants: {
-    unstyled: {
-      false: {
-        zIndex: 10,
-        backgroundColor: "transparent",
-        marginBottom: "auto"
-      }
-    },
-    size: {
-      "...size": (val, {
-        tokens
-      }) => {
-        return {
-          padding: tokens.space[val] ?? val
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "CardHeader",
+	context: CardContext,
+	zIndex: 10,
+	backgroundColor: "transparent",
+	marginBottom: "auto",
+	variants: { size: cardPaddingVariant }
 });
 const CardFooter = styled(CardHeader, {
-  name: "CardFooter",
-  variants: {
-    unstyled: {
-      false: {
-        zIndex: 5,
-        flexDirection: "row",
-        marginTop: "auto",
-        marginBottom: 0
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "CardFooter",
+	zIndex: 5,
+	flexDirection: "row",
+	marginTop: "auto",
+	marginBottom: 0
 });
 const CardBackground = styled(YStack, {
-  name: "CardBackground",
-  variants: {
-    unstyled: {
-      false: {
-        zIndex: 0,
-        fullscreen: true,
-        overflow: "hidden",
-        pointerEvents: "none",
-        padding: 0
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "CardBackground",
+	zIndex: 0,
+	position: "absolute",
+	inset: 0,
+	overflow: "hidden",
+	pointerEvents: "none",
+	padding: 0
 });
 const Card = withStaticProperties(CardFrame, {
-  Header: CardHeader,
-  Footer: CardFooter,
-  Background: CardBackground
+	Header: CardHeader,
+	Footer: CardFooter,
+	Background: CardBackground
 });
+
 export { Card, CardBackground, CardFooter, CardFrame, CardHeader };
 //# sourceMappingURL=Card.mjs.map

package/dist/esm/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["YStack","createStyledContext","styled","withStaticProperties","CardContext","size","CardFrame","name","context","variants","unstyled","false","backgroundColor","position","...size","val","tokens","borderRadius","radius","defaultVariants","process","env","TAMAGUI_HEADLESS","CardHeader","zIndex","marginBottom","padding","space","CardFooter","flexDirection","marginTop","CardBackground","fullscreen","overflow","pointerEvents","Card","Header","Footer","Background"],"sources":["../../src/Card.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AAEvB,SAASC,mBAAA,EAAqBC,MAAA,EAAQC,oBAAA,QAA4B;AAElE,MAAMC,WAAA,GAAcH,mBAAA,CAAoB;EACtCI,IAAA,EAAM;AACR,CAAC;AAEM,MAAMC,SAAA,GAAYJ,MAAA,CAAOF,MAAA,EAAQ;EACtCO,IAAA,EAAM;EACNC,OAAA,EAASJ,WAAA;EAETK,QAAA,EAAU;IACRC,QAAA,EAAU;MACRC,KAAA,EAAO;QACLN,IAAA,EAAM;QACNO,eAAA,EAAiB;QACjBC,QAAA,EAAU;MACZ;IACF;IAEAR,IAAA,EAAM;MACJ,WAAWS,CAACC,GAAA,EAAK;QAAEC;MAAO,MAAM;QAC9B,OAAO;UACLC,YAAA,EAAcD,MAAA,CAAOE,MAAA,CAAOH,GAAG,KAAKA;QACtC;MACF;IACF;EACF;EAEAI,eAAA,EAAiB;IACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB;EAC7C;AACF,CAAC;AAEM,MAAMC,UAAA,GAAarB,MAAA,CAAOF,MAAA,EAAQ;EACvCO,IAAA,EAAM;EACNC,OAAA,EAASJ,WAAA;EAETK,QAAA,EAAU;IACRC,QAAA,EAAU;MACRC,KAAA,EAAO;QACLa,MAAA,EAAQ;QACRZ,eAAA,EAAiB;QACjBa,YAAA,EAAc;MAChB;IACF;IAEApB,IAAA,EAAM;MACJ,WAAWS,CAACC,GAAA,EAAK;QAAEC;MAAO,MAAM;QAC9B,OAAO;UACLU,OAAA,EAASV,MAAA,CAAOW,KAAA,CAAMZ,GAAG,KAAKA;QAChC;MACF;IACF;EACF;EAEAI,eAAA,EAAiB;IACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB;EAC7C;AACF,CAAC;AAEM,MAAMM,UAAA,GAAa1B,MAAA,CAAOqB,UAAA,EAAY;EAC3ChB,IAAA,EAAM;EAENE,QAAA,EAAU;IACRC,QAAA,EAAU;MACRC,KAAA,EAAO;QACLa,MAAA,EAAQ;QACRK,aAAA,EAAe;QACfC,SAAA,EAAW;QACXL,YAAA,EAAc;MAChB;IACF;EACF;EAEAN,eAAA,EAAiB;IACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB;EAC7C;AACF,CAAC;AAEM,MAAMS,cAAA,GAAiB7B,MAAA,CAAOF,MAAA,EAAQ;EAC3CO,IAAA,EAAM;EAENE,QAAA,EAAU;IACRC,QAAA,EAAU;MACRC,KAAA,EAAO;QACLa,MAAA,EAAQ;QACRQ,UAAA,EAAY;QACZC,QAAA,EAAU;QACVC,aAAA,EAAe;QACfR,OAAA,EAAS;MACX;IACF;EACF;EAEAP,eAAA,EAAiB;IACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB;EAC7C;AACF,CAAC;AAMM,MAAMa,IAAA,GAAOhC,oBAAA,CAAqBG,SAAA,EAAW;EAClD8B,MAAA,EAAQb,UAAA;EACRc,MAAA,EAAQT,UAAA;EACRU,UAAA,EAAYP;AACd,CAAC","ignoreList":[]}
+{"version":3,"file":"Card.js","names":[],"sources":["esm/Card.js"],"sourcesContent":["import { YStack } from \"@tamagui/stacks\";\nimport { resolveSize } from \"@tamagui/size\";\nimport { createStyledContext, styled, withStaticProperties } from \"@tamagui/web\";\nconst CardContext = createStyledContext({\n  size: true\n});\nconst cardRadiusVariant = styled.dynamic((val, env) => {\n  return {\n    borderRadius: resolveSize(val, env).frame.borderRadius\n  };\n});\nconst cardPaddingVariant = styled.dynamic((val, env) => {\n  return {\n    padding: resolveSize(val, env).frame.paddingHorizontal\n  };\n});\nconst CardFrame = styled(YStack, {\n  displayName: \"Card\",\n  context: CardContext,\n  size: true,\n  position: \"relative\",\n  variants: {\n    size: cardRadiusVariant\n  }\n});\nconst CardHeader = styled(YStack, {\n  displayName: \"CardHeader\",\n  context: CardContext,\n  zIndex: 10,\n  backgroundColor: \"transparent\",\n  marginBottom: \"auto\",\n  variants: {\n    size: cardPaddingVariant\n  }\n});\nconst CardFooter = styled(CardHeader, {\n  displayName: \"CardFooter\",\n  zIndex: 5,\n  flexDirection: \"row\",\n  marginTop: \"auto\",\n  marginBottom: 0\n});\nconst CardBackground = styled(YStack, {\n  displayName: \"CardBackground\",\n  zIndex: 0,\n  position: \"absolute\",\n  inset: 0,\n  overflow: \"hidden\",\n  pointerEvents: \"none\",\n  padding: 0\n});\nconst Card = withStaticProperties(CardFrame, {\n  Header: CardHeader,\n  Footer: CardFooter,\n  Background: CardBackground\n});\nexport {\n  Card,\n  CardBackground,\n  CardFooter,\n  CardFrame,\n  CardHeader\n};\n//# sourceMappingURL=Card.js.map\n"],"mappings":";;;;;AAGA,MAAM,cAAc,oBAAoB,EACtC,MAAM,KACR,CAAC;AACD,MAAM,oBAAoB,OAAO,SAAS,KAAK,QAAQ;CACrD,OAAO,EACL,cAAc,YAAY,KAAK,GAAG,CAAC,CAAC,MAAM,aAC5C;AACF,CAAC;AACD,MAAM,qBAAqB,OAAO,SAAS,KAAK,QAAQ;CACtD,OAAO,EACL,SAAS,YAAY,KAAK,GAAG,CAAC,CAAC,MAAM,kBACvC;AACF,CAAC;AACD,MAAM,YAAY,OAAO,QAAQ;CAC/B,aAAa;CACb,SAAS;CACT,MAAM;CACN,UAAU;CACV,UAAU,EACR,MAAM,kBACR;AACF,CAAC;AACD,MAAM,aAAa,OAAO,QAAQ;CAChC,aAAa;CACb,SAAS;CACT,QAAQ;CACR,iBAAiB;CACjB,cAAc;CACd,UAAU,EACR,MAAM,mBACR;AACF,CAAC;AACD,MAAM,aAAa,OAAO,YAAY;CACpC,aAAa;CACb,QAAQ;CACR,eAAe;CACf,WAAW;CACX,cAAc;AAChB,CAAC;AACD,MAAM,iBAAiB,OAAO,QAAQ;CACpC,aAAa;CACb,QAAQ;CACR,UAAU;CACV,OAAO;CACP,UAAU;CACV,eAAe;CACf,SAAS;AACX,CAAC;AACD,MAAM,OAAO,qBAAqB,WAAW;CAC3C,QAAQ;CACR,QAAQ;CACR,YAAY;AACd,CAAC"}

package/dist/esm/Card.native.js

@@ -1,99 +1,50 @@
 import { YStack } from "@tamagui/stacks";
+import { resolveSize } from "@tamagui/size";
 import { createStyledContext, styled, withStaticProperties } from "@tamagui/web";
-var CardContext = createStyledContext({
-  size: "$true"
+
+var CardContext = createStyledContext({ size: true });
+var cardRadiusVariant = styled.dynamic(function(val, env) {
+	return { borderRadius: resolveSize(val, env).frame.borderRadius };
+});
+var cardPaddingVariant = styled.dynamic(function(val, env) {
+	return { padding: resolveSize(val, env).frame.paddingHorizontal };
 });
 var CardFrame = styled(YStack, {
-  name: "Card",
-  context: CardContext,
-  variants: {
-    unstyled: {
-      false: {
-        size: "$true",
-        backgroundColor: "$background",
-        position: "relative"
-      }
-    },
-    size: {
-      "...size": function (val, param) {
-        var {
-          tokens
-        } = param;
-        var _tokens_radius_val;
-        return {
-          borderRadius: (_tokens_radius_val = tokens.radius[val]) !== null && _tokens_radius_val !== void 0 ? _tokens_radius_val : val
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "Card",
+	context: CardContext,
+	size: true,
+	position: "relative",
+	variants: { size: cardRadiusVariant }
 });
 var CardHeader = styled(YStack, {
-  name: "CardHeader",
-  context: CardContext,
-  variants: {
-    unstyled: {
-      false: {
-        zIndex: 10,
-        backgroundColor: "transparent",
-        marginBottom: "auto"
-      }
-    },
-    size: {
-      "...size": function (val, param) {
-        var {
-          tokens
-        } = param;
-        var _tokens_space_val;
-        return {
-          padding: (_tokens_space_val = tokens.space[val]) !== null && _tokens_space_val !== void 0 ? _tokens_space_val : val
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "CardHeader",
+	context: CardContext,
+	zIndex: 10,
+	backgroundColor: "transparent",
+	marginBottom: "auto",
+	variants: { size: cardPaddingVariant }
 });
 var CardFooter = styled(CardHeader, {
-  name: "CardFooter",
-  variants: {
-    unstyled: {
-      false: {
-        zIndex: 5,
-        flexDirection: "row",
-        marginTop: "auto",
-        marginBottom: 0
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "CardFooter",
+	zIndex: 5,
+	flexDirection: "row",
+	marginTop: "auto",
+	marginBottom: 0
 });
 var CardBackground = styled(YStack, {
-  name: "CardBackground",
-  variants: {
-    unstyled: {
-      false: {
-        zIndex: 0,
-        fullscreen: true,
-        overflow: "hidden",
-        pointerEvents: "none",
-        padding: 0
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "CardBackground",
+	zIndex: 0,
+	position: "absolute",
+	inset: 0,
+	overflow: "hidden",
+	pointerEvents: "none",
+	padding: 0
 });
 var Card = withStaticProperties(CardFrame, {
-  Header: CardHeader,
-  Footer: CardFooter,
-  Background: CardBackground
+	Header: CardHeader,
+	Footer: CardFooter,
+	Background: CardBackground
 });
+
 export { Card, CardBackground, CardFooter, CardFrame, CardHeader };
 //# sourceMappingURL=Card.native.js.map

package/dist/esm/Card.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["YStack","createStyledContext","styled","withStaticProperties","CardContext","size","CardFrame","name","context","variants","unstyled","false","backgroundColor","position","...size","val","param","tokens","_tokens_radius_val","borderRadius","radius","defaultVariants","process","env","TAMAGUI_HEADLESS","CardHeader","zIndex","marginBottom","_tokens_space_val","padding","space","CardFooter","flexDirection","marginTop","CardBackground","fullscreen","overflow","pointerEvents","Card"],"sources":["../../src/Card.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AAEvB,SAASC,mBAAA,EAAqBC,MAAA,EAAQC,oBAAA,QAA4B;AAElE,IAAAC,WAAM,GAAAH,mBAAc;EAClBI,IAAA,EAAM;AACR,CAAC;AAEM,IAAAC,SAAM,GAAAJ,MAAY,CAAAF,MAAO;EAC9BO,IAAA,EAAM;EACNC,OAAA,EAASJ,WAAA;EAETK,QAAA,EAAU;IACRC,QAAA,EAAU;MACRC,KAAA,EAAO;QACLN,IAAA,EAAM;QACNO,eAAA,EAAiB;QACjBC,QAAA,EAAU;MACZ;IACF;IAEAR,IAAA,EAAM;MACJ,WAAW,SAAAS,CAAQC,GAAA,EAAAC,KAAO,EAAM;QAC9B;UAAAC;QAAO,IAAAD,KAAA;QAAA,IACLE,kBAAc;QAChB;UACFC,YAAA,GAAAD,kBAAA,GAAAD,MAAA,CAAAG,MAAA,CAAAL,GAAA,eAAAG,kBAAA,cAAAA,kBAAA,GAAAH;QACF;MACF;IAEA;EAAiB;EAEjBM,eAAA;IACDX,QAAA,EAAAY,OAAA,CAAAC,GAAA,CAAAC,gBAAA;EAEM;AAAkC,EACvC;AAAM,IACNC,UAAS,GAAAvB,MAAA,CAAAF,MAAA;EAETO,IAAA,cAAU;EAAAC,OACR,EAAAJ,WAAU;EAAAK,QACR;IAAOC,QACL;MAAQC,KACR;QACAe,MAAA;QACFd,eAAA;QACFe,YAAA;MAEA;IAAM;IAEFtB,IAAA;MAAO,SACL,WAAAS,CAAgBC,GAAA,EAAAC,KAAS;QAC3B;UAAAC;QAAA,IAAAD,KAAA;QACF,IAAAY,iBAAA;QACF;UACFC,OAAA,GAAAD,iBAAA,GAAAX,MAAA,CAAAa,KAAA,CAAAf,GAAA,eAAAa,iBAAA,cAAAA,iBAAA,GAAAb;QAEA;MACE;IACF;EACD;EAEMM,eAAM,EAAa;IACxBX,QAAM,EAAAY,OAAA,CAAAC,GAAA,CAAAC,gBAAA;EAEN;AAAU;AACE,IAAAO,UACD,GAAA7B,MAAA,CAAAuB,UAAA;EAAAlB,IAAA,EACL,YAAQ;EAAAE,QACR;IAAeC,QACf;MAAWC,KACX;QACFe,MAAA;QACFM,aAAA;QACFC,SAAA;QAEAN,YAAiB;MACf;IACF;EACD;EAEMN,eAAM;IACXX,QAAM,EAAAY,OAAA,CAAAC,GAAA,CAAAC,gBAAA;EAEN;AAAU;AACE,IAAAU,cACD,GAAAhC,MAAA,CAAAF,MAAA;EAAAO,IAAA,EACL,gBAAQ;EAAAE,QACR;IAAYC,QACZ;MAAUC,KACV;QACAe,MAAA,GAAS;QACXS,UAAA;QACFC,QAAA;QACFC,aAAA;QAEAR,OAAA;MACE;IACF;EACD;EAMMR,eAAa;IAClBX,QAAQ,EAAAY,OAAA,CAAAC,GAAA,CAAAC,gBAAA;EACR;AAAQ,EACR;AACF,IAACc,IAAA,GAAAnC,oBAAA,CAAAG,SAAA","ignoreList":[]}
+{"version":3,"file":"Card.native.js","names":[],"sources":["esm/Card.native.js"],"sourcesContent":["import { YStack } from \"@tamagui/stacks\";\nimport { resolveSize } from \"@tamagui/size\";\nimport { createStyledContext, styled, withStaticProperties } from \"@tamagui/web\";\nvar CardContext = createStyledContext({\n  size: true\n});\nvar cardRadiusVariant = styled.dynamic(function(val, env) {\n  return {\n    borderRadius: resolveSize(val, env).frame.borderRadius\n  };\n});\nvar cardPaddingVariant = styled.dynamic(function(val, env) {\n  return {\n    padding: resolveSize(val, env).frame.paddingHorizontal\n  };\n});\nvar CardFrame = styled(YStack, {\n  displayName: \"Card\",\n  context: CardContext,\n  size: true,\n  position: \"relative\",\n  variants: {\n    size: cardRadiusVariant\n  }\n});\nvar CardHeader = styled(YStack, {\n  displayName: \"CardHeader\",\n  context: CardContext,\n  zIndex: 10,\n  backgroundColor: \"transparent\",\n  marginBottom: \"auto\",\n  variants: {\n    size: cardPaddingVariant\n  }\n});\nvar CardFooter = styled(CardHeader, {\n  displayName: \"CardFooter\",\n  zIndex: 5,\n  flexDirection: \"row\",\n  marginTop: \"auto\",\n  marginBottom: 0\n});\nvar CardBackground = styled(YStack, {\n  displayName: \"CardBackground\",\n  zIndex: 0,\n  position: \"absolute\",\n  inset: 0,\n  overflow: \"hidden\",\n  pointerEvents: \"none\",\n  padding: 0\n});\nvar Card = withStaticProperties(CardFrame, {\n  Header: CardHeader,\n  Footer: CardFooter,\n  Background: CardBackground\n});\nexport {\n  Card,\n  CardBackground,\n  CardFooter,\n  CardFrame,\n  CardHeader\n};\n//# sourceMappingURL=Card.js.map\n"],"mappings":";;;;;AAGA,IAAI,cAAc,oBAAoB,EACpC,MAAM,KACR,CAAC;AACD,IAAI,oBAAoB,OAAO,QAAQ,SAAS,KAAK,KAAK;CACxD,OAAO,EACL,cAAc,YAAY,KAAK,GAAG,CAAC,CAAC,MAAM,aAC5C;AACF,CAAC;AACD,IAAI,qBAAqB,OAAO,QAAQ,SAAS,KAAK,KAAK;CACzD,OAAO,EACL,SAAS,YAAY,KAAK,GAAG,CAAC,CAAC,MAAM,kBACvC;AACF,CAAC;AACD,IAAI,YAAY,OAAO,QAAQ;CAC7B,aAAa;CACb,SAAS;CACT,MAAM;CACN,UAAU;CACV,UAAU,EACR,MAAM,kBACR;AACF,CAAC;AACD,IAAI,aAAa,OAAO,QAAQ;CAC9B,aAAa;CACb,SAAS;CACT,QAAQ;CACR,iBAAiB;CACjB,cAAc;CACd,UAAU,EACR,MAAM,mBACR;AACF,CAAC;AACD,IAAI,aAAa,OAAO,YAAY;CAClC,aAAa;CACb,QAAQ;CACR,eAAe;CACf,WAAW;CACX,cAAc;AAChB,CAAC;AACD,IAAI,iBAAiB,OAAO,QAAQ;CAClC,aAAa;CACb,QAAQ;CACR,UAAU;CACV,OAAO;CACP,UAAU;CACV,eAAe;CACf,SAAS;AACX,CAAC;AACD,IAAI,OAAO,qBAAqB,WAAW;CACzC,QAAQ;CACR,QAAQ;CACR,YAAY;AACd,CAAC"}

package/dist/esm/index.js

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

package/dist/esm/index.mjs

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

package/dist/esm/index.native.js

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

package/dist/jsx/Card.mjs

@@ -1,95 +1,50 @@
 import { YStack } from "@tamagui/stacks";
+import { resolveSize } from "@tamagui/size";
 import { createStyledContext, styled, withStaticProperties } from "@tamagui/web";
-const CardContext = createStyledContext({
-  size: "$true"
+
+const CardContext = createStyledContext({ size: true });
+const cardRadiusVariant = styled.dynamic((val, env) => {
+	return { borderRadius: resolveSize(val, env).frame.borderRadius };
+});
+const cardPaddingVariant = styled.dynamic((val, env) => {
+	return { padding: resolveSize(val, env).frame.paddingHorizontal };
 });
 const CardFrame = styled(YStack, {
-  name: "Card",
-  context: CardContext,
-  variants: {
-    unstyled: {
-      false: {
-        size: "$true",
-        backgroundColor: "$background",
-        position: "relative"
-      }
-    },
-    size: {
-      "...size": (val, {
-        tokens
-      }) => {
-        return {
-          borderRadius: tokens.radius[val] ?? val
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "Card",
+	context: CardContext,
+	size: true,
+	position: "relative",
+	variants: { size: cardRadiusVariant }
 });
 const CardHeader = styled(YStack, {
-  name: "CardHeader",
-  context: CardContext,
-  variants: {
-    unstyled: {
-      false: {
-        zIndex: 10,
-        backgroundColor: "transparent",
-        marginBottom: "auto"
-      }
-    },
-    size: {
-      "...size": (val, {
-        tokens
-      }) => {
-        return {
-          padding: tokens.space[val] ?? val
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "CardHeader",
+	context: CardContext,
+	zIndex: 10,
+	backgroundColor: "transparent",
+	marginBottom: "auto",
+	variants: { size: cardPaddingVariant }
 });
 const CardFooter = styled(CardHeader, {
-  name: "CardFooter",
-  variants: {
-    unstyled: {
-      false: {
-        zIndex: 5,
-        flexDirection: "row",
-        marginTop: "auto",
-        marginBottom: 0
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "CardFooter",
+	zIndex: 5,
+	flexDirection: "row",
+	marginTop: "auto",
+	marginBottom: 0
 });
 const CardBackground = styled(YStack, {
-  name: "CardBackground",
-  variants: {
-    unstyled: {
-      false: {
-        zIndex: 0,
-        fullscreen: true,
-        overflow: "hidden",
-        pointerEvents: "none",
-        padding: 0
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "CardBackground",
+	zIndex: 0,
+	position: "absolute",
+	inset: 0,
+	overflow: "hidden",
+	pointerEvents: "none",
+	padding: 0
 });
 const Card = withStaticProperties(CardFrame, {
-  Header: CardHeader,
-  Footer: CardFooter,
-  Background: CardBackground
+	Header: CardHeader,
+	Footer: CardFooter,
+	Background: CardBackground
 });
+
 export { Card, CardBackground, CardFooter, CardFrame, CardHeader };
 //# sourceMappingURL=Card.mjs.map

package/dist/jsx/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["YStack","createStyledContext","styled","withStaticProperties","CardContext","size","CardFrame","name","context","variants","unstyled","false","backgroundColor","position","...size","val","tokens","borderRadius","radius","defaultVariants","process","env","TAMAGUI_HEADLESS","CardHeader","zIndex","marginBottom","padding","space","CardFooter","flexDirection","marginTop","CardBackground","fullscreen","overflow","pointerEvents","Card","Header","Footer","Background"],"sources":["../../src/Card.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AAEvB,SAASC,mBAAA,EAAqBC,MAAA,EAAQC,oBAAA,QAA4B;AAElE,MAAMC,WAAA,GAAcH,mBAAA,CAAoB;EACtCI,IAAA,EAAM;AACR,CAAC;AAEM,MAAMC,SAAA,GAAYJ,MAAA,CAAOF,MAAA,EAAQ;EACtCO,IAAA,EAAM;EACNC,OAAA,EAASJ,WAAA;EAETK,QAAA,EAAU;IACRC,QAAA,EAAU;MACRC,KAAA,EAAO;QACLN,IAAA,EAAM;QACNO,eAAA,EAAiB;QACjBC,QAAA,EAAU;MACZ;IACF;IAEAR,IAAA,EAAM;MACJ,WAAWS,CAACC,GAAA,EAAK;QAAEC;MAAO,MAAM;QAC9B,OAAO;UACLC,YAAA,EAAcD,MAAA,CAAOE,MAAA,CAAOH,GAAG,KAAKA;QACtC;MACF;IACF;EACF;EAEAI,eAAA,EAAiB;IACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB;EAC7C;AACF,CAAC;AAEM,MAAMC,UAAA,GAAarB,MAAA,CAAOF,MAAA,EAAQ;EACvCO,IAAA,EAAM;EACNC,OAAA,EAASJ,WAAA;EAETK,QAAA,EAAU;IACRC,QAAA,EAAU;MACRC,KAAA,EAAO;QACLa,MAAA,EAAQ;QACRZ,eAAA,EAAiB;QACjBa,YAAA,EAAc;MAChB;IACF;IAEApB,IAAA,EAAM;MACJ,WAAWS,CAACC,GAAA,EAAK;QAAEC;MAAO,MAAM;QAC9B,OAAO;UACLU,OAAA,EAASV,MAAA,CAAOW,KAAA,CAAMZ,GAAG,KAAKA;QAChC;MACF;IACF;EACF;EAEAI,eAAA,EAAiB;IACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB;EAC7C;AACF,CAAC;AAEM,MAAMM,UAAA,GAAa1B,MAAA,CAAOqB,UAAA,EAAY;EAC3ChB,IAAA,EAAM;EAENE,QAAA,EAAU;IACRC,QAAA,EAAU;MACRC,KAAA,EAAO;QACLa,MAAA,EAAQ;QACRK,aAAA,EAAe;QACfC,SAAA,EAAW;QACXL,YAAA,EAAc;MAChB;IACF;EACF;EAEAN,eAAA,EAAiB;IACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB;EAC7C;AACF,CAAC;AAEM,MAAMS,cAAA,GAAiB7B,MAAA,CAAOF,MAAA,EAAQ;EAC3CO,IAAA,EAAM;EAENE,QAAA,EAAU;IACRC,QAAA,EAAU;MACRC,KAAA,EAAO;QACLa,MAAA,EAAQ;QACRQ,UAAA,EAAY;QACZC,QAAA,EAAU;QACVC,aAAA,EAAe;QACfR,OAAA,EAAS;MACX;IACF;EACF;EAEAP,eAAA,EAAiB;IACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB;EAC7C;AACF,CAAC;AAMM,MAAMa,IAAA,GAAOhC,oBAAA,CAAqBG,SAAA,EAAW;EAClD8B,MAAA,EAAQb,UAAA;EACRc,MAAA,EAAQT,UAAA;EACRU,UAAA,EAAYP;AACd,CAAC","ignoreList":[]}
+{"version":3,"file":"Card.js","names":[],"sources":["jsx/Card.js"],"sourcesContent":["import { YStack } from \"@tamagui/stacks\";\nimport { resolveSize } from \"@tamagui/size\";\nimport { createStyledContext, styled, withStaticProperties } from \"@tamagui/web\";\nconst CardContext = createStyledContext({\n  size: true\n});\nconst cardRadiusVariant = styled.dynamic((val, env) => {\n  return {\n    borderRadius: resolveSize(val, env).frame.borderRadius\n  };\n});\nconst cardPaddingVariant = styled.dynamic((val, env) => {\n  return {\n    padding: resolveSize(val, env).frame.paddingHorizontal\n  };\n});\nconst CardFrame = styled(YStack, {\n  displayName: \"Card\",\n  context: CardContext,\n  size: true,\n  position: \"relative\",\n  variants: {\n    size: cardRadiusVariant\n  }\n});\nconst CardHeader = styled(YStack, {\n  displayName: \"CardHeader\",\n  context: CardContext,\n  zIndex: 10,\n  backgroundColor: \"transparent\",\n  marginBottom: \"auto\",\n  variants: {\n    size: cardPaddingVariant\n  }\n});\nconst CardFooter = styled(CardHeader, {\n  displayName: \"CardFooter\",\n  zIndex: 5,\n  flexDirection: \"row\",\n  marginTop: \"auto\",\n  marginBottom: 0\n});\nconst CardBackground = styled(YStack, {\n  displayName: \"CardBackground\",\n  zIndex: 0,\n  position: \"absolute\",\n  inset: 0,\n  overflow: \"hidden\",\n  pointerEvents: \"none\",\n  padding: 0\n});\nconst Card = withStaticProperties(CardFrame, {\n  Header: CardHeader,\n  Footer: CardFooter,\n  Background: CardBackground\n});\nexport {\n  Card,\n  CardBackground,\n  CardFooter,\n  CardFrame,\n  CardHeader\n};\n//# sourceMappingURL=Card.js.map\n"],"mappings":";;;;;AAGA,MAAM,cAAc,oBAAoB,EACtC,MAAM,KACR,CAAC;AACD,MAAM,oBAAoB,OAAO,SAAS,KAAK,QAAQ;CACrD,OAAO,EACL,cAAc,YAAY,KAAK,GAAG,CAAC,CAAC,MAAM,aAC5C;AACF,CAAC;AACD,MAAM,qBAAqB,OAAO,SAAS,KAAK,QAAQ;CACtD,OAAO,EACL,SAAS,YAAY,KAAK,GAAG,CAAC,CAAC,MAAM,kBACvC;AACF,CAAC;AACD,MAAM,YAAY,OAAO,QAAQ;CAC/B,aAAa;CACb,SAAS;CACT,MAAM;CACN,UAAU;CACV,UAAU,EACR,MAAM,kBACR;AACF,CAAC;AACD,MAAM,aAAa,OAAO,QAAQ;CAChC,aAAa;CACb,SAAS;CACT,QAAQ;CACR,iBAAiB;CACjB,cAAc;CACd,UAAU,EACR,MAAM,mBACR;AACF,CAAC;AACD,MAAM,aAAa,OAAO,YAAY;CACpC,aAAa;CACb,QAAQ;CACR,eAAe;CACf,WAAW;CACX,cAAc;AAChB,CAAC;AACD,MAAM,iBAAiB,OAAO,QAAQ;CACpC,aAAa;CACb,QAAQ;CACR,UAAU;CACV,OAAO;CACP,UAAU;CACV,eAAe;CACf,SAAS;AACX,CAAC;AACD,MAAM,OAAO,qBAAqB,WAAW;CAC3C,QAAQ;CACR,QAAQ;CACR,YAAY;AACd,CAAC"}

package/dist/jsx/Card.native.cjs

@@ -0,0 +1,77 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Card_exports = {};
+__export(Card_exports, {
+	Card: () => Card,
+	CardBackground: () => CardBackground,
+	CardFooter: () => CardFooter,
+	CardFrame: () => CardFrame,
+	CardHeader: () => CardHeader
+});
+module.exports = __toCommonJS(Card_exports);
+var import_stacks = require("@tamagui/stacks");
+var import_size = require("@tamagui/size");
+var import_web = require("@tamagui/web");
+var CardContext = (0, import_web.createStyledContext)({ size: true });
+var cardRadiusVariant = import_web.styled.dynamic(function(val, env) {
+	return { borderRadius: (0, import_size.resolveSize)(val, env).frame.borderRadius };
+});
+var cardPaddingVariant = import_web.styled.dynamic(function(val, env) {
+	return { padding: (0, import_size.resolveSize)(val, env).frame.paddingHorizontal };
+});
+var CardFrame = (0, import_web.styled)(import_stacks.YStack, {
+	displayName: "Card",
+	context: CardContext,
+	size: true,
+	position: "relative",
+	variants: { size: cardRadiusVariant }
+});
+var CardHeader = (0, import_web.styled)(import_stacks.YStack, {
+	displayName: "CardHeader",
+	context: CardContext,
+	zIndex: 10,
+	backgroundColor: "transparent",
+	marginBottom: "auto",
+	variants: { size: cardPaddingVariant }
+});
+var CardFooter = (0, import_web.styled)(CardHeader, {
+	displayName: "CardFooter",
+	zIndex: 5,
+	flexDirection: "row",
+	marginTop: "auto",
+	marginBottom: 0
+});
+var CardBackground = (0, import_web.styled)(import_stacks.YStack, {
+	displayName: "CardBackground",
+	zIndex: 0,
+	position: "absolute",
+	inset: 0,
+	overflow: "hidden",
+	pointerEvents: "none",
+	padding: 0
+});
+var Card = (0, import_web.withStaticProperties)(CardFrame, {
+	Header: CardHeader,
+	Footer: CardFooter,
+	Background: CardBackground
+});