xertica-ui 1.8.1 → 1.9.0

package/CHANGELOG.md

@@ -7,6 +7,31 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [1.9.0] — 2026-05-05
+
+### Added
+- **Standardized Form Sizing System** — Implemented a unified `size` prop (`sm`, `md`, `lg`) across all form-related components for perfect visual alignment in grid layouts:
+  - **Text Components** — `Input`, `SelectTrigger`, `Textarea`, `Search`, and `InputOTPSlot` now share consistent height/padding/font-size tokens.
+  - **Toggle Components** — `Checkbox`, `RadioGroupItem`, and `Switch` now feature dynamic sizing for both containers and internal indicators (check icon, dot, thumb).
+  - **Labels** — `Label` component now supports `size` to match the text size of the associated input.
+  - **Reference Guide** — Added `docs/form-sizing.md` as a comprehensive guide for the standardized sizing scale.
+- **Assistant Individual Controls** — Added granular control props to `XerticaAssistant` to toggle specific features independently:
+  - `showHistory`, `showFavorites`, `allowAudioInput`, `allowFileUpload`, `allowDocCreation`, `allowPodcastGen`, `allowResearchGen`.
+- **Header Breadcrumb Navigation** — Standardized `Header` to use breadcrumbs as the default navigation pattern:
+  - Added support for `react-router-dom` links in breadcrumbs to prevent page reloads.
+  - Configurable hierarchy levels and labels directly via props.
+
+### Changed
+- **Form Component Architecture** — Migrated form elements from legacy tokens to standardized design system tokens (`bg-background`, `border-border`) for better theme consistency.
+- **Documentation & Storybook** — Updated all 9 affected form components with new "Sizes" sections in Storybook (Stories + MDX) and enriched LLM-facing markdown documentation.
+- **Unit Testing** — Updated test suites for `Checkbox`, `RadioGroup`, `Switch`, `InputOTP`, `Label`, `Search`, `Select`, and `Textarea` to verify sizing variant classes.
+
+### Fixed
+- **Search Component** — Removed obsolete `loading` prop which was causing TypeScript errors and was redundant with the current design system patterns.
+- **SelectTrigger Sizing** — Standardized `md` height to `h-10` (40px) to match the rest of the form system.
+
+---
+
 ## [1.8.0] — 2026-04-27
 
 ### Added

package/README.md

