@kadoui/react 1.0.0 → 1.1.2

package/src/components/Carousel/CarouselRoot.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import { cn } from "@kadoui/utils";
-import { HTMLAttributes, useEffect, useRef, useState } from "react";
-
-import { CarouselContext } from "./CarouselContext";
-
-export type CarouselRootPropsT = HTMLAttributes<HTMLDivElement>;
-
-export function CarouselRoot({ children, className, ...props }: CarouselRootPropsT) {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const [leftOpacity, setLeftOpacity] = useState(0);
-  const [rightOpacity, setRightOpacity] = useState(1);
-
-  const updateFade = () => {
-    const el = scrollRef.current;
-    if (!el) return;
-
-    const { scrollLeft, scrollWidth, clientWidth } = el;
-    const maxScroll = scrollWidth - clientWidth;
-
-    if (maxScroll <= 0) {
-      setLeftOpacity(0);
-      setRightOpacity(0);
-      return;
-    }
-
-    const scrollRatio = Math.abs(+(scrollLeft / maxScroll));
-
-    const left = Math.min(1, scrollRatio * 2);
-    const right = Math.min(1, (1 - scrollRatio) * 2);
-
-    setLeftOpacity(+left.toFixed(1));
-    setRightOpacity(+right.toFixed(1));
-  };
-
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-
-    updateFade();
-
-    el.addEventListener("scroll", updateFade);
-    window.addEventListener("resize", updateFade);
-
-    return () => {
-      el.removeEventListener("scroll", updateFade);
-      window.removeEventListener("resize", updateFade);
-    };
-  }, []);
-
-  return (
-    <CarouselContext value={{ scrollRef }}>
-      <div className={cn("relative", className)} {...props}>
-        {/* Left Fade */}
-        <div
-          className="pointer-events-none absolute right-0 top-0 h-full w-1/6 bg-gradient-to-l from-background from-5% to-transparent z-10 transition-opacity"
-          style={{ opacity: leftOpacity }}
-        />
-        {/* --- */}
-
-        {/* Scrollable container */}
-        {children}
-        {/* --- */}
-
-        {/* Right Fade */}
-        <div
-          className="pointer-events-none absolute left-0 top-0 h-full w-1/6 bg-gradient-to-r from-background from-5% to-transparent z-10 transition-opacity"
-          style={{ opacity: rightOpacity }}
-        />
-        {/* --- */}
-      </div>
-    </CarouselContext>
-  );
-}

package/src/components/ClientOnly/ClientOnly.tsx

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

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

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

package/src/components/ContextMenu/ContextMenuContent.tsx

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

@@ -1,9 +0,0 @@
-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

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

@@ -1,10 +0,0 @@
-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

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

@@ -1,8 +0,0 @@
-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

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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

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

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

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

@@ -1,14 +0,0 @@
-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
-});