@tamagui/stacks 1.0.1-beta.23 → 1.0.1-beta.26
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/SizableStack.js +3 -0
- package/dist/cjs/SizableStack.js.map +2 -2
- package/dist/cjs/Stacks.js +2 -0
- package/dist/cjs/Stacks.js.map +2 -2
- package/dist/cjs/ThemeableSizableStack.js +3 -6
- package/dist/cjs/ThemeableSizableStack.js.map +2 -2
- package/dist/cjs/index.js +12 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/variants.js +77 -0
- package/dist/cjs/variants.js.map +2 -2
- package/dist/esm/SizableStack.js +4 -1
- package/dist/esm/SizableStack.js.map +2 -2
- package/dist/esm/Stacks.js +1 -0
- package/dist/esm/Stacks.js.map +2 -2
- package/dist/esm/ThemeableSizableStack.js +4 -7
- package/dist/esm/ThemeableSizableStack.js.map +2 -2
- package/dist/esm/index.js +4 -0
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/variants.js +63 -0
- package/dist/esm/variants.js.map +2 -2
- package/dist/jsx/SizableStack.js +4 -1
- package/dist/jsx/Stacks.js +1 -0
- package/dist/jsx/ThemeableSizableStack.js +4 -7
- package/dist/jsx/index.js +4 -0
- package/dist/jsx/variants.js +63 -0
- package/package.json +4 -4
- package/types/SizableStack.d.ts +15 -3
- package/types/SizableStack.d.ts.map +1 -1
- package/types/Stacks.d.ts +2 -1
- package/types/Stacks.d.ts.map +1 -1
- package/types/ThemeableSizableStack.d.ts +15 -7
- package/types/ThemeableSizableStack.d.ts.map +1 -1
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
- package/types/variants.d.ts +232 -0
- package/types/variants.d.ts.map +1 -1
package/dist/cjs/SizableStack.js
CHANGED
|
@@ -33,6 +33,9 @@ const SizableStack = (0, import_core.styled)(import_Stacks.YStack, {
|
|
|
33
33
|
hoverable: import_variants.hoverable,
|
|
34
34
|
pressable: import_variants.pressable,
|
|
35
35
|
focusable: import_variants.focusable,
|
|
36
|
+
circular: import_variants.circular,
|
|
37
|
+
elevate: import_variants.elevate,
|
|
38
|
+
bordered: import_variants.bordered,
|
|
36
39
|
size: {
|
|
37
40
|
"...size": import_core.getButtonSize
|
|
38
41
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SizableStack.tsx"],
|
|
4
|
-
"sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { focusable, hoverable, pressable } from './variants'\n\nexport const SizableStack = styled(YStack, {\n name: 'SizableStack',\n backgroundColor: '$background',\n flexDirection: 'row',\n flexShrink: 1,\n\n variants: {\n // allows the type to come in for use in size\n fontFamily: () => ({}),\n hoverable,\n pressable,\n focusable,\n size: {\n '...size': getButtonSize,\n },\n },\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgD;AAEhD,oBAAuB;AACvB,
|
|
4
|
+
"sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusable, hoverable, pressable } from './variants'\n\nexport const SizableStack = styled(YStack, {\n name: 'SizableStack',\n backgroundColor: '$background',\n flexDirection: 'row',\n flexShrink: 1,\n\n variants: {\n // allows the type to come in for use in size\n fontFamily: () => ({}),\n\n hoverable,\n pressable,\n focusable,\n circular,\n elevate,\n bordered,\n\n size: {\n '...size': getButtonSize,\n },\n },\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgD;AAEhD,oBAAuB;AACvB,sBAA6E;AAEtE,MAAM,eAAe,wBAAO,sBAAQ;AAAA,EACzC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/Stacks.js
CHANGED
|
@@ -21,6 +21,7 @@ __export(Stacks_exports, {
|
|
|
21
21
|
XStack: () => XStack,
|
|
22
22
|
YStack: () => YStack,
|
|
23
23
|
ZStack: () => ZStack,
|
|
24
|
+
getElevation: () => getElevation,
|
|
24
25
|
getSizedElevation: () => getSizedElevation
|
|
25
26
|
});
|
|
26
27
|
module.exports = __toCommonJS(Stacks_exports);
|
|
@@ -90,6 +91,7 @@ const getSizedElevation = /* @__PURE__ */ __name((val, { theme, tokens }) => {
|
|
|
90
91
|
XStack,
|
|
91
92
|
YStack,
|
|
92
93
|
ZStack,
|
|
94
|
+
getElevation,
|
|
93
95
|
getSizedElevation
|
|
94
96
|
});
|
|
95
97
|
//# sourceMappingURL=Stacks.js.map
|
package/dist/cjs/Stacks.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Stacks.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n GetProps,\n SizeTokens,\n SizeVariantSpreadFunction,\n Stack,\n StackProps,\n VariantSpreadExtras,\n getVariableValue,\n isVariable,\n styled,\n} from '@tamagui/core'\n\nexport type YStackProps = GetProps<typeof YStack>\nexport type XStackProps = GetProps<typeof YStack>\nexport type ZStackProps = GetProps<typeof ZStack>\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUO;
|
|
4
|
+
"sourcesContent": ["import {\n GetProps,\n SizeTokens,\n SizeVariantSpreadFunction,\n Stack,\n StackProps,\n VariantSpreadExtras,\n getVariableValue,\n isVariable,\n styled,\n} from '@tamagui/core'\n\nexport type YStackProps = GetProps<typeof YStack>\nexport type XStackProps = GetProps<typeof YStack>\nexport type ZStackProps = GetProps<typeof ZStack>\n\nexport const getElevation: SizeVariantSpreadFunction<StackProps> = (size, extras) => {\n const { tokens } = extras\n const token = tokens.size[size]\n const sizeNum = (isVariable(token) ? +token.val : size) as number\n // TODO this could be configurable with require('tamagui').configure({ elevation: () => {} })\n return getSizedElevation(sizeNum, extras)\n}\n\nconst fullscreenStyle = {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n} as const\n\nexport const YStack = styled(Stack, {\n flexDirection: 'column',\n name: 'YStack',\n variants: {\n fullscreen: {\n true: fullscreenStyle,\n },\n elevation: {\n '...size': getElevation,\n },\n },\n})\n\nexport const XStack = styled(Stack, {\n flexDirection: 'row',\n name: 'XStack',\n variants: {\n fullscreen: {\n true: fullscreenStyle,\n },\n elevation: {\n '...size': getElevation,\n },\n },\n})\n\nexport const ZStack = styled(\n YStack,\n {\n name: 'ZStack',\n position: 'relative',\n },\n {\n neverFlatten: true,\n isZStack: true,\n }\n)\n\nexport const getSizedElevation = (\n val: SizeTokens | number | boolean,\n { theme, tokens }: VariantSpreadExtras<any>\n) => {\n const num =\n val === false\n ? 0\n : val === true\n ? // handles true\n (() => {\n const val = getVariableValue(tokens.size['true'])\n if (typeof val === 'number') {\n return val\n }\n return 10\n })()\n : +val\n const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)]\n const shadow = {\n shadowColor: theme.shadowColor,\n shadowRadius,\n shadowOffset: { height, width: 0 },\n }\n return shadow\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUO;AAMA,MAAM,eAAsD,wBAAC,MAAM,WAAW;AACnF,QAAM,EAAE,WAAW;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,4BAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAElD,SAAO,kBAAkB,SAAS,MAAM;AAC1C,GANmE;AAQnE,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,MAAM,SAAS,wBAAO,mBAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,SAAS,wBAAO,mBAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,SAAS,wBACpB,QACA;AAAA,EACE,MAAM;AAAA,EACN,UAAU;AACZ,GACA;AAAA,EACE,cAAc;AAAA,EACd,UAAU;AACZ,CACF;AAEO,MAAM,oBAAoB,wBAC/B,KACA,EAAE,OAAO,aACN;AACH,QAAM,MACJ,QAAQ,QACJ,IACA,QAAQ,OAEP,OAAM;AACL,UAAM,OAAM,kCAAiB,OAAO,KAAK,OAAO;AAChD,QAAI,OAAO,SAAQ,UAAU;AAC3B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,IACH,CAAC;AACP,QAAM,CAAC,QAAQ,gBAAgB,CAAC,KAAK,MAAM,MAAM,IAAI,CAAC,GAAG,KAAK,MAAM,MAAM,IAAI,CAAC,CAAC;AAChF,QAAM,SAAS;AAAA,IACb,aAAa,MAAM;AAAA,IACnB;AAAA,IACA,cAAc,EAAE,QAAQ,OAAO,EAAE;AAAA,EACnC;AACA,SAAO;AACT,GAxBiC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,15 +33,12 @@ const ThemeableSizableStack = (0, import_core.styled)(import_Stacks.YStack, {
|
|
|
33
33
|
hoverable: import_variants.hoverable,
|
|
34
34
|
pressable: import_variants.pressable,
|
|
35
35
|
focusable: import_variants.focusable,
|
|
36
|
+
circular: import_variants.circular,
|
|
37
|
+
elevate: import_variants.elevate,
|
|
38
|
+
bordered: import_variants.bordered,
|
|
36
39
|
size: {
|
|
37
40
|
"...size": import_core.getButtonSize
|
|
38
41
|
},
|
|
39
|
-
bordered: {
|
|
40
|
-
true: {
|
|
41
|
-
borderWidth: 1,
|
|
42
|
-
borderColor: "$borderColor"
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
42
|
disabled: {
|
|
46
43
|
true: {
|
|
47
44
|
opacity: 0.45,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ThemeableSizableStack.tsx"],
|
|
4
|
-
"sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { focusable, hoverable, pressable } from './variants'\n\nexport const ThemeableSizableStack = styled(YStack, {\n name: 'SizableStack',\n backgroundColor: '$background',\n flexDirection: 'row',\n flexShrink: 1,\n\n variants: {\n // allows the type to come in for use in size\n fontFamily: () => ({}),\n hoverable,\n pressable,\n focusable,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgD;AAEhD,oBAAuB;AACvB,
|
|
4
|
+
"sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusable, hoverable, pressable } from './variants'\n\nexport const ThemeableSizableStack = styled(YStack, {\n name: 'SizableStack',\n backgroundColor: '$background',\n flexDirection: 'row',\n flexShrink: 1,\n\n variants: {\n // allows the type to come in for use in size\n fontFamily: () => ({}),\n\n hoverable,\n pressable,\n focusable,\n circular,\n elevate,\n bordered,\n\n size: {\n '...size': getButtonSize,\n },\n\n disabled: {\n true: {\n // pointerEvents: 'none',\n opacity: 0.45,\n backgroundColor: '$background',\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n transparent: {\n true: {\n backgroundColor: 'transparent',\n },\n },\n\n chromeless: {\n true: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n shadowColor: 'transparent',\n },\n },\n },\n})\n\nexport type ThemeableSizableStackProps = GetProps<typeof ThemeableSizableStack>\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgD;AAEhD,oBAAuB;AACvB,sBAA6E;AAEtE,MAAM,wBAAwB,wBAAO,sBAAQ;AAAA,EAClD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,QAEJ,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -2,6 +2,10 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
5
9
|
var __copyProps = (to, from, except, desc) => {
|
|
6
10
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
7
11
|
for (let key of __getOwnPropNames(from))
|
|
@@ -13,8 +17,16 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
13
17
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
14
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
19
|
var src_exports = {};
|
|
20
|
+
__export(src_exports, {
|
|
21
|
+
getCircleSize: () => import_variants.getCircleSize
|
|
22
|
+
});
|
|
16
23
|
module.exports = __toCommonJS(src_exports);
|
|
17
24
|
__reExport(src_exports, require("./Stacks"), module.exports);
|
|
18
25
|
__reExport(src_exports, require("./SizableStack"), module.exports);
|
|
19
26
|
__reExport(src_exports, require("./ThemeableSizableStack"), module.exports);
|
|
27
|
+
var import_variants = require("./variants");
|
|
28
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
29
|
+
0 && (module.exports = {
|
|
30
|
+
getCircleSize
|
|
31
|
+
});
|
|
20
32
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export * from './Stacks'\nexport * from './SizableStack'\nexport * from './ThemeableSizableStack'\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export * from './Stacks'\nexport * from './SizableStack'\nexport * from './ThemeableSizableStack'\nexport { getCircleSize } from './variants'\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,2BADd;AAEA,wBAAc,oCAFd;AAGA,sBAA8B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/variants.js
CHANGED
|
@@ -1,7 +1,22 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
4
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
5
20
|
var __export = (target, all) => {
|
|
6
21
|
for (var name in all)
|
|
7
22
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -17,11 +32,63 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
32
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
33
|
var variants_exports = {};
|
|
19
34
|
__export(variants_exports, {
|
|
35
|
+
bordered: () => bordered,
|
|
36
|
+
circular: () => circular,
|
|
37
|
+
elevate: () => elevate,
|
|
20
38
|
focusable: () => focusable,
|
|
39
|
+
getCircleSize: () => getCircleSize,
|
|
21
40
|
hoverable: () => hoverable,
|
|
22
41
|
pressable: () => pressable
|
|
23
42
|
});
|
|
24
43
|
module.exports = __toCommonJS(variants_exports);
|
|
44
|
+
var import_core = require("@tamagui/core");
|
|
45
|
+
var import_Stacks = require("./Stacks");
|
|
46
|
+
function getCircleSize(size, extras) {
|
|
47
|
+
const sizeVal = size ?? "$4";
|
|
48
|
+
const scale = (0, import_core.getSizeScaledToFont)(sizeVal, import_core.buttonScaling, extras);
|
|
49
|
+
return scale.minHeight;
|
|
50
|
+
}
|
|
51
|
+
__name(getCircleSize, "getCircleSize");
|
|
52
|
+
const elevate = {
|
|
53
|
+
true: (_, extras) => {
|
|
54
|
+
return (0, import_Stacks.getElevation)(extras.props["size"], extras);
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
const bordered = /* @__PURE__ */ __name((val, { props }) => {
|
|
58
|
+
return __spreadValues(__spreadValues(__spreadValues({
|
|
59
|
+
borderWidth: typeof val === "number" ? val : 1,
|
|
60
|
+
borderColor: "$borderColor"
|
|
61
|
+
}, props.hoverable && {
|
|
62
|
+
hoverStyle: {
|
|
63
|
+
borderColor: "$borderColorHover"
|
|
64
|
+
}
|
|
65
|
+
}), props.pressable && {
|
|
66
|
+
pressStyle: {
|
|
67
|
+
borderColor: "$borderColorPress"
|
|
68
|
+
}
|
|
69
|
+
}), props.focusable && {
|
|
70
|
+
focusStyle: {
|
|
71
|
+
borderColor: "$borderColorFocus"
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
}, "bordered");
|
|
75
|
+
const circular = {
|
|
76
|
+
true: (_, extras) => {
|
|
77
|
+
const { props } = extras;
|
|
78
|
+
const size = getCircleSize(props.size, extras);
|
|
79
|
+
return {
|
|
80
|
+
width: size,
|
|
81
|
+
height: size,
|
|
82
|
+
maxWidth: size,
|
|
83
|
+
maxHeight: size,
|
|
84
|
+
minWidth: size,
|
|
85
|
+
minHeight: size,
|
|
86
|
+
borderRadius: 1e5,
|
|
87
|
+
paddingVertical: 0,
|
|
88
|
+
paddingHorizontal: 0
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
};
|
|
25
92
|
const hoverable = {
|
|
26
93
|
true: {
|
|
27
94
|
hoverStyle: {
|
|
@@ -56,11 +123,21 @@ const focusable = {
|
|
|
56
123
|
backgroundColor: "$backgroundFocus",
|
|
57
124
|
borderColor: "$borderColorFocus"
|
|
58
125
|
}
|
|
126
|
+
},
|
|
127
|
+
false: {
|
|
128
|
+
focusStyle: {
|
|
129
|
+
backgroundColor: "$background",
|
|
130
|
+
borderColor: "$borderColor"
|
|
131
|
+
}
|
|
59
132
|
}
|
|
60
133
|
};
|
|
61
134
|
// Annotate the CommonJS export names for ESM import in node:
|
|
62
135
|
0 && (module.exports = {
|
|
136
|
+
bordered,
|
|
137
|
+
circular,
|
|
138
|
+
elevate,
|
|
63
139
|
focusable,
|
|
140
|
+
getCircleSize,
|
|
64
141
|
hoverable,
|
|
65
142
|
pressable
|
|
66
143
|
});
|
package/dist/cjs/variants.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/variants.tsx"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { ScaleVariantExtras, SizeTokens, buttonScaling, getSizeScaledToFont } from '@tamagui/core'\n\nimport { getElevation } from './Stacks'\n\nexport function getCircleSize(size: SizeTokens, extras: ScaleVariantExtras) {\n const sizeVal = size ?? '$4'\n const scale = getSizeScaledToFont(sizeVal, buttonScaling, extras)\n return scale.minHeight\n}\n\nexport const elevate = {\n true: (_, extras) => {\n return getElevation(extras.props['size'], extras)\n },\n}\n\nexport const bordered = (val: boolean | number, { props }) => {\n return {\n // TODO size it with size in '...size'\n borderWidth: typeof val === 'number' ? val : 1,\n borderColor: '$borderColor',\n\n ...(props.hoverable && {\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n }),\n\n ...(props.pressable && {\n pressStyle: {\n borderColor: '$borderColorPress',\n },\n }),\n\n ...(props.focusable && {\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n }),\n }\n}\n\nexport const circular = {\n true: (_, extras) => {\n const { props } = extras\n const size = getCircleSize(props.size, extras)\n return {\n width: size,\n height: size,\n maxWidth: size,\n maxHeight: size,\n minWidth: size,\n minHeight: size,\n borderRadius: 100_000,\n paddingVertical: 0,\n paddingHorizontal: 0,\n }\n },\n}\n\nexport const hoverable = {\n true: {\n hoverStyle: {\n backgroundColor: '$backgroundHover',\n borderColor: '$borderColorHover',\n },\n },\n false: {\n hoverStyle: {\n backgroundColor: '$background',\n borderColor: '$borderColor',\n },\n },\n}\n\nexport const pressable = {\n true: {\n pressStyle: {\n backgroundColor: '$backgroundPress',\n borderColor: '$borderColorPress',\n },\n },\n false: {\n pressStyle: {\n backgroundColor: '$background',\n borderColor: '$borderColor',\n },\n },\n}\n\nexport const focusable = {\n true: {\n focusStyle: {\n backgroundColor: '$backgroundFocus',\n borderColor: '$borderColorFocus',\n },\n },\n false: {\n focusStyle: {\n backgroundColor: '$background',\n borderColor: '$borderColor',\n },\n },\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmF;AAEnF,oBAA6B;AAEtB,uBAAuB,MAAkB,QAA4B;AAC1E,QAAM,UAAU,QAAQ;AACxB,QAAM,QAAQ,qCAAoB,SAAS,2BAAe,MAAM;AAChE,SAAO,MAAM;AACf;AAJgB;AAMT,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAG,WAAW;AACnB,WAAO,gCAAa,OAAO,MAAM,SAAS,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,wBAAC,KAAuB,EAAE,YAAY;AAC5D,SAAO;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,KAET,MAAM,aAAa;AAAA,IACrB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF,IAEI,MAAM,aAAa;AAAA,IACrB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF,IAEI,MAAM,aAAa;AAAA,IACrB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF;AAEJ,GAxBwB;AA0BjB,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,UAAU;AAClB,UAAM,OAAO,cAAc,MAAM,MAAM,MAAM;AAC7C,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,mBAAmB;AAAA,IACrB;AAAA,EACF;AACF;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/SizableStack.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { getButtonSize, styled } from "@tamagui/core";
|
|
2
2
|
import { YStack } from "./Stacks";
|
|
3
|
-
import { focusable, hoverable, pressable } from "./variants";
|
|
3
|
+
import { bordered, circular, elevate, focusable, hoverable, pressable } from "./variants";
|
|
4
4
|
const SizableStack = styled(YStack, {
|
|
5
5
|
name: "SizableStack",
|
|
6
6
|
backgroundColor: "$background",
|
|
@@ -11,6 +11,9 @@ const SizableStack = styled(YStack, {
|
|
|
11
11
|
hoverable,
|
|
12
12
|
pressable,
|
|
13
13
|
focusable,
|
|
14
|
+
circular,
|
|
15
|
+
elevate,
|
|
16
|
+
bordered,
|
|
14
17
|
size: {
|
|
15
18
|
"...size": getButtonSize
|
|
16
19
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SizableStack.tsx"],
|
|
4
|
-
"sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { focusable, hoverable, pressable } from './variants'\n\nexport const SizableStack = styled(YStack, {\n name: 'SizableStack',\n backgroundColor: '$background',\n flexDirection: 'row',\n flexShrink: 1,\n\n variants: {\n // allows the type to come in for use in size\n fontFamily: () => ({}),\n hoverable,\n pressable,\n focusable,\n size: {\n '...size': getButtonSize,\n },\n },\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
|
|
5
|
-
"mappings": "AAAA;AAEA;AACA;AAEO,MAAM,eAAe,OAAO,QAAQ;AAAA,EACzC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,
|
|
4
|
+
"sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusable, hoverable, pressable } from './variants'\n\nexport const SizableStack = styled(YStack, {\n name: 'SizableStack',\n backgroundColor: '$background',\n flexDirection: 'row',\n flexShrink: 1,\n\n variants: {\n // allows the type to come in for use in size\n fontFamily: () => ({}),\n\n hoverable,\n pressable,\n focusable,\n circular,\n elevate,\n bordered,\n\n size: {\n '...size': getButtonSize,\n },\n },\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
|
|
5
|
+
"mappings": "AAAA;AAEA;AACA;AAEO,MAAM,eAAe,OAAO,QAAQ;AAAA,EACzC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Stacks.js
CHANGED
package/dist/esm/Stacks.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Stacks.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n GetProps,\n SizeTokens,\n SizeVariantSpreadFunction,\n Stack,\n StackProps,\n VariantSpreadExtras,\n getVariableValue,\n isVariable,\n styled,\n} from '@tamagui/core'\n\nexport type YStackProps = GetProps<typeof YStack>\nexport type XStackProps = GetProps<typeof YStack>\nexport type ZStackProps = GetProps<typeof ZStack>\n\
|
|
5
|
-
"mappings": ";;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import {\n GetProps,\n SizeTokens,\n SizeVariantSpreadFunction,\n Stack,\n StackProps,\n VariantSpreadExtras,\n getVariableValue,\n isVariable,\n styled,\n} from '@tamagui/core'\n\nexport type YStackProps = GetProps<typeof YStack>\nexport type XStackProps = GetProps<typeof YStack>\nexport type ZStackProps = GetProps<typeof ZStack>\n\nexport const getElevation: SizeVariantSpreadFunction<StackProps> = (size, extras) => {\n const { tokens } = extras\n const token = tokens.size[size]\n const sizeNum = (isVariable(token) ? +token.val : size) as number\n // TODO this could be configurable with require('tamagui').configure({ elevation: () => {} })\n return getSizedElevation(sizeNum, extras)\n}\n\nconst fullscreenStyle = {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n} as const\n\nexport const YStack = styled(Stack, {\n flexDirection: 'column',\n name: 'YStack',\n variants: {\n fullscreen: {\n true: fullscreenStyle,\n },\n elevation: {\n '...size': getElevation,\n },\n },\n})\n\nexport const XStack = styled(Stack, {\n flexDirection: 'row',\n name: 'XStack',\n variants: {\n fullscreen: {\n true: fullscreenStyle,\n },\n elevation: {\n '...size': getElevation,\n },\n },\n})\n\nexport const ZStack = styled(\n YStack,\n {\n name: 'ZStack',\n position: 'relative',\n },\n {\n neverFlatten: true,\n isZStack: true,\n }\n)\n\nexport const getSizedElevation = (\n val: SizeTokens | number | boolean,\n { theme, tokens }: VariantSpreadExtras<any>\n) => {\n const num =\n val === false\n ? 0\n : val === true\n ? // handles true\n (() => {\n const val = getVariableValue(tokens.size['true'])\n if (typeof val === 'number') {\n return val\n }\n return 10\n })()\n : +val\n const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)]\n const shadow = {\n shadowColor: theme.shadowColor,\n shadowRadius,\n shadowOffset: { height, width: 0 },\n }\n return shadow\n}\n"],
|
|
5
|
+
"mappings": ";;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBO,MAAM,eAAsD,wBAAC,MAAM,WAAW;AACnF,QAAM,EAAE,WAAW;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,WAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAElD,SAAO,kBAAkB,SAAS,MAAM;AAC1C,GANmE;AAQnE,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,SAAS,OACpB,QACA;AAAA,EACE,MAAM;AAAA,EACN,UAAU;AACZ,GACA;AAAA,EACE,cAAc;AAAA,EACd,UAAU;AACZ,CACF;AAEO,MAAM,oBAAoB,wBAC/B,KACA,EAAE,OAAO,aACN;AACH,QAAM,MACJ,QAAQ,QACJ,IACA,QAAQ,OAEP,OAAM;AACL,UAAM,OAAM,iBAAiB,OAAO,KAAK,OAAO;AAChD,QAAI,OAAO,SAAQ,UAAU;AAC3B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,IACH,CAAC;AACP,QAAM,CAAC,QAAQ,gBAAgB,CAAC,KAAK,MAAM,MAAM,IAAI,CAAC,GAAG,KAAK,MAAM,MAAM,IAAI,CAAC,CAAC;AAChF,QAAM,SAAS;AAAA,IACb,aAAa,MAAM;AAAA,IACnB;AAAA,IACA,cAAc,EAAE,QAAQ,OAAO,EAAE;AAAA,EACnC;AACA,SAAO;AACT,GAxBiC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { getButtonSize, styled } from "@tamagui/core";
|
|
2
2
|
import { YStack } from "./Stacks";
|
|
3
|
-
import { focusable, hoverable, pressable } from "./variants";
|
|
3
|
+
import { bordered, circular, elevate, focusable, hoverable, pressable } from "./variants";
|
|
4
4
|
const ThemeableSizableStack = styled(YStack, {
|
|
5
5
|
name: "SizableStack",
|
|
6
6
|
backgroundColor: "$background",
|
|
@@ -11,15 +11,12 @@ const ThemeableSizableStack = styled(YStack, {
|
|
|
11
11
|
hoverable,
|
|
12
12
|
pressable,
|
|
13
13
|
focusable,
|
|
14
|
+
circular,
|
|
15
|
+
elevate,
|
|
16
|
+
bordered,
|
|
14
17
|
size: {
|
|
15
18
|
"...size": getButtonSize
|
|
16
19
|
},
|
|
17
|
-
bordered: {
|
|
18
|
-
true: {
|
|
19
|
-
borderWidth: 1,
|
|
20
|
-
borderColor: "$borderColor"
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
20
|
disabled: {
|
|
24
21
|
true: {
|
|
25
22
|
opacity: 0.45,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ThemeableSizableStack.tsx"],
|
|
4
|
-
"sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { focusable, hoverable, pressable } from './variants'\n\nexport const ThemeableSizableStack = styled(YStack, {\n name: 'SizableStack',\n backgroundColor: '$background',\n flexDirection: 'row',\n flexShrink: 1,\n\n variants: {\n // allows the type to come in for use in size\n fontFamily: () => ({}),\n hoverable,\n pressable,\n focusable,\n
|
|
5
|
-
"mappings": "AAAA;AAEA;AACA;AAEO,MAAM,wBAAwB,OAAO,QAAQ;AAAA,EAClD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,
|
|
4
|
+
"sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusable, hoverable, pressable } from './variants'\n\nexport const ThemeableSizableStack = styled(YStack, {\n name: 'SizableStack',\n backgroundColor: '$background',\n flexDirection: 'row',\n flexShrink: 1,\n\n variants: {\n // allows the type to come in for use in size\n fontFamily: () => ({}),\n\n hoverable,\n pressable,\n focusable,\n circular,\n elevate,\n bordered,\n\n size: {\n '...size': getButtonSize,\n },\n\n disabled: {\n true: {\n // pointerEvents: 'none',\n opacity: 0.45,\n backgroundColor: '$background',\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n transparent: {\n true: {\n backgroundColor: 'transparent',\n },\n },\n\n chromeless: {\n true: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n shadowColor: 'transparent',\n },\n },\n },\n})\n\nexport type ThemeableSizableStackProps = GetProps<typeof ThemeableSizableStack>\n"],
|
|
5
|
+
"mappings": "AAAA;AAEA;AACA;AAEO,MAAM,wBAAwB,OAAO,QAAQ;AAAA,EAClD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,QAEJ,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export * from './Stacks'\nexport * from './SizableStack'\nexport * from './ThemeableSizableStack'\n"],
|
|
5
|
-
"mappings": "AAAA;AACA;AACA;",
|
|
4
|
+
"sourcesContent": ["export * from './Stacks'\nexport * from './SizableStack'\nexport * from './ThemeableSizableStack'\nexport { getCircleSize } from './variants'\n"],
|
|
5
|
+
"mappings": "AAAA;AACA;AACA;AACA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/variants.js
CHANGED
|
@@ -1,3 +1,56 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { buttonScaling, getSizeScaledToFont } from "@tamagui/core";
|
|
4
|
+
import { getElevation } from "./Stacks";
|
|
5
|
+
function getCircleSize(size, extras) {
|
|
6
|
+
const sizeVal = size != null ? size : "$4";
|
|
7
|
+
const scale = getSizeScaledToFont(sizeVal, buttonScaling, extras);
|
|
8
|
+
return scale.minHeight;
|
|
9
|
+
}
|
|
10
|
+
__name(getCircleSize, "getCircleSize");
|
|
11
|
+
const elevate = {
|
|
12
|
+
true: (_, extras) => {
|
|
13
|
+
return getElevation(extras.props["size"], extras);
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
const bordered = /* @__PURE__ */ __name((val, { props }) => {
|
|
17
|
+
return {
|
|
18
|
+
borderWidth: typeof val === "number" ? val : 1,
|
|
19
|
+
borderColor: "$borderColor",
|
|
20
|
+
...props.hoverable && {
|
|
21
|
+
hoverStyle: {
|
|
22
|
+
borderColor: "$borderColorHover"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
...props.pressable && {
|
|
26
|
+
pressStyle: {
|
|
27
|
+
borderColor: "$borderColorPress"
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
...props.focusable && {
|
|
31
|
+
focusStyle: {
|
|
32
|
+
borderColor: "$borderColorFocus"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
}, "bordered");
|
|
37
|
+
const circular = {
|
|
38
|
+
true: (_, extras) => {
|
|
39
|
+
const { props } = extras;
|
|
40
|
+
const size = getCircleSize(props.size, extras);
|
|
41
|
+
return {
|
|
42
|
+
width: size,
|
|
43
|
+
height: size,
|
|
44
|
+
maxWidth: size,
|
|
45
|
+
maxHeight: size,
|
|
46
|
+
minWidth: size,
|
|
47
|
+
minHeight: size,
|
|
48
|
+
borderRadius: 1e5,
|
|
49
|
+
paddingVertical: 0,
|
|
50
|
+
paddingHorizontal: 0
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
};
|
|
1
54
|
const hoverable = {
|
|
2
55
|
true: {
|
|
3
56
|
hoverStyle: {
|
|
@@ -32,10 +85,20 @@ const focusable = {
|
|
|
32
85
|
backgroundColor: "$backgroundFocus",
|
|
33
86
|
borderColor: "$borderColorFocus"
|
|
34
87
|
}
|
|
88
|
+
},
|
|
89
|
+
false: {
|
|
90
|
+
focusStyle: {
|
|
91
|
+
backgroundColor: "$background",
|
|
92
|
+
borderColor: "$borderColor"
|
|
93
|
+
}
|
|
35
94
|
}
|
|
36
95
|
};
|
|
37
96
|
export {
|
|
97
|
+
bordered,
|
|
98
|
+
circular,
|
|
99
|
+
elevate,
|
|
38
100
|
focusable,
|
|
101
|
+
getCircleSize,
|
|
39
102
|
hoverable,
|
|
40
103
|
pressable
|
|
41
104
|
};
|
package/dist/esm/variants.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/variants.tsx"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { ScaleVariantExtras, SizeTokens, buttonScaling, getSizeScaledToFont } from '@tamagui/core'\n\nimport { getElevation } from './Stacks'\n\nexport function getCircleSize(size: SizeTokens, extras: ScaleVariantExtras) {\n const sizeVal = size ?? '$4'\n const scale = getSizeScaledToFont(sizeVal, buttonScaling, extras)\n return scale.minHeight\n}\n\nexport const elevate = {\n true: (_, extras) => {\n return getElevation(extras.props['size'], extras)\n },\n}\n\nexport const bordered = (val: boolean | number, { props }) => {\n return {\n // TODO size it with size in '...size'\n borderWidth: typeof val === 'number' ? val : 1,\n borderColor: '$borderColor',\n\n ...(props.hoverable && {\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n }),\n\n ...(props.pressable && {\n pressStyle: {\n borderColor: '$borderColorPress',\n },\n }),\n\n ...(props.focusable && {\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n }),\n }\n}\n\nexport const circular = {\n true: (_, extras) => {\n const { props } = extras\n const size = getCircleSize(props.size, extras)\n return {\n width: size,\n height: size,\n maxWidth: size,\n maxHeight: size,\n minWidth: size,\n minHeight: size,\n borderRadius: 100_000,\n paddingVertical: 0,\n paddingHorizontal: 0,\n }\n },\n}\n\nexport const hoverable = {\n true: {\n hoverStyle: {\n backgroundColor: '$backgroundHover',\n borderColor: '$borderColorHover',\n },\n },\n false: {\n hoverStyle: {\n backgroundColor: '$background',\n borderColor: '$borderColor',\n },\n },\n}\n\nexport const pressable = {\n true: {\n pressStyle: {\n backgroundColor: '$backgroundPress',\n borderColor: '$borderColorPress',\n },\n },\n false: {\n pressStyle: {\n backgroundColor: '$background',\n borderColor: '$borderColor',\n },\n },\n}\n\nexport const focusable = {\n true: {\n focusStyle: {\n backgroundColor: '$backgroundFocus',\n borderColor: '$borderColorFocus',\n },\n },\n false: {\n focusStyle: {\n backgroundColor: '$background',\n borderColor: '$borderColor',\n },\n },\n}\n"],
|
|
5
|
+
"mappings": ";;AAAA;AAEA;AAEO,uBAAuB,MAAkB,QAA4B;AAC1E,QAAM,UAAU,sBAAQ;AACxB,QAAM,QAAQ,oBAAoB,SAAS,eAAe,MAAM;AAChE,SAAO,MAAM;AACf;AAJgB;AAMT,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAG,WAAW;AACnB,WAAO,aAAa,OAAO,MAAM,SAAS,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,wBAAC,KAAuB,EAAE,YAAY;AAC5D,SAAO;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,OAET,MAAM,aAAa;AAAA,MACrB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,OAEI,MAAM,aAAa;AAAA,MACrB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,OAEI,MAAM,aAAa;AAAA,MACrB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,GAxBwB;AA0BjB,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,UAAU;AAClB,UAAM,OAAO,cAAc,MAAM,MAAM,MAAM;AAC7C,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,mBAAmB;AAAA,IACrB;AAAA,EACF;AACF;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/SizableStack.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { getButtonSize, styled } from "@tamagui/core";
|
|
2
2
|
import { YStack } from "./Stacks";
|
|
3
|
-
import { focusable, hoverable, pressable } from "./variants";
|
|
3
|
+
import { bordered, circular, elevate, focusable, hoverable, pressable } from "./variants";
|
|
4
4
|
const SizableStack = styled(YStack, {
|
|
5
5
|
name: "SizableStack",
|
|
6
6
|
backgroundColor: "$background",
|
|
@@ -11,6 +11,9 @@ const SizableStack = styled(YStack, {
|
|
|
11
11
|
hoverable,
|
|
12
12
|
pressable,
|
|
13
13
|
focusable,
|
|
14
|
+
circular,
|
|
15
|
+
elevate,
|
|
16
|
+
bordered,
|
|
14
17
|
size: {
|
|
15
18
|
"...size": getButtonSize
|
|
16
19
|
}
|
package/dist/jsx/Stacks.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { getButtonSize, styled } from "@tamagui/core";
|
|
2
2
|
import { YStack } from "./Stacks";
|
|
3
|
-
import { focusable, hoverable, pressable } from "./variants";
|
|
3
|
+
import { bordered, circular, elevate, focusable, hoverable, pressable } from "./variants";
|
|
4
4
|
const ThemeableSizableStack = styled(YStack, {
|
|
5
5
|
name: "SizableStack",
|
|
6
6
|
backgroundColor: "$background",
|
|
@@ -11,15 +11,12 @@ const ThemeableSizableStack = styled(YStack, {
|
|
|
11
11
|
hoverable,
|
|
12
12
|
pressable,
|
|
13
13
|
focusable,
|
|
14
|
+
circular,
|
|
15
|
+
elevate,
|
|
16
|
+
bordered,
|
|
14
17
|
size: {
|
|
15
18
|
"...size": getButtonSize
|
|
16
19
|
},
|
|
17
|
-
bordered: {
|
|
18
|
-
true: {
|
|
19
|
-
borderWidth: 1,
|
|
20
|
-
borderColor: "$borderColor"
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
20
|
disabled: {
|
|
24
21
|
true: {
|
|
25
22
|
opacity: 0.45,
|
package/dist/jsx/index.js
CHANGED
package/dist/jsx/variants.js
CHANGED
|
@@ -1,3 +1,56 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { buttonScaling, getSizeScaledToFont } from "@tamagui/core";
|
|
4
|
+
import { getElevation } from "./Stacks";
|
|
5
|
+
function getCircleSize(size, extras) {
|
|
6
|
+
const sizeVal = size != null ? size : "$4";
|
|
7
|
+
const scale = getSizeScaledToFont(sizeVal, buttonScaling, extras);
|
|
8
|
+
return scale.minHeight;
|
|
9
|
+
}
|
|
10
|
+
__name(getCircleSize, "getCircleSize");
|
|
11
|
+
const elevate = {
|
|
12
|
+
true: (_, extras) => {
|
|
13
|
+
return getElevation(extras.props["size"], extras);
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
const bordered = /* @__PURE__ */ __name((val, { props }) => {
|
|
17
|
+
return {
|
|
18
|
+
borderWidth: typeof val === "number" ? val : 1,
|
|
19
|
+
borderColor: "$borderColor",
|
|
20
|
+
...props.hoverable && {
|
|
21
|
+
hoverStyle: {
|
|
22
|
+
borderColor: "$borderColorHover"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
...props.pressable && {
|
|
26
|
+
pressStyle: {
|
|
27
|
+
borderColor: "$borderColorPress"
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
...props.focusable && {
|
|
31
|
+
focusStyle: {
|
|
32
|
+
borderColor: "$borderColorFocus"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
}, "bordered");
|
|
37
|
+
const circular = {
|
|
38
|
+
true: (_, extras) => {
|
|
39
|
+
const { props } = extras;
|
|
40
|
+
const size = getCircleSize(props.size, extras);
|
|
41
|
+
return {
|
|
42
|
+
width: size,
|
|
43
|
+
height: size,
|
|
44
|
+
maxWidth: size,
|
|
45
|
+
maxHeight: size,
|
|
46
|
+
minWidth: size,
|
|
47
|
+
minHeight: size,
|
|
48
|
+
borderRadius: 1e5,
|
|
49
|
+
paddingVertical: 0,
|
|
50
|
+
paddingHorizontal: 0
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
};
|
|
1
54
|
const hoverable = {
|
|
2
55
|
true: {
|
|
3
56
|
hoverStyle: {
|
|
@@ -32,10 +85,20 @@ const focusable = {
|
|
|
32
85
|
backgroundColor: "$backgroundFocus",
|
|
33
86
|
borderColor: "$borderColorFocus"
|
|
34
87
|
}
|
|
88
|
+
},
|
|
89
|
+
false: {
|
|
90
|
+
focusStyle: {
|
|
91
|
+
backgroundColor: "$background",
|
|
92
|
+
borderColor: "$borderColor"
|
|
93
|
+
}
|
|
35
94
|
}
|
|
36
95
|
};
|
|
37
96
|
export {
|
|
97
|
+
bordered,
|
|
98
|
+
circular,
|
|
99
|
+
elevate,
|
|
38
100
|
focusable,
|
|
101
|
+
getCircleSize,
|
|
39
102
|
hoverable,
|
|
40
103
|
pressable
|
|
41
104
|
};
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/stacks",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.26",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
|
-
"
|
|
6
|
+
"types": "./types/index.d.ts",
|
|
7
7
|
"main": "dist/cjs",
|
|
8
8
|
"module": "dist/esm",
|
|
9
9
|
"module:jsx": "dist/jsx",
|
|
@@ -16,14 +16,14 @@
|
|
|
16
16
|
"watch": "tamagui-build --watch"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
19
|
+
"@tamagui/core": "^1.0.1-beta.26"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"react": "*",
|
|
23
23
|
"react-dom": "*"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
26
|
+
"@tamagui/build": "^1.0.1-beta.26",
|
|
27
27
|
"react": "*",
|
|
28
28
|
"react-dom": "*"
|
|
29
29
|
},
|
package/types/SizableStack.d.ts
CHANGED
|
@@ -2,29 +2,38 @@ import { GetProps } from '@tamagui/core';
|
|
|
2
2
|
export declare const SizableStack: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
3
3
|
fullscreen?: boolean | undefined;
|
|
4
4
|
elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
5
|
-
}, "focusable" | "fontFamily" | "size" | "hoverable" | "pressable"> & {
|
|
5
|
+
}, "focusable" | "fontFamily" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered"> & {
|
|
6
6
|
fontFamily?: unknown;
|
|
7
7
|
hoverable?: boolean | undefined;
|
|
8
8
|
pressable?: boolean | undefined;
|
|
9
9
|
focusable?: boolean | undefined;
|
|
10
|
+
circular?: boolean | undefined;
|
|
11
|
+
elevate?: boolean | undefined;
|
|
12
|
+
bordered?: number | boolean | undefined;
|
|
10
13
|
size?: import("@tamagui/core").SizeTokens | undefined;
|
|
11
14
|
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
12
15
|
fullscreen?: boolean | undefined;
|
|
13
16
|
elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
14
|
-
}, "focusable" | "fontFamily" | "size" | "hoverable" | "pressable"> & {
|
|
17
|
+
}, "focusable" | "fontFamily" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered"> & {
|
|
15
18
|
fontFamily?: unknown;
|
|
16
19
|
hoverable?: boolean | undefined;
|
|
17
20
|
pressable?: boolean | undefined;
|
|
18
21
|
focusable?: boolean | undefined;
|
|
22
|
+
circular?: boolean | undefined;
|
|
23
|
+
elevate?: boolean | undefined;
|
|
24
|
+
bordered?: number | boolean | undefined;
|
|
19
25
|
size?: import("@tamagui/core").SizeTokens | undefined;
|
|
20
26
|
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
21
27
|
fullscreen?: boolean | undefined;
|
|
22
28
|
elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
23
|
-
}, "focusable" | "fontFamily" | "size" | "hoverable" | "pressable"> & {
|
|
29
|
+
}, "focusable" | "fontFamily" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered"> & {
|
|
24
30
|
fontFamily?: unknown;
|
|
25
31
|
hoverable?: boolean | undefined;
|
|
26
32
|
pressable?: boolean | undefined;
|
|
27
33
|
focusable?: boolean | undefined;
|
|
34
|
+
circular?: boolean | undefined;
|
|
35
|
+
elevate?: boolean | undefined;
|
|
36
|
+
bordered?: number | boolean | undefined;
|
|
28
37
|
size?: import("@tamagui/core").SizeTokens | undefined;
|
|
29
38
|
}>>, any, import("@tamagui/core").StackPropsBase, {
|
|
30
39
|
fullscreen?: boolean | undefined;
|
|
@@ -34,6 +43,9 @@ export declare const SizableStack: import("@tamagui/core").TamaguiComponent<Omit
|
|
|
34
43
|
hoverable?: boolean | undefined;
|
|
35
44
|
pressable?: boolean | undefined;
|
|
36
45
|
focusable?: boolean | undefined;
|
|
46
|
+
circular?: boolean | undefined;
|
|
47
|
+
elevate?: boolean | undefined;
|
|
48
|
+
bordered?: number | boolean | undefined;
|
|
37
49
|
size?: import("@tamagui/core").SizeTokens | undefined;
|
|
38
50
|
}>;
|
|
39
51
|
export declare type SizableStackProps = GetProps<typeof SizableStack>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SizableStack.d.ts","sourceRoot":"","sources":["../src/SizableStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAyB,MAAM,eAAe,CAAA;AAK/D,eAAO,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"SizableStack.d.ts","sourceRoot":"","sources":["../src/SizableStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAyB,MAAM,eAAe,CAAA;AAK/D,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBvB,CAAA;AAEF,oBAAY,iBAAiB,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAA"}
|
package/types/Stacks.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { GetProps, SizeTokens, VariantSpreadExtras } from '@tamagui/core';
|
|
1
|
+
import { GetProps, SizeTokens, SizeVariantSpreadFunction, StackProps, VariantSpreadExtras } from '@tamagui/core';
|
|
2
2
|
export declare type YStackProps = GetProps<typeof YStack>;
|
|
3
3
|
export declare type XStackProps = GetProps<typeof YStack>;
|
|
4
4
|
export declare type ZStackProps = GetProps<typeof ZStack>;
|
|
5
|
+
export declare const getElevation: SizeVariantSpreadFunction<StackProps>;
|
|
5
6
|
export declare const YStack: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
|
|
6
7
|
fullscreen?: boolean | undefined;
|
|
7
8
|
elevation?: SizeTokens | undefined;
|
package/types/Stacks.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stacks.d.ts","sourceRoot":"","sources":["../src/Stacks.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,UAAU,
|
|
1
|
+
{"version":3,"file":"Stacks.d.ts","sourceRoot":"","sources":["../src/Stacks.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,UAAU,EACV,yBAAyB,EAEzB,UAAU,EACV,mBAAmB,EAIpB,MAAM,eAAe,CAAA;AAEtB,oBAAY,WAAW,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AACjD,oBAAY,WAAW,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AACjD,oBAAY,WAAW,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAEjD,eAAO,MAAM,YAAY,EAAE,yBAAyB,CAAC,UAAU,CAM9D,CAAA;AAUD,eAAO,MAAM,MAAM;;;;;;;;;;;;EAWjB,CAAA;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;EAWjB,CAAA;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUlB,CAAA;AAED,eAAO,MAAM,iBAAiB,QACvB,UAAU,GAAG,MAAM,GAAG,OAAO,qBACf,oBAAoB,GAAG,CAAC;;;;;;;CAsB5C,CAAA"}
|
|
@@ -2,39 +2,45 @@ import { GetProps } from '@tamagui/core';
|
|
|
2
2
|
export declare const ThemeableSizableStack: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
3
3
|
fullscreen?: boolean | undefined;
|
|
4
4
|
elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
5
|
-
}, "focusable" | "fontFamily" | "disabled" | "size" | "hoverable" | "pressable" | "
|
|
5
|
+
}, "focusable" | "fontFamily" | "disabled" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "chromeless"> & {
|
|
6
6
|
fontFamily?: unknown;
|
|
7
7
|
hoverable?: boolean | undefined;
|
|
8
8
|
pressable?: boolean | undefined;
|
|
9
9
|
focusable?: boolean | undefined;
|
|
10
|
+
circular?: boolean | undefined;
|
|
11
|
+
elevate?: boolean | undefined;
|
|
12
|
+
bordered?: number | boolean | undefined;
|
|
10
13
|
size?: import("@tamagui/core").SizeTokens | undefined;
|
|
11
|
-
bordered?: boolean | undefined;
|
|
12
14
|
disabled?: boolean | undefined;
|
|
13
15
|
transparent?: boolean | undefined;
|
|
14
16
|
chromeless?: boolean | undefined;
|
|
15
17
|
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
16
18
|
fullscreen?: boolean | undefined;
|
|
17
19
|
elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
18
|
-
}, "focusable" | "fontFamily" | "disabled" | "size" | "hoverable" | "pressable" | "
|
|
20
|
+
}, "focusable" | "fontFamily" | "disabled" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "chromeless"> & {
|
|
19
21
|
fontFamily?: unknown;
|
|
20
22
|
hoverable?: boolean | undefined;
|
|
21
23
|
pressable?: boolean | undefined;
|
|
22
24
|
focusable?: boolean | undefined;
|
|
25
|
+
circular?: boolean | undefined;
|
|
26
|
+
elevate?: boolean | undefined;
|
|
27
|
+
bordered?: number | boolean | undefined;
|
|
23
28
|
size?: import("@tamagui/core").SizeTokens | undefined;
|
|
24
|
-
bordered?: boolean | undefined;
|
|
25
29
|
disabled?: boolean | undefined;
|
|
26
30
|
transparent?: boolean | undefined;
|
|
27
31
|
chromeless?: boolean | undefined;
|
|
28
32
|
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
29
33
|
fullscreen?: boolean | undefined;
|
|
30
34
|
elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
31
|
-
}, "focusable" | "fontFamily" | "disabled" | "size" | "hoverable" | "pressable" | "
|
|
35
|
+
}, "focusable" | "fontFamily" | "disabled" | "size" | "hoverable" | "pressable" | "circular" | "elevate" | "bordered" | "transparent" | "chromeless"> & {
|
|
32
36
|
fontFamily?: unknown;
|
|
33
37
|
hoverable?: boolean | undefined;
|
|
34
38
|
pressable?: boolean | undefined;
|
|
35
39
|
focusable?: boolean | undefined;
|
|
40
|
+
circular?: boolean | undefined;
|
|
41
|
+
elevate?: boolean | undefined;
|
|
42
|
+
bordered?: number | boolean | undefined;
|
|
36
43
|
size?: import("@tamagui/core").SizeTokens | undefined;
|
|
37
|
-
bordered?: boolean | undefined;
|
|
38
44
|
disabled?: boolean | undefined;
|
|
39
45
|
transparent?: boolean | undefined;
|
|
40
46
|
chromeless?: boolean | undefined;
|
|
@@ -46,8 +52,10 @@ export declare const ThemeableSizableStack: import("@tamagui/core").TamaguiCompo
|
|
|
46
52
|
hoverable?: boolean | undefined;
|
|
47
53
|
pressable?: boolean | undefined;
|
|
48
54
|
focusable?: boolean | undefined;
|
|
55
|
+
circular?: boolean | undefined;
|
|
56
|
+
elevate?: boolean | undefined;
|
|
57
|
+
bordered?: number | boolean | undefined;
|
|
49
58
|
size?: import("@tamagui/core").SizeTokens | undefined;
|
|
50
|
-
bordered?: boolean | undefined;
|
|
51
59
|
disabled?: boolean | undefined;
|
|
52
60
|
transparent?: boolean | undefined;
|
|
53
61
|
chromeless?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeableSizableStack.d.ts","sourceRoot":"","sources":["../src/ThemeableSizableStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAyB,MAAM,eAAe,CAAA;AAK/D,eAAO,MAAM,qBAAqB
|
|
1
|
+
{"version":3,"file":"ThemeableSizableStack.d.ts","sourceRoot":"","sources":["../src/ThemeableSizableStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAyB,MAAM,eAAe,CAAA;AAK/D,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8ChC,CAAA;AAEF,oBAAY,0BAA0B,GAAG,QAAQ,CAAC,OAAO,qBAAqB,CAAC,CAAA"}
|
package/types/index.d.ts
CHANGED
package/types/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}
|
package/types/variants.d.ts
CHANGED
|
@@ -1,3 +1,229 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ScaleVariantExtras, SizeTokens } from '@tamagui/core';
|
|
3
|
+
export declare function getCircleSize(size: SizeTokens, extras: ScaleVariantExtras): number;
|
|
4
|
+
export declare const elevate: {
|
|
5
|
+
true: (_: any, extras: any) => {
|
|
6
|
+
[x: `$${string}`]: (import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core").PseudoProps<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>>>) | import("@tamagui/core").Variable | undefined;
|
|
7
|
+
hitSlop?: import("@tamagui/core").Variable | import("react-native").Insets | undefined;
|
|
8
|
+
onLayout?: import("@tamagui/core").Variable | ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
|
|
9
|
+
pointerEvents?: "box-none" | "none" | "box-only" | "auto" | import("@tamagui/core").Variable | undefined;
|
|
10
|
+
removeClippedSubviews?: boolean | import("@tamagui/core").Variable | undefined;
|
|
11
|
+
style?: import("@tamagui/core").Variable | import("react-native").StyleProp<import("react-native").ViewStyle>;
|
|
12
|
+
testID?: string | import("@tamagui/core").Variable | undefined;
|
|
13
|
+
nativeID?: string | import("@tamagui/core").Variable | undefined;
|
|
14
|
+
collapsable?: boolean | import("@tamagui/core").Variable | undefined;
|
|
15
|
+
needsOffscreenAlphaCompositing?: boolean | import("@tamagui/core").Variable | undefined;
|
|
16
|
+
renderToHardwareTextureAndroid?: boolean | import("@tamagui/core").Variable | undefined;
|
|
17
|
+
focusable?: boolean | import("@tamagui/core").Variable | undefined;
|
|
18
|
+
shouldRasterizeIOS?: boolean | import("@tamagui/core").Variable | undefined;
|
|
19
|
+
isTVSelectable?: boolean | import("@tamagui/core").Variable | undefined;
|
|
20
|
+
hasTVPreferredFocus?: boolean | import("@tamagui/core").Variable | undefined;
|
|
21
|
+
tvParallaxProperties?: import("@tamagui/core").Variable | import("react-native").TVParallaxProperties | undefined;
|
|
22
|
+
tvParallaxShiftDistanceX?: number | import("@tamagui/core").Variable | undefined;
|
|
23
|
+
tvParallaxShiftDistanceY?: number | import("@tamagui/core").Variable | undefined;
|
|
24
|
+
tvParallaxTiltAngle?: number | import("@tamagui/core").Variable | undefined;
|
|
25
|
+
tvParallaxMagnification?: number | import("@tamagui/core").Variable | undefined;
|
|
26
|
+
onStartShouldSetResponder?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
|
|
27
|
+
onMoveShouldSetResponder?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
|
|
28
|
+
onResponderEnd?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
29
|
+
onResponderGrant?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
30
|
+
onResponderReject?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
31
|
+
onResponderMove?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
32
|
+
onResponderRelease?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
33
|
+
onResponderStart?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
34
|
+
onResponderTerminationRequest?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
|
|
35
|
+
onResponderTerminate?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
36
|
+
onStartShouldSetResponderCapture?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
|
|
37
|
+
onMoveShouldSetResponderCapture?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
|
|
38
|
+
onTouchStart?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
39
|
+
onTouchMove?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
40
|
+
onTouchEnd?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
41
|
+
onTouchCancel?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
42
|
+
onTouchEndCapture?: import("@tamagui/core").Variable | ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
43
|
+
accessible?: boolean | import("@tamagui/core").Variable | undefined;
|
|
44
|
+
accessibilityActions?: import("@tamagui/core").Variable | readonly Readonly<{
|
|
45
|
+
name: string;
|
|
46
|
+
label?: string | undefined;
|
|
47
|
+
}>[] | undefined;
|
|
48
|
+
accessibilityLabel?: string | import("@tamagui/core").Variable | undefined;
|
|
49
|
+
accessibilityRole?: "none" | "button" | "link" | "search" | "image" | "keyboardkey" | "text" | "adjustable" | "imagebutton" | "header" | "summary" | import("@tamagui/core").Variable | undefined;
|
|
50
|
+
accessibilityState?: import("react-native").AccessibilityState | import("@tamagui/core").Variable | undefined;
|
|
51
|
+
accessibilityHint?: string | import("@tamagui/core").Variable | undefined;
|
|
52
|
+
accessibilityValue?: import("@tamagui/core").Variable | import("react-native").AccessibilityValue | undefined;
|
|
53
|
+
onAccessibilityAction?: import("@tamagui/core").Variable | ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
|
|
54
|
+
accessibilityLiveRegion?: "none" | import("@tamagui/core").Variable | "polite" | "assertive" | undefined;
|
|
55
|
+
importantForAccessibility?: "auto" | import("@tamagui/core").Variable | "yes" | "no" | "no-hide-descendants" | undefined;
|
|
56
|
+
accessibilityElementsHidden?: boolean | import("@tamagui/core").Variable | undefined;
|
|
57
|
+
accessibilityViewIsModal?: boolean | import("@tamagui/core").Variable | undefined;
|
|
58
|
+
onAccessibilityEscape?: import("@tamagui/core").Variable | (() => void) | undefined;
|
|
59
|
+
onAccessibilityTap?: import("@tamagui/core").Variable | (() => void) | undefined;
|
|
60
|
+
onMagicTap?: import("@tamagui/core").Variable | (() => void) | undefined;
|
|
61
|
+
accessibilityIgnoresInvertColors?: boolean | import("@tamagui/core").Variable | undefined;
|
|
62
|
+
dataSet?: any;
|
|
63
|
+
target?: any;
|
|
64
|
+
rel?: any;
|
|
65
|
+
download?: any;
|
|
66
|
+
href?: string | import("@tamagui/core").Variable | undefined;
|
|
67
|
+
hrefAttrs?: import("@tamagui/core").Variable | {
|
|
68
|
+
target?: "top" | "_blank" | "_self" | "_top" | "blank" | "self" | undefined;
|
|
69
|
+
rel?: string | undefined;
|
|
70
|
+
download?: boolean | undefined;
|
|
71
|
+
} | undefined;
|
|
72
|
+
onMouseDown?: (((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) & ((e: MouseEvent) => any)) | import("@tamagui/core").Variable | undefined;
|
|
73
|
+
onMouseUp?: import("@tamagui/core").Variable | ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
|
74
|
+
onMouseEnter?: (((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) & ((e: MouseEvent) => any)) | import("@tamagui/core").Variable | undefined;
|
|
75
|
+
onMouseLeave?: (((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) & ((e: MouseEvent) => any)) | import("@tamagui/core").Variable | undefined;
|
|
76
|
+
onFocus?: import("@tamagui/core").Variable | ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined;
|
|
77
|
+
onScroll?: import("@tamagui/core").Variable | ((event: import("react").UIEvent<HTMLDivElement, UIEvent>) => void) | undefined;
|
|
78
|
+
onScrollShouldSetResponder?: unknown;
|
|
79
|
+
onScrollShouldSetResponderCapture?: unknown;
|
|
80
|
+
onSelectionChangeShouldSetResponder?: unknown;
|
|
81
|
+
onSelectionChangeShouldSetResponderCapture?: unknown;
|
|
82
|
+
asChild?: boolean | import("@tamagui/core").Variable | undefined;
|
|
83
|
+
space?: import("@tamagui/core").Variable | import("@tamagui/core").SpaceTokens | undefined;
|
|
84
|
+
spaceDirection?: import("@tamagui/core").Variable | import("@tamagui/core").SpaceDirection;
|
|
85
|
+
dangerouslySetInnerHTML?: import("@tamagui/core").Variable | {
|
|
86
|
+
__html: string;
|
|
87
|
+
} | undefined;
|
|
88
|
+
animation?: import("@tamagui/core").Variable | import("@tamagui/core").AnimationProp | undefined;
|
|
89
|
+
animateOnly?: import("@tamagui/core").Variable | string[] | undefined;
|
|
90
|
+
children?: any;
|
|
91
|
+
debug?: boolean | import("@tamagui/core").Variable | "break" | "verbose" | undefined;
|
|
92
|
+
disabled?: boolean | import("@tamagui/core").Variable | undefined;
|
|
93
|
+
className?: string | import("@tamagui/core").Variable | undefined;
|
|
94
|
+
id?: string | import("@tamagui/core").Variable | undefined;
|
|
95
|
+
tag?: string | import("@tamagui/core").Variable | undefined;
|
|
96
|
+
theme?: import("@tamagui/core").Variable | import("@tamagui/core").ThemeName | null | undefined;
|
|
97
|
+
onHoverIn?: import("@tamagui/core").Variable | ((e: MouseEvent) => any) | undefined;
|
|
98
|
+
onHoverOut?: import("@tamagui/core").Variable | ((e: MouseEvent) => any) | undefined;
|
|
99
|
+
onPress?: ((e: import("react-native").GestureResponderEvent) => any) | import("@tamagui/core").Variable | undefined;
|
|
100
|
+
onPressIn?: ((e: import("react-native").GestureResponderEvent) => any) | import("@tamagui/core").Variable | undefined;
|
|
101
|
+
onPressOut?: ((e: import("react-native").GestureResponderEvent) => any) | import("@tamagui/core").Variable | undefined;
|
|
102
|
+
backgroundColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
|
|
103
|
+
borderBottomColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
|
|
104
|
+
borderBottomEndRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
105
|
+
borderBottomLeftRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
106
|
+
borderBottomRightRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
107
|
+
borderBottomStartRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
108
|
+
borderBottomWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
109
|
+
borderColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
|
|
110
|
+
borderEndColor?: import("@tamagui/core").Variable | import("react-native").ColorValue | undefined;
|
|
111
|
+
borderLeftColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
|
|
112
|
+
borderLeftWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
113
|
+
borderRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
114
|
+
borderRightColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
|
|
115
|
+
borderRightWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
116
|
+
borderStartColor?: import("@tamagui/core").Variable | import("react-native").ColorValue | undefined;
|
|
117
|
+
borderStyle?: import("@tamagui/core").Variable | "solid" | "dotted" | "dashed" | undefined;
|
|
118
|
+
borderTopColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
|
|
119
|
+
borderTopEndRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
120
|
+
borderTopLeftRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
121
|
+
borderTopRightRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
122
|
+
borderTopStartRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
123
|
+
borderTopWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
124
|
+
borderWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
125
|
+
opacity?: number | import("@tamagui/core").Variable | undefined;
|
|
126
|
+
alignContent?: import("@tamagui/core").Variable | "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | undefined;
|
|
127
|
+
alignItems?: import("@tamagui/core").Variable | import("react-native").FlexAlignType | undefined;
|
|
128
|
+
alignSelf?: "auto" | import("@tamagui/core").Variable | import("react-native").FlexAlignType | undefined;
|
|
129
|
+
aspectRatio?: number | import("@tamagui/core").Variable | undefined;
|
|
130
|
+
borderEndWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
131
|
+
borderStartWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
132
|
+
bottom?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
133
|
+
end?: string | number | import("@tamagui/core").Variable | undefined;
|
|
134
|
+
flex?: number | import("@tamagui/core").Variable | undefined;
|
|
135
|
+
flexBasis?: string | number | import("@tamagui/core").Variable | undefined;
|
|
136
|
+
flexDirection?: "column" | import("@tamagui/core").Variable | "row" | "row-reverse" | "column-reverse" | undefined;
|
|
137
|
+
flexGrow?: number | import("@tamagui/core").Variable | undefined;
|
|
138
|
+
flexShrink?: number | import("@tamagui/core").Variable | undefined;
|
|
139
|
+
flexWrap?: import("@tamagui/core").Variable | "wrap" | "nowrap" | "wrap-reverse" | undefined;
|
|
140
|
+
height?: SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
141
|
+
justifyContent?: import("@tamagui/core").Variable | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
|
|
142
|
+
left?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
143
|
+
margin?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
144
|
+
marginBottom?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
145
|
+
marginEnd?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
146
|
+
marginHorizontal?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
147
|
+
marginLeft?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
148
|
+
marginRight?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
149
|
+
marginStart?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
150
|
+
marginTop?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
151
|
+
marginVertical?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
152
|
+
maxHeight?: SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
153
|
+
maxWidth?: SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
154
|
+
minHeight?: SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
155
|
+
minWidth?: SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
156
|
+
overflow?: import("@tamagui/core").Variable | "visible" | "hidden" | "scroll" | undefined;
|
|
157
|
+
padding?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
158
|
+
paddingBottom?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
159
|
+
paddingEnd?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
160
|
+
paddingHorizontal?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
161
|
+
paddingLeft?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
162
|
+
paddingRight?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
163
|
+
paddingStart?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
164
|
+
paddingTop?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
165
|
+
paddingVertical?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
166
|
+
position?: "absolute" | import("@tamagui/core").Variable | "relative" | undefined;
|
|
167
|
+
right?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
168
|
+
start?: string | number | import("@tamagui/core").Variable | undefined;
|
|
169
|
+
top?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
170
|
+
width?: SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
171
|
+
zIndex?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ZIndexTokens | undefined;
|
|
172
|
+
direction?: "inherit" | import("@tamagui/core").Variable | "ltr" | "rtl" | undefined;
|
|
173
|
+
shadowColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
|
|
174
|
+
shadowOffset?: import("@tamagui/core").ThemeValueFallback | {
|
|
175
|
+
width: import("@tamagui/core").SpaceTokens;
|
|
176
|
+
height: import("@tamagui/core").SpaceTokens;
|
|
177
|
+
} | {
|
|
178
|
+
width: number;
|
|
179
|
+
height: number;
|
|
180
|
+
} | undefined;
|
|
181
|
+
shadowOpacity?: number | import("@tamagui/core").Variable | undefined;
|
|
182
|
+
shadowRadius?: SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
183
|
+
transform?: import("@tamagui/core").Variable | (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
|
|
184
|
+
transformMatrix?: import("@tamagui/core").Variable | number[] | undefined;
|
|
185
|
+
rotation?: number | import("@tamagui/core").Variable | undefined;
|
|
186
|
+
scaleX?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
187
|
+
scaleY?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
188
|
+
translateX?: number | import("@tamagui/core").Variable | undefined;
|
|
189
|
+
translateY?: number | import("@tamagui/core").Variable | undefined;
|
|
190
|
+
x?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
191
|
+
y?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
192
|
+
perspective?: number | import("@tamagui/core").Variable | undefined;
|
|
193
|
+
scale?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
|
|
194
|
+
skewX?: string | import("@tamagui/core").Variable | undefined;
|
|
195
|
+
skewY?: string | import("@tamagui/core").Variable | undefined;
|
|
196
|
+
matrix?: import("@tamagui/core").Variable | number[] | undefined;
|
|
197
|
+
rotate?: string | import("@tamagui/core").Variable | undefined;
|
|
198
|
+
rotateY?: string | import("@tamagui/core").Variable | undefined;
|
|
199
|
+
rotateX?: string | import("@tamagui/core").Variable | undefined;
|
|
200
|
+
rotateZ?: string | import("@tamagui/core").Variable | undefined;
|
|
201
|
+
cursor?: string | import("@tamagui/core").Variable | undefined;
|
|
202
|
+
contain?: string | import("@tamagui/core").Variable | undefined;
|
|
203
|
+
display?: "flex" | "none" | "inherit" | import("@tamagui/core").Variable | "inline" | "block" | "contents" | "inline-flex" | undefined;
|
|
204
|
+
hoverStyle?: (import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>>) | import("@tamagui/core").Variable | null | undefined;
|
|
205
|
+
pressStyle?: (import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>>) | import("@tamagui/core").Variable | null | undefined;
|
|
206
|
+
focusStyle?: (import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>>) | import("@tamagui/core").Variable | null | undefined;
|
|
207
|
+
exitStyle?: (import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>>) | import("@tamagui/core").Variable | null | undefined;
|
|
208
|
+
enterStyle?: (import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>>) | import("@tamagui/core").Variable | null | undefined;
|
|
209
|
+
} | null | undefined;
|
|
210
|
+
};
|
|
211
|
+
export declare const bordered: (val: boolean | number, { props }: {
|
|
212
|
+
props: any;
|
|
213
|
+
}) => any;
|
|
214
|
+
export declare const circular: {
|
|
215
|
+
true: (_: any, extras: any) => {
|
|
216
|
+
width: number;
|
|
217
|
+
height: number;
|
|
218
|
+
maxWidth: number;
|
|
219
|
+
maxHeight: number;
|
|
220
|
+
minWidth: number;
|
|
221
|
+
minHeight: number;
|
|
222
|
+
borderRadius: number;
|
|
223
|
+
paddingVertical: number;
|
|
224
|
+
paddingHorizontal: number;
|
|
225
|
+
};
|
|
226
|
+
};
|
|
1
227
|
export declare const hoverable: {
|
|
2
228
|
true: {
|
|
3
229
|
hoverStyle: {
|
|
@@ -33,5 +259,11 @@ export declare const focusable: {
|
|
|
33
259
|
borderColor: string;
|
|
34
260
|
};
|
|
35
261
|
};
|
|
262
|
+
false: {
|
|
263
|
+
focusStyle: {
|
|
264
|
+
backgroundColor: string;
|
|
265
|
+
borderColor: string;
|
|
266
|
+
};
|
|
267
|
+
};
|
|
36
268
|
};
|
|
37
269
|
//# sourceMappingURL=variants.d.ts.map
|
package/types/variants.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../src/variants.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAA;AAED,eAAO,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../src/variants.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAsC,MAAM,eAAe,CAAA;AAIlG,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,kBAAkB,UAIzE;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAInB,CAAA;AAED,eAAO,MAAM,QAAQ,QAAS,OAAO,GAAG,MAAM;;SAwB7C,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAgBpB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAA"}
|