@mci-ui/mci-ui 0.0.5 → 0.0.7

package/src/shared/ui/button/Button.tsx

@@ -0,0 +1,105 @@
+import { Loader } from 'lucide-react'
+import React from 'react'
+import { cn } from '../../lib/utils.ts'
+
+type ButtonProps = {
+	text?: string
+	icon?: React.ReactNode
+	iconPosition?: 'left' | 'right'
+	size?: 'sm' | 'md' | 'lg'
+	variant?: 'primary' | 'secondary' | 'accent'
+	loading?: boolean
+	disabled?: boolean
+	onClick?: () => void
+	className?: string
+}
+
+export default function Button({
+	text,
+	icon,
+	iconPosition = 'left',
+	size = 'md',
+	variant = 'accent',
+	loading = false,
+	disabled = false,
+	onClick,
+	className,
+}: ButtonProps) {
+	const sizes = {
+		sm: 'h-[38px] px-3 text-sm gap-2',
+		md: 'h-[48px] px-4 text-base gap-2.5',
+		lg: 'h-[56px] px-5 text-lg gap-3',
+	}
+
+	const variants = {
+		primary: `
+			bg-secondary-500
+			hover:bg-secondary-600
+			active:bg-secondary-700
+			hover:shadow-lg
+			hover:shadow-secondary-500/30
+			active:scale-[0.98]
+			text-white
+		`,
+		secondary: `
+			bg-secondary-50
+			hover:bg-secondary-100
+			active:bg-secondary-200
+			hover:shadow-md
+			hover:shadow-secondary-500/10
+			active:scale-[0.98]
+			text-secondary-700
+			border border-secondary-200
+			hover:border-secondary-300
+		`,
+		accent: `
+			bg-accent-500
+			hover:bg-accent-600
+			active:bg-accent-700
+			hover:shadow-lg
+			hover:shadow-accent-500/30
+			active:scale-[0.98]
+			text-white
+		`,
+	}
+
+	return (
+		<button
+			onClick={onClick}
+			disabled={disabled || loading}
+			className={cn(
+				'inline-flex items-center justify-center rounded-[7px] font-medium',
+				'transition-all duration-300 ease-in-out',
+				'transform hover:-translate-y-0.5',
+				'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:hover:shadow-none',
+				'focus:outline-none focus:ring-2 focus:ring-offset-2',
+				variant === 'primary' && 'focus:ring-secondary-500',
+				variant === 'secondary' && 'focus:ring-secondary-400',
+				variant === 'accent' && 'focus:ring-accent-500',
+				variants[variant],
+				sizes[size],
+				className
+			)}
+		>
+			{/* ICON LEFT */}
+			{icon && iconPosition === 'left' && (
+				<span className='flex items-center justify-center transition-transform duration-300 ease-in-out group-hover:scale-110'>
+					{loading ? <Loader className='animate-spin' size={20} /> : icon}
+				</span>
+			)}
+
+			{/* TEXT */}
+			{text && <span className='transition-all duration-300'>{text}</span>}
+
+			{/* ICON RIGHT */}
+			{icon && iconPosition === 'right' && (
+				<span className='flex items-center justify-center transition-transform duration-300 ease-in-out group-hover:scale-110'>
+					{loading ? <Loader className='animate-spin' size={20} /> : icon}
+				</span>
+			)}
+
+			{/* AGAR TEXT VA ICON YO'Q BO'LSA */}
+			{loading && <Loader className='animate-spin' size={20} />}
+		</button>
+	)
+}

package/src/shared/ui/collapse/Collapse.tsx

