@oxyhq/services 0.0.54 → 0.0.55

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 (95) hide show
  1. package/dist/assets/dot-icon.d.ts +3 -0
  2. package/dist/assets/dot-icon.d.ts.map +1 -0
  3. package/dist/assets/dot-icon.js +6 -0
  4. package/dist/assets/verified-icon.d.ts +3 -0
  5. package/dist/assets/verified-icon.d.ts.map +1 -0
  6. package/dist/assets/verified-icon.js +10 -0
  7. package/dist/components/auth/AccountSwitcherModal.d.ts +5 -0
  8. package/dist/components/auth/AccountSwitcherModal.d.ts.map +1 -0
  9. package/dist/components/auth/AccountSwitcherModal.js +53 -0
  10. package/dist/components/auth/SessionOwnerButton.d.ts +3 -0
  11. package/dist/components/auth/SessionOwnerButton.d.ts.map +1 -0
  12. package/dist/components/auth/SessionOwnerButton.js +30 -0
  13. package/dist/components/auth/SignInButton.d.ts.map +1 -1
  14. package/dist/components/auth/SignInButton.js +6 -4
  15. package/dist/components/auth/styles/oavatar.module.css +34 -0
  16. package/dist/components/auth/styles/oavatar.module.css.map +1 -0
  17. package/dist/components/auth/styles/session-owner-modal.module.css +35 -0
  18. package/dist/components/auth/styles/session-owner-modal.module.css.map +1 -0
  19. package/dist/components/auth/styles/sign-in-button.module.css +30 -0
  20. package/dist/components/auth/styles/sign-in-button.module.css.map +1 -0
  21. package/dist/components/elements/button/components/button.d.ts +7 -0
  22. package/dist/components/elements/button/components/button.d.ts.map +1 -0
  23. package/dist/components/elements/button/components/button.js +6 -0
  24. package/dist/components/elements/button/components/styles/button.module.css +25 -0
  25. package/dist/components/elements/button/components/styles/button.module.css.map +1 -0
  26. package/dist/components/elements/button/index.d.ts +2 -0
  27. package/dist/components/elements/button/index.d.ts.map +1 -0
  28. package/dist/components/elements/button/index.js +1 -0
  29. package/dist/components/elements/ellipsis-wrapper/components/ellipsis-wrapper.d.ts +5 -0
  30. package/dist/components/elements/ellipsis-wrapper/components/ellipsis-wrapper.d.ts.map +1 -0
  31. package/dist/components/elements/ellipsis-wrapper/components/ellipsis-wrapper.js +4 -0
  32. package/dist/components/elements/ellipsis-wrapper/components/styles/ellipses-wrapper.module.css +11 -0
  33. package/dist/components/elements/ellipsis-wrapper/components/styles/ellipses-wrapper.module.css.map +1 -0
  34. package/dist/components/elements/ellipsis-wrapper/index.d.ts +2 -0
  35. package/dist/components/elements/ellipsis-wrapper/index.d.ts.map +1 -0
  36. package/dist/components/elements/ellipsis-wrapper/index.js +1 -0
  37. package/dist/components/elements/modal/components/confirmation-modal.d.ts +12 -0
  38. package/dist/components/elements/modal/components/confirmation-modal.d.ts.map +1 -0
  39. package/dist/components/elements/modal/components/confirmation-modal.js +21 -0
  40. package/dist/components/elements/modal/components/modal.d.ts +13 -0
  41. package/dist/components/elements/modal/components/modal.d.ts.map +1 -0
  42. package/dist/components/elements/modal/components/modal.js +111 -0
  43. package/dist/components/elements/modal/components/styles/confirmation-modal.module.css +105 -0
  44. package/dist/components/elements/modal/components/styles/confirmation-modal.module.css.map +1 -0
  45. package/dist/components/elements/modal/components/styles/modal.module.css +10 -0
  46. package/dist/components/elements/modal/components/styles/modal.module.css.map +1 -0
  47. package/dist/components/elements/modal/hooks/use-track-position.d.ts +5 -0
  48. package/dist/components/elements/modal/hooks/use-track-position.d.ts.map +1 -0
  49. package/dist/components/elements/modal/hooks/use-track-position.js +35 -0
  50. package/dist/components/elements/modal/index.d.ts +4 -0
  51. package/dist/components/elements/modal/index.d.ts.map +1 -0
  52. package/dist/components/elements/modal/index.js +3 -0
  53. package/dist/config/index.d.ts +1 -1
  54. package/dist/config/index.d.ts.map +1 -1
  55. package/dist/features/profile/components/avatar.d.ts +10 -0
  56. package/dist/features/profile/components/avatar.d.ts.map +1 -0
  57. package/dist/features/profile/components/avatar.js +7 -0
  58. package/dist/features/profile/components/styles/avatar.module.css +15 -0
  59. package/dist/features/profile/components/styles/avatar.module.css.map +1 -0
  60. package/dist/features/profile/components/styles/user-name.module.css +18 -0
  61. package/dist/features/profile/components/styles/user-name.module.css.map +1 -0
  62. package/dist/features/profile/components/styles/user-username.module.css +6 -0
  63. package/dist/features/profile/components/styles/user-username.module.css.map +1 -0
  64. package/dist/features/profile/components/user-name.d.ts +7 -0
  65. package/dist/features/profile/components/user-name.d.ts.map +1 -0
  66. package/dist/features/profile/components/user-name.js +8 -0
  67. package/dist/features/profile/components/user-username.d.ts +5 -0
  68. package/dist/features/profile/components/user-username.d.ts.map +1 -0
  69. package/dist/features/profile/components/user-username.js +7 -0
  70. package/dist/features/profile/index.d.ts +4 -0
  71. package/dist/features/profile/index.d.ts.map +1 -0
  72. package/dist/features/profile/index.js +3 -0
  73. package/dist/hooks/get-user.d.ts +2 -0
  74. package/dist/hooks/get-user.d.ts.map +1 -0
  75. package/dist/hooks/get-user.js +28 -0
  76. package/dist/hooks/getUserById.d.ts +2 -1
  77. package/dist/hooks/getUserById.d.ts.map +1 -1
  78. package/dist/hooks/getUserById.js +1 -1
  79. package/dist/hooks/use-user.d.ts +14 -0
  80. package/dist/hooks/use-user.d.ts.map +1 -0
  81. package/dist/hooks/use-user.js +8 -0
  82. package/dist/hooks/useOxySession.d.ts +1 -1
  83. package/dist/hooks/useOxySession.d.ts.map +1 -1
  84. package/dist/index.css +5 -0
  85. package/dist/index.css.map +1 -0
  86. package/dist/index.d.ts +3 -1
  87. package/dist/index.d.ts.map +1 -1
  88. package/dist/index.js +3 -1
  89. package/dist/interfaces/index.d.ts +10 -0
  90. package/dist/interfaces/index.d.ts.map +1 -0
  91. package/dist/interfaces/index.js +1 -0
  92. package/dist/utils/cn.d.ts +3 -0
  93. package/dist/utils/cn.d.ts.map +1 -0
  94. package/dist/utils/cn.js +5 -0
  95. package/package.json +3 -3
