pixedi 1.10.1 → 1.10.2

package/dist/lib/sidebar/useSidebar.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import { type Tools } from "../types";
+type MappedTool = {
+    icon: ReactNode;
+    label: string;
+};
+export declare const getToolData: (tool: Tools) => MappedTool | null;
+export declare const useSidebar: () => {
+    click: (tool: Tools) => void;
+};
+export {};

package/dist/lib/types.d.ts

@@ -0,0 +1,129 @@
+export declare const breakpoints: {
+    readonly sm: 480;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+export type Breakpoint = keyof typeof breakpoints;
+export type Direction = "tl" | "tr" | "bl" | "br";
+export type ActionWithVal = {
+    val: boolean;
+};
+export declare const ActionName: {
+    readonly INITIAL: "initial";
+    readonly RESIZE: "resize";
+    readonly CROP: "crop";
+    readonly PRESET_CROP: "presetCrop";
+    readonly FLIP: "flip";
+    readonly ROTATE: "rotate";
+    readonly FILTERS: "filters";
+};
+export type Tools = Exclude<(typeof ActionName)[keyof typeof ActionName], "initial">;
+export type Sizes = {
+    width: number;
+    height: number;
+};
+export type ActionFlip = {
+    horizontal: boolean;
+    vertical: boolean;
+};
+export type ActionCrop = {
+    id: string;
+    ratio: number;
+    isFree: boolean;
+    preset?: Sizes;
+} & Partial<CropRect>;
+export type CropRect = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+export type CropRectExtended = CropRect & {
+    xP: number;
+    yP: number;
+    wP: number;
+    hP: number;
+};
+export type ActionRotate = {
+    degrees: number;
+};
+export type CssFilters = {
+    brightness: number;
+    contrast: number;
+    grayscale: number;
+    hueRotate: number;
+    invert: number;
+    saturate: number;
+    sepia: number;
+};
+export type UrlFilter = {
+    url: string;
+};
+export type ActionFilter = UrlFilter | CssFilters;
+export type Action = {
+    name: typeof ActionName.INITIAL;
+    args: null;
+} | {
+    name: typeof ActionName.RESIZE;
+    args: Sizes;
+} | {
+    name: typeof ActionName.CROP;
+    args: ActionCrop;
+} | {
+    name: typeof ActionName.PRESET_CROP;
+    args: ActionCrop;
+} | {
+    name: typeof ActionName.FLIP;
+    args: ActionFlip;
+} | {
+    name: typeof ActionName.ROTATE;
+    args: ActionRotate;
+} | {
+    name: typeof ActionName.FILTERS;
+    args: ActionFilter;
+};
+export type HistoryItem = Sizes & {
+    action: Action;
+};
+export type History = {
+    pointer: number;
+    items: Array<HistoryItem>;
+};
+export type FuncSaveArgs = (payload: Blob | string) => Promise<void> | void;
+export type Theme = "light" | "dark";
+export type Option<T = string> = {
+    value: T;
+    label: string;
+    rightLabel?: string;
+};
+export type PresetOption = Option & {
+    w: number;
+    h: number;
+};
+export type Preset = Option & {
+    options: Array<PresetOption>;
+};
+export type FilterData = Option & {
+    min: number;
+    max: number;
+    step: number;
+    unit: string;
+    sliderValue: number;
+};
+export type ProcessedImage = {
+    newBlob: Blob;
+    previewBlob: Blob;
+    mimeType: string;
+    width: number;
+    height: number;
+    isAlpha: boolean;
+};
+export type Settings = {
+    tools?: Tools[];
+    infobar?: boolean;
+    quality?: number;
+    saveAsWEBP?: boolean;
+    exportAs?: "blob" | "base64";
+    background?: "circled" | "diagonals" | "rhombus";
+};

package/dist/lib/ui/button/Button.d.ts

@@ -0,0 +1,7 @@
+type ButtonProps = React.ComponentPropsWithRef<"button"> & {
+    variant?: "default" | "outline" | "ghost";
+    className?: string;
+    children?: React.ReactNode;
+};
+export declare const Button: ({ className, variant, children, ref, ...props }: ButtonProps) => import("react").JSX.Element;
+export {};

package/dist/lib/ui/index.d.ts

@@ -0,0 +1,10 @@
+export { Button } from "./button/Button";
+export { Separator } from "./separator/Separator";
+export { Select } from "./select/Select";
+export { Input } from "./input/Input";
+export { InputPixel } from "./input-pixel/InputPixel";
+export { SaveCloseGroup } from "./save-close-group/SaveCloseGroup";
+export { Slider } from "./slider/Slider";
+export { Tooltip } from "./tooltip/Tooltip";
+export { SurfaceTool } from "./surface-tool/SurfaceTool";
+export { SurfaceToolOffsetProvider } from "./surface-tool/SurfaceToolOffsetProvider";

package/dist/lib/ui/input/Input.d.ts

@@ -0,0 +1,4 @@
+export type InputProps = React.ComponentPropsWithRef<"input"> & {
+    hideArrows?: boolean;
+};
+export declare const Input: ({ className, type, hideArrows, ref, ...props }: InputProps) => import("react").JSX.Element;

package/dist/lib/ui/input-pixel/InputPixel.d.ts

@@ -0,0 +1,6 @@
+type InputPixelProps = React.ComponentPropsWithRef<"input"> & {
+    label: string;
+    className?: string;
+};
+export declare const InputPixel: ({ label, className, style, ref, ...props }: InputPixelProps) => import("react").JSX.Element;
+export {};

package/dist/lib/ui/save-close-group/SaveCloseGroup.d.ts

@@ -0,0 +1,8 @@
+type SaveCloseGroupProps = {
+    onSave: () => void;
+    onClose: () => void;
+    saving?: boolean;
+    disabled?: boolean;
+};
+export declare const SaveCloseGroup: ({ onSave, onClose, saving, disabled, }: SaveCloseGroupProps) => import("react").JSX.Element;
+export {};

package/dist/lib/ui/select/Select.d.ts

@@ -0,0 +1,11 @@
+import type { SelectOption } from "./useSelect";
+export type { SelectOption } from "./useSelect";
+type SelectProps = {
+    items: SelectOption[];
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    renderOption?: (option: SelectOption) => React.ReactNode;
+};
+export declare const Select: ({ items, value, onChange, placeholder, className, renderOption, }: SelectProps) => import("react").JSX.Element;

package/dist/lib/ui/select/useSelect.d.ts

@@ -0,0 +1,22 @@
+export type SelectOption = {
+    value: string;
+    label: string;
+    options?: SelectOption[];
+    rightLabel?: string;
+    fullName?: string;
+};
+type UseSelectArgs = {
+    items: SelectOption[];
+    value: string;
+    onChange: (value: string) => void;
+};
+export declare const useSelect: ({ items, value, onChange }: UseSelectArgs) => {
+    isOpen: boolean;
+    selectedLabel: string | undefined;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    triggerRef: import("react").RefObject<HTMLButtonElement | null>;
+    contentRef: import("react").RefObject<HTMLDivElement | null>;
+    handleSelectItem: (nextValue: string) => void;
+    toggleOpen: () => void;
+};
+export {};

package/dist/lib/ui/separator/Separator.d.ts

@@ -0,0 +1,4 @@
+export declare const Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+} & import("react").RefAttributes<HTMLHRElement>>;