@@ -0,0 +1,98 @@
+import { ChevronDownIcon } from 'lucide-react'
+import React, { useEffect, useRef, useState } from 'react'
+import { cn } from '../../lib/utils.ts'
+
+type CollapseProps = {
+	title: string
+	children: React.ReactNode
+	defaultOpen?: boolean
+	icon?: React.ReactNode
+	variant?: 'primary' | 'secondary' | 'accent'
+	className?: string
+	titleClassName?: string
+	contentClassName?: string
+}
+
+export default function Collapse({
+	title,
+	children,
+	defaultOpen = false,
+	icon,
+	variant = 'primary',
+	className,
+	titleClassName,
+	contentClassName,
+}: CollapseProps) {
+	const [isOpen, setIsOpen] = useState(defaultOpen)
+	const [contentHeight, setContentHeight] = useState(0)
+	const contentRef = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		if (contentRef.current) {
+			setContentHeight(isOpen ? contentRef.current.scrollHeight : 0)
+		}
+	}, [isOpen])
+
+	const variantClasses = {
+		primary: {
+			title:
+				'bg-secondary-50 hover:bg-secondary-100 border-secondary-200 text-secondary-800',
+			content: 'bg-secondary-25 border-secondary-100',
+		},
+		secondary: {
+			title:
+				'bg-accent-50 hover:bg-accent-100 border-accent-200 text-accent-800',
+			content: 'bg-accent-25 border-accent-100',
+		},
+		accent: {
+			title: 'bg-gray-50 hover:bg-gray-100 border-gray-200 text-gray-800',
+			content: 'bg-gray-25 border-gray-100',
+		},
+	}
+
+	const variantConfig = variantClasses[variant]
+
+	return (
+		<div className={cn('border rounded-lg overflow-hidden', className)}>
+			{/* Header */}
+			<button
+				onClick={() => setIsOpen(!isOpen)}
+				className={cn(
+					'w-full flex items-center justify-between p-4 transition-all duration-300',
+					'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-500',
+					'border-b',
+					variantConfig.title
+				)}
+			>
+				<div className='flex items-center gap-3'>
+					{icon && <span className='flex-shrink-0'>{icon}</span>}
+					<span className={cn('font-medium text-left', titleClassName)}>
+						{title}
+					</span>
+				</div>
+
+				<ChevronDownIcon
+					className={cn(
+						'w-5 h-5 transition-transform duration-300 flex-shrink-0',
+						isOpen && 'rotate-180'
+					)}
+				/>
+			</button>
+
+			{/* Content */}
+			<div
+				className={cn(
+					'transition-all duration-300 ease-out overflow-hidden',
+					variantConfig.content
+				)}
+				style={{
+					height: `${contentHeight}px`,
+				}}
+			>
+				<div ref={contentRef} className={cn('p-4', contentClassName)}>
+					{children}
+				</div>
+			</div>
+		</div>
+	)
+}

package/src/shared/ui/inputMain/InputMain.tsx

