xertica-ui 1.8.0 → 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.
+