@kadoui/react 1.0.0

package/src/components/ClientOnly/ClientOnly.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { PropsWithChildren } from "react";
+import { useMounted } from "@mantine/hooks";
+
+export type ClientOnlyPropsT = PropsWithChildren;
+
+export function ClientOnly({ children }: ClientOnlyPropsT) {
+  const mounted = useMounted();
+
+  return mounted ? children : null;
+}

package/src/components/Clipboard/Clipboard.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { CopyCheckIcon, CopyIcon } from "lucide-react";
+import { ButtonHTMLAttributes, MouseEvent } from "react";
+
+import { useClipboard } from "@mantine/hooks";
+
+export type ClipboardPropsT = ButtonHTMLAttributes<HTMLButtonElement> & {
+  text: string;
+  timeout?: number;
+}
+
+export function Clipboard({ onClick, children, text, timeout = 3_000, ...props }: ClipboardPropsT) {
+  const { copy, copied } = useClipboard({ timeout });
+
+  const handleClick = (ev: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => {
+    onClick?.(ev);
+    copy(text.trim());
+  };
+
+  return (
+    <button
+      aria-label={text}
+      onClick={handleClick}
+      {...props}
+    >
+      {copied ? (
+        <CopyCheckIcon className="compatible-icon" />
+      ) : (
+        <CopyIcon className="compatible-icon" />
+      )}
+
+      {children}
+    </button>
+  );
+}

package/src/components/ContextMenu/ContextMenu.ts

@@ -0,0 +1,6 @@
+import { ContextMenuRoot } from "./ContextMenuRoot";
+import { ContextMenuContent } from "./ContextMenuContent";
+
+export const ContextMenu = Object.assign(ContextMenuRoot, {
+  Content: ContextMenuContent
+});

package/src/components/ContextMenu/ContextMenuContent.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { HTMLAttributes, use, useEffect } from "react";
+import { cn, selectAccessibleChildren } from "@kadoui/utils";
+
+import { ContextMenuContext } from "./ContextMenuContext";
+
+export type ContextMenuContentPropsT = HTMLAttributes<HTMLDivElement>;
+
+export function ContextMenuContent({ onContextMenu, className, ...p }: ContextMenuContentPropsT) {
+  const { contentRef, position, isOpen } = use(ContextMenuContext);
+
+  useEffect(() => {
+    if (!contentRef.current) {
+      return;
+    }
+
+    if (isOpen) {
+      const children = selectAccessibleChildren(contentRef.current);
+      const firstChild = children[0];
+
+      if (!firstChild) {
+        return;
+      }
+
+      firstChild.focus();
+    }
+  }, [isOpen, position, contentRef])
+
+  return (
+    <div
+      ref={contentRef}
+      onContextMenu={ev => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        onContextMenu?.(ev);
+      }}
+      className={cn(
+        "z-50 fixed",
+        position ? "transition-all" : "",
+        isOpen ? "" : "hidden",
+        className
+      )}
+      style={{
+        top: position?.y,
+        left: position?.x,
+      }}
+      {...p}
+    />
+  )
+}

package/src/components/ContextMenu/ContextMenuContext.ts

@@ -0,0 +1,9 @@
+import { createContext, RefObject } from 'react'
+
+export type ContextMenuContextT = {
+  isOpen: boolean;
+  position: { x: number, y: number } | undefined;
+  contentRef: RefObject<HTMLDivElement | null>;
+}
+
+export const ContextMenuContext = createContext<ContextMenuContextT>({} as ContextMenuContextT);

