@bodynarf/react.components 1.13.7 → 1.14.0

package/changelog.md

@@ -1,6 +1,61 @@
 # Change log
 All changes will be published here in reverse chronological order
 
+## v1.3.0
+- **ModalWrapper** *(new)*
+  - Added new modal window wrapper component based on Bulma modal.
+  - Supports `title`, `size`, `className`, `data` props.
+  - Action buttons in footer via `actions` prop (array of ButtonProps).
+  - Close behavior options: `showCloseButton`, `closeOnBackgroundClick`, `closeOnEscape`.
+  - Keyboard support: close on Escape, optional `onEnterPress` handler.
+
+- **Number**
+  - Added the `resetToDefaultOnBlur` prop: when enabled, resets the value to `defaultValue` (or `0` if not specified) on focus out if the field is empty.
+
+- **Search**
+  - Added optional search icon (magnifying glass) via `showIcon` prop. Icon size matches the input field size.
+
+- **Switch** *(new)*
+  - Added new toggle/switch component with Bulma styling.
+  - Supports `size`, `style` (color), `label`, `name`, `onValueChange`, `defaultValue`, `className` props.
+  - Additional style options: `rounded` (pill shape), `outlined`, `thin`, `rtl` (right-to-left mode).
+  - Supports form label mode via `isFormLabel` prop.
+
+- **Slider** *(new)*
+  - Added new range/slider component with Bulma styling.
+  - Supports `min`, `max`, `step`, `size`, `style` (color), `defaultValue`, `onValueChange`, `className` props.
+  - Additional options: `showValue` (tooltip with current value), `showMinMax` (min/max labels), `showProgress` (filled track).
+  - Supports vertical mode via `vertical` prop with configurable height.
+  - Circle style thumb available via `circle` prop.
+
+- **RadioGroup** *(new)*
+  - Added new radio group component for single selection from multiple options.
+  - Supports `items`, `value`, `onValueChange`, `size`, `style` (color), `name`, `className` props.
+  - Additional style options: `horizontal` (row layout), `block` (filled background), `circle`, `withoutBorder`, `hasBackgroundColor`.
+  - Each item can be individually disabled.
+
+- **Stepper** *(new)*
+  - Added new stepper/progress indicator component for multi-step workflows.
+  - Supports `steps`, `currentStep`, `size`, `color`, `className` props.
+  - Additional options: `vertical` (vertical layout), `showNumbers` (step numbers vs checkmarks), `showConnectors` (lines between steps), `animated` (connector animations).
+  - Clickable steps support via `clickable` and `onStepClick` props for navigating to completed steps.
+  - Each step can have a title, description, and optional custom icon.
+
+- **Timeline** *(new)*
+  - Added new timeline component for displaying chronological events.
+  - Supports `items`, `size`, `color`, `className` props.
+  - Layout options: `leftAligned` (default, markers on left) or centered mode with alternating content.
+  - Additional options: `showConnectors`, `animated` (fade-in animation), `hollow` (outlined markers).
+  - Supports `showTimestampsSeparate` for displaying timestamps on opposite side in centered mode.
+  - Each item can have title, content, timestamp, icon, marker, and individual color override.
+
+- **TimePicker** *(new)*
+  - Added new time input component for hours/minutes/seconds selection.
+  - Supports `defaultValue`, `onValueChange`, `size`, `style`, `name`, `className` props.
+  - Time value represented as object with `hours`, `minutes`, and optional `seconds` fields.
+  - Additional options: `showSeconds` (enable seconds input), `step` (value increment in seconds), `min`, `max` (time range limits).
+  - Supports all standard input features: `rounded`, `loading`, `disabled`, `readonly`, validation states, labels, and hints.
+
 ## v1.2.0
 - **Accordion**
   - Fixed an issue where the height changed incorrectly when the component’s `size` prop was updated.

package/components/index.d.ts

@@ -12,18 +12,24 @@ export { default as File } from "./file";
 export * from "./file";
 export { default as Icon } from "./icon";
 export * from "./icon";
