umwd-components 0.1.199 → 0.1.201

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.
Files changed (4) hide show
  1. package/dist/cjs/components/FluidBackground.js +27 -50
  2. package/dist/esm/components/FluidBackground.js +27 -50
  3. package/package.json +1 -1
  4. package/src/components/FluidBackground.tsx +32 -51
package/dist/cjs/components/FluidBackground.js CHANGED
@@ -10,6 +10,7 @@
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var React = require('react');
13
+ var material = require('@mui/material');
13
14
 
14
15
  function FluidBackground() {
15
16
  const [objectX, setObjectX] = React.useState(0);
@@ -17,30 +18,12 @@ function FluidBackground() {
17
18
  const [brightness, setBrightness] = React.useState(1);
18
19
  const maxBrightness = 1.5;
19
20
  const minBrightness = 0.5;
20
- const [ObjectSize, setObjectSize] = React.useState(0);
21
+ const [ObjectSize, setObjectSize] = React.useState(300);
21
22
  const [minSize, setMinSize] = React.useState(0);
22
23
  const [maxSize, setMaxSize] = React.useState(0);
24
+ const theme = material.useTheme();
25
+ const darkMode = Boolean(theme.palette.mode === "dark");
23
26
  let transitionInterval = null;
24
- React.useEffect(() => {
25
- setObjectX(window.innerWidth / 2);
26
- setObjectY(window.innerHeight / 2);
27
- setObjectSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
28
- setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
29
- setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
30
- }, []);
31
-
32
- // const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
33
- // const [objectY, setObjectY] = useState(window.innerHeight / 2);
34
- // const [brightness, setBrightness] = useState(1);
35
- // const maxBrightness = 1.5;
36
- // const minBrightness = 0.5;
37
- // const minSize =
38
- // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
39
- // const maxSize =
40
- // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
41
- // const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
42
- // let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
43
-
44
27
  const handleMove = (x, y) => {
45
28
  setObjectX(x);
46
29
  setObjectY(y);
@@ -101,47 +84,40 @@ function FluidBackground() {
101
84
  }
102
85
  }, stepDuration);
103
86
  };
