@tamagui/demos 2.0.0-1768263318220 → 2.0.0-1768326993354

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.
@@ -40,15 +40,9 @@ var import_react = __toESM(require("react"), 1),
40
40
  import_jsx_runtime = require("react/jsx-runtime");
41
41
  function ProgressDemo() {
42
42
  const [key, setKey] = import_react.default.useState(0),
43
- [size, setSize] = import_react.default.useState(4),
44
- [progress, setProgress] = import_react.default.useState(0),
45
- sizeProp = `$${size}`;
46
- return import_react.default.useEffect(() => {
47
- const timer = setTimeout(() => setProgress(60), 1e3);
48
- return () => {
49
- clearTimeout(timer);
50
- };
51
- }, []), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
43
+ [progress, setProgress] = import_react.default.useState(60),
44
+ [slider, setSlider] = import_react.default.useState([60]);
45
+ return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
52
46
  children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
53
47
  height: 60,
54
48
  items: "center",
@@ -56,12 +50,16 @@ function ProgressDemo() {
56
50
  children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Paragraph, {
57
51
  height: 30,
58
52
  opacity: 0.5,
59
- children: ["Size: ", size]
53
+ children: ["Progress: ", progress]
60
54
  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Progress, {
61
- size: sizeProp,
62
55
  value: progress,
63
56
  bg: "$color5",
64
57
  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Progress.Indicator, {
58
+ transition: ["quicker", {
59
+ transform: {
60
+ overshootClamping: !0
61
+ }
62
+ }],
65
63
  bg: "$background"
66
64
  })
67
65
  }, key)]
@@ -77,12 +75,12 @@ function ProgressDemo() {
77
75
  children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Slider, {
78
76
  size: "$2",
79
77
  width: 130,
80
- defaultValue: [0],
78
+ value: slider,
81
79
  min: 0,
82
80
  max: 100,
83
81
  step: 1,
84
82
  onValueChange: ([val]) => {
85
- setProgress(val);
83
+ setProgress(val), setSlider([val]);
86
84
  },
87
85
  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
88
86
  borderWidth: 1,
@@ -100,7 +98,7 @@ function ProgressDemo() {
100
98
  size: "$2",
101
99
  icon: import_lucide_icons.RotateCcw,
102
100
  onPress: () => {
103
- setKey(Math.random()), setProgress(0);
101
+ setKey(Math.random()), setProgress(0), setSlider([0]);
104
102
  }
105
103
  })]
106
104
  })]
@@ -27,19 +27,27 @@ __export(ProgressDemo_exports, {
27
27
  module.exports = __toCommonJS(ProgressDemo_exports);
28
28
  var import_react = __toESM(require("react"), 1), import_tamagui = require("tamagui"), import_lucide_icons = require("@tamagui/lucide-icons"), import_jsx_runtime = require("react/jsx-runtime");
29
29
  function ProgressDemo() {
30
- const [key, setKey] = import_react.default.useState(0), [size, setSize] = import_react.default.useState(4), [progress, setProgress] = import_react.default.useState(0), sizeProp = `$${size}`;
31
- return import_react.default.useEffect(() => {
32
- const timer = setTimeout(() => setProgress(60), 1e3);
33
- return () => {
34
- clearTimeout(timer);
35
- };
36
- }, []), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
30
+ const [key, setKey] = import_react.default.useState(0), [progress, setProgress] = import_react.default.useState(60), [slider, setSlider] = import_react.default.useState([60]);
31
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
37
32
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { height: 60, items: "center", gap: "$4", children: [
38
33
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Paragraph, { height: 30, opacity: 0.5, children: [
39
- "Size: ",
40
- size
34
+ "Progress: ",
35
+ progress
41
36
  ] }),
42
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Progress, { size: sizeProp, value: progress, bg: "$color5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Progress.Indicator, { bg: "$background" }) }, key)
37
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Progress, { value: progress, bg: "$color5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
38
+ import_tamagui.Progress.Indicator,
39
+ {
40
+ transition: [
41
+ "quicker",
42
+ {
43
+ transform: {
44
+ overshootClamping: !0
45
+ }
46
+ }
47
+ ],
48
+ bg: "$background"
49
+ }
50
+ ) }, key)
43
51
  ] }),
44
52
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
45
53
  import_tamagui.XStack,
