@kubit-ui-web/react-charts 0.1.0

package/dist/esm/components/zoomArea/utils/selectionConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionConfig.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/utils/selectionConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAkBhE;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAC7B,SAAS,uBAAuB,KAC/B,QAAQ,CAAC,uBAAuB,CAOjC,CAAC"}

package/dist/esm/components/zoomArea/utils/selectionConfig.js

@@ -0,0 +1,29 @@
+/**
+ * Default configuration for ZoomArea selection area
+ */
+const DEFAULT_SELECTION_CONFIG = {
+    /** Selection area background color */
+    FILL: '#0078d4',
+    /** Selection area fill opacity */
+    FILL_OPACITY: 0.5,
+    /** Hide overlay when full range is selected */
+    HIDE_OVERLAY_ON_FULL_RANGE: true,
+    /** Selection area border color */
+    STROKE: '#0078d4',
+    /** Selection area border width */
+    STROKE_WIDTH: 0,
+};
+/**
+ * Utility function to get resolved selection configuration.
+ * Merges user-provided config with sensible defaults.
+ *
+ * @param config - Optional user configuration
+ * @returns Complete selection configuration with defaults applied
+ */
+export const getSelectionConfig = (config) => ({
+    fill: config?.fill ?? DEFAULT_SELECTION_CONFIG.FILL,
+    fillOpacity: config?.fillOpacity ?? DEFAULT_SELECTION_CONFIG.FILL_OPACITY,
+    hideOverlayOnFullRange: config?.hideOverlayOnFullRange ?? DEFAULT_SELECTION_CONFIG.HIDE_OVERLAY_ON_FULL_RANGE,
+    stroke: config?.stroke ?? DEFAULT_SELECTION_CONFIG.STROKE,
+    strokeWidth: config?.strokeWidth ?? DEFAULT_SELECTION_CONFIG.STROKE_WIDTH,
+});

package/dist/esm/components/zoomArea/zoomArea.d.ts

@@ -0,0 +1,12 @@
+import { type ZoomAreaProps } from './zoomArea.type';
+/**
+ * `ZoomArea` component that renders a scaled chart with draggable zoom handlers for interactive data filtering.
+ *
+ * It includes full keyboard navigation support, accessibility features, and customizable appearance.
+ *
+ * @param props - See {@link ZoomAreaProps} for detailed documentation of all available properties.
+ *
+ * @returns A React functional component that renders an SVG-based zoom area with interactive handlers and accessibility features.
+ */
+export declare const ZoomArea: React.FC<ZoomAreaProps>;
+//# sourceMappingURL=zoomArea.d.ts.map

package/dist/esm/components/zoomArea/zoomArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoomArea.d.ts","sourceRoot":"","sources":["../../../../src/components/zoomArea/zoomArea.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAoB,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEvE;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6K5C,CAAC"}

