@tamagui/demos 1.15.24 → 1.15.25
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/package.json +18 -18
- package/dist/cjs/AccordionDemo.js +0 -42
- package/dist/cjs/AccordionDemo.js.map +0 -7
- package/dist/cjs/DrawerDemo.js +0 -79
- package/dist/cjs/DrawerDemo.js.map +0 -7
- package/dist/cjs/FeatherIconsDemo.js +0 -67
- package/dist/cjs/FeatherIconsDemo.js.map +0 -7
- package/dist/cjs/MenuDemo.js +0 -62
- package/dist/cjs/MenuDemo.js.map +0 -7
- package/dist/cjs/PopperDemo.js +0 -111
- package/dist/cjs/PopperDemo.js.map +0 -7
- package/dist/cjs/TabsAnimatedDemo.js +0 -167
- package/dist/cjs/TabsAnimatedDemo.js.map +0 -7
- package/dist/cjs/TabsHighlightedDemo.js +0 -184
- package/dist/cjs/TabsHighlightedDemo.js.map +0 -7
- package/dist/cjs/TabsUnderlinedDemo.js +0 -176
- package/dist/cjs/TabsUnderlinedDemo.js.map +0 -7
- package/dist/cjs/TamaguiLogo.js +0 -127
- package/dist/cjs/TamaguiLogo.js.map +0 -7
- package/dist/cjs/fixtures/zstack.js +0 -2
- package/dist/cjs/fixtures/zstack.js.map +0 -7
- package/dist/cjs/snapshots/zstack.js +0 -48
- package/dist/cjs/snapshots/zstack.js.map +0 -7
- package/dist/cjs/tests/zstack.js +0 -48
- package/dist/cjs/tests/zstack.js.map +0 -7
- package/dist/esm/AccordionDemo.js +0 -18
- package/dist/esm/AccordionDemo.js.map +0 -7
- package/dist/esm/AccordionDemo.mjs +0 -18
- package/dist/esm/AccordionDemo.mjs.map +0 -7
- package/dist/esm/DrawerDemo.js +0 -55
- package/dist/esm/DrawerDemo.js.map +0 -7
- package/dist/esm/FeatherIconsDemo.js +0 -33
- package/dist/esm/FeatherIconsDemo.js.map +0 -7
- package/dist/esm/FeatherIconsDemo.mjs +0 -33
- package/dist/esm/FeatherIconsDemo.mjs.map +0 -7
- package/dist/esm/MenuDemo.js +0 -38
- package/dist/esm/MenuDemo.js.map +0 -7
- package/dist/esm/PopperDemo.js +0 -97
- package/dist/esm/PopperDemo.js.map +0 -7
- package/dist/esm/TabsAnimatedDemo.js +0 -143
- package/dist/esm/TabsAnimatedDemo.js.map +0 -7
- package/dist/esm/TabsAnimatedDemo.mjs +0 -143
- package/dist/esm/TabsAnimatedDemo.mjs.map +0 -7
- package/dist/esm/TabsHighlightedDemo.js +0 -168
- package/dist/esm/TabsHighlightedDemo.js.map +0 -7
- package/dist/esm/TabsHighlightedDemo.mjs +0 -168
- package/dist/esm/TabsHighlightedDemo.mjs.map +0 -7
- package/dist/esm/TabsUnderlinedDemo.js +0 -160
- package/dist/esm/TabsUnderlinedDemo.js.map +0 -7
- package/dist/esm/TabsUnderlinedDemo.mjs +0 -160
- package/dist/esm/TabsUnderlinedDemo.mjs.map +0 -7
- package/dist/esm/TamaguiLogo.js +0 -96
- package/dist/esm/TamaguiLogo.js.map +0 -7
- package/dist/esm/fixtures/zstack.js +0 -1
- package/dist/esm/fixtures/zstack.js.map +0 -7
- package/dist/esm/snapshots/zstack.js +0 -24
- package/dist/esm/snapshots/zstack.js.map +0 -7
- package/dist/esm/tests/zstack.js +0 -24
- package/dist/esm/tests/zstack.js.map +0 -7
- package/dist/jsx/AccordionDemo.js +0 -17
- package/dist/jsx/AccordionDemo.js.map +0 -7
- package/dist/jsx/AccordionDemo.mjs +0 -17
- package/dist/jsx/AccordionDemo.mjs.map +0 -7
- package/dist/jsx/DrawerDemo.js +0 -18
- package/dist/jsx/DrawerDemo.js.map +0 -7
- package/dist/jsx/FeatherIconsDemo.js +0 -32
- package/dist/jsx/FeatherIconsDemo.js.map +0 -7
- package/dist/jsx/FeatherIconsDemo.mjs +0 -32
- package/dist/jsx/FeatherIconsDemo.mjs.map +0 -7
- package/dist/jsx/MenuDemo.js +0 -15
- package/dist/jsx/MenuDemo.js.map +0 -7
- package/dist/jsx/PopperDemo.js +0 -41
- package/dist/jsx/PopperDemo.js.map +0 -7
- package/dist/jsx/TabsAnimatedDemo.js +0 -114
- package/dist/jsx/TabsAnimatedDemo.js.map +0 -7
- package/dist/jsx/TabsAnimatedDemo.mjs +0 -114
- package/dist/jsx/TabsAnimatedDemo.mjs.map +0 -7
- package/dist/jsx/TabsHighlightedDemo.js +0 -137
- package/dist/jsx/TabsHighlightedDemo.js.map +0 -7
- package/dist/jsx/TabsHighlightedDemo.mjs +0 -137
- package/dist/jsx/TabsHighlightedDemo.mjs.map +0 -7
- package/dist/jsx/TabsUnderlinedDemo.js +0 -133
- package/dist/jsx/TabsUnderlinedDemo.js.map +0 -7
- package/dist/jsx/TabsUnderlinedDemo.mjs +0 -133
- package/dist/jsx/TabsUnderlinedDemo.mjs.map +0 -7
- package/dist/jsx/TamaguiLogo.js +0 -42
- package/dist/jsx/TamaguiLogo.js.map +0 -7
- package/dist/jsx/fixtures/zstack.js +0 -1
- package/dist/jsx/fixtures/zstack.js.map +0 -7
- package/dist/jsx/snapshots/zstack.js +0 -11
- package/dist/jsx/snapshots/zstack.js.map +0 -7
- package/dist/jsx/tests/zstack.js +0 -11
- package/dist/jsx/tests/zstack.js.map +0 -7
- package/types/AccordionDemo.d.ts.map +0 -1
- package/types/DrawerDemo.d.ts.map +0 -1
- package/types/FeatherIconsDemo.d.ts.map +0 -1
- package/types/MenuDemo.d.ts.map +0 -1
- package/types/PopperDemo.d.ts.map +0 -1
- package/types/TabsHighlightedDemo.d.ts.map +0 -1
- package/types/TabsUnderlinedDemo.d.ts.map +0 -1
package/dist/cjs/tests/zstack.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var zstack_exports = {};
|
|
20
|
-
__export(zstack_exports, {
|
|
21
|
-
Crosshairs: () => Crosshairs
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(zstack_exports);
|
|
24
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
-
var import_tamagui = require("tamagui");
|
|
26
|
-
const Crosshairs = () => {
|
|
27
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.ZStack, {
|
|
28
|
-
ai: "center",
|
|
29
|
-
jc: "center",
|
|
30
|
-
bc: "green",
|
|
31
|
-
fullscreen: true,
|
|
32
|
-
zi: 1e11,
|
|
33
|
-
children: [
|
|
34
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
|
|
35
|
-
borderColor: "red"
|
|
36
|
-
}),
|
|
37
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
|
|
38
|
-
vertical: true,
|
|
39
|
-
borderColor: "red"
|
|
40
|
-
})
|
|
41
|
-
]
|
|
42
|
-
});
|
|
43
|
-
};
|
|
44
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
45
|
-
0 && (module.exports = {
|
|
46
|
-
Crosshairs
|
|
47
|
-
});
|
|
48
|
-
//# sourceMappingURL=zstack.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/tests/zstack.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Separator, ZStack } from 'tamagui'\n\nexport const Crosshairs = () => {\n return (\n <ZStack ai=\"center\" jc=\"center\" bc=\"green\" fullscreen zi={100000000000}>\n <Separator borderColor=\"red\" />\n <Separator vertical borderColor=\"red\" />\n </ZStack>\n )\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAkC;AAE3B,MAAM,aAAa,MAAM;AAC9B,SACE,6CAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,IAAG;AAAA,IAAQ,YAAU;AAAA,IAAC,IAAI;AAAA,IACxD;AAAA,kDAAC;AAAA,QAAU,aAAY;AAAA,OAAM;AAAA,MAC7B,4CAAC;AAAA,QAAU,UAAQ;AAAA,QAAC,aAAY;AAAA,OAAM;AAAA;AAAA,GACxC;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Accordion, Paragraph } from "tamagui";
|
|
3
|
-
function AccordionDemo() {
|
|
4
|
-
return /* @__PURE__ */ jsxs(Accordion, { orientation: "horizontal", width: "$20", type: "multiple", children: [
|
|
5
|
-
/* @__PURE__ */ jsxs(Accordion.Item, { value: "a1", children: [
|
|
6
|
-
/* @__PURE__ */ jsx(Accordion.Trigger, { children: /* @__PURE__ */ jsx(Paragraph, { children: "1. Take a cold shower" }) }),
|
|
7
|
-
/* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Paragraph, { children: "Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue." }) })
|
|
8
|
-
] }),
|
|
9
|
-
/* @__PURE__ */ jsxs(Accordion.Item, { value: "a2", children: [
|
|
10
|
-
/* @__PURE__ */ jsx(Accordion.Trigger, { children: /* @__PURE__ */ jsx(Paragraph, { children: "2: Eat 4 eggs" }) }),
|
|
11
|
-
/* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Paragraph, { children: "Eggs have been a dietary staple since time immemorial and there\u2019s good reason for their continued presence in our menus and meals." }) })
|
|
12
|
-
] })
|
|
13
|
-
] });
|
|
14
|
-
}
|
|
15
|
-
export {
|
|
16
|
-
AccordionDemo
|
|
17
|
-
};
|
|
18
|
-
//# sourceMappingURL=AccordionDemo.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/AccordionDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Accordion, Paragraph } from 'tamagui'\n\nexport function AccordionDemo() {\n return (\n <Accordion orientation=\"horizontal\" width=\"$20\" type=\"multiple\">\n <Accordion.Item value=\"a1\">\n <Accordion.Trigger>\n <Paragraph>1. Take a cold shower</Paragraph>\n </Accordion.Trigger>\n <Accordion.Content>\n <Paragraph>\n Cold showers can help reduce inflammation, relieve pain, improve circulation,\n lower stress levels, and reduce muscle soreness and fatigue.\n </Paragraph>\n </Accordion.Content>\n </Accordion.Item>\n\n <Accordion.Item value=\"a2\">\n <Accordion.Trigger>\n <Paragraph>2: Eat 4 eggs</Paragraph>\n </Accordion.Trigger>\n <Accordion.Content>\n <Paragraph>\n Eggs have been a dietary staple since time immemorial and there\u2019s good reason\n for their continued presence in our menus and meals.\n </Paragraph>\n </Accordion.Content>\n </Accordion.Item>\n </Accordion>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAKM,SAEI,KAFJ;AALN,SAAS,WAAW,iBAAiB;AAE9B,SAAS,gBAAgB;AAC9B,SACE,qBAAC,aAAU,aAAY,cAAa,OAAM,OAAM,MAAK,YACnD;AAAA,yBAAC,UAAU,MAAV,EAAe,OAAM,MACpB;AAAA,0BAAC,UAAU,SAAV,EACC,8BAAC,aAAU,mCAAqB,GAClC;AAAA,MACA,oBAAC,UAAU,SAAV,EACC,8BAAC,aAAU,wJAGX,GACF;AAAA,OACF;AAAA,IAEA,qBAAC,UAAU,MAAV,EAAe,OAAM,MACpB;AAAA,0BAAC,UAAU,SAAV,EACC,8BAAC,aAAU,2BAAa,GAC1B;AAAA,MACA,oBAAC,UAAU,SAAV,EACC,8BAAC,aAAU,qJAGX,GACF;AAAA,OACF;AAAA,KACF;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Accordion, Paragraph } from "tamagui";
|
|
3
|
-
function AccordionDemo() {
|
|
4
|
-
return /* @__PURE__ */ jsxs(Accordion, { orientation: "horizontal", width: "$20", type: "multiple", children: [
|
|
5
|
-
/* @__PURE__ */ jsxs(Accordion.Item, { value: "a1", children: [
|
|
6
|
-
/* @__PURE__ */ jsx(Accordion.Trigger, { children: /* @__PURE__ */ jsx(Paragraph, { children: "1. Take a cold shower" }) }),
|
|
7
|
-
/* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Paragraph, { children: "Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue." }) })
|
|
8
|
-
] }),
|
|
9
|
-
/* @__PURE__ */ jsxs(Accordion.Item, { value: "a2", children: [
|
|
10
|
-
/* @__PURE__ */ jsx(Accordion.Trigger, { children: /* @__PURE__ */ jsx(Paragraph, { children: "2: Eat 4 eggs" }) }),
|
|
11
|
-
/* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Paragraph, { children: "Eggs have been a dietary staple since time immemorial and there\u2019s good reason for their continued presence in our menus and meals." }) })
|
|
12
|
-
] })
|
|
13
|
-
] });
|
|
14
|
-
}
|
|
15
|
-
export {
|
|
16
|
-
AccordionDemo
|
|
17
|
-
};
|
|
18
|
-
//# sourceMappingURL=AccordionDemo.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/AccordionDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Accordion, Paragraph } from 'tamagui'\n\nexport function AccordionDemo() {\n return (\n <Accordion orientation=\"horizontal\" width=\"$20\" type=\"multiple\">\n <Accordion.Item value=\"a1\">\n <Accordion.Trigger>\n <Paragraph>1. Take a cold shower</Paragraph>\n </Accordion.Trigger>\n <Accordion.Content>\n <Paragraph>\n Cold showers can help reduce inflammation, relieve pain, improve circulation,\n lower stress levels, and reduce muscle soreness and fatigue.\n </Paragraph>\n </Accordion.Content>\n </Accordion.Item>\n\n <Accordion.Item value=\"a2\">\n <Accordion.Trigger>\n <Paragraph>2: Eat 4 eggs</Paragraph>\n </Accordion.Trigger>\n <Accordion.Content>\n <Paragraph>\n Eggs have been a dietary staple since time immemorial and there\u2019s good reason\n for their continued presence in our menus and meals.\n </Paragraph>\n </Accordion.Content>\n </Accordion.Item>\n </Accordion>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAKM,SAEI,KAFJ;AALN,SAAS,WAAW,iBAAiB;AAE9B,SAAS,gBAAgB;AAC9B,SACE,qBAAC,aAAU,aAAY,cAAa,OAAM,OAAM,MAAK,YACnD;AAAA,yBAAC,UAAU,MAAV,EAAe,OAAM,MACpB;AAAA,0BAAC,UAAU,SAAV,EACC,8BAAC,aAAU,mCAAqB,GAClC;AAAA,MACA,oBAAC,UAAU,SAAV,EACC,8BAAC,aAAU,wJAGX,GACF;AAAA,OACF;AAAA,IAEA,qBAAC,UAAU,MAAV,EAAe,OAAM,MACpB;AAAA,0BAAC,UAAU,SAAV,EACC,8BAAC,aAAU,2BAAa,GAC1B;AAAA,MACA,oBAAC,UAAU,SAAV,EACC,8BAAC,aAAU,qJAGX,GACF;AAAA,OACF;AAAA,KACF;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/DrawerDemo.js
DELETED
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Drawer } from "@tamagui/drawer";
|
|
3
|
-
import { ChevronDown, ChevronUp } from "@tamagui/feather-icons";
|
|
4
|
-
import { useState } from "react";
|
|
5
|
-
import { Button, Paragraph, YStack } from "tamagui";
|
|
6
|
-
function DrawerDemo() {
|
|
7
|
-
const [show, setShow] = useState(false);
|
|
8
|
-
return /* @__PURE__ */ jsx(YStack, {
|
|
9
|
-
minWidth: 230,
|
|
10
|
-
w: "100%",
|
|
11
|
-
h: "100%",
|
|
12
|
-
ai: "center",
|
|
13
|
-
jc: "center",
|
|
14
|
-
position: "relative",
|
|
15
|
-
children: /* @__PURE__ */ jsxs(Drawer.Provider, {
|
|
16
|
-
children: [
|
|
17
|
-
/* @__PURE__ */ jsx(Button, {
|
|
18
|
-
size: "$6",
|
|
19
|
-
icon: show ? ChevronDown : ChevronUp,
|
|
20
|
-
circular: true,
|
|
21
|
-
onPress: () => setShow((x) => !x),
|
|
22
|
-
elevation: "$2"
|
|
23
|
-
}),
|
|
24
|
-
/* @__PURE__ */ jsx(Drawer, {
|
|
25
|
-
open: show,
|
|
26
|
-
onOpenChange: setShow,
|
|
27
|
-
children: /* @__PURE__ */ jsxs(Drawer.Frame, {
|
|
28
|
-
h: 200,
|
|
29
|
-
ai: "center",
|
|
30
|
-
jc: "center",
|
|
31
|
-
p: "$6",
|
|
32
|
-
space: true,
|
|
33
|
-
children: [
|
|
34
|
-
/* @__PURE__ */ jsx(Paragraph, {
|
|
35
|
-
selectable: false,
|
|
36
|
-
children: "Hello."
|
|
37
|
-
}),
|
|
38
|
-
/* @__PURE__ */ jsx(Button, {
|
|
39
|
-
size: "$6",
|
|
40
|
-
icon: show ? ChevronDown : ChevronUp,
|
|
41
|
-
circular: true,
|
|
42
|
-
onPress: () => setShow((x) => !x),
|
|
43
|
-
elevation: "$2"
|
|
44
|
-
})
|
|
45
|
-
]
|
|
46
|
-
})
|
|
47
|
-
})
|
|
48
|
-
]
|
|
49
|
-
})
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
export {
|
|
53
|
-
DrawerDemo
|
|
54
|
-
};
|
|
55
|
-
//# sourceMappingURL=DrawerDemo.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/DrawerDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Drawer } from '@tamagui/drawer'\nimport { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Paragraph, YStack } from 'tamagui'\n\nexport function DrawerDemo() {\n const [show, setShow] = useState(false)\n return (\n <YStack minWidth={230} w=\"100%\" h=\"100%\" ai=\"center\" jc=\"center\" position=\"relative\">\n <Drawer.Provider>\n <Button\n size=\"$6\"\n icon={show ? ChevronDown : ChevronUp}\n circular\n onPress={() => setShow((x) => !x)}\n elevation=\"$2\"\n />\n <Drawer open={show} onOpenChange={setShow}>\n <Drawer.Frame h={200} ai=\"center\" jc=\"center\" p=\"$6\" space>\n <Paragraph selectable={false}>Hello.</Paragraph>\n <Button\n size=\"$6\"\n icon={show ? ChevronDown : ChevronUp}\n circular\n onPress={() => setShow((x) => !x)}\n elevation=\"$2\"\n />\n </Drawer.Frame>\n </Drawer>\n </Drawer.Provider>\n </YStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAWQ,cAQE,YARF;AAXR,SAAS,cAAc;AACvB,SAAS,aAAa,iBAAiB;AAEvC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,WAAW,cAAc;AAEnC,SAAS,aAAa;AAC3B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,SACE,oBAAC;AAAA,IAAO,UAAU;AAAA,IAAK,GAAE;AAAA,IAAO,GAAE;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,UAAS;AAAA,IACxE,+BAAC,OAAO,UAAP;AAAA,MACC;AAAA,4BAAC;AAAA,UACC,MAAK;AAAA,UACL,MAAM,OAAO,cAAc;AAAA,UAC3B,UAAQ;AAAA,UACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,UAChC,WAAU;AAAA,SACZ;AAAA,QACA,oBAAC;AAAA,UAAO,MAAM;AAAA,UAAM,cAAc;AAAA,UAChC,+BAAC,OAAO,OAAP;AAAA,YAAa,GAAG;AAAA,YAAK,IAAG;AAAA,YAAS,IAAG;AAAA,YAAS,GAAE;AAAA,YAAK,OAAK;AAAA,YACxD;AAAA,kCAAC;AAAA,gBAAU,YAAY;AAAA,gBAAO;AAAA,eAAM;AAAA,cACpC,oBAAC;AAAA,gBACC,MAAK;AAAA,gBACL,MAAM,OAAO,cAAc;AAAA,gBAC3B,UAAQ;AAAA,gBACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,gBAChC,WAAU;AAAA,eACZ;AAAA;AAAA,WACF;AAAA,SACF;AAAA;AAAA,KACF;AAAA,GACF;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import * as FeatherIcons from "@tamagui/lucide-icons";
|
|
3
|
-
import { useMemo, useState } from "react";
|
|
4
|
-
import { ScrollView } from "react-native";
|
|
5
|
-
import { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
|
|
6
|
-
const featherIcons = Object.keys(FeatherIcons).map((name) => ({
|
|
7
|
-
key: name.toLowerCase(),
|
|
8
|
-
name,
|
|
9
|
-
Icon: FeatherIcons[name]
|
|
10
|
-
}));
|
|
11
|
-
function FeatherIconsDemo() {
|
|
12
|
-
const [searchRaw, setSearch] = useState("");
|
|
13
|
-
const search = useDebounceValue(searchRaw, 400);
|
|
14
|
-
const size = 100;
|
|
15
|
-
const iconsMemo = useMemo(() => {
|
|
16
|
-
const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
|
|
17
|
-
return icons.map(({ Icon, name }) => {
|
|
18
|
-
return /* @__PURE__ */ jsxs(YStack, { h: size, ai: "center", jc: "center", children: [
|
|
19
|
-
/* @__PURE__ */ jsx(Icon, { size: size * 0.25 }),
|
|
20
|
-
/* @__PURE__ */ jsx(Spacer, {}),
|
|
21
|
-
/* @__PURE__ */ jsx(Paragraph, { size: "$2", o: 0.5, children: name })
|
|
22
|
-
] }, name);
|
|
23
|
-
});
|
|
24
|
-
}, [search]);
|
|
25
|
-
return /* @__PURE__ */ jsxs(YStack, { als: "stretch", p: "$4", pb: "$0", space: true, children: [
|
|
26
|
-
/* @__PURE__ */ jsx(Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }),
|
|
27
|
-
/* @__PURE__ */ jsx(YStack, { h: 420, children: /* @__PURE__ */ jsx(ScrollView, { children: /* @__PURE__ */ jsx(Grid, { itemMinWidth: size, children: iconsMemo }) }) })
|
|
28
|
-
] });
|
|
29
|
-
}
|
|
30
|
-
export {
|
|
31
|
-
FeatherIconsDemo
|
|
32
|
-
};
|
|
33
|
-
//# sourceMappingURL=FeatherIconsDemo.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/FeatherIconsDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as FeatherIcons from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst featherIcons = Object.keys(FeatherIcons).map((name) => ({\n key: name.toLowerCase(),\n name,\n Icon: FeatherIcons[name],\n}))\n\nexport function FeatherIconsDemo() {\n const [searchRaw, setSearch] = useState('')\n const search = useDebounceValue(searchRaw, 400)\n\n const size = 100\n\n const iconsMemo = useMemo(() => {\n const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n return icons.map(({ Icon, name }) => {\n return (\n <YStack h={size} ai=\"center\" jc=\"center\" key={name}>\n <Icon size={size * 0.25} />\n <Spacer />\n <Paragraph size=\"$2\" o={0.5}>\n {name}\n </Paragraph>\n </YStack>\n )\n })\n }, [search])\n\n return (\n <YStack als=\"stretch\" p=\"$4\" pb=\"$0\" space>\n <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n <YStack h={420}>\n <ScrollView>\n <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n </ScrollView>\n </YStack>\n </YStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAsBQ,SACE,KADF;AAtBR,YAAY,kBAAkB;AAE9B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,eAAe,OAAO,KAAK,YAAY,EAAE,IAAI,CAAC,UAAU;AAAA,EAC5D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,aAAa,IAAI;AACzB,EAAE;AAEK,SAAS,mBAAmB;AACjC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,aAAa,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC/E,WAAO,MAAM,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACnC,aACE,qBAAC,UAAO,GAAG,MAAM,IAAG,UAAS,IAAG,UAC9B;AAAA,4BAAC,QAAK,MAAM,OAAO,MAAM;AAAA,QACzB,oBAAC,UAAO;AAAA,QACR,oBAAC,aAAU,MAAK,MAAK,GAAG,KACrB,gBACH;AAAA,WAL4C,IAM9C;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,qBAAC,UAAO,KAAI,WAAU,GAAE,MAAK,IAAG,MAAK,OAAK,MACxC;AAAA,wBAAC,SAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,oBAAC,UAAO,GAAG,KACT,8BAAC,cACC,8BAAC,QAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import * as FeatherIcons from "@tamagui/lucide-icons";
|
|
3
|
-
import { useMemo, useState } from "react";
|
|
4
|
-
import { ScrollView } from "react-native";
|
|
5
|
-
import { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
|
|
6
|
-
const featherIcons = Object.keys(FeatherIcons).map((name) => ({
|
|
7
|
-
key: name.toLowerCase(),
|
|
8
|
-
name,
|
|
9
|
-
Icon: FeatherIcons[name]
|
|
10
|
-
}));
|
|
11
|
-
function FeatherIconsDemo() {
|
|
12
|
-
const [searchRaw, setSearch] = useState("");
|
|
13
|
-
const search = useDebounceValue(searchRaw, 400);
|
|
14
|
-
const size = 100;
|
|
15
|
-
const iconsMemo = useMemo(() => {
|
|
16
|
-
const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
|
|
17
|
-
return icons.map(({ Icon, name }) => {
|
|
18
|
-
return /* @__PURE__ */ jsxs(YStack, { h: size, ai: "center", jc: "center", children: [
|
|
19
|
-
/* @__PURE__ */ jsx(Icon, { size: size * 0.25 }),
|
|
20
|
-
/* @__PURE__ */ jsx(Spacer, {}),
|
|
21
|
-
/* @__PURE__ */ jsx(Paragraph, { size: "$2", o: 0.5, children: name })
|
|
22
|
-
] }, name);
|
|
23
|
-
});
|
|
24
|
-
}, [search]);
|
|
25
|
-
return /* @__PURE__ */ jsxs(YStack, { als: "stretch", p: "$4", pb: "$0", space: true, children: [
|
|
26
|
-
/* @__PURE__ */ jsx(Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }),
|
|
27
|
-
/* @__PURE__ */ jsx(YStack, { h: 420, children: /* @__PURE__ */ jsx(ScrollView, { children: /* @__PURE__ */ jsx(Grid, { itemMinWidth: size, children: iconsMemo }) }) })
|
|
28
|
-
] });
|
|
29
|
-
}
|
|
30
|
-
export {
|
|
31
|
-
FeatherIconsDemo
|
|
32
|
-
};
|
|
33
|
-
//# sourceMappingURL=FeatherIconsDemo.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/FeatherIconsDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as FeatherIcons from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst featherIcons = Object.keys(FeatherIcons).map((name) => ({\n key: name.toLowerCase(),\n name,\n Icon: FeatherIcons[name],\n}))\n\nexport function FeatherIconsDemo() {\n const [searchRaw, setSearch] = useState('')\n const search = useDebounceValue(searchRaw, 400)\n\n const size = 100\n\n const iconsMemo = useMemo(() => {\n const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n return icons.map(({ Icon, name }) => {\n return (\n <YStack h={size} ai=\"center\" jc=\"center\" key={name}>\n <Icon size={size * 0.25} />\n <Spacer />\n <Paragraph size=\"$2\" o={0.5}>\n {name}\n </Paragraph>\n </YStack>\n )\n })\n }, [search])\n\n return (\n <YStack als=\"stretch\" p=\"$4\" pb=\"$0\" space>\n <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n <YStack h={420}>\n <ScrollView>\n <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n </ScrollView>\n </YStack>\n </YStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAsBQ,SACE,KADF;AAtBR,YAAY,kBAAkB;AAE9B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,eAAe,OAAO,KAAK,YAAY,EAAE,IAAI,CAAC,UAAU;AAAA,EAC5D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,aAAa,IAAI;AACzB,EAAE;AAEK,SAAS,mBAAmB;AACjC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,aAAa,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC/E,WAAO,MAAM,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACnC,aACE,qBAAC,UAAO,GAAG,MAAM,IAAG,UAAS,IAAG,UAC9B;AAAA,4BAAC,QAAK,MAAM,OAAO,MAAM;AAAA,QACzB,oBAAC,UAAO;AAAA,QACR,oBAAC,aAAU,MAAK,MAAK,GAAG,KACrB,gBACH;AAAA,WAL4C,IAM9C;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,qBAAC,UAAO,KAAI,WAAU,GAAE,MAAK,IAAG,MAAK,OAAK,MACxC;AAAA,wBAAC,SAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,oBAAC,UAAO,GAAG,KACT,8BAAC,cACC,8BAAC,QAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/MenuDemo.js
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Menu as MenuIcon } from "@tamagui/feather-icons";
|
|
3
|
-
import { Menu } from "@tamagui/menu";
|
|
4
|
-
import { useState } from "react";
|
|
5
|
-
import { Button, H4, Paragraph, YStack } from "tamagui";
|
|
6
|
-
function MenuDemo() {
|
|
7
|
-
const [show, setShow] = useState(false);
|
|
8
|
-
return /* @__PURE__ */ jsx(Menu.Provider, {
|
|
9
|
-
children: /* @__PURE__ */ jsx(Menu, {
|
|
10
|
-
open: show,
|
|
11
|
-
onOpenChange: setShow,
|
|
12
|
-
trigger: /* @__PURE__ */ jsx(Button, {
|
|
13
|
-
size: "$6",
|
|
14
|
-
icon: MenuIcon,
|
|
15
|
-
theme: show ? "active" : null,
|
|
16
|
-
circular: true,
|
|
17
|
-
onPress: () => setShow((x) => !x)
|
|
18
|
-
}),
|
|
19
|
-
children: /* @__PURE__ */ jsx(Menu.Item, {
|
|
20
|
-
children: /* @__PURE__ */ jsxs(YStack, {
|
|
21
|
-
p: "$2",
|
|
22
|
-
children: [
|
|
23
|
-
/* @__PURE__ */ jsx(H4, {
|
|
24
|
-
children: "Menu contents"
|
|
25
|
-
}),
|
|
26
|
-
/* @__PURE__ */ jsx(Paragraph, {
|
|
27
|
-
children: "Lorem ipsum dolor sit amet."
|
|
28
|
-
})
|
|
29
|
-
]
|
|
30
|
-
})
|
|
31
|
-
})
|
|
32
|
-
})
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
export {
|
|
36
|
-
MenuDemo
|
|
37
|
-
};
|
|
38
|
-
//# sourceMappingURL=MenuDemo.js.map
|
package/dist/esm/MenuDemo.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/MenuDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Menu as MenuIcon } from '@tamagui/feather-icons'\nimport { Menu } from '@tamagui/menu'\nimport React, { useState } from 'react'\nimport { Button, H4, Paragraph, YStack } from 'tamagui'\n\nexport function MenuDemo() {\n const [show, setShow] = useState(false)\n\n return (\n <Menu.Provider>\n <Menu\n open={show}\n onOpenChange={setShow}\n trigger={\n <Button\n size=\"$6\"\n icon={MenuIcon}\n theme={show ? 'active' : null}\n circular\n onPress={() => setShow((x) => !x)}\n />\n }\n >\n <Menu.Item>\n <YStack p=\"$2\">\n <H4>Menu contents</H4>\n <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>\n </YStack>\n </Menu.Item>\n </Menu>\n </Menu.Provider>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAcU,cAUA,YAVA;AAdV,SAAS,QAAQ,gBAAgB;AACjC,SAAS,YAAY;AACrB,SAAgB,gBAAgB;AAChC,SAAS,QAAQ,IAAI,WAAW,cAAc;AAEvC,SAAS,WAAW;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,SACE,oBAAC,KAAK,UAAL;AAAA,IACC,8BAAC;AAAA,MACC,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SACE,oBAAC;AAAA,QACC,MAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO,OAAO,WAAW;AAAA,QACzB,UAAQ;AAAA,QACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,OAClC;AAAA,MAGF,8BAAC,KAAK,MAAL;AAAA,QACC,+BAAC;AAAA,UAAO,GAAE;AAAA,UACR;AAAA,gCAAC;AAAA,cAAG;AAAA,aAAa;AAAA,YACjB,oBAAC;AAAA,cAAU;AAAA,aAA2B;AAAA;AAAA,SACxC;AAAA,OACF;AAAA,KACF;AAAA,GACF;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/PopperDemo.js
DELETED
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@tamagui/lucide-icons";
|
|
3
|
-
import {
|
|
4
|
-
Button,
|
|
5
|
-
Input,
|
|
6
|
-
Label,
|
|
7
|
-
Popper,
|
|
8
|
-
PopperAnchor,
|
|
9
|
-
PopperArrow,
|
|
10
|
-
PopperContent,
|
|
11
|
-
Portal,
|
|
12
|
-
XStack,
|
|
13
|
-
YGroup
|
|
14
|
-
} from "tamagui";
|
|
15
|
-
function PopperDemo() {
|
|
16
|
-
return /* @__PURE__ */ jsxs(XStack, {
|
|
17
|
-
space: "$2",
|
|
18
|
-
f: 1,
|
|
19
|
-
justifyContent: "center",
|
|
20
|
-
alignItems: "center",
|
|
21
|
-
children: [
|
|
22
|
-
/* @__PURE__ */ jsx(Demo, {
|
|
23
|
-
placement: "left-end",
|
|
24
|
-
Icon: ChevronLeft,
|
|
25
|
-
Id: "left"
|
|
26
|
-
}),
|
|
27
|
-
/* @__PURE__ */ jsx(Demo, {
|
|
28
|
-
placement: "bottom-end",
|
|
29
|
-
Icon: ChevronDown,
|
|
30
|
-
Id: "bottom"
|
|
31
|
-
}),
|
|
32
|
-
/* @__PURE__ */ jsx(Demo, {
|
|
33
|
-
placement: "top-end",
|
|
34
|
-
Icon: ChevronUp,
|
|
35
|
-
Id: "top"
|
|
36
|
-
}),
|
|
37
|
-
/* @__PURE__ */ jsx(Demo, {
|
|
38
|
-
placement: "right-end",
|
|
39
|
-
Icon: ChevronRight,
|
|
40
|
-
Id: "right"
|
|
41
|
-
})
|
|
42
|
-
]
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
function Demo({ Icon, Id, ...props }) {
|
|
46
|
-
return /* @__PURE__ */ jsxs(Popper, {
|
|
47
|
-
placement: props.placement,
|
|
48
|
-
children: [
|
|
49
|
-
/* @__PURE__ */ jsx(PopperAnchor, {
|
|
50
|
-
children: /* @__PURE__ */ jsx(Button, {
|
|
51
|
-
icon: Icon
|
|
52
|
-
})
|
|
53
|
-
}),
|
|
54
|
-
/* @__PURE__ */ jsx(Portal, {
|
|
55
|
-
children: /* @__PURE__ */ jsxs(PopperContent, {
|
|
56
|
-
children: [
|
|
57
|
-
/* @__PURE__ */ jsx(PopperArrow, {
|
|
58
|
-
bw: 1,
|
|
59
|
-
boc: "$borderColor"
|
|
60
|
-
}),
|
|
61
|
-
/* @__PURE__ */ jsxs(YGroup, {
|
|
62
|
-
space: "$3",
|
|
63
|
-
width: 200,
|
|
64
|
-
bw: 1,
|
|
65
|
-
boc: "$borderColor",
|
|
66
|
-
children: [
|
|
67
|
-
/* @__PURE__ */ jsxs(XStack, {
|
|
68
|
-
space: "$3",
|
|
69
|
-
children: [
|
|
70
|
-
/* @__PURE__ */ jsx(Label, {
|
|
71
|
-
size: "$3",
|
|
72
|
-
htmlFor: Id,
|
|
73
|
-
children: "Name"
|
|
74
|
-
}),
|
|
75
|
-
/* @__PURE__ */ jsx(Input, {
|
|
76
|
-
size: "$3",
|
|
77
|
-
id: Id
|
|
78
|
-
})
|
|
79
|
-
]
|
|
80
|
-
}),
|
|
81
|
-
/* @__PURE__ */ jsx(Button, {
|
|
82
|
-
size: "$3",
|
|
83
|
-
children: "Submit"
|
|
84
|
-
})
|
|
85
|
-
]
|
|
86
|
-
})
|
|
87
|
-
]
|
|
88
|
-
})
|
|
89
|
-
})
|
|
90
|
-
]
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
export {
|
|
94
|
-
Demo,
|
|
95
|
-
PopperDemo
|
|
96
|
-
};
|
|
97
|
-
//# sourceMappingURL=PopperDemo.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/PopperDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n Adapt,\n Button,\n Input,\n Label,\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperContent,\n PopperProps,\n Portal,\n PortalHost,\n PortalItem,\n XGroup,\n XStack,\n YGroup,\n} from 'tamagui'\n\nexport function PopperDemo() {\n return (\n\n\n <XStack space=\"$2\" f={1} justifyContent='center' alignItems='center'>\n <Demo placement=\"left-end\" Icon={ChevronLeft} Id=\"left\" />\n <Demo placement=\"bottom-end\" Icon={ChevronDown} Id=\"bottom\" />\n <Demo placement=\"top-end\" Icon={ChevronUp} Id=\"top\" />\n <Demo placement=\"right-end\" Icon={ChevronRight} Id=\"right\" />\n </XStack>\n\n )\n}\n\nexport function Demo({ Icon, Id, ...props }: PopperProps & { Icon?: any, Id?: string }) {\n return (\n \n <Popper placement={props.placement}>\n <PopperAnchor>\n <Button icon={Icon} />\n </PopperAnchor>\n\n <Portal>\n <PopperContent>\n <PopperArrow bw={1} boc=\"$borderColor\" />\n\n <YGroup space=\"$3\" width={200} bw={1} boc=\"$borderColor\">\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor={Id}>\n Name\n </Label>\n <Input size=\"$3\" id={Id} />\n </XStack>\n \n <Button\n size=\"$3\"\n >\n Submit\n </Button>\n </YGroup>\n\n </PopperContent>\n </Portal>\n\n\n </Popper>\n\n )\n\n\n}\n"],
|
|
5
|
-
"mappings": "AAuBM,SACE,KADF;AAvBN,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAIA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,aAAa;AAC3B,SAGI,qBAAC;AAAA,IAAO,OAAM;AAAA,IAAK,GAAG;AAAA,IAAG,gBAAe;AAAA,IAAS,YAAW;AAAA,IAC1D;AAAA,0BAAC;AAAA,QAAK,WAAU;AAAA,QAAW,MAAM;AAAA,QAAa,IAAG;AAAA,OAAO;AAAA,MACxD,oBAAC;AAAA,QAAK,WAAU;AAAA,QAAa,MAAM;AAAA,QAAa,IAAG;AAAA,OAAS;AAAA,MAC5D,oBAAC;AAAA,QAAK,WAAU;AAAA,QAAU,MAAM;AAAA,QAAW,IAAG;AAAA,OAAM;AAAA,MACpD,oBAAC;AAAA,QAAK,WAAU;AAAA,QAAY,MAAM;AAAA,QAAc,IAAG;AAAA,OAAQ;AAAA;AAAA,GAC7D;AAGN;AAEO,SAAS,KAAK,EAAE,MAAM,OAAO,MAAM,GAA8C;AACtF,SAEE,qBAAC;AAAA,IAAO,WAAW,MAAM;AAAA,IACvB;AAAA,0BAAC;AAAA,QACC,8BAAC;AAAA,UAAO,MAAM;AAAA,SAAM;AAAA,OACtB;AAAA,MAEA,oBAAC;AAAA,QACC,+BAAC;AAAA,UACG;AAAA,gCAAC;AAAA,cAAY,IAAI;AAAA,cAAG,KAAI;AAAA,aAAe;AAAA,YAEvC,qBAAC;AAAA,cAAO,OAAM;AAAA,cAAK,OAAO;AAAA,cAAK,IAAI;AAAA,cAAG,KAAI;AAAA,cACxC;AAAA,qCAAC;AAAA,kBAAO,OAAM;AAAA,kBACZ;AAAA,wCAAC;AAAA,sBAAM,MAAK;AAAA,sBAAK,SAAS;AAAA,sBAAI;AAAA,qBAE9B;AAAA,oBACA,oBAAC;AAAA,sBAAM,MAAK;AAAA,sBAAK,IAAI;AAAA,qBAAI;AAAA;AAAA,iBAC3B;AAAA,gBAEE,oBAAC;AAAA,kBACC,MAAK;AAAA,kBACN;AAAA,iBAED;AAAA;AAAA,aACJ;AAAA;AAAA,SAEF;AAAA,OACF;AAAA;AAAA,GAGJ;AAKJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
3
|
-
import { AnimatePresence, H5, Tabs, XStack, YStack } from "tamagui";
|
|
4
|
-
function TabsAnimatedDemo() {
|
|
5
|
-
return /* @__PURE__ */ jsx(XStack, { maxHeight: "100%", maxWidth: "100%", justifyContent: "flex-start", children: /* @__PURE__ */ jsxs(XStack, { space: "$3", px: "$8", children: [
|
|
6
|
-
/* @__PURE__ */ jsx(UnderlineTabs, {}),
|
|
7
|
-
/* @__PURE__ */ jsx(HighlightTabs, {})
|
|
8
|
-
] }) });
|
|
9
|
-
}
|
|
10
|
-
const UnderlineTabs = () => {
|
|
11
|
-
const [currentTab, setCurrentTab] = useState("tab1");
|
|
12
|
-
const [direction, setDirection] = useState(0);
|
|
13
|
-
return /* @__PURE__ */ jsxs(
|
|
14
|
-
Tabs,
|
|
15
|
-
{
|
|
16
|
-
value: currentTab,
|
|
17
|
-
onValueChange: setCurrentTab,
|
|
18
|
-
onDirectionChange: setDirection,
|
|
19
|
-
orientation: "vertical",
|
|
20
|
-
width: 300,
|
|
21
|
-
br: "$4",
|
|
22
|
-
ai: "center",
|
|
23
|
-
children: [
|
|
24
|
-
/* @__PURE__ */ jsx(YStack, { borderColor: "$color3", borderRightWidth: "$0.5", mr: "$2", children: /* @__PURE__ */ jsxs(YStack, { children: [
|
|
25
|
-
/* @__PURE__ */ jsx(
|
|
26
|
-
Tabs.RovingIndicator,
|
|
27
|
-
{
|
|
28
|
-
highlightMode: "hoverOrFocus",
|
|
29
|
-
width: "$0.5",
|
|
30
|
-
right: 0,
|
|
31
|
-
animation: "100ms"
|
|
32
|
-
}
|
|
33
|
-
),
|
|
34
|
-
/* @__PURE__ */ jsx(
|
|
35
|
-
Tabs.RovingIndicator,
|
|
36
|
-
{
|
|
37
|
-
highlightMode: "select",
|
|
38
|
-
width: "$0.5",
|
|
39
|
-
right: 0,
|
|
40
|
-
animation: "100ms"
|
|
41
|
-
}
|
|
42
|
-
),
|
|
43
|
-
/* @__PURE__ */ jsxs(Tabs.List, { "aria-label": "Manage your account", flexDirection: "column", children: [
|
|
44
|
-
/* @__PURE__ */ jsx(Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab1", children: "Profile" }),
|
|
45
|
-
/* @__PURE__ */ jsx(Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab2", children: "Connections" }),
|
|
46
|
-
/* @__PURE__ */ jsx(Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab3", children: "Notifications" })
|
|
47
|
-
] })
|
|
48
|
-
] }) }),
|
|
49
|
-
/* @__PURE__ */ jsx(AnimatePresence, { exitBeforeEnter: true, children: /* @__PURE__ */ jsx(
|
|
50
|
-
Tabs.Content,
|
|
51
|
-
{
|
|
52
|
-
value: currentTab,
|
|
53
|
-
forceMount: true,
|
|
54
|
-
p: "$2",
|
|
55
|
-
animation: "100ms",
|
|
56
|
-
o: 1,
|
|
57
|
-
y: 0,
|
|
58
|
-
f: 1,
|
|
59
|
-
enterStyle: {
|
|
60
|
-
...direction === -1 ? { y: -25 } : {},
|
|
61
|
-
...direction === 1 ? { y: 25 } : {},
|
|
62
|
-
opacity: 0
|
|
63
|
-
},
|
|
64
|
-
exitStyle: {
|
|
65
|
-
...direction === -1 ? { y: 25 } : {},
|
|
66
|
-
...direction === 1 ? { y: -25 } : {},
|
|
67
|
-
opacity: 0
|
|
68
|
-
},
|
|
69
|
-
children: /* @__PURE__ */ jsx(H5, { ta: "center", children: currentTab })
|
|
70
|
-
},
|
|
71
|
-
currentTab
|
|
72
|
-
) })
|
|
73
|
-
]
|
|
74
|
-
}
|
|
75
|
-
);
|
|
76
|
-
};
|
|
77
|
-
const HighlightTabs = () => {
|
|
78
|
-
const [currentTab, setCurrentTab] = useState("tab1");
|
|
79
|
-
const [direction, setDirection] = useState(0);
|
|
80
|
-
return /* @__PURE__ */ jsxs(
|
|
81
|
-
Tabs,
|
|
82
|
-
{
|
|
83
|
-
value: currentTab,
|
|
84
|
-
onValueChange: setCurrentTab,
|
|
85
|
-
onDirectionChange: setDirection,
|
|
86
|
-
orientation: "horizontal",
|
|
87
|
-
br: "$4",
|
|
88
|
-
flexDirection: "column",
|
|
89
|
-
children: [
|
|
90
|
-
/* @__PURE__ */ jsxs(YStack, { children: [
|
|
91
|
-
/* @__PURE__ */ jsx(
|
|
92
|
-
Tabs.RovingIndicator,
|
|
93
|
-
{
|
|
94
|
-
highlightMode: "hoverOrFocus",
|
|
95
|
-
borderRadius: "$4",
|
|
96
|
-
animation: "100ms"
|
|
97
|
-
}
|
|
98
|
-
),
|
|
99
|
-
/* @__PURE__ */ jsx(
|
|
100
|
-
Tabs.RovingIndicator,
|
|
101
|
-
{
|
|
102
|
-
highlightMode: "select",
|
|
103
|
-
borderRadius: "$4",
|
|
104
|
-
animation: "100ms"
|
|
105
|
-
}
|
|
106
|
-
),
|
|
107
|
-
/* @__PURE__ */ jsxs(Tabs.List, { "aria-label": "Manage your account", children: [
|
|
108
|
-
/* @__PURE__ */ jsx(Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab1", children: "Profile" }),
|
|
109
|
-
/* @__PURE__ */ jsx(Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab2", children: "Connections" }),
|
|
110
|
-
/* @__PURE__ */ jsx(Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab3", children: "Notifications" })
|
|
111
|
-
] })
|
|
112
|
-
] }),
|
|
113
|
-
/* @__PURE__ */ jsx(AnimatePresence, { exitBeforeEnter: true, children: /* @__PURE__ */ jsx(
|
|
114
|
-
Tabs.Content,
|
|
115
|
-
{
|
|
116
|
-
value: currentTab,
|
|
117
|
-
forceMount: true,
|
|
118
|
-
p: "$2",
|
|
119
|
-
animation: "100ms",
|
|
120
|
-
o: 1,
|
|
121
|
-
x: 0,
|
|
122
|
-
enterStyle: {
|
|
123
|
-
...direction === -1 ? { x: -25 } : {},
|
|
124
|
-
...direction === 1 ? { x: 25 } : {},
|
|
125
|
-
opacity: 0
|
|
126
|
-
},
|
|
127
|
-
exitStyle: {
|
|
128
|
-
...direction === -1 ? { x: 25 } : {},
|
|
129
|
-
...direction === 1 ? { x: -25 } : {},
|
|
130
|
-
opacity: 0
|
|
131
|
-
},
|
|
132
|
-
children: /* @__PURE__ */ jsx(H5, { ta: "center", children: currentTab })
|
|
133
|
-
},
|
|
134
|
-
currentTab
|
|
135
|
-
) })
|
|
136
|
-
]
|
|
137
|
-
}
|
|
138
|
-
);
|
|
139
|
-
};
|
|
140
|
-
export {
|
|
141
|
-
TabsAnimatedDemo
|
|
142
|
-
};
|
|
143
|
-
//# sourceMappingURL=TabsAnimatedDemo.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/TabsAnimatedDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useState } from 'react'\nimport { AnimatePresence, H5, Tabs, XStack, YStack } from 'tamagui'\n\nexport function TabsAnimatedDemo() {\n return (\n <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\">\n <XStack space=\"$3\" px=\"$8\">\n <UnderlineTabs />\n <HighlightTabs />\n </XStack>\n </XStack>\n )\n}\n\nconst UnderlineTabs = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n return (\n <Tabs\n value={currentTab}\n onValueChange={setCurrentTab}\n onDirectionChange={setDirection}\n orientation=\"vertical\"\n width={300}\n br=\"$4\"\n ai=\"center\"\n >\n <YStack borderColor=\"$color3\" borderRightWidth=\"$0.5\" mr=\"$2\">\n <YStack>\n <Tabs.RovingIndicator\n highlightMode=\"hoverOrFocus\"\n width=\"$0.5\"\n right={0}\n animation=\"100ms\"\n />\n <Tabs.RovingIndicator\n highlightMode=\"select\"\n width=\"$0.5\"\n right={0}\n animation=\"100ms\"\n />\n <Tabs.List aria-label=\"Manage your account\" flexDirection=\"column\">\n <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n Profile\n </Tabs.Trigger>\n <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n Connections\n </Tabs.Trigger>\n <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n Notifications\n </Tabs.Trigger>\n </Tabs.List>\n </YStack>\n </YStack>\n <AnimatePresence exitBeforeEnter>\n <Tabs.Content\n value={currentTab}\n key={currentTab}\n forceMount\n p=\"$2\"\n animation=\"100ms\"\n o={1}\n y={0}\n f={1}\n enterStyle={{\n ...(direction === -1 ? { y: -25 } : {}),\n ...(direction === 1 ? { y: 25 } : {}),\n opacity: 0,\n }}\n exitStyle={{\n ...(direction === -1 ? { y: 25 } : {}),\n ...(direction === 1 ? { y: -25 } : {}),\n opacity: 0,\n }}\n >\n <H5 ta=\"center\">{currentTab}</H5>\n </Tabs.Content>\n </AnimatePresence>\n </Tabs>\n )\n}\n\nconst HighlightTabs = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n return (\n <Tabs\n value={currentTab}\n onValueChange={setCurrentTab}\n onDirectionChange={setDirection}\n orientation=\"horizontal\"\n br=\"$4\"\n flexDirection=\"column\"\n >\n <YStack>\n <Tabs.RovingIndicator\n highlightMode=\"hoverOrFocus\"\n borderRadius=\"$4\"\n animation=\"100ms\"\n />\n <Tabs.RovingIndicator\n highlightMode=\"select\"\n borderRadius=\"$4\"\n animation=\"100ms\"\n />\n <Tabs.List aria-label=\"Manage your account\">\n <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n Profile\n </Tabs.Trigger>\n <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n Connections\n </Tabs.Trigger>\n <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n Notifications\n </Tabs.Trigger>\n </Tabs.List>\n </YStack>\n <AnimatePresence exitBeforeEnter>\n <Tabs.Content\n value={currentTab}\n key={currentTab}\n forceMount\n p=\"$2\"\n animation=\"100ms\"\n o={1}\n x={0}\n enterStyle={{\n ...(direction === -1 ? { x: -25 } : {}),\n ...(direction === 1 ? { x: 25 } : {}),\n opacity: 0,\n }}\n exitStyle={{\n ...(direction === -1 ? { x: 25 } : {}),\n ...(direction === 1 ? { x: -25 } : {}),\n opacity: 0,\n }}\n >\n <H5 ta=\"center\">{currentTab}</H5>\n </Tabs.Content>\n </AnimatePresence>\n </Tabs>\n )\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|