@lumx/react 3.20.1-alpha.46 → 3.20.1-alpha.47

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.20.1-alpha.46",
-        "@lumx/icons": "^3.20.1-alpha.46",
+        "@lumx/core": "^3.20.1-alpha.47",
+        "@lumx/icons": "^3.20.1-alpha.47",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "react-popper": "^2.2.4"
@@ -87,5 +87,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.46"
+    "version": "3.20.1-alpha.47"
 }

package/utils/index.d.ts

@@ -1,6 +1,6 @@
 import React__default, { RefObject } from 'react';
 import { Falsy, KebabCase } from '@lumx/core/js/types';
-import * as _lumx_core_js_utils_className_bem_generateBEMClass from '@lumx/core/js/utils/className/bem/generateBEMClass';
+import * as _lumx_core_js_utils_classNames_bem_generateBEMClass from '@lumx/core/js/utils/classNames/bem/generateBEMClass';
 
 interface ClickAwayParameters {
     /**
@@ -89,43 +89,44 @@ interface ClassDictionary {
 type ClassValue = string | number | ClassDictionary | ClassArray | undefined | null | boolean;
 
 /**
- * Hook that retrieves several utilities for the classnames feature.
- * @param classname - base component class name
- * @returns utility functions
+ * Hook that provides BEM class name utilities for a component.
+ *
+ * @param className - Base component class name (kebab-case)
+ * @returns Object with `block` and `element` utility functions
+ *
+ * @example
+ * const { block, element } = useClassnames('my-component');
  */
-declare function useClassnames<C extends string>(classname: KebabCase<C>): {
+declare function useClassnames<C extends string>(className: KebabCase<C>): {
     /**
-     * Returns the BEM class for the given block (and modifier if it is defined)
-     *
-     * Executing `block()` returns`CLASSNAME`
-     *
-     * Executing `block('modifier')` returns  `CLASSNAME CLASSNAME--modifier`
+     * Generates BEM block class names with optional modifiers.
      *
-     * Executing `block({ modifier1: true, modifier2: false })` returns `CLASSNAME CLASSNAME--modifier1`
+     * @param modifier - Modifier string, object, or additional class names
+     * @param additionalClasses - Additional CSS classes to append
+     * @returns Generated class name string
      *
-     * Executing `block(['className'])` returns `CLASSNAME className`
-     *
-     * @param modifier - string or Record<string, boolean> or list of css classes
-     * @param additionalClasses - string | string[] - list of additional classes to be added
-     * @returns string
+     * @example
+     * block() // 'my-component'
+     * block('active') // 'my-component my-component--active'
+     * block({ active: true, disabled: false }) // 'my-component my-component--active'
+     * block(['custom-class']) // 'my-component custom-class'
      */
-    block: <M extends _lumx_core_js_utils_className_bem_generateBEMClass.RawModifier>(modifier?: _lumx_core_js_utils_className_bem_generateBEMClass.Modifier<M> | undefined, additionalClasses?: ClassValue | ClassValue[], modifierLast?: boolean | undefined) => string;
+    block: <M extends _lumx_core_js_utils_classNames_bem_generateBEMClass.RawModifier>(modifier?: _lumx_core_js_utils_classNames_bem_generateBEMClass.Modifier<M> | undefined, additionalClasses?: ClassValue | ClassValue[], modifierLast?: boolean | undefined) => string;
     /**
-     * Returns the BEM class for the given element (and modifier if it is defined)
-     *
-     * Executing `element('element')` returns `CLASSNAME__element`
-     *
-     * Executing `element('element', 'modifier')` returns `CLASSNAME__element CLASSNAME__element--modifier`
-     *
-     * Executing `element('element', { modifier1: true, modifier2: false })` returns `CLASSNAME__element CLASSNAME__element--modifier1`
+     * Generates BEM element class names with optional modifiers.
      *
-     * Executing `element('element', ['classname'])` returns `CLASSNAME__element` class name
+     * @param elementName - Element name
+     * @param modifier - Modifier string, object, or additional class names
+     * @param additionalClasses - Additional CSS classes to append
+     * @returns Generated class name string
      *
-     * @param modifier - string or Record<string, boolean> or list of css classes
-     * @param additionalClasses - string | string[] - list of additional classes to be added
-     * @returns string
+     * @example
+     * element('header') // 'my-component__header'
+     * element('header', 'large') // 'my-component__header my-component__header--large'
+     * element('header', { large: true, small: false }) // 'my-component__header my-component__header--large'
+     * element('header', ['custom-class']) // 'my-component__header custom-class'
      */
-    element: <E extends string, M_1 extends _lumx_core_js_utils_className_bem_generateBEMClass.RawModifier>(elem: KebabCase<E>, modifier?: _lumx_core_js_utils_className_bem_generateBEMClass.Modifier<M_1> | undefined, additionalClasses?: ClassValue | ClassValue[], modifierLast?: boolean | undefined) => string;
+    element: <E extends string, M_1 extends _lumx_core_js_utils_classNames_bem_generateBEMClass.RawModifier>(elem: KebabCase<E>, modifier?: _lumx_core_js_utils_classNames_bem_generateBEMClass.Modifier<M_1> | undefined, additionalClasses?: ClassValue | ClassValue[], modifierLast?: boolean | undefined) => string;
 };
 
 export { ClickAwayProvider, DisabledStateProvider, Portal, PortalProvider, useClassnames, useDisabledStateContext };

package/utils/index.js

@@ -1,2 +1,2 @@
-export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, a as PortalProvider, b as useClassnames, u as useDisabledStateContext } from '../_internal/D-QVluBy.js';
+export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, a as PortalProvider, b as useClassnames, u as useDisabledStateContext } from '../_internal/Cd8LPzmx.js';
 //# sourceMappingURL=index.js.map