@react-hive/honey-layout 4.0.0 → 4.2.0

package/dist/helpers/helpers.d.ts

@@ -17,33 +17,35 @@ export type ResolveSpacingResult<MultiValue extends HoneyCSSMultiValue<number>,
  * @template MultiValue - Represents the spacing value(s), which could be a single number or an array of numbers (e.g., [1, 2, 3, 4]).
  * @template Unit - The CSS unit used for the resolved spacing value, e.g., 'px', 'em'. Defaults to 'px'.
  *
- * @param {MultiValue} value - The spacing factor(s) to be applied. It can be:
- * - A single number representing a multiplier for the base spacing value.
- * - An array of numbers representing multiple multipliers for base spacing values (e.g., for margins or padding).
- * @param {Unit} [unit='px'] - The CSS unit to use for the calculated value. If `null` or `undefined`, no unit is applied.
- * Defaults to 'px'.
- * @param {keyof HoneySpacings} [type='base'] - The type of spacing to use from the theme. Determines which base spacing
- * value to use for calculations (e.g., 'base', 'small', 'large'). Defaults to 'base'.
- *
- * @returns {(context: ExecutionContext) => ResolveSpacingResult<MultiValue, Unit>} - A function that takes `ExecutionContext`
- * (containing the theme object) and returns the resolved spacing value(s). The result is either:
- * - A single calculated value (e.g., '16px') if the input is a single number.
- * - A string of space-separated values (e.g., '8px 16px 24px 32px') if the input is an array of numbers.
+ * @param value - The spacing factor(s) to be applied. It can be:
+ *                - A single number representing a multiplier for the base spacing value.
+ *                - An array of numbers representing multiple multipliers for base spacing values (e.g., for margins or padding).
+ * @param [unit='px'] - The CSS unit to use for the calculated value. If `null` or `undefined`, no unit is applied.
+ *                      Defaults to 'px'.
+ * @param [type='base'] - The type of spacing to use from the theme. Determines which base spacing
+ *                        value to use for calculations (e.g., 'base', 'small', 'large'). Defaults to 'base'.
+ *
+ * @returns A function that takes `ExecutionContext` (containing the theme object) and returns the resolved spacing value(s).
+ *          The result is either:
+ *            - A single calculated value (e.g., '16px') if the input is a single number.
+ *            - A string of space-separated values (e.g., '8px 16px 24px 32px') if the input is an array of numbers.
  */
 export declare const resolveSpacing: <MultiValue extends HoneyCSSMultiValue<number>, Unit extends Nullable<HoneyCSSDimensionUnit> = "px">(value: MultiValue, unit?: Unit, type?: keyof HoneySpacings) => ((context: ExecutionContext) => ResolveSpacingResult<MultiValue, Unit>);
 /**
  * Resolves a color value from the theme or returns the input color directly if it's a standalone color name or HEX value.
  *
- * @param colorKey - A string representing the color to resolve. This can be:
- *  - A theme key in the format 'colorType.colorName'.
- *  - A standalone color name (e.g., "red", "blue").
- *  - A HEX color value (e.g., "#RRGGBB").
- * @param alpha - Optional. The alpha transparency value between 0 (fully transparent) and 1 (fully opaque). Default to `undefined`.
+ * @param colorKey - A string representing the color to resolve.
+ *                 This can be:
+ *                  - A theme key in the format 'colorType.colorName'.
+ *                  - A standalone color name (e.g., "red", "blue").
+ *                  - A HEX color value (e.g., "#RRGGBB").
+ * @param [alpha] - The alpha transparency value between 0 (fully transparent) and 1 (fully opaque).
+ *                  Default to `undefined`.
  *
  * @returns A function that takes an `ExecutionContext` with a `theme` and resolves the color value:
- *  - A HEX color string from the theme (e.g., "#RRGGBB").
- *  - A HEX color string with alpha (e.g., "#RRGGBBAA") if `alpha` is provided.
- *  - The input `colorKey` value directly if it's a standalone color name or HEX value.
+ *           - A HEX color string from the theme (e.g., "#RRGGBB").
+ *           - A HEX color string with alpha (e.g., "#RRGGBBAA") if `alpha` is provided.
+ *           - The input `colorKey` value directly if it's a standalone color name or HEX value.
  *
  * @throws Will throw an error if the provided alpha value is not within the valid range (0 to 1).
  * @throws Will throw an error if the color format is invalid.
@@ -52,7 +54,7 @@ export declare const resolveColor: (colorKey: HoneyColorKey | HoneyCSSColor, alp
 /**
  * Resolves the font styles based on the provided font name from the theme.
  *
- * @param {HoneyFontName} fontName - The name of the font to be resolved from the theme.
+ * @param fontName - The name of the font to be resolved from the theme.
  *
  * @returns A style function that takes a theme object and returns the CSS styles for the specified font.
  */
