@react-hive/honey-layout 1.3.0-beta → 2.3.1

package/dist/providers/HoneyLayoutProvider.d.ts

@@ -0,0 +1,69 @@
+import { PropsWithChildren } from 'react';
+import { DefaultTheme, Interpolation } from 'styled-components';
+import { HoneyColorKey, HoneyCSSColor, HoneyCSSDimensionUnit, HoneyCSSDimensionValue, HoneyCSSMultiValue, HoneyDimensionName, HoneyFontName, HoneyScreenState, HoneySpacings, 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 {Interpolation<object>} - The CSS style rules for the specified font.
+     */
+    resolveFont: (fontName: HoneyFontName) => Interpolation<object>;
+    /**
+     * 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 = HoneyLayoutProviderContentProps & {
+    theme: DefaultTheme;
+};
+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,15 @@
+import { PropsWithChildren } from 'react';
+import { DefaultTheme } from 'styled-components';
+type HoneyLayoutThemeOverrideProps = {
+    theme: DefaultTheme;
+};
+/**
+ * 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/component.types.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+/**
+ * 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;

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

@@ -0,0 +1,73 @@
+/**
+ * The types for handling CSS properties and values, focusing on dimensions, colors, media queries, and other essential CSS concepts.
+ */
+import * as CSS from 'csstype';
+export type HoneyCSSResolutionUnit = 'dpi' | 'dpcm' | 'dppx' | 'x';
+export type HoneyCSSResolutionValue = `${number}${HoneyCSSResolutionUnit}`;
+export type HoneyCSSMediaOrientation = 'landscape' | 'portrait';
+type HoneyCSSAbsoluteDimensionUnit = 'px' | 'cm' | 'mm' | 'in' | 'pt' | 'pc';
+type HoneyCSSRelativeDimensionUnit = 'em' | 'rem' | '%' | 'vh' | 'vw' | 'vmin' | 'vmax';
+/**
+ * Represents a CSS dimension unit, which can be either an absolute or relative.
+ */
+export type HoneyCSSDimensionUnit = HoneyCSSAbsoluteDimensionUnit | HoneyCSSRelativeDimensionUnit;
+/**
+ * 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>;
+/**
+ * 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 specific CSS dimension value with a unit.
+ */
+export type HoneyCSSDimensionValue<Unit extends HoneyCSSDimensionUnit = HoneyCSSDimensionUnit> = `${number}${Unit}`;
+/**
+ * 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.
+ */
+export type HoneyCSSDimensionNumericValue<CSSProperty extends keyof CSS.Properties> = CSSProperty extends HoneyCSSDimensionProperty ? HoneyCSSMultiValue<number> : never;
+/**
+ * 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;
+/**
+ * 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';
+};
+export {};

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

@@ -0,0 +1,33 @@
+import { KeysWithNonArrayValues } from './utility.types';
+/**
+ * Represents an item that has been flattened from a hierarchical data structure, with additional
+ * properties to support tracking its position and relationships within the hierarchy.
+ *
+ * This type is particularly useful for scenarios where nested data structures, such as trees or
+ * lists with sub-items, need to be transformed into a flat structure while preserving the depth
+ * and parent-child relationships.
+ *
+ * @template OriginItem - The type of the original item from the hierarchical structure.
+ * @template NestedListKey - The key within `OriginItem` that contains nested items or lists.
+ */
+export type HoneyFlattenedItem<OriginItem extends object, NestedListKey extends string> = Omit<OriginItem, NestedListKey> & {
+    /**
+     * The optional id of the parent item in the flattened structure. This establishes the parent-child
+     * relationship and allows the reconstruction of the original hierarchy if needed.
+     */
+    parentId: OriginItem[KeysWithNonArrayValues<OriginItem>] | undefined;
+    /**
+     * The depth level of the item in the flattened structure. This indicates how deep the item is nested
+     * within the hierarchy, starting from 0 for top-level items.
+     *
+     * @default 0
+     */
+    depthLevel: number;
+    /**
+     * The total number of nested items that are contained within the current item. This helps to keep
+     * track of the overall size of the nested structure for each item.
+     *
+     * @default 0
+     */
+    totalNestedItems: number;
+};

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export * from './utility.types';
+export * from './data.types';
+export * from './state.types';
+export * from './css.types';
+export * from './component.types';
+export * from './types';

package/dist/types/state.types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Types related to managing application state, React context, or any other state management tools.
+ */
+/**
+ * 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;
+};

package/dist/{types.d.ts → types/types.d.ts}

@@ -1,78 +1,12 @@
-import { ComponentType, ReactNode } from 'react';
-import { DefaultTheme, Interpolation } from 'styled-components';
+import { ElementType } from 'react';
+import { ExecutionContext, Interpolation } from 'styled-components';
 import { DataType } from 'csstype';
+import { HoneyCSSColorProperty, HoneyCSSDimensionNumericValue, HoneyCSSDimensionValue } from './css.types';
 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 in pixes for a responsive layout.
  *
@@ -91,24 +25,53 @@ export type HoneyBreakpoints = {
     xl: number;
 };
 export type HoneyBreakpointName = keyof HoneyBreakpoints;
+export type HoneyContainer = {
+    /**
+     * Max container width in any CSS distance value.
+     */
+    maxWidth: HoneyCSSDimensionValue;
+};
 /**
- * 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.
+ * Represents the theme configuration.
  */
