@tamagui/demos 1.61.1 → 1.61.3

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.
@@ -0,0 +1,77 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var Grid_exports = {};
30
+ __export(Grid_exports, {
31
+ Grid: () => Grid
32
+ });
33
+ module.exports = __toCommonJS(Grid_exports);
34
+ var import_jsx_runtime = require("react/jsx-runtime");
35
+ var import_core = require("@tamagui/core");
36
+ var import_stacks = require("@tamagui/stacks");
37
+ var import_react = __toESM(require("react"));
38
+ function Grid({ children, columns, itemMinWidth = 200, gap }) {
39
+ if (import_core.isWeb) {
40
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
41
+ "div",
42
+ {
43
+ style: {
44
+ gap,
45
+ display: "grid",
46
+ justifyContent: "stretch",
47
+ // gridTemplateRows: 'repeat(4, 1fr)',
48
+ gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`
49
+ // gridTemplateColumns: '1fr 1fr',
50
+ },
51
+ children
52
+ }
53
+ );
54
+ }
55
+ const childrenList = import_react.default.Children.toArray(children);
56
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.XStack, { alignItems: "center", justifyContent: "center", flexWrap: "wrap", children: childrenList.map((child, i) => {
57
+ if (!child) {
58
+ return null;
59
+ }
60
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
61
+ import_stacks.XStack,
62
+ {
63
+ flex: 1,
64
+ minWidth: itemMinWidth,
65
+ marginRight: gap,
66
+ marginBottom: gap,
67
+ children: child
68
+ },
69
+ i
70
+ );
71
+ }) });
72
+ }
73
+ // Annotate the CommonJS export names for ESM import in node:
74
+ 0 && (module.exports = {
75
+ Grid
76
+ });
77
+ //# sourceMappingURL=Grid.js.map
@@ -0,0 +1,6 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/Grid.tsx"],
4
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcM;AAdN,kBAAsB;AACtB,oBAAuB;AACvB,mBAAkB;AASX,SAAS,KAAK,EAAE,UAAU,SAAS,eAAe,KAAK,IAAI,GAAc;AAC9E,MAAI,mBAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,UACA,SAAS;AAAA,UACT,gBAAgB;AAAA;AAAA,UAEhB,qBAAqB,4BAA4B,YAAY;AAAA;AAAA,QAE/D;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,eAAe,aAAAA,QAAM,SAAS,QAAQ,QAAQ;AAEpD,SACE,4CAAC,wBAAO,YAAW,UAAS,gBAAe,UAAS,UAAS,QAC1D,uBAAa,IAAI,CAAC,OAAO,MAAM;AAC9B,QAAI,CAAC,OAAO;AACV,aAAO;AAAA,IACT;AAGA,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM;AAAA,QACN,UAAU;AAAA,QACV,aAAa;AAAA,QACb,cAAc;AAAA,QAEb;AAAA;AAAA,MANI;AAAA,IAOP;AAAA,EAEJ,CAAC,GACH;AAEJ;",
5
+ "names": ["React"]
6
+ }
@@ -36,6 +36,7 @@ var LucideIcons = __toESM(require("@tamagui/lucide-icons"));
36
36
  var import_react = require("react");
37
37
  var import_react_native = require("react-native");
38
38
  var import_tamagui = require("tamagui");
39
+ var import_Grid = require("./Grid");
39
40
  const lucideIcons = Object.keys(
40
41
  // vite tree shaking workaround
41
42
  typeof LucideIcons !== "undefined" ? LucideIcons : {}
@@ -79,7 +80,7 @@ function LucideIconsDemo() {
79
80
  );
80
81
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { minWidth: "100%", padding: "$4", paddingBottom: "$0", space: true, children: [
81
82
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }),
82
- /* @__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_tamagui.Grid, { itemMinWidth: size, children: iconsMemo }) }) })
83
+ /* @__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 }) }) })
83
84
  ] });
84
85
  }
85
86
  // Annotate the CommonJS export names for ESM import in node:
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/LucideIconsDemo.tsx"],
4
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBU;AAzBV,kBAA6B;AAC7B,mBAAkC;AAClC,0BAA2B;AAC3B,qBAAyE;AAEzE,MAAM,cAAc,OAAO;AAAA;AAAA,EAEzB,OAAO,gBAAgB,cAAc,cAAc,CAAC;AACtD,EAAE,IAAI,CAAC,UAAU;AAAA,EACf,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY,IAAI;AACxB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,QAAI,uBAAS,EAAE;AAC1C,QAAM,aAAS,iCAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,gBAAY;AAAA,IAChB,MACE,YACG,OAAO,CAAC,MAAM,EAAE,IAAI,SAAS,OAAO,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,EAAE,MAAM,KAAK,MACjB;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,OAAO;AAAA,QACf,YAAW;AAAA,QACX,gBAAe;AAAA,QAGf;AAAA,sDAAC,QAAK,MAAM,OAAO,MAAM;AAAA,UACzB,4CAAC,yBAAO;AAAA,UACR;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cACP,UAAS;AAAA,cACT,UAAS;AAAA,cACT,WAAU;AAAA,cACV,mBAAkB;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cAER;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,MAdK;AAAA,IAeP,CACD;AAAA,IACL,CAAC,MAAM;AAAA,EACT;AAEA,SACE,6CAAC,yBAAO,UAAS,QAAO,SAAQ,MAAK,eAAc,MAAK,OAAK,MAC3D;AAAA,gDAAC,wBAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,4CAAC,yBAAO,QAAQ,KACd,sDAAC,kCACC,sDAAC,uBAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
4
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BU;AA3BV,kBAA6B;AAC7B,mBAAkC;AAClC,0BAA2B;AAC3B,qBAAmE;AAEnE,kBAAqB;AAErB,MAAM,cAAc,OAAO;AAAA;AAAA,EAEzB,OAAO,gBAAgB,cAAc,cAAc,CAAC;AACtD,EAAE,IAAI,CAAC,UAAU;AAAA,EACf,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY,IAAI;AACxB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,QAAI,uBAAS,EAAE;AAC1C,QAAM,aAAS,iCAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,gBAAY;AAAA,IAChB,MACE,YACG,OAAO,CAAC,MAAM,EAAE,IAAI,SAAS,OAAO,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,EAAE,MAAM,KAAK,MACjB;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,OAAO;AAAA,QACf,YAAW;AAAA,QACX,gBAAe;AAAA,QAGf;AAAA,sDAAC,QAAK,MAAM,OAAO,MAAM;AAAA,UACzB,4CAAC,yBAAO;AAAA,UACR;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cACP,UAAS;AAAA,cACT,UAAS;AAAA,cACT,WAAU;AAAA,cACV,mBAAkB;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cAER;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,MAdK;AAAA,IAeP,CACD;AAAA,IACL,CAAC,MAAM;AAAA,EACT;AAEA,SACE,6CAAC,yBAAO,UAAS,QAAO,SAAQ,MAAK,eAAc,MAAK,OAAK,MAC3D;AAAA,gDAAC,wBAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,4CAAC,yBAAO,QAAQ,KACd,sDAAC,kCACC,sDAAC,oBAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
5
5
  "names": []
6
6
  }
@@ -26,14 +26,26 @@ var import_jsx_runtime = require("react/jsx-runtime");
26
26
  var import_tamagui = require("tamagui");
27
27
  function SwitchDemo() {
28
28
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { width: 200, alignItems: "center", space: "$3", children: [
29
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$2" }),
30
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$3" }),
31
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$4" }),
32
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$5" })
29
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$3", $xs: { flexDirection: "column" }, children: [
30
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$2" }),
31
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$2", defaultChecked: true })
32
+ ] }),
33
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$3", $xs: { flexDirection: "column" }, children: [
34
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$3" }),
35
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$3", defaultChecked: true })
36
+ ] }),
37
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$3", $xs: { flexDirection: "column" }, children: [
38
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$4" }),
39
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$4", defaultChecked: true })
40
+ ] }),
41
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$3", $xs: { flexDirection: "column" }, children: [
42
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$5" }),
43
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$5", defaultChecked: true })
44
+ ] })
33
45
  ] });
34
46
  }
35
47
  function SwitchWithLabel(props) {
36
- const id = `switch-${props.size.toString().slice(1)}`;
48
+ const id = `switch-${props.size.toString().slice(1)}-${props.defaultChecked ?? ""}}`;
37
49
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { width: 200, alignItems: "center", space: "$4", children: [
38
50
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
39
51
  import_tamagui.Label,
@@ -43,11 +55,11 @@ function SwitchWithLabel(props) {
43
55
  justifyContent: "flex-end",
44
56
  size: props.size,
45
57
  htmlFor: id,
46
- children: "Dark mode"
58
+ children: "Accept"
47
59
  }
48
60
  ),
49
61
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { minHeight: 20, vertical: true }),
50
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Switch, { id, size: props.size, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Switch.Thumb, { animation: "quick" }) })
62
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Switch, { id, size: props.size, defaultChecked: props.defaultChecked, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Switch.Thumb, { animation: "quick" }) })
51
63
  ] });
52
64
  }
53
65
  // Annotate the CommonJS export names for ESM import in node:
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/SwitchDemo.tsx"],
4
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAA6E;AAEtE,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,gDAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,KAC7B;AAEJ;AAEO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC;AACnD,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QACb,UAAU;AAAA,QACV,gBAAe;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,IACA,4CAAC,4BAAU,WAAW,IAAI,UAAQ,MAAC;AAAA,IACnC,4CAAC,yBAAO,IAAQ,MAAM,MAAM,MAC1B,sDAAC,sBAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,KACF;AAEJ;",
4
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKM;AALN,qBAA6E;AAEtE,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,iDAAC,yBAAO,OAAM,MAAK,KAAK,EAAE,eAAe,SAAS,GAChD;AAAA,kDAAC,mBAAgB,MAAK,MAAK;AAAA,MAC3B,4CAAC,mBAAgB,MAAK,MAAK,gBAAc,MAAC;AAAA,OAC5C;AAAA,IACA,6CAAC,yBAAO,OAAM,MAAK,KAAK,EAAE,eAAe,SAAS,GAChD;AAAA,kDAAC,mBAAgB,MAAK,MAAK;AAAA,MAC3B,4CAAC,mBAAgB,MAAK,MAAK,gBAAc,MAAC;AAAA,OAC5C;AAAA,IACA,6CAAC,yBAAO,OAAM,MAAK,KAAK,EAAE,eAAe,SAAS,GAChD;AAAA,kDAAC,mBAAgB,MAAK,MAAK;AAAA,MAC3B,4CAAC,mBAAgB,MAAK,MAAK,gBAAc,MAAC;AAAA,OAC5C;AAAA,IACA,6CAAC,yBAAO,OAAM,MAAK,KAAK,EAAE,eAAe,SAAS,GAChD;AAAA,kDAAC,mBAAgB,MAAK,MAAK;AAAA,MAC3B,4CAAC,mBAAgB,MAAK,MAAK,gBAAc,MAAC;AAAA,OAC5C;AAAA,KACF;AAEJ;AAEO,SAAS,gBAAgB,OAAuD;AACrF,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,MAAM,kBAAkB,EAAE;AACjF,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QACb,UAAU;AAAA,QACV,gBAAe;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,IACA,4CAAC,4BAAU,WAAW,IAAI,UAAQ,MAAC;AAAA,IACnC,4CAAC,yBAAO,IAAQ,MAAM,MAAM,MAAM,gBAAgB,MAAM,gBACtD,sDAAC,sBAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,KACF;AAEJ;",
5
5
  "names": []
6
6
  }
@@ -0,0 +1,43 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { isWeb } from "@tamagui/core";
3
+ import { XStack } from "@tamagui/stacks";
4
+ import React from "react";
5
+ function Grid({ children, columns, itemMinWidth = 200, gap }) {
6
+ if (isWeb) {
7
+ return /* @__PURE__ */ jsx(
8
+ "div",
9
+ {
10
+ style: {
11
+ gap,
12
+ display: "grid",
13
+ justifyContent: "stretch",
14
+ // gridTemplateRows: 'repeat(4, 1fr)',
15
+ gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`
16
+ // gridTemplateColumns: '1fr 1fr',
17
+ },
18
+ children
19
+ }
20
+ );
21
+ }
22
+ const childrenList = React.Children.toArray(children);
23
+ return /* @__PURE__ */ jsx(XStack, { alignItems: "center", justifyContent: "center", flexWrap: "wrap", children: childrenList.map((child, i) => {
24
+ if (!child) {
25
+ return null;
26
+ }
27
+ return /* @__PURE__ */ jsx(
28
+ XStack,
29
+ {
30
+ flex: 1,
31
+ minWidth: itemMinWidth,
32
+ marginRight: gap,
33
+ marginBottom: gap,
34
+ children: child
35
+ },
36
+ i
37
+ );
38
+ }) });
39
+ }
40
+ export {
41
+ Grid
42
+ };
43
+ //# sourceMappingURL=Grid.js.map
@@ -0,0 +1,6 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/Grid.tsx"],
4
+ "mappings": "AAcM;AAdN,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,OAAO,WAAW;AASX,SAAS,KAAK,EAAE,UAAU,SAAS,eAAe,KAAK,IAAI,GAAc;AAC9E,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,UACA,SAAS;AAAA,UACT,gBAAgB;AAAA;AAAA,UAEhB,qBAAqB,4BAA4B,YAAY;AAAA;AAAA,QAE/D;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,eAAe,MAAM,SAAS,QAAQ,QAAQ;AAEpD,SACE,oBAAC,UAAO,YAAW,UAAS,gBAAe,UAAS,UAAS,QAC1D,uBAAa,IAAI,CAAC,OAAO,MAAM;AAC9B,QAAI,CAAC,OAAO;AACV,aAAO;AAAA,IACT;AAGA,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM;AAAA,QACN,UAAU;AAAA,QACV,aAAa;AAAA,QACb,cAAc;AAAA,QAEb;AAAA;AAAA,MANI;AAAA,IAOP;AAAA,EAEJ,CAAC,GACH;AAEJ;",
5
+ "names": []
6
+ }
@@ -2,7 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import * as LucideIcons from "@tamagui/lucide-icons";
3
3
  import { useMemo, useState } from "react";
