vibrant-tool 0.1.1

package/README.md

@@ -0,0 +1,36 @@
+## Next.js setup in consumer app
+
+Update `next.config.ts`:
+
+```ts
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  transpilePackages: ["vibrant-tool"]
+};
+
+export default nextConfig;
+```
+
+Import global styles in your app layout (`app/layout.tsx`):
+
+```ts
+import "vibrant-tool/styles.css";
+```
+
+Use the editor component:
+
+```tsx
+"use client";
+
+import { VibrantEditor } from "vibrant-tool";
+
+export default function Page() {
+  return <VibrantEditor />;
+}
+```
+
+## Exported API
+
+- `VibrantEditor`
+- `default` export: `VibrantEditor`

package/dist/App.d.ts

@@ -0,0 +1 @@
+export default function App(): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as VibrantTool } from './App';

package/dist/lib/config.d.ts

@@ -0,0 +1,2 @@
+export declare const TOUR_STORAGE_KEY = "app_tour_state";
+export declare const TOUR_VERSION = 1;

package/dist/lib/hooks/applyImagePreset.d.ts

@@ -0,0 +1,3 @@
+import { Canvas } from 'fabric';
+import { PresetType } from '../utils/imagePresets';
+export declare function applyImagePreset(canvas: Canvas | null, preset: PresetType): void;

package/dist/lib/hooks/fitimagetopage.d.ts

@@ -0,0 +1,2 @@
+import * as fabric from "fabric";
+export declare function fitImageToPage(canvas: fabric.Canvas): void;

package/dist/lib/hooks/qrUtils.d.ts

@@ -0,0 +1,2 @@
+import { ExtendedFabricObject } from '../types/fabric.types';
+export declare function updateQRCodeColors(qrObj: ExtendedFabricObject, darkColor: string, lightColor: string): Promise<void>;

package/dist/lib/hooks/useBlackEffect.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function useBlackEffect(canvas: Canvas | null, active: boolean): void;

package/dist/lib/hooks/useBlurEffect.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function useBlurEffect(canvas: Canvas | null, active: boolean): void;

package/dist/lib/hooks/useBorderEffect.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function useBorderEffect(canvas: Canvas | null, active: boolean): void;

package/dist/lib/hooks/useBrightnessEffect.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function useBrightnessEffect(canvas: Canvas | null, enabled: boolean): void;

package/dist/lib/hooks/useCanvasZoom.d.ts

@@ -0,0 +1,16 @@
+import { Canvas } from 'fabric';
+export declare const MIN_ZOOM = 0.09;
+export declare const MAX_ZOOM = 5;
+export declare function clamp(v: number, lo: number, hi: number): number;
+export declare const toSlider: (z: number) => number;
+export declare const fromSlider: (v: number) => number;
+export interface CanvasZoomAPI {
+    zoom: number;
+    atMin: boolean;
+    atMax: boolean;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    zoomReset: () => void;
+    zoomTo: (value: number) => void;
+}
+export declare function useCanvasZoom(canvas: Canvas | null): CanvasZoomAPI;

package/dist/lib/hooks/useContrastEffect.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function useContrastEffect(canvas: Canvas | null, active: boolean): void;

package/dist/lib/hooks/useCornerRadiusEffect.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function useCornerRadiusEffect(canvas: Canvas | null, active: boolean): void;

package/dist/lib/hooks/useDraggable.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const useDraggable: (onDrag: (x: number, y: number) => void, onEnd?: () => void) => (e: React.MouseEvent) => void;

package/dist/lib/hooks/useFabricDrawing.d.ts

@@ -0,0 +1 @@
+export declare function useFabricDrawing(): void;

package/dist/lib/hooks/useFabricShadow.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function useFabricShadowEffect(canvas: Canvas | null, active: boolean): void;

package/dist/lib/hooks/useKeyboardEvents.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function useKeyboardEvents(canvas: Canvas | null): void;

