@tamagui/demos 1.116.1 → 1.116.2
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/AccordionDemo.js +43 -0
- package/dist/cjs/AddThemeDemo.js +56 -0
- package/dist/cjs/AlertDialogDemo.js +68 -0
- package/dist/cjs/AnimationsDemo.js +99 -0
- package/dist/cjs/AnimationsEnterDemo.js +55 -0
- package/dist/cjs/AnimationsHoverDemo.js +41 -0
- package/dist/cjs/AnimationsPresenceDemo.js +102 -0
- package/dist/cjs/AnimationsTimingDemo.js +40 -0
- package/dist/cjs/AvatarDemo.js +45 -0
- package/dist/cjs/BuildAButtonDemo.js +57 -0
- package/dist/cjs/ButtonDemo.js +39 -0
- package/dist/cjs/CardDemo.js +63 -0
- package/dist/cjs/CheckboxDemo.js +40 -0
- package/dist/cjs/CheckboxHeadlessDemo.js +62 -0
- package/dist/cjs/CheckboxUnstyledDemo.js +52 -0
- package/dist/cjs/ColorsDemo.js +95 -0
- package/dist/cjs/DialogDemo.js +99 -0
- package/dist/cjs/FormsDemo.js +57 -0
- package/dist/cjs/Grid.js +58 -0
- package/dist/cjs/GroupDemo.js +39 -0
- package/dist/cjs/HeadingsDemo.js +31 -0
- package/dist/cjs/ImageDemo.js +33 -0
- package/dist/cjs/InputsDemo.js +46 -0
- package/dist/cjs/LabelDemo.js +33 -0
- package/dist/cjs/LinearGradientDemo.js +47 -0
- package/dist/cjs/ListItemDemo.js +61 -0
- package/dist/cjs/LucideIconsDemo.js +72 -0
- package/dist/cjs/NewInputsDemo.js +46 -0
- package/dist/cjs/PopoverDemo.js +126 -0
- package/dist/cjs/ProgressDemo.js +88 -0
- package/dist/cjs/RadioGroupDemo.js +36 -0
- package/dist/cjs/RadioGroupHeadlessDemo.js +117 -0
- package/dist/cjs/RadioGroupUnstyledDemo.js +107 -0
- package/dist/cjs/ReplaceThemeDemo.js +58 -0
- package/dist/cjs/ScrollViewDemo.js +43 -0
- package/dist/cjs/SelectDemo.js +190 -0
- package/dist/cjs/SeparatorDemo.js +35 -0
- package/dist/cjs/ShapesDemo.js +27 -0
- package/dist/cjs/SheetDemo.js +120 -0
- package/dist/cjs/SliderDemo.js +34 -0
- package/dist/cjs/SpinnerDemo.js +27 -0
- package/dist/cjs/StacksDemo.js +93 -0
- package/dist/cjs/SwitchDemo.js +56 -0
- package/dist/cjs/SwitchHeadlessDemo.js +87 -0
- package/dist/cjs/SwitchUnstyledDemo.js +64 -0
- package/dist/cjs/TabsAdvancedDemo.js +283 -0
- package/dist/cjs/TabsDemo.js +144 -0
- package/dist/cjs/TextDemo.js +31 -0
- package/dist/cjs/ThemeBuilderDemo.js +149 -0
- package/dist/cjs/ThemeInverseDemo.js +56 -0
- package/dist/cjs/ToastDemo.js +112 -0
- package/dist/cjs/ToastDuplicateDemo.js +64 -0
- package/dist/cjs/ToggleGroupDemo.js +63 -0
- package/dist/cjs/TokensDemo.js +100 -0
- package/dist/cjs/TooltipDemo.js +68 -0
- package/dist/cjs/UpdateThemeDemo.js +61 -0
- package/dist/cjs/WebNativeImageDemo.js +24 -0
- package/dist/cjs/index.js +71 -0
- package/dist/cjs/tamagui.config.js +22 -0
- package/dist/cjs/useOnIntersecting.js +63 -0
- package/package.json +19 -19
- /package/dist/cjs/{AccordionDemo.cjs.map → AccordionDemo.js.map} +0 -0
- /package/dist/cjs/{AddThemeDemo.cjs.map → AddThemeDemo.js.map} +0 -0
- /package/dist/cjs/{AlertDialogDemo.cjs.map → AlertDialogDemo.js.map} +0 -0
- /package/dist/cjs/{AnimationsDemo.cjs.map → AnimationsDemo.js.map} +0 -0
- /package/dist/cjs/{AnimationsEnterDemo.cjs.map → AnimationsEnterDemo.js.map} +0 -0
- /package/dist/cjs/{AnimationsHoverDemo.cjs.map → AnimationsHoverDemo.js.map} +0 -0
- /package/dist/cjs/{AnimationsPresenceDemo.cjs.map → AnimationsPresenceDemo.js.map} +0 -0
- /package/dist/cjs/{AnimationsTimingDemo.cjs.map → AnimationsTimingDemo.js.map} +0 -0
- /package/dist/cjs/{AvatarDemo.cjs.map → AvatarDemo.js.map} +0 -0
- /package/dist/cjs/{BuildAButtonDemo.cjs.map → BuildAButtonDemo.js.map} +0 -0
- /package/dist/cjs/{ButtonDemo.cjs.map → ButtonDemo.js.map} +0 -0
- /package/dist/cjs/{CardDemo.cjs.map → CardDemo.js.map} +0 -0
- /package/dist/cjs/{CheckboxDemo.cjs.map → CheckboxDemo.js.map} +0 -0
- /package/dist/cjs/{CheckboxHeadlessDemo.cjs.map → CheckboxHeadlessDemo.js.map} +0 -0
- /package/dist/cjs/{CheckboxUnstyledDemo.cjs.map → CheckboxUnstyledDemo.js.map} +0 -0
- /package/dist/cjs/{ColorsDemo.cjs.map → ColorsDemo.js.map} +0 -0
- /package/dist/cjs/{DialogDemo.cjs.map → DialogDemo.js.map} +0 -0
- /package/dist/cjs/{FormsDemo.cjs.map → FormsDemo.js.map} +0 -0
- /package/dist/cjs/{Grid.cjs.map → Grid.js.map} +0 -0
- /package/dist/cjs/{GroupDemo.cjs.map → GroupDemo.js.map} +0 -0
- /package/dist/cjs/{HeadingsDemo.cjs.map → HeadingsDemo.js.map} +0 -0
- /package/dist/cjs/{ImageDemo.cjs.map → ImageDemo.js.map} +0 -0
- /package/dist/cjs/{InputsDemo.cjs.map → InputsDemo.js.map} +0 -0
- /package/dist/cjs/{LabelDemo.cjs.map → LabelDemo.js.map} +0 -0
- /package/dist/cjs/{LinearGradientDemo.cjs.map → LinearGradientDemo.js.map} +0 -0
- /package/dist/cjs/{ListItemDemo.cjs.map → ListItemDemo.js.map} +0 -0
- /package/dist/cjs/{LucideIconsDemo.cjs.map → LucideIconsDemo.js.map} +0 -0
- /package/dist/cjs/{NewInputsDemo.cjs.map → NewInputsDemo.js.map} +0 -0
- /package/dist/cjs/{PopoverDemo.cjs.map → PopoverDemo.js.map} +0 -0
- /package/dist/cjs/{ProgressDemo.cjs.map → ProgressDemo.js.map} +0 -0
- /package/dist/cjs/{RadioGroupDemo.cjs.map → RadioGroupDemo.js.map} +0 -0
- /package/dist/cjs/{RadioGroupHeadlessDemo.cjs.map → RadioGroupHeadlessDemo.js.map} +0 -0
- /package/dist/cjs/{RadioGroupUnstyledDemo.cjs.map → RadioGroupUnstyledDemo.js.map} +0 -0
- /package/dist/cjs/{ReplaceThemeDemo.cjs.map → ReplaceThemeDemo.js.map} +0 -0
- /package/dist/cjs/{ScrollViewDemo.cjs.map → ScrollViewDemo.js.map} +0 -0
- /package/dist/cjs/{SelectDemo.cjs.map → SelectDemo.js.map} +0 -0
- /package/dist/cjs/{SeparatorDemo.cjs.map → SeparatorDemo.js.map} +0 -0
- /package/dist/cjs/{ShapesDemo.cjs.map → ShapesDemo.js.map} +0 -0
- /package/dist/cjs/{SheetDemo.cjs.map → SheetDemo.js.map} +0 -0
- /package/dist/cjs/{SliderDemo.cjs.map → SliderDemo.js.map} +0 -0
- /package/dist/cjs/{SpinnerDemo.cjs.map → SpinnerDemo.js.map} +0 -0
- /package/dist/cjs/{StacksDemo.cjs.map → StacksDemo.js.map} +0 -0
- /package/dist/cjs/{SwitchDemo.cjs.map → SwitchDemo.js.map} +0 -0
- /package/dist/cjs/{SwitchHeadlessDemo.cjs.map → SwitchHeadlessDemo.js.map} +0 -0
- /package/dist/cjs/{SwitchUnstyledDemo.cjs.map → SwitchUnstyledDemo.js.map} +0 -0
- /package/dist/cjs/{TabsAdvancedDemo.cjs.map → TabsAdvancedDemo.js.map} +0 -0
- /package/dist/cjs/{TabsDemo.cjs.map → TabsDemo.js.map} +0 -0
- /package/dist/cjs/{TextDemo.cjs.map → TextDemo.js.map} +0 -0
- /package/dist/cjs/{ThemeBuilderDemo.cjs.map → ThemeBuilderDemo.js.map} +0 -0
- /package/dist/cjs/{ThemeInverseDemo.cjs.map → ThemeInverseDemo.js.map} +0 -0
- /package/dist/cjs/{ToastDemo.cjs.map → ToastDemo.js.map} +0 -0
- /package/dist/cjs/{ToastDuplicateDemo.cjs.map → ToastDuplicateDemo.js.map} +0 -0
- /package/dist/cjs/{ToggleGroupDemo.cjs.map → ToggleGroupDemo.js.map} +0 -0
- /package/dist/cjs/{TokensDemo.cjs.map → TokensDemo.js.map} +0 -0
- /package/dist/cjs/{TooltipDemo.cjs.map → TooltipDemo.js.map} +0 -0
- /package/dist/cjs/{UpdateThemeDemo.cjs.map → UpdateThemeDemo.js.map} +0 -0
- /package/dist/cjs/{WebNativeImageDemo.cjs.map → WebNativeImageDemo.js.map} +0 -0
- /package/dist/cjs/{index.cjs.map → index.js.map} +0 -0
- /package/dist/cjs/{tamagui.config.cjs.map → tamagui.config.js.map} +0 -0
- /package/dist/cjs/{useOnIntersecting.cjs.map → useOnIntersecting.js.map} +0 -0
package/dist/cjs/Grid.js
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
9
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
return to;
|
|
14
|
+
};
|
|
15
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
16
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
17
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
18
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
19
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
20
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
|
|
21
|
+
mod
|
|
22
|
+
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
23
|
+
var Grid_exports = {};
|
|
24
|
+
__export(Grid_exports, {
|
|
25
|
+
Grid: () => Grid
|
|
26
|
+
});
|
|
27
|
+
module.exports = __toCommonJS(Grid_exports);
|
|
28
|
+
var import_core = require("@tamagui/core"), import_stacks = require("@tamagui/stacks"), import_react = __toESM(require("react")), import_jsx_runtime = require("react/jsx-runtime");
|
|
29
|
+
function Grid({ children, columns, itemMinWidth = 200, gap }) {
|
|
30
|
+
if (import_core.isWeb)
|
|
31
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
32
|
+
"div",
|
|
33
|
+
{
|
|
34
|
+
style: {
|
|
35
|
+
gap,
|
|
36
|
+
display: "grid",
|
|
37
|
+
justifyContent: "stretch",
|
|
38
|
+
// gridTemplateRows: 'repeat(4, 1fr)',
|
|
39
|
+
gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`
|
|
40
|
+
// gridTemplateColumns: '1fr 1fr',
|
|
41
|
+
},
|
|
42
|
+
children
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
const childrenList = import_react.default.Children.toArray(children);
|
|
46
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.XStack, { alignItems: "center", justifyContent: "center", flexWrap: "wrap", children: childrenList.map((child, i) => child ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
47
|
+
import_stacks.XStack,
|
|
48
|
+
{
|
|
49
|
+
flex: 1,
|
|
50
|
+
minWidth: itemMinWidth,
|
|
51
|
+
marginRight: gap,
|
|
52
|
+
marginBottom: gap,
|
|
53
|
+
children: child
|
|
54
|
+
},
|
|
55
|
+
i
|
|
56
|
+
) : null) });
|
|
57
|
+
}
|
|
58
|
+
//# sourceMappingURL=Grid.js.map
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
8
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
15
|
+
var GroupDemo_exports = {};
|
|
16
|
+
__export(GroupDemo_exports, {
|
|
17
|
+
GroupDemo: () => GroupDemo
|
|
18
|
+
});
|
|
19
|
+
module.exports = __toCommonJS(GroupDemo_exports);
|
|
20
|
+
var import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
|
|
21
|
+
function GroupDemo() {
|
|
22
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { padding: "$3", space: "$2", alignItems: "center", children: [
|
|
23
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Group, { orientation: "horizontal", children: [
|
|
24
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Group.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "First" }) }),
|
|
25
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Group.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Second" }) }),
|
|
26
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Group.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Third" }) })
|
|
27
|
+
] }),
|
|
28
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XGroup, { size: "$3", $gtSm: { size: "$5" }, children: [
|
|
29
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$3", icon: import_lucide_icons.Activity, children: "First" }) }),
|
|
30
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$3", icon: import_lucide_icons.Airplay, children: "Second" }) })
|
|
31
|
+
] }),
|
|
32
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, { separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), children: [
|
|
33
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { title: "First" }) }),
|
|
34
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { title: "Second", subTitle: "Second subtitle" }) }),
|
|
35
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { children: "Third" }) })
|
|
36
|
+
] })
|
|
37
|
+
] });
|
|
38
|
+
}
|
|
39
|
+
//# sourceMappingURL=GroupDemo.js.map
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
8
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
15
|
+
var HeadingsDemo_exports = {};
|
|
16
|
+
__export(HeadingsDemo_exports, {
|
|
17
|
+
HeadingsDemo: () => HeadingsDemo
|
|
18
|
+
});
|
|
19
|
+
module.exports = __toCommonJS(HeadingsDemo_exports);
|
|
20
|
+
var import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
|
|
21
|
+
function HeadingsDemo() {
|
|
22
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { alignSelf: "center", children: [
|
|
23
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H1, { children: "Heading 1" }),
|
|
24
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H2, { children: "Heading 2" }),
|
|
25
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H3, { children: "Heading 3" }),
|
|
26
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H4, { children: "Heading 4" }),
|
|
27
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Heading 5" }),
|
|
28
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H6, { children: "Heading 6" })
|
|
29
|
+
] });
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=HeadingsDemo.js.map
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
8
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
15
|
+
var ImageDemo_exports = {};
|
|
16
|
+
__export(ImageDemo_exports, {
|
|
17
|
+
ImageDemo: () => ImageDemo
|
|
18
|
+
});
|
|
19
|
+
module.exports = __toCommonJS(ImageDemo_exports);
|
|
20
|
+
var import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
|
|
21
|
+
function ImageDemo() {
|
|
22
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
23
|
+
import_tamagui.Image,
|
|
24
|
+
{
|
|
25
|
+
source: {
|
|
26
|
+
uri: "https://picsum.photos/200/300",
|
|
27
|
+
width: 200,
|
|
28
|
+
height: 300
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=ImageDemo.js.map
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
8
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
15
|
+
var InputsDemo_exports = {};
|
|
16
|
+
__export(InputsDemo_exports, {
|
|
17
|
+
InputsDemo: () => InputsDemo
|
|
18
|
+
});
|
|
19
|
+
module.exports = __toCommonJS(InputsDemo_exports);
|
|
20
|
+
var import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
|
|
21
|
+
function InputsDemo() {
|
|
22
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
23
|
+
import_tamagui.YStack,
|
|
24
|
+
{
|
|
25
|
+
width: 200,
|
|
26
|
+
minHeight: 250,
|
|
27
|
+
overflow: "hidden",
|
|
28
|
+
space: "$2",
|
|
29
|
+
margin: "$3",
|
|
30
|
+
padding: "$2",
|
|
31
|
+
children: [
|
|
32
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputDemo, { size: "$2" }),
|
|
33
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputDemo, { size: "$3" }),
|
|
34
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputDemo, { size: "$4" }),
|
|
35
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.TextArea, { placeholder: "Enter your details..." })
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
function InputDemo(props) {
|
|
41
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { alignItems: "center", space: "$2", children: [
|
|
42
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { flex: 1, size: props.size, placeholder: `Size ${props.size}...` }),
|
|
43
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: props.size, children: "Go" })
|
|
44
|
+
] });
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=InputsDemo.js.map
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
8
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
15
|
+
var LabelDemo_exports = {};
|
|
16
|
+
__export(LabelDemo_exports, {
|
|
17
|
+
LabelDemo: () => LabelDemo
|
|
18
|
+
});
|
|
19
|
+
module.exports = __toCommonJS(LabelDemo_exports);
|
|
20
|
+
var import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
|
|
21
|
+
function LabelDemo() {
|
|
22
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { padding: "$3", minWidth: 300, space: "$4", children: [
|
|
23
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { alignItems: "center", space: "$4", children: [
|
|
24
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { width: 90, htmlFor: "name", children: "Name" }),
|
|
25
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { flex: 1, id: "name", defaultValue: "Nate Wienert" })
|
|
26
|
+
] }),
|
|
27
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { alignItems: "center", space: "$4", children: [
|
|
28
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { width: 90, htmlFor: "notify", children: "Notifications" }),
|
|
29
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Switch, { id: "notify", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Switch.Thumb, { animation: "quick" }) })
|
|
30
|
+
] })
|
|
31
|
+
] });
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=LabelDemo.js.map
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
8
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
15
|
+
var LinearGradientDemo_exports = {};
|
|
16
|
+
__export(LinearGradientDemo_exports, {
|
|
17
|
+
LinearGradientDemo: () => LinearGradientDemo
|
|
18
|
+
});
|
|
19
|
+
module.exports = __toCommonJS(LinearGradientDemo_exports);
|
|
20
|
+
var import_tamagui = require("tamagui"), import_linear_gradient = require("tamagui/linear-gradient"), import_jsx_runtime = require("react/jsx-runtime");
|
|
21
|
+
function LinearGradientDemo() {
|
|
22
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: !0, children: [
|
|
23
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
24
|
+
import_linear_gradient.LinearGradient,
|
|
25
|
+
{
|
|
26
|
+
width: "$6",
|
|
27
|
+
height: "$6",
|
|
28
|
+
borderRadius: "$4",
|
|
29
|
+
colors: ["$red10", "$yellow10"],
|
|
30
|
+
start: [0, 1],
|
|
31
|
+
end: [0, 0]
|
|
32
|
+
}
|
|
33
|
+
),
|
|
34
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
35
|
+
import_linear_gradient.LinearGradient,
|
|
36
|
+
{
|
|
37
|
+
width: "$6",
|
|
38
|
+
height: "$6",
|
|
39
|
+
borderRadius: "$4",
|
|
40
|
+
colors: ["$background", "$color"],
|
|
41
|
+
start: [1, 1],
|
|
42
|
+
end: [0, 0]
|
|
43
|
+
}
|
|
44
|
+
)
|
|
45
|
+
] });
|
|
46
|
+
}
|
|
47
|
+
//# sourceMappingURL=LinearGradientDemo.js.map
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
8
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
15
|
+
var ListItemDemo_exports = {};
|
|
16
|
+
__export(ListItemDemo_exports, {
|
|
17
|
+
ListItemDemo: () => ListItemDemo
|
|
18
|
+
});
|
|
19
|
+
module.exports = __toCommonJS(ListItemDemo_exports);
|
|
20
|
+
var import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
|
|
21
|
+
function ListItemDemo() {
|
|
22
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { $sm: { flexDirection: "column" }, paddingHorizontal: "$4", space: !0, children: [
|
|
23
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemDemo1, {}),
|
|
24
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemDemo2, {})
|
|
25
|
+
] });
|
|
26
|
+
}
|
|
27
|
+
function ListItemDemo1() {
|
|
28
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, { alignSelf: "center", bordered: !0, width: 240, size: "$4", children: [
|
|
29
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: !0, icon: import_lucide_icons.Star, title: "Star", subTitle: "Twinkles" }) }),
|
|
30
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: !0, icon: import_lucide_icons.Moon, children: "Moon" }) }),
|
|
31
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: !0, icon: import_lucide_icons.Sun, children: "Sun" }) }),
|
|
32
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ListItem, { hoverTheme: !0, icon: import_lucide_icons.Cloud, children: "Cloud" }) })
|
|
33
|
+
] });
|
|
34
|
+
}
|
|
35
|
+
function ListItemDemo2() {
|
|
36
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, { alignSelf: "center", bordered: !0, width: 240, size: "$5", separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), children: [
|
|
37
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
38
|
+
import_tamagui.ListItem,
|
|
39
|
+
{
|
|
40
|
+
hoverTheme: !0,
|
|
41
|
+
pressTheme: !0,
|
|
42
|
+
title: "Star",
|
|
43
|
+
subTitle: "Subtitle",
|
|
44
|
+
icon: import_lucide_icons.Star,
|
|
45
|
+
iconAfter: import_lucide_icons.ChevronRight
|
|
46
|
+
}
|
|
47
|
+
) }),
|
|
48
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
49
|
+
import_tamagui.ListItem,
|
|
50
|
+
{
|
|
51
|
+
hoverTheme: !0,
|
|
52
|
+
pressTheme: !0,
|
|
53
|
+
title: "Moon",
|
|
54
|
+
subTitle: "Subtitle",
|
|
55
|
+
icon: import_lucide_icons.Moon,
|
|
56
|
+
iconAfter: import_lucide_icons.ChevronRight
|
|
57
|
+
}
|
|
58
|
+
) })
|
|
59
|
+
] });
|
|
60
|
+
}
|
|
61
|
+
//# sourceMappingURL=ListItemDemo.js.map
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
9
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
return to;
|
|
14
|
+
};
|
|
15
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
16
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
17
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
18
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
19
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
20
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
|
|
21
|
+
mod
|
|
22
|
+
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
23
|
+
var LucideIconsDemo_exports = {};
|
|
24
|
+
__export(LucideIconsDemo_exports, {
|
|
25
|
+
LucideIconsDemo: () => LucideIconsDemo
|
|
26
|
+
});
|
|
27
|
+
module.exports = __toCommonJS(LucideIconsDemo_exports);
|
|
28
|
+
var import_react = __toESM(require("react")), LucideIcons = __toESM(require("@tamagui/lucide-icons")), import_react_native = require("react-native-web"), import_tamagui = require("tamagui"), import_Grid = require("./Grid"), import_jsx_runtime = require("react/jsx-runtime");
|
|
29
|
+
const lucideIcons = Object.keys(
|
|
30
|
+
// vite tree shaking workaround
|
|
31
|
+
typeof LucideIcons < "u" ? LucideIcons : {}
|
|
32
|
+
).map((name) => ({
|
|
33
|
+
key: name.toLowerCase(),
|
|
34
|
+
name,
|
|
35
|
+
Icon: LucideIcons[name]
|
|
36
|
+
}));
|
|
37
|
+
function LucideIconsDemo() {
|
|
38
|
+
const [searchRaw, setSearch] = import_react.default.useState(""), search = (0, import_tamagui.useDebounceValue)(searchRaw, 400), size = 100, iconsMemo = import_react.default.useMemo(
|
|
39
|
+
() => lucideIcons.filter((x) => x.key.includes(search.toLowerCase())).map(({ Icon, name }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
40
|
+
import_tamagui.YStack,
|
|
41
|
+
{
|
|
42
|
+
height: size + 20,
|
|
43
|
+
alignItems: "center",
|
|
44
|
+
justifyContent: "center",
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: size * 0.25 }),
|
|
47
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Spacer, {}),
|
|
48
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
49
|
+
import_tamagui.Paragraph,
|
|
50
|
+
{
|
|
51
|
+
height: "$6",
|
|
52
|
+
wordWrap: "break-word",
|
|
53
|
+
maxWidth: "100%",
|
|
54
|
+
textAlign: "center",
|
|
55
|
+
paddingHorizontal: "$2",
|
|
56
|
+
size: "$1",
|
|
57
|
+
opacity: 0.5,
|
|
58
|
+
children: name
|
|
59
|
+
}
|
|
60
|
+
)
|
|
61
|
+
]
|
|
62
|
+
},
|
|
63
|
+
name
|
|
64
|
+
)),
|
|
65
|
+
[search]
|
|
66
|
+
);
|
|
67
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { minWidth: "100%", padding: "$4", paddingBottom: "$0", space: !0, children: [
|
|
68
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }),
|
|
69
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { height: 420, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Grid.Grid, { itemMinWidth: size, children: iconsMemo }) }) })
|
|
70
|
+
] });
|
|
71
|
+
}
|
|
72
|
+
//# sourceMappingURL=LucideIconsDemo.js.map
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
8
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
15
|
+
var NewInputsDemo_exports = {};
|
|
16
|
+
__export(NewInputsDemo_exports, {
|
|
17
|
+
NewInputsDemo: () => NewInputsDemo
|
|
18
|
+
});
|
|
19
|
+
module.exports = __toCommonJS(NewInputsDemo_exports);
|
|
20
|
+
var import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
|
|
21
|
+
function NewInputsDemo() {
|
|
22
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
23
|
+
import_tamagui.YStack,
|
|
24
|
+
{
|
|
25
|
+
width: 200,
|
|
26
|
+
minHeight: 250,
|
|
27
|
+
overflow: "hidden",
|
|
28
|
+
space: "$2",
|
|
29
|
+
margin: "$3",
|
|
30
|
+
padding: "$2",
|
|
31
|
+
children: [
|
|
32
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputDemo, { size: "$2" }),
|
|
33
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputDemo, { size: "$3" }),
|
|
34
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputDemo, { size: "$4" }),
|
|
35
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.TextArea, { placeholder: "Enter your details..." })
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
function InputDemo(props) {
|
|
41
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { alignItems: "center", space: "$2", children: [
|
|
42
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { flex: 1, size: props.size, placeholder: `Size ${props.size}...` }),
|
|
43
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: props.size, children: "Go" })
|
|
44
|
+
] });
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=NewInputsDemo.js.map
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
8
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
15
|
+
var PopoverDemo_exports = {};
|
|
16
|
+
__export(PopoverDemo_exports, {
|
|
17
|
+
Demo: () => Demo,
|
|
18
|
+
PopoverDemo: () => PopoverDemo
|
|
19
|
+
});
|
|
20
|
+
module.exports = __toCommonJS(PopoverDemo_exports);
|
|
21
|
+
var import_lucide_icons = require("@tamagui/lucide-icons"), import_react = require("react"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
|
|
22
|
+
function PopoverDemo() {
|
|
23
|
+
const [shouldAdapt, setShouldAdapt] = (0, import_react.useState)(!0);
|
|
24
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { gap: "$4", children: [
|
|
25
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$2", flex: 1, justifyContent: "center", alignItems: "center", children: [
|
|
26
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
27
|
+
Demo,
|
|
28
|
+
{
|
|
29
|
+
shouldAdapt,
|
|
30
|
+
placement: "left",
|
|
31
|
+
Icon: import_lucide_icons.ChevronLeft,
|
|
32
|
+
Name: "left-popover"
|
|
33
|
+
}
|
|
34
|
+
),
|
|
35
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
36
|
+
Demo,
|
|
37
|
+
{
|
|
38
|
+
shouldAdapt,
|
|
39
|
+
placement: "bottom",
|
|
40
|
+
Icon: import_lucide_icons.ChevronDown,
|
|
41
|
+
Name: "bottom-popover"
|
|
42
|
+
}
|
|
43
|
+
),
|
|
44
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
45
|
+
Demo,
|
|
46
|
+
{
|
|
47
|
+
shouldAdapt,
|
|
48
|
+
placement: "top",
|
|
49
|
+
Icon: import_lucide_icons.ChevronUp,
|
|
50
|
+
Name: "top-popover"
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
54
|
+
Demo,
|
|
55
|
+
{
|
|
56
|
+
shouldAdapt,
|
|
57
|
+
placement: "right",
|
|
58
|
+
Icon: import_lucide_icons.ChevronRight,
|
|
59
|
+
Name: "right-popover"
|
|
60
|
+
}
|
|
61
|
+
)
|
|
62
|
+
] }),
|
|
63
|
+
!import_tamagui.isWeb && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Button, { onPress: () => setShouldAdapt(!shouldAdapt), children: [
|
|
64
|
+
"Adapt to Sheet: ",
|
|
65
|
+
`${shouldAdapt}`
|
|
66
|
+
] })
|
|
67
|
+
] });
|
|
68
|
+
}
|
|
69
|
+
function Demo({
|
|
70
|
+
Icon,
|
|
71
|
+
Name,
|
|
72
|
+
shouldAdapt,
|
|
73
|
+
...props
|
|
74
|
+
}) {
|
|
75
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Popover, { size: "$5", allowFlip: !0, ...props, children: [
|
|
76
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, { asChild: !0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { icon: Icon }) }),
|
|
77
|
+
shouldAdapt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Sheet, { modal: !0, dismissOnSnapToBottom: !0, children: [
|
|
78
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt.Contents, {}) }),
|
|
79
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
80
|
+
import_tamagui.Popover.Sheet.Overlay,
|
|
81
|
+
{
|
|
82
|
+
animation: "lazy",
|
|
83
|
+
enterStyle: { opacity: 0 },
|
|
84
|
+
exitStyle: { opacity: 0 }
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
] }) }),
|
|
88
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
89
|
+
import_tamagui.Popover.Content,
|
|
90
|
+
{
|
|
91
|
+
borderWidth: 1,
|
|
92
|
+
borderColor: "$borderColor",
|
|
93
|
+
enterStyle: { y: -10, opacity: 0 },
|
|
94
|
+
exitStyle: { y: -10, opacity: 0 },
|
|
95
|
+
elevate: !0,
|
|
96
|
+
animation: [
|
|
97
|
+
"quick",
|
|
98
|
+
{
|
|
99
|
+
opacity: {
|
|
100
|
+
overshootClamping: !0
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
],
|
|
104
|
+
children: [
|
|
105
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor" }),
|
|
106
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { gap: "$3", children: [
|
|
107
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$3", children: [
|
|
108
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { size: "$3", htmlFor: Name, children: "Name" }),
|
|
109
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { f: 1, size: "$3", id: Name })
|
|
110
|
+
] }),
|
|
111
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Close, { asChild: !0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
112
|
+
import_tamagui.Button,
|
|
113
|
+
{
|
|
114
|
+
size: "$3",
|
|
115
|
+
onPress: () => {
|
|
116
|
+
},
|
|
117
|
+
children: "Submit"
|
|
118
|
+
}
|
|
119
|
+
) })
|
|
120
|
+
] })
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
)
|
|
124
|
+
] });
|
|
125
|
+
}
|
|
126
|
+
//# sourceMappingURL=PopoverDemo.js.map
|