v1.15

v1.15.0

• Chip (new) — Compact element similar to Tag, but with the delete button rendered inside the chip itself. Supports all Tag features: colors, sizes, rounded, light variants, custom colors, onClick and onRemove.

• Multiselect (updated)

  • Removed displayMode and tagsConfig props.
  • Added resultDisplayConfig prop ("default" | MultiselectResultAsChipDisplayConfig). "default" preserves existing behavior (summary text like "3 items selected"). When a chip config object is provided, selected items are rendered as removable Chip components.
  • Chip config supports position: "label" renders chips inside the dropdown trigger with auto-expanding height; "belowLabel" renders chips below the standard label.
  • Chip config extends ChipProps (minus content, size, onRemove) — supports style, rounded, lightColor, customColor, className, data, etc.
  • Added optional containerClassName for custom styling of the chips container.

• DateInput (new) — Date input field with masked manual entry and Calendar popover. Supports configurable format (dd.MM.yyyy, MM/dd/yyyy, etc.), automatic separator insertion, per-character validation (rejects impossible dates like 30.57), min/max date constraints, locale, all standard input props (sizes, colors, rounded, disabled, readonly, label, hint, validation). Calendar opens on click and closes on date selection or Escape.

• Date primitive (deprecated) — The native <input type="date"> wrapper is deprecated since v1.15. Use DateInput instead. Will be removed in v1.16.

• TreeView (new) — Hierarchical tree component for displaying nested data (file explorers, org charts, category trees). Supports expand/collapse, single and multi-selection with parent ↔ child propagation, optional checkboxes with indeterminate state, and full keyboard navigation (arrows, Enter, Space). Uncontrolled by default; becomes controlled when expandedIds/selectedIds are provided.

• Popover (new) — Lightweight floating panel anchored to a trigger element; useful for rich tooltips, mini-forms or contextual actions. Compound component: Popover.Trigger + Popover.Content. Uncontrolled by default; becomes controlled with visible + onToggle.

• DateRangePicker (new) — Calendar-based date range selector for booking, reporting and filtering flows. First click sets start, second sets end; live hover preview between dates. Fully controlled.

• Spinner (new) — Loading indicator for async operations and pending states.

• EmptyState (new) — Placeholder for empty lists, search results or pages with no data.

• Stat (new) — KPI / statistics display card for dashboards. Shows a primary metric value with label, optional icon badge and trend indicator (up/down/neutral).

• OtpInput (new) — One-time password / PIN input rendered as a row of single-character cells. Supports paste, Backspace navigation and arrow keys between cells.

• Rating (new) — Star-based rating input for reviews and feedback forms. Supports half-star increments and read-only display mode.

• SegmentedControl (new) — Pill-style option selector (tab bar alternative) for switching between a small set of values. Fully controlled.

• ImageViewer (new) — Lightbox-style fullscreen overlay for viewing single images and galleries. Supports keyboard navigation and closes on Escape. Fully controlled (visible + onClose).

• Menu (new) — Vertical navigation sidebar based on Bulma .menu. Supports grouped sections, icons, active item highlight and disabled items.

• Skeleton (new) — Shimmer placeholders for content loading states. Compound component with sub-variants: Skeleton.Text, Skeleton.Block, Skeleton.Avatar, Skeleton.Button.

• Notification (new) — Toast-like notification system with auto-close and stacking. Requires NotificationContainer.Provider as a wrapper around the app/subtree. Programmatic control via useNotification() hook (add, remove, clear).

• TagGroup (new) — Editable tag list for label management, filtering and multi-value inputs. Supports add/remove, duplicate prevention, configurable confirm keys and max tag limit.

• Tag (updated)

  • Added onRemove?: () => void — when provided, the component wraps itself in a <div class="tags has-addons"> and appends an is-delete span. The delete span receives the same size class as the tag so they always scale together.

• ContextMenu (new) — Right-click context menu for any element. Rendered via portal into <body>, auto-flips when near viewport edges. Closes on outside click, Escape or scroll.

• ConfirmDialog (new) — Focused confirmation modal for destructive or important actions. Supports async confirm with loading state. cancellable mode prevents closing via backdrop/Escape — user must click a button.

• Carousel (new) — Slides carousel for image galleries, banners and onboarding flows. Supports Fade and Slide effects, auto-play, loop, dots and arrow navigation. Uncontrolled by default; becomes controlled with activeIndex + onChange.

• Alert (new) — Styled message banner for informational, warning or error notices. Optional closable header.

• AutoComplete (new) — Text input with dropdown suggestions for search and selection. Supports static items (local filter) and async onSearch for server-side lookup. Blur validation auto-selects on exact/prefix match or shows an error underline.

• Badge (new) — Overlay indicator (counter or dot) rendered on the top-right corner of any child element. Useful for unread counts, "new" markers and notification badges.