package/dist/lib/hooks/useSaturationEffect.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function useSaturationEffect(canvas: Canvas | null, active: boolean): void;

package/dist/lib/hooks/useShadowEffect.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function useShadowEffect(canvas: Canvas | null, active: boolean): void;

package/dist/lib/hooks/useSocialAuth.d.ts

@@ -0,0 +1,16 @@
+declare global {
+    interface Window {
+        gapi: any;
+        google: any;
+        Dropbox: any;
+        FB: any;
+    }
+}
+export declare function useSocialAuth({ onImageSelect }: {
+    onImageSelect: (url: string) => void;
+}): {
+    handleGoogleAuth: (type: "googledrives" | "googlephotos") => void;
+    handleDropboxAuth: () => void;
+    handleFacebookAuth: () => void;
+    handleInstagramAuth: () => void;
+};

package/dist/lib/hooks/useTemperatureEffect.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function useTemperatureEffect(canvas: Canvas | null, active: boolean): void;

package/dist/lib/hooks/useVibranceEffect.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function useVibranceEffect(canvas: Canvas | null, active: boolean): void;

package/dist/lib/hooks/useWhiteEffect.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function useWhiteEffect(canvas: Canvas | null, active: boolean): void;

package/dist/lib/services/api.d.ts

@@ -0,0 +1,12 @@
+export type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+export interface ApiError {
+    status: number;
+    message: string;
+}
+interface ApiFetchOptions<TBody> {
+    method?: HttpMethod;
+    body?: TBody;
+    headers?: HeadersInit;
+}
+export declare function apiFetch<TResponse, TBody = unknown>(endpoint: string, options?: ApiFetchOptions<TBody>): Promise<TResponse>;
+export {};

package/dist/lib/services/crop-image.service.d.ts

@@ -0,0 +1,23 @@
+import { Canvas, Image as FabricImage } from 'fabric';
+declare class CropService {
+    private canvas;
+    private targetImage;
+    private fullImage;
+    private darkOverlay;
+    private focusedImage;
+    private cropZone;
+    private onEnd;
+    init(canvas: Canvas): void;
+    start(image: FabricImage, onEnd?: () => void): Promise<void>;
+    private onInteraction;
+    private constrain;
+    private updateClipPath;
+    apply(): void;
+    cancel(): void;
+    private cleanup;
+}
+export declare const cropService: CropService;
+export declare const startCrop: (canvas: Canvas, img: FabricImage) => void;
+export declare const applyCrop: (canvas: Canvas) => void;
+export declare const cancelCrop: (canvas: Canvas) => void;
+export {};

package/dist/lib/services/font.service.d.ts

@@ -0,0 +1,4 @@
+import { FontItemResponse, FontType } from '../types/font.types';
+export declare const FontService: {
+    getAll(data: FontType): Promise<FontItemResponse>;
+};

package/dist/lib/services/shape.service.d.ts

@@ -0,0 +1,9 @@
+import { ElementItem, ExternalShapeType, ShapeType } from '../types/shape.types';
+type NormalizedShapeResponse = {
+    items: ElementItem[];
+};
+export declare const ShapeService: {
+    getAll(data: ShapeType): Promise<NormalizedShapeResponse>;
+    getAllExternal(data: ExternalShapeType): Promise<NormalizedShapeResponse>;
+};
+export {};

package/dist/lib/types/barcode.types.d.ts

@@ -0,0 +1,12 @@
+export type BarcodeGroup = {
+    label: string;
+    options: Array<{
+        value: string;
+        label: string;
+    } | [string, string]>;
+};
+export declare const BARCODE_TYPES: {
+    label: string;
+    options: string[][];
+}[];
+export declare const COMPOSITE_TYPES: Set<string>;

package/dist/lib/types/color.types.d.ts

@@ -0,0 +1,11 @@
+export interface CMYKColor {
+    c: number;
+    m: number;
+    y: number;
+    k: number;
+}
+export interface HSVColor {
+    h: number;
+    s: number;
+    v: number;
+}