+export { default as ModalWrapper } from "./modal";
+export * from "./modal";
 export { default as Multiselect } from "./multiselect";
 export * from "./multiselect";
 export { default as Paginator } from "./paginator";
 export * from "./paginator";
 export { default as Search } from "./search";
 export * from "./search";
+export { default as Stepper } from "./stepper";
+export * from "./stepper";
 export { default as Table } from "./table";
 export * from "./table";
 export { default as Tabs } from "./tabs";
 export * from "./tabs";
 export { default as Tag } from "./tag";
 export * from "./tag";
+export { default as Timeline } from "./timeline";
+export * from "./timeline";
 export { default as Progress } from "./progress";
 export * from "./progress";
 export { default as Checkbox } from "./primitives/checkbox";
@@ -38,6 +44,14 @@ export { default as NumberInput } from "./primitives/number";
 export * from "./primitives/number";
 export { default as Password } from "./primitives/password";
 export * from "./primitives/password";
+export { default as RadioGroup } from "./primitives/radioGroup";
+export * from "./primitives/radioGroup";
+export { default as Slider } from "./primitives/slider";
+export * from "./primitives/slider";
+export { default as Switch } from "./primitives/switch";
+export * from "./primitives/switch";
 export { default as Text } from "./primitives/text";
 export * from "./primitives/text";
+export { default as TimePicker } from "./primitives/timePicker";
+export * from "./primitives/timePicker";
 //# sourceMappingURL=index.d.ts.map

package/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,cAAc,aAAa,CAAC;AAE5B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,cAAc,eAAe,CAAC;AAE9B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,cAAc,eAAe,CAAC;AAE9B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,cAAc,aAAa,CAAC;AAE5B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,cAAc,OAAO,CAAC;AAGtB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAG3B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,cAAc,oBAAoB,CAAC;AAEnC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAElC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AAEvC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC7D,cAAc,qBAAqB,CAAC;AAEpC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/components/index.js

@@ -12,18 +12,24 @@ export { default as File } from "./file";
 export * from "./file";
 export { default as Icon } from "./icon";
 export * from "./icon";
+export { default as ModalWrapper } from "./modal";
+export * from "./modal";
 export { default as Multiselect } from "./multiselect";
 export * from "./multiselect";
 export { default as Paginator } from "./paginator";
 export * from "./paginator";
 export { default as Search } from "./search";
 export * from "./search";
+export { default as Stepper } from "./stepper";
+export * from "./stepper";
 export { default as Table } from "./table";
 export * from "./table";
 export { default as Tabs } from "./tabs";
 export * from "./tabs";
 export { default as Tag } from "./tag";
 export * from "./tag";
+export { default as Timeline } from "./timeline";
+export * from "./timeline";
 // Progress/Loader component
 export { default as Progress } from "./progress";
 export * from "./progress";
@@ -40,5 +46,13 @@ export { default as NumberInput } from "./primitives/number";
 export * from "./primitives/number";
 export { default as Password } from "./primitives/password";
 export * from "./primitives/password";
+export { default as RadioGroup } from "./primitives/radioGroup";
+export * from "./primitives/radioGroup";
+export { default as Slider } from "./primitives/slider";
+export * from "./primitives/slider";
+export { default as Switch } from "./primitives/switch";
+export * from "./primitives/switch";
 export { default as Text } from "./primitives/text";
 export * from "./primitives/text";
+export { default as TimePicker } from "./primitives/timePicker";
+export * from "./primitives/timePicker";

package/components/modal/component/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./style.scss";
+import { ModalWrapperProps } from "..";
+/** Modal window wrapper component */
+declare const ModalWrapper: FC<ModalWrapperProps>;
+export default ModalWrapper;
+//# sourceMappingURL=index.d.ts.map

