naria-ui 0.1.2 → 0.1.5

package/README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

package/package.json

@@ -1,25 +1,58 @@
 {
   "name": "naria-ui",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "private": false,
-  "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build --turbopack",
-    "start": "next start",
-    "lint": "eslint"
+  "author": "",
+  "license": "ISC",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   },
   "dependencies": {
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "next": "15.5.6"
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.126",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   },
   "devDependencies": {
-    "typescript": "^5",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "15.5.6",
-    "@eslint/eslintrc": "^3"
   }
 }

package/app/layout.tsx

@@ -1,32 +0,0 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
-      </body>
-    </html>
-  );
-}

package/app/page.tsx

@@ -1,10 +0,0 @@
-import {Button} from "@/components";
-
-
-export default function Home() {
-  return (
-    <>
-      <Button value={'asda'} />
-    </>
-  );
-}

package/components/button/Button.tsx

@@ -1,28 +0,0 @@
-"use client"
-import React, {FC} from "react";
-
-export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
-    type?: "button" | "submit";
-    classNames?: string;
-    value: string;
-    theme?: "btn-primary" | "btn-secondary" | "btn-success" | "btn-warning" | "btn-info-light" | "btn-danger-light" | "btn-info-link" | "btn-outline-secondary" | "btn-outline-primary" | "btn-secondary-light";
-    size?: "btn-md" | "btn-sm";
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    icon?: HTMLElement | undefined;
-}
-
-const Button: FC<ButtonProps> = ({
-                                  type = "button", classNames = "",
-                                  value, theme = "btn-primary", size = "btn-md",
-                                  icon = undefined,
-                                  isLoading = false, isDisabled = false, ...otherProps
-                              }) => {
-    return (
-        <button type={type} disabled={isDisabled} {...otherProps}
-                className={`flex items-center gap-1.5 justify-center rounded-lg w-full ${theme} ${size} ${classNames}`}
-        >{isLoading ? <></> : undefined}{icon}{value}</button>
-    );
-};
-
-export default Button;

package/components/button/index.tsx

@@ -1,5 +0,0 @@
-import Button from './Button';
-
-export type { ButtonProps } from './Button';
-
-export default Button;

package/components/drawer/Drawer.tsx

@@ -1,98 +0,0 @@
-"use client"
-import {FC, forwardRef, useEffect, useImperativeHandle, useState} from "react";
-import {useWidth} from '@/hooks/use-width';
-import {useRouter} from 'next/navigation';
-
-export interface LibDrawerProps {
-    children?: React.ReactNode;
-    size?: string;
-    position?: "TOP" | "RIGHT" | "LEFT" | "BOTTOM";
-}
-
-export interface LibDrawerRef {
-    onToggle: () => void;
-}
-
-const Drawer = forwardRef<LibDrawerRef, LibDrawerProps>(({size, children, position = "TOP"}, ref) => {
-    useImperativeHandle(ref, () => ({
-        onToggle: () => onToggle(),
-    }));
-    const getDeviceWidth = useWidth();
-    const router = useRouter();
-    const [isShow, setIsShow] = useState(false);
-    const onToggle = () => {
-        setIsShow(!isShow);
-    }
-    const onToggleEvent = (e) => {
-        if (e?.target?.className.toString()?.includes('backdrop')) {
-            onToggle()
-        }
-    }
-    const getPosition = () => {
-        if (position === "TOP") {
-            return `top-0 ${getDeviceWidth < 1024 ? '' : 'rounded-b-xl'}`
-        }
-        if (position === "BOTTOM") {
-            return `bottom-0 ${getDeviceWidth < 1024 ? '' : 'rounded-t-xl'}`
-        }
-        if (position === "LEFT") {
-            return `left-0 ${getDeviceWidth < 1024 ? '' : 'rounded-r-xl'}`
-        }
-        if (position === "RIGHT") {
-            return `right-0 ${getDeviceWidth < 1024 ? '' : 'rounded-l-xl'}`
-        }
-    }
-
-    useEffect(() => {
-        const handlePopState = () => {
-            setIsShow(false);
-        };
-        window.addEventListener('popstate', handlePopState);
-        return () => {
-            window.removeEventListener('popstate', handlePopState);
-        };
-    }, []);
-
-    useEffect(() => {
-        if (getDeviceWidth < 1024) {
-            if (isShow) {
-                router.push('#drawer');
-            } else {
-                if (window.location.hash && !document.referrer.includes('#')) {
-                    router.back();
-                }
-            }
-        }
-        if (isShow) {
-            document.body.style.overflow = 'hidden';
-        } else {
-            document.body.style.overflow = 'auto';
-        }
-    }, [isShow]);
-
-    return (
-        <>
-            {isShow ?
-                (
-                    <div
-                        className={`backdrop bg-dark-100/20 backdrop-blur-sm fixed lg:place-items-center lg:grid right-0 top-0 left-0 bottom-0 w-full h-full z-40 duration-200 transition-opacity ${isShow ? "opacity-1" : "opacity-0 hidden pointer-events-none"}`}
-                        onClick={onToggleEvent}>
-                        <div
-                            className={`absolute z-50 transform p-3 md:p-5 bg-grey-100 shadow-xl transition-opacity
-                            ${getPosition()}
-                             duration-200 h-full w-full lg:h-auto ${size ? size : "max-w-lg"}
-                              ${isShow ? "opacity-1" : "opacity-0 pointer-events-none"}`}>
-                            <div
-                                className="overflow-y-auto max-h-[calc(100vh-60px)] md:max-h-[calc(100vh-90px)] h-full">
-                                {children}
-                            </div>
-                        </div>
-                    </div>
-                ) : undefined
-            }
-
-        </>
-    );
-});
-
-export default Drawer;

