@kadoui/react 1.0.0 → 1.0.1

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

package/src/components/Progress/ProgressContext.ts

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

package/src/components/Progress/ProgressRoot.tsx

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

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

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

package/src/components/Rating/RatingContext.ts

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

package/src/components/Rating/RatingItems.tsx

@@ -1,50 +0,0 @@
-"use client";
-
-import { cn } from "@kadoui/utils";
-import { StarIcon } from "lucide-react";
-import { ButtonHTMLAttributes, ReactNode, use } from "react";
-
-import { RatingContext } from "./RatingContext";
-
-export type RatingItemsPropsT = ButtonHTMLAttributes<HTMLButtonElement> & {
-  count: number;
-  value: number;
-  onValueChange: (newValue: number) => void;
-  element?: ReactNode;
-  activeElement?: ReactNode;
-}
-
-export function RatingItems({ count, value, onValueChange, element, activeElement, className, ...p }: RatingItemsPropsT) {
-  const { hoverValue, setHoverValue } = use(RatingContext);
-
-  const defaultElement = element || <StarIcon className="icon-size-3 text-palette" />;
-  const defaultActiveElement = activeElement || <StarIcon className="icon-size-3 text-palette fill-palette" />;
-
-  const displayValue = hoverValue !== null ? hoverValue : value;
-
-  return (
-    Array.from({ length: count }).map((_, index) => {
-      const itemValue = index + 1;
-      const isActive = itemValue <= displayValue;
-
-      return (
-        <button
-          key={index}
-          role="radio"
-          type="button"
-          className={cn(
-            "transition-all px-0.5 not-active:hover:-translate-y-0.5",
-            className
-          )}
-          aria-checked={itemValue === value}
-          onClick={() => onValueChange(itemValue)}
-          onMouseEnter={() => setHoverValue(itemValue)}
-          aria-label={`${itemValue} out of ${count} stars`}
-          {...p}
-        >
-          {isActive ? defaultActiveElement : defaultElement}
-        </button>
-      )
-    })
-  )
-}

package/src/components/Rating/RatingRoot.tsx

@@ -1,22 +0,0 @@
-"use client"
-
-import { cn } from "@kadoui/utils";
-import { HTMLAttributes, useState } from "react";
-
-import { RatingContext, RatingContextT } from "./RatingContext";
-
-export type RatingRootPropsT = HTMLAttributes<HTMLDivElement>
-
-export const RatingRoot = ({ className, ...p }: RatingRootPropsT) => {
-  const [hoverValue, setHoverValue] = useState<RatingContextT["hoverValue"]>(null);
-
-  return (
-    <RatingContext value={{ hoverValue, setHoverValue }}>
-      <div
-        className={cn("f-align w-fit max-w-full", className)}
-        onMouseLeave={() => setHoverValue(null)}
-        {...p}
-      />
-    </RatingContext>
-  )
-}

package/src/components/Sheet/Sheet.tsx

@@ -1,14 +0,0 @@
-import { SheetBody } from "./SheetBody";
-import { SheetRoot } from "./SheetRoot";
-import { SheetHeader } from "./SheetHeader";
-import { SheetPortal } from "./SheetPortal";
-import { SheetToggle } from "./SheetToggle";
-import { SheetContent } from "./SheetContent";
-
-export const Sheet = Object.assign(SheetRoot, {
-  Portal: SheetPortal,
-  Body: SheetBody,
-  Header: SheetHeader,
-  Content: SheetContent,
-  Toggle: SheetToggle
-});

package/src/components/Sheet/SheetBody.tsx

@@ -1,49 +0,0 @@
-"use client";
-
-import { use } from "react";
-import { cn } from "@kadoui/utils";
-import { HTMLMotionProps, motion } from "framer-motion";
-
-import { SheetContext } from "./SheetContext";
-
-export type SheetBodyPropsT = HTMLMotionProps<"div">;
-
-export function SheetBody({ className, ...props }: SheetBodyPropsT) {
-  const { drawerRef, controls, y, closeHandler: handleClose } = use(SheetContext);
-
-  return (
-    <motion.div
-      id="drawer"
-      ref={drawerRef}
-      onClick={(ev) => ev.stopPropagation()}
-      initial={{ y: "100%" }}
-      animate={{ y: "0%" }}
-      exit={{ y: "100%" }}
-      style={{ y }}
-      drag="y"
-      dragControls={controls}
-      dragListener={false}
-      transition={{
-        ease: "easeInOut",
-      }}
-      className={cn(
-        "absolute bottom-0 h-[75%] w-full overflow-hidden bg-background",
-        className
-      )}
-      onDragEnd={() => {
-        if ((y?.get() || 0) >= 100) {
-          handleClose();
-        }
-      }}
-      dragConstraints={{
-        top: 0,
-        bottom: 0,
-      }}
-      dragElastic={{
-        top: 0,
-        bottom: 0.5,
-      }}
-      {...props}
-    />
-  );
-}

package/src/components/Sheet/SheetContent.tsx

@@ -1,8 +0,0 @@
-import { cn } from "@kadoui/utils";
-import { HTMLAttributes } from "react";
-
-export type SheetContentPropsT = HTMLAttributes<HTMLDivElement>;
-
-export function SheetContent({ className, ...props }: SheetContentPropsT) {
-  return <div className={cn("overflow-y-auto h-[calc(100%-1.75rem)] px-3 pb-3", className)} {...props} />;
-}

package/src/components/Sheet/SheetContext.ts