package/dist/lib/types/fabric.types.d.ts

@@ -0,0 +1,38 @@
+import { Canvas, FabricObject } from 'fabric';
+export interface AppFabricObject extends FabricObject {
+    objectId?: string;
+    objectName?: string;
+}
+export type CanvasJSON = ReturnType<Canvas["toJSON"]>;
+export type SavedDesign = {
+    id: string;
+    name: string;
+    thumbnail: string;
+    canvasJSON: CanvasJSON;
+    updatedAt: number;
+};
+export interface ExtendedFabricObject extends FabricObject {
+    __isQR?: boolean;
+    __qrValue?: string;
+    __qrDataUrl?: string;
+    __qrDark?: string;
+    __qrLight?: string;
+    __barcodeBackground?: string;
+    __barcodeForeground?: string;
+    __isVideo?: boolean;
+    videoEl?: HTMLVideoElement;
+    trimStart?: number;
+    trimEnd?: number;
+}
+export type TemplateJSON = {
+    version?: string;
+    objects?: unknown[];
+    background?: unknown;
+    [k: string]: unknown;
+};
+export interface VideoFabricObject extends FabricObject {
+    __isVideo?: true;
+    videoEl: HTMLVideoElement;
+    trimStart: number;
+    trimEnd: number;
+}

package/dist/lib/types/font.types.d.ts

@@ -0,0 +1,28 @@
+export interface FontType {
+    pagination: boolean;
+    pageNumber: number | 1;
+    pageSize: number | 30;
+    IsAdmin: boolean;
+}
+export interface FontItem {
+    _id: string;
+    IsActive: boolean;
+    chieldFonts: {
+        IsActive: boolean;
+        fontFile: string;
+        fontImage: string;
+        fontName: string;
+        _id: string;
+    }[];
+    fontImage: string;
+    fontFile: string;
+    fontStyle: string;
+    fontName: string;
+    fontWeight: string;
+}
+export interface FontItemResponse {
+    message: {
+        data: FontItem[];
+    };
+    status: boolean;
+}

package/dist/lib/types/shape.types.d.ts

@@ -0,0 +1,36 @@
+export interface ShapeType {
+    type?: string;
+    category?: string | null;
+    pageNumber?: number | 1;
+    pagination?: boolean;
+    id?: string;
+    statusKey?: string;
+    statusValue?: string;
+}
+export interface ElementItem {
+    _id: string;
+    IsActive: boolean;
+    category: string;
+    image: string;
+    largeImage: string;
+    tags: string[];
+    imageType?: string;
+    data?: string;
+}
+export interface ElementItemResponse {
+    message: {
+        data: ElementItem[];
+    };
+    status: boolean;
+}
+export interface ExternalItemResponse {
+    data: ElementItem[];
+    status: boolean;
+}
+export interface ExternalShapeType {
+    query?: string | null;
+    keyType: string | null;
+    pageNumber: number | 1;
+    pageSize: number | 30;
+    isVector: boolean;
+}

package/dist/lib/utils/background-utils.d.ts

@@ -0,0 +1,4 @@
+import { FabricImage, FabricObject } from 'fabric';
+export declare const isImage: (obj: FabricObject) => obj is FabricImage;
+export declare function addBackgroundImage(url: string): Promise<void>;
+export declare function addBackgroundColor(color: string): Promise<void>;

package/dist/lib/utils/barcode-utils.d.ts

@@ -0,0 +1,6 @@
+export declare const generateBarcodeSVG: (text: string, type?: string, options?: {
+    background?: string;
+    color?: string;
+    width?: number;
+    height?: number;
+}) => string;

package/dist/lib/utils/canvas-handler.d.ts