package/components/index.ts

@@ -1,2 +0,0 @@
-export { default as Button } from './button';
-export type { ButtonProps } from './button';

package/components/input/Input.tsx

@@ -1,89 +0,0 @@
-"use client"
-import {FC} from "react";
-
-export interface props {
-    type?: string;
-    classNames?: string;
-    placeholder: string;
-    label: string;
-    theme?: "secondary";
-    size?: "md" | "sm";
-    hasError?: string | null;
-    register?: any;
-    name?: string;
-    isDisabled?: boolean;
-    autocomplete?: boolean;
-}
-
-const themes = {
-    secondary: {
-        input: `border
-                bg-transparent 
-                placeholder:text-secondary-400 
-                outline-1 
-                outline-primary-100  
-                border-secondary-300 
-                rounded-md 
-                hover:not:border-primary-100 
-                focus:outline 
-                focus:border-primary-100
-                
-                disabled:text-secondary-100
-                disabled:border-secondary-500`,
-
-        label: `text-dark-100
-                peer-focus:text-primary-100 
-                peer-focus:scale-90
-                
-                peer-disabled:text-secondary-400`
-    }
-}
-
-const sizes = {
-    sm: {
-        input: "text-xs px-2 py-1",
-        label: `px-1 text-xs `,
-    },
-    md: {
-        input: "text-sm px-3 py-2",
-        label: `px-1 text-xs`,
-    },
-}
-const Input: FC<props> = ({
-                                 type = "text", placeholder, classNames = "",
-                                 label, theme = "secondary", size = "md", hasError,
-                                 register, name, isDisabled = false, autocomplete = false,
-                                 ...otherProps
-                             }) => {
-    return (
-        <div>
-            <label
-                htmlFor={name}
-                className={`cursor-text transition-all duration-200 
-                transform ${themes[theme].label} ${sizes[size].label}
-                ${hasError && "!text-danger-100"}`}>
-                {label}
-                <input
-                    disabled={isDisabled}
-                    autoComplete = {autocomplete ? "on" : "off"}
-                    id={name}
-                    {...register}
-                    {...otherProps}
-                    type={type}
-                    name={name}
-                    className={`mt-1 w-full bg-white transition duration-200 ease ${themes[theme].input} ${sizes[size].input}
-                ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"} ${classNames}`}
-                    placeholder={placeholder}
-                />
-            </label>
-            {
-                hasError &&
-                <p className="text-xs mt-1 text-danger-100">{hasError}</p>
-            }
-        </div>
-
-
-    );
-};
-
-export default Input;

package/components/lib-file-uploader/LibFileUploader.tsx

