@mci-ui/mci-ui 0.0.6 → 0.0.8

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

@@ -1,92 +0,0 @@
-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>
-	)
-}

package/src/shared/ui/pagination/Pagination.tsx

@@ -1,141 +0,0 @@
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-
-interface PaginationProps {
-	totalItems: number
-	currentPage: number
-	perPage: number
-	onPageChange: (page: number) => void
-	onPerPageChange?: (value: number) => void
-	siblingCount?: number
-	perPageOptions?: number[]
-	showPerPage?: boolean
-}
-
-export default function Pagination({
-	totalItems,
-	currentPage,
-	perPage,
-	onPageChange,
-	onPerPageChange,
-	siblingCount = 1,
-	perPageOptions = [10, 20, 30],
-	showPerPage = true,
-}: PaginationProps) {
-	const totalPages = Math.ceil(totalItems / perPage)
-
-	const createPageRange = () => {
-		const totalPageNumbers = siblingCount * 2 + 5
-		if (totalPages <= totalPageNumbers) {
-			return Array.from({ length: totalPages }, (_, i) => i + 1)
-		}
-
-		const leftSiblingIndex = Math.max(currentPage - siblingCount, 2)
-		const rightSiblingIndex = Math.min(
-			currentPage + siblingCount,
-			totalPages - 1
-		)
-
-		const showLeftDots = leftSiblingIndex > 2
-		const showRightDots = rightSiblingIndex < totalPages - 1
-
-		const range: (number | string)[] = [1]
-
-		if (showLeftDots) range.push('...')
-
-		for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
-			range.push(i)
-		}
-
-		if (showRightDots) range.push('...')
-
-		range.push(totalPages)
-
-		return range
-	}
-
-	const pages = createPageRange()
-
-	const handlePrev = () => {
-		if (currentPage > 1) onPageChange(currentPage - 1)
-	}
-
-	const handleNext = () => {
-		if (currentPage < totalPages) onPageChange(currentPage + 1)
-	}
-
-	return (
-		<div className='w-full flex flex-col md:flex-row md:justify-between md:items-center gap-4 py-4'>
-			{/* Per Page Select */}
-			{showPerPage && onPerPageChange && (
-				<div className='flex justify-center md:justify-start w-full md:w-auto'>
-					<select
-						value={perPage}
-						onChange={e => onPerPageChange(Number(e.target.value))}
-						className='border rounded-lg px-3 py-2 text-sm bg-white
-                       hover:border-secondary-500 
-                       focus:outline-none focus:ring-2 focus:ring-secondary-500
-                       transition-all duration-200'
-					>
-						{perPageOptions.map(option => (
-							<option key={option} value={option}>
-								{option} / page
-							</option>
-						))}
-					</select>
-				</div>
-			)}
-
-			{/* Pagination */}
-			<div className='flex items-center justify-center md:justify-end w-full'>
-				{/* Prev */}
-				<button
-					onClick={handlePrev}
-					disabled={currentPage === 1}
-					className={`flex items-center justify-center rounded-xl border px-3 py-2 transition-all duration-200
-            ${
-							currentPage === 1
-								? 'opacity-40 cursor-not-allowed'
-								: 'hover:bg-secondary-100 hover:text-secondary-700'
-						}`}
-				>
-					<ChevronLeft size={18} />
-				</button>
-
-				{/* Page numbers */}
-				<div className='flex items-center gap-1 mx-2'>
-					{pages.map((page, idx) => (
-						<button
-							key={idx}
-							onClick={() => typeof page === 'number' && onPageChange(page)}
-							disabled={page === '...'}
-							className={`min-w-[40px] rounded-xl border px-3 py-2 text-sm font-medium transition-all duration-200
-                ${
-									page === currentPage
-										? 'bg-secondary-500 text-white shadow-md'
-										: page === '...'
-										? 'cursor-default border-none text-gray-400'
-										: 'bg-white text-secondary-700 hover:bg-secondary-100'
-								}`}
-						>
-							{page}
-						</button>
-					))}
-				</div>
-
-				{/* Next */}
-				<button
-					onClick={handleNext}
-					disabled={currentPage === totalPages}
-					className={`flex items-center justify-center rounded-xl border px-3 py-2 transition-all duration-200
-            ${
-							currentPage === totalPages
-								? 'opacity-40 cursor-not-allowed'
-								: 'hover:bg-secondary-100 hover:text-secondary-700'
-						}`}
-				>
-					<ChevronRight size={18} />
-				</button>
-			</div>
-		</div>
-	)
-}