• animations.scss (new)

  • Standalone global animation stylesheet (src/animations.scss) — import once at the app entry point, then apply animations via className on any element.
  • Infinite (support pause via bbr-anim-paused): bbr-pulse, bbr-spin, bbr-spin-reverse, bbr-bounce, bbr-heartbeat, bbr-float, bbr-wobble.
  • One-time (re-trigger by changing React key): bbr-shake, bbr-fade-in, bbr-pop, bbr-flip, bbr-rubber-band, bbr-tada, bbr-zoom-in, bbr-slide-in-left, bbr-slide-in-right, bbr-slide-in-down.
  • bbr-anim-paused — pauses any running animation via animation-play-state: paused.

• Avatar (new) — User avatar component with automatic fallback chain: image → initials → icon. Supports status indicator dot (Online/Away/Offline) and multiple shapes (circle, square, rounded square).

• Calendar (new) — Standalone date-picker panel with day-grid, month-picker and year-picker views. Supports locale, min/max date range, optional Today and Clear footer buttons. Pre-selected value outside min/max is auto-cleared on mount.

• Card (new) — Generic content container. Compound component with optional Card.Header, Card.Body and Card.Footer sub-components in any combination.

• Toast (new) — Inline or fixed-position notification banner. Supports auto-close and color variants. Use fixed + position for viewport-anchored toasts.

• Tooltip (new) — Hover/click-triggered popup for contextual hints and help text. Compound component: Tooltip.Hint (content) + Tooltip.Target (anchor). Supports Fade/Slide animation, configurable close behavior (MouseLeave, OutsideClick, Manual) and controlled mode.

• SidePanel (new) — Sliding side panel with backdrop overlay for detail views, settings and filters. Compound component: SidePanel.Title + SidePanel.Body. Closes on Escape and backdrop click.

• ModalWrapper (extended)

  • Added compound component pattern: ModalWrapper.Header, ModalWrapper.Body, ModalWrapper.Footer.
  • Only ModalWrapper.Body is required; ModalWrapper.Header and ModalWrapper.Footer are optional.
  • When ModalWrapper.Body is detected in children, compound mode activates automatically — legacy title / actions props are ignored. No breaking change.
  • ModalWrapper.Header renders a fully customizable modal-card-head — add any content, extra buttons, or icons.
  • ModalWrapper.Footer renders a modal-card-foot with arbitrary content instead of the actions button array.
  • Added showMaximizeButton prop (default false) — renders a maximize / restore icon button (arrows-angle-expand / arrows-angle-contract) to the left of the close button.
  • Maximize stretches the modal card to 95vw × 95vh; restore returns it to its original size. Both transitions are animated.
  • actions prop is now optional (defaults to empty array); no breaking change.

New hooks

• useDebounce (new) — returns a debounced copy of value that only updates after delay ms of inactivity.
• useDebounceHandler (new) — wraps an async handler and returns [canFire, fire]; canFire is false for debounceTime seconds after each invocation.
• usePrevious (new) — stores and returns the previous render's value of any state or prop; returns undefined on the first render.
• useUpdateEffect (new) — identical to useEffect but skips execution on the initial render.
• useTimeout (new) — fires callback once after delay ms; pass null to disable. Auto-clears on unmount or delay change.
• useInterval (new) — repeats callback every delay ms; pass null to pause without unmounting. Auto-clears on unmount.
• useEventListener (new) — attaches a typed event listener to window (default) or any HTMLElement / Document; cleans up automatically.
• useLocalStorage (new) — useState-like hook that persists its value to localStorage; initialises from storage on first render.
• useSessionStorage (new) — mirrors useLocalStorage API but uses sessionStorage; value is cleared when the tab is closed.
• useClipboard (new) — copies tex...

v1.14

• 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.
  • Added valuePosition prop to position the value tooltip below the slider ("bottom") in horizontal mode.
  • Tooltip positioning now adjusts based on thumb size for all sizes (Small, Normal, Medium, Large).
  • Custom value formatting via valueFormatter callback.

• 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.10

What's Changed

• #11 add no data option to dropdown by @bodynar in #12
• Feature/#8 add search to dropdown by @bodynar in #14
• #18 add missed table styles, update heading structure by @bodynar in #19
• Feature/update components by @bodynar in #23
• Feature/#22 fix date picker icon by @bodynar in #24
• Feature/#20 add multiselect by @bodynar in #26

Demo: https://bodynar.github.io/bodynarf.react-components/#/home

Full Changelog: v1.9...v1.10

v1.9

What's Changed

• Add new components: BreadCrumbs, Table
• Fix existing components
• Add hint prop to input components
• Add icons for dropdown items
• Add title for dropdown items

Demo: https://bodynar.github.io/bodynarf.react-components/#/home

Full Changelog: v1.8...v1.9

v1.8 Release

I. Add new components:

• Accordion
• Paginator
• Tabs
• Tag

And new controls:

• Checkbox
• Color
• Number
• Password

II. Update existed controls & components
II. Reorganize exports & polish code, fix all known issues
IV. Added the demo project with use-cases of components & controls, deployed at https://bodynar.github.io/bodynarf.react-components/

For all available features - please follow the readme

Initial release

Baseline for components