@kadoui/react 1.0.0 → 1.0.1

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

package/src/components/Modal/ModalBody.tsx

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

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

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

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

package/src/components/Modal/ModalPortal.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 { ModalContext } from "./ModalContext";
-import { ClientOnly } from "../ClientOnly/ClientOnly";
-
-export type ModalPortalPropsT = HTMLMotionProps<"div">;
-
-export function ModalPortal({ onClick, className, ...props }: ModalPortalPropsT) {
-  const { isOpen, setOpen } = use(ModalContext);
-
-  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 f-center bg-foreground/10",
-                className
-              )}
-              {...props}
-            />
-          ) : null}
-        </AnimatePresence>
-      </Portal>
-    </ClientOnly>
-  );
-}

package/src/components/Modal/ModalRoot.tsx

@@ -1,47 +0,0 @@
-"use client"
-
-import { getBrowserScrollbarWith } from "@kadoui/utils";
-import { useState, useEffect, PropsWithChildren } from "react";
-
-import { ModalContext } from "./ModalContext";
-
-export type ModalRootPropsT = PropsWithChildren & {
-  defaultOpen?: boolean;
-}
-
-export function ModalRoot({ children, defaultOpen = false }: ModalRootPropsT) {
-  const [isOpen, setOpen] = useState(defaultOpen);
-
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.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 (
-    <ModalContext value={{ isOpen, setOpen }}>
-      {children}
-    </ModalContext>
-  );
-}

package/src/components/Modal/ModalTrigger.tsx

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

package/src/components/Otp/Otp.ts

@@ -1,8 +0,0 @@
-import { OtpRoot } from "./OtpRoot";
-import { OtpInputs } from "./OtpInputs";
-import { OtpHiddenInput } from "./OtpHiddenInput";
-
-export const Otp = Object.assign(OtpRoot, {
-  Inputs: OtpInputs,
-  HiddenInput: OtpHiddenInput
-});

package/src/components/Otp/OtpContext.ts

@@ -1,10 +0,0 @@
-import { createContext, RefObject } from "react";
-
-export type createContextT = {
-  inputs?: RefObject<(HTMLInputElement | null)[]>;
-  getInputsValue: () => string
-}
-
-export const OtpContext = createContext<createContextT>({
-  getInputsValue: () => ""
-});

package/src/components/Otp/OtpHiddenInput.tsx

@@ -1,15 +0,0 @@
-"use client";
-
-import { InputHTMLAttributes, use } from "react";
-
-import { OtpContext } from "./OtpContext";
-
-export type OtpHiddenInputPropsT = InputHTMLAttributes<HTMLInputElement>;
-
-export function OtpHiddenInput({ name, ...p }: OtpHiddenInputPropsT) {
-  const { getInputsValue } = use(OtpContext);
-
-  return (
-    <input type="hidden" tabIndex={-1} name={name || "otp"} value={getInputsValue()} {...p} />
-  )
-}

package/src/components/Otp/OtpInputs.tsx

@@ -1,86 +0,0 @@
-"use client";
-
-import { cn } from "@kadoui/utils";
-import { ClipboardEvent, InputHTMLAttributes, KeyboardEvent, use } from "react";
-
-import { OtpContext } from "./OtpContext";
-
-export type OtpInputsPropsT = InputHTMLAttributes<HTMLInputElement> & {
-  length: number;
-  onLastChange?: (otp: string) => void;
-}
-
-export function OtpInputs({ className, name, length, onLastChange, ...props }: OtpInputsPropsT) {
-  const { inputs, getInputsValue } = use(OtpContext);
-
-  const handlePaste = (ev: ClipboardEvent<HTMLInputElement>, startIndex: number) => {
-    ev.preventDefault();
-
-    const pastedData = ev.clipboardData.getData("text").replace(/\s/g, ""); // Remove whitespace
-    if (!pastedData) return;
-
-    for (let i = 0; i < pastedData.length; i++) {
-      const inputIndex = startIndex + i;
-      if (inputIndex >= length) break; // Don't exceed OTP length
-
-      const input = inputs?.current[inputIndex];
-      const indexedPastedData = pastedData[i];
-      if (input && indexedPastedData) {
-        input.value = indexedPastedData;
-      }
-    }
-
-    const nextIndex = Math.min(startIndex + pastedData.length, length - 1);
-    inputs?.current[nextIndex]?.focus();
-
-    const otpValue = getInputsValue();
-    if (otpValue.length === length) {
-      onLastChange?.(otpValue);
-    }
-  };
-
-  const handleInputChange = (value: string, index: number) => {
-    if (value) {
-      const currentInput = inputs?.current[index];
-      const currentValue = currentInput?.value[currentInput.value.length - 1];
-      if (currentValue) {
-        currentInput.value = currentValue;
-      }
-
-      const nextInput = inputs?.current[index + 1]
-      if (nextInput) {
-        nextInput.value = "";
-        nextInput.focus();
-
-        return
-      }
-
-      onLastChange?.(getInputsValue());
-    }
-  };
-
-  const handleBackspace = (e: KeyboardEvent<HTMLInputElement>, index: number) => {
-    if (e.key === "Backspace" && !e.currentTarget.value && index > 0) {
-      inputs?.current[index - 1]?.focus();
-    }
-  };
-
-  return Array.from({ length }).map((_, index) => (
-    <input
-      key={index}
-      autoComplete="off"
-      name={`${name || "otp"}-${index}`}
-      onPaste={ev => handlePaste(ev, index)}
-      onKeyDown={ev => handleBackspace(ev, index)}
-      onChange={ev => handleInputChange(ev.target.value, index)}
-      className={cn("input-outline input-square text-center", className)}
-      ref={el => {
-        if (inputs) {
-          inputs.current[index] = el;
-        }
-      }}
-      {...props}
-    />
-  )
-  );
-}