@@ -1,124 +0,0 @@
-"use client"
-import {FC, useEffect, useRef, useState} from "react";
-import CloudArrowUp from '@/assets/icons/cloud-arrow-up.svg'
-import LibButton from "@/components/lib/lib-button/LibButton";
-import convertFileSize from "@/utils/convert-file-size";
-import Loading from "@/components/shared/loading/Loading";
-
-export interface props {
-    isLoading: boolean;
-    onFileChange?: any;
-}
-
-const LibFileUploader: FC<props> = ({isLoading = true, onFileChange}) => {
-    const labelRef = useRef(null);
-    const [isDragging, setIsDragging] = useState(false);
-    const [selectedFile, setSelectedFile] = useState(null);
-
-    const handleDragEnter = (e) => {
-        e.preventDefault();
-        setIsDragging(true);
-    };
-
-    const handleDragLeave = (e) => {
-        e.preventDefault();
-        setIsDragging(false);
-    };
-
-    const handleDragOver = (e) => {
-        e.preventDefault();
-        setIsDragging(true);
-    };
-
-    const handleDrop = (e) => {
-        e.preventDefault();
-        if (isLoading) {
-            return;
-        }
-        setIsDragging(false);
-        const file = e?.target?.files ? e?.target?.files[0] : e?.dataTransfer?.files[0];
-        if (file) {
-            setSelectedFile(file);
-        }
-    };
-    const onCancel = () => {
-        setSelectedFile(null)
-    }
-    const onUpload = () => {
-        onFileChange(selectedFile)
-    }
-    useEffect(() => {
-        if(!isLoading) {
-            setSelectedFile(null);
-        }
-    }, [isLoading])
-    return (
-
-        <div className="relative border border-dashed border-secondary-100/40 rounded-2xl overflow-hidden">
-            <label
-                ref={labelRef}
-                className={`py-10 px-6 block ${isDragging ? 'border-secondary-100/100 bg-secondary-100/5' : ''}`}
-                onDragEnter={handleDragEnter}
-                onDragLeave={handleDragLeave}
-                onDragOver={handleDragOver}
-                onDrop={handleDrop}
-            >
-                <div className="flex flex-col md:flex-row justify-center items-center gap-16">
-                    <div className="flex gap-5 items-center flex-col md:flex-row">
-                        <CloudArrowUp className="w-10 mt-2.5 shrink-0"/>
-                        <div>
-                            <p className="text-base font-bold">جهت انتخاب فایل کلیک کرده یا فایل مورد نظر را اینجا رها
-                                کنید.</p>
-                            <p className="text-sm text-secondary-100 mt-2">فایل‌های قابل انتخاب: PNG، JPEG، MP4</p>
-                            <p className="text-sm text-secondary-100 mt-2">حداکثر حجم مجاز: 2 مگابایت</p>
-                        </div>
-                    </div>
-
-                    <input type="file" accept="image/png, image/jpeg, image/jpg, video/mp4"
-                           value=""
-                           onChange={handleDrop} className="hidden"/>
-                    <div className="sm:max-w-[120px] w-full">
-                        <LibButton theme="btn-info-light" onClick={() => labelRef.current.click()} value="انتخاب فایل"/>
-                    </div>
-
-                </div>
-
-
-            </label>
-            {
-                selectedFile && !isLoading ? (
-                    <div className="absolute bg-light-100 top-0 right-0 w-full h-full flex items-center">
-                        <div className="text-sm mx-auto w-full max-w-[250px]">
-                            <p className="flex gap-1"><span className="text-secondary-100 shrink-0">نام فایل:</span>
-                                <span
-                                    className="inline-block ltr text-ellipsis overflow-hidden truncate">{selectedFile?.name}</span>
-                            </p>
-                            <p><span
-                                className="text-secondary-100">حجم فایل:</span> {convertFileSize(selectedFile?.size)}
-                            </p>
-                            <div className="flex mt-4 gap-2">
-
-                                <div className="grow">
-                                    <LibButton value="انصراف" size="btn-sm" theme="btn-danger-light" onClick={onCancel}/>
-                                </div>
-                                <div className="grow">
-                                    <LibButton value="تایید" size="btn-sm" theme="btn-success" onClick={onUpload}/>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                ) : undefined
-            }
-            {
-                selectedFile && isLoading ? (
-                    <div className="absolute bg-light-100 top-0 right-0 w-full h-full flex items-center gap-3 justify-center">
-                        <Loading size="w-6.5 h-6.5" /> <span>در حال بارگزاری...</span>
-                    </div>
-                ) : undefined
-            }
-
-        </div>
-    );
-};
-
-export default LibFileUploader;

package/components/lib-pagination/LibPagination.tsx