@@ -1,184 +1,184 @@
-# Xertica UI
-
-> **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/npm/v/xertica-ui)](https://www.npmjs.com/package/xertica-ui)
-[![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
-
----
-
-## 🤖 AI-First Single Source of Truth
-
-Xertica UI is specifically designed to be consumed by AI Agents (LLMs, code assistants, autonomous agents). We provide dedicated entry points for AI context:
-
-| File | Purpose |
-|---|---|
-| [`llms.txt`](./llms.txt) | Standard index for AI crawlers and context-aware agents. |
-| [`llms-full.txt`](./llms-full.txt) | **Complete documentation** of all 96 components in a single file for large-context LLMs. |
-| `docs/llms.md` | Master index for agents to navigate the documentation folder. |
-
----
-
-## 🚀 Quick Start — CLI (Recommended)
-
-Scaffold a full application with pre-configured routing, layout, and components:
-
-```bash
-npx xertica-ui@latest init my-app
-cd my-app
-npm run dev
-```
-
-The CLI scaffolds a complete Vite + React + TypeScript project with Portuguese UI localization and English AI-ready documentation.
-
----
-
-## 📦 Installation as a Library
-
-To add Xertica UI to an existing React project:
-
-```bash
-npm install xertica-ui
-```
-
-**1. Import the stylesheet** in your entry file (`main.tsx` or `App.tsx`):
-
-```tsx
-import 'xertica-ui/style.css';
-```
-
-**2. Wrap your app** with `XerticaProvider`:
-
-```tsx
-import { XerticaProvider } from 'xertica-ui';
-
-function App() {
-  return (
-    <XerticaProvider>
-      <YourApp />
-    </XerticaProvider>
-  );
-}
-```
-
----
-
-## 🛠️ The Layout System
-
-Xertica UI features an autonomous layout system managed by `LayoutContext`.
-
-### Mandatory Page Structure
-Every page **must** use the `<PageHeader>` component for its title and primary actions. Never use raw `h1` or `div` for headers.
-
-```tsx
-import { PageHeader, PageHeaderHeading, Button } from 'xertica-ui';
-
-export function MyPage() {
-  return (
-    <>
-      <PageHeader>
-        <PageHeaderHeading>Dashboard</PageHeaderHeading>
-        <Button>Action</Button>
-      </PageHeader>
-      <div className="p-6">
-        {/* Page Content */}
-      </div>
-    </>
-  );
-}
-```
-
-### `useLayout()` Hook
-Access the sidebar state, width, and toggle functions anywhere in the component tree:
-```tsx
-const { sidebarWidth, isSidebarOpen, toggleSidebar } = useLayout();
-```
-
----
-
-## 🧩 Component Catalog (96 Components)
-
-### Layout & Navigation
-`Header` · `Sidebar` · `PageHeader` · `Breadcrumb` · `NavigationMenu` · `Tabs` · `Pagination` · `Accordion` · `Collapsible`
-
-### Core Surfaces
-`Card` · `Separator` · `ScrollArea` · `AspectRatio` · `Resizable` · `Skeleton` · `Empty`
-
-### Forms & Inputs
-`Form` · `Input` · `Textarea` · `RichTextEditor` · `Label` · `Checkbox` · `RadioGroup` · `Switch` · `Select` · `Slider` · `Calendar` · `InputOTP` · `FileUpload` · `Search`
-
-### Actions & Data
-`Button` · `Toggle` · `ToggleGroup` · `Rating` · `Table` · `Badge` · `Avatar` · `Progress` · `StatsCard` · `Timeline` · `Stepper` · `TreeView` · `NotificationBadge` · `Chart`
-
-### Overlays & Feedback
-`Dialog` · `AlertDialog` · `Sheet` · `Drawer` · `Popover` · `HoverCard` · `Tooltip` · `Alert` · `Sonner (Toast)` · `Command`
-
----
-
-## 🌟 Specialized Modules
-
-### 🤖 AI Assistant
-Integrated AI chat panel with workspace support.
-- `XerticaAssistant` · `MarkdownMessage` · `CodeBlock` · `AssistantChart`
-
-### 🗺️ Maps & Geolocation
-First-class Google Maps integration.
-- `Map` · `RouteMap` · `SimpleMap` · `GoogleMapsLoader`
-
-### 🎙️ Media
-- `AudioPlayer` · `VideoPlayer` · `FloatingMediaWrapper`
-
----
-
-## 🎨 Design Tokens
-
-Xertica UI uses semantic CSS tokens. **Never use raw colors or generic Tailwind color classes**:
-
-```
-Background:     bg-background          text-foreground
-Card surface:   bg-card                text-card-foreground
-Muted area:     bg-muted               text-muted-foreground
-Primary action: bg-primary             text-primary-foreground
-Destructive:    bg-destructive         text-destructive-foreground
-Border:         border-border
-```
-
----
-
-## 🌍 Localization
-
-- **UI Components**: Fully localized in **Portuguese (pt-BR)** for end-users.
-- **Documentation/Code**: Strictly maintained in **English** for AI Agent compatibility and global developer standard.
-
----
-
-## 💻 Tech Stack
-
-| Technology | Version |
-|---|---|
-| React | 18.3 |
-| TypeScript | 5.7 |
-| Tailwind CSS | 4.0 |
-| Vite | 6.0 |
-| Radix UI | Latest |
-| Lucide React | 0.469+ |
-| Vitest | 4.1 |
-
----
-
-## 📜 Scripts
-
-| Command | Description |
-|---|---|
-| `npm run dev` | Start development server |
-| `npm run build` | Production bundle |
-| `npm run storybook` | Launch component library documentation |
-| `npm run test` | Run unit tests via Vitest |
-| `npm run type-check` | TypeScript validation |
-
----
-
-## ⚖️ License
-
-Proprietary — Xertica AI Team.
-
+# Xertica UI
+
+> **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/npm/v/xertica-ui)](https://www.npmjs.com/package/xertica-ui)
+[![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
+
+---
+
+## 🤖 AI-First Single Source of Truth
+
+Xertica UI is specifically designed to be consumed by AI Agents (LLMs, code assistants, autonomous agents). We provide dedicated entry points for AI context:
+
+| File | Purpose |
+|---|---|
+| [`llms.txt`](./llms.txt) | Standard index for AI crawlers and context-aware agents. |
+| [`llms-full.txt`](./llms-full.txt) | **Complete documentation** of all 96 components in a single file for large-context LLMs. |
+| `docs/llms.md` | Master index for agents to navigate the documentation folder. |
+
+---
+
+## 🚀 Quick Start — CLI (Recommended)
+
+Scaffold a full application with pre-configured routing, layout, and components:
+
+```bash
+npx xertica-ui@latest init my-app
+cd my-app
+npm run dev
+```
+
+The CLI scaffolds a complete Vite + React + TypeScript project with Portuguese UI localization and English AI-ready documentation.
+
+---
+
+## 📦 Installation as a Library
+
+To add Xertica UI to an existing React project:
+
+```bash
+npm install xertica-ui
+```
+
+**1. Import the stylesheet** in your entry file (`main.tsx` or `App.tsx`):
+
+```tsx
+import 'xertica-ui/style.css';
+```
+
+**2. Wrap your app** with `XerticaProvider`:
+
+```tsx
+import { XerticaProvider } from 'xertica-ui';
+
+function App() {
+  return (
+    <XerticaProvider>
+      <YourApp />
+    </XerticaProvider>
+  );
+}
+```
+
+---
+
+## 🛠️ The Layout System
+
+Xertica UI features an autonomous layout system managed by `LayoutContext`.
+
+### Mandatory Page Structure
+Every page **must** use the `<PageHeader>` component for its title and primary actions. Never use raw `h1` or `div` for headers.
+
+```tsx
+import { PageHeader, PageHeaderHeading, Button } from 'xertica-ui';
+
+export function MyPage() {
+  return (
+    <>
+      <PageHeader>
+        <PageHeaderHeading>Dashboard</PageHeaderHeading>
+        <Button>Action</Button>
+      </PageHeader>
+      <div className="p-6">
+        {/* Page Content */}
+      </div>
+    </>
+  );
+}
+```
+
+### `useLayout()` Hook
+Access the sidebar state, width, and toggle functions anywhere in the component tree:
+```tsx
+const { sidebarWidth, isSidebarOpen, toggleSidebar } = useLayout();
+```
+
+---
+
+## 🧩 Component Catalog (96 Components)
+
+### Layout & Navigation
+`Header` · `Sidebar` · `PageHeader` · `Breadcrumb` · `NavigationMenu` · `Tabs` · `Pagination` · `Accordion` · `Collapsible`
+
+### Core Surfaces
+`Card` · `Separator` · `ScrollArea` · `AspectRatio` · `Resizable` · `Skeleton` · `Empty`
+
+### Forms & Inputs
+`Form` · `Input` · `Textarea` · `RichTextEditor` · `Label` · `Checkbox` · `RadioGroup` · `Switch` · `Select` · `Slider` · `Calendar` · `InputOTP` · `FileUpload` · `Search`
+
+### Actions & Data
+`Button` · `Toggle` · `ToggleGroup` · `Rating` · `Table` · `Badge` · `Avatar` · `Progress` · `StatsCard` · `Timeline` · `Stepper` · `TreeView` · `NotificationBadge` · `Chart`
+
+### Overlays & Feedback
+`Dialog` · `AlertDialog` · `Sheet` · `Drawer` · `Popover` · `HoverCard` · `Tooltip` · `Alert` · `Sonner (Toast)` · `Command`
+
+---
+
+## 🌟 Specialized Modules
+
+### 🤖 AI Assistant
+Integrated AI chat panel with workspace support.
+- `XerticaAssistant` · `MarkdownMessage` · `CodeBlock` · `AssistantChart`
+
+### 🗺️ Maps & Geolocation
+First-class Google Maps integration.
+- `Map` · `RouteMap` · `SimpleMap` · `GoogleMapsLoader`
+
+### 🎙️ Media
+- `AudioPlayer` · `VideoPlayer` · `FloatingMediaWrapper`
+
+---
+
+## 🎨 Design Tokens
+
+Xertica UI uses semantic CSS tokens. **Never use raw colors or generic Tailwind color classes**:
+
+```
+Background:     bg-background          text-foreground
+Card surface:   bg-card                text-card-foreground
+Muted area:     bg-muted               text-muted-foreground
+Primary action: bg-primary             text-primary-foreground
+Destructive:    bg-destructive         text-destructive-foreground
+Border:         border-border
+```
+
+---
+
+## 🌍 Localization
+
+- **UI Components**: Fully localized in **Portuguese (pt-BR)** for end-users.
+- **Documentation/Code**: Strictly maintained in **English** for AI Agent compatibility and global developer standard.
+
+---
+
+## 💻 Tech Stack
+
+| Technology | Version |
+|---|---|
+| React | 18.3 |
+| TypeScript | 5.7 |
+| Tailwind CSS | 4.0 |
+| Vite | 6.0 |
+| Radix UI | Latest |
+| Lucide React | 0.469+ |
+| Vitest | 4.1 |
+
+---
+
+## 📜 Scripts
+
+| Command | Description |
+|---|---|
+| `npm run dev` | Start development server |
+| `npm run build` | Production bundle |
+| `npm run storybook` | Launch component library documentation |
+| `npm run test` | Run unit tests via Vitest |
+| `npm run type-check` | TypeScript validation |
+
+---
+
+## ⚖️ License
+
+Proprietary — Xertica AI Team.
+

package/components/assistant/modern-chat-input/ModernChatInput.tsx

@@ -35,6 +35,16 @@ interface ModernChatInputProps {
   onVoiceRecording?: (transcript: string) => void;
   /** Whether the input is being used in a full-page view (affects layout) */
   isFullPage?: boolean;
+  /** Whether to show audio input (voice recording). @default true */
+  enableAudioInput?: boolean;
+  /** Whether to show the file attachment button. @default true */
+  enableFileAttachment?: boolean;
+  /** Whether to show the "Create document" action. @default true */
+  enableDocumentCreation?: boolean;
+  /** Whether to show the "Generate podcast" action. @default true */
+  enablePodcastGeneration?: boolean;
+  /** Whether to show the "Search" action. @default true */
+  enableSearch?: boolean;
 }
 
 /**
@@ -58,7 +68,12 @@ export function ModernChatInput({
   onFileUpload,
   onAudioUpload,
   onVoiceRecording,
-  isFullPage = false
+  isFullPage = false,
+  enableAudioInput = true,
+  enableFileAttachment = true,
+  enableDocumentCreation = true,
+  enablePodcastGeneration = true,
+  enableSearch = true,
 }: ModernChatInputProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [isFocused, setIsFocused] = useState(false);
@@ -355,6 +370,7 @@ export function ModernChatInput({
           <div className="flex items-center justify-between">
             {/* Left Actions */}
             <div className="flex items-center gap-1">
+            {(enableDocumentCreation || enablePodcastGeneration || enableSearch) && (
               <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
                 <PopoverTrigger asChild>
                   <Button
@@ -378,54 +394,62 @@ export function ModernChatInput({
                   side="top"
                 >
                   <div className="space-y-1">
-                    <button
-                      onClick={() => handleActionSelect('document')}
-                      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
-                    >
-                      <div className="w-8 h-8 rounded-full bg-[var(--chart-4)]/20 flex items-center justify-center group-hover:bg-[var(--chart-4)] transition-colors">
-                        <FileText className="w-4 h-4 text-[var(--chart-4)] group-hover:text-white" />
-                      </div>
-                      <div className="flex-1">
-                        <div>Criar documento</div>
-                        <div className="text-xs text-muted-foreground">
-                          Gere um documento completo
+                    {enableDocumentCreation && (
+                      <button
+                        onClick={() => handleActionSelect('document')}
+                        className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
+                      >
+                        <div className="w-8 h-8 rounded-full bg-[var(--chart-4)]/20 flex items-center justify-center group-hover:bg-[var(--chart-4)] transition-colors">
+                          <FileText className="w-4 h-4 text-[var(--chart-4)] group-hover:text-white" />
                         </div>
-                      </div>
-                    </button>
+                        <div className="flex-1">
+                          <div>Criar documento</div>
+                          <div className="text-xs text-muted-foreground">
+                            Gere um documento completo
+                          </div>
+                        </div>
+                      </button>
+                    )}
                     
-                    <button
-                      onClick={() => handleActionSelect('podcast')}
-                      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
-                    >
-                      <div className="w-8 h-8 rounded-full bg-[var(--chart-1)]/20 flex items-center justify-center group-hover:bg-[var(--chart-1)] transition-colors">
-                        <Radio className="w-4 h-4 text-[var(--chart-1)] group-hover:text-white" />
-                      </div>
-                      <div className="flex-1">
-                        <div>Gerar podcast</div>
-                        <div className="text-xs text-muted-foreground">
-                          Crie um podcast de áudio
+                    {enablePodcastGeneration && (
+                      <button
+                        onClick={() => handleActionSelect('podcast')}
+                        className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
+                      >
+                        <div className="w-8 h-8 rounded-full bg-[var(--chart-1)]/20 flex items-center justify-center group-hover:bg-[var(--chart-1)] transition-colors">
+                          <Radio className="w-4 h-4 text-[var(--chart-1)] group-hover:text-white" />
+                        </div>
+                        <div className="flex-1">
+                          <div>Gerar podcast</div>
+                          <div className="text-xs text-muted-foreground">
+                            Crie um podcast de áudio
+                          </div>
                         </div>
-                      </div>
-                    </button>
+                      </button>
+                    )}
                     
-                    <button
-                      onClick={() => handleActionSelect('search')}
-                      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
-                    >
-                      <div className="w-8 h-8 rounded-full bg-[var(--chart-2)]/20 flex items-center justify-center group-hover:bg-[var(--chart-2)] transition-colors">
-                        <Search className="w-4 h-4 text-[var(--chart-2)] group-hover:text-white" />
-                      </div>
-                      <div className="flex-1">
-                        <div>Pesquisar</div>
-                        <div className="text-xs text-muted-foreground">
-                          Busque por informações relevantes
+                    {enableSearch && (
+                      <button
+                        onClick={() => handleActionSelect('search')}
+                        className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
+                      >
+                        <div className="w-8 h-8 rounded-full bg-[var(--chart-2)]/20 flex items-center justify-center group-hover:bg-[var(--chart-2)] transition-colors">
+                          <Search className="w-4 h-4 text-[var(--chart-2)] group-hover:text-white" />
+                        </div>
+                        <div className="flex-1">
+                          <div>Pesquisar</div>
+                          <div className="text-xs text-muted-foreground">
+                            Busque por informações relevantes
+                          </div>
                         </div>
-                      </div>
-                    </button>
+                      </button>
+                    )}
                   </div>
                 </PopoverContent>
               </Popover>
+            )}
               
+            {enableFileAttachment && (
               <motion.div
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
@@ -440,29 +464,32 @@ export function ModernChatInput({
                   <Paperclip className="w-4 h-4" />
                 </Button>
               </motion.div>
+            )}
             </div>
 
             {/* Right Actions */}
             <div className="flex items-center gap-1">
               {/* Voice Recording Button */}
-              <motion.div
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-              >
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={handleVoiceRecording}
-                  className={`h-8 w-8 p-0 rounded-full transition-all duration-200 ${
-                    isRecording 
-                      ? 'bg-destructive hover:bg-destructive/90 text-white animate-pulse' 
-                      : 'text-muted-foreground hover:bg-accent hover:text-foreground'
-                  }`}
-                  aria-label={isRecording ? "Parar gravação" : "Sugerir com voz"}
+              {enableAudioInput && (
+                <motion.div
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
                 >
-                  <Mic className="w-4 h-4" />
-                </Button>
-              </motion.div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleVoiceRecording}
+                    className={`h-8 w-8 p-0 rounded-full transition-all duration-200 ${
+                      isRecording 
+                        ? 'bg-destructive hover:bg-destructive/90 text-white animate-pulse' 
+                        : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                    }`}
+                    aria-label={isRecording ? "Parar gravação" : "Sugerir com voz"}
+                  >
+                    <Mic className="w-4 h-4" />
+                  </Button>
+                </motion.div>
+              )}
               
               <AnimatePresence mode="wait">
                 <motion.div