package/components/modal/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,MAAM,OAAO,CAAC;AAQnD,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,iBAAiB,EAAE,MAAM,IAAI,CAAC;AAEvC,qCAAqC;AACrC,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA6FvC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/modal/component/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import { getClassName, isNotNullish, isNotNullOrEmpty } from "@bodynarf/utils";
+import { ElementSize } from "../../../types";
+import { getSizeClassName, mapDataAttributes } from "../../../utils";
+import Button from "../../button";
+import "./style.scss";
+/** Modal window wrapper component */
+const ModalWrapper = ({ children, actions, onCloseClick, title, size = ElementSize.Normal, showCloseButton = true, closeOnBackgroundClick = true, closeOnEscape = true, onEnterPress, className, data, }) => {
+    const onBackgroundClick = useCallback(() => {
+        if (closeOnBackgroundClick) {
+            onCloseClick();
+        }
+    }, [closeOnBackgroundClick, onCloseClick]);
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape" && closeOnEscape) {
+                onCloseClick();
+            }
+            else if (event.key === "Enter" && isNotNullish(onEnterPress)) {
+                onEnterPress();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [closeOnEscape, onCloseClick, onEnterPress]);
+    const elClassName = getClassName([
+        "bbr-modal",
+        "modal",
+        "is-active",
+        getSizeClassName(size),
+        className,
+    ]);
+    const dataAttributes = mapDataAttributes(data);
+    const hasTitle = isNotNullOrEmpty(title);
+    const hasHeader = hasTitle || showCloseButton;
+    const hasActions = actions.length > 0;
+    return (_jsxs("div", { ...dataAttributes, className: elClassName, children: [_jsx("div", { onClick: onBackgroundClick, className: "modal-background" }), _jsxs("div", { className: "modal-card", children: [!!hasHeader && (_jsxs("header", { className: "modal-card-head", children: [!!hasTitle && (_jsx("p", { className: "modal-card-title", children: title })), !!showCloseButton && (_jsx("button", { type: "button", className: "delete", "aria-label": "close", onClick: onCloseClick }))] })), _jsx("section", { className: "modal-card-body", children: children }), !!hasActions && (_jsx("footer", { className: "modal-card-foot", children: actions.map((buttonProps) => (_jsx(Button, { ...buttonProps }, buttonProps.caption ?? buttonProps.icon?.className))) }))] })] }));
+};
+export default ModalWrapper;

package/components/modal/component/style.scss

@@ -0,0 +1,42 @@
+.bbr-modal {
+    &.modal {
+        z-index: 1000;
+
+        .modal-card {
+            max-height: calc(100vh - 40px);
+            width: auto;
+            min-width: 300px;
+            max-width: calc(100vw - 40px);
+        }
+
+        .modal-card-head {
+            border-bottom: 1px solid #dbdbdb;
+        }
+
+        .modal-card-foot {
+            border-top: 1px solid #dbdbdb;
+            justify-content: flex-end;
+            gap: 0.5rem;
+        }
+
+        .modal-card-body {
+            overflow-y: auto;
+        }
+
+        // Size modifiers
+        &.is-small .modal-card {
+            min-width: 250px;
+            max-width: 400px;
+        }
+
+        &.is-medium .modal-card {
+            min-width: 400px;
+            max-width: 640px;
+        }
+
+        &.is-large .modal-card {
+            min-width: 600px;
+            max-width: 960px;
+        }
+    }
+}

package/components/modal/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./component";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/components/modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/modal/index.js

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/components/modal/types.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+import { ActionFn } from "@bodynarf/utils";
+import { BaseElementProps, ElementSize } from "../../types";
+import { ButtonProps } from "../button";
+/** Modal window component props */
+export type ModalWrapperProps = BaseElementProps & {
+    /** Modal window body content */
+    children: ReactNode;
+    /** Action buttons in the footer */
+    actions: Array<ButtonProps>;
+    /**
+     * Modal window title.
+     * If not provided - header will not be displayed
+     */
+    title?: string;
+    /**
+     * Modal window size.
+     * @default Normal
+     */
+    size?: ElementSize;
+    /**
+     * Show close button in the header.
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Close modal when clicking on background overlay.
+     * @default true
+     */
+    closeOnBackgroundClick?: boolean;
+    /**
+     * Close modal on Escape key press.
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /** Close button click handler */
+    onCloseClick: ActionFn;
+    /**
+     * Handler for Enter key press.
+     * If not provided - Enter key will not be handled
+     */
+    onEnterPress?: ActionFn;
+};
+//# sourceMappingURL=types.d.ts.map

