@react-hive/honey-layout 5.2.0-beta → 5.6.0-beta

package/dist/providers/HoneyLayoutProvider.d.ts

@@ -4,8 +4,8 @@ import { UseHoneyMediaQueryOptions } from '../hooks';
 interface HoneyLayoutProviderContentProps {
     mediaQueryOptions?: UseHoneyMediaQueryOptions;
 }
-type HoneyLayoutProviderProps = HoneyLayoutProviderContentProps & {
+interface HoneyLayoutProviderProps extends HoneyLayoutProviderContentProps {
     theme: DefaultTheme;
-};
+}
 export declare const HoneyLayoutProvider: ({ theme, ...props }: PropsWithChildren<HoneyLayoutProviderProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/css.types.d.ts

@@ -1,63 +1,167 @@
 import { ExecutionContext } from 'styled-components';
 import { HoneyBreakpointName, HoneyColorKey } from './types';
+/**
+ * The types for handling CSS properties and values, focusing on dimensions, colors, media queries, and other essential CSS concepts.
+ */
 import * as CSS from 'csstype';
-export type HoneyCSSResolutionUnit = 'dpi' | 'dpcm' | 'dppx' | 'x';
-export type HoneyCSSResolutionValue = `${number}${HoneyCSSResolutionUnit}`;
+/**
+ * Represents the possible values for media query orientation.
+ *
+ * Used in responsive styles to target specific device orientations.
+ *
+ * - `'landscape'` – Width is greater than height.
+ * - `'portrait'` – Height is greater than width.
+ */
 export type HoneyCSSMediaOrientation = 'landscape' | 'portrait';
-type HoneyCSSAbsoluteDimensionUnit = 'px' | 'cm' | 'mm' | 'in' | 'pt' | 'pc';
-type HoneyCSSRelativeDimensionUnit = 'em' | 'rem' | '%' | 'vh' | 'vw' | 'vmin' | 'vmax';
+/**
+ * Represents a hexadecimal color value.
+ *
+ * Examples:
+ * - `'#ffffff'`
+ * - `'#123abc'`
+ * - `'#000'`
+ */
 export type HoneyHEXColor = `#${string}`;
+/**
+ * Represents any valid CSS color, either a named color (like `'red'`, `'blue'`)
+ * or a hexadecimal color code (like `'#ff0000'`).
+ */
 export type HoneyCSSColor = CSS.DataType.NamedColor | HoneyHEXColor;
 /**
- * Represents a CSS dimension unit, which can be either an absolute or relative.
+ * Represents absolute CSS dimension units.
+ *
+ * These units are fixed in physical measurements.
+ *
+ * - `'px'` — pixels
+ * - `'cm'` — centimeters
+ * - `'mm'` — millimeters
+ * - `'in'` — inches
+ * - `'pt'` — points
+ * - `'pc'` — picas
+ */
+type HoneyCSSAbsoluteDimensionUnit = 'px' | 'cm' | 'mm' | 'in' | 'pt' | 'pc';
+/**
+ * Represents relative CSS dimension units.
+ *
+ * These units scale depending on the context.
+ *
+ * - `'em'` — relative to the font-size of the element
+ * - `'rem'` — relative to the font-size of the root element
+ * - `'%'` — percentage of the parent element
+ * - `'vh'` — 1% of the viewport height
+ * - `'vw'` — 1% of the viewport width
+ * - `'vmin'` — 1% of the smaller dimension of the viewport
+ * - `'vmax'` — 1% of the larger dimension of the viewport
+ */
+type HoneyCSSRelativeDimensionUnit = 'em' | 'rem' | '%' | 'vh' | 'vw' | 'vmin' | 'vmax';
+/**
+ * Represents any valid CSS dimension unit, including both absolute and relative types.
  */
 export type HoneyCSSDimensionUnit = HoneyCSSAbsoluteDimensionUnit | HoneyCSSRelativeDimensionUnit;
 /**
- * Represents an array of CSS values, either 2, 3, or 4 values.
+ * Represents CSS resolution units typically used in media queries.
  *
- * @template T - Type of the value.
+ * - `'dpi'` — dots per inch
+ * - `'dpcm'` — dots per centimeter
+ * - `'dppx'` — dots per pixel (e.g., 2dppx for Retina displays)
+ * - `'x'` — resolution multiplier (e.g., 1x, 2x)
  */
-export type HoneyCSSArrayValue<T> = [T, T] | [T, T, T] | [T, T, T, T];
+export type HoneyCSSResolutionUnit = 'dpi' | 'dpcm' | 'dppx' | 'x';
+/**
+ * Represents a CSS resolution value, such as `'300dpi'`, `'2x'`, or `'1.5dppx'`.
+ */
+export type HoneyCSSResolutionValue = `${number}${HoneyCSSResolutionUnit}`;
+/**
+ * Represents a tuple of 2 to 4 values using standard CSS shorthand conventions.
+ *
+ * This type models how properties like `margin`, `padding`, `gap`, and `borderRadius`
+ * can accept multiple values to control different sides or axes.
+ *
+ * Value interpretation follows CSS shorthand behavior:
+ * - `[T, T]` → [top & bottom, left & right]
+ * - `[T, T, T]` → [top, left & right, bottom]
+ * - `[T, T, T, T]` → [top, right, bottom, left]
+ *
+ * @template T - The type of each spacing value (e.g., number, string, or token).
+ */
+export type HoneyCSSShorthandTuple<T> = [T, T] | [T, T, T] | [T, T, T, T];
 /**
- * Represents a CSS value that can be either a single value or an array of values.
+ * Represents a CSS layout value that can be a single value or a shorthand array of values.
  *
- * @template T - Type of the value.
+ * Useful for properties like `margin`, `padding`, or `borderRadius`, which allow:
+ * - A single value (applied to all sides)
+ * - A tuple of 2–4 values using standard CSS shorthand behavior
+ *
+ * Examples:
+ * - `'8px'`
+ * - `['8px', '12px']`
+ * - `['8px', '12px', '16px', '20px']`
+ *
+ * @template T - The type of each individual value.
+ */
+export type HoneyCSSMultiValue<T> = T | HoneyCSSShorthandTuple<T>;
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/steps#step-position
  */
-export type HoneyCSSMultiValue<T> = T | HoneyCSSArrayValue<T>;
 type HoneyCSSStepFunctionPosition = 'jump-start' | 'jump-end' | 'jump-none' | 'jump-both' | 'start' | 'end';
 /**
  * Defining the allowed timing functions for the transition
  */
 export type HoneyCSSTimingFunction = 'ease' | 'linear' | `linear(${string})` | `cubic-bezier(${number}, ${number}, ${number}, ${number})` | 'ease-in' | 'ease-out' | 'ease-in-out' | 'step-start' | 'step-end' | `steps(${number})` | `steps(${number}, ${HoneyCSSStepFunctionPosition})`;
 /**
- * Type representing CSS properties related to spacing and positioning.
+ * Represents CSS properties related to spacing and positioning.
+ */
+export type HoneyCSSSpacingProperty = keyof Pick<CSS.Properties, 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'top' | 'right' | 'bottom' | 'left' | 'gap' | 'rowGap' | 'columnGap'>;
+/**
+ * Represents shorthand spacing properties that support multi-value arrays.
+ *
+ * These properties accept 2–4 space-separated values
+ * to control spacing on multiple sides (e.g., top, right, bottom, left).
  */
-export type HoneyCSSDimensionProperty = keyof Pick<CSS.Properties, 'width' | 'height' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'top' | 'right' | 'bottom' | 'left' | 'gap' | 'rowGap' | 'columnGap'>;
+export type HoneyCSSShorthandSpacingProperty = keyof Pick<CSS.Properties, 'margin' | 'padding' | 'gap'>;
 /**
  * Represents a subset of CSS properties that define color-related styles.
  */
 export type HoneyCSSColorProperty = keyof Pick<CSS.Properties, 'color' | 'backgroundColor' | 'borderColor' | 'borderTopColor' | 'borderRightColor' | 'borderBottomColor' | 'borderLeftColor' | 'outlineColor' | 'textDecorationColor' | 'fill' | 'stroke'>;
 /**
- * Represents a specific CSS dimension value with a unit.
+ * Represents a numeric CSS dimension value with an optional specific unit.
+ *
+ * This type can represent:
+ * - A value with a specific CSS unit, such as `'8px'`, `'1.5rem'`, or `'100%'`.
+ * - A number without a unit, such as `'16'` (representing a unitless value).
+ * - The special value `'auto'` commonly used for flexible layout values.
+ *
+ * @template Unit - The CSS unit to use (e.g., `'px'`, `'em'`, `'rem'`).
  */
-export type HoneyCSSDimensionValue<Unit extends HoneyCSSDimensionUnit = HoneyCSSDimensionUnit> = `${number}${Unit}`;
+export type HoneyCSSDimensionValue<Unit extends HoneyCSSDimensionUnit = HoneyCSSDimensionUnit> = `${number}${Unit}` | `${number}` | 'auto';
 /**
- * Type representing numeric values for CSS dimension properties.
+ * Represents a spacing value used in layout-related CSS properties.
  *
- * If `CSSProperty` extends `HoneyCSSDimensionProperty`, this type will be a single value or an array of numbers,
- * allowing for spacing properties that can have single or multiple numeric values (e.g., margin, padding).
- * Otherwise, it results in `never`, indicating that non-distance properties are not included.
+ * Can be:
+ * - A single numeric value (e.g., `8`)
+ * - A single dimension string (e.g., `'1rem'`)
+ * - A shorthand array of 2–4 values (e.g., `[8, 12]` or `['1rem', '2rem', '1.5rem']`)
  *
- * @template CSSProperty - The key of a CSS property to check.
+ * Commonly used for properties like `margin`, `padding`, `gap`, etc.
  */
-export type HoneyCSSDimensionNumericValue<CSSProperty extends keyof CSS.Properties> = CSSProperty extends HoneyCSSDimensionProperty ? HoneyCSSMultiValue<number> : never;
+export type HoneyCSSSpacingValue = HoneyCSSMultiValue<number | HoneyCSSDimensionValue>;
 /**
- * Represents a shorthand CSS dimension value for 2, 3, or 4 values with the same unit.
+ * Converts a tuple of spacing values into a valid CSS shorthand string using a consistent unit.
+ *
+ * Acts as a type-level converter that transforms 2–4 spacing values (e.g., `[8, 12]`) into a space-separated
+ * CSS string (e.g., `'8px 12px'`), suitable for shorthand-compatible properties like `margin`, `padding`, or `gap`.
+ *
+ * This type enforces unit consistency across all values and is useful for generating precise, typed spacing strings.
  *
- * @template Value - Type of the value.
- * @template Unit - CSS length unit.
+ * Example outputs:
+ * - `'8px 12px'` for `[8, 12]`
+ * - `'1rem 2rem 1.5rem'` for `[1, 2, 1.5]`
+ * - `'4px 8px 12px 16px'` for `[4, 8, 12, 16]`
+ *
+ * @template Tuple - A tuple of 2 to 4 values to be converted into a CSS shorthand string.
+ * @template Unit - The CSS unit to apply to each value (e.g., `'px'`, `'rem'`, `'%'`).
  */
-export type HoneyCSSDimensionShortHandValue<Value, Unit extends HoneyCSSDimensionUnit> = Value extends [unknown, unknown] ? `${HoneyCSSDimensionValue<Unit>} ${HoneyCSSDimensionValue<Unit>}` : Value extends [unknown, unknown, unknown] ? `${HoneyCSSDimensionValue<Unit>} ${HoneyCSSDimensionValue<Unit>} ${HoneyCSSDimensionValue<Unit>}` : Value extends [unknown, unknown, unknown, unknown] ? `${HoneyCSSDimensionValue<Unit>} ${HoneyCSSDimensionValue<Unit>} ${HoneyCSSDimensionValue<Unit>} ${HoneyCSSDimensionValue<Unit>}` : never;
+export type HoneyCSSShorthandDimensionOutput<Tuple extends HoneyCSSShorthandTuple<unknown>, Unit extends HoneyCSSDimensionUnit> = Tuple extends [unknown, unknown] ? `${HoneyCSSDimensionValue<Unit>} ${HoneyCSSDimensionValue<Unit>}` : Tuple extends [unknown, unknown, unknown] ? `${HoneyCSSDimensionValue<Unit>} ${HoneyCSSDimensionValue<Unit>} ${HoneyCSSDimensionValue<Unit>}` : Tuple extends [unknown, unknown, unknown, unknown] ? `${HoneyCSSDimensionValue<Unit>} ${HoneyCSSDimensionValue<Unit>} ${HoneyCSSDimensionValue<Unit>} ${HoneyCSSDimensionValue<Unit>}` : never;
 /**
  * A type representing a function that returns a value for a specific CSS property based on the provided theme.
  *
@@ -65,13 +169,18 @@ export type HoneyCSSDimensionShortHandValue<Value, Unit extends HoneyCSSDimensio
  */
 type HoneyCSSPropertyValueFn<CSSProperty extends keyof CSS.Properties> = (context: ExecutionContext) => CSS.Properties[CSSProperty];
 /**
- * Type representing possible values for CSS color properties.
+ * Represents a non-responsive (raw) CSS property value for a specific CSS property.
  *
- * This type can be either a color from the theme or a valid CSS color value.
+ * This type adapts based on the nature of the property:
  *
- * @template CSSProperty - The key of a CSS property to check.
+ * - For color-related properties, it accepts theme tokens or raw color values.
+ * - For shorthand spacing properties (`margin`, `padding`), it supports multi-value arrays.
+ * - For other spacing-related properties, it allows numeric or token-based values.
+ * - For all other properties, it falls back to the standard CSS value type.
+ *
+ * @template CSSProperty - The name of the CSS property.
  */
-type HoneyCSSColorValue<CSSProperty extends keyof CSS.Properties> = CSSProperty extends HoneyCSSColorProperty ? HoneyCSSColor | HoneyColorKey : CSS.Properties[CSSProperty] | HoneyCSSDimensionNumericValue<CSSProperty>;
+type HoneyRawCSSPropertyValue<CSSProperty extends keyof CSS.Properties> = CSSProperty extends HoneyCSSColorProperty ? HoneyCSSColor | HoneyColorKey : CSSProperty extends HoneyCSSShorthandSpacingProperty ? HoneyCSSSpacingValue : CSSProperty extends HoneyCSSSpacingProperty ? number | HoneyCSSDimensionValue | CSS.Globals : CSS.Properties[CSSProperty];
 /**
  * Represents a responsive CSS property value for a specific CSS property.
  *
@@ -83,7 +192,7 @@ type HoneyCSSColorValue<CSSProperty extends keyof CSS.Properties> = CSSProperty
  *
  * @template CSSProperty - The key of a CSS property for which values are defined.
  */
-type HoneyResponsiveCSSPropertyValue<CSSProperty extends keyof CSS.Properties> = Partial<Record<HoneyBreakpointName, HoneyCSSColorValue<CSSProperty> | HoneyCSSPropertyValueFn<CSSProperty>>>;
+type HoneyResponsiveCSSPropertyValue<CSSProperty extends keyof CSS.Properties> = Partial<Record<HoneyBreakpointName, HoneyRawCSSPropertyValue<CSSProperty> | HoneyCSSPropertyValueFn<CSSProperty>>>;
 /**
  * Represents a CSS property value that can be either a single value or a responsive value.
  *
@@ -95,7 +204,7 @@ type HoneyResponsiveCSSPropertyValue<CSSProperty extends keyof CSS.Properties> =
  *
  * @template CSSProperty - The key of a CSS property to check.
  */
-export type HoneyCSSPropertyValue<CSSProperty extends keyof CSS.Properties> = HoneyCSSColorValue<CSSProperty> | HoneyCSSPropertyValueFn<CSSProperty> | HoneyResponsiveCSSPropertyValue<CSSProperty>;
+export type HoneyCSSPropertyValue<CSSProperty extends keyof CSS.Properties> = HoneyRawCSSPropertyValue<CSSProperty> | HoneyCSSPropertyValueFn<CSSProperty> | HoneyResponsiveCSSPropertyValue<CSSProperty>;
 /**
  * A utility type to add a `$` prefix to a given CSS property name.
  *

package/dist/types/dom.types.d.ts

@@ -1,5 +1,9 @@
 /**
  * A union type representing commonly used keyboard key codes.
- * These key codes can be used to identify specific keyboard inputs in event handling.
+ * These codes follow the `KeyboardEvent.code` specification, not `key`.
+ *
+ * These key codes are useful for identifying specific keyboard inputs during event handling.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
  */
-export type HoneyKeyboardEventCode = 'Escape' | 'ArrowRight' | 'ArrowLeft' | 'ArrowUp' | 'ArrowDown' | 'Enter' | 'NumpadEnter' | 'Tab' | 'Space';
+export type HoneyKeyboardEventCode = 'Escape' | 'Tab' | 'CapsLock' | 'ShiftLeft' | 'ShiftRight' | 'ControlLeft' | 'ControlRight' | 'AltLeft' | 'AltRight' | 'MetaLeft' | 'MetaRight' | 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End' | 'PageUp' | 'PageDown' | 'Enter' | 'NumpadEnter' | 'Backspace' | 'Delete' | 'Insert' | 'Space' | 'F1' | 'F2' | 'F3' | 'F4' | 'F5' | 'F6' | 'F7' | 'F8' | 'F9' | 'F10' | 'F11' | 'F12' | 'KeyA' | 'KeyB' | 'KeyC' | 'KeyD' | 'KeyE' | 'KeyF' | 'KeyG' | 'KeyH' | 'KeyI' | 'KeyJ' | 'KeyK' | 'KeyL' | 'KeyM' | 'KeyN' | 'KeyO' | 'KeyP' | 'KeyQ' | 'KeyR' | 'KeyS' | 'KeyT' | 'KeyU' | 'KeyV' | 'KeyW' | 'KeyX' | 'KeyY' | 'KeyZ' | 'Digit0' | 'Digit1' | 'Digit2' | 'Digit3' | 'Digit4' | 'Digit5' | 'Digit6' | 'Digit7' | 'Digit8' | 'Digit9' | 'Numpad0' | 'Numpad1' | 'Numpad2' | 'Numpad3' | 'Numpad4' | 'Numpad5' | 'Numpad6' | 'Numpad7' | 'Numpad8' | 'Numpad9' | 'NumpadAdd' | 'NumpadSubtract' | 'NumpadMultiply' | 'NumpadDivide' | 'NumpadDecimal' | 'Minus' | 'Equal' | 'BracketLeft' | 'BracketRight' | 'Backslash' | 'Semicolon' | 'Quote' | 'Backquote' | 'Comma' | 'Period' | 'Slash';

package/dist/{utils.d.ts → utils/data-utils.d.ts}

@@ -1,82 +1,4 @@
-import { HoneyCSSMediaRule, HoneyFlattenedItem, HoneyHEXColor, KeysWithArrayValues, KeysWithNonArrayValues, KeysWithStringValues } from './types';
-export declare const camelToDashCase: (inputString: string) => string;
-/**
- * Splits a string into an array of filtered from redundant spaces words.
- *
- * @param inputString - The input string to be split.
- *
- * @returns An array of words from the input string.
- */
-export declare const splitStringIntoWords: (inputString: string) => string[];
-/**
- * Converts a pixel value to rem.
- *
- * @param px - The pixel value to be converted to rem.
- * @param base - The base value for conversion. Default is 16, which is the typical root font size.
- *
- * @returns The value in rem as a string.
- */
-export declare const pxToRem: (px: number, base?: number) => string;
-/**
- * Calculates the Euclidean distance between two points in 2D space.
- *
- * @param startX - The X coordinate of the starting point.
- * @param startY - The Y coordinate of the starting point.
- * @param endX - The X coordinate of the ending point.
- * @param endY - The Y coordinate of the ending point.
- *
- * @returns The Euclidean distance between the two points.
- */
-export declare const calculateEuclideanDistance: (startX: number, startY: number, endX: number, endY: number) => number;
-/**
- * Calculates the moving speed.
- *
- * @param delta - The change in position (distance).
- * @param elapsedTime - The time taken to move the distance.
- *
- * @returns The calculated speed, which is the absolute value of delta divided by elapsed time.
- */
-export declare const calculateMovingSpeed: (delta: number, elapsedTime: number) => number;
-/**
- * Calculates the specified percentage of a given value.
- *
- * @param value - The value to calculate the percentage of.
- * @param percentage - The percentage to calculate.
- *
- * @returns The calculated percentage of the value.
- */
-export declare const calculatePercentage: (value: number, percentage: number) => number;
-/**
- * Converts a 3-character or 6-character HEX color code to an 8-character HEX with alpha (RRGGBBAA) format.
- *
- * @param hex - The 3-character or 6-character HEX color code (e.g., "#RGB" or "#RRGGBB" or "RGB" or "RRGGBB").
- * @param alpha - The alpha transparency value between 0 (fully transparent) and 1 (fully opaque).
- *
- * @throws {Error} If alpha value is not between 0 and 1, or if the hex code is invalid.
- *
- * @returns The 8-character HEX with alpha (RRGGBBAA) format color code, or null if input is invalid.
- */
-export declare const convertHexToHexWithAlpha: (hex: string, alpha: number) => HoneyHEXColor;
-/**
- * Builds a media query string based on the provided options.
- *
- * @param rules - Conditions for the media query.
- *
- * @returns The generated media query string.
- */
-export declare const media: (rules: HoneyCSSMediaRule[]) => string;
-interface HTMLElementTransformationValues {
-    translateX: number;
-    translateY: number;
-}
-/**
- * Get various transformation values from the transformation matrix of an element.
- *
- * @param element - The element with a transformation applied.
- *
- * @returns An object containing transformation values.
- */
-export declare const getTransformationValues: (element: HTMLElement) => HTMLElementTransformationValues;
+import { HoneyFlattenedItem, KeysWithArrayValues, KeysWithNonArrayValues, KeysWithStringValues } from '../types';
 /**
  * Recursively converts a nested list structure into a flat list. It excludes the nested list key from the result
  * while adding hierarchical metadata, such as `depthLevel`, `parentId`, and `totalNestedItems` to each flattened item.
@@ -167,4 +89,3 @@ export declare const filterFlattenedItems: <OriginItem extends object, NestedLis
  * ```
  */
 export declare const searchFlattenedItems: <OriginItem extends object, NestedListKey extends string>(flattenedItems: HoneyFlattenedItem<OriginItem, NestedListKey>[], itemIdKey: KeysWithNonArrayValues<OriginItem>, valueKey: KeysWithStringValues<OriginItem>, searchQuery: string) => HoneyFlattenedItem<OriginItem, NestedListKey>[];
-export {};

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './utils';
+export * from './data-utils';

package/dist/utils/utils.d.ts

@@ -0,0 +1,80 @@
+import { HoneyCSSMediaRule, HoneyHEXColor } from '../types';
+export declare const camelToDashCase: (inputString: string) => string;
+/**
+ * Splits a string into an array of filtered from redundant spaces words.
+ *
+ * @param inputString - The input string to be split.
+ *
+ * @returns An array of words from the input string.
+ */
+export declare const splitStringIntoWords: (inputString: string) => string[];
+/**
+ * Converts a pixel value to rem.
+ *
+ * @param px - The pixel value to be converted to rem.
+ * @param base - The base value for conversion. Default is 16, which is the typical root font size.
+ *
+ * @returns The value in rem as a string.
+ */
+export declare const pxToRem: (px: number, base?: number) => string;
+/**
+ * Calculates the Euclidean distance between two points in 2D space.
+ *
+ * @param startX - The X coordinate of the starting point.
+ * @param startY - The Y coordinate of the starting point.
+ * @param endX - The X coordinate of the ending point.
+ * @param endY - The Y coordinate of the ending point.
+ *
+ * @returns The Euclidean distance between the two points.
+ */
+export declare const calculateEuclideanDistance: (startX: number, startY: number, endX: number, endY: number) => number;
+/**
+ * Calculates the moving speed.
+ *
+ * @param delta - The change in position (distance).
+ * @param elapsedTime - The time taken to move the distance.
+ *
+ * @returns The calculated speed, which is the absolute value of delta divided by elapsed time.
+ */
+export declare const calculateMovingSpeed: (delta: number, elapsedTime: number) => number;
+/**
+ * Calculates the specified percentage of a given value.
+ *
+ * @param value - The value to calculate the percentage of.
+ * @param percentage - The percentage to calculate.
+ *
+ * @returns The calculated percentage of the value.
+ */
+export declare const calculatePercentage: (value: number, percentage: number) => number;
+/**
+ * Converts a 3-character or 6-character HEX color code to an 8-character HEX with alpha (RRGGBBAA) format.
+ *
+ * @param hex - The 3-character or 6-character HEX color code (e.g., "#RGB" or "#RRGGBB" or "RGB" or "RRGGBB").
+ * @param alpha - The alpha transparency value between 0 (fully transparent) and 1 (fully opaque).
+ *
+ * @throws {Error} If alpha value is not between 0 and 1, or if the hex code is invalid.
+ *
+ * @returns The 8-character HEX with alpha (RRGGBBAA) format color code, or null if input is invalid.
+ */
+export declare const convertHexToHexWithAlpha: (hex: string, alpha: number) => HoneyHEXColor;
+/**
+ * Builds a media query string based on the provided options.
+ *
+ * @param rules - Conditions for the media query.
+ *
+ * @returns The generated media query string.
+ */
+export declare const media: (rules: HoneyCSSMediaRule[]) => string;
+interface HTMLElementTransformationValues {
+    translateX: number;
+    translateY: number;
+}
+/**
+ * Get various transformation values from the transformation matrix of an element.
+ *
+ * @param element - The element with a transformation applied.
+ *
+ * @returns An object containing transformation values.
+ */
+export declare const getTransformationValues: (element: HTMLElement) => HTMLElementTransformationValues;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-hive/honey-layout",
-  "version": "5.2.0-beta",
+  "version": "5.6.0-beta",
   "description": "",
   "keywords": [
     "react",
@@ -33,46 +33,50 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^6.0.0",
     "styled-components": "^6.0.0"
   },
   "dependencies": {
     "@emotion/is-prop-valid": "1.3.1",
-    "@floating-ui/react": "0.27.6",
+    "@floating-ui/react": "0.27.7",
     "@mdx-js/react": "3.1.0",
     "csstype": "3.1.3",
     "highlight.js": "11.11.1",
     "lodash.merge": "4.6.2",
-    "lodash.throttle": "4.1.1"
+    "lodash.throttle": "4.1.1",
+    "react-router-dom": "6.30.0"
   },
   "devDependencies": {
-    "@eslint/js": "9.22.0",
+    "@eslint/js": "9.24.0",
     "@mdx-js/rollup": "3.1.0",
-    "@testing-library/react": "16.2.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.3.0",
     "@types/jest": "29.5.14",
     "@types/lodash.merge": "4.6.9",
     "@types/lodash.throttle": "4.1.9",
     "@types/mdx": "2.0.13",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "4.3.4",
-    "eslint": "9.23.0",
-    "eslint-plugin-react": "7.37.4",
+    "eslint": "9.24.0",
+    "eslint-plugin-react": "7.37.5",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "prettier": "3.5.3",
-    "ts-jest": "29.3.0",
-    "typescript": "5.8.2",
-    "typescript-eslint": "8.29.0",
-    "vite": "6.2.5",
+    "ts-jest": "29.3.2",
+    "typescript": "5.8.3",
+    "typescript-eslint": "8.30.0",
+    "vite": "6.2.6",
     "vite-plugin-checker": "0.9.1",
     "vite-plugin-dts": "4.5.3"
   },
   "jest": {
     "preset": "ts-jest",
     "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest-setup.ts"
+    ],
     "testMatch": [
-      "**/src/**/__tests__/**/*.tsx"
+      "**/src/**/__tests__/**/*.spec.ts?(x)"
     ]
   },
   "browserslist": [

package/dist/components/HoneyBox.d.ts

@@ -1,10 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { StyledTarget } from 'styled-components/dist/types';
-import { HoneyPrefixedCSSProperties, HoneyEffectResultFn } from '../types';
-export interface HoneyBoxProps extends HoneyPrefixedCSSProperties {
-    as?: StyledTarget<'web'>;
-    effects?: HoneyEffectResultFn<object>[];
-}
-type HoneyBoxInnerProps = HTMLAttributes<HTMLDivElement> & HoneyBoxProps;
-export declare const HoneyBox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HoneyBoxInnerProps>> & string;
-export {};

package/dist/components/HoneyLoopingList/HoneyLoopingList.d.ts

@@ -1,12 +0,0 @@
-import { default as React } from 'react';
-import { HoneyBoxProps } from '../HoneyBox';
-import { HoneyListItem, HoneyListGenericProps } from '../HoneyList';
-type HoneyLoopingListDirection = 'vertical' | 'horizontal';
-export declare const HoneyLoopingListStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof HoneyBoxProps> & React.HTMLAttributes<HTMLDivElement> & HoneyBoxProps, never>> & string;
-export declare const HoneyLoopingListItemStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-interface HoneyLoopingListProps<Item extends HoneyListItem> extends HoneyBoxProps, HoneyListGenericProps<Item> {
-    activeItemIndex: number;
-    direction?: HoneyLoopingListDirection;
-}
-export declare const HoneyLoopingList: <Item extends HoneyListItem>({ children, items: originalItems, itemKey, activeItemIndex, direction, ...props }: HoneyLoopingListProps<Item>) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/HoneyLoopingList/index.d.ts

@@ -1 +0,0 @@
-export * from './HoneyLoopingList';

package/dist/hooks/use-honey-infinite-scroll.d.ts

@@ -1,6 +0,0 @@
-import { Nullable } from '../types';
-export type UseHoneyInfiniteScrollOnFetchMoreItems = () => void;
-export declare const useHoneyInfiniteScroll: <ScrollableContainerElement extends HTMLElement, TargetElement extends HTMLElement>(containerElement: Nullable<ScrollableContainerElement>, onFetchMoreItems: UseHoneyInfiniteScrollOnFetchMoreItems) => {
-    scrollableContainerRef: (scrollableContainer: Nullable<ScrollableContainerElement>) => void;
-    targetRef: (target: Nullable<TargetElement>) => void;
-};

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

@@ -1,21 +0,0 @@
-import { RefObject } from 'react';
-import { Nullable } from '../types';
-import { HoneyDragHandlers } from './use-honey-drag';
-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 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: RefObject<Nullable<Element>>, { availableWindowPercentage, onStartDrag, onEndDrag, }?: SyntheticScrollableContainerOptions<Element>) => void;
-export {};