dst-rg 1.0.0

package/src/icons/general/home.tsx

@@ -0,0 +1,25 @@
+import { memo } from 'react';
+
+const MemoHome = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        d="M6.66667 14.1667H13.3333M9.18141 2.30333L3.52949 6.69927C3.15168 6.99312 2.96278 7.14005 2.82669 7.32405C2.70614 7.48704 2.61633 7.67065 2.56169 7.86588C2.5 8.08627 2.5 8.32558 2.5 8.80421V14.8333C2.5 15.7667 2.5 16.2335 2.68166 16.59C2.84144 16.9036 3.09641 17.1585 3.41002 17.3183C3.76654 17.5 4.23325 17.5 5.16667 17.5H14.8333C15.7668 17.5 16.2335 17.5 16.59 17.3183C16.9036 17.1585 17.1586 16.9036 17.3183 16.59C17.5 16.2335 17.5 15.7667 17.5 14.8333V8.80421C17.5 8.32558 17.5 8.08627 17.4383 7.86588C17.3837 7.67065 17.2939 7.48704 17.1733 7.32405C17.0372 7.14005 16.8483 6.99312 16.4705 6.69927L10.8186 2.30333C10.5258 2.07562 10.3794 1.96177 10.2178 1.918C10.0752 1.87938 9.92484 1.87938 9.78221 1.918C9.62057 1.96177 9.47418 2.07562 9.18141 2.30333Z"
+        stroke="#667085"
+        strokeWidth="1.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+const Home = memo(MemoHome);
+
+export default Home;

package/src/icons/general/layer.tsx

@@ -0,0 +1,36 @@
+import { memo } from "react";
+import { IconPropsType } from "../icons.type";
+
+const MemoLayer = ({
+  stroke = "#344054",
+  fill = "none",
+  width = "16",
+  className = "",
+  height = "16",
+}: IconPropsType) => {
+  return (
+    <>
+      <svg
+        data-testid="layer-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width={width}
+        height={height}
+        className={className}
+        viewBox="0 0 16 16"
+        fill={fill}
+      >
+        <path
+          d="M1.33325 9.66669L7.7614 12.8808C7.84886 12.9245 7.89259 12.9464 7.93845 12.955C7.97908 12.9626 8.02076 12.9626 8.06139 12.955C8.10725 12.9464 8.15098 12.9245 8.23843 12.8808L14.6666 9.66669M1.33325 6.33336L7.7614 3.11928C7.84886 3.07555 7.89259 3.05369 7.93845 3.04508C7.97908 3.03746 8.02076 3.03746 8.06139 3.04508C8.10725 3.05369 8.15098 3.07555 8.23843 3.11928L14.6666 6.33336L8.23843 9.54743C8.15098 9.59116 8.10725 9.61302 8.06139 9.62163C8.02076 9.62925 7.97908 9.62925 7.93845 9.62163C7.89259 9.61302 7.84886 9.59116 7.7614 9.54743L1.33325 6.33336Z"
+          stroke={stroke}
+          strokeWidth="1.333"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </>
+  );
+};
+
+const Layer = memo(MemoLayer);
+
+export default Layer;

package/src/icons/general/leading.tsx

@@ -0,0 +1,19 @@
+import { memo } from "react";
+import { IconPropsType } from "../icons.type";
+
+const MemoLeading = ({
+  stroke = "",
+  fill = "none",
+  width = "12",
+  height = "12",
+}: IconPropsType) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 12 12" fill={fill}>
+      <path d="M6 9.5V2.5M6 2.5L2.5 6M6 2.5L9.5 6" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+};
+
+const Leading = memo(MemoLeading);
+
+export default Leading;

package/src/icons/general/master-card.tsx

