← StyleLab UI

Changelog

Version history and release notes for StyleLab UI.

[0.4.1]

  • Navbar — Mobile menu: click-outside ref wraps both the bar and the dropdown panel so taps on nav links or buttons (e.g. Log out) run the action instead of only closing the menu. Mobile panel uses an explicit opaque theme-aware background in all themes (readable with glass/clay). Optional `mobileMenuExtra` prop renders content at the bottom of the hamburger overlay (e.g. a Log out button); clicking it closes the menu.

[0.4.0]

  • Overrides + refs — Component roots consistently support `style`, consumer `className` overrides (consumer class last), and ref forwarding across the library.
  • Theme fixes — Card no longer forces text color; Button `ghost` uses `text-inherit` so it can inherit parent text color.
  • Accessibility — ProgressBar now supports ARIA progress attributes; Toast supports Escape-to-dismiss; Tooltip uses `aria-describedby` when visible.
  • Exports — `mergeRefs` and common component prop types are re-exported from the package entry.
  • Tests — Vitest + React Testing Library test suite added (including smoke tests for every component).

[0.3.2]

  • ThemeProvider — Optional `persistTheme` prop (default true). When `persistTheme={false}`, the provider does not read from or write to localStorage — theme stays at defaultTheme unless changed in memory. Use for fixed-theme pages (e.g. landing, docs) or nested providers where only the inner tree should persist. `storageKey` still applies when persistTheme is true.

[0.3.1]

  • Dropdown — `disabled` prop: when true, the dropdown does not open and the trigger is non-interactive (opacity, cursor, no popover). Use for empty or loading state.

[0.2.0]

  • Navbar — Optional responsive API: pass `logo`, `items` (`{ href, label }[]`), and `right` (e.g. theme switcher). On small screens nav links become a hamburger menu that opens as an overlay (no layout shift), with the theme's navbar background; glass and clay use an opaque panel so content doesn't show through. Desktop shows full nav row. Menu closes on link click or outside click. You can still pass `children` for a custom layout. Exported types: `NavbarItem`, `NavbarProps`.
  • ThemeProvider — Restores theme from `localStorage` on mount; `setTheme` persists the new theme. Optional `storageKey` prop (default `"stylelab-theme"`).
  • Dropdown — Popover is portaled to `document.body` and positioned with open-up/down logic. Optional `trigger` and `placeholder` (default trigger shows selected/placeholder label). `classNames` for trigger, popover, and item. Theme-aware hover/focus styles. Exported types: `DropdownItem`, `DropdownProps`, `DropdownClassNames`.
  • Card — `classNames` for root, header, body, footer. Cyberpunk no longer uses the clip-path "glitch cut" (avoids weird look on different backgrounds); neon border and glow remain. Exported types: `CardProps`, `CardClassNames`.
  • Badge — `bgOverride` and `textOverride` (e.g. hex) when you need specific colors.
  • ProgressBar — `trackColor` and `activeColor` overrides (e.g. hex).
  • DashboardShell — Header, nav links, and mobile panel use theme-based styling (no `dark:`; works with StyleLab themes).
  • GraphicCard — In night and cyberpunk themes, content text inherits the card's text color so children with hardcoded dark text still display correctly.
  • Docs — Installation: Next.js/existing React apps install the package only; add `react`/`react-dom` only for new projects without React.
  • Types — `StyleLabTheme`, `ComponentName`, `ThemeRecommendation` from `lib/types`; component prop types `NavbarItem`, `NavbarProps`, `CardProps`, `CardClassNames`, `DropdownItem`, `DropdownProps`, `DropdownClassNames` re-exported from the package.

For the full README and repo links, see the GitHub repository.