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

package/dist/providers/HoneyLayoutProvider.d.ts

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

package/dist/providers/HoneyLayoutThemeOverride.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-import { DefaultTheme } from 'styled-components';
+import { HoneyTheme } from '@react-hive/honey-style';
 interface HoneyLayoutThemeOverrideProps {
-    theme: DefaultTheme;
+    theme: HoneyTheme;
 }
 /**
  * Provides a theme override context to its children.

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

@@ -1,5 +1,4 @@
-import { ExecutionContext } from 'styled-components';
-import { HoneyBreakpointName, HoneyColorKey } from './types';
+import { HoneyCSSDimensionUnit, HoneyBreakpointName, HoneyCSSDimensionValue, HoneyStyledContext, HoneyColor } from '@react-hive/honey-style';
 /**
  * The types for handling CSS properties and values, focusing on dimensions, colors, media queries, and other essential CSS concepts.
  */
@@ -13,51 +12,6 @@ import * as CSS from 'csstype';
  * - `'portrait'` – Height is greater than width.
  */
 export type HoneyCSSMediaOrientation = 'landscape' | 'portrait';
-/**
- * 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 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 CSS resolution units typically used in media queries.
  *
@@ -123,17 +77,6 @@ export type HoneyCSSShorthandSpacingProperty = keyof Pick<CSS.Properties, 'margi
  * 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 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}` | `${number}` | 'auto';
 /**
  * Represents a spacing value used in layout-related CSS properties.
  *
@@ -167,7 +110,8 @@ export type HoneyCSSShorthandDimensionOutput<Tuple extends HoneyCSSShorthandTupl
  *
  * @template CSSProperty - The CSS property this function will generate a value for.
  */
-type HoneyCSSPropertyValueFn<CSSProperty extends keyof CSS.Properties> = (context: ExecutionContext) => CSS.Properties[CSSProperty];
+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.
  *
@@ -180,7 +124,7 @@ type HoneyCSSPropertyValueFn<CSSProperty extends keyof CSS.Properties> = (contex
  *
  * @template CSSProperty - The name of the CSS property.
  */
-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];
+type HoneyRawCSSPropertyValue<CSSProperty extends keyof CSS.Properties> = CSSProperty extends HoneyCSSColorProperty ? HoneyColor : CSSProperty extends HoneyCSSShorthandSpacingProperty ? HoneyCSSSpacingValue : CSSProperty extends HoneyCSSSpacingProperty ? HoneyRawCSSSpacingValue : CSS.Properties[CSSProperty];
 /**
  * Represents a responsive CSS property value for a specific CSS property.
  *
@@ -192,7 +136,9 @@ type HoneyRawCSSPropertyValue<CSSProperty extends keyof CSS.Properties> = CSSPro
  *
  * @template CSSProperty - The key of a CSS property for which values are defined.
  */
-type HoneyResponsiveCSSPropertyValue<CSSProperty extends keyof CSS.Properties> = Partial<Record<HoneyBreakpointName, HoneyRawCSSPropertyValue<CSSProperty> | HoneyCSSPropertyValueFn<CSSProperty>>>;
+type HoneyResponsiveCSSPropertyValue<CSSProperty extends keyof CSS.Properties> = {
+    [K in HoneyBreakpointName]?: HoneyRawCSSPropertyValue<CSSProperty> | HoneyCSSPropertyValueFn<CSSProperty>;
+};
 /**
  * Represents a CSS property value that can be either a single value or a responsive value.
  *
@@ -212,7 +158,7 @@ export type HoneyCSSPropertyValue<CSSProperty extends keyof CSS.Properties> = Ho
  */
 export type HoneyPrefixedCSSProperty<CSSProperty extends keyof CSS.Properties = keyof CSS.Properties> = `$${CSSProperty}`;
 /**
- * Represents an object where each key is a prefixed CSS property (with a `$` prefix),
+ * Represents an object where each key is a prefixed CSS property (with a `$` prefix).
  *
  * Example:
  * ```
@@ -226,21 +172,31 @@ export type HoneyPrefixedCSSProperties = {
     [CSSProperty in keyof CSS.Properties as HoneyPrefixedCSSProperty<CSSProperty>]?: HoneyCSSPropertyValue<CSSProperty>;
 };
 /**
- * Options for CSS @media at-rule.
+ * Properties for dimension-based media queries
  */
