@tamagui/card 2.7.7 → 3.0.0-beta.643.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/esm/Card.mjs CHANGED
@@ -1,95 +1,58 @@
1
1
  import { YStack } from "@tamagui/stacks";
2
+ import { resolveSizeToken } from "@tamagui/size";
2
3
  import { createStyledContext, styled, withStaticProperties } from "@tamagui/web";
3
- const CardContext = createStyledContext({
4
- size: "$true"
5
- });
4
+
5
+ const CardContext = createStyledContext({ size: true });
6
+ const cardRadiusVariant = (val, { tokens }) => {
7
+ const radiusToken = resolveSizeToken(val, "radius");
8
+ return { borderRadius: tokens.radius[radiusToken] ?? radiusToken };
9
+ };
10
+ const cardPaddingVariant = (val, { tokens }) => {
11
+ const spaceToken = resolveSizeToken(val, "space");
12
+ return { padding: tokens.space[spaceToken] ?? spaceToken };
13
+ };
6
14
  const CardFrame = styled(YStack, {
7
- name: "Card",
8
- context: CardContext,
9
- variants: {
10
- unstyled: {
11
- false: {
12
- size: "$true",
13
- backgroundColor: "$background",
14
- position: "relative"
15
- }
16
- },
17
- size: {
18
- "...size": (val, {
19
- tokens
20
- }) => {
21
- return {
22
- borderRadius: tokens.radius[val] ?? val
23
- };
24
- }
25
- }
26
- },
27
- defaultVariants: {
28
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
29
- }
15
+ displayName: "Card",
16
+ context: CardContext,
17
+ size: true,
18
+ position: "relative",
19
+ variants: { size: {
20
+ true: cardRadiusVariant,
21
+ Size: cardRadiusVariant
22
+ } }
30
23
  });
31
24
  const CardHeader = styled(YStack, {
32
- name: "CardHeader",
33
- context: CardContext,
34
- variants: {
35
- unstyled: {
36
- false: {
37
- zIndex: 10,
38
- backgroundColor: "transparent",
39
- marginBottom: "auto"
40
- }
41
- },
42
- size: {
43
- "...size": (val, {
44
- tokens
45
- }) => {
46
- return {
47
- padding: tokens.space[val] ?? val
48
- };
49
- }
50
- }
51
- },
52
- defaultVariants: {
53
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
54
- }
25
+ displayName: "CardHeader",
26
+ context: CardContext,
27
+ zIndex: 10,
28
+ backgroundColor: "transparent",
29
+ marginBottom: "auto",
30
+ variants: { size: {
31
+ true: cardPaddingVariant,
32
+ Size: cardPaddingVariant
33
+ } }
55
34
  });
56
35
  const CardFooter = styled(CardHeader, {
57
- name: "CardFooter",
58
- variants: {
59
- unstyled: {
60
- false: {
61
- zIndex: 5,
62
- flexDirection: "row",
63
- marginTop: "auto",
64
- marginBottom: 0
65
- }
66
- }
67
- },
68
- defaultVariants: {
69
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
70
- }
36
+ displayName: "CardFooter",
37
+ zIndex: 5,
38
+ flexDirection: "row",
39
+ marginTop: "auto",
40
+ marginBottom: 0
71
41
  });
72
42
  const CardBackground = styled(YStack, {
73
- name: "CardBackground",
74
- variants: {
75
- unstyled: {
76
- false: {
77
- zIndex: 0,
78
- fullscreen: true,
79
- overflow: "hidden",
80
- pointerEvents: "none",
81
- padding: 0
82
- }
83
- }
84
- },
85
- defaultVariants: {
86
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
87
- }
43
+ displayName: "CardBackground",
44
+ zIndex: 0,
45
+ position: "absolute",
46
+ inset: 0,
47
+ overflow: "hidden",
48
+ pointerEvents: "none",
49
+ padding: 0
88
50
  });
89
51
  const Card = withStaticProperties(CardFrame, {
90
- Header: CardHeader,
91
- Footer: CardFooter,
92
- Background: CardBackground
52
+ Header: CardHeader,
53
+ Footer: CardFooter,
54
+ Background: CardBackground
93
55
  });