package/dist/esm/components/zoomArea/zoomArea.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { SvgContainer } from '../../components/svgContainer/svgContainer';
+import { getFocusConfig } from '../../utils/calculateFocusOutline/calculateFocusOutline';
+import { getDataFingerprint } from '../../utils/getDataFingerprint/getDataFingerprint';
+import { LineRenderer } from './components/LineRenderer';
+import { SelectionArea, SelectionAreaFocusRing } from './components/SelectionArea';
+import { ZoomHandler } from './components/ZoomHandler';
+import { useDragInteraction } from './hooks/useDragInteraction';
+import { useKeyboardNavigation } from './hooks/useKeyboardNavigation';
+import { useResponsiveCanvas } from './hooks/useResponsiveCanvas';
+import { useZoomAreaFocus } from './hooks/useZoomAreaFocus';
+import { useZoomData } from './hooks/useZoomData';
+import { generateAccessibilityLabels } from './utils/accessibilityLabels';
+import { getInteractionConfig } from './utils/interactionConfig';
+import { calculateLinesPathData } from './utils/pathGeneration';
+import { calculateHandlerPositions } from './utils/rangeAndPositions';
+import { getSelectionConfig } from './utils/selectionConfig';
+import { ZoomAreaElements } from './zoomArea.type';
+/**
+ * `ZoomArea` component that renders a scaled chart with draggable zoom handlers for interactive data filtering.
+ *
+ * It includes full keyboard navigation support, accessibility features, and customizable appearance.
+ *
+ * @param props - See {@link ZoomAreaProps} for detailed documentation of all available properties.
+ *
+ * @returns A React functional component that renders an SVG-based zoom area with interactive handlers and accessibility features.
+ */
+export const ZoomArea = ({ ariaHidden, ariaLabel, backgroundColor, canvasConfig, // Optional - auto-calculated based on width/height if not provided
+caption, classNames, data, focusConfig, handlerConfig, height = '40px', // 2.5rem, defined by size_400 token in Figma
+initialRange, interactionConfig, lines, onDataChange, role, screenReaderTextConfig, selectionConfig, width = '100%', xKey, ...eventHandlers }) => {
+    const dataTestId = 'zoom-area';
+    // Resolve interaction config with defaults
+    const resolvedInteractionConfig = getInteractionConfig(interactionConfig);
+    // Resolve selection config with defaults
+    const resolvedSelectionConfig = getSelectionConfig(selectionConfig);
+    // Resolve focus config with defaults
+    const resolvedFocusConfig = getFocusConfig(focusConfig);
+    // Hook for core data filtering functionality
+    const { currentRange, handleRangeChange } = useZoomData({
+        data,
+        initialRange,
+        onDataChange,
+    });
+    // Hook for responsive dimensions of the component when set as percentage
+    const { parsedCanvas, viewBox } = useResponsiveCanvas({
+        canvasConfig,
+        dataTestId,
+        height,
+        width,
+    });
+    // Create a fingerprint of the data/lines to avoid unnecessary updates
+    const dataFingerprint = getDataFingerprint(data);
+    const linesFingerprint = JSON.stringify(lines);
+    const accessibilityLabels = generateAccessibilityLabels(data, xKey, currentRange, screenReaderTextConfig);
+    // Memoize expensive line calculations
+    const linesData = useMemo(() => {
+        return calculateLinesPathData(data, lines, parsedCanvas.width, parsedCanvas.height);
+    }, [dataFingerprint, linesFingerprint, parsedCanvas.width, parsedCanvas.height]);
+    // Memoize handler positions calculation
+    const { endX, startX } = useMemo(() => calculateHandlerPositions(currentRange, data.length, parsedCanvas.width), [currentRange, dataFingerprint, parsedCanvas.width]);
+    // Interaction hooks
+    const { handleBlur, handleFocus, isFocused } = useZoomAreaFocus();
+    const { handleKeyDown } = useKeyboardNavigation({
+        currentRange,
+        dataLength: data.length,
+        interactionConfig: resolvedInteractionConfig,
+        onRangeChange: handleRangeChange,
+    });
+    const { groupRef, handleMouseDown, handleTouchStart } = useDragInteraction({
+        currentRange,
+        dataLength: data.length,
+        interactionConfig: resolvedInteractionConfig,
+        onRangeChange: handleRangeChange,
+        width: parsedCanvas.width,
+    });
+    return (_jsxs(SvgContainer, { ref: groupRef, ariaHidden: ariaHidden, ariaLabel: ariaLabel, backgroundColor: backgroundColor, caption: caption, className: classNames, "data-testid": dataTestId, height: height, 
+        // set overflow visible so handlers and focus rings are visible always
+        overflow: "visible", role: role, viewBox: viewBox, width: width, ...eventHandlers, children: [_jsx(LineRenderer, { linesData: linesData }), _jsx(SelectionArea, { currentRange: currentRange, dataLength: data.length, dataTestId: `${dataTestId}-selection-area`, endX: endX, height: parsedCanvas.height, screenReaderText: accessibilityLabels.selectionArea, selectionConfig: resolvedSelectionConfig, startX: startX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.SELECTION_AREA), onKeyDown: handleKeyDown(ZoomAreaElements.SELECTION_AREA), onMouseDown: handleMouseDown(ZoomAreaElements.SELECTION_AREA), onTouchStart: handleTouchStart(ZoomAreaElements.SELECTION_AREA) }), _jsx(ZoomHandler, { dataTestId: `${dataTestId}-start-handler`, focusConfig: resolvedFocusConfig, handlerConfig: handlerConfig, height: parsedCanvas.height, isFocused: isFocused(ZoomAreaElements.START_HANDLER), max: currentRange.end - resolvedInteractionConfig.minHandlerDistance, min: 0, screenReaderText: accessibilityLabels.startHandler, type: ZoomAreaElements.START_HANDLER, value: currentRange.start, x: startX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.START_HANDLER), onKeyDown: handleKeyDown(ZoomAreaElements.START_HANDLER), onMouseDown: handleMouseDown(ZoomAreaElements.START_HANDLER), onTouchStart: handleTouchStart(ZoomAreaElements.START_HANDLER) }), _jsx(ZoomHandler, { dataTestId: `${dataTestId}-end-handler`, focusConfig: resolvedFocusConfig, handlerConfig: handlerConfig, height: parsedCanvas.height, isFocused: isFocused(ZoomAreaElements.END_HANDLER), max: data.length - 1, min: currentRange.start + resolvedInteractionConfig.minHandlerDistance, screenReaderText: accessibilityLabels.endHandler, type: ZoomAreaElements.END_HANDLER, value: currentRange.end, x: endX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.END_HANDLER), onKeyDown: handleKeyDown(ZoomAreaElements.END_HANDLER), onMouseDown: handleMouseDown(ZoomAreaElements.END_HANDLER), onTouchStart: handleTouchStart(ZoomAreaElements.END_HANDLER) }), _jsx(SelectionAreaFocusRing, { endX: endX, focusConfig: resolvedFocusConfig, height: parsedCanvas.height, isFocused: isFocused(ZoomAreaElements.SELECTION_AREA), startX: startX })] }));
+};