package/src/components/Otp/OtpRoot.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-import { cn } from "@kadoui/utils";
-import { HTMLAttributes, useEffect, useRef } from "react";
-
-import { OtpContext } from "./OtpContext";
-
-export type OtpRootPropsT = HTMLAttributes<HTMLDivElement>;
-
-export function OtpRoot({ className, ...props }: OtpRootPropsT) {
-  const inputs = useRef<(HTMLInputElement | null)[]>([]);
-
-  useEffect(() => {
-    inputs.current[0]?.focus();
-  }, []);
-
-  const getInputsValue = () => {
-    return inputs?.current.map(input => input?.value || "").join("") || "";
-  };
-
-  return (
-    <OtpContext value={{ inputs, getInputsValue }}>
-      <div className={cn("f-align gap-1.5", className)} {...props} />
-    </OtpContext>
-  );
-}

package/src/components/Pagination/Pagination.ts

@@ -1,15 +0,0 @@
-import { PaginationCounts } from "./PaginationCounts";
-import { PaginationNextBtn } from "./PaginationNextBtn";
-import { PaginationPrevBtn } from "./PaginationPrevBtn";
-import { PaginationStateRoot } from "./PaginationStateRoot";
-import { PaginationSearchParamsRoot } from "./PaginationSearchParamsRoot";
-
-const baseComponents = {
-  Counts: PaginationCounts,
-  NextBtn: PaginationNextBtn,
-  PrevBtn: PaginationPrevBtn
-}
-
-export const PaginationWithState = Object.assign(PaginationStateRoot, baseComponents);
-
-export const PaginationWithSearchParams = Object.assign(PaginationSearchParamsRoot, baseComponents);

package/src/components/Pagination/PaginationContext.tsx

@@ -1,10 +0,0 @@
-import { createContext } from 'react';
-
-export type PaginationContextT = {
-  page: number;
-  pageLength: number;
-  nextPage: () => void;
-  prevPage: () => void;
-}
-
-export const PaginationContext = createContext<PaginationContextT>({} as PaginationContextT);

package/src/components/Pagination/PaginationCounts.tsx

@@ -1,17 +0,0 @@
-"use client";
-
-import { HTMLAttributes, use } from "react";
-
-import { PaginationContext } from "./PaginationContext";
-
-export type PaginationCountsPropsT = HTMLAttributes<HTMLParagraphElement>;
-
-export function PaginationCounts(props: PaginationCountsPropsT) {
-  const { page, pageLength } = use(PaginationContext);
-
-  return (
-    <p {...props}>
-      Page {page} / {pageLength}
-    </p>
-  );
-}

package/src/components/Pagination/PaginationNextBtn.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { HTMLAttributes, use } from "react";
-import { ChevronRightIcon } from "lucide-react";
-
-import { PaginationContext } from "./PaginationContext";
-
-export type PaginationNextBtnPropsT = HTMLAttributes<HTMLButtonElement> & {
-  disabled?: boolean;
-};
-
-export function PaginationNextBtn({ onClick, disabled, children, ...props }: PaginationNextBtnPropsT) {
-  const { page, pageLength, nextPage } = use(PaginationContext);
-
-  return (
-    <button
-      disabled={disabled || page === pageLength}
-      onClick={ev => {
-        onClick?.(ev);
-        nextPage();
-      }}
-      {...props}
-    >
-      {children || <ChevronRightIcon className="compatible-icon" />}
-    </button>
-  )
-}

package/src/components/Pagination/PaginationPrevBtn.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { HTMLAttributes, use } from "react";
-import { ChevronLeftIcon } from "lucide-react";
-
-import { PaginationContext } from "./PaginationContext";
-
-export type PaginationPrevBtnPropsT = HTMLAttributes<HTMLButtonElement> & {
-  disabled?: boolean;
-}
-
-export function PaginationPrevBtn({ onClick, disabled, children, ...props }: PaginationPrevBtnPropsT) {
-  const { page, prevPage } = use(PaginationContext);
-
-  return (
-    <button
-      disabled={disabled || page === 1}
-      onClick={ev => {
-        onClick?.(ev);
-        prevPage();
-      }}
-      {...props}
-    >
-      {children || <ChevronLeftIcon className="compatible-icon" />}
-    </button>
-  )
-}