@@ -0,0 +1,78 @@
+import { Canvas } from 'fabric';
+/**
+ * Configuration for handling large canvases efficiently
+ */
+export interface VCanvasConfig {
+    printWidth: number;
+    printHeight: number;
+    printDPI: number;
+    displayScale?: number;
+    maxDimension?: number;
+}
+/**
+ * Calculate optimal display scale for large canvases
+ */
+export declare function calculateOptimalScale(width: number, height: number, maxDimension?: number): number;
+/**
+ * Get actual pixel dimensions for print
+ */
+export declare function getPrintDimensions(config: VCanvasConfig): {
+    width: number;
+    height: number;
+};
+/**
+ * Get display dimensions (scaled down for viewport)
+ */
+export declare function getDisplayDimensions(config: VCanvasConfig): {
+    width: number;
+    height: number;
+    scale: number;
+};
+/**
+ * Configure canvas for large artwork with performance optimizations
+ */
+export declare function configureLargeCanvas(canvas: Canvas, config: VCanvasConfig): {
+    displayWidth: number;
+    displayHeight: number;
+    printWidth: number;
+    printHeight: number;
+    scale: number;
+};
+/**
+ * Export canvas at full print resolution
+ */
+export declare function exportAtPrintResolution(canvas: Canvas, format?: "png" | "jpeg", quality?: number): string;
+/**
+ * Best practices for large canvas performance
+ */
+export declare const LARGE_CANVAS_TIPS: {
+    SCALE_RECOMMENDATIONS: {
+        small: {
+            maxInches: number;
+            scale: number;
+        };
+        medium: {
+            maxInches: number;
+            scale: number;
+        };
+        large: {
+            maxInches: number;
+            scale: number;
+        };
+        xlarge: {
+            maxInches: number;
+            scale: number;
+        };
+    };
+    BROWSER_LIMITS: {
+        chrome: number;
+        firefox: number;
+        safari: number;
+        edge: number;
+    };
+    TIPS: string[];
+};
+/**
+ * Get recommended scale based on print size
+ */
+export declare function getRecommendedScale(widthInches: number, heightInches: number): number;

package/dist/lib/utils/canvas-setup.d.ts

@@ -0,0 +1,29 @@
+import { Canvas, Rect } from 'fabric';
+import { VCanvasConfig } from './canvas-handler';
+export declare function initializeCanvas(canvasElement: HTMLCanvasElement, containerElement: HTMLDivElement): Canvas;
+export declare function createInitialWorkarea(canvas: Canvas): Rect<{
+    width: number;
+    height: number;
+    fill: string;
+    selectable: false;
+    evented: false;
+    name: string;
+}, import('fabric').SerializedRectProps, import('fabric').ObjectEvents>;
+export declare function createLargeWorkarea(canvas: Canvas, config: VCanvasConfig): Rect<{
+    width: number;
+    height: number;
+    fill: string;
+    selectable: false;
+    evented: false;
+    name: string;
+}, import('fabric').SerializedRectProps, import('fabric').ObjectEvents>;
+export declare function createWorkarea(canvas: Canvas, container: HTMLDivElement): Rect<{
+    width: number;
+    height: number;
+    fill: string;
+    selectable: false;
+    evented: false;
+    name: string;
+    scaleX: number;
+    scaleY: number;
+}, import('fabric').SerializedRectProps, import('fabric').ObjectEvents>;

package/dist/lib/utils/color-conversions.utils.d.ts

@@ -0,0 +1,19 @@
+import { CMYKColor, HSVColor } from '../types/color.types';
+export declare function hsvToRgb(h: number, s: number, v: number): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function rgbToHsv(r: number, g: number, b: number): HSVColor;
+export declare function rgbToCmyk(r: number, g: number, b: number): CMYKColor;
+export declare function cmykToRgb(c: number, m: number, y: number, k: number): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function rgbToHex(r: number, g: number, b: number): string;
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};

package/dist/lib/utils/custom-controls.d.ts

@@ -0,0 +1,5 @@
+import { Control, FabricObject } from 'fabric';
+export declare function renderRotateIcon(ctx: CanvasRenderingContext2D, left: number, top: number, fabricObject: FabricObject): void;
+export declare function createRotateControl(): Control;
+export declare function configureObjectControls(obj: FabricObject): void;
+export declare function initializeRotateImage(): void;