package/dist/lib/ui/slider/Slider.d.ts

@@ -0,0 +1,19 @@
+import { type Ref } from "react";
+export type SliderHandle = {
+    getValue: () => number;
+};
+type SliderProps = {
+    min: number;
+    max: number;
+    value?: number;
+    step?: number;
+    disabled?: boolean;
+    isTooltip?: boolean;
+    unit?: string;
+    className?: string;
+    onChange?: (value: number) => void;
+    onInput?: (value: number) => void;
+    ref?: Ref<SliderHandle>;
+};
+export declare const Slider: ({ min, max, value, step, disabled, isTooltip, unit, className, onChange, onInput, ref, }: SliderProps) => import("react").JSX.Element;
+export {};

package/dist/lib/ui/surface-tool/SurfaceTool.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+type SurfaceToolProps = {
+    children: ReactNode;
+    className?: string;
+    ref?: React.RefObject<HTMLDivElement | null>;
+};
+export declare const SurfaceTool: ({ children, className, ref, }: SurfaceToolProps) => import("react").JSX.Element;
+export {};

package/dist/lib/ui/surface-tool/SurfaceToolContext.d.ts

@@ -0,0 +1,6 @@
+export type SurfaceToolOffset = {
+    dx: number;
+    dy: number;
+};
+export declare const SurfaceToolOffsetContext: import("react").Context<import("react").RefObject<SurfaceToolOffset> | undefined>;
+export declare const useSurfaceToolOffset: () => React.RefObject<SurfaceToolOffset>;

package/dist/lib/ui/surface-tool/SurfaceToolOffsetProvider.d.ts

@@ -0,0 +1,5 @@
+type SurfaceToolOffsetProviderProps = {
+    children: React.ReactNode;
+};
+export declare const SurfaceToolOffsetProvider: ({ children, }: SurfaceToolOffsetProviderProps) => import("react").JSX.Element;
+export {};

package/dist/lib/ui/surface-tool/useSurfaceTool.d.ts

@@ -0,0 +1,7 @@
+type UseSurfaceToolArgs = {
+    surfaceRef: React.RefObject<HTMLDivElement | null>;
+};
+export declare const useSurfaceTool: ({ surfaceRef }: UseSurfaceToolArgs) => {
+    handleDragStart: (e: React.MouseEvent | React.TouchEvent) => void;
+};
+export {};

