dst-rg 1.0.0

package/src/components/ui/pagination/card-minimal-right-aligne.tsx

@@ -0,0 +1,90 @@
+import { cn } from "@/lib/utils";
+import { PaginationProps } from "../../Pagination/type";
+import { PaginationContent } from "./pagination-content";
+import { PaginationItem } from "./pagination-item";
+import { PaginationLink } from "./pagination-link";
+
+const PaginationCardMinimalLeftAligned = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  dir = "rtl",
+  labels,
+  previousClassName,
+  nextClassName,
+  className,
+  ...props
+}: PaginationProps) => {
+  const isRtl = dir === "rtl";
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      className={cn(
+        "flex w-full items-center justify-between text-sm text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      <span>
+        {labels?.page} {currentPage} {labels?.of} {totalPages}
+      </span>
+      <PaginationContent className="flex items-center gap-2">
+        <PaginationItem>
+          <PaginationLink
+            aria-label="Go to first page"
+            size="default"
+            className="gap-1 px-2.5"
+            onClick={() => onPageChange?.(1)}
+            disabled={currentPage === 1 || totalPages < 2}
+          >
+            <span>{labels?.first}</span>
+          </PaginationLink>
+        </PaginationItem>
+
+        <PaginationItem>
+          <PaginationLink
+            aria-label="Go to previous page"
+            size="default"
+            className={cn("gap-1", previousClassName)}
+            onClick={() =>
+              onPageChange?.(isRtl ? currentPage + 1 : currentPage - 1)
+            }
+            disabled={isRtl ? currentPage === totalPages : currentPage === 1}
+          >
+            <span>{isRtl ? labels?.next : labels?.prev}</span>
+          </PaginationLink>
+        </PaginationItem>
+
+        <PaginationItem>
+          <PaginationLink
+            aria-label="Go to next page"
+            size="default"
+            className={cn("gap-1", nextClassName)}
+            onClick={() =>
+              onPageChange?.(isRtl ? currentPage - 1 : currentPage + 1)
+            }
+            disabled={isRtl ? currentPage === 1 : currentPage === totalPages}
+          >
+            <span>{isRtl ? labels?.prev : labels?.next}</span>
+          </PaginationLink>
+        </PaginationItem>
+
+        <PaginationItem>
+          <PaginationLink
+            aria-label="Go to last page"
+            size="default"
+            className="gap-1 px-2.5"
+            onClick={() => onPageChange?.(totalPages)}
+            disabled={currentPage === totalPages}
+          >
+            <span>{labels?.last}</span>
+          </PaginationLink>
+        </PaginationItem>
+      </PaginationContent>
+    </nav>
+  );
+};
+
+export default PaginationCardMinimalLeftAligned;

package/src/components/ui/pagination/default-pagination.tsx

@@ -0,0 +1,128 @@
+import { cn } from "@/lib/utils";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+import { twMerge } from "tailwind-merge";
+import { PaginationProps } from "../../Pagination/type";
+import { getPaginationItems } from "./get-pagination-item";
+import { PaginationContent } from "./pagination-content";
+import { PaginationItem } from "./pagination-item";
+import { PaginationLink } from "./pagination-link";
+
+const DefaultPagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  labels,
+  previousClassName,
+  className,
+  activeClassName,
+  nextClassName,
+  dir = "rtl",
+  prevIcon,
+  nextIcon,
+  firstIcon,
+  lastIcon,
+  showFirstLast = true,
+  hasText = true,
+}: PaginationProps) => {
+  const paginationItems = getPaginationItems(currentPage, totalPages, dir);
+  const isRtl = dir === "rtl";
+  const itemsToRender = isRtl
+    ? [...paginationItems].reverse()
+    : paginationItems;
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      className={cn(
+        "mx-auto flex w-full justify-center",
+        dir === "rtl" ? "rtl" : "ltr",
+        className
+      )}
+    >
+      <div className={cn("flex gap-2", isRtl ? "ml-auto" : "mr-auto")}>
+        {showFirstLast && (
+          <PaginationLink
+            aria-label="Go to first page"
+            size="default"
+            className="gap-1 px-2.5"
+            onClick={() => onPageChange?.(1)}
+            disabled={currentPage === 1}
+          >
+            {isRtl ? firstIcon || <ChevronsRight /> : lastIcon || <ChevronsLeft />}
+            {
+              hasText &&
+              <span>{labels?.first}</span>
+            }
+          </PaginationLink>
+        )}
+
+        <PaginationLink
+          aria-label="Go to previous page"
+          size="default"
+          className={cn("flex items-center", previousClassName)}
+          onClick={() => onPageChange?.(currentPage - 1)}
+          disabled={currentPage === 1}
+        >
+          {isRtl ? nextIcon || <ChevronRight /> : prevIcon || <ChevronLeft />}
+          {
+            hasText &&
+            <span>{labels?.prev}</span>
+          }
+        </PaginationLink>
+      </div>
+
+      <PaginationContent>
+        {itemsToRender.map((item, index) => (
+          <PaginationItem key={index}>
+            {item === "..." ? (
+              <span className="px-2">...</span>
+            ) : (
+              <PaginationLink
+                isActive={item === currentPage}
+                onClick={() => onPageChange?.(Number(item))}
+                activeClassName={twMerge(activeClassName, "rounded-md")}
+              >
+                {item}
+              </PaginationLink>
+            )}
+          </PaginationItem>
+        ))}
+      </PaginationContent>
+
+      <div className={cn("flex gap-2", isRtl ? "mr-auto" : "ml-auto")}>
+        <PaginationLink
+          aria-label="Go to next page"
+          size="default"
+          className={cn("flex items-center", nextClassName)}
+          onClick={() => onPageChange?.(currentPage + 1)}
+          disabled={currentPage === totalPages}
+        >
+          {
+            hasText &&
+            <span>{labels?.next}</span>
+          }
+          {isRtl ? prevIcon || <ChevronLeft /> : nextIcon || <ChevronRight />}
+        </PaginationLink>
+
+        {showFirstLast && (
+          <PaginationLink
+            aria-label="Go to last page"
+            size="default"
+            className="gap-1 px-2.5"
+            onClick={() => onPageChange?.(totalPages)}
+            disabled={currentPage === totalPages}
+          >
+            {
+              hasText &&
+              <span>{labels?.last}</span>
+            }
+            {isRtl ? lastIcon || <ChevronsLeft /> : firstIcon || <ChevronsRight />}
+          </PaginationLink>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default DefaultPagination;

package/src/components/ui/pagination/get-pagination-item.tsx

@@ -0,0 +1,36 @@
+export const getPaginationItems = (
+  currentPage: number,
+  totalPages: number,
+  dir: string
+): (number | string)[] => {
+  const pages: (number | string)[] = [];
+  const isRTL = dir === "rtl";
+
+
+  if (totalPages <= 6) {
+    for (let i = 1; i <= totalPages; i++) pages.push(i);
+  } else {
+    const showLeftDots = currentPage > 3;
+    const showRightDots = currentPage < totalPages - 2;
+
+    if (!showLeftDots) {
+      for (let i = 1; i <= 3; i++) pages.push(i);
+      pages.push("...", totalPages - 2, totalPages - 1, totalPages);
+    } else if (!showRightDots) {
+      pages.push(1, 2, 3, "...");
+      for (let i = totalPages - 2; i <= totalPages; i++) pages.push(i);
+    } else {
+      pages.push(
+        1,
+        "...",
+        currentPage - 1,
+        currentPage,
+        currentPage + 1,
+        "...",
+        totalPages
+      );
+    }
+  }
+
+  return isRTL ? [...pages].reverse() : pages;
+};

package/src/components/ui/pagination/pagination-card-button-group-aligned.tsx

@@ -0,0 +1,94 @@
+
+import { cn } from "@/lib/utils";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { PaginationCardButtonGroupAlignedProps } from "../../Pagination/type";
+import { PaginationContent } from "./pagination-content";
+import { PaginationItem } from "./pagination-item";
+import { PaginationLink } from "./pagination-link";
+
+const PaginationCardButtonGroupAligned = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  dir = "rtl",
+  labels,
+  renderPageNumbers,
+  justifyClassName,
+  prevIcon,
+  nextIcon,
+  hasText
+}: PaginationCardButtonGroupAlignedProps) => {
+  const isRTL = dir === "rtl";
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      className={cn("w-full flex", justifyClassName)}
+    >
+      <PaginationContent className="border border-gray-200 rounded-md">
+        <PaginationItem>
+          <PaginationLink
+            size="default"
+            className="px-3 py-1 text-sm disabled:opacity-50 flex items-center"
+            onClick={() => onPageChange?.(currentPage - 1)}
+            disabled={currentPage === 1}
+          >
+            <div className="flex items-center gap-1">
+              {isRTL ? (
+                <>
+                  {prevIcon || <ChevronRight size={16} />}
+                  {
+                    hasText &&
+                    <span className="hidden md:block">{labels?.prev}</span>
+                  }
+                </>
+              ) : (
+                <>
+                  {nextIcon || <ChevronLeft size={16} />}
+                  {
+                    hasText &&
+                    <span className="hidden md:block">{labels?.prev}</span>
+                  }
+                </>
+              )}
+            </div>
+          </PaginationLink>
+        </PaginationItem>
+
+        {renderPageNumbers()}
+
+        <PaginationItem>
+          <PaginationLink
+            size="default"
+            className="px-3 py-1 text-sm disabled:opacity-50 flex items-center"
+            onClick={() => onPageChange?.(currentPage + 1)}
+            disabled={currentPage === totalPages}
+          >
+            <div className="flex items-center gap-1">
+              {isRTL ? (
+                <>
+                  {
+                    hasText &&
+                    <span className="hidden md:block">{labels?.next}</span>
+                  }
+                  {nextIcon || <ChevronLeft size={16} />}
+                </>
+              ) : (
+                <>
+                  {
+                    hasText &&
+                    <span className="hidden md:block">{labels?.next}</span>
+                  }
+                  {prevIcon || <ChevronRight size={16} />}
+                </>
+              )}
+            </div>
+          </PaginationLink>
+        </PaginationItem>
+      </PaginationContent>
+    </nav>
+  );
+};
+
+export default PaginationCardButtonGroupAligned;

