@react-hive/honey-layout 1.0.0-beta

package/dist/providers/HoneyThemeProvider.d.ts

@@ -0,0 +1,14 @@
+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 {};

package/dist/providers/index.d.ts

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

package/dist/types.d.ts

@@ -0,0 +1,419 @@
+import { ComponentType, ReactNode } from 'react';
+import { Interpolation } from 'styled-components';
+import { DataType } from 'csstype';
+import * as CSS from 'csstype';
+export type TimeoutId = ReturnType<typeof setTimeout>;
+export type Nullable<T> = T | null;
+type ExtractKeys<T, Condition> = {
+    [K in keyof T]: T[K] extends Condition ? K : never;
+}[keyof T];
+type ExcludeKeys<T, Condition> = {
+    [K in keyof T]: T[K] extends Condition ? never : K;
+}[keyof T];
+export type KeysWithStringValues<T> = Extract<ExtractKeys<T, string | null | undefined>, string>;
+export type KeysWithArrayValues<T> = Extract<ExtractKeys<T, unknown[] | null | undefined>, string>;
+export type KeysWithNonArrayValues<T> = Extract<ExcludeKeys<T, unknown[] | null | undefined>, string>;
+export type HoneyHEXColor = `#${string}`;
+type HoneyCSSAbsoluteDimensionUnit = 'px' | 'cm' | 'mm' | 'in' | 'pt' | 'pc';
+type HoneyCSSRelativeDimensionUnit = 'em' | 'rem' | '%' | 'vh' | 'vw' | 'vmin' | 'vmax';
+/**
+ * Type representing CSS properties related to spacing and positioning.
+ */
+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'>;
+/**
+ * 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 CSS dimension unit, which can be either an absolute or relative.
+ */
+export type HoneyCSSDimensionUnit = HoneyCSSAbsoluteDimensionUnit | HoneyCSSRelativeDimensionUnit;
+export type HoneyCSSResolutionUnit = 'dpi' | 'dpcm' | 'dppx' | 'x';
+export type HoneyCSSResolutionValue = `${number}${HoneyCSSResolutionUnit}`;
+export type HoneyCSSMediaOrientation = 'landscape' | 'portrait';
+export type HoneyCSSColor = DataType.NamedColor | HoneyHEXColor;
+/**
+ * Represents a specific CSS dimension value with a unit.
+ */
+export type HoneyCSSDimensionValue<Unit extends HoneyCSSDimensionUnit = HoneyCSSDimensionUnit> = `${number}${Unit}`;
+/**
+ * Represents a shorthand CSS dimension value for 2, 3, or 4 values with the same unit.
+ *
+ * @template Value - Type of the value.
+ * @template Unit - CSS length unit.
+ */
+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;
+/**
+ * Represents an array of CSS values, either 2, 3, or 4 values.
+ *
+ * @template T - Type of the value.
+ */
+export type HoneyCSSArrayValue<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.
+ *
+ * @template T - Type of the value.
+ */
+export type HoneyCSSMultiValue<T> = T | HoneyCSSArrayValue<T>;
+/**
+ * Options for CSS @media at-rule.
+ */
+export type HoneyCSSMediaRule = {
+    operator?: 'not' | 'only';
+    mediaType?: 'all' | 'print' | 'screen' | 'speech';
+    width?: HoneyCSSDimensionValue;
+    minWidth?: HoneyCSSDimensionValue;
+    maxWidth?: HoneyCSSDimensionValue;
+    height?: HoneyCSSDimensionValue;
+    minHeight?: HoneyCSSDimensionValue;
+    maxHeight?: HoneyCSSDimensionValue;
+    orientation?: HoneyCSSMediaOrientation;
+    resolution?: HoneyCSSResolutionValue;
+    minResolution?: HoneyCSSResolutionValue;
+    maxResolution?: HoneyCSSResolutionValue;
+    update?: 'none' | 'slow' | 'fast';
+};
+/**
+ * Represents the breakpoints configuration for a responsive layout.
+ *
+ * Notes:
+ * - `xs`: Extra small devices
+ * - `sm`: Small devices
+ * - `md`: Medium devices
+ * - `lg`: Large devices
+ * - `xl`: Extra large devices
+ */
+export type HoneyBreakpoints = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export type HoneyBreakpointName = keyof HoneyBreakpoints;
+/**
+ * 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 representing numeric values for CSS dimension 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.
+ *
+ * @template CSSProperty - The key of a CSS property to check.
+ */
+type HoneyCSSDimensionNumericValue<CSSProperty extends keyof CSS.Properties> = CSSProperty extends HoneyCSSDimensionProperty ? HoneyCSSMultiValue<number> : never;
+/**
+ * Type representing possible values for CSS color properties.
+ *
+ * This type can be either a color from the theme or a valid CSS color value.
+ *
+ * @template CSSProperty - The key of a CSS property to check.
+ */
+type HoneyCSSColorValue<CSSProperty extends keyof CSS.Properties> = CSSProperty extends HoneyCSSColorProperty ? HoneyCSSColor | HoneyColorKey : CSS.Properties[CSSProperty] | HoneyCSSDimensionNumericValue<CSSProperty>;
+/**
+ * Represents a responsive CSS property value for a specific CSS property.
+ *
+ * This type maps each breakpoint name to a corresponding CSS property value.
+ * The values can include:
+ * - A standard CSS property value.
+ * - A numeric value for dimension properties.
+ * - A function returning a value based on the CSS property.
+ *
+ * @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>>>;
+/**
+ * Represents a CSS property value that can be either a single value or a responsive value.
+ *
+ * This type can be one of the following:
+ * - A standard CSS property value.
+ * - A numeric value for dimension properties.
+ * - A function that generates the value based on the CSS property.
+ * - A responsive value where each breakpoint maps to a specific CSS property value.
+ *
+ * @template CSSProperty - The key of a CSS property to check.
+ */
+export type HoneyCSSPropertyValue<CSSProperty extends keyof CSS.Properties> = HoneyCSSColorValue<CSSProperty> | HoneyCSSPropertyValueFn<CSSProperty> | HoneyResponsiveCSSPropertyValue<CSSProperty>;
+/**
+ * Defines a type representing a set of CSS properties where each property key is prefixed with a dollar sign ($).
+ */
+export type HoneyCSSProperties = Partial<{
+    [CSSProperty in keyof CSS.Properties as `$${CSSProperty}`]: HoneyCSSPropertyValue<CSSProperty>;
+}>;
+/**
+ * Represents the state of the screen layout.
+ */
+export type HoneyScreenState = {
+    /** Indicates if the screen size is extra-small (xs). */
+    isXs: boolean;
+    /** Indicates if the screen size is small (sm). */
+    isSm: boolean;
+    /** Indicates if the screen size is medium (md). */
+    isMd: boolean;
+    /** Indicates if the screen size is large (lg). */
+    isLg: boolean;
+    /** Indicates if the screen size is extra-large (xl). */
+    isXl: boolean;
+    /** Indicates if the screen orientation is portrait. */
+    isPortrait: boolean;
+    /** 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.
+ */
+export type HoneySpacings = {
+    /**
+     * The base spacing value in pixels.
+     */
+    base: number;
+    small?: number;
+    medium?: number;
+    large?: number;
+};
+/**
+ * Defines the color palette used in the theme.
+ */
+export interface BaseHoneyColors {
+    /**
+     * Used for elements that require high visibility and emphasis, such as primary buttons, call-to-action elements,
+     * and important elements like headers or titles.
+     */
+    primary: Record<string, HoneyCSSColor>;
+    /**
+     * Used to complement the primary color and add visual interest.
+     * Often used for secondary buttons, borders, and decorative elements to provide contrast and balance within the design.
+     * Helps create a cohesive visual hierarchy by providing variation in color tones.
+     */
+    secondary: Record<string, HoneyCSSColor>;
+    /**
+     * Used to draw attention to specific elements or interactions.
+     * Often applied to interactive elements like links, icons, or tooltips to indicate their interactive nature.
+     * Can be used sparingly to highlight important information or to create visual focal points.
+     */
+    accent: Record<string, HoneyCSSColor>;
+    /**
+     * Used for backgrounds, text, and other elements where a subtle, non-distracting color is desired.
+     * Provides a versatile palette for elements like backgrounds, borders, text, and icons, allowing other colors to stand
+     * out more prominently. Helps maintain balance and readability without overwhelming the user with too much color.
+     */
+    neutral: Record<string, HoneyCSSColor>;
+    /**
+     * Used to indicate successful or positive actions or states.
+     * Often applied to elements like success messages, notifications, or icons to convey successful completion of tasks or operations.
+     * Provides visual feedback to users to indicate that their actions were successful.
+     */
+    success: Record<string, HoneyCSSColor>;
+    /**
+     * Used to indicate cautionary or potentially risky situations.
+     * Applied to elements like warning messages, alerts, or icons to notify users about potential issues or actions that require attention.
+     * Helps users recognize and address potential problems or risks before they escalate.
+     */
+    warning: Record<string, HoneyCSSColor>;
+    /**
+     * Used to indicate errors, critical issues, or potentially destructive actions.
+     * Applied to elements like error messages, validation indicators, form fields, or delete buttons to alert users about incorrect input,
+     * system errors, or actions that may have irreversible consequences. Provides visual feedback to prompt users to
+     * take corrective actions or seek assistance when encountering errors or potentially risky actions.
+     */
+    error: Record<string, HoneyCSSColor>;
+}
+/**
+ * Example of augmenting the colors interface.
+ *
+ * @example
+ * ```typescript
+ * declare module '@react-hive/honey-layout' {
+ *  interface HoneyColors {
+ *    neutral: Record<'charcoalDark' | 'charcoalGray' | 'crimsonRed', HoneyColor>;
+ *  }
+ * }
+ * ```
+ */
+export interface HoneyColors extends BaseHoneyColors {
+}
+/**
+ * Generates a union of all possible color keys by combining each property of `HoneyColors` with its corresponding keys.
+ *
+ * This type iterates over each key in the `HoneyColors` interface and creates a string template,
+ * which combines the color type with each of its keys. The result is a union of all possible color keys.
+ *
+ * @example
+ *
+ * Given the `HoneyColors` interface:
+ * ```typescript
+ * interface HoneyColors {
+ *   primary: Record<'blue' | 'green', HoneyColor>;
+ *   neutral: Record<'charcoalDark' | 'charcoalGray' | 'crimsonRed', HoneyColor>;
+ * }
+ * ```
+ *
+ * The resulting `HoneyColorKey` type will be:
+ * ```typescript
+ * type HoneyColorKey = 'neutral.charcoalDark' | 'neutral.charcoalGray' | 'neutral.crimsonRed' | 'primary.blue' | 'primary.green';
+ * ```
+ */
+export type HoneyColorKey = {
+    [ColorType in keyof HoneyColors]: `${ColorType}.${keyof HoneyColors[ColorType] & string}`;
+}[keyof HoneyColors];
+export type HoneyFont = {
+    size: number;
+    family?: string;
+    weight?: number;
+    lineHeight?: number;
+    letterSpacing?: number;
+};
+/**
+ * Example of augmenting the fonts interface.
+ *
+ * @example
+ * ```typescript
+ * declare module '@react-hive/honey-layout' {
+ *  interface HoneyFonts {
+ *    body: HoneyFont;
+ *    caption: HoneyFont;
+ *  }
+ * }
+ * ```
+ */
+export interface HoneyFonts {
+    [key: string]: HoneyFont;
+}
+export type HoneyFontName = keyof HoneyFonts;
+/**
+ * Represents a map of dimension names to CSS distance values.
+ */
+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 HoneyModifier<Config = unknown> = (config?: Config) => HoneyModifierResultFn;
+/**
+ * Type definition for status content options in a component.
+ *
+ * This type is used to provide properties for handling different states of a component,
+ * such as loading, error, and no content states, along with the content to display in each state.
+ *
+ * @template T - An optional generic type parameter to extend the type with additional properties.
+ */
+export type HoneyStatusContentOptions<T = unknown> = {
+    /**
+     * A flag indicating whether the component is in a loading state.
+     *
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * A flag indicating whether the component has encountered an error.
+     *
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * A flag indicating whether the component has no content to display.
+     *
+     * @default false
+     */
+    isNoContent?: boolean;
+    /**
+     * The content to display when the component is in a loading state.
+     *
+     * @default null
+     */
+    loadingContent?: ReactNode;
+    /**
+     * The content to display when the component has encountered an error.
+     *
+     * @default null
+     */
+    errorContent?: ReactNode;
+    /**
+     * The content to display when the component has no content to display.
+     *
+     * @default null
+     */
+    noContent?: ReactNode;
+} & T;
+/**
+ * Represents an item that has been flattened with additional properties for hierarchical data structures.
+ *
+ * @template OriginItem - The type of the original item.
+ * @template NestedListKey - The key within `Item` that contains nested items or lists.
+ */
+export type HoneyFlattenedItem<OriginItem extends object, NestedListKey extends string> = Omit<OriginItem, NestedListKey> & {
+    /**
+     * Optional id of the parent item in the flattened structure.
+     * Used to establish parent-child relationships in hierarchical data.
+     */
+    parentId: OriginItem[KeysWithNonArrayValues<OriginItem>] | undefined;
+    /**
+     * The depth level of the item in the flattened structure.
+     * Indicates how deep the item is nested within the hierarchy.
+     */
+    depthLevel: number;
+    /**
+     * The total number of nested items within the current item.
+     * Helps to keep track of the size of the nested structure.
+     *
+     * @default 0
+     */
+    totalNestedItems: number;
+};
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,121 @@
+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 {string} inputString - The input string to be split.
+ *
+ * @returns {string[]} 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 {number} startX - The X coordinate of the starting point.
+ * @param {number} startY - The Y coordinate of the starting point.
+ * @param {number} endX - The X coordinate of the ending point.
+ * @param {number} endY - The Y coordinate of the ending point.
+ *
+ * @returns {number} - 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 {number} delta - The change in position (distance).
+ * @param {number} elapsedTime - The time taken to move the distance.
+ *
+ * @returns {number} - 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 {number} value - The value to calculate the percentage of.
+ * @param {number} percentage - The percentage to calculate.
+ *
+ * @returns {number} - 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 {HoneyHEXColor} - 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 {HoneyCSSMediaRule[]} rules - Conditions for the media query.
+ *
+ * @returns {string} The generated media query string.
+ */
+export declare const media: (rules: HoneyCSSMediaRule[]) => string;
+/**
+ * Get various transformation values from the transformation matrix of an element.
+ *
+ * @param {HTMLElement} element - The element with a transformation applied.
+ *
+ * @returns An object containing transformation values.
+ */
+export declare const getTransformationValues: (element: HTMLElement) => {
+    translateX: number;
+    translateY: number;
+};
+/**
+ * Converts a nested list structure into a flat list, excluding the nested list key from the result and adding depth level, parent ID, and total nested items properties.
+ *
+ * @template OriginItem - The type of the items in the list.
+ *
+ * @param items - The array of items to be flattened. Can be undefined.
+ * @param itemIdKey - The key in each item that uniquely identifies it.
+ * @param nestedItemsKey - The key in each item that contains the nested list.
+ * @param result - The array that accumulates the flattened items. Defaults to an empty array.
+ * @param parentId - Optional. The ID of the parent item in the flattened structure. Defaults to undefined for parent item.
+ * @param depthLevel - Optional. The current depth level of the item in the nested structure. Defaults to 0.
+ *
+ * @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>>[];
+/**
+ * Filters flattened items based on the specified parent ID and an optional predicate.
+ *
+ * @template OriginItem - The type of the items in the list.
+ * @template NestedListKey - The key within `Item` that contains nested items or lists.
+ *
+ * @param flattenedItems - The array of flattened items to filter.
+ * @param parentId - The parent ID to filter the items by.
+ * @param predicate - Optional. A function to further filter the flattened items that match the parent ID.
+ *
+ * @returns An array of flattened items that match the specified parent ID and predicate.
+ */
+export declare const filterFlattenedItems: <OriginItem extends object, NestedListKey extends string>(flattenedItems: HoneyFlattenedItem<OriginItem, NestedListKey>[], parentId: OriginItem[KeysWithNonArrayValues<OriginItem>], predicate?: (flattenedItem: HoneyFlattenedItem<OriginItem, NestedListKey>) => boolean) => HoneyFlattenedItem<OriginItem, NestedListKey>[];
+/**
+ * Searches through a list of flattened items to find matches based on a search query.
+ * The search considers both parent and nested items and ensures that matching items and their parents are included in the result.
+ *
+ * @template OriginItem - The type of the original item.
+ * @template NestedListKey - The key within the item that contains nested items or lists.
+ *
+ * @param flattenedItems - The array of flattened items to search through.
+ * @param itemIdKey - The key used to identify each item uniquely.
+ * @param valueKey - The key in each item that contains the searchable value.
+ * @param searchQuery - The search query string used to match items.
+ *
+ * @returns An array of matched flattened items, including their parents if applicable.
+ */
+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>[];

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@react-hive/honey-layout",
+  "version": "1.0.0-beta",
+  "description": "",
+  "keywords": [
+    "react",
+    "layout",
+    "theme"
+  ],
+  "homepage": "https://react-honey-layout.netlify.app",
+  "bugs": {
+    "url": "https://github.com/React-Hive/honey-layout/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/React-Hive/honey-layout.git"
+  },
+  "author": "Mykhailo Aliinyk <m.aliynik@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "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"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@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",
+    "highlight.js": "11.10.0"
+  },
+  "dependencies": {
+    "lodash.merge": "4.6.2",
+    "lodash.debounce": "4.0.8",
+    "csstype": "3.1.3"
+  },
+  "devDependencies": {
+    "@testing-library/react": "16.0.0",
+    "@types/jest": "29.5.12",
+    "@typescript-eslint/eslint-plugin": "7.16.0",
+    "@typescript-eslint/parser": "7.16.0",
+    "@types/react": "18.2.78",
+    "@types/react-dom": "18.2.25",
+    "@types/styled-components": "5.1.34",
+    "@types/mdx": "2.0.13",
+    "@types/lodash.merge": "4.6.9",
+    "@types/lodash.debounce": "4.0.9",
+    "@vitejs/plugin-react": "4.3.1",
+    "@mdx-js/rollup": "3.0.1",
+    "eslint": "8.57.0",
+    "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-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"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom",
+    "testMatch": [
+      "**/src/**/__tests__/**/*.tsx"
+    ]
+  },
+  "browserslist": [
+    "defaults",
+    "not IE 11"
+  ]
+}