automoby-kit 1.0.2 → 1.0.4

package/dist/types/Accordion.js

@@ -0,0 +1,54 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-BiC2V0nk.js';
+import React, { useState } from 'react';
+import cn from './utils.js';
+import { Typography } from './Typography.js';
+import { c as createLucideIcon } from './createLucideIcon-D-q73LTT.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$1 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __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 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode);
+
+const Accordion = React.forwardRef(({ title, body, startIcon, isExpanded: controlledExpanded, onToggle, defaultExpanded = false, className, id, disabled = false, isMobile, ...props }, ref) => {
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    // Use controlled state if provided, otherwise use internal state
+    const isExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
+    const handleToggle = () => {
+        if (disabled)
+            return;
+        const newExpanded = !isExpanded;
+        if (controlledExpanded === undefined) {
+            setInternalExpanded(newExpanded);
+        }
+        onToggle?.(newExpanded);
+    };
+    const accordionId = id || `accordion-${Math.random().toString(36).substr(2, 9)}`;
+    const headerId = `${accordionId}-header`;
+    const contentId = `${accordionId}-content`;
+    // Icon size based on device
+    const iconSize = isMobile ? 20 : 24;
+    // Typography variants based on device
+    const titleVariant = isMobile ? 'body-s-heavy' : 'body-l-heavy';
+    const bodyVariant = isMobile ? 'body-s-medium' : 'body-m-medium';
+    return (jsxRuntimeExports.jsxs("div", { ref: ref, className: cn('rounded-2xl border-0 overflow-hidden', 'transition-all duration-200 ease-in-out', className), ...props, children: [jsxRuntimeExports.jsxs("button", { id: headerId, type: "button", onClick: handleToggle, disabled: disabled, "aria-expanded": isExpanded, "aria-controls": contentId, className: cn('w-full flex items-center justify-between', isMobile ? 'p-3' : 'p-4', 'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed', 'transition-all duration-200 ease-in-out', !disabled && 'hover:bg-neutral-lighter'), children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 mr-4", children: isExpanded ? (jsxRuntimeExports.jsx(ChevronUp, { size: iconSize, className: "text-neutral-darker transition-transform duration-200", "aria-hidden": "true" })) : (jsxRuntimeExports.jsx(ChevronDown, { size: iconSize, className: "text-neutral-darker transition-transform duration-200", "aria-hidden": "true" })) }), jsxRuntimeExports.jsxs("div", { className: cn('flex items-center flex-1', isMobile ? 'gap-3' : 'gap-4'), children: [jsxRuntimeExports.jsx("div", { className: "flex-1 text-right", children: jsxRuntimeExports.jsx(Typography, { variant: titleVariant, color: "neutral-darker", children: title }) }), startIcon && (jsxRuntimeExports.jsx("div", { className: cn('flex-shrink-0 flex items-center justify-center', isMobile ? 'w-6 h-6' : 'w-8 h-8'), children: startIcon }))] })] }), jsxRuntimeExports.jsx("div", { id: contentId, role: "region", "aria-labelledby": headerId, className: cn('w-full overflow-hidden transition-all duration-300 ease-in-out', isExpanded ? 'max-h-screen opacity-100' : 'max-h-0 opacity-0'), children: jsxRuntimeExports.jsx("div", { className: cn(isMobile ? 'pb-3 mt-1' : 'pb-4 mt-1.5'), children: jsxRuntimeExports.jsx("div", { className: cn('bg-neutral-lighter rounded-lg', isMobile ? 'p-3' : 'p-4'), children: jsxRuntimeExports.jsx(Typography, { variant: bodyVariant, color: "neutral-dark", children: body }) }) }) })] }));
+});
+Accordion.displayName = 'Accordion';
+
+export { Accordion };

package/dist/types/Backdrop.js

@@ -0,0 +1,24 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-BiC2V0nk.js';
+import React from 'react';
+import cn from './utils.js';
+
+const Backdrop = React.forwardRef(({ isOpen = false, onClick, blur = false, zIndex = 51, className, children, ...props }, ref) => {
+    const handleClick = (event) => {
+        if (onClick && event.target === event.currentTarget) {
+            onClick();
+        }
+    };
+    const backdropClasses = cn('fixed inset-0 transition-all duration-300', {
+        'opacity-100 pointer-events-auto': isOpen,
+        'opacity-0 pointer-events-none': !isOpen,
+        'backdrop-blur-sm': blur,
+    }, className);
+    const backdropStyle = {
+        backgroundColor: 'rgba(0, 0, 0, 0.60)',
+        zIndex,
+    };
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: backdropClasses, style: backdropStyle, onClick: handleClick, role: "presentation", "aria-hidden": !isOpen, ...props, children: children }));
+});
+Backdrop.displayName = 'Backdrop';
+
+export { Backdrop };

package/dist/types/Breadcrumb.js

@@ -0,0 +1,56 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-BiC2V0nk.js';
+import React from 'react';
+import cn from './utils.js';
+import { C as ChevronLeft } from './chevron-left-Ck6O99eF.js';
+import './createLucideIcon-D-q73LTT.js';
+
+const Breadcrumb = React.forwardRef(({ items, className, isMobile }, ref) => {
+    const handleItemClick = (item, index, e) => {
+        // Don't make the last item (current page) clickable
+        if (index === items.length - 1)
+            return;
+        if (item.onClick) {
+            e.preventDefault();
+            item.onClick();
+        }
+        // If item has href, let the anchor tag handle navigation naturally
+    };
+    return (jsxRuntimeExports.jsx("nav", { ref: ref, className: cn(
+        // Base layout - RTL with flex-row-reverse to show items right to left
+        'flex flex-row-reverse items-center', 
+        // Responsive gap and padding based on mobile state
+        isMobile ? 'gap-1 px-4 py-2.5' : 'gap-3 pr-1 pt-3 pb-4 pl-0', className), "aria-label": "Breadcrumb navigation", children: jsxRuntimeExports.jsx("ol", { className: "flex flex-row-reverse items-center gap-inherit", children: items.map((item, index) => {
+                const isLast = index === items.length - 1;
+                const isClickable = !isLast && (item.href || item.onClick);
+                const itemKey = `${item.label}-${index}`;
+                return (jsxRuntimeExports.jsxs("li", { className: "flex items-center gap-inherit", children: [isClickable ? (jsxRuntimeExports.jsx("a", { href: item.href || '#', className: cn(
+                            // Base styles
+                            'whitespace-nowrap border-0 bg-transparent p-0 no-underline', 
+                            // Responsive font size based on mobile state
+                            isMobile ? 'text-t' : 'text-s', 
+                            // Color
+                            'text-neutral-main', 
+                            // Cursor and hover effects for clickable items
+                            'cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm'), onClick: (e) => handleItemClick(item, index, e), onKeyDown: (e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    if (item.onClick) {
+                                        item.onClick();
+                                    }
+                                }
+                            }, "aria-label": `Go to ${item.label}`, children: item.label })) : (jsxRuntimeExports.jsx("span", { className: cn(
+                            // Base styles
+                            'whitespace-nowrap', 
+                            // Responsive font size based on mobile state
+                            isMobile ? 'text-t' : 'text-s', 
+                            // Color
+                            'text-neutral-main', 
+                            // Different styles for current page (last item)
+                            'font-medium'), "aria-current": isLast ? 'page' : undefined, "aria-label": isLast ? `Current page: ${item.label}` : undefined, children: item.label })), !isLast && (jsxRuntimeExports.jsx(ChevronLeft, { className: cn('text-black flex-shrink-0', 
+                            // Responsive icon size
+                            isMobile ? 'w-2.5 h-2.5' : 'w-3 h-3'), "aria-hidden": "true" }))] }, itemKey));
+            }) }) }));
+});
+Breadcrumb.displayName = 'Breadcrumb';
+
+export { Breadcrumb };

package/dist/types/Button.js

@@ -0,0 +1,46 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-BiC2V0nk.js';
+import React from 'react';
+import cn from './utils.js';
+import { getTypographyClasses } from './Typography.js';
+
+const sizeClasses = {
+    sm: 'px-[16px] py-[7px]',
+    md: 'px-[16px] py-[9px]',
+    lg: 'px-[16px] py-[13px]',
+    xl: 'px-[20px] py-[13px]',
+};
+const defaultTextVariants = {
+    sm: 'body-s-bold', // 14px / Bold (600)
+    md: 'body-m-bold', // 16px / Bold (600)
+    lg: 'body-l-bold', // 18px / Bold (600)
+    xl: 'body-xl-heavy', // 20px / Heavy (700)
+};
+const variantClasses = {
+    primary: `
+    bg-[var(--color-primary)] text-white
+    hover:bg-[var(--color-primary-dark)]
+    disabled:bg-[var(--color-neutral-light)] disabled:text-[var(--color-neutral-darker)]
+  `,
+    secondary: `
+    bg-[var(--color-primary-lightest)] text-[var(--color-primary)]
+    hover:bg-[var(--color-primary-lighter)]
+    disabled:bg-[var(--color-neutral-light)] disabled:text-[var(--color-neutral-darker)]
+  `,
+    tertiary: `
+    bg-white border border-[var(--color-primary-light)] text-[var(--color-primary)]
+    hover:bg-[var(--color-neutral-lighter)]
+    disabled:bg-[var(--color-neutral-light)] disabled:text-[var(--color-neutral-darker)]
+  `,
+    ghost: `
+    bg-transparent text-[var(--color-primary)]
+    hover:bg-[var(--color-primary-lightest)]
+    disabled:bg-[var(--color-neutral-light)] disabled:text-[var(--color-neutral-darker)]
+  `,
+};
+const Button = React.forwardRef(({ className, variant = 'primary', size = 'md', icon, iconPosition = 'right', children, loading = false, disabled, textVariant, ...props }, ref) => {
+    const finalTextVariant = textVariant || defaultTextVariants[size];
+    return (jsxRuntimeExports.jsxs("button", { ref: ref, type: "button", className: cn('inline-flex items-center justify-center rounded-[8px] transition-colors duration-200', sizeClasses[size], variantClasses[variant], getTypographyClasses(finalTextVariant), disabled && 'opacity-50 pointer-events-none', className), disabled: disabled || loading, ...props, children: [icon && iconPosition === 'left' && (jsxRuntimeExports.jsx("span", { className: "mr-2 flex items-center", children: icon })), loading ? '...' : children, icon && iconPosition === 'right' && (jsxRuntimeExports.jsx("span", { className: "ml-2 flex items-center", children: icon }))] }));
+});
+Button.displayName = 'Button';
+
+export { Button };

package/dist/types/Chips.js

@@ -0,0 +1,109 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-BiC2V0nk.js';
+import React from 'react';
+import cn from './utils.js';
+import { c as createLucideIcon } from './createLucideIcon-D-q73LTT.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 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
+
+const chipVariants = {
+    purple: {
+        background: 'bg-[var(--color-primary-lightest)]',
+        text: 'text-[var(--color-primary-darkest)]',
+        border: 'border-[var(--color-primary-light)]',
+    },
+    red: {
+        background: 'bg-[var(--color-error-light)]',
+        text: 'text-[var(--color-error)]',
+        border: 'border-[#f0d6d6]',
+    },
+    green: {
+        background: 'bg-[var(--color-success-light)]',
+        text: 'text-[var(--color-success)]',
+        border: 'border-[#d4e8dc]',
+    },
+    orange: {
+        background: 'bg-[var(--color-warning-light)]',
+        text: 'text-[var(--color-warning)]',
+        border: 'border-[#f5e1d1]',
+    },
+    blue: {
+        background: 'bg-[var(--color-info-light)]',
+        text: 'text-[var(--color-info)]',
+        border: 'border-[#d3e9f2]',
+    },
+    white: {
+        background: 'bg-[var(--color-white)]',
+        text: 'text-[var(--color-neutral-darker)]',
+        border: 'border-[var(--color-neutral-light)]',
+    },
+    disabled: {
+        background: 'bg-[var(--color-neutral-lighter)]',
+        text: 'text-[var(--color-neutral-main)]',
+        border: 'border-[var(--color-neutral-light)]',
+    },
+};
+const chipSizes = {
+    mobile: {
+        padding: 'px-2.5 py-1',
+        gap: 'gap-1',
+        iconSize: 'size-4',
+        fontSize: 'text-[12px]',
+        lineHeight: 'leading-[1.8]',
+    },
+    desktop: {
+        padding: 'px-3 py-1',
+        gap: 'gap-1.5',
+        iconSize: 'size-5',
+        fontSize: 'text-[14px]',
+        lineHeight: 'leading-[24px]',
+    },
+};
+const Chips = React.forwardRef(({ variant = 'purple', size, children = 'متن پیشفرض', disabled = false, onClick, onIconClick, className, isMobile, ...props }, ref) => {
+    const actualSize = size || (isMobile ? 'mobile' : 'desktop');
+    const actualVariant = disabled ? 'disabled' : variant;
+    const variantStyles = chipVariants[actualVariant];
+    const sizeStyles = chipSizes[actualSize];
+    const handleIconClick = (e) => {
+        e.stopPropagation();
+        if (onIconClick) {
+            onIconClick();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if ((e.key === 'Enter' || e.key === ' ') && onClick && !disabled) {
+            e.preventDefault();
+            onClick();
+        }
+    };
+    const renderIcon = () => {
+        const iconElement = jsxRuntimeExports.jsx(X, { className: cn(sizeStyles.iconSize) });
+        if (onIconClick) {
+            return (jsxRuntimeExports.jsx("button", { type: "button", onClick: handleIconClick, disabled: disabled, className: cn('flex items-center justify-center', 'hover:opacity-70 transition-opacity', disabled && 'cursor-not-allowed opacity-50'), "aria-label": "\u062D\u0630\u0641", children: iconElement }));
+        }
+        return iconElement;
+    };
+    return (jsxRuntimeExports.jsxs("div", { ref: ref, className: cn(
+        // Base styles
+        'relative rounded-[50px] border border-solid inline-flex', 'flex-row items-center justify-center', 'font-sans font-bold not-italic', 'text-nowrap text-right', 'transition-all duration-200', 
+        // Variant styles
+        variantStyles.background, variantStyles.text, variantStyles.border, 
+        // Size styles
+        sizeStyles.padding, sizeStyles.gap, sizeStyles.fontSize, sizeStyles.lineHeight, 
+        // Interactive styles
+        onClick && !disabled && 'cursor-pointer hover:opacity-80', disabled && 'cursor-not-allowed opacity-60', className), onClick: disabled ? undefined : onClick, onKeyDown: onClick && !disabled ? handleKeyDown : undefined, tabIndex: onClick && !disabled ? 0 : undefined, role: onClick ? 'button' : undefined, ...props, children: [jsxRuntimeExports.jsx("span", { className: "text-center", children: children }), renderIcon()] }));
+});
+Chips.displayName = 'Chips';
+
+export { Chips, Chips as default };

package/dist/types/Divider.js

@@ -0,0 +1,21 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-BiC2V0nk.js';
+import React from 'react';
+import cn from './utils.js';
+
+const Divider = React.forwardRef(({ width = '100%', height = 1, orientation = 'horizontal', variant = 'neutral-light', className, style, ...props }, ref) => {
+    const isHorizontal = orientation === 'horizontal';
+    const variantClasses = {
+        'neutral-light': 'bg-neutral-light',
+        'neutral-main': 'bg-neutral-main',
+        primary: 'bg-primary',
+    };
+    const dividerStyle = {
+        width: isHorizontal ? width : height,
+        height: isHorizontal ? height : width,
+        ...style,
+    };
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: cn('shrink-0', variantClasses[variant], className), style: dividerStyle, role: "separator", ...props }));
+});
+Divider.displayName = 'Divider';
+
+export { Divider };