package/dist/esm/components/zoomArea/zoomArea.type.d.ts

@@ -0,0 +1,153 @@
+import type { CanvasConfig } from '../../types/canvas.type';
+import type { FocusConfig } from '../../types/focusConfig.type';
+/**
+ * Represents a single data point for the ZoomArea component.
+ */
+export interface IZoomAreaDataPoint {
+    [key: string]: string | number;
+}
+/**
+ * Range selection for zoom functionality.
+ */
+export interface ZoomRange {
+    /** Start index or value */
+    start: number;
+    /** End index or value */
+    end: number;
+}
+/**
+ * Target enumeration for zoom area elements
+ */
+export declare const ZoomAreaElements: {
+    readonly END_HANDLER: "END_HANDLER";
+    readonly SELECTION_AREA: "SELECTION_AREA";
+    readonly START_HANDLER: "START_HANDLER";
+};
+/**
+ * Configuration for a single line in the ZoomArea.
+ */
+export interface ZoomAreaLineConfig {
+    /** Data key for y-axis values */
+    yKey: string;
+    /** Line stroke color */
+    stroke?: string;
+    /** Line stroke width */
+    strokeWidth?: string | number;
+    /** Fill color for area under the line */
+    fill?: string;
+    /** Fill opacity */
+    fillOpacity?: number;
+    /** Whether the line should be curved (smooth) */
+    curved?: boolean;
+    /** Optional identifier for this line */
+    dataKey?: string;
+}
+/**
+ * Configuration for custom handlers appearance and behavior.
+ */
+export interface ZoomAreaHandlerConfig {
+    /** Handler circle stroke color */
+    stroke?: string;
+    /** Handler circle stroke width */
+    strokeWidth?: string | number;
+    /** Handler circle fill color */
+    fill?: string;
+    /** Handler circle radius */
+    radius?: number;
+    /** Vertical guide line stroke color */
+    verticalLineStroke?: string;
+    /** Vertical guide line stroke width */
+    verticalLineStrokeWidth?: number;
+    /** Handler icon fill color */
+    iconColor?: string;
+}
+/**
+ * Configuration for selection area appearance and behavior.
+ */
+export interface ZoomAreaSelectionConfig {
+    /** Selection area fill color */
+    fill?: string;
+    /** Selection area fill opacity */
+    fillOpacity?: number;
+    /** Selection area stroke color */
+    stroke?: string;
+    /** Selection area stroke width */
+    strokeWidth?: string | number;
+    /** Hide overlay when selection covers full range (default: true) */
+    hideOverlayOnFullRange?: boolean;
+}
+/**
+ * Configuration for interaction behavior in ZoomArea
+ */
+export interface ZoomAreaInteractionConfig {
+    /** Minimum distance between start and end handlers (default: 1) */
+    minHandlerDistance?: number;
+    /** Default keyboard movement step for precise control (default: 1) */
+    keyboardStep?: number;
+    /** Shift + arrow key movement step for fast navigation (default: 2) */
+    keyboardFastStep?: number;
+}
+/**
+ * Configuration for accessibility label templates
+ */
+export interface ScreenReaderConfig {
+    /** Template for start handler label. Use {{startValue}} for dynamic value */
+    startHandler?: string;
+    /** Template for end handler label. Use {{endValue}} for dynamic value */
+    endHandler?: string;
+    /** Template for selection area label. Use {{startValue}} and {{endValue}} for dynamic values */
+    selectionArea?: string;
+}
+/**
+ * Props for the ZoomArea component.
+ */
+export interface ZoomAreaProps {
+    /** Chart width - supports string (percentage, rem) or number (pixels) */
+    width?: string | number;
+    /** Chart height - supports string (percentage, rem) or number (pixels) (default: 2.5rem = 40px) */
+    height?: string | number;
+    /** Data points for the chart */
+    data: IZoomAreaDataPoint[];
+    /** Key for x-axis values */
+    xKey: string;
+    /** Configuration for lines to display */
+    lines: ZoomAreaLineConfig[];
+    /** Canvas configuration for dimensions and spacing */
+    canvasConfig?: CanvasConfig;
+    /** Background color for the chart area */
+    backgroundColor?: string;
+    /** Custom handler configuration */
+    handlerConfig?: ZoomAreaHandlerConfig;
+    /** Custom selection area configuration */
+    selectionConfig?: ZoomAreaSelectionConfig;
+    /** Custom focus configuration applied to all focusable elements */
+    focusConfig?: FocusConfig;
+    /** Configuration for interaction behavior (keyboard navigation, handler distances) */
+    interactionConfig?: ZoomAreaInteractionConfig;
+    /** Configuration for accessibility label templates */
+    screenReaderTextConfig?: ScreenReaderConfig;
+    /** Initial zoom range */
+    initialRange?: ZoomRange;
+    /** Callback when filtered data changes based on zoom selection */
+    onDataChange?: (filteredData: IZoomAreaDataPoint[]) => void;
+    /** CSS class names */
+    classNames?: string;
+    /** ARIA label for screen readers */
+    ariaLabel?: string;
+    /** ARIA hidden attribute */
+    ariaHidden?: boolean;
+    /** Chart caption for accessibility */
+    caption?: string;
+    /** Chart role for accessibility */
+    role?: string;
+    /** Standard SVG element event handlers */
+    onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onDoubleClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onFocus?: (event: React.FocusEvent<SVGElement>) => void;
+    onBlur?: (event: React.FocusEvent<SVGElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
+    onKeyUp?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
+}
+//# sourceMappingURL=zoomArea.type.d.ts.map

package/dist/esm/components/zoomArea/zoomArea.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoomArea.type.d.ts","sourceRoot":"","sources":["../../../../src/components/zoomArea/zoomArea.type.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/zoomArea/zoomArea.type.js

@@ -0,0 +1,8 @@
+/**
+ * Target enumeration for zoom area elements
+ */
+export const ZoomAreaElements = {
+    END_HANDLER: 'END_HANDLER',
+    SELECTION_AREA: 'SELECTION_AREA',
+    START_HANDLER: 'START_HANDLER',
+};

package/dist/esm/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useFocus/useFocus';
+export * from './useHover/useHover';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}

