dst-rg 1.0.0

package/src/components/developers/Milad.tsx

@@ -0,0 +1,431 @@
+import { memo, useState } from "react";
+import { Badge } from "../Badge";
+import { Circle, ArrowUpRight, VerifiedIcon } from "lucide-react";
+import { Avatar } from "../Avatar";
+import { Tabs } from "../Tabs";
+import { FileUploader } from "../FileUpload";
+import { Metrics } from "../Metric";
+import { Message } from "../Message";
+import { FileContent } from "../ui/file-content/File-content";
+import { UnkownFormat } from "@/icons/general/unkown-format";
+import { Dropdown } from "../Dropdown";
+
+const MemoMilad = () => {
+  const test = () => {
+    document.documentElement.classList.toggle("dark");
+  };
+  const imageList = [
+    {
+      src: "https://randomuser.me/api/portraits/women/44.jpg",
+      alt: "User 1",
+    },
+    {
+      src: "https://randomuser.me/api/portraits/men/32.jpg",
+      alt: "User 2",
+    },
+    {
+      src: "https://randomuser.me/api/portraits/women/25.jpg",
+      alt: "User 3",
+    },
+    {
+      src: "https://randomuser.me/api/portraits/men/19.jpg",
+      alt: "User 4",
+    },
+    {
+      src: "https://randomuser.me/api/portraits/women/11.jpg",
+      alt: "User 5",
+    },
+  ];
+  const [internalOpen, setInternalOpen] = useState(false);
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-6">
+      <button className="size-20 bg-pink dark:text-white" onClick={test}>
+        Click Here
+      </button>
+      <div className="w-50 h-12 text-rtext-primary-900 bg-utility-gray-dark-50">
+        Lorem Ipsum
+      </div>
+      <Badge size="sm" type="pillColor" color="brand">
+        Label
+      </Badge>
+
+      <Metrics
+        title="Total Sales"
+        value="$32,000"
+        icon={<ArrowUpRight className="w-6 h-6 text-green-600" />}
+        iconType="secondary"
+        iconPosition="topWithTitle"
+        statistic={
+          <span className="text-xs font-medium text-green-700 bg-green-100 rounded px-2 py-0.5">
+            +12%
+          </span>
+        }
+        toggleBtn={
+          <button className="text-xs text-rtext-tertiary-600 underline">
+            Details
+          </button>
+        }
+        actionBtns={[
+          <button
+            key="1"
+            className="text-sm px-4 py-1.5 bg-rbg-brand-primary text-white rounded-md"
+          >
+            View
+          </button>,
+          <button
+            key="2"
+            className="text-sm px-4 py-1.5 border border-rborder-secondary rounded-md"
+          >
+            Export
+          </button>,
+        ]}
+        statisticPosition="row-next"
+        dir="rtl"
+        chartPosition="side"
+        chartImg={<img src="./test.png" alt="" />}
+      />
+
+      <Avatar
+        type="single"
+        size="lg"
+        img={{
+          src: "https://randomuser.me/api/portraits/women/44.jpg",
+          alt: "John",
+        }}
+        notifyColor="bg-red-500"
+        addBtnAction={() => alert("Clicked!")}
+      />
+      <Avatar
+        type="single"
+        size="2xl"
+        img={{
+          src: "https://randomuser.me/api/portraits/women/44.jpg",
+          alt: "John",
+        }}
+        iconBorder={false}
+        notifyIcon={<VerifiedIcon />}
+        // notifyColor="bg-red-500"
+        addBtnAction={() => alert("Clicked!")}
+      />
+
+      {/* 🏷️ Labeled avatar with title and description */}
+      <Avatar
+        type="single"
+        size="md"
+        img={{
+          src: "https://randomuser.me/api/portraits/women/60.jpg",
+          alt: "Emily",
+        }}
+        notifyColor="bg-red-500"
+        title="Emily Johnson"
+        description="Product Designer"
+        addBtnAction={() => alert("Clicked!")}
+      />
+
+      {/* 👥 Group of avatars */}
+      <Avatar
+        type="group"
+        size="lg"
+        imgList={imageList}
+        showAmount={3}
+        showAddBtn={true}
+        addBtnAction={() => alert("Add new user")}
+      />
+      <Avatar
+        type="labled"
+        size="xl"
+        img={{
+          src: "https://randomuser.me/api/portraits/women/44.jpg",
+          alt: "John",
+        }}
+        title="اولیوییا رای"
+        description="olivia@untitledui.com"
+        iconBorder={false}
+        notifyIcon={<VerifiedIcon />}
+        // notifyColor="bg-red-500"
+        addBtnAction={() => alert("Clicked!")}
+      />
+
+      <div className="w-full" dir="rtl">
+        <Tabs defaultValue="account">
+          <Tabs.List listVariant="gray" fullWidth={false}>
+            <Tabs.Trigger
+              value="account"
+              triggerVariant="gray"
+              fullWidth={true}
+            >
+              Account
+              <Circle />
+            </Tabs.Trigger>
+            <Tabs.Trigger
+              value="password"
+              triggerVariant="gray"
+              fullWidth={true}
+            >
+              Export
+              <Circle />
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="account">
+            <div className="">acc</div>
+          </Tabs.Content>
+          <Tabs.Content value="password">
+            <div className="">pass</div>
+          </Tabs.Content>
+        </Tabs>
+      </div>
+      <div className="w-full" dir="rtl">
+        <Tabs defaultValue="account">
+          <Tabs.List listVariant="minimal" fullWidth={false}>
+            <Tabs.Trigger
+              value="account"
+              triggerVariant="minimal"
+              fullWidth={true}
+            >
+              Account
+              <Circle />
+            </Tabs.Trigger>
+            <Tabs.Trigger
+              value="password"
+              triggerVariant="minimal"
+              fullWidth={true}
+            >
+              Export
+              <Circle />
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="account">
+            <div className="">acc</div>
+          </Tabs.Content>
+          <Tabs.Content value="password">
+            <div className="">pass</div>
+          </Tabs.Content>
+        </Tabs>
+      </div>
+      <div className="w-full" dir="rtl">
+        <Tabs defaultValue="account">
+          <Tabs.List listVariant="outlined" fullWidth={false}>
+            <Tabs.Trigger
+              value="account"
+              triggerVariant="outlined"
+              fullWidth={false}
+            >
+              Account
+              <Circle />
+            </Tabs.Trigger>
+            <Tabs.Trigger
+              value="password"
+              triggerVariant="outlined"
+              fullWidth={false}
+            >
+              Export
+              <Circle />
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="account">
+            <div className="">acc</div>
+          </Tabs.Content>
+          <Tabs.Content value="password">
+            <div className="">pass</div>
+          </Tabs.Content>
+        </Tabs>
+      </div>
+      <div className="w-[400px]">
+        <FileUploader
+          mainText="برای آپلود کلیک کنید"
+          subText="یا بکشید و رها کنید"
+          formatText="SVG, PNG, JPG or GIF (max. 800x400px)"
+          onChange={() => {}}
+          onDelete={(id: number) => {
+            console.log(id);
+          }}
+          items={[
+            {
+              title: "تصویر_محصول.png",
+              progressValue: 75,
+              description: "در حال آپلود...",
+              percentage: 75,
+              error: false,
+              size: "1.1 MB",
+              status: "uploading",
+              id: 1,
+            },
+            {
+              title: "لوگو.svg",
+              progressValue: 100,
+              description: "آپلود کامل شد",
+              percentage: 100,
+              error: false,
+              size: "220 KB",
+              status: "completed",
+              id: 2,
+            },
+            {
+              title: "بنر.gif",
+              progressValue: 0,
+              description: "خطا در آپلود",
+              percentage: 0,
+              error: true,
+              size: "3.2 MB",
+              status: "error",
+              id: 3,
+            },
+            {
+              title: "بنر.gif",
+              progressValue: 0,
+              description: "خطا در آپلود",
+              percentage: 0,
+              error: true,
+              size: "3.2 MB",
+              status: "error",
+              id: 4,
+            },
+          ]}
+        />
+      </div>
+      <div className="w-1/2 mx-auto flex flex-col gap-12">
+        <Message
+          variant="gray"
+          sender="user"
+          senderName="Alice"
+          message="Here's the document you asked for"
+          date="April 14, 2025"
+          avatar={
+            <Avatar
+              type="single"
+              size="md"
+              img={{
+                src: "https://randomuser.me/api/portraits/women/44.jpg",
+                alt: "John",
+              }}
+              iconBorder={false}
+              notifyIcon={false}
+              // notifyColor="bg-red-500"
+              addBtnAction={() => alert("Clicked!")}
+            />
+          }
+          className=""
+        ></Message>
+        <Message
+          variant="primary"
+          sender="admin"
+          senderName="Admin"
+          message="Lorem,"
+          date="April 15, 2025"
+          avatar={
+            <Avatar
+              type="single"
+              size="md"
+              img={{
+                src: "https://randomuser.me/api/portraits/women/44.jpg",
+                alt: "John",
+              }}
+              iconBorder={false}
+              notifyIcon={false}
+              // notifyColor="bg-red-500"
+              addBtnAction={() => alert("Clicked!")}
+            />
+          }
+          children={
+            <FileContent
+              title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas purus viverra accumsan in nisl nisi. Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Morbi tristique senectus et netus. Mattis pellentesque id nibh tortor id aliquet lectus proin. Sapien faucibus et molestie ac feugiat sed lectus vestibulum. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Dictum varius duis at consectetur lorem. Nisi vitae suscipit tellus mauris a diam maecenas sed enim. Velit ut tortor pretium viverra suspendisse potenti nullam. Et molestie ac feugiat sed lectus. Non nisi est sit amet facilisis magna. Dignissim diam quis enim lobortis scelerisque fermentum. Odio ut enim blandit volutpat maecenas volutpat. Ornare lectus sit amet est placerat in egestas erat. Nisi vitae suscipit tellus mauris a diam maecenas sed. Placerat duis ultricies lacus sed turpis tincidunt id aliquet."
+              size="1.2"
+              sizeFormat="mb"
+              icon={<UnkownFormat />}
+            />
+          }
+        />
+        <div className="flex justify-center items-center ">
+          <Dropdown
+            direction="down"
+            alignment="left"
+            toggleBtn={{
+              children: <>down left</>,
+            }}
+            dropDownClassName=" p-4"
+          >
+            <ul className="space-y-2 text-sm text-gray-700 w-[1000px]">
+              <li className="hover:bg-gray-100 px-2 py-1 rounded">
+                ProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfileProfile
+              </li>
+              <li className="hover:bg-gray-100 px-2 py-1 rounded">Settings</li>
+              <li className="hover:bg-gray-100 px-2 py-1 rounded">Logout</li>
+            </ul>
+          </Dropdown>
+        </div>
+        <div className="flex justify-center items-center">
+          <Dropdown
+            direction="down"
+            alignment="right"
+            toggleBtn={{
+              children: <>down right</>,
+            }}
+            dropDownClassName=" p-4"
+          >
+            <ul className="space-y-2 text-sm text-gray-700">
+              <li className="hover:bg-gray-100 px-2 py-1 rounded">Profile</li>
+              <li className="hover:bg-gray-100 px-2 py-1 rounded">Settings</li>
+              <li className="hover:bg-gray-100 px-2 py-1 rounded">Logout</li>
+            </ul>
+          </Dropdown>
+        </div>
+        <div className="flex justify-center items-center ">
+          <Dropdown
+            direction="up"
+            alignment="left"
+            toggleBtn={{
+              children: <>up rightawsd</>,
+            }}
+            dropDownClassName=" p-4"
+          >
+            <ul className="space-y-2 text-sm text-gray-700 w-64">
+              <li className="hover:bg-gray-100 px-2 py-1 rounded">Profile</li>
+              <li className="hover:bg-gray-100 px-2 py-1 rounded">Settings</li>
+              <li className="hover:bg-gray-100 px-2 py-1 rounded">Logout</li>
+            </ul>
+          </Dropdown>
+        </div>
+        <div className="flex justify-center items-center ">
+          <Dropdown
+            direction="down"
+            alignment="right"
+            toggleBtn={{
+              children: <>up rightawsd</>,
+            }}
+            dropDownClassName="w-64 p-4"
+            autoAdjust={true}
+            open={internalOpen}
+            onOpenChange={(val: boolean) => setInternalOpen(val)}
+          >
+            <ul className="space-y-2 text-sm text-gray-700">
+              <li className="hover:bg-gray-100 px-2 py-1 rounded">Profile</li>
+              <li className="hover:bg-gray-100 px-2 py-1 rounded">Settings</li>
+              <li className="hover:bg-gray-100 px-2 py-1 rounded">Logout</li>
+            </ul>
+          </Dropdown>
+        </div>
+        <div className="flex justify-center items-center ">
+          <Dropdown
+            direction="down"
+            alignment="right"
+            toggleBtn={{
+              variant: "primary",
+              size: "sm",
+              fullWidth: true,
+              // onClick: notificationModalHandler,
+              type: "button",
+              children: <>down right</>,
+            }}
+            autoAdjust={false}
+          >
+            <div className="bg-black w-20 h-20 text-white p-5">123</div>
+          </Dropdown>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Milad = memo(MemoMilad);
+
+export default Milad;

package/src/components/developers/Rasoul.tsx

@@ -0,0 +1,198 @@
+import Activity from "@/icons/general/activity";
+import XClose from "@/icons/general/x-close";
+import { ArrowRight } from "lucide-react";
+import { memo, useState } from "react";
+import { Badge } from "../Badge";
+import { Button } from "../Button";
+import { ImageMagnify } from "../ImageMagnify";
+import { Modal } from "../Modal";
+import { Select } from "../Select";
+import { toast, ToastContainer } from "../Toast";
+
+const MemoRasoul = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  const [selectValue, setSelectedValue] = useState(null);
+
+  const optionsList = [
+    { title: "a", value: 1 },
+    { title: "b", value: 2 },
+    { title: "c", value: 3 },
+    { title: "d", value: 4 },
+    { title: "e", value: 5 },
+    { title: "f", value: 6 },
+    { title: "g", value: 7 },
+  ];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      <ToastContainer />
+      <Select
+        isLoading={false}
+        onChange={(val) => setSelectedValue(val?.value)}
+        className=""
+        // disabled
+        tooltipTitle="gio gio"
+        tooltipClass=""
+        selectedValueLabel={
+          optionsList?.find((elem) => elem?.value === selectValue)?.title ?? "-"
+        }
+        options={optionsList}
+        config={{
+          name: "gio",
+          canSelectZero: true,
+          errorText: "gio error",
+          isRequiredInput: true,
+          label: "gio gio",
+        }}
+      />
+
+      <Badge size="sm" type="pillColor" color="brand">
+        میلاد پسر رنگ کار مکاری است
+      </Badge>
+
+      <Badge
+        type="pillColor"
+        color="indigo"
+        closable
+        onClose={() => alert("closed")}
+      >
+        برچسب
+      </Badge>
+      <Badge
+        size={"md"}
+        type={"badgeColor"}
+        dir="rtl"
+        color="orange"
+        icon={
+          <img
+            src="/Avatar.png"
+            alt="avatar"
+            className="w-4 h-4 rounded-full"
+          />
+        }
+      >
+        Username
+      </Badge>
+
+      <Button
+        variant="primary"
+        size="sm"
+        leftIcon={<ArrowRight size={16} />}
+        onClick={() => toast.error("test")}
+      >
+        Show Toast
+      </Button>
+
+      <Button variant={"primary"} onClick={() => setShowModal(true)} size="md">
+        باز کردن مودال
+      </Button>
+
+      <Modal
+        showModal={showModal}
+        position="center"
+        size="md"
+        showCloseIcon={false}
+        closeHandler={() => setShowModal(false)}
+        modalTitle="مودال تستی"
+        icon={
+          <div>
+            <Activity />
+          </div>
+        }
+        // headerIconDir="flex-row"
+        modalContentStyle="gap-4 px-6"
+      >
+        <hr />
+        <h2>ساختار اصلی 25 مودال</h2>
+        <p>
+          این مودال جریانش اینه که ساختار پایه ایجاد شده و children هرچی باشه
+          بهش پاس میدیم فقط
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
+          molestias incidunt labore porro quibusdam, reprehenderit reiciendis
+          ipsam veritatis nam deserunt tenetur dolore, delectus consectetur
+          magni nulla voluptate, tempora dolores? Sapiente!
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
+          molestias incidunt labore porro quibusdam, reprehenderit reiciendis
+          ipsam veritatis nam deserunt tenetur dolore, delectus consectetur
+          magni nulla voluptate, tempora dolores? Sapiente!
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
+          molestias incidunt labore porro quibusdam, reprehenderit reiciendis
+          ipsam veritatis nam deserunt tenetur dolore, delectus consectetur
+          magni nulla voluptate, tempora dolores? Sapiente!
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
+          molestias incidunt labore porro quibusdam, reprehenderit reiciendis
+          ipsam veritatis nam deserunt tenetur dolore, delectus consectetur
+          magni nulla voluptate, tempora dolores? Sapiente!
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
+          molestias incidunt labore porro quibusdam, reprehenderit reiciendis
+          ipsam veritatis nam deserunt tenetur dolore, delectus consectetur
+          magni nulla voluptate, tempora dolores? Sapiente!
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
+          molestias incidunt labore porro quibusdam, reprehenderit reiciendis
+          ipsam veritatis nam deserunt tenetur dolore, delectus consectetur
+          magni nulla voluptate, tempora dolores? Sapiente!
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
+          molestias incidunt labore porro quibusdam, reprehenderit reiciendis
+          ipsam veritatis nam deserunt tenetur dolore, delectus consectetur
+          magni nulla voluptate, tempora dolores? Sapiente!
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
+          molestias incidunt labore porro quibusdam, reprehenderit reiciendis
+          ipsam veritatis nam deserunt tenetur dolore, delectus consectetur
+          magni nulla voluptate, tempora dolores? Sapiente!
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
+          molestias incidunt labore porro quibusdam, reprehenderit reiciendis
+          ipsam veritatis nam deserunt tenetur dolore, delectus consectetur
+          magni nulla voluptate, tempora dolores? Sapiente!
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
+          molestias incidunt labore porro quibusdam, reprehenderit reiciendis
+          ipsam veritatis nam deserunt tenetur dolore, delectus consectetur
+          magni nulla voluptate, tempora dolores? Sapiente!
+        </p>
+        <hr />
+        <div className="py-4 flex justify-end sticky bottom-0 bg-white">
+          <Button
+            variant="secondaryColor"
+            size="sm"
+            leftIcon={<XClose stroke="blue" />}
+            onClick={() => setShowModal(false)}
+          >
+            بستن
+          </Button>
+        </div>
+      </Modal>
+
+      <ImageMagnify
+        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop"
+        zoom={2}
+        zoomPanePosition="left"
+        lensSize={140}
+        touchToggle={true}
+      />
+    </div>
+  );
+};
+
+const Rasoul = memo(MemoRasoul);
+
+export default Rasoul;

package/src/components/index.ts

@@ -0,0 +1,28 @@
+export * from "./Accordion";
+export * from "./Avatar";
+export * from "./Badge";
+export * from "./Breadcrumbs";
+export * from "./Button";
+export * from "./Checkbox";
+export * from "./CheckboxGroup/PaymentCard";
+export * from "./CheckboxGroup/PlanCard";
+export * from "./CheckboxGroup/UserCard";
+export * from "./Dropdown";
+export * from "./FileUpload";
+export * from "./ImageMagnify";
+export * from "./Input";
+export * from "./Message";
+export * from "./Metric";
+export * from "./Modal";
+export * from "./Pagination";
+export * from "./PriceSlider";
+export * from "./Progress";
+export * from "./Radio";
+export * from "./Select";
+export * from "./Switch";
+export * from "./Tabs";
+export * from "./Tag";
+export * from "./TextArea";
+export * from "./Toast";
+export * from "./Tooltip";
+