beesoft-components 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beesoft-components",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "private": false,
   "type": "module",
   "author": {
@@ -34,15 +34,17 @@
     "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN"
   },
   "dependencies": {
-    "@beesoft/common": "^0.2.0",
+    "@beesoft/common": "^0.2.1",
     "@beesoft/headless-ui": "^0.1.0",
     "@preact/signals": "^2.5.1",
     "@react-hook/media-query": "^1.1.1",
     "classnames": "^2.3.2",
     "date-fns": "^3.3.1",
     "dot-object": "^2.1.4",
+    "konva": "^10.0.12",
     "lodash": "^4.17.21",
     "motion": "^12.24.10",
+    "react-konva": "^19.2.1",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

package/types/index.d.ts

@@ -3,6 +3,7 @@ import { CheckboxChangeEvent } from '@beesoft/headless-ui';
 import { CheckboxProps as CheckboxProps_2 } from '@beesoft/headless-ui';
 import { ComponentAnimationProps } from '@beesoft/headless-ui';
 import { default as default_2 } from 'react';
+import { Easing } from 'motion';
 import { FormInputControl } from '@beesoft/common';
 import { FormInputControlData } from '@beesoft/common';
 import { ForwardRefExoticComponent } from 'react';
@@ -23,6 +24,62 @@ import { TypeOrArray } from '@beesoft/common';
 
 export declare function applyBeeSoftTheme(theme: Record<string, unknown>): void;
 
+export declare const AvatarEditor: ({ width, height, label, source, showPreviewOnFileLoad, cropRadius, cropColor, closeColor, shadingColor, shadingOpacity, onEdit, onRemove }: AvatarEditorProps) => JSX_2.Element;
+
+declare interface AvatarEditorProps {
+    /**
+     * The visible width of the display area; this will be used to resize the loaded image to a viewable size. If width is
+     * set do not set the height.
+     */
+    width?: number;
+    /**
+     * The visible height of the display area; this will be used to resize the loaded image to a viewable size. If height
+     * is set do not set the width.
+     */
+    height?: number;
+    /**
+     * The text to display when no file is loaded.
+     */
+    label?: string;
+    /**
+     * The base64 encoded image to show in the editor.
+     */
+    source?: string;
+    /**
+     * When true (the default) a preview cropped image is created when the file first loads.
+     */
+    showPreviewOnFileLoad?: boolean;
+    /**
+     * The default size of the crop radius circle.
+     */
+    cropRadius?: number;
+    /**
+     * The color of the crop circle and adjustment icon (default gray).
+     */
+    cropColor?: string;
+    /**
+     * The color of the close/remove icon (default gray).
+     */
+    closeColor?: string;
+    /**
+     * The color of the non-cropped part of the image (default gray).
+     */
+    shadingColor?: string;
+    /**
+     * The opacity level applied to the shader (default 0.4).
+     */
+    shadingOpacity?: number;
+    /**
+     * Event fired when an edit operation is performed.
+     * @param data {string} - The resulting image as a Base64 string.
+     */
+    onEdit?: (data?: string) => void;
+    /**
+     * Event fired when the loaded image is removed.
+     */
+    onRemove?: () => void;
+}
+
 declare interface BeeSoftContextProps {
     overlayKeepOnScreen?: boolean;
     useAnimations?: boolean;
@@ -466,7 +523,7 @@ declare interface MediaQueryProps {
     desktopMarkup?: TypeOrArray<ReactNode>;
 }
 
-export declare const MobileOverlayPanel: ({ visible, target, appendTo, unmountWhenHidden, transitionDuration, showTransitionOptions, hideTransitionOptions, approveText, shown, hidden, isClickedWithin, children, }: MobileOverlayPanelProps) => ReactPortal;
+export declare const MobileOverlayPanel: ({ visible, target, appendTo, unmountWhenHidden, transitionDuration, showTransitionOptions, hideTransitionOptions, approveText, shown, hidden, isClickedWithin, children, }: MobileOverlayPanelProps) => default_2.ReactPortal | null;
 
 declare interface MobileOverlayPanelProps {
     visible: boolean;
@@ -474,8 +531,8 @@ declare interface MobileOverlayPanelProps {
     appendTo?: HTMLElement;
     unmountWhenHidden?: boolean;
     transitionDuration?: number;
-    showTransitionOptions?: string;
-    hideTransitionOptions?: string;
+    showTransitionOptions?: Easing;
+    hideTransitionOptions?: Easing;
     approveText?: string;
     shown?: () => void;
     hidden?: () => void;
@@ -483,7 +540,7 @@ declare interface MobileOverlayPanelProps {
     children: TypeOrArray<ReactNode>;
 }
 
-export declare const OverlayPanel: ({ visible, target, targetPosition, elementAlignment, shouldTargetCloseOverlay, shouldMatchTargetWidth, shouldScrollCloseOverlay, shouldCheckZIndex, shouldRemainOnScreen, unmountWhenHidden, transitionDuration, showTransitionOptions, hideTransitionOptions, shown, hidden, isClickedWithin, markupCreated, children, }: OverlayPanelProps & MarkupEvents) => JSX_2.Element;
+export declare const OverlayPanel: ({ visible, target, targetPosition, elementAlignment, shouldTargetCloseOverlay, shouldMatchTargetWidth, shouldScrollCloseOverlay, shouldCheckZIndex, shouldRemainOnScreen, unmountWhenHidden, transitionDuration, showTransitionOptions, hideTransitionOptions, shown, hidden, isClickedWithin, markupCreated, children, }: OverlayPanelProps & MarkupEvents) => JSX_2.Element | null;
 
 declare interface OverlayPanelProps {
     visible: boolean;