@kadoui/react 1.0.0 → 1.0.1

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

package/src/components/Spoiler/Spoiler.tsx

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

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

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

package/src/components/Steps/StepsControls.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { cn } from "@kadoui/utils";
-import { HTMLAttributes, use } from "react";
-
-import { StepsContext } from "./StepsContext";
-
-export type StepsControlsPropsT = HTMLAttributes<HTMLDivElement>;
-
-export function StepsControls({ className, ...props }: StepsControlsPropsT) {
-  const { step, steps, setStep } = use(StepsContext);
-
-  return (
-    <>
-      <div className={cn("f-align mb-[calc(1.5rem+0.75rem+0.375rem)]", className)} {...props}>
-        {steps.map((item, index) => (
-          <div
-            key={index}
-            className={`${index + 1 < steps.length ? "w-full" : "w-max"} f-align justify-between`}
-          >
-            <div className="f-center relative flex-col">
-              <button
-                onClick={() => step > index + 1 && setStep(index + 1)}
-                className={`${step >= index + 1 ? "btn-fill" : "btn-ghost"} btn-square rounded-full`}
-              >
-                <span className="text-sm">{(index + 1)}</span>
-              </button>
-              <span
-                className={`
-                  f-align mt-1.5 h-3 w-max text-center text-xs absolute top-full
-                  ${step === index + 1 ? "font-bold" : ""}
-                  ${index === 0 ? "ltr:left-0 rtl:right-0" : index + 1 === steps.length ? "ltr:right-0 rtl:left-0" : ""}
-                `}
-              >
-                {item.name}
-              </span>
-            </div>
-
-            {index + 1 < steps.length ? (
-              <div key={index} className="bg-foreground/10 flex h-1.5 flex-1 shrink-0">
-                <div
-                  className={`
-                    bg-primary w-full ltr:origin-left rtl:origin-right h-full
-                    ${step > index + 1 ? "scale-x-100" : step === index + 1 ? "scale-x-[50%]" : "scale-x-0"}
-                  `}
-                />
-              </div>
-            ) : null}
-          </div>
-        ))}
-      </div>
-
-      {steps.find((_, index) => index + 1 === step)?.component}
-    </>
-  );
-}

package/src/components/Steps/StepsNextBtn.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { HTMLAttributes, use } from "react";
-import { ChevronRightIcon } from "lucide-react";
-
-import { StepsContext } from "./StepsContext";
-
-export type StepsNextBtnPropsT = HTMLAttributes<HTMLButtonElement> & {
-  disabled?: boolean;
-}
-
-export function StepsNextBtn({ onClick, disabled, children, ...props }: StepsNextBtnPropsT) {
-  const { step, steps, nextStep } = use(StepsContext);
-
-  return (
-    <button
-      disabled={disabled || step === steps.length}
-      onClick={ev => {
-        onClick?.(ev);
-        nextStep();
-      }}
-      {...props}
-    >
-      {children || <ChevronRightIcon className="compatible-icon" />}
-    </button>
-  );
-}

package/src/components/Steps/StepsPrevBtn.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { HTMLAttributes, use } from "react";
-import { ChevronLeftIcon } from "lucide-react";
-
-import { StepsContext } from "./StepsContext";
-
-export type StepsPrevBtnPropsT = HTMLAttributes<HTMLButtonElement> & {
-  disabled?: boolean;
-}
-
-export function StepsPrevBtn({ onClick, disabled, children, ...props }: StepsPrevBtnPropsT) {
-  const { step, prevStep } = use(StepsContext);
-
-  return (
-    <button
-      disabled={disabled || step === 1}
-      onClick={ev => {
-        onClick?.(ev);
-        prevStep();
-      }}
-      {...props}
-    >
-      {children || <ChevronLeftIcon className="compatible-icon" />}
-    </button>
-  );
-}