package/dist/lib/ui/tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import type { TooltipPosition } from "./useTooltip";
+type TooltipProps = {
+    children: ReactNode;
+    position?: TooltipPosition;
+    className?: string;
+    classNameTitle?: string;
+    style?: React.CSSProperties;
+};
+export declare const Tooltip: ({ children, position, className, classNameTitle, style, }: TooltipProps) => import("react").JSX.Element;
+export {};

package/dist/lib/ui/tooltip/useTooltip.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode, CSSProperties } from "react";
+export type TooltipPosition = "top" | "bottom" | "left" | "right";
+export declare const useTooltip: (children: ReactNode, position?: TooltipPosition) => {
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    trackRef: import("react").RefObject<HTMLDivElement | null>;
+    titleRefs: import("react").RefObject<(HTMLDivElement | null)[]>;
+    titles: string[];
+    position: TooltipPosition;
+    isVisible: boolean;
+    isAnimated: boolean;
+    cssVars: CSSProperties;
+    handleMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleMouseLeave: () => void;
+};

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

@@ -0,0 +1,7 @@
+export declare function Canvas(base64Str: string, alpha?: boolean, mimeType?: string): {
+    resize(width: number, height: number): /*elided*/ any;
+    crop(x: number, y: number, width: number, height: number): /*elided*/ any;
+    flip(horizontal: boolean, vertical: boolean): /*elided*/ any;
+    rotate(angle: number): /*elided*/ any;
+    getBase64(): Promise<string>;
+};

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

@@ -0,0 +1,10 @@
+import type { CropRect, CropRectExtended, Direction, Sizes } from "../types";
+export declare const getCropPoints: (dir: Direction, isFree: boolean, ratio: number, startX: number, startY: number, clientX: number, clientY: number, width: number, height: number, crop: CropRect, fallback: CropRect) => CropRect;
+export declare const getInitalCrop: (cropRatio: number, width: number, height: number) => CropRectExtended;
+export declare const snapRectToRatio: (crop: CropRect, ratio: number, width: number, height: number) => CropRect;
+export declare const getCropByNewSizes: (crop: CropRect, width: number, height: number, frameWidth: number) => CropRect;
+export declare const degree2Rad: (degree: number) => number;
+export declare const isQuarterTurn: (degrees: number) => boolean;
+export declare const getOrientedSizes: (width: number, height: number, fromDegrees: number, toDegrees: number) => Sizes;
+export declare const createPreviewBlob: (bitmap: ImageBitmap) => Promise<Blob>;
+export declare function hasAlphaChannel(bitmap: ImageBitmap): boolean;

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

@@ -0,0 +1,10 @@
+import type { ActionFilter, ProcessedImage, Settings } from "../types";
+export declare const blobToBase64: (blob: Blob) => Promise<string>;
+export declare function imageProcessor(blob: Blob): Promise<{
+    crop: (x: number, y: number, w: number, h: number) => void;
+    flip: (horizontal: boolean, vertical: boolean) => void;
+    rotate: (angle: number) => void;
+    resize: (width: number, height: number) => void;
+    filters: (args: ActionFilter) => void;
+    get: (settings: Settings) => Promise<ProcessedImage>;
+}>;

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

@@ -0,0 +1,42 @@
+import { type ActionFilter, type HistoryItem } from "../types";
+export type Preview = {
+    box: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    boxWidth: number;
+    boxHeight: number;
+    newWidth: number;
+    newHeight: number;
+    initWidth: number;
+    initHeight: number;
+    viewWidth: number;
+    viewHeight: number;
+    rotation: number;
+    flipH: boolean;
+    flipV: boolean;
+    filters: string[];
+};
+export declare const getPreview: (items: HistoryItem[]) => Preview;
+export declare const getActions: (items: HistoryItem[]) => {
+    filters?: ActionFilter | undefined;
+    resize?: {
+        width: number;
+        height: number;
+    } | undefined;
+    flip?: {
+        horizontal: boolean;
+        vertical: boolean;
+    } | undefined;
+    rotate?: {
+        degrees: number;
+    } | undefined;
+    crop?: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    } | undefined;
+};

package/dist/lib/workers/imageLoad.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixedi",
-  "version": "1.10.1",
+  "version": "1.10.2",
   "license": "MIT",
   "description": "A lightweight, embeddable React image editor component.",
   "type": "module",
@@ -9,9 +9,9 @@
   "types": "./dist/lib/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/lib/index.d.ts",
       "import": "./dist/lib/index.js",
-      "require": "./dist/lib/index.umd.cjs",
-      "types": "./dist/lib/index.d.ts"
+      "require": "./dist/lib/index.umd.cjs"
     }
   },
   "files": [
@@ -61,7 +61,7 @@
     "lint": "eslint .",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "type-check": "tsc -b tsconfig.lib.json",
+    "type-check": "tsc -p tsconfig.lib.json --noEmit",
     "test": "vitest run",
     "test:watch": "vitest"
   }