package/src/components/ui/pagination/pagination-card-minimal-left-aligned.tsx

@@ -0,0 +1,90 @@
+import { cn } from "@/lib/utils";
+import { PaginationProps } from "../../Pagination/type";
+import { PaginationContent } from "./pagination-content";
+import { PaginationItem } from "./pagination-item";
+import { PaginationLink } from "./pagination-link";
+
+const PaginationCardMinimalLeftAligned = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  dir = "rtl",
+  labels,
+  previousClassName,
+  nextClassName,
+  className,
+  ...props
+}: PaginationProps) => {
+  const isRtl = dir === "rtl";
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      className={cn(
+        "flex w-full items-center justify-between text-sm text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      <PaginationContent className="flex gap-2 items-center">
+        <PaginationItem>
+          <PaginationLink
+            aria-label="Go to first page"
+            size="default"
+            className="gap-1 px-2.5"
+            onClick={() => onPageChange?.(1)}
+            disabled={currentPage === 1}
+          >
+            <span>{labels?.first}</span>
+          </PaginationLink>
+        </PaginationItem>
+
+        <PaginationItem>
+          <PaginationLink
+            aria-label="Go to previous page"
+            size="default"
+            className={cn("gap-1", previousClassName)}
+            onClick={() =>
+              onPageChange?.(isRtl ? currentPage + 1 : currentPage - 1)
+            }
+            disabled={isRtl ? currentPage === totalPages : currentPage === 1}
+          >
+            <span>{isRtl ? labels?.next : labels?.prev}</span>
+          </PaginationLink>
+        </PaginationItem>
+
+        <PaginationItem>
+          <PaginationLink
+            aria-label="Go to next page"
+            size="default"
+            className={cn("gap-1", nextClassName)}
+            onClick={() =>
+              onPageChange?.(isRtl ? currentPage - 1 : currentPage + 1)
+            }
+            disabled={isRtl ? currentPage === 1 : currentPage === totalPages}
+          >
+            <span>{isRtl ? labels?.prev : labels?.next}</span>
+          </PaginationLink>
+        </PaginationItem>
+
+        <PaginationItem>
+          <PaginationLink
+            aria-label="Go to last page"
+            size="default"
+            className="gap-1 px-2.5"
+            onClick={() => onPageChange?.(totalPages)}
+            disabled={currentPage === totalPages}
+          >
+            <span>{labels?.last}</span>
+          </PaginationLink>
+        </PaginationItem>
+      </PaginationContent>
+      <span>
+        {labels?.page} {currentPage} {labels?.of} {totalPages}
+      </span>
+    </nav>
+  );
+};
+
+export default PaginationCardMinimalLeftAligned;

package/src/components/ui/pagination/pagination-content.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+import React from "react";
+
+
+export const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center cursor-pointer", className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = "PaginationContent";

package/src/components/ui/pagination/pagination-item.tsx

@@ -0,0 +1,11 @@
+import { cn } from "@/lib/utils";
+import React from "react";
+
+
+export const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("flex items-center ", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";

package/src/components/ui/pagination/pagination-link.tsx

@@ -0,0 +1,42 @@
+import { cn } from "@/lib/utils";
+import { PaginationLinkProps } from "../../Pagination/type";
+
+export const PaginationLink = ({
+  className,
+  isActive,
+  activeClassName,
+  disabled,
+  ...props
+}: PaginationLinkProps) => {
+  const defaultActiveClassName =
+    "rounded-md border bg-[#F9FAFB] text-[#182230] border-[#F9FAFB]";
+  const baseStyle =
+    "cursor-pointer inline-flex items-center gap-1.5 px-4 py-1.5 justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
+
+  const activeStyle = isActive ? activeClassName || defaultActiveClassName : "";
+  const disabledStyle = disabled ? "pointer-events-none opacity-50" : "";
+
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      className={cn(
+        baseStyle,
+        isActive
+          ? "border border-primary text-primary"
+          : "hover:bg-accent hover:text-accent-foreground",
+        activeStyle,
+        disabledStyle,
+        className
+      )}
+      {...props}
+      aria-disabled={disabled}
+      onClick={(e) => {
+        if (disabled) {
+          e.preventDefault();
+        } else {
+          props.onClick?.(e);
+        }
+      }}
+    />
+  );
+};

package/src/components/ui/tab-components/tabs-content.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+export function TabsContentComp({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}

package/src/components/ui/tab-components/tabs-list.tsx

@@ -0,0 +1,27 @@
+import { tabListVariants } from "@/components/Tabs/_.style";
+import { TabsListProps } from "@/components/Tabs/_.type";
+import { cn } from "@/lib/utils";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+export function TabsListComp({
+  className,
+  listVariant,
+  direction = "horizontal",
+  fullWidth = false,
+  ...props
+}: Readonly<TabsListProps>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        tabListVariants({
+          fullWidth,
+          listVariant,
+          direction,
+        }),
+        className
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/ui/tab-components/tabs-trigger.tsx

@@ -0,0 +1,25 @@
+import { tabTriggerVariants } from "@/components/Tabs/_.style";
+import { TabsTriggerProps } from "@/components/Tabs/_.type";
+import { cn } from "@/lib/utils";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+export function TabsTriggerComp({
+  className,
+  triggerVariant,
+  fullWidth,
+  ...props
+}: Readonly<TabsTriggerProps>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        tabTriggerVariants({
+          triggerVariant,
+          fullWidth,
+        }),
+        className
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/ui/text-content-wrapper.tsx

@@ -0,0 +1,36 @@
+import { cn } from "@/lib/utils";
+import { Button } from "../Button";
+
+export default function TextContentWrapper({
+  label,
+  labelClassName,
+  handleClick,
+  description,
+  descriptionClassName,
+}: {
+  label?: string;
+  labelClassName?: string;
+  handleClick: () => void;
+  description?: string;
+  descriptionClassName?: string;
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      {label && (
+        <Button
+          type="button"
+          variant="linkGray"
+          className={cn("text-sm", labelClassName)}
+          onClick={handleClick}
+        >
+          {label}
+        </Button>
+      )}
+      {description && (
+        <span className={cn("text-xs text-gray-500", descriptionClassName)}>
+          {description}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+
+export const useClickOutside = (
+    ref: React.RefObject<HTMLElement | null>,
+    handler: () => void,
+) => {
+    useEffect(() => {
+        const listener = (event: MouseEvent | TouchEvent) => {
+            if (!ref.current || ref.current.contains(event.target as Node)) {
+                return;
+            }
+            handler();
+        };
+
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
+
+        return () => {
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [ref, handler]);
+};

package/src/icons/general/ArrowLeft.tsx

@@ -0,0 +1,31 @@
+import { memo } from "react";
+import { IconPropsType } from "../icons.type";
+
+const MemoArrowLeft = ({
+  stroke = "#344054",
+  fill = "none",
+  width = "14",
+  height = "14",
+}: IconPropsType) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 14 14"
+      fill={fill}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.8333 7.00002H1.16663M1.16663 7.00002L6.99996 12.8334M1.16663 7.00002L6.99996 1.16669"
+        stroke={stroke}
+        strokeWidth="1.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+const ArrowLeft = memo(MemoArrowLeft);
+
+export default ArrowLeft;