@kadoui/react 1.0.0 → 1.0.1

package/src/components/Accordion/AccordionRoot.tsx

@@ -1,17 +0,0 @@
-"use client";
-
-import { PropsWithChildren, useState } from "react";
-
-import { AccordionContext } from "./AccordionContext";
-
-export type AccordionRootPropsT = PropsWithChildren;
-
-export function AccordionRoot({ children }: AccordionRootPropsT) {
-  const [isOpen, setOpen] = useState(false);
-
-  return (
-    <AccordionContext value={{ isOpen, setOpen }}>
-      {children}
-    </AccordionContext>
-  )
-}

package/src/components/Accordion/AccordionToggle.tsx

@@ -1,29 +0,0 @@
-"use client";
-
-import { ChevronRightIcon } from "lucide-react";
-import { HTMLAttributes, ReactNode, use } from "react";
-
-import { AccordionContext } from "./AccordionContext";
-
-export type AccordionTogglePropsT = HTMLAttributes<HTMLButtonElement> & {
-  icon?: ReactNode;
-}
-
-export function AccordionToggle({ icon, children, onClick, ...props }: AccordionTogglePropsT) {
-  const { isOpen, setOpen } = use(AccordionContext);
-
-  return (
-    <button
-      onClick={ev => {
-        onClick?.(ev)
-        setOpen(prev => !prev)
-      }}
-      {...props}
-    >
-      <span className={`transition-transform ${isOpen ? "rotate-90" : ""}`}>
-        {icon || <ChevronRightIcon className="compatible-icon" />}
-      </span>
-      {children}
-    </button>
-  )
-}

package/src/components/Affix/Affix.tsx

@@ -1,59 +0,0 @@
-"use client";
-
-import { cn } from "@kadoui/utils";
-import { ChevronUpIcon } from "lucide-react";
-import { useState, useEffect, HTMLAttributes } from "react";
-
-export type AffixPropsT = HTMLAttributes<HTMLButtonElement>
-
-export const Affix = ({ className, onClick, "aria-label": ariaLabel, children, ...props }: AffixPropsT) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const [lastScrollY, setLastScrollY] = useState(0);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      const currentScrollY = window.scrollY;
-      const viewportHeight = window.innerHeight;
-      const scrollThreshold = viewportHeight * 0.5;
-
-      if (currentScrollY > scrollThreshold && currentScrollY > lastScrollY) {
-        setIsVisible(true);
-      } else if (currentScrollY < lastScrollY && currentScrollY < scrollThreshold) {
-        setIsVisible(false);
-      }
-
-      setLastScrollY(currentScrollY);
-    };
-
-    window.addEventListener("scroll", handleScroll, {
-      passive: true
-    });
-
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, [lastScrollY]);
-
-  const scrollToTop = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth"
-    });
-  };
-
-  return (
-    <button
-      onClick={ev => {
-        onClick?.(ev)
-        scrollToTop()
-      }}
-      aria-label={ariaLabel || "Scroll to top"}
-      className={cn(
-        "fixed bottom-3 right-4 transition-all z-50",
-        isVisible ? "" : "opacity-0 translate-y-3 pointer-events-none",
-        className
-      )}
-      {...props}
-    >
-      {children || <ChevronUpIcon className="compatible-icon" />}
-    </button>
-  );
-}

package/src/components/Breadcrumbs/Breadcrumbs.ts

@@ -1,6 +0,0 @@
-import { BreadcrumbsItem } from "./BreadcrumbsItem";
-import { BreadcrumbsRoot } from "./BreadcrumbsRoot";
-
-export const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
-  Item: BreadcrumbsItem,
-});

package/src/components/Breadcrumbs/BreadcrumbsContext.ts

@@ -1,7 +0,0 @@
-import { createContext, ReactNode } from "react";
-
-export type BreadcrumbsContextT = {
-  separator: ReactNode;
-}
-
-export const BreadcrumbsContext = createContext<BreadcrumbsContextT>({} as BreadcrumbsContextT);

package/src/components/Breadcrumbs/BreadcrumbsItem.tsx

@@ -1,24 +0,0 @@
-"use client"
-
-import { cn } from "@kadoui/utils";
-import { type HTMLAttributes, use } from "react";
-
-import { BreadcrumbsContext } from "./BreadcrumbsContext";
-
-export type BreadcrumbsItemPropsT = HTMLAttributes<HTMLDivElement> & {
-  isLast?: boolean;
-}
-
-export function BreadcrumbsItem({ isLast = false, className, children, ...p }: BreadcrumbsItemPropsT) {
-  const { separator } = use(BreadcrumbsContext);
-
-  return (
-    <div
-      className={cn("f-center gap-1.5", className)}
-      {...p}
-    >
-      {children}
-      {!isLast && separator}
-    </div>
-  )
-}

package/src/components/Breadcrumbs/BreadcrumbsRoot.tsx

@@ -1,21 +0,0 @@
-"use client"
-
-import { cn } from "@kadoui/utils";
-import type { HTMLAttributes, ReactNode } from "react";
-
-import { BreadcrumbsContext } from "./BreadcrumbsContext";
-
-export type BreadcrumbsRootPropsT = HTMLAttributes<HTMLElement> & {
-  separator?: ReactNode;
-}
-
-export function BreadcrumbsRoot({ separator = "/", className, ...p }: BreadcrumbsRootPropsT) {
-  return (
-    <BreadcrumbsContext value={{ separator }}>
-      <nav
-        className={cn("f-align gap-3", className)}
-        {...p}
-      />
-    </BreadcrumbsContext>
-  )
-}

package/src/components/Carousel/Carousel.ts

@@ -1,6 +0,0 @@
-import { CarouselRoot } from "./CarouselRoot";
-import { CarouselContainer } from "./CarouselContainer";
-
-export const Carousel = Object.assign(CarouselRoot, {
-  Container: CarouselContainer
-});

package/src/components/Carousel/CarouselContainer.tsx

@@ -1,18 +0,0 @@
-"use client";
-
-import { cn } from "@kadoui/utils";
-import { HTMLAttributes, use } from "react";
-
-import { CarouselContext } from "./CarouselContext";
-
-export type CarouselContainerPropsT = HTMLAttributes<HTMLDivElement>;
-
-export function CarouselContainer({ children, className, ...p }: CarouselContainerPropsT) {
-  const { scrollRef } = use(CarouselContext);
-
-  return (
-    <div ref={scrollRef} className={cn("f-align-scroll", className)} {...p}>
-      {children}
-    </div>
-  );
-}

package/src/components/Carousel/CarouselContext.ts

@@ -1,7 +0,0 @@
-import { createContext, RefObject } from "react";
-
-export type CarouselContextPropsT = {
-  scrollRef: RefObject<HTMLDivElement | null>;
-}
-
-export const CarouselContext = createContext<CarouselContextPropsT>({} as CarouselContextPropsT);

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}
-    />
-  );
-}