@react-hive/honey-layout 6.5.2 → 8.1.0

package/dist/providers/HoneyLayoutProvider.d.ts

@@ -1,8 +1,8 @@
 import { PropsWithChildren } from 'react';
-import { HoneyStyleContextValue } from '@react-hive/honey-style';
+import { HoneyStyleProviderProps } from '@react-hive/honey-style';
 import { UseHoneyMediaQueryOptions } from '../hooks';
-interface HoneyLayoutProviderProps extends HoneyStyleContextValue {
+interface HoneyLayoutProviderProps extends HoneyStyleProviderProps {
     mediaQueryOptions?: UseHoneyMediaQueryOptions;
 }
-export declare const HoneyLayoutProvider: ({ children, theme, mediaQueryOptions, }: PropsWithChildren<HoneyLayoutProviderProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const HoneyLayoutProvider: ({ children, theme, mediaQueryOptions, ...props }: PropsWithChildren<HoneyLayoutProviderProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,37 +1,8 @@
-import { HoneyCSSDimensionUnit, HoneyBreakpointName, HoneyCSSDimensionValue, HoneyStyledContext, HoneyColor } from '@react-hive/honey-style';
+import { HoneyBreakpointName, HoneyStyledContext, HoneyColor, HoneyCSSSpacingValue, HoneyCSSColorProperty, HoneyCSSSpacingProperty, HoneyCSSShorthandSpacingProperty, HoneyRawCSSSpacingValue } from '@react-hive/honey-style';
 /**
  * The types for handling CSS properties and values, focusing on dimensions, colors, media queries, and other essential CSS concepts.
  */
 import * as CSS from 'csstype';
-/**
- * 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 layout value that can be a single value or a shorthand array of values.
- *
- * 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
  */
@@ -40,56 +11,12 @@ type HoneyCSSStepFunctionPosition = 'jump-start' | 'jump-end' | 'jump-none' | 'j
  * 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})`;
-/**
- * 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 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 spacing value used in layout-related CSS properties.
- *
- * 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']`)
- *
- * Commonly used for properties like `margin`, `padding`, `gap`, etc.
- */
-export type HoneyCSSSpacingValue = HoneyCSSMultiValue<number | HoneyCSSDimensionValue>;
-/**
- * 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.
- *
- * 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 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.
  *
  * @template CSSProperty - The CSS property this function will generate a value for.
  */
 type HoneyCSSPropertyValueFn<CSSProperty extends keyof CSS.Properties> = (context: HoneyStyledContext<object>) => CSS.Properties[CSSProperty];
-type HoneyRawCSSSpacingValue = number | HoneyCSSDimensionValue | CSS.Globals;
 /**
  * Represents a non-responsive (raw) CSS property value for a specific CSS property.
  *
@@ -134,7 +61,7 @@ export type HoneyCSSPropertyValue<CSSProperty extends keyof CSS.Properties> = Ho
  *
  * @template CSSProperty - The string type representing a CSS property name.
  */
-export type HoneyPrefixedCSSProperty<CSSProperty extends keyof CSS.Properties = keyof CSS.Properties> = `$${CSSProperty}`;
+export type Honey$PrefixedCSSProperty<CSSProperty extends keyof CSS.Properties = keyof CSS.Properties> = `$${CSSProperty}`;
 /**
  * Represents an object where each key is a prefixed CSS property (with a `$` prefix).
  *
@@ -146,7 +73,7 @@ export type HoneyPrefixedCSSProperty<CSSProperty extends keyof CSS.Properties =
  * };
  * ```
  */
-export type HoneyPrefixedCSSProperties = {
-    [CSSProperty in keyof CSS.Properties as HoneyPrefixedCSSProperty<CSSProperty>]?: HoneyCSSPropertyValue<CSSProperty>;
+export type Honey$PrefixedCSSProperties = {
+    [CSSProperty in keyof CSS.Properties as Honey$PrefixedCSSProperty<CSSProperty>]?: HoneyCSSPropertyValue<CSSProperty>;
 };
 export {};

package/dist/utils/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-hive/honey-layout",
-  "version": "6.5.2",
+  "version": "8.1.0",
   "description": "",
   "keywords": [
     "react",
@@ -33,22 +33,23 @@
     "dist"
   ],
   "peerDependencies": {
-    "@react-hive/honey-style": "^1.6.0",
+    "@react-hive/honey-style": "^2.7.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.7.1",
-    "@floating-ui/react": "0.27.12",
+    "@floating-ui/dom": "1.7.2",
+    "@floating-ui/react": "0.27.13",
     "@mdx-js/react": "3.1.0",
+    "@react-hive/honey-utils": "1.2.0",
     "csstype": "3.1.3",
     "highlight.js": "11.11.1",
     "lodash.merge": "4.6.2",
     "lodash.throttle": "4.1.1",
-    "react-router-dom": "6.30.0"
+    "react-router-dom": "6.30.1"
   },
   "devDependencies": {
-    "@eslint/js": "9.29.0",
+    "@eslint/js": "9.31.0",
     "@mdx-js/rollup": "3.1.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
@@ -56,22 +57,22 @@
     "@types/lodash.merge": "4.6.9",
     "@types/lodash.throttle": "4.1.9",
     "@types/mdx": "2.0.13",
-    "@types/node": "22.15.32",
+    "@types/node": "22.16.4",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "4.5.1",
-    "eslint": "9.29.0",
+    "@vitejs/plugin-react": "4.6.0",
+    "eslint": "9.31.0",
     "eslint-plugin-react": "7.37.5",
     "husky": "9.1.7",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "prettier": "3.5.3",
-    "ts-jest": "29.3.4",
+    "prettier": "3.6.2",
+    "ts-jest": "29.4.0",
     "tsx": "4.20.3",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.35.0",
-    "vite": "6.3.5",
-    "vite-plugin-checker": "0.9.3",
+    "typescript-eslint": "8.37.0",
+    "vite": "7.0.5",
+    "vite-plugin-checker": "0.10.0",
     "vite-plugin-dts": "4.5.4"
   },
   "jest": {

package/dist/constants.d.ts

@@ -1,3 +0,0 @@
-import { HoneyCSSColorProperty, HoneyCSSSpacingProperty } from './types';
-export declare const CSS_SPACING_PROPERTIES: readonly HoneyCSSSpacingProperty[];
-export declare const CSS_COLOR_PROPERTIES: readonly HoneyCSSColorProperty[];

package/dist/utils/utils.d.ts

@@ -1,72 +0,0 @@
-import { HoneyHEXColor } from '@react-hive/honey-style';
-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;
-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 {};