@react-hive/honey-layout 1.0.0-beta → 1.1.0

package/dist/providers/HoneyLayoutProvider.d.ts

@@ -0,0 +1,67 @@
+import { PropsWithChildren } from 'react';
+import { DefaultTheme, FlattenSimpleInterpolation } from 'styled-components';
+import { HoneyColorKey, HoneyCSSColor, HoneyCSSDimensionUnit, HoneyCSSDimensionValue, HoneyCSSMultiValue, HoneyDimensionName, HoneyFontName, HoneyScreenState, HoneySpacings, HoneyThemedProps, Nullable } from '../types';
+import { ResolveSpacingResult } from '../helpers';
+import { UseHoneyMediaQueryOptions } from '../hooks';
+type HoneyLayoutContextValue = {
+    /**
+     * Represents the theme object.
+     */
+    theme: DefaultTheme;
+    /**
+     * Represents the current state of the screen.
+     */
+    screenState: HoneyScreenState;
+    /**
+     * Function to resolve spacing values based on a given theme.
+     *
+     * @template MultiValue - A type representing the spacing value(s), which could be a single value or an array of values.
+     * @template Unit - The CSS unit used for the resolved spacing value, e.g., 'px', 'em'.
+     *
+     * @param {MultiValue} value - The spacing value(s) to be applied, which could be a single number or an array of numbers.
+     * @param {Unit} unit - Optional. The CSS unit to use for the calculated value. Defaults to 'px'.
+     * @param {keyof HoneySpacings} type - Optional. The type of spacing to use from the theme (e.g., 'base', 'small', 'large').
+     *
+     * @returns {ResolveSpacingResult<MultiValue, Unit>} - The resolved spacing value, formatted as a string with the appropriate unit.
+     */
+    resolveSpacing: <MultiValue extends HoneyCSSMultiValue<number>, Unit extends Nullable<HoneyCSSDimensionUnit> = 'px'>(value: MultiValue, unit?: Unit, type?: keyof HoneySpacings) => ResolveSpacingResult<MultiValue, Unit>;
+    /**
+     * Function to resolve color values based on the theme.
+     *
+     * @param {HoneyColorKey} colorKey - The key representing the color in the theme.
+     * @param {number} [alpha] - Optional alpha value to apply to the color for transparency.
+     *
+     * @returns {HoneyCSSColor} - The resolved CSS color, optionally with alpha transparency.
+     */
+    resolveColor: (colorKey: HoneyColorKey, alpha?: number) => HoneyCSSColor;
+    /**
+     * Function to resolve font styles based on the theme.
+     *
+     * @param {HoneyFontName} fontName - The name of the font to resolve from the theme.
+     *
+     * @returns {FlattenSimpleInterpolation} - The interpolated CSS styles for the specified font.
+     */
+    resolveFont: (fontName: HoneyFontName) => FlattenSimpleInterpolation;
+    /**
+     * Function to resolve dimension values based on the theme.
+     *
+     * @param {HoneyDimensionName} dimensionName - The name of the dimension to resolve from the theme.
+     *
+     * @returns {HoneyCSSDimensionValue} - The resolved CSS dimension value (e.g., width, height).
+     */
+    resolveDimension: (dimensionName: HoneyDimensionName) => HoneyCSSDimensionValue;
+};
+type HoneyLayoutProviderContentProps = {
+    mediaQueryOptions?: UseHoneyMediaQueryOptions;
+};
+type HoneyLayoutProviderProps = HoneyThemedProps<HoneyLayoutProviderContentProps>;
+export declare const HoneyLayoutProvider: ({ theme, ...props }: PropsWithChildren<HoneyLayoutProviderProps>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Custom hook to access the Honey layout context.
+ *
+ * @throws Will throw an error if the hook is used outside of a `HoneyLayoutProvider` component.
+ *
+ * @returns {HoneyLayoutContextValue} - The context value providing theming utilities and screen state.
+ */
+export declare const useHoneyLayout: () => HoneyLayoutContextValue;
+export {};

package/dist/providers/HoneyLayoutThemeOverride.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { HoneyThemedProps } from '../types';
+type HoneyLayoutThemeOverrideProps = HoneyThemedProps;
+/**
+ * Provides a theme override context to its children.
+ * Merges the provided theme with the existing theme from the `ThemeContext`.
+ *
+ * @param {PropsWithChildren<HoneyLayoutThemeOverrideProps>} props - The props for `HoneyLayoutThemeOverride`.
+ *
+ * @returns The ThemeProvider with the merged theme applied to its children.
+ */
+export declare const HoneyLayoutThemeOverride: ({ theme, ...props }: PropsWithChildren<HoneyLayoutThemeOverrideProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/providers/index.d.ts

@@ -1 +1,2 @@
-export * from './HoneyThemeProvider';
+export * from './HoneyLayoutProvider';
+export * from './HoneyLayoutThemeOverride';

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType, ReactNode } from 'react';
-import { Interpolation } from 'styled-components';
+import { DefaultTheme, Interpolation } from 'styled-components';
 import { DataType } from 'csstype';
 import * as CSS from 'csstype';
 export type TimeoutId = ReturnType<typeof setTimeout>;
@@ -74,7 +74,7 @@ export type HoneyCSSMediaRule = {
     update?: 'none' | 'slow' | 'fast';
 };
 /**
- * Represents the breakpoints configuration for a responsive layout.
+ * Represents the breakpoints configuration in pixes for a responsive layout.
  *
  * Notes:
  * - `xs`: Extra small devices
@@ -91,14 +91,56 @@ export type HoneyBreakpoints = {
     xl: number;
 };
 export type HoneyBreakpointName = keyof HoneyBreakpoints;
+export type HoneyContainer = {
+    /**
+     * Max container width in any CSS distance value.
+     */
+    maxWidth: HoneyCSSDimensionValue;
+};
+/**
+ * Represents the theme configuration.
+ */
+export interface BaseHoneyTheme {
+    /**
+     * Breakpoints for responsive design, where keys are breakpoint names and values are breakpoint values.
+     */
+    breakpoints: Partial<HoneyBreakpoints>;
+    /**
+     * Configuration for the container.
+     */
+    container: Partial<HoneyContainer>;
+    /**
+     * Spacing values used throughout the theme.
+     */
+    spacings: HoneySpacings;
+    /**
+     * Font settings used throughout the theme.
+     */
+    fonts: HoneyFonts;
+    /**
+     * Color palette used throughout the theme.
+     */
+    colors: HoneyColors;
+    /**
+     * Dimension values used throughout the theme.
+     */
+    dimensions: HoneyDimensions;
+}
+export interface HoneyTheme extends BaseHoneyTheme {
+}
+declare module 'styled-components' {
+    interface DefaultTheme extends HoneyTheme {
+    }
+}
+export type HoneyThemedProps<T = unknown> = {
+    theme: DefaultTheme;
+} & T;
 /**
  * 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> = (props: {
-    theme: HoneyTheme;
-}) => CSS.Properties[CSSProperty];
+type HoneyCSSPropertyValueFn<CSSProperty extends keyof CSS.Properties> = (props: HoneyThemedProps) => CSS.Properties[CSSProperty];
 /**
  * Type representing numeric values for CSS dimension properties.
  *
@@ -166,12 +208,6 @@ export type HoneyScreenState = {
     /** Indicates if the screen orientation is landscape. */
     isLandscape: boolean;
 };