package/src/components/ContextMenu/ContextMenuRoot.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { getBrowserScrollbarWith } from "@kadoui/utils";
+import { HTMLAttributes, MouseEvent, useCallback, useEffect, useRef, useState } from "react";
+
+import { ContextMenuContext, ContextMenuContextT } from "./ContextMenuContext";
+
+export type ContextMenuRootPropsT = HTMLAttributes<HTMLDivElement>;
+
+export function ContextMenuRoot({ onContextMenu, ...p }: ContextMenuRootPropsT) {
+  const [position, setPosition] = useState<ContextMenuContextT["position"]>(undefined);
+  const [isOpen, setOpen] = useState(false);
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = useCallback((ev: globalThis.MouseEvent) => {
+    if (!contentRef.current?.contains(ev.target as Node)) {
+      setOpen(false);
+      setPosition(undefined);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener("click", handleClickOutside);
+
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [handleClickOutside]);
+
+  useEffect(() => {
+    const scrollbarWidth = getBrowserScrollbarWith();
+
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    } else {
+      document.body.style.overflow = "unset";
+      document.body.style.paddingRight = "0px";
+    };
+  }, [isOpen]);
+
+
+  const handleContextMenu = (ev: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
+    if (!contentRef.current) return;
+
+    ev.preventDefault();
+
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    const menuWidth = contentRef.current.scrollWidth;
+    const menuHeight = contentRef.current.scrollHeight;
+
+    let x = ev.clientX;
+    let y = ev.clientY;
+
+    if (x + menuWidth > viewportWidth) {
+      x = viewportWidth - menuWidth - 10;
+    }
+    if (y + menuHeight > viewportHeight) {
+      y = viewportHeight - menuHeight - 10;
+    }
+
+    setPosition({ x, y });
+    setOpen(true);
+  }
+
+
+  return (
+    <ContextMenuContext value={{ contentRef, isOpen, position }}>
+      <div
+        onContextMenu={ev => {
+          onContextMenu?.(ev);
+          handleContextMenu(ev);
+        }}
+        {...p}
+      />
+    </ContextMenuContext>
+  )
+}

package/src/components/Drawer/Drawer.ts

@@ -0,0 +1,10 @@
+import { DrawerBody } from "./DrawerBody";
+import { DrawerRoot } from "./DrawerRoot";
+import { DrawerPortal } from "./DrawerPortal";
+import { DrawerToggle } from "./DrawerToggle";
+
+export const Drawer = Object.assign(DrawerRoot, {
+  Toggle: DrawerToggle,
+  Portal: DrawerPortal,
+  Body: DrawerBody
+});

package/src/components/Drawer/DrawerBody.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { cn } from "@kadoui/utils";
+import { motion, HTMLMotionProps } from "framer-motion";
+import { ReactNode, use, useEffect, useRef } from "react";
+
+import { DrawerContext } from "./DrawerContext";
+
+export type DrawerBodyPropsT = HTMLMotionProps<"div"> & {
+  position?: "top" | "right" | "bottom" | "left";
+};
+
+export function DrawerBody({ position, dir, children, className, ...props }: DrawerBodyPropsT) {
+  const { isOpen } = use(DrawerContext);
+
+  const bodyRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      const indexElement = bodyRef.current?.querySelector("[data-drawer='index']") as HTMLElement | null | undefined;
+      indexElement?.focus();
+    };
+  }, [isOpen]);
+
+  const currentDir: "ltr" | "rtl" = (dir || document.documentElement.getAttribute("dir") || "ltr") as ("ltr" | "rtl");
+  const currentPosition = position || (currentDir === "ltr" ? "left" : "right");
+  const direction = ["right", "left"].includes(currentPosition) ? "y" : "x";
+
+  const width = direction === "y" ? "clamp(300px,30%,30%)" : undefined;
+  const height = direction === "y" ? undefined : "50%";
+
+  return (
+    <motion.div
+      ref={bodyRef}
+      onClick={ev => ev.stopPropagation()}
+      className={cn("absolute bg-background p-3 overflow-y-auto", className)}
+      initial={
+        direction === "y"
+          ? { x: currentPosition === "left" ? "-100%" : "100%" }
+          : { y: currentPosition === "top" ? "-100%" : "100%" }
+      }
+      animate={{ y: 0, x: 0 }}
+      exit={
+        direction === "y"
+          ? { x: currentPosition === "left" ? "-100%" : "100%" }
+          : { y: currentPosition === "top" ? "-100%" : "100%" }
+      }
+      style={{
+        width,
+        height,
+        ...(
+          currentPosition === "top"
+            ? { top: 0, left: 0, right: 0 }
+            : currentPosition === "right"
+              ? { top: 0, bottom: 0, right: 0 }
+              : currentPosition === "bottom"
+                ? { bottom: 0, left: 0, right: 0 }
+                : { top: 0, bottom: 0, left: 0 }
+        )
+      }}
+      transition={{ ease: "easeInOut" }}
+      {...props}
+    >
+      {children as ReactNode}
+    </motion.div>
+  );
+};

