@mci-ui/mci-ui 0.0.4 → 0.0.5

package/package.json

@@ -1,15 +1,14 @@
 {
 	"name": "@mci-ui/mci-ui",
 	"private": false,
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"type": "module",
 	"main": "dist/index.cjs",
 	"module": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"files": [
 		"dist",
-		"src",
-		"index.css"
+		"dist/*.css"
 	],
 	"scripts": {
 		"dev": "vite",

package/src/App.tsx

@@ -1,5 +0,0 @@
-function App() {
-	return <></>
-}
-
-export default App

package/src/index.ts

@@ -1,32 +0,0 @@
-import './styles/index.css'
-
-import Breadcrumb from './shared/ui/breadcrumb/Breadcrumb.tsx'
-import Button from './shared/ui/button/Button.tsx'
-import Collapse from './shared/ui/collapse/Collapse.tsx'
-import InputMain from './shared/ui/inputMain/InputMain.tsx'
-import MciTable from './shared/ui/mciTable/MciTable.tsx'
-import Modal from './shared/ui/modal/Modal.tsx'
-import Pagination from './shared/ui/pagination/Pagination.tsx'
-import Skeleton from './shared/ui/skeleton/Skeleton.tsx'
-import Tabs, { TabPanel } from './shared/ui/tabs/Tabs.tsx'
-import Tag from './shared/ui/tag/Tag.tsx'
-import Textarea from './shared/ui/textarea/Textarea.tsx'
-import { ToastContainer } from './shared/ui/toast/ToastContainer.tsx'
-import Tooltip from './shared/ui/tooltip/Tooltip.tsx'
-
-export {
-	Breadcrumb,
-	Button,
-	Collapse,
-	InputMain,
-	MciTable,
-	Modal,
-	Pagination,
-	Skeleton,
-	TabPanel,
-	Tabs,
-	Tag,
-	Textarea,
-	ToastContainer,
-	Tooltip,
-}

package/src/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import './styles/index.css'
-
-createRoot(document.getElementById('root')!).render(
-	<StrictMode>
-		<App />
-	</StrictMode>
-)

package/src/shared/hooks/toast.ts

@@ -1,32 +0,0 @@
-import { useState } from 'react'
-import type { ToastProps } from '../ui/toast/Toast.tsx'
-
-export function useToast() {
-	const [toasts, setToasts] = useState<ToastProps[]>([])
-
-	const toast = (props: Omit<ToastProps, 'id'>) => {
-		const id = Math.random().toString(36)
-		setToasts(prev => [...prev, { ...props, id }])
-		return id
-	}
-
-	const removeToast = (id: string) => {
-		setToasts(prev => prev.filter(t => t.id !== id))
-	}
-
-	return {
-		toasts,
-		toast,
-		success: (t: string, d?: string) =>
-			toast({ title: t, description: d, type: 'success' }),
-		error: (t: string, d?: string) =>
-			toast({ title: t, description: d, type: 'error' }),
-		warning: (t: string, d?: string) =>
-			toast({ title: t, description: d, type: 'warning' }),
-		info: (t: string, d?: string) =>
-			toast({ title: t, description: d, type: 'info' }),
-		loading: (t: string, d?: string) =>
-			toast({ title: t, description: d, type: 'loading', duration: Infinity }),
-		removeToast,
-	}
-}

package/src/shared/lib/utils.ts

@@ -1,37 +0,0 @@
-import { clsx, type ClassValue } from 'clsx'
-import type { RefObject } from 'react'
-import { twMerge } from 'tailwind-merge'
-
-/**
- * Tailwind classlarni merge qilish uchun utility
- */
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs))
-}
-
-/**
- * ESC tugmasini bosishni handle qilish
- */
-export function useEscapeKey(callback: () => void) {
-	const handleEscape = (e: KeyboardEvent) => {
-		if (e.key === 'Escape') callback()
-	}
-
-	return { handleEscape }
-}
-
-/**
- * Click outside handle qilish
- */
-export function useClickOutside(
-	ref: RefObject<HTMLDivElement>,
-	callback: () => void
-) {
-	const handleClick = (e: MouseEvent) => {
-		if (ref.current && !ref.current.contains(e.target as Node)) {
-			callback()
-		}
-	}
-
-	return { handleClick }
-}

package/src/shared/types/MciTableType.ts

@@ -1,10 +0,0 @@
-import React from "react";
-
-export type MciTableColumn<T> = {
-    key: keyof T
-    title: string
-    sortable?: boolean
-    align?: 'left' | 'center' | 'right'
-    width?: string | number
-    render?: (value: T[keyof T], row: T) => React.ReactNode
-}

package/src/shared/ui/breadcrumb/Breadcrumb.tsx

@@ -1,68 +0,0 @@
-import { ChevronRight } from 'lucide-react'
-import React from 'react'
-import { cn } from '../../lib/utils.ts'
-
-type BreadcrumbItem = {
-	label: string
-	href?: string
-	onClick?: () => void
-}
-
-type BreadcrumbProps = {
-	items: BreadcrumbItem[]
-	className?: string
-	separatorIcon?: React.ReactNode
-}
-
-export default function Breadcrumb({
-	items,
-	className,
-	separatorIcon = (
-		<ChevronRight className='w-4 h-4 text-gray-400 dark:text-gray-500' />
-	),
-}: BreadcrumbProps) {
-	return (
-		<nav
-			className={cn(
-				'flex items-center space-x-2 text-sm font-medium text-gray-600 dark:text-gray-300',
-				className
-			)}
-			aria-label='Breadcrumb'
-		>
-			{items.map((item, index) => {
-				const isLast = index === items.length - 1
-
-				return (
-					<div key={index} className='flex items-center'>
-						{item.href ? (
-							<a
-								href={item.href}
-								onClick={item.onClick}
-								className={cn(
-									'hover:text-primary-600 dark:hover:text-primary-400 transition-colors',
-									isLast && 'text-primary-600 dark:text-primary-400'
-								)}
-							>
-								{item.label}
-							</a>
-						) : (
-							<span
-								className={cn(
-									isLast
-										? 'text-primary-600 dark:text-primary-400'
-										: 'text-gray-500 dark:text-gray-400'
-								)}
-							>
-								{item.label}
-							</span>
-						)}
-
-						{!isLast && (
-							<span className='mx-2 flex items-center'>{separatorIcon}</span>
-						)}
-					</div>
-				)
-			})}
-		</nav>
-	)
-}

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

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

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

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