xertica-ui 1.7.0 → 1.7.3

package/components/Introduction.mdx

@@ -0,0 +1,90 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { XerticaLogo } from './brand/xertica-logo/XerticaLogo';
+
+<Meta title="Introduction" />
+
+<div className="flex flex-col gap-8 py-12 max-w-4xl mx-auto">
+  <div className="flex flex-col items-center text-center space-y-4">
+    <div className="p-3">
+      <XerticaLogo className="h-16 w-auto" />
+    </div>
+    <h1 className="text-5xl font-extrabold tracking-tight text-foreground">Design System</h1>
+    <p className="text-xl text-muted-foreground max-w-2xl">
+      Official Design System for Xertica projects. Built with Tailwind CSS v4, Radix UI, and AI-first engineering.
+    </p>
+    <div className="flex gap-4 pt-4">
+      <a href="https://www.npmjs.com/package/xertica-ui" target="_blank" className="h-11 px-8 rounded-full border border-border bg-background text-foreground font-medium flex items-center hover:bg-accent transition-colors no-underline">
+        NPM
+      </a>
+    </div>
+  </div>
+
+  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-8">
+    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
+      <div className="w-10 h-10 bg-info/10 rounded-lg flex items-center justify-center mb-4 text-info">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v8"/><path d="m16 6-4 4-4-4"/><rect width="20" height="8" x="2" y="14" rx="2"/></svg>
+      </div>
+      <h3 className="text-lg font-semibold mb-2">Instant Installation</h3>
+      <p className="text-sm text-muted-foreground leading-relaxed">
+        Add to your project with a single command. Integrated CLI for layout and theme scaffolding.
+      </p>
+    </div>
+
+    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
+      <div className="w-10 h-10 bg-success/10 rounded-lg flex items-center justify-center mb-4 text-success">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
+      </div>
+      <h3 className="text-lg font-semibold mb-2">Tailwind v4 Native</h3>
+      <p className="text-sm text-muted-foreground leading-relaxed">
+        Leverage the power of Tailwind CSS v4 with its new faster and more flexible engine.
+      </p>
+    </div>
+
+    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
+      <div className="w-10 h-10 bg-warning/10 rounded-lg flex items-center justify-center mb-4 text-warning">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
+      </div>
+      <h3 className="text-lg font-semibold mb-2">AI-Ready</h3>
+      <p className="text-sm text-muted-foreground leading-relaxed">
+        Documentation optimized for LLM prompt systems (Antigravity, Cursor, etc).
+      </p>
+    </div>
+  </div>
+
+  <div className="space-y-6 pt-12">
+    <h2 className="text-3xl font-bold border-b pb-2 border-border">Design Philosophy</h2>
+    <p className="text-lg leading-relaxed text-muted-foreground">
+      Xertica UI focuses on modularity and high performance for Xertica's ecosystem of products. 
+      Our goal is to ensure functional consistency, accessibility (via Radix UI), and rapid development at scale.
+    </p>
+
+    <div className="bg-muted p-8 rounded-2xl space-y-4">
+      <h4 className="font-bold flex items-center gap-2">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>
+        Ecosystem Highlights
+      </h4>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
+          <span className="w-2 h-2 rounded-full bg-primary" />
+          <span><b>Radix UI</b> for accessible, unstyled primitives.</span>
+        </div>
+        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
+          <span className="w-2 h-2 rounded-full bg-primary" />
+          <span><b>Tailwind v4</b> ultra-fast engine.</span>
+        </div>
+        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
+          <span className="w-2 h-2 rounded-full bg-primary" />
+          <span><b>Dark Mode</b> native via CSS Tokens.</span>
+        </div>
+        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
+          <span className="w-2 h-2 rounded-full bg-primary" />
+          <span><b>Full Customization</b> via <code>tokens.css</code>.</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div className="pt-12 text-center text-sm text-muted-foreground border-t border-border">
+    &copy; 2026 Xertica. All rights reserved.
+  </div>
+</div>

package/components/assistant/code-block/code-block.mdx

