@kadoui/react 1.0.0

package/src/components/Modal/ModalPortal.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 { 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/Progress/ProgressBar.tsx

@@ -0,0 +1,29 @@
+"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>
+  )
+}

package/src/components/Progress/ProgressContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+export type ProgressContextT = {
+  value: number;
+  maxValue: number;
+}
+
+export const ProgressContext = createContext<ProgressContextT>({} as ProgressContextT);

package/src/components/Progress/ProgressRoot.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { cn } from "@kadoui/utils";
+import type { HTMLAttributes } from "react";
+
+import { ProgressContext } from "./ProgressContext";
+
+export type ProgressRootPropsT = HTMLAttributes<HTMLDivElement> & {
+  value: number;
+  maxValue?: number;
+}
+
+export function ProgressRoot({ value, maxValue = 100, className, ...p }: ProgressRootPropsT) {
+  return (
+    <ProgressContext value={{ value, maxValue }}>
+      <div
+        className={cn("w-full rounded-kado overflow-hidden h-6 bg-palette/10", className)}
+        {...p}
+      />
+    </ProgressContext>
+  )
+}

package/src/components/QrCode/QrCode.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import QRCode, { QRCodeRenderersOptions } from "qrcode";
+import React, { HTMLAttributes, useEffect, useRef } from "react";
+
+export type QrCodePropsT = HTMLAttributes<HTMLCanvasElement> & {
+  value: string
+  options: QRCodeRenderersOptions;
+}
+
+export function QrCode({ value, options, ...props }: QrCodePropsT) {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    console.log(value)
+    QRCode.toCanvas(canvasRef.current, value, options, function (error) {
+      if (error) console.error(error);
+    });
+  }, [value, options]);
+
+  return <canvas ref={canvasRef} {...props} />;
+}

package/src/components/Rating/Rating.ts

@@ -0,0 +1,6 @@
+import { RatingRoot } from "./RatingRoot";
+import { RatingItems } from "./RatingItems";
+
+export const Rating = Object.assign(RatingRoot, {
+  Items: RatingItems
+});

package/src/components/Rating/RatingContext.ts

@@ -0,0 +1,8 @@
+import { createContext, Dispatch, SetStateAction } from "react";
+
+export type RatingContextT = {
+  hoverValue: number | null;
+  setHoverValue: Dispatch<SetStateAction<number | null>>;
+}
+
+export const RatingContext = createContext<RatingContextT>({} as RatingContextT);