@kadoui/react 1.0.0

package/src/components/Steps/StepsControls.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/Toast/ToastBox.tsx

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

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

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

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

package/src/components/Toggle/ToggleContext.ts

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

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

package/src/components/Toggle/ToggleSwitch.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { HTMLAttributes, use } from "react";
+
+import { ToggleContext } from "./ToggleContext";
+
+export type ToggleSwitchPropsT = HTMLAttributes<HTMLButtonElement>;
+
+export function ToggleSwitch({ onClick, ...p }: ToggleSwitchPropsT) {
+  const { isToggled, setToggled, disabled } = use(ToggleContext)
+
+  const handleClick = (ev: React.MouseEvent<HTMLButtonElement>) => {
+    if (!disabled) {
+      onClick?.(ev);
+      setToggled(!isToggled);
+    }
+  }
+
+  const handleKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {
+    if ((ev.key === " " || ev.key === "Enter") && !disabled) {
+      ev.preventDefault();
+      setToggled(!isToggled);
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      disabled={disabled}
+      onClick={handleClick}
+      aria-checked={isToggled}
+      onKeyDown={handleKeyDown}
+      {...p}
+    >
+      <span className={isToggled ? "toggle-track-on" : "toggle-track-off"}>
+        <span className={isToggled ? "toggle-thumb-on" : "toggle-thumb-off"} />
+      </span>
+    </button>
+  )
+}

package/src/index.ts

@@ -0,0 +1,28 @@
+export * from "./components/AccessNavigation/AccessNavigation";
+export * from "./components/Accordion/Accordion";
+export * from "./components/Affix/Affix";
+export * from "./components/Breadcrumbs/Breadcrumbs";
+export * from "./components/Carousel/Carousel";
+export * from "./components/ClientOnly/ClientOnly";
+export * from "./components/Clipboard/Clipboard";
+export * from "./components/ContextMenu/ContextMenu";
+export * from "./components/Drawer/Drawer";
+export * from "./components/Dropdown/Dropdown";
+export * from "./components/LinkLoader/LinkLoader";
+export * from "./components/Modal/Modal";
+export * from "./components/Otp/Otp";
+export * from "./components/Pagination/Pagination";
+export * from "./components/PasswordInput/PasswordInput";
+export * from "./components/Portal/Portal";
+export * from "./components/Progress/Progress";
+export * from "./components/QrCode/QrCode";
+export * from "./components/Rating/Rating";
+export * from "./components/Sheet/Sheet";
+export * from "./components/ShowMore/ShowMore";
+export * from "./components/Slide/Slide";
+export * from "./components/Spoiler/Spoiler";
+export * from "./components/Steps/Steps";
+export * from "./components/Swap/Swap";
+export * from "./components/Tabs/Tabs";
+export * from "./components/Toast/Toast";
+export * from "./components/Toggle/Toggle";

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@repo/tsconfig",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "preserve",
+    "outDir": "dist"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "dist",
+    "build",
+    "node_modules"
+  ]
+}