@@ -60,7 +62,7 @@ export declare const resolveFont: (fontName: HoneyFontName) => ({ theme }: Execu
 /**
  * Resolves a specific dimension value from the theme configuration.
  *
- * @param {HoneyDimensionName} dimensionName - The name of the dimension to resolve.
+ * @param dimensionName - The name of the dimension to resolve.
  *
  * @returns A style function that takes the theme and returns the resolved dimension value from the theme.
  */
@@ -72,11 +74,10 @@ export declare const resolveDimension: (dimensionName: HoneyDimensionName) => ({
  *
  * @template Props - The type representing HTML attributes and Honey-prefixed CSS properties.
  *
- * @param {HoneyBreakpointName} breakpoint - The name of the breakpoint to filter properties by.
+ * @param breakpoint - The name of the breakpoint to filter properties by.
  *
- * @returns {(context: ExecutionContext & Props) => ReturnType<typeof css>} -
- *   A function that takes an execution context and properties, and returns a CSS block
- *   with styles generated for the specified breakpoint.
+ * @returns A function that takes an execution context and properties, and returns a CSS block
+ *          with styles generated for the specified breakpoint.
  */
 export declare const createStyles: <Props extends HTMLAttributes<HTMLElement> & HoneyPrefixedCSSProperties>(breakpoint: HoneyBreakpointName) => ((context: ExecutionContext & Props) => ReturnType<typeof css>);
 /**
@@ -84,8 +85,8 @@ export declare const createStyles: <Props extends HTMLAttributes<HTMLElement> &
  * The down function creates a media query for screen sizes smaller than the breakpoint,
  * while the up function creates a media query for screen sizes larger than the breakpoint.
  *
- * @param {HoneyBreakpointName} breakpoint - The name of the breakpoint.
- * @param {HoneyCSSMediaRule} [ruleOptions={}] - Additional options for the media rule.
+ * @param breakpoint - The name of the breakpoint.
+ * @param [ruleOptions={}] - Additional options for the media rule.
  *
  * @returns Styled functions for generating media queries.
  */
@@ -100,10 +101,10 @@ export declare const bpMedia: (breakpoint: HoneyBreakpointName, ruleOptions?: Om
  *
  * @template Props - The type representing HTML attributes and Honey-prefixed CSS properties.
  *
- * @param {HoneyBreakpointName} breakpoint - The name of the breakpoint to apply media query styles for.
+ * @param breakpoint - The name of the breakpoint to apply media query styles for.
  *
- * @returns {(context: ExecutionContext & Props) => Nullable<ReturnType<typeof css>>} - A function that takes context and properties
- *   and returns a CSS block wrapped in a media query if styles exist for the specified breakpoint; otherwise, returns `null`.
+ * @returns A function that takes context and properties and returns a CSS block wrapped in a media query
+ *          if styles exist for the specified breakpoint; otherwise, returns `null`.
  */
 export declare const applyBreakpointStyles: <Props extends HTMLAttributes<HTMLElement> & HoneyPrefixedCSSProperties>(breakpoint: HoneyBreakpointName) => ((context: ExecutionContext & Props) => Nullable<ReturnType<typeof css>>);
 /**

package/dist/hooks/use-honey-drag.d.ts

@@ -15,7 +15,7 @@ export type HoneyDragOnStartHandler<Element extends HTMLElement> = (draggableEle
 /**
  * Context provided to the move handler, containing information about the drag's movement.
  */
-type HoneyDragMoveContext = {
+interface HoneyDragMoveContext {
     /**
      * The horizontal distance has moved since the last frame.
      */
@@ -36,7 +36,7 @@ type HoneyDragMoveContext = {
      * The straight-line distance from the starting position to the current position.
      */
     euclideanDistance: number;
-};
+}
 /**
  * Handler triggered during a drag operation.
  *
@@ -59,7 +59,7 @@ export type HoneyDragOnMoveHandler<Element extends HTMLElement> = (draggableElem
 /**
  * Context provided to the end handler, containing information about the drag's end state.
  */
-type HoneyDragEndContext = {
+interface HoneyDragEndContext {
     /**
      * The total horizontal movement from the starting position to the ending position.
      */
@@ -76,7 +76,7 @@ type HoneyDragEndContext = {
      * The speed of movement in the vertical direction (Y axis).
      */
     movingSpeedY: number;
-};
+}
 /**
  * Handler triggered when a drag operation ends.
  *
@@ -93,7 +93,7 @@ export type HoneyDragOnEndHandler<Element extends HTMLElement> = (context: Honey
  * Object containing the handlers for various stages of the drag operation.
  * These handlers can be customized to manage the behavior of the drag process.
  */
-export type HoneyDragHandlers<Element extends HTMLElement> = {
+export interface HoneyDragHandlers<Element extends HTMLElement> {
     /**
      * Optional handler triggered when the drag operation starts.
      * This can be used to capture the initial state or perform setup actions.
@@ -109,27 +109,27 @@ export type HoneyDragHandlers<Element extends HTMLElement> = {
      * This can be used for cleanup or finalizing the state after the drag ends.
      */
     onEndDrag?: HoneyDragOnEndHandler<Element>;
-};
+}
 /**
  * Options passed to the `useHoneyDrag` hook.
  */
-export type HoneyDragOptions = {
+export interface HoneyDragOptions {
     /**
      * Determines whether the drag functionality is enabled or not.
      *
      * @default true
      */
     isEnabled?: boolean;
-};
+}
 /**
  * A hook that provides touch and mouse-based dragging functionality for an element.
  * It tracks the movement of the element during the drag process and exposes handlers for each stage of the drag operation.
  *
  * @template Element - The type of the HTML element that is being dragged.
  *
- * @param {MutableRefObject<Nullable<Element>>} draggableElementRef - A reference to the element that can be dragged.
- * @param {HoneyDragHandlers<Element>} handlers - The drag event handlers for different stages of the drag operation (start, move, end).
- * @param {HoneyDragOptions} options - Configuration options.
+ * @param draggableElementRef - A reference to the element that can be dragged.
+ * @param handlers - The drag event handlers for different stages of the drag operation (start, move, end).
+ * @param options - Configuration options.
  */
 export declare const useHoneyDrag: <Element extends HTMLElement>(draggableElementRef: MutableRefObject<Nullable<Element>>, { onMoveDrag, onStartDrag, onEndDrag }: HoneyDragHandlers<Element>, { isEnabled }?: HoneyDragOptions) => void;
 export {};

package/dist/hooks/use-honey-media-query.d.ts

@@ -1,5 +1,5 @@
 import { HoneyScreenState } from '../types';
-export type UseHoneyMediaQueryOptions = {
+export interface UseHoneyMediaQueryOptions {
     /**
      * Throttle interval (in milliseconds) for the resize event handler.
      * This limits how often the handler runs during continuous resize events.
@@ -14,7 +14,7 @@ export type UseHoneyMediaQueryOptions = {
      * These values are only set once on initialization and will not dynamically update the state.
      */
     overrideScreenState?: Partial<HoneyScreenState>;
-};
+}
 /**
  * The hook that tracks the current screen state based on the theme's media breakpoints.
  * It updates the state on window resize and orientation change.

package/dist/hooks/use-honey-overlay.d.ts

@@ -1,7 +1,7 @@
 import { HoneyOverlayId, HoneyOverlayEventListenerHandler } from '../types';
-type UseHoneyOverlayOptions = {
+interface UseHoneyOverlayOptions {
     onKeyUp?: HoneyOverlayEventListenerHandler;
-};
+}
 /**
  * Hook to interact with a specific overlay managed by the `HoneyLayoutProvider`.
  *

package/dist/hooks/use-honey-synthetic-scrollable-container.d.ts

@@ -1,21 +1,21 @@
 import { MutableRefObject } from 'react';
 import { Nullable } from '../types';
 import { HoneyDragHandlers } from './use-honey-drag';
-type SyntheticScrollableContainerOptions<Element extends HTMLElement> = Pick<HoneyDragHandlers<Element>, 'onStartDrag' | 'onEndDrag'> & {
+interface SyntheticScrollableContainerOptions<Element extends HTMLElement> extends Pick<HoneyDragHandlers<Element>, 'onStartDrag' | 'onEndDrag'> {
     /**
      * The percentage of the window width and height within which dragging is allowed.
      *
      * @default 0
      */
     availableWindowPercentage?: number;
-};
+}
 /**
  * A hook that enables synthetic scrolling behavior for a container element.
  * It allows horizontal and vertical dragging within a specified window percentage when the content overflows.
  * The hook handles touch and mouse events for dragging and resets the scroll position upon window resize.
  *
- * @param {MutableRefObject<Nullable<Element>>} scrollableContainerRef - A ref to the scrollable container element to be assigned to the target element.
- * @param {SyntheticScrollableContainerOptions<Element>} options - Options for configuring the synthetic scrollable container.
+ * @param scrollableContainerRef - A ref to the scrollable container element to be assigned to the target element.
+ * @param options - Options for configuring the synthetic scrollable container.
  */
 export declare const useHoneySyntheticScrollableContainer: <Element extends HTMLElement>(scrollableContainerRef: MutableRefObject<Nullable<Element>>, { availableWindowPercentage, onStartDrag, onEndDrag, }?: SyntheticScrollableContainerOptions<Element>) => void;
 export {};

package/dist/hooks/use-register-honey-overlay.d.ts

@@ -2,9 +2,9 @@ import { HoneyActiveOverlay, HoneyOverlayConfig, Nullable } from '../types';
 /**
  * A hook for registering and managing an overlay in the layout system.
  *
- * @param {boolean} isRegister - A flag indicating whether the overlay should be registered.
- * @param {HoneyOverlayConfig} overlayConfig - Configuration object specifying overlay behavior.
+ * @param isRegister - A flag indicating whether the overlay should be registered.
+ * @param overlayConfig - Configuration object specifying overlay behavior.
  *
- * @returns {Nullable<HoneyActiveOverlay>} - The registered overlay instance, or null if not registered.
+ * @returns The registered overlay instance, or null if not registered.
  */
 export declare const useRegisterHoneyOverlay: (isRegister: boolean, overlayConfig: HoneyOverlayConfig) => Nullable<HoneyActiveOverlay>;