@kadoui/react 1.0.0 → 1.1.2

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

package/src/components/ShowMore/ShowMoreFade.tsx

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

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

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

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

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

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

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

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

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

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