@@ -56,12 +64,12 @@ function ProgressDemo() {
56
64
  {
57
65
  size: "$2",
58
66
  width: 130,
59
- defaultValue: [0],
67
+ value: slider,
60
68
  min: 0,
61
69
  max: 100,
62
70
  step: 1,
63
71
  onValueChange: ([val]) => {
64
- setProgress(val);
72
+ setProgress(val), setSlider([val]);
65
73
  },
66
74
  children: [
67
75
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, { borderWidth: 1, borderColor: "$color5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {}) }),
@@ -83,7 +91,7 @@ function ProgressDemo() {
83
91
  size: "$2",
84
92
  icon: import_lucide_icons.RotateCcw,
85
93
  onPress: () => {
86
- setKey(Math.random()), setProgress(0);
94
+ setKey(Math.random()), setProgress(0), setSlider([0]);
87
95
  }
88
96
  }
89
97
  )
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ProgressDemo.tsx"],
4
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB,8BAElB,iBAAoE,oBACpE,sBAAgC,kCAgB5B;AAdG,SAAS,eAAe;AAC7B,QAAM,CAAC,KAAK,MAAM,IAAI,aAAAA,QAAM,SAAS,CAAC,GAChC,CAAC,MAAM,OAAO,IAAI,aAAAA,QAAM,SAAS,CAAC,GAClC,CAAC,UAAU,WAAW,IAAI,aAAAA,QAAM,SAAS,CAAC,GAC1C,WAAW,IAAI,IAAI;AAEzB,sBAAAA,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC,GAGH,4EACE;AAAA,iDAAC,yBAAO,QAAQ,IAAI,OAAM,UAAS,KAAI,MACrC;AAAA,mDAAC,4BAAU,QAAQ,IAAI,SAAS,KAAK;AAAA;AAAA,QAC5B;AAAA,SACT;AAAA,MACA,4CAAC,2BAAmB,MAAM,UAAU,OAAO,UAAU,IAAG,WACtD,sDAAC,wBAAS,WAAT,EAAmB,IAAG,eAAc,KADxB,GAEf;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,KAAI;AAAA,QACJ,UAAS;AAAA,QACT,GAAE;AAAA,QACF,GAAE;AAAA,QACF,MAAM,EAAE,SAAS,OAAO;AAAA,QAExB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO;AAAA,cACP,cAAc,CAAC,CAAC;AAAA,cAChB,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAM;AAAA,cACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,4BAAY,GAAG;AAAA,cACjB;AAAA,cAEA;AAAA,4DAAC,sBAAO,OAAP,EAAa,aAAa,GAAG,aAAY,WACxC,sDAAC,sBAAO,aAAP,EAAmB,GACtB;AAAA,gBACA,4CAAC,sBAAO,OAAP,EAAa,UAAQ,IAAC,OAAO,GAAG;AAAA;AAAA;AAAA,UACnC;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM;AAAA,cACN,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG;AAAA;AAAA,UACxD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM;AAAA,cACN,SAAS,MAAM;AACb,uBAAO,KAAK,OAAO,CAAC,GACpB,YAAY,CAAC;AAAA,cACf;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
4
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB,8BAClB,iBAAoE,oBACpE,sBAAgC,kCAQ5B;AANG,SAAS,eAAe;AAC7B,QAAM,CAAC,KAAK,MAAM,IAAI,aAAAA,QAAM,SAAS,CAAC,GAChC,CAAC,UAAU,WAAW,IAAI,aAAAA,QAAM,SAAS,EAAE,GAC3C,CAAC,QAAQ,SAAS,IAAI,aAAAA,QAAM,SAAmB,CAAC,EAAE,CAAC;AAEzD,SACE,4EACE;AAAA,iDAAC,yBAAO,QAAQ,IAAI,OAAM,UAAS,KAAI,MACrC;AAAA,mDAAC,4BAAU,QAAQ,IAAI,SAAS,KAAK;AAAA;AAAA,QACxB;AAAA,SACb;AAAA,MACA,4CAAC,2BAAmB,OAAO,UAAU,IAAG,WACtC;AAAA,QAAC,wBAAS;AAAA,QAAT;AAAA,UACC,YAAY;AAAA,YACV;AAAA,YACA;AAAA,cACE,WAAW;AAAA,gBACT,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,UACA,IAAG;AAAA;AAAA,MACL,KAXa,GAYf;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,KAAI;AAAA,QACJ,UAAS;AAAA,QACT,GAAE;AAAA,QACF,GAAE;AAAA,QACF,MAAM,EAAE,SAAS,OAAO;AAAA,QAExB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO;AAAA,cACP,OAAO;AAAA,cACP,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAM;AAAA,cACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,4BAAY,GAAG,GACf,UAAU,CAAC,GAAG,CAAC;AAAA,cACjB;AAAA,cAEA;AAAA,4DAAC,sBAAO,OAAP,EAAa,aAAa,GAAG,aAAY,WACxC,sDAAC,sBAAO,aAAP,EAAmB,GACtB;AAAA,gBACA,4CAAC,sBAAO,OAAP,EAAa,UAAQ,IAAC,OAAO,GAAG;AAAA;AAAA;AAAA,UACnC;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM;AAAA,cACN,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG;AAAA;AAAA,UACxD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM;AAAA,cACN,SAAS,MAAM;AACb,uBAAO,KAAK,OAAO,CAAC,GACpB,YAAY,CAAC,GACb,UAAU,CAAC,CAAC,CAAC;AAAA,cACf;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
5
5
  "names": ["React"]
6
6
  }
@@ -42,17 +42,9 @@ var import_jsx_runtime = require("react/jsx-runtime"),
42
42
  import_lucide_icons = require("@tamagui/lucide-icons");
43
43
  function ProgressDemo() {
44
44
  var [key, setKey] = import_react.default.useState(0),
45
- [size, setSize] = import_react.default.useState(4),
46
- [progress, setProgress] = import_react.default.useState(0),
47
- sizeProp = `$${size}`;
48
- return import_react.default.useEffect(function () {
49
- var timer = setTimeout(function () {
50
- return setProgress(60);
51
- }, 1e3);
52
- return function () {
53
- clearTimeout(timer);
54
- };
55
- }, []), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
45
+ [progress, setProgress] = import_react.default.useState(60),
46
+ [slider, setSlider] = import_react.default.useState([60]);
47
+ return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
56
48
  children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
57
49
  height: 60,
58
50
  items: "center",
@@ -60,12 +52,16 @@ function ProgressDemo() {
60
52
  children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Paragraph, {
61
53
  height: 30,
62
54
  opacity: 0.5,
63
- children: ["Size: ", size]
55
+ children: ["Progress: ", progress]
64
56
  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Progress, {
65
- size: sizeProp,
66
57
  value: progress,
67
58
  bg: "$color5",
68
59
  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Progress.Indicator, {
60
+ transition: ["quicker", {
61
+ transform: {
62
+ overshootClamping: !0
63
+ }
64
+ }],
69
65
  bg: "$background"
70
66
  })
71
67
  }, key)]
@@ -81,13 +77,13 @@ function ProgressDemo() {
81
77
  children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Slider, {
82
78
  size: "$2",
83
79
  width: 130,
84
- defaultValue: [0],
80
+ value: slider,
85
81
  min: 0,
86
82
  max: 100,
87
83
  step: 1,
88
84
  onValueChange: function (param) {
89
85
  var [val] = param;
90
- setProgress(val);
86
+ setProgress(val), setSlider([val]);
91
87
  },
92
88
  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
93
89
  borderWidth: 1,
@@ -109,7 +105,7 @@ function ProgressDemo() {
109
105
  size: "$2",
110
106
  icon: import_lucide_icons.RotateCcw,
111
107
  onPress: function () {
112
- setKey(Math.random()), setProgress(0);
108
+ setKey(Math.random()), setProgress(0), setSlider([0]);
113
109
  }
114
110
  })]
115
111
  })]
