@kadoui/react 1.0.0

package/src/components/Rating/RatingItems.tsx

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+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);

package/src/components/ShowMore/ShowMoreFade.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { cn } from "@kadoui/utils";
+import { HTMLAttributes, use } from "react";
+
+import { ShowMoreContext } from "./ShowMoreContext";
+
+export type ShowMoreFadePropsT = HTMLAttributes<HTMLDivElement>;
+
+export function ShowMoreFade({ className, ...p }: ShowMoreFadePropsT) {
+  const { shouldShowMore, isShowMore } = use(ShowMoreContext);
+
+  return (
+    shouldShowMore && !isShowMore ? (
+      <div className={cn("absolute inset-0 bg-gradient-to-t from-background from-35% to-transparent", className)} {...p} />
+    ) : null
+  )
+}

package/src/components/ShowMore/ShowMoreRoot.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { cn } from "@kadoui/utils";
+import { HTMLAttributes, useEffect, useRef, useState } from "react";
+
+import { ShowMoreContext } from "./ShowMoreContext";
+
+export type ShowMoreRootPropsT = HTMLAttributes<HTMLDivElement> & {
+  maxLines: number;
+  defaultExpanded?: boolean;
+}
+
+export function ShowMoreRoot({ maxLines, defaultExpanded = false, className, ...p }: ShowMoreRootPropsT) {
+  const [shouldShowMore, setShouldShowMore] = useState(false);
+  const [isShowMore, setIsShowMore] = useState(defaultExpanded);
+  const [maxHeight, setMaxHeight] = useState(0);
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      const element = contentRef.current;
+      const lineHeight = Number.parseInt(window.getComputedStyle(element).lineHeight);
+      const maxHeight = lineHeight * (maxLines || 3);
+      const actualHeight = element.scrollHeight;
+
+      setMaxHeight(maxHeight);
+      setShouldShowMore(actualHeight > maxHeight);
+    }
+  }, [maxLines])
+
+  return (
+    <ShowMoreContext value={{ contentRef, isShowMore, setIsShowMore, maxHeight, shouldShowMore }}>
+      <div className={cn("relative", className)} {...p}></div>
+    </ShowMoreContext>
+  )
+}

package/src/components/ShowMore/ShowMoreTrigger.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { cn } from "@kadoui/utils";
+import { ButtonHTMLAttributes, use } from "react";
+
+import { ShowMoreContext } from "./ShowMoreContext";
+
+export type ShowMoreTriggerPropsT = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function ShowMoreTrigger({ onClick, className, ...p }: ShowMoreTriggerPropsT) {
+  const { setIsShowMore } = use(ShowMoreContext);
+
+  return (
+    <button
+      className={cn("relative", className)}
+      onClick={ev => {
+        onClick?.(ev);
+        setIsShowMore(prev => !prev);
+      }}
+      {...p}
+    />
+  )
+}

package/src/components/Slide/Slide.ts

@@ -0,0 +1,12 @@
+import { SlideRoot } from "./SlideRoot";
+import { SlideHeader } from "./SlideHeader";
+import { SlidePortal } from "./SlidePortal";
+import { SlideToggle } from "./SlideToggle";
+import { SlideContent } from "./SlideContent";
+
+export const Slide = Object.assign(SlideRoot, {
+  Portal: SlidePortal,
+  Toggle: SlideToggle,
+  Header: SlideHeader,
+  Content: SlideContent
+});

package/src/components/Slide/SlideContent.tsx

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

package/src/components/Slide/SlideContext.ts