package/src/shared/ui/skeleton/Skeleton.tsx

@@ -1,33 +0,0 @@
-import { cn } from '../../lib/utils.ts'
-
-type SkeletonProps = {
-	className?: string
-	variant?: 'default' | 'rounded' | 'circle'
-	width?: string | number
-	height?: string | number
-}
-
-export default function Skeleton({
-	className,
-	variant = 'default',
-	width = '100%',
-	height = '1rem',
-}: SkeletonProps) {
-	return (
-		<div
-			className={cn(
-				'relative overflow-hidden bg-secondary-200 dark:bg-secondary-800',
-				'rounded-sm',
-				variant === 'circle' && 'rounded-full',
-				variant === 'rounded' && 'rounded-md',
-				className
-			)}
-			style={{
-				width: typeof width === 'number' ? `${width}px` : width,
-				height: typeof height === 'number' ? `${height}px` : height,
-			}}
-		>
-			<div className='absolute inset-0 shimmer-mask' />
-		</div>
-	)
-}

package/src/shared/ui/tabs/Tabs.tsx

@@ -1,192 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { cn } from '../../lib/utils.ts'
-
-type Tab = {
-	id: string
-	label: string
-	icon?: React.ReactNode
-	content: React.ReactNode
-	disabled?: boolean
-}
-
-type TabsProps = {
-	tabs: Tab[]
-	defaultTab?: string
-	position?: 'top' | 'bottom' | 'left' | 'right'
-	variant?: 'primary' | 'secondary' | 'accent'
-	className?: string
-	onChange?: (tabId: string | number) => void
-}
-
-export default function Tabs({
-	tabs,
-	defaultTab,
-	position = 'top',
-	variant = 'primary',
-	className,
-	onChange,
-}: TabsProps) {
-	const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id)
-	const [indicatorStyle, setIndicatorStyle] = useState({})
-	const tabsRef = useRef<(HTMLButtonElement | null)[]>([])
-
-	useEffect(() => {
-		const activeIndex = tabs.findIndex(tab => tab.id === activeTab)
-		const activeTabElement = tabsRef.current[activeIndex]
-
-		if (activeTabElement) {
-			const { offsetLeft, offsetTop, offsetWidth, offsetHeight } =
-				activeTabElement
-
-			setIndicatorStyle({
-				left: offsetLeft,
-				top: offsetTop,
-				width: offsetWidth,
-				height: offsetHeight,
-				transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-			})
-		}
-	}, [activeTab, position, tabs])
-
-	const containerClasses = {
-		top: 'flex-col',
-		bottom: 'flex-col-reverse',
-		left: 'flex-row',
-		right: 'flex-row-reverse',
-	}
-
-	const tabsContainerClasses = {
-		top: 'flex-row',
-		bottom: 'flex-row',
-		left: 'flex-col',
-		right: 'flex-col',
-	}
-
-	const contentClasses = {
-		top: 'mt-6',
-		bottom: 'mb-6',
-		left: 'ml-6',
-		right: 'mr-6',
-	}
-
-	const variantClasses = {
-		primary: {
-			active: 'text-secondary-600',
-			inactive:
-				'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300',
-			disabled: 'text-gray-300 dark:text-gray-600 cursor-not-allowed',
-			bg: 'bg-secondary-100 dark:bg-secondary-900',
-		},
-		secondary: {
-			active: 'text-accent-600',
-			inactive:
-				'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300',
-			disabled: 'text-gray-300 dark:text-gray-600 cursor-not-allowed',
-			bg: 'bg-accent-100 dark:bg-accent-900',
-		},
-		accent: {
-			active: 'text-gray-800 dark:text-gray-200',
-			inactive:
-				'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300',
-			disabled: 'text-gray-300 dark:text-gray-600 cursor-not-allowed',
-			bg: 'bg-gray-100 dark:bg-gray-800',
-		},
-	}
-
-	const isVertical = position === 'left' || position === 'right'
-
-	return (
-		<div className={cn('flex w-full', containerClasses[position], className)}>
-			{/* Tabs Container */}
-			<div
-				className={cn(
-					'flex relative bg-gray-50 dark:bg-gray-900 rounded-lg p-1',
-					tabsContainerClasses[position],
-					isVertical ? 'min-w-48' : 'w-full'
-				)}
-			>
-				{/* Animated Background Indicator */}
-				<div
-					className={cn(
-						'absolute rounded-md transition-all duration-300 ease-out',
-						variantClasses[variant].bg,
-						isVertical ? 'w-full' : 'h-full'
-					)}
-					style={indicatorStyle}
-				/>
-
-				{tabs.map((tab, index) => {
-					const isActive = activeTab === tab.id
-					const variantConfig = variantClasses[variant]
-
-					return (
-						<button
-							key={tab.id}
-                            ref={(el) => {
-                                tabsRef.current[index] = el
-                            }}
-							onClick={() => {
-								if (!tab.disabled) {
-									setActiveTab(tab.id)
-									onChange?.(tab.id)
-								}
-							}}
-							disabled={tab.disabled}
-							className={cn(
-								'relative flex items-center justify-center gap-2 px-4 py-3 font-medium',
-								'text-sm whitespace-nowrap transition-all duration-200 z-10',
-								'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500',
-								'rounded-md',
-								isActive
-									? [variantConfig.active, 'font-semibold']
-									: [
-											variantConfig.inactive,
-											'hover:bg-white/50 dark:hover:bg-gray-800/50',
-									  ],
-								tab.disabled && variantConfig.disabled,
-								isVertical ? 'w-full justify-start' : 'flex-1'
-							)}
-						>
-							{tab.icon && (
-								<span
-									className={cn(
-										'flex-shrink-0 transition-transform duration-200',
-										isActive && 'scale-110'
-									)}
-								>
-									{tab.icon}
-								</span>
-							)}
-							<span className='relative z-10'>{tab.label}</span>
-						</button>
-					)
-				})}
-			</div>
-
-			{/* Tab Content with Smooth Transition */}
-			<div className={cn('flex-1 overflow-hidden', contentClasses[position])}>
-				<div key={activeTab} className='animate-fade-in'>
-					{tabs.find(tab => tab.id === activeTab)?.content}
-				</div>
-			</div>
-		</div>
-	)
-}
-
-type TabPanelProps = {
-	children: React.ReactNode
-	className?: string
-}
-
-export function TabPanel({ children, className }: TabPanelProps) {
-	return (
-		<div
-			className={cn(
-				'p-6 rounded-lg bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700',
-				className
-			)}
-		>
-			{children}
-		</div>
-	)
-}