-export interface HoneyCSSMediaRule {
-    operator?: 'not' | 'only';
-    mediaType?: 'all' | 'print' | 'screen' | 'speech';
+interface HoneyCSSMediaDimensionProperties {
     width?: HoneyCSSDimensionValue;
     minWidth?: HoneyCSSDimensionValue;
     maxWidth?: HoneyCSSDimensionValue;
     height?: HoneyCSSDimensionValue;
     minHeight?: HoneyCSSDimensionValue;
     maxHeight?: HoneyCSSDimensionValue;
-    orientation?: HoneyCSSMediaOrientation;
+}
+/**
+ * Properties for resolution-based media queries
+ */
+interface HoneyCSSMediaResolutionProperties {
     resolution?: HoneyCSSResolutionValue;
     minResolution?: HoneyCSSResolutionValue;
     maxResolution?: HoneyCSSResolutionValue;
+}
+/**
+ * Options for CSS @media at-rule.
+ */
+export interface HoneyCSSMediaRule extends HoneyCSSMediaDimensionProperties, HoneyCSSMediaResolutionProperties {
+    operator?: 'not' | 'only';
+    mediaType?: 'all' | 'print' | 'screen' | 'speech';
+    orientation?: HoneyCSSMediaOrientation;
     update?: 'none' | 'slow' | 'fast';
 }
 export {};

package/dist/types/data.types.d.ts

@@ -1,8 +1,8 @@
 import { RefObject } from 'react';
-import { StyleFunction } from 'styled-components';
+import { HoneyStyledFunction } from '@react-hive/honey-style';
 import { KeysWithNonArrayValues, Nullable } from './utility.types';
 import { HoneyKeyboardEventCode } from './dom.types';
-export type HoneyEffectResultFn<Props extends object> = StyleFunction<Props>;
+export type HoneyEffectResultFn<Props extends object> = HoneyStyledFunction<Props>;
 export type HoneyEffect<Config = unknown, Props extends object = object> = (config: Config) => HoneyEffectResultFn<Props>;
 export type HoneyOverlayId = string;
 export type HoneyOverlayEventType = 'keyup';

package/dist/types/index.d.ts

@@ -2,5 +2,4 @@ export * from './utility.types';
 export * from './data.types';
 export * from './state.types';
 export * from './css.types';
-export * from './types';
 export * from './dom.types';

package/dist/utils/utils.d.ts

@@ -1,4 +1,5 @@
-import { HoneyCSSMediaRule, HoneyHEXColor } from '../types';
+import { HoneyHEXColor } from '@react-hive/honey-style';
+import { HoneyCSSMediaRule } from '../types';
 export declare const camelToDashCase: (inputString: string) => string;
 /**
  * Splits a string into an array of filtered from redundant spaces words.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-hive/honey-layout",
-  "version": "5.6.0-beta",
+  "version": "6.2.0",
   "description": "",
   "keywords": [
     "react",
@@ -19,26 +19,28 @@
   "author": "Mykhailo Aliinyk <m.aliynik@gmail.com>",
   "license": "MIT",
   "scripts": {
+    "prepare": "husky",
+    "clean": "rm -rf dist",
     "start": "vite serve --config vite-docs.config.ts",
     "test": "jest --collect-coverage",
     "build:lib": "vite build --config vite-lib.config.ts",
-    "build:docs": "vite build --config vite-docs.config.ts"
+    "build:docs": "vite build --config vite-docs.config.ts",
+    "diagnostics": "tsx scripts/collect-diagnostics.ts"
   },
-  "type": "module",
-  "main": "dist/index.js",
+  "main": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "styled-components": "^6.0.0"
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "1.3.1",
-    "@floating-ui/react": "0.27.7",
+    "@floating-ui/dom": "1.7.0",
+    "@floating-ui/react": "0.27.8",
     "@mdx-js/react": "3.1.0",
+    "@react-hive/honey-style": "1.3.0",
     "csstype": "3.1.3",
     "highlight.js": "11.11.1",
     "lodash.merge": "4.6.2",
@@ -46,7 +48,7 @@
     "react-router-dom": "6.30.0"
   },
   "devDependencies": {
-    "@eslint/js": "9.24.0",
+    "@eslint/js": "9.26.0",
     "@mdx-js/rollup": "3.1.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
@@ -54,19 +56,22 @@
     "@types/lodash.merge": "4.6.9",
     "@types/lodash.throttle": "4.1.9",
     "@types/mdx": "2.0.13",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "4.3.4",
-    "eslint": "9.24.0",
+    "@types/node": "22.15.17",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.4",
+    "@vitejs/plugin-react": "4.4.1",
+    "eslint": "9.26.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.2",
+    "tsx": "4.19.4",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.30.0",
-    "vite": "6.2.6",
-    "vite-plugin-checker": "0.9.1",
+    "typescript-eslint": "8.32.1",
+    "vite": "6.3.5",
+    "vite-plugin-checker": "0.9.3",
     "vite-plugin-dts": "4.5.3"
   },
   "jest": {

package/dist/__mocks__/index.d.ts

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

package/dist/__mocks__/theme-mock.d.ts

@@ -1,2 +0,0 @@
-import { HoneyTheme } from '../types';
-export declare const themeMock: HoneyTheme;