@@ -0,0 +1,11 @@
+import { createContext, Dispatch, SetStateAction } from "react";
+
+export type SlideContextT = {
+  isOpen: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export const SlideContext = createContext<SlideContextT>({
+  isOpen: false,
+  setOpen: () => { }
+});

package/src/components/Slide/SlideHeader.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@kadoui/utils";
+import { HTMLAttributes } from "react";
+
+export type SlideHeaderPropsT = HTMLAttributes<HTMLHeadingElement>
+
+export function SlideHeader({ className, ...props }: SlideHeaderPropsT) {
+  return (
+    <header className={cn("h-20 f-align border-b border-foreground/10", className)} {...props} />
+  );
+}

package/src/components/Slide/SlidePortal.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { cn } from "@kadoui/utils";
+import { HTMLAttributes, use } from "react";
+
+import { Portal } from "../Portal/Portal";
+import { SlideContext } from "./SlideContext";
+
+export type SlidePortalPropsT = HTMLAttributes<HTMLDivElement>;
+
+export function SlidePortal({ className, ...props }: SlidePortalPropsT) {
+  const { isOpen } = use(SlideContext);
+
+  return (
+    <Portal>
+      <div
+        className={cn(
+          "w-screen h-dvh bg-background fixed top-0 left-0 transition-all duration-700",
+          isOpen ? "" : "faint -translate-x-full",
+          className
+        )}
+        {...props}
+      />
+    </Portal>
+  );
+}

package/src/components/Slide/SlideRoot.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { PropsWithChildren, useEffect, useState } from "react";
+
+import { SlideContext } from "./SlideContext";
+
+export type SlideRootPropsT = PropsWithChildren;
+
+export function SlideRoot({ children }: SlideRootPropsT) {
+  const [isOpen, setOpen] = useState(false);
+
+  useEffect(() => {
+    const rootElem = document.getElementById("root");
+    if (!rootElem) {
+      return;
+    };
+
+    const bodyElem = document.body;
+
+    if (isOpen) {
+      bodyElem.classList.add("overflow-hidden");
+      rootElem.classList.add("translate-x-full");
+    } else {
+      bodyElem.classList.remove("overflow-hidden");
+      rootElem.classList.remove("translate-x-full");
+    };
+
+    return () => {
+      bodyElem.classList.remove("overflow-hidden");
+      rootElem.classList.remove("translate-x-full");
+    };
+  }, [isOpen]);
+
+  return (
+    <SlideContext value={{ isOpen, setOpen }}>
+      {children}
+    </SlideContext>
+  )
+}

package/src/components/Slide/SlideToggle.tsx

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

package/src/components/Spoiler/Spoiler.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { cn } from "@kadoui/utils";
+import { useState } from "react";
+
+export type SpoilerProps = {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Spoiler({ children, className }: SpoilerProps) {
+  const [revealed, setRevealed] = useState(false);
+
+  return (
+    <span
+      onClick={() => setRevealed(true)}
+      className={cn(
+        "transition-all",
+        revealed ? "" : "inline cursor-pointer rounded overflow-hidden px-1",
+        className
+      )}
+    >
+      <span className={`transition-all ${revealed ? "" : "select-none blur-[3px]"}`}>
+        {children}
+      </span>
+    </span>
+  );
+}

package/src/components/Steps/Steps.ts

@@ -0,0 +1,15 @@
+import { StepsPrevBtn } from "./StepsPrevBtn";
+import { StepsNextBtn } from "./StepsNextBtn";
+import { StepsControls } from "./StepsControls";
+import { StepsStateRoot } from "./StepsStateRoot";
+import { StepsSearchParamsRoot } from "./StepsSearchParamsRoot";
+
+const baseComponents = {
+  Controls: StepsControls,
+  PrevBtn: StepsPrevBtn,
+  NextBtn: StepsNextBtn
+}
+
+export const StepsWithState = Object.assign(StepsStateRoot, baseComponents);
+
+export const StepsWithSearchParams = Object.assign(StepsSearchParamsRoot, baseComponents);

package/src/components/Steps/StepsContext.tsx

@@ -0,0 +1,16 @@
+import { createContext, Dispatch, ReactNode, SetStateAction } from "react";
+
+export type StepsT = {
+  name: string;
+  component: ReactNode;
+}
+
+export type StepsContextT = {
+  step: number;
+  steps: StepsT[];
+  setStep: Dispatch<SetStateAction<number>>;
+  nextStep: () => void;
+  prevStep: () => void;
+}
+
+export const StepsContext = createContext<StepsContextT>({} as StepsContextT);