@@ -0,0 +1,37 @@
+import { memo } from "react";
+import { IconPropsType } from "../icons.type";
+
+const MemoMasterCard = ({ width = "32", height = "19" }: IconPropsType) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 30 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.9052 16.4393C13.3265 17.7699 11.2786 18.5732 9.04092 18.5732C4.04776 18.5732 0 14.5736 0 9.63988C0 4.70613 4.04776 0.706543 9.04092 0.706543C11.2786 0.706543 13.3265 1.50983 14.9052 2.84049C16.4839 1.50983 18.5317 0.706543 20.7694 0.706543C25.7626 0.706543 29.8104 4.70613 29.8104 9.63988C29.8104 14.5736 25.7626 18.5732 20.7694 18.5732C18.5317 18.5732 16.4839 17.7699 14.9052 16.4393Z"
+        fill="#ED0006"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.9053 16.4392C16.8492 14.8006 18.0818 12.3625 18.0818 9.63988C18.0818 6.91727 16.8492 4.47913 14.9053 2.8406C16.484 1.50987 18.5319 0.706543 20.7697 0.706543C25.7628 0.706543 29.8106 4.70613 29.8106 9.63988C29.8106 14.5736 25.7628 18.5732 20.7697 18.5732C18.5319 18.5732 16.484 17.7699 14.9053 16.4392Z"
+        fill="#F9A000"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.9052 16.4393C12.9612 14.8008 11.7285 12.3626 11.7285 9.63995C11.7285 6.91729 12.9612 4.47911 14.9052 2.84058C16.8492 4.47911 18.0818 6.9173 18.0818 9.63997C18.0818 12.3626 16.8492 14.8008 14.9052 16.4393Z"
+        fill="#FF5E00"
+      />
+    </svg>
+  );
+};
+
+const MasterCard = memo(MemoMasterCard);
+
+export default MasterCard;

package/src/icons/general/minus.tsx

@@ -0,0 +1,36 @@
+import { memo } from "react";
+import { IconPropsType } from "../icons.type";
+
+const MemoMinus = ({
+  stroke = "white",
+  fill = "none",
+  width = "10",
+  className = "",
+  height = "10",
+}: IconPropsType) => {
+  return (
+    <>
+      <svg
+        width={width}
+        data-testid="minus-icon"
+        height={height}
+        className={className}
+        fill={fill}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 12 12"
+      >
+        <path
+          d="M2.5 6H9.5"
+          stroke={stroke}
+          strokeWidth="1.666"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </>
+  );
+};
+
+const Minus = memo(MemoMinus);
+
+export default Minus;

package/src/icons/general/plus.tsx

@@ -0,0 +1,19 @@
+import { memo } from "react";
+import { IconPropsType } from "../icons.type";
+
+const MemoPlus = ({
+  stroke = "",
+  fill = "none",
+  width = "12",
+  height = "12",
+}: IconPropsType) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 12 12" fill={fill}>
+      <path d="M6 2.5V9.5M2.5 6H9.5" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+};
+
+const Plus = memo(MemoPlus);
+
+export default Plus;

package/src/icons/general/remove.tsx