package/dist/esm/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useFocus/useFocus';
+export * from './useHover/useHover';

package/dist/esm/hooks/useFocus/useFocus.d.ts

@@ -0,0 +1,15 @@
+import type { FocusHandler, UseFocusReturn } from './useFocus.types';
+/**
+ * Custom React hook to manage focus state and handle focus/blur events for an element.
+ *
+ * This hook provides a way to manage the focus state of an element and handle its focus and blur events
+ * with optional custom handlers. It returns the focus state and functions to handle focus and blur events,
+ * which can be used directly on the target element.
+ *
+ * @template T - A type parameter that extends either HTMLElement or SVGElement, indicating the type of the target element.
+ * @param onFocus - An optional custom focus event handler of type `FocusHandler<T>`. It is called when the element gains focus.
+ * @param onBlur - An optional custom blur event handler of type `FocusHandler<T>`. It is called when the element loses focus.
+ * @returns An object of type `UseFocusReturn<T>` containing the focus state (`isFocused`), and functions to handle focus (`handleFocus`) and blur (`handleBlur`) events.
+ */
+export declare const useFocus: <T extends HTMLElement | SVGElement>(onFocus?: FocusHandler<T>, onBlur?: FocusHandler<T>) => UseFocusReturn<T>;
+//# sourceMappingURL=useFocus.d.ts.map

