@tamagui/demos 1.1.8 → 1.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/AddThemeDemo.js +12 -22
- package/dist/cjs/AddThemeDemo.js.map +1 -1
- package/dist/cjs/AlertDialogDemo.js +44 -68
- package/dist/cjs/AlertDialogDemo.js.map +1 -1
- package/dist/cjs/AnimationsDemo.js +13 -11
- package/dist/cjs/AnimationsDemo.js.map +1 -1
- package/dist/cjs/AnimationsEnterDemo.js +11 -18
- package/dist/cjs/AnimationsEnterDemo.js.map +1 -1
- package/dist/cjs/AnimationsHoverDemo.js +17 -16
- package/dist/cjs/AnimationsHoverDemo.js.map +1 -1
- package/dist/cjs/AnimationsPresenceDemo.js +17 -29
- package/dist/cjs/AnimationsPresenceDemo.js.map +1 -1
- package/dist/cjs/AnimationsTimingDemo.js +17 -16
- package/dist/cjs/AnimationsTimingDemo.js.map +1 -1
- package/dist/cjs/AvatarDemo.js +22 -33
- package/dist/cjs/AvatarDemo.js.map +1 -1
- package/dist/cjs/ButtonDemo.js +16 -63
- package/dist/cjs/ButtonDemo.js.map +1 -1
- package/dist/cjs/CardDemo.js +29 -57
- package/dist/cjs/CardDemo.js.map +1 -1
- package/dist/cjs/ColorsDemo.js +62 -86
- package/dist/cjs/ColorsDemo.js.map +1 -1
- package/dist/cjs/DialogDemo.js +50 -115
- package/dist/cjs/DialogDemo.js.map +1 -1
- package/dist/cjs/FeatherIconsDemo.js +13 -38
- package/dist/cjs/FeatherIconsDemo.js.map +1 -1
- package/dist/cjs/FormsDemo.js +10 -39
- package/dist/cjs/FormsDemo.js.map +1 -1
- package/dist/cjs/GroupDemo.js +16 -51
- package/dist/cjs/GroupDemo.js.map +1 -1
- package/dist/cjs/HeadingsDemo.js +8 -23
- package/dist/cjs/HeadingsDemo.js.map +1 -1
- package/dist/cjs/ImageDemo.js +1 -5
- package/dist/cjs/ImageDemo.js.map +1 -1
- package/dist/cjs/LabelDemo.js +10 -40
- package/dist/cjs/LabelDemo.js.map +1 -1
- package/dist/cjs/LinearGradientDemo.js +12 -9
- package/dist/cjs/LinearGradientDemo.js.map +1 -1
- package/dist/cjs/ListItemDemo.js +22 -51
- package/dist/cjs/ListItemDemo.js.map +1 -1
- package/dist/cjs/LucideIconsDemo.js +13 -38
- package/dist/cjs/LucideIconsDemo.js.map +1 -1
- package/dist/cjs/PopoverDemo.js +34 -89
- package/dist/cjs/PopoverDemo.js.map +1 -1
- package/dist/cjs/ProgressDemo.js +30 -61
- package/dist/cjs/ProgressDemo.js.map +1 -1
- package/dist/cjs/ScrollViewDemo.js +10 -54
- package/dist/cjs/ScrollViewDemo.js.map +1 -1
- package/dist/cjs/SelectDemo.js +43 -106
- package/dist/cjs/SelectDemo.js.map +1 -1
- package/dist/cjs/SeparatorDemo.js +12 -42
- package/dist/cjs/SeparatorDemo.js.map +1 -1
- package/dist/cjs/ShapesDemo.js +4 -16
- package/dist/cjs/ShapesDemo.js.map +1 -1
- package/dist/cjs/SheetDemo.js +48 -90
- package/dist/cjs/SheetDemo.js.map +1 -1
- package/dist/cjs/SliderDemo.js +9 -32
- package/dist/cjs/SliderDemo.js.map +1 -1
- package/dist/cjs/SpinnerDemo.js +4 -15
- package/dist/cjs/SpinnerDemo.js.map +1 -1
- package/dist/cjs/StacksDemo.js +17 -89
- package/dist/cjs/StacksDemo.js.map +1 -1
- package/dist/cjs/SwitchDemo.js +11 -45
- package/dist/cjs/SwitchDemo.js.map +1 -1
- package/dist/cjs/TextDemo.js +9 -33
- package/dist/cjs/TextDemo.js.map +1 -1
- package/dist/cjs/ThemeInverseDemo.js +10 -35
- package/dist/cjs/ThemeInverseDemo.js.map +1 -1
- package/dist/cjs/TokensDemo.js +52 -80
- package/dist/cjs/TokensDemo.js.map +1 -1
- package/dist/cjs/TooltipDemo.js +42 -104
- package/dist/cjs/TooltipDemo.js.map +1 -1
- package/dist/cjs/UpdateThemeDemo.js +12 -16
- package/dist/cjs/UpdateThemeDemo.js.map +1 -1
- package/dist/cjs/useOnIntersecting.js +1 -0
- package/dist/cjs/useOnIntersecting.js.map +1 -1
- package/dist/esm/AddThemeDemo.js +12 -22
- package/dist/esm/AddThemeDemo.js.map +1 -1
- package/dist/esm/AlertDialogDemo.js +44 -68
- package/dist/esm/AlertDialogDemo.js.map +1 -1
- package/dist/esm/AnimationsDemo.js +13 -11
- package/dist/esm/AnimationsDemo.js.map +1 -1
- package/dist/esm/AnimationsEnterDemo.js +11 -18
- package/dist/esm/AnimationsEnterDemo.js.map +1 -1
- package/dist/esm/AnimationsHoverDemo.js +17 -16
- package/dist/esm/AnimationsHoverDemo.js.map +1 -1
- package/dist/esm/AnimationsPresenceDemo.js +13 -29
- package/dist/esm/AnimationsPresenceDemo.js.map +1 -1
- package/dist/esm/AnimationsTimingDemo.js +17 -16
- package/dist/esm/AnimationsTimingDemo.js.map +1 -1
- package/dist/esm/AvatarDemo.js +22 -33
- package/dist/esm/AvatarDemo.js.map +1 -1
- package/dist/esm/ButtonDemo.js +16 -63
- package/dist/esm/ButtonDemo.js.map +1 -1
- package/dist/esm/CardDemo.js +29 -57
- package/dist/esm/CardDemo.js.map +1 -1
- package/dist/esm/ColorsDemo.js +62 -86
- package/dist/esm/ColorsDemo.js.map +1 -1
- package/dist/esm/DialogDemo.js +50 -115
- package/dist/esm/DialogDemo.js.map +1 -1
- package/dist/esm/FeatherIconsDemo.js +9 -38
- package/dist/esm/FeatherIconsDemo.js.map +1 -1
- package/dist/esm/FormsDemo.js +10 -39
- package/dist/esm/FormsDemo.js.map +1 -1
- package/dist/esm/GroupDemo.js +16 -51
- package/dist/esm/GroupDemo.js.map +1 -1
- package/dist/esm/HeadingsDemo.js +8 -23
- package/dist/esm/HeadingsDemo.js.map +1 -1
- package/dist/esm/ImageDemo.js +1 -5
- package/dist/esm/ImageDemo.js.map +1 -1
- package/dist/esm/LabelDemo.js +10 -40
- package/dist/esm/LabelDemo.js.map +1 -1
- package/dist/esm/LinearGradientDemo.js +12 -9
- package/dist/esm/LinearGradientDemo.js.map +1 -1
- package/dist/esm/ListItemDemo.js +22 -51
- package/dist/esm/ListItemDemo.js.map +1 -1
- package/dist/esm/LucideIconsDemo.js +9 -38
- package/dist/esm/LucideIconsDemo.js.map +1 -1
- package/dist/esm/PopoverDemo.js +34 -89
- package/dist/esm/PopoverDemo.js.map +1 -1
- package/dist/esm/ProgressDemo.js +30 -61
- package/dist/esm/ProgressDemo.js.map +1 -1
- package/dist/esm/ScrollViewDemo.js +10 -54
- package/dist/esm/ScrollViewDemo.js.map +1 -1
- package/dist/esm/SelectDemo.js +43 -106
- package/dist/esm/SelectDemo.js.map +1 -1
- package/dist/esm/SeparatorDemo.js +12 -42
- package/dist/esm/SeparatorDemo.js.map +1 -1
- package/dist/esm/ShapesDemo.js +4 -16
- package/dist/esm/ShapesDemo.js.map +1 -1
- package/dist/esm/SheetDemo.js +48 -90
- package/dist/esm/SheetDemo.js.map +1 -1
- package/dist/esm/SliderDemo.js +9 -32
- package/dist/esm/SliderDemo.js.map +1 -1
- package/dist/esm/SpinnerDemo.js +4 -15
- package/dist/esm/SpinnerDemo.js.map +1 -1
- package/dist/esm/StacksDemo.js +17 -89
- package/dist/esm/StacksDemo.js.map +1 -1
- package/dist/esm/SwitchDemo.js +11 -45
- package/dist/esm/SwitchDemo.js.map +1 -1
- package/dist/esm/TextDemo.js +9 -33
- package/dist/esm/TextDemo.js.map +1 -1
- package/dist/esm/ThemeInverseDemo.js +10 -35
- package/dist/esm/ThemeInverseDemo.js.map +1 -1
- package/dist/esm/TokensDemo.js +52 -80
- package/dist/esm/TokensDemo.js.map +1 -1
- package/dist/esm/TooltipDemo.js +42 -104
- package/dist/esm/TooltipDemo.js.map +1 -1
- package/dist/esm/UpdateThemeDemo.js +8 -16
- package/dist/esm/UpdateThemeDemo.js.map +1 -1
- package/dist/esm/useOnIntersecting.js +1 -0
- package/dist/esm/useOnIntersecting.js.map +1 -1
- package/dist/jsx/AddThemeDemo.js +14 -11
- package/dist/jsx/AddThemeDemo.js.map +1 -1
- package/dist/jsx/AlertDialogDemo.js +25 -8
- package/dist/jsx/AlertDialogDemo.js.map +1 -1
- package/dist/jsx/AnimationsDemo.js +26 -6
- package/dist/jsx/AnimationsDemo.js.map +1 -1
- package/dist/jsx/AnimationsEnterDemo.js +16 -5
- package/dist/jsx/AnimationsEnterDemo.js.map +1 -1
- package/dist/jsx/AnimationsHoverDemo.js +13 -5
- package/dist/jsx/AnimationsHoverDemo.js.map +1 -1
- package/dist/jsx/AnimationsPresenceDemo.js +20 -2
- package/dist/jsx/AnimationsPresenceDemo.js.map +1 -1
- package/dist/jsx/AnimationsTimingDemo.js +13 -5
- package/dist/jsx/AnimationsTimingDemo.js.map +1 -1
- package/dist/jsx/AvatarDemo.js +8 -2
- package/dist/jsx/AvatarDemo.js.map +1 -1
- package/dist/jsx/CardDemo.js +17 -2
- package/dist/jsx/CardDemo.js.map +1 -1
- package/dist/jsx/ColorsDemo.js +38 -15
- package/dist/jsx/ColorsDemo.js.map +1 -1
- package/dist/jsx/DialogDemo.js +22 -8
- package/dist/jsx/DialogDemo.js.map +1 -1
- package/dist/jsx/FeatherIconsDemo.js.map +1 -1
- package/dist/jsx/LinearGradientDemo.js +16 -2
- package/dist/jsx/LinearGradientDemo.js.map +1 -1
- package/dist/jsx/ListItemDemo.js +16 -2
- package/dist/jsx/ListItemDemo.js.map +1 -1
- package/dist/jsx/LucideIconsDemo.js.map +1 -1
- package/dist/jsx/PopoverDemo.js +22 -9
- package/dist/jsx/PopoverDemo.js.map +1 -1
- package/dist/jsx/ProgressDemo.js +11 -3
- package/dist/jsx/ProgressDemo.js.map +1 -1
- package/dist/jsx/SelectDemo.js +14 -2
- package/dist/jsx/SelectDemo.js.map +1 -1
- package/dist/jsx/SheetDemo.js +24 -3
- package/dist/jsx/SheetDemo.js.map +1 -1
- package/dist/jsx/SliderDemo.js.map +1 -1
- package/dist/jsx/TokensDemo.js +22 -10
- package/dist/jsx/TokensDemo.js.map +1 -1
- package/dist/jsx/TooltipDemo.js +15 -7
- package/dist/jsx/TooltipDemo.js.map +1 -1
- package/dist/jsx/UpdateThemeDemo.js +14 -12
- package/dist/jsx/UpdateThemeDemo.js.map +1 -1
- package/dist/jsx/useOnIntersecting.js +1 -0
- package/dist/jsx/useOnIntersecting.js.map +1 -1
- package/package.json +16 -16
package/dist/esm/HeadingsDemo.js
CHANGED
|
@@ -1,29 +1,14 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { H1, H2, H3, H4, H5, H6, YStack } from "tamagui";
|
|
3
3
|
function HeadingsDemo() {
|
|
4
|
-
return /* @__PURE__ */ jsxs(YStack, {
|
|
5
|
-
|
|
6
|
-
children:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}),
|
|
13
|
-
/* @__PURE__ */ jsx(H3, {
|
|
14
|
-
children: "Heading 3"
|
|
15
|
-
}),
|
|
16
|
-
/* @__PURE__ */ jsx(H4, {
|
|
17
|
-
children: "Heading 4"
|
|
18
|
-
}),
|
|
19
|
-
/* @__PURE__ */ jsx(H5, {
|
|
20
|
-
children: "Heading 5"
|
|
21
|
-
}),
|
|
22
|
-
/* @__PURE__ */ jsx(H6, {
|
|
23
|
-
children: "Heading 6"
|
|
24
|
-
})
|
|
25
|
-
]
|
|
26
|
-
});
|
|
4
|
+
return /* @__PURE__ */ jsxs(YStack, { als: "center", children: [
|
|
5
|
+
/* @__PURE__ */ jsx(H1, { children: "Heading 1" }),
|
|
6
|
+
/* @__PURE__ */ jsx(H2, { children: "Heading 2" }),
|
|
7
|
+
/* @__PURE__ */ jsx(H3, { children: "Heading 3" }),
|
|
8
|
+
/* @__PURE__ */ jsx(H4, { children: "Heading 4" }),
|
|
9
|
+
/* @__PURE__ */ jsx(H5, { children: "Heading 5" }),
|
|
10
|
+
/* @__PURE__ */ jsx(H6, { children: "Heading 6" })
|
|
11
|
+
] });
|
|
27
12
|
}
|
|
28
13
|
export {
|
|
29
14
|
HeadingsDemo
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/HeadingsDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from 'react'\nimport { H1, H2, H3, H4, H5, H6, YStack } from 'tamagui'\n\nexport function HeadingsDemo() {\n return (\n <YStack als=\"center\">\n <H1>Heading 1</H1>\n <H2>Heading 2</H2>\n <H3>Heading 3</H3>\n <H4>Heading 4</H4>\n <H5>Heading 5</H5>\n <H6>Heading 6</H6>\n </YStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAKI,SACE,KADF;AAJJ,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,cAAc;AAExC,SAAS,eAAe;AAC7B,SACE,qBAAC
|
|
5
|
+
"mappings": "AAKI,SACE,KADF;AAJJ,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,cAAc;AAExC,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAI,UACV;AAAA,wBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,KACf;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/ImageDemo.js
CHANGED
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Image } from "tamagui";
|
|
3
3
|
function ImageDemo() {
|
|
4
|
-
return /* @__PURE__ */ jsx(Image, {
|
|
5
|
-
src: "https://placekitten.com/200/300",
|
|
6
|
-
width: 200,
|
|
7
|
-
height: 300
|
|
8
|
-
});
|
|
4
|
+
return /* @__PURE__ */ jsx(Image, { src: "https://placekitten.com/200/300", width: 200, height: 300 });
|
|
9
5
|
}
|
|
10
6
|
export {
|
|
11
7
|
ImageDemo
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ImageDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { Image } from 'tamagui'\n\nexport function ImageDemo() {\n return <Image src=\"https://placekitten.com/200/300\" width={200} height={300} />\n}\n"],
|
|
5
|
-
"mappings": "AAGS;AAHT,SAAS,aAAa;AAEf,SAAS,YAAY;AAC1B,SAAO,oBAAC
|
|
5
|
+
"mappings": "AAGS;AAHT,SAAS,aAAa;AAEf,SAAS,YAAY;AAC1B,SAAO,oBAAC,SAAM,KAAI,mCAAkC,OAAO,KAAK,QAAQ,KAAK;AAC/E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/LabelDemo.js
CHANGED
|
@@ -1,46 +1,16 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Input, Label, Switch, XStack, YStack } from "tamagui";
|
|
3
3
|
function LabelDemo() {
|
|
4
|
-
return /* @__PURE__ */ jsxs(YStack, {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
w: 90,
|
|
15
|
-
htmlFor: "name",
|
|
16
|
-
children: "Name"
|
|
17
|
-
}),
|
|
18
|
-
/* @__PURE__ */ jsx(Input, {
|
|
19
|
-
f: 1,
|
|
20
|
-
id: "name",
|
|
21
|
-
defaultValue: "Nate Wienert"
|
|
22
|
-
})
|
|
23
|
-
]
|
|
24
|
-
}),
|
|
25
|
-
/* @__PURE__ */ jsxs(XStack, {
|
|
26
|
-
ai: "center",
|
|
27
|
-
space: "$4",
|
|
28
|
-
children: [
|
|
29
|
-
/* @__PURE__ */ jsx(Label, {
|
|
30
|
-
w: 90,
|
|
31
|
-
htmlFor: "notify",
|
|
32
|
-
children: "Notifications"
|
|
33
|
-
}),
|
|
34
|
-
/* @__PURE__ */ jsx(Switch, {
|
|
35
|
-
id: "notify",
|
|
36
|
-
children: /* @__PURE__ */ jsx(Switch.Thumb, {
|
|
37
|
-
animation: "quick"
|
|
38
|
-
})
|
|
39
|
-
})
|
|
40
|
-
]
|
|
41
|
-
})
|
|
42
|
-
]
|
|
43
|
-
});
|
|
4
|
+
return /* @__PURE__ */ jsxs(YStack, { p: "$3", miw: 300, space: "$4", children: [
|
|
5
|
+
/* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$4", children: [
|
|
6
|
+
/* @__PURE__ */ jsx(Label, { w: 90, htmlFor: "name", children: "Name" }),
|
|
7
|
+
/* @__PURE__ */ jsx(Input, { f: 1, id: "name", defaultValue: "Nate Wienert" })
|
|
8
|
+
] }),
|
|
9
|
+
/* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$4", children: [
|
|
10
|
+
/* @__PURE__ */ jsx(Label, { w: 90, htmlFor: "notify", children: "Notifications" }),
|
|
11
|
+
/* @__PURE__ */ jsx(Switch, { id: "notify", children: /* @__PURE__ */ jsx(Switch.Thumb, { animation: "quick" }) })
|
|
12
|
+
] })
|
|
13
|
+
] });
|
|
44
14
|
}
|
|
45
15
|
export {
|
|
46
16
|
LabelDemo
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/LabelDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { Input, Label, Switch, XStack, YStack } from 'tamagui'\n\nexport function LabelDemo() {\n return (\n <YStack p=\"$3\" miw={300} space=\"$4\">\n <XStack ai=\"center\" space=\"$4\">\n <Label w={90} htmlFor=\"name\">\n Name\n </Label>\n <Input f={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n </XStack>\n\n <XStack ai=\"center\" space=\"$4\">\n <Label w={90} htmlFor=\"notify\">\n Notifications\n </Label>\n <Switch id=\"notify\">\n <Switch.Thumb animation=\"quick\" />\n </Switch>\n </XStack>\n </YStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,OAAO,QAAQ,QAAQ,cAAc;AAE9C,SAAS,YAAY;AAC1B,SACE,qBAAC
|
|
5
|
+
"mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,OAAO,QAAQ,QAAQ,cAAc;AAE9C,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,GAAE,MAAK,KAAK,KAAK,OAAM,MAC7B;AAAA,yBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,SAAM,GAAG,IAAI,SAAQ,QAAO,kBAE7B;AAAA,MACA,oBAAC,SAAM,GAAG,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,OACrD;AAAA,IAEA,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,SAAM,GAAG,IAAI,SAAQ,UAAS,2BAE/B;AAAA,MACA,oBAAC,UAAO,IAAG,UACT,8BAAC,OAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,OACF;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,27 +2,30 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { XStack } from "tamagui";
|
|
3
3
|
import { LinearGradient } from "tamagui/linear-gradient";
|
|
4
4
|
function LinearGradientDemo() {
|
|
5
|
-
return /* @__PURE__ */ jsxs(XStack, {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
return /* @__PURE__ */ jsxs(XStack, { space: true, children: [
|
|
6
|
+
/* @__PURE__ */ jsx(
|
|
7
|
+
LinearGradient,
|
|
8
|
+
{
|
|
9
9
|
width: "$6",
|
|
10
10
|
height: "$6",
|
|
11
11
|
br: "$4",
|
|
12
12
|
colors: ["$red10", "$yellow10"],
|
|
13
13
|
start: [0, 1],
|
|
14
14
|
end: [0, 0]
|
|
15
|
-
}
|
|
16
|
-
|
|
15
|
+
}
|
|
16
|
+
),
|
|
17
|
+
/* @__PURE__ */ jsx(
|
|
18
|
+
LinearGradient,
|
|
19
|
+
{
|
|
17
20
|
width: "$6",
|
|
18
21
|
height: "$6",
|
|
19
22
|
br: "$4",
|
|
20
23
|
colors: ["$background", "$color"],
|
|
21
24
|
start: [1, 1],
|
|
22
25
|
end: [0, 0]
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
});
|
|
26
|
+
}
|
|
27
|
+
)
|
|
28
|
+
] });
|
|
26
29
|
}
|
|
27
30
|
export {
|
|
28
31
|
LinearGradientDemo
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/LinearGradientDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { XStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function LinearGradientDemo() {\n return (\n <XStack space>\n {/* tokens */}\n <LinearGradient\n width=\"$6\"\n height=\"$6\"\n br=\"$4\"\n colors={['$red10', '$yellow10']}\n start={[0, 1]}\n end={[0, 0]}\n />\n\n {/* theme values */}\n <LinearGradient\n width=\"$6\"\n height=\"$6\"\n br=\"$4\"\n colors={['$background', '$color']}\n start={[1, 1]}\n end={[0, 0]}\n />\n </XStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAKI,SAEE,KAFF;AALJ,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAExB,SAAS,qBAAqB;AACnC,SACE,qBAAC
|
|
5
|
+
"mappings": "AAKI,SAEE,KAFF;AALJ,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAExB,SAAS,qBAAqB;AACnC,SACE,qBAAC,UAAO,OAAK,MAEX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,UAAU,WAAW;AAAA,QAC9B,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,eAAe,QAAQ;AAAA,QAChC,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/ListItemDemo.js
CHANGED
|
@@ -2,73 +2,44 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { ChevronRight, Cloud, Moon, Star, Sun } from "@tamagui/lucide-icons";
|
|
3
3
|
import { ListItem, Separator, XStack, YGroup } from "tamagui";
|
|
4
4
|
function ListItemDemo() {
|
|
5
|
-
return /* @__PURE__ */ jsxs(XStack, {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
children: [
|
|
10
|
-
/* @__PURE__ */ jsx(ListItemDemo1, {}),
|
|
11
|
-
/* @__PURE__ */ jsx(ListItemDemo2, {})
|
|
12
|
-
]
|
|
13
|
-
});
|
|
5
|
+
return /* @__PURE__ */ jsxs(XStack, { $sm: { flexDirection: "column" }, px: "$4", space: true, children: [
|
|
6
|
+
/* @__PURE__ */ jsx(ListItemDemo1, {}),
|
|
7
|
+
/* @__PURE__ */ jsx(ListItemDemo2, {})
|
|
8
|
+
] });
|
|
14
9
|
}
|
|
15
10
|
function ListItemDemo1() {
|
|
16
|
-
return /* @__PURE__ */ jsxs(YGroup, {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
/* @__PURE__ */ jsx(ListItem, {
|
|
23
|
-
hoverTheme: true,
|
|
24
|
-
icon: Star,
|
|
25
|
-
title: "Star",
|
|
26
|
-
subTitle: "Twinkles"
|
|
27
|
-
}),
|
|
28
|
-
/* @__PURE__ */ jsx(ListItem, {
|
|
29
|
-
hoverTheme: true,
|
|
30
|
-
icon: Moon,
|
|
31
|
-
children: "Moon"
|
|
32
|
-
}),
|
|
33
|
-
/* @__PURE__ */ jsx(ListItem, {
|
|
34
|
-
hoverTheme: true,
|
|
35
|
-
icon: Sun,
|
|
36
|
-
children: "Sun"
|
|
37
|
-
}),
|
|
38
|
-
/* @__PURE__ */ jsx(ListItem, {
|
|
39
|
-
hoverTheme: true,
|
|
40
|
-
icon: Cloud,
|
|
41
|
-
children: "Cloud"
|
|
42
|
-
})
|
|
43
|
-
]
|
|
44
|
-
});
|
|
11
|
+
return /* @__PURE__ */ jsxs(YGroup, { als: "center", bordered: true, w: 240, size: "$4", children: [
|
|
12
|
+
/* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Star, title: "Star", subTitle: "Twinkles" }),
|
|
13
|
+
/* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Moon, children: "Moon" }),
|
|
14
|
+
/* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Sun, children: "Sun" }),
|
|
15
|
+
/* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Cloud, children: "Cloud" })
|
|
16
|
+
] });
|
|
45
17
|
}
|
|
46
18
|
function ListItemDemo2() {
|
|
47
|
-
return /* @__PURE__ */ jsxs(YGroup, {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
size: "$5",
|
|
52
|
-
separator: /* @__PURE__ */ jsx(Separator, {}),
|
|
53
|
-
children: [
|
|
54
|
-
/* @__PURE__ */ jsx(ListItem, {
|
|
19
|
+
return /* @__PURE__ */ jsxs(YGroup, { als: "center", bordered: true, w: 240, size: "$5", separator: /* @__PURE__ */ jsx(Separator, {}), children: [
|
|
20
|
+
/* @__PURE__ */ jsx(
|
|
21
|
+
ListItem,
|
|
22
|
+
{
|
|
55
23
|
hoverTheme: true,
|
|
56
24
|
pressTheme: true,
|
|
57
25
|
title: "Star",
|
|
58
26
|
subTitle: "Subtitle",
|
|
59
27
|
icon: Star,
|
|
60
28
|
iconAfter: ChevronRight
|
|
61
|
-
}
|
|
62
|
-
|
|
29
|
+
}
|
|
30
|
+
),
|
|
31
|
+
/* @__PURE__ */ jsx(
|
|
32
|
+
ListItem,
|
|
33
|
+
{
|
|
63
34
|
hoverTheme: true,
|
|
64
35
|
pressTheme: true,
|
|
65
36
|
title: "Moon",
|
|
66
37
|
subTitle: "Subtitle",
|
|
67
38
|
icon: Moon,
|
|
68
39
|
iconAfter: ChevronRight
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
});
|
|
40
|
+
}
|
|
41
|
+
)
|
|
42
|
+
] });
|
|
72
43
|
}
|
|
73
44
|
export {
|
|
74
45
|
ListItemDemo
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ListItemDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n return (\n <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n <ListItemDemo1 />\n <ListItemDemo2 />\n </XStack>\n )\n}\n\nfunction ListItemDemo1() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$4\">\n <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n <ListItem hoverTheme icon={Moon}>\n Moon\n </ListItem>\n <ListItem hoverTheme icon={Sun}>\n Sun\n </ListItem>\n <ListItem hoverTheme icon={Cloud}>\n Cloud\n </ListItem>\n </YGroup>\n )\n}\n\nfunction ListItemDemo2() {\n return (\n <YGroup als=\"center\" bordered w={240} size=\"$5\" separator={<Separator />}>\n <ListItem\n hoverTheme\n pressTheme\n title=\"Star\"\n subTitle=\"Subtitle\"\n icon={Star}\n iconAfter={ChevronRight}\n />\n <ListItem\n hoverTheme\n pressTheme\n title=\"Moon\"\n subTitle=\"Subtitle\"\n icon={Moon}\n iconAfter={ChevronRight}\n />\n </YGroup>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAMI,SACE,KADF;AANJ,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AAErD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,qBAAC
|
|
5
|
+
"mappings": "AAMI,SACE,KADF;AANJ,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AAErD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAK,EAAE,eAAe,SAAS,GAAG,IAAG,MAAK,OAAK,MACrD;AAAA,wBAAC,iBAAc;AAAA,IACf,oBAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MACzC;AAAA,wBAAC,YAAS,YAAU,MAAC,MAAM,MAAM,OAAM,QAAO,UAAS,YAAW;AAAA,IAClE,oBAAC,YAAS,YAAU,MAAC,MAAM,MAAM,kBAEjC;AAAA,IACA,oBAAC,YAAS,YAAU,MAAC,MAAM,KAAK,iBAEhC;AAAA,IACA,oBAAC,YAAS,YAAU,MAAC,MAAM,OAAO,mBAElC;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MAAK,WAAW,oBAAC,aAAU,GACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -15,46 +15,17 @@ function LucideIconsDemo() {
|
|
|
15
15
|
const iconsMemo = useMemo(() => {
|
|
16
16
|
const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
|
|
17
17
|
return icons.slice(0, 835).map(({ Icon, name }) => {
|
|
18
|
-
return /* @__PURE__ */ jsxs(YStack, {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
/* @__PURE__ */ jsx(Icon, {
|
|
24
|
-
size: size * 0.25
|
|
25
|
-
}),
|
|
26
|
-
/* @__PURE__ */ jsx(Spacer, {}),
|
|
27
|
-
/* @__PURE__ */ jsx(Paragraph, {
|
|
28
|
-
size: "$2",
|
|
29
|
-
o: 0.5,
|
|
30
|
-
children: name
|
|
31
|
-
})
|
|
32
|
-
]
|
|
33
|
-
}, 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);
|
|
34
23
|
});
|
|
35
24
|
}, [search]);
|
|
36
|
-
return /* @__PURE__ */ jsxs(YStack, {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
space: true,
|
|
41
|
-
children: [
|
|
42
|
-
/* @__PURE__ */ jsx(Input, {
|
|
43
|
-
value: searchRaw,
|
|
44
|
-
onChangeText: setSearch,
|
|
45
|
-
placeholder: "Search..."
|
|
46
|
-
}),
|
|
47
|
-
/* @__PURE__ */ jsx(YStack, {
|
|
48
|
-
h: 420,
|
|
49
|
-
children: /* @__PURE__ */ jsx(ScrollView, {
|
|
50
|
-
children: /* @__PURE__ */ jsx(Grid, {
|
|
51
|
-
itemMinWidth: size,
|
|
52
|
-
children: iconsMemo
|
|
53
|
-
})
|
|
54
|
-
})
|
|
55
|
-
})
|
|
56
|
-
]
|
|
57
|
-
});
|
|
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
|
+
] });
|
|
58
29
|
}
|
|
59
30
|
export {
|
|
60
31
|
LucideIconsDemo
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/LucideIconsDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as LucideIcons from '@tamagui/lucide-icons'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst lucideIcons = Object.keys(LucideIcons).map((name) => ({\n key: name.toLowerCase(),\n name,\n Icon: LucideIcons[name],\n}))\n\nexport function LucideIconsDemo() {\n const [searchRaw, setSearch] = useState('')\n const search = useDebounceValue(searchRaw, 400)\n\n const size = 100\n\n const iconsMemo = useMemo(() => {\n const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n return icons.slice(0, 835).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": "AAqBQ,SACE,KADF;AArBR,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,cAAc,OAAO,KAAK,WAAW,EAAE,IAAI,CAAC,UAAU;AAAA,EAC1D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY;
|
|
5
|
+
"mappings": "AAqBQ,SACE,KADF;AArBR,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,cAAc,OAAO,KAAK,WAAW,EAAE,IAAI,CAAC,UAAU;AAAA,EAC1D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY,IAAI;AACxB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,YAAY,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC9E,WAAO,MAAM,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACjD,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
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/PopoverDemo.js
CHANGED
|
@@ -10,66 +10,27 @@ import {
|
|
|
10
10
|
YGroup
|
|
11
11
|
} from "tamagui";
|
|
12
12
|
function PopoverDemo() {
|
|
13
|
-
return /* @__PURE__ */ jsxs(XStack, {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
/* @__PURE__ */ jsx(Demo, {
|
|
20
|
-
placement: "left",
|
|
21
|
-
Icon: ChevronLeft,
|
|
22
|
-
Name: "left-popover"
|
|
23
|
-
}),
|
|
24
|
-
/* @__PURE__ */ jsx(Demo, {
|
|
25
|
-
placement: "bottom",
|
|
26
|
-
Icon: ChevronDown,
|
|
27
|
-
Name: "bottom-popover"
|
|
28
|
-
}),
|
|
29
|
-
/* @__PURE__ */ jsx(Demo, {
|
|
30
|
-
placement: "top",
|
|
31
|
-
Icon: ChevronUp,
|
|
32
|
-
Name: "top-popover"
|
|
33
|
-
}),
|
|
34
|
-
/* @__PURE__ */ jsx(Demo, {
|
|
35
|
-
placement: "right",
|
|
36
|
-
Icon: ChevronRight,
|
|
37
|
-
Name: "right-popover"
|
|
38
|
-
})
|
|
39
|
-
]
|
|
40
|
-
});
|
|
13
|
+
return /* @__PURE__ */ jsxs(XStack, { space: "$2", f: 1, jc: "center", ai: "center", children: [
|
|
14
|
+
/* @__PURE__ */ jsx(Demo, { placement: "left", Icon: ChevronLeft, Name: "left-popover" }),
|
|
15
|
+
/* @__PURE__ */ jsx(Demo, { placement: "bottom", Icon: ChevronDown, Name: "bottom-popover" }),
|
|
16
|
+
/* @__PURE__ */ jsx(Demo, { placement: "top", Icon: ChevronUp, Name: "top-popover" }),
|
|
17
|
+
/* @__PURE__ */ jsx(Demo, { placement: "right", Icon: ChevronRight, Name: "right-popover" })
|
|
18
|
+
] });
|
|
41
19
|
}
|
|
42
20
|
function Demo({
|
|
43
21
|
Icon,
|
|
44
22
|
Name,
|
|
45
23
|
...props
|
|
46
24
|
}) {
|
|
47
|
-
return /* @__PURE__ */ jsxs(Popover, {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
/* @__PURE__ */ jsx(Popover.
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}),
|
|
57
|
-
/* @__PURE__ */ jsx(Adapt, {
|
|
58
|
-
when: "sm",
|
|
59
|
-
platform: "web",
|
|
60
|
-
children: /* @__PURE__ */ jsxs(Popover.Sheet, {
|
|
61
|
-
modal: true,
|
|
62
|
-
dismissOnSnapToBottom: true,
|
|
63
|
-
children: [
|
|
64
|
-
/* @__PURE__ */ jsx(Popover.Sheet.Frame, {
|
|
65
|
-
padding: "$4",
|
|
66
|
-
children: /* @__PURE__ */ jsx(Adapt.Contents, {})
|
|
67
|
-
}),
|
|
68
|
-
/* @__PURE__ */ jsx(Popover.Sheet.Overlay, {})
|
|
69
|
-
]
|
|
70
|
-
})
|
|
71
|
-
}),
|
|
72
|
-
/* @__PURE__ */ jsxs(Popover.Content, {
|
|
25
|
+
return /* @__PURE__ */ jsxs(Popover, { size: "$5", ...props, children: [
|
|
26
|
+
/* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { icon: Icon }) }),
|
|
27
|
+
/* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "web", children: /* @__PURE__ */ jsxs(Popover.Sheet, { modal: true, dismissOnSnapToBottom: true, children: [
|
|
28
|
+
/* @__PURE__ */ jsx(Popover.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }),
|
|
29
|
+
/* @__PURE__ */ jsx(Popover.Sheet.Overlay, {})
|
|
30
|
+
] }) }),
|
|
31
|
+
/* @__PURE__ */ jsxs(
|
|
32
|
+
Popover.Content,
|
|
33
|
+
{
|
|
73
34
|
bw: 1,
|
|
74
35
|
boc: "$borderColor",
|
|
75
36
|
enterStyle: { x: 0, y: -10, o: 0 },
|
|
@@ -87,42 +48,26 @@ function Demo({
|
|
|
87
48
|
],
|
|
88
49
|
elevate: true,
|
|
89
50
|
children: [
|
|
90
|
-
/* @__PURE__ */ jsx(Popover.Arrow, {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
children:
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
size: "$3",
|
|
107
|
-
id: Name
|
|
108
|
-
})
|
|
109
|
-
]
|
|
110
|
-
}),
|
|
111
|
-
/* @__PURE__ */ jsx(Popover.Close, {
|
|
112
|
-
asChild: true,
|
|
113
|
-
children: /* @__PURE__ */ jsx(Button, {
|
|
114
|
-
size: "$3",
|
|
115
|
-
onPress: () => {
|
|
116
|
-
},
|
|
117
|
-
children: "Submit"
|
|
118
|
-
})
|
|
119
|
-
})
|
|
120
|
-
]
|
|
121
|
-
})
|
|
51
|
+
/* @__PURE__ */ jsx(Popover.Arrow, { bw: 1, boc: "$borderColor" }),
|
|
52
|
+
/* @__PURE__ */ jsxs(YGroup, { space: "$3", children: [
|
|
53
|
+
/* @__PURE__ */ jsxs(XStack, { space: "$3", children: [
|
|
54
|
+
/* @__PURE__ */ jsx(Label, { size: "$3", htmlFor: Name, children: "Name" }),
|
|
55
|
+
/* @__PURE__ */ jsx(Input, { size: "$3", id: Name })
|
|
56
|
+
] }),
|
|
57
|
+
/* @__PURE__ */ jsx(Popover.Close, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
58
|
+
Button,
|
|
59
|
+
{
|
|
60
|
+
size: "$3",
|
|
61
|
+
onPress: () => {
|
|
62
|
+
},
|
|
63
|
+
children: "Submit"
|
|
64
|
+
}
|
|
65
|
+
) })
|
|
66
|
+
] })
|
|
122
67
|
]
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
});
|
|
68
|
+
}
|
|
69
|
+
)
|
|
70
|
+
] });
|
|
126
71
|
}
|
|
127
72
|
export {
|
|
128
73
|
Demo,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/PopoverDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n Adapt,\n Button,\n Input,\n Label,\n Popover,\n PopoverProps,\n XStack,\n YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\" f={1} jc=\"center\" ai=\"center\">\n <Demo placement=\"left\" Icon={ChevronLeft} Name=\"left-popover\" />\n <Demo placement=\"bottom\" Icon={ChevronDown} Name=\"bottom-popover\" />\n <Demo placement=\"top\" Icon={ChevronUp} Name=\"top-popover\" />\n <Demo placement=\"right\" Icon={ChevronRight} Name=\"right-popover\" />\n </XStack>\n )\n}\n\nexport function Demo({\n Icon,\n Name,\n ...props\n}: PopoverProps & { Icon?: any; Name?: string }) {\n return (\n <Popover size=\"$5\" {...props}>\n <Popover.Trigger asChild>\n <Button icon={Icon} />\n </Popover.Trigger>\n\n <Adapt when=\"sm\" platform=\"web\">\n <Popover.Sheet modal dismissOnSnapToBottom>\n <Popover.Sheet.Frame padding=\"$4\">\n <Adapt.Contents />\n </Popover.Sheet.Frame>\n <Popover.Sheet.Overlay />\n </Popover.Sheet>\n </Adapt>\n\n <Popover.Content\n bw={1}\n boc=\"$borderColor\"\n enterStyle={{ x: 0, y: -10, o: 0 }}\n exitStyle={{ x: 0, y: -10, o: 0 }}\n x={0}\n y={0}\n o={1}\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n elevate\n >\n <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n <YGroup space=\"$3\">\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor={Name}>\n Name\n </Label>\n <Input size=\"$3\" id={Name} />\n </XStack>\n <Popover.Close asChild>\n <Button\n size=\"$3\"\n onPress={() => {\n /* Custom code goes here, does not interfere with popover closure */\n }}\n >\n Submit\n </Button>\n </Popover.Close>\n </YGroup>\n </Popover.Content>\n </Popover>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAcI,SACE,KADF;AAdJ,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,qBAAC
|
|
5
|
+
"mappings": "AAcI,SACE,KADF;AAdJ,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,qBAAC,UAAO,OAAM,MAAK,GAAG,GAAG,IAAG,UAAS,IAAG,UACtC;AAAA,wBAAC,QAAK,WAAU,QAAO,MAAM,aAAa,MAAK,gBAAe;AAAA,IAC9D,oBAAC,QAAK,WAAU,UAAS,MAAM,aAAa,MAAK,kBAAiB;AAAA,IAClE,oBAAC,QAAK,WAAU,OAAM,MAAM,WAAW,MAAK,eAAc;AAAA,IAC1D,oBAAC,QAAK,WAAU,SAAQ,MAAM,cAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,qBAAC,WAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,wBAAC,QAAQ,SAAR,EAAgB,SAAO,MACtB,8BAAC,UAAO,MAAM,MAAM,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,OACxB,+BAAC,QAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,0BAAC,QAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,QAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,IAAI;AAAA,QACJ,KAAI;AAAA,QACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QAChC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,8BAAC,QAAQ,OAAR,EAAc,IAAI,GAAG,KAAI,gBAAe;AAAA,UAEzC,qBAAC,UAAO,OAAM,MACZ;AAAA,iCAAC,UAAO,OAAM,MACZ;AAAA,kCAAC,SAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,oBAAC,SAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B;AAAA,YACA,oBAAC,QAAQ,OAAR,EAAc,SAAO,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AAAA,gBAEf;AAAA,gBACD;AAAA;AAAA,YAED,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|