forma-ui 0.0.24 → 0.0.26

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { InputTextProps, InputTextAreaProps, InputSearchProps, InputRadioButtonProps, InputToggleProps, InputDarkLightProps } from "./Input.types";
+import type { InputTextProps, InputTextAreaProps, InputSearchProps, InputRadioButtonProps, InputToggleProps, InputDarkLightProps, InputMobileIntlProps } from "./Input.types";
 export declare function InputText({ label, className, id, disabled, value, onChange, onClear, ...props }: InputTextProps): import("react/jsx-runtime").JSX.Element;
 export declare const InputEmail: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
@@ -16,6 +16,7 @@ export declare const InputMobile: React.ForwardRefExoticComponent<React.InputHTM
 } & {
     onClear?: () => void;
 } & React.RefAttributes<HTMLInputElement>>;
+export declare const InputMobileIntl: React.ForwardRefExoticComponent<Omit<InputMobileIntlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 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 const InputPassword: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {

package/dist/components/ui/Input.js

@@ -13,16 +13,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { CloseSquareIcon, EmailIcon, MobielIcon, SunIcon, HideIcon, LockIcon, SearchIcon, ShowIcon, MoonIcon, } from "../icon/icon";
 import { cn } from "../../libs/cn";
-// Simple translation function replacement (no external library)
-// const inputTranslate = (key: string): string => {
-//   const translations: Record<string, string> = {
-//     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"]);
@@ -68,6 +58,120 @@ export const InputMobile = forwardRef((_a, ref) => {
     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: ref, 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: 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: validate }) })] })] }));
 });
 InputMobile.displayName = "InputMobile";