package/dist/lib/utils/design-storage-utils.d.ts

@@ -0,0 +1,4 @@
+import { SavedDesign } from '../types/fabric.types';
+export declare function getDesigns(): SavedDesign[];
+export declare function saveDesign(design: SavedDesign): void;
+export declare function deleteDesign(id: string): void;

package/dist/lib/utils/downloadCanvas.d.ts

@@ -0,0 +1,7 @@
+import { Canvas } from 'fabric';
+export declare function downloadCanvasWorkarea(canvas: Canvas, type: "png" | "jpeg" | "pdf" | "svg" | "json", scale?: number, pages?: Record<string, {
+    history: any[];
+}>, currentPageSide?: string, dpi?: number): Promise<void>;
+export declare function exportFullDesignToPDF(canvas: Canvas, pages: Record<string, {
+    history: any[];
+}>, currentPageSide: string): Promise<void>;

package/dist/lib/utils/driver-tour.d.ts

@@ -0,0 +1,2 @@
+import { DriveStep } from 'driver.js';
+export declare const getTourSteps: (isMobile: boolean) => DriveStep[];

package/dist/lib/utils/event-handlers.d.ts

@@ -0,0 +1,10 @@
+import { Canvas, FabricObject } from 'fabric';
+export declare function setupHistoryRecording(canvas: Canvas): () => void;
+export declare function setupDoublClickCrop(canvas: Canvas): () => void;
+export declare function setupSelectionHandlers(canvas: Canvas, setSelection: (objects: FabricObject[]) => void, clearSelection: () => void): () => void;
+export declare function setupObjectAddedHandler(canvas: Canvas): () => void;
+export declare function setupBorderSync(canvas: Canvas): () => void;
+export declare function setupToolbarPositioning(canvas: Canvas, setToolbarPos: (pos: {
+    x: number;
+    y: number;
+} | null) => void): () => void;

package/dist/lib/utils/fabric-helper.d.ts

@@ -0,0 +1,2 @@
+import { Canvas } from 'fabric';
+export declare function loadPageToCanvas(canvas: Canvas, json: any): Promise<void>;

package/dist/lib/utils/gradient-converter-utils.d.ts

@@ -0,0 +1,8 @@
+import { Gradient } from 'fabric';
+interface TargetSize {
+    width: number;
+    height: number;
+}
+type FabricGradient = Gradient<"linear"> | Gradient<"radial">;
+export declare function cssGradientToFabric(css: string, target: TargetSize): FabricGradient | null;
+export {};

package/dist/lib/utils/history-recorder.d.ts

@@ -0,0 +1 @@
+export declare function recordHistory(e: any): void;

package/dist/lib/utils/icon-effects-utils.d.ts

@@ -0,0 +1,4 @@
+import { Canvas, FabricObject } from 'fabric';
+import { ExtendedFabricObject } from '../types/fabric.types';
+export declare function getActiveEffectTarget(canvas: Canvas): ExtendedFabricObject | null;
+export declare function applyToEffectTarget(target: FabricObject, cb: (obj: FabricObject) => void): void;

package/dist/lib/utils/image-utils.d.ts

@@ -0,0 +1,3 @@
+import { FabricImage, FabricObject } from 'fabric';
+export declare const isImage: (obj: FabricObject) => obj is FabricImage;
+export declare function addImageToCanvas(url: string): Promise<void>;

package/dist/lib/utils/imagePresets.d.ts

@@ -0,0 +1,2 @@
+export type PresetType = "natural" | "grayscale" | "sepia" | "cold" | "warm";
+export declare function getPresetFilters(preset: PresetType): any[];

package/dist/lib/utils/overlay-manager.d.ts

@@ -0,0 +1,3 @@
+import { Canvas, Rect } from 'fabric';
+export declare function createOverlays(canvas: Canvas, workarea: Rect): void;
+export declare function bringOverlaysToFront(canvas: Canvas): void;