package/components/modal/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,mCAAmC;AACnC,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,GAAG;IAC/C,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IAEpB,mCAAmC;IACnC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,iCAAiC;IACjC,YAAY,EAAE,QAAQ,CAAC;IAEvB;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B,CAAC"}

package/components/modal/types.js

@@ -0,0 +1 @@
+export {};

package/components/multiselect/components/withoutLabel/index.js

@@ -86,13 +86,13 @@ export default MultiselectWithoutLabel;
 const DropdownContent = ({ noDataText, id, listMaxHeight, noDataByQuery, items, selectedItems, onItemClick, onItemSelectChange, searchable = true, checkboxConfig, }) => {
     const [search, setSearch] = useState("");
     if (items.length === 0) {
-        return (_jsx("div", { className: "dropdown-content", children: _jsx("span", { className: "dropdown-item", children: noDataText }) }));
+        return (_jsx("span", { className: "dropdown-content dropdown-item is-italic has-text-grey", children: noDataText }));
     }
     const filteredItems = isNullOrEmpty(search)
         ? items
         : items.filter(({ displayValue }) => displayValue.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
     if (filteredItems.length === 0) {
-        return (_jsxs("div", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: [_jsx("div", { className: "mx-2 my-1", children: _jsx(Search, { caption: "search", onSearch: setSearch, searchType: "byTyping", size: ElementSize.Small }) }), _jsx("span", { className: "dropdown-item", children: noDataByQuery })] }));
+        return (_jsxs("div", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: [_jsx("div", { className: "mx-2 my-1", children: _jsx(Search, { caption: "search", onSearch: setSearch, searchType: "byTyping", size: ElementSize.Small }) }), _jsx("span", { className: "dropdown-item is-italic has-text-grey", children: noDataByQuery })] }));
     }
     return (_jsxs("div", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: [!!searchable &&
                 _jsx("div", { className: "mx-2 my-1", children: _jsx(Search, { caption: "search", onSearch: setSearch, searchType: "byTyping", size: ElementSize.Small }) }), _jsx("ul", { children: filteredItems.map(item => _jsx(MultiselectItem, { item: item, rootId: id, onItemClick: onItemClick, onChange: onItemSelectChange, checkboxConfig: checkboxConfig, selected: selectedItems.includes(item.id) }, item.id)) })] }));

package/components/primitives/index.d.ts

@@ -4,5 +4,9 @@ export * from "./date";
 export * from "./multiline";
 export * from "./number";
 export * from "./password";
+export * from "./radioGroup";
+export * from "./slider";
+export * from "./switch";
 export * from "./text";
+export * from "./timePicker";
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}

package/components/primitives/index.js

@@ -4,4 +4,8 @@ export * from "./date";
 export * from "./multiline";
 export * from "./number";
 export * from "./password";
+export * from "./radioGroup";
+export * from "./slider";
+export * from "./switch";
 export * from "./text";
+export * from "./timePicker";

package/components/primitives/number/components/withLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAe,MAAM,OAAO,CAAC;AAIrD,OAAO,EAAe,cAAc,EAAE,MAAM,YAAY,CAAC;AAKzD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,kCAAkC;AAClC,QAAA,MAAM,eAAe,EAAE,EAAE,CACrB,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,cAAc,CAsE1C,CAAC;AAEN,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAA2B,MAAM,OAAO,CAAC;AAIjE,OAAO,EAAe,cAAc,EAAE,MAAM,YAAY,CAAC;AAKzD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,kCAAkC;AAClC,QAAA,MAAM,eAAe,EAAE,EAAE,CACrB,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,cAAc,CAmF1C,CAAC;AAEN,eAAe,eAAe,CAAC"}

package/components/primitives/number/components/withLabel/index.js

@@ -6,8 +6,16 @@ import { getSizeClassName, getStyleClassName, mapDataAttributes } from "../../..
 import ComponentWithLabel from "../../../internal/componentWithLabel";
 import InternalHint from "../../../internal/hint";
 /** Number component with label */