package/dist/types/Drawer.js

@@ -0,0 +1,107 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-BiC2V0nk.js';
+import React, { useRef, useEffect } from 'react';
+import cn from './utils.js';
+
+const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen = false, isOpen = false, onClose, className, isMobile, ...props }, ref) => {
+    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': !isMobile,
+        'p-4': isMobile,
+    }, className);
+    if (!isOpen) {
+        return null;
+    }
+    return (jsxRuntimeExports.jsx("div", { ref: overlayRef, className: overlayClasses, onClick: handleOverlayClick, onKeyDown: handleOverlayKeyDown, tabIndex: -1, role: "button", "aria-label": "Close drawer", children: jsxRuntimeExports.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/types/Input.js

@@ -0,0 +1,78 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-BiC2V0nk.js';
+import React, { useState, useId } from 'react';
+import cn from './utils.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 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]': !isMobile,
+        'h-12': isMobile,
+        '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': (!isMobile && isLabelFloated) || (isMobile && !isLabelFloated),
+        'text-xs': isMobile && isLabelFloated,
+        'text-m': !isMobile && !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': !isMobile,
+        'text-xs': isMobile,
+        'text-neutral-main': state === 'default',
+        'text-primary': state === 'default' && isFocused,
+        'text-error': state === 'error',
+        'text-neutral-light': isDisabled,
+    });
+    return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [endIcon && (jsxRuntimeExports.jsx("span", { className: cn(iconClasses, 'left-4'), children: endIcon })), jsxRuntimeExports.jsx("label", { htmlFor: id, className: labelClasses, children: label }), jsxRuntimeExports.jsx("input", { ref: ref, id: id, type: type, value: value, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, disabled: isDisabled, className: inputClasses, ...props }), startIcon && (jsxRuntimeExports.jsx("span", { className: cn(iconClasses, 'right-4'), children: startIcon }))] }), helperText && jsxRuntimeExports.jsx("p", { className: helperTextClasses, children: helperText })] }));
+});
+Input.displayName = 'Input';
+
+export { Input };

package/dist/types/Menu.js

@@ -0,0 +1,120 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-BiC2V0nk.js';
+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 (jsxRuntimeExports.jsx("div", { ref: ref, className: cn('relative inline-block', className), ...props, children: jsxRuntimeExports.jsxs("div", { ref: menuRef, children: [jsxRuntimeExports.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: jsxRuntimeExports.jsx(Typography, { variant: "body-s-heavy", color: "neutral-darker", className: "text-right", children: buttonText }) }), jsxRuntimeExports.jsx("div", { className: dropdownClasses, children: jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-[16px]", children: items.map((item) => {
+                            const content = (jsxRuntimeExports.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 (jsxRuntimeExports.jsx("a", { ...commonProps, href: item.href, role: "menuitem", tabIndex: isOpen ? 0 : -1, children: content }, item.id));
+                            }
+                            // Render as button
+                            return (jsxRuntimeExports.jsx("button", { ...commonProps, type: "button", role: "menuitem", tabIndex: isOpen ? 0 : -1, disabled: item.disabled, children: content }, item.id));
+                        }) }) })] }) }));
+});
+Menu.displayName = 'Menu';
+
+export { Menu };