@@ -1,14 +0,0 @@
-import { AnimationScope, DragControls, MotionValue } from "framer-motion";
-import { createContext, Dispatch, RefObject, SetStateAction } from "react";
-
-export type SheetContextT = {
-  isOpen: boolean;
-  setOpen: Dispatch<SetStateAction<boolean>>;
-  closeHandler: () => void;
-  drawerRef?: RefObject<HTMLDivElement>;
-  scope?: AnimationScope<any>;
-  controls?: DragControls;
-  y?: MotionValue<number>;
-}
-
-export const SheetContext = createContext<SheetContextT>({} as SheetContextT);

package/src/components/Sheet/SheetHeader.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-import { cn } from "@kadoui/utils";
-import { HTMLAttributes, use } from "react";
-
-import { SheetContext } from "./SheetContext";
-
-export type SheetHeaderPropsT = HTMLAttributes<HTMLDivElement>;
-
-export function SheetHeader({ className, children, ...props }: SheetHeaderPropsT) {
-  const { controls } = use(SheetContext);
-
-  return (
-    <div
-      className={cn("h-7 f-center", className)}
-      onPointerDown={(ev) => controls?.start(ev)}
-      {...props}
-    >
-      {children || (
-        <span className="h-1 w-1/3 rounded-full bg-foreground/10" />
-      )}
-    </div>
-  );
-}

package/src/components/Sheet/SheetPortal.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { use } from "react";
-import { cn } from "@kadoui/utils";
-import { AnimatePresence, HTMLMotionProps, motion } from "framer-motion";
-
-import { Portal } from "../Portal/Portal";
-import { SheetContext } from "./SheetContext";
-import { ClientOnly } from "../ClientOnly/ClientOnly";
-
-export type SheetPortalPropsT = HTMLMotionProps<"div">;
-
-export function SheetPortal({ className, ...props }: SheetPortalPropsT) {
-  const { isOpen, closeHandler: handleClose, scope } = use(SheetContext);
-
-  return (
-    <ClientOnly>
-      <Portal>
-        <AnimatePresence>
-          {isOpen ? (
-            <motion.div
-              ref={scope}
-              onClick={handleClose}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              className={cn("fixed inset-0 z-50 bg-foreground/10", className)}
-              {...props}
-            />
-          ) : null}
-        </AnimatePresence>
-      </Portal>
-    </ClientOnly>
-  )
-}

package/src/components/Sheet/SheetRoot.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { useElementSize } from "@mantine/hooks";
-import { PropsWithChildren, useEffect, useState } from "react";
-import {
-  useDragControls,
-  useMotionValue,
-  useAnimate,
-} from "framer-motion";
-
-import { SheetContext } from "./SheetContext";
-
-export type SheetRootPropsT = PropsWithChildren;
-
-export function SheetRoot({ children }: SheetRootPropsT) {
-  const { ref: drawerRef, height } = useElementSize();
-
-  const y = useMotionValue(0);
-  const controls = useDragControls();
-  const [scope, animate] = useAnimate();
-
-  const [isOpen, setOpen] = useState(false);
-
-  useEffect(() => {
-    const removeOverflow = () => {
-      document.body.classList.remove("overflow-hidden");
-    };
-
-    if (isOpen) {
-      document.body.classList.add("overflow-hidden");
-    } else {
-      removeOverflow();
-    }
-
-    return () => removeOverflow();
-  }, [isOpen]);
-
-  const closeHandler = async () => {
-    animate(scope.current, {
-      opacity: [1, 0],
-    });
-
-    const yStart = typeof y.get() === "number" ? y.get() : 0;
-    await animate("#drawer", {
-      y: [yStart, height],
-    });
-
-    setOpen(false);
-  };
-
-  return (
-    <SheetContext value={{ isOpen, setOpen, closeHandler, drawerRef, scope, controls, y }}>
-      {children}
-    </SheetContext>
-  );
-}

package/src/components/Sheet/SheetToggle.tsx

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

package/src/components/ShowMore/ShowMore.ts

@@ -1,10 +0,0 @@
-import { ShowMoreRoot } from "./ShowMoreRoot";
-import { ShowMoreFade } from "./ShowMoreFade";
-import { ShowMoreContent } from "./ShowMoreContent";
-import { ShowMoreTrigger } from "./ShowMoreTrigger";
-
-export const ShowMore = Object.assign(ShowMoreRoot, {
-  Content: ShowMoreContent,
-  Trigger: ShowMoreTrigger,
-  Fade: ShowMoreFade
-});

package/src/components/ShowMore/ShowMoreContent.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import { cn } from "@kadoui/utils";
-import { HTMLAttributes, use } from "react";
-
-import { ShowMoreContext } from "./ShowMoreContext";
-
-export type ShowMoreContentPropsT = HTMLAttributes<HTMLDivElement>;
-
-export function ShowMoreContent({ children, className, ...props }: ShowMoreContentPropsT) {
-  const { contentRef, shouldShowMore, isShowMore, maxHeight } = use(ShowMoreContext);
-
-  return (
-    <div
-      ref={contentRef}
-      className={cn("overflow-hidden transition-all", className)}
-      style={{
-        height: shouldShowMore
-          ? isShowMore
-            ? contentRef.current?.scrollHeight
-              ? `${contentRef.current.scrollHeight}px`
-              : "auto"
-            : maxHeight
-          : "auto"
-      }}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}

package/src/components/ShowMore/ShowMoreContext.ts

@@ -1,11 +0,0 @@
-import { createContext, Dispatch, RefObject, SetStateAction } from "react";
-
-export type ShowMoreContextT = {
-  contentRef: RefObject<HTMLDivElement | null>;
-  shouldShowMore: boolean;
-  isShowMore: boolean;
-  setIsShowMore: Dispatch<SetStateAction<boolean>>;
-  maxHeight: number;
-}
-
-export const ShowMoreContext = createContext<ShowMoreContextT>({} as ShowMoreContextT);