xertica-ui 2.5.2 → 2.5.3

package/llms-compact.txt

@@ -1,6 +1,6 @@
 # Xertica UI — Compact Reference
 
-> 97-component React design system. Tailwind CSS v4 + Radix UI + Lucide Icons. v2.5.2
+> 97-component React design system. Tailwind CSS v4 + Radix UI + Lucide Icons. v2.5.3
 > Full docs: llms-full.txt | Component index: llms.txt | Decision guide: docs/decision-tree.md
 
 ---

package/llms.txt

@@ -1,6 +1,6 @@
 # Xertica UI
 
-> Enterprise-grade React design system — 97 components built on Tailwind CSS v4, Radix UI, and Lucide Icons. Designed to be consumed directly by AI coding agents (LLMs, Cursor, Claude Code, Copilot). v2.5.2
+> Enterprise-grade React design system — 97 components built on Tailwind CSS v4, Radix UI, and Lucide Icons. Designed to be consumed directly by AI coding agents (LLMs, Cursor, Claude Code, Copilot). v2.5.3
 
 Xertica UI ships with full source, typed declarations, Storybook stories, and structured documentation inside `node_modules/xertica-ui/`. AI agents should read this file first, then follow links for component-specific detail.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "description": "Xertica UI — Enterprise-grade React design system with Tailwind CSS v4, Radix UI, and AI-first documentation.",
   "type": "module",
   "main": "./dist/index.cjs.js",