package/src/components/Steps/StepsSearchParamsRoot.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import { useRouter, useSearchParams } from "next/navigation";
-import { PropsWithChildren, useEffect, useState } from "react";
-
-import { StepsContext, StepsT } from "./StepsContext";
-
-export type StepsSearchParamsRootPropsT = PropsWithChildren & {
-  stepKey?: string;
-  steps: StepsT[];
-}
-
-export function StepsSearchParamsRoot({ children, steps, stepKey }: StepsSearchParamsRootPropsT) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const [currentStep, setCurrentStep] = useState(1);
-
-  useEffect(() => {
-    setCurrentStep(+(searchParams.get(stepKey || "step") || "1"));
-  }, [stepKey, searchParams]);
-
-  const pushRouter = (page: number) => {
-    const params = new URLSearchParams(searchParams.toString());
-    params.set(stepKey || "step", page.toString());
-    router.push("?" + params.toString())
-  }
-
-  const nextStep = () => {
-    if (currentStep < steps.length) {
-      pushRouter(currentStep + 1);
-    }
-  };
-
-  const prevStep = () => {
-    if (currentStep > 1) {
-      pushRouter(currentStep - 1);
-    }
-  };
-
-  return (
-    <StepsContext.Provider value={{ step: currentStep, setStep: setCurrentStep, steps, nextStep, prevStep }}>
-      {children}
-    </StepsContext.Provider>
-  )
-}

package/src/components/Steps/StepsStateRoot.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import { PropsWithChildren, useState } from "react";
-
-import { StepsT, StepsContext } from "./StepsContext";
-
-export type StepsStateRootPropsT = PropsWithChildren & {
-  steps: StepsT[];
-}
-
-export function StepsStateRoot({ children, steps }: StepsStateRootPropsT) {
-  const [step, setStep] = useState(1);
-
-  const nextStep = () => setStep(prev => prev + 1);
-
-  const prevStep = () => setStep(prev => prev - 1);
-
-  return (
-    <StepsContext.Provider value={{ step, setStep, steps, nextStep, prevStep }}>
-      {children}
-    </StepsContext.Provider>
-  );
-}

package/src/components/Swap/Swap.ts

@@ -1,8 +0,0 @@
-import { SwapItem } from "./SwapItem";
-import { SwapRoot } from "./SwapRoot";
-import { SwapTrigger } from "./SwapTrigger";
-
-export const Swap = Object.assign(SwapRoot, {
-  Trigger: SwapTrigger,
-  Item: SwapItem
-});

package/src/components/Swap/SwapContext.ts

@@ -1,9 +0,0 @@
-import { createContext } from "react";
-
-export type SwapContextT = {
-  items: string[];
-  activeItem: string | undefined;
-  handleSwap: (newItem: string) => void;
-}
-
-export const SwapContext = createContext<SwapContextT>({} as SwapContextT);

package/src/components/Swap/SwapItem.tsx

@@ -1,16 +0,0 @@
-"use client"
-
-import { motion, HTMLMotionProps } from "framer-motion";
-
-export type SwapItemPropsT = HTMLMotionProps<"span">;
-
-export function SwapItem(p: SwapItemPropsT) {
-  return (
-    <motion.span
-      initial={{ rotate: 90, opacity: 0 }}
-      animate={{ rotate: 0, opacity: 1 }}
-      exit={{ rotate: 90, opacity: 0 }}
-      {...p}
-    />
-  )
-}

package/src/components/Swap/SwapRoot.tsx

@@ -1,29 +0,0 @@
-"use client"
-
-import { AnimatePresence } from "framer-motion";
-import { HTMLAttributes, useState } from "react";
-
-import { SwapContext } from "./SwapContext";
-
-export type SwapRootPropsT = HTMLAttributes<HTMLDivElement> & {
-  items: string[];
-  defaultItem?: string;
-  onSwap?: (item: string) => void;
-}
-
-export function SwapRoot({ items, defaultItem, onSwap, ...p }: SwapRootPropsT) {
-  const [activeItem, setActiveItem] = useState(defaultItem || items[1]);
-
-  const handleSwap = (newItem: string) => {
-    setActiveItem(newItem);
-    onSwap?.(newItem);
-  }
-
-  return (
-    <SwapContext value={{ items, activeItem, handleSwap }} >
-      <AnimatePresence mode="wait">
-        <div {...p} />
-      </AnimatePresence>
-    </SwapContext>
-  )
-}