@@ -0,0 +1,241 @@
+import { Eye, EyeOff } from 'lucide-react'
+import React, { useMemo, useState } from 'react'
+import { cn } from '../../lib/utils.ts'
+
+type InputProps = {
+	label?: string
+	placeholder?: string
+	type?: 'text' | 'email' | 'password' | 'number' | 'tel'
+	icon?: React.ReactNode
+	iconPosition?: 'left' | 'right'
+	size?: 'sm' | 'md' | 'lg'
+	error?: string
+	success?: string
+	disabled?: boolean
+	required?: boolean
+	value?: string
+	onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+	onFocus?: () => void
+	onBlur?: () => void
+	className?: string
+}
+
+export default function InputMain({
+	label,
+	placeholder,
+	type = 'text',
+	icon,
+	iconPosition = 'left',
+	size = 'md',
+	error,
+	success,
+	disabled = false,
+	required = false,
+	value,
+	onChange,
+	onFocus,
+	onBlur,
+	className,
+}: InputProps) {
+	const [isFocused, setIsFocused] = useState(false)
+	const [internalValue, setInternalValue] = useState('')
+	const [showPassword, setShowPassword] = useState(false)
+	const [autoFilled, setAutoFilled] = useState(false)
+
+	const currentValue = value ?? internalValue
+	const hasValue = Boolean(currentValue) || autoFilled
+	const isPassword = type === 'password'
+
+	const handleFocus = () => {
+		setIsFocused(true)
+		onFocus?.()
+	}
+
+	const handleBlur = () => {
+		setIsFocused(false)
+		onBlur?.()
+	}
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		if (value === undefined) setInternalValue(e.target.value)
+		onChange?.(e)
+	}
+
+	const togglePassword = () => setShowPassword(p => !p)
+
+	const sizes = useMemo(
+		() => ({
+			sm: {
+				input: 'h-[38px] text-sm',
+				padding: icon
+					? iconPosition === 'left'
+						? 'pl-10 pr-3'
+						: 'pl-3 pr-10'
+					: 'px-3',
+				icon: 'w-4 h-4',
+				iconWrapper: iconPosition === 'left' ? 'left-3' : 'right-3',
+				labelFont: 'text-xs',
+			},
+			md: {
+				input: 'h-[48px] text-base',
+				padding: icon
+					? iconPosition === 'left'
+						? 'pl-12 pr-4'
+						: 'pl-4 pr-12'
+					: 'px-4',
+				icon: 'w-5 h-5',
+				iconWrapper: iconPosition === 'left' ? 'left-3.5' : 'right-3.5',
+				labelFont: 'text-sm',
+			},
+			lg: {
+				input: 'h-[56px] text-lg',
+				padding: icon
+					? iconPosition === 'left'
+						? 'pl-14 pr-5'
+						: 'pl-5 pr-14'
+					: 'px-5',
+				icon: 'w-6 h-6',
+				iconWrapper: iconPosition === 'left' ? 'left-4' : 'right-4',
+				labelFont: 'text-base',
+			},
+		}),
+		[icon, iconPosition]
+	)
+
+	const stateStyles = useMemo(() => {
+		if (error)
+			return 'border-error-500 focus:border-error-600 focus:ring-error-500/20'
+		if (success)
+			return 'border-success-500 focus:border-success-600 focus:ring-success-500/20'
+		return 'border-gray-300 hover:border-gray-400 focus:border-accent-500 focus:ring-accent-500/20'
+	}, [error, success])
+
+	// Autofill holatini aniqlash
+	const handleAutoFill = (e: React.AnimationEvent<HTMLInputElement>) => {
+		if (e.animationName === 'onAutoFillStart') {
+			setAutoFilled(true)
+		} else if (e.animationName === 'onAutoFillCancel') {
+			setAutoFilled(false)
+		}
+	}
+
+	return (
+		<div className={cn('w-full', className)}>
+			<div className='relative flex items-center'>
+				<input
+					type={isPassword && showPassword ? 'text' : type}
+					value={currentValue}
+					onChange={handleChange}
+					onFocus={handleFocus}
+					onBlur={handleBlur}
+					onAnimationStart={handleAutoFill}
+					disabled={disabled}
+					placeholder={label ? '' : placeholder}
+					required={required}
+					className={cn(
+						'w-full rounded-[7px] border bg-white font-medium outline-none transition-all duration-300 ease-in-out',
+						'focus:ring-4 disabled:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60 autofill:shadow-[inset_0_0_0px_1000px_white]',
+						sizes[size].input,
+						sizes[size].padding,
+						stateStyles
+					)}
+					autoComplete='on'
+				/>
+
+				{/* FLOATING LABEL */}
+				{label && (
+					<label
+						className={cn(
+							'absolute pointer-events-none transition-all duration-300 ease-in-out font-medium',
+							icon && iconPosition === 'left' && !hasValue && !isFocused
+								? sizes[size].padding
+								: 'left-4',
+							isFocused || hasValue
+								? cn(
+										'top-0 -translate-y-1/2 bg-white px-2',
+										sizes[size].labelFont,
+										error
+											? 'text-error-600'
+											: success
+											? 'text-success-600'
+											: 'text-accent-600'
+								  )
+								: cn(
+										'top-1/2 -translate-y-1/2 text-gray-500',
+										sizes[size].input.includes('38') && 'text-sm',
+										sizes[size].input.includes('48') && 'text-base',
+										sizes[size].input.includes('56') && 'text-lg'
+								  )
+						)}
+					>
+						{label}
+						{required && <span className='text-error-500 ml-1'>*</span>}
+					</label>
+				)}
+
+				{/* ICON */}
+				{icon && (
+					<div
+						className={cn(
+							'absolute top-1/2 -translate-y-1/2 flex items-center transition-all duration-300',
+							sizes[size].iconWrapper,
+							error
+								? 'text-error-500'
+								: success
+								? 'text-success-500'
+								: isFocused
+								? 'text-accent-500'
+								: 'text-gray-400'
+						)}
+					>
+						<span className={cn(sizes[size].icon, 'mr-2')}>{icon}</span>
+					</div>
+				)}
+
+				{/* PASSWORD TOGGLE */}
+				{isPassword && (
+					<button
+						type='button'
+						onClick={togglePassword}
+						className={cn(
+							'absolute top-1/2 -translate-y-1/2 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-all',
+							'right-3'
+						)}
+					>
+						{showPassword ? (
+							<EyeOff className={cn(sizes[size].icon)} />
+						) : (
+							<Eye className={cn(sizes[size].icon)} />
+						)}
+					</button>
+				)}
+			</div>
+
+			{/* ERROR MESSAGE */}
+			{error && (
+				<p className='mt-1.5 text-sm text-error-600 flex items-center gap-1 animate-[slideDown_0.3s_ease-out]'>
+					{error}
+				</p>
+			)}
+
+			{/* SUCCESS MESSAGE */}
+			{success && !error && (
+				<p className='mt-1.5 text-sm text-success-600 flex items-center gap-1 animate-[slideDown_0.3s_ease-out]'>
+					{success}
+				</p>
+			)}
+
+			{/* Autofill animatsiyasi */}
+			<style>{`
+				input {
+					animation-name: onAutoFillCancel;
+				}
+				input:-webkit-autofill {
+					animation-name: onAutoFillStart;
+				}
+				@keyframes onAutoFillStart {}
+				@keyframes onAutoFillCancel {}
+			`}</style>
+		</div>
+	)
+}