package/templates/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui-template",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "private": true,
   "type": "module",
   "scripts": {
@@ -24,7 +24,7 @@
     "react-i18next": "^17.0.8",
     "react-router-dom": "^7.1.3",
     "sonner": "^1.7.3",
-    "xertica-ui": "^2.5.2",
+    "xertica-ui": "^2.5.3",
     "zustand": "^5.0.13"
   },
   "devDependencies": {

package/templates/src/features/home/ui/HomeContent.tsx

@@ -1,117 +1,116 @@
-import React from 'react';
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  Button,
-  ScrollArea,
-  Badge,
-} from 'xertica-ui/ui';
-import { Header } from 'xertica-ui/layout';
-import { useLayout } from 'xertica-ui/hooks';
-import { useNavigate, Link } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { useFeatureCards } from '../hooks/useFeatureCards';
-import { SectionErrorBoundary } from '../../../shared/error-boundary';
-
-export function HomeContent() {
-  const { t } = useTranslation();
-  const { sidebarExpanded, sidebarWidth } = useLayout();
-  const navigate = useNavigate();
-
-  const { data: featureCards = [], isLoading } = useFeatureCards();
-
-  return (
-    <div
-      style={{
-        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px',
-      }}
-      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
-    >
-      <Header
-        showThemeToggle={true}
-        showLanguageSelector={true}
-        breadcrumbs={[{ label: t('nav.designSystem'), href: '/home' }, { label: t('nav.home') }]}
-        renderLink={(href: string, props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
-          <Link to={href} {...props} />
-        )}
-      />
-
-      <main className="flex-1 overflow-hidden bg-muted">
-        <ScrollArea className="h-full">
-          <div className="p-5 sm:p-4 md:p-6">
-            <div className="max-w-6xl mx-auto space-y-8">
-              <div className="space-y-2">
-                <h2 className="text-3xl font-bold tracking-tight">{t('home.welcome')}</h2>
-                <p className="text-muted-foreground">{t('home.subtitle')}</p>
-              </div>
-
-              <SectionErrorBoundary>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                  {isLoading
-                    ? Array.from({ length: 3 }).map((_, i) => (
-                        <Card key={i} className="flex flex-col h-full animate-pulse">
-                          <CardHeader>
-                            <div className="h-4 bg-muted-foreground/20 rounded w-2/3" />
-                          </CardHeader>
-                          <CardContent className="flex-1">
-                            <div className="h-3 bg-muted-foreground/10 rounded w-full" />
-                          </CardContent>
-                          <CardFooter>
-                            <div className="h-9 bg-muted-foreground/10 rounded w-full" />
-                          </CardFooter>
-                        </Card>
-                      ))
-                    : featureCards.map(card => (
-                        <Card
-                          key={card.id}
-                          className="hover:shadow-xl transition-shadow duration-200 flex flex-col h-full"
-                        >
-                          <CardHeader>
-                            <div className="flex items-center gap-3">
-                              <div
-                                className="p-2 rounded-[var(--radius)]"
-                                style={{
-                                  background: `color-mix(in srgb, var(${card.chartColor}) 20%, transparent)`,
-                                }}
-                              >
-                                <card.Icon
-                                  className="w-6 h-6"
-                                  style={{ color: `var(${card.chartColor})` }}
-                                />
-                              </div>
-                              <div className="flex items-center gap-2">
-                                <CardTitle className="text-sm">{card.title}</CardTitle>
-                                {card.badge && (
-                                  <Badge variant="default" className="text-xs">
-                                    {card.badge}
-                                  </Badge>
-                                )}
-                              </div>
-                            </div>
-                          </CardHeader>
-                          <CardContent className="flex-1">
-                            <p className="text-muted-foreground">{card.description}</p>
-                          </CardContent>
-                          <CardFooter>
-                            <Button
-                              variant="outline"
-                              className="w-full"
-                              onClick={() => navigate(card.href)}
-                            >
-                              {t('common.view')}
-                            </Button>
-                          </CardFooter>
-                        </Card>
-                      ))}
-                </div>
-              </SectionErrorBoundary>
-            </div>
-          </div>
-        </ScrollArea>
-      </main>
-    </div>
-  );
-}
+import React from 'react';
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+} from 'xertica-ui/ui';
+import { Header } from 'xertica-ui/layout';
+import { useLayout } from 'xertica-ui/hooks';
+import { useNavigate, Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useFeatureCards } from '../hooks/useFeatureCards';
+import { SectionErrorBoundary } from '../../../shared/error-boundary';
+
+export function HomeContent() {
+  const { t } = useTranslation();
+  const { sidebarExpanded, sidebarWidth } = useLayout();
+  const navigate = useNavigate();
+
+  const { data: featureCards = [], isLoading } = useFeatureCards();
+
+  return (
+    <div
+      style={{
+        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px',
+      }}
+      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
+    >
+      <Header
+        showThemeToggle={true}
+        showLanguageSelector={true}
+        breadcrumbs={[{ label: t('nav.designSystem'), href: '/home' }, { label: t('nav.home') }]}
+        renderLink={(href: string, props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+          <Link to={href} {...props} />
+        )}
+      />
+
+      <main className="flex-1 overflow-hidden bg-muted">
+        <div className="h-full" style={{ overflowY: 'auto', overflowX: 'hidden' }}>
+          <div className="p-5 sm:p-4 md:p-6">
+            <div className="max-w-6xl mx-auto space-y-8">
+              <div className="space-y-2">
+                <h2 className="text-3xl font-bold tracking-tight">{t('home.welcome')}</h2>
+                <p className="text-muted-foreground">{t('home.subtitle')}</p>
+              </div>
+
+              <SectionErrorBoundary>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {isLoading
+                    ? Array.from({ length: 3 }).map((_, i) => (
+                        <Card key={i} className="flex flex-col h-full animate-pulse">
+                          <CardHeader>
+                            <div className="h-4 bg-muted-foreground/20 rounded w-2/3" />
+                          </CardHeader>
+                          <CardContent className="flex-1">
+                            <div className="h-3 bg-muted-foreground/10 rounded w-full" />
+                          </CardContent>
+                          <CardFooter>
+                            <div className="h-9 bg-muted-foreground/10 rounded w-full" />
+                          </CardFooter>
+                        </Card>
+                      ))
+                    : featureCards.map(card => (
+                        <Card
+                          key={card.id}
+                          className="hover:shadow-xl transition-shadow duration-200 flex flex-col h-full"
+                        >
+                          <CardHeader>
+                            <div className="flex items-center gap-3">
+                              <div
+                                className="p-2 rounded-[var(--radius)]"
+                                style={{
+                                  background: `color-mix(in srgb, var(${card.chartColor}) 20%, transparent)`,
+                                }}
+                              >
+                                <card.Icon
+                                  className="w-6 h-6"
+                                  style={{ color: `var(${card.chartColor})` }}
+                                />
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <CardTitle className="text-sm">{card.title}</CardTitle>
+                                {card.badge && (
+                                  <Badge variant="default" className="text-xs">
+                                    {card.badge}
+                                  </Badge>
+                                )}
+                              </div>
+                            </div>
+                          </CardHeader>
+                          <CardContent className="flex-1">
+                            <p className="text-muted-foreground">{card.description}</p>
+                          </CardContent>
+                          <CardFooter>
+                            <Button
+                              variant="outline"
+                              className="w-full"
+                              onClick={() => navigate(card.href)}
+                            >
+                              {t('common.view')}
+                            </Button>
+                          </CardFooter>
+                        </Card>
+                      ))}
+                </div>
+              </SectionErrorBoundary>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}