package/src/components/Drawer/DrawerContext.ts

@@ -0,0 +1,8 @@
+import { createContext, Dispatch, SetStateAction } from "react";
+
+export type DrawerContextT = {
+  isOpen: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+export const DrawerContext = createContext<DrawerContextT>({} as DrawerContextT);

package/src/components/Drawer/DrawerPortal.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { use } from "react";
+import { cn } from "@kadoui/utils";
+import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion";
+
+import { Portal } from "../Portal/Portal";
+import { DrawerContext } from "./DrawerContext";
+import { ClientOnly } from "../ClientOnly/ClientOnly";
+
+export type DrawerPortalPropsT = HTMLMotionProps<"div">;
+
+export function DrawerPortal({ onClick, className, ...props }: DrawerPortalPropsT) {
+  const { isOpen, setOpen } = use(DrawerContext);
+
+  return (
+    <ClientOnly>
+      <Portal>
+        <AnimatePresence>
+          {isOpen ? (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={ev => {
+                onClick?.(ev);
+                setOpen(false);
+              }}
+              className={cn(
+                "fixed inset-0 z-50 bg-foreground/50",
+                className
+              )}
+              {...props}
+            />
+          ) : null}
+        </AnimatePresence>
+      </Portal>
+    </ClientOnly>
+  );
+}

package/src/components/Drawer/DrawerRoot.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { getBrowserScrollbarWith } from "@kadoui/utils";
+import { useState, useEffect, PropsWithChildren } from "react";
+
+import { DrawerContext } from "./DrawerContext";
+
+export type DrawerRootPropsT = PropsWithChildren;
+
+export function DrawerRoot({ children }: DrawerRootPropsT) {
+  const [isOpen, setOpen] = useState(false);
+
+  useEffect(() => {
+    const handleEscape = (ev: KeyboardEvent) => {
+      if (ev.key === "Escape") {
+        setOpen(false);
+      };
+    };
+
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [])
+
+  useEffect(() => {
+    const scrollbarWidth = getBrowserScrollbarWith();
+
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    } else {
+      document.body.style.overflow = "unset";
+      document.body.style.paddingRight = "0px";
+    };
+  }, [isOpen]);
+
+  return (
+    <DrawerContext value={{ isOpen, setOpen }}>
+      {children}
+    </DrawerContext>
+  );
+}

package/src/components/Drawer/DrawerToggle.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { ButtonHTMLAttributes, use } from "react";
+
+import { DrawerContext } from "./DrawerContext";
+
+export type DrawerTogglePropsT = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function DrawerToggle({ onClick, ...props }: DrawerTogglePropsT) {
+  const { setOpen } = use(DrawerContext);
+
+  return (
+    <button
+      onClick={(ev) => {
+        onClick?.(ev);
+        setOpen(prev => !prev);
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/Dropdown/Dropdown.ts

@@ -0,0 +1,8 @@
+import { DropdownMenu } from "./DropdownMenu";
+import { DropdownRoot } from "./DropdownRoot";
+import { DropdownToggle } from "./DropdownToggle";
+
+export const Dropdown = Object.assign(DropdownRoot, {
+  Toggle: DropdownToggle,
+  Menu: DropdownMenu
+});

package/src/components/Dropdown/DropdownContext.ts

@@ -0,0 +1,10 @@
+import { createContext, Dispatch, RefObject, SetStateAction } from "react";
+
+export type DropdownContextT = {
+  isOpen: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  toggleRef: RefObject<HTMLButtonElement | null>;
+  menuRef: RefObject<HTMLDivElement | null>;
+}
+
+export const DropdownContext = createContext<DropdownContextT>({} as DropdownContextT);

package/src/components/Dropdown/DropdownMenu.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { cn } from "@kadoui/utils";
+import { HTMLAttributes, use } from "react";
+
+import { DropdownContext } from "./DropdownContext";
+
+export type DropdownMenuPropsT = HTMLAttributes<HTMLDivElement> & {
+  preventClose?: boolean;
+}
+
+export function DropdownMenu({ preventClose, onClick, className, ...p }: DropdownMenuPropsT) {
+  const { menuRef, isOpen } = use(DropdownContext);
+
+  return (
+    isOpen ? (
+      <div
+        ref={menuRef}
+        onClick={ev => {
+          if (preventClose) {
+            ev.stopPropagation();
+          }
+
+          onClick?.(ev);
+        }}
+        className={cn(
+          "absolute w-max z-10",
+          className
+        )}
+        {...p}
+      />
+    ) : null
+  )
+}

package/src/components/Dropdown/DropdownRoot.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { cn, selectAccessibleChildren } from "@kadoui/utils";
+import { HTMLAttributes, KeyboardEvent, useEffect, useRef, useState } from "react";
+
+import { DropdownContext } from "./DropdownContext";
+
+
+export type DropdownRootPropsT = HTMLAttributes<HTMLDivElement> & {
+  accessHorizontalArrows?: "ArrowRight" | "ArrowLeft";
+}
+
+export function DropdownRoot({ accessHorizontalArrows, onKeyDown, className, ...p }: DropdownRootPropsT) {
+  const [isOpen, setOpen] = useState(false);
+
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const closeHandler = () => {
+      setOpen(false);
+    }
+
+    window.addEventListener("click", closeHandler);
+
+    return () => window.removeEventListener("click", closeHandler);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      selectFirstMenuChild();
+    }
+  }, [isOpen]);
+
+  const selectFirstMenuChild = () => {
+    if (!menuRef.current) {
+      return;
+    }
+
+    const children = selectAccessibleChildren(menuRef.current);
+    const firstChild = children[0];
+
+    if (!firstChild) {
+      return;
+    }
+
+    firstChild.focus();
+  }
+
+  const handleKeyDown = (ev: KeyboardEvent<HTMLDivElement>) => {
+    if (!accessHorizontalArrows) {
+      return null;
+    }
+
+    if (ev.key === "ArrowRight") {
+      if (accessHorizontalArrows === "ArrowRight") {
+        setOpen(true);
+        selectFirstMenuChild();
+      } else {
+        setOpen(false);
+        toggleRef.current?.focus();
+      }
+    }
+
+    if (ev.key === "ArrowLeft") {
+      if (accessHorizontalArrows === "ArrowLeft") {
+        setOpen(true);
+        selectFirstMenuChild();
+      } else {
+        setOpen(false);
+        toggleRef.current?.focus();
+      }
+    }
+  }
+
+  return (
+    <DropdownContext value={{
+      isOpen, setOpen, toggleRef, menuRef
+    }}>
+      <div
+        className={cn("relative w-fit max-w-full", className)}
+        onKeyDown={ev => {
+          onKeyDown?.(ev);
+          handleKeyDown(ev);
+        }}
+        {...p}
+      />
+    </DropdownContext>
+  )
+}

package/src/components/Dropdown/DropdownToggle.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { HTMLAttributes, use } from "react";
+
+import { DropdownContext } from "./DropdownContext";
+
+export type DropdownTogglePropsT = HTMLAttributes<HTMLButtonElement>;
+
+export function DropdownToggle({ onClick, ...props }: DropdownTogglePropsT) {
+  const { toggleRef, setOpen } = use(DropdownContext);
+
+  return (
+    <button
+      ref={toggleRef}
+      onClick={ev => {
+        ev.stopPropagation();
+        onClick?.(ev);
+        setOpen(prev => !prev);
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/LinkLoader/LinkLoader.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import { cn } from "@kadoui/utils";
+import { LoaderIcon } from "lucide-react";
+import { useLinkStatus } from "next/link";
+import { PropsWithChildren } from "react";
+
+export type LinkLoaderPropsT = PropsWithChildren & {
+  className?: string;
+}
+
+export function LinkLoader({ children, className }: LinkLoaderPropsT) {
+  const { pending } = useLinkStatus()
+
+  return pending ? <LoaderIcon className={cn("compatible-icon animate-spin", className)} /> : children
+}

package/src/components/Modal/Modal.ts

@@ -0,0 +1,14 @@
+import { ModalBody } from "./ModalBody";
+import { ModalRoot } from "./ModalRoot";
+import { ModalHeader } from "./ModalHeader";
+import { ModalPortal } from "./ModalPortal";
+import { ModalToggle } from "./ModalTrigger";
+import { ModalContent } from "./ModalContent";
+
+export const Modal = Object.assign(ModalRoot, {
+  Toggle: ModalToggle,
+  Portal: ModalPortal,
+  Content: ModalContent,
+  Header: ModalHeader,
+  Body: ModalBody
+});

package/src/components/Modal/ModalBody.tsx

@@ -0,0 +1,12 @@
+import { cn } from "@kadoui/utils";
+import type { HTMLAttributes } from "react";
+
+export type ModalBodyPropsT = HTMLAttributes<HTMLDivElement>;
+
+export function ModalBody({ children, className, ...props }: ModalBodyPropsT) {
+  return (
+    <div className={cn("py-3 px-1.5 mx-1.5 max-h-[calc(100%-4rem)] overflow-y-auto", className)} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/components/Modal/ModalContent.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { cn } from "@kadoui/utils";
+import { use, useEffect, useRef } from "react";
+import { AnimatePresence, HTMLMotionProps, motion } from "framer-motion";
+
+import { ModalContext } from "./ModalContext";
+
+export type ModalContentPropsT = HTMLMotionProps<"div">;
+
+export function ModalContent({ onClick, className, ...props }: ModalContentPropsT) {
+  const { isOpen } = use(ModalContext);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      const indexElement = contentRef.current?.querySelector("[data-modal='index']") as HTMLElement | null | undefined;
+      indexElement?.focus();
+    };
+  }, [isOpen]);
+
+  return (
+    <AnimatePresence>
+      {isOpen ? (
+        <motion.div
+          ref={contentRef}
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.9 }}
+          transition={{ ease: "easeInOut" }}
+          onClick={ev => {
+            onClick?.(ev);
+            ev.stopPropagation();
+          }}
+          className={cn(
+            "bg-background rounded-2xl w-max max-w-[90%] h-full max-h-[90%]",
+            className,
+          )}
+          {...props}
+        />
+      ) : null}
+    </AnimatePresence>
+  );
+}

package/src/components/Modal/ModalContext.ts

@@ -0,0 +1,8 @@
+import { createContext, Dispatch, SetStateAction } from "react";
+
+export type ModalContextT = {
+  isOpen: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export const ModalContext = createContext<ModalContextT>({} as ModalContextT);

package/src/components/Modal/ModalHeader.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@kadoui/utils";
+import type { HTMLAttributes } from "react";
+
+export type ModalHeaderPropsT = HTMLAttributes<HTMLDivElement>;
+
+export function ModalHeader({ className, ...props }: ModalHeaderPropsT) {
+  return (
+    <div className={cn("h-16 f-align px-3 bg-background rounded-t-2xl border-b border-separator sticky top-0", className)} {...props} />
+  );
+}