104
-
105
- // Add event listeners to trigger handleEnd on touch end or mouse up
87
+ React.useEffect(() => {
88
+ setObjectX(window.innerWidth / 2);
89
+ setObjectY(window.innerHeight / 2);
90
+ setObjectSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
91
+ setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
92
+ setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
93
+ }, []);
106
94
  React.useEffect(() => {
107
95
  const handleEndEvent = () => {
108
96
  handleEnd();
109
97
  };
110
- window.addEventListener("touchend", handleEndEvent);
111
- window.addEventListener("mouseup", handleEndEvent);
112
- return () => {
113
- window.removeEventListener("touchend", handleEndEvent);
114
- window.removeEventListener("mouseup", handleEndEvent);
115
- };
116
- }, []);
117
-
118
- // Add event listeners to trigger handleStart on touch start or mouse down
119
- React.useEffect(() => {
120
98
  const handleStartEvent = () => {
121
99
  handleStart();
122
100
  };
123
- window.addEventListener("touchstart", handleStartEvent);
124
- window.addEventListener("mousedown", handleStartEvent);
125
- return () => {
126
- window.removeEventListener("touchstart", handleStartEvent);
127
- window.removeEventListener("mousedown", handleStartEvent);
128
- };
129
- }, []);
130
-
131
- // Add event listeners to trigger handleMove on touch move or mouse move
132
- React.useEffect(() => {
133
101
  const handleMoveEvent = e => {
134
102
  const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
135
103
  const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
136
104
  handleMove(x, y);
137
105
  };
106
+ window.addEventListener("touchend", handleEndEvent);
107
+ window.addEventListener("mouseup", handleEndEvent);
108
+ window.addEventListener("touchstart", handleStartEvent);
109
+ window.addEventListener("mousedown", handleStartEvent);
138
110
  window.addEventListener("touchmove", handleMoveEvent);
139
111
  window.addEventListener("mousemove", handleMoveEvent);
140
112
  return () => {
113
+ window.removeEventListener("touchend", handleEndEvent);
114
+ window.removeEventListener("mouseup", handleEndEvent);
115
+ window.removeEventListener("touchstart", handleStartEvent);
116
+ window.removeEventListener("mousedown", handleStartEvent);
141
117
  window.removeEventListener("touchmove", handleMoveEvent);
142
118
  window.removeEventListener("mousemove", handleMoveEvent);
143
119
  };
144
- }, []);
120
+ }, [minSize, maxSize]);
145
121
  return /*#__PURE__*/React.createElement("div", {
146
122
  style: {
147
123
  position: "fixed",
@@ -162,7 +138,7 @@ function FluidBackground() {
162
138
  display: "Block",
163
139
  width: "100%",
164
140
  height: "100%",
165
- background: "#2d2d2d",
141
+ background: darkMode ? "#2d2d2d" : "#fafafa",
166
142
  zIndex: -1
167
143
  }
168
144
  }), /*#__PURE__*/React.createElement("svg", {
@@ -197,7 +173,7 @@ function FluidBackground() {
197
173
  }))), /*#__PURE__*/React.createElement("rect", {
198
174
  width: "100%",
199
175
  height: "100%",
200
- fill: "#439392",
176
+ fill: theme.palette.primary.main,
201
177
  mask: "url(#radial-gradient-mask)",
202
178
  style: {
203
179
  filter: "brightness(".concat(brightness, ")")
@@ -205,10 +181,11 @@ function FluidBackground() {
205
181
  })), /*#__PURE__*/React.createElement("svg", {
206
182
  id: "foreground",
207
183
  style: {
208
- position: "absolute",
209
- minWidth: "100%",
210
- minHeight: "100%"
184
+ position: "absolute"
211
185
  },
186
+ preserveAspectRatio: "xMidYMid slice",
187
+ width: "100%",
188
+ height: "100%",
212
189
  viewBox: "0 0 7680 4320 "
213
190
  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("mask", {
214
191
  id: "mask"
@@ -273,7 +250,7 @@ function FluidBackground() {
273
250
  }, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React.createElement("rect", {
274
251
  width: "100%",
275
252
  height: "100%",
276
- fill: "#222",
253
+ fill: darkMode ? "#222" : "#fff",
277
254
  mask: "url(#mask)"
278
255
  })));
279
256
  }
package/dist/esm/components/FluidBackground.js CHANGED
@@ -6,6 +6,7 @@
6
6
  */
7
7
 
8
8
  import React__default, { useState, useEffect } from 'react';
9
+ import { useTheme } from '@mui/material';
9
10
 
10
11
  function FluidBackground() {
11
12
  const [objectX, setObjectX] = useState(0);
@@ -13,30 +14,12 @@ function FluidBackground() {
13
14
  const [brightness, setBrightness] = useState(1);
14
15
  const maxBrightness = 1.5;
15
16
  const minBrightness = 0.5;
16
- const [ObjectSize, setObjectSize] = useState(0);
17
+ const [ObjectSize, setObjectSize] = useState(300);
17
18
  const [minSize, setMinSize] = useState(0);
18
19
  const [maxSize, setMaxSize] = useState(0);
20
+ const theme = useTheme();
21
+ const darkMode = Boolean(theme.palette.mode === "dark");
19
22
  let transitionInterval = null;
20
- useEffect(() => {
21
- setObjectX(window.innerWidth / 2);
22
- setObjectY(window.innerHeight / 2);
23
- setObjectSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
24
- setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
25
- setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
26
- }, []);
27
-
28
- // const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
29
- // const [objectY, setObjectY] = useState(window.innerHeight / 2);
30
- // const [brightness, setBrightness] = useState(1);
31
- // const maxBrightness = 1.5;
32
- // const minBrightness = 0.5;
33
- // const minSize =
34
- // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
35
- // const maxSize =
36
- // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
37
- // const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
38
- // let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
39
-
40
23
  const handleMove = (x, y) => {
41
24
  setObjectX(x);
42
25
  setObjectY(y);
@@ -97,47 +80,40 @@ function FluidBackground() {
97
80
  }
98
81
  }, stepDuration);
99
82
  };
100
-
101
- // Add event listeners to trigger handleEnd on touch end or mouse up
83
+ useEffect(() => {
84
+ setObjectX(window.innerWidth / 2);
85
+ setObjectY(window.innerHeight / 2);
86
+ setObjectSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
87
+ setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
88
+ setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
89
+ }, []);
102
90
  useEffect(() => {
103
91
  const handleEndEvent = () => {
104
92
  handleEnd();
105
93
  };
106
- window.addEventListener("touchend", handleEndEvent);
107
- window.addEventListener("mouseup", handleEndEvent);
108
- return () => {
109
- window.removeEventListener("touchend", handleEndEvent);
110
- window.removeEventListener("mouseup", handleEndEvent);
111
- };
112
- }, []);
113
-
114
- // Add event listeners to trigger handleStart on touch start or mouse down
115
- useEffect(() => {
116
94
  const handleStartEvent = () => {
117
95
  handleStart();
118
96
  };
119
- window.addEventListener("touchstart", handleStartEvent);
120
- window.addEventListener("mousedown", handleStartEvent);
121
- return () => {
122
- window.removeEventListener("touchstart", handleStartEvent);
123
- window.removeEventListener("mousedown", handleStartEvent);
124
- };
125
- }, []);
126
-
127
- // Add event listeners to trigger handleMove on touch move or mouse move
128
- useEffect(() => {
129
97
  const handleMoveEvent = e => {
130
98
  const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
131
99
  const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
132
100
  handleMove(x, y);
133
101
  };
102
+ window.addEventListener("touchend", handleEndEvent);
103
+ window.addEventListener("mouseup", handleEndEvent);
104
+ window.addEventListener("touchstart", handleStartEvent);
105
+ window.addEventListener("mousedown", handleStartEvent);
134
106
  window.addEventListener("touchmove", handleMoveEvent);
135
107
  window.addEventListener("mousemove", handleMoveEvent);
136
108
  return () => {
109
+ window.removeEventListener("touchend", handleEndEvent);
110
+ window.removeEventListener("mouseup", handleEndEvent);
111
+ window.removeEventListener("touchstart", handleStartEvent);
112
+ window.removeEventListener("mousedown", handleStartEvent);
137
113
  window.removeEventListener("touchmove", handleMoveEvent);
138
114
  window.removeEventListener("mousemove", handleMoveEvent);
139
115
  };
140
- }, []);
116
+ }, [minSize, maxSize]);
141
117
  return /*#__PURE__*/React__default.createElement("div", {
142
118
  style: {
143
119
  position: "fixed",
@@ -158,7 +134,7 @@ function FluidBackground() {
158
134
  display: "Block",
159
135
  width: "100%",
160
136
  height: "100%",
161
- background: "#2d2d2d",
137
+ background: darkMode ? "#2d2d2d" : "#fafafa",
162
138
  zIndex: -1
163
139
  }
164
140
  }), /*#__PURE__*/React__default.createElement("svg", {
@@ -193,7 +169,7 @@ function FluidBackground() {
193
169
  }))), /*#__PURE__*/React__default.createElement("rect", {
194
170
  width: "100%",
195
171
  height: "100%",
196
- fill: "#439392",
172
+ fill: theme.palette.primary.main,
197
173
  mask: "url(#radial-gradient-mask)",
198
174
  style: {
199
175
  filter: "brightness(".concat(brightness, ")")
@@ -201,10 +177,11 @@ function FluidBackground() {
201
177
  })), /*#__PURE__*/React__default.createElement("svg", {
202
178
  id: "foreground",
203
179
  style: {
204
- position: "absolute",
205
- minWidth: "100%",
206
- minHeight: "100%"
180
+ position: "absolute"
207
181
  },
182
+ preserveAspectRatio: "xMidYMid slice",
183
+ width: "100%",
184
+ height: "100%",
208
185
  viewBox: "0 0 7680 4320 "
209
186
  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("mask", {
210
187
  id: "mask"
@@ -269,7 +246,7 @@ function FluidBackground() {
269
246
  }, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React__default.createElement("rect", {
270
247
  width: "100%",
271
248
  height: "100%",
272
- fill: "#222",
249
+ fill: darkMode ? "#222" : "#fff",
273
250
  mask: "url(#mask)"
274
251
  })));
275
252
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.199",
3
+ "version": "0.1.201",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/FluidBackground.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  "use client";
2
2
 
3
3
  import React, { useState, useEffect } from "react";
4
+ import { useTheme } from "@mui/material";
4
5
 
5
6
  function FluidBackground() {
6
7
  const [objectX, setObjectX] = useState(0);
@@ -8,33 +9,13 @@ function FluidBackground() {
8
9
  const [brightness, setBrightness] = useState(1);
9
10
  const maxBrightness = 1.5;
10
11
  const minBrightness = 0.5;
11
- const [ObjectSize, setObjectSize] = useState(0);
12
+ const [ObjectSize, setObjectSize] = useState(300);
12
13
  const [minSize, setMinSize] = useState(0);
13
14
  const [maxSize, setMaxSize] = useState(0);
15
+ const theme = useTheme();
16
+ const darkMode = Boolean(theme.palette.mode === "dark");
14
17
  let transitionInterval: NodeJS.Timeout | null = null;
15
18
 
16
- useEffect(() => {
17
- setObjectX(window.innerWidth / 2);
18
- setObjectY(window.innerHeight / 2);
19
- setObjectSize(
20
- Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2
21
- );
22
- setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
23
- setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
24
- }, []);
25
-
26
- // const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
27
- // const [objectY, setObjectY] = useState(window.innerHeight / 2);
28
- // const [brightness, setBrightness] = useState(1);
29
- // const maxBrightness = 1.5;
30
- // const minBrightness = 0.5;
31
- // const minSize =
32
- // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
33
- // const maxSize =
34
- // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
35
- // const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
36
- // let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
37
-
38
19
  const handleMove = (x: number, y: number) => {
39
20
  setObjectX(x);
40
21
  setObjectY(y);
@@ -104,52 +85,47 @@ function FluidBackground() {
104
85
  }, stepDuration);
105
86
  };
106
87
 
107
- // Add event listeners to trigger handleEnd on touch end or mouse up
88
+ useEffect(() => {
89
+ setObjectX(window.innerWidth / 2);
90
+ setObjectY(window.innerHeight / 2);
91
+ setObjectSize(
92
+ Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2
93
+ );
94
+ setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
95
+ setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
96
+ }, []);
97
+
108
98
  useEffect(() => {
109
99
  const handleEndEvent = () => {
110
100
  handleEnd();
111
101
  };
112
102
 
113
- window.addEventListener("touchend", handleEndEvent);
114
- window.addEventListener("mouseup", handleEndEvent);
115
-
116
- return () => {
117
- window.removeEventListener("touchend", handleEndEvent);
118
- window.removeEventListener("mouseup", handleEndEvent);
119
- };
120
- }, []);
121
-
122
- // Add event listeners to trigger handleStart on touch start or mouse down
123
- useEffect(() => {
124
103
  const handleStartEvent = () => {
125
104
  handleStart();
126
105
  };
127
106
 
128
- window.addEventListener("touchstart", handleStartEvent);
129
- window.addEventListener("mousedown", handleStartEvent);
130
-
131
- return () => {
132
- window.removeEventListener("touchstart", handleStartEvent);
133
- window.removeEventListener("mousedown", handleStartEvent);
134
- };
135
- }, []);
136
-
137
- // Add event listeners to trigger handleMove on touch move or mouse move
138
- useEffect(() => {
139
107
  const handleMoveEvent = (e: TouchEvent | MouseEvent) => {
140
108
  const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
141
109
  const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
142
110
  handleMove(x, y);
143
111
  };
144
112
 
113
+ window.addEventListener("touchend", handleEndEvent);
114
+ window.addEventListener("mouseup", handleEndEvent);
115
+ window.addEventListener("touchstart", handleStartEvent);
116
+ window.addEventListener("mousedown", handleStartEvent);
145
117
  window.addEventListener("touchmove", handleMoveEvent);
146
118
  window.addEventListener("mousemove", handleMoveEvent);
147
119
 
148
120
  return () => {
121
+ window.removeEventListener("touchend", handleEndEvent);
122
+ window.removeEventListener("mouseup", handleEndEvent);
123
+ window.removeEventListener("touchstart", handleStartEvent);
124
+ window.removeEventListener("mousedown", handleStartEvent);
149
125
  window.removeEventListener("touchmove", handleMoveEvent);
150
126
  window.removeEventListener("mousemove", handleMoveEvent);
151
127
  };
152
- }, []);
128
+ }, [minSize, maxSize]);
153
129
 
154
130
  return (
155
131
  <div
@@ -173,7 +149,7 @@ function FluidBackground() {
173
149
  display: "Block",
174
150
  width: "100%",
175
151
  height: "100%",
176
- background: "#2d2d2d",
152
+ background: darkMode ? "#2d2d2d" : "#fafafa",
177
153
  zIndex: -1,
178
154
  }}
179
155
  />
@@ -207,7 +183,7 @@ function FluidBackground() {
207
183
  <rect
208
184
  width="100%"
209
185
  height="100%"
210
- fill="#439392"
186
+ fill={theme.palette.primary.main}
211
187
  mask="url(#radial-gradient-mask)"
212
188
  style={{ filter: `brightness(${brightness})` }}
213
189
  />
@@ -215,7 +191,12 @@ function FluidBackground() {
215
191
 
216
192
  <svg
217
193
  id="foreground"
218
- style={{ position: "absolute", minWidth: "100%", minHeight: "100%" }}
194
+ style={{
195
+ position: "absolute",
196
+ }}
197
+ preserveAspectRatio="xMidYMid slice"
198
+ width="100%"
199
+ height="100%"
219
200
  viewBox="0 0 7680 4320 "
220
201
  >
221
202
  <defs>
@@ -282,7 +263,7 @@ function FluidBackground() {
282
263
  <rect
283
264
  width={"100%"}
284
265
  height={"100%"}
285
- fill="#222"
266
+ fill={darkMode ? "#222" : "#fff"}
286
267
  mask="url(#mask)"
287
268
  ></rect>
288
269
  </svg>