4
4
  import { ScrollView } from "react-native";
5
- import { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
5
+ import { Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
6
+ import { Grid } from "./Grid";
6
7
  const lucideIcons = Object.keys(
7
8
  // vite tree shaking workaround
8
9
  typeof LucideIcons !== "undefined" ? LucideIcons : {}
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/LucideIconsDemo.tsx"],
4
- "mappings": "AAyBU,SAME,KANF;AAzBV,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,cAAc,OAAO;AAAA;AAAA,EAEzB,OAAO,gBAAgB,cAAc,cAAc,CAAC;AACtD,EAAE,IAAI,CAAC,UAAU;AAAA,EACf,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;AAAA,IAChB,MACE,YACG,OAAO,CAAC,MAAM,EAAE,IAAI,SAAS,OAAO,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,EAAE,MAAM,KAAK,MACjB;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,OAAO;AAAA,QACf,YAAW;AAAA,QACX,gBAAe;AAAA,QAGf;AAAA,8BAAC,QAAK,MAAM,OAAO,MAAM;AAAA,UACzB,oBAAC,UAAO;AAAA,UACR;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cACP,UAAS;AAAA,cACT,UAAS;AAAA,cACT,WAAU;AAAA,cACV,mBAAkB;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cAER;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,MAdK;AAAA,IAeP,CACD;AAAA,IACL,CAAC,MAAM;AAAA,EACT;AAEA,SACE,qBAAC,UAAO,UAAS,QAAO,SAAQ,MAAK,eAAc,MAAK,OAAK,MAC3D;AAAA,wBAAC,SAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,oBAAC,UAAO,QAAQ,KACd,8BAAC,cACC,8BAAC,QAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
4
+ "mappings": "AA2BU,SAME,KANF;AA3BV,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEnE,SAAS,YAAY;AAErB,MAAM,cAAc,OAAO;AAAA;AAAA,EAEzB,OAAO,gBAAgB,cAAc,cAAc,CAAC;AACtD,EAAE,IAAI,CAAC,UAAU;AAAA,EACf,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;AAAA,IAChB,MACE,YACG,OAAO,CAAC,MAAM,EAAE,IAAI,SAAS,OAAO,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,EAAE,MAAM,KAAK,MACjB;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,OAAO;AAAA,QACf,YAAW;AAAA,QACX,gBAAe;AAAA,QAGf;AAAA,8BAAC,QAAK,MAAM,OAAO,MAAM;AAAA,UACzB,oBAAC,UAAO;AAAA,UACR;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cACP,UAAS;AAAA,cACT,UAAS;AAAA,cACT,WAAU;AAAA,cACV,mBAAkB;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cAER;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,MAdK;AAAA,IAeP,CACD;AAAA,IACL,CAAC,MAAM;AAAA,EACT;AAEA,SACE,qBAAC,UAAO,UAAS,QAAO,SAAQ,MAAK,eAAc,MAAK,OAAK,MAC3D;AAAA,wBAAC,SAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,oBAAC,UAAO,QAAQ,KACd,8BAAC,cACC,8BAAC,QAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
5
5
  "names": []
6
6
  }
@@ -2,14 +2,26 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Label, Separator, Switch, XStack, YStack } from "tamagui";
3
3
  function SwitchDemo() {
4
4
  return /* @__PURE__ */ jsxs(YStack, { width: 200, alignItems: "center", space: "$3", children: [
5
- /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$2" }),
6
- /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$3" }),
7
- /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$4" }),
8
- /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$5" })
5
+ /* @__PURE__ */ jsxs(XStack, { space: "$3", $xs: { flexDirection: "column" }, children: [
6
+ /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$2" }),
7
+ /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$2", defaultChecked: true })
8
+ ] }),
9
+ /* @__PURE__ */ jsxs(XStack, { space: "$3", $xs: { flexDirection: "column" }, children: [
10
+ /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$3" }),
11
+ /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$3", defaultChecked: true })
12
+ ] }),
13
+ /* @__PURE__ */ jsxs(XStack, { space: "$3", $xs: { flexDirection: "column" }, children: [
14
+ /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$4" }),
15
+ /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$4", defaultChecked: true })
16
+ ] }),
17
+ /* @__PURE__ */ jsxs(XStack, { space: "$3", $xs: { flexDirection: "column" }, children: [
18
+ /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$5" }),
19
+ /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$5", defaultChecked: true })
20
+ ] })
9
21
  ] });
10
22
  }
11
23
  function SwitchWithLabel(props) {
12
- const id = `switch-${props.size.toString().slice(1)}`;
24
+ const id = `switch-${props.size.toString().slice(1)}-${props.defaultChecked ?? ""}}`;
13
25
  return /* @__PURE__ */ jsxs(XStack, { width: 200, alignItems: "center", space: "$4", children: [
14
26
  /* @__PURE__ */ jsx(
15
27
  Label,
@@ -19,11 +31,11 @@ function SwitchWithLabel(props) {
19
31
  justifyContent: "flex-end",
20
32
  size: props.size,
21
33
  htmlFor: id,
22
- children: "Dark mode"
34
+ children: "Accept"
23
35
  }
24
36
  ),
25
37
  /* @__PURE__ */ jsx(Separator, { minHeight: 20, vertical: true }),
26
- /* @__PURE__ */ jsx(Switch, { id, size: props.size, children: /* @__PURE__ */ jsx(Switch.Thumb, { animation: "quick" }) })
38
+ /* @__PURE__ */ jsx(Switch, { id, size: props.size, defaultChecked: props.defaultChecked, children: /* @__PURE__ */ jsx(Switch.Thumb, { animation: "quick" }) })
27
39
  ] });
28
40
  }
29
41
  export {
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/SwitchDemo.tsx"],
4
- "mappings": "AAII,SACE,KADF;AAJJ,SAAS,OAAO,WAAuB,QAAQ,QAAQ,cAAsB;AAEtE,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,wBAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,oBAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,oBAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,oBAAC,mBAAgB,MAAK,MAAK;AAAA,KAC7B;AAEJ;AAEO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC;AACnD,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QACb,UAAU;AAAA,QACV,gBAAe;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,IACA,oBAAC,aAAU,WAAW,IAAI,UAAQ,MAAC;AAAA,IACnC,oBAAC,UAAO,IAAQ,MAAM,MAAM,MAC1B,8BAAC,OAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,KACF;AAEJ;",
4
+ "mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,WAAuB,QAAQ,QAAQ,cAAsB;AAEtE,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,yBAAC,UAAO,OAAM,MAAK,KAAK,EAAE,eAAe,SAAS,GAChD;AAAA,0BAAC,mBAAgB,MAAK,MAAK;AAAA,MAC3B,oBAAC,mBAAgB,MAAK,MAAK,gBAAc,MAAC;AAAA,OAC5C;AAAA,IACA,qBAAC,UAAO,OAAM,MAAK,KAAK,EAAE,eAAe,SAAS,GAChD;AAAA,0BAAC,mBAAgB,MAAK,MAAK;AAAA,MAC3B,oBAAC,mBAAgB,MAAK,MAAK,gBAAc,MAAC;AAAA,OAC5C;AAAA,IACA,qBAAC,UAAO,OAAM,MAAK,KAAK,EAAE,eAAe,SAAS,GAChD;AAAA,0BAAC,mBAAgB,MAAK,MAAK;AAAA,MAC3B,oBAAC,mBAAgB,MAAK,MAAK,gBAAc,MAAC;AAAA,OAC5C;AAAA,IACA,qBAAC,UAAO,OAAM,MAAK,KAAK,EAAE,eAAe,SAAS,GAChD;AAAA,0BAAC,mBAAgB,MAAK,MAAK;AAAA,MAC3B,oBAAC,mBAAgB,MAAK,MAAK,gBAAc,MAAC;AAAA,OAC5C;AAAA,KACF;AAEJ;AAEO,SAAS,gBAAgB,OAAuD;AACrF,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,MAAM,kBAAkB,EAAE;AACjF,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QACb,UAAU;AAAA,QACV,gBAAe;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,IACA,oBAAC,aAAU,WAAW,IAAI,UAAQ,MAAC;AAAA,IACnC,oBAAC,UAAO,IAAQ,MAAM,MAAM,MAAM,gBAAgB,MAAM,gBACtD,8BAAC,OAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,KACF;AAEJ;",
5
5
  "names": []
6
6
  }
@@ -0,0 +1,34 @@
1
+ import { isWeb } from "@tamagui/core";
2
+ import { XStack } from "@tamagui/stacks";
3
+ import React from "react";
4
+ function Grid({ children, columns, itemMinWidth = 200, gap }) {
5
+ if (isWeb) {
6
+ return <div
7
+ style={{
8
+ gap,
9
+ display: "grid",
10
+ justifyContent: "stretch",
11
+ // gridTemplateRows: 'repeat(4, 1fr)',
12
+ gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`
13
+ // gridTemplateColumns: '1fr 1fr',
14
+ }}
15
+ >{children}</div>;
16
+ }
17
+ const childrenList = React.Children.toArray(children);
18
+ return <XStack alignItems="center" justifyContent="center" flexWrap="wrap">{childrenList.map((child, i) => {
19
+ if (!child) {
20
+ return null;
21
+ }
22
+ return <XStack
23
+ key={i}
24
+ flex={1}
25
+ minWidth={itemMinWidth}
26
+ marginRight={gap}
27
+ marginBottom={gap}
28
+ >{child}</XStack>;
29
+ })}</XStack>;
30
+ }
31
+ export {
32
+ Grid
33
+ };
34
+ //# sourceMappingURL=Grid.js.map
@@ -0,0 +1,6 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/Grid.tsx"],
4
+ "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,OAAO,WAAW;AASX,SAAS,KAAK,EAAE,UAAU,SAAS,eAAe,KAAK,IAAI,GAAc;AAC9E,MAAI,OAAO;AACT,WACE,CAAC;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA,SAAS;AAAA,QACT,gBAAgB;AAAA;AAAA,QAEhB,qBAAqB,4BAA4B,YAAY;AAAA;AAAA,MAE/D;AAAA,MAEC,SACH,EAXC;AAAA,EAaL;AAEA,QAAM,eAAe,MAAM,SAAS,QAAQ,QAAQ;AAEpD,SACE,CAAC,OAAO,WAAW,SAAS,eAAe,SAAS,SAAS,QAC1D,aAAa,IAAI,CAAC,OAAO,MAAM;AAC9B,QAAI,CAAC,OAAO;AACV,aAAO;AAAA,IACT;AAGA,WACE,CAAC;AAAA,MACC,KAAK;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,aAAa;AAAA,MACb,cAAc;AAAA,MAEb,MACH,EARC;AAAA,EAUL,CAAC,EACH,EAnBC;AAqBL;",
5
+ "names": []
6
+ }
@@ -1,7 +1,8 @@
1
1
  import * as LucideIcons from "@tamagui/lucide-icons";
2
2
  import { useMemo, useState } from "react";
3
3
  import { ScrollView } from "react-native";
4
- import { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
4
+ import { Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
5
+ import { Grid } from "./Grid";
5
6
  const lucideIcons = Object.keys(
6
7
  // vite tree shaking workaround
7
8
  typeof LucideIcons !== "undefined" ? LucideIcons : {}
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/LucideIconsDemo.tsx"],
4
- "mappings": "AAAA,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,cAAc,OAAO;AAAA;AAAA,EAEzB,OAAO,gBAAgB,cAAc,cAAc,CAAC;AACtD,EAAE,IAAI,CAAC,UAAU;AAAA,EACf,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;AAAA,IAChB,MACE,YACG,OAAO,CAAC,MAAM,EAAE,IAAI,SAAS,OAAO,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,EAAE,MAAM,KAAK,MACjB,CAAC;AAAA,MACC,QAAQ,OAAO;AAAA,MACf,WAAW;AAAA,MACX,eAAe;AAAA,MACf,KAAK;AAAA;AAAA,MAEL,CAAC,KAAK,MAAM,OAAO,MAAM;AAAA,MACzB,CAAC,OAAO;AAAA,MACR,CAAC;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,kBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,SAAS;AAAA,QAER,KACH,EAVC;AAAA,IAWH,EAnBC,OAoBF;AAAA,IACL,CAAC,MAAM;AAAA,EACT;AAEA,SACE,CAAC,OAAO,SAAS,OAAO,QAAQ,KAAK,cAAc,KAAK;AAAA,IACtD,CAAC,MAAM,OAAO,WAAW,cAAc,WAAW,YAAY,YAAY;AAAA,IAE1E,CAAC,OAAO,QAAQ,KACd,CAAC,WACC,CAAC,KAAK,cAAc,OAAO,UAAU,EAApC,KACH,EAFC,WAGH,EAJC;AAAA,EAKH,EARC;AAUL;",
4
+ "mappings": "AAAA,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEnE,SAAS,YAAY;AAErB,MAAM,cAAc,OAAO;AAAA;AAAA,EAEzB,OAAO,gBAAgB,cAAc,cAAc,CAAC;AACtD,EAAE,IAAI,CAAC,UAAU;AAAA,EACf,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;AAAA,IAChB,MACE,YACG,OAAO,CAAC,MAAM,EAAE,IAAI,SAAS,OAAO,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,EAAE,MAAM,KAAK,MACjB,CAAC;AAAA,MACC,QAAQ,OAAO;AAAA,MACf,WAAW;AAAA,MACX,eAAe;AAAA,MACf,KAAK;AAAA;AAAA,MAEL,CAAC,KAAK,MAAM,OAAO,MAAM;AAAA,MACzB,CAAC,OAAO;AAAA,MACR,CAAC;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,kBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,SAAS;AAAA,QAER,KACH,EAVC;AAAA,IAWH,EAnBC,OAoBF;AAAA,IACL,CAAC,MAAM;AAAA,EACT;AAEA,SACE,CAAC,OAAO,SAAS,OAAO,QAAQ,KAAK,cAAc,KAAK;AAAA,IACtD,CAAC,MAAM,OAAO,WAAW,cAAc,WAAW,YAAY,YAAY;AAAA,IAE1E,CAAC,OAAO,QAAQ,KACd,CAAC,WACC,CAAC,KAAK,cAAc,OAAO,UAAU,EAApC,KACH,EAFC,WAGH,EAJC;AAAA,EAKH,EARC;AAUL;",
5
5
  "names": []
6
6
  }
@@ -1,14 +1,26 @@
1
1
  import { Label, Separator, Switch, XStack, YStack } from "tamagui";
2
2
  function SwitchDemo() {
3
3
  return <YStack width={200} alignItems="center" space="$3">
4
- <SwitchWithLabel size="$2" />
5
- <SwitchWithLabel size="$3" />
6
- <SwitchWithLabel size="$4" />
7
- <SwitchWithLabel size="$5" />
4
+ <XStack space="$3" $xs={{ flexDirection: "column" }}>
5
+ <SwitchWithLabel size="$2" />
6
+ <SwitchWithLabel size="$2" defaultChecked />
7
+ </XStack>
8
+ <XStack space="$3" $xs={{ flexDirection: "column" }}>
9
+ <SwitchWithLabel size="$3" />
10
+ <SwitchWithLabel size="$3" defaultChecked />
11
+ </XStack>
12
+ <XStack space="$3" $xs={{ flexDirection: "column" }}>
13
+ <SwitchWithLabel size="$4" />
14
+ <SwitchWithLabel size="$4" defaultChecked />
15
+ </XStack>
16
+ <XStack space="$3" $xs={{ flexDirection: "column" }}>
17
+ <SwitchWithLabel size="$5" />
18
+ <SwitchWithLabel size="$5" defaultChecked />
19
+ </XStack>
8
20
  </YStack>;
9
21
  }
10
22
  function SwitchWithLabel(props) {
11
- const id = `switch-${props.size.toString().slice(1)}`;
23
+ const id = `switch-${props.size.toString().slice(1)}-${props.defaultChecked ?? ""}}`;
12
24
  return <XStack width={200} alignItems="center" space="$4">
13
25
  <Label
14
26
  paddingRight="$0"
@@ -16,9 +28,9 @@ function SwitchWithLabel(props) {
16
28
  justifyContent="flex-end"
17
29
  size={props.size}
18
30
  htmlFor={id}
19
- >Dark mode</Label>
31
+ >Accept</Label>
20
32
  <Separator minHeight={20} vertical />
21
- <Switch id={id} size={props.size}><Switch.Thumb animation="quick" /></Switch>
33
+ <Switch id={id} size={props.size} defaultChecked={props.defaultChecked}><Switch.Thumb animation="quick" /></Switch>
22
34
  </XStack>;
23
35
  }
24
36
  export {
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/SwitchDemo.tsx"],
4
- "mappings": "AAAA,SAAS,OAAO,WAAuB,QAAQ,QAAQ,cAAsB;AAEtE,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,EAC7B,EALC;AAOL;AAEO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC;AACnD,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC;AAAA,MACC,aAAa;AAAA,MACb,UAAU;AAAA,MACV,eAAe;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,SAAS;AAAA,KACV,SAED,EARC;AAAA,IASD,CAAC,UAAU,WAAW,IAAI,SAAS;AAAA,IACnC,CAAC,OAAO,IAAI,IAAI,MAAM,MAAM,MAC1B,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,EAGH,EAdC;AAgBL;",
4
+ "mappings": "AAAA,SAAS,OAAO,WAAuB,QAAQ,QAAQ,cAAsB;AAEtE,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,OAAO,MAAM,KAAK,KAAK,EAAE,eAAe,SAAS;AAAA,MAChD,CAAC,gBAAgB,KAAK,KAAK;AAAA,MAC3B,CAAC,gBAAgB,KAAK,KAAK,eAAe;AAAA,IAC5C,EAHC;AAAA,IAID,CAAC,OAAO,MAAM,KAAK,KAAK,EAAE,eAAe,SAAS;AAAA,MAChD,CAAC,gBAAgB,KAAK,KAAK;AAAA,MAC3B,CAAC,gBAAgB,KAAK,KAAK,eAAe;AAAA,IAC5C,EAHC;AAAA,IAID,CAAC,OAAO,MAAM,KAAK,KAAK,EAAE,eAAe,SAAS;AAAA,MAChD,CAAC,gBAAgB,KAAK,KAAK;AAAA,MAC3B,CAAC,gBAAgB,KAAK,KAAK,eAAe;AAAA,IAC5C,EAHC;AAAA,IAID,CAAC,OAAO,MAAM,KAAK,KAAK,EAAE,eAAe,SAAS;AAAA,MAChD,CAAC,gBAAgB,KAAK,KAAK;AAAA,MAC3B,CAAC,gBAAgB,KAAK,KAAK,eAAe;AAAA,IAC5C,EAHC;AAAA,EAIH,EAjBC;AAmBL;AAEO,SAAS,gBAAgB,OAAuD;AACrF,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,MAAM,kBAAkB,EAAE;AACjF,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC;AAAA,MACC,aAAa;AAAA,MACb,UAAU;AAAA,MACV,eAAe;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,SAAS;AAAA,KACV,MAED,EARC;AAAA,IASD,CAAC,UAAU,WAAW,IAAI,SAAS;AAAA,IACnC,CAAC,OAAO,IAAI,IAAI,MAAM,MAAM,MAAM,gBAAgB,MAAM,gBACtD,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,EAGH,EAdC;AAgBL;",
5
5
  "names": []
6
6
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/demos",
3
- "version": "1.61.1",
3
+ "version": "1.61.3",
4
4
  "sideEffects": [
5
5
  "*.css"
6
6
  ],
@@ -33,29 +33,29 @@
33
33
  }
34
34
  },
35
35
  "dependencies": {
36
- "@tamagui/avatar": "1.61.1",
37
- "@tamagui/button": "1.61.1",
38
- "@tamagui/core": "1.61.1",
39
- "@tamagui/list-item": "1.61.1",
40
- "@tamagui/logo": "1.61.1",
41
- "@tamagui/menu": "1.61.1",
42
- "@tamagui/popover": "1.61.1",
43
- "@tamagui/progress": "1.61.1",
44
- "@tamagui/radio-group": "1.61.1",
45
- "@tamagui/select": "1.61.1",
46
- "@tamagui/sheet": "1.61.1",
47
- "@tamagui/site-config": "1.61.1",
48
- "@tamagui/slider": "1.61.1",
49
- "@tamagui/stacks": "1.61.1",
50
- "@tamagui/toast": "1.61.1",
51
- "tamagui": "1.61.1"
36
+ "@tamagui/avatar": "1.61.3",
37
+ "@tamagui/button": "1.61.3",
38
+ "@tamagui/core": "1.61.3",
39
+ "@tamagui/list-item": "1.61.3",
40
+ "@tamagui/logo": "1.61.3",
41
+ "@tamagui/menu": "1.61.3",
42
+ "@tamagui/popover": "1.61.3",
43
+ "@tamagui/progress": "1.61.3",
44
+ "@tamagui/radio-group": "1.61.3",
45
+ "@tamagui/select": "1.61.3",
46
+ "@tamagui/sheet": "1.61.3",
47
+ "@tamagui/site-config": "1.61.3",
48
+ "@tamagui/slider": "1.61.3",
49
+ "@tamagui/stacks": "1.61.3",
50
+ "@tamagui/toast": "1.61.3",
51
+ "tamagui": "1.61.3"
52
52
  },
53
53
  "peerDependencies": {
54
54
  "react": "*",
55
55
  "react-dom": "*"
56
56
  },
57
57
  "devDependencies": {
58
- "@tamagui/build": "1.61.1",
58
+ "@tamagui/build": "1.61.3",
59
59
  "react": "^18.2.0",
60
60
  "react-dom": "^18.2.0"
61
61
  },
package/src/Grid.tsx ADDED
@@ -0,0 +1,54 @@
1
+ import { isWeb } from '@tamagui/core'
2
+ import { XStack } from '@tamagui/stacks'
3
+ import React from 'react'
4
+
5
+ export type GridProps = {
6
+ children?: any
7
+ itemMinWidth?: number
8
+ gap?: any
9
+ columns?: number
10
+ }
11
+
12
+ export function Grid({ children, columns, itemMinWidth = 200, gap }: GridProps) {
13
+ if (isWeb) {
14
+ return (
15
+ <div
16
+ style={{
17
+ gap,
18
+ display: 'grid',
19
+ justifyContent: 'stretch',
20
+ // gridTemplateRows: 'repeat(4, 1fr)',
21
+ gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`,
22
+ // gridTemplateColumns: '1fr 1fr',
23
+ }}
24
+ >
25
+ {children}
26
+ </div>
27
+ )
28
+ }
29
+
30
+ const childrenList = React.Children.toArray(children)
31
+
32
+ return (
33
+ <XStack alignItems="center" justifyContent="center" flexWrap="wrap">
34
+ {childrenList.map((child, i) => {
35
+ if (!child) {
36
+ return null
37
+ }
38
+
39
+ // index key bad
40
+ return (
41
+ <XStack
42
+ key={i}
43
+ flex={1}
44
+ minWidth={itemMinWidth}
45
+ marginRight={gap}
46
+ marginBottom={gap}
47
+ >
48
+ {child}
49
+ </XStack>
50
+ )
51
+ })}
52
+ </XStack>
53
+ )
54
+ }
@@ -1,7 +1,9 @@
1
1
  import * as LucideIcons from '@tamagui/lucide-icons'