-type HoneyCSSPropertyValueFn<CSSProperty extends keyof CSS.Properties> = (props: {
-    theme: DefaultTheme;
-}) => CSS.Properties[CSSProperty];
+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 {
+    }
+}
 /**
- * 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.
+ * A type representing a function that returns a value for a specific CSS property based on the provided theme.
  *
- * @template CSSProperty - The key of a CSS property to check.
+ * @template CSSProperty - The CSS property this function will generate a value for.
  */
-type HoneyCSSDimensionNumericValue<CSSProperty extends keyof CSS.Properties> = CSSProperty extends HoneyCSSDimensionProperty ? HoneyCSSMultiValue<number> : never;
+type HoneyCSSPropertyValueFn<CSSProperty extends keyof CSS.Properties> = (context: ExecutionContext) => CSS.Properties[CSSProperty];
 /**
  * Type representing possible values for CSS color properties.
  *
@@ -142,35 +105,24 @@ type HoneyResponsiveCSSPropertyValue<CSSProperty extends keyof CSS.Properties> =
  */
 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 ($).
+ * A utility type to add a `$` prefix to a given CSS property name.
+ *
+ * @template CSSProperty - The string type representing a CSS property name.
  */
-export type HoneyCSSProperties = Partial<{
-    [CSSProperty in keyof CSS.Properties as `$${CSSProperty}`]: HoneyCSSPropertyValue<CSSProperty>;
-}>;
+export type HoneyPrefixedCSSProperty<CSSProperty extends keyof CSS.Properties = keyof CSS.Properties> = `$${CSSProperty}`;
 /**
- * Represents the state of the screen layout.
+ * Represents an object where each key is a prefixed CSS property (with a `$` prefix),
+ *
+ * Example:
+ * ```
+ * const styles: HoneyPrefixedCSSProperties = {
+ *   $color: 'red',
+ *   $fontSize: '12px'
+ * };
+ * ```
  */
-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;
+export type HoneyPrefixedCSSProperties = {
+    [CSSProperty in keyof CSS.Properties as HoneyPrefixedCSSProperty<CSSProperty>]?: HoneyCSSPropertyValue<CSSProperty>;
 };
 /**
  * Defines different spacing sizes available in the theme.
@@ -187,7 +139,7 @@ export type HoneySpacings = {
 /**
  * Defines the color palette used in the theme.
  */
-export interface BaseHoneyColors {
+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.
@@ -237,8 +189,8 @@ export interface BaseHoneyColors {
  * @example
  * ```typescript
  * declare module '@react-hive/honey-layout' {
- *  interface HoneyColors {
- *    neutral: Record<'charcoalDark' | 'charcoalGray' | 'crimsonRed', HoneyColor>;
+ *  export interface HoneyColors {
+ *    neutral: Record<'charcoalDark' | 'charcoalGray' | 'crimsonRed', HoneyCSSColor>;
  *  }
  * }
  * ```
@@ -256,8 +208,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>;
  * }
  * ```
  *
@@ -282,7 +234,7 @@ export type HoneyFont = {
  * @example
  * ```typescript
  * declare module '@react-hive/honey-layout' {
- *  interface HoneyFonts {
+ *  export interface HoneyFonts {
  *    body: HoneyFont;
  *    caption: HoneyFont;
  *  }
@@ -300,120 +252,9 @@ 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>;
+    as?: ElementType<P>;
 } & T;
-export type HoneyModifierResultFn = () => Interpolation<{
-    theme: DefaultTheme;
-}>;
+export type HoneyModifierResultFn = () => Interpolation<object>;
 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 {};