@tamagui/card 1.0.1-beta.99 → 1.0.1-rc.0
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 +33 -58
- package/dist/cjs/Card.js.map +3 -3
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/Card.js +27 -57
- package/dist/esm/Card.js.map +2 -2
- package/dist/esm/index.js +0 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/jsx/Card.js +24 -27
- package/dist/jsx/Card.js.map +2 -2
- package/dist/jsx/index.js +0 -0
- package/dist/jsx/index.js.map +1 -1
- package/package.json +19 -10
- package/src/Card.tsx +26 -31
- package/types/Card.d.ts +589 -598
- package/types/index.d.ts +0 -0
- package/types/Card.d.ts.map +0 -1
- package/types/index.d.ts.map +0 -1
package/dist/cjs/Card.js
CHANGED
|
@@ -1,35 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
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
8
|
var __export = (target, all) => {
|
|
34
9
|
for (var name in all)
|
|
35
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -42,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
42
17
|
}
|
|
43
18
|
return to;
|
|
44
19
|
};
|
|
45
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
46
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
47
25
|
var Card_exports = {};
|
|
48
26
|
__export(Card_exports, {
|
|
@@ -50,19 +28,13 @@ __export(Card_exports, {
|
|
|
50
28
|
CardBackground: () => CardBackground,
|
|
51
29
|
CardFooter: () => CardFooter,
|
|
52
30
|
CardFrame: () => CardFrame,
|
|
53
|
-
CardHeader: () => CardHeader
|
|
54
|
-
createCardScope: () => createCardScope,
|
|
55
|
-
useCardContext: () => useCardContext
|
|
31
|
+
CardHeader: () => CardHeader
|
|
56
32
|
});
|
|
57
33
|
module.exports = __toCommonJS(Card_exports);
|
|
34
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
58
35
|
var import_core = require("@tamagui/core");
|
|
59
|
-
var import_create_context = require("@tamagui/create-context");
|
|
60
36
|
var import_stacks = require("@tamagui/stacks");
|
|
61
37
|
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
38
|
const CardFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
67
39
|
name: "Card",
|
|
68
40
|
backgroundColor: "$background",
|
|
@@ -111,34 +83,37 @@ const CardBackground = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
|
111
83
|
pointerEvents: "none",
|
|
112
84
|
padding: 0
|
|
113
85
|
});
|
|
114
|
-
const Card = (0, import_core.withStaticProperties)(
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
})
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
86
|
+
const Card = (0, import_core.withStaticProperties)(
|
|
87
|
+
CardFrame.extractable(
|
|
88
|
+
(0, import_react.forwardRef)(
|
|
89
|
+
({ size, __scopeCard, children, ...props }, ref) => {
|
|
90
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardFrame, {
|
|
91
|
+
ref,
|
|
92
|
+
...props,
|
|
93
|
+
children: import_react.default.Children.map(children, (child) => {
|
|
94
|
+
if ((0, import_core.isTamaguiElement)(child) && !child.props.size) {
|
|
95
|
+
return (0, import_react.cloneElement)(child, {
|
|
96
|
+
size
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
return child;
|
|
100
|
+
})
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
)
|
|
104
|
+
),
|
|
105
|
+
{
|
|
106
|
+
Header: CardHeader,
|
|
107
|
+
Footer: CardFooter,
|
|
108
|
+
Background: CardBackground
|
|
109
|
+
}
|
|
110
|
+
);
|
|
134
111
|
// Annotate the CommonJS export names for ESM import in node:
|
|
135
112
|
0 && (module.exports = {
|
|
136
113
|
Card,
|
|
137
114
|
CardBackground,
|
|
138
115
|
CardFooter,
|
|
139
116
|
CardFrame,
|
|
140
|
-
CardHeader
|
|
141
|
-
createCardScope,
|
|
142
|
-
useCardContext
|
|
117
|
+
CardHeader
|
|
143
118
|
});
|
|
144
119
|
//# sourceMappingURL=Card.js.map
|
package/dist/cjs/Card.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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//
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
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// 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: '$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 } 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>\n\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n CardFrame.extractable(\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 Header: CardHeader,\n Footer: CardFooter,\n Background: CardBackground,\n }\n)\n\n// export { createCardScope, useCardContext }\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwFU;AAxFV,kBAOO;AAEP,oBAA+B;AAC/B,mBAAgD;AAYzC,MAAM,gBAAY,oBAAO,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,OAAO,MAAM;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,iBAAa,oBAAO,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,OAAO,MAAM;AAC9B,eAAO;AAAA,UACL,SAAS,OAAO,MAAM,QAAQ;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,iBAAa,oBAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc;AAChB,CAAC;AAEM,MAAM,qBAAiB,oBAAO,8BAAgB;AAAA,EACnD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAAS;AACX,CAAC;AAOM,MAAM,WAAO;AAAA,EAClB,UAAU;AAAA,QACR;AAAA,MACE,CAAC,EAAE,MAAM,aAAa,aAAa,MAAM,GAAG,QAAQ;AAClD,eAEE,4CAAC;AAAA,UAAU;AAAA,UAAW,GAAG;AAAA,UACtB,uBAAAA,QAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,oBAAI,8BAAiB,KAAK,KAAK,CAAC,MAAM,MAAM,MAAM;AAChD,yBAAO,2BAAa,OAAO;AAAA,gBACzB;AAAA,cACF,CAAC;AAAA,YACH;AACA,mBAAO;AAAA,UACT,CAAC;AAAA,SACH;AAAA,MAGJ;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AACF;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
package/dist/cjs/index.js.map
CHANGED
package/dist/esm/Card.js
CHANGED
|
@@ -1,44 +1,11 @@
|
|
|
1
|
-
|
|
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
|
-
};
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
29
2
|
import {
|
|
30
3
|
isTamaguiElement,
|
|
31
4
|
styled,
|
|
32
|
-
themeable,
|
|
33
5
|
withStaticProperties
|
|
34
6
|
} from "@tamagui/core";
|
|
35
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
36
7
|
import { ThemeableStack } from "@tamagui/stacks";
|
|
37
8
|
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
9
|
const CardFrame = styled(ThemeableStack, {
|
|
43
10
|
name: "Card",
|
|
44
11
|
backgroundColor: "$background",
|
|
@@ -87,33 +54,36 @@ const CardBackground = styled(ThemeableStack, {
|
|
|
87
54
|
pointerEvents: "none",
|
|
88
55
|
padding: 0
|
|
89
56
|
});
|
|
90
|
-
const Card = withStaticProperties(
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
})
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
57
|
+
const Card = withStaticProperties(
|
|
58
|
+
CardFrame.extractable(
|
|
59
|
+
forwardRef(
|
|
60
|
+
({ size, __scopeCard, children, ...props }, ref) => {
|
|
61
|
+
return /* @__PURE__ */ jsx(CardFrame, {
|
|
62
|
+
ref,
|
|
63
|
+
...props,
|
|
64
|
+
children: React.Children.map(children, (child) => {
|
|
65
|
+
if (isTamaguiElement(child) && !child.props.size) {
|
|
66
|
+
return cloneElement(child, {
|
|
67
|
+
size
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
return child;
|
|
71
|
+
})
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
),
|
|
76
|
+
{
|
|
77
|
+
Header: CardHeader,
|
|
78
|
+
Footer: CardFooter,
|
|
79
|
+
Background: CardBackground
|
|
80
|
+
}
|
|
81
|
+
);
|
|
110
82
|
export {
|
|
111
83
|
Card,
|
|
112
84
|
CardBackground,
|
|
113
85
|
CardFooter,
|
|
114
86
|
CardFrame,
|
|
115
|
-
CardHeader
|
|
116
|
-
createCardScope,
|
|
117
|
-
useCardContext
|
|
87
|
+
CardHeader
|
|
118
88
|
};
|
|
119
89
|
//# sourceMappingURL=Card.js.map
|
package/dist/esm/Card.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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//
|
|
5
|
-
"mappings": "
|
|
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// 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: '$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 } 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>\n\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n CardFrame.extractable(\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 Header: CardHeader,\n Footer: CardFooter,\n Background: CardBackground,\n }\n)\n\n// export { createCardScope, useCardContext }\n"],
|
|
5
|
+
"mappings": "AAwFU;AAxFV;AAAA,EAGE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAC/B,OAAO,SAAS,cAAc,kBAAkB;AAYzC,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,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,OAAO,MAAM;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;AAAA,EAClB,UAAU;AAAA,IACR;AAAA,MACE,CAAC,EAAE,MAAM,aAAa,aAAa,MAAM,GAAG,QAAQ;AAClD,eAEE,oBAAC;AAAA,UAAU;AAAA,UAAW,GAAG;AAAA,UACtB,gBAAM,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;AAAA,SACH;AAAA,MAGJ;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
File without changes
|
package/dist/esm/index.js.map
CHANGED
package/dist/jsx/Card.js
CHANGED
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
isTamaguiElement,
|
|
3
3
|
styled,
|
|
4
|
-
themeable,
|
|
5
4
|
withStaticProperties
|
|
6
5
|
} from "@tamagui/core";
|
|
7
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
8
6
|
import { ThemeableStack } from "@tamagui/stacks";
|
|
9
7
|
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
8
|
const CardFrame = styled(ThemeableStack, {
|
|
15
9
|
name: "Card",
|
|
16
10
|
backgroundColor: "$background",
|
|
@@ -19,9 +13,8 @@ const CardFrame = styled(ThemeableStack, {
|
|
|
19
13
|
variants: {
|
|
20
14
|
size: {
|
|
21
15
|
"...size": (val, { tokens }) => {
|
|
22
|
-
var _a;
|
|
23
16
|
return {
|
|
24
|
-
borderRadius:
|
|
17
|
+
borderRadius: tokens.radius[val] ?? val
|
|
25
18
|
};
|
|
26
19
|
}
|
|
27
20
|
}
|
|
@@ -38,9 +31,8 @@ const CardHeader = styled(ThemeableStack, {
|
|
|
38
31
|
variants: {
|
|
39
32
|
size: {
|
|
40
33
|
"...size": (val, { tokens }) => {
|
|
41
|
-
var _a;
|
|
42
34
|
return {
|
|
43
|
-
padding:
|
|
35
|
+
padding: tokens.space[val] ?? val
|
|
44
36
|
};
|
|
45
37
|
}
|
|
46
38
|
}
|
|
@@ -61,27 +53,32 @@ const CardBackground = styled(ThemeableStack, {
|
|
|
61
53
|
pointerEvents: "none",
|
|
62
54
|
padding: 0
|
|
63
55
|
});
|
|
64
|
-
const Card = withStaticProperties(
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
56
|
+
const Card = withStaticProperties(
|
|
57
|
+
CardFrame.extractable(
|
|
58
|
+
forwardRef(
|
|
59
|
+
({ size, __scopeCard, children, ...props }, ref) => {
|
|
60
|
+
return <CardFrame ref={ref} {...props}>{React.Children.map(children, (child) => {
|
|
61
|
+
if (isTamaguiElement(child) && !child.props.size) {
|
|
62
|
+
return cloneElement(child, {
|
|
63
|
+
size
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
return child;
|
|
67
|
+
})}</CardFrame>;
|
|
68
|
+
}
|
|
69
|
+
)
|
|
70
|
+
),
|
|
71
|
+
{
|
|
72
|
+
Header: CardHeader,
|
|
73
|
+
Footer: CardFooter,
|
|
74
|
+
Background: CardBackground
|
|
75
|
+
}
|
|
76
|
+
);
|
|
78
77
|
export {
|
|
79
78
|
Card,
|
|
80
79
|
CardBackground,
|
|
81
80
|
CardFooter,
|
|
82
81
|
CardFrame,
|
|
83
|
-
CardHeader
|
|
84
|
-
createCardScope,
|
|
85
|
-
useCardContext
|
|
82
|
+
CardHeader
|
|
86
83
|
};
|
|
87
84
|
//# sourceMappingURL=Card.js.map
|
package/dist/jsx/Card.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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//
|
|
5
|
-
"mappings": "AAAA;AAAA;AAAA;AAAA;AAAA
|
|
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// 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: '$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 } 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>\n\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n CardFrame.extractable(\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 Header: CardHeader,\n Footer: CardFooter,\n Background: CardBackground,\n }\n)\n\n// export { createCardScope, useCardContext }\n"],
|
|
5
|
+
"mappings": "AAAA;AAAA,EAGE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAC/B,OAAO,SAAS,cAAc,kBAAkB;AAYzC,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,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,OAAO,MAAM;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;AAAA,EAClB,UAAU;AAAA,IACR;AAAA,MACE,CAAC,EAAE,MAAM,aAAa,aAAa,MAAM,GAAG,QAAQ;AAClD,eAEE,CAAC,UAAU,KAAK,SAAS,QACtB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,cAAI,iBAAiB,KAAK,KAAK,CAAC,MAAM,MAAM,MAAM;AAChD,mBAAO,aAAa,OAAO;AAAA,cACzB;AAAA,YACF,CAAC;AAAA,UACH;AACA,iBAAO;AAAA,QACT,CAAC,EACH,EATC;AAAA,MAYL;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/index.js
CHANGED
|
File without changes
|
package/dist/jsx/index.js.map
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/card",
|
|
3
|
-
"version": "1.0.1-
|
|
3
|
+
"version": "1.0.1-rc.0",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -17,24 +17,33 @@
|
|
|
17
17
|
"scripts": {
|
|
18
18
|
"build": "tamagui-build",
|
|
19
19
|
"watch": "tamagui-build --watch",
|
|
20
|
+
"lint": "eslint src",
|
|
21
|
+
"lint:fix": "yarn lint --fix",
|
|
20
22
|
"clean": "tamagui-build clean",
|
|
21
23
|
"clean:build": "tamagui-build clean:build"
|
|
22
24
|
},
|
|
25
|
+
"exports": {
|
|
26
|
+
"./package.json": "./package.json",
|
|
27
|
+
".": {
|
|
28
|
+
"import": "./dist/esm/index.js",
|
|
29
|
+
"require": "./dist/cjs/index.js"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
23
32
|
"dependencies": {
|
|
24
|
-
"@tamagui/core": "^1.0.1-
|
|
25
|
-
"@tamagui/create-context": "^1.0.1-
|
|
26
|
-
"@tamagui/stacks": "^1.0.1-
|
|
33
|
+
"@tamagui/core": "^1.0.1-rc.0",
|
|
34
|
+
"@tamagui/create-context": "^1.0.1-rc.0",
|
|
35
|
+
"@tamagui/stacks": "^1.0.1-rc.0"
|
|
27
36
|
},
|
|
28
37
|
"peerDependencies": {
|
|
29
|
-
"react": "
|
|
30
|
-
"react-dom": "
|
|
38
|
+
"react": ">=18",
|
|
39
|
+
"react-dom": ">=18",
|
|
31
40
|
"react-native": "*"
|
|
32
41
|
},
|
|
33
42
|
"devDependencies": {
|
|
34
|
-
"@tamagui/build": "^1.0.1-
|
|
35
|
-
"@types/react-native": "^0.
|
|
36
|
-
"react": "
|
|
37
|
-
"react-dom": "
|
|
43
|
+
"@tamagui/build": "^1.0.1-rc.0",
|
|
44
|
+
"@types/react-native": "^0.69.2",
|
|
45
|
+
"react": ">=18",
|
|
46
|
+
"react-dom": ">=18",
|
|
38
47
|
"react-native": "*"
|
|
39
48
|
},
|
|
40
49
|
"publishConfig": {
|
package/src/Card.tsx
CHANGED
|
@@ -11,17 +11,14 @@ import { ThemeableStack } from '@tamagui/stacks'
|
|
|
11
11
|
import React, { cloneElement, forwardRef } from 'react'
|
|
12
12
|
import { View } from 'react-native'
|
|
13
13
|
|
|
14
|
-
//
|
|
15
|
-
React['createElement']
|
|
14
|
+
// const CARD_NAME = 'CARD'
|
|
16
15
|
|
|
17
|
-
|
|
16
|
+
// type CardContextValue = {
|
|
17
|
+
// size?: SizeTokens
|
|
18
|
+
// }
|
|
18
19
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
const [createCardContext, createCardScope] = createContextScope(CARD_NAME)
|
|
24
|
-
const [CardProvider, useCardContext] = createCardContext<CardContextValue>(CARD_NAME)
|
|
20
|
+
// const [createCardContext, createCardScope] = createContextScope(CARD_NAME)
|
|
21
|
+
// const [CardProvider, useCardContext] = createCardContext<CardContextValue>(CARD_NAME)
|
|
25
22
|
|
|
26
23
|
export const CardFrame = styled(ThemeableStack, {
|
|
27
24
|
name: 'Card',
|
|
@@ -37,7 +34,7 @@ export const CardFrame = styled(ThemeableStack, {
|
|
|
37
34
|
}
|
|
38
35
|
},
|
|
39
36
|
},
|
|
40
|
-
},
|
|
37
|
+
} as const,
|
|
41
38
|
|
|
42
39
|
defaultVariants: {
|
|
43
40
|
size: '$4',
|
|
@@ -58,7 +55,7 @@ export const CardHeader = styled(ThemeableStack, {
|
|
|
58
55
|
}
|
|
59
56
|
},
|
|
60
57
|
},
|
|
61
|
-
},
|
|
58
|
+
} as const,
|
|
62
59
|
})
|
|
63
60
|
|
|
64
61
|
export const CardFooter = styled(CardHeader, {
|
|
@@ -85,25 +82,23 @@ export type CardProps = GetProps<typeof CardFrame>
|
|
|
85
82
|
|
|
86
83
|
export const Card = withStaticProperties(
|
|
87
84
|
CardFrame.extractable(
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
(
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
)
|
|
85
|
+
forwardRef<HTMLElement | View, ScopedProps<CardProps, 'Card'>>(
|
|
86
|
+
({ size, __scopeCard, children, ...props }, ref) => {
|
|
87
|
+
return (
|
|
88
|
+
// <CardProvider scope={__scopeCard} size={size}>
|
|
89
|
+
<CardFrame ref={ref} {...props}>
|
|
90
|
+
{React.Children.map(children, (child) => {
|
|
91
|
+
if (isTamaguiElement(child) && !child.props.size) {
|
|
92
|
+
return cloneElement(child, {
|
|
93
|
+
size,
|
|
94
|
+
})
|
|
95
|
+
}
|
|
96
|
+
return child
|
|
97
|
+
})}
|
|
98
|
+
</CardFrame>
|
|
99
|
+
// </CardProvider>
|
|
100
|
+
)
|
|
101
|
+
}
|
|
107
102
|
)
|
|
108
103
|
),
|
|
109
104
|
{
|
|
@@ -113,4 +108,4 @@ export const Card = withStaticProperties(
|
|
|
113
108
|
}
|
|
114
109
|
)
|
|
115
110
|
|
|
116
|
-
export { createCardScope, useCardContext }
|
|
111
|
+
// export { createCardScope, useCardContext }
|