2
2
  import { useMemo, useState } from 'react'
3
3
  import { ScrollView } from 'react-native'
4
- import { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'
4
+ import { Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'
5
+
6
+ import { Grid } from './Grid'
5
7
 
6
8
  const lucideIcons = Object.keys(
7
9
  // vite tree shaking workaround
@@ -3,16 +3,28 @@ import { Label, Separator, SizeTokens, Switch, XStack, YStack, styled } from 'ta
3
3
  export function SwitchDemo() {
4
4
  return (
5
5
  <YStack width={200} alignItems="center" space="$3">
6
- <SwitchWithLabel size="$2" />
7
- <SwitchWithLabel size="$3" />
8
- <SwitchWithLabel size="$4" />
9
- <SwitchWithLabel size="$5" />
6
+ <XStack space="$3" $xs={{ flexDirection: 'column' }}>
7
+ <SwitchWithLabel size="$2" />
8
+ <SwitchWithLabel size="$2" defaultChecked />
9
+ </XStack>
10
+ <XStack space="$3" $xs={{ flexDirection: 'column' }}>
11
+ <SwitchWithLabel size="$3" />
12
+ <SwitchWithLabel size="$3" defaultChecked />
13
+ </XStack>
14
+ <XStack space="$3" $xs={{ flexDirection: 'column' }}>
15
+ <SwitchWithLabel size="$4" />
16
+ <SwitchWithLabel size="$4" defaultChecked />
17
+ </XStack>
18
+ <XStack space="$3" $xs={{ flexDirection: 'column' }}>
19
+ <SwitchWithLabel size="$5" />
20
+ <SwitchWithLabel size="$5" defaultChecked />
21
+ </XStack>
10
22
  </YStack>
11
23
  )
12
24
  }
13
25
 
14
- export function SwitchWithLabel(props: { size: SizeTokens }) {
15
- const id = `switch-${props.size.toString().slice(1)}`
26
+ export function SwitchWithLabel(props: { size: SizeTokens; defaultChecked?: boolean }) {
27
+ const id = `switch-${props.size.toString().slice(1)}-${props.defaultChecked ?? ''}}`
16
28
  return (
17
29
  <XStack width={200} alignItems="center" space="$4">
18
30
  <Label
@@ -22,10 +34,10 @@ export function SwitchWithLabel(props: { size: SizeTokens }) {
22
34
  size={props.size}
23
35
  htmlFor={id}
24
36
  >
25
- Dark mode
37
+ Accept
26
38
  </Label>
27
39
  <Separator minHeight={20} vertical />
28
- <Switch id={id} size={props.size}>
40
+ <Switch id={id} size={props.size} defaultChecked={props.defaultChecked}>
29
41
  <Switch.Thumb animation="quick" />
30
42
  </Switch>
31
43
  </XStack>
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ export type GridProps = {
3
+ children?: any;
4
+ itemMinWidth?: number;
5
+ gap?: any;
6
+ columns?: number;
7
+ };
8
+ export declare function Grid({ children, columns, itemMinWidth, gap }: GridProps): JSX.Element;
9
+ //# sourceMappingURL=Grid.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../src/Grid.tsx"],"names":[],"mappings":";AAIA,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,GAAG,CAAA;IACT,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAkB,EAAE,GAAG,EAAE,EAAE,SAAS,eA0C7E"}
@@ -1 +1 @@
1
- {"version":3,"file":"LucideIconsDemo.d.ts","sourceRoot":"","sources":["../src/LucideIconsDemo.tsx"],"names":[],"mappings":";AAcA,wBAAgB,eAAe,gBA8C9B"}
1
+ {"version":3,"file":"LucideIconsDemo.d.ts","sourceRoot":"","sources":["../src/LucideIconsDemo.tsx"],"names":[],"mappings":";AAgBA,wBAAgB,eAAe,gBA8C9B"}
@@ -3,5 +3,6 @@ import { SizeTokens } from 'tamagui';
3
3
  export declare function SwitchDemo(): JSX.Element;
4
4
  export declare function SwitchWithLabel(props: {
5
5
  size: SizeTokens;
6
+ defaultChecked?: boolean;
6
7
  }): JSX.Element;
7
8
  //# sourceMappingURL=SwitchDemo.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SwitchDemo.d.ts","sourceRoot":"","sources":["../src/SwitchDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,UAAU,EAAkC,MAAM,SAAS,CAAA;AAEtF,wBAAgB,UAAU,gBASzB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,eAmB1D"}
1
+ {"version":3,"file":"SwitchDemo.d.ts","sourceRoot":"","sources":["../src/SwitchDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,UAAU,EAAkC,MAAM,SAAS,CAAA;AAEtF,wBAAgB,UAAU,gBAqBzB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE,eAmBpF"}