@kadoui/react 1.0.0 → 1.0.1

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

package/src/components/Toggle/ToggleSwitch.tsx

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

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