@willphan1712000/frontend 1.7.1 → 1.8.0

package/README.md

@@ -1,70 +1,323 @@
-<img style="width: 15%" src="./will.png">
+<img style="width: 15%" src="./will.png" alt="Will frontend package logo">
 
-## Frontend package developed by Will Phan that makes Fronted development easy with pre-built UI components
+# `@willphan1712000/frontend`
 
-## UI Components
-- DropdownSelect, type Options
-- RangeSlider
-- OptionSlider, type SliderOptions
-- ColorPickerSlider
-- MultiSelect
-- Button
-- Avatar
+Reusable React UI components and frontend utilities packaged for application development.
 
-## Utilities
-- Canvas
-- ImageUtilities
-- tools
-    - handleAsync
-    - textPreprocessing
-- Auth
-- Math
+## What this package includes
 
-## Technology
+### Components
+- `DropdownSelect`
+- `MultiSelect`
+- `RangeSlider`
+- `OptionSlider`
+- `ColorPickerSlider`
+- `Button`
+- `ModernButton`
+- `Avatar`
+- `InputGoogle`
+- `TextArea`
+- `InputFile`
+- `UploadImage`
+- `Image`
+- `ImageEditor`
 
-![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
+### Utilities
+- `Canvas`
+- `ImageUtilities`
+- `Transform`
+- `tools`
+- `LinearAlgebra`
+
+### Auth helpers
+- `useSession`
+- `SessionProvider`
+- `useAuthClient`
+- `AuthInterface`
+- `StorageInterface`
 
 ## Installation
 
-### Install from npm
+This package is intended for React applications.
+
+```bash
+npm install @willphan1712000/frontend
+```
+
+Make sure your app already has React and React DOM installed:
+
+```bash
+npm install react react-dom
+```
+
+## Quick start
+
+```tsx
+import { useState } from 'react';
+import {
+  DropdownSelect,
+  RangeSlider,
+  Button,
+  type Options,
+} from '@willphan1712000/frontend';
+
+const options: Options = [
+  { label: 'Low', value: 'low' },
+  { label: 'Medium', value: 'medium' },
+  { label: 'High', value: 'high' },
+];
+
+export default function Example() {
+  const [priority, setPriority] = useState('medium');
+  const [amount, setAmount] = useState('50');
+
+  return (
+    <div>
+      <DropdownSelect
+        options={options}
+        value={priority}
+        onChange={setPriority}
+      />
+
+      <RangeSlider
+        value={amount}
+        onChange={setAmount}
+        min="0"
+        max="100"
+        width="240"
+      />
+
+      <Button
+        buttonType="gradient"
+        content="Submit"
+        type="button"
+      />
+    </div>
+  );
+}
+```
+
+## Core component usage
+
+### `DropdownSelect`
+
+```tsx
+import { DropdownSelect, type Options } from '@willphan1712000/frontend';
 
-Run this command in your terminal (note: this assumes you have installed Nodejs)
+const options: Options = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Orange', value: 'orange' },
+];
+```
+
+Props:
+- `options: { label: string; value: string }[]`
+- `value: string`
+- `onChange: (value: string) => void`
+
+### `MultiSelect`
+
+```tsx
+import { useState } from 'react';
+import { MultiSelect } from '@willphan1712000/frontend';
+
+const options = [
+  { label: 'React', value: 'react' },
+  { label: 'TypeScript', value: 'typescript' },
+];
 
-```npm
-npm i @willphan1712000/frontend
+const [values, setValues] = useState<string[]>([]);
 ```
 
-## How to use Will-js
+Props:
+- `options: { label: string; value: string }[]`
+- `value: string[]`
+- `onChange: React.Dispatch<React.SetStateAction<string[]>>`
+- `width?: string`
+
+### `RangeSlider`
+
+Props:
+- `value: string`
+- `onChange: (value: string) => void`
+- `min?: string`
+- `max?: string`
+- `color?: string`
+- `width?: string`
+
+### `OptionSlider`
+
+The package exports `SliderOptions` for this component.
 
-[Go to my portfolio](https://will-five.vercel.app/w)
+Props:
+- `value: string`
+- `onChange: (value: string) => void`
+- `options: { label: ReactNode; value: string }[]`
+- `width?: string`
+- `color?: string`
 
-## Find a bug?
+### `ColorPickerSlider`
 
-If you found an issue or would like to submit an improvement to this project, please submit an issue using the issues tab above. If you would like to submit a Pull Request with a fix, reference the issue you created
+Props:
+- `value: string`
+- `onChange: (value: string) => void`
+- `width?: string`
 
-## Happy with this project and want to make a contribution
+### `Button`
 
-You can connect to me at [Facebook](https://www.facebook.com/phanthanhnha123200/) [Instagram](https://www.instagram.com/phanthanhnha_0117/)
+Supports:
+- `buttonType="normal"`
+- `buttonType="solid"`
+- `buttonType="gradient"`
+
+Additional styling props:
+- `content?: string`
+- `main?: string`
+- `text?: string`
+- `first?: string`
+- `second?: string`
+- `isLoading?: boolean`
+
+Also accepts normal button props such as `onClick`, `type`, `disabled`, and `style`.
+
+### `Avatar`
+
+`Avatar` combines image upload, preview, edit, and remove flows.
+
+```tsx
+import { useState } from 'react';
+import { Avatar } from '@willphan1712000/frontend';
+
+const [src, setSrc] = useState<string | undefined>(undefined);
+
+<Avatar
+  src={src}
+  setValue={setSrc}
+  options={{ defaultImage: '/images/default-avatar.png' }}
+/>;
+```
 
-You can make contributions to this project by adding new UI ideas that stand out so we can compete ones generated by AI.
+Props:
+- `src?: string`
+- `setValue: (src?: string) => void`
+- `options?: { defaultImage?: string }`
 
-To test a package, run
+## Auth usage
 
-```npm
+The auth helpers are designed around an auth client object that implements `AuthInterface`.
+
+```tsx
+import {
+  SessionProvider,
+  useAuthClient,
+  type AuthInterface,
+} from '@willphan1712000/frontend';
+
+class AuthClient implements AuthInterface {
+  getSignInUrl() {
+    return '/signin';
+  }
+
+  async signin() {}
+
+  async validate() {
+    return {
+      username: 'will',
+      email: 'will@example.com',
+      role: 'admin',
+    };
+  }
+
+  async signout() {}
+}
+
+const authClient = new AuthClient();
+
+function AppProviders({ children }: { children: React.ReactNode }) {
+  const session = useAuthClient(authClient);
+
+  return (
+    <SessionProvider value={session}>
+      {children}
+    </SessionProvider>
+  );
+}
+```
+
+`useAuthClient` returns:
+- `isLoading`
+- `session`
+- `auth`
+
+## Exported utilities
+
+```ts
+import {
+  Canvas,
+  ImageUtilities,
+  Transform,
+  tools,
+  LinearAlgebra,
+} from '@willphan1712000/frontend';
+```
+
+Included helpers:
+- `tools.handleAsync(...)`
+- `tools.textPreprocessing(...)`
+
+## Development
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Build the package:
+
+```bash
+npm run build
+```
+
+Run in watch mode during development:
+
+```bash
+npm run dev
+```
+
+## Local package testing with `npm link`
+
+Inside this package:
+
+```bash
 npm link
 ```
 
-On the other frontend environment, run
+Inside the app where you want to test it:
 
-```npm
+```bash
 npm link @willphan1712000/frontend
 ```
 
-> [!NOTE]
-> if you encounter the problem "3. You might have more than one copy of React in the same app?"
-> it means your application has loaded two different React instances. This breaks React Hooks, which rely on a single, shared state.
-> Run this to connect to react in your testing project
+If React reports multiple copies loaded, link the consumer app's React instance:
 
-```npm
+```bash
 npm link <path_to_your_testing_project>/node_modules/react
 ```
+
+## Notes
+
+- The package is built with `tsup`.
+- It ships CommonJS, ESM, and TypeScript declaration files.
+- Source code is written in TypeScript and React.
+
+## Contributing
+
+If you find a bug or want to improve the package, open an issue or submit a pull request.
+
+Portfolio:
+- [will-five.vercel.app](https://will-five.vercel.app/w)
+
+Contact:
+- [Facebook](https://www.facebook.com/phanthanhnha123200/)
+- [Instagram](https://www.instagram.com/phanthanhnha_0117/)

package/dist/index.d.mts

@@ -540,9 +540,20 @@ declare function handleAsync<DataType>(data: Promise<DataType>): Promise<HandleA
  */
 declare function textProcessing(text: string): string;
 
+/**
+ * Function creates and returns a unique UUID and store it in local storage
+ * @params key name
+ * @returns UUID
+ *
+ * @example
+ * const deviceId = getOrCreateUUID("deviceId")
+ */
+declare function getOrCreateUUID(key: string): string;
+
 declare const tools: {
     handleAsync: typeof handleAsync;
     textProcessing: typeof textProcessing;
+    getOrCreateUUID: typeof getOrCreateUUID;
 };
 
 /**

package/dist/index.d.ts

@@ -540,9 +540,20 @@ declare function handleAsync<DataType>(data: Promise<DataType>): Promise<HandleA
  */
 declare function textProcessing(text: string): string;
 
+/**
+ * Function creates and returns a unique UUID and store it in local storage
+ * @params key name
+ * @returns UUID
+ *
+ * @example
+ * const deviceId = getOrCreateUUID("deviceId")
+ */
+declare function getOrCreateUUID(key: string): string;
+
 declare const tools: {
     handleAsync: typeof handleAsync;
     textProcessing: typeof textProcessing;
+    getOrCreateUUID: typeof getOrCreateUUID;
 };
 
 /**

package/dist/index.js

@@ -1115,9 +1115,10 @@ var MultiSelect = ({ options, value, onChange, width = "200" }) => {
 var MultiSelect_default = MultiSelect;
 
 // src/components/Buttons/Button.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/Buttons/gradient/Gradient.tsx
+var import_react9 = require("react");
 var import_framer_motion = require("framer-motion");
 
 // src/components/Buttons/gradient/styles.ts
@@ -1127,7 +1128,7 @@ var styles6 = (first, second) => {
     container: {
       position: "relative",
       borderRadius,
-      padding: "3px"
+      padding: "1px"
     },
     btn: {
       position: "relative",
@@ -1138,9 +1139,10 @@ var styles6 = (first, second) => {
       padding: "2px",
       borderRadius,
       backgroundColor: `${first}`,
-      backgroundImage: `linear-gradient(43deg, ${first} 0%, ${second} 100%)`,
+      backgroundImage: `linear-gradient(${120}deg, ${first} 0%, ${second} 100%)`,
       border: "none",
-      cursor: "pointer"
+      cursor: "pointer",
+      width: "100%"
     },
     btnAfter: {
       position: "absolute",
@@ -1151,8 +1153,13 @@ var styles6 = (first, second) => {
       content: '""',
       zIndex: 0,
       backgroundColor: `${first}`,
-      backgroundImage: `linear-gradient(43deg, ${first} 0%, ${second} 100%)`,
-      filter: "blur(10px)"
+      backgroundImage: `linear-gradient(${120}deg, ${first} 0%, ${second} 100%)`,
+      filter: "blur(8px)",
+      borderRadius
+    },
+    labelWrapper: {
+      position: "relative",
+      width: "100%"
     },
     label: {
       backgroundColor: "#111723",
@@ -1186,16 +1193,6 @@ var styles6 = (first, second) => {
       position: "relative",
       zIndex: 1,
       margin: 0
-    },
-    neon: {
-      content: '""',
-      background: "conic-gradient(transparent 270deg, green, transparent)",
-      position: "absolute",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      aspectRatio: 1,
-      width: "100%"
     }
   };
   return styles12;
@@ -1207,54 +1204,43 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var Gradient = () => {
   const data = useButtonContext();
   const styles12 = styles_default6(data.first, data.second);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    "div",
-    {
-      style: __spreadProps(__spreadValues({}, styles12.container), {
-        overflow: data.isLoading ? "hidden" : ""
-      }),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles12.labelBefore }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "div",
-            {
-              style: __spreadProps(__spreadValues({}, styles12.label), {
-                backgroundColor: data.main
-              }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                "p",
-                {
-                  style: __spreadProps(__spreadValues({}, styles12.p), {
-                    color: `${data.text}`
-                  }),
-                  children: [
-                    data.children,
-                    " ",
-                    data.content
-                  ]
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles12.labelAfter })
-        ] }) })),
-        !data.isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles12.btnAfter }),
-        data.isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_framer_motion.motion.div,
-          {
-            style: styles12.btnAfter,
-            animate: { rotate: 360 },
-            transition: {
-              ease: "linear",
-              repeat: Infinity,
-              duration: 3
-            }
-          }
-        )
-      ]
+  const angle = (0, import_framer_motion.useMotionValue)(10);
+  const background2 = import_framer_motion.useMotionTemplate`conic-gradient(from ${angle}deg, #00000000 60%, ${data.first}, ${data.second})`;
+  (0, import_react9.useEffect)(() => {
+    if (data.isLoading) {
+      const controls = (0, import_framer_motion.animate)(angle, angle.get() + 360, {
+        repeat: Infinity,
+        duration: 2,
+        ease: "linear"
+      });
+      return controls.stop;
     }
-  );
+  }, [data.isLoading, angle]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: styles12.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: styles12.labelWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles12.labelBefore }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "div",
+        {
+          style: __spreadProps(__spreadValues({}, styles12.label), { backgroundColor: data.main }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { style: __spreadProps(__spreadValues({}, styles12.p), { color: `${data.text}` }), children: [
+            data.children,
+            " ",
+            data.content
+          ] })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles12.labelAfter })
+    ] }) })),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_framer_motion.motion.div,
+      {
+        style: __spreadProps(__spreadValues({}, styles12.btnAfter), {
+          background: background2
+        })
+      }
+    )
+  ] });
 };
 var Gradient_default = Gradient;
 
@@ -1367,9 +1353,9 @@ var Solid_default = Solid;
 
 // src/components/Buttons/Button.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var ButtonContext = (0, import_react9.createContext)(void 0);
+var ButtonContext = (0, import_react10.createContext)(void 0);
 function useButtonContext() {
-  const data = (0, import_react9.useContext)(ButtonContext);
+  const data = (0, import_react10.useContext)(ButtonContext);
   if (data === void 0) {
     throw new Error("Select Context is undefined");
   }
@@ -1440,7 +1426,7 @@ var Button = (_a) => {
 var Button_default = Button;
 
 // src/components/Buttons/modern/Modern.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/Buttons/modern/styles.ts
 var styles8 = (first) => {
@@ -1458,7 +1444,8 @@ var styles8 = (first) => {
       color: first,
       backgroundColor: `color-mix(in srgb, ${first} 20%, transparent)`,
       fontSize: "15px",
-      transition: "all .1s linear"
+      transition: "all .1s linear",
+      whiteSpace: "nowrap"
     }
   };
   return styles12;
@@ -1481,7 +1468,7 @@ var Modern = (_a) => {
     "hover",
     "shadow"
   ]);
-  const [isHover, setHover] = (0, import_react10.useState)(false);
+  const [isHover, setHover] = (0, import_react11.useState)(false);
   const handleEnter = () => {
     if (!hover) return;
     setHover(true);
@@ -1566,17 +1553,17 @@ var styles9 = {
 var styles_default9 = styles9;
 
 // src/components/Avatar/Avatar.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var Avatar = ({ src, setValue, options }) => {
-  const [isOpen, setOpen] = (0, import_react11.useState)(false);
-  const [isNew, setNew] = (0, import_react11.useState)(false);
-  const defaultImage = (0, import_react11.useRef)(void 0);
-  const initialImage = (0, import_react11.useRef)(void 0);
-  const uploadImageRef = (0, import_react11.useRef)(null);
+  const [isOpen, setOpen] = (0, import_react12.useState)(false);
+  const [isNew, setNew] = (0, import_react12.useState)(false);
+  const defaultImage = (0, import_react12.useRef)(void 0);
+  const initialImage = (0, import_react12.useRef)(void 0);
+  const uploadImageRef = (0, import_react12.useRef)(null);
   const isAbleToEdit = initialImage.current ? src !== defaultImage.current && src !== initialImage.current : false;
   const isAbleToRemove = initialImage.current ? src !== defaultImage.current : false;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     (function setSrc() {
       return __async(this, null, function* () {
         var _a, _b;
@@ -1657,7 +1644,7 @@ var Avatar = ({ src, setValue, options }) => {
 var Avatar_default = Avatar;
 
 // src/components/Input/InputGoogle/InputGoogle.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/Input/InputGoogle/InputGoogle.styles.ts
 var others2 = {
@@ -1669,7 +1656,7 @@ var others2 = {
   borderFocus: "#0957d0",
   textRelease: "#000",
   textFocus: "#0957d0",
-  border: "solid 2px"
+  border: "solid 1px"
 };
 var styles10 = {
   input: {
@@ -1713,9 +1700,9 @@ var InputGoogle = (_a) => {
     "label",
     "options"
   ]);
-  const [isFocus, setFocus] = (0, import_react12.useState)(false);
-  const spanRef = (0, import_react12.useRef)(null);
-  const inputRef = (0, import_react12.useRef)(null);
+  const [isFocus, setFocus] = (0, import_react13.useState)(false);
+  const spanRef = (0, import_react13.useRef)(null);
+  const inputRef = (0, import_react13.useRef)(null);
   function transitionOnFocus() {
     setFocus(true);
     if (spanRef.current) {
@@ -1737,7 +1724,7 @@ var InputGoogle = (_a) => {
   }
   const inputBorder = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
   const labelTextColor = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     transitionOnFocus();
     transitionOffFocus();
   }, []);
@@ -1774,7 +1761,7 @@ var InputGoogle = (_a) => {
 var InputGoogle_default = InputGoogle;
 
 // src/components/Input/TextArea/TextArea.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/Input/TextArea/TextArea.styles.ts
 var labelHeight = 20;
@@ -1787,7 +1774,7 @@ var others3 = {
   borderFocus: "#0957d0",
   textRelease: "#000",
   textFocus: "#0957d0",
-  border: "solid 2px"
+  border: "solid 1px"
 };
 var styles11 = {
   input: {
@@ -1834,9 +1821,9 @@ var TextArea = (_a) => {
     "label",
     "options"
   ]);
-  const [isFocus, setFocus] = (0, import_react13.useState)(false);
-  const spanRef = (0, import_react13.useRef)(null);
-  const inputRef = (0, import_react13.useRef)(null);
+  const [isFocus, setFocus] = (0, import_react14.useState)(false);
+  const spanRef = (0, import_react14.useRef)(null);
+  const inputRef = (0, import_react14.useRef)(null);
   function transitionOnFocus() {
     setFocus(true);
     if (spanRef.current) {
@@ -1858,7 +1845,7 @@ var TextArea = (_a) => {
   }
   const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
   const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     transitionOnFocus();
     transitionOffFocus();
   }, []);
@@ -1894,7 +1881,7 @@ var TextArea = (_a) => {
 var TextArea_default = TextArea;
 
 // src/components/Input/InputFile.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var InputFile = (_a) => {
   var _b = _a, {
@@ -1909,7 +1896,7 @@ var InputFile = (_a) => {
     "onCancel",
     "acceptType"
   ]);
-  const [key, setKey] = (0, import_react14.useState)(Date.now());
+  const [key, setKey] = (0, import_react15.useState)(Date.now());
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "input",
     __spreadValues({
@@ -1978,7 +1965,7 @@ var Image = (_a) => {
 var Image_default = Image;
 
 // src/components/Image/ImageEditor/ImageEditor.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/Image/ImageEditor/ImageEditor.styles.ts
 var imageEditorStyles = {
@@ -2397,13 +2384,13 @@ var WTouchEvent = class {
 };
 
 // src/components/Image/ImageEditor/MainElements/MainElements.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/Image/ImageEditor/context.ts
-var import_react15 = require("react");
-var MyContext3 = (0, import_react15.createContext)(void 0);
+var import_react16 = require("react");
+var MyContext3 = (0, import_react16.createContext)(void 0);
 function useMyContext3() {
-  const data = (0, import_react15.useContext)(MyContext3);
+  const data = (0, import_react16.useContext)(MyContext3);
   if (data === void 0) throw new Error("Context is undefined");
   return data;
 }
@@ -2534,11 +2521,11 @@ var MainElementStyles = {
 var MainElements_styles_default = MainElementStyles;
 
 // src/components/Image/ImageEditor/MainElements/Rotate.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_fa62 = require("react-icons/fa6");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var Rotate = () => {
-  const [rotate, setRotate] = (0, import_react16.useState)(false);
+  const [rotate, setRotate] = (0, import_react17.useState)(false);
   const { transformOperation: transformOperation2, refs } = useMyContext3();
   const mouseEvent = new WMouseEvent(transformOperation2);
   const touchEvent = new WTouchEvent(transformOperation2);
@@ -2546,7 +2533,7 @@ var Rotate = () => {
   const handleBackground = (value) => {
     return value ? MainElements_styles_default.buttonBackgroundDown : MainElements_styles_default.buttonBackground;
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const controller = new AbortController();
     const handler = () => {
       setRotate(false);
@@ -2649,16 +2636,16 @@ var MainElements = () => {
   } = useMyContext3();
   const mouseEvent = new WMouseEvent(transformOperation2);
   const touchEvent = new WTouchEvent(transformOperation2);
-  const [topLeft, settopLeft] = (0, import_react17.useState)(false);
-  const [topRight, settopRight] = (0, import_react17.useState)(false);
-  const [bottomLeft, setbottomLeft] = (0, import_react17.useState)(false);
-  const [bottomRight, setbottomRight] = (0, import_react17.useState)(false);
-  const [reRender, triggierReRender] = (0, import_react17.useState)(false);
+  const [topLeft, settopLeft] = (0, import_react18.useState)(false);
+  const [topRight, settopRight] = (0, import_react18.useState)(false);
+  const [bottomLeft, setbottomLeft] = (0, import_react18.useState)(false);
+  const [bottomRight, setbottomRight] = (0, import_react18.useState)(false);
+  const [reRender, triggierReRender] = (0, import_react18.useState)(false);
   const { angle, width, height } = transformOperation2.getDimension();
   const handleBackground = (value) => {
     return value ? MainElements_styles_default.buttonBackgroundDown : MainElements_styles_default.buttonBackground;
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const controller = new AbortController();
     const handler = () => {
       settopLeft(false);
@@ -2945,21 +2932,21 @@ var ImageEditor = ({
   },
   isNew = false
 }) => {
-  const container = (0, import_react18.useRef)(null);
-  const frame = (0, import_react18.useRef)(null);
-  const img = (0, import_react18.useRef)(null);
-  const controller = (0, import_react18.useRef)(null);
-  const topLeft = (0, import_react18.useRef)(null);
-  const topRight = (0, import_react18.useRef)(null);
-  const bottomLeft = (0, import_react18.useRef)(null);
-  const bottomRight = (0, import_react18.useRef)(null);
-  const rotate = (0, import_react18.useRef)(null);
-  const rotateBottom = (0, import_react18.useRef)(null);
-  const [transform, setTransform] = (0, import_react18.useState)(
+  const container = (0, import_react19.useRef)(null);
+  const frame = (0, import_react19.useRef)(null);
+  const img = (0, import_react19.useRef)(null);
+  const controller = (0, import_react19.useRef)(null);
+  const topLeft = (0, import_react19.useRef)(null);
+  const topRight = (0, import_react19.useRef)(null);
+  const bottomLeft = (0, import_react19.useRef)(null);
+  const bottomRight = (0, import_react19.useRef)(null);
+  const rotate = (0, import_react19.useRef)(null);
+  const rotateBottom = (0, import_react19.useRef)(null);
+  const [transform, setTransform] = (0, import_react19.useState)(
     void 0
   );
-  const transformState = (0, import_react18.useRef)(void 0);
-  const originalSrc = (0, import_react18.useMemo)(() => {
+  const transformState = (0, import_react19.useRef)(void 0);
+  const originalSrc = (0, import_react19.useMemo)(() => {
     transformState.current = void 0;
     return src;
   }, [isNew]);
@@ -3018,7 +3005,7 @@ var ImageEditor = ({
   function handleWindowScroll(isOpen2) {
     document.body.style.overflow = isOpen2 ? "hidden" : "auto";
   }
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     isOpen ? createTransform() : setTransform(void 0);
     handleWindowScroll(isOpen);
     return () => {
@@ -3544,20 +3531,36 @@ function textProcessing(text) {
   return newWords.join(" ");
 }
 
+// src/utilities/tools/UUID.ts
+function getOrCreateUUID(key) {
+  const STORAGE_KEY = key;
+  let deviceId = localStorage.getItem(STORAGE_KEY);
+  if (!deviceId) {
+    if (window.crypto && window.crypto.randomUUID) {
+      deviceId = window.crypto.randomUUID();
+    } else {
+      deviceId = "id-" + Math.random().toString(36).substring(2, 15) + Date.now().toString(36);
+    }
+    localStorage.setItem(STORAGE_KEY, deviceId);
+  }
+  return deviceId;
+}
+
 // src/utilities/tools/tools.ts
 var tools = {
   handleAsync: handleAsync_default,
-  textProcessing
+  textProcessing,
+  getOrCreateUUID
 };
 var tools_default = tools;
 
 // src/auth/react/context.tsx
-var import_react19 = require("react");
-var SessionContext = (0, import_react19.createContext)(
+var import_react20 = require("react");
+var SessionContext = (0, import_react20.createContext)(
   void 0
 );
 function useSession() {
-  const data = (0, import_react19.useContext)(SessionContext);
+  const data = (0, import_react20.useContext)(SessionContext);
   if (data === void 0) throw new Error("Session context is undefined");
   return data;
 }
@@ -3573,11 +3576,11 @@ var SessionProvider = ({
 var SessionProvider_default = SessionProvider;
 
 // src/auth/react/useAuthClient.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 var useAuthClient = (auth) => {
-  const [isLoading, setLoading] = (0, import_react20.useState)(false);
-  const sessionRef = (0, import_react20.useRef)(void 0);
-  (0, import_react20.useEffect)(() => {
+  const [isLoading, setLoading] = (0, import_react21.useState)(false);
+  const sessionRef = (0, import_react21.useRef)(void 0);
+  (0, import_react21.useEffect)(() => {
     let is = true;
     const getSession = () => __async(null, null, function* () {
       setLoading(true);

package/dist/index.mjs

@@ -1074,7 +1074,13 @@ var MultiSelect_default = MultiSelect;
 import { createContext as createContext3, useContext as useContext3 } from "react";
 
 // src/components/Buttons/gradient/Gradient.tsx
-import { motion } from "framer-motion";
+import { useEffect as useEffect7 } from "react";
+import {
+  motion,
+  useMotionValue,
+  useMotionTemplate,
+  animate
+} from "framer-motion";
 
 // src/components/Buttons/gradient/styles.ts
 var borderRadius = "20px";
@@ -1083,7 +1089,7 @@ var styles6 = (first, second) => {
     container: {
       position: "relative",
       borderRadius,
-      padding: "3px"
+      padding: "1px"
     },
     btn: {
       position: "relative",
@@ -1094,9 +1100,10 @@ var styles6 = (first, second) => {
       padding: "2px",
       borderRadius,
       backgroundColor: `${first}`,
-      backgroundImage: `linear-gradient(43deg, ${first} 0%, ${second} 100%)`,
+      backgroundImage: `linear-gradient(${120}deg, ${first} 0%, ${second} 100%)`,
       border: "none",
-      cursor: "pointer"
+      cursor: "pointer",
+      width: "100%"
     },
     btnAfter: {
       position: "absolute",
@@ -1107,8 +1114,13 @@ var styles6 = (first, second) => {
       content: '""',
       zIndex: 0,
       backgroundColor: `${first}`,
-      backgroundImage: `linear-gradient(43deg, ${first} 0%, ${second} 100%)`,
-      filter: "blur(10px)"
+      backgroundImage: `linear-gradient(${120}deg, ${first} 0%, ${second} 100%)`,
+      filter: "blur(8px)",
+      borderRadius
+    },
+    labelWrapper: {
+      position: "relative",
+      width: "100%"
     },
     label: {
       backgroundColor: "#111723",
@@ -1142,16 +1154,6 @@ var styles6 = (first, second) => {
       position: "relative",
       zIndex: 1,
       margin: 0
-    },
-    neon: {
-      content: '""',
-      background: "conic-gradient(transparent 270deg, green, transparent)",
-      position: "absolute",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      aspectRatio: 1,
-      width: "100%"
     }
   };
   return styles12;
@@ -1163,54 +1165,43 @@ import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var Gradient = () => {
   const data = useButtonContext();
   const styles12 = styles_default6(data.first, data.second);
-  return /* @__PURE__ */ jsxs8(
-    "div",
-    {
-      style: __spreadProps(__spreadValues({}, styles12.container), {
-        overflow: data.isLoading ? "hidden" : ""
-      }),
-      children: [
-        /* @__PURE__ */ jsx10("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsx10("div", { style: styles12.labelBefore }),
-          /* @__PURE__ */ jsx10(
-            "div",
-            {
-              style: __spreadProps(__spreadValues({}, styles12.label), {
-                backgroundColor: data.main
-              }),
-              children: /* @__PURE__ */ jsxs8(
-                "p",
-                {
-                  style: __spreadProps(__spreadValues({}, styles12.p), {
-                    color: `${data.text}`
-                  }),
-                  children: [
-                    data.children,
-                    " ",
-                    data.content
-                  ]
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx10("div", { style: styles12.labelAfter })
-        ] }) })),
-        !data.isLoading && /* @__PURE__ */ jsx10("div", { style: styles12.btnAfter }),
-        data.isLoading && /* @__PURE__ */ jsx10(
-          motion.div,
-          {
-            style: styles12.btnAfter,
-            animate: { rotate: 360 },
-            transition: {
-              ease: "linear",
-              repeat: Infinity,
-              duration: 3
-            }
-          }
-        )
-      ]
+  const angle = useMotionValue(10);
+  const background2 = useMotionTemplate`conic-gradient(from ${angle}deg, #00000000 60%, ${data.first}, ${data.second})`;
+  useEffect7(() => {
+    if (data.isLoading) {
+      const controls = animate(angle, angle.get() + 360, {
+        repeat: Infinity,
+        duration: 2,
+        ease: "linear"
+      });
+      return controls.stop;
     }
-  );
+  }, [data.isLoading, angle]);
+  return /* @__PURE__ */ jsxs8("div", { style: styles12.container, children: [
+    /* @__PURE__ */ jsx10("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ jsxs8("div", { style: styles12.labelWrapper, children: [
+      /* @__PURE__ */ jsx10("div", { style: styles12.labelBefore }),
+      /* @__PURE__ */ jsx10(
+        "div",
+        {
+          style: __spreadProps(__spreadValues({}, styles12.label), { backgroundColor: data.main }),
+          children: /* @__PURE__ */ jsxs8("p", { style: __spreadProps(__spreadValues({}, styles12.p), { color: `${data.text}` }), children: [
+            data.children,
+            " ",
+            data.content
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx10("div", { style: styles12.labelAfter })
+    ] }) })),
+    /* @__PURE__ */ jsx10(
+      motion.div,
+      {
+        style: __spreadProps(__spreadValues({}, styles12.btnAfter), {
+          background: background2
+        })
+      }
+    )
+  ] });
 };
 var Gradient_default = Gradient;
 
@@ -1414,7 +1405,8 @@ var styles8 = (first) => {
       color: first,
       backgroundColor: `color-mix(in srgb, ${first} 20%, transparent)`,
       fontSize: "15px",
-      transition: "all .1s linear"
+      transition: "all .1s linear",
+      whiteSpace: "nowrap"
     }
   };
   return styles12;
@@ -1522,7 +1514,7 @@ var styles9 = {
 var styles_default9 = styles9;
 
 // src/components/Avatar/Avatar.tsx
-import { useEffect as useEffect7, useRef as useRef7, useState as useState8 } from "react";
+import { useEffect as useEffect8, useRef as useRef7, useState as useState8 } from "react";
 import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var Avatar = ({ src, setValue, options }) => {
   const [isOpen, setOpen] = useState8(false);
@@ -1532,7 +1524,7 @@ var Avatar = ({ src, setValue, options }) => {
   const uploadImageRef = useRef7(null);
   const isAbleToEdit = initialImage.current ? src !== defaultImage.current && src !== initialImage.current : false;
   const isAbleToRemove = initialImage.current ? src !== defaultImage.current : false;
-  useEffect7(() => {
+  useEffect8(() => {
     (function setSrc() {
       return __async(this, null, function* () {
         var _a, _b;
@@ -1613,7 +1605,7 @@ var Avatar = ({ src, setValue, options }) => {
 var Avatar_default = Avatar;
 
 // src/components/Input/InputGoogle/InputGoogle.tsx
-import { useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
+import { useEffect as useEffect9, useRef as useRef8, useState as useState9 } from "react";
 
 // src/components/Input/InputGoogle/InputGoogle.styles.ts
 var others2 = {
@@ -1625,7 +1617,7 @@ var others2 = {
   borderFocus: "#0957d0",
   textRelease: "#000",
   textFocus: "#0957d0",
-  border: "solid 2px"
+  border: "solid 1px"
 };
 var styles10 = {
   input: {
@@ -1693,7 +1685,7 @@ var InputGoogle = (_a) => {
   }
   const inputBorder = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
   const labelTextColor = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
-  useEffect8(() => {
+  useEffect9(() => {
     transitionOnFocus();
     transitionOffFocus();
   }, []);
@@ -1730,7 +1722,7 @@ var InputGoogle = (_a) => {
 var InputGoogle_default = InputGoogle;
 
 // src/components/Input/TextArea/TextArea.tsx
-import { useEffect as useEffect9, useRef as useRef9, useState as useState10 } from "react";
+import { useEffect as useEffect10, useRef as useRef9, useState as useState10 } from "react";
 
 // src/components/Input/TextArea/TextArea.styles.ts
 var labelHeight = 20;
@@ -1743,7 +1735,7 @@ var others3 = {
   borderFocus: "#0957d0",
   textRelease: "#000",
   textFocus: "#0957d0",
-  border: "solid 2px"
+  border: "solid 1px"
 };
 var styles11 = {
   input: {
@@ -1814,7 +1806,7 @@ var TextArea = (_a) => {
   }
   const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
   const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
-  useEffect9(() => {
+  useEffect10(() => {
     transitionOnFocus();
     transitionOffFocus();
   }, []);
@@ -1934,7 +1926,7 @@ var Image = (_a) => {
 var Image_default = Image;
 
 // src/components/Image/ImageEditor/ImageEditor.tsx
-import { useEffect as useEffect12, useMemo, useRef as useRef10, useState as useState14 } from "react";
+import { useEffect as useEffect13, useMemo, useRef as useRef10, useState as useState14 } from "react";
 
 // src/components/Image/ImageEditor/ImageEditor.styles.ts
 var imageEditorStyles = {
@@ -2353,7 +2345,7 @@ var WTouchEvent = class {
 };
 
 // src/components/Image/ImageEditor/MainElements/MainElements.tsx
-import { useEffect as useEffect11, useState as useState13 } from "react";
+import { useEffect as useEffect12, useState as useState13 } from "react";
 
 // src/components/Image/ImageEditor/context.ts
 import { createContext as createContext4, useContext as useContext4 } from "react";
@@ -2490,7 +2482,7 @@ var MainElementStyles = {
 var MainElements_styles_default = MainElementStyles;
 
 // src/components/Image/ImageEditor/MainElements/Rotate.tsx
-import { useEffect as useEffect10, useState as useState12 } from "react";
+import { useEffect as useEffect11, useState as useState12 } from "react";
 import { FaArrowRotateLeft } from "react-icons/fa6";
 import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var Rotate = () => {
@@ -2502,7 +2494,7 @@ var Rotate = () => {
   const handleBackground = (value) => {
     return value ? MainElements_styles_default.buttonBackgroundDown : MainElements_styles_default.buttonBackground;
   };
-  useEffect10(() => {
+  useEffect11(() => {
     const controller = new AbortController();
     const handler = () => {
       setRotate(false);
@@ -2614,7 +2606,7 @@ var MainElements = () => {
   const handleBackground = (value) => {
     return value ? MainElements_styles_default.buttonBackgroundDown : MainElements_styles_default.buttonBackground;
   };
-  useEffect11(() => {
+  useEffect12(() => {
     const controller = new AbortController();
     const handler = () => {
       settopLeft(false);
@@ -2974,7 +2966,7 @@ var ImageEditor = ({
   function handleWindowScroll(isOpen2) {
     document.body.style.overflow = isOpen2 ? "hidden" : "auto";
   }
-  useEffect12(() => {
+  useEffect13(() => {
     isOpen ? createTransform() : setTransform(void 0);
     handleWindowScroll(isOpen);
     return () => {
@@ -3500,10 +3492,26 @@ function textProcessing(text) {
   return newWords.join(" ");
 }
 
+// src/utilities/tools/UUID.ts
+function getOrCreateUUID(key) {
+  const STORAGE_KEY = key;
+  let deviceId = localStorage.getItem(STORAGE_KEY);
+  if (!deviceId) {
+    if (window.crypto && window.crypto.randomUUID) {
+      deviceId = window.crypto.randomUUID();
+    } else {
+      deviceId = "id-" + Math.random().toString(36).substring(2, 15) + Date.now().toString(36);
+    }
+    localStorage.setItem(STORAGE_KEY, deviceId);
+  }
+  return deviceId;
+}
+
 // src/utilities/tools/tools.ts
 var tools = {
   handleAsync: handleAsync_default,
-  textProcessing
+  textProcessing,
+  getOrCreateUUID
 };
 var tools_default = tools;
 
@@ -3529,11 +3537,11 @@ var SessionProvider = ({
 var SessionProvider_default = SessionProvider;
 
 // src/auth/react/useAuthClient.ts
-import { useEffect as useEffect13, useRef as useRef11, useState as useState15 } from "react";
+import { useEffect as useEffect14, useRef as useRef11, useState as useState15 } from "react";
 var useAuthClient = (auth) => {
   const [isLoading, setLoading] = useState15(false);
   const sessionRef = useRef11(void 0);
-  useEffect13(() => {
+  useEffect14(() => {
     let is = true;
     const getSession = () => __async(null, null, function* () {
       setLoading(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@willphan1712000/frontend",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "Frontend Library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",