automoby-kit 1.0.12 → 1.0.13

package/dist/esm/Drawer.js

@@ -1 +1,110 @@
-"use client";import{jsx as t}from"react/jsx-runtime";import e,{useRef as r,useEffect as o}from"react";import l from"./utils.js";const n=e.forwardRef(({children:e,direction:n="bottom",fullScreen:a=!1,isOpen:u=!1,onClose:s,className:i,isMobile:d,...c},f)=>{const m=r(null),b=r(null);o(()=>{const handleEscape=t=>{"Escape"===t.key&&u&&s&&s()};return u&&(document.addEventListener("keydown",handleEscape),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",handleEscape),document.body.style.overflow="auto"}},[u,s]);const p=l("fixed inset-0 z-50 transition-all duration-300",{"bg-neutral-darker/50 backdrop-blur-sm":u,"bg-transparent pointer-events-none":!u}),h=l("fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto",(()=>{switch(n){case"top":return"top-0 left-0 right-0";case"bottom":default:return"bottom-0 left-0 right-0";case"left":return"top-0 left-0 bottom-0";case"right":return"top-0 right-0 bottom-0"}})(),(()=>{const t="top"===n||"bottom"===n;return a?"w-full h-full":t?"w-full max-h-[90vh]":"h-full max-w-[90vw]"})(),(()=>{if(!u)switch(n){case"top":return"-translate-y-full";case"bottom":default:return"translate-y-full";case"left":return"-translate-x-full";case"right":return"translate-x-full"}return"translate-x-0 translate-y-0"})(),{"rounded-t-2xl":"bottom"===n&&!a,"rounded-b-2xl":"top"===n&&!a,"rounded-r-2xl":"left"===n&&!a,"rounded-l-2xl":"right"===n&&!a,"p-6":!d,"p-4":d},i);return u?t("div",{ref:m,className:p,onClick:t=>{!a&&s&&m.current&&t.target===m.current&&s()},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||!a&&s&&m.current&&t.target===m.current&&s()},tabIndex:-1,role:"button","aria-label":"Close drawer",children:t("div",{ref:f||b,className:h,role:"dialog","aria-modal":"true","aria-label":"Drawer",...c,children:e})}):null});n.displayName="Drawer";export{n as Drawer};
+import { jsx } from 'react/jsx-runtime';
+import React, { useRef, useEffect } from 'react';
+import cn from './utils.js';
+import { useMobile } from './contexts.js';
+
+const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen = false, isOpen = false, onClose, className, isMobile, ...props }, ref) => {
+    const detectedIsMobile = useMobile();
+    const actualIsMobile = isMobile ?? detectedIsMobile;
+    const overlayRef = useRef(null);
+    const drawerRef = useRef(null);
+    // Handle escape key
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape' && isOpen && onClose) {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            // Prevent body scroll when drawer is open
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'auto';
+        };
+    }, [isOpen, onClose]);
+    // Handle click outside
+    const handleOverlayClick = (event) => {
+        if (!fullScreen &&
+            onClose &&
+            overlayRef.current &&
+            event.target === overlayRef.current) {
+            onClose();
+        }
+    };
+    // Handle keyboard events on overlay
+    const handleOverlayKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            if (!fullScreen &&
+                onClose &&
+                overlayRef.current &&
+                event.target === overlayRef.current) {
+                onClose();
+            }
+        }
+    };
+    const getTranslateClasses = () => {
+        if (!isOpen) {
+            switch (direction) {
+                case 'top':
+                    return '-translate-y-full';
+                case 'bottom':
+                    return 'translate-y-full';
+                case 'left':
+                    return '-translate-x-full';
+                case 'right':
+                    return 'translate-x-full';
+                default:
+                    return 'translate-y-full';
+            }
+        }
+        return 'translate-x-0 translate-y-0';
+    };
+    const getPositionClasses = () => {
+        switch (direction) {
+            case 'top':
+                return 'top-0 left-0 right-0';
+            case 'bottom':
+                return 'bottom-0 left-0 right-0';
+            case 'left':
+                return 'top-0 left-0 bottom-0';
+            case 'right':
+                return 'top-0 right-0 bottom-0';
+            default:
+                return 'bottom-0 left-0 right-0';
+        }
+    };
+    const getSizeClasses = () => {
+        const isVertical = direction === 'top' || direction === 'bottom';
+        if (fullScreen) {
+            return isVertical ? 'w-full h-full' : 'w-full h-full';
+        }
+        if (isVertical) {
+            return 'w-full max-h-[90vh]';
+        }
+        return 'h-full max-w-[90vw]';
+    };
+    const baseOverlayClasses = 'fixed inset-0 z-50 transition-all duration-300';
+    const baseDrawerClasses = 'fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto';
+    const overlayClasses = cn(baseOverlayClasses, {
+        'bg-neutral-darker/50 backdrop-blur-sm': isOpen,
+        'bg-transparent pointer-events-none': !isOpen,
+    });
+    const drawerClasses = cn(baseDrawerClasses, getPositionClasses(), getSizeClasses(), getTranslateClasses(), {
+        'rounded-t-2xl': direction === 'bottom' && !fullScreen,
+        'rounded-b-2xl': direction === 'top' && !fullScreen,
+        'rounded-r-2xl': direction === 'left' && !fullScreen,
+        'rounded-l-2xl': direction === 'right' && !fullScreen,
+        'p-6': !actualIsMobile,
+        'p-4': actualIsMobile,
+    }, className);
+    if (!isOpen) {
+        return null;
+    }
+    return (jsx("div", { ref: overlayRef, className: overlayClasses, onClick: handleOverlayClick, onKeyDown: handleOverlayKeyDown, tabIndex: -1, role: "button", "aria-label": "Close drawer", children: jsx("div", { ref: ref || drawerRef, className: drawerClasses, role: "dialog", "aria-modal": "true", "aria-label": "Drawer", ...props, children: children }) }));
+});
+Drawer.displayName = 'Drawer';
+
+export { Drawer };