package/src/shared/ui/mciTable/MciTable.tsx

@@ -0,0 +1,166 @@
+import { ArrowUpDown, Box, ChevronDown, ChevronUp } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { cn } from '../../lib/utils'
+import type { MciTableColumn } from '../../types/MciTableType'
+import Skeleton from "../skeleton/Skeleton.tsx";
+
+interface MciTableProps<T extends Record<string, unknown>> {
+	columns: MciTableColumn<T>[]
+	data: T[]
+	loading?: boolean
+	variant?: 'clean' | 'elevated' | 'bordered'
+	skeletonRows?: number
+	actions?: React.ReactNode
+	noDataText?: string
+}
+
+export default function MciTable<T extends Record<string, unknown>>({
+	columns,
+	data,
+	loading = false,
+	variant = 'clean',
+	skeletonRows = 5,
+	actions,
+	noDataText,
+}: MciTableProps<T>) {
+	const [sortConfig, setSortConfig] = useState<{
+		key: keyof T
+		direction: 'asc' | 'desc' | null
+	} | null>(null)
+
+	const sortedData = useMemo(() => {
+		if (!sortConfig || !sortConfig.direction) return data
+		return [...data].sort((a, b) => {
+			const aVal = a[sortConfig.key]
+			const bVal = b[sortConfig.key]
+			if (aVal < bVal) return sortConfig.direction === 'asc' ? -1 : 1
+			if (aVal > bVal) return sortConfig.direction === 'asc' ? 1 : -1
+			return 0
+		})
+	}, [data, sortConfig])
+
+	const handleSort = (col: MciTableColumn<T>) => {
+		if (!col.sortable) return
+		setSortConfig(prev => {
+			if (!prev || prev.key !== col.key) {
+				return { key: col.key, direction: 'asc' }
+			}
+			if (prev.direction === 'asc') return { key: col.key, direction: 'desc' }
+			if (prev.direction === 'desc') return { key: col.key, direction: null }
+			return null
+		})
+	}
+
+	const getSortIcon = (col: MciTableColumn<T>) => {
+		if (!col.sortable) return null
+		if (!sortConfig || sortConfig.key !== col.key || !sortConfig.direction) {
+			return <ArrowUpDown size={15} className='opacity-40' />
+		}
+		return sortConfig.direction === 'asc' ? (
+			<ChevronUp size={15} />
+		) : (
+			<ChevronDown size={15} />
+		)
+	}
+
+	const variantStyle = cn(
+		'w-full border-separate border-spacing-0 transition-all duration-300',
+		variant === 'clean' && 'bg-white',
+		variant === 'elevated' && 'bg-white  shadow-lg',
+		variant === 'bordered' && 'border border-secondary-200 rounded-lg'
+	)
+
+	const headerCell = (col: MciTableColumn<T>) =>
+		cn(
+			'bg-secondary-50 text-secondary-800 text-sm font-semibold py-3 px-4 select-none',
+			'border-b border-secondary-200 transition-colors',
+			col.align === 'center' && 'text-center',
+			col.align === 'right' && 'text-right',
+			col.sortable && 'cursor-pointer hover:bg-secondary-100/70'
+		)
+
+	return (
+		<div className='w-full space-y-3'>
+			{actions && (
+				<div className='flex justify-between items-center mb-2'>{actions}</div>
+			)}
+
+			<div className='w-full overflow-x-auto rounded-lg'>
+				<table className={variantStyle}>
+					<thead>
+						<tr>
+							{columns.map((col, idx) => (
+								<th
+									key={String(col.key)}
+									onClick={() => handleSort(col)}
+									className={cn(
+										headerCell(col),
+										idx === 0 && 'rounded-tl-lg',
+										idx === columns.length - 1 && 'rounded-tr-lg'
+									)}
+									style={{ width: col.width }}
+								>
+									<div className='flex items-center justify-between gap-2'>
+										<span className='truncate'>{col.title}</span>
+										{getSortIcon(col)}
+									</div>
+								</th>
+							))}
+						</tr>
+					</thead>
+
+					<tbody>
+						{loading
+							? Array.from({ length: skeletonRows }).map((_, idx) => (
+									<tr key={idx}>
+										{columns.map((_, i) => (
+											<td key={i} className='px-4 py-3'>
+												<Skeleton height={18} variant='rounded' />
+											</td>
+										))}
+									</tr>
+							  ))
+							: sortedData.map((row, idx) => (
+									<tr
+										key={idx}
+										className={cn(
+											'border-b border-secondary-100  transition-all duration-200'
+										)}
+									>
+										{columns.map((col, i) => (
+											<td
+												key={i}
+												className={cn(
+													'px-4 py-3 text-sm text-gray-800',
+													col.align === 'center' && 'text-center',
+													col.align === 'right' && 'text-right'
+												)}
+											>
+												{col.render
+													? col.render(row[col.key], row)
+													: String(row[col.key])}
+											</td>
+										))}
+									</tr>
+							  ))}
+					</tbody>
+				</table>
+			</div>
+
+			{!loading && sortedData.length === 0 && (
+				<div className='flex flex-col items-center justify-center py-10 text-gray-500 dark:text-gray-400 animate-[fadeIn_0.4s_ease-in-out]'>
+					<div className='relative'>
+						<Box
+							size={64}
+							className='mb-3 text-secondary-400 dark:text-secondary-500 opacity-80 animate-[float_2.5s_ease-in-out_infinite]'
+						/>
+						<div className='absolute inset-0 blur-2xl bg-secondary-200/20 dark:bg-secondary-700/20 rounded-full scale-75 animate-[pulse_3s_ease-in-out_infinite]' />
+					</div>
+					<p className='text-sm font-medium animate-[fadeUp_0.6s_ease-out]'>
+						{noDataText}
+					</p>
+				</div>
+			)}
+		</div>
+	)
+}