package/dist/lib/utils/page-manager.d.ts

@@ -0,0 +1,3 @@
+import { Canvas } from 'fabric';
+export type PageSide = "front" | "back";
+export declare function switchCanvasPage(canvas: Canvas, currentPage: PageSide, targetPage: PageSide, pageJSON: Record<PageSide, any>, clearSelection: () => void, containerRef: React.MutableRefObject<HTMLDivElement | null>): Promise<void>;

package/dist/lib/utils/pan-mode.d.ts

@@ -0,0 +1,10 @@
+import { Canvas } from 'fabric';
+export interface PanHandlers {
+    down: (opt: any) => void;
+    move: (opt: any) => void;
+    up: () => void;
+    out: () => void;
+}
+export declare function enablePanMode(canvas: Canvas): PanHandlers;
+export declare function disablePanMode(canvas: Canvas): void;
+export declare function removePanHandlers(canvas: Canvas, handlers: PanHandlers | null): void;

package/dist/lib/utils/qr-utils.d.ts

@@ -0,0 +1,4 @@
+import { FabricObject } from 'fabric';
+import { ExtendedFabricObject } from '../types/fabric.types';
+export declare const isQRCode: (obj?: FabricObject | null) => obj is ExtendedFabricObject;
+export declare function generateQRSVG(value: string, dark: string, light: string): Promise<string>;

package/dist/lib/utils/svg-utils.d.ts

@@ -0,0 +1,8 @@
+import { FabricObject } from 'fabric';
+export declare function addSVGToCanvas(type: string | undefined, url: string): Promise<void>;
+export declare function renderSVGStringToCanvas(type: string | undefined, svg: string, options?: {
+    background?: string;
+    color?: string;
+}): Promise<FabricObject<Partial<import('fabric').FabricObjectProps>, import('fabric').SerializedObjectProps, import('fabric').ObjectEvents> | undefined>;
+export declare function extractSVGColors(svg: FabricObject): string[];
+export declare function replaceSVGColor(svg: FabricObject, fromColor: string, toColor: string): void;

package/dist/lib/utils/text-utils.d.ts

@@ -0,0 +1,4 @@
+import { Textbox, FabricObject } from 'fabric';
+export declare const isTextbox: (obj: FabricObject) => obj is Textbox;
+export declare function addTextToCanvas(fontSize: number, width: number, textName: string): Promise<void>;
+export declare function addTextTemplate(id: string): Promise<void>;

package/dist/modules/canvas/index.d.ts

@@ -0,0 +1 @@
+export default function Workspace(): import("react/jsx-runtime").JSX.Element;

package/dist/modules/components/all-elements/index.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+import { ElementItem } from '../../../lib/types/shape.types';
+export default function AllElements({ elements, onBack, scrollRef, onSearch }: {
+    elements: ElementItem[];
+    onBack?: () => void;
+    scrollRef: RefObject<HTMLDivElement | null>;
+    onSearch: (value: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/modules/components/alpha-slider/index.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+interface Props {
+    alpha: number;
+    color: string;
+    refEl: RefObject<HTMLDivElement | null>;
+    setAlpha: (v: number) => void;
+    canvas: any;
+    targets: any[];
+    saveState: () => void;
+}
+export default function AlphaSlider({ alpha, color, refEl, setAlpha, canvas, targets, saveState, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modules/components/cmyk-inputs/index.d.ts

@@ -0,0 +1,12 @@
+import { CMYKColor } from '../../../lib/types/color.types';
+interface Props {
+    cmyk: CMYKColor;
+    alpha: number;
+    setAlpha: (v: number) => void;
+    updateColor: (cmyk: CMYKColor) => void;
+    canvas: any;
+    targets: any[];
+    saveState: () => void;
+}
+export default function CMYKInputs({ cmyk, alpha, setAlpha, updateColor, canvas, targets, saveState, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};