@react-hive/honey-layout 1.1.0 → 2.2.0

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './HoneyBox';
+export * from './HoneyFlexBox';
 export * from './HoneyGrid';
 export * from './HoneyGridColumn';
 export * from './HoneyList';

package/dist/constants.d.ts

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

package/dist/helpers.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import { FlattenSimpleInterpolation } from 'styled-components';
-import { HoneyBreakpointName, HoneyCSSArrayValue, HoneyCSSDimensionShortHandValue, HoneyCSSDimensionUnit, HoneyCSSMultiValue, HoneyCSSMediaRule, HoneySpacings, HoneyThemedProps, HoneyColorKey, HoneyFontName, HoneyCSSColor, HoneyDimensionName, Nullable, HoneyCSSProperties, HoneyBreakpoints, HoneyScreenState, HoneyCSSDimensionValue } from './types';
+import { ExecutionContext, StyleFunction, css } from 'styled-components';
+import { Nullable, HoneyBreakpointName, HoneyCSSArrayValue, HoneyCSSDimensionShortHandValue, HoneyCSSDimensionUnit, HoneyCSSMultiValue, HoneyCSSMediaRule, HoneySpacings, HoneyColorKey, HoneyFontName, HoneyCSSColor, HoneyDimensionName, HoneyPrefixedCSSProperties, HoneyBreakpoints, HoneyScreenState, HoneyCSSDimensionValue } from './types';
 /**
  * Conditional type to determine the return type of the `resolveSpacing` function.
  *
@@ -23,48 +23,54 @@ export type ResolveSpacingResult<MultiValue extends HoneyCSSMultiValue<number>,
  * @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 {(props: HoneyThemedProps) => ResolveSpacingResult<MultiValue, Unit>} - A function that takes `HoneyThemedProps`
+ * @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.
  */
-export declare const resolveSpacing: <MultiValue extends HoneyCSSMultiValue<number>, Unit extends Nullable<HoneyCSSDimensionUnit> = "px">(value: MultiValue, unit?: Unit, type?: keyof HoneySpacings) => ((props: HoneyThemedProps) => ResolveSpacingResult<MultiValue, Unit>);
+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 based on the provided color key and optional alpha value.
  *
  * @param colorKey - The key representing the color to be resolved. This key is a string in the format 'colorType.colorName'.
- * @param alpha - Optional. The alpha transparency value between 0 (fully transparent) and 1 (fully opaque).
+ * @param alpha - Optional. The alpha transparency value between 0 (fully transparent) and 1 (fully opaque). Default to `undefined`.
  *
  * @returns The resolved color value from the theme, either in HEX format or in 8-character HEX with alpha format.
  *
  * @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.
  */
-export declare const resolveColor: (colorKey: HoneyColorKey, alpha?: number) => ({ theme }: HoneyThemedProps) => HoneyCSSColor;
+export declare const resolveColor: (colorKey: HoneyColorKey, alpha?: number) => ({ theme }: ExecutionContext) => HoneyCSSColor;
 /**
  * Resolves the font styles based on the provided font name from the theme.
  *
- * @param fontName - The name of the font to be resolved from the theme.
+ * @param {HoneyFontName} fontName - The name of the font to be resolved from the theme.
  *
- * @returns A function that takes the theme and returns the CSS for the specified font.
+ * @returns A style function that takes a theme object and returns the CSS styles for the specified font.
  */
-export declare const resolveFont: (fontName: HoneyFontName) => ({ theme }: HoneyThemedProps) => FlattenSimpleInterpolation;
+export declare const resolveFont: (fontName: HoneyFontName) => ({ theme }: ExecutionContext) => import('styled-components').RuleSet<object>;
 /**
  * Resolves a specific dimension value from the theme configuration.
  *
  * @param {HoneyDimensionName} dimensionName - The name of the dimension to resolve.
  *
- * @returns A function that takes the theme and returns the resolved dimension value from the theme.
+ * @returns A style function that takes the theme and returns the resolved dimension value from the theme.
  */
