@kadoui/react 1.0.0 → 1.1.2

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

package/src/components/Toast/ToastBox.tsx

@@ -1,50 +0,0 @@
-import { cn } from "@kadoui/utils";
-import { CheckIcon, CircleAlertIcon, TriangleAlertIcon, XIcon } from "lucide-react";
-
-import { ToastT } from "./ToastRoot";
-
-export type ToastBoxPropsT = {
-  toast: ToastT;
-}
-
-export function ToastBox({ toast }: ToastBoxPropsT) {
-  let toastIcon = null;
-
-  switch (toast.status) {
-    case "info": {
-      toastIcon = <CircleAlertIcon className="toast-icon-info" />;
-      break;
-    }
-
-    case "success": {
-      toastIcon = <CheckIcon className="toast-icon-success" />;
-      break;
-    }
-
-    case "warning": {
-      toastIcon = <TriangleAlertIcon className="toast-icon-warning" />;
-      break;
-    }
-
-    case "error": {
-      toastIcon = <XIcon className="toast-icon-error" />;
-      break;
-    }
-
-    default: {
-      toastIcon = null;
-      break;
-    }
-  }
-
-  return (
-    <div className={cn(
-      toast.variant || "toast-fill",
-      toast.size
-    )}>
-      {toastIcon}
-      {toast.data}
-      {toast.action}
-    </div>
-  )
-}

package/src/components/Toast/ToastRoot.tsx

@@ -1,71 +0,0 @@
-"use client";
-
-import { createPortal } from "react-dom";
-import { useMounted } from "@mantine/hooks";
-import { ReactNode, useEffect } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-
-import { ToastBox } from "./ToastBox";
-import { useToastStore } from "./toastStore";
-
-export type ToastT = {
-  id: string;
-  data: ReactNode;
-  status?: "info" | "success" | "warning" | "error";
-  variant?: "toast-fill" | "toast-glass";
-  size?: "toast-sm" | "toast-lg";
-  action?: ReactNode;
-  duration?: number;
-};
-
-export type ToastRootT = {
-  defaultDuration?: ToastT["duration"];
-}
-
-export function ToastRoot({ defaultDuration }: ToastRootT) {
-  const mounted = useMounted();
-
-  const toasts = useToastStore(store => store.toasts);
-  const remove = useToastStore(store => store.remove);
-
-  useEffect(() => {
-    if (!toasts.length) {
-      return;
-    };
-
-    const lastToast = toasts[toasts.length - 1];
-
-    if (lastToast) {
-      const duration = lastToast?.duration || defaultDuration || 2_000;
-
-      setTimeout(() => {
-        remove(lastToast.id);
-      }, duration);
-    }
-  }, [toasts]);
-
-  if (!mounted) {
-    return null;
-  };
-
-  return createPortal(
-    <>
-      <div className="max-h-screen py-3 space-y-3 fixed top-0 left-center w-fit">
-        <AnimatePresence>
-          {toasts.toReversed().map(item => (
-            <motion.div
-              key={item.id}
-              className="origin-top"
-              initial={{ opacity: 0, y: -10, scale: 0 }}
-              animate={{ opacity: 1, y: 0, scale: 1 }}
-              exit={{ opacity: 0, y: -10, scale: 0 }}
-            >
-              <ToastBox toast={item} />
-            </motion.div>
-          ))}
-        </AnimatePresence>
-      </div>
-    </>,
-    document.body
-  )
-}

package/src/components/Toast/toastStore.ts

@@ -1,22 +0,0 @@
-import { nanoid } from "nanoid";
-import { create } from "zustand";
-
-import { ToastT } from "./ToastRoot";
-
-type NewToastT = Omit<ToastT, "id">;
-
-type UseToastStoreT = {
-  toasts: ToastT[];
-  add: (newToast: NewToastT) => void;
-  remove: (id: ToastT["id"]) => void;
-};
-
-export const useToastStore = create<UseToastStoreT>((set) => ({
-  toasts: [],
-  add: (newToast) => set(prev => ({ toasts: [...prev.toasts, { id: nanoid(), ...newToast }] })),
-  remove: id => set(prev => ({ toasts: prev.toasts.filter(item => item.id !== id) })),
-}));
-
-export const addToast = (newToast: NewToastT) => {
-  useToastStore.getState().add(newToast);
-}

package/src/components/Toggle/Toggle.ts

@@ -1,6 +0,0 @@
-import { ToggleRoot } from "./ToggleRoot";
-import { ToggleSwitch } from "./ToggleSwitch";
-
-export const Toggle = Object.assign(ToggleRoot, {
-  Switch: ToggleSwitch
-});

package/src/components/Toggle/ToggleContext.ts

@@ -1,9 +0,0 @@
-import { createContext, Dispatch, SetStateAction } from "react";
-
-export type ToggleContextT = {
-  isToggled: boolean;
-  setToggled: Dispatch<SetStateAction<boolean>>;
-  disabled?: boolean;
-}
-
-export const ToggleContext = createContext<ToggleContextT>({} as ToggleContextT);

package/src/components/Toggle/ToggleRoot.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-import { PropsWithChildren, useState } from "react"
-
-import { ToggleContext } from "./ToggleContext";
-
-export type ToggleRootPropsT = PropsWithChildren & {
-  defaultToggled?: boolean;
-  onChange?: (toggled: boolean) => void;
-  disabled?: boolean;
-}
-
-export function ToggleRoot({ children, defaultToggled = false, disabled = false, onChange }: ToggleRootPropsT) {
-  const [isToggled, setToggled] = useState(defaultToggled)
-
-  const handleToggle = (newValue: boolean) => {
-    setToggled(newValue);
-    onChange?.(newValue);
-  }
-
-  return (
-    <ToggleContext value={{ isToggled, disabled, setToggled: () => handleToggle }}>
-      {children}
-    </ToggleContext>
-  )
-}