@kadoui/react 1.0.0 → 1.1.2

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

package/src/components/Pagination/PaginationSearchParamsRoot.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import { useRouter, useSearchParams } from "next/navigation";
-import { PropsWithChildren, useEffect, useState } from "react";
-
-import { PaginationContext } from "./PaginationContext";
-
-export type PaginationSearchParamsRootPropsT = PropsWithChildren & {
-  pageKey?: string;
-  pageLength: number;
-}
-
-export function PaginationSearchParamsRoot({ pageKey, pageLength, children }: PaginationSearchParamsRootPropsT) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const [currentPage, setCurrentPage] = useState(1);
-
-  useEffect(() => {
-    setCurrentPage(+(searchParams.get(pageKey || "page") || "1"));
-  }, [pageKey, searchParams]);
-
-  const pushRouter = (page: number) => {
-    const params = new URLSearchParams(searchParams.toString());
-    params.set(pageKey || "page", page.toString());
-    router.push("?" + params.toString())
-  }
-
-  const nextPage = () => {
-    if (currentPage < pageLength) {
-      pushRouter(currentPage + 1)
-    }
-  }
-
-  const prevPage = () => {
-    if (currentPage > 1) {
-      pushRouter(currentPage - 1)
-    }
-  }
-
-  return (
-    <PaginationContext.Provider value={{ page: currentPage, pageLength, nextPage, prevPage }}>
-      {children}
-    </PaginationContext.Provider>
-  )
-}

package/src/components/Pagination/PaginationStateRoot.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import { PropsWithChildren, useState } from "react";
-
-import { PaginationContext } from "./PaginationContext";
-
-export type PaginationStateRootPropsT = PropsWithChildren & {
-  pageLength: number;
-}
-
-export function PaginationStateRoot({ pageLength, children }: PaginationStateRootPropsT) {
-  const [page, setPage] = useState(1);
-
-  const nextPage = () => setPage(prev => prev < pageLength ? prev + 1 : prev);
-
-  const prevPage = () => setPage(prev => prev > 1 ? prev - 1 : prev);
-
-  return (
-    <PaginationContext.Provider value={{ page, pageLength, nextPage, prevPage }}>
-      {children}
-    </PaginationContext.Provider>
-  );
-}

package/src/components/PasswordInput/PasswordInput.ts

@@ -1,8 +0,0 @@
-import { PasswordInputRoot } from "./PasswordInputRoot";
-import { PasswordInputField } from "./PasswordInputField";
-import { PasswordInputToggle } from "./PasswordInputToggle";
-
-export const PasswordInput = Object.assign(PasswordInputRoot, {
-  Field: PasswordInputField,
-  Toggle: PasswordInputToggle
-});

package/src/components/PasswordInput/PasswordInputContext.tsx

@@ -1,8 +0,0 @@
-import { createContext, Dispatch, SetStateAction } from "react";
-
-export type PasswordInputContextT = {
-  isVisible: boolean;
-  setIsVisible: Dispatch<SetStateAction<boolean>>;
-}
-
-export const PasswordInputContext = createContext<PasswordInputContextT>({} as PasswordInputContextT);

package/src/components/PasswordInput/PasswordInputField.tsx

@@ -1,15 +0,0 @@
-"use client";
-
-import { InputHTMLAttributes, use } from "react";
-
-import { PasswordInputContext } from "./PasswordInputContext";
-
-export type PasswordInputFieldPropsT = InputHTMLAttributes<HTMLInputElement>;
-
-export function PasswordInputField(props: PasswordInputFieldPropsT) {
-  const { isVisible } = use(PasswordInputContext);
-
-  return (
-    <input type={isVisible ? "text" : "password"} {...props} />
-  );
-}

package/src/components/PasswordInput/PasswordInputRoot.tsx