@@ -1,198 +0,0 @@
-"use client"
-import {FC, useEffect, useState} from "react";
-import ArrowRight from "@/assets/icons/angle-right.svg";
-import ArrowLeft from "@/assets/icons/angle-left.svg";
-import {generateUuid} from '@/utils/generate-uuid';
-
-export interface props {
-    theme?: "primary" | "secondary" | "warning" | "infoLight" | "dangerLight" | "infoLink" | "outlineSecondary" | "outlinePrimary";
-    activeTheme?: "primary" | "secondary" | "warning" | "infoLight" | "dangerLight" | "infoLink" | "outlineSecondary" | "outlinePrimary";
-    size?: "md" | "sm";
-    totalCount: number;
-    pageSize: number;
-    onPageChange: any;
-    selectedPage?: any;
-}
-
-const sizes = {
-    sm: "text-xs h-8 min-w-8",
-    md: "text-sm h-10 min-w-10"
-}
-const sizesArrow = {
-    sm: "w-2.5",
-    md: "w8"
-}
-
-export const buttonThemes = {
-    primary: `border border-transparent bg-primary-100 text-white hover:bg-primary-200 focus:bg-primary-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    secondary: `border border-transparent bg-secondary-100 text-white hover:bg-secondary-200 focus:bg-secondary-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    success: `border border-transparent bg-success-100 text-white hover:bg-success-200 focus:bg-success-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    warning: `border border-transparent bg-warning-100 text-dark-100 hover:bg-warning-200 focus:bg-warning-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    infoLight: `border border-transparent bg-info-100/10 text-info-100 hover:brightness-80 focus:brightness-80 hover:border-info-100 focus:border-info-100 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    dangerLight: `border border-transparent bg-danger-300 text-danger-100 hover:bg-danger-400 focus:bg-danger-400 hover:border-danger-100 focus:border-danger-100 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    infoLink: `text-info-100 hover:text-info-200 focus:text-info-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    outlinePrimary: `border border-primary-100 text-primary-100 hover:bg-primary-300 focus:bg-primary-300 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    outlineSecondary: `border border-secondary-100 text-secondary-100 enabled:hover:bg-grey-200 focus:bg-grey-200 disabled:text-grey-300 disabled:border-grey-200 disabled:fill-grey-200 disabled:cursor-not-allowed`,
-}
-export const activeThemes = {
-    primary: `border border-transparent bg-primary-100 text-white hover:bg-primary-200 focus:bg-primary-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    secondary: `border border-transparent bg-secondary-100 text-white hover:bg-secondary-200 focus:bg-secondary-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    success: `border border-transparent bg-success-100 text-white hover:bg-success-200 focus:bg-success-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    warning: `border border-transparent bg-warning-100 !text-dark-100 hover:bg-warning-200 focus:bg-warning-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    infoLight: `border border-transparent bg-info-100/10 text-info-100 hover:brightness-80 focus:brightness-80 hover:border-info-100 focus:border-info-100 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    dangerLight: `border border-transparent bg-danger-300 text-danger-100 hover:bg-danger-400 focus:bg-danger-400 hover:border-danger-100 focus:border-danger-100 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    infoLink: `text-info-100 hover:text-info-200 focus:text-info-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    outlinePrimary: `transition duration-200 ease border border-primary-100 text-primary-100 hover:bg-primary-300 focus:bg-primary-300 disabled:text-grey-300 disabled:cursor-not-allowed`,
-    outlineSecondary: `border border-secondary-100 text-secondary-100 hover:bg-grey-200 focus:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
-}
-export const dotsThemes = {
-    outlineSecondary: `text-secondary-100`,
-}
-export const arrowThemes = {
-    outlineSecondary: `fill-secondary-100`,
-}
-
-const LibPagination: FC<props> = ({
-                                      totalCount,
-                                      pageSize,
-                                      onPageChange,
-                                      selectedPage,
-                                      activeTheme = "primary",
-                                      theme = "primary",
-                                      size = "md"
-                                  }) => {
-    const [selected, setSelected] = useState(1);
-    const [pagesCount, setPagesCount] = useState(1);
-    const [list, setList] = useState([]);
-    const onPaginationClicked = (item: number) => {
-        setSelected(item);
-        onPageChange(+item);
-    };
-    useEffect(() => {
-        onPagesCountHandler();
-    }, [totalCount]);
-    useEffect(() => {
-        setSelected(1);
-        onPagesCountHandler();
-    }, [pageSize]);
-    const onPagesCountHandler = () => {
-        const totalPages =
-            totalCount < pageSize ? 1 : Math.ceil(totalCount / pageSize);
-        setPagesCount(totalPages);
-    };
-    useEffect(() => {
-        generatePages();
-    }, [selected, pagesCount, totalCount]);
-    useEffect(() => {
-        if (selectedPage) {
-            setSelected(selectedPage);
-        }
-    }, [selectedPage]);
-
-    const generatePages = () => {
-        const list: any = [];
-        if (totalCount > 0) {
-            list.push(
-                <button
-                    className={`rounded-lg flex items-center justify-center ${buttonThemes[theme]} ${sizes[size]} ${arrowThemes[theme]}`}
-                    disabled={selected === 1}
-                    onClick={() => onPaginationClicked(selected - 1)}
-                    key={generateUuid()}>
-                    <ArrowRight className={`${sizesArrow[size]}`}/>
-                </button>
-            );
-            if (pagesCount <= 5) {
-                for (let i = 1; i <= pagesCount; i++) {
-                    list.push(
-                        <button
-                            className={`rounded-lg flex items-center justify-center ${sizes[size]} ${selected === i ? activeThemes[activeTheme] : buttonThemes[theme]}`}
-
-                            onClick={() => onPaginationClicked(i)}
-                            key={generateUuid()}
-                        >
-                            {i}
-                        </button>
-                    );
-                }
-            } else {
-                if (selected > pagesCount - 3) {
-                    list.push(
-                        <button
-                            className={`rounded-lg flex items-center justify-center ${sizes[size]} ${selected === 1 ? activeThemes[activeTheme] : buttonThemes[theme]}`}
-                            onClick={() => onPaginationClicked(1)}
-                            key={generateUuid()}
-                        >
-                            {1}
-                        </button>
-                    );
-                    list.push(
-                        <div
-                            className={`rounded-lg flex items-center justify-center ${dotsThemes[theme]} ${sizes[size]}`}
-                            key={generateUuid()}>
-                            ...
-                        </div>
-                    );
-                    for (let i = pagesCount - 3; i <= pagesCount; i++) {
-                        list.push(
-                            <button
-                                className={`rounded-lg flex items-center justify-center ${sizes[size]} ${selected === i ? activeThemes[activeTheme] : buttonThemes[theme]}`}
-                                onClick={() => onPaginationClicked(i)}
-                                key={generateUuid()}
-                            >
-                                {i}
-                            </button>
-                        );
-                    }
-                } else {
-                    const maxPage = selected < 3 ? 4 : selected + 2;
-                    const fromPage = selected < 3 ? 1 : selected - 1;
-                    for (let i = fromPage; i <= maxPage; i++) {
-                        list.push(
-                            <button
-                                className={`rounded-lg flex items-center justify-center ${sizes[size]} ${selected === i ? activeThemes[activeTheme] : buttonThemes[theme]}`}
-                                onClick={() => onPaginationClicked(i)}
-                                key={generateUuid()}
-                            >
-                                {i}
-                            </button>
-                        );
-                    }
-                    list.push(
-                        <div
-                            className={`rounded-lg flex items-center justify-center ${dotsThemes[theme]} ${sizes[size]}`}
-                            key={generateUuid()}>
-                            ...
-                        </div>
-                    );
-                    list.push(
-                        <button
-                            className={`rounded-lg flex items-center justify-center ${sizes[size]} ${selected === pagesCount ? activeThemes[activeTheme] : buttonThemes[theme]}`}
-                            onClick={() => onPaginationClicked(pagesCount)}
-                            key={generateUuid()}
-                        >
-                            {pagesCount}
-                        </button>
-                    );
-                }
-            }
-            list.push(
-                <button
-                    className={`rounded-lg flex items-center justify-center ${buttonThemes[theme]} ${sizes[size]} ${arrowThemes[theme]}`}
-                    disabled={selected === pagesCount}
-                    onClick={() => onPaginationClicked(selected + 1)}
-                    key={generateUuid()}
-                >
-                    <ArrowLeft className={`${sizesArrow[size]}`}/>
-                </button>
-            );
-        }
-        setList(list);
-    };
-    return (
-        <div className="flex items-center justify-center rounded-xl gap-2">
-            {list}
-        </div>
-    );
-};
-
-export default LibPagination;

