@bodynarf/react.components 1.13.8 → 1.14.1

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/component/style.css

@@ -0,0 +1,20 @@
+.bbr-multiselect .dropdown-content {
+  overflow: hidden;
+}
+.bbr-multiselect .dropdown-content ul {
+  max-height: 13.5rem;
+  overflow: auto;
+}
+.bbr-multiselect .dropdown-content ul li.bbr-dropdown-item .field:not(:last-child) {
+  margin-bottom: 0 !important;
+}
+.bbr-multiselect .dropdown-content ul li.bbr-dropdown-item .bbr-icon {
+  transition: none;
+}
+.bbr-multiselect.is-up .dropdown-menu {
+  top: auto;
+  bottom: 100%;
+}
+.bbr-multiselect.is-up.is-active .bbr-dropdown__label .bbr-icon.bi-arrow-down::before {
+  transform: rotate(360deg);
+}

package/components/multiselect/components/withoutLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiselect/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoD,MAAM,OAAO,CAAC;AAU7E,OAAO,EAAE,gBAAgB,EAA2C,MAAM,aAAa,CAAC;AAIxF,8CAA8C;AAC9C,KAAK,4BAA4B,GAAG,gBAAgB,GAAG;IACnD,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAqK7D,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiselect/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoD,MAAM,OAAO,CAAC;AAU7E,OAAO,EAAE,gBAAgB,EAA2C,MAAM,aAAa,CAAC;AAIxF,8CAA8C;AAC9C,KAAK,4BAA4B,GAAG,gBAAgB,GAAG;IACnD,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAsK7D,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -9,9 +9,6 @@ import InternalHint from "../../../primitives/internal/hint";
 import MultiselectItem from "../item";
 import MultiselectLabel from "../label/component";
 const MultiselectWithoutLabel = ({ items, onChange, onClear, hideOnOuterClick, listMaxHeight, placeholder = "", noDataText = "No items found", selectionCaption = "{0} items selected", noDataByQuery = "No items found by specified search", compact = false, disabled = false, searchable = true, validationState, className, title, data, hint, id: propsId, checkboxConfig, }) => {
-    const generatedId = useId();
-    const id = propsId ?? generatedId;
-    const containerRef = useRef(null);
     const [isListVisible, setListVisible] = useState(false);
     const [selectedItems, setSelectedItems] = useState(items
         .filter(({ selected }) => selected)
@@ -19,6 +16,9 @@ const MultiselectWithoutLabel = ({ items, onChange, onClear, hideOnOuterClick, l
         ??
             []);
     const [isOpenUp, setIsOpenUp] = useState(false);
+    const containerRef = useRef(null);
+    const generatedId = useId();
+    const id = propsId ?? generatedId;
     const onItemClick = useCallback((item) => {
         const isItemSelected = selectedItems.includes(item.id);
         setSelectedItems(x => isItemSelected
@@ -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/checkbox/component/style.css

@@ -0,0 +1,19 @@
+.is-checkradio.m-check-radio[type=checkbox].has-background-color.m-has-background-color:not(:checked) + label::before {
+  border-color: #dbdbdb !important;
+  background-color: transparent !important;
+}
+.is-checkradio.m-check-radio[type=checkbox].is-block + label.is-empty::before {
+  left: 0.25rem !important;
+  top: 0.25rem !important;
+}
+.is-checkradio.m-check-radio[type=checkbox].is-block + label.is-empty::after {
+  top: 0.45rem;
+  left: 0.7rem;
+}
+.is-checkradio.m-check-radio[type=checkbox]:not(.is-block) + label::after {
+  top: 0.275rem;
+}
+.is-checkradio.m-check-radio[type=checkbox] + label.is-empty {
+  padding-left: 1rem;
+  margin: 0 !important;
+}

package/components/primitives/color/component/style.css

@@ -0,0 +1,15 @@
+.bbr-color-picker input[type=color]:not([disabled]) {
+  cursor: pointer;
+}
+.bbr-color-picker__preview {
+  --color-picker__background-color: transparent;
+  --color-picker__color: black;
+  transition: 0.15s ease-in-out;
+  transition-property: background-color, color;
+  background-color: var(--color-picker__background-color) !important;
+  color: var(--color-picker__color) !important;
+}
+.bbr-color-picker__preview:focus {
+  box-shadow: none !important;
+  border-color: hsl(0, 0%, 86%) !important;
+}

package/components/primitives/date/component/style.css

@@ -0,0 +1,9 @@
+.control.is-loading input[type=date]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+.control input[type=date]::-webkit-calendar-picker-indicator {
+  position: absolute;
+  right: 0.75rem;
+  cursor: pointer;
+}

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/internal/hint/style.css

@@ -0,0 +1,4 @@
+p.bbr-hint {
+  white-space: pre-line;
+  display: inline-flex;
+}

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/password/component/style.css

@@ -0,0 +1,10 @@
+.bbr-password:focus ~ .icon:not(:hover) {
+  color: rgb(219, 219, 219) !important;
+}
+.bbr-password__wrapper .icon {
+  pointer-events: inherit !important;
+  cursor: pointer;
+}
+.bbr-password__wrapper .icon:hover {
+  color: rgb(74, 74, 74);
+}

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;