forma-ui 0.0.8 → 0.0.9

package/dist/components/ui/Accordion.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+export type AccordionProps = {
+    parentClassName?: string;
+    className?: string;
+    circleLocation?: string;
+    secoundCircleLocation?: string;
+    children: ReactNode;
+    icon?: ReactNode;
+    title: string;
+    title_classname?: string;
+    open?: boolean;
+    onToggle?: () => void;
+    sliding?: boolean;
+    animation?: "scale" | "fade" | "slide" | "bounce";
+};
+declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

package/dist/components/ui/Accordion.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { cn } from "../../libs/utils";
+const Accordion = ({ parentClassName, className, circleLocation, secoundCircleLocation, children, icon, title, title_classname, open, onToggle, sliding = true, animation = "slide", }) => {
+    const [isOpen, setIsOpen] = useState(open !== null && open !== void 0 ? open : false);
+    // sync with controlled open
+    useEffect(() => {
+        if (open !== undefined)
+            setIsOpen(open);
+    }, [open]);
+    const toggleOpen = () => {
+        if (onToggle) {
+            onToggle(); // parent کنترل می‌کند
+        }
+        else if (sliding) {
+            setIsOpen(!isOpen); // internal state
+        }
+    };
+    const getAnimationClasses = () => {
+        switch (animation) {
+            case "scale":
+                return isOpen
+                    ? "max-h-screen scale-100 opacity-100"
+                    : "max-h-0 scale-95 opacity-0";
+            case "fade":
+                return isOpen ? "max-h-screen opacity-100" : "max-h-0 opacity-0";
+            case "bounce":
+                return isOpen
+                    ? "max-h-screen opacity-100 animate-bounce"
+                    : "max-h-0 opacity-0";
+            case "slide":
+            default:
+                return isOpen
+                    ? "max-h-screen translate-y-0 opacity-100"
+                    : "max-h-0 -translate-y-2 opacity-0";
+        }
+    };
+    return (_jsxs("div", { className: cn("relative overflow-hidden rounded-2xl", parentClassName), children: [_jsx("div", { className: cn("flex flex-row w-full items-start justify-between bg-white dark:bg-background-light border border-Neutral-100 dark:border-Neutral-400/50 rounded-2xl", className), children: _jsxs("div", { className: "flex flex-col w-full", children: [_jsxs("div", { onClick: toggleOpen, className: cn("p-4 flex flex-row justify-between items-center", sliding && "cursor-pointer"), children: [_jsxs("div", { className: "flex flex-row gap-2 items-center", children: [icon && (_jsx("span", { className: "bg-secondary-50 dark:bg-background-light rounded-full p-2", children: icon })), _jsx("div", { className: cn("text-Neutral-500 dark:text-white text-base font-medium inline-flex select-none", title_classname), children: title })] }), sliding && (_jsx("svg", { className: cn("w-4 h-4 transition-transform duration-300 text-gray-600", isOpen ? "rotate-180" : "rotate-90"), fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }))] }), _jsx("div", { className: cn("overflow-hidden transition-all duration-300 ease-in-out", getAnimationClasses()), children: _jsx("div", { className: "p-4", children: children }) })] }) }), circleLocation && isOpen && (_jsx("div", { className: "w-full", children: _jsx("div", { className: cn("absolute transition-all duration-700 ease-in-out w-40 h-40 opacity-50 bg-violet-300/30 rounded-full blur-2xl pointer-events-none", circleLocation) }) })), secoundCircleLocation && isOpen && (_jsx("div", { className: "w-full", children: _jsx("div", { className: cn("absolute transition-all duration-700 ease-in-out w-40 h-40 opacity-50 bg-violet-300/30 rounded-full blur-2xl pointer-events-none", secoundCircleLocation) }) }))] }));
+};
+export default Accordion;

package/dist/components/ui/Button.d.ts