package/components/modal/Modal.tsx

@@ -1,88 +0,0 @@
-"use client"
-import {FC, forwardRef, useEffect, useImperativeHandle, useState} from "react";
-import Close from '@/assets/icons/close.svg'
-import {useWidth} from '@/hooks/use-width';
-import {addNavigation, onHashChanges, removeNavigation} from "@/utils/navigator/navigator-v2";
-
-export interface LibModalProps {
-    title?: string;
-    children?: React.ReactNode;
-    size?: string;
-    height?: string;
-}
-
-export interface LibModalRef {
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-}
-
-const Modal = forwardRef<LibModalRef, LibModalProps>(({title, size, height, children}, ref) => {
-    const getDeviceWidth = useWidth();
-    const isHashChanged = onHashChanges();
-    const [isShow, setIsShow] = useState(false);
-
-    const open = () => setIsShow(true);
-    const close = () => setIsShow(false);
-    const toggle = () => setIsShow((v) => !v);
-
-    useImperativeHandle(ref, () => ({open, close, toggle}), []);
-
-    const onBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
-        if (e.currentTarget === e.target) close();
-    };
-
-    useEffect(() => {
-        if (isHashChanged) {
-            close();
-        }
-    }, [isHashChanged])
-
-    useEffect(() => {
-        if (getDeviceWidth < 1024) {
-            if (isShow) {
-                addNavigation()
-            } else {
-                removeNavigation();
-            }
-        }
-        document.body.style.overflow = isShow ? "hidden" : "auto";
-        return () => {
-            document.body.style.overflow = "auto";
-        };
-
-    }, [isShow]);
-    
-    return isShow ? (
-        <div
-            className={`backdrop bg-dark-100/30 fixed items-end justify-center px-4 md:px-10 lg:px-0 
-            lg:place-items-center flex right-0 top-0 left-0 bottom-0 w-full h-full z-50 duration-200 transition-opacity ${
-                isShow ? "opacity-1" : "opacity-0 hidden pointer-events-none"
-            }`}
-            onClick={onBackdropClick}
-        >
-            <div
-                className={`transform p-3 md:p-5 rounded-t-2xl lg:rounded-2xl bg-grey-100 shadow-xl transition-opacity
-                 duration-200 lg:h-auto w-full ${
-                    size || " lg:max-w-2xl"
-                } ${isShow ? "opacity-1" : "opacity-0 pointer-events-none"} ${
-                    getDeviceWidth < 1024 ? `${height ? height : "h-[90vh]"} animate-drawer-bottom-to-top` : `${height ? height : "h-full"} animate-fade-in-translate-y`
-                }`}
-            >
-                <div className="flex items-center justify-between">
-                    <div className="font-bold text-base lg:text-lg">{title ?? ""}</div>
-                    <button className="inline-block" onClick={close}>
-                        <Close className="w-6"/>
-                    </button>
-                </div>
-                <div
-                    className="h-full overflow-y-auto mt-3 md:mt-5 max-h-[calc(100%-40px)] lg:max-h-[calc(100vh-90px)]">
-                    {children}
-                </div>
-            </div>
-        </div>
-    ) : <></>;
-});
-
-Modal.displayName = "LibModal";
-export default Modal;