package/dist/esm/Input.js

@@ -1 +1,82 @@
-"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import r,{useState as l,useId as a}from"react";import n from"./utils.js";const o=r.forwardRef(({state:r="default",label:o,value:i,onChange:u,helperText:s,startIcon:d,endIcon:x,type:m="text",isMobile:p,...h},c)=>{const[f,g]=l(!1),b=a(),w=f||""!==i&&null!=i,y="disabled"===r,N=n("relative flex items-center border rounded-lg transition-all duration-300 w-[360px]",{"h-[54px]":!p,"h-12":p,"border-neutral-light":"default"===r&&!f,"border-primary":"default"===r&&f,"border-error":"error"===r,"bg-white border-neutral-light cursor-not-allowed":y}),v=n("absolute pointer-events-none transition-all duration-300",{"top-[-10px] bg-white px-1 mx-3 font-medium":w,"text-s":!p&&w||p&&!w,"text-xs":p&&w,"text-m":!p&&!w,"right-1":d,"right-3":!d,"top-1/2 -translate-y-1/2 text-m font-medium":!w,"right-11":!w&&d,"right-4":!w&&!d,"text-neutral-main":!f&&"default"===r,"text-neutral-light":y,"text-primary":f&&"default"===r,"text-error":w&&"error"===r}),F=n("peer w-full h-full bg-transparent outline-none text-m font-medium disabled:text-neutral-light",{"pr-12":d,"pl-12":x,"px-4":!d&&!x,"pr-4 pl-12":!d&&x,"pl-4 pr-12":d&&!x,"cursor-not-allowed text-red-500":y,"text-neutral-dark":!f,"text-neutral-darker":f}),I=n("absolute h-5 w-5 transition-colors duration-300",{"text-neutral-main":"error"!==r&&!f,"text-primary":"default"===r&&f,"text-error":"error"===r,"text-neutral-light":y}),j=n("font-light mt-1 px-2 h-4",{"text-s":!p,"text-xs":p,"text-neutral-main":"default"===r,"text-primary":"default"===r&&f,"text-error":"error"===r,"text-neutral-light":y});return t("div",{children:[t("div",{className:N,children:[x&&e("span",{className:n(I,"left-4"),children:x}),e("label",{htmlFor:b,className:v,children:o}),e("input",{ref:c,id:b,type:m,value:i,onChange:u,onFocus:t=>{y||(g(!0),h.onFocus?.(t))},onBlur:t=>{y||(g(!1),h.onBlur?.(t))},disabled:y,className:F,...h}),d&&e("span",{className:n(I,"right-4"),children:d})]}),s&&e("p",{className:j,children:s})]})});o.displayName="Input";export{o as Input};
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useId } from 'react';
+import cn from './utils.js';
+import { useMobile } from './contexts.js';
+
+const Input = React.forwardRef(({ state = 'default', label, value, onChange, helperText, startIcon, endIcon, type = 'text', isMobile, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const id = useId();
+    const detectedIsMobile = useMobile();
+    const actualIsMobile = isMobile ?? detectedIsMobile;
+    const hasContent = value !== '' && value !== null && value !== undefined;
+    const isLabelFloated = isFocused || hasContent;
+    const isDisabled = state === 'disabled';
+    const handleFocus = (e) => {
+        if (!isDisabled) {
+            setIsFocused(true);
+            props.onFocus?.(e);
+        }
+    };
+    const handleBlur = (e) => {
+        if (!isDisabled) {
+            setIsFocused(false);
+            props.onBlur?.(e);
+        }
+    };
+    const baseContainerClasses = 'relative flex items-center border rounded-lg transition-all duration-300 w-[360px]';
+    const baseLabelClasses = 'absolute pointer-events-none transition-all duration-300';
+    const baseInputClasses = 'peer w-full h-full bg-transparent outline-none text-m font-medium disabled:text-neutral-light';
+    const baseIconClasses = 'absolute h-5 w-5 transition-colors duration-300';
+    const containerClasses = cn(baseContainerClasses, {
+        'h-[54px]': !actualIsMobile,
+        'h-12': actualIsMobile,
+        'border-neutral-light': state === 'default' && !isFocused,
+        'border-primary': state === 'default' && isFocused,
+        'border-error': state === 'error',
+        'bg-white border-neutral-light cursor-not-allowed': isDisabled,
+    });
+    const labelClasses = cn(baseLabelClasses, {
+        'top-[-10px] bg-white px-1 mx-3 font-medium': isLabelFloated,
+        'text-s': (!actualIsMobile && isLabelFloated) ||
+            (actualIsMobile && !isLabelFloated),
+        'text-xs': actualIsMobile && isLabelFloated,
+        'text-m': !actualIsMobile && !isLabelFloated,
+        'right-1': startIcon,
+        'right-3': !startIcon,
+        'top-1/2 -translate-y-1/2 text-m font-medium': !isLabelFloated,
+        'right-11': !isLabelFloated && startIcon,
+        'right-4': !isLabelFloated && !startIcon,
+        'text-neutral-main': !isFocused && state === 'default',
+        'text-neutral-light': isDisabled,
+        'text-primary': isFocused && state === 'default',
+        'text-error': isLabelFloated && state === 'error',
+    });
+    const inputClasses = cn(baseInputClasses, {
+        'pr-12': startIcon,
+        'pl-12': endIcon,
+        'px-4': !startIcon && !endIcon,
+        'pr-4 pl-12': !startIcon && endIcon,
+        'pl-4 pr-12': startIcon && !endIcon,
+        'cursor-not-allowed text-red-500': isDisabled,
+        'text-neutral-dark': !isFocused,
+        'text-neutral-darker': isFocused,
+    });
+    const iconClasses = cn(baseIconClasses, {
+        'text-neutral-main': state !== 'error' && !isFocused,
+        'text-primary': state === 'default' && isFocused,
+        'text-error': state === 'error',
+        'text-neutral-light': isDisabled,
+    });
+    const helperTextClasses = cn('font-light mt-1 px-2 h-4', {
+        'text-s': !actualIsMobile,
+        'text-xs': actualIsMobile,
+        'text-neutral-main': state === 'default',
+        'text-primary': state === 'default' && isFocused,
+        'text-error': state === 'error',
+        'text-neutral-light': isDisabled,
+    });
+    return (jsxs("div", { children: [jsxs("div", { className: containerClasses, children: [endIcon && (jsx("span", { className: cn(iconClasses, 'left-4'), children: endIcon })), jsx("label", { htmlFor: id, className: labelClasses, children: label }), jsx("input", { ref: ref, id: id, type: type, value: value, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, disabled: isDisabled, className: inputClasses, ...props }), startIcon && (jsx("span", { className: cn(iconClasses, 'right-4'), children: startIcon }))] }), helperText && jsx("p", { className: helperTextClasses, children: helperText })] }));
+});
+Input.displayName = 'Input';
+
+export { Input };

package/dist/esm/Menu.js

@@ -1 +1,120 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t,{useState as o,useRef as a,useEffect as n}from"react";import i from"./utils.js";import{Typography as l}from"./Typography.js";const s=t.forwardRef(({buttonText:t,items:s,disabled:d=!1,className:c,onOpenChange:u,isOpen:p,"aria-label":b,...f},m)=>{const[h,v]=o(!1),x=a(null),g=a(null),y=void 0!==p?p:h,handleToggle=()=>{if(d)return;const e=!y;void 0===p&&v(e),u?.(e)};n(()=>{const handleClickOutside=e=>{x.current&&!x.current.contains(e.target)&&(void 0===p&&v(!1),u?.(!1))};if(y)return document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[y,p,u]);const w=i("inline-flex items-center justify-center","bg-white border border-[var(--color-neutral-light)]","rounded-[6px] px-[16px] py-[13px]","transition-colors duration-200","hover:bg-[var(--color-neutral-lighter)]","focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2",{"opacity-50 cursor-not-allowed":d,"cursor-pointer":!d}),k=i("absolute top-full left-0 right-0 z-10 mt-[4px]","bg-white border border-[var(--color-neutral-light)]","rounded-[6px] py-[13px] px-[16px]","shadow-lg","transition-all duration-200",{"opacity-100 translate-y-0 pointer-events-auto":y,"opacity-0 -translate-y-2 pointer-events-none":!y}),N=i("block w-full text-right","transition-colors duration-200","hover:bg-[var(--color-neutral-lighter)] rounded-[4px] px-[8px] py-[4px] -mx-[8px]","focus:outline-none focus:bg-[var(--color-neutral-lighter)]");return e("div",{ref:m,className:i("relative inline-block",c),...f,children:r("div",{ref:x,children:[e("button",{ref:g,type:"button",className:w,onClick:handleToggle,onKeyDown:e=>{if(!d)switch(e.key){case"Escape":y&&(e.preventDefault(),void 0===p&&v(!1),u?.(!1),g.current?.focus());break;case"ArrowDown":y||(e.preventDefault(),handleToggle());break;case"Enter":case" ":e.preventDefault(),handleToggle()}},disabled:d,"aria-expanded":y,"aria-haspopup":"true","aria-label":b||`منوی ${t}`,children:e(l,{variant:"body-s-heavy",color:"neutral-darker",className:"text-right",children:t})}),e("div",{className:k,children:e("div",{className:"flex flex-col gap-[16px]",children:s.map(r=>{const t=e(l,{variant:"body-s-heavy",color:r.disabled?"neutral-main":"neutral-darker",className:"text-right",children:r.label}),o={className:i(N,{"opacity-50 cursor-not-allowed":r.disabled,"cursor-pointer":!r.disabled}),onClick:r.disabled?void 0:()=>(e=>{e.disabled||(void 0===p&&v(!1),u?.(!1),e.onClick?.())})(r),"aria-label":`منوی ${r.label}`};return r.href&&!r.disabled?e("a",{...o,href:r.href,role:"menuitem",tabIndex:y?0:-1,children:t},r.id):e("button",{...o,type:"button",role:"menuitem",tabIndex:y?0:-1,disabled:r.disabled,children:t},r.id)})})})]})})});s.displayName="Menu";export{s as Menu};
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState, useRef, useEffect } from 'react';
+import cn from './utils.js';
+import { Typography } from './Typography.js';
+
+const Menu = React.forwardRef(({ buttonText, items, disabled = false, className, onOpenChange, isOpen: controlledIsOpen, 'aria-label': ariaLabel, ...props }, ref) => {
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    const menuRef = useRef(null);
+    const buttonRef = useRef(null);
+    // Use controlled or uncontrolled state
+    const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+    const handleToggle = () => {
+        if (disabled)
+            return;
+        const newIsOpen = !isOpen;
+        if (controlledIsOpen === undefined) {
+            setInternalIsOpen(newIsOpen);
+        }
+        onOpenChange?.(newIsOpen);
+    };
+    const handleItemClick = (item) => {
+        if (item.disabled)
+            return;
+        // Close menu after item click
+        if (controlledIsOpen === undefined) {
+            setInternalIsOpen(false);
+        }
+        onOpenChange?.(false);
+        // Execute item's onClick if provided
+        item.onClick?.();
+    };
+    // Close menu when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current &&
+                !menuRef.current.contains(event.target)) {
+                if (controlledIsOpen === undefined) {
+                    setInternalIsOpen(false);
+                }
+                onOpenChange?.(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }
+        return undefined;
+    }, [isOpen, controlledIsOpen, onOpenChange]);
+    // Handle keyboard navigation
+    const handleKeyDown = (event) => {
+        if (disabled)
+            return;
+        switch (event.key) {
+            case 'Escape':
+                if (isOpen) {
+                    event.preventDefault();
+                    if (controlledIsOpen === undefined) {
+                        setInternalIsOpen(false);
+                    }
+                    onOpenChange?.(false);
+                    buttonRef.current?.focus();
+                }
+                break;
+            case 'ArrowDown':
+                if (!isOpen) {
+                    event.preventDefault();
+                    handleToggle();
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                handleToggle();
+                break;
+        }
+    };
+    const buttonClasses = cn(
+    // Base button styles matching Figma design
+    'inline-flex items-center justify-center', 'bg-white border border-[var(--color-neutral-light)]', 'rounded-[6px] px-[16px] py-[13px]', 'transition-colors duration-200', 
+    // Interactive states
+    'hover:bg-[var(--color-neutral-lighter)]', 'focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2', 
+    // Disabled state
+    {
+        'opacity-50 cursor-not-allowed': disabled,
+        'cursor-pointer': !disabled,
+    });
+    const dropdownClasses = cn(
+    // Base dropdown styles
+    'absolute top-full left-0 right-0 z-10 mt-[4px]', 'bg-white border border-[var(--color-neutral-light)]', 'rounded-[6px] py-[13px] px-[16px]', 'shadow-lg', 
+    // Animation
+    'transition-all duration-200', {
+        'opacity-100 translate-y-0 pointer-events-auto': isOpen,
+        'opacity-0 -translate-y-2 pointer-events-none': !isOpen,
+    });
+    const itemClasses = cn('block w-full text-right', 'transition-colors duration-200', 'hover:bg-[var(--color-neutral-lighter)] rounded-[4px] px-[8px] py-[4px] -mx-[8px]', 'focus:outline-none focus:bg-[var(--color-neutral-lighter)]');
+    return (jsx("div", { ref: ref, className: cn('relative inline-block', className), ...props, children: jsxs("div", { ref: menuRef, children: [jsx("button", { ref: buttonRef, type: "button", className: buttonClasses, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "true", "aria-label": ariaLabel || `منوی ${buttonText}`, children: jsx(Typography, { variant: "body-s-heavy", color: "neutral-darker", className: "text-right", children: buttonText }) }), jsx("div", { className: dropdownClasses, children: jsx("div", { className: "flex flex-col gap-[16px]", children: items.map((item) => {
+                            const content = (jsx(Typography, { variant: "body-s-heavy", color: item.disabled ? 'neutral-main' : 'neutral-darker', className: "text-right", children: item.label }));
+                            const commonProps = {
+                                className: cn(itemClasses, {
+                                    'opacity-50 cursor-not-allowed': item.disabled,
+                                    'cursor-pointer': !item.disabled,
+                                }),
+                                onClick: item.disabled
+                                    ? undefined
+                                    : () => handleItemClick(item),
+                                'aria-label': `منوی ${item.label}`,
+                            };
+                            // Render as link if href is provided
+                            if (item.href && !item.disabled) {
+                                return (jsx("a", { ...commonProps, href: item.href, role: "menuitem", tabIndex: isOpen ? 0 : -1, children: content }, item.id));
+                            }
+                            // Render as button
+                            return (jsx("button", { ...commonProps, type: "button", role: "menuitem", tabIndex: isOpen ? 0 : -1, disabled: item.disabled, children: content }, item.id));
+                        }) }) })] }) }));
+});
+Menu.displayName = 'Menu';
+
+export { Menu };