-export type HoneyContainer = {
-    /**
-     * Max container width in any CSS distance value.
-     */
-    maxWidth: HoneyCSSDimensionValue;
-};
 /**
  * Defines different spacing sizes available in the theme.
  */
@@ -238,7 +274,7 @@ export interface BaseHoneyColors {
  * ```typescript
  * declare module '@react-hive/honey-layout' {
  *  interface HoneyColors {
- *    neutral: Record<'charcoalDark' | 'charcoalGray' | 'crimsonRed', HoneyColor>;
+ *    neutral: Record<'charcoalDark' | 'charcoalGray' | 'crimsonRed', HoneyCSSColor>;
  *  }
  * }
  * ```
@@ -256,8 +292,8 @@ export interface HoneyColors extends BaseHoneyColors {
  * Given the `HoneyColors` interface:
  * ```typescript
  * interface HoneyColors {
- *   primary: Record<'blue' | 'green', HoneyColor>;
- *   neutral: Record<'charcoalDark' | 'charcoalGray' | 'crimsonRed', HoneyColor>;
+ *   primary: Record<'blue' | 'green', HoneyCSSColor>;
+ *   neutral: Record<'charcoalDark' | 'charcoalGray' | 'crimsonRed', HoneyCSSColor>;
  * }
  * ```
  *
@@ -300,50 +336,10 @@ export interface HoneyDimensions {
     [key: string]: HoneyCSSDimensionValue;
 }
 export type HoneyDimensionName = keyof HoneyDimensions;
-/**
- * Represents the theme configuration.
- */
-export interface BaseHoneyTheme {
-    /**
-     * Breakpoints for responsive design, where keys are breakpoint names and values are breakpoint values.
-     */
-    breakpoints: Partial<HoneyBreakpoints>;
-    /**
-     * Configuration for the container.
-     */
-    container: Partial<HoneyContainer>;
-    /**
-     * Spacing values used throughout the theme.
-     */
-    spacings: HoneySpacings;
-    /**
-     * Font settings used throughout the theme.
-     */
-    fonts: HoneyFonts;
-    /**
-     * Color palette used throughout the theme.
-     */
-    colors: HoneyColors;
-    /**
-     * Dimension values used throughout the theme.
-     */
-    dimensions: HoneyDimensions;
-}
-export interface HoneyTheme extends BaseHoneyTheme {
-}
-declare module 'styled-components' {
-    interface DefaultTheme extends HoneyTheme {
-    }
-}
-export type HoneyThemedProps<T = unknown> = {
-    theme: HoneyTheme;
-} & T;
 export type ComponentWithAs<T, P = object> = {
     as?: string | ComponentType<P>;
 } & T;
-export type HoneyModifierResultFn = () => Interpolation<{
-    theme: HoneyTheme;
-}>;
+export type HoneyModifierResultFn = () => Interpolation<HoneyThemedProps>;
 export type HoneyModifier<Config = unknown> = (config?: Config) => HoneyModifierResultFn;
 /**
  * Type definition for status content options in a component.

package/dist/utils.d.ts

@@ -90,7 +90,7 @@ export declare const getTransformationValues: (element: HTMLElement) => {
  *
  * @returns A flat array of items, excluding the nested list key and including `depthLevel`, `parentId`, and `totalNestedItems` properties.
  */
-export declare const flattenNestedList: <OriginItem extends object>(items: OriginItem[] | undefined, itemIdKey: KeysWithNonArrayValues<OriginItem>, nestedItemsKey: KeysWithArrayValues<OriginItem>, result?: HoneyFlattenedItem<OriginItem, KeysWithArrayValues<OriginItem>>[], parentId?: OriginItem[KeysWithNonArrayValues<OriginItem>] | undefined, depthLevel?: number) => HoneyFlattenedItem<OriginItem, KeysWithArrayValues<OriginItem>>[];
+export declare const flattenNestedList: <OriginItem extends object>(items: OriginItem[] | undefined, itemIdKey: KeysWithNonArrayValues<OriginItem>, nestedItemsKey: KeysWithArrayValues<OriginItem>, result?: HoneyFlattenedItem<OriginItem, typeof nestedItemsKey>[], parentId?: OriginItem[KeysWithNonArrayValues<OriginItem>] | undefined, depthLevel?: number) => HoneyFlattenedItem<OriginItem, typeof nestedItemsKey>[];
 /**
  * Filters flattened items based on the specified parent ID and an optional predicate.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-hive/honey-layout",
-  "version": "1.0.0-beta",
+  "version": "1.1.0",
   "description": "",
   "keywords": [
     "react",
@@ -33,8 +33,8 @@
     "@mdx-js/react": "3.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.24.1",
-    "styled-components": "5.3.9",
+    "react-router-dom": "6.26.1",
+    "styled-components": "5.3.11",
     "highlight.js": "11.10.0"
   },
   "dependencies": {
@@ -43,11 +43,11 @@
     "csstype": "3.1.3"
   },
   "devDependencies": {
-    "@testing-library/react": "16.0.0",
+    "@testing-library/react": "16.0.1",
     "@types/jest": "29.5.12",
-    "@typescript-eslint/eslint-plugin": "7.16.0",
-    "@typescript-eslint/parser": "7.16.0",
-    "@types/react": "18.2.78",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
+    "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",
     "@types/styled-components": "5.1.34",
     "@types/mdx": "2.0.13",
@@ -59,16 +59,16 @@
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-import": "2.30.0",
     "eslint-plugin-prettier": "5.2.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "prettier": "3.3.3",
-    "ts-jest": "29.2.4",
-    "typescript": "5.4.5",
-    "vite": "5.4.0",
-    "vite-plugin-dts": "4.0.2",
-    "vite-plugin-checker": "0.7.2"
+    "ts-jest": "29.2.5",
+    "typescript": "5.5.4",
+    "vite": "5.4.3",
+    "vite-plugin-dts": "4.1.0",
+    "vite-plugin-checker": "0.8.0"
   },
   "jest": {
     "preset": "ts-jest",

package/dist/providers/HoneyThemeProvider.d.ts

@@ -1,14 +0,0 @@
-import { PropsWithChildren, JSX } from 'react';
-import { DefaultTheme } from 'styled-components';
-type HoneyThemeProviderProps = {
-    theme: DefaultTheme;
-};
-/**
- * Component for providing a merged theme to its children.
- * Merges the provided theme with the current theme from the context.
- *
- * @param {PropsWithChildren<HoneyThemeProviderProps>} props - Props containing the theme object.
- * @returns {JSX.Element} - The wrapped children with the merged theme.
- */
-export declare const HoneyThemeProvider: ({ children, theme, }: PropsWithChildren<HoneyThemeProviderProps>) => JSX.Element;
-export {};