package/dist/esm/hooks/useFocus/useFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocus.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useFocus/useFocus.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAErE;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,WAAW,GAAG,UAAU,EACzD,UAAU,YAAY,CAAC,CAAC,CAAC,EACzB,SAAS,YAAY,CAAC,CAAC,CAAC,KACvB,cAAc,CAAC,CAAC,CAoBlB,CAAC"}

package/dist/esm/hooks/useFocus/useFocus.js

@@ -0,0 +1,25 @@
+import { useCallback, useState } from 'react';
+/**
+ * Custom React hook to manage focus state and handle focus/blur events for an element.
+ *
+ * This hook provides a way to manage the focus state of an element and handle its focus and blur events
+ * with optional custom handlers. It returns the focus state and functions to handle focus and blur events,
+ * which can be used directly on the target element.
+ *
+ * @template T - A type parameter that extends either HTMLElement or SVGElement, indicating the type of the target element.
+ * @param onFocus - An optional custom focus event handler of type `FocusHandler<T>`. It is called when the element gains focus.
+ * @param onBlur - An optional custom blur event handler of type `FocusHandler<T>`. It is called when the element loses focus.
+ * @returns An object of type `UseFocusReturn<T>` containing the focus state (`isFocused`), and functions to handle focus (`handleFocus`) and blur (`handleBlur`) events.
+ */
+export const useFocus = (onFocus, onBlur) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const handleFocus = useCallback((event) => {
+        setIsFocused(true);
+        onFocus?.(event);
+    }, [onFocus]);
+    const handleBlur = useCallback((event) => {
+        setIsFocused(false);
+        onBlur?.(event);
+    }, [onBlur]);
+    return { handleBlur, handleFocus, isFocused };
+};

package/dist/esm/hooks/useFocus/useFocus.types.d.ts

