@mci-ui/mci-ui 0.0.6 → 0.0.8

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

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

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

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

@@ -1,36 +0,0 @@
-@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;
-}

package/src/styles/tailwind-config.css

@@ -1,294 +0,0 @@
-@import 'tailwindcss';
-
-@variant dark (&:where(.dark, .dark *));
-
-@theme {
-    /* Main colors */
-    --color-secondary-base: #d4af37;
-    --color-secondary-50: #faf6ea;
-    --color-secondary-100: #f5edd5;
-    --color-secondary-200: #fdebd0;
-    --color-secondary-300: #e1c981;
-    --color-secondary-400: #d7b757;
-    --color-secondary-500: #d4af37;
-    --color-secondary-600: #b8951e;
-    --color-secondary-700: #8a7016;
-    --color-secondary-800: #5c4b0f;
-    --color-secondary-900: #2e2607;
-
-    /*  Green colors */
-    --color-accent-base: #00a651;
-    --color-accent-50: #e6f7ee;
-    --color-accent-100: #ccefdd;
-    --color-accent-200: #99dfbb;
-    --color-accent-300: #66cf99;
-    --color-accent-400: #33bf77;
-    --color-accent-500: #00a651;
-    --color-accent-600: #008541;
-    --color-accent-700: #006431;
-    --color-accent-800: #004320;
-    --color-accent-900: #002110;
-
-    /* Error colors */
-    --color-error-50: #fef2f2;
-    --color-error-100: #fee2e2;
-    --color-error-200: #fecaca;
-    --color-error-300: #fca5a5;
-    --color-error-400: #f87171;
-    --color-error-500: #ef4444;
-    --color-error-600: #dc2626;
-    --color-error-700: #b91c1c;
-    --color-error-800: #991b1b;
-    --color-error-900: #7f1d1d;
-
-    /* Success colors */
-    --color-success-50: #f0fdf4;
-    --color-success-100: #dcfce7;
-    --color-success-200: #bbf7d0;
-    --color-success-300: #86efac;
-    --color-success-400: #4ade80;
-    --color-success-500: #22c55e;
-    --color-success-600: #16a34a;
-    --color-success-700: #15803d;
-    --color-success-800: #166534;
-    --color-success-900: #14532d;
-
-    /* Info colors */
-    --color-info-50: #eff6ff;
-    --color-info-100: #dbeafe;
-    --color-info-200: #bfdbfe;
-    --color-info-300: #93c5fd;
-    --color-info-400: #60a5fa;
-    --color-info-500: #3b82f6;
-    --color-info-600: #2563eb;
-    --color-info-700: #1d4ed8;
-    --color-info-800: #1e40af;
-    --color-info-900: #1e3a8a;
-
-    /* Sarlavhalar */
-    --text-display-2xl: 72px;
-    --text-display-2xl--line-height: 90px;
-    --text-display-2xl--font-weight: 700;
-    --text-display-2xl--letter-spacing: -0.02em;
-
-    --text-display-xl: 60px;
-    --text-display-xl--line-height: 72px;
-    --text-display-xl--font-weight: 700;
-    --text-display-xl--letter-spacing: -0.02em;
-
-    --text-display-lg: 48px;
-    --text-display-lg--line-height: 60px;
-    --text-display-lg--font-weight: 700;
-    --text-display-lg--letter-spacing: -0.01em;
-
-    --text-display-md: 36px;
-    --text-display-md--line-height: 44px;
-    --text-display-md--font-weight: 700;
-    --text-display-md--letter-spacing: -0.01em;
-
-    --text-display-sm: 30px;
-    --text-display-sm--line-height: 38px;
-    --text-display-sm--font-weight: 700;
-
-    --text-H1: 48px;
-    --text-H1--line-height: 60px;
-    --text-H1--font-weight: 700;
-    --text-H1--letter-spacing: -0.01em;
-
-    --text-H2: 40px;
-    --text-H2--line-height: 50px;
-    --text-H2--font-weight: 700;
-    --text-H2--letter-spacing: -0.01em;
-
-    --text-H3: 32px;
-    --text-H3--line-height: 40px;
-    --text-H3--font-weight: 700;
-
-    --text-H4: 24px;
-    --text-H4--line-height: 32px;
-    --text-H4--font-weight: 700;
-
-    --text-H5: 20px;
-    --text-H5--line-height: 28px;
-    --text-H5--font-weight: 600;
-
-    --text-H6: 18px;
-    --text-H6--line-height: 26px;
-    --text-H6--font-weight: 600;
-
-    /* Animatsiyalar */
-    --animate-fade-in: fadeIn 0.5s ease-in-out;
-    --animate-fade-out: fadeOut 0.5s ease-in-out;
-    --animate-slide-up: slideUp 0.5s ease-out;
-    --animate-slide-down: slideDown 0.5s ease-out;
-    --animate-slide-left: slideLeft 0.5s ease-out;
-    --animate-slide-right: slideRight 0.5s ease-out;
-    --animate-scale-up: scaleUp 0.3s ease-out;
-    --animate-scale-down: scaleDown 0.3s ease-out;
-    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    --animate-spin: spin 0.3s linear infinite;
-}
-
-/* Animatsiya keyframes */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes fadeOut {
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0;
-    }
-}
-
-@keyframes slideUp {
-    from {
-        transform: translateY(20px);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-@keyframes slideDown {
-    from {
-        transform: translateY(-20px);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-@keyframes slideLeft {
-    from {
-        transform: translateX(20px);
-        opacity: 0;
-    }
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
-}
-
-@keyframes slideRight {
-    from {
-        transform: translateX(-20px);
-        opacity: 0;
-    }
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
-}
-
-@keyframes scaleUp {
-    from {
-        transform: scale(0.95);
-        opacity: 0;
-    }
-    to {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-@keyframes scaleDown {
-    from {
-        transform: scale(1.05);
-        opacity: 0;
-    }
-    to {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-@keyframes pulse {
-    0%,
-    100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.5;
-    }
-}
-
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes smooth-shimmer {
-    0% {
-        transform: translateX(-100%);
-    }
-    100% {
-        transform: translateX(100%);
-    }
-}
-
-@keyframes float {
-    0%, 100% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(-6px);
-    }
-}
-
-@keyframes fadeUp {
-    from {
-        opacity: 0;
-        transform: translateY(8px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-
-.shimmer-mask {
-    background: linear-gradient(
-            90deg,
-            transparent 0%,
-            rgba(255, 255, 255, 0.35) 50%,
-            transparent 100%
-    );
-    animation: smooth-shimmer 1.8s ease-in-out infinite;
-    will-change: transform;
-}
-
-/* Modal Fade In / Out */
-.modal-fade-in {
-    animation: fadeIn 0.3s ease-in-out forwards;
-}
-
-.modal-fade-out {
-    animation: fadeOut 0.3s ease-in-out forwards;
-}
-
-/* Modal Scale */
-.modal-scale-in {
-    animation: scaleUp 0.3s ease-out forwards;
-}
-
-/* Close icon aylanish animatsiyasi */
-.rotate-icon {
-    animation: spin 0.3s ease-in-out;
-}