All notable changes to @unbrn/ui will be documented in this file.
- Added AvatarGroup Component: Introduced the
AvatarGroupcomponent to display overlapping avatar lists with a customizablemaxlimit and responsive numeric sizing.
- Added "Arcade" Background: Introduced the
Arcadebackground component, a customizable, retro-themed WebGL shader animation with interactive grid effects, speed, noise, and color tuning.
- Numeric Sizing System Overhaul: Converted all size properties across all UI components from string literals (
"sm","default","lg") to numeric values (1 | 2 | 3or1 | 2 | 3 | 4 | 5for Avatar) to simplify layouts and standardize theming:- 3-tier components (
Button,Input,Select,Checkbox,ColorPicker,Dock,Slider,Switch) now supportsize={1} | {2} | {3}. - Sizing classes resolved correctly via local helper functions mapping numeric props to their responsive CSS values (e.g.
.size-sm,.unbrn-badge-sm, etc.).
- 3-tier components (
- Smart Theme Variables (
base.css): Enhanced core design system variables to dynamically calculate secondary backgrounds, borders, muted text, and translucent glass backdrop elements using CSScolor-mix()relative to the base--bg-mainand--text-mainvalues. Custom accents default to match main text/bg automatically. - Cleaned Component Props: Standardized the properties across all 18 UI components, docs site examples, consumer app, and Next.js arcade app to use clean, unprefixed props (e.g., refactoring
SelectOptionproperties fromoptionLabel/optionIcontolabel/icon). - Responsive ColorPicker Swatches: Sized the ColorPicker preview swatch responsive to trigger button sizing (e.g.,
14pxfor size 1,18pxfor size 2,22pxfor size 3). - Removed Size 3 from Action & Badge Components: Restricted size props of
ActionandBadgecomponents to1 | 2, cleaning up large item showcases and API documentation. - Removed Button Split Feature: Deleted the
splitprop, related conditional group CSS rules, and showcase sections fromButtonGroupandButtoncomponents.
- Vite Production Bundler & Duplicate React Fix: Configured module resolution aliases (
react,react-dom,lucide-react) and path normalization inside Vite's config. This deduplicates React/Lucide React instances during production builds in monorepo workspaces, completely resolving the blank page (TypeError: Cannot read properties of null (reading 'useState')) rendering issue onnpm run preview. - Mobile Header Visibility Fix: Prevented the header from hiding on scroll down on mobile viewports (
window.innerWidth <= 768), ensuring consistent navigation visibility. - Mobile Spacing & Padding Adjustments:
- Aligned
.home-pagemobile margins with the rest of the documentation layout by setting padding to0 20px. - Added
flexWrap: 'wrap'to flex containers in component showcases to prevent horizontal scrolling/clipping on small viewports.
- Aligned
- Redesigned Alert and Accordion Components: Overhauled the visual design and layouts of
AlertandAccordioncomponents for improved aesthetics and usability.
- Select Menu Overflow Handling: Implemented horizontal fading masks (
mask-image) for long text option labels, input text, and trigger values. - Select Layout Enhancements: Refined layout spacing with standardized gaps and adjusted font size for large select triggers.
- Added Custom Accent Colors: Added custom accent colors for
Input,Select, andTextareacomponents. - Select Autocomplete: Added autocomplete support to
Select. - Sizing Support: Added sizes to select items and
Actioncomponents.
- Mobile Backgrounds: Optimized background animations/shaders for mobile viewports.
- Added new Component (
ColorPicker): Introduced a highly-interactive, premium color picker component with support for custom formats, visual spectrum selection, presets, and alpha channel configuration. - Introducing Background Shaders:
- Added the
LiquidChromebackground component (a highly-dynamic fluid chrome liquid canvas animation). - Added the
LumenBeambackground component (a premium interactive beam light shader effect). - Added the
SatinFlowbackground component (a smooth, modern flowing color pattern animation).
- Added the
- Library Rebranding: Rebranded the package from
@unburn/uito@unbrn/uiacross all codebases, packages, imports, and references. - Redesigned Documentation Site:
- Overhauled the documentation homepage with a left-aligned hero layout, modern typography, and a fading Liquid Chrome background.
- Redesigned the sticky header to include inline navigation links, a mobile-responsive search trigger, and Discord link integrations.
- Unified sizing structures (
sm,default,lg) and heights (32px/42px/52px) across inputs, buttons, and select dropdowns.
- Properties and API Validation: Verified and corrected property tables across all component pages (including
Checkbox,Dock,Input,Slider, andVoiceAgent) to ensure 100% alignment with actual TypeScript interfaces. - Textarea Class Typo: Standardized styling class names in
Textarea.cssto use hyphens (unbrn-textarea-*), matching the React component classes. - Mobile Responsiveness: Addressed multiple styling regressions on smaller viewports, including header spacing, padding alignments, and hero button stacking on the homepage.