56
+
94
57
  export { Card, CardBackground, CardFooter, CardFrame, CardHeader };
95
58
  //# sourceMappingURL=Card.mjs.map
@@ -1 +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":[]}
1
+ {"version":3,"file":"Card.js","names":[],"sources":["esm/Card.js"],"sourcesContent":["import { YStack } from \"@tamagui/stacks\";\nimport { resolveSizeToken } from \"@tamagui/size\";\nimport { createStyledContext, styled, withStaticProperties } from \"@tamagui/web\";\nconst CardContext = createStyledContext({\n size: true\n});\nconst cardRadiusVariant = (val, { tokens }) => {\n const radiusToken = resolveSizeToken(val, \"radius\");\n return {\n borderRadius: tokens.radius[radiusToken] ?? radiusToken\n };\n};\nconst cardPaddingVariant = (val, { tokens }) => {\n const spaceToken = resolveSizeToken(val, \"space\");\n return {\n padding: tokens.space[spaceToken] ?? spaceToken\n };\n};\nconst CardFrame = styled(YStack, {\n displayName: \"Card\",\n context: CardContext,\n size: true,\n position: \"relative\",\n variants: {\n size: {\n true: cardRadiusVariant,\n Size: cardRadiusVariant\n }\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: {\n true: cardPaddingVariant,\n Size: cardPaddingVariant\n }\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,qBAAqB,KAAK,EAAE,aAAa;CAC7C,MAAM,cAAc,iBAAiB,KAAK,QAAQ;CAClD,OAAO,EACL,cAAc,OAAO,OAAO,gBAAgB,YAC9C;AACF;AACA,MAAM,sBAAsB,KAAK,EAAE,aAAa;CAC9C,MAAM,aAAa,iBAAiB,KAAK,OAAO;CAChD,OAAO,EACL,SAAS,OAAO,MAAM,eAAe,WACvC;AACF;AACA,MAAM,YAAY,OAAO,QAAQ;CAC/B,aAAa;CACb,SAAS;CACT,MAAM;CACN,UAAU;CACV,UAAU,EACR,MAAM;EACJ,MAAM;EACN,MAAM;CACR,EACF;AACF,CAAC;AACD,MAAM,aAAa,OAAO,QAAQ;CAChC,aAAa;CACb,SAAS;CACT,QAAQ;CACR,iBAAiB;CACjB,cAAc;CACd,UAAU,EACR,MAAM;EACJ,MAAM;EACN,MAAM;CACR,EACF;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"}
@@ -1,99 +1,62 @@
1
1
  import { YStack } from "@tamagui/stacks";
2
+ import { resolveSizeToken } from "@tamagui/size";
2
3
  import { createStyledContext, styled, withStaticProperties } from "@tamagui/web";
3
- var CardContext = createStyledContext({
4
- size: "$true"
5
- });
4
+
5
+ var CardContext = createStyledContext({ size: true });
6
+ var cardRadiusVariant = function(val, param) {
7
+ var { tokens } = param;
8
+ var radiusToken = resolveSizeToken(val, "radius");
9
+ var _tokens_radius_radiusToken;
10
+ return { borderRadius: (_tokens_radius_radiusToken = tokens.radius[radiusToken]) !== null && _tokens_radius_radiusToken !== void 0 ? _tokens_radius_radiusToken : radiusToken };
11
+ };
12
+ var cardPaddingVariant = function(val, param) {
13
+ var { tokens } = param;
14
+ var spaceToken = resolveSizeToken(val, "space");
15
+ var _tokens_space_spaceToken;
16
+ return { padding: (_tokens_space_spaceToken = tokens.space[spaceToken]) !== null && _tokens_space_spaceToken !== void 0 ? _tokens_space_spaceToken : spaceToken };
17
+ };
6
18
  var CardFrame = styled(YStack, {
7
- name: "Card",
8
- context: CardContext,
9
- variants: {
10
- unstyled: {
11
- false: {
12
- size: "$true",
13
- backgroundColor: "$background",
14
- position: "relative"
15
- }
16
- },
17
- size: {
18
- "...size": function (val, param) {
19
- var {
20
- tokens
21
- } = param;
22
- var _tokens_radius_val;
23
- return {
24
- borderRadius: (_tokens_radius_val = tokens.radius[val]) !== null && _tokens_radius_val !== void 0 ? _tokens_radius_val : val
25
- };
26
- }
27
- }
28
- },
29
- defaultVariants: {
30
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
31
- }
19
+ displayName: "Card",
20
+ context: CardContext,
21
+ size: true,
22
+ position: "relative",
23
+ variants: { size: {
24
+ true: cardRadiusVariant,
25
+ Size: cardRadiusVariant
26
+ } }
32
27
  });
33
28
  var CardHeader = styled(YStack, {
34
- name: "CardHeader",
35
- context: CardContext,
36
- variants: {
37
- unstyled: {
38
- false: {
39
- zIndex: 10,
40
- backgroundColor: "transparent",
41
- marginBottom: "auto"
42
- }
43
- },
44
- size: {
45
- "...size": function (val, param) {
46
- var {
47
- tokens
48
- } = param;
49
- var _tokens_space_val;
50
- return {
51
- padding: (_tokens_space_val = tokens.space[val]) !== null && _tokens_space_val !== void 0 ? _tokens_space_val : val
52
- };
53
- }
54
- }
55
- },
56
- defaultVariants: {
57
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
58
- }
29
+ displayName: "CardHeader",
30
+ context: CardContext,
31
+ zIndex: 10,
32
+ backgroundColor: "transparent",
33
+ marginBottom: "auto",
34
+ variants: { size: {
35
+ true: cardPaddingVariant,
36
+ Size: cardPaddingVariant
37
+ } }
59
38
  });
60
39
  var CardFooter = styled(CardHeader, {
61
- name: "CardFooter",
62
- variants: {
63
- unstyled: {
64
- false: {
65
- zIndex: 5,
66
- flexDirection: "row",
67
- marginTop: "auto",
68
- marginBottom: 0
69
- }
70
- }
71
- },
72
- defaultVariants: {
73
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
74
- }
40
+ displayName: "CardFooter",
41
+ zIndex: 5,
42
+ flexDirection: "row",
43
+ marginTop: "auto",
44
+ marginBottom: 0
75
45
  });
76
46
  var CardBackground = styled(YStack, {
77
- name: "CardBackground",
78
- variants: {
79
- unstyled: {
80
- false: {
81
- zIndex: 0,
82
- fullscreen: true,
83
- overflow: "hidden",
84
- pointerEvents: "none",
85
- padding: 0
86
- }
87
- }
88
- },
89
- defaultVariants: {
90
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
91
- }
47
+ displayName: "CardBackground",
48
+ zIndex: 0,
49
+ position: "absolute",
50
+ inset: 0,
51
+ overflow: "hidden",
52
+ pointerEvents: "none",
53
+ padding: 0
92
54
  });
93
55
  var Card = withStaticProperties(CardFrame, {
94
- Header: CardHeader,
95
- Footer: CardFooter,
96
- Background: CardBackground
56
+ Header: CardHeader,
57
+ Footer: CardFooter,
58
+ Background: CardBackground
97
59
  });
60
+
98
61
  export { Card, CardBackground, CardFooter, CardFrame, CardHeader };
99
62
  //# sourceMappingURL=Card.native.js.map
@@ -1 +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":[]}
1
+ {"version":3,"file":"Card.native.js","names":[],"sources":["esm/Card.native.js"],"sourcesContent":["import { YStack } from \"@tamagui/stacks\";\nimport { resolveSizeToken } from \"@tamagui/size\";\nimport { createStyledContext, styled, withStaticProperties } from \"@tamagui/web\";\nvar CardContext = createStyledContext({\n size: true\n});\nvar cardRadiusVariant = function(val, param) {\n var { tokens } = param;\n var radiusToken = resolveSizeToken(val, \"radius\");\n var _tokens_radius_radiusToken;\n return {\n borderRadius: (_tokens_radius_radiusToken = tokens.radius[radiusToken]) !== null && _tokens_radius_radiusToken !== void 0 ? _tokens_radius_radiusToken : radiusToken\n };\n};\nvar cardPaddingVariant = function(val, param) {\n var { tokens } = param;\n var spaceToken = resolveSizeToken(val, \"space\");\n var _tokens_space_spaceToken;\n return {\n padding: (_tokens_space_spaceToken = tokens.space[spaceToken]) !== null && _tokens_space_spaceToken !== void 0 ? _tokens_space_spaceToken : spaceToken\n };\n};\nvar CardFrame = styled(YStack, {\n displayName: \"Card\",\n context: CardContext,\n size: true,\n position: \"relative\",\n variants: {\n size: {\n true: cardRadiusVariant,\n Size: cardRadiusVariant\n }\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: {\n true: cardPaddingVariant,\n Size: cardPaddingVariant\n }\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,SAAS,KAAK,OAAO;CAC3C,IAAI,EAAE,WAAW;CACjB,IAAI,cAAc,iBAAiB,KAAK,QAAQ;CAChD,IAAI;CACJ,OAAO,EACL,eAAe,6BAA6B,OAAO,OAAO,kBAAkB,QAAQ,+BAA+B,KAAK,IAAI,6BAA6B,YAC3J;AACF;AACA,IAAI,qBAAqB,SAAS,KAAK,OAAO;CAC5C,IAAI,EAAE,WAAW;CACjB,IAAI,aAAa,iBAAiB,KAAK,OAAO;CAC9C,IAAI;CACJ,OAAO,EACL,UAAU,2BAA2B,OAAO,MAAM,iBAAiB,QAAQ,6BAA6B,KAAK,IAAI,2BAA2B,WAC9I;AACF;AACA,IAAI,YAAY,OAAO,QAAQ;CAC7B,aAAa;CACb,SAAS;CACT,MAAM;CACN,UAAU;CACV,UAAU,EACR,MAAM;EACJ,MAAM;EACN,MAAM;CACR,EACF;AACF,CAAC;AACD,IAAI,aAAa,OAAO,QAAQ;CAC9B,aAAa;CACb,SAAS;CACT,QAAQ;CACR,iBAAiB;CACjB,cAAc;CACd,UAAU,EACR,MAAM;EACJ,MAAM;EACN,MAAM;CACR,EACF;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 CHANGED
@@ -1,2 +1 @@
1
- export * from "./Card.mjs";
2
- //# sourceMappingURL=index.js.map
1
+ export * from "./Card.mjs"
@@ -1,2 +1 @@
1
- export * from "./Card.mjs";
2
- //# sourceMappingURL=index.mjs.map
1
+ export * from "./Card.mjs"
@@ -1,2 +1 @@
1
- export * from "./Card.native.js";
2
- //# sourceMappingURL=index.native.js.map
1
+ export * from "./Card.native.js"
package/dist/jsx/Card.mjs CHANGED
@@ -1,95 +1,58 @@
1
1
  import { YStack } from "@tamagui/stacks";
2
+ import { resolveSizeToken } from "@tamagui/size";
2
3
  import { createStyledContext, styled, withStaticProperties } from "@tamagui/web";
3
- const CardContext = createStyledContext({
4
- size: "$true"
5
- });
4
+
5
+ const CardContext = createStyledContext({ size: true });
6
+ const cardRadiusVariant = (val, { tokens }) => {
7
+ const radiusToken = resolveSizeToken(val, "radius");
8
+ return { borderRadius: tokens.radius[radiusToken] ?? radiusToken };
9
+ };
10
+ const cardPaddingVariant = (val, { tokens }) => {
11
+ const spaceToken = resolveSizeToken(val, "space");
12
+ return { padding: tokens.space[spaceToken] ?? spaceToken };
13
+ };
6
14
  const CardFrame = styled(YStack, {
7
- name: "Card",
8
- context: CardContext,
9
- variants: {
10
- unstyled: {
11
- false: {
12
- size: "$true",
13
- backgroundColor: "$background",
14
- position: "relative"
15
- }
16
- },
17
- size: {
18
- "...size": (val, {
19
- tokens
20
- }) => {
21
- return {
22
- borderRadius: tokens.radius[val] ?? val
23
- };
24
- }
25
- }
26
- },
27
- defaultVariants: {
28
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
29
- }
15
+ displayName: "Card",
16
+ context: CardContext,
17
+ size: true,
18
+ position: "relative",
19
+ variants: { size: {
20
+ true: cardRadiusVariant,
21
+ Size: cardRadiusVariant
22
+ } }
30
23
  });
31
24
  const CardHeader = styled(YStack, {
32
- name: "CardHeader",
33
- context: CardContext,
34
- variants: {
35
- unstyled: {
36
- false: {
37
- zIndex: 10,
38
- backgroundColor: "transparent",
39
- marginBottom: "auto"
40
- }
41
- },
42
- size: {
43
- "...size": (val, {
44
- tokens
45
- }) => {
46
- return {
47
- padding: tokens.space[val] ?? val
48
- };
49
- }
50
- }
51
- },
52
- defaultVariants: {
53
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
54
- }
25
+ displayName: "CardHeader",
26
+ context: CardContext,
27
+ zIndex: 10,
28
+ backgroundColor: "transparent",
29
+ marginBottom: "auto",
30
+ variants: { size: {
31
+ true: cardPaddingVariant,
32
+ Size: cardPaddingVariant
33
+ } }
55
34
  });
56
35
  const CardFooter = styled(CardHeader, {
57
- name: "CardFooter",
58
- variants: {
59
- unstyled: {
60
- false: {
61
- zIndex: 5,
62
- flexDirection: "row",
63
- marginTop: "auto",
64
- marginBottom: 0
65
- }
66
- }
67
- },
68
- defaultVariants: {
69
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
70
- }
36
+ displayName: "CardFooter",
37
+ zIndex: 5,
38
+ flexDirection: "row",
39
+ marginTop: "auto",
40
+ marginBottom: 0
71
41
  });
72
42
  const CardBackground = styled(YStack, {
73
- name: "CardBackground",
74
- variants: {
75
- unstyled: {
76
- false: {
77
- zIndex: 0,
78
- fullscreen: true,
79
- overflow: "hidden",
80
- pointerEvents: "none",
81
- padding: 0
82
- }
83
- }
84
- },
85
- defaultVariants: {
86
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
87
- }
43
+ displayName: "CardBackground",
44
+ zIndex: 0,
45
+ position: "absolute",
46
+ inset: 0,
47
+ overflow: "hidden",
48
+ pointerEvents: "none",
49
+ padding: 0
88
50
  });
89
51
  const Card = withStaticProperties(CardFrame, {
90
- Header: CardHeader,
91
- Footer: CardFooter,
92
- Background: CardBackground
52
+ Header: CardHeader,
53
+ Footer: CardFooter,
54
+ Background: CardBackground
93
55
  });
56
+
94
57
  export { Card, CardBackground, CardFooter, CardFrame, CardHeader };
95
58
  //# sourceMappingURL=Card.mjs.map
@@ -1 +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":[]}
1
+ {"version":3,"file":"Card.js","names":[],"sources":["jsx/Card.js"],"sourcesContent":["import { YStack } from \"@tamagui/stacks\";\nimport { resolveSizeToken } from \"@tamagui/size\";\nimport { createStyledContext, styled, withStaticProperties } from \"@tamagui/web\";\nconst CardContext = createStyledContext({\n size: true\n});\nconst cardRadiusVariant = (val, { tokens }) => {\n const radiusToken = resolveSizeToken(val, \"radius\");\n return {\n borderRadius: tokens.radius[radiusToken] ?? radiusToken\n };\n};\nconst cardPaddingVariant = (val, { tokens }) => {\n const spaceToken = resolveSizeToken(val, \"space\");\n return {\n padding: tokens.space[spaceToken] ?? spaceToken\n };\n};\nconst CardFrame = styled(YStack, {\n displayName: \"Card\",\n context: CardContext,\n size: true,\n position: \"relative\",\n variants: {\n size: {\n true: cardRadiusVariant,\n Size: cardRadiusVariant\n }\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: {\n true: cardPaddingVariant,\n Size: cardPaddingVariant\n }\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,qBAAqB,KAAK,EAAE,aAAa;CAC7C,MAAM,cAAc,iBAAiB,KAAK,QAAQ;CAClD,OAAO,EACL,cAAc,OAAO,OAAO,gBAAgB,YAC9C;AACF;AACA,MAAM,sBAAsB,KAAK,EAAE,aAAa;CAC9C,MAAM,aAAa,iBAAiB,KAAK,OAAO;CAChD,OAAO,EACL,SAAS,OAAO,MAAM,eAAe,WACvC;AACF;AACA,MAAM,YAAY,OAAO,QAAQ;CAC/B,aAAa;CACb,SAAS;CACT,MAAM;CACN,UAAU;CACV,UAAU,EACR,MAAM;EACJ,MAAM;EACN,MAAM;CACR,EACF;AACF,CAAC;AACD,MAAM,aAAa,OAAO,QAAQ;CAChC,aAAa;CACb,SAAS;CACT,QAAQ;CACR,iBAAiB;CACjB,cAAc;CACd,UAAU,EACR,MAAM;EACJ,MAAM;EACN,MAAM;CACR,EACF;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"}
@@ -0,0 +1,90 @@
1
+ "use strict";
2
+
3
+
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all) __defProp(target, name, {
10
+ get: all[name],
11
+ enumerable: true
12
+ });
13
+ };
14
+ var __copyProps = (to, from, except, desc) => {
15
+ if (from && typeof from === "object" || typeof from === "function") {
16
+ for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
17
+ get: () => from[key],
18
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
19
+ });
20
+ }
21
+ return to;
22
+ };
23
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
24
+ var Card_exports = {};
25
+ __export(Card_exports, {
26
+ Card: () => Card,
27
+ CardBackground: () => CardBackground,
28
+ CardFooter: () => CardFooter,
29
+ CardFrame: () => CardFrame,
30
+ CardHeader: () => CardHeader
31
+ });
32
+ module.exports = __toCommonJS(Card_exports);
33
+ var import_stacks = require("@tamagui/stacks");
34
+ var import_size = require("@tamagui/size");
35
+ var import_web = require("@tamagui/web");
36
+ var CardContext = (0, import_web.createStyledContext)({ size: true });
37
+ var cardRadiusVariant = function(val, param) {
38
+ var { tokens } = param;
39
+ var radiusToken = (0, import_size.resolveSizeToken)(val, "radius");
40
+ var _tokens_radius_radiusToken;
41
+ return { borderRadius: (_tokens_radius_radiusToken = tokens.radius[radiusToken]) !== null && _tokens_radius_radiusToken !== void 0 ? _tokens_radius_radiusToken : radiusToken };
42
+ };
43
+ var cardPaddingVariant = function(val, param) {
44
+ var { tokens } = param;
45
+ var spaceToken = (0, import_size.resolveSizeToken)(val, "space");
46
+ var _tokens_space_spaceToken;
47
+ return { padding: (_tokens_space_spaceToken = tokens.space[spaceToken]) !== null && _tokens_space_spaceToken !== void 0 ? _tokens_space_spaceToken : spaceToken };
48
+ };
49
+ var CardFrame = (0, import_web.styled)(import_stacks.YStack, {
50
+ displayName: "Card",
51
+ context: CardContext,
52
+ size: true,
53
+ position: "relative",
54
+ variants: { size: {
55
+ true: cardRadiusVariant,
56
+ Size: cardRadiusVariant
57
+ } }
58
+ });
59
+ var CardHeader = (0, import_web.styled)(import_stacks.YStack, {
60
+ displayName: "CardHeader",
61
+ context: CardContext,
62
+ zIndex: 10,
63
+ backgroundColor: "transparent",
64
+ marginBottom: "auto",
65
+ variants: { size: {
66
+ true: cardPaddingVariant,
67
+ Size: cardPaddingVariant
68
+ } }
69
+ });
70
+ var CardFooter = (0, import_web.styled)(CardHeader, {
71
+ displayName: "CardFooter",
72
+ zIndex: 5,
73
+ flexDirection: "row",
74
+ marginTop: "auto",
75
+ marginBottom: 0
76
+ });
77
+ var CardBackground = (0, import_web.styled)(import_stacks.YStack, {
78
+ displayName: "CardBackground",
79
+ zIndex: 0,
80
+ position: "absolute",
81
+ inset: 0,
82
+ overflow: "hidden",
83
+ pointerEvents: "none",
84
+ padding: 0
85
+ });
86
+ var Card = (0, import_web.withStaticProperties)(CardFrame, {
87
+ Header: CardHeader,
88
+ Footer: CardFooter,
89
+ Background: CardBackground
90
+ });