package/src/shared/ui/tag/Tag.tsx

@@ -1,92 +0,0 @@
-import { X } from 'lucide-react'
-import React from 'react'
-import { cn } from '../../lib/utils.ts'
-
-type TagProps = {
-	children: React.ReactNode
-	variant?: 'default' | 'secondary' | 'success' | 'error' | 'info' | 'accent'
-	size?: 'sm' | 'md' | 'lg'
-	icon?: React.ReactNode
-	iconPosition?: 'left' | 'right'
-	rounded?: boolean
-	closable?: boolean
-	onClose?: () => void
-	className?: string
-}
-
-const sizes = {
-	sm: 'text-xs px-2 py-0.5',
-	md: 'text-sm px-3 py-1',
-	lg: 'text-base px-4 py-1.5',
-}
-
-const iconSizes = {
-	sm: 'w-3 h-3',
-	md: 'w-4 h-4',
-	lg: 'w-5 h-5',
-}
-
-const variants = {
-	default:
-		'bg-gray-100 text-gray-800 border border-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700',
-	secondary:
-		'bg-secondary-100 text-secondary-800 border border-secondary-200 dark:bg-secondary-800 dark:text-secondary-50 dark:border-secondary-700',
-	success:
-		'bg-success-100 text-success-800 border border-success-200 dark:bg-success-800 dark:text-success-50 dark:border-success-700',
-	error:
-		'bg-error-100 text-error-800 border border-error-200 dark:bg-error-800 dark:text-error-50 dark:border-error-700',
-	info: 'bg-info-100 text-info-800 border border-info-200 dark:bg-info-800 dark:text-info-50 dark:border-info-700',
-	accent:
-		'bg-accent-100 text-accent-800 border border-accent-200 dark:bg-accent-800 dark:text-accent-50 dark:border-accent-700',
-}
-
-export default function Tag({
-	children,
-	variant = 'default',
-	size = 'md',
-	icon,
-	iconPosition = 'left',
-	closable = false,
-	onClose,
-	className,
-}: TagProps) {
-	return (
-		<span
-			className={cn(
-				'inline-flex items-center font-medium animate-[fadeIn_0.3s_ease-out] rounded-[7px]',
-				sizes[size],
-				variants[variant],
-				icon && 'gap-1.5',
-				className
-			)}
-		>
-			{/* ICON LEFT */}
-			{icon && iconPosition === 'left' && (
-				<span className={`flex items-center ${cn(iconSizes[size])}`}>
-					{icon}
-				</span>
-			)}
-
-			{/* TEXT */}
-			<span>{children}</span>
-
-			{/* ICON RIGHT */}
-			{icon && iconPosition === 'right' && (
-				<span className={`flex items-center ${cn(iconSizes[size])}`}>
-					{icon}
-				</span>
-			)}
-
-			{/* CLOSE BUTTON */}
-			{closable && (
-				<button
-					type='button'
-					onClick={onClose}
-					className='ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10 transition-colors'
-				>
-					<X className={cn(iconSizes[size])} />
-				</button>
-			)}
-		</span>
-	)
-}