-export declare const resolveDimension: (dimensionName: HoneyDimensionName) => ({ theme }: HoneyThemedProps) => HoneyCSSDimensionValue;
+export declare const resolveDimension: (dimensionName: HoneyDimensionName) => ({ theme }: ExecutionContext) => HoneyCSSDimensionValue;
 /**
- * Generates CSS styles based on the provided breakpoint and props.
- * Filters the props to include only those with breakpoints matching the specified breakpoint.
- * For each matching prop, it converts the property name to dash-case and retrieves the corresponding value.
+ * Generates CSS styles based on the provided breakpoint and properties.
+ * Filters the properties to include only those that match the specified breakpoint.
+ * Converts the property names from camelCase to dash-case and retrieves their values.
  *
- * @param {HoneyBreakpointName} breakpoint - The name of the breakpoint.
+ * @template Props - The type representing HTML attributes and Honey-prefixed CSS properties.
+ *
+ * @param {HoneyBreakpointName} 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.
  */
-export declare const generateStyles: <Props extends HTMLAttributes<HTMLElement>>(breakpoint: HoneyBreakpointName) => ({ theme, ...props }: HoneyThemedProps<Props>) => import('styled-components').FlattenInterpolation<import('styled-components').ThemeProps<import('styled-components').DefaultTheme>>;
+export declare const createStyles: <Props extends HTMLAttributes<HTMLElement> & HoneyPrefixedCSSProperties>(breakpoint: HoneyBreakpointName) => ((context: ExecutionContext & Props) => ReturnType<typeof css>);
 /**
  * Utility function that returns functions for generating media queries for the specified breakpoint.
  * The down function creates a media query for screen sizes smaller than the breakpoint,
@@ -73,16 +79,25 @@ export declare const generateStyles: <Props extends HTMLAttributes<HTMLElement>>
  * @param {HoneyBreakpointName} breakpoint - The name of the breakpoint.
  * @param {HoneyCSSMediaRule} [ruleOptions={}] - Additional options for the media rule.
  *
- * @returns Functions for generating media queries.
+ * @returns Styled functions for generating media queries.
  */
 export declare const bpMedia: (breakpoint: HoneyBreakpointName, ruleOptions?: Omit<HoneyCSSMediaRule, "width" | "minWidth" | "maxWidth">) => {
-    down: ({ theme }: HoneyThemedProps) => string;
-    up: ({ theme }: HoneyThemedProps) => string;
+    down: StyleFunction<object>;
+    up: StyleFunction<object>;
 };
 /**
- * Generates media query styles based on the provided breakpoint and props.
+ * Applies CSS styles wrapped in a media query for the specified breakpoint based on the provided properties.
+ * If no styles are found for the specified breakpoint or if the breakpoint configuration is missing,
+ * it returns `null`. Otherwise, it generates media query styles using the `createStyles` function.
+ *
+ * @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.
+ *
+ * @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`.
  */
-export declare const generateMediaStyles: <Props extends HoneyCSSProperties>(breakpoint: HoneyBreakpointName) => ({ theme, ...props }: HoneyThemedProps<Props>) => import('styled-components').FlattenInterpolation<import('styled-components').ThemedStyledProps<HTMLAttributes<HTMLElement>, import('styled-components').DefaultTheme>> | null;
+export declare const applyBreakpointStyles: <Props extends HTMLAttributes<HTMLElement> & HoneyPrefixedCSSProperties>(breakpoint: HoneyBreakpointName) => ((context: ExecutionContext & Props) => Nullable<ReturnType<typeof css>>);
 /**
  * Resolves the current screen state based on the window's dimensions and the breakpoints provided in the theme.
  *

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

@@ -6,9 +6,16 @@ export type UseHoneyMediaQueryOptions = {
      * @default 0
      */
     delay?: number;
+    /**
+     * Manually override screen state properties like isXs, isPortrait, etc.
+     *
+     * @remarks
+     * These values are only set once on initialization and will not dynamically update the state.
+     */
+    overrideScreenState?: Partial<HoneyScreenState>;
 };
 /**
- * A custom hook that tracks the current screen state based on the theme's media breakpoints.
+ * 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.
  *
  * @param options - Optional configuration object.
@@ -16,4 +23,4 @@ export type UseHoneyMediaQueryOptions = {
  * @returns The current screen state, indicating the orientation (portrait or landscape)
  *          and the active breakpoint (xs, sm, md, lg, xl).
  */
-export declare const useHoneyMediaQuery: ({ delay }?: UseHoneyMediaQueryOptions) => HoneyScreenState;
+export declare const useHoneyMediaQuery: ({ delay, overrideScreenState, }?: UseHoneyMediaQueryOptions) => HoneyScreenState;