@@ -0,0 +1,3 @@
1
+ import * as React from "react";
2
+ export declare const DotIcon: () => React.JSX.Element;
3
+ //# sourceMappingURL=dot-icon.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dot-icon.d.ts","sourceRoot":"","sources":["../../src/assets/dot-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,OAAO,yBAQnB,CAAC"}
@@ -0,0 +1,6 @@
1
+ import * as React from "react";
2
+ export const DotIcon = () => {
3
+ return (React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" },
4
+ React.createElement("g", null,
5
+ React.createElement("path", { d: "M3 12c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9 2c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm7 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" }))));
6
+ };
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ export declare const VerifiedIcon: () => React.JSX.Element;
3
+ //# sourceMappingURL=verified-icon.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"verified-icon.d.ts","sourceRoot":"","sources":["../../src/assets/verified-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,eAAO,MAAM,YAAY,yBAiBxB,CAAC"}
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ export const VerifiedIcon = () => {
3
+ return (React.createElement("svg", { style: {
4
+ fill: "var(--clr-primary)",
5
+ height: "var(--verified-icon-width)",
6
+ marginLeft: "2px",
7
+ }, viewBox: "0 0 24 24", "aria-label": "Verified account", role: "img" },
8
+ React.createElement("g", null,
9
+ React.createElement("path", { d: "M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z" }))));
10
+ };
@@ -0,0 +1,5 @@
1
+ import * as React from "react";
2
+ export declare const AccountSwitcherModal: React.ForwardRefExoticComponent<{
3
+ onClose: () => void;
4
+ } & React.RefAttributes<HTMLButtonElement>>;
5
+ //# sourceMappingURL=AccountSwitcherModal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AccountSwitcherModal.d.ts","sourceRoot":"","sources":["../../../src/components/auth/AccountSwitcherModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyB/B,eAAO,MAAM,oBAAoB;aAEpB,MAAM,IAAI;2CAkErB,CAAC"}
@@ -0,0 +1,53 @@
1
+ "use client";
2
+ import * as React from "react";
3
+ import { useEffect, useState } from "react";
4
+ import { motion } from "framer-motion";
5
+ import useOxySession from "../../hooks/useOxySession";
6
+ import { forwardRef } from "react";
7
+ import { HiOutlinePlus } from "react-icons/hi";
8
+ import { PiSignOutBold } from "react-icons/pi";
9
+ import { AiOutlineClose } from "react-icons/ai";
10
+ import { Avatar } from "../../features/profile";
11
+ import getUserById from "../../hooks/getUserById";
12
+ export const AccountSwitcherModal = forwardRef(({ onClose }, ref) => {
13
+ const { session } = useOxySession();
14
+ const [user, setUser] = useState(null);
15
+ useEffect(() => {
16
+ const fetchUser = async () => {
17
+ const fetchedUser = await getUserById(session?.user?.id);
18
+ setUser(fetchedUser);
19
+ };
20
+ if (session) {
21
+ fetchUser();
22
+ }
23
+ }, [session]);
24
+ if (!session)
25
+ return null;
26
+ return (React.createElement(motion.div, { initial: { opacity: 0, y: "100%" }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: "100%" }, transition: {
27
+ ease: "easeInOut",
28
+ duration: 0.2,
29
+ }, className: "fixed m-auto top-0 bottom-0 left-0 right-0 w-fit h-fit z-10 flex flex-col items-center justify-center\n space-y-3 rounded-3xl bg-indigo-50 px-5 py-3 text-sm font-medium text-zinc-700\n shadow-md shadow-[#b4bebb]", role: "group" },
30
+ React.createElement("button", { className: "absolute right-3 top-3 rounded-full bg-indigo-50 p-1 hover:bg-zinc-200" },
31
+ React.createElement(AiOutlineClose, { className: "h-5 w-5 rounded-full stroke-2 text-zinc-700" })),
32
+ React.createElement("p", null, session?.user?.email),
33
+ React.createElement("div", { className: "h-20 w-20 rounded-full border" },
34
+ React.createElement(Avatar, { userImage: session?.user?.avatar, className: "h-full w-full rounded-full object-center", draggable: false, alt: "avatar" })),
35
+ React.createElement("h2", { className: "md:text-2xl text-xl font-normal" },
36
+ "Hi, ",
37
+ session?.user?.name,
38
+ "!"),
39
+ React.createElement("button", { className: "rounded-full border border-black px-7 py-2 text-blue-500 hover:bg-[#d3dfee]" }, "Manage your Oxy Account"),
40
+ React.createElement("div", { className: "flex space-x-1" },
41
+ React.createElement("button", { className: "md:w-44 flex w-36 items-center space-x-2 rounded-l-full bg-white py-3 pl-3 hover:bg-zinc-200" },
42
+ React.createElement(HiOutlinePlus, { className: "h-7 w-7 rounded-full bg-indigo-50 p-1 text-blue-500" }),
43
+ React.createElement("span", null, "Add account")),
44
+ React.createElement("button", { className: "md:w-44 flex w-36 items-center space-x-2 rounded-r-full bg-white py-3 pl-3 hover:bg-zinc-200" },
45
+ React.createElement(PiSignOutBold, { className: "h-6 w-6" }),
46
+ React.createElement("span", null, "Sign out"))),
47
+ React.createElement("div", { className: "flex h-10 items-center space-x-2 text-xs" },
48
+ React.createElement("span", null, "Privacy policy"),
49
+ React.createElement("span", { className: "-mt-[3px]" }, " . "),
50
+ " ",
51
+ React.createElement("span", null, "Terms of service"))));
52
+ });
53
+ AccountSwitcherModal.displayName = "AccountSwitcherModal";
@@ -0,0 +1,3 @@
1
+ import * as React from "react";
2
+ export declare const SessionOwnerButton: () => React.JSX.Element;
3
+ //# sourceMappingURL=SessionOwnerButton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SessionOwnerButton.d.ts","sourceRoot":"","sources":["../../../src/components/auth/SessionOwnerButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,eAAO,MAAM,kBAAkB,yBAmD9B,CAAC"}
@@ -0,0 +1,30 @@
1
+ "use client";
2
+ import * as React from "react";
3
+ import { AnimatePresence } from "framer-motion";
4
+ import useOxySession from "../../hooks/useOxySession";
5
+ import { useRef, useState } from "react";
6
+ import { DotIcon } from "../../assets/dot-icon";
7
+ import { Button } from "../../components/elements/button";
8
+ import { EllipsisWrapper } from "../../components/elements/ellipsis-wrapper";
9
+ import { Modal } from "../../components/elements/modal";
10
+ import { Avatar, UserName, UserUsername } from "../../features/profile";
11
+ import { AccountSwitcherModal } from "./AccountSwitcherModal";
12
+ export const SessionOwnerButton = () => {
13
+ const { session } = useOxySession();
14
+ const [isModalOpen, setIsModalOpen] = useState(false);
15
+ const buttonRef = useRef(null);
16
+ const openModal = () => {
17
+ setIsModalOpen(true);
18
+ };
19
+ return (React.createElement(React.Fragment, null,
20
+ React.createElement(Button, { "aria-label": "Account menu", onClick: openModal, ref: buttonRef, "aria-haspopup": "menu", "aria-expanded": isModalOpen, className: "p-[0.75em] hover:bg-neutral-500 focus-visible:bg-neutral-500 focus-visible:outline-secondary-100 active:bg-neutral-600 xxl:flex xxl:w-full xxl:gap-3" },
21
+ React.createElement(Avatar, { userImage: session?.user?.avatar }),
22
+ React.createElement("div", { className: "hidden flex-1 flex-col xxl:flex" },
23
+ React.createElement(UserName, { name: session?.user?.name, isVerified: session?.user?.verified }),
24
+ React.createElement(EllipsisWrapper, null,
25
+ React.createElement(UserUsername, { username: session?.user?.username }))),
26
+ React.createElement("div", { className: "hidden fill-secondary-100 xxl:inline [&>svg]:size-h2" },
27
+ React.createElement(DotIcon, null))),
28
+ React.createElement(AnimatePresence, null, isModalOpen && (React.createElement(Modal, { onClose: () => setIsModalOpen(false), background: "none", minViewportWidth: 500 },
29
+ React.createElement(AccountSwitcherModal, { ref: buttonRef, onClose: () => setIsModalOpen(false) }))))));
30
+ };
@@ -1 +1 @@
1
- {"version":3,"file":"SignInButton.d.ts","sourceRoot":"","sources":["../../../src/components/auth/SignInButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,YAAY,8BAItB;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,sBAcA,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"SignInButton.d.ts","sourceRoot":"","sources":["../../../src/components/auth/SignInButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,YAAY,8BAItB;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,sBAgBA,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -1,10 +1,12 @@
1
1
  import React from "react";
2
- import styles from "./sign-in-button.module.css";
2
+ import styles from "./styles/sign-in-button.module.css";
3
3
  import { OxyLogo } from "../assets/oxy-logo";
4
- export const SignInButton = ({ icon = React.createElement(OxyLogo, null), text = "Sign in with Oxy", callback = window.location.href, }) => {
4
+ export const SignInButton = ({ icon = React.createElement(OxyLogo, null), text = "Sign in with Oxy", callback = typeof window !== "undefined" ? window.location.href : "", }) => {
5
5
  const onClick = () => {
6
- const redirectUrl = `https://auth.oxy.so/?callback=${encodeURIComponent(callback)}`;
7
- window.location.href = redirectUrl;
6
+ if (typeof window !== "undefined") {
7
+ const redirectUrl = `https://auth.oxy.so/?callback=${encodeURIComponent(callback)}`;
8
+ window.location.href = redirectUrl;
9
+ }
8
10
  };
9
11
  return (React.createElement("button", { onClick: onClick, className: styles.container },
10
12
  icon && icon,
@@ -0,0 +1,34 @@
1
+ .oavatar {
2
+ width: 2rem;
3
+ height: 2rem;
4
+ padding: 0.7em;
5
+ border-radius: 100vmax;
6
+ font-size: var(--fs-milli);
7
+ font-weight: var(--fw-700);
8
+ color: var(--clr-dark);
9
+ background-color: var(--clr-light);
10
+ border: 1px solid var(--clr-auth-border);
11
+ display: flex;
12
+ justify-content: center;
13
+ align-items: center;
14
+ cursor: pointer;
15
+ transition: background 0.2s ease-in-out;
16
+ }
17
+ .oavatar:hover {
18
+ background-color: var(--clr-auth-button-hover);
19
+ }
20
+ .oavatar:active {
21
+ background-color: var(--clr-auth-button-active);
22
+ }
23
+ .oavatar:focus-visible {
24
+ outline: 2px solid var(--clr-light);
25
+ background-color: var(--clr-auth-button-hover);
26
+ }
27
+ .oavatar svg {
28
+ width: var(--fs-h2);
29
+ height: var(--fs-h2);
30
+ fill: var(--clr-dark);
31
+ margin-right: 0.5em;
32
+ }
33
+
34
+ /*# sourceMappingURL=oavatar.module.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../../src/components/auth/styles/oavatar.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA","file":"oavatar.module.css"}
@@ -0,0 +1,35 @@
1
+ .container {
2
+ width: 300px;
3
+ background-color: var(--clr-background);
4
+ box-shadow: 0 0rem 10px -2px var(--clr-tertiary);
5
+ border-radius: 1rem;
6
+ padding: 0.8em 0;
7
+ overflow: hidden;
8
+ position: fixed;
9
+ top: 0;
10
+ bottom: 0;
11
+ left: 0;
12
+ right: 0;
13
+ margin: auto;
14
+ }
15
+ .container a {
16
+ font-size: var(--fs-milli);
17
+ font-weight: var(--fw-700);
18
+ display: block;
19
+ padding: 0.8em 1em;
20
+ cursor: pointer;
21
+ transition: background-color 0.1s ease-in-out;
22
+ }
23
+ .container a:hover {
24
+ background-color: var(--clr-trends-hover);
25
+ }
26
+ .container a:active {
27
+ background-color: var(--clr-trends-active);
28
+ }
29
+ .container a:focus-visible {
30
+ background-color: var(--clr-trends-hover);
31
+ outline: 2px solid var(--clr-primary-disabled);
32
+ outline-offset: -2px;
33
+ }
34
+
35
+ /*# sourceMappingURL=session-owner-modal.module.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../../src/components/auth/styles/session-owner-modal.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA","file":"session-owner-modal.module.css"}
@@ -0,0 +1,30 @@
1
+ .container {
2
+ width: 100%;
3
+ padding: 0.7em;
4
+ border-radius: 100vmax;
5
+ background-color: var(--clr-light);
6
+ border: 1px solid var(--clr-auth-border);
7
+ display: flex;
8
+ justify-content: center;
9
+ align-items: center;
10
+ cursor: pointer;
11
+ transition: background 0.2s ease-in-out;
12
+ }
13
+ .container:hover {
14
+ background-color: var(--clr-auth-button-hover);
15
+ }
16
+ .container:active {
17
+ background-color: var(--clr-auth-button-active);
18
+ }
19
+ .container:focus-visible {
20
+ outline: 2px solid var(--clr-light);
21
+ background-color: var(--clr-auth-button-hover);
22
+ }
23
+ .container svg {
24
+ width: var(--fs-h2);
25
+ height: var(--fs-h2);
26
+ fill: var(--clr-dark);
27
+ margin-right: 0.5em;
28
+ }
29
+
30
+ /*# sourceMappingURL=sign-in-button.module.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../../src/components/auth/styles/sign-in-button.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA","file":"sign-in-button.module.css"}
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
3
+ children: React.ReactNode;
4
+ }
5
+ export declare const Button: React.ForwardRefExoticComponent<IButton & React.RefAttributes<HTMLButtonElement>>;
6
+ export {};
7
+ //# sourceMappingURL=button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/components/elements/button/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,OAAQ,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,mFAoBlB,CAAC"}
@@ -0,0 +1,6 @@
1
+ import React, { forwardRef } from "react";
2
+ import { cn } from "../../../../utils/cn";
3
+ export const Button = forwardRef(({ children, className, ...props }, ref) => {
4
+ return (React.createElement("button", { ref: ref, ...props, className: cn("grid cursor-pointer place-items-center rounded-full", "transition-colors duration-200 ease-in-out", "fill-secondary-100 p-[0.5em]", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-100", "fill-secondary-100 [&>svg]:w-h2", "disabled-button", className) }, children));
5
+ });
6
+ Button.displayName = "Button";
@@ -0,0 +1,25 @@
1
+ .container {
2
+ cursor: pointer;
3
+ display: grid;
4
+ place-items: center;
5
+ padding: 0.5em;
6
+ border-radius: 100vmax;
7
+ transition: background-color 0.15s ease-in-out;
8
+ }
9
+ .container svg {
10
+ width: var(--fs-h2);
11
+ height: var(--fs-h2);
12
+ fill: var(--clr-secondary);
13
+ }
14
+ .container:hover {
15
+ background-color: var(--clr-nav-hover);
16
+ }
17
+ .container:active {
18
+ background-color: var(--clr-nav-active);
19
+ }
20
+ .container:focus-visible {
21
+ outline: 2px solid var(--clr-secondary);
22
+ background-color: var(--clr-nav-hover);
23
+ }
24
+
25
+ /*# sourceMappingURL=button.module.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../../src/components/elements/button/components/styles/button.module.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA","file":"button.module.css"}
@@ -0,0 +1,2 @@
1
+ export { Button } from "./components/button";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/elements/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC"}
@@ -0,0 +1 @@
1
+ export { Button } from "./components/button";
@@ -0,0 +1,5 @@
1
+ import React from "react";
2
+ export declare const EllipsisWrapper: ({ children, }: {
3
+ children: React.ReactNode;
4
+ }) => React.JSX.Element;
5
+ //# sourceMappingURL=ellipsis-wrapper.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ellipsis-wrapper.d.ts","sourceRoot":"","sources":["../../../../../src/components/elements/ellipsis-wrapper/components/ellipsis-wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,eAAe,kBAEzB;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBAUA,CAAC"}
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ export const EllipsisWrapper = ({ children, }) => {
3
+ return (React.createElement("div", { "aria-hidden": true, role: "presentation", className: "grid grid-flow-col [&>*]:truncate" }, children));
4
+ };
@@ -0,0 +1,11 @@
1
+ .container {
2
+ display: grid;
3
+ grid-auto-flow: column;
4
+ }
5
+ .container * {
6
+ white-space: nowrap;
7
+ text-overflow: ellipsis;
8
+ overflow: hidden;
9
+ }
10
+
11
+ /*# sourceMappingURL=ellipses-wrapper.module.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../../src/components/elements/ellipsis-wrapper/components/styles/ellipses-wrapper.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAEA;EACE;EACA;EACA","file":"ellipses-wrapper.module.css"}
@@ -0,0 +1,2 @@
1
+ export * from "./components/ellipsis-wrapper";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/elements/ellipsis-wrapper/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
@@ -0,0 +1 @@
1
+ export * from "./components/ellipsis-wrapper";
@@ -0,0 +1,12 @@
1
+ import React from "react";
2
+ export declare const ConfirmationModal: ({ heading, paragraph, confirmButtonText, confirmButtonClick, confirmButtonStyle, cancelButtonText, cancelButtonClick, logo, }: {
3
+ heading: string;
4
+ paragraph: string;
5
+ confirmButtonText: string;
6
+ confirmButtonClick: () => void;
7
+ confirmButtonStyle: "delete" | "unfollow" | "logout";
8
+ cancelButtonText: string;
9
+ cancelButtonClick: () => void;
10
+ logo?: React.ReactNode;
11
+ }) => React.JSX.Element;
12
+ //# sourceMappingURL=confirmation-modal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"confirmation-modal.d.ts","sourceRoot":"","sources":["../../../../../src/components/elements/modal/components/confirmation-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC,eAAO,MAAM,iBAAiB,kIAS3B;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC;IACrD,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,sBAuCA,CAAC"}
@@ -0,0 +1,21 @@
1
+ import React, { useEffect } from "react";
2
+ import { motion } from "framer-motion";
3
+ import styles from "./styles/confirmation-modal.module.css";
4
+ export const ConfirmationModal = ({ heading, paragraph, confirmButtonText, confirmButtonClick, confirmButtonStyle = "delete", cancelButtonText, cancelButtonClick, logo, }) => {
5
+ useEffect(() => {
6
+ document.body.style.overflow = "hidden";
7
+ document.body.style.paddingRight = "11px";
8
+ return () => {
9
+ document.body.style.overflow = "unset";
10
+ document.body.style.paddingRight = "0";
11
+ };
12
+ }, []);
13
+ return (React.createElement(motion.div, { initial: { opacity: 0, y: 50 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 50 }, transition: { duration: 0.2 }, className: styles.container },
14
+ logo && React.createElement("div", { className: styles.logo }, logo),
15
+ React.createElement("h1", null, heading),
16
+ React.createElement("p", null, paragraph),
17
+ React.createElement("div", { className: styles.buttons },
18
+ React.createElement("button", { onClick: confirmButtonClick, className: `${styles.confirm} ${styles[confirmButtonStyle]}
19
+ }` }, confirmButtonText),
20
+ React.createElement("button", { onClick: cancelButtonClick, className: styles.cancel }, cancelButtonText))));
21
+ };
@@ -0,0 +1,13 @@
1
+ import React from "react";
2
+ export declare const Modal: ({ children, onClose, closeOnBackdropClick, background, minViewportWidth, maxViewportWidth, disableScroll, focusOnElement, focusAfterClose, }: {
3
+ children: React.ReactNode;
4
+ onClose: () => void;
5
+ closeOnBackdropClick?: boolean;
6
+ background?: string;
7
+ minViewportWidth?: number | null;
8
+ maxViewportWidth?: number | null;
9
+ disableScroll?: boolean;
10
+ focusOnElement?: string | null;
11
+ focusAfterClose?: string | null;
12
+ }) => React.ReactPortal;
13
+ //# sourceMappingURL=modal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../../src/components/elements/modal/components/modal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAKpE,eAAO,MAAM,KAAK,iJAUf;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC,sBAuJA,CAAC"}
@@ -0,0 +1,111 @@
1
+ /* eslint-disable jsx-a11y/no-static-element-interactions */
2
+ /* eslint-disable jsx-a11y/click-events-have-key-events */
3
+ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
4
+ "use client";
5
+ import { motion } from "framer-motion";
6
+ import React, { useCallback, useLayoutEffect, useRef } from "react";
7
+ import { createPortal } from "react-dom";
8
+ import styles from "./styles/modal.module.css";
9
+ export const Modal = ({ children, onClose, closeOnBackdropClick = true, background, minViewportWidth = null, maxViewportWidth = null, disableScroll = false, focusOnElement = null, focusAfterClose = null, }) => {
10
+ const modalRef = useRef(null);
11
+ const previouslyFocusedElementRef = useRef(null);
12
+ const handleKeyDown = useCallback((e) => {
13
+ if (e.key === "Escape") {
14
+ onClose();
15
+ }
16
+ if (e.key === "Tab") {
17
+ const modal = modalRef.current;
18
+ if (!modal)
19
+ return;
20
+ const focusableElements = Array.from(modal.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'));
21
+ const firstFocusableElement = focusableElements[0];
22
+ const lastFocusableElement = focusableElements[focusableElements.length - 1];
23
+ if (e.shiftKey) {
24
+ if (document.activeElement === firstFocusableElement) {
25
+ lastFocusableElement.focus();
26
+ e.preventDefault();
27
+ }
28
+ }
29
+ else {
30
+ if (document.activeElement === lastFocusableElement) {
31
+ firstFocusableElement.focus();
32
+ e.preventDefault();
33
+ }
34
+ }
35
+ }
36
+ }, [onClose]);
37
+ const handleScroll = useCallback((e) => {
38
+ if (disableScroll) {
39
+ e.preventDefault();
40
+ }
41
+ }, [disableScroll]);
42
+ const handleDisplay = useCallback(() => {
43
+ const modal = modalRef.current;
44
+ if (!modal)
45
+ return;
46
+ const viewportWidth = window.innerWidth;
47
+ if ((minViewportWidth && viewportWidth < minViewportWidth) ||
48
+ (maxViewportWidth && viewportWidth > maxViewportWidth)) {
49
+ onClose();
50
+ }
51
+ }, [onClose, minViewportWidth, maxViewportWidth]);
52
+ useLayoutEffect(() => {
53
+ const modal = modalRef.current;
54
+ if (!modal)
55
+ return;
56
+ const focusableElements = Array.from(modal.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'));
57
+ const firstFocusableElement = focusableElements?.[0];
58
+ previouslyFocusedElementRef.current = document.activeElement;
59
+ modal?.addEventListener("keydown", handleKeyDown);
60
+ if (focusOnElement) {
61
+ const elementToFocus = modal.querySelector(focusOnElement);
62
+ elementToFocus?.focus();
63
+ }
64
+ else {
65
+ firstFocusableElement?.focus();
66
+ }
67
+ if (disableScroll) {
68
+ document.body.style.overflow = "hidden";
69
+ document.body.style.paddingRight = "11px";
70
+ window.addEventListener("scroll", handleScroll);
71
+ }
72
+ if (minViewportWidth || maxViewportWidth) {
73
+ handleDisplay();
74
+ }
75
+ return () => {
76
+ modal?.removeEventListener("keydown", handleKeyDown);
77
+ if (focusAfterClose) {
78
+ const elementToFocus = document.querySelector(focusAfterClose);
79
+ elementToFocus?.focus();
80
+ }
81
+ else {
82
+ previouslyFocusedElementRef.current?.focus();
83
+ }
84
+ if (disableScroll) {
85
+ document.body.style.overflow = "";
86
+ document.body.style.paddingRight = "";
87
+ window.removeEventListener("scroll", handleScroll);
88
+ }
89
+ };
90
+ }, [
91
+ onClose,
92
+ disableScroll,
93
+ handleKeyDown,
94
+ handleScroll,
95
+ handleDisplay,
96
+ minViewportWidth,
97
+ maxViewportWidth,
98
+ focusOnElement,
99
+ focusAfterClose,
100
+ ]);
101
+ const backdropStyle = {
102
+ backgroundColor: background === "none" ? "transparent" : "var(--clr-modal-background)",
103
+ };
104
+ return createPortal(React.createElement(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: (e) => {
105
+ e.stopPropagation();
106
+ if (e.currentTarget === e.target && closeOnBackdropClick)
107
+ onClose();
108
+ }, onKeyDown: (e) => {
109
+ e.stopPropagation();
110
+ }, ref: modalRef, className: `${styles.container}`, style: backdropStyle, id: "dialog", role: "dialog", "aria-modal": "true" }, children), document.body);
111
+ };
@@ -0,0 +1,105 @@
1
+ .container {
2
+ position: fixed;
3
+ top: 0;
4
+ left: 0;
5
+ bottom: 0;
6
+ right: 0;
7
+ width: fit-content;
8
+ max-width: 320px;
9
+ height: fit-content;
10
+ margin: auto;
11
+ background-color: var(--clr-background);
12
+ padding: 2em;
13
+ border-radius: 1rem;
14
+ }
15
+ .container .logo {
16
+ display: grid;
17
+ place-items: center;
18
+ margin-bottom: 1em;
19
+ }
20
+ .container .logo svg {
21
+ width: var(--fs-kilo);
22
+ height: var(--fs-kilo);
23
+ fill: var(--clr-primary);
24
+ }
25
+ .container h1 {
26
+ font-size: var(--fs-h2);
27
+ font-weight: var(--fw-700);
28
+ margin-bottom: 0.5em;
29
+ }
30
+ .container p {
31
+ font-size: var(--fs-milli);
32
+ color: var(--clr-tertiary);
33
+ margin-bottom: 2rem;
34
+ line-height: 1.4;
35
+ }
36
+ .container .buttons {
37
+ display: grid;
38
+ gap: 0.8rem;
39
+ }
40
+ .container .buttons button {
41
+ display: grid;
42
+ place-items: center;
43
+ padding: 0.9em;
44
+ border-radius: 100vmax;
45
+ font-size: var(--fs-milli);
46
+ font-weight: var(--fw-700);
47
+ cursor: pointer;
48
+ transition: background-color 0.2s ease;
49
+ }
50
+ .container .buttons .delete {
51
+ background-color: var(--clr-red);
52
+ }
53
+ .container .buttons .delete:hover {
54
+ background-color: var(--clr-red-hover);
55
+ }
56
+ .container .buttons .delete:active {
57
+ background-color: var(--clr-red-active);
58
+ }
59
+ .container .buttons .delete:focus-visible {
60
+ outline: 2px solid var(--clr-secondary);
61
+ background-color: var(--clr-red-hover);
62
+ }
63
+ .container .buttons .unfollow {
64
+ background-color: var(--clr-secondary);
65
+ color: var(--clr-background);
66
+ }
67
+ .container .buttons .unfollow:hover {
68
+ background-color: var(--clr-secondary-hover);
69
+ }
70
+ .container .buttons .unfollow:active {
71
+ background-color: var(--clr-secondary-active);
72
+ }
73
+ .container .buttons .unfollow:focus-visible {
74
+ outline: 2px solid var(--clr-secondary);
75
+ }
76
+ .container .buttons .signout {
77
+ background-color: var(--clr-secondary);
78
+ color: var(--clr-background);
79
+ }
80
+ .container .buttons .signout:hover {
81
+ background-color: var(--clr-signout-logout-hover);
82
+ }
83
+ .container .buttons .signout:active {
84
+ background-color: var(--clr-signout-logout-active);
85
+ }
86
+ .container .buttons .signout:focus-visible {
87
+ outline: 2px solid var(--clr-secondary);
88
+ background-color: var(--clr-signout-logout-hover);
89
+ }
90
+ .container .buttons .cancel {
91
+ color: var(--clr-secondary);
92
+ border: 1px solid var(--clr-tertiary);
93
+ }
94
+ .container .buttons .cancel:hover {
95
+ background-color: var(--clr-trends-hover);
96
+ }
97
+ .container .buttons .cancel:active {
98
+ background-color: var(--clr-trends-active);
99
+ }
100
+ .container .buttons .cancel:focus-visible {
101
+ outline: 2px solid var(--clr-secondary);
102
+ background-color: var(--clr-trends-hover);
103
+ }
104
+
105
+ /*# sourceMappingURL=confirmation-modal.module.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../../src/components/elements/modal/components/styles/confirmation-modal.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA","file":"confirmation-modal.module.css"}
@@ -0,0 +1,10 @@
1
+ .container {
2
+ z-index: var(--z-index-modal-backdrop);
3
+ position: fixed;
4
+ top: 0;
5
+ left: 0;
6
+ width: 100%;
7
+ height: 100%;
8
+ }
9
+
10
+ /*# sourceMappingURL=modal.module.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../../src/components/elements/modal/components/styles/modal.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA","file":"modal.module.css"}
@@ -0,0 +1,5 @@
1
+ export declare const useTrackPosition: ({ buttonRef, trackScroll, }: {
2
+ buttonRef: React.RefObject<HTMLButtonElement>;
3
+ trackScroll?: boolean;
4
+ }) => DOMRect | null;
5
+ //# sourceMappingURL=use-track-position.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-track-position.d.ts","sourceRoot":"","sources":["../../../../../src/components/elements/modal/hooks/use-track-position.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,gCAG1B;IACD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,mBAuCA,CAAC"}
@@ -0,0 +1,35 @@
1
+ "use client";
2
+ import { useState, useLayoutEffect } from "react";
3
+ export const useTrackPosition = ({ buttonRef, trackScroll = false, }) => {
4
+ const [buttonBoundaries, setButtonBoundaries] = useState(buttonRef?.current?.getBoundingClientRect() ?? null);
5
+ useLayoutEffect(() => {
6
+ const handleResize = () => {
7
+ if (buttonRef?.current) {
8
+ setButtonBoundaries(buttonRef.current.getBoundingClientRect());
9
+ }
10
+ };
11
+ window.addEventListener("resize", handleResize);
12
+ if (trackScroll) {
13
+ window.addEventListener("scroll", handleResize);
14
+ }
15
+ return () => {
16
+ window.removeEventListener("resize", handleResize);
17
+ if (trackScroll) {
18
+ window.removeEventListener("scroll", handleResize);
19
+ }
20
+ };
21
+ }, [
22
+ buttonRef,
23
+ buttonRef.current?.getBoundingClientRect,
24
+ trackScroll,
25
+ setButtonBoundaries,
26
+ ]);
27
+ useLayoutEffect(() => {
28
+ setButtonBoundaries(buttonRef.current?.getBoundingClientRect() ?? null);
29
+ }, [
30
+ buttonRef,
31
+ buttonRef.current?.getBoundingClientRect,
32
+ setButtonBoundaries,
33
+ ]);
34
+ return buttonBoundaries;
35
+ };
@@ -0,0 +1,4 @@
1
+ export * from "./components/modal";
2
+ export * from "./components/confirmation-modal";
3
+ export * from "./hooks/use-track-position";
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/elements/modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC"}
@@ -0,0 +1,3 @@
1
+ export * from "./components/modal";
2
+ export * from "./components/confirmation-modal";
3
+ export * from "./hooks/use-track-position";
@@ -15,7 +15,7 @@ declare global {
15
15
  }
16
16
  }
17
17
  }
18
- export declare const NODE_ENV: "development" | "production" | "test";
18
+ export declare const NODE_ENV: "development" | "production";
19
19
  export declare const OXY_AUTH_URL: string;
20
20
  export {};
21
21
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/config/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,QAAA,MAAM,SAAS;;;;;;;;;EAGb,CAAC;AAEH,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,MAAM,CAAC;QACf,UAAU,UAAW,SAAQ,CAAC,CAAC,KAAK,CAAC,OAAO,SAAS,CAAC;SAAG;KAC1D;CACF;AAED,eAAO,MAAM,QAAQ,uCAAuB,CAAC;AAC7C,eAAO,MAAM,YAAY,QACoD,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/config/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,QAAA,MAAM,SAAS;;;;;;;;;EAGb,CAAC;AAEH,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,MAAM,CAAC;QACf,UAAU,UAAW,SAAQ,CAAC,CAAC,KAAK,CAAC,OAAO,SAAS,CAAC;SAAG;KAC1D;CACF;AAED,eAAO,MAAM,QAAQ,8BAAuB,CAAC;AAC7C,eAAO,MAAM,YAAY,QACoD,CAAC"}
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ interface IAvatar extends React.ImgHTMLAttributes<HTMLImageElement> {
3
+ userImage: string | null | undefined;
4
+ className?: string;
5
+ width?: number;
6
+ height?: number;
7
+ }
8
+ export declare const Avatar: ({ userImage, className, ...props }: IAvatar) => React.JSX.Element;
9
+ export {};
10
+ //# sourceMappingURL=avatar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../src/features/profile/components/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,OAAQ,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IACjE,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,uCAAwC,OAAO,sBAiBjE,CAAC"}
@@ -0,0 +1,7 @@
1
+ import Image from "next/image";
2
+ import React from "react";
3
+ import { cn } from "../../../utils/cn";
4
+ export const Avatar = ({ userImage, className, ...props }) => {
5
+ return (React.createElement("div", { className: cn("relative aspect-square w-[calc(var(--tw-fs-kilo)+9px)] overflow-hidden rounded-full", className) },
6
+ React.createElement(Image, { ...props, src: userImage || `/user_placeholder.png`, alt: "profile picture", fill: true, className: "block size-full object-cover" })));
7
+ };
@@ -0,0 +1,15 @@
1
+ .container {
2
+ position: relative;
3
+ width: var(--avatar-width);
4
+ border-radius: 50%;
5
+ overflow: hidden;
6
+ aspect-ratio: 1/1;
7
+ }
8
+ .container img {
9
+ display: block;
10
+ width: 100%;
11
+ height: 100%;
12
+ object-fit: cover;
13
+ }
14
+
15
+ /*# sourceMappingURL=avatar.module.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/features/profile/components/styles/avatar.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA","file":"avatar.module.css"}
@@ -0,0 +1,18 @@
1
+ .container {
2
+ font-size: var(--fs-milli);
3
+ font-weight: var(--fw-500);
4
+ color: var(--clr-secondary);
5
+ display: grid;
6
+ grid-auto-flow: column;
7
+ }
8
+ .container span {
9
+ white-space: nowrap;
10
+ overflow: hidden;
11
+ text-overflow: ellipsis;
12
+ }
13
+
14
+ .hover:hover {
15
+ text-decoration: underline;
16
+ }
17
+
18
+ /*# sourceMappingURL=user-name.module.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/features/profile/components/styles/user-name.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKF;EACE","file":"user-name.module.css"}
@@ -0,0 +1,6 @@
1
+ .container {
2
+ font-size: var(--fs-milli);
3
+ color: var(--clr-tertiary);
4
+ }
5
+
6
+ /*# sourceMappingURL=user-username.module.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/features/profile/components/styles/user-username.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA","file":"user-username.module.css"}
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ export declare const UserName: ({ name, isVerified, hover, }: {
3
+ name: string | undefined;
4
+ isVerified?: boolean | undefined;
5
+ hover?: boolean | undefined;
6
+ }) => React.JSX.Element;
7
+ //# sourceMappingURL=user-name.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"user-name.d.ts","sourceRoot":"","sources":["../../../../src/features/profile/components/user-name.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,QAAQ,iCAIlB;IACD,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7B,sBAOA,CAAC"}
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ import { VerifiedIcon } from "../../../assets/verified-icon";
3
+ import styles from "./styles/user-name.module.css";
4
+ export const UserName = ({ name, isVerified = false, hover = false, }) => {
5
+ return (React.createElement("div", { className: `${styles.container} ${hover ? styles.hover : ""}` },
6
+ name && React.createElement("span", null, name),
7
+ isVerified && React.createElement(VerifiedIcon, null)));
8
+ };
@@ -0,0 +1,5 @@
1
+ import React from "react";
2
+ export declare const UserUsername: ({ username, }: {
3
+ username: string | undefined;
4
+ }) => React.JSX.Element;
5
+ //# sourceMappingURL=user-username.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"user-username.d.ts","sourceRoot":"","sources":["../../../../src/features/profile/components/user-username.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,YAAY,kBAEtB;IACD,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B,sBAEA,CAAC"}
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ import styles from "./styles/user-username.module.css";
3
+ export const UserUsername = ({ username, }) => {
4
+ return React.createElement("span", { className: styles.container },
5
+ "@",
6
+ username);
7
+ };
@@ -0,0 +1,4 @@
1
+ export * from "./components/avatar";
2
+ export * from "./components/user-name";
3
+ export * from "./components/user-username";
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/features/profile/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC"}
@@ -0,0 +1,3 @@
1
+ export * from "./components/avatar";
2
+ export * from "./components/user-name";
3
+ export * from "./components/user-username";
@@ -0,0 +1,2 @@
1
+ export declare const getUser: (id: string | undefined) => Promise<any>;
2
+ //# sourceMappingURL=get-user.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"get-user.d.ts","sourceRoot":"","sources":["../../src/hooks/get-user.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,OAAc,MAAM,GAAG,SAAS,iBAsBnD,CAAC"}
@@ -0,0 +1,28 @@
1
+ import axios from "axios";
2
+ import { OXY_AUTH_URL } from "../config";
3
+ export const getUser = async (id) => {
4
+ try {
5
+ const response = await axios.get(OXY_AUTH_URL + `/api/users/${id}`);
6
+ return response.data;
7
+ }
8
+ catch (error) {
9
+ if (error.response) {
10
+ // The request was made and the server responded with a status code
11
+ // that falls out of the range of 2xx
12
+ console.log(error.response.data);
13
+ console.log(error.response.status);
14
+ console.log(error.response.headers);
15
+ }
16
+ else if (error.request) {
17
+ // The request was made but no response was received
18
+ // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
19
+ // http.ClientRequest in node.js
20
+ console.log(error.request);
21
+ }
22
+ else {
23
+ // Something happened in setting up the request that triggered an Error
24
+ console.log("Error", error.message);
25
+ }
26
+ console.log(error.config);
27
+ }
28
+ };
@@ -1,10 +1,11 @@
1
1
  interface User {
2
2
  id: string;
3
+ username: string;
3
4
  name: string;
4
5
  email: string;
5
6
  role: string;
6
7
  avatar: string;
7
8
  }
8
- declare const getUserById: (id?: string[], fields?: (keyof User)[]) => Promise<any>;
9
+ declare const getUserById: (id?: string | string[], fields?: (keyof User)[]) => Promise<User>;
9
10
  export default getUserById;
10
11
  //# sourceMappingURL=getUserById.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"getUserById.d.ts","sourceRoot":"","sources":["../../src/hooks/getUserById.ts"],"names":[],"mappings":"AAGA,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,WAAW,QAAe,MAAM,EAAE,WAAW,CAAC,MAAM,IAAI,CAAC,EAAE,iBAiBhE,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"getUserById.d.ts","sourceRoot":"","sources":["../../src/hooks/getUserById.ts"],"names":[],"mappings":"AAGA,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,WAAW,QAAe,MAAM,GAAG,MAAM,EAAE,WAAW,CAAC,MAAM,IAAI,CAAC,EAAE,kBAiBzE,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -2,7 +2,7 @@ import axios from "axios";
2
2
  import { OXY_AUTH_URL } from "../config";
3
3
  const getUserById = async (id, fields) => {
4
4
  try {
5
- const response = await axios.get(OXY_AUTH_URL + "/api/users/${id}");
5
+ const response = await axios.get(OXY_AUTH_URL + `/api/users/${id}`);
6
6
  const user = fields
7
7
  ? fields.reduce((obj, key) => ({ ...obj, [key]: response.data[key] }), {})
8
8
  : response.data;
@@ -0,0 +1,14 @@
1
+ export interface IUser {
2
+ id: string;
3
+ username: string;
4
+ name: string;
5
+ email: string;
6
+ role: string;
7
+ avatar: string;
8
+ color: string;
9
+ }
10
+ export declare const useUser: ({ id, initialData: IUser, }: {
11
+ id: string | undefined;
12
+ initialData?: IUser;
13
+ }) => Promise<any>;
14
+ //# sourceMappingURL=use-user.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-user.d.ts","sourceRoot":"","sources":["../../src/hooks/use-user.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,OAAO,gCAGjB;IACD,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,iBAMA,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { getUser } from "./get-user";
2
+ export const useUser = async ({ id, initialData: IUser, }) => {
3
+ if (!id) {
4
+ // Return a default value or null when id is not provided
5
+ return null;
6
+ }
7
+ return getUser(id);
8
+ };
@@ -6,7 +6,7 @@ interface SessionModel {
6
6
  lastname: string;
7
7
  email: string;
8
8
  verified: boolean;
9
- profile_image_url: string;
9
+ avatar: string;
10
10
  created_at: string;
11
11
  };
12
12
  }
@@ -1 +1 @@
1
- {"version":3,"file":"useOxySession.d.ts","sourceRoot":"","sources":["../../src/hooks/useOxySession.ts"],"names":[],"mappings":"AAOA,UAAU,YAAY;IACpB,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;IACX,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,eAAe,2EAuC1B,CAAC;AAEH,iBAAS,aAAa;;;;EAQrB;AAED,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"useOxySession.d.ts","sourceRoot":"","sources":["../../src/hooks/useOxySession.ts"],"names":[],"mappings":"AAOA,UAAU,YAAY;IACpB,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;IACX,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,eAAe,2EAuC1B,CAAC;AAEH,iBAAS,aAAa;;;;EAQrB;AAED,eAAe,aAAa,CAAC"}
package/dist/index.css ADDED
@@ -0,0 +1,5 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ /*# sourceMappingURL=index.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../src/index.css"],"names":[],"mappings":"AAAA;AACA;AACA","file":"index.css"}
package/dist/index.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import useOxySession from "./hooks/useOxySession";
2
2
  import getUserById from "./hooks/getUserById";
3
3
  import SignInButton from "./components/auth/SignInButton";
4
- export { useOxySession, getUserById, SignInButton };
4
+ import { AccountSwitcherModal } from "./components/auth/AccountSwitcherModal";
5
+ import { SessionOwnerButton } from "./components/auth/SessionOwnerButton";
6
+ export { useOxySession, getUserById, SignInButton, AccountSwitcherModal, SessionOwnerButton, };
5
7
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,uBAAuB,CAAC;AAClD,OAAO,WAAW,MAAM,qBAAqB,CAAC;AAC9C,OAAO,YAAY,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,uBAAuB,CAAC;AAClD,OAAO,WAAW,MAAM,qBAAqB,CAAC;AAC9C,OAAO,YAAY,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,EACL,aAAa,EACb,WAAW,EACX,YAAY,EACZ,oBAAoB,EACpB,kBAAkB,GACnB,CAAC"}
package/dist/index.js CHANGED
@@ -1,4 +1,6 @@
1
1
  import useOxySession from "./hooks/useOxySession";
2
2
  import getUserById from "./hooks/getUserById";
3
3
  import SignInButton from "./components/auth/SignInButton";
4
- export { useOxySession, getUserById, SignInButton };
4
+ import { AccountSwitcherModal } from "./components/auth/AccountSwitcherModal";
5
+ import { SessionOwnerButton } from "./components/auth/SessionOwnerButton";
6
+ export { useOxySession, getUserById, SignInButton, AccountSwitcherModal, SessionOwnerButton, };
@@ -0,0 +1,10 @@
1
+ export interface IUser {
2
+ id: string;
3
+ username: string;
4
+ name: string;
5
+ email: string;
6
+ role: string;
7
+ avatar: string;
8
+ color: string;
9
+ }
10
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/interfaces/index.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf"}
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,3 @@
1
+ import { type ClassValue } from "clsx";
2
+ export declare const cn: (...inputs: ClassValue[]) => string;
3
+ //# sourceMappingURL=cn.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,eAAO,MAAM,EAAE,cAAe,UAAU,EAAE,WAEzC,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { clsx } from "clsx";
2
+ import { twMerge } from "tailwind-merge";
3
+ export const cn = (...inputs) => {
4
+ return twMerge(clsx(inputs));
5
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oxyhq/services",
3
- "version": "0.0.54",
3
+ "version": "0.0.55",
4
4
  "description": "",
5
5
  "homepage": "https://oxy.so/",
6
6
  "main": "./dist/index.js",
@@ -43,7 +43,7 @@
43
43
  "axios": "^1.6.8",
44
44
  "clsx": "^2.1.1",
45
45
  "dotenv": "^16.4.5",
46
- "framer-motion": "^11.2.9",
46
+ "framer-motion": "^11.3.19",
47
47
  "localforage": "^1.10.0",
48
48
  "next": "^14.2.5",
49
49
  "postcss": "^8.4.38",
@@ -54,4 +54,4 @@
54
54
  "zod": "^3.23.8",
55
55
  "zustand": "^4.5.2"
56
56
  }
57
- }
57
+ }