@oxyhq/services 0.0.22 → 0.0.24

package/dist/assets/dot-icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+export declare const DotIcon: () => React.JSX.Element;
+//# sourceMappingURL=dot-icon.d.ts.map

package/dist/assets/dot-icon.d.ts.map

@@ -0,0 +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"}

package/dist/assets/dot-icon.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+export const DotIcon = () => {
+    return (React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" },
+        React.createElement("g", null,
+            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" }))));
+};

package/dist/assets/verified-icon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const VerifiedIcon: () => import("react").JSX.Element;
+//# sourceMappingURL=verified-icon.d.ts.map

package/dist/assets/verified-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"verified-icon.d.ts","sourceRoot":"","sources":["../../src/assets/verified-icon.tsx"],"names":[],"mappings":";AAAA,eAAO,MAAM,YAAY,mCAiBxB,CAAC"}

package/dist/assets/verified-icon.js

@@ -0,0 +1,9 @@
+export const VerifiedIcon = () => {
+    return (React.createElement("svg", { style: {
+            fill: "var(--clr-primary)",
+            height: "var(--verified-icon-width)",
+            marginLeft: "2px",
+        }, viewBox: "0 0 24 24", "aria-label": "Verified account", role: "img" },
+        React.createElement("g", null,
+            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" }))));
+};

package/dist/components/auth/AccountSwitcherModal.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export declare const AccountSwitcherModal: React.ForwardRefExoticComponent<{
+    onClose: () => void;
+} & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=AccountSwitcherModal.d.ts.map

package/dist/components/auth/AccountSwitcherModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountSwitcherModal.d.ts","sourceRoot":"","sources":["../../../src/components/auth/AccountSwitcherModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,oBAAoB;aAEpB,MAAM,IAAI;2CAmCrB,CAAC"}

package/dist/components/auth/AccountSwitcherModal.js

@@ -0,0 +1,29 @@
+"use client";
+import * as React from "react";
+import { motion } from "framer-motion";
+import Link from "next/link";
+import useOxySession from "../../hooks/useOxySession";
+import { forwardRef } from "react";
+import { useUser } from "../../hooks/use-user";
+import styles from "./styles/session-owner-modal.module.scss";
+export const AccountSwitcherModal = forwardRef(({ onClose }, ref) => {
+    const { session } = useOxySession();
+    const { data: user } = useUser({ id: session?.user?.id });
+    const style = {
+        position: "fixed",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+    };
+    if (!session)
+        return null;
+    return (React.createElement(motion.div, { initial: { opacity: 0, y: "100%" }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: "100%" }, transition: {
+            ease: "easeInOut",
+            duration: 0.2,
+        }, className: styles.container, style: style, role: "group" },
+        React.createElement(Link, { href: `/auth/signin`, role: "menuitem", onClick: onClose }, "Add an existing account"),
+        React.createElement(Link, { href: `/auth/signout`, role: "menuitem", onClick: onClose },
+            "Log out @",
+            user?.username)));
+});
+AccountSwitcherModal.displayName = "AccountSwitcherModal";

package/dist/components/auth/OAvatar.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./oavatar.module.css";
+import styles from "./styles/oavatar.module.css";
 import { OxyLogo } from "../assets/oxy-logo";
 import useOxySession from "../../hooks/useOxySession";
 export const OAvatar = ({ icon = React.createElement(OxyLogo, null), text = "Sign in with Oxy", callback = window.location.href, }) => {

package/dist/components/auth/SessionOwnerButton.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+export declare const SessionOwnerButton: () => React.JSX.Element;
+//# sourceMappingURL=SessionOwnerButton.d.ts.map

package/dist/components/auth/SessionOwnerButton.d.ts.map

@@ -0,0 +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,yBAoD9B,CAAC"}

package/dist/components/auth/SessionOwnerButton.js

@@ -0,0 +1,32 @@
+"use client";
+import * as React from "react";
+import { AnimatePresence } from "framer-motion";
+import useOxySession from "../../hooks/useOxySession";
+import { useRef, useState } from "react";
+import { useUser } from "../../hooks/use-user";
+import { DotIcon } from "../../assets/dot-icon";
+import { Button } from "../../components/elements/button";
+import { EllipsisWrapper } from "../../components/elements/ellipsis-wrapper";
+import { Modal } from "../../components/elements/modal";
+import { Avatar, UserName, UserUsername } from "../../features/profile";
+import { AccountSwitcherModal } from "./AccountSwitcherModal";
+export const SessionOwnerButton = () => {
+    const { session } = useOxySession();
+    const { data: user } = useUser({ id: session?.user?.id });
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const buttonRef = useRef(null);
+    const openModal = () => {
+        setIsModalOpen(true);
+    };
+    return (React.createElement(React.Fragment, null,
+        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" },
+            React.createElement(Avatar, { userImage: session?.user?.avatar }),
+            React.createElement("div", { className: "hidden flex-1 flex-col xxl:flex" },
+                React.createElement(UserName, { name: session?.user?.name, isVerified: session?.user?.verified }),
+                React.createElement(EllipsisWrapper, null,
+                    React.createElement(UserUsername, { username: user?.username }))),
+            React.createElement("div", { className: "hidden fill-secondary-100 xxl:inline [&>svg]:size-h2" },
+                React.createElement(DotIcon, null))),
+        React.createElement(AnimatePresence, null, isModalOpen && (React.createElement(Modal, { onClose: () => setIsModalOpen(false), background: "none", minViewportWidth: 500 },
+            React.createElement(AccountSwitcherModal, { ref: buttonRef, onClose: () => setIsModalOpen(false) }))))));
+};

package/dist/components/elements/button/components/button.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+}
+export declare const Button: React.ForwardRefExoticComponent<IButton & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=button.d.ts.map

package/dist/components/elements/button/components/button.d.ts.map

@@ -0,0 +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"}

package/dist/components/elements/button/components/button.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from "react";
+import { cn } from "../../../../utils/cn";
+export const Button = forwardRef(({ children, className, ...props }, ref) => {
+    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));
+});
+Button.displayName = "Button";

