@mci-ui/mci-ui 0.0.94 → 0.0.96

package/dist/types/shared/lib/uploadLanguage.d.ts

@@ -3,6 +3,8 @@ export interface UploadLanguage {
     clickToUpload: string;
     or: string;
     dropHereTitle: string;
+    /** Kompakt upload tugmasi matni */
+    uploadFile: string;
     fileRequirements: (multiple: boolean, maxFiles: number, maxSize: number, accept: string) => string;
     selectedFiles: string;
     clearAll: string;

package/dist/types/shared/types/ui/empty.types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type MciEmptyLocale = 'uz' | 'ru';
+export interface MciEmptyProps {
+    className?: string;
+    image?: ReactNode;
+    imageClassName?: string;
+    imageSrc?: string;
+    locale?: MciEmptyLocale;
+    title?: string;
+    description?: string;
+}

package/dist/types/shared/types/ui/index.d.ts

@@ -4,6 +4,7 @@ export type { ButtonProps } from './button.types';
 export type { MciCheckProps } from './check.types';
 export type { CollapseProps } from './collapse.types';
 export type { DrawerProps } from './drawer.types';
+export type { MciEmptyLocale, MciEmptyProps } from './empty.types';
 export type { InputProps } from './input.types';
 export type { MciDocumentInputProps } from './identity-input.types';
 export type { MciLoaderProps } from './loader.types';
@@ -19,4 +20,4 @@ export type { TextareaProps } from './textarea.types';
 export type { ToastType, ToastProps } from './toast.types';
 export type { ToggleProps } from './toggle.types';
 export type { TooltipProps } from './tooltip.types';
-export type { FileInfo, MciUploadProps } from './upload.types';
+export type { FileInfo, MciUploadButtonProps, MciUploadFileValue, MciUploadProps } from './upload.types';

package/dist/types/shared/types/ui/tabs.types.d.ts

@@ -5,6 +5,7 @@ export type Tab = {
     icon?: ReactNode;
     content?: ReactNode;
     disabled?: boolean;
+    count?: number;
 };
 export type TabsVariant = 'filled' | 'outlined';
 export type TabsColor = 'blue' | 'yellow' | 'orange';
@@ -17,6 +18,7 @@ export type TabsProps = {
     position?: TabsPosition;
     darkMode?: boolean;
     className?: string;
+    width?: string | number;
     tabListClassName?: string;
     tabClassName?: string;
     contentClassName?: string;

package/dist/types/shared/types/ui/time-picker.types.d.ts

@@ -2,10 +2,12 @@ export type MciTimePickerValue = string | null;
 export type MciTimePickerMode = 'time' | 'duration';
 export type MciTimePickerVariant = 'blue' | 'yellow' | 'orange';
 export type MciTimePickerLocale = 'uz' | 'ru' | 'en';
+export type MciTimePickerDurationFormat = 'text' | 'dot';
 export interface MciTimePickerProps {
     value?: MciTimePickerValue;
     onChange?: (value: MciTimePickerValue) => void;
     mode?: MciTimePickerMode;
+    durationFormat?: MciTimePickerDurationFormat;
     variant?: MciTimePickerVariant;
     locale?: MciTimePickerLocale;
     placeholder?: string;

package/dist/types/shared/types/ui/upload.types.d.ts

@@ -1,11 +1,23 @@
 import { UploadLocale } from '../../lib/uploadLanguage';
+/** Form / API dan kelgan allaqachon yuklangan fayl */
+export interface MciUploadFileValue {
+    id?: string;
+    name: string;
+    url: string;
+    size?: number;
+}
 export interface FileInfo {
     id: string;
-    file: File;
+    name: string;
+    size: number;
+    file?: File;
+    /** Serverdagi fayl URL (initial value) */
+    url?: string;
     preview?: string;
     progress: number;
     status: 'uploading' | 'success' | 'error';
     error?: string;
+    isRemote?: boolean;
 }
 export interface MciUploadProps {
     multiple?: boolean;
@@ -18,6 +30,11 @@ export interface MciUploadProps {
     error?: string;
     className?: string;
     onFilesChange?: (files: File[]) => void;
+    /** Boshlang'ich yoki serverdan kelgan fayllar (forma edit) */
+    defaultValue?: MciUploadFileValue | MciUploadFileValue[];
+    /** Controlled: mavjud yuklangan fayllar ro'yxati */
+    value?: MciUploadFileValue | MciUploadFileValue[];
+    onValueChange?: (files: MciUploadFileValue[]) => void;
     onUpload?: (files: FileInfo[]) => Promise<void>;
     showPreview?: boolean;
     locale?: UploadLocale;
@@ -26,3 +43,10 @@ export interface MciUploadProps {
     variant?: 'yellow' | 'blue' | 'orange';
     darkMode?: boolean;
 }
+/** Kompakt «upload» tugmasi + fayl ro'yxati (drag-drop zonesiz) */
+export interface MciUploadButtonProps extends MciUploadProps {
+    /** Tugma matni (default: locale bo'yicha uploadFile) */
+    buttonText?: string;
+    /** true bo'lsa tugma konteyner kengligini egallaydi */
+    fullWidth?: boolean;
+}

package/dist/types/shared/ui/mciEmpty/MciEmpty.d.ts

@@ -0,0 +1,2 @@
+import { MciEmptyProps } from '../../types/ui/empty.types';
+export default function MciEmpty({ className, image, imageClassName, imageSrc, locale, title, description, }: MciEmptyProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/ui/mciTabs/FilledTabs.d.ts

@@ -1,2 +1,2 @@
 import { TabsProps } from '../../types/ui/tabs.types';
-export default function FilledTabs({ tabs, defaultTab, position, darkMode, className, tabListClassName, contentClassName, extra, onChange, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export default function FilledTabs({ tabs, defaultTab, position, darkMode, className, width, tabListClassName, contentClassName, extra, onChange, }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/ui/mciTabs/TabCountBadge.d.ts

@@ -0,0 +1,5 @@
+type TabCountBadgeProps = {
+    count?: number;
+};
+export default function TabCountBadge({ count }: TabCountBadgeProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/shared/ui/mciUpload/MciUploadButton.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { MciUploadButtonProps } from '../../types/ui/upload.types';
+declare const MciUploadButton: React.FC<MciUploadButtonProps>;
+export default MciUploadButton;

package/dist/types/shared/ui/mciUpload/MciUploadFileList.d.ts

@@ -0,0 +1,18 @@
+import { UploadLanguage } from '../../lib/uploadLanguage';
+import { FileInfo } from '../../types/ui/upload.types';
+import { UploadThemeTokens } from './mci-upload.theme';
+export interface MciUploadFileListProps {
+    files: FileInfo[];
+    theme: UploadThemeTokens;
+    t: UploadLanguage;
+    darkMode?: boolean;
+    showPreview?: boolean;
+    showFileTypeIcon?: boolean;
+    disabled?: boolean;
+    isUploading?: boolean;
+    onPreview: (fileInfo: FileInfo) => void;
+    onRemove: (id: string) => void;
+    onClearAll: () => void;
+    className?: string;
+}
+export declare function MciUploadFileList({ files, theme, t, darkMode, showPreview, showFileTypeIcon, disabled, isUploading, onPreview, onRemove, onClearAll, className, }: MciUploadFileListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/shared/ui/mciUpload/mci-upload.theme.d.ts

@@ -0,0 +1,101 @@
+export declare const UPLOAD_THEME: {
+    readonly blue: {
+        readonly dropBorder: "border-blue-200 hover:border-blue-300";
+        readonly dropBg: "bg-blue-50/40 hover:bg-blue-50/60";
+        readonly dropActive: "border-blue-600 bg-blue-50";
+        readonly iconWrap: "text-blue-600";
+        readonly title: "text-blue-600";
+        readonly hint: "text-slate-500";
+        readonly progressFill: "bg-blue-600";
+        readonly fileIconImg: "bg-blue-50 text-blue-600";
+        readonly fileIconDoc: "bg-green-50 text-green-600";
+        readonly buttonIconBg: "bg-blue-50";
+        readonly buttonIcon: "text-slate-600";
+        readonly buttonText: "text-slate-600";
+        readonly buttonBorder: "border-slate-200 hover:border-slate-300";
+        readonly buttonBg: "bg-white";
+    };
+    readonly yellow: {
+        readonly dropBorder: "border-yellow-300 hover:border-yellow-400";
+        readonly dropBg: "bg-yellow-50/60 hover:bg-yellow-100/60";
+        readonly dropActive: "border-yellow-500 bg-yellow-100/80";
+        readonly iconWrap: "text-yellow-600";
+        readonly title: "text-yellow-700";
+        readonly hint: "text-slate-500";
+        readonly progressFill: "bg-yellow-500";
+        readonly fileIconImg: "bg-blue-50 text-blue-600";
+        readonly fileIconDoc: "bg-green-50 text-green-600";
+        readonly buttonIconBg: "bg-yellow-50";
+        readonly buttonIcon: "text-slate-600";
+        readonly buttonText: "text-slate-600";
+        readonly buttonBorder: "border-slate-200 hover:border-slate-300";
+        readonly buttonBg: "bg-white";
+    };
+    readonly orange: {
+        readonly dropBorder: "border-orange-200 hover:border-orange-300";
+        readonly dropBg: "bg-orange-50/40 hover:bg-orange-50/60";
+        readonly dropActive: "border-orange-600 bg-orange-50";
+        readonly iconWrap: "text-orange-600";
+        readonly title: "text-orange-600";
+        readonly hint: "text-slate-500";
+        readonly progressFill: "bg-orange-600";
+        readonly fileIconImg: "bg-orange-50 text-orange-600";
+        readonly fileIconDoc: "bg-green-50 text-green-600";
+        readonly buttonIconBg: "bg-slate-100";
+        readonly buttonIcon: "text-slate-600";
+        readonly buttonText: "text-slate-600";
+        readonly buttonBorder: "border-slate-200 hover:border-slate-300";
+        readonly buttonBg: "bg-white";
+    };
+};
+export declare const UPLOAD_THEME_DARK: {
+    readonly blue: {
+        readonly dropBorder: "border-blue-800 hover:border-blue-700";
+        readonly dropBg: "bg-blue-950/40 hover:bg-blue-950/60";
+        readonly dropActive: "border-blue-500 bg-blue-950/60";
+        readonly iconWrap: "text-blue-400";
+        readonly title: "text-blue-400";
+        readonly hint: "text-slate-400";
+        readonly progressFill: "bg-blue-500";
+        readonly fileIconImg: "bg-blue-950 text-blue-400";
+        readonly fileIconDoc: "bg-green-950 text-green-400";
+        readonly buttonIconBg: "bg-slate-800";
+        readonly buttonIcon: "text-slate-300";
+        readonly buttonText: "text-slate-300";
+        readonly buttonBorder: "border-neutral-700 hover:border-neutral-600";
+        readonly buttonBg: "bg-neutral-900";
+    };
+    readonly yellow: {
+        readonly dropBorder: "border-yellow-700 hover:border-yellow-600";
+        readonly dropBg: "bg-yellow-950/45 hover:bg-yellow-950/65";
+        readonly dropActive: "border-yellow-500 bg-yellow-950/70";
+        readonly iconWrap: "text-yellow-300";
+        readonly title: "text-yellow-300";
+        readonly hint: "text-slate-400";
+        readonly progressFill: "bg-yellow-400";
+        readonly fileIconImg: "bg-blue-950 text-blue-400";
+        readonly fileIconDoc: "bg-green-950 text-green-400";
+        readonly buttonIconBg: "bg-slate-800";
+        readonly buttonIcon: "text-slate-300";
+        readonly buttonText: "text-slate-300";
+        readonly buttonBorder: "border-neutral-700 hover:border-neutral-600";
+        readonly buttonBg: "bg-neutral-900";
+    };
+    readonly orange: {
+        readonly dropBorder: "border-orange-800 hover:border-orange-700";
+        readonly dropBg: "bg-orange-950/40 hover:bg-orange-950/60";
+        readonly dropActive: "border-orange-600 bg-orange-950/60";
+        readonly iconWrap: "text-orange-400";
+        readonly title: "text-orange-400";
+        readonly hint: "text-slate-400";
+        readonly progressFill: "bg-orange-600";
+        readonly fileIconImg: "bg-orange-950 text-orange-400";
+        readonly fileIconDoc: "bg-green-950 text-green-400";
+        readonly buttonIconBg: "bg-slate-800";
+        readonly buttonIcon: "text-slate-300";
+        readonly buttonText: "text-slate-300";
+        readonly buttonBorder: "border-neutral-700 hover:border-neutral-600";
+        readonly buttonBg: "bg-neutral-900";
+    };
+};
+export type UploadThemeTokens = (typeof UPLOAD_THEME)[keyof typeof UPLOAD_THEME] | (typeof UPLOAD_THEME_DARK)[keyof typeof UPLOAD_THEME_DARK];

package/dist/types/shared/ui/mciUpload/mci-upload.utils.d.ts

@@ -1,3 +1,4 @@
+import { FileInfo, MciUploadFileValue } from '../../types/ui/upload.types';
 export declare const SECURE_ALLOWED_EXTENSIONS: readonly ["pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "jpg", "jpeg", "png", "bmp", "tiff"];
 export declare const BLOCKED_EXTENSIONS: readonly ["zip", "rar", "7z", "tar", "gz", "bz2", "xz", "tgz", "tbz2", "txz", "iso", "cab", "arj", "lz", "lzh", "z", "exe", "bat", "cmd", "com", "msi", "scr", "pif", "js", "mjs", "cjs", "jse", "vbs", "vbe", "wsf", "wsh", "ps1", "psm1", "sh", "bash", "zsh", "ksh", "csh", "fish"];
 type FileTypeValidationResult = {
@@ -13,4 +14,10 @@ export declare function formatFileSize(bytes: number): string;
 export declare function validateFileSize(file: File, maxSizeMb: number): boolean;
 export declare function validateFileType(file: File, accept: string): FileTypeValidationResult;
 export declare function createPreview(file: File): Promise<string>;
+export declare function isImageFileName(fileName: string): boolean;
+export declare function getFileIconByName(fileName: string): import("react/jsx-runtime").JSX.Element;
+export declare function normalizeUploadFileValues(value?: MciUploadFileValue | MciUploadFileValue[]): MciUploadFileValue[];
+export declare function createFileInfoFromValue(value: MciUploadFileValue): FileInfo;
+export declare function fileInfoToUploadValue(fileInfo: FileInfo): MciUploadFileValue;
+export declare function createFileInfoFromFile(file: File, preview: string, status: FileInfo['status'], progress: number): FileInfo;
 export {};

package/dist/types/shared/ui/mciUpload/useMciUpload.d.ts

@@ -0,0 +1,131 @@
+import { DragEvent } from 'react';
+import { UploadLocale } from '../../lib/uploadLanguage';
+import { FileInfo, MciUploadFileValue } from '../../types/ui/upload.types';
+export interface UseMciUploadOptions {
+    multiple?: boolean;
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    defaultValue?: MciUploadFileValue | MciUploadFileValue[];
+    value?: MciUploadFileValue | MciUploadFileValue[];
+    onFilesChange?: (files: File[]) => void;
+    onValueChange?: (files: MciUploadFileValue[]) => void;
+    onUpload?: (files: FileInfo[]) => Promise<void>;
+    locale?: UploadLocale;
+    variant?: 'yellow' | 'blue' | 'orange';
+    darkMode?: boolean;
+    customValidator?: (file: File) => string | null;
+}
+export declare function useMciUpload({ multiple, accept, maxSize, maxFiles, disabled, defaultValue, value, onFilesChange, onValueChange, onUpload, locale, variant, darkMode, customValidator, }: UseMciUploadOptions): {
+    files: FileInfo[];
+    isDragging: boolean;
+    isUploading: boolean;
+    fileInputRef: import('react').RefObject<HTMLInputElement | null>;
+    t: import('../../lib/uploadLanguage').UploadLanguage;
+    theme: {
+        readonly dropBorder: "border-blue-200 hover:border-blue-300";
+        readonly dropBg: "bg-blue-50/40 hover:bg-blue-50/60";
+        readonly dropActive: "border-blue-600 bg-blue-50";
+        readonly iconWrap: "text-blue-600";
+        readonly title: "text-blue-600";
+        readonly hint: "text-slate-500";
+        readonly progressFill: "bg-blue-600";
+        readonly fileIconImg: "bg-blue-50 text-blue-600";
+        readonly fileIconDoc: "bg-green-50 text-green-600";
+        readonly buttonIconBg: "bg-blue-50";
+        readonly buttonIcon: "text-slate-600";
+        readonly buttonText: "text-slate-600";
+        readonly buttonBorder: "border-slate-200 hover:border-slate-300";
+        readonly buttonBg: "bg-white";
+    } | {
+        readonly dropBorder: "border-yellow-300 hover:border-yellow-400";
+        readonly dropBg: "bg-yellow-50/60 hover:bg-yellow-100/60";
+        readonly dropActive: "border-yellow-500 bg-yellow-100/80";
+        readonly iconWrap: "text-yellow-600";
+        readonly title: "text-yellow-700";
+        readonly hint: "text-slate-500";
+        readonly progressFill: "bg-yellow-500";
+        readonly fileIconImg: "bg-blue-50 text-blue-600";
+        readonly fileIconDoc: "bg-green-50 text-green-600";
+        readonly buttonIconBg: "bg-yellow-50";
+        readonly buttonIcon: "text-slate-600";
+        readonly buttonText: "text-slate-600";
+        readonly buttonBorder: "border-slate-200 hover:border-slate-300";
+        readonly buttonBg: "bg-white";
+    } | {
+        readonly dropBorder: "border-orange-200 hover:border-orange-300";
+        readonly dropBg: "bg-orange-50/40 hover:bg-orange-50/60";
+        readonly dropActive: "border-orange-600 bg-orange-50";
+        readonly iconWrap: "text-orange-600";
+        readonly title: "text-orange-600";
+        readonly hint: "text-slate-500";
+        readonly progressFill: "bg-orange-600";
+        readonly fileIconImg: "bg-orange-50 text-orange-600";
+        readonly fileIconDoc: "bg-green-50 text-green-600";
+        readonly buttonIconBg: "bg-slate-100";
+        readonly buttonIcon: "text-slate-600";
+        readonly buttonText: "text-slate-600";
+        readonly buttonBorder: "border-slate-200 hover:border-slate-300";
+        readonly buttonBg: "bg-white";
+    } | {
+        readonly dropBorder: "border-blue-800 hover:border-blue-700";
+        readonly dropBg: "bg-blue-950/40 hover:bg-blue-950/60";
+        readonly dropActive: "border-blue-500 bg-blue-950/60";
+        readonly iconWrap: "text-blue-400";
+        readonly title: "text-blue-400";
+        readonly hint: "text-slate-400";
+        readonly progressFill: "bg-blue-500";
+        readonly fileIconImg: "bg-blue-950 text-blue-400";
+        readonly fileIconDoc: "bg-green-950 text-green-400";
+        readonly buttonIconBg: "bg-slate-800";
+        readonly buttonIcon: "text-slate-300";
+        readonly buttonText: "text-slate-300";
+        readonly buttonBorder: "border-neutral-700 hover:border-neutral-600";
+        readonly buttonBg: "bg-neutral-900";
+    } | {
+        readonly dropBorder: "border-yellow-700 hover:border-yellow-600";
+        readonly dropBg: "bg-yellow-950/45 hover:bg-yellow-950/65";
+        readonly dropActive: "border-yellow-500 bg-yellow-950/70";
+        readonly iconWrap: "text-yellow-300";
+        readonly title: "text-yellow-300";
+        readonly hint: "text-slate-400";
+        readonly progressFill: "bg-yellow-400";
+        readonly fileIconImg: "bg-blue-950 text-blue-400";
+        readonly fileIconDoc: "bg-green-950 text-green-400";
+        readonly buttonIconBg: "bg-slate-800";
+        readonly buttonIcon: "text-slate-300";
+        readonly buttonText: "text-slate-300";
+        readonly buttonBorder: "border-neutral-700 hover:border-neutral-600";
+        readonly buttonBg: "bg-neutral-900";
+    } | {
+        readonly dropBorder: "border-orange-800 hover:border-orange-700";
+        readonly dropBg: "bg-orange-950/40 hover:bg-orange-950/60";
+        readonly dropActive: "border-orange-600 bg-orange-950/60";
+        readonly iconWrap: "text-orange-400";
+        readonly title: "text-orange-400";
+        readonly hint: "text-slate-400";
+        readonly progressFill: "bg-orange-600";
+        readonly fileIconImg: "bg-orange-950 text-orange-400";
+        readonly fileIconDoc: "bg-green-950 text-green-400";
+        readonly buttonIconBg: "bg-slate-800";
+        readonly buttonIcon: "text-slate-300";
+        readonly buttonText: "text-slate-300";
+        readonly buttonBorder: "border-neutral-700 hover:border-neutral-600";
+        readonly buttonBg: "bg-neutral-900";
+    };
+    secureAccept: string;
+    allowedFormatsHint: string;
+    multiple: boolean;
+    maxFiles: number;
+    maxSize: number;
+    disabled: boolean;
+    handleDragOver: (e: DragEvent) => void;
+    handleDragLeave: (e: DragEvent) => void;
+    handleDrop: (e: DragEvent) => void;
+    handleFileInput: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleRemoveFile: (id: string) => void;
+    handleClearAll: () => void;
+    handleUploadClick: () => void;
+    openPreview: (fileInfo: FileInfo) => void;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mci-ui/mci-ui",
   "private": false,
-  "version": "0.0.94",
+  "version": "0.0.96",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",