package/dist/esm/Pagination.js

@@ -1 +1,186 @@
-"use client";import{jsx as e,jsxs as i,Fragment as a}from"react/jsx-runtime";import{useState as t,useEffect as n}from"react";import r from"./utils.js";import{c as o}from"./chunks/createLucideIcon-DGp0SoUT.js";import{C as l}from"./chunks/chevron-left-4HSuTes3.js";const c=o("chevron-right",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]]),s=o("chevrons-left",[["path",{d:"m11 17-5-5 5-5",key:"13zhaf"}],["path",{d:"m18 17-5-5 5-5",key:"h8a8et"}]]),d=o("chevrons-right",[["path",{d:"m6 17 5-5-5-5",key:"xnjwq"}],["path",{d:"m13 17 5-5-5-5",key:"17xmmf"}]]),m=o("ellipsis",[["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}],["circle",{cx:"19",cy:"12",r:"1",key:"1wjl8i"}],["circle",{cx:"5",cy:"12",r:"1",key:"1pcz8c"}]]);function PaginationRoot({className:i,...a}){return e("nav",{role:"navigation","aria-label":"pagination","data-slot":"pagination",className:r("mx-auto flex w-full justify-center",i),...a})}function PaginationContent({className:i,device:a,...t}){return e("ul",{"data-slot":"pagination-content",className:r("flex flex-row items-center","mobile"===a?"gap-[6px]":"gap-2",i),...t})}function PaginationItem({...i}){return e("li",{"data-slot":"pagination-item",...i})}function PaginationLink({className:i,device:a,variant:t,isActive:n,...o}){return e("a",{"aria-current":n?"page":void 0,"data-slot":"pagination-link","data-active":n,className:r(buttonVariants({variant:"nextPrev"===t?t:n?"active":"outline",device:a}),i),tabIndex:o["aria-disabled"]?-1:0,...o})}function PaginationPrevious({className:t,device:n,variant:r,...o}){const l="mobile"===n,s={mobile:e(c,{size:18}),desktop:i(a,{children:[e(d,{size:20})," ",e("span",{children:"قبلی"})]})};return e(PaginationLink,{"aria-label":"Go to previous page",className:l?"ml-2.5":"flex justify-center items-center gap-2 w-[89px] h-[48px] ml-4",device:n,variant:"nextPrev",...o,children:"mobile"===n?s.mobile:s.desktop})}function PaginationNext({className:t,device:n,variant:r,...o}){const c="mobile"===n,d={mobile:e(l,{size:18}),desktop:i(a,{children:[e("span",{children:"بعدی"}),e(s,{size:20})]})};return e(PaginationLink,{"aria-label":"Go to next page",className:c?"mr-2.5":"flex justify-center items-center gap-2 w-[89px] h-[48px] mr-4",device:n,variant:"nextPrev",...o,children:"mobile"===n?d.mobile:d.desktop})}function PaginationEllipsis({className:i,...a}){return e("span",{"aria-hidden":!0,"data-slot":"pagination-ellipsis",className:r("flex size-9 items-center justify-center",i),...a,children:e(m,{className:"size-4"})})}function buttonVariants({variant:e,device:i}){const a="mobile"===i;return[r({"flex items-center justify-center rounded-[6px]":!0,"w-[40px] h-[40px] text-s font-heavy":a,"w-[48px] h-[48px] text-l font-heavy":!a}),{outline:"border border-neutral-light bg-white text-neutral-darker",active:"bg-primary text-white",nextPrev:"border border-neutral-light bg-white text-neutral-darker"}[e]].join(" ")}const Pagination=({pageCount:a,page:r,defaultPage:o=1,onPageChange:l,className:c,isMobile:s,...d})=>{const m=void 0!==r,[h,p]=t(o),v=m?r:h,u=s?"mobile":"desktop";n(()=>{m||p(o)},[o,m]);const changePage=e=>{m||p(e),l?.(e)};return e(PaginationRoot,{className:c,...d,children:i(PaginationContent,{device:"mobile",children:[e(PaginationItem,{children:e(PaginationPrevious,{href:"#",onClick:e=>{e.preventDefault(),v>1&&changePage(v-1)},variant:"nextPrev",device:u,"aria-disabled":1===v,tabIndex:1===v?-1:0})}),function(){const i=[];if(a<=5)for(let t=1;t<=a;t++)i.push(e(PaginationItem,{children:e(PaginationLink,{href:"#",isActive:v===t,variant:"main",device:u,onClick:e=>{e.preventDefault(),v!==t&&changePage(t)},"aria-disabled":v===t,tabIndex:v===t?-1:0,children:t})},t));else{i.push(e(PaginationItem,{children:e(PaginationLink,{href:"#",isActive:1===v,device:u,variant:"main",onClick:e=>{e.preventDefault(),1!==v&&changePage(1)},"aria-disabled":1===v,tabIndex:1===v?-1:0,children:"1"})},1)),v>3&&i.push(e(PaginationItem,{children:e(PaginationEllipsis,{})},"start-ellipsis"));const t=Math.max(2,v-1),n=Math.min(a-1,v+1);for(let a=t;a<=n;a++)i.push(e(PaginationItem,{children:e(PaginationLink,{href:"#",isActive:v===a,device:u,variant:"main",onClick:e=>{e.preventDefault(),v!==a&&changePage(a)},"aria-disabled":v===a,tabIndex:v===a?-1:0,children:a})},a));v<a-2&&i.push(e(PaginationItem,{children:e(PaginationEllipsis,{})},"end-ellipsis")),i.push(e(PaginationItem,{children:e(PaginationLink,{href:"#",isActive:v===a,device:u,variant:"main",onClick:e=>{e.preventDefault(),v!==a&&changePage(a)},"aria-disabled":v===a,tabIndex:v===a?-1:0,children:a})},a))}return i}(),e(PaginationItem,{children:e(PaginationNext,{href:"#",onClick:e=>{e.preventDefault(),v<a&&changePage(v+1)},variant:"nextPrev",device:u,"aria-disabled":v===a,tabIndex:v===a?-1:0})})]})})};export{Pagination};
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import cn from './utils.js';
+import { useMobile } from './contexts.js';
+import { c as createLucideIcon } from './createLucideIcon-D-q73LTT.js';
+import { C as ChevronLeft } from './chevron-left-Ck6O99eF.js';
+
+/**
+ * @license lucide-react v0.522.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$3 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$3);
+
+/**
+ * @license lucide-react v0.522.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$2 = [
+  ["path", { d: "m11 17-5-5 5-5", key: "13zhaf" }],
+  ["path", { d: "m18 17-5-5 5-5", key: "h8a8et" }]
+];
+const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$2);
+
+/**
+ * @license lucide-react v0.522.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$1 = [
+  ["path", { d: "m6 17 5-5-5-5", key: "xnjwq" }],
+  ["path", { d: "m13 17 5-5-5-5", key: "17xmmf" }]
+];
+const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$1);
+
+/**
+ * @license lucide-react v0.522.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
+  ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
+];
+const Ellipsis = createLucideIcon("ellipsis", __iconNode);
+
+function PaginationRoot({ className, ...props }) {
+    return (jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn('mx-auto flex w-full justify-center', className), ...props }));
+}
+function PaginationContent({ className, device, ...props }) {
+    return (jsx("ul", { "data-slot": "pagination-content", className: cn('flex flex-row items-center', device === 'mobile' ? 'gap-[6px]' : 'gap-2', className), ...props }));
+}
+function PaginationItem({ ...props }) {
+    return jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({ className, device, variant, isActive, ...props }) {
+    return (jsx("a", { "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn(buttonVariants({
+            variant: variant === 'nextPrev' ? variant : isActive ? 'active' : 'outline',
+            device,
+        }), className), tabIndex: props['aria-disabled'] ? -1 : 0, ...props }));
+}
+function PaginationPrevious({ className, device, variant, ...props }) {
+    const isMobile = device === 'mobile';
+    const content = {
+        mobile: jsx(ChevronRight, { size: 18 }),
+        desktop: (jsxs(Fragment, { children: [jsx(ChevronsRight, { size: 20 }), " ", jsx("span", { children: "\u0642\u0628\u0644\u06CC" })] })),
+    };
+    return (jsx(PaginationLink, { "aria-label": "Go to previous page", className: !isMobile
+            ? 'flex justify-center items-center gap-2 w-[89px] h-[48px] ml-4'
+            : 'ml-2.5', device: device, variant: "nextPrev", ...props, children: device === 'mobile' ? content.mobile : content.desktop }));
+}
+function PaginationNext({ className, device, variant, ...props }) {
+    const isMobile = device === 'mobile';
+    const content = {
+        mobile: jsx(ChevronLeft, { size: 18 }),
+        desktop: (jsxs(Fragment, { children: [jsx("span", { children: "\u0628\u0639\u062F\u06CC" }), jsx(ChevronsLeft, { size: 20 })] })),
+    };
+    return (jsx(PaginationLink, { "aria-label": "Go to next page", className: !isMobile
+            ? 'flex justify-center items-center gap-2 w-[89px] h-[48px] mr-4'
+            : 'mr-2.5', device: device, variant: "nextPrev", ...props, children: device === 'mobile' ? content.mobile : content.desktop }));
+}
+function PaginationEllipsis({ className, ...props }) {
+    return (jsx("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn('flex size-9 items-center justify-center', className), ...props, children: jsx(Ellipsis, { className: "size-4" }) }));
+}
+function buttonVariants({ variant, device, }) {
+    const isMobile = device === 'mobile';
+    const base = cn({
+        'flex items-center justify-center rounded-[6px]': true,
+        'w-[40px] h-[40px] text-s font-heavy': isMobile,
+        'w-[48px] h-[48px] text-l font-heavy': !isMobile,
+    });
+    const variants = {
+        outline: 'border border-neutral-light bg-white text-neutral-darker',
+        active: 'bg-primary text-white',
+        nextPrev: 'border border-neutral-light bg-white text-neutral-darker',
+    };
+    return [base, variants[variant]].join(' ');
+}
+const Pagination = ({ pageCount, page: controlledPage, defaultPage = 1, onPageChange, className, isMobile, ...navProps }) => {
+    const detectedIsMobile = useMobile();
+    const actualIsMobile = isMobile ?? detectedIsMobile;
+    const isControlled = controlledPage !== undefined;
+    const [internalPage, setInternalPage] = useState(defaultPage);
+    const page = isControlled ? controlledPage : internalPage;
+    const device = actualIsMobile ? 'mobile' : 'desktop';
+    useEffect(() => {
+        if (!isControlled)
+            setInternalPage(defaultPage);
+    }, [defaultPage, isControlled]);
+    const changePage = (newPage) => {
+        if (!isControlled)
+            setInternalPage(newPage);
+        onPageChange?.(newPage);
+    };
+    function renderPages() {
+        const items = [];
+        if (pageCount <= 5) {
+            for (let i = 1; i <= pageCount; i++) {
+                items.push(jsx(PaginationItem, { children: jsx(PaginationLink, { href: "#", isActive: page === i, variant: "main", device: device, onClick: (e) => {
+                            e.preventDefault();
+                            if (page !== i)
+                                changePage(i);
+                        }, "aria-disabled": page === i, tabIndex: page === i ? -1 : 0, children: i }) }, i));
+            }
+        }
+        else {
+            // First page
+            items.push(jsx(PaginationItem, { children: jsx(PaginationLink, { href: "#", isActive: page === 1, device: device, variant: "main", onClick: (e) => {
+                        e.preventDefault();
+                        if (page !== 1)
+                            changePage(1);
+                    }, "aria-disabled": page === 1, tabIndex: page === 1 ? -1 : 0, children: "1" }) }, 1));
+            // Ellipsis start
+            if (page > 3) {
+                items.push(jsx(PaginationItem, { children: jsx(PaginationEllipsis, {}) }, "start-ellipsis"));
+            }
+            // Middle pages
+            const start = Math.max(2, page - 1);
+            const end = Math.min(pageCount - 1, page + 1);
+            for (let i = start; i <= end; i++) {
+                items.push(jsx(PaginationItem, { children: jsx(PaginationLink, { href: "#", isActive: page === i, device: device, variant: "main", onClick: (e) => {
+                            e.preventDefault();
+                            if (page !== i)
+                                changePage(i);
+                        }, "aria-disabled": page === i, tabIndex: page === i ? -1 : 0, children: i }) }, i));
+            }
+            // Ellipsis end
+            if (page < pageCount - 2) {
+                items.push(jsx(PaginationItem, { children: jsx(PaginationEllipsis, {}) }, "end-ellipsis"));
+            }
+            // Last page
+            items.push(jsx(PaginationItem, { children: jsx(PaginationLink, { href: "#", isActive: page === pageCount, device: device, variant: "main", onClick: (e) => {
+                        e.preventDefault();
+                        if (page !== pageCount)
+                            changePage(pageCount);
+                    }, "aria-disabled": page === pageCount, tabIndex: page === pageCount ? -1 : 0, children: pageCount }) }, pageCount));
+        }
+        return items;
+    }
+    return (jsx(PaginationRoot, { className: className, ...navProps, children: jsxs(PaginationContent, { device: "mobile", children: [jsx(PaginationItem, { children: jsx(PaginationPrevious, { href: "#", onClick: (e) => {
+                            e.preventDefault();
+                            if (page > 1)
+                                changePage(page - 1);
+                        }, variant: "nextPrev", device: device, "aria-disabled": page === 1, tabIndex: page === 1 ? -1 : 0 }) }), renderPages(), jsx(PaginationItem, { children: jsx(PaginationNext, { href: "#", onClick: (e) => {
+                            e.preventDefault();
+                            if (page < pageCount)
+                                changePage(page + 1);
+                        }, variant: "nextPrev", device: device, "aria-disabled": page === pageCount, tabIndex: page === pageCount ? -1 : 0 }) })] }) }));
+};
+
+export { Pagination };

package/dist/esm/RadioGroup.js

@@ -1 +1,71 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import i from"react";import l from"./utils.js";const RadioButton=({selected:i,disabled:a,isMobile:t})=>{const s=t?"size-5":"size-6";return i?r("div",{className:l("relative flex items-center justify-center",s),children:[e("div",{className:l("absolute inset-0 rounded-full border-2",a?"bg-neutral-light border-neutral-light":"bg-primary border-primary")}),e("div",{className:l("absolute rounded-full bg-white",t?"inset-[5px]":"inset-1.5")})]}):e("div",{className:l("relative flex items-center justify-center",s),children:e("div",{className:l("absolute inset-0 rounded-full border",t?"border":"border-[1.5px]",a?"border-neutral-light":"border-midnight")})})},RadioOptionComponent=({option:a,selected:t,disabled:s,onClick:n,name:o,isMobile:d})=>{const[c,p]=i.useState(!1),getTextColor=()=>s?"text-midnight":t?"text-primary":"text-neutral-dark";return e("div",{className:l("relative rounded-lg border-[1.5px] cursor-pointer transition-all duration-200",s?"bg-neutral-lighter":t?"bg-primary-lightest":c?"bg-primary-lightest/20":"bg-white",t?"border-primary":"border-transparent",s?"":"shadow-[0px_2px_4px_0px_rgba(0,0,0,0.08)]",s&&"cursor-not-allowed"),onClick:s?void 0:n,onMouseEnter:()=>p(!0),onMouseLeave:()=>p(!1),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||s||(e.preventDefault(),n())},tabIndex:s?-1:0,role:"radio","aria-checked":t,"aria-disabled":s,children:e("div",{className:"flex flex-row items-center justify-end relative w-full",children:e("div",{className:l("box-border flex flex-row items-center justify-end relative w-full",d?"gap-2 px-4 py-3":"gap-4 px-6 py-4"),children:r("div",{className:l("flex flex-row items-center justify-end p-0 relative shrink-0",d?"gap-2":"gap-3"),children:[e("input",{type:"radio",name:o,value:a.id,checked:t,disabled:s,onChange:n,className:"sr-only","aria-label":a.label}),e("div",{className:"flex flex-col gap-0.5 items-end justify-start p-0 relative shrink-0",children:e("div",{className:l("font-sans font-bold text-nowrap text-right transition-colors duration-200",d?"text-[14px] leading-[24px]":"text-[16px] leading-normal",getTextColor()),children:e("p",{className:"whitespace-pre",dir:"auto",children:a.label})})}),a.icon&&e("div",{className:l("flex items-center justify-center shrink-0 transition-colors duration-200",d?"size-6":"size-7",getTextColor()),children:a.icon}),e("div",{className:"flex flex-col items-start justify-start p-0 relative shrink-0",children:e(RadioButton,{selected:t,disabled:s,isMobile:d})})]})})})})},a=i.forwardRef(({options:r,value:i,onChange:a,name:t,disabled:s=!1,className:n,isMobile:o,direction:d="vertical",...c},p)=>e("div",{ref:p,className:"horizontal"===d?l("flex flex-row gap-2",o?"flex-wrap":"flex-nowrap",n):l("flex flex-col gap-2",n),role:"radiogroup",...c,children:r.map(r=>e(RadioOptionComponent,{option:r,selected:i===r.id,disabled:s||r.disabled,onClick:()=>{return e=r.id,void(!s&&a&&a(e));var e},name:t,isMobile:o},r.id))}));a.displayName="RadioGroup";export{a as RadioGroup};
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import cn from './utils.js';
+import { useMobile } from './contexts.js';
+
+const RadioButton = ({ selected, disabled, isMobile, }) => {
+    const size = isMobile ? 'size-5' : 'size-6';
+    if (selected) {
+        return (jsxs("div", { className: cn('relative flex items-center justify-center', size), children: [jsx("div", { className: cn('absolute inset-0 rounded-full border-2', disabled
+                        ? 'bg-neutral-light border-neutral-light'
+                        : 'bg-primary border-primary') }), jsx("div", { className: cn('absolute rounded-full bg-white', isMobile ? 'inset-[5px]' : 'inset-1.5') })] }));
+    }
+    return (jsx("div", { className: cn('relative flex items-center justify-center', size), children: jsx("div", { className: cn('absolute inset-0 rounded-full border', isMobile ? 'border' : 'border-[1.5px]', disabled ? 'border-neutral-light' : 'border-midnight') }) }));
+};
+const RadioOptionComponent = ({ option, selected, disabled, onClick, name, isMobile = false, }) => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const handleKeyDown = (e) => {
+        if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+            e.preventDefault();
+            onClick();
+        }
+    };
+    const getBackgroundColor = () => {
+        if (disabled)
+            return 'bg-neutral-lighter';
+        if (selected)
+            return 'bg-primary-lightest';
+        if (isHovered)
+            return 'bg-primary-lightest/20';
+        return 'bg-white';
+    };
+    const getBorderColor = () => {
+        if (selected)
+            return 'border-primary';
+        return 'border-transparent';
+    };
+    const getTextColor = () => {
+        if (disabled)
+            return 'text-midnight';
+        if (selected)
+            return 'text-primary';
+        return 'text-neutral-dark';
+    };
+    const getShadow = () => {
+        if (disabled)
+            return '';
+        return 'shadow-[0px_2px_4px_0px_rgba(0,0,0,0.08)]';
+    };
+    return (jsx("div", { className: cn('relative rounded-lg border-[1.5px] cursor-pointer transition-all duration-200', getBackgroundColor(), getBorderColor(), getShadow(), disabled && 'cursor-not-allowed'), onClick: disabled ? undefined : onClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": disabled, children: jsx("div", { className: "flex flex-row items-center justify-end relative w-full", children: jsx("div", { className: cn('box-border flex flex-row items-center justify-end relative w-full', isMobile ? 'gap-2 px-4 py-3' : 'gap-4 px-6 py-4'), children: jsxs("div", { className: cn('flex flex-row items-center justify-end p-0 relative shrink-0', isMobile ? 'gap-2' : 'gap-3'), children: [jsx("input", { type: "radio", name: name, value: option.id, checked: selected, disabled: disabled, onChange: onClick, className: "sr-only", "aria-label": option.label }), jsx("div", { className: "flex flex-col gap-0.5 items-end justify-start p-0 relative shrink-0", children: jsx("div", { className: cn('font-sans font-bold text-nowrap text-right transition-colors duration-200', isMobile
+                                    ? 'text-[14px] leading-[24px]'
+                                    : 'text-[16px] leading-normal', getTextColor()), children: jsx("p", { className: "whitespace-pre", dir: "auto", children: option.label }) }) }), option.icon && (jsx("div", { className: cn('flex items-center justify-center shrink-0 transition-colors duration-200', isMobile ? 'size-6' : 'size-7', getTextColor()), children: option.icon })), jsx("div", { className: "flex flex-col items-start justify-start p-0 relative shrink-0", children: jsx(RadioButton, { selected: selected, disabled: disabled, isMobile: isMobile }) })] }) }) }) }));
+};
+const RadioGroup = React.forwardRef(({ options, value, onChange, name, disabled = false, className, isMobile, direction = 'vertical', ...props }, ref) => {
+    const detectedIsMobile = useMobile();
+    const actualIsMobile = isMobile ?? detectedIsMobile;
+    const handleOptionClick = (optionId) => {
+        if (!disabled && onChange) {
+            onChange(optionId);
+        }
+    };
+    const getContainerClasses = () => {
+        if (direction === 'horizontal') {
+            return cn('flex flex-row gap-2', actualIsMobile ? 'flex-wrap' : 'flex-nowrap', className);
+        }
+        return cn('flex flex-col gap-2', className);
+    };
+    return (jsx("div", { ref: ref, className: getContainerClasses(), role: "radiogroup", ...props, children: options.map((option) => (jsx(RadioOptionComponent, { option: option, selected: value === option.id, disabled: disabled || option.disabled, onClick: () => handleOptionClick(option.id), name: name, isMobile: actualIsMobile }, option.id))) }));
+});
+RadioGroup.displayName = 'RadioGroup';
+
+export { RadioGroup };