package/dist/components/elements/button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from "./components/button";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/elements/button/index.d.ts.map

@@ -0,0 +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"}

package/dist/components/elements/button/index.js

@@ -0,0 +1 @@
+export { Button } from "./components/button";

package/dist/components/elements/ellipsis-wrapper/components/ellipsis-wrapper.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const EllipsisWrapper: ({ children, }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+//# sourceMappingURL=ellipsis-wrapper.d.ts.map

package/dist/components/elements/ellipsis-wrapper/components/ellipsis-wrapper.d.ts.map

@@ -0,0 +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,MAAM,SAAS,CAAC;CAC3B,sBAUA,CAAC"}

package/dist/components/elements/ellipsis-wrapper/components/ellipsis-wrapper.js

@@ -0,0 +1,4 @@
+import React from "react";
+export const EllipsisWrapper = ({ children, }) => {
+    return (React.createElement("div", { "aria-hidden": true, role: "presentation", className: "grid grid-flow-col [&>*]:truncate" }, children));
+};

package/dist/components/elements/ellipsis-wrapper/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./components/ellipsis-wrapper";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/elements/ellipsis-wrapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/elements/ellipsis-wrapper/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}

package/dist/components/elements/ellipsis-wrapper/index.js

@@ -0,0 +1 @@
+export * from "./components/ellipsis-wrapper";

package/dist/components/elements/modal/components/confirmation-modal.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export declare const ConfirmationModal: ({ heading, paragraph, confirmButtonText, confirmButtonClick, confirmButtonStyle, cancelButtonText, cancelButtonClick, logo, }: {
+    heading: string;
+    paragraph: string;
+    confirmButtonText: string;
+    confirmButtonClick: () => void;
+    confirmButtonStyle: "delete" | "unfollow" | "logout";
+    cancelButtonText: string;
+    cancelButtonClick: () => void;
+    logo?: React.ReactNode;
+}) => React.JSX.Element;
+//# sourceMappingURL=confirmation-modal.d.ts.map

package/dist/components/elements/modal/components/confirmation-modal.d.ts.map

@@ -0,0 +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,MAAM,SAAS,CAAC;CACxB,sBAuCA,CAAC"}

package/dist/components/elements/modal/components/confirmation-modal.js

@@ -0,0 +1,21 @@
+import React, { useEffect } from "react";
+import { motion } from "framer-motion";
+import styles from "./styles/confirmation-modal.module.scss";
+export const ConfirmationModal = ({ heading, paragraph, confirmButtonText, confirmButtonClick, confirmButtonStyle = "delete", cancelButtonText, cancelButtonClick, logo, }) => {
+    useEffect(() => {
+        document.body.style.overflow = "hidden";
+        document.body.style.paddingRight = "11px";
+        return () => {
+            document.body.style.overflow = "unset";
+            document.body.style.paddingRight = "0";
+        };
+    }, []);
+    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 },
+        logo && React.createElement("div", { className: styles.logo }, logo),
+        React.createElement("h1", null, heading),
+        React.createElement("p", null, paragraph),
+        React.createElement("div", { className: styles.buttons },
+            React.createElement("button", { onClick: confirmButtonClick, className: `${styles.confirm} ${styles[confirmButtonStyle]}
+        }` }, confirmButtonText),
+            React.createElement("button", { onClick: cancelButtonClick, className: styles.cancel }, cancelButtonText))));
+};