package/components/select/Select.tsx

@@ -1,210 +0,0 @@
-"use client"
-import {FC, useEffect, useState} from "react";
-import AngleDown from "@/assets/icons/angle-down.svg";
-import Close from '@/assets/icons/close.svg';
-import Loading from '@/components/shared/loading/Loading';
-import {useWidth} from '@/hooks/use-width';
-import {useRouter} from 'next/navigation';
-
-export interface props {
-    list?: any[];
-    label?: string;
-    title: string;
-    value?: string;
-    api?: any;
-    maxHeight?: string;
-    theme?: "secondary";
-    hasError?: string | null;
-    size?: "md" | "sm";
-    onSelectChange?: any;
-    selected?: any;
-}
-
-const themes = {
-    secondary: {
-        input: `border
-                bg-transparent 
-                placeholder:text-secondary-400 
-                outline-1 
-                outline-primary-100  
-                border-secondary-300 
-                rounded-md 
-                hover:not:border-primary-100 
-                focus:outline 
-                focus:border-primary-100
-                
-                disabled:text-secondary-100
-                disabled:border-secondary-500`,
-
-        label: `text-dark-100
-                peer-focus:text-primary-100 
-                peer-focus:scale-90
-                
-                peer-disabled:text-secondary-400`
-    }
-}
-const sizes = {
-    sm: {
-        input: "text-xs px-2 py-1",
-        label: `px-1 text-xs `,
-    },
-    md: {
-        input: "text-sm px-3 py-2.5",
-        label: `px-1 text-xs`,
-    },
-}
-const Select: FC<props> = ({
-                                  list, label, hasError,
-                                  title, value, api,
-                                  maxHeight = "max-h-64", theme = "secondary", size = "md",
-                                  onSelectChange,
-                                  selected
-                              }) => {
-    const getDeviceWidth = useWidth();
-    const router = useRouter();
-    const [isShow, setIsShow] = useState(false);
-    const [isLoading, setIsLoading] = useState(true);
-    const [localSelected, setLocalSelected] = useState(null);
-    const [localList, setLocalList] = useState(null);
-    useEffect(() => {
-        if (api) {
-            setIsLoading(true);
-            api().then((res) => {
-                setIsLoading(false);
-                setLocalList(res?.data?.message ? [] : res.data);
-            })
-        }
-    }, [api]);
-    useEffect(() => {
-        if (getDeviceWidth < 1024) {
-
-            if (isShow) {
-                router.push('#select');
-                document.body.style.overflow = 'hidden';
-            } else {
-
-                if (window.location.hash && !document.referrer.includes('#')) {
-                    router.back();
-                }
-                document.body.style.overflow = 'auto';
-            }
-        }
-    }, [isShow]);
-
-    useEffect(() => {
-        const handlePopState = () => {
-            setIsShow(false);
-        };
-        window.addEventListener('popstate', handlePopState);
-        return () => {
-            window.removeEventListener('popstate', handlePopState);
-        };
-    }, []);
-
-    useEffect(() => {
-        if (label?.length) {
-            setLocalSelected(localList?.find(item => item[label] === selected));
-        } else {
-            setLocalSelected(selected);
-        }
-    }, [selected, localList]);
-
-    const onToggle = () => {
-        setIsShow(prevState => !prevState);
-    }
-    const onToggleEvent = (e) => {
-        if (e?.target?.className.toString()?.includes('backdropSelect')) {
-            onToggle()
-        }
-    }
-    const onSelect = (item) => {
-        setLocalSelected(item);
-        onToggle();
-        onSelectChange(item);
-    }
-
-    const getActiveClass = (item) => {
-        if (!localSelected) {
-            return "";
-        }
-        if (label?.length && item[label] === localSelected[label]) {
-            return "bg-grey-100"
-        }
-        if (item === localSelected) {
-            return "bg-grey-100"
-        }
-    }
-    return (
-        <div className="relative">
-            <label
-                className={`cursor-pointer
-                ${hasError && "!text-danger-100"}`}>
-                <span className={`${themes[theme].label} ${sizes[size].label}`}>{title}</span>
-                <button type="button"
-                        className={`relative z-20 flex items-center mt-1 text-base justify-between gap-2 w-full ${localSelected ? "text-dark-100" : "text-grey-300"} ${themes[theme].input} ${sizes[size].input} ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`}
-                        onClick={onToggle}>
-                    {
-                        localSelected ? (
-                            value?.length ? localSelected[value] : localSelected
-                        ) : "انتخاب"
-                    } <AngleDown
-                    className={`w-4 h-4 transition ease duration-200 ${!isShow ? "rotate-0" : "rotate-180"}`}/>
-                </button>
-            </label>
-
-            {
-                isShow ? (
-                    <div
-                        className={`overflow-hidden ${getDeviceWidth < 1024 ? "fixed top-0 right-0 h-full w-full z-40" : ""}`}>
-                        <div
-                            className={`flex flex-col w-full z-40 bg-light-100 w-full shadow-lg border border-secondary-300 ${getDeviceWidth < 1024 ? "relative h-full pt-1 pb-5 px-5" : `animate-fade-in-translate-y mt-1 rounded-lg absolute ${maxHeight}`} overflow-auto`}>
-                            {
-                                api && isLoading ? (
-                                    <div className="py-10 flex justify-center">
-                                        <Loading size="w-7 h-7"/>
-                                    </div>
-                                ) : (
-                                    <>
-                                        {
-                                            getDeviceWidth < 1024 ? (
-                                                <div className="sticky top-0 text-left">
-                                                    <button className="p-3" onClick={onToggle}>
-                                                        <Close className="w-6"/>
-                                                    </button>
-                                                </div>
-                                            ) : undefined
-                                        }
-                                        {
-                                            localList?.map((item, index) => {
-                                                return (
-                                                    <>
-                                                        <button type="button" onClick={() => onSelect(item)} key={index}
-                                                                className={`text-right py-2.5 px-4 text-base hover:bg-grey-100 rounded-lg ${getActiveClass(item)}`}>
-                                                            {value?.length ? item[value] : item}
-                                                        </button>
-                                                    </>
-                                                )
-                                            })
-                                        }
-                                    </>
-                                )
-                            }
-                        </div>
-                        <div
-                            className={`backdropSelect fixed top-0 left-0 bottom-0 w-full h-full z-30`}
-                            onClick={onToggleEvent}>
-
-                        </div>
-                    </div>
-                ) : undefined
-            }
-            {
-                hasError &&
-                <p className="text-xs mt-1 text-danger-100">{hasError}</p>
-            }
-
-        </div>
-    );
-};
-
-export default Select;