@@ -0,0 +1,32 @@
+import { memo } from "react";
+import { IconPropsType } from "../icons.type";
+
+const MemoRemove = ({
+  stroke = "#98A2B3",
+  fill = "none",
+  width = "14",
+  height = "14",
+}: IconPropsType) => {
+  return (
+    <svg
+      width={width}
+      className="remove"
+      height={height}
+      viewBox="0 0 14 14"
+      fill={fill}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.5 4.5L4.5 9.5M4.5 4.5L9.5 9.5"
+        stroke={stroke}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+const Remove = memo(MemoRemove);
+
+export default Remove;

package/src/icons/general/slash-divider.tsx

@@ -0,0 +1,26 @@
+import { memo } from 'react';
+
+
+const MemoSlashDivider = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        d="M6.66667 14.1667H13.3333M9.18141 2.30333L3.52949 6.69927C3.15168 6.99312 2.96278 7.14005 2.82669 7.32405C2.70614 7.48704 2.61633 7.67065 2.56169 7.86588C2.5 8.08627 2.5 8.32558 2.5 8.80421V14.8333C2.5 15.7667 2.5 16.2335 2.68166 16.59C2.84144 16.9036 3.09641 17.1585 3.41002 17.3183C3.76654 17.5 4.23325 17.5 5.16667 17.5H14.8333C15.7668 17.5 16.2335 17.5 16.59 17.3183C16.9036 17.1585 17.1586 16.9036 17.3183 16.59C17.5 16.2335 17.5 15.7667 17.5 14.8333V8.80421C17.5 8.32558 17.5 8.08627 17.4383 7.86588C17.3837 7.67065 17.2939 7.48704 17.1733 7.32405C17.0372 7.14005 16.8483 6.99312 16.4705 6.69927L10.8186 2.30333C10.5258 2.07562 10.3794 1.96177 10.2178 1.918C10.0752 1.87938 9.92484 1.87938 9.78221 1.918C9.62057 1.96177 9.47418 2.07562 9.18141 2.30333Z"
+        stroke="#0050FF"
+        strokeWidth="1.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+const SlashDivider = memo(MemoSlashDivider);
+
+export default SlashDivider;

package/src/icons/general/tick-box.tsx

@@ -0,0 +1,37 @@
+import { memo } from "react";
+
+const MemoTickBox = ({
+  stroke = "#fff",
+  fill = "none",
+  width = "10",
+  height = "10",
+}: {
+  stroke?: string;
+  fill?: string;
+  width?: string;
+  height?: string;
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      data-testid="tickbox-icon"
+      viewBox="0 0 10 10"
+      className="border-white"
+      fill={fill}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.33341 2.5L3.75008 7.08333L1.66675 5"
+        stroke={stroke}
+        strokeWidth="1.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+const TickBox = memo(MemoTickBox);
+
+export default TickBox;

package/src/icons/general/trailing.tsx

@@ -0,0 +1,19 @@
+import { memo } from "react";
+import { IconPropsType } from "../icons.type";
+
+const MemoTrailing = ({
+  stroke = "",
+  fill = "none",
+  width = "12",
+  height = "12",
+}: IconPropsType) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 12 12" fill={fill}>
+      <path d="M2.5 6H9.5M9.5 6L6 2.5M9.5 6L6 9.5" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+};
+
+const Trailing = memo(MemoTrailing);
+
+export default Trailing;

package/src/icons/general/unkown-format.tsx

@@ -0,0 +1,25 @@
+export const UnkownFormat = ({
+  width = 40,
+  height = 40,
+}: {
+  width?: number;
+  height?: number;
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        d="M11.6667 1.89118V5.33329C11.6667 5.8 11.6667 6.03336 11.7575 6.21162C11.8374 6.36842 11.9649 6.4959 12.1217 6.5758C12.3 6.66663 12.5333 6.66663 13 6.66663H16.4422M16.6667 8.32348V14.3333C16.6667 15.7334 16.6667 16.4335 16.3942 16.9683C16.1545 17.4387 15.7721 17.8211 15.3017 18.0608C14.7669 18.3333 14.0668 18.3333 12.6667 18.3333H7.33337C5.93324 18.3333 5.23318 18.3333 4.6984 18.0608C4.22799 17.8211 3.84554 17.4387 3.60586 16.9683C3.33337 16.4335 3.33337 15.7334 3.33337 14.3333V5.66663C3.33337 4.26649 3.33337 3.56643 3.60586 3.03165C3.84554 2.56124 4.22799 2.17879 4.6984 1.93911C5.23318 1.66663 5.93324 1.66663 7.33337 1.66663H10.0099C10.6213 1.66663 10.9271 1.66663 11.2148 1.7357C11.4699 1.79694 11.7137 1.89795 11.9374 2.03503C12.1897 2.18963 12.4059 2.40582 12.8383 2.8382L15.4951 5.49505C15.9275 5.92743 16.1437 6.14362 16.2983 6.39591C16.4354 6.61959 16.5364 6.86346 16.5976 7.11855C16.6667 7.40627 16.6667 7.712 16.6667 8.32348Z"
+        stroke="#98A2B3"
+        strokeWidth="1.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/icons/general/visa-card.tsx

@@ -0,0 +1,38 @@
+import { memo } from "react";
+import { IconPropsType } from "../icons.type";
+
+const MemoVisaCard = ({
+  stroke = "#E4E7EC",
+  fill = "#172B85",
+  width = "46",
+  height = "32",
+}: IconPropsType) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 46 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H42C43.933 0.5 45.5 2.067 45.5 4V28C45.5 29.933 43.933 31.5 42 31.5H4C2.067 31.5 0.5 29.933 0.5 28V4Z"
+        fill="white"
+      />
+      <path
+        d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H42C43.933 0.5 45.5 2.067 45.5 4V28C45.5 29.933 43.933 31.5 42 31.5H4C2.067 31.5 0.5 29.933 0.5 28V4Z"
+        stroke={stroke}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.3341 21.1441H11.5877L9.52833 13.0563C9.43058 12.6843 9.22304 12.3554 8.91774 12.2003C8.15584 11.8108 7.31628 11.5007 6.40039 11.3444V11.033H10.8245C11.4351 11.033 11.893 11.5007 11.9694 12.044L13.0379 17.878L15.7829 11.033H18.4529L14.3341 21.1441ZM19.9794 21.1441H17.3857L19.5214 11.033H22.1151L19.9794 21.1441ZM25.4707 13.8341C25.547 13.2895 26.0049 12.9781 26.5392 12.9781C27.3788 12.8999 28.2933 13.0563 29.0565 13.4445L29.5145 11.2676C28.7512 10.9562 27.9117 10.7998 27.1498 10.7998C24.6324 10.7998 22.8007 12.2003 22.8007 14.1441C22.8007 15.6228 24.0982 16.3993 25.0141 16.867C26.0049 17.3334 26.3865 17.6448 26.3102 18.1112C26.3102 18.8108 25.547 19.1222 24.7851 19.1222C23.8692 19.1222 22.9533 18.889 22.1151 18.4994L21.6571 20.6777C22.573 21.066 23.5639 21.2223 24.4798 21.2223C27.3024 21.2992 29.0565 19.9 29.0565 17.7998C29.0565 15.1551 25.4707 15.0001 25.4707 13.8341ZM38.134 21.1442L36.0746 11.033H33.8625C33.4046 11.033 32.9466 11.3444 32.794 11.8108L28.9805 21.1442H31.6505L32.1834 19.6668H35.464L35.7693 21.1442H38.134ZM34.2439 13.7559L35.0058 17.5666H32.8701L34.2439 13.7559Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+const VisaCard = memo(MemoVisaCard);
+
+export default VisaCard;

package/src/icons/general/x-close.tsx

@@ -0,0 +1,35 @@
+import { memo } from "react";
+import { IconPropsType } from "../icons.type";
+
+const MemoXClose = ({
+  stroke = "",
+  fill = "none",
+  width = "12",
+  className = "",
+  height = "12",
+}: IconPropsType) => {
+  return (
+    <svg
+      data-testid="icon-x-close"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      role={"x-icon"}
+      height={height}
+      className={className}
+      viewBox="0 0 12 12"
+      fill={fill}
+    >
+      <path
+        d="M9 3L3 9M3 3L9 9"
+        stroke={stroke}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+const XClose = memo(MemoXClose);
+
+export default XClose;

package/src/icons/icons.type.ts

@@ -0,0 +1,7 @@
+export interface IconPropsType {
+  stroke?: string;
+  fill?: string;
+  width?: string;
+  className?: string;
+  height?: string;
+}

package/src/index.css

@@ -0,0 +1,21 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "./assets/style/index.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  :root {
+    --spacing: 4px;
+  }
+
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  button {
+    @apply cursor-pointer;
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+import "./index.css";
+export * from './components';
+

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/lib/zIndexUtils.ts

@@ -0,0 +1,2 @@
+export const getModalZIndex = (depth: number, base = 50) => base + depth * 10;
+export const getBackdropZIndex = (depth: number, base = 40) => base + depth * 10;

package/src/main.tsx

@@ -0,0 +1,50 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { ToastContainer } from "./components";
+import AmirHossein from "./components/developers/AmirHossein";
+import Fardin from "./components/developers/Fardin";
+import Maryam from "./components/developers/Maryam";
+import Milad from "./components/developers/Milad";
+import Rasoul from "./components/developers/Rasoul";
+import { Switch } from "./components/Switch";
+import "./index.css";
+
+
+const App = () => {
+  const darkModeToggler = () => {
+    document.documentElement.classList.toggle("dark");
+  };
+  return (
+    <StrictMode>
+      <div className="container mx-auto p-8 min-h-screen flex flex-col gap-6 font-yekan">
+        <div className="flex items-center justify-between rounded-xl bg-gray-200 dark:bg-gray-800 font-bold p-4 leading-[var(--line-height-display-sm)] shadow-xs-skeuomorphic">
+          <h1 className="text-rfg-primary-900">دیزاین سیستم راهکارگستران</h1>
+          <Switch
+            id="switch"
+            label="تغییر تم"
+            onToggle={darkModeToggler}
+          />
+        </div>
+
+        <AmirHossein />
+        <Rasoul />
+        <Maryam />
+        <Fardin />
+        <Milad />
+      </div>
+    </StrictMode>
+  );
+};
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ToastContainer
+      type="info"
+      position="bottom-center"
+      duration={40000}
+      animation="slide"
+      showProgress={true}
+    />
+    <App />
+  </StrictMode>
+);

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tests/setup.ts

@@ -0,0 +1,8 @@
+import { afterEach } from "vitest";
+import { cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+
+// runs a clean after each test case (e.g. clearing jsdom)
+afterEach(() => {
+  cleanup();
+});

package/tsconfig.app.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["vitest/globals", "react", "react-dom"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src", "src/test/vitest-globals.d.ts"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/tsconfig.rollup.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": false,
+    "outDir": "./dist",
+    "moduleResolution": "node",
+    "isolatedModules": false
+  },
+  "include": ["src"]
+}
+

package/vite.config.ts

@@ -0,0 +1,20 @@
+import path from "path"
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vitest/config";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  test: {
+    // 👋 add the line below to add jsdom to vite
+    environment: "jsdom",
+    globals: true,
+    setupFiles: "./tests/setup.ts",
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,47 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { defineConfig } from "vitest/config";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  test: {
+    // 👋 add the line below to add jsdom to vite
+    environment: "jsdom",
+    globals: true,
+    setupFiles: "tests/setup.ts",
+    include: ["src/**/*.test.{ts,tsx}", "src/**/*.spec.{ts,tsx}"],
+    exclude: [
+      "node_modules",
+      "dist",
+      "**/*.stories.tsx",
+      "**/*.style.ts",
+      "**/*.types.ts",
+      "src/icons/**/*.{ts,tsx}",
+    ],
+    coverage: {
+      reporter: ["text", "json", "html"],
+      include: ["src/**/*.{ts,tsx}"],
+      exclude: [
+        // "**/*.test.{ts,tsx}",         // ❌ خود تست‌ها بررسی نشن
+        "**/*.spec.{ts,tsx}",         // ❌ تست‌ها
+        "**/*.stories.tsx",           // ❌ Storybook
+        "**/*.style.ts",              // ❌ Style ها
+        "**/*.types.ts",              // ❌ Type ها
+        "src/icons/**/*.{ts,tsx}",    // ❌ آیکون‌ها
+        "src/components/developers//**/*.{ts,tsx}",    // ❌ توسعه‌دهندگان
+        "tests/**",                   // ❌ فایل‌های setup
+        "node_modules/**",            // ❌ پکیج‌ها
+        "dist/**",                    // ❌ خروجی build
+        "src/main.tsx",              // ❌ فایل اصلی
+        "src/vite-env.d.ts",         // ❌ TypeScript
+      ],
+    },
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});