+export const InputMobileIntl = forwardRef((_a, ref) => {
+    var { 
+    // Core props
+    id, label, value: externalValue, onChange, onClear, 
+    // Country props
+    defaultCountry, countries = [], 
+    // Validation
+    error, validate, 
+    // Input props
+    disabled = false, placeholder, searchPlaceholder, noResultText, countrySelectorAriaLabel, clearButtonAriaLabel, className, 
+    // Custom classNames
+    classNames = {}, 
+    // Icon visibility
+    showMobileIcon = true, showClearButton = true, showSearchIcon = true, showCountryFlag = true, showCountryCode = true, showDropdownArrow = true, showCountryItemFlag = true, showCountryItemCode = true, showCountryItemCheck = true } = _a, props = __rest(_a, ["id", "label", "value", "onChange", "onClear", "defaultCountry", "countries", "error", "validate", "disabled", "placeholder", "searchPlaceholder", "noResultText", "countrySelectorAriaLabel", "clearButtonAriaLabel", "className", "classNames", "showMobileIcon", "showClearButton", "showSearchIcon", "showCountryFlag", "showCountryCode", "showDropdownArrow", "showCountryItemFlag", "showCountryItemCode", "showCountryItemCheck"]);
+    // ============ States ============
+    const [showError, setShowError] = useState(false);
+    const [showCountries, setShowCountries] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [selectedCountry, setSelectedCountry] = useState(defaultCountry || countries[0]);
+    const [phoneNumber, setPhoneNumber] = useState("");
+    // ============ Refs ============
+    const wrapperRef = useRef(null);
+    const searchInputRef = useRef(null);
+    // ============ Computed ============
+    const filteredCountries = countries.filter((country) => {
+        const searchLower = searchTerm.toLowerCase().trim();
+        return (country.name.toLowerCase().includes(searchLower) ||
+            country.code.includes(searchTerm.trim()) ||
+            country.iso2.toLowerCase().includes(searchLower));
+    });
+    const getValidationPattern = () => {
+        if (!selectedCountry)
+            return undefined;
+        if (selectedCountry.iso2 === "IR") {
+            return "^09[0-9]{9}$";
+        }
+        return `^[0-9]{${selectedCountry.maxLength || 10}}$`;
+    };
+    // ============ Handlers ============
+    const handleClear = () => {
+        setPhoneNumber("");
+        if (ref && "current" in ref && ref.current) {
+            ref.current.value = "";
+        }
+        if (onChange && selectedCountry) {
+            onChange("", selectedCountry);
+        }
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    };
+    const handlePhoneChange = (e) => {
+        if (!selectedCountry)
+            return;
+        const onlyDigits = e.target.value.replace(/\D/g, "");
+        const limited = selectedCountry.maxLength
+            ? onlyDigits.slice(0, selectedCountry.maxLength)
+            : onlyDigits;
+        setPhoneNumber(limited);
+        if (ref && "current" in ref && ref.current) {
+            ref.current.value = limited;
+        }
+        if (onChange) {
+            const fullNumber = selectedCountry.code + limited;
+            onChange(fullNumber, selectedCountry);
+        }
+    };
+    const handleCountrySelect = (country) => {
+        setSelectedCountry(country);
+        setShowCountries(false);
+        setSearchTerm("");
+        if (onChange && phoneNumber) {
+            const fullNumber = country.code + phoneNumber;
+            onChange(fullNumber, country);
+        }
+    };
+    // ============ Effects ============
+    useEffect(() => {
+        if (externalValue && selectedCountry) {
+            const countryCodeRegex = new RegExp(`^\\${selectedCountry.code}`);
+            const cleanNumber = externalValue
+                .replace(countryCodeRegex, "")
+                .replace(/\D/g, "");
+            setPhoneNumber(cleanNumber);
+        }
+        else {
+            setPhoneNumber("");
+        }
+    }, [externalValue, selectedCountry]);
+    useEffect(() => {
+        const onClickOutside = (e) => {
+            const target = e.target;
+            if (wrapperRef.current && !wrapperRef.current.contains(target)) {
+                setShowCountries(false);
+                setSearchTerm("");
+            }
+        };
+        document.addEventListener("click", onClickOutside);
+        return () => document.removeEventListener("click", onClickOutside);
+    }, []);
+    useEffect(() => {
+        if (showCountries && searchInputRef.current) {
+            setTimeout(() => {
+                var _a;
+                (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
+        }
+    }, [showCountries]);
+    // ============ Render ============
+    if (!selectedCountry) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn("input-mobile-intl-container", classNames.container), children: [label && (_jsx("label", { htmlFor: id, className: cn("input-mobile-intl-label", classNames.label), children: label })), _jsxs("div", { ref: wrapperRef, className: cn("input-mobile-intl-wrapper", classNames.wrapper), children: [_jsxs("div", { className: cn("input-mobile-intl-input-wrapper relative flex items-center", className, classNames.inputWrapper), children: [showMobileIcon && (_jsx("div", { className: cn("input-mobile-intl-mobile-icon-wrapper absolute rtl:right-0 ltr:left-0 rtl:mr-3 ltr:ml-3 z-10", classNames.mobileIconWrapper), children: _jsx(MobielIcon, { className: cn("input-mobile-intl-mobile-icon", classNames.mobileIcon) }) })), _jsxs("button", { type: "button", disabled: disabled, onClick: () => setShowCountries((s) => !s), "aria-label": countrySelectorAriaLabel || "Select country", className: cn("input-mobile-intl-country-selector absolute rtl:right-12 ltr:left-12 z-10", classNames.countrySelector), children: [showCountryFlag && (_jsx("span", { className: cn("input-mobile-intl-country-flag", classNames.countryFlag), children: selectedCountry.flag })), showCountryCode && (_jsx("span", { className: cn("input-mobile-intl-country-code", classNames.countryCode), children: selectedCountry.code })), showDropdownArrow && (_jsx("span", { className: cn("input-mobile-intl-dropdown-arrow", classNames.dropdownArrow, showCountries ? "rotate-180" : ""), children: "\u25BE" }))] }), _jsx("input", Object.assign({ ref: ref, id: id, type: "tel", inputMode: "numeric", pattern: getValidationPattern(), maxLength: selectedCountry.maxLength || 10, placeholder: placeholder || selectedCountry.example, disabled: disabled, value: phoneNumber, onChange: handlePhoneChange, onBlur: () => setShowError(false), onFocus: () => setShowError(false), className: cn("input-mobile-intl-input w-full", showMobileIcon ? "rtl:pr-12 ltr:pl-12" : "rtl:pr-3 ltr:pl-3", "rtl:pr-20 ltr:pl-20", "rtl:pl-10 ltr:pr-10", classNames.input) }, props)), showClearButton && !disabled && phoneNumber && (_jsx("button", { type: "button", onClick: handleClear, "aria-label": clearButtonAriaLabel || "Clear", className: cn("input-mobile-intl-clear-button absolute rtl:left-0 ltr:right-0 rtl:ml-3 ltr:mr-3 z-10", classNames.clearButton), children: _jsx(CloseSquareIcon, { className: cn("input-mobile-intl-clear-icon", classNames.clearIcon) }) }))] }), showCountries && !disabled && countries.length > 0 && (_jsxs("div", { className: cn("input-mobile-intl-dropdown", classNames.dropdown), children: [_jsx("div", { className: cn("input-mobile-intl-search-wrapper", classNames.searchWrapper), children: _jsxs("div", { className: "relative", children: [showSearchIcon && (_jsx(SearchIcon, { className: cn("input-mobile-intl-search-icon absolute rtl:right-3 ltr:left-3 top-1/2 -translate-y-1/2", classNames.searchIcon) })), _jsx("input", { ref: searchInputRef, type: "text", placeholder: searchPlaceholder || "Search country...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: cn("input-mobile-intl-search-input w-full rtl:pr-9 ltr:pl-9 rtl:pl-9 ltr:pr-9 py-2", classNames.searchInput), onClick: (e) => e.stopPropagation() }), searchTerm && (_jsx("button", { onClick: () => setSearchTerm(""), className: cn("input-mobile-intl-search-clear absolute rtl:left-2 ltr:right-2 top-1/2 -translate-y-1/2", classNames.searchClear), children: _jsx(CloseSquareIcon, { className: cn("input-mobile-intl-search-clear-icon", classNames.searchClearIcon) }) }))] }) }), _jsx("div", { className: cn("input-mobile-intl-country-list", classNames.countryList), children: filteredCountries.length > 0 ? (filteredCountries.map((country) => (_jsxs("button", { type: "button", onClick: () => handleCountrySelect(country), className: cn("input-mobile-intl-country-item", classNames.countryItem, selectedCountry.iso2 === country.iso2 && "selected"), children: [showCountryItemFlag && (_jsx("span", { className: cn("input-mobile-intl-country-item-flag", classNames.countryItemFlag), children: country.flag })), _jsx("span", { className: cn("input-mobile-intl-country-item-name", classNames.countryItemName), children: country.name }), showCountryItemCode && (_jsx("span", { className: cn("input-mobile-intl-country-item-code", classNames.countryItemCode), children: country.code })), showCountryItemCheck &&
+                                            selectedCountry.iso2 === country.iso2 && (_jsx("span", { className: cn("input-mobile-intl-country-item-check", classNames.countryItemCheck), children: "\u2713" }))] }, country.iso2)))) : (_jsx("div", { className: cn("input-mobile-intl-no-result", classNames.noResult), children: noResultText || "No country found" })) })] })), error && !showError && (_jsx("div", { className: cn("input-mobile-intl-error", classNames.error), children: _jsx("span", { className: cn("input-mobile-intl-error-text", classNames.errorText), children: error }) })), _jsx("div", { className: cn("input-mobile-intl-validate hidden peer-invalid:block", classNames.validate), children: _jsx("span", { className: cn("input-mobile-intl-validate-text", classNames.validateText), children: validate }) })] })] }));
+});
+InputMobileIntl.displayName = "InputMobileIntl";
 // InputTextArea Component
 export function InputTextArea(_a) {
     var { label, className, id, value, onChange } = _a, props = __rest(_a, ["label", "className", "id", "value", "onChange"]);
@@ -76,7 +180,7 @@ export function InputTextArea(_a) {
 // 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
+    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: cn("", 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))] }));
 }