@@ -0,0 +1,30 @@
+import type { FocusEvent } from 'react';
+/**
+ * Defines a generic focus event handler function type.
+ *
+ * This type represents a function that handles focus events for HTML or SVG elements.
+ * It takes a FocusEvent specific to the element type (T) as its argument.
+ *
+ * @template T - A type that extends either HTMLElement or SVGElement, representing the target element of the focus event.
+ * @param event - The focus event object associated with the focus or blur action on the element.
+ */
+export interface FocusHandler<T extends HTMLElement | SVGElement> {
+    (event: FocusEvent<T>): void;
+}
+/**
+ * Defines the return type of the useFocus hook.
+ *
+ * This interface encapsulates the state and functions returned by the useFocus hook,
+ * providing a way to manage focus state and handle focus and blur events for HTML or SVG elements.
+ *
+ * @template T - A type that extends either HTMLElement or SVGElement, representing the target element of the focus or blur events.
+ * @property isFocused - A boolean indicating whether the element is currently focused.
+ * @property handleFocus - A function to be called when the element gains focus. It conforms to the FocusHandler type.
+ * @property handleBlur - A function to be called when the element loses focus. It also conforms to the FocusHandler type.
+ */
+export interface UseFocusReturn<T extends HTMLElement | SVGElement> {
+    isFocused: boolean;
+    handleFocus: FocusHandler<T>;
+    handleBlur: FocusHandler<T>;
+}
+//# sourceMappingURL=useFocus.types.d.ts.map

package/dist/esm/hooks/useFocus/useFocus.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocus.types.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useFocus/useFocus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,UAAU;IAC9D,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,UAAU;IAChE,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC7B,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;CAC7B"}

package/dist/esm/hooks/useFocus/useFocus.types.js

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

package/dist/esm/hooks/useHover/useHover.d.ts

@@ -0,0 +1,13 @@
+import type { MouseHandler, UseHoverReturn } from './useHover.types';
+/**
+ * A custom hook that manages hover state and provides event handlers for mouse enter and leave events,
+ * with optional custom handlers. It returns the hover state and functions to handle mouse enter and leave events,
+ * which can be used directly on the target element.
+ *
+ * @template T - A type parameter that extends either HTMLElement or SVGElement, indicating the type of the target element.
+ * @param onMouseEnter - An optional custom mouse enter event handler of type `MouseHandler<T>`. It is called when the element is hovered.
+ * @param onMouseLeave - An optional custom mouse leave event handler of type `MouseHandler<T>`. It is called when the element is no longer hovered.
+ * @returns An object of type `UseHoverReturn<T>` containing the hover state (`isHovered`), and functions to handle mouse enter (`handleMouseEnter`) and leave (`handleMouseLeave`) events.
+ */
+export declare const useHover: <T extends HTMLElement | SVGElement>(onMouseEnter?: MouseHandler<T>, onMouseLeave?: MouseHandler<T>) => UseHoverReturn<T>;
+//# sourceMappingURL=useHover.d.ts.map

package/dist/esm/hooks/useHover/useHover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHover.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useHover/useHover.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAErE;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,WAAW,GAAG,UAAU,EACzD,eAAe,YAAY,CAAC,CAAC,CAAC,EAC9B,eAAe,YAAY,CAAC,CAAC,CAAC,KAC7B,cAAc,CAAC,CAAC,CAwBlB,CAAC"}

package/dist/esm/hooks/useHover/useHover.js