@@ -1,17 +0,0 @@
-"use client";
-
-import { LabelHTMLAttributes, useState } from "react";
-
-import { PasswordInputContext } from "./PasswordInputContext";
-
-export type PasswordInputRootPropsT = LabelHTMLAttributes<HTMLLabelElement>;
-
-export function PasswordInputRoot(props: PasswordInputRootPropsT) {
-  const [isVisible, setIsVisible] = useState(false);
-
-  return (
-    <PasswordInputContext value={{ isVisible, setIsVisible }}>
-      <label {...props} />
-    </PasswordInputContext>
-  )
-}

package/src/components/PasswordInput/PasswordInputToggle.tsx

@@ -1,52 +0,0 @@
-"use client";
-
-import { ButtonHTMLAttributes, use } from "react";
-import { EyeClosedIcon, EyeIcon } from "lucide-react";
-import { AnimatePresence, motion } from "framer-motion";
-
-import { PasswordInputContext } from "./PasswordInputContext";
-
-export type PasswordInputTogglePropsT = ButtonHTMLAttributes<HTMLButtonElement>;
-
-export function PasswordInputToggle({ onClick, children, ...props }: PasswordInputTogglePropsT) {
-  const { isVisible, setIsVisible } = use(PasswordInputContext);
-
-  return (
-    <button
-      type="button"
-      onClick={ev => {
-        setIsVisible(prev => !prev);
-        onClick?.(ev);
-      }}
-      {...props}
-    >
-      {children || (
-        <AnimatePresence initial={false} mode="wait">
-          {isVisible ? (
-            <motion.div
-              key="visible"
-              className="compatible-icon"
-              initial={{ opacity: 0, y: "-25%" }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: "25%" }}
-              transition={{ duration: 0.1 }}
-            >
-              <EyeIcon className="size-full" />
-            </motion.div>
-          ) : (
-            <motion.div
-              key="hidden"
-              className="compatible-icon"
-              initial={{ opacity: 0, y: "-25%" }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: "25%" }}
-              transition={{ duration: 0.1 }}
-            >
-              <EyeClosedIcon className="size-full" />
-            </motion.div>
-          )}
-        </AnimatePresence>
-      )}
-    </button>
-  );
-}

package/src/components/Portal/Portal.tsx

@@ -1,17 +0,0 @@
-"use client";
-
-import { createPortal } from "react-dom";
-import { PropsWithChildren } from "react";
-
-export type PortalPropsT = PropsWithChildren & {
-  container?: Element;
-}
-
-export function Portal({ children, container }: PortalPropsT) {
-  return createPortal(
-    <>
-      {children}
-    </>,
-    container || document.body
-  );
-}

package/src/components/Progress/Progress.ts

@@ -1,6 +0,0 @@
-import { ProgressBar } from "./ProgressBar";
-import { ProgressRoot } from "./ProgressRoot";
-
-export const Progress = Object.assign(ProgressRoot, {
-  Bar: ProgressBar
-});

package/src/components/Progress/ProgressBar.tsx

@@ -1,29 +0,0 @@
-"use client"
-
-import { use } from "react";
-import { cn } from "@kadoui/utils";
-import { HTMLMotionProps, motion } from "framer-motion";
-
-import { ProgressContext } from "./ProgressContext";
-
-export type ProgressBarPropsT = HTMLMotionProps<"div"> & {
-  duration?: number;
-}
-
-export function ProgressBar({ className, duration, children, ...p }: ProgressBarPropsT) {
-  const { value, maxValue } = use(ProgressContext);
-
-  const percentage = Math.min(100, Math.max(0, (value / maxValue) * 100));
-
-  return (
-    <motion.div
-      className={cn("f-center h-full bg-palette text-brush max-w-full", className)}
-      initial={{ width: 0 }}
-      whileInView={{ width: `${percentage}%` }}
-      transition={{ duration: duration || 3 }}
-      {...p}
-    >
-      {children || <span className="text-xs">{percentage}%</span>}
-    </motion.div>
-  )
-}