@@ -0,0 +1,12 @@
+import { ButtonHTMLAttributes } from "react";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "outline" | "danger" | "success" | "warning" | "icon";
+    size?: "sm" | "md" | "lg" | "xl";
+    loading?: boolean;
+    icon?: React.ReactNode;
+    iconPosition?: "left" | "right";
+    fullWidth?: boolean;
+    clickAnimation?: "none" | "scale" | "bounce" | "pulse" | "press";
+}
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/components/ui/Button.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// components/ui/Button.tsx
+import { forwardRef } from "react";
+import { cn } from "../../libs/utils";
+const Button = forwardRef((_a, ref) => {
+    var { className, variant = "primary", size = "md", loading = false, icon, iconPosition = "left", fullWidth = false, clickAnimation = "none", children, disabled } = _a, props = __rest(_a, ["className", "variant", "size", "loading", "icon", "iconPosition", "fullWidth", "clickAnimation", "children", "disabled"]);
+    const isDisabled = disabled || loading;
+    // Variant styles
+    const variantStyles = {
+        primary: "bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus:ring-blue-500",
+        secondary: "bg-gray-600 text-white hover:bg-gray-700 active:bg-gray-800 focus:ring-gray-500",
+        outline: "border border-gray-300 bg-transparent hover:bg-gray-50 text-gray-700 focus:ring-blue-500",
+        danger: "bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus:ring-red-500",
+        success: "bg-green-600 text-white hover:bg-green-700 active:bg-green-800 focus:ring-green-500",
+        warning: "bg-yellow-500 text-white hover:bg-yellow-600 active:bg-yellow-700 focus:ring-yellow-500",
+        icon: "bg-transparent hover:bg-gray-100 text-gray-600 focus:ring-gray-500",
+    };
+    // Size styles
+    const sizeStyles = {
+        sm: "h-8 px-3 text-xs",
+        md: "h-10 px-4 py-2",
+        lg: "h-12 px-6 text-lg",
+        xl: "h-14 px-8 text-xl",
+    };
+    // Click animation styles
+    const animationStyles = {
+        none: "",
+        scale: "active:scale-95 transition-transform duration-150",
+        bounce: "active:scale-110 transition-transform duration-150",
+        pulse: "active:animate-pulse transition-all duration-150",
+        press: "active:translate-y-1 transition-transform duration-150",
+    };
+    const baseStyles = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
+    return (_jsxs("button", Object.assign({ className: cn(baseStyles, variantStyles[variant], sizeStyles[size], animationStyles[clickAnimation], fullWidth && "w-full", loading && "cursor-wait", className), disabled: isDisabled, ref: ref }, props, { children: [loading && (_jsxs("svg", { className: "mr-2 h-4 w-4 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), !loading && icon && iconPosition === "left" && (_jsx("span", { className: "mr-2", children: icon })), children, !loading && icon && iconPosition === "right" && (_jsx("span", { className: "ml-2", children: icon }))] })));
+});
+Button.displayName = "Button";
+export default Button;

package/dist/components/ui/CheckBox.d.ts

@@ -0,0 +1,7 @@
+type CheckboxProps = {
+    label: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+};
+export default function Checkbox({ label, checked, onChange }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/CheckBox.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Checkbox({ label, checked, onChange }) {
+    return (_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: checked, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), className: "w-4 h-4 accent-blue-600 rounded" }), _jsx("span", { children: label })] }));
+}

package/dist/components/ui/Input.d.ts

@@ -0,0 +1,11 @@
+import type { InputTextProps, InputEmailProps, InputMobileProps, InputPasswordProps, InputRePasswordProps, InputTextAreaProps, InputSearchProps, InputRadioButtonProps, InputToggleProps, InputDarkLightProps } from "./Input.types";
+export declare function InputText({ label, className, id, disabled, value, onChange, onClear, ...props }: InputTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputEmail({ label, className, id, variant, error, disabled, placeholder, value, onChange, onClear, ...props }: InputEmailProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputMobile({ label, className, id, error, disabled, placeholder, value, onChange, onClear, ...props }: InputMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputTextArea({ label, className, id, value, onChange, ...props }: InputTextAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputSearch({ className, id, inputSearchRef, classNameParent, searchClassname, param, value, onChange, ...props }: InputSearchProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputPassword({ label, className, id, variant, error, buttonFirstId, buttonSecondId, value, onChange, onClear, ...props }: InputPasswordProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputRePassword({ label, id, buttonId, passwordFieldId, ...props }: InputRePasswordProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputDarkLight({ className }: InputDarkLightProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputRadioButton({ className, id, index, name, useIndex, onSortChange, ...props }: InputRadioButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputToggle({ className, checked, onStatusChange, ...props }: InputToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/Input.js

@@ -0,0 +1,176 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { CloseSquareIcon, EmailIcon, MobielIcon, SunIcon, HideIcon, LockIcon, SearchIcon, ShowIcon, MoonIcon, } from "../icon/icon";
+import { cn } from "@/libs/utils";
+// Simple translation function replacement (no external library)
+const translate = (key) => {
+    const translations = {
+        error_invalid_email: "Please enter a valid email address",
+        error_invalid_mobile: "Please enter a valid mobile number",
+        error_min_length_password: "Password must be at least 5 characters",
+        error_re_password: "Passwords do not match",
+    };
+    return translations[key] || key;
+};
+// InputText Component
+export function InputText(_a) {
+    var { label, className, id, disabled, value, onChange, onClear } = _a, props = __rest(_a, ["label", "className", "id", "disabled", "value", "onChange", "onClear"]);
+    const inputRef = useRef(null);
+    const handleClear = () => {
+        if (inputRef.current) {
+            inputRef.current.value = "";
+            const event = new Event("input", { bubbles: true });
+            inputRef.current.dispatchEvent(event);
+        }
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    };
+    return (_jsxs("div", { className: "flex flex-col w-full", children: [label && (_jsx("label", { htmlFor: id, className: "text-Neutral-300 text-[10px] font-medium px-3 mb-1", children: label })), _jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({ ref: inputRef, id: id, type: "text", disabled: disabled, value: value, onChange: onChange, className: cn("autofill-input placeholder-Neutral-200 w-full px-[1rem] rtl:pl-[2.5rem] ltr:pr-[2.5rem] py-3 rounded-2xl bg-background-light border border-secondary-100 focus:outline-none focus:ring-0 focus:border-secondary-400 justify-between items-center relative", className) }, props)), !disabled && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center p-2", children: _jsx(CloseSquareIcon, { className: "text-Nutral-500" }) }))] })] }));
+}
+// InputEmail Component
+export function InputEmail(_a) {
+    var { label, className, id, variant = "default", error, disabled, placeholder, value, onChange, onClear } = _a, props = __rest(_a, ["label", "className", "id", "variant", "error", "disabled", "placeholder", "value", "onChange", "onClear"]);
+    const inputRef = useRef(null);
+    const [showError, setShowError] = useState(false);
+    const handleClear = () => {
+        if (inputRef.current) {
+            inputRef.current.value = "";
+            const event = new Event("input", { bubbles: true });
+            inputRef.current.dispatchEvent(event);
+        }
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    };
+    const emailPattern = "[\\-a-zA-Z0-9~!$%^&*_=+\\}\\{'?]+(\\.[-a-zA-Z0-9~!$%^&*_=+\\}\\{'?]+)*@[a-zA-Z0-9_][-a-zA-Z0-9_]*(\\.[-a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,}(:[0-9]{1,5})?";
+    if (variant === "auth") {
+        return (_jsxs(_Fragment, { children: [label && (_jsx("label", { htmlFor: id, className: "text-Neutral-300 text-[10px] font-medium px-3 mb-1", children: label })), _jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({ ref: inputRef, id: id, type: "email", pattern: emailPattern, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, onBlur: () => setShowError(false), onFocus: () => setShowError(false), className: cn("autofill-input peer placeholder-Neutral-200 w-full px-[2.7rem] py-3 rounded-2xl bg-secondary-50 dark:bg-background-light border border-secondary-100 focus:outline-none focus:ring-0 focus:border-secondary-400 justify-between items-center text-Neutral-500 dark:text-white relative", className) }, props)), !disabled && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center p-2", children: _jsx(CloseSquareIcon, {}) })), _jsx("div", { className: "absolute inset-y-0 rtl:right-0 ltr:left-0 rtl:pr-3 ltr:pl-3 flex items-center pointer-events-none", children: _jsx(EmailIcon, {}) }), error && !showError && (_jsx("div", { className: "peer-focus:hidden absolute inset-x-0 mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: translate(error) }) })), _jsx("div", { className: "hidden peer-invalid:flex absolute mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: translate("error_invalid_email") }) })] })] }));
+    }
+    return (_jsxs(_Fragment, { children: [label && (_jsx("label", { htmlFor: id, className: "text-Neutral-300 text-[10px] font-medium px-3 mb-1", children: label })), _jsxs("div", { className: "flex flex-col relative", children: [_jsx("input", Object.assign({ ref: inputRef, id: id, type: "email", disabled: disabled, value: value, onChange: onChange, className: cn("autofill-input rounded-2xl px-[2.7rem] h-12 py-6 border-2 border-Neutral-50 focus:outline-none focus:ring-0 focus:border-secondary-400", className) }, props)), _jsx("div", { className: "absolute inset-y-0 rtl:right-0 ltr:left-0 rtl:pr-3 ltr:pl-3 flex items-center pointer-events-none", children: _jsx(EmailIcon, { className: "text-Nutral-500" }) }), !disabled && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center p-2", children: _jsx(CloseSquareIcon, { className: "text-Nutral-500" }) }))] })] }));
+}
+// InputMobile Component
+export function InputMobile(_a) {
+    var { label, className, id, error, disabled, placeholder, value, onChange, onClear } = _a, props = __rest(_a, ["label", "className", "id", "error", "disabled", "placeholder", "value", "onChange", "onClear"]);
+    const inputRef = useRef(null);
+    const [showError, setShowError] = useState(false);
+    const handleClear = () => {
+        if (inputRef.current) {
+            inputRef.current.value = "";
+            const event = new Event("input", { bubbles: true });
+            inputRef.current.dispatchEvent(event);
+        }
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    };
+    return (_jsxs(_Fragment, { children: [label && (_jsx("label", { htmlFor: id, className: "text-base font-medium text-Neutral-300 px-3 mb-1", children: label })), _jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({ ref: inputRef, id: id, type: "tel", inputMode: "numeric", pattern: "^09[0-9]{9}$", maxLength: 11, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, onBlur: () => setShowError(false), onFocus: () => setShowError(false), className: cn("autofill-input peer placeholder-Neutral-200 w-full px-[2.7rem] py-3 rounded-2xl bg-secondary-50 dark:bg-background-light border border-secondary-100 focus:outline-none focus:ring-0 focus:border-secondary-400 justify-between items-center text-Neutral-500 dark:text-white relative", className) }, props)), !disabled && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center p-2", children: _jsx(CloseSquareIcon, {}) })), _jsx("div", { className: "absolute inset-y-0 rtl:right-0 ltr:left-0 rtl:pr-3 ltr:pl-3 flex items-center pointer-events-none", children: _jsx(MobielIcon, {}) }), error && !showError && (_jsx("div", { className: "peer-focus:hidden absolute inset-x-0 mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: translate(error) }) })), _jsx("div", { className: "hidden peer-invalid:flex absolute mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: translate("error_invalid_mobile") }) })] })] }));
+}
+// InputTextArea Component
+export function InputTextArea(_a) {
+    var { label, className, id, value, onChange } = _a, props = __rest(_a, ["label", "className", "id", "value", "onChange"]);
+    return (_jsxs("div", { className: "flex flex-col", children: [label && (_jsx("label", { htmlFor: id, className: "text-Neutral-300 text-[10px] font-medium px-3 mb-1", children: label })), _jsx("textarea", Object.assign({ id: id, value: value, onChange: onChange, className: cn("p-4 rounded-[20px] border-2 border-Neutral-50 focus:outline-none focus:ring-0 focus:border-secondary-400", className) }, props))] }));
+}
+// InputSearch Component
+export function InputSearch(_a) {
+    var { className, id, inputSearchRef, classNameParent, searchClassname, param, value, onChange } = _a, props = __rest(_a, ["className", "id", "inputSearchRef", "classNameParent", "searchClassname", "param", "value", "onChange"]);
+    return (_jsxs("div", { ref: inputSearchRef, className: cn("relative", classNameParent), children: [_jsx("div", { className: "absolute rtl:right-3 ltr:left-3 h-full inline-flex items-center", children: _jsx(SearchIcon, { className: searchClassname }) }), param && (_jsx("div", { className: "absolute rtl:left-4 ltr:right-4 h-full inline-flex flex-row-reverse items-center", children: _jsx("span", { className: "text-Neutral-300 dark:text-Neutral-100 text-sm font-semibold leading-tight tracking-tight", children: param }) })), _jsx("input", Object.assign({ id: id, type: "text", value: value, onChange: onChange, className: cn(`autofill-input w-full bg-secondary-50 dark:bg-background-light text-Neutral-400 dark:text-Neutral-100 rounded-2xl ${param
+                    ? "rtl:pr-11 rtl:pl-12 ltr:pl-11 ltr:pr-12"
+                    : "rtl:pr-11 ltr:pl-11"} h-11 border-2 border-Neutral-50 dark:border-background-light focus-visible:outline focus-visible:outline-white`, className) }, props))] }));
+}
+// InputPassword Component
+export function InputPassword(_a) {
+    var { label, className, id, variant = "password", error, buttonFirstId, buttonSecondId, value, onChange, onClear } = _a, props = __rest(_a, ["label", "className", "id", "variant", "error", "buttonFirstId", "buttonSecondId", "value", "onChange", "onClear"]);
+    const [showPassword, setShowPassword] = useState(false);
+    const inputRef = useRef(null);
+    const handleTogglePassword = () => {
+        setShowPassword(!showPassword);
+    };
+    const handleClear = () => {
+        if (inputRef.current) {
+            inputRef.current.value = "";
+            const event = new Event("input", { bubbles: true });
+            inputRef.current.dispatchEvent(event);
+        }
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    };
+    return (_jsxs(_Fragment, { children: [label && (_jsx("label", { htmlFor: id, className: "text-base font-medium text-Neutral-300 px-3", children: label })), _jsxs("div", { className: "w-full relative mt-1", children: [_jsx("input", Object.assign({ ref: inputRef, id: id, type: showPassword ? "text" : "password", minLength: 5, placeholder: "xxxx xxxx xxxx xxxx", value: value, onChange: onChange, className: cn("autofill-input peer placeholder-Neutral-200 w-full px-[2.7rem] py-3 rounded-2xl bg-secondary-50 dark:bg-background-light border border-secondary-100 focus:outline-none focus:ring-0 focus:border-secondary-400 justify-between items-center text-Neutral-500 dark:text-white relative", variant === "change_password" &&
+                            "invalid:focus:border-Error-400 invalid:border-Error-400", className) }, props)), _jsx("div", { className: "absolute inset-y-0 rtl:right-0 ltr:left-0 rtl:pr-3 ltr:pl-3 flex items-center pointer-events-none", children: _jsx(LockIcon, {}) }), _jsx("div", { className: "absolute inset-y-0 rtl:left-0 ltr:right-0 px-3 flex items-center", children: variant === "password" ? (_jsx("button", { type: "button", onClick: handleClear, children: _jsx(CloseSquareIcon, {}) })) : (_jsx("button", { type: "button", onClick: handleTogglePassword, children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) })) }), error && (_jsx("div", { className: "peer-focus:hidden absolute mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: translate(error) }) })), _jsx("div", { className: "hidden peer-invalid:flex absolute my-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: translate("error_min_length_password") }) })] })] }));
+}
+// InputRePassword Component
+export function InputRePassword(_a) {
+    var { label, id, buttonId, passwordFieldId = "ch_password" } = _a, props = __rest(_a, ["label", "id", "buttonId", "passwordFieldId"]);
+    const [showPassword, setShowPassword] = useState(false);
+    const [error, setError] = useState("");
+    const [value, setValue] = useState("");
+    const handleTogglePassword = () => {
+        setShowPassword(!showPassword);
+    };
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setValue(newValue);
+        const passwordField = document.getElementById(passwordFieldId);
+        if (passwordField && passwordField.value !== newValue) {
+            setError("error_re_password");
+        }
+        else {
+            setError("");
+        }
+    };
+    return (_jsxs(_Fragment, { children: [label && (_jsx("label", { htmlFor: id, className: "text-base font-medium text-Neutral-300 px-3", children: label })), _jsxs("div", { className: "w-full relative mt-1", children: [_jsx("input", Object.assign({ id: id, type: showPassword ? "text" : "password", placeholder: "xxxx xxxx xxxx xxxx", value: value, onChange: handleChange, className: cn("autofill-input placeholder-Neutral-200 w-full px-[2.7rem] py-3 rounded-2xl bg-secondary-50 dark:bg-background-light border border-secondary-100 focus:outline-none focus:ring-0 focus:border-secondary-400 justify-between items-center text-Neutral-500 dark:text-white relative", error && "!border-Error-400 !focus:border-Error-400") }, props)), _jsx("button", { type: "button", onClick: handleTogglePassword, className: "absolute inset-y-0 rtl:left-0 ltr:right-0 px-3 flex items-center cursor-pointer", children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }), _jsx("div", { className: "absolute inset-y-0 rtl:right-0 ltr:left-0 rtl:pr-3 ltr:pl-3 flex items-center pointer-events-none", children: _jsx(LockIcon, {}) }), error && (_jsx("div", { className: "absolute mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: translate(error) }) }))] })] }));
+}
+// InputDarkLight Component
+export function InputDarkLight({ className }) {
+    const [isDark, setIsDark] = useState(() => {
+        return document.documentElement.classList.contains("dark");
+    });
+    const toggleTheme = () => {
+        const newTheme = !isDark;
+        setIsDark(newTheme);
+        if (newTheme) {
+            document.documentElement.classList.add("dark");
+            localStorage.setItem("theme", "dark");
+        }
+        else {
+            document.documentElement.classList.remove("dark");
+            localStorage.setItem("theme", "light");
+        }
+        const themeColorMeta = document.querySelector('meta[name="theme-color"]');
+        if (themeColorMeta) {
+            themeColorMeta.setAttribute("content", "#e57c43");
+        }
+    };
+    return (_jsxs("div", { className: "inline-flex items-center relative cursor-pointer", onClick: toggleTheme, children: [_jsx("input", { className: "peer hidden", id: "toggle", type: "checkbox", checked: !isDark, onChange: () => { } }), _jsx("div", { className: "relative w-[4rem] h-[2rem] peer-checked:bg-white bg-background rounded-full after:absolute after:content-[''] after:w-[1.5rem] after:h-[1.5rem] after:rounded-full after:top-[0.25rem] after:left-[0.25rem] after:bg-[linear-gradient(to_right,_#444350,_#444350)] peer-checked:after:bg-[linear-gradient(to_right,_#f97316,_#facc15)] active:after:w-[1.875rem] peer-checked:after:left-[3.75rem] peer-checked:after:translate-x-[-100%] shadow-sm duration-500 after:duration-500 after:shadow-md" }), _jsx(MoonIcon, { width: "1.25rem", height: "1.25rem", color: "white", className: "peer-checked:fill-black opacity-60 peer-checked:opacity-70 fill-white absolute w-4 h-4 left-[0.5rem]" }), _jsx(SunIcon, { width: "1.25rem", height: "1.25rem", color: "white", className: "fill-white peer-checked:opacity-60 absolute w-4 h-4 right-[0.5rem]" })] }));
+}
+// InputRadioButton Component
+export function InputRadioButton(_a) {
+    var { className, id, index = 0, name, useIndex = true, onSortChange } = _a, props = __rest(_a, ["className", "id", "index", "name", "useIndex", "onSortChange"]);
+    const handleClick = () => {
+        if (useIndex && onSortChange) {
+            onSortChange(index);
+        }
+    };
+    return (_jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({ type: "radio", id: `${id}_RadioDropDownItem_${index}`, name: `RadioInput${name}`, onClick: handleClick, className: cn("peer appearance-none absolute top-[-0.5rem] ltr:right-0 rtl:left-0 w-5 h-5 transition-all !bg-transparent dark:bg-transparent border-2 border-Neutral-300 rounded-sm cursor-pointer checked:!bg-primary-400 checked:!border-primary-400 focus:ring-0 focus:ring-offset-0 after:content-[''] after:absolute after:inset-0 after:bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIj48L3BvbHlsaW5lPjwvc3ZnPg==')] after:bg-no-repeat after:bg-center after:opacity-0 checked:after:opacity-100 z-30", className) }, props)), _jsx("label", { htmlFor: `${id}_RadioDropDownItem_${index}`, className: "absolute top-[-1.15rem] ltr:right-[-0.525rem] rtl:left-[-0.625rem] rounded-full h-[2.5rem] w-[2.5rem] flex justify-center items-center peer-checked:bg-white dark:peer-checked:bg-background z-10" })] }));
+}
+// InputToggle Component
+export function InputToggle(_a) {
+    var { className, checked = false, onStatusChange } = _a, props = __rest(_a, ["className", "checked", "onStatusChange"]);
+    const [isChecked, setIsChecked] = useState(() => {
+        return typeof checked === "string" ? checked === "true" : Boolean(checked);
+    });
+    useEffect(() => {
+        const newChecked = typeof checked === "string" ? checked === "true" : Boolean(checked);
+        setIsChecked(newChecked);
+    }, [checked]);
+    const handleToggle = (e) => {
+        const newValue = e.target.checked;
+        setIsChecked(newValue);
+        onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(newValue);
+    };
+    return (_jsxs("label", { className: cn("inline-flex items-center cursor-pointer", className), children: [_jsx("input", Object.assign({ type: "checkbox", className: "sr-only peer", checked: isChecked, onChange: handleToggle }, props)), _jsx("div", { className: "relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-2 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-300 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-400 dark:peer-checked:bg-primary-400" })] }));
+}

package/dist/components/ui/Input.types.d.ts

@@ -0,0 +1,45 @@
+import { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
+export type BaseInputProps = InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    error?: string;
+};
+export type InputTextProps = BaseInputProps & {
+    onClear?: () => void;
+};
+export type InputEmailProps = BaseInputProps & {
+    variant?: "auth" | "default";
+    onClear?: () => void;
+};
+export type InputMobileProps = BaseInputProps & {
+    onClear?: () => void;
+};
+export type InputPasswordProps = BaseInputProps & {
+    variant?: "password" | "change_password";
+    buttonFirstId?: string;
+    buttonSecondId?: string;
+    onClear?: () => void;
+};
+export type InputRePasswordProps = BaseInputProps & {
+    buttonId?: string;
+    passwordFieldId?: string;
+};
+export type InputTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: string;
+};
+export type InputSearchProps = BaseInputProps & {
+    inputSearchRef?: React.RefObject<HTMLDivElement>;
+    classNameParent?: string;
+    searchClassname?: string;
+    param?: string;
+};
+export type InputRadioButtonProps = InputHTMLAttributes<HTMLInputElement> & {
+    index?: number;
+    useIndex?: boolean;
+    onSortChange?: (index: number) => void;
+};
+export type InputToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> & {
+    onStatusChange?: (value: boolean) => void;
+};
+export type InputDarkLightProps = {
+    className?: string;
+};

package/dist/components/ui/Input.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/Modal.d.ts

@@ -0,0 +1,9 @@
+import React, { HTMLAttributes } from "react";
+interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    action?: (id?: string) => void;
+    className?: string;
+    id?: string;
+}
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/components/ui/Modal.js

@@ -0,0 +1,52 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * @Author: Mohammad Felfelani
+ * @Email: mfelfelani72@gmail.com
+ * @Team:
+ * @Date: 2025-10-26 15:32:12
+ * @Description:
+ */
+import { useEffect } from "react";
+// Components
+import { CloseSquareIcon } from "../icon/icon";
+// Functions
+import { cn } from "../../libs/cn";
+import { CloseModal } from "../../libs/modal/Modal";
+const Modal = (_a) => {
+    var { children, action, className, id } = _a, props = __rest(_a, ["children", "action", "className", "id"]);
+    // functions
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape" && id) {
+                CloseModal(id);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [id]);
+    const handleOverlayClick = () => {
+        if (action && id) {
+            action(id);
+        }
+    };
+    const handleCloseClick = () => {
+        if (id) {
+            CloseModal(id);
+        }
+    };
+    return (_jsxs("div", Object.assign({}, props, { id: id, className: "hidden fixed inset-0 items-center justify-center z-[999] p-4", children: [_jsx("div", { onClick: handleOverlayClick, className: "absolute inset-0 bg-black opacity-30" }), _jsx("div", { className: cn("relative max-w-2xl w-full max-h-[90vh] overflow-auto bg-white dark:bg-background-light rounded-2xl shadow-xl", className), children: _jsxs("div", { className: "p-4", children: [_jsx("div", { onClick: handleCloseClick, className: "w-full flex justify-end cursor-pointer", children: _jsx(CloseSquareIcon, { className: "mt-4 mx-4" }) }), children] }) })] })));
+};
+export default Modal;

package/dist/components/ui/RadioButton.d.ts

@@ -0,0 +1,9 @@
+type RadioProps = {
+    label: string;
+    name: string;
+    value: string;
+    checked?: boolean;
+    onChange?: (value: string) => void;
+};
+export default function RadioButton({ label, name, value, checked, onChange, }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/RadioButton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function RadioButton({ label, name, value, checked, onChange, }) {
+    return (_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "radio", name: name, value: value, checked: checked, onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(value), className: "hidden peer" }), _jsx("span", { className: "w-4 h-4 rounded-full border border-gray-500 flex items-center justify-center peer-checked:border-blue-600", children: _jsx("span", { className: "w-2 h-2 bg-blue-600 rounded-full peer-checked:block hidden" }) }), _jsx("span", { children: label })] }));
+}

package/dist/components/ui/Table.d.ts

@@ -0,0 +1,10 @@
+type Column<T> = {
+    header: string;
+    accessor: keyof T;
+};
+type TableProps<T> = {
+    columns: Column<T>[];
+    data: T[];
+};
+export default function Table<T>({ columns, data }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/Table.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Table({ columns, data }) {
+    return (_jsx("div", { className: "overflow-x-auto rounded-lg shadow border border-gray-200", children: _jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [_jsx("thead", { className: "bg-gray-100", children: _jsx("tr", { children: columns.map((col, idx) => (_jsx("th", { className: "px-4 py-2 text-left text-gray-700 font-medium", children: col.header }, idx))) }) }), _jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: data.map((row, idx) => (_jsx("tr", { className: "hover:bg-gray-50 transition-colors", children: columns.map((col, cidx) => (_jsx("td", { className: "px-4 py-2 text-gray-800", children: row[col.accessor] }, cidx))) }, idx))) })] }) }));
+}

package/dist/components/ui/Tabs.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+type Tab = {
+    label: string;
+    content: ReactNode;
+};
+type TabsProps = {
+    tabs: Tab[];
+};
+export default function Tabs({ tabs }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/Tabs.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+export default function Tabs({ tabs }) {
+    const [activeIndex, setActiveIndex] = useState(0);
+    return (_jsxs("div", { className: "w-full", children: [_jsx("div", { className: "flex border-b border-gray-300", children: tabs.map((tab, index) => (_jsx("button", { onClick: () => setActiveIndex(index), className: `px-4 py-2 -mb-px font-medium transition-colors duration-200 ${activeIndex === index
+                        ? "border-b-2 border-blue-600 text-blue-600"
+                        : "text-gray-600 hover:text-blue-600"}`, children: tab.label }, index))) }), _jsx("div", { className: "p-4 bg-gray-50 rounded-b-lg", children: tabs[activeIndex].content })] }));
+}

package/dist/configs/language.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @Author: Mohammad Felfelani
+ * @Email: mfelfelani72@gmail.com
+ * @Team:
+ * @Date: 2025-10-26 09:29:58
+ * @Description:
+ */
+/**
+ * @Author: Mohammad Felfelani
+ * @Email: mfelfelani72@gmail.com
+ * @Team:
+ * @Date: 2025-10-04 07:17:02
+ * @Description:
+ */
+export declare const languages: {
+    readonly en: {
+        readonly dir: "ltr";
+        readonly locale: "en_US";
+        readonly schemaLocale: "en-US";
+        readonly name: "English";
+        readonly flag: "🇺🇸";
+        readonly nativeName: "English";
+    };
+    readonly fa: {
+        readonly dir: "rtl";
+        readonly locale: "fa_IR";
+        readonly schemaLocale: "fa-IR";
+        readonly name: "Persian";
+        readonly flag: "🇮🇷";
+        readonly nativeName: "فارسی";
+    };
+};
+export type Lang = keyof typeof languages;
+export declare function getLocale(lang: Lang): string;
+export declare function getSchemaLocale(lang: Lang): string;
+export declare function getDirection(lang: Lang): "ltr" | "rtl";
+export declare function getName(lang: Lang): string;
+export declare function getNativeName(lang: Lang): string;
+export declare function getFlag(lang: Lang): string;

package/dist/configs/language.js

@@ -0,0 +1,50 @@
+/**
+ * @Author: Mohammad Felfelani
+ * @Email: mfelfelani72@gmail.com
+ * @Team:
+ * @Date: 2025-10-26 09:29:58
+ * @Description:
+ */
+/**
+ * @Author: Mohammad Felfelani
+ * @Email: mfelfelani72@gmail.com
+ * @Team:
+ * @Date: 2025-10-04 07:17:02
+ * @Description:
+ */
+export const languages = {
+    en: {
+        dir: "ltr",
+        locale: "en_US",
+        schemaLocale: "en-US",
+        name: "English",
+        flag: "🇺🇸",
+        nativeName: "English",
+    },
+    fa: {
+        dir: "rtl",
+        locale: "fa_IR",
+        schemaLocale: "fa-IR",
+        name: "Persian",
+        flag: "🇮🇷",
+        nativeName: "فارسی",
+    },
+};
+export function getLocale(lang) {
+    return languages[lang].locale;
+}
+export function getSchemaLocale(lang) {
+    return languages[lang].schemaLocale;
+}
+export function getDirection(lang) {
+    return languages[lang].dir;
+}
+export function getName(lang) {
+    return languages[lang].name;
+}
+export function getNativeName(lang) {
+    return languages[lang].nativeName;
+}
+export function getFlag(lang) {
+    return languages[lang].flag;
+}