package/src/shared/ui/modal/Modal.tsx

@@ -0,0 +1,92 @@
+import { X } from 'lucide-react'
+import React, { useEffect, useRef } from 'react'
+import { cn, useClickOutside, useEscapeKey } from '../../lib/utils'
+
+interface ModalProps {
+	show: boolean
+	setShow: (show: boolean) => void
+	title?: string
+	Header?: React.ReactNode
+	Body?: React.ReactNode
+	footer?: React.ReactNode
+}
+
+export default function Modal({
+	show,
+	setShow,
+	title,
+	Header,
+	Body,
+	footer,
+}: ModalProps) {
+	const modalRef = useRef<HTMLDivElement>(null!)
+
+	// ESC
+	const { handleEscape } = useEscapeKey(() => setShow(false))
+	useEffect(() => {
+		if (show) {
+			document.addEventListener('keydown', handleEscape)
+			document.body.style.overflow = 'hidden'
+		} else {
+			document.body.style.overflow = 'unset'
+		}
+		return () => document.removeEventListener('keydown', handleEscape)
+	}, [show, handleEscape])
+
+	// Click outside
+	const { handleClick } = useClickOutside(modalRef, () => setShow(false))
+	useEffect(() => {
+		if (show) document.addEventListener('mousedown', handleClick)
+		return () => document.removeEventListener('mousedown', handleClick)
+	}, [show, handleClick])
+
+	return (
+		<div
+			className={cn(
+				'fixed inset-0 z-50 flex items-center justify-center p-4 bg-secondary-100/50 backdrop-blur-sm transition-all duration-500 ease-in-out',
+				show
+					? 'opacity-100 pointer-events-auto'
+					: 'opacity-0 pointer-events-none'
+			)}
+		>
+			<div
+				ref={modalRef}
+				className={cn(
+					'relative w-full max-w-lg rounded-[7px] shadow-xl bg-secondary-50 text-gray-800',
+					'transform transition-all duration-500 ease-out',
+					show ? 'opacity-100 scale-100' : 'opacity-0 scale-90'
+				)}
+			>
+				{/* Header */}
+				{(Header || title) && (
+					<div className='flex items-center justify-between px-6 py-4 border-b border-secondary-300'>
+						{Header || (
+							<h2 className='text-xl font-semibold text-gray-800'>{title}</h2>
+						)}
+
+						<button
+							onClick={() => setShow(false)}
+							className='text-gray-800 hover:text-secondary-300 active:animate-spin transition'
+						>
+							<X className='w-5 h-5' />
+						</button>
+					</div>
+				)}
+
+				{/* Body */}
+				{Body && (
+					<div className='px-6 py-4 max-h-96 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300'>
+						{Body}
+					</div>
+				)}
+
+				{/* Footer */}
+				{footer && (
+					<div className='flex items-center justify-end gap-3 px-6 py-4 border-t border-secondary-300'>
+						{footer}
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}