@@ -99,7 +203,7 @@ export const InputPassword = forwardRef((_a, ref) => {
 InputPassword.displayName = "InputPassword";
 // InputRePassword Component
 export const InputRePassword = forwardRef((_a, ref) => {
-    var { label, id, validate, passwordFieldId = "ch_password" } = _a, props = __rest(_a, ["label", "id", "validate", "passwordFieldId"]);
+    var { label, id, validate = "", passwordFieldId = "ch_password" } = _a, props = __rest(_a, ["label", "id", "validate", "passwordFieldId"]);
     const [showPassword, setShowPassword] = useState(false);
     const [error, setError] = useState("");
     const [value, setValue] = useState("");
@@ -109,7 +213,7 @@ export const InputRePassword = forwardRef((_a, ref) => {
         setValue(newValue);
         const passwordField = document.getElementById(passwordFieldId);
         if (passwordField && passwordField.value !== newValue) {
-            setError("error_re_password");
+            setError(validate);
         }
         else {
             setError("");

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

@@ -44,3 +44,72 @@ export type InputToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type
 export type InputDarkLightProps = {
     className?: string;
 };
+export type Country = {
+    name: string;
+    code: string;
+    iso2: string;
+    flag: string;
+    example?: string;
+    maxLength?: number;
+};
+export type InputMobileIntlClassNames = {
+    container?: string;
+    label?: string;
+    wrapper?: string;
+    inputWrapper?: string;
+    input?: string;
+    clearButton?: string;
+    clearIcon?: string;
+    mobileIcon?: string;
+    mobileIconWrapper?: string;
+    countrySelector?: string;
+    countryFlag?: string;
+    countryCode?: string;
+    dropdownArrow?: string;
+    dropdown?: string;
+    searchWrapper?: string;
+    searchInput?: string;
+    searchIcon?: string;
+    searchClear?: string;
+    searchClearIcon?: string;
+    countryList?: string;
+    countryItem?: string;
+    countryItemFlag?: string;
+    countryItemName?: string;
+    countryItemCode?: string;
+    countryItemCheck?: string;
+    noResult?: string;
+    error?: string;
+    errorText?: string;
+    validate?: string;
+    validateText?: string;
+};
+export type InputMobileIntlProps = {
+    id?: string;
+    label?: string;
+    value?: string;
+    onChange?: (value: string, selectedCountry: Country) => void;
+    onClear?: () => void;
+    defaultCountry?: Country;
+    countries?: Country[];
+    error?: string;
+    validate?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    noResultText?: string;
+    countrySelectorAriaLabel?: string;
+    clearButtonAriaLabel?: string;
+    className?: string;
+    classNames?: InputMobileIntlClassNames;
+    showMobileIcon?: boolean;
+    showClearButton?: boolean;
+    showSearchIcon?: boolean;
+    showCountryFlag?: boolean;
+    showCountryCode?: boolean;
+    showDropdownArrow?: boolean;
+    showCountryItemFlag?: boolean;
+    showCountryItemCode?: boolean;
+    showCountryItemCheck?: boolean;
+    [key: string]: any;
+};

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

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

package/dist/components/ui/InputMobileInternational.js

@@ -0,0 +1,9 @@
+/*
+ * @Author: Mohammad Felfelani
+ * @Email: mfelfelani72@gmail.com
+ * @Team:
+ * @Date: 2025-12-31 07:59:15
+ * @Description: International Mobile Input with full customization support
+ */
+export {};
+// ============ Component ============

package/dist/components/ui/ghostBox/Body.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+interface BodyProps {
+    className?: string;
+    children: ReactNode;
+}
+declare const Body: ({ className, children }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export default Body;

package/dist/components/ui/ghostBox/Body.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@/libs/cn";
+const Body = ({ className, children }) => {
+    return (_jsx("div", { className: cn("absolute z-[999]", className), children: children }));
+};
+export default Body;

package/dist/components/ui/ghostBox/GhostBox.d.ts

@@ -0,0 +1,25 @@
+/**
+ * A multi-directional generic reveal container.
+ * Can be anything — dropdown, popover, panel, card, form, image preview, etc.
+ * Clicking the trigger reveals the body in the specified direction.
+ *
+ * Written by Pouya Soltani ¯\_(ツ)_/¯
+ * Email : pouyasoltani81@gmail.com
+ */
+import { type FC, type ReactNode } from "react";
+declare const computeDirectionClasses: (direction?: string) => string;
+export { computeDirectionClasses };
+interface GhostBoxProps {
+    id: string;
+    className?: string;
+    trigger: ReactNode;
+    triggerClassName?: string;
+    children: ReactNode;
+    childrenClassName?: string;
+    callback?: (data: unknown) => void;
+    callbackData?: unknown;
+    gap?: number;
+    direction?: string;
+}
+declare const GhostBox: FC<GhostBoxProps>;
+export default GhostBox;

package/dist/components/ui/ghostBox/GhostBox.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A multi-directional generic reveal container.
+ * Can be anything — dropdown, popover, panel, card, form, image preview, etc.
+ * Clicking the trigger reveals the body in the specified direction.
+ *
+ * Written by Pouya Soltani ¯\_(ツ)_/¯
+ * Email : pouyasoltani81@gmail.com
+ */
+import { useEffect, useRef, useState } from "react";
+import { cn } from "@/libs/cn";
+import * as motion from "motion/react-client";
+import Trigger from "./Trigger";
+/* ── direction → position classes ────────────────────── */
+const computeDirectionClasses = (direction) => {
+    var _a;
+    if (!direction)
+        return "top-full ltr:left-0 rtl:right-0 pt-2";
+    const words = direction.toLowerCase().trim().split(/\s+/);
+    const primary = (_a = words[0]) !== null && _a !== void 0 ? _a : "bottom";
+    const secondary = words[1];
+    switch (primary) {
+        case "top": {
+            if (secondary === "right")
+                return "bottom-full ltr:right-0 rtl:left-0 pb-2";
+            if (secondary === "center")
+                return "bottom-full left-1/2 -translate-x-1/2 pb-2";
+            return "bottom-full ltr:left-0 rtl:right-0 pb-2";
+        }
+        case "bottom": {
+            if (secondary === "right")
+                return "top-full ltr:right-0 rtl:left-0 pt-2";
+            if (secondary === "center")
+                return "top-full left-1/2 -translate-x-1/2 pt-2";
+            return "top-full ltr:left-0 rtl:right-0 pt-2";
+        }
+        case "left": {
+            if (secondary === "bottom")
+                return "ltr:right-full rtl:left-full bottom-0 ltr:pr-2 rtl:pl-2";
+            if (secondary === "center")
+                return "ltr:right-full rtl:left-full top-1/2 -translate-y-1/2 ltr:pr-2 rtl:pl-2";
+            return "ltr:right-full rtl:left-full top-0 ltr:pr-2 rtl:pl-2";
+        }
+        case "right": {
+            if (secondary === "bottom")
+                return "ltr:left-full rtl:right-full bottom-0 ltr:pl-2 rtl:pr-2";
+            if (secondary === "center")
+                return "ltr:left-full rtl:right-full top-1/2 -translate-y-1/2 ltr:pl-2 rtl:pr-2";
+            return "ltr:left-full rtl:right-full top-0 ltr:pl-2 rtl:pr-2";
+        }
+        default:
+            return "top-full ltr:left-0 rtl:right-0 pt-2";
+    }
+};
+export { computeDirectionClasses };
+/* ── component ───────────────────────────────────────── */
+const GhostBox = ({ id, className, trigger, triggerClassName, children, childrenClassName, callback, callbackData, gap = 0, direction, }) => {
+    const [visible, setVisible] = useState(false);
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
+    const toggleVisible = () => {
+        if (callback)
+            callback(callbackData);
+        const icon = document.getElementById(`${id}-icon`);
+        if (icon) {
+            icon.classList.toggle("ltr:rotate-90");
+            icon.classList.toggle("rtl:-rotate-90");
+        }
+        setVisible((prev) => !prev);
+    };
+    useEffect(() => {
+        if (!visible)
+            return;
+        const handleClickOutside = (event) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setVisible(false);
+                const icon = document.getElementById(`${id}-icon`);
+                if (icon) {
+                    icon.classList.remove("ltr:rotate-90");
+                    icon.classList.remove("rtl:-rotate-90");
+                }
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [visible, id]);
+    const directionClasses = computeDirectionClasses(direction);
+    return (_jsxs("div", { id: id, ref: containerRef, className: cn("relative inline-block", className), style: gap ? { paddingInlineEnd: `${gap}px` } : undefined, children: [_jsx(Trigger, { ref: triggerRef, onClick: toggleVisible, className: triggerClassName, children: trigger }), _jsx(motion.div, { initial: { opacity: 0, scale: 0.96 }, animate: {
+                    opacity: visible ? 1 : 0,
+                    scale: visible ? 1 : 0.96,
+                }, transition: { duration: 0.15, ease: "easeOut" }, className: cn("absolute z-[999]", !visible && "pointer-events-none", directionClasses, childrenClassName), children: children })] }));
+};
+export default GhostBox;

package/dist/components/ui/ghostBox/Trigger.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode, type HTMLAttributes } from "react";
+interface TriggerProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children: ReactNode;
+}
+declare const Trigger: import("react").ForwardRefExoticComponent<TriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Trigger;

package/dist/components/ui/ghostBox/Trigger.js

@@ -0,0 +1,21 @@
+"use client";
+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 } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "@/libs/cn";
+const Trigger = forwardRef((_a, ref) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsx("div", Object.assign({ ref: ref }, props, { className: cn("select-none cursor-pointer", className), children: children })));
+});
+Trigger.displayName = "Trigger";
+export default Trigger;

package/dist/index.d.ts

@@ -10,6 +10,8 @@ export { default as Button } from "./components/ui/Button";
 export { default as Modal } from "./components/ui/Modal";
 export { default as Drawer } from "./components/ui/Drawer";
 export { default as Accordion } from "./components/ui/Accordion";
+export { default as GhostBox } from "./components/ui/ghostBox/GhostBox";
 export * from "./components/ui/Input";
 export { ShowModal, CloseModal } from "./libs/modal/modal";
 export { ShowDrawer, CloseDrawer } from "./libs/drawer/modal";
+export type { Country } from "./components/ui/Input.types";

package/dist/index.js

@@ -12,6 +12,7 @@ export { default as Button } from "./components/ui/Button";
 export { default as Modal } from "./components/ui/Modal";
 export { default as Drawer } from "./components/ui/Drawer";
 export { default as Accordion } from "./components/ui/Accordion";
+export { default as GhostBox } from "./components/ui/ghostBox/GhostBox";
 export * from "./components/ui/Input";
 // Functions
 export { ShowModal, CloseModal } from "./libs/modal/modal";