package/src/components/Swap/SwapTrigger.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import { HTMLAttributes, use } from "react";
-
-import { SwapContext } from "./SwapContext";
-
-export type SwapTriggerPropsT = HTMLAttributes<HTMLButtonElement> & {
-  item: string;
-}
-
-export function SwapTrigger({ item, onClick, ...p }: SwapTriggerPropsT) {
-  const { items, activeItem, handleSwap } = use(SwapContext);
-
-  return (
-    activeItem === item ? (
-      <button
-        onClick={ev => {
-          onClick?.(ev);
-          {
-            const nextIndex = items.indexOf(item) + 1 >= items.length ? 0 : items.indexOf(item) + 1;
-            const nextItem = items[nextIndex];
-            if (nextItem !== undefined) {
-              handleSwap(nextItem);
-            }
-          }
-        }}
-        {...p}
-      />
-    ) : null
-  )
-}

package/src/components/Tabs/Tabs.ts

@@ -1,10 +0,0 @@
-import { TabsTab } from "./TabsTab";
-import { TabsList } from "./TabsList";
-import { TabsRoot } from "./TabsRoot";
-import { TabsPanel } from "./TabsPanel";
-
-export const Tabs = Object.assign(TabsRoot, {
-  List: TabsList,
-  Tab: TabsTab,
-  Panel: TabsPanel
-});

package/src/components/Tabs/TabsContext.ts

@@ -1,11 +0,0 @@
-import { createContext, Dispatch, SetStateAction } from "react";
-
-export type TabsContextT = {
-  activeTab: string;
-  setActiveTab: Dispatch<SetStateAction<string>>;
-}
-
-export const TabsContext = createContext<TabsContextT>({
-  activeTab: "",
-  setActiveTab: () => { },
-});

package/src/components/Tabs/TabsList.tsx

@@ -1,12 +0,0 @@
-"use client"
-
-import { cn } from "@kadoui/utils";
-import { HTMLAttributes } from "react";
-
-export type TabsListPropsT = HTMLAttributes<HTMLDivElement>;
-
-export function TabsList({ className, ...props }: TabsListPropsT) {
-  return (
-    <div className={cn("join-border", className)} {...props} />
-  );
-}

package/src/components/Tabs/TabsPanel.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import { cn } from "@kadoui/utils";
-import { HTMLAttributes, use } from "react";
-
-import { TabsContext } from "./TabsContext";
-
-export type TabsPanelPropsT = HTMLAttributes<HTMLDivElement> & {
-  value: string;
-}
-
-export function TabsPanel({ value, className, ...props }: TabsPanelPropsT) {
-  const { activeTab } = use(TabsContext);
-
-  const isActive = activeTab === value;
-
-  return isActive ? (
-    <div
-      className={cn("p-3 rounded-kado bg-foreground/10 mt-1.5", className)}
-      {...props}
-    />
-  ) : null
-}

package/src/components/Tabs/TabsRoot.tsx

@@ -1,18 +0,0 @@
-"use client"
-
-import { Dispatch, PropsWithChildren, SetStateAction } from "react";
-
-import { TabsContext } from "./TabsContext";
-
-export type TabsRootPropsT = PropsWithChildren & {
-  activeTab: string;
-  setActiveTab: Dispatch<SetStateAction<string>>;
-}
-
-export function TabsRoot({ activeTab, setActiveTab, children }: TabsRootPropsT) {
-  return (
-    <TabsContext value={{ activeTab, setActiveTab }}>
-      {children}
-    </TabsContext>
-  )
-}

package/src/components/Tabs/TabsTab.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import { type HTMLAttributes, use } from "react";
-
-import { TabsContext } from "./TabsContext";
-
-export type TabsTabPropsT = HTMLAttributes<HTMLButtonElement> & {
-  value: string;
-}
-
-export function TabsTab({ value, onClick, ...props }: TabsTabPropsT) {
-  const { setActiveTab } = use(TabsContext);
-
-  return (
-    <button
-      onClick={(ev) => {
-        onClick?.(ev);
-        setActiveTab(value);
-      }}
-      {...props}
-    />
-  )
-}

package/src/components/Toast/Toast.ts

@@ -1,3 +0,0 @@
-export * from "./ToastRoot";
-export * from "./ToastBox";
-export * from "./toastStore";