@mci-ui/mci-ui 0.0.0 → 0.0.2

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

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

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

package/src/shared/ui/toast/Toast.tsx

@@ -0,0 +1,150 @@
+import {
+	AlertCircle,
+	CheckCircle2,
+	Info,
+	Loader2,
+	X,
+	XCircle,
+} from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { cn } from '../../lib/utils.ts'
+
+// --- TYPES ---
+type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading'
+
+export type ToastProps = {
+	id?: string
+	title: string
+	description?: string
+	type?: ToastType
+	duration?: number
+	position?:
+		| 'top-right'
+		| 'top-left'
+		| 'bottom-right'
+		| 'bottom-left'
+		| 'top-center'
+		| 'bottom-center'
+	onClose?: (id: string) => void
+	action?: {
+		label: string
+		onClick: () => void
+	}
+}
+
+// --- MAIN TOAST COMPONENT ---
+export function Toast({
+	id = Math.random().toString(36),
+	title,
+	description,
+	type = 'info',
+	duration = 5000,
+	position = 'top-right',
+	onClose,
+	action,
+}: ToastProps) {
+	const [isVisible, setIsVisible] = useState(false)
+	const [isLeaving, setIsLeaving] = useState(false)
+
+	useEffect(() => {
+		const showTimer = setTimeout(() => setIsVisible(true), 100)
+		if (duration !== Infinity) {
+			const closeTimer = setTimeout(() => handleClose(), duration)
+			return () => {
+				clearTimeout(showTimer)
+				clearTimeout(closeTimer)
+			}
+		}
+		return () => clearTimeout(showTimer)
+	}, [duration])
+
+	const handleClose = () => {
+		setIsLeaving(true)
+		setTimeout(() => {
+			setIsVisible(false)
+			onClose?.(id)
+		}, 300)
+	}
+
+	const handleAction = () => {
+		action?.onClick()
+		handleClose()
+	}
+
+	const icons = {
+		success: <CheckCircle2 className='w-5 h-5' />,
+		error: <XCircle className='w-5 h-5' />,
+		warning: <AlertCircle className='w-5 h-5' />,
+		info: <Info className='w-5 h-5' />,
+		loading: <Loader2 className='w-5 h-5 animate-spin' />,
+	}
+
+	const variantClasses = {
+		success: 'bg-success-50 border-success-200 text-success-800',
+		error: 'bg-error-50 border-error-200 text-error-800',
+		warning: 'bg-secondary-50 border-secondary-200 text-secondary-800',
+		info: 'bg-info-50 border-info-200 text-info-800',
+		loading: 'bg-gray-50 border-gray-200 text-gray-800',
+	}
+
+	const iconColors = {
+		success: 'text-success-600',
+		error: 'text-error-600',
+		warning: 'text-secondary-600',
+		info: 'text-info-600',
+		loading: 'text-gray-600',
+	}
+
+	const positionClasses = {
+		'top-right': 'top-4 right-4',
+		'top-left': 'top-4 left-4',
+		'bottom-right': 'bottom-4 right-4',
+		'bottom-left': 'bottom-4 left-4',
+		'top-center': 'top-4 left-1/2 -translate-x-1/2',
+		'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+	}
+
+	if (!isVisible) return null
+
+	return (
+		<div
+			className={cn(
+				'fixed z-50 transform transition-all duration-300',
+				positionClasses[position],
+				isLeaving ? 'opacity-0 scale-95' : 'opacity-100 scale-100',
+				position.includes('top') && !isLeaving && 'animate-slide-down',
+				position.includes('bottom') && !isLeaving && 'animate-slide-up'
+			)}
+		>
+			<div
+				className={cn(
+					'flex items-start gap-3 p-4 rounded-lg border shadow-lg max-w-sm',
+					'backdrop-blur-sm bg-white/95',
+					variantClasses[type]
+				)}
+			>
+				<div className={cn('flex-shrink-0 mt-0.5', iconColors[type])}>
+					{icons[type]}
+				</div>
+				<div className='flex-1 min-w-0'>
+					<h4 className='font-semibold text-sm mb-1'>{title}</h4>
+					{description && <p className='text-sm opacity-90'>{description}</p>}
+					{action && (
+						<button
+							onClick={handleAction}
+							className='mt-2 text-sm font-medium underline underline-offset-2 hover:no-underline'
+						>
+							{action.label}
+						</button>
+					)}
+				</div>
+				<button
+					onClick={handleClose}
+					className='flex-shrink-0 p-1 rounded-full hover:bg-black/5 transition-colors'
+				>
+					<X className='w-4 h-4' />
+				</button>
+			</div>
+		</div>
+	)
+}

package/src/shared/ui/toast/ToastContainer.tsx

@@ -0,0 +1,19 @@
+import { Toast, type ToastProps } from './Toast.tsx'
+
+export function ToastContainer({
+	toasts,
+	onRemove,
+	position = 'top-right',
+}: {
+	toasts: ToastProps[]
+	onRemove: (id: string) => void
+	position?: ToastProps['position']
+}) {
+	return (
+		<>
+			{toasts.map(t => (
+				<Toast key={t.id} {...t} onClose={onRemove} position={position} />
+			))}
+		</>
+	)
+}

package/src/shared/ui/tooltip/Tooltip.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { cn } from '../../lib/utils.ts'
+
+type TooltipProps = {
+	content: React.ReactNode
+	children: React.ReactNode
+	position?: 'top' | 'bottom' | 'left' | 'right'
+	delay?: number
+	className?: string
+}
+
+export default function Tooltip({
+	content,
+	children,
+	position = 'top',
+	delay = 200,
+	className,
+}: TooltipProps) {
+	const positionClasses = {
+		top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+		bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+		left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+		right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+	}
+
+	const arrowClasses = {
+		top: 'left-1/2 -translate-x-1/2 top-full',
+		bottom: 'left-1/2 -translate-x-1/2 bottom-full',
+		left: 'top-1/2 -translate-y-1/2 left-full',
+		right: 'top-1/2 -translate-y-1/2 right-full',
+	}
+
+	return (
+		<div className='relative inline-block group'>
+			{children}
+
+			<div
+				className={cn(
+					'absolute z-50 whitespace-nowrap rounded-md bg-gray-800 text-white text-xs px-2 py-1 shadow-md dark:bg-gray-900',
+					'transition-all opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100',
+					'group-hover:delay-200 duration-200 ease-out',
+					positionClasses[position],
+					className
+				)}
+				style={{ transitionDelay: `${delay}ms` }}
+			>
+				{content}
+
+				<span
+					className={cn(
+						'absolute w-2 h-2 bg-gray-800 dark:bg-gray-900 rotate-45',
+						arrowClasses[position]
+					)}
+				/>
+			</div>
+		</div>
+	)
+}

package/src/styles/index.css

@@ -0,0 +1,36 @@
+@import './tailwind-config.css';
+
+* {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	font-family: system-ui, Avenir, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	box-sizing: border-box;
+}
+
+button {
+	cursor: pointer;
+}
+
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
+ul,
+ol {
+	list-style: none;
+	padding: 0;
+}
+
+input,
+textarea,
+button,
+select {
+	font: inherit;
+	outline: none;
+}