@@ -1,38 +1,38 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as CodeBlockStories from './code-block.stories';
-
-<Meta of={CodeBlockStories} />
-
-<Title />
-<Subtitle>An elegant syntax highlighter with built-in copy functionality and Xertica branding.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Usage Patterns
-
-### Development Snippets
-Ideal for showing code examples with line numbers and filename headers.
-
-<Canvas>
-  <CodeBlockStories.Default />
-</Canvas>
-
-### Terminal Commands
-Compact view for shell commands or configuration highlights.
-
-<Canvas>
-  <CodeBlockStories.Simple />
-</Canvas>
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Language Selection** — Always specify the correct `language` prop to ensure accurate syntax highlighting.
-> - **Theme Consistency** — The underlying `elegantTheme` automatically maps to the system's CSS theme variables; ensure the `XerticaProvider` is wrapping the application for correct colors.
-> - **Clipboard Support** — Copy functionality includes progressive fallbacks for browsers with restricted clipboard permissions.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as CodeBlockStories from './code-block.stories';
+
+<Meta of={CodeBlockStories} />
+
+<Title />
+<Subtitle>An elegant syntax highlighter with built-in copy functionality and Xertica branding.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Usage Patterns
+
+### Development Snippets
+Ideal for showing code examples with line numbers and filename headers.
+
+<Canvas>
+  <CodeBlockStories.Default />
+</Canvas>
+
+### Terminal Commands
+Compact view for shell commands or configuration highlights.
+
+<Canvas>
+  <CodeBlockStories.Simple />
+</Canvas>
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Language Selection** — Always specify the correct `language` prop to ensure accurate syntax highlighting.
+> - **Theme Consistency** — The underlying `elegantTheme` automatically maps to the system's CSS theme variables; ensure the `XerticaProvider` is wrapping the application for correct colors.
+> - **Clipboard Support** — Copy functionality includes progressive fallbacks for browsers with restricted clipboard permissions.

package/components/assistant/code-block/code-block.stories.tsx

