@tamagui/stacks 1.1.7 → 1.1.9
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/Stacks.js.map +1 -1
- package/dist/cjs/variants.js +3 -2
- package/dist/cjs/variants.js.map +2 -2
- package/dist/esm/Stacks.js.map +1 -1
- package/dist/esm/variants.js +3 -2
- package/dist/esm/variants.js.map +2 -2
- package/dist/jsx/Stacks.js.map +1 -1
- package/dist/jsx/variants.js +3 -2
- package/dist/jsx/variants.js.map +2 -2
- package/package.json +4 -4
- package/src/variants.tsx +2 -2
package/dist/cjs/Stacks.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Stacks.tsx"],
|
|
4
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 = YStackProps\nexport type ZStackProps = YStackProps\n\nexport const getElevation: SizeVariantSpreadFunction<StackProps> = (\n size,\n extras,\n) => {\n if (!size) return\n const { tokens } = extras\n const token = tokens.size[size]\n const sizeNum = (isVariable(token) ? +token.val : size) as number\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\nconst variants = {\n fullscreen: {\n true: fullscreenStyle,\n },\n elevation: {\n '...size': getElevation,\n },\n} as const\n\nexport const YStack = styled(Stack, {\n flexDirection: 'column',\n name: 'YStack',\n variants,\n})\n\nexport const XStack = styled(Stack, {\n flexDirection: 'row',\n name: 'XStack',\n variants,\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 let num = 0\n if (val === true) {\n const val = getVariableValue(tokens.size['true'])\n if (typeof val === 'number') {\n num = val\n } else {\n num = 10\n }\n } else {\n num = +val\n }\n if (process.env.NODE_ENV === 'development') {\n if (num !== null && isNaN(num)) {\n // eslint-disable-next-line no-console\n console.warn('NaN shadow', num, val)\n }\n }\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,CACjE,MACA,WACG;AACH,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,QAAQ,OAAO,KAAK;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUO;AAMA,MAAM,eAAsD,CACjE,MACA,WACG;AACH,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,QAAQ,OAAO,KAAK,IAAI;AAC9B,QAAM,cAAW,wBAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAClD,SAAO,kBAAkB,SAAS,MAAM;AAC1C;AAEA,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,WAAW;AAAA,EACf,YAAY;AAAA,IACV,MAAM;AAAA,EACR;AAAA,EACA,WAAW;AAAA,IACT,WAAW;AAAA,EACb;AACF;AAEO,MAAM,aAAS,oBAAO,mBAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,aAAS,oBAAO,mBAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,aAAS;AAAA,EACpB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,cAAc;AAAA,IACd,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,oBAAoB,CAC/B,KACA,EAAE,OAAO,OAAO,MACb;AACH,MAAI,MAAM;AACV,MAAI,QAAQ,MAAM;AAChB,UAAMA,WAAM,8BAAiB,OAAO,KAAK,MAAM,CAAC;AAChD,QAAI,OAAOA,SAAQ,UAAU;AAC3B,YAAMA;AAAA,IACR,OAAO;AACL,YAAM;AAAA,IACR;AAAA,EACF,OAAO;AACL,UAAM,CAAC;AAAA,EACT;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAE9B,cAAQ,KAAK,cAAc,KAAK,GAAG;AAAA,IACrC;AAAA,EACF;AACA,QAAM,CAAC,QAAQ,YAAY,IAAI,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;",
|
|
6
6
|
"names": ["val"]
|
|
7
7
|
}
|
package/dist/cjs/variants.js
CHANGED
|
@@ -36,6 +36,7 @@ const elevate = {
|
|
|
36
36
|
};
|
|
37
37
|
const bordered = (val, { props }) => {
|
|
38
38
|
return {
|
|
39
|
+
// TODO size it with size in '...size'
|
|
39
40
|
borderWidth: typeof val === "number" ? val : 1,
|
|
40
41
|
borderColor: "$borderColor",
|
|
41
42
|
...props.hoverTheme && {
|
|
@@ -59,7 +60,7 @@ const padded = {
|
|
|
59
60
|
true: (_, extras) => {
|
|
60
61
|
const { tokens, props } = extras;
|
|
61
62
|
return {
|
|
62
|
-
padding: tokens.space[props.size] || tokens.space["$
|
|
63
|
+
padding: tokens.space[props.size] || tokens.space["$true"]
|
|
63
64
|
};
|
|
64
65
|
}
|
|
65
66
|
};
|
|
@@ -67,7 +68,7 @@ const radiused = {
|
|
|
67
68
|
true: (_, extras) => {
|
|
68
69
|
const { tokens, props } = extras;
|
|
69
70
|
return {
|
|
70
|
-
borderRadius: tokens.radius[props.size] || tokens.radius["$
|
|
71
|
+
borderRadius: tokens.radius[props.size] || tokens.radius["$true"]
|
|
71
72
|
};
|
|
72
73
|
}
|
|
73
74
|
};
|
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": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n true: (_: boolean, extras: any) => {\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.hoverTheme && {\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n }),\n\n ...(props.pressTheme && {\n pressStyle: {\n borderColor: '$borderColorPress',\n },\n }),\n\n ...(props.focusTheme && {\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n }),\n }\n}\n\nexport const padded = {\n true: (_, extras) => {\n const { tokens, props } = extras\n return {\n padding: tokens.space[props.size] || tokens.space['$
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA6B;AAEtB,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAY,WAAgB;AACjC,eAAO,4BAAa,OAAO,MAAM,
|
|
4
|
+
"sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n true: (_: boolean, extras: any) => {\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.hoverTheme && {\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n }),\n\n ...(props.pressTheme && {\n pressStyle: {\n borderColor: '$borderColorPress',\n },\n }),\n\n ...(props.focusTheme && {\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n }),\n }\n}\n\nexport const padded = {\n true: (_, extras) => {\n const { tokens, props } = extras\n return {\n padding: tokens.space[props.size] || tokens.space['$true'],\n }\n },\n}\n\nexport const radiused = {\n true: (_, extras) => {\n const { tokens, props } = extras\n return {\n borderRadius: tokens.radius[props.size] || tokens.radius['$true'],\n }\n },\n}\n\nexport const circular = {\n true: (_, { props, tokens }) => {\n const size = tokens.size[props.size]\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 padding: 0,\n }\n },\n}\n\nexport const hoverTheme = {\n true: {\n hoverStyle: {\n backgroundColor: '$backgroundHover',\n borderColor: '$borderColorHover',\n },\n },\n false: {},\n}\n\nexport const pressTheme = {\n true: {\n pressStyle: {\n backgroundColor: '$backgroundPress',\n borderColor: '$borderColorPress',\n },\n },\n false: {},\n}\n\nexport const focusTheme = {\n true: {\n focusStyle: {\n backgroundColor: '$backgroundFocus',\n borderColor: '$borderColorFocus',\n },\n },\n false: {},\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA6B;AAEtB,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAY,WAAgB;AACjC,eAAO,4BAAa,OAAO,MAAM,MAAM,GAAG,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,CAAC,KAAuB,EAAE,MAAM,MAAM;AAC5D,SAAO;AAAA;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,IAEb,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,SAAS;AAAA,EACpB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,WAAO;AAAA,MACL,SAAS,OAAO,MAAM,MAAM,IAAI,KAAK,OAAO,MAAM,OAAO;AAAA,IAC3D;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,WAAO;AAAA,MACL,cAAc,OAAO,OAAO,MAAM,IAAI,KAAK,OAAO,OAAO,OAAO;AAAA,IAClE;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,EAAE,OAAO,OAAO,MAAM;AAC9B,UAAM,OAAO,OAAO,KAAK,MAAM,IAAI;AACnC,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Stacks.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Stacks.tsx"],
|
|
4
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 = YStackProps\nexport type ZStackProps = YStackProps\n\nexport const getElevation: SizeVariantSpreadFunction<StackProps> = (\n size,\n extras,\n) => {\n if (!size) return\n const { tokens } = extras\n const token = tokens.size[size]\n const sizeNum = (isVariable(token) ? +token.val : size) as number\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\nconst variants = {\n fullscreen: {\n true: fullscreenStyle,\n },\n elevation: {\n '...size': getElevation,\n },\n} as const\n\nexport const YStack = styled(Stack, {\n flexDirection: 'column',\n name: 'YStack',\n variants,\n})\n\nexport const XStack = styled(Stack, {\n flexDirection: 'row',\n name: 'XStack',\n variants,\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 let num = 0\n if (val === true) {\n const val = getVariableValue(tokens.size['true'])\n if (typeof val === 'number') {\n num = val\n } else {\n num = 10\n }\n } else {\n num = +val\n }\n if (process.env.NODE_ENV === 'development') {\n if (num !== null && isNaN(num)) {\n // eslint-disable-next-line no-console\n console.warn('NaN shadow', num, val)\n }\n }\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,EAIE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMA,MAAM,eAAsD,CACjE,MACA,WACG;AACH,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,QAAQ,OAAO,KAAK;
|
|
5
|
+
"mappings": "AAAA;AAAA,EAIE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMA,MAAM,eAAsD,CACjE,MACA,WACG;AACH,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,QAAQ,OAAO,KAAK,IAAI;AAC9B,QAAM,UAAW,WAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAClD,SAAO,kBAAkB,SAAS,MAAM;AAC1C;AAEA,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,WAAW;AAAA,EACf,YAAY;AAAA,IACV,MAAM;AAAA,EACR;AAAA,EACA,WAAW;AAAA,IACT,WAAW;AAAA,EACb;AACF;AAEO,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,cAAc;AAAA,IACd,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,oBAAoB,CAC/B,KACA,EAAE,OAAO,OAAO,MACb;AACH,MAAI,MAAM;AACV,MAAI,QAAQ,MAAM;AAChB,UAAMA,OAAM,iBAAiB,OAAO,KAAK,MAAM,CAAC;AAChD,QAAI,OAAOA,SAAQ,UAAU;AAC3B,YAAMA;AAAA,IACR,OAAO;AACL,YAAM;AAAA,IACR;AAAA,EACF,OAAO;AACL,UAAM,CAAC;AAAA,EACT;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAE9B,cAAQ,KAAK,cAAc,KAAK,GAAG;AAAA,IACrC;AAAA,EACF;AACA,QAAM,CAAC,QAAQ,YAAY,IAAI,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;",
|
|
6
6
|
"names": ["val"]
|
|
7
7
|
}
|
package/dist/esm/variants.js
CHANGED
|
@@ -6,6 +6,7 @@ const elevate = {
|
|
|
6
6
|
};
|
|
7
7
|
const bordered = (val, { props }) => {
|
|
8
8
|
return {
|
|
9
|
+
// TODO size it with size in '...size'
|
|
9
10
|
borderWidth: typeof val === "number" ? val : 1,
|
|
10
11
|
borderColor: "$borderColor",
|
|
11
12
|
...props.hoverTheme && {
|
|
@@ -29,7 +30,7 @@ const padded = {
|
|
|
29
30
|
true: (_, extras) => {
|
|
30
31
|
const { tokens, props } = extras;
|
|
31
32
|
return {
|
|
32
|
-
padding: tokens.space[props.size] || tokens.space["$
|
|
33
|
+
padding: tokens.space[props.size] || tokens.space["$true"]
|
|
33
34
|
};
|
|
34
35
|
}
|
|
35
36
|
};
|
|
@@ -37,7 +38,7 @@ const radiused = {
|
|
|
37
38
|
true: (_, extras) => {
|
|
38
39
|
const { tokens, props } = extras;
|
|
39
40
|
return {
|
|
40
|
-
borderRadius: tokens.radius[props.size] || tokens.radius["$
|
|
41
|
+
borderRadius: tokens.radius[props.size] || tokens.radius["$true"]
|
|
41
42
|
};
|
|
42
43
|
}
|
|
43
44
|
};
|
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": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n true: (_: boolean, extras: any) => {\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.hoverTheme && {\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n }),\n\n ...(props.pressTheme && {\n pressStyle: {\n borderColor: '$borderColorPress',\n },\n }),\n\n ...(props.focusTheme && {\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n }),\n }\n}\n\nexport const padded = {\n true: (_, extras) => {\n const { tokens, props } = extras\n return {\n padding: tokens.space[props.size] || tokens.space['$
|
|
5
|
-
"mappings": "AAAA,SAAS,oBAAoB;AAEtB,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAY,WAAgB;AACjC,WAAO,aAAa,OAAO,MAAM,
|
|
4
|
+
"sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n true: (_: boolean, extras: any) => {\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.hoverTheme && {\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n }),\n\n ...(props.pressTheme && {\n pressStyle: {\n borderColor: '$borderColorPress',\n },\n }),\n\n ...(props.focusTheme && {\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n }),\n }\n}\n\nexport const padded = {\n true: (_, extras) => {\n const { tokens, props } = extras\n return {\n padding: tokens.space[props.size] || tokens.space['$true'],\n }\n },\n}\n\nexport const radiused = {\n true: (_, extras) => {\n const { tokens, props } = extras\n return {\n borderRadius: tokens.radius[props.size] || tokens.radius['$true'],\n }\n },\n}\n\nexport const circular = {\n true: (_, { props, tokens }) => {\n const size = tokens.size[props.size]\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 padding: 0,\n }\n },\n}\n\nexport const hoverTheme = {\n true: {\n hoverStyle: {\n backgroundColor: '$backgroundHover',\n borderColor: '$borderColorHover',\n },\n },\n false: {},\n}\n\nexport const pressTheme = {\n true: {\n pressStyle: {\n backgroundColor: '$backgroundPress',\n borderColor: '$borderColorPress',\n },\n },\n false: {},\n}\n\nexport const focusTheme = {\n true: {\n focusStyle: {\n backgroundColor: '$backgroundFocus',\n borderColor: '$borderColorFocus',\n },\n },\n false: {},\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,oBAAoB;AAEtB,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAY,WAAgB;AACjC,WAAO,aAAa,OAAO,MAAM,MAAM,GAAG,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,CAAC,KAAuB,EAAE,MAAM,MAAM;AAC5D,SAAO;AAAA;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,IAEb,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,SAAS;AAAA,EACpB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,WAAO;AAAA,MACL,SAAS,OAAO,MAAM,MAAM,IAAI,KAAK,OAAO,MAAM,OAAO;AAAA,IAC3D;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,WAAO;AAAA,MACL,cAAc,OAAO,OAAO,MAAM,IAAI,KAAK,OAAO,OAAO,OAAO;AAAA,IAClE;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,EAAE,OAAO,OAAO,MAAM;AAC9B,UAAM,OAAO,OAAO,KAAK,MAAM,IAAI;AACnC,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Stacks.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Stacks.tsx"],
|
|
4
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 = YStackProps\nexport type ZStackProps = YStackProps\n\nexport const getElevation: SizeVariantSpreadFunction<StackProps> = (\n size,\n extras,\n) => {\n if (!size) return\n const { tokens } = extras\n const token = tokens.size[size]\n const sizeNum = (isVariable(token) ? +token.val : size) as number\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\nconst variants = {\n fullscreen: {\n true: fullscreenStyle,\n },\n elevation: {\n '...size': getElevation,\n },\n} as const\n\nexport const YStack = styled(Stack, {\n flexDirection: 'column',\n name: 'YStack',\n variants,\n})\n\nexport const XStack = styled(Stack, {\n flexDirection: 'row',\n name: 'XStack',\n variants,\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 let num = 0\n if (val === true) {\n const val = getVariableValue(tokens.size['true'])\n if (typeof val === 'number') {\n num = val\n } else {\n num = 10\n }\n } else {\n num = +val\n }\n if (process.env.NODE_ENV === 'development') {\n if (num !== null && isNaN(num)) {\n // eslint-disable-next-line no-console\n console.warn('NaN shadow', num, val)\n }\n }\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,EAIE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMA,MAAM,eAAsD,CACjE,MACA,WACG;AACH,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,QAAQ,OAAO,KAAK;
|
|
5
|
+
"mappings": "AAAA;AAAA,EAIE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMA,MAAM,eAAsD,CACjE,MACA,WACG;AACH,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,QAAQ,OAAO,KAAK,IAAI;AAC9B,QAAM,UAAW,WAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAClD,SAAO,kBAAkB,SAAS,MAAM;AAC1C;AAEA,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,WAAW;AAAA,EACf,YAAY;AAAA,IACV,MAAM;AAAA,EACR;AAAA,EACA,WAAW;AAAA,IACT,WAAW;AAAA,EACb;AACF;AAEO,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,cAAc;AAAA,IACd,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,oBAAoB,CAC/B,KACA,EAAE,OAAO,OAAO,MACb;AACH,MAAI,MAAM;AACV,MAAI,QAAQ,MAAM;AAChB,UAAMA,OAAM,iBAAiB,OAAO,KAAK,MAAM,CAAC;AAChD,QAAI,OAAOA,SAAQ,UAAU;AAC3B,YAAMA;AAAA,IACR,OAAO;AACL,YAAM;AAAA,IACR;AAAA,EACF,OAAO;AACL,UAAM,CAAC;AAAA,EACT;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAE9B,cAAQ,KAAK,cAAc,KAAK,GAAG;AAAA,IACrC;AAAA,EACF;AACA,QAAM,CAAC,QAAQ,YAAY,IAAI,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;",
|
|
6
6
|
"names": ["val"]
|
|
7
7
|
}
|
package/dist/jsx/variants.js
CHANGED
|
@@ -6,6 +6,7 @@ const elevate = {
|
|
|
6
6
|
};
|
|
7
7
|
const bordered = (val, { props }) => {
|
|
8
8
|
return {
|
|
9
|
+
// TODO size it with size in '...size'
|
|
9
10
|
borderWidth: typeof val === "number" ? val : 1,
|
|
10
11
|
borderColor: "$borderColor",
|
|
11
12
|
...props.hoverTheme && {
|
|
@@ -29,7 +30,7 @@ const padded = {
|
|
|
29
30
|
true: (_, extras) => {
|
|
30
31
|
const { tokens, props } = extras;
|
|
31
32
|
return {
|
|
32
|
-
padding: tokens.space[props.size] || tokens.space["$
|
|
33
|
+
padding: tokens.space[props.size] || tokens.space["$true"]
|
|
33
34
|
};
|
|
34
35
|
}
|
|
35
36
|
};
|
|
@@ -37,7 +38,7 @@ const radiused = {
|
|
|
37
38
|
true: (_, extras) => {
|
|
38
39
|
const { tokens, props } = extras;
|
|
39
40
|
return {
|
|
40
|
-
borderRadius: tokens.radius[props.size] || tokens.radius["$
|
|
41
|
+
borderRadius: tokens.radius[props.size] || tokens.radius["$true"]
|
|
41
42
|
};
|
|
42
43
|
}
|
|
43
44
|
};
|
package/dist/jsx/variants.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/variants.tsx"],
|
|
4
|
-
"sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n true: (_: boolean, extras: any) => {\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.hoverTheme && {\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n }),\n\n ...(props.pressTheme && {\n pressStyle: {\n borderColor: '$borderColorPress',\n },\n }),\n\n ...(props.focusTheme && {\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n }),\n }\n}\n\nexport const padded = {\n true: (_, extras) => {\n const { tokens, props } = extras\n return {\n padding: tokens.space[props.size] || tokens.space['$
|
|
5
|
-
"mappings": "AAAA,SAAS,oBAAoB;AAEtB,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAY,WAAgB;AACjC,WAAO,aAAa,OAAO,MAAM,
|
|
4
|
+
"sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n true: (_: boolean, extras: any) => {\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.hoverTheme && {\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n }),\n\n ...(props.pressTheme && {\n pressStyle: {\n borderColor: '$borderColorPress',\n },\n }),\n\n ...(props.focusTheme && {\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n }),\n }\n}\n\nexport const padded = {\n true: (_, extras) => {\n const { tokens, props } = extras\n return {\n padding: tokens.space[props.size] || tokens.space['$true'],\n }\n },\n}\n\nexport const radiused = {\n true: (_, extras) => {\n const { tokens, props } = extras\n return {\n borderRadius: tokens.radius[props.size] || tokens.radius['$true'],\n }\n },\n}\n\nexport const circular = {\n true: (_, { props, tokens }) => {\n const size = tokens.size[props.size]\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 padding: 0,\n }\n },\n}\n\nexport const hoverTheme = {\n true: {\n hoverStyle: {\n backgroundColor: '$backgroundHover',\n borderColor: '$borderColorHover',\n },\n },\n false: {},\n}\n\nexport const pressTheme = {\n true: {\n pressStyle: {\n backgroundColor: '$backgroundPress',\n borderColor: '$borderColorPress',\n },\n },\n false: {},\n}\n\nexport const focusTheme = {\n true: {\n focusStyle: {\n backgroundColor: '$backgroundFocus',\n borderColor: '$borderColorFocus',\n },\n },\n false: {},\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,oBAAoB;AAEtB,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAY,WAAgB;AACjC,WAAO,aAAa,OAAO,MAAM,MAAM,GAAG,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,CAAC,KAAuB,EAAE,MAAM,MAAM;AAC5D,SAAO;AAAA;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,IAEb,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,SAAS;AAAA,EACpB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,WAAO;AAAA,MACL,SAAS,OAAO,MAAM,MAAM,IAAI,KAAK,OAAO,MAAM,OAAO;AAAA,IAC3D;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,WAAO;AAAA,MACL,cAAc,OAAO,OAAO,MAAM,IAAI,KAAK,OAAO,OAAO,OAAO;AAAA,IAClE;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,EAAE,OAAO,OAAO,MAAM;AAC9B,UAAM,OAAO,OAAO,KAAK,MAAM,IAAI;AACnC,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/stacks",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.9",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@tamagui/core": "^1.1.
|
|
32
|
+
"@tamagui/core": "^1.1.9"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": "*",
|
|
36
36
|
"react-dom": "*"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@tamagui/build": "^1.1.
|
|
40
|
-
"@tamagui/get-button-sized": "^1.1.
|
|
39
|
+
"@tamagui/build": "^1.1.9",
|
|
40
|
+
"@tamagui/get-button-sized": "^1.1.9",
|
|
41
41
|
"react": "^18.2.0",
|
|
42
42
|
"react-dom": "^18.2.0"
|
|
43
43
|
},
|
package/src/variants.tsx
CHANGED
|
@@ -36,7 +36,7 @@ export const padded = {
|
|
|
36
36
|
true: (_, extras) => {
|
|
37
37
|
const { tokens, props } = extras
|
|
38
38
|
return {
|
|
39
|
-
padding: tokens.space[props.size] || tokens.space['$
|
|
39
|
+
padding: tokens.space[props.size] || tokens.space['$true'],
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
42
|
}
|
|
@@ -45,7 +45,7 @@ export const radiused = {
|
|
|
45
45
|
true: (_, extras) => {
|
|
46
46
|
const { tokens, props } = extras
|
|
47
47
|
return {
|
|
48
|
-
borderRadius: tokens.radius[props.size] || tokens.radius['$
|
|
48
|
+
borderRadius: tokens.radius[props.size] || tokens.radius['$true'],
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
51
|
}
|