@@ -0,0 +1,27 @@
+import { useCallback, useState } from 'react';
+/**
+ * A custom hook that manages hover state and provides event handlers for mouse enter and leave events,
+ * with optional custom handlers. It returns the hover state and functions to handle mouse enter and leave events,
+ * which can be used directly on the target element.
+ *
+ * @template T - A type parameter that extends either HTMLElement or SVGElement, indicating the type of the target element.
+ * @param onMouseEnter - An optional custom mouse enter event handler of type `MouseHandler<T>`. It is called when the element is hovered.
+ * @param onMouseLeave - An optional custom mouse leave event handler of type `MouseHandler<T>`. It is called when the element is no longer hovered.
+ * @returns An object of type `UseHoverReturn<T>` containing the hover state (`isHovered`), and functions to handle mouse enter (`handleMouseEnter`) and leave (`handleMouseLeave`) events.
+ */
+export const useHover = (onMouseEnter, onMouseLeave) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const handleMouseEnter = useCallback((event) => {
+        setIsHovered(true);
+        onMouseEnter?.(event);
+    }, [onMouseEnter]);
+    const handleMouseLeave = useCallback((event) => {
+        setIsHovered(false);
+        onMouseLeave?.(event);
+    }, [onMouseLeave]);
+    return {
+        handleMouseEnter,
+        handleMouseLeave,
+        isHovered,
+    };
+};

package/dist/esm/hooks/useHover/useHover.types.d.ts

@@ -0,0 +1,30 @@
+import type { MouseEvent } from 'react';
+/**
+ * Defines a generic hover event handler function type.
+ *
+ * This type represents a function that handles hover events for HTML or SVG elements.
+ * It takes a MouseEvent specific to the element type (T) as its argument.
+ *
+ * @template T - A type that extends either HTMLElement or SVGElement, representing the target element of the hover event.
+ * @param event - The hover event object associated with the mouse enter or mouse leave action on the element.
+ */
+export interface MouseHandler<T extends HTMLElement | SVGElement> {
+    (event: MouseEvent<T>): void;
+}
+/**
+ * Represents the return type of the `useHover` hook.
+ *
+ * This interface encapsulates the state and functions returned by the useHover hook,
+ * providing a way to manage hover state and handle mouse enter and mouse leave events for HTML or SVG elements.
+ *
+ * @template T - A type that extends either HTMLElement or SVGElement, representing the target element of the mouse enter or mouse leave events.
+ * @property isHovered - A boolean indicating whether the element is currently being hovered.
+ * @property handleMouseEnter - A function to be called when the mouse enters the element.
+ * @property handleMouseLeave - A function to be called when the mouse leaves the element.
+ */
+export interface UseHoverReturn<T extends HTMLElement | SVGElement> {
+    isHovered: boolean;
+    handleMouseEnter: MouseHandler<T>;
+    handleMouseLeave: MouseHandler<T>;
+}
+//# sourceMappingURL=useHover.types.d.ts.map

package/dist/esm/hooks/useHover/useHover.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHover.types.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useHover/useHover.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,UAAU;IAC9D,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,UAAU;IAChE,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAClC,gBAAgB,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;CACnC"}

package/dist/esm/hooks/useHover/useHover.types.js

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

package/dist/esm/index.d.ts

@@ -0,0 +1,4 @@
+export * from './charts';
+export * from './components';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from './charts';
+export * from './components';
+export * from './types';

package/dist/esm/types/canvas.type.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Defines the configuration options for a canvas element.
+ *
+ * @property {number} width - The width of the canvas in pixels.
+ * @property {number} height - The height of the canvas in pixels.
+ * @property {number} [extraSpace=0] - Optional additional space around the canvas. Defaults to 0.
+ */
+export interface CanvasConfig {
+    width: number | string;
+    height: number | string;
+    extraSpace?: number | string;
+}
+/**
+ * Provides default configuration for a canvas element.
+ *
+ * This configuration sets the canvas width to 100 pixels, height to 80 pixels,
+ * and includes no additional extra space around the canvas by default.
+ */
+export declare const DefaultCanvasConfig: CanvasConfig;
+//# sourceMappingURL=canvas.type.d.ts.map

package/dist/esm/types/canvas.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.type.d.ts","sourceRoot":"","sources":["../../../src/types/canvas.type.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,YAIjC,CAAC"}

package/dist/esm/types/canvas.type.js