package/dist/components/elements/modal/components/modal.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export declare const Modal: ({ children, onClose, closeOnBackdropClick, background, minViewportWidth, maxViewportWidth, disableScroll, focusOnElement, focusAfterClose, }: {
+    children: React.ReactNode;
+    onClose: () => void;
+    closeOnBackdropClick?: boolean;
+    background?: string;
+    minViewportWidth?: number | null;
+    maxViewportWidth?: number | null;
+    disableScroll?: boolean;
+    focusOnElement?: string | null;
+    focusAfterClose?: string | null;
+}) => React.ReactPortal;
+//# sourceMappingURL=modal.d.ts.map

package/dist/components/elements/modal/components/modal.d.ts.map

@@ -0,0 +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,MAAM,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"}

package/dist/components/elements/modal/components/modal.js

@@ -0,0 +1,111 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+"use client";
+import { motion } from "framer-motion";
+import React, { useCallback, useLayoutEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import styles from "./styles/modal.module.scss";
+export const Modal = ({ children, onClose, closeOnBackdropClick = true, background, minViewportWidth = null, maxViewportWidth = null, disableScroll = false, focusOnElement = null, focusAfterClose = null, }) => {
+    const modalRef = useRef(null);
+    const previouslyFocusedElementRef = useRef(null);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Escape") {
+            onClose();
+        }
+        if (e.key === "Tab") {
+            const modal = modalRef.current;
+            if (!modal)
+                return;
+            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])'));
+            const firstFocusableElement = focusableElements[0];
+            const lastFocusableElement = focusableElements[focusableElements.length - 1];
+            if (e.shiftKey) {
+                if (document.activeElement === firstFocusableElement) {
+                    lastFocusableElement.focus();
+                    e.preventDefault();
+                }
+            }
+            else {
+                if (document.activeElement === lastFocusableElement) {
+                    firstFocusableElement.focus();
+                    e.preventDefault();
+                }
+            }
+        }
+    }, [onClose]);
+    const handleScroll = useCallback((e) => {
+        if (disableScroll) {
+            e.preventDefault();
+        }
+    }, [disableScroll]);
+    const handleDisplay = useCallback(() => {
+        const modal = modalRef.current;
+        if (!modal)
+            return;
+        const viewportWidth = window.innerWidth;
+        if ((minViewportWidth && viewportWidth < minViewportWidth) ||
+            (maxViewportWidth && viewportWidth > maxViewportWidth)) {
+            onClose();
+        }
+    }, [onClose, minViewportWidth, maxViewportWidth]);
+    useLayoutEffect(() => {
+        const modal = modalRef.current;
+        if (!modal)
+            return;
+        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])'));
+        const firstFocusableElement = focusableElements?.[0];
+        previouslyFocusedElementRef.current = document.activeElement;
+        modal?.addEventListener("keydown", handleKeyDown);
+        if (focusOnElement) {
+            const elementToFocus = modal.querySelector(focusOnElement);
+            elementToFocus?.focus();
+        }
+        else {
+            firstFocusableElement?.focus();
+        }
+        if (disableScroll) {
+            document.body.style.overflow = "hidden";
+            document.body.style.paddingRight = "11px";
+            window.addEventListener("scroll", handleScroll);
+        }
+        if (minViewportWidth || maxViewportWidth) {
+            handleDisplay();
+        }
+        return () => {
+            modal?.removeEventListener("keydown", handleKeyDown);
+            if (focusAfterClose) {
+                const elementToFocus = document.querySelector(focusAfterClose);
+                elementToFocus?.focus();
+            }
+            else {
+                previouslyFocusedElementRef.current?.focus();
+            }
+            if (disableScroll) {
+                document.body.style.overflow = "";
+                document.body.style.paddingRight = "";
+                window.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }, [
+        onClose,
+        disableScroll,
+        handleKeyDown,
+        handleScroll,
+        handleDisplay,
+        minViewportWidth,
+        maxViewportWidth,
+        focusOnElement,
+        focusAfterClose,
+    ]);
+    const backdropStyle = {
+        backgroundColor: background === "none" ? "transparent" : "var(--clr-modal-background)",
+    };
+    return createPortal(React.createElement(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: (e) => {
+            e.stopPropagation();
+            if (e.currentTarget === e.target && closeOnBackdropClick)
+                onClose();
+        }, onKeyDown: (e) => {
+            e.stopPropagation();
+        }, ref: modalRef, className: `${styles.container}`, style: backdropStyle, id: "dialog", role: "dialog", "aria-modal": "true" }, children), document.body);
+};

