@tamagui/demos 1.7.7 → 1.7.8
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/SelectDemo.js +1 -1
- package/dist/cjs/SelectDemo.js.map +2 -2
- package/dist/cjs/TokensDemo.js +2 -2
- package/dist/cjs/TokensDemo.js.map +2 -2
- package/dist/esm/SelectDemo.js +1 -1
- package/dist/esm/SelectDemo.js.map +2 -2
- package/dist/esm/SelectDemo.mjs +1 -1
- package/dist/esm/SelectDemo.mjs.map +2 -2
- package/dist/esm/TokensDemo.js +2 -2
- package/dist/esm/TokensDemo.js.map +2 -2
- package/dist/esm/TokensDemo.mjs +2 -2
- package/dist/esm/TokensDemo.mjs.map +2 -2
- package/dist/jsx/SelectDemo.js +1 -1
- package/dist/jsx/SelectDemo.js.map +1 -1
- package/dist/jsx/SelectDemo.mjs +1 -1
- package/dist/jsx/SelectDemo.mjs.map +1 -1
- package/dist/jsx/TokensDemo.js +2 -2
- package/dist/jsx/TokensDemo.js.map +2 -2
- package/dist/jsx/TokensDemo.mjs +2 -2
- package/dist/jsx/TokensDemo.mjs.map +2 -2
- package/package.json +17 -17
- package/src/SelectDemo.tsx +1 -1
- package/src/TokensDemo.tsx +2 -2
package/dist/cjs/SelectDemo.js
CHANGED
|
@@ -48,7 +48,7 @@ function SelectDemo() {
|
|
|
48
48
|
}
|
|
49
49
|
)
|
|
50
50
|
] }),
|
|
51
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Group, { space: "
|
|
51
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Group, { space: "$0", children: [
|
|
52
52
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Label, { children: "Fruits" }),
|
|
53
53
|
items.map((item, i) => {
|
|
54
54
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Item, { index: i, value: item.name.toLowerCase(), children: [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n const [val, setVal] = useState('apple')\n return (\n <Select id=\"food\" value={val} onValueChange={setVal}>\n <Select.Trigger w={180} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Sheet modal dismissOnSnapToBottom>\n <Sheet.Frame>\n <Sheet.ScrollView>\n <Adapt.Contents />\n </Sheet.ScrollView>\n </Sheet.Frame>\n <Sheet.Overlay />\n </Sheet>\n </Adapt>\n\n <Select.Content zIndex={200000}>\n <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronUp size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$background', '$backgroundTransparent']}\n br=\"$4\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group space=\"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUQ;AAVR,0BAA8C;AAC9C,mBAAyB;AACzB,qBAA6C;AAC7C,6BAA+B;AAExB,SAAS,aAAa;AAC3B,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,OAAO;AACtC,SACE,6CAAC,yBAAO,IAAG,QAAO,OAAO,KAAK,eAAe,QAC3C;AAAA,gDAAC,sBAAO,SAAP,EAAe,GAAG,KAAK,WAAW,iCACjC,sDAAC,sBAAO,OAAP,EAAa,aAAY,aAAY,GACxC;AAAA,IAEA,4CAAC,wBAAM,MAAK,MAAK,UAAS,SACxB,uDAAC,wBAAM,OAAK,MAAC,uBAAqB,MAChC;AAAA,kDAAC,qBAAM,OAAN,EACC,sDAAC,qBAAM,YAAN,EACC,sDAAC,qBAAM,UAAN,EAAe,GAClB,GACF;AAAA,MACA,4CAAC,qBAAM,SAAN,EAAc;AAAA,OACjB,GACF;AAAA,IAEA,6CAAC,sBAAO,SAAP,EAAe,QAAQ,KACtB;AAAA,mDAAC,sBAAO,gBAAP,EAAsB,IAAG,UAAS,IAAG,UAAS,KAAI,YAAW,GAAE,QAAO,GAAE,MACvE;AAAA,oDAAC,yBAAO,IAAI,IACV,sDAAC,iCAAU,MAAM,IAAI,GACvB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,CAAC,GAAG,CAAC;AAAA,YACZ,KAAK,CAAC,GAAG,CAAC;AAAA,YACV,YAAU;AAAA,YACV,QAAQ,CAAC,eAAe,wBAAwB;AAAA,YAChD,IAAG;AAAA;AAAA,QACL;AAAA,SACF;AAAA,MAEA,4CAAC,sBAAO,UAAP,EAAgB,UAAU,KACzB,uDAAC,sBAAO,OAAP,EAAa,OAAM,
|
|
4
|
+
"sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n const [val, setVal] = useState('apple')\n return (\n <Select id=\"food\" value={val} onValueChange={setVal}>\n <Select.Trigger w={180} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Sheet modal dismissOnSnapToBottom>\n <Sheet.Frame>\n <Sheet.ScrollView>\n <Adapt.Contents />\n </Sheet.ScrollView>\n </Sheet.Frame>\n <Sheet.Overlay />\n </Sheet>\n </Adapt>\n\n <Select.Content zIndex={200000}>\n <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronUp size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$background', '$backgroundTransparent']}\n br=\"$4\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group space=\"$0\">\n <Select.Label>Fruits</Select.Label>\n {items.map((item, i) => {\n return (\n <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n <Select.ItemText>{item.name}</Select.ItemText>\n <Select.ItemIndicator ml=\"auto\">\n <Check size={16} />\n </Select.ItemIndicator>\n </Select.Item>\n )\n })}\n </Select.Group>\n </Select.Viewport>\n\n <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronDown size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$backgroundTransparent', '$background']}\n br=\"$4\"\n />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n )\n}\n\nconst items = [\n { name: 'Apple' },\n { name: 'Pear' },\n { name: 'Blackberry' },\n { name: 'Peach' },\n { name: 'Apricot' },\n { name: 'Melon' },\n { name: 'Honeydew' },\n { name: 'Starfruit' },\n { name: 'Blueberry' },\n { name: 'Rasberry' },\n { name: 'Strawberry' },\n { name: 'Mango' },\n { name: 'Pineapple' },\n { name: 'Lime' },\n { name: 'Lemon' },\n { name: 'Coconut' },\n { name: 'Guava' },\n { name: 'Papaya' },\n { name: 'Orange' },\n { name: 'Grape' },\n { name: 'Jackfruit' },\n { name: 'Durian' },\n]\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/TokensDemo.js
CHANGED
|
@@ -65,8 +65,8 @@ function SizeSection({ section }) {
|
|
|
65
65
|
const allTokens = (0, import_core.getConfig)().tokens;
|
|
66
66
|
const tokens = allTokens[section.startsWith("space") ? "space" : section];
|
|
67
67
|
const st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1);
|
|
68
|
-
const spaceTokens = st.filter((t) => parseFloat(t) >= 0
|
|
69
|
-
const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0
|
|
68
|
+
const spaceTokens = st.filter((t) => parseFloat(t) >= 0);
|
|
69
|
+
const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
|
|
70
70
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { f: 1, space: true, children: [
|
|
71
71
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H2, { children: "Sizes" }),
|
|
72
72
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { w: "100%", space: "$2", separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TokensDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup ai=\"center\" als=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <XGroup.Item key={key}>\n <Button\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n </XGroup.Item>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BI;AA7BJ,kBAAkC;AAClC,mBAAyB;AACzB,qBAA8E;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAkB,MAAM;AAEtD,SACE,6CAAC,yBAAO,OAAK,MACX;AAAA,gDAAC,yBAAO,IAAG,UAAS,KAAI,UACrB,mBAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAAM;AAC/B,aACE,4CAAC,sBAAO,MAAP,EACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,YAAY,MAAM,WAAW;AAAA,UACpC,YAAW;AAAA,UACX,SAAS,MAAM,WAAW,GAAG;AAAA,UAE5B;AAAA;AAAA,MACH,KARgB,GASlB;AAAA,IAEJ,CAAC,GACH;AAAA,KAEE,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,4CAAC,eAAY,SAAkB;AAAA,KAC5D;AAEJ;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,gBAAY,uBAAU,EAAE;AAC9B,QAAM,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO;AACxE,QAAM,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG;AACtF,QAAM,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,
|
|
4
|
+
"sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup ai=\"center\" als=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <XGroup.Item key={key}>\n <Button\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n </XGroup.Item>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0)\n const spaceTokensNegative = st\n .filter((t) => parseFloat(t) < 0)\n .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n return (\n <YStack f={1} space>\n <H2>Sizes</H2>\n <YStack w=\"100%\" space=\"$2\" separator={<Separator />}>\n {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n (token) => {\n return (\n <XStack w=\"100%\" ai=\"center\" key={token}>\n <YStack w=\"25%\">\n <H3 size=\"$6\">${token}</H3>\n </YStack>\n <YStack w=\"20%\">\n <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n </YStack>\n <Square\n size={tokens[token]?.val}\n bc=\"$color5\"\n {...(section === 'spaceNegative' && {\n bc: '$red5',\n size: -tokens[\n spaceTokensNegative.find(\n (t) => parseFloat(t) === -parseFloat(token)\n ) ?? token\n ]?.val,\n })}\n {...(section === 'radius' && {\n // @ts-ignore\n size: allTokens.size[token]?.val,\n br: tokens[token]?.val,\n })}\n />\n </XStack>\n )\n }\n )}\n </YStack>\n </YStack>\n )\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BI;AA7BJ,kBAAkC;AAClC,mBAAyB;AACzB,qBAA8E;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAkB,MAAM;AAEtD,SACE,6CAAC,yBAAO,OAAK,MACX;AAAA,gDAAC,yBAAO,IAAG,UAAS,KAAI,UACrB,mBAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAAM;AAC/B,aACE,4CAAC,sBAAO,MAAP,EACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,YAAY,MAAM,WAAW;AAAA,UACpC,YAAW;AAAA,UACX,SAAS,MAAM,WAAW,GAAG;AAAA,UAE5B;AAAA;AAAA,MACH,KARgB,GASlB;AAAA,IAEJ,CAAC,GACH;AAAA,KAEE,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,4CAAC,eAAY,SAAkB;AAAA,KAC5D;AAEJ;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,gBAAY,uBAAU,EAAE;AAC9B,QAAM,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO;AACxE,QAAM,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG;AACtF,QAAM,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC;AACvD,QAAM,sBAAsB,GACzB,OAAO,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAC/B,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,KAAK,CAAE;AAE1D,SACE,6CAAC,yBAAO,GAAG,GAAG,OAAK,MACjB;AAAA,gDAAC,qBAAG,mBAAK;AAAA,IACT,4CAAC,yBAAO,GAAE,QAAO,OAAM,MAAK,WAAW,4CAAC,4BAAU,GAC9C,uBAAY,kBAAkB,sBAAsB,aAAa;AAAA,MACjE,CAAC,UAAU;AArErB;AAsEY,eACE,6CAAC,yBAAO,GAAE,QAAO,IAAG,UAClB;AAAA,sDAAC,yBAAO,GAAE,OACR,uDAAC,qBAAG,MAAK,MAAK;AAAA;AAAA,YAAE;AAAA,aAAM,GACxB;AAAA,UACA,4CAAC,yBAAO,GAAE,OACR,uDAAC,qBAAG,MAAK,MAAM;AAAA,yBAAO,KAAK,MAAZ,mBAAe;AAAA,YAAI;AAAA,aAAE,GACtC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM,YAAO,KAAK,MAAZ,mBAAe;AAAA,cACrB,IAAG;AAAA,cACF,GAAI,YAAY,mBAAmB;AAAA,gBAClC,IAAI;AAAA,gBACJ,MAAM,GAAC,YACL,oBAAoB;AAAA,kBAClB,CAAC,MAAM,WAAW,CAAC,MAAM,CAAC,WAAW,KAAK;AAAA,gBAC5C,KAAK,KACP,MAJO,mBAIJ;AAAA,cACL;AAAA,cACC,GAAI,YAAY,YAAY;AAAA;AAAA,gBAE3B,OAAM,eAAU,KAAK,KAAK,MAApB,mBAAuB;AAAA,gBAC7B,KAAI,YAAO,KAAK,MAAZ,mBAAe;AAAA,cACrB;AAAA;AAAA,UACF;AAAA,aAvBgC,KAwBlC;AAAA,MAEJ;AAAA,IACF,GACF;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/SelectDemo.js
CHANGED
|
@@ -25,7 +25,7 @@ function SelectDemo() {
|
|
|
25
25
|
}
|
|
26
26
|
)
|
|
27
27
|
] }),
|
|
28
|
-
/* @__PURE__ */ jsx(Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ jsxs(Select.Group, { space: "
|
|
28
|
+
/* @__PURE__ */ jsx(Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ jsxs(Select.Group, { space: "$0", children: [
|
|
29
29
|
/* @__PURE__ */ jsx(Select.Label, { children: "Fruits" }),
|
|
30
30
|
items.map((item, i) => {
|
|
31
31
|
return /* @__PURE__ */ jsxs(Select.Item, { index: i, value: item.name.toLowerCase(), children: [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n const [val, setVal] = useState('apple')\n return (\n <Select id=\"food\" value={val} onValueChange={setVal}>\n <Select.Trigger w={180} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Sheet modal dismissOnSnapToBottom>\n <Sheet.Frame>\n <Sheet.ScrollView>\n <Adapt.Contents />\n </Sheet.ScrollView>\n </Sheet.Frame>\n <Sheet.Overlay />\n </Sheet>\n </Adapt>\n\n <Select.Content zIndex={200000}>\n <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronUp size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$background', '$backgroundTransparent']}\n br=\"$4\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group space=\"
|
|
5
|
-
"mappings": "AAUQ,cAIA,YAJA;AAVR,SAAS,OAAO,aAAa,iBAAiB;AAC9C,SAAS,gBAAgB;AACzB,SAAS,OAAO,QAAQ,OAAO,cAAc;AAC7C,SAAS,sBAAsB;AAExB,SAAS,aAAa;AAC3B,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AACtC,SACE,qBAAC,UAAO,IAAG,QAAO,OAAO,KAAK,eAAe,QAC3C;AAAA,wBAAC,OAAO,SAAP,EAAe,GAAG,KAAK,WAAW,aACjC,8BAAC,OAAO,OAAP,EAAa,aAAY,aAAY,GACxC;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,SACxB,+BAAC,SAAM,OAAK,MAAC,uBAAqB,MAChC;AAAA,0BAAC,MAAM,OAAN,EACC,8BAAC,MAAM,YAAN,EACC,8BAAC,MAAM,UAAN,EAAe,GAClB,GACF;AAAA,MACA,oBAAC,MAAM,SAAN,EAAc;AAAA,OACjB,GACF;AAAA,IAEA,qBAAC,OAAO,SAAP,EAAe,QAAQ,KACtB;AAAA,2BAAC,OAAO,gBAAP,EAAsB,IAAG,UAAS,IAAG,UAAS,KAAI,YAAW,GAAE,QAAO,GAAE,MACvE;AAAA,4BAAC,UAAO,IAAI,IACV,8BAAC,aAAU,MAAM,IAAI,GACvB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,CAAC,GAAG,CAAC;AAAA,YACZ,KAAK,CAAC,GAAG,CAAC;AAAA,YACV,YAAU;AAAA,YACV,QAAQ,CAAC,eAAe,wBAAwB;AAAA,YAChD,IAAG;AAAA;AAAA,QACL;AAAA,SACF;AAAA,MAEA,oBAAC,OAAO,UAAP,EAAgB,UAAU,KACzB,+BAAC,OAAO,OAAP,EAAa,OAAM,
|
|
4
|
+
"sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n const [val, setVal] = useState('apple')\n return (\n <Select id=\"food\" value={val} onValueChange={setVal}>\n <Select.Trigger w={180} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Sheet modal dismissOnSnapToBottom>\n <Sheet.Frame>\n <Sheet.ScrollView>\n <Adapt.Contents />\n </Sheet.ScrollView>\n </Sheet.Frame>\n <Sheet.Overlay />\n </Sheet>\n </Adapt>\n\n <Select.Content zIndex={200000}>\n <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronUp size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$background', '$backgroundTransparent']}\n br=\"$4\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group space=\"$0\">\n <Select.Label>Fruits</Select.Label>\n {items.map((item, i) => {\n return (\n <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n <Select.ItemText>{item.name}</Select.ItemText>\n <Select.ItemIndicator ml=\"auto\">\n <Check size={16} />\n </Select.ItemIndicator>\n </Select.Item>\n )\n })}\n </Select.Group>\n </Select.Viewport>\n\n <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronDown size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$backgroundTransparent', '$background']}\n br=\"$4\"\n />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n )\n}\n\nconst items = [\n { name: 'Apple' },\n { name: 'Pear' },\n { name: 'Blackberry' },\n { name: 'Peach' },\n { name: 'Apricot' },\n { name: 'Melon' },\n { name: 'Honeydew' },\n { name: 'Starfruit' },\n { name: 'Blueberry' },\n { name: 'Rasberry' },\n { name: 'Strawberry' },\n { name: 'Mango' },\n { name: 'Pineapple' },\n { name: 'Lime' },\n { name: 'Lemon' },\n { name: 'Coconut' },\n { name: 'Guava' },\n { name: 'Papaya' },\n { name: 'Orange' },\n { name: 'Grape' },\n { name: 'Jackfruit' },\n { name: 'Durian' },\n]\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/SelectDemo.mjs
CHANGED
|
@@ -25,7 +25,7 @@ function SelectDemo() {
|
|
|
25
25
|
}
|
|
26
26
|
)
|
|
27
27
|
] }),
|
|
28
|
-
/* @__PURE__ */ jsx(Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ jsxs(Select.Group, { space: "
|
|
28
|
+
/* @__PURE__ */ jsx(Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ jsxs(Select.Group, { space: "$0", children: [
|
|
29
29
|
/* @__PURE__ */ jsx(Select.Label, { children: "Fruits" }),
|
|
30
30
|
items.map((item, i) => {
|
|
31
31
|
return /* @__PURE__ */ jsxs(Select.Item, { index: i, value: item.name.toLowerCase(), children: [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n const [val, setVal] = useState('apple')\n return (\n <Select id=\"food\" value={val} onValueChange={setVal}>\n <Select.Trigger w={180} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Sheet modal dismissOnSnapToBottom>\n <Sheet.Frame>\n <Sheet.ScrollView>\n <Adapt.Contents />\n </Sheet.ScrollView>\n </Sheet.Frame>\n <Sheet.Overlay />\n </Sheet>\n </Adapt>\n\n <Select.Content zIndex={200000}>\n <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronUp size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$background', '$backgroundTransparent']}\n br=\"$4\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group space=\"
|
|
5
|
-
"mappings": "AAUQ,cAIA,YAJA;AAVR,SAAS,OAAO,aAAa,iBAAiB;AAC9C,SAAS,gBAAgB;AACzB,SAAS,OAAO,QAAQ,OAAO,cAAc;AAC7C,SAAS,sBAAsB;AAExB,SAAS,aAAa;AAC3B,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AACtC,SACE,qBAAC,UAAO,IAAG,QAAO,OAAO,KAAK,eAAe,QAC3C;AAAA,wBAAC,OAAO,SAAP,EAAe,GAAG,KAAK,WAAW,aACjC,8BAAC,OAAO,OAAP,EAAa,aAAY,aAAY,GACxC;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,SACxB,+BAAC,SAAM,OAAK,MAAC,uBAAqB,MAChC;AAAA,0BAAC,MAAM,OAAN,EACC,8BAAC,MAAM,YAAN,EACC,8BAAC,MAAM,UAAN,EAAe,GAClB,GACF;AAAA,MACA,oBAAC,MAAM,SAAN,EAAc;AAAA,OACjB,GACF;AAAA,IAEA,qBAAC,OAAO,SAAP,EAAe,QAAQ,KACtB;AAAA,2BAAC,OAAO,gBAAP,EAAsB,IAAG,UAAS,IAAG,UAAS,KAAI,YAAW,GAAE,QAAO,GAAE,MACvE;AAAA,4BAAC,UAAO,IAAI,IACV,8BAAC,aAAU,MAAM,IAAI,GACvB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,CAAC,GAAG,CAAC;AAAA,YACZ,KAAK,CAAC,GAAG,CAAC;AAAA,YACV,YAAU;AAAA,YACV,QAAQ,CAAC,eAAe,wBAAwB;AAAA,YAChD,IAAG;AAAA;AAAA,QACL;AAAA,SACF;AAAA,MAEA,oBAAC,OAAO,UAAP,EAAgB,UAAU,KACzB,+BAAC,OAAO,OAAP,EAAa,OAAM,
|
|
4
|
+
"sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n const [val, setVal] = useState('apple')\n return (\n <Select id=\"food\" value={val} onValueChange={setVal}>\n <Select.Trigger w={180} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Sheet modal dismissOnSnapToBottom>\n <Sheet.Frame>\n <Sheet.ScrollView>\n <Adapt.Contents />\n </Sheet.ScrollView>\n </Sheet.Frame>\n <Sheet.Overlay />\n </Sheet>\n </Adapt>\n\n <Select.Content zIndex={200000}>\n <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronUp size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$background', '$backgroundTransparent']}\n br=\"$4\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group space=\"$0\">\n <Select.Label>Fruits</Select.Label>\n {items.map((item, i) => {\n return (\n <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n <Select.ItemText>{item.name}</Select.ItemText>\n <Select.ItemIndicator ml=\"auto\">\n <Check size={16} />\n </Select.ItemIndicator>\n </Select.Item>\n )\n })}\n </Select.Group>\n </Select.Viewport>\n\n <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronDown size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$backgroundTransparent', '$background']}\n br=\"$4\"\n />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n )\n}\n\nconst items = [\n { name: 'Apple' },\n { name: 'Pear' },\n { name: 'Blackberry' },\n { name: 'Peach' },\n { name: 'Apricot' },\n { name: 'Melon' },\n { name: 'Honeydew' },\n { name: 'Starfruit' },\n { name: 'Blueberry' },\n { name: 'Rasberry' },\n { name: 'Strawberry' },\n { name: 'Mango' },\n { name: 'Pineapple' },\n { name: 'Lime' },\n { name: 'Lemon' },\n { name: 'Coconut' },\n { name: 'Guava' },\n { name: 'Papaya' },\n { name: 'Orange' },\n { name: 'Grape' },\n { name: 'Jackfruit' },\n { name: 'Durian' },\n]\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/TokensDemo.js
CHANGED
|
@@ -42,8 +42,8 @@ function SizeSection({ section }) {
|
|
|
42
42
|
const allTokens = getConfig().tokens;
|
|
43
43
|
const tokens = allTokens[section.startsWith("space") ? "space" : section];
|
|
44
44
|
const st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1);
|
|
45
|
-
const spaceTokens = st.filter((t) => parseFloat(t) >= 0
|
|
46
|
-
const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0
|
|
45
|
+
const spaceTokens = st.filter((t) => parseFloat(t) >= 0);
|
|
46
|
+
const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
|
|
47
47
|
return /* @__PURE__ */ jsxs(YStack, { f: 1, space: true, children: [
|
|
48
48
|
/* @__PURE__ */ jsx(H2, { children: "Sizes" }),
|
|
49
49
|
/* @__PURE__ */ jsx(YStack, { w: "100%", space: "$2", separator: /* @__PURE__ */ jsx(Separator, {}), children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TokensDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup ai=\"center\" als=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <XGroup.Item key={key}>\n <Button\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n </XGroup.Item>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0
|
|
5
|
-
"mappings": "AA6BI,SAKU,KALV;AA7BJ,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,UAAO,IAAG,UAAS,KAAI,UACrB,mBAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAAM;AAC/B,aACE,oBAAC,OAAO,MAAP,EACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,YAAY,MAAM,WAAW;AAAA,UACpC,YAAW;AAAA,UACX,SAAS,MAAM,WAAW,GAAG;AAAA,UAE5B;AAAA;AAAA,MACH,KARgB,GASlB;AAAA,IAEJ,CAAC,GACH;AAAA,KAEE,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,oBAAC,eAAY,SAAkB;AAAA,KAC5D;AAEJ;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,YAAY,UAAU,EAAE;AAC9B,QAAM,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO;AACxE,QAAM,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG;AACtF,QAAM,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,
|
|
4
|
+
"sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup ai=\"center\" als=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <XGroup.Item key={key}>\n <Button\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n </XGroup.Item>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0)\n const spaceTokensNegative = st\n .filter((t) => parseFloat(t) < 0)\n .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n return (\n <YStack f={1} space>\n <H2>Sizes</H2>\n <YStack w=\"100%\" space=\"$2\" separator={<Separator />}>\n {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n (token) => {\n return (\n <XStack w=\"100%\" ai=\"center\" key={token}>\n <YStack w=\"25%\">\n <H3 size=\"$6\">${token}</H3>\n </YStack>\n <YStack w=\"20%\">\n <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n </YStack>\n <Square\n size={tokens[token]?.val}\n bc=\"$color5\"\n {...(section === 'spaceNegative' && {\n bc: '$red5',\n size: -tokens[\n spaceTokensNegative.find(\n (t) => parseFloat(t) === -parseFloat(token)\n ) ?? token\n ]?.val,\n })}\n {...(section === 'radius' && {\n // @ts-ignore\n size: allTokens.size[token]?.val,\n br: tokens[token]?.val,\n })}\n />\n </XStack>\n )\n }\n )}\n </YStack>\n </YStack>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/TokensDemo.mjs
CHANGED
|
@@ -42,8 +42,8 @@ function SizeSection({ section }) {
|
|
|
42
42
|
const allTokens = getConfig().tokens;
|
|
43
43
|
const tokens = allTokens[section.startsWith("space") ? "space" : section];
|
|
44
44
|
const st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1);
|
|
45
|
-
const spaceTokens = st.filter((t) => parseFloat(t) >= 0
|
|
46
|
-
const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0
|
|
45
|
+
const spaceTokens = st.filter((t) => parseFloat(t) >= 0);
|
|
46
|
+
const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
|
|
47
47
|
return /* @__PURE__ */ jsxs(YStack, { f: 1, space: true, children: [
|
|
48
48
|
/* @__PURE__ */ jsx(H2, { children: "Sizes" }),
|
|
49
49
|
/* @__PURE__ */ jsx(YStack, { w: "100%", space: "$2", separator: /* @__PURE__ */ jsx(Separator, {}), children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TokensDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup ai=\"center\" als=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <XGroup.Item key={key}>\n <Button\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n </XGroup.Item>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0
|
|
5
|
-
"mappings": "AA6BI,SAKU,KALV;AA7BJ,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,UAAO,IAAG,UAAS,KAAI,UACrB,mBAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAAM;AAC/B,aACE,oBAAC,OAAO,MAAP,EACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,YAAY,MAAM,WAAW;AAAA,UACpC,YAAW;AAAA,UACX,SAAS,MAAM,WAAW,GAAG;AAAA,UAE5B;AAAA;AAAA,MACH,KARgB,GASlB;AAAA,IAEJ,CAAC,GACH;AAAA,KAEE,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,oBAAC,eAAY,SAAkB;AAAA,KAC5D;AAEJ;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,YAAY,UAAU,EAAE;AAC9B,QAAM,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO;AACxE,QAAM,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG;AACtF,QAAM,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,
|
|
4
|
+
"sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup ai=\"center\" als=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <XGroup.Item key={key}>\n <Button\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n </XGroup.Item>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0)\n const spaceTokensNegative = st\n .filter((t) => parseFloat(t) < 0)\n .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n return (\n <YStack f={1} space>\n <H2>Sizes</H2>\n <YStack w=\"100%\" space=\"$2\" separator={<Separator />}>\n {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n (token) => {\n return (\n <XStack w=\"100%\" ai=\"center\" key={token}>\n <YStack w=\"25%\">\n <H3 size=\"$6\">${token}</H3>\n </YStack>\n <YStack w=\"20%\">\n <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n </YStack>\n <Square\n size={tokens[token]?.val}\n bc=\"$color5\"\n {...(section === 'spaceNegative' && {\n bc: '$red5',\n size: -tokens[\n spaceTokensNegative.find(\n (t) => parseFloat(t) === -parseFloat(token)\n ) ?? token\n ]?.val,\n })}\n {...(section === 'radius' && {\n // @ts-ignore\n size: allTokens.size[token]?.val,\n br: tokens[token]?.val,\n })}\n />\n </XStack>\n )\n }\n )}\n </YStack>\n </YStack>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/SelectDemo.js
CHANGED
|
@@ -21,7 +21,7 @@ function SelectDemo() {
|
|
|
21
21
|
br="$4"
|
|
22
22
|
/>
|
|
23
23
|
</Select.ScrollUpButton>
|
|
24
|
-
<Select.Viewport minWidth={200}><Select.Group space="
|
|
24
|
+
<Select.Viewport minWidth={200}><Select.Group space="$0">
|
|
25
25
|
<Select.Label>Fruits</Select.Label>
|
|
26
26
|
{items.map((item, i) => {
|
|
27
27
|
return <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n const [val, setVal] = useState('apple')\n return (\n <Select id=\"food\" value={val} onValueChange={setVal}>\n <Select.Trigger w={180} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Sheet modal dismissOnSnapToBottom>\n <Sheet.Frame>\n <Sheet.ScrollView>\n <Adapt.Contents />\n </Sheet.ScrollView>\n </Sheet.Frame>\n <Sheet.Overlay />\n </Sheet>\n </Adapt>\n\n <Select.Content zIndex={200000}>\n <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronUp size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$background', '$backgroundTransparent']}\n br=\"$4\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group space=\"
|
|
4
|
+
"sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n const [val, setVal] = useState('apple')\n return (\n <Select id=\"food\" value={val} onValueChange={setVal}>\n <Select.Trigger w={180} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Sheet modal dismissOnSnapToBottom>\n <Sheet.Frame>\n <Sheet.ScrollView>\n <Adapt.Contents />\n </Sheet.ScrollView>\n </Sheet.Frame>\n <Sheet.Overlay />\n </Sheet>\n </Adapt>\n\n <Select.Content zIndex={200000}>\n <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronUp size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$background', '$backgroundTransparent']}\n br=\"$4\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group space=\"$0\">\n <Select.Label>Fruits</Select.Label>\n {items.map((item, i) => {\n return (\n <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n <Select.ItemText>{item.name}</Select.ItemText>\n <Select.ItemIndicator ml=\"auto\">\n <Check size={16} />\n </Select.ItemIndicator>\n </Select.Item>\n )\n })}\n </Select.Group>\n </Select.Viewport>\n\n <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronDown size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$backgroundTransparent', '$background']}\n br=\"$4\"\n />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n )\n}\n\nconst items = [\n { name: 'Apple' },\n { name: 'Pear' },\n { name: 'Blackberry' },\n { name: 'Peach' },\n { name: 'Apricot' },\n { name: 'Melon' },\n { name: 'Honeydew' },\n { name: 'Starfruit' },\n { name: 'Blueberry' },\n { name: 'Rasberry' },\n { name: 'Strawberry' },\n { name: 'Mango' },\n { name: 'Pineapple' },\n { name: 'Lime' },\n { name: 'Lemon' },\n { name: 'Coconut' },\n { name: 'Guava' },\n { name: 'Papaya' },\n { name: 'Orange' },\n { name: 'Grape' },\n { name: 'Jackfruit' },\n { name: 'Durian' },\n]\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/SelectDemo.mjs
CHANGED
|
@@ -21,7 +21,7 @@ function SelectDemo() {
|
|
|
21
21
|
br="$4"
|
|
22
22
|
/>
|
|
23
23
|
</Select.ScrollUpButton>
|
|
24
|
-
<Select.Viewport minWidth={200}><Select.Group space="
|
|
24
|
+
<Select.Viewport minWidth={200}><Select.Group space="$0">
|
|
25
25
|
<Select.Label>Fruits</Select.Label>
|
|
26
26
|
{items.map((item, i) => {
|
|
27
27
|
return <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n const [val, setVal] = useState('apple')\n return (\n <Select id=\"food\" value={val} onValueChange={setVal}>\n <Select.Trigger w={180} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Sheet modal dismissOnSnapToBottom>\n <Sheet.Frame>\n <Sheet.ScrollView>\n <Adapt.Contents />\n </Sheet.ScrollView>\n </Sheet.Frame>\n <Sheet.Overlay />\n </Sheet>\n </Adapt>\n\n <Select.Content zIndex={200000}>\n <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronUp size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$background', '$backgroundTransparent']}\n br=\"$4\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group space=\"
|
|
4
|
+
"sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n const [val, setVal] = useState('apple')\n return (\n <Select id=\"food\" value={val} onValueChange={setVal}>\n <Select.Trigger w={180} iconAfter={ChevronDown}>\n <Select.Value placeholder=\"Something\" />\n </Select.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Sheet modal dismissOnSnapToBottom>\n <Sheet.Frame>\n <Sheet.ScrollView>\n <Adapt.Contents />\n </Sheet.ScrollView>\n </Sheet.Frame>\n <Sheet.Overlay />\n </Sheet>\n </Adapt>\n\n <Select.Content zIndex={200000}>\n <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronUp size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$background', '$backgroundTransparent']}\n br=\"$4\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport minWidth={200}>\n <Select.Group space=\"$0\">\n <Select.Label>Fruits</Select.Label>\n {items.map((item, i) => {\n return (\n <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n <Select.ItemText>{item.name}</Select.ItemText>\n <Select.ItemIndicator ml=\"auto\">\n <Check size={16} />\n </Select.ItemIndicator>\n </Select.Item>\n )\n })}\n </Select.Group>\n </Select.Viewport>\n\n <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n <YStack zi={10}>\n <ChevronDown size={20} />\n </YStack>\n <LinearGradient\n start={[0, 0]}\n end={[0, 1]}\n fullscreen\n colors={['$backgroundTransparent', '$background']}\n br=\"$4\"\n />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n )\n}\n\nconst items = [\n { name: 'Apple' },\n { name: 'Pear' },\n { name: 'Blackberry' },\n { name: 'Peach' },\n { name: 'Apricot' },\n { name: 'Melon' },\n { name: 'Honeydew' },\n { name: 'Starfruit' },\n { name: 'Blueberry' },\n { name: 'Rasberry' },\n { name: 'Strawberry' },\n { name: 'Mango' },\n { name: 'Pineapple' },\n { name: 'Lime' },\n { name: 'Lemon' },\n { name: 'Coconut' },\n { name: 'Guava' },\n { name: 'Papaya' },\n { name: 'Orange' },\n { name: 'Grape' },\n { name: 'Jackfruit' },\n { name: 'Durian' },\n]\n"],
|
|
5
5
|
"mappings": "AAAA,SAAS,OAAO,aAAa,iBAAiB;AAC9C,SAAS,gBAAgB;AACzB,SAAS,OAAO,QAAQ,OAAO,cAAc;AAC7C,SAAS,sBAAsB;AAExB,SAAS,aAAa;AAC3B,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AACtC,SACE,CAAC,OAAO,GAAG,OAAO,OAAO,KAAK,eAAe;AAAA,IAC3C,CAAC,OAAO,QAAQ,GAAG,KAAK,WAAW,aACjC,CAAC,OAAO,MAAM,YAAY,YAAY,EACxC,EAFC,OAAO;AAAA,IAIR,CAAC,MAAM,KAAK,KAAK,SAAS,QACxB,CAAC,MAAM,MAAM;AAAA,MACX,CAAC,MAAM,MACL,CAAC,MAAM,WACL,CAAC,MAAM,SAAS,EAClB,EAFC,MAAM,WAGT,EAJC,MAAM;AAAA,MAKP,CAAC,MAAM,QAAQ;AAAA,IACjB,EAPC,MAQH,EATC;AAAA,IAWD,CAAC,OAAO,QAAQ,QAAQ;AAAA,MACtB,CAAC,OAAO,eAAe,GAAG,SAAS,GAAG,SAAS,IAAI,WAAW,EAAE,OAAO,EAAE;AAAA,QACvE,CAAC,OAAO,IAAI,IACV,CAAC,UAAU,MAAM,IAAI,EACvB,EAFC;AAAA,QAGD,CAAC;AAAA,UACC,OAAO,CAAC,GAAG,CAAC;AAAA,UACZ,KAAK,CAAC,GAAG,CAAC;AAAA,UACV;AAAA,UACA,QAAQ,CAAC,eAAe,wBAAwB;AAAA,UAChD,GAAG;AAAA,QACL;AAAA,MACF,EAXC,OAAO;AAAA,MAaR,CAAC,OAAO,SAAS,UAAU,KACzB,CAAC,OAAO,MAAM,MAAM;AAAA,QAClB,CAAC,OAAO,MAAM,MAAM,EAAnB,OAAO;AAAA,SACP,MAAM,IAAI,CAAC,MAAM,MAAM;AACtB,iBACE,CAAC,OAAO,KAAK,OAAO,GAAG,KAAK,KAAK,MAAM,OAAO,KAAK,KAAK,YAAY;AAAA,YAClE,CAAC,OAAO,UAAU,KAAK,KAAK,EAA3B,OAAO;AAAA,YACR,CAAC,OAAO,cAAc,GAAG,OACvB,CAAC,MAAM,MAAM,IAAI,EACnB,EAFC,OAAO;AAAA,UAGV,EALC,OAAO;AAAA,QAOZ,CAAC;AAAA,MACH,EAZC,OAAO,MAaV,EAdC,OAAO;AAAA,MAgBR,CAAC,OAAO,iBAAiB,GAAG,SAAS,GAAG,SAAS,IAAI,WAAW,EAAE,OAAO,EAAE;AAAA,QACzE,CAAC,OAAO,IAAI,IACV,CAAC,YAAY,MAAM,IAAI,EACzB,EAFC;AAAA,QAGD,CAAC;AAAA,UACC,OAAO,CAAC,GAAG,CAAC;AAAA,UACZ,KAAK,CAAC,GAAG,CAAC;AAAA,UACV;AAAA,UACA,QAAQ,CAAC,0BAA0B,aAAa;AAAA,UAChD,GAAG;AAAA,QACL;AAAA,MACF,EAXC,OAAO;AAAA,IAYV,EA1CC,OAAO;AAAA,EA2CV,EA3DC;AA6DL;AAEA,MAAM,QAAQ;AAAA,EACZ,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,SAAS;AACnB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/TokensDemo.js
CHANGED
|
@@ -37,8 +37,8 @@ function SizeSection({ section }) {
|
|
|
37
37
|
const allTokens = getConfig().tokens;
|
|
38
38
|
const tokens = allTokens[section.startsWith("space") ? "space" : section];
|
|
39
39
|
const st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1);
|
|
40
|
-
const spaceTokens = st.filter((t) => parseFloat(t) >= 0
|
|
41
|
-
const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0
|
|
40
|
+
const spaceTokens = st.filter((t) => parseFloat(t) >= 0);
|
|
41
|
+
const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
|
|
42
42
|
return <YStack f={1} space>
|
|
43
43
|
<H2>Sizes</H2>
|
|
44
44
|
<YStack w="100%" space="$2" separator={<Separator />}>{(section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TokensDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup ai=\"center\" als=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <XGroup.Item key={key}>\n <Button\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n </XGroup.Item>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0
|
|
5
|
-
"mappings": "AAAA,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,GAAG,SAAS,IAAI,UACrB,SAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAAM;AAC/B,aACE,CAAC,OAAO,KAAK,KAAK,KAChB,CAAC;AAAA,QACC,KAAK;AAAA,QACL,OAAO,YAAY,MAAM,WAAW;AAAA,QACpC,WAAW;AAAA,QACX,SAAS,MAAM,WAAW,GAAG;AAAA,QAE5B,KACH,EAPC,OAQH,EATC,OAAO;AAAA,IAWZ,CAAC,EACH,EAfC;AAAA,MAiBC,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,CAAC,YAAY,SAAS,SAAS;AAAA,EAC5D,EAtBC;AAwBL;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,YAAY,UAAU,EAAE;AAC9B,QAAM,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO;AACxE,QAAM,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG;AACtF,QAAM,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,
|
|
4
|
+
"sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup ai=\"center\" als=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <XGroup.Item key={key}>\n <Button\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n </XGroup.Item>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0)\n const spaceTokensNegative = st\n .filter((t) => parseFloat(t) < 0)\n .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n return (\n <YStack f={1} space>\n <H2>Sizes</H2>\n <YStack w=\"100%\" space=\"$2\" separator={<Separator />}>\n {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n (token) => {\n return (\n <XStack w=\"100%\" ai=\"center\" key={token}>\n <YStack w=\"25%\">\n <H3 size=\"$6\">${token}</H3>\n </YStack>\n <YStack w=\"20%\">\n <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n </YStack>\n <Square\n size={tokens[token]?.val}\n bc=\"$color5\"\n {...(section === 'spaceNegative' && {\n bc: '$red5',\n size: -tokens[\n spaceTokensNegative.find(\n (t) => parseFloat(t) === -parseFloat(token)\n ) ?? token\n ]?.val,\n })}\n {...(section === 'radius' && {\n // @ts-ignore\n size: allTokens.size[token]?.val,\n br: tokens[token]?.val,\n })}\n />\n </XStack>\n )\n }\n )}\n </YStack>\n </YStack>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,GAAG,SAAS,IAAI,UACrB,SAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAAM;AAC/B,aACE,CAAC,OAAO,KAAK,KAAK,KAChB,CAAC;AAAA,QACC,KAAK;AAAA,QACL,OAAO,YAAY,MAAM,WAAW;AAAA,QACpC,WAAW;AAAA,QACX,SAAS,MAAM,WAAW,GAAG;AAAA,QAE5B,KACH,EAPC,OAQH,EATC,OAAO;AAAA,IAWZ,CAAC,EACH,EAfC;AAAA,MAiBC,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,CAAC,YAAY,SAAS,SAAS;AAAA,EAC5D,EAtBC;AAwBL;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,YAAY,UAAU,EAAE;AAC9B,QAAM,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO;AACxE,QAAM,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG;AACtF,QAAM,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC;AACvD,QAAM,sBAAsB,GACzB,OAAO,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAC/B,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,KAAK,CAAE;AAE1D,SACE,CAAC,OAAO,GAAG,GAAG;AAAA,IACZ,CAAC,GAAG,KAAK,EAAR;AAAA,IACD,CAAC,OAAO,EAAE,OAAO,MAAM,KAAK,WAAW,CAAC,UAAU,MAC9C,YAAY,kBAAkB,sBAAsB,aAAa;AAAA,MACjE,CAAC,UAAU;AACT,eACE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK;AAAA,UAChC,CAAC,OAAO,EAAE,MACR,CAAC,GAAG,KAAK;AAAA,aAAK;AAAA,aAAE;AAAA,UAAM,EAArB,GACH,EAFC;AAAA,UAGD,CAAC,OAAO,EAAE,MACR,CAAC,GAAG,KAAK;AAAA,aAAM,OAAO,KAAK,GAAG;AAAA,aAAI;AAAA,UAAE,EAAnC,GACH,EAFC;AAAA,UAGD,CAAC;AAAA,YACC,MAAM,OAAO,KAAK,GAAG;AAAA,YACrB,GAAG;AAAA,gBACE,YAAY,mBAAmB;AAAA,cAClC,IAAI;AAAA,cACJ,MAAM,CAAC,OACL,oBAAoB;AAAA,gBAClB,CAAC,MAAM,WAAW,CAAC,MAAM,CAAC,WAAW,KAAK;AAAA,cAC5C,KAAK,KACP,GAAG;AAAA,YACL;AAAA,gBACK,YAAY,YAAY;AAAA;AAAA,cAE3B,MAAM,UAAU,KAAK,KAAK,GAAG;AAAA,cAC7B,IAAI,OAAO,KAAK,GAAG;AAAA,YACrB;AAAA,UACF;AAAA,QACF,EAxBC;AAAA,MA0BL;AAAA,IACF,EACF,EAhCC;AAAA,EAiCH,EAnCC;AAqCL;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/TokensDemo.mjs
CHANGED
|
@@ -37,8 +37,8 @@ function SizeSection({ section }) {
|
|
|
37
37
|
const allTokens = getConfig().tokens;
|
|
38
38
|
const tokens = allTokens[section.startsWith("space") ? "space" : section];
|
|
39
39
|
const st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1);
|
|
40
|
-
const spaceTokens = st.filter((t) => parseFloat(t) >= 0
|
|
41
|
-
const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0
|
|
40
|
+
const spaceTokens = st.filter((t) => parseFloat(t) >= 0);
|
|
41
|
+
const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
|
|
42
42
|
return <YStack f={1} space>
|
|
43
43
|
<H2>Sizes</H2>
|
|
44
44
|
<YStack w="100%" space="$2" separator={<Separator />}>{(section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TokensDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup ai=\"center\" als=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <XGroup.Item key={key}>\n <Button\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n </XGroup.Item>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0
|
|
5
|
-
"mappings": "AAAA,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,GAAG,SAAS,IAAI,UACrB,SAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAAM;AAC/B,aACE,CAAC,OAAO,KAAK,KAAK,KAChB,CAAC;AAAA,QACC,KAAK;AAAA,QACL,OAAO,YAAY,MAAM,WAAW;AAAA,QACpC,WAAW;AAAA,QACX,SAAS,MAAM,WAAW,GAAG;AAAA,QAE5B,KACH,EAPC,OAQH,EATC,OAAO;AAAA,IAWZ,CAAC,EACH,EAfC;AAAA,MAiBC,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,CAAC,YAAY,SAAS,SAAS;AAAA,EAC5D,EAtBC;AAwBL;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,YAAY,UAAU,EAAE;AAC9B,QAAM,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO;AACxE,QAAM,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG;AACtF,QAAM,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,
|
|
4
|
+
"sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup ai=\"center\" als=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <XGroup.Item key={key}>\n <Button\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n </XGroup.Item>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0)\n const spaceTokensNegative = st\n .filter((t) => parseFloat(t) < 0)\n .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n return (\n <YStack f={1} space>\n <H2>Sizes</H2>\n <YStack w=\"100%\" space=\"$2\" separator={<Separator />}>\n {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n (token) => {\n return (\n <XStack w=\"100%\" ai=\"center\" key={token}>\n <YStack w=\"25%\">\n <H3 size=\"$6\">${token}</H3>\n </YStack>\n <YStack w=\"20%\">\n <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n </YStack>\n <Square\n size={tokens[token]?.val}\n bc=\"$color5\"\n {...(section === 'spaceNegative' && {\n bc: '$red5',\n size: -tokens[\n spaceTokensNegative.find(\n (t) => parseFloat(t) === -parseFloat(token)\n ) ?? token\n ]?.val,\n })}\n {...(section === 'radius' && {\n // @ts-ignore\n size: allTokens.size[token]?.val,\n br: tokens[token]?.val,\n })}\n />\n </XStack>\n )\n }\n )}\n </YStack>\n </YStack>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,GAAG,SAAS,IAAI,UACrB,SAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAAM;AAC/B,aACE,CAAC,OAAO,KAAK,KAAK,KAChB,CAAC;AAAA,QACC,KAAK;AAAA,QACL,OAAO,YAAY,MAAM,WAAW;AAAA,QACpC,WAAW;AAAA,QACX,SAAS,MAAM,WAAW,GAAG;AAAA,QAE5B,KACH,EAPC,OAQH,EATC,OAAO;AAAA,IAWZ,CAAC,EACH,EAfC;AAAA,MAiBC,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,CAAC,YAAY,SAAS,SAAS;AAAA,EAC5D,EAtBC;AAwBL;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,YAAY,UAAU,EAAE;AAC9B,QAAM,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO;AACxE,QAAM,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG;AACtF,QAAM,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC;AACvD,QAAM,sBAAsB,GACzB,OAAO,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAC/B,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,KAAK,CAAE;AAE1D,SACE,CAAC,OAAO,GAAG,GAAG;AAAA,IACZ,CAAC,GAAG,KAAK,EAAR;AAAA,IACD,CAAC,OAAO,EAAE,OAAO,MAAM,KAAK,WAAW,CAAC,UAAU,MAC9C,YAAY,kBAAkB,sBAAsB,aAAa;AAAA,MACjE,CAAC,UAAU;AACT,eACE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK;AAAA,UAChC,CAAC,OAAO,EAAE,MACR,CAAC,GAAG,KAAK;AAAA,aAAK;AAAA,aAAE;AAAA,UAAM,EAArB,GACH,EAFC;AAAA,UAGD,CAAC,OAAO,EAAE,MACR,CAAC,GAAG,KAAK;AAAA,aAAM,OAAO,KAAK,GAAG;AAAA,aAAI;AAAA,UAAE,EAAnC,GACH,EAFC;AAAA,UAGD,CAAC;AAAA,YACC,MAAM,OAAO,KAAK,GAAG;AAAA,YACrB,GAAG;AAAA,gBACE,YAAY,mBAAmB;AAAA,cAClC,IAAI;AAAA,cACJ,MAAM,CAAC,OACL,oBAAoB;AAAA,gBAClB,CAAC,MAAM,WAAW,CAAC,MAAM,CAAC,WAAW,KAAK;AAAA,cAC5C,KAAK,KACP,GAAG;AAAA,YACL;AAAA,gBACK,YAAY,YAAY;AAAA;AAAA,cAE3B,MAAM,UAAU,KAAK,KAAK,GAAG;AAAA,cAC7B,IAAI,OAAO,KAAK,GAAG;AAAA,YACrB;AAAA,UACF;AAAA,QACF,EAxBC;AAAA,MA0BL;AAAA,IACF,EACF,EAhCC;AAAA,EAiCH,EAnCC;AAqCL;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/demos",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.8",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -28,28 +28,28 @@
|
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@tamagui/avatar": "1.7.
|
|
32
|
-
"@tamagui/button": "1.7.
|
|
33
|
-
"@tamagui/config": "1.7.
|
|
34
|
-
"@tamagui/core": "1.7.
|
|
35
|
-
"@tamagui/list-item": "1.7.
|
|
36
|
-
"@tamagui/logo": "1.7.
|
|
37
|
-
"@tamagui/menu": "1.7.
|
|
38
|
-
"@tamagui/popover": "1.7.
|
|
39
|
-
"@tamagui/progress": "1.7.
|
|
40
|
-
"@tamagui/radio-group": "1.7.
|
|
41
|
-
"@tamagui/select": "1.7.
|
|
42
|
-
"@tamagui/sheet": "1.7.
|
|
43
|
-
"@tamagui/slider": "1.7.
|
|
44
|
-
"@tamagui/stacks": "1.7.
|
|
45
|
-
"tamagui": "1.7.
|
|
31
|
+
"@tamagui/avatar": "1.7.8",
|
|
32
|
+
"@tamagui/button": "1.7.8",
|
|
33
|
+
"@tamagui/config": "1.7.8",
|
|
34
|
+
"@tamagui/core": "1.7.8",
|
|
35
|
+
"@tamagui/list-item": "1.7.8",
|
|
36
|
+
"@tamagui/logo": "1.7.8",
|
|
37
|
+
"@tamagui/menu": "1.7.8",
|
|
38
|
+
"@tamagui/popover": "1.7.8",
|
|
39
|
+
"@tamagui/progress": "1.7.8",
|
|
40
|
+
"@tamagui/radio-group": "1.7.8",
|
|
41
|
+
"@tamagui/select": "1.7.8",
|
|
42
|
+
"@tamagui/sheet": "1.7.8",
|
|
43
|
+
"@tamagui/slider": "1.7.8",
|
|
44
|
+
"@tamagui/stacks": "1.7.8",
|
|
45
|
+
"tamagui": "1.7.8"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": "*",
|
|
49
49
|
"react-dom": "*"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@tamagui/build": "1.7.
|
|
52
|
+
"@tamagui/build": "1.7.8",
|
|
53
53
|
"react": "^18.2.0",
|
|
54
54
|
"react-dom": "^18.2.0"
|
|
55
55
|
},
|
package/src/SelectDemo.tsx
CHANGED
package/src/TokensDemo.tsx
CHANGED
|
@@ -57,9 +57,9 @@ function SizeSection({ section }: { section: Section }) {
|
|
|
57
57
|
const allTokens = getConfig().tokens
|
|
58
58
|
const tokens = allTokens[section.startsWith('space') ? 'space' : section]
|
|
59
59
|
const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))
|
|
60
|
-
const spaceTokens = st.filter((t) => parseFloat(t) >= 0
|
|
60
|
+
const spaceTokens = st.filter((t) => parseFloat(t) >= 0)
|
|
61
61
|
const spaceTokensNegative = st
|
|
62
|
-
.filter((t) => parseFloat(t) < 0
|
|
62
|
+
.filter((t) => parseFloat(t) < 0)
|
|
63
63
|
.sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))
|
|
64
64
|
|
|
65
65
|
return (
|