@@ -1 +1 @@
1
- {"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ProgressDemo_exports","__export","ProgressDemo","module","exports","import_jsx_runtime","require","import_react","__toESM","import_tamagui","import_lucide_icons","key","setKey","default","useState","size","setSize","progress","setProgress","sizeProp","useEffect","timer","setTimeout","clearTimeout","jsxs","Fragment","children","YStack","height","items","gap","Paragraph","opacity","jsx","Progress","bg","Indicator","XStack","position","b","l","$xxs","display","Slider","width","defaultValue","min","max","step","onValueChange","param","val","Track","borderWidth","borderColor","TrackActive","Thumb","circular"],"sources":["../../src/ProgressDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAA;EAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;IAAAC,KAAA;EAAA,IAAAH,GAAA;AAAA,IAAAI,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,YAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAkB,CAAAK,oBAElB;AAGO,IAAAK,kBAAS,GAAeC,OAAA;EAAAC,YAAA,GAAAC,OAAA,CAAAF,OAAA;EAAAG,cAAA,GAAAH,OAAA;EAAAI,mBAAA,GAAAJ,OAAA;AAC7B,SAAOJ,YAAWA,CAAA,EAAI;EAKtB,KAAAS,GAAA,EAAAC,MAAA,IAAAL,YAAM,CAAAM,OAAU,CAAAC,QAAM;IAAA,CAAAC,IAAA,EAAAC,OAAA,IAAAT,YAAA,CAAAM,OAAA,CAAAC,QAAA;IAAA,CAAAG,QAAA,EAAAC,WAAA,IAAAX,YAAA,CAAAM,OAAA,CAAAC,QAAA;IAAAK,QAAA,OAAAJ,IAAA;EACpB,OAAAR,YAAc,CAAAM,OAAW,CAAAO,SAAM,aAAc;IAC7C,IAAAC,KAAO,GAAAC,UAAM;MACX,OAAAJ,WAAkB;IACpB;IACF,OAGE;MACEK,YAAA,CAAAF,KAAA;IACE;EAAqC,2BAAAhB,kBAAA,CAAAmB,IAAA,EAAAnB,kBAAA,CAAAoB,QAAA;IAAAC,QAC5B,kBACT,IAAArB,kBAAA,CAAAmB,IAAA,EAAAf,cAAA,CAAAkB,MAAA;MACAC,MAAA;MAGFC,KAAA;MAEAC,GAAA;MAACJ,QAAA,sBAAArB,kBAAA,CAAAmB,IAAA,EAAAf,cAAA,CAAAsB,SAAA;QACCH,MAAM;QACNI,OAAI;QACJN,QAAS,GACP,UACAX,IAAA;MAGF,uBAAAV,kBAAA,CAAA4B,GAAA,EAAAxB,cAAA,CAAAyB,QAAA;QAACnB,IAAA,EAAAI,QAAA;QAAApB,KAAA,EAAAkB,QAAA;QAAAkB,EACC,WAAK;QAAAT,QACL,EAAO,mBAAArB,kBAAA,CAAA4B,GAAA,EAAAxB,cAAA,CAAAyB,QAAA,CAAAE,SAAA;UACPD,EAAA;QAAgB;MACX,GAAAxB,GACL;IACM,IAEJ,mBAAAN,kBAAe,CAAAmB,IAAA,EAAAf,cAAA,CAAA4B,MAAA;MAAAR,KAAA,EACjB;MAAAC,GAAA,MAEA;MAAAQ,QAAA;MAEAC,CAAA;MACiCC,CAAA;MAAAC,IAAA;QACnCC,OAAA;MAAA;MAEAhB,QAAC,sBAAArB,kBAAA,CAAAmB,IAAA,EAAAf,cAAA,CAAAkC,MAAA;QAAA5B,IACC,MAAK;QAAA6B,KACL,KAAM;QAAAC,YACG,GAA6C,EACxD;QACAC,GAAA;QAACC,GAAA;QAAAC,IAAA;QAAAC,aACM,WAAAA,CAAAC,KAAA;UACL,KAAAC,GAAM,IAAAD,KAAA;UACNhC,WAAS,CAAAiC,GAAM;QACb;QACazB,QACf,sBAAArB,kBAAA,CAAA4B,GAAA,EAAAxB,cAAA,CAAAkC,MAAA,CAAAS,KAAA;UACFC,WAAA;UAAAC,WAAA;UAAA5B,QAAA,qBAAArB,kBAAA,CAAA4B,GAAA,EAAAxB,cAAA,CAAAkC,MAAA,CAAAY,WAAA;QACF,IACF,mBAAAlD,kBAAA,CAAA4B,GAAA,EAAAxB,cAAA,CAAAkC,MAAA,CAAAa,KAAA;UAEJC,QAAA","ignoreList":[]}
1
+ {"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ProgressDemo_exports","__export","ProgressDemo","module","exports","import_jsx_runtime","require","import_react","__toESM","import_tamagui","import_lucide_icons","key","setKey","default","useState","progress","setProgress","slider","setSlider","jsxs","Fragment","children","YStack","height","items","gap","Paragraph","opacity","jsx","Progress","bg","Indicator","transition","transform","overshootClamping","XStack","position","b","l","$xxs","display","Slider","size","width","min","max","step","onValueChange","param","val","Track","borderWidth","borderColor","TrackActive","Thumb","circular","index","Button"],"sources":["../../src/ProgressDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAA;EAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;IAAAC,KAAA;EAAA,IAAAH,GAAA;AAAA,IAAAI,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,YAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAkB,CAAAK,oBAClB;AAGO,IAAAK,kBAAS,GAAeC,OAAA;EAAAC,YAAA,GAAAC,OAAA,CAAAF,OAAA;EAAAG,cAAA,GAAAH,OAAA;EAAAI,mBAAA,GAAAJ,OAAA;AAC7B,SAAOJ,YAAWA,CAAA,EAAI;EAItB,KAAAS,GACE,EAAAC,MAAA,IAAAL,YAAA,CAAAM,OAAA,CAAAC,QAAA;IAAA,CAAAC,QAAA,EAAAC,WAAA,IAAAT,YACE,CAAAM,OAAA,CAAAC,QAAA;IAAA,CAAAG,MAAA,EAAAC,SAAA,IAAAX,YAAA,CAAAM,OAAA,CAAAC,QAAA,KACE;EAAqC,0BAAAT,kBAAA,CAAAc,IAAA,EAAAd,kBAAA,CAAAe,QAAA;IAAAC,QACxB,kBACb,IAAAhB,kBAAA,CAAAc,IAAA,EAAAV,cAAA,CAAAa,MAAA;MACAC,MAAA;MACGC,KAAA;MAAAC,GAAA;MAAAJ,QACC,GAAY,eACV,IAAAhB,kBAAA,CAAAc,IAAA,EAAAV,cAAA,CAAAiB,SAAA;QACAH,MAAA;QAAAI,OACE;QAAWN,QACT,GACF,cACFN,QAAA;MAEF,IAAG,mBAAAV,kBAAA,CAAAuB,GAAA,EAAAnB,cAAA,CAAAoB,QAAA;QAVQ9B,KAYf,EAAAgB,QAAA;QACFe,EAAA;QAEAT,QAAA,qBAAAhB,kBAAA,CAAAuB,GAAA,EAAAnB,cAAA,CAAAoB,QAAA,CAAAE,SAAA;UAACC,UAAA,cACO;YACFC,SAAA;cACKC,iBAAA;YACP;UACA,EACI;UAENJ,EAAA;QAAA;MAAA,GAACnB,GAAA;IAAA,IACM,eACE,IAAAN,kBAAA,CAAAc,IAAA,EAAAV,cAAA,CAAA0B,MAAA;MAAAX,KAAA,EACP,QAAO;MAAAC,GAAA,MACP;MAAKW,QACL,YAAK;MAAAC,CAAA,MACL;MAAMC,CAAA,MACN;MACEC,IAAA;QACeC,OACjB;MAAA;MAEAnB,QAAA,GAEA,eACA,IAAAhB,kBAAA,CAAAc,IAAA,EAAAV,cAAC,CAAAgC,MAAA;QAAgCC,IAAA;QAAAC,KAAA;QACnC5C,KAAA,EAAAkB,MAAA;QAEA2B,GAAA;QAACC,GAAA;QAAAC,IAAA;QAAAC,aACM,WAAAA,CAAAC,KAAA;UACL,KAAAC,GAAM,IAAAD,KAAA;UACNhC,WAAS,CAAAiC,GAAM,GAAA/B,SAAY,CAAC,CAA0B+B,GAAA,CACxD;QACA;QAAC5B,QAAA,sBAAAhB,kBAAA,CAAAuB,GAAA,EAAAnB,cAAA,CAAAgC,MAAA,CAAAS,KAAA;UACCC,WAAK;UACLC,WAAM;UACN/B,QAAS,iBAAM,IAAAhB,kBAAA,CAAAuB,GAAA,EAAAnB,cAAA,CAAAgC,MAAA,CAAAY,WAAA;QACb,IAGF,mBAAAhD,kBAAA,CAAAuB,GAAA,EAAAnB,cAAA,CAAAgC,MAAA,CAAAa,KAAA;UAAAC,QAAA;UACFC,KAAA;QAAA;MACF,IACF,mBAAAnD,kBAAA,CAAAuB,GAAA,EAAAnB,cAAA,CAAAgD,MAAA;QAEJf,IAAA","ignoreList":[]}
@@ -3,19 +3,27 @@ import { Button, Paragraph, Progress, Slider, XStack, YStack } from "tamagui";
3
3
  import { Play, RotateCcw } from "@tamagui/lucide-icons";