package/dist/components/elements/modal/hooks/use-track-position.d.ts

@@ -0,0 +1,5 @@
+export declare const useTrackPosition: ({ buttonRef, trackScroll, }: {
+    buttonRef: React.RefObject<HTMLButtonElement>;
+    trackScroll?: boolean;
+}) => DOMRect | null;
+//# sourceMappingURL=use-track-position.d.ts.map

package/dist/components/elements/modal/hooks/use-track-position.d.ts.map

@@ -0,0 +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,MAAM,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,mBAuCA,CAAC"}

package/dist/components/elements/modal/hooks/use-track-position.js

@@ -0,0 +1,35 @@
+"use client";
+import { useState, useLayoutEffect } from "react";
+export const useTrackPosition = ({ buttonRef, trackScroll = false, }) => {
+    const [buttonBoundaries, setButtonBoundaries] = useState(buttonRef?.current?.getBoundingClientRect() ?? null);
+    useLayoutEffect(() => {
+        const handleResize = () => {
+            if (buttonRef?.current) {
+                setButtonBoundaries(buttonRef.current.getBoundingClientRect());
+            }
+        };
+        window.addEventListener("resize", handleResize);
+        if (trackScroll) {
+            window.addEventListener("scroll", handleResize);
+        }
+        return () => {
+            window.removeEventListener("resize", handleResize);
+            if (trackScroll) {
+                window.removeEventListener("scroll", handleResize);
+            }
+        };
+    }, [
+        buttonRef,
+        buttonRef.current?.getBoundingClientRect,
+        trackScroll,
+        setButtonBoundaries,
+    ]);
+    useLayoutEffect(() => {
+        setButtonBoundaries(buttonRef.current?.getBoundingClientRect() ?? null);
+    }, [
+        buttonRef,
+        buttonRef.current?.getBoundingClientRect,
+        setButtonBoundaries,
+    ]);
+    return buttonBoundaries;
+};

package/dist/components/elements/modal/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./components/modal";
+export * from "./components/confirmation-modal";
+export * from "./hooks/use-track-position";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/elements/modal/index.d.ts.map