package/components/tabs/LibTabs.tsx

@@ -1,31 +0,0 @@
-"use client"
-import {FC, useEffect, useRef, useState} from "react";
-
-interface TabType {
-    name: string;
-    label: string;
-}
-
-export interface props {
-    tabs: TabType[],
-    onTabEmit?: any,
-}
-
-const LibTabs: FC<props> = ({tabs, onTabEmit}) => {
-    const [isActive, setIsActive] = useState(0);
-    const onTabClicked = (item: TabType, index: number) => {
-        setIsActive(index)
-        onTabEmit(item)
-    }
-    return (
-        <div className="flex border-2 border-primary-100 rounded-lg overflow-hidden divide-x-2 divide-x-reverse divide-primary-100">
-            {
-                tabs.map((item: TabType, index: number) => {
-                    return <button className={`transition font-bold grow p-2 ${isActive === index ? "bg-primary-100 text-light-100" : ""}`} key = {index} onClick={() => onTabClicked(item, index)}>{item.label}</button>
-                })
-            }
-        </div>
-    );
-};
-
-export default LibTabs;

package/components/textarea/Textarea.tsx

@@ -1,87 +0,0 @@
-"use client"
-import {FC} from "react";
-
-export interface props {
-    classNames?: string;
-    placeholder: string;
-    label: string;
-    theme?: "secondary";
-    size?: "md" | "sm";
-    hasError?: string | null;
-    register?: any;
-    name?: string;
-    isDisabled?: boolean;
-    rows?: number;
-}
-
-const themes = {
-    secondary: {
-        input: `border
-                bg-transparent 
-                placeholder:text-secondary-400 
-                outline-1 
-                outline-primary-100  
-                border-secondary-300 
-                rounded-md 
-                hover:not:border-primary-100 
-                focus:outline 
-                focus:border-primary-100
-                
-                disabled:text-secondary-100
-                disabled:border-secondary-500`,
-
-        label: `text-dark-100
-                peer-focus:text-primary-100 
-                peer-focus:scale-90
-                
-                peer-disabled:text-secondary-400`
-    }
-}
-
-const sizes = {
-    sm: {
-        input: "text-xs px-2 py-1",
-        label: `px-1 text-xs `,
-    },
-    md: {
-        input: "text-sm px-3 py-2",
-        label: `px-1 text-xs`,
-    },
-}
-const Textarea: FC<props> = ({
-                                 rows = 3, placeholder, classNames = "",
-                                 label, theme = "secondary", size = "md", hasError,
-                                 register, name, isDisabled = false,
-                                 ...otherProps
-                             }) => {
-    return (
-        <div>
-            <label
-                htmlFor={name}
-                className={`cursor-text transition-all duration-200 
-                transform ${themes[theme].label} ${sizes[size].label}
-                ${hasError && "!text-danger-100"}`}>
-                {label}
-                <textarea
-                    disabled={isDisabled}
-                    rows={rows}
-                    id={name}
-                    {...register}
-                    {...otherProps}
-                    name={name}
-                    className={`mt-1 w-full bg-white transition duration-200 ease ${themes[theme].input} ${sizes[size].input}
-                ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"} ${classNames}`}
-                    placeholder={placeholder}
-                />
-            </label>
-            {
-                hasError &&
-                <p className="text-xs mt-1 text-danger-100">{hasError}</p>
-            }
-        </div>
-
-
-    );
-};
-
-export default Textarea;

package/eslint.config.mjs

@@ -1,25 +0,0 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
-
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
-  {
-    ignores: [
-      "node_modules/**",
-      ".next/**",
-      "out/**",
-      "build/**",
-      "next-env.d.ts",
-    ],
-  },
-];
-
-export default eslintConfig;

package/index.ts

@@ -1 +0,0 @@
-module.exports = require('./components');

package/next.config.ts

@@ -1,7 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  /* config options here */
-};
-
-export default nextConfig;

package/public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

package/public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

package/public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

package/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}