4
4
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
5
  function ProgressDemo() {
6
- const [key, setKey] = React.useState(0), [size, setSize] = React.useState(4), [progress, setProgress] = React.useState(0), sizeProp = `$${size}`;
7
- return React.useEffect(() => {
8
- const timer = setTimeout(() => setProgress(60), 1e3);
9
- return () => {
10
- clearTimeout(timer);
11
- };
12
- }, []), /* @__PURE__ */ jsxs(Fragment, { children: [
6
+ const [key, setKey] = React.useState(0), [progress, setProgress] = React.useState(60), [slider, setSlider] = React.useState([60]);
7
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
13
8
  /* @__PURE__ */ jsxs(YStack, { height: 60, items: "center", gap: "$4", children: [
14
9
  /* @__PURE__ */ jsxs(Paragraph, { height: 30, opacity: 0.5, children: [
15
- "Size: ",
16
- size
10
+ "Progress: ",
11
+ progress
17
12
  ] }),
18
- /* @__PURE__ */ jsx(Progress, { size: sizeProp, value: progress, bg: "$color5", children: /* @__PURE__ */ jsx(Progress.Indicator, { bg: "$background" }) }, key)
13
+ /* @__PURE__ */ jsx(Progress, { value: progress, bg: "$color5", children: /* @__PURE__ */ jsx(
14
+ Progress.Indicator,
15
+ {
16
+ transition: [
17
+ "quicker",
18
+ {
19
+ transform: {
20
+ overshootClamping: !0
21
+ }
22
+ }
23
+ ],
24
+ bg: "$background"
25
+ }
26
+ ) }, key)
19
27
  ] }),
20
28
  /* @__PURE__ */ jsxs(
21
29
  XStack,
@@ -32,12 +40,12 @@ function ProgressDemo() {
32
40
  {
33
41
  size: "$2",
34
42
  width: 130,
35
- defaultValue: [0],
43
+ value: slider,
36
44
  min: 0,
37
45
  max: 100,
38
46
  step: 1,
39
47
  onValueChange: ([val]) => {
40
- setProgress(val);
48
+ setProgress(val), setSlider([val]);
41
49
  },
42
50
  children: [
43
51
  /* @__PURE__ */ jsx(Slider.Track, { borderWidth: 1, borderColor: "$color5", children: /* @__PURE__ */ jsx(Slider.TrackActive, {}) }),
@@ -59,7 +67,7 @@ function ProgressDemo() {
59
67
  size: "$2",
60
68
  icon: RotateCcw,
61
69
  onPress: () => {
62
- setKey(Math.random()), setProgress(0);
70
+ setKey(Math.random()), setProgress(0), setSlider([0]);
63
71
  }
64
72
  }
65
73
  )
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ProgressDemo.tsx"],
4
- "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,QAAQ,WAAW,UAAU,QAAQ,QAAQ,cAAc;AACpE,SAAS,MAAM,iBAAiB;AAgB5B,mBAMM,KAJF,YAFJ;AAdG,SAAS,eAAe;AAC7B,QAAM,CAAC,KAAK,MAAM,IAAI,MAAM,SAAS,CAAC,GAChC,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,CAAC,GAClC,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,CAAC,GAC1C,WAAW,IAAI,IAAI;AAEzB,eAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC,GAGH,iCACE;AAAA,yBAAC,UAAO,QAAQ,IAAI,OAAM,UAAS,KAAI,MACrC;AAAA,2BAAC,aAAU,QAAQ,IAAI,SAAS,KAAK;AAAA;AAAA,QAC5B;AAAA,SACT;AAAA,MACA,oBAAC,YAAmB,MAAM,UAAU,OAAO,UAAU,IAAG,WACtD,8BAAC,SAAS,WAAT,EAAmB,IAAG,eAAc,KADxB,GAEf;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,KAAI;AAAA,QACJ,UAAS;AAAA,QACT,GAAE;AAAA,QACF,GAAE;AAAA,QACF,MAAM,EAAE,SAAS,OAAO;AAAA,QAExB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO;AAAA,cACP,cAAc,CAAC,CAAC;AAAA,cAChB,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAM;AAAA,cACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,4BAAY,GAAG;AAAA,cACjB;AAAA,cAEA;AAAA,oCAAC,OAAO,OAAP,EAAa,aAAa,GAAG,aAAY,WACxC,8BAAC,OAAO,aAAP,EAAmB,GACtB;AAAA,gBACA,oBAAC,OAAO,OAAP,EAAa,UAAQ,IAAC,OAAO,GAAG;AAAA;AAAA;AAAA,UACnC;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM;AAAA,cACN,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG;AAAA;AAAA,UACxD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM;AAAA,cACN,SAAS,MAAM;AACb,uBAAO,KAAK,OAAO,CAAC,GACpB,YAAY,CAAC;AAAA,cACf;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
4
+ "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,QAAQ,WAAW,UAAU,QAAQ,QAAQ,cAAc;AACpE,SAAS,MAAM,iBAAiB;AAQ5B,mBAMM,KAJF,YAFJ;AANG,SAAS,eAAe;AAC7B,QAAM,CAAC,KAAK,MAAM,IAAI,MAAM,SAAS,CAAC,GAChC,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,EAAE,GAC3C,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmB,CAAC,EAAE,CAAC;AAEzD,SACE,iCACE;AAAA,yBAAC,UAAO,QAAQ,IAAI,OAAM,UAAS,KAAI,MACrC;AAAA,2BAAC,aAAU,QAAQ,IAAI,SAAS,KAAK;AAAA;AAAA,QACxB;AAAA,SACb;AAAA,MACA,oBAAC,YAAmB,OAAO,UAAU,IAAG,WACtC;AAAA,QAAC,SAAS;AAAA,QAAT;AAAA,UACC,YAAY;AAAA,YACV;AAAA,YACA;AAAA,cACE,WAAW;AAAA,gBACT,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,UACA,IAAG;AAAA;AAAA,MACL,KAXa,GAYf;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,KAAI;AAAA,QACJ,UAAS;AAAA,QACT,GAAE;AAAA,QACF,GAAE;AAAA,QACF,MAAM,EAAE,SAAS,OAAO;AAAA,QAExB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO;AAAA,cACP,OAAO;AAAA,cACP,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAM;AAAA,cACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,4BAAY,GAAG,GACf,UAAU,CAAC,GAAG,CAAC;AAAA,cACjB;AAAA,cAEA;AAAA,oCAAC,OAAO,OAAP,EAAa,aAAa,GAAG,aAAY,WACxC,8BAAC,OAAO,aAAP,EAAmB,GACtB;AAAA,gBACA,oBAAC,OAAO,OAAP,EAAa,UAAQ,IAAC,OAAO,GAAG;AAAA;AAAA;AAAA,UACnC;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM;AAAA,cACN,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG;AAAA;AAAA,UACxD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM;AAAA,cACN,SAAS,MAAM;AACb,uBAAO,KAAK,OAAO,CAAC,GACpB,YAAY,CAAC,GACb,UAAU,CAAC,CAAC,CAAC;AAAA,cACf;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
5
5
  "names": []
6
6
  }
@@ -4,15 +4,9 @@ import { Play, RotateCcw } from "@tamagui/lucide-icons";
4
4
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
5
  function ProgressDemo() {
6
6
  const [key, setKey] = React.useState(0),
7
- [size, setSize] = React.useState(4),
8
- [progress, setProgress] = React.useState(0),
9
- sizeProp = `$${size}`;
10
- return React.useEffect(() => {
11
- const timer = setTimeout(() => setProgress(60), 1e3);
12
- return () => {
13
- clearTimeout(timer);
14
- };
15
- }, []), /* @__PURE__ */jsxs(Fragment, {
7
+ [progress, setProgress] = React.useState(60),
8
+ [slider, setSlider] = React.useState([60]);
9
+ return /* @__PURE__ */jsxs(Fragment, {
16
10
  children: [/* @__PURE__ */jsxs(YStack, {
17
11
  height: 60,
18
12
  items: "center",
@@ -20,12 +14,16 @@ function ProgressDemo() {
20
14
  children: [/* @__PURE__ */jsxs(Paragraph, {
21
15
  height: 30,
22
16
  opacity: 0.5,
23
- children: ["Size: ", size]
17
+ children: ["Progress: ", progress]
24
18
  }), /* @__PURE__ */jsx(Progress, {
25
- size: sizeProp,
26
19
  value: progress,
27
20
  bg: "$color5",
28
21
  children: /* @__PURE__ */jsx(Progress.Indicator, {
22
+ transition: ["quicker", {
23
+ transform: {
24
+ overshootClamping: !0
25
+ }
26
+ }],
29
27
  bg: "$background"
30
28
  })
31
29
  }, key)]
@@ -41,12 +39,12 @@ function ProgressDemo() {
41
39
  children: [/* @__PURE__ */jsxs(Slider, {
42
40
  size: "$2",
43
41
  width: 130,
44
- defaultValue: [0],
42
+ value: slider,
45
43
  min: 0,
46
44
  max: 100,
47
45
  step: 1,
48
46
  onValueChange: ([val]) => {
49
- setProgress(val);
47
+ setProgress(val), setSlider([val]);
50
48
  },
51
49
  children: [/* @__PURE__ */jsx(Slider.Track, {
52
50
  borderWidth: 1,
@@ -64,7 +62,7 @@ function ProgressDemo() {
64
62
  size: "$2",
65
63
  icon: RotateCcw,
66
64
  onPress: () => {
67
- setKey(Math.random()), setProgress(0);
65
+ setKey(Math.random()), setProgress(0), setSlider([0]);
68
66
  }
69
67
  })]
70
68
  })]
@@ -1 +1 @@
1
- {"version":3,"names":["React","Button","Paragraph","Progress","Slider","XStack","YStack","Play","RotateCcw","Fragment","jsx","jsxs","ProgressDemo","key","setKey","useState","size","setSize","progress","setProgress","sizeProp","useEffect","timer","setTimeout","clearTimeout","children","height","items","gap","opacity","value","bg","Indicator","position","b","l","$xxs","display","width","defaultValue","min","max","step","onValueChange","val","Track","borderWidth","borderColor","TrackActive","Thumb","circular","index","icon","onPress","prev","Math","random"],"sources":["../../src/ProgressDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,MAAA,EAAQC,SAAA,EAAWC,QAAA,EAAUC,MAAA,EAAQC,MAAA,EAAQC,MAAA,QAAc;AACpE,SAASC,IAAA,EAAMC,SAAA,QAAiB;AAgB5B,SAAAC,QAAA,EAMMC,GAAA,EAJFC,IAAA,QAFJ;AAdG,SAASC,aAAA,EAAe;EAC7B,MAAM,CAACC,GAAA,EAAKC,MAAM,IAAId,KAAA,CAAMe,QAAA,CAAS,CAAC;IAChC,CAACC,IAAA,EAAMC,OAAO,IAAIjB,KAAA,CAAMe,QAAA,CAAS,CAAC;IAClC,CAACG,QAAA,EAAUC,WAAW,IAAInB,KAAA,CAAMe,QAAA,CAAS,CAAC;IAC1CK,QAAA,GAAW,IAAIJ,IAAI;EAEzB,OAAAhB,KAAA,CAAMqB,SAAA,CAAU,MAAM;IACpB,MAAMC,KAAA,GAAQC,UAAA,CAAW,MAAMJ,WAAA,CAAY,EAAE,GAAG,GAAI;IACpD,OAAO,MAAM;MACXK,YAAA,CAAaF,KAAK;IACpB;EACF,GAAG,EAAE,GAGH,eAAAX,IAAA,CAAAF,QAAA;IACEgB,QAAA,kBAAAd,IAAA,CAACL,MAAA;MAAOoB,MAAA,EAAQ;MAAIC,KAAA,EAAM;MAASC,GAAA,EAAI;MACrCH,QAAA,kBAAAd,IAAA,CAACT,SAAA;QAAUwB,MAAA,EAAQ;QAAIG,OAAA,EAAS;QAAKJ,QAAA,aAC5BT,IAAA;MAAA,CACT,GACA,eAAAN,GAAA,CAACP,QAAA;QAAmBa,IAAA,EAAMI,QAAA;QAAUU,KAAA,EAAOZ,QAAA;QAAUa,EAAA,EAAG;QACtDN,QAAA,iBAAAf,GAAA,CAACP,QAAA,CAAS6B,SAAA,EAAT;UAAmBD,EAAA,EAAG;QAAA,CAAc;MAAA,GADxBlB,GAEf;IAAA,CACF,GAEA,eAAAF,IAAA,CAACN,MAAA;MACCsB,KAAA,EAAM;MACNC,GAAA,EAAI;MACJK,QAAA,EAAS;MACTC,CAAA,EAAE;MACFC,CAAA,EAAE;MACFC,IAAA,EAAM;QAAEC,OAAA,EAAS;MAAO;MAExBZ,QAAA,kBAAAd,IAAA,CAACP,MAAA;QACCY,IAAA,EAAK;QACLsB,KAAA,EAAO;QACPC,YAAA,EAAc,CAAC,CAAC;QAChBC,GAAA,EAAK;QACLC,GAAA,EAAK;QACLC,IAAA,EAAM;QACNC,aAAA,EAAeA,CAAC,CAACC,GAAG,MAAM;UACxBzB,WAAA,CAAYyB,GAAG;QACjB;QAEAnB,QAAA,kBAAAf,GAAA,CAACN,MAAA,CAAOyC,KAAA,EAAP;UAAaC,WAAA,EAAa;UAAGC,WAAA,EAAY;UACxCtB,QAAA,iBAAAf,GAAA,CAACN,MAAA,CAAO4C,WAAA,EAAP,EAAmB;QAAA,CACtB,GACA,eAAAtC,GAAA,CAACN,MAAA,CAAO6C,KAAA,EAAP;UAAaC,QAAA,EAAQ;UAACC,KAAA,EAAO;QAAA,CAAG;MAAA,CACnC,GAEA,eAAAzC,GAAA,CAACT,MAAA;QACCe,IAAA,EAAK;QACLoC,IAAA,EAAM7C,IAAA;QACN8C,OAAA,EAASA,CAAA,KAAMlC,WAAA,CAAamC,IAAA,KAAUA,IAAA,GAAO,MAAM,GAAG;MAAA,CACxD,GACA,eAAA5C,GAAA,CAACT,MAAA;QACCe,IAAA,EAAK;QACLoC,IAAA,EAAM5C,SAAA;QACN6C,OAAA,EAASA,CAAA,KAAM;UACbvC,MAAA,CAAOyC,IAAA,CAAKC,MAAA,CAAO,CAAC,GACpBrC,WAAA,CAAY,CAAC;QACf;MAAA,CACF;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}
1
+ {"version":3,"names":["React","Button","Paragraph","Progress","Slider","XStack","YStack","Play","RotateCcw","Fragment","jsx","jsxs","ProgressDemo","key","setKey","useState","progress","setProgress","slider","setSlider","children","height","items","gap","opacity","value","bg","Indicator","transition","transform","overshootClamping","position","b","l","$xxs","display","size","width","min","max","step","onValueChange","val","Track","borderWidth","borderColor","TrackActive","Thumb","circular","index","icon","onPress","prev","Math","random"],"sources":["../../src/ProgressDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,OAAOA,KAAA,MAAW;AAClB,SAASC,MAAA,EAAQC,SAAA,EAAWC,QAAA,EAAUC,MAAA,EAAQC,MAAA,EAAQC,MAAA,QAAc;AACpE,SAASC,IAAA,EAAMC,SAAA,QAAiB;AAQ5B,SAAAC,QAAA,EAMMC,GAAA,EAJFC,IAAA,QAFJ;AANG,SAASC,aAAA,EAAe;EAC7B,MAAM,CAACC,GAAA,EAAKC,MAAM,IAAId,KAAA,CAAMe,QAAA,CAAS,CAAC;IAChC,CAACC,QAAA,EAAUC,WAAW,IAAIjB,KAAA,CAAMe,QAAA,CAAS,EAAE;IAC3C,CAACG,MAAA,EAAQC,SAAS,IAAInB,KAAA,CAAMe,QAAA,CAAmB,CAAC,EAAE,CAAC;EAEzD,OACE,eAAAJ,IAAA,CAAAF,QAAA;IACEW,QAAA,kBAAAT,IAAA,CAACL,MAAA;MAAOe,MAAA,EAAQ;MAAIC,KAAA,EAAM;MAASC,GAAA,EAAI;MACrCH,QAAA,kBAAAT,IAAA,CAACT,SAAA;QAAUmB,MAAA,EAAQ;QAAIG,OAAA,EAAS;QAAKJ,QAAA,iBACxBJ,QAAA;MAAA,CACb,GACA,eAAAN,GAAA,CAACP,QAAA;QAAmBsB,KAAA,EAAOT,QAAA;QAAUU,EAAA,EAAG;QACtCN,QAAA,iBAAAV,GAAA,CAACP,QAAA,CAASwB,SAAA,EAAT;UACCC,UAAA,EAAY,CACV,WACA;YACEC,SAAA,EAAW;cACTC,iBAAA,EAAmB;YACrB;UACF,EACF;UACAJ,EAAA,EAAG;QAAA,CACL;MAAA,GAXab,GAYf;IAAA,CACF,GAEA,eAAAF,IAAA,CAACN,MAAA;MACCiB,KAAA,EAAM;MACNC,GAAA,EAAI;MACJQ,QAAA,EAAS;MACTC,CAAA,EAAE;MACFC,CAAA,EAAE;MACFC,IAAA,EAAM;QAAEC,OAAA,EAAS;MAAO;MAExBf,QAAA,kBAAAT,IAAA,CAACP,MAAA;QACCgC,IAAA,EAAK;QACLC,KAAA,EAAO;QACPZ,KAAA,EAAOP,MAAA;QACPoB,GAAA,EAAK;QACLC,GAAA,EAAK;QACLC,IAAA,EAAM;QACNC,aAAA,EAAeA,CAAC,CAACC,GAAG,MAAM;UACxBzB,WAAA,CAAYyB,GAAG,GACfvB,SAAA,CAAU,CAACuB,GAAG,CAAC;QACjB;QAEAtB,QAAA,kBAAAV,GAAA,CAACN,MAAA,CAAOuC,KAAA,EAAP;UAAaC,WAAA,EAAa;UAAGC,WAAA,EAAY;UACxCzB,QAAA,iBAAAV,GAAA,CAACN,MAAA,CAAO0C,WAAA,EAAP,EAAmB;QAAA,CACtB,GACA,eAAApC,GAAA,CAACN,MAAA,CAAO2C,KAAA,EAAP;UAAaC,QAAA,EAAQ;UAACC,KAAA,EAAO;QAAA,CAAG;MAAA,CACnC,GAEA,eAAAvC,GAAA,CAACT,MAAA;QACCmC,IAAA,EAAK;QACLc,IAAA,EAAM3C,IAAA;QACN4C,OAAA,EAASA,CAAA,KAAMlC,WAAA,CAAamC,IAAA,KAAUA,IAAA,GAAO,MAAM,GAAG;MAAA,CACxD,GACA,eAAA1C,GAAA,CAACT,MAAA;QACCmC,IAAA,EAAK;QACLc,IAAA,EAAM1C,SAAA;QACN2C,OAAA,EAASA,CAAA,KAAM;UACbrC,MAAA,CAAOuC,IAAA,CAAKC,MAAA,CAAO,CAAC,GACpBrC,WAAA,CAAY,CAAC,GACbE,SAAA,CAAU,CAAC,CAAC,CAAC;QACf;MAAA,CACF;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}
@@ -4,17 +4,9 @@ import { Button, Paragraph, Progress, Slider, XStack, YStack } from "tamagui";
4
4
  import { Play, RotateCcw } from "@tamagui/lucide-icons";
5
5
  function ProgressDemo() {
6
6
  var [key, setKey] = React.useState(0),
7
- [size, setSize] = React.useState(4),
8
- [progress, setProgress] = React.useState(0),
9
- sizeProp = `$${size}`;
10
- return React.useEffect(function () {
11
- var timer = setTimeout(function () {
12
- return setProgress(60);
13
- }, 1e3);
14
- return function () {
15
- clearTimeout(timer);
16
- };
17
- }, []), /* @__PURE__ */_jsxs(_Fragment, {
7
+ [progress, setProgress] = React.useState(60),
8
+ [slider, setSlider] = React.useState([60]);
9
+ return /* @__PURE__ */_jsxs(_Fragment, {
18
10
  children: [/* @__PURE__ */_jsxs(YStack, {
19
11
  height: 60,
20
12
  items: "center",
@@ -22,12 +14,16 @@ function ProgressDemo() {
22
14
  children: [/* @__PURE__ */_jsxs(Paragraph, {
23
15
  height: 30,
24
16
  opacity: 0.5,
25
- children: ["Size: ", size]
17
+ children: ["Progress: ", progress]
26
18
  }), /* @__PURE__ */_jsx(Progress, {
27
- size: sizeProp,
28
19
  value: progress,
29
20
  bg: "$color5",
30
21
  children: /* @__PURE__ */_jsx(Progress.Indicator, {
22
+ transition: ["quicker", {
23
+ transform: {
24
+ overshootClamping: !0
25
+ }
26
+ }],
31
27
  bg: "$background"
32
28
  })
33
29
  }, key)]
@@ -43,13 +39,13 @@ function ProgressDemo() {
43
39
  children: [/* @__PURE__ */_jsxs(Slider, {
44
40
  size: "$2",
45
41
  width: 130,
46
- defaultValue: [0],
42
+ value: slider,
47
43
  min: 0,
48
44
  max: 100,
49
45
  step: 1,
50
46
  onValueChange: function (param) {
51
47
  var [val] = param;
52
- setProgress(val);
48
+ setProgress(val), setSlider([val]);
53
49
  },
54
50
  children: [/* @__PURE__ */_jsx(Slider.Track, {
55
51
  borderWidth: 1,
@@ -71,7 +67,7 @@ function ProgressDemo() {
71
67
  size: "$2",
72
68
  icon: RotateCcw,
73
69
  onPress: function () {
74
- setKey(Math.random()), setProgress(0);
70
+ setKey(Math.random()), setProgress(0), setSlider([0]);
75
71
  }
76
72
  })]
77
73
  })]
@@ -1 +1 @@
1
- {"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","React","Button","Paragraph","Progress","Slider","XStack","YStack","Play","RotateCcw","ProgressDemo","key","setKey","useState","size","setSize","progress","setProgress","sizeProp","useEffect","timer","setTimeout","clearTimeout","children","height","items","gap","opacity","value","bg","Indicator","position","b","l","$xxs","display","width","defaultValue","min","max","step","onValueChange","param","val","Track","borderWidth","borderColor","TrackActive","Thumb","circular","index"],"sources":["../../src/ProgressDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAOA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAElB,OAAAC,KAAS,MAAQ;AACjB,SAASC,MAAM,EAAAC,SAAA,EAAAC,QAAiB,EAAAC,MAAA,EAAAC,MAAA,EAAAC,MAAA;AAgB5B,SAAAC,IAAA,EAAAC,SAEI,+BAFJ;AAdG,SAASC,aAAA,EAAe;EAC7B,KAAAC,GAAO,EAAAC,MAAK,IAAMX,KAAI,CAAAY,QAAM,GAAS;IAAC,CAAAC,IAC/B,EAAAC,OAAM,IAAOd,KAAI,CAAAY,QAAM,GAAS;IAAC,CAAAG,QACjC,EAAAC,WAAU,IAAWhB,KAAI,CAAAY,QAAM,GAAS;IAACK,QAC1C,OAAWJ,IAAI,EAAI;EAEzB,OAAAb,KAAA,CAAMkB,SAAA,CAAU,YAAM;IACpB,IAAAC,KAAM,GAAAC,UAAQ,aAAiB;MAC/B,OAAOJ,WAAM;IACX;IACF;MACEK,YAGF,CAAAF,KAAA;IACE;EACE,uBAAAtB,KAAC,CAAAE,SAAU;IAA0BuB,QAAA,kBAC5BzB,KAAA,CAAAS,MAAA;MAAAiB,MACT;MACAC,KAAA;MAGFC,GAAA;MAEAH,QAAA,GAAC,eAAAzB,KAAA,CAAAK,SAAA;QAAAqB,MAAA;QACCG,OAAM;QACNJ,QAAI,GACJ,QAAS,EACPT,IAAA;MAEF,IAEA,eAAAlB,IAAA,CAAAQ,QAAA;QAAAU,IAAA,EAAAI,QAAA;QAACU,KAAA,EAAAZ,QAAA;QAAAa,EAAA;QAAAN,QACM,iBAAA3B,IAAA,CAAAQ,QAAA,CAAA0B,SAAA;UACLD,EAAA;QAAO;MACS,GAAAlB,GAChB;IACK,IACC,eACNb,KAAA,CAAAQ,MAAoB;MAClBmB,KAAA;MAAeC,GAAA,MACjB;MAAAK,QAEA;MAAAC,CAAA;MAEAC,CAAA;MACiCC,IAAA;QAAAC,OAAA;MAAA;MACnCZ,QAEA,kBAACzB,KAAA,CAAAO,MAAA;QAAAS,IAAA;QAAAsB,KACC,KAAK;QAAAC,YACC,GACN,EAAsD;QACxDC,GAAA;QACAC,GAAA;QAACC,IAAA;QAAAC,aAAA,WAAAA,CAAAC,KAAA;UACC,KAAAC,GAAK,IAAAD,KAAA;UACLzB,WAAM,CAAA0B,GAAA;QAAA;QAEJpB,QAAA,GAEF,eAAA3B,IAAA,CAAAS,MAAA,CAAAuC,KAAA;UAAAC,WAAA;UACFC,WAAA;UAAAvB,QAAA,iBAAA3B,IAAA,CAAAS,MAAA,CAAA0C,WAAA;QAAA,IACF,eAAAnD,IAAA,CAAAS,MAAA,CAAA2C,KAAA;UACFC,QAAA;UAEJC,KAAA","ignoreList":[]}
1
+ {"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","React","Button","Paragraph","Progress","Slider","XStack","YStack","Play","RotateCcw","ProgressDemo","key","setKey","useState","progress","setProgress","slider","setSlider","children","height","items","gap","opacity","value","bg","Indicator","transition","transform","overshootClamping","position","b","l","$xxs","display","size","width","min","max","step","onValueChange","param","val","Track","borderWidth","borderColor","TrackActive","Thumb","circular","index","icon"],"sources":["../../src/ProgressDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAOA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAClB,OAAAC,KAAS,MAAQ;AACjB,SAASC,MAAM,EAAAC,SAAA,EAAAC,QAAiB,EAAAC,MAAA,EAAAC,MAAA,EAAAC,MAAA;AAQ5B,SAAAC,IAAA,EAAAC,SAEI,+BAFJ;AANG,SAASC,aAAA,EAAe;EAC7B,KAAAC,GAAO,EAAAC,MAAK,IAAMX,KAAI,CAAAY,QAAM,GAAS;IAAC,CAAAC,QAC/B,EAAAC,WAAU,IAAWd,KAAI,CAAAY,QAAM,GAAS;IAAE,CAAAG,MAC1C,EAAAC,SAAQ,IAAShB,KAAI,CAAAY,QAAM,EAElC,GAEI;EACE,sBAAAf,KAAC,CAAAE,SAAU;IAA0BkB,QAAA,kBACxBpB,KAAA,CAAAS,MAAA;MAAAY,MACb;MACAC,KAAA;MACGC,GAAA,MAAS;MAATH,QAAA,GACC,eAAYpB,KAAA,CAAAK,SAAA;QACVgB,MAAA;QACAG,OAAA;QAAAJ,QACE,GAAW,YACT,EACFJ,QAAA;MAEJ,IACA,eAAGlB,IAAA,CAAAQ,QAAA;QAAAmB,KAAA,EAAAT,QAAA;QAVQU,EAYf;QACFN,QAAA,iBAAAtB,IAAA,CAAAQ,QAAA,CAAAqB,SAAA;UAEAC,UAAA,GAAC;YACOC,SAAA;cACFC,iBAAA;YACK;UACP,EACA;UACIJ,EAAE;QAER;MAAA,GAAAb,GAAA;IAAC,mBACMb,KAAA,CAAAQ,MAAA;MAAAc,KAAA,EACL,QAAO;MAAAC,GAAA,MACP;MAAOQ,QACP,YAAK;MAAAC,CAAA,MACL;MAAKC,CAAA,MACL;MAAMC,IAAA,EACN;QACEC,OAAA;MACe;MACjBf,QAEA,kBAAApB,KAAA,CAAAO,MAAC;QAED6B,IACA;QAAiCC,KAAA;QAAAZ,KAAA,EAAAP,MAAA;QACnCoB,GAAA;QAEAC,GAAA;QAACC,IAAA;QAAAC,aAAA,WAAAA,CAAAC,KAAA;UACC,KAAAC,GAAK,IAAAD,KAAA;UACLzB,WAAM,CAAA0B,GAAA,GAAAxB,SAAA,EACNwB,GAAA,CAAsD;QACxD;QACAvB,QAAA,GAAC,eAAAtB,IAAA,CAAAS,MAAA,CAAAqC,KAAA;UAAAC,WAAA;UACCC,WAAK;UACL1B,QAAM,iBAAAtB,IAAA,CAAAS,MAAA,CAAAwC,WAAA;QACN,IACE,eAAYjD,IAAA,CAAOS,MACnB,CAAAyC,KAAA;UAEFC,QAAA;UAAAC,KAAA;QACF;MAAA,IACF,eAAApD,IAAA,CAAAM,MAAA;QACFgC,IAAA;QAEJe,IAAA,EAAAzC,IAAA","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/demos",
3
- "version": "2.0.0-1768263318220",
3
+ "version": "2.0.0-1768326993354",
4
4
  "type": "module",
5
5
  "sideEffects": [
6
6
  "*.css"
@@ -50,45 +50,45 @@
50
50
  }
51
51
  },
52
52
  "dependencies": {
53
- "@tamagui/animate-presence": "2.0.0-1768263318220",
54
- "@tamagui/avatar": "2.0.0-1768263318220",
55
- "@tamagui/button": "2.0.0-1768263318220",
56
- "@tamagui/checkbox": "2.0.0-1768263318220",
57
- "@tamagui/checkbox-headless": "2.0.0-1768263318220",
58
- "@tamagui/config": "2.0.0-1768263318220",
59
- "@tamagui/context-menu": "2.0.0-1768263318220",
60
- "@tamagui/core": "2.0.0-1768263318220",
61
- "@tamagui/get-button-sized": "2.0.0-1768263318220",
62
- "@tamagui/image": "2.0.0-1768263318220",
63
- "@tamagui/input": "2.0.0-1768263318220",
64
- "@tamagui/linear-gradient": "2.0.0-1768263318220",
65
- "@tamagui/list-item": "2.0.0-1768263318220",
66
- "@tamagui/logo": "2.0.0-1768263318220",
67
- "@tamagui/lucide-icons": "2.0.0-1768263318220",
68
- "@tamagui/menu": "2.0.0-1768263318220",
69
- "@tamagui/popover": "2.0.0-1768263318220",
70
- "@tamagui/progress": "2.0.0-1768263318220",
71
- "@tamagui/radio-group": "2.0.0-1768263318220",
72
- "@tamagui/radio-headless": "2.0.0-1768263318220",
73
- "@tamagui/roving-focus": "2.0.0-1768263318220",
74
- "@tamagui/select": "2.0.0-1768263318220",
75
- "@tamagui/sheet": "2.0.0-1768263318220",
76
- "@tamagui/slider": "2.0.0-1768263318220",
77
- "@tamagui/stacks": "2.0.0-1768263318220",
78
- "@tamagui/switch": "2.0.0-1768263318220",
79
- "@tamagui/switch-headless": "2.0.0-1768263318220",
80
- "@tamagui/tabs": "2.0.0-1768263318220",
81
- "@tamagui/tamagui-dev-config": "2.0.0-1768263318220",
82
- "@tamagui/theme": "2.0.0-1768263318220",
83
- "@tamagui/toast": "2.0.0-1768263318220",
84
- "tamagui": "2.0.0-1768263318220"
53
+ "@tamagui/animate-presence": "2.0.0-1768326993354",
54
+ "@tamagui/avatar": "2.0.0-1768326993354",
55
+ "@tamagui/button": "2.0.0-1768326993354",
56
+ "@tamagui/checkbox": "2.0.0-1768326993354",
57
+ "@tamagui/checkbox-headless": "2.0.0-1768326993354",
58
+ "@tamagui/config": "2.0.0-1768326993354",
59
+ "@tamagui/context-menu": "2.0.0-1768326993354",
60
+ "@tamagui/core": "2.0.0-1768326993354",
61
+ "@tamagui/get-button-sized": "2.0.0-1768326993354",
62
+ "@tamagui/image": "2.0.0-1768326993354",
63
+ "@tamagui/input": "2.0.0-1768326993354",
64
+ "@tamagui/linear-gradient": "2.0.0-1768326993354",
65
+ "@tamagui/list-item": "2.0.0-1768326993354",
66
+ "@tamagui/logo": "2.0.0-1768326993354",
67
+ "@tamagui/lucide-icons": "2.0.0-1768326993354",
68
+ "@tamagui/menu": "2.0.0-1768326993354",
69
+ "@tamagui/popover": "2.0.0-1768326993354",
70
+ "@tamagui/progress": "2.0.0-1768326993354",
71
+ "@tamagui/radio-group": "2.0.0-1768326993354",
72
+ "@tamagui/radio-headless": "2.0.0-1768326993354",
73
+ "@tamagui/roving-focus": "2.0.0-1768326993354",
74
+ "@tamagui/select": "2.0.0-1768326993354",
75
+ "@tamagui/sheet": "2.0.0-1768326993354",
76
+ "@tamagui/slider": "2.0.0-1768326993354",
77
+ "@tamagui/stacks": "2.0.0-1768326993354",
78
+ "@tamagui/switch": "2.0.0-1768326993354",
79
+ "@tamagui/switch-headless": "2.0.0-1768326993354",
80
+ "@tamagui/tabs": "2.0.0-1768326993354",
81
+ "@tamagui/tamagui-dev-config": "2.0.0-1768326993354",
82
+ "@tamagui/theme": "2.0.0-1768326993354",
83
+ "@tamagui/toast": "2.0.0-1768326993354",
84
+ "tamagui": "2.0.0-1768326993354"
85
85
  },
86
86
  "peerDependencies": {
87
87
  "react": "*",
88
88
  "react-native": "*"
89
89
  },
90
90
  "devDependencies": {
91
- "@tamagui/build": "2.0.0-1768263318220",
91
+ "@tamagui/build": "2.0.0-1768326993354",
92
92
  "react": "*",
93
93
  "react-native": "0.81.5"
94
94
  },
@@ -1,29 +1,30 @@
1
1
  import React from 'react'
2
- import type { SizeTokens } from 'tamagui'
3
2
  import { Button, Paragraph, Progress, Slider, XStack, YStack } from 'tamagui'
4
3
  import { Play, RotateCcw } from '@tamagui/lucide-icons'
5
4
 
6
5
  export function ProgressDemo() {
7
6
  const [key, setKey] = React.useState(0)
8
- const [size, setSize] = React.useState(4)
9
- const [progress, setProgress] = React.useState(0)
10
- const sizeProp = `$${size}` as SizeTokens
11
-
12
- React.useEffect(() => {
13
- const timer = setTimeout(() => setProgress(60), 1000)
14
- return () => {
15
- clearTimeout(timer)
16
- }
17
- }, [])
7
+ const [progress, setProgress] = React.useState(60)
8
+ const [slider, setSlider] = React.useState<number[]>([60])
18
9
 
19
10
  return (
20
11
  <>
21
12
  <YStack height={60} items="center" gap="$4">
22
13
  <Paragraph height={30} opacity={0.5}>
23
- Size: {size}
14
+ Progress: {progress}
24
15
  </Paragraph>
25
- <Progress key={key} size={sizeProp} value={progress} bg="$color5">
26
- <Progress.Indicator bg="$background" />
16
+ <Progress key={key} value={progress} bg="$color5">
17
+ <Progress.Indicator
18
+ transition={[
19
+ 'quicker',
20
+ {
21
+ transform: {
22
+ overshootClamping: true,
23
+ },
24
+ },
25
+ ]}
26
+ bg="$background"
27
+ />
27
28
  </Progress>
28
29
  </YStack>
29
30
 
@@ -38,12 +39,13 @@ export function ProgressDemo() {
38
39
  <Slider
39
40
  size="$2"
40
41
  width={130}
41
- defaultValue={[0]}
42
+ value={slider}
42
43
  min={0}
43
44
  max={100}
44
45
  step={1}
45
46
  onValueChange={([val]) => {
46
47
  setProgress(val)
48
+ setSlider([val])
47
49
  }}
48
50
  >
49
51
  <Slider.Track borderWidth={1} borderColor="$color5">
@@ -63,6 +65,7 @@ export function ProgressDemo() {
63
65
  onPress={() => {
64
66
  setKey(Math.random())
65
67
  setProgress(0)
68
+ setSlider([0])
66
69
  }}
67
70
  />
68
71
  </XStack>