-const NumberWithLabel = ({ onValueChange = emptyFn, defaultValue, validationState, name = generateGuid(), label, placeholder, size = ElementSize.Normal, style, rounded = false, loading = false, readonly = false, disabled = false, autoFocus = false, onBlur, onKeyDown, onKeyUp, step = 1, className, title, data, hint, }) => {
+const NumberWithLabel = ({ onValueChange = emptyFn, defaultValue, validationState, name = generateGuid(), label, placeholder, size = ElementSize.Normal, style, rounded = false, loading = false, readonly = false, disabled = false, autoFocus = false, onBlur, onKeyDown, onKeyUp, step = 1, resetToDefaultOnBlur = false, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value) ? undefined : +event.target.value), [onValueChange]);
+    const onInputBlur = useCallback((event) => {
+        if (resetToDefaultOnBlur && isStringEmpty(event.target.value)) {
+            const resetValue = defaultValue ?? 0;
+            event.target.value = resetValue.toString();
+            onValueChange(resetValue);
+        }
+        onBlur?.();
+    }, [resetToDefaultOnBlur, defaultValue, onValueChange, onBlur]);
     const elClassName = getClassName([
         className,
         getSizeClassName(size, ElementSize.Normal),
@@ -22,6 +30,6 @@ const NumberWithLabel = ({ onValueChange = emptyFn, defaultValue, validationStat
     const dataAttributes = isNullish(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { id: name, name: name, step: step, type: "number", title: title, onBlur: onBlur, onKeyUp: onKeyUp, onChange: onChange, readOnly: readonly, disabled: disabled, ...dataAttributes, onKeyDown: onKeyDown, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { id: name, step: step, name: name, title: title, type: "number", onKeyUp: onKeyUp, onChange: onChange, readOnly: readonly, disabled: disabled, ...dataAttributes, onBlur: onInputBlur, onKeyDown: onKeyDown, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default NumberWithLabel;

package/components/primitives/number/components/withoutLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAe,MAAM,OAAO,CAAC;AAQrD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,WAAW,CAkEvC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAA2B,MAAM,OAAO,CAAC;AAQjE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,WAAW,CAgFvC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/number/components/withoutLabel/index.js

@@ -1,12 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { emptyFn, generateGuid, getClassName } from "@bodynarf/utils";
+import { emptyFn, generateGuid, getClassName, isStringEmpty } from "@bodynarf/utils";
 import { ElementSize } from "../../../../../types";
 import { getSizeClassName, getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import InternalHint from "../../../internal/hint";
 /** Number component without label */
-const NumberWithoutLabel = ({ onValueChange = emptyFn, defaultValue, validationState, name = generateGuid(), size, style, readonly = false, disabled = false, autoFocus = false, rounded = false, loading = false, placeholder, onBlur, onKeyDown, onKeyUp, step = 1, className, title, data, hint, }) => {
-    const onChange = useCallback((event) => onValueChange(+event.target.value), [onValueChange]);
+const NumberWithoutLabel = ({ onValueChange = emptyFn, defaultValue, validationState, name = generateGuid(), size, style, readonly = false, disabled = false, autoFocus = false, rounded = false, loading = false, placeholder, onBlur, onKeyDown, onKeyUp, step = 1, resetToDefaultOnBlur = false, className, title, data, hint, }) => {
+    const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value) ? undefined : +event.target.value), [onValueChange]);
+    const onInputBlur = useCallback((event) => {
+        if (resetToDefaultOnBlur && isStringEmpty(event.target.value)) {
+            const resetValue = defaultValue ?? 0;
+            event.target.value = resetValue.toString();
+            onValueChange(resetValue);
+        }
+        onBlur?.();
+    }, [resetToDefaultOnBlur, defaultValue, onValueChange, onBlur]);
     const elClassName = getClassName([
         className,
         getSizeClassName(size, ElementSize.Normal),
@@ -20,6 +28,6 @@ const NumberWithoutLabel = ({ onValueChange = emptyFn, defaultValue, validationS
         loading ? "is-loading" : "",
     ]);
     const dataAttributes = mapDataAttributes(data);
-    return (_jsxs("div", { className: "bbr-field field", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { id: name, name: name, step: step, type: "number", title: title, onBlur: onBlur, onKeyUp: onKeyUp, onChange: onChange, readOnly: readonly, disabled: disabled, ...dataAttributes, onKeyDown: onKeyDown, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsxs("div", { className: "bbr-field field", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { id: name, step: step, name: name, title: title, type: "number", onKeyUp: onKeyUp, onChange: onChange, readOnly: readonly, disabled: disabled, ...dataAttributes, onBlur: onInputBlur, onKeyDown: onKeyDown, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default NumberWithoutLabel;

package/components/primitives/number/types.d.ts

@@ -7,5 +7,11 @@ export type NumberProps = BaseNullableInputElementProps<number> & BlurableElemen
      * @default 1
     */
     step?: number;
+    /**
+     * Reset value to `defaultValue` (or `0` if not specified) on focus out when the field is empty.
+     * Prevents the input from having no value.
+     * @default false
+     */
+    resetToDefaultOnBlur?: boolean;
 };
 //# sourceMappingURL=types.d.ts.map

package/components/primitives/number/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/number/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7F,kCAAkC;AAClC,MAAM,MAAM,WAAW,GAAG,6BAA6B,CAAC,MAAM,CAAC,GACzD,eAAe,GACf,eAAe,GACf;IACE;;;;MAIE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/number/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7F,kCAAkC;AAClC,MAAM,MAAM,WAAW,GAAG,6BAA6B,CAAC,MAAM,CAAC,GACzD,eAAe,GACf,eAAe,GACf;IACE;;;;MAIE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC"}

package/components/primitives/radioGroup/component/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./style.scss";
+import { RadioGroupProps } from "../types";
+/** RadioGroup component for selecting one option from multiple */
+declare const RadioGroup: FC<RadioGroupProps>;
+export default RadioGroup;
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/radioGroup/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/radioGroup/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAe,MAAM,OAAO,CAAC;AAOrD,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,kEAAkE;AAClE,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA2FnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/primitives/radioGroup/component/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { emptyFn, generateGuid, getClassName, isNullish } from "@bodynarf/utils";
+import { ElementSize } from "../../../../types";
+import { getElementColorClassName, getSizeClassName, mapDataAttributes } from "../../../../utils";
+import "./style.scss";
+/** RadioGroup component for selecting one option from multiple */
+const RadioGroup = ({ items, value, onValueChange = emptyFn, name = generateGuid(), size = ElementSize.Normal, style, disabled = false, horizontal = false, block = false, circle = true, withoutBorder = false, hasBackgroundColor = false, className, data, title, }) => {
+    const onChange = useCallback((event) => {
+        const selectedId = event.target.value;
+        const selectedItem = items.find(item => item.id === selectedId);
+        if (selectedItem) {
+            onValueChange(selectedItem);
+        }
+    }, [items, onValueChange]);
+    const containerClassName = getClassName([
+        "bbr-radio-group",
+        className,
+        horizontal ? "is-horizontal" : "",
+    ]);
+    const radioClassName = getClassName([
+        "is-checkradio",
+        "bbr-radio",
+        getSizeClassName(size, ElementSize.Normal),
+        getElementColorClassName(style),
+        circle ? "is-circle" : "",
+        block ? "is-block" : "",
+        withoutBorder ? "has-no-border" : "",
+        hasBackgroundColor ? "has-background-color" : "",
+    ]);
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsx("div", { title: title, ...dataAttributes, className: containerClassName, children: items.map((item) => {
+            const itemId = `${name}-${item.id}`;
+            const isDisabled = disabled || item.disabled;
+            const isChecked = value === item.id;
+            const itemDataAttributes = isNullish(item.title)
+                ? undefined
+                : { title: item.title };
+            return (_jsxs("div", { className: "bbr-radio-item", children: [_jsx("input", { id: itemId, name: name, type: "radio", value: item.id, checked: isChecked, onChange: onChange, disabled: isDisabled, className: radioClassName }), _jsx("label", { htmlFor: itemId, ...itemDataAttributes, children: item.displayValue })] }, item.id));
+        }) }));
+};
+export default RadioGroup;