@tamagui/card 1.0.1-beta.100
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/cjs/Card.js +144 -0
- package/dist/cjs/Card.js.map +7 -0
- package/dist/cjs/index.js +18 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/esm/Card.js +119 -0
- package/dist/esm/Card.js.map +7 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/jsx/Card.js +87 -0
- package/dist/jsx/Card.js.map +7 -0
- package/dist/jsx/index.js +2 -0
- package/dist/jsx/index.js.map +7 -0
- package/package.json +43 -0
- package/src/Card.tsx +116 -0
- package/src/index.ts +1 -0
- package/types/Card.d.ts +805 -0
- package/types/Card.d.ts.map +1 -0
- package/types/index.d.ts +2 -0
- package/types/index.d.ts.map +1 -0
package/dist/cjs/Card.js
ADDED
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
21
|
+
var __objRest = (source, exclude) => {
|
|
22
|
+
var target = {};
|
|
23
|
+
for (var prop in source)
|
|
24
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
if (source != null && __getOwnPropSymbols)
|
|
27
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
}
|
|
31
|
+
return target;
|
|
32
|
+
};
|
|
33
|
+
var __export = (target, all) => {
|
|
34
|
+
for (var name in all)
|
|
35
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
36
|
+
};
|
|
37
|
+
var __copyProps = (to, from, except, desc) => {
|
|
38
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
39
|
+
for (let key of __getOwnPropNames(from))
|
|
40
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
41
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
42
|
+
}
|
|
43
|
+
return to;
|
|
44
|
+
};
|
|
45
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
46
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
47
|
+
var Card_exports = {};
|
|
48
|
+
__export(Card_exports, {
|
|
49
|
+
Card: () => Card,
|
|
50
|
+
CardBackground: () => CardBackground,
|
|
51
|
+
CardFooter: () => CardFooter,
|
|
52
|
+
CardFrame: () => CardFrame,
|
|
53
|
+
CardHeader: () => CardHeader,
|
|
54
|
+
createCardScope: () => createCardScope,
|
|
55
|
+
useCardContext: () => useCardContext
|
|
56
|
+
});
|
|
57
|
+
module.exports = __toCommonJS(Card_exports);
|
|
58
|
+
var import_core = require("@tamagui/core");
|
|
59
|
+
var import_create_context = require("@tamagui/create-context");
|
|
60
|
+
var import_stacks = require("@tamagui/stacks");
|
|
61
|
+
var import_react = __toESM(require("react"));
|
|
62
|
+
import_react.default["createElement"];
|
|
63
|
+
const CARD_NAME = "CARD";
|
|
64
|
+
const [createCardContext, createCardScope] = (0, import_create_context.createContextScope)(CARD_NAME);
|
|
65
|
+
const [CardProvider, useCardContext] = createCardContext(CARD_NAME);
|
|
66
|
+
const CardFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
67
|
+
name: "Card",
|
|
68
|
+
backgroundColor: "$background",
|
|
69
|
+
position: "relative",
|
|
70
|
+
overflow: "hidden",
|
|
71
|
+
variants: {
|
|
72
|
+
size: {
|
|
73
|
+
"...size": (val, { tokens }) => {
|
|
74
|
+
return {
|
|
75
|
+
borderRadius: tokens.radius[val] ?? val
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
defaultVariants: {
|
|
81
|
+
size: "$4"
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
const CardHeader = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
85
|
+
name: "CardHeader",
|
|
86
|
+
zIndex: 10,
|
|
87
|
+
backgroundColor: "transparent",
|
|
88
|
+
marginBottom: "auto",
|
|
89
|
+
variants: {
|
|
90
|
+
size: {
|
|
91
|
+
"...size": (val, { tokens }) => {
|
|
92
|
+
return {
|
|
93
|
+
padding: tokens.space[val] ?? val
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
const CardFooter = (0, import_core.styled)(CardHeader, {
|
|
100
|
+
name: "CardFooter",
|
|
101
|
+
zIndex: 5,
|
|
102
|
+
flexDirection: "row",
|
|
103
|
+
marginTop: "auto",
|
|
104
|
+
marginBottom: 0
|
|
105
|
+
});
|
|
106
|
+
const CardBackground = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
107
|
+
name: "CardBackground",
|
|
108
|
+
zIndex: 0,
|
|
109
|
+
fullscreen: true,
|
|
110
|
+
overflow: "hidden",
|
|
111
|
+
pointerEvents: "none",
|
|
112
|
+
padding: 0
|
|
113
|
+
});
|
|
114
|
+
const Card = (0, import_core.withStaticProperties)(CardFrame.extractable((0, import_core.themeable)((0, import_react.forwardRef)((_a, ref) => {
|
|
115
|
+
var _b = _a, { size, __scopeCard, children } = _b, props = __objRest(_b, ["size", "__scopeCard", "children"]);
|
|
116
|
+
return /* @__PURE__ */ import_react.default.createElement(CardProvider, {
|
|
117
|
+
scope: __scopeCard,
|
|
118
|
+
size
|
|
119
|
+
}, /* @__PURE__ */ import_react.default.createElement(CardFrame, __spreadValues({
|
|
120
|
+
ref
|
|
121
|
+
}, props), import_react.default.Children.map(children, (child) => {
|
|
122
|
+
if ((0, import_core.isTamaguiElement)(child) && !child.props.size) {
|
|
123
|
+
return (0, import_react.cloneElement)(child, {
|
|
124
|
+
size
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
return child;
|
|
128
|
+
})));
|
|
129
|
+
}))), {
|
|
130
|
+
Header: CardHeader,
|
|
131
|
+
Footer: CardFooter,
|
|
132
|
+
Background: CardBackground
|
|
133
|
+
});
|
|
134
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
135
|
+
0 && (module.exports = {
|
|
136
|
+
Card,
|
|
137
|
+
CardBackground,
|
|
138
|
+
CardFooter,
|
|
139
|
+
CardFrame,
|
|
140
|
+
CardHeader,
|
|
141
|
+
createCardScope,
|
|
142
|
+
useCardContext
|
|
143
|
+
});
|
|
144
|
+
//# sourceMappingURL=Card.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Card.tsx"],
|
|
4
|
+
"sourcesContent": ["import {\n GetProps,\n SizeTokens,\n isTamaguiElement,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport React, { cloneElement, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nconst CARD_NAME = 'CARD'\n\ntype CardContextValue = {\n size?: SizeTokens\n}\n\nconst [createCardContext, createCardScope] = createContextScope(CARD_NAME)\nconst [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 },\n\n defaultVariants: {\n size: '$4',\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 },\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>\n\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n CardFrame.extractable(\n themeable(\n forwardRef<HTMLElement | View, 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 {\n Header: CardHeader,\n Footer: CardFooter,\n Background: CardBackground,\n }\n)\n\nexport { createCardScope, useCardContext }\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOO;AACP,4BAAgD;AAChD,oBAA+B;AAC/B,mBAAgD;AAIhD,qBAAM;AAEN,MAAM,YAAY;AAMlB,MAAM,CAAC,mBAAmB,mBAAmB,8CAAmB,SAAS;AACzE,MAAM,CAAC,cAAc,kBAAkB,kBAAoC,SAAS;AAE7E,MAAM,YAAY,wBAAO,8BAAgB;AAAA,EAC9C,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,cAAc,OAAO,OAAO,QAAQ;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,aAAa,wBAAO,8BAAgB;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,aAAa;AAC9B,eAAO;AAAA,UACL,SAAS,OAAO,MAAM,QAAQ;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,wBAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc;AAChB,CAAC;AAEM,MAAM,iBAAiB,wBAAO,8BAAgB;AAAA,EACnD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAAS;AACX,CAAC;AAOM,MAAM,OAAO,sCAClB,UAAU,YACR,2BACE,6BACE,CAAC,IAA2C,QAAQ;AAAnD,eAAE,QAAM,aAAa,aAArB,IAAkC,kBAAlC,IAAkC,CAAhC,QAAM,eAAa;AACpB,SACE,mDAAC;AAAA,IAAa,OAAO;AAAA,IAAa;AAAA,KAChC,mDAAC;AAAA,IAAU;AAAA,KAAc,QACtB,qBAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,kCAAiB,KAAK,KAAK,CAAC,MAAM,MAAM,MAAM;AAChD,aAAO,+BAAa,OAAO;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC,CACH,CACF;AAEJ,CACF,CACF,CACF,GACA;AAAA,EACE,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AACd,CACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __copyProps = (to, from, except, desc) => {
|
|
6
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
7
|
+
for (let key of __getOwnPropNames(from))
|
|
8
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
9
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
10
|
+
}
|
|
11
|
+
return to;
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
var src_exports = {};
|
|
16
|
+
module.exports = __toCommonJS(src_exports);
|
|
17
|
+
__reExport(src_exports, require("./Card"), module.exports);
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
package/dist/esm/Card.js
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
var __objRest = (source, exclude) => {
|
|
18
|
+
var target = {};
|
|
19
|
+
for (var prop in source)
|
|
20
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
21
|
+
target[prop] = source[prop];
|
|
22
|
+
if (source != null && __getOwnPropSymbols)
|
|
23
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
24
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
}
|
|
27
|
+
return target;
|
|
28
|
+
};
|
|
29
|
+
import {
|
|
30
|
+
isTamaguiElement,
|
|
31
|
+
styled,
|
|
32
|
+
themeable,
|
|
33
|
+
withStaticProperties
|
|
34
|
+
} from "@tamagui/core";
|
|
35
|
+
import { createContextScope } from "@tamagui/create-context";
|
|
36
|
+
import { ThemeableStack } from "@tamagui/stacks";
|
|
37
|
+
import React, { cloneElement, forwardRef } from "react";
|
|
38
|
+
React["createElement"];
|
|
39
|
+
const CARD_NAME = "CARD";
|
|
40
|
+
const [createCardContext, createCardScope] = createContextScope(CARD_NAME);
|
|
41
|
+
const [CardProvider, useCardContext] = createCardContext(CARD_NAME);
|
|
42
|
+
const CardFrame = styled(ThemeableStack, {
|
|
43
|
+
name: "Card",
|
|
44
|
+
backgroundColor: "$background",
|
|
45
|
+
position: "relative",
|
|
46
|
+
overflow: "hidden",
|
|
47
|
+
variants: {
|
|
48
|
+
size: {
|
|
49
|
+
"...size": (val, { tokens }) => {
|
|
50
|
+
return {
|
|
51
|
+
borderRadius: tokens.radius[val] ?? val
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
defaultVariants: {
|
|
57
|
+
size: "$4"
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
const CardHeader = styled(ThemeableStack, {
|
|
61
|
+
name: "CardHeader",
|
|
62
|
+
zIndex: 10,
|
|
63
|
+
backgroundColor: "transparent",
|
|
64
|
+
marginBottom: "auto",
|
|
65
|
+
variants: {
|
|
66
|
+
size: {
|
|
67
|
+
"...size": (val, { tokens }) => {
|
|
68
|
+
return {
|
|
69
|
+
padding: tokens.space[val] ?? val
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
const CardFooter = styled(CardHeader, {
|
|
76
|
+
name: "CardFooter",
|
|
77
|
+
zIndex: 5,
|
|
78
|
+
flexDirection: "row",
|
|
79
|
+
marginTop: "auto",
|
|
80
|
+
marginBottom: 0
|
|
81
|
+
});
|
|
82
|
+
const CardBackground = styled(ThemeableStack, {
|
|
83
|
+
name: "CardBackground",
|
|
84
|
+
zIndex: 0,
|
|
85
|
+
fullscreen: true,
|
|
86
|
+
overflow: "hidden",
|
|
87
|
+
pointerEvents: "none",
|
|
88
|
+
padding: 0
|
|
89
|
+
});
|
|
90
|
+
const Card = withStaticProperties(CardFrame.extractable(themeable(forwardRef((_a, ref) => {
|
|
91
|
+
var _b = _a, { size, __scopeCard, children } = _b, props = __objRest(_b, ["size", "__scopeCard", "children"]);
|
|
92
|
+
return /* @__PURE__ */ React.createElement(CardProvider, {
|
|
93
|
+
scope: __scopeCard,
|
|
94
|
+
size
|
|
95
|
+
}, /* @__PURE__ */ React.createElement(CardFrame, __spreadValues({
|
|
96
|
+
ref
|
|
97
|
+
}, props), React.Children.map(children, (child) => {
|
|
98
|
+
if (isTamaguiElement(child) && !child.props.size) {
|
|
99
|
+
return cloneElement(child, {
|
|
100
|
+
size
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
return child;
|
|
104
|
+
})));
|
|
105
|
+
}))), {
|
|
106
|
+
Header: CardHeader,
|
|
107
|
+
Footer: CardFooter,
|
|
108
|
+
Background: CardBackground
|
|
109
|
+
});
|
|
110
|
+
export {
|
|
111
|
+
Card,
|
|
112
|
+
CardBackground,
|
|
113
|
+
CardFooter,
|
|
114
|
+
CardFrame,
|
|
115
|
+
CardHeader,
|
|
116
|
+
createCardScope,
|
|
117
|
+
useCardContext
|
|
118
|
+
};
|
|
119
|
+
//# sourceMappingURL=Card.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Card.tsx"],
|
|
4
|
+
"sourcesContent": ["import {\n GetProps,\n SizeTokens,\n isTamaguiElement,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport React, { cloneElement, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nconst CARD_NAME = 'CARD'\n\ntype CardContextValue = {\n size?: SizeTokens\n}\n\nconst [createCardContext, createCardScope] = createContextScope(CARD_NAME)\nconst [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 },\n\n defaultVariants: {\n size: '$4',\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 },\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>\n\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n CardFrame.extractable(\n themeable(\n forwardRef<HTMLElement | View, 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 {\n Header: CardHeader,\n Footer: CardFooter,\n Background: CardBackground,\n }\n)\n\nexport { createCardScope, useCardContext }\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AACA;AAIA,MAAM;AAEN,MAAM,YAAY;AAMlB,MAAM,CAAC,mBAAmB,mBAAmB,mBAAmB,SAAS;AACzE,MAAM,CAAC,cAAc,kBAAkB,kBAAoC,SAAS;AAE7E,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,aAAa;AAC9B,eAAO;AAAA,UACL,cAAc,OAAO,OAAO,QAAQ;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,aAAa;AAC9B,eAAO;AAAA,UACL,SAAS,OAAO,MAAM,QAAQ;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;AAOM,MAAM,OAAO,qBAClB,UAAU,YACR,UACE,WACE,CAAC,IAA2C,QAAQ;AAAnD,eAAE,QAAM,aAAa,aAArB,IAAkC,kBAAlC,IAAkC,CAAhC,QAAM,eAAa;AACpB,SACE,oCAAC;AAAA,IAAa,OAAO;AAAA,IAAa;AAAA,KAChC,oCAAC;AAAA,IAAU;AAAA,KAAc,QACtB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,iBAAiB,KAAK,KAAK,CAAC,MAAM,MAAM,MAAM;AAChD,aAAO,aAAa,OAAO;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC,CACH,CACF;AAEJ,CACF,CACF,CACF,GACA;AAAA,EACE,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AACd,CACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/jsx/Card.js
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import {
|
|
2
|
+
isTamaguiElement,
|
|
3
|
+
styled,
|
|
4
|
+
themeable,
|
|
5
|
+
withStaticProperties
|
|
6
|
+
} from "@tamagui/core";
|
|
7
|
+
import { createContextScope } from "@tamagui/create-context";
|
|
8
|
+
import { ThemeableStack } from "@tamagui/stacks";
|
|
9
|
+
import React, { cloneElement, forwardRef } from "react";
|
|
10
|
+
React["createElement"];
|
|
11
|
+
const CARD_NAME = "CARD";
|
|
12
|
+
const [createCardContext, createCardScope] = createContextScope(CARD_NAME);
|
|
13
|
+
const [CardProvider, useCardContext] = createCardContext(CARD_NAME);
|
|
14
|
+
const CardFrame = styled(ThemeableStack, {
|
|
15
|
+
name: "Card",
|
|
16
|
+
backgroundColor: "$background",
|
|
17
|
+
position: "relative",
|
|
18
|
+
overflow: "hidden",
|
|
19
|
+
variants: {
|
|
20
|
+
size: {
|
|
21
|
+
"...size": (val, { tokens }) => {
|
|
22
|
+
var _a;
|
|
23
|
+
return {
|
|
24
|
+
borderRadius: (_a = tokens.radius[val]) != null ? _a : val
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
defaultVariants: {
|
|
30
|
+
size: "$4"
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
const CardHeader = styled(ThemeableStack, {
|
|
34
|
+
name: "CardHeader",
|
|
35
|
+
zIndex: 10,
|
|
36
|
+
backgroundColor: "transparent",
|
|
37
|
+
marginBottom: "auto",
|
|
38
|
+
variants: {
|
|
39
|
+
size: {
|
|
40
|
+
"...size": (val, { tokens }) => {
|
|
41
|
+
var _a;
|
|
42
|
+
return {
|
|
43
|
+
padding: (_a = tokens.space[val]) != null ? _a : val
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
const CardFooter = styled(CardHeader, {
|
|
50
|
+
name: "CardFooter",
|
|
51
|
+
zIndex: 5,
|
|
52
|
+
flexDirection: "row",
|
|
53
|
+
marginTop: "auto",
|
|
54
|
+
marginBottom: 0
|
|
55
|
+
});
|
|
56
|
+
const CardBackground = styled(ThemeableStack, {
|
|
57
|
+
name: "CardBackground",
|
|
58
|
+
zIndex: 0,
|
|
59
|
+
fullscreen: true,
|
|
60
|
+
overflow: "hidden",
|
|
61
|
+
pointerEvents: "none",
|
|
62
|
+
padding: 0
|
|
63
|
+
});
|
|
64
|
+
const Card = withStaticProperties(CardFrame.extractable(themeable(forwardRef(({ size, __scopeCard, children, ...props }, ref) => {
|
|
65
|
+
return <CardProvider scope={__scopeCard} size={size}><CardFrame ref={ref} {...props}>{React.Children.map(children, (child) => {
|
|
66
|
+
if (isTamaguiElement(child) && !child.props.size) {
|
|
67
|
+
return cloneElement(child, {
|
|
68
|
+
size
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
return child;
|
|
72
|
+
})}</CardFrame></CardProvider>;
|
|
73
|
+
}))), {
|
|
74
|
+
Header: CardHeader,
|
|
75
|
+
Footer: CardFooter,
|
|
76
|
+
Background: CardBackground
|
|
77
|
+
});
|
|
78
|
+
export {
|
|
79
|
+
Card,
|
|
80
|
+
CardBackground,
|
|
81
|
+
CardFooter,
|
|
82
|
+
CardFrame,
|
|
83
|
+
CardHeader,
|
|
84
|
+
createCardScope,
|
|
85
|
+
useCardContext
|
|
86
|
+
};
|
|
87
|
+
//# sourceMappingURL=Card.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Card.tsx"],
|
|
4
|
+
"sourcesContent": ["import {\n GetProps,\n SizeTokens,\n isTamaguiElement,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport React, { cloneElement, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nconst CARD_NAME = 'CARD'\n\ntype CardContextValue = {\n size?: SizeTokens\n}\n\nconst [createCardContext, createCardScope] = createContextScope(CARD_NAME)\nconst [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 },\n\n defaultVariants: {\n size: '$4',\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 },\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>\n\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n CardFrame.extractable(\n themeable(\n forwardRef<HTMLElement | View, 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 {\n Header: CardHeader,\n Footer: CardFooter,\n Background: CardBackground,\n }\n)\n\nexport { createCardScope, useCardContext }\n"],
|
|
5
|
+
"mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AACA;AAIA,MAAM;AAEN,MAAM,YAAY;AAMlB,MAAM,CAAC,mBAAmB,mBAAmB,mBAAmB,SAAS;AACzE,MAAM,CAAC,cAAc,kBAAkB,kBAAoC,SAAS;AAE7E,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,aAAa;AAjCtC;AAkCQ,eAAO;AAAA,UACL,cAAc,aAAO,OAAO,SAAd,YAAsB;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,aAAa;AAtDtC;AAuDQ,eAAO;AAAA,UACL,SAAS,aAAO,MAAM,SAAb,YAAqB;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;AAOM,MAAM,OAAO,qBAClB,UAAU,YACR,UACE,WACE,CAAC,EAAE,MAAM,aAAa,aAAa,SAAS,QAAQ;AAClD,SACE,CAAC,aAAa,OAAO,aAAa,MAAM,MACtC,CAAC,UAAU,KAAK,SAAS,QACtB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,iBAAiB,KAAK,KAAK,CAAC,MAAM,MAAM,MAAM;AAChD,aAAO,aAAa,OAAO;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC,EACH,EATC,UAUH,EAXC;AAaL,CACF,CACF,CACF,GACA;AAAA,EACE,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AACd,CACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@tamagui/card",
|
|
3
|
+
"version": "1.0.1-beta.100",
|
|
4
|
+
"sideEffects": [
|
|
5
|
+
"*.css"
|
|
6
|
+
],
|
|
7
|
+
"source": "src/index.ts",
|
|
8
|
+
"types": "./types/index.d.ts",
|
|
9
|
+
"main": "dist/cjs",
|
|
10
|
+
"module": "dist/esm",
|
|
11
|
+
"module:jsx": "dist/jsx",
|
|
12
|
+
"files": [
|
|
13
|
+
"src",
|
|
14
|
+
"types",
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build": "tamagui-build",
|
|
19
|
+
"watch": "tamagui-build --watch",
|
|
20
|
+
"clean": "tamagui-build clean",
|
|
21
|
+
"clean:build": "tamagui-build clean:build"
|
|
22
|
+
},
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"@tamagui/core": "^1.0.1-beta.100",
|
|
25
|
+
"@tamagui/create-context": "^1.0.1-beta.100",
|
|
26
|
+
"@tamagui/stacks": "^1.0.1-beta.100"
|
|
27
|
+
},
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"react": "*",
|
|
30
|
+
"react-dom": "*",
|
|
31
|
+
"react-native": "*"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@tamagui/build": "^1.0.1-beta.100",
|
|
35
|
+
"@types/react-native": "^0.67.3",
|
|
36
|
+
"react": "*",
|
|
37
|
+
"react-dom": "*",
|
|
38
|
+
"react-native": "*"
|
|
39
|
+
},
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"access": "public"
|
|
42
|
+
}
|
|
43
|
+
}
|
package/src/Card.tsx
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import {
|
|
2
|
+
GetProps,
|
|
3
|
+
SizeTokens,
|
|
4
|
+
isTamaguiElement,
|
|
5
|
+
styled,
|
|
6
|
+
themeable,
|
|
7
|
+
withStaticProperties,
|
|
8
|
+
} from '@tamagui/core'
|
|
9
|
+
import { ScopedProps, createContextScope } from '@tamagui/create-context'
|
|
10
|
+
import { ThemeableStack } from '@tamagui/stacks'
|
|
11
|
+
import React, { cloneElement, forwardRef } from 'react'
|
|
12
|
+
import { View } from 'react-native'
|
|
13
|
+
|
|
14
|
+
// bugfix esbuild strips react jsx: 'preserve'
|
|
15
|
+
React['createElement']
|
|
16
|
+
|
|
17
|
+
const CARD_NAME = 'CARD'
|
|
18
|
+
|
|
19
|
+
type CardContextValue = {
|
|
20
|
+
size?: SizeTokens
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const [createCardContext, createCardScope] = createContextScope(CARD_NAME)
|
|
24
|
+
const [CardProvider, useCardContext] = createCardContext<CardContextValue>(CARD_NAME)
|
|
25
|
+
|
|
26
|
+
export const CardFrame = styled(ThemeableStack, {
|
|
27
|
+
name: 'Card',
|
|
28
|
+
backgroundColor: '$background',
|
|
29
|
+
position: 'relative',
|
|
30
|
+
overflow: 'hidden',
|
|
31
|
+
|
|
32
|
+
variants: {
|
|
33
|
+
size: {
|
|
34
|
+
'...size': (val, { tokens }) => {
|
|
35
|
+
return {
|
|
36
|
+
borderRadius: tokens.radius[val] ?? val,
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
|
|
42
|
+
defaultVariants: {
|
|
43
|
+
size: '$4',
|
|
44
|
+
},
|
|
45
|
+
})
|
|
46
|
+
|
|
47
|
+
export const CardHeader = styled(ThemeableStack, {
|
|
48
|
+
name: 'CardHeader',
|
|
49
|
+
zIndex: 10,
|
|
50
|
+
backgroundColor: 'transparent',
|
|
51
|
+
marginBottom: 'auto',
|
|
52
|
+
|
|
53
|
+
variants: {
|
|
54
|
+
size: {
|
|
55
|
+
'...size': (val, { tokens }) => {
|
|
56
|
+
return {
|
|
57
|
+
padding: tokens.space[val] ?? val,
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
})
|
|
63
|
+
|
|
64
|
+
export const CardFooter = styled(CardHeader, {
|
|
65
|
+
name: 'CardFooter',
|
|
66
|
+
zIndex: 5,
|
|
67
|
+
flexDirection: 'row',
|
|
68
|
+
marginTop: 'auto',
|
|
69
|
+
marginBottom: 0,
|
|
70
|
+
})
|
|
71
|
+
|
|
72
|
+
export const CardBackground = styled(ThemeableStack, {
|
|
73
|
+
name: 'CardBackground',
|
|
74
|
+
zIndex: 0,
|
|
75
|
+
fullscreen: true,
|
|
76
|
+
overflow: 'hidden',
|
|
77
|
+
pointerEvents: 'none',
|
|
78
|
+
padding: 0,
|
|
79
|
+
})
|
|
80
|
+
|
|
81
|
+
export type CardHeaderProps = GetProps<typeof CardHeader>
|
|
82
|
+
export type CardFooterProps = GetProps<typeof CardFooter>
|
|
83
|
+
|
|
84
|
+
export type CardProps = GetProps<typeof CardFrame>
|
|
85
|
+
|
|
86
|
+
export const Card = withStaticProperties(
|
|
87
|
+
CardFrame.extractable(
|
|
88
|
+
themeable(
|
|
89
|
+
forwardRef<HTMLElement | View, ScopedProps<CardProps, 'Card'>>(
|
|
90
|
+
({ size, __scopeCard, children, ...props }, ref) => {
|
|
91
|
+
return (
|
|
92
|
+
<CardProvider scope={__scopeCard} size={size}>
|
|
93
|
+
<CardFrame ref={ref} {...props}>
|
|
94
|
+
{React.Children.map(children, (child) => {
|
|
95
|
+
if (isTamaguiElement(child) && !child.props.size) {
|
|
96
|
+
return cloneElement(child, {
|
|
97
|
+
size,
|
|
98
|
+
})
|
|
99
|
+
}
|
|
100
|
+
return child
|
|
101
|
+
})}
|
|
102
|
+
</CardFrame>
|
|
103
|
+
</CardProvider>
|
|
104
|
+
)
|
|
105
|
+
}
|
|
106
|
+
)
|
|
107
|
+
)
|
|
108
|
+
),
|
|
109
|
+
{
|
|
110
|
+
Header: CardHeader,
|
|
111
|
+
Footer: CardFooter,
|
|
112
|
+
Background: CardBackground,
|
|
113
|
+
}
|
|
114
|
+
)
|
|
115
|
+
|
|
116
|
+
export { createCardScope, useCardContext }
|
package/src/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Card'
|