@@ -0,0 +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"}

package/dist/components/elements/modal/index.js

@@ -0,0 +1,3 @@
+export * from "./components/modal";
+export * from "./components/confirmation-modal";
+export * from "./hooks/use-track-position";

package/dist/config/index.d.ts

@@ -15,7 +15,7 @@ declare global {
         }
     }
 }
-export declare const NODE_ENV: "development" | "production" | "test";
+export declare const NODE_ENV: "development" | "production";
 export declare const OXY_AUTH_URL: string;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/config/index.d.ts.map

@@ -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"}
+{"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"}

package/dist/features/profile/components/avatar.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface IAvatar extends React.ImgHTMLAttributes<HTMLImageElement> {
+    userImage: string | null | undefined;
+    className?: string;
+    width?: number;
+    height?: number;
+}
+export declare const Avatar: ({ userImage, className, ...props }: IAvatar) => React.JSX.Element;
+export {};
+//# sourceMappingURL=avatar.d.ts.map

package/dist/features/profile/components/avatar.d.ts.map

@@ -0,0 +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"}

package/dist/features/profile/components/avatar.js

@@ -0,0 +1,7 @@
+import Image from "next/image";
+import React from "react";
+import { cn } from "../../../utils/cn";
+export const Avatar = ({ userImage, className, ...props }) => {
+    return (React.createElement("div", { className: cn("relative aspect-square w-[calc(var(--tw-fs-kilo)+9px)] overflow-hidden rounded-full", className) },
+        React.createElement(Image, { ...props, src: userImage || `/user_placeholder.png`, alt: "profile picture", fill: true, className: "block size-full object-cover" })));
+};

package/dist/features/profile/components/user-name.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare const UserName: ({ name, isVerified, hover, }: {
+    name: string | undefined;
+    isVerified?: boolean | undefined;
+    hover?: boolean | undefined;
+}) => React.JSX.Element;
+//# sourceMappingURL=user-name.d.ts.map

package/dist/features/profile/components/user-name.d.ts.map

@@ -0,0 +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"}

package/dist/features/profile/components/user-name.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { VerifiedIcon } from "../../../assets/verified-icon";
+import styles from "./styles/user-name.module.scss";
+export const UserName = ({ name, isVerified = false, hover = false, }) => {
+    return (React.createElement("div", { className: `${styles.container} ${hover ? styles.hover : ""}` },
+        name && React.createElement("span", null, name),
+        isVerified && React.createElement(VerifiedIcon, null)));
+};

package/dist/features/profile/components/user-username.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const UserUsername: ({ username, }: {
+    username: string | undefined;
+}) => React.JSX.Element;
+//# sourceMappingURL=user-username.d.ts.map

package/dist/features/profile/components/user-username.d.ts.map

@@ -0,0 +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"}

package/dist/features/profile/components/user-username.js

@@ -0,0 +1,7 @@
+import React from "react";
+import styles from "./styles/user-username.module.scss";
+export const UserUsername = ({ username, }) => {
+    return React.createElement("span", { className: styles.container },
+        "@",
+        username);
+};

package/dist/features/profile/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./components/avatar";
+export * from "./components/user-name";
+export * from "./components/user-username";
+//# sourceMappingURL=index.d.ts.map

package/dist/features/profile/index.d.ts.map

@@ -0,0 +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"}

package/dist/features/profile/index.js

@@ -0,0 +1,3 @@
+export * from "./components/avatar";
+export * from "./components/user-name";
+export * from "./components/user-username";

package/dist/hooks/get-user.d.ts

@@ -0,0 +1,2 @@
+export declare const getUser: (id: string | undefined) => Promise<any>;
+//# sourceMappingURL=get-user.d.ts.map

package/dist/hooks/get-user.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-user.d.ts","sourceRoot":"","sources":["../../src/hooks/get-user.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,OAAc,MAAM,GAAG,SAAS,iBAsBnD,CAAC"}

package/dist/hooks/get-user.js