@@ -1,57 +1,57 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { CodeBlock } from './CodeBlock';
-import React from 'react';
-
-const meta: Meta<typeof CodeBlock> = {
-  title: 'High-Level/CodeBlock',
-  component: CodeBlock,
-  argTypes: {
-    language: {
-      control: 'select',
-      options: ['typescript', 'tsx', 'css', 'bash', 'jsx'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof CodeBlock>;
-
-const exampleCode = `function HelloWorld() {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div className="flex flex-col gap-4">
-      <h1 className="text-2xl font-bold">Counter</h1>
-      <p>Current count: {count}</p>
-      <Button onClick={() => setCount(count + 1)}>
-        Increment
-      </Button>
-    </div>
-  );
-}`;
-
-export const Default: Story = {
-  args: {
-    code: exampleCode,
-    language: 'tsx',
-    filename: 'Counter.tsx',
-    showLineNumbers: true,
-  },
-  render: (args) => (
-    <div className="w-full max-w-3xl">
-      <CodeBlock {...args} />
-    </div>
-  ),
-};
-
-export const Simple: Story = {
-  args: {
-    code: 'npm install xertica-ui',
-    language: 'bash',
-  },
-  render: (args) => (
-    <div className="w-full max-w-xl">
-      <CodeBlock {...args} />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { CodeBlock } from './CodeBlock';
+import React from 'react';
+
+const meta: Meta<typeof CodeBlock> = {
+  title: 'Assistant/CodeBlock',
+  component: CodeBlock,
+  argTypes: {
+    language: {
+      control: 'select',
+      options: ['typescript', 'tsx', 'css', 'bash', 'jsx'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeBlock>;
+
+const exampleCode = `function HelloWorld() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <h1 className="text-2xl font-bold">Counter</h1>
+      <p>Current count: {count}</p>
+      <Button onClick={() => setCount(count + 1)}>
+        Increment
+      </Button>
+    </div>
+  );
+}`;
+
+export const Default: Story = {
+  args: {
+    code: exampleCode,
+    language: 'tsx',
+    filename: 'Counter.tsx',
+    showLineNumbers: true,
+  },
+  render: (args) => (
+    <div className="w-full max-w-3xl">
+      <CodeBlock {...args} />
+    </div>
+  ),
+};
+
+export const Simple: Story = {
+  args: {
+    code: 'npm install xertica-ui',
+    language: 'bash',
+  },
+  render: (args) => (
+    <div className="w-full max-w-xl">
+      <CodeBlock {...args} />
+    </div>
+  ),
+};

package/components/assistant/formatted-document/FormattedDocument.tsx

@@ -46,13 +46,14 @@ export function FormattedDocument({ content, maxPreviewLength = 500, className =
     // Italic
     html = html.replace(/\*(.*?)\*/g, '<em class="italic">$1</em>');
     
-    // Lists
-    html = html.replace(/^\- (.*$)/gim, '<li class="ml-4 my-0.5">• $1</li>');
-    html = html.replace(/^\d+\. (.*$)/gim, '<li class="ml-4 my-0.5">$1</li>');
+    // Checkboxes (Process before lists to avoid collisions)
+    html = html.replace(/^[-*+] \[ \] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" disabled class="rounded w-3.5 h-3.5 accent-primary" aria-label="$1" /> <span class="text-sm">$1</span></div>');
+    html = html.replace(/^[-*+] \[x\] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" checked disabled class="rounded w-3.5 h-3.5 accent-primary" aria-label="$1" /> <span class="text-sm">$1</span></div>');
     
-    // Checkboxes
-    html = html.replace(/- \[ \] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" disabled class="rounded w-3 h-3" aria-label="$1" /> <span class="text-sm">$1</span></div>');
-    html = html.replace(/- \[x\] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" checked disabled class="rounded w-3 h-3" aria-label="$1" /> <span class="text-sm">$1</span></div>');
+    // Lists (Bullet and Numbered)
+    // Using <li> with Tailwind list classes to avoid double-bullets while maintaining native flow
+    html = html.replace(/^[-*+] (.*$)/gim, '<li class="ml-6 my-1 list-disc">$1</li>');
+    html = html.replace(/^(\d+)\. (.*$)/gim, '<li class="ml-6 my-1 list-decimal">$2</li>');
     
     // Horizontal rule
     html = html.replace(/^---$/gim, '<hr class="my-3 border-border" />');

package/components/assistant/formatted-document/formatted-document.mdx

@@ -1,31 +1,31 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as FormattedDocumentStories from './formatted-document.stories';
-
-<Meta of={FormattedDocumentStories} />
-
-<Title />
-<Subtitle>A lightweight markdown renderer for displaying AI-generated summaries and documentation.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Usage Patterns
-
-### Collapsible Content
-Ideal for displaying long AI responses where a "See more" toggle is needed to preserve page verticality.
-
-<Canvas>
-  <FormattedDocumentStories.Default />
-</Canvas>
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Markdown Compatibility** — Supports basic markdown: headers (`#`), bold (`**`), lists (`-`), and checkboxes (`- [ ]`). It does not support complex nested tables or markdown-in-html.
-> - **Preview Mode** — Use `maxPreviewLength` to control the initial character count before truncation. Defaults to 500.
-> - **Safe Injection** — Content is rendered via `dangerouslySetInnerHTML`. Ensure the source content (e.g., from an AI API) is trustable and sanitized if necessary.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as FormattedDocumentStories from './formatted-document.stories';
+
+<Meta of={FormattedDocumentStories} />
+
+<Title />
+<Subtitle>A lightweight markdown renderer for displaying AI-generated summaries and documentation.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Usage Patterns
+
+### Collapsible Content
+Ideal for displaying long AI responses where a "See more" toggle is needed to preserve page verticality.
+
+<Canvas>
+  <FormattedDocumentStories.Default />
+</Canvas>
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Markdown Compatibility** — Supports basic markdown: headers (`#`), bold (`**`), lists (`-`), and checkboxes (`- [ ]`). It does not support complex nested tables or markdown-in-html.
+> - **Preview Mode** — Use `maxPreviewLength` to control the initial character count before truncation. Defaults to 500.
+> - **Safe Injection** — Content is rendered via `dangerouslySetInnerHTML`. Ensure the source content (e.g., from an AI API) is trustable and sanitized if necessary.

package/components/assistant/formatted-document/formatted-document.stories.tsx

@@ -1,51 +1,51 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { FormattedDocument } from './FormattedDocument';
-import React from 'react';
-
-const meta: Meta<typeof FormattedDocument> = {
-  title: 'High-Level/FormattedDocument',
-  component: FormattedDocument,
-  argTypes: {
-    maxPreviewLength: { control: 'number' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof FormattedDocument>;
-
-const longContent = `# Proposta Estratégica Xertica
-## Visão Geral
-Esta proposta descreve a implementação de uma camada de inteligência artificial generativa em toda a jornada do cliente.
-
-### Objetivos Principais
-- Redução de latência no atendimento em até 40%
-- Aumento na taxa de conversão de leads qualificados
-- Automação de relatórios semanais para gestão
-
-### Cronograma
-1. **Semana 1-2:** Discovery e Mapeamento de Dados
-2. **Semana 3-4:** Setup de Infraestrutura e Agentes
-3. **Semana 5-8:** Implementação Pilot e Feedback Loop
-
-## Detalhamento Técnico
-A arquitetura baseia-se em RAG (Retrieval Augmented Generation) utilizando bases vetoriais de alto desempenho. Os agentes são orquestrados em tempo real para garantir respostas precisas e contextuais.
-
-- [x] Definição de personas
-- [x] Configuração de guardrails
-- [ ] Integração com CRM
-- [ ] Deploy global
-
----
-**Nota:** Esta é uma versão preliminar para revisão da diretoria.`;
-
-export const Default: Story = {
-  args: {
-    content: longContent,
-    maxPreviewLength: 200,
-  },
-  render: (args) => (
-    <div className="w-full max-w-xl p-6 border rounded-xl bg-card">
-      <FormattedDocument {...args} />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormattedDocument } from './FormattedDocument';
+import React from 'react';
+
+const meta: Meta<typeof FormattedDocument> = {
+  title: 'Assistant/FormattedDocument',
+  component: FormattedDocument,
+  argTypes: {
+    maxPreviewLength: { control: 'number' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FormattedDocument>;
+
+const longContent = `# Strategic Project Proposal
+## Overview
+This proposal describes the implementation of a generative artificial intelligence layer across the entire customer journey.
+
+### Key Objectives
+- Reduce service latency by up to 40%
+- Increase qualified lead conversion rate
+- Automate weekly management reports
+
+### Roadmap
+1. **Week 1-2:** Discovery and Data Mapping
+2. **Week 3-4:** Infrastructure and Agent Setup
+3. **Week 5-8:** Pilot Implementation and Feedback Loop
+
+## Technical Details
+The architecture is based on RAG (Retrieval Augmented Generation) using high-performance vector databases. Agents are orchestrated in real-time to ensure accurate and contextual responses.
+
+- [x] Persona definition
+- [x] Guardrails configuration
+- [ ] CRM integration
+- [ ] Global deployment
+
+---
+**Note:** This is a preliminary version for board review.`;
+
+export const Default: Story = {
+  args: {
+    content: longContent,
+    maxPreviewLength: 200,
+  },
+  render: (args) => (
+    <div className="w-full max-w-xl p-6 border rounded-xl bg-card">
+      <FormattedDocument {...args} />
+    </div>
+  ),
+};

package/components/assistant/markdown-message/markdown-message.mdx

@@ -1,44 +1,44 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as MarkdownMessageStories from './markdown-message.stories';
-
-<Meta of={MarkdownMessageStories} />
-
-<Title />
-<Subtitle>Renders AI assistant messages as formatted Markdown with syntax-highlighted code blocks.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Usage
-
-```tsx
-import { MarkdownMessage } from 'xertica-ui';
-
-<MarkdownMessage content="**Hello!** Here is a `code` example." />
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `content` | `string` | _(required)_ | The Markdown string to render |
-| `className` | `string` | `''` | Additional CSS classes on the root container |
-
-## Supported Markdown
-
-- **Bold**, _italic_, ~~strikethrough~~
-- `inline code` and fenced code blocks with syntax highlighting
-- Lists (ordered and unordered)
-- Headers (`# H1`, `## H2`, etc.)
-- Tables
-- Blockquotes
-
-## AI Rules
-
-> [!IMPORTANT]
-> - This component is used **exclusively inside** `XerticaAssistant` message bubbles.
-> - Do not use it for general-purpose Markdown rendering outside the assistant context — use a standard Markdown library instead.
-> - Always sanitize content before passing it if coming from untrusted sources.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as MarkdownMessageStories from './markdown-message.stories';
+
+<Meta of={MarkdownMessageStories} />
+
+<Title />
+<Subtitle>Renders AI assistant messages as formatted Markdown with syntax-highlighted code blocks.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Usage
+
+```tsx
+import { MarkdownMessage } from 'xertica-ui';
+
+<MarkdownMessage content="**Hello!** Here is a `code` example." />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `content` | `string` | _(required)_ | The Markdown string to render |
+| `className` | `string` | `''` | Additional CSS classes on the root container |
+
+## Supported Markdown
+
+- **Bold**, _italic_, ~~strikethrough~~
+- `inline code` and fenced code blocks with syntax highlighting
+- Lists (ordered and unordered)
+- Headers (`# H1`, `## H2`, etc.)
+- Tables
+- Blockquotes
+
+## AI Rules
+
+> [!IMPORTANT]
+> - This component is used **exclusively inside** `XerticaAssistant` message bubbles.
+> - Do not use it for general-purpose Markdown rendering outside the assistant context — use a standard Markdown library instead.
+> - Always sanitize content before passing it if coming from untrusted sources.