xertica-ui 2.9.9 → 3.0.0

package/CHANGELOG.md

@@ -11,6 +11,19 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [3.0.0] — 2026-07-17
+
+### Fixed
+
+- **Scroll da `Sidebar` aparecia com a barra nativa do navegador, "colorida" e destoante do fundo escuro** — os containers de navegação com scroll real (variante `assistant` e o acordeão de overflow no mobile) usavam `overflowY: 'auto'` puro, sem nenhum estilo de scrollbar. Corrigido aplicando as utilities nativas do Tailwind v4 `scrollbar-thin scrollbar-thumb-sidebar-border scrollbar-track-transparent`, usando o token `--sidebar-border` (que resolve para um overlay de baixa opacidade sobre o fundo da sidebar em todos os 10 temas de marca), deixando o scroll discreto em qualquer tema.
+- **Botão de filtro da `Sidebar.Search` perdia contraste no hover** — herdava o `hover:text-accent-foreground` (cor escura, pensada para superfícies claras) da variante `ghost` do `Button`, por sobrescrever apenas o `hover:bg-*` e não o `hover:text-*`. Corrigido adicionando `hover:text-sidebar-foreground` explicitamente, no mesmo padrão já usado pelo botão de "mais opções".
+
+### Changed
+
+- **Largura padrão da `Sidebar` expandida aumentada de 256px para 320px** (`LayoutContext`), com o fallback standalone de `Sidebar.Root` (fora de um `LayoutProvider`) também atualizado de 280px para 320px para manter os dois caminhos consistentes.
+
+---
+
 ## [2.9.9] — 2026-07-14
 
 ### Fixed

package/README.md

@@ -2,7 +2,7 @@
 
 > **Enterprise-grade React design system** built on Tailwind CSS v4, Radix UI, and Lucide Icons — with a robust AI-first documentation layer for precise LLM-driven composition and autonomous agent interaction.
 
-[![npm version](https://img.shields.io/badge/npm-2.9.9-blue)](https://www.npmjs.com/package/xertica-ui)
+[![npm version](https://img.shields.io/badge/npm-3.0.0-blue)](https://www.npmjs.com/package/xertica-ui)
 [![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
 
 ---

package/components/layout/sidebar/sidebar.stories.tsx

@@ -86,8 +86,8 @@ export const Default: Story = {
     const { sidebarWidth: contextWidth } = useLayout();
     const [isExpanded, setIsExpanded] = useState(args.expanded);
 
-    // In Storybook, we match the sidebar widths (280 expanded, 80 collapsed)
-    const currentWidth = isExpanded ? 280 : 80;
+    // In Storybook, we match the sidebar widths (320 expanded, 80 collapsed)
+    const currentWidth = isExpanded ? 320 : 80;
 
     return (
       <div
@@ -165,7 +165,7 @@ export const DefaultWithGroups: Story = {
   },
   render: args => {
     const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 280 : 80;
+    const currentWidth = isExpanded ? 320 : 80;
 
     return (
       <div
@@ -315,7 +315,7 @@ export const Assistant: Story = {
   },
   render: args => {
     const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 280 : 80;
+    const currentWidth = isExpanded ? 320 : 80;
 
     return (
       <div
@@ -350,7 +350,7 @@ export const Collapsed: Story = {
   },
   render: args => {
     const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 280 : 80;
+    const currentWidth = isExpanded ? 320 : 80;
 
     return (
       <div
@@ -384,7 +384,7 @@ export const NoFooter: Story = {
   },
   render: args => {
     const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 280 : 80;
+    const currentWidth = isExpanded ? 320 : 80;
 
     return (
       <div
@@ -614,7 +614,7 @@ export const WithSubitemsDesktop: Story = {
   },
   render: args => {
     const [isExpanded, setIsExpanded] = useState(true);
-    const currentWidth = isExpanded ? 280 : 80;
+    const currentWidth = isExpanded ? 320 : 80;
 
     return (
       <div
@@ -880,7 +880,7 @@ export const CompoundComponentAPI: Story = {
   name: 'Compound Component API',
   render: () => {
     const [isExpanded, setIsExpanded] = React.useState(true);
-    const currentWidth = isExpanded ? 280 : 80;
+    const currentWidth = isExpanded ? 320 : 80;
     const groups = [
       {
         id: 'main',
@@ -973,7 +973,7 @@ export const HeadlessHook: Story = {
       navigationGroups: resolvedGroups,
     } = useSidebar({ defaultExpanded: true, navigationGroups: groups });
 
-    const width = expanded ? 280 : 80;
+    const width = expanded ? 320 : 80;
 
     return (
       <div

package/components/layout/sidebar/sidebar.tsx

@@ -200,7 +200,7 @@ function useSidebarContext() {
  * Use this when building a fully custom sidebar layout.
  *
  * @example
- * <Sidebar.Root expanded={expanded} onToggle={toggle} width={280}>
+ * <Sidebar.Root expanded={expanded} onToggle={toggle} width={320}>
  *   <Sidebar.Header logo={<MyLogo />} />
  *   <Sidebar.Nav navigationGroups={groups} />
  *   <Sidebar.Footer user={user} onLogout={logout} />
@@ -231,7 +231,7 @@ function SidebarRoot({
     expandedProp !== undefined ? expandedProp : (layoutContext?.sidebarExpanded ?? localExpanded);
   const onToggle =
     onToggleProp || layoutContext?.toggleSidebar || (() => setLocalExpanded(prev => !prev));
-  const width = widthProp !== undefined ? widthProp : (layoutContext?.sidebarWidth ?? 280);
+  const width = widthProp !== undefined ? widthProp : (layoutContext?.sidebarWidth ?? 320);
   const navigate =
     navigateProp ||
     ((path: string) => {
@@ -925,7 +925,7 @@ function SidebarNav({
     return (
       <div className="flex-1 min-h-0 overflow-hidden">
         <div
-          className="h-full px-4"
+          className="h-full px-4 scrollbar-thin scrollbar-thumb-sidebar-border scrollbar-track-transparent"
           style={{ overflowY: 'auto', overflowX: 'hidden' }}
         >
           {navigationGroups.map(group => renderAssistantGroup(group))}
@@ -938,7 +938,7 @@ function SidebarNav({
     return (
       <div className="flex-1 min-h-0 overflow-hidden">
         <div
-          className="h-full"
+          className="h-full scrollbar-thin scrollbar-thumb-sidebar-border scrollbar-track-transparent"
           style={{ overflowY: 'auto', overflowX: 'hidden' }}
         >
           <nav
@@ -1215,7 +1215,7 @@ function SidebarSearch({
                 size="icon"
                 onClick={() => setIsFilterOpen(!isFilterOpen)}
                 className={cn(
-                  'h-9 w-9 text-sidebar-foreground transition-all duration-200',
+                  'h-9 w-9 text-sidebar-foreground hover:text-sidebar-foreground transition-all duration-200',
                   isFilterOpen ? 'bg-sidebar-foreground/20' : 'hover:bg-sidebar-foreground/15'
                 )}
                 aria-label={isFilterOpen ? t('sidebar.closeFilters') : t('sidebar.openFilters')}

package/contexts/LayoutContext.tsx

@@ -62,7 +62,7 @@ export function LayoutProvider({ children }: { children: ReactNode }) {
   });
 
   const [assistenteExpanded, setAssistenteExpandedState] = useState(false);
-  const [sidebarWidth, setSidebarWidth] = useState(256);
+  const [sidebarWidth, setSidebarWidth] = useState(320);
   const isMobile = useIsMobile();
 
   // Persist sidebar state