@@ -0,0 +1,27 @@
+import axios from "axios";
+export const getUser = async (id) => {
+    try {
+        const response = await axios.get(`/api/users/${id}`);
+        return response.data;
+    }
+    catch (error) {
+        if (error.response) {
+            // The request was made and the server responded with a status code
+            // that falls out of the range of 2xx
+            console.log(error.response.data);
+            console.log(error.response.status);
+            console.log(error.response.headers);
+        }
+        else if (error.request) {
+            // The request was made but no response was received
+            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+            // http.ClientRequest in node.js
+            console.log(error.request);
+        }
+        else {
+            // Something happened in setting up the request that triggered an Error
+            console.log("Error", error.message);
+        }
+        console.log(error.config);
+    }
+};

package/dist/hooks/use-user.d.ts

@@ -0,0 +1,14 @@
+export interface IUser {
+    id: string;
+    username: string;
+    name: string;
+    email: string;
+    role: string;
+    avatar: string;
+    color: string;
+}
+export declare const useUser: ({ id, initialData, }: {
+    id: string | undefined;
+    initialData?: IUser;
+}) => import("@tanstack/react-query").UseQueryResult<IUser, Error>;
+//# sourceMappingURL=use-user.d.ts.map

package/dist/hooks/use-user.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-user.d.ts","sourceRoot":"","sources":["../../src/hooks/use-user.ts"],"names":[],"mappings":"AAIA,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,yBAGjB;IACD,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,iEAcA,CAAC"}

package/dist/hooks/use-user.js

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { getUser } from "./get-user";
+export const useUser = ({ id, initialData, }) => {
+    return useQuery({
+        queryKey: ["users", id],
+        queryFn: async () => {
+            if (!id) {
+                // Return a default value or null when id is not provided
+                return null;
+            }
+            return getUser(id);
+        },
+        refetchOnWindowFocus: false,
+        initialData: initialData ?? undefined,
+        enabled: !!id, // Only run the query if the id is provided
+    });
+};

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import useOxySession from "./hooks/useOxySession";
 import getUserById from "./hooks/getUserById";
 import SignInButton from "./components/auth/SignInButton";
-import AccountSwitcher from "./components/auth/AccountSwitcher";
-import OAvatar from "./components/auth/OAvatar";
-export { useOxySession, getUserById, SignInButton, AccountSwitcher, OAvatar };
+import { AccountSwitcherModal } from "./components/auth/AccountSwitcherModal";
+import { SessionOwnerButton } from "./components/auth/SessionOwnerButton";
+export { useOxySession, getUserById, SignInButton, AccountSwitcherModal, SessionOwnerButton, };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -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;AAC1D,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAChE,OAAO,OAAO,MAAM,2BAA2B,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC"}
+{"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

@@ -1,6 +1,6 @@
 import useOxySession from "./hooks/useOxySession";
 import getUserById from "./hooks/getUserById";
 import SignInButton from "./components/auth/SignInButton";
-import AccountSwitcher from "./components/auth/AccountSwitcher";
-import OAvatar from "./components/auth/OAvatar";
-export { useOxySession, getUserById, SignInButton, AccountSwitcher, OAvatar };
+import { AccountSwitcherModal } from "./components/auth/AccountSwitcherModal";
+import { SessionOwnerButton } from "./components/auth/SessionOwnerButton";
+export { useOxySession, getUserById, SignInButton, AccountSwitcherModal, SessionOwnerButton, };

package/dist/utils/cn.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+export declare const cn: (...inputs: ClassValue[]) => string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +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"}

package/dist/utils/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export const cn = (...inputs) => {
+    return twMerge(clsx(inputs));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "",
   "homepage": "https://oxy.so/",
   "main": "./dist/index.js",
@@ -39,11 +39,15 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.40.0",
     "axios": "^1.6.8",
+    "clsx": "^2.1.1",
     "dotenv": "^16.4.5",
+    "framer-motion": "^11.2.9",
     "localforage": "^1.10.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.3.0",
     "zod": "^3.23.8",
     "zustand": "^4.5.2"
   }