package/src/shared/ui/textarea/Textarea.tsx

@@ -1,72 +0,0 @@
-import { useState } from 'react'
-import { cn } from '../../lib/utils.ts'
-
-type TextareaProps = {
-	label?: string
-	placeholder?: string
-	value?: string
-	onChange?: (value: string) => void
-	required?: boolean
-	disabled?: boolean
-	error?: string
-	className?: string
-	rows?: number
-}
-
-export default function Textarea({
-	label,
-	placeholder,
-	value = '',
-	onChange,
-	required = false,
-	disabled = false,
-	error,
-	className,
-	rows = 4,
-}: TextareaProps) {
-	const [focused, setFocused] = useState(false)
-
-	const isFloating = focused || value.length > 0
-
-	return (
-		<div className='relative w-full'>
-			{/* Label */}
-			{label && (
-				<label
-					className={cn(
-						'absolute left-3 top-2 text-gray-500 dark:text-gray-400 transition-all duration-200 pointer-events-none',
-						isFloating
-							? 'text-xs -translate-y-3 bg-white dark:bg-gray-900 px-1'
-							: 'text-sm translate-y-0'
-					)}
-				>
-					{label}
-					{required && <span className='text-error-500 ml-0.5'>*</span>}
-				</label>
-			)}
-
-			{/* Textarea */}
-			<textarea
-				rows={rows}
-				placeholder={label ? undefined : placeholder}
-				value={value}
-				onChange={e => onChange?.(e.target.value)}
-				onFocus={() => setFocused(true)}
-				onBlur={() => setFocused(false)}
-				disabled={disabled}
-				className={cn(
-					'w-full rounded-md border border-gray-300 dark:border-gray-700 bg-transparent text-gray-900 dark:text-gray-100 px-3 py-2 outline-none transition-all resize-none',
-					'focus:border-primary-500 focus:ring-1 focus:ring-primary-500',
-					disabled && 'opacity-50 cursor-not-allowed',
-					error &&
-						'border-error-500 focus:ring-error-500 focus:border-error-500',
-					label && 'pt-5',
-					className
-				)}
-			/>
-
-			{/* Error message */}
-			{error && <p className='mt-1 text-sm text-error-500'>{error}</p>}
-		</div>
-	)
-}