@@ -0,0 +1,11 @@
+/**
+ * Provides default configuration for a canvas element.
+ *
+ * This configuration sets the canvas width to 100 pixels, height to 80 pixels,
+ * and includes no additional extra space around the canvas by default.
+ */
+export const DefaultCanvasConfig = {
+    extraSpace: 0,
+    height: 80,
+    width: 100,
+};

package/dist/esm/types/errors.type.d.ts

@@ -0,0 +1,10 @@
+export declare const ErrorType: {
+    readonly GENERIC: "GENERIC";
+};
+export interface ChartError {
+    error?: Error;
+}
+export type ChartErrorCollection = {
+    [type in (typeof ErrorType)[keyof typeof ErrorType]]?: ChartError;
+};
+//# sourceMappingURL=errors.type.d.ts.map

package/dist/esm/types/errors.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.type.d.ts","sourceRoot":"","sources":["../../../src/types/errors.type.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;CAEZ,CAAC;AAEX,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,MAAM,MAAM,oBAAoB,GAAG;KAChC,IAAI,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU;CAClE,CAAC"}

package/dist/esm/types/errors.type.js

@@ -0,0 +1,3 @@
+export const ErrorType = {
+    GENERIC: 'GENERIC',
+};

package/dist/esm/types/focusConfig.type.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Configuration for the focus effect.
+ *
+ * - `outlineColor` - Color of the outer outline when focused. Defaults to #0078D7.
+ * - `outlineStrokeWidth` - Stroke width of the outer outline. Defaults to 2.
+ * - `innerStrokeColor` - Color of the inner outline when focused. Defaults to #FFFFFF.
+ * - `innerStrokeWidth` - Stroke width of the inner outline. Defaults to 2.
+ * - `gap` - Gap between the inner and outer outline. Defaults to 0.
+ */
+export interface FocusConfig {
+    outlineColor?: string;
+    outlineStrokeWidth?: number;
+    innerColor?: string;
+    innerStrokeWidth?: number;
+    gap?: number;
+}
+export declare const FOCUS_DEFAULT: {
+    /** Focus ring color */
+    readonly FOCUS_COLOR: "#0078D4";
+    /** Focus ring inner border */
+    readonly FOCUS_INNER: "#ffffff";
+    /** Focus ring inner stroke width */
+    readonly INNER_FOCUS_STROKE_WIDTH: 2;
+    /** Focus ring outer stroke width */
+    readonly OUTER_FOCUS_STROKE_WIDTH: 2;
+    /** Gap between element and outlines */
+    readonly OUTLINES_GAP: 0;
+};
+//# sourceMappingURL=focusConfig.type.d.ts.map

package/dist/esm/types/focusConfig.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusConfig.type.d.ts","sourceRoot":"","sources":["../../../src/types/focusConfig.type.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,WAAW,WAAW;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,aAAa;IACxB,uBAAuB;;IAEvB,8BAA8B;;IAE9B,oCAAoC;;IAEpC,oCAAoC;;IAEpC,uCAAuC;;CAE/B,CAAC"}

package/dist/esm/types/focusConfig.type.js

@@ -0,0 +1,12 @@
+export const FOCUS_DEFAULT = {
+    /** Focus ring color */
+    FOCUS_COLOR: '#0078D4',
+    /** Focus ring inner border */
+    FOCUS_INNER: '#ffffff',
+    /** Focus ring inner stroke width */
+    INNER_FOCUS_STROKE_WIDTH: 2,
+    /** Focus ring outer stroke width */
+    OUTER_FOCUS_STROKE_WIDTH: 2,
+    /** Gap between element and outlines */
+    OUTLINES_GAP: 0,
+};

package/dist/esm/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './canvas.type';
+export * from './errors.type';
+export * from './focusConfig.type';
+export * from './position.enum';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}

package/dist/esm/types/index.js

@@ -0,0 +1,4 @@
+export * from './canvas.type';
+export * from './errors.type';
+export * from './focusConfig.type';
+export * from './position.enum';