xertica-ui 2.1.3 → 2.1.4

package/styles/xertica/integrations/google-maps.css

@@ -1,76 +1,76 @@
-/* ============================================
-   🧩 INTEGRATION: GOOGLE MAPS
-   ============================================ */
-
-/* Google Maps InfoWindow Customization */
-.gm-style .gm-style-iw-c {
-  background-color: var(--popover) !important;
-  border-radius: var(--radius-lg) !important;
-  box-shadow: var(--elevation-sm) !important;
-  padding: 0 !important;
-  border: 1px solid var(--border) !important;
-}
-
-.gm-style .gm-style-iw-d {
-  overflow: auto !important;
-  max-height: none !important;
-}
-
-/* Fix for Native POIs */
-.gm-style .gm-style-iw-c .gm-style-iw-ch {
-  padding-top: var(--spacing-3) !important;
-  padding-left: var(--spacing-4) !important;
-  padding-right: var(--spacing-8) !important;
-  padding-bottom: var(--spacing-2) !important;
-}
-
-.gm-style .gm-style-iw-c .gm-style-iw-d .poi-info-window,
-.gm-style .gm-style-iw-c .gm-style-iw-d .transit-container {
-  padding: var(--spacing-4) !important;
-  padding-top: 0 !important;
-}
-
-/* Close button - popover style */
-.gm-style .gm-ui-hover-effect {
-  opacity: 1 !important;
-  width: 32px !important;
-  height: 32px !important;
-  top: 8px !important;
-  right: 8px !important;
-  background-color: var(--muted) !important;
-  border-radius: var(--radius) !important;
-  transition: all 0.2s ease !important;
-}
-
-.gm-style .gm-ui-hover-effect:hover {
-  background-color: var(--accent) !important;
-}
-
-.gm-style .gm-ui-hover-effect > span {
-  background-color: var(--foreground) !important;
-  width: 14px !important;
-  height: 14px !important;
-  margin: 9px !important;
-}
-
-/* InfoWindow Tip - popover style */
-.gm-style .gm-style-iw-t::after {
-  background: var(--popover) !important;
-  box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1) !important;
-  border: 1px solid var(--border) !important;
-}
-
-/* Custom Content Class */
-.xertica-infowindow-content {
-  font-family: 'Roboto', sans-serif !important;
-  color: var(--popover-foreground) !important;
-}
-
-.xertica-infowindow-content * {
-  font-family: 'Roboto', sans-serif !important;
-}
-
-/* Standard content override */
-.gm-style .gm-style-iw-c * {
-  font-family: 'Roboto', sans-serif !important;
-}
+/* ============================================
+   🧩 INTEGRATION: GOOGLE MAPS
+   ============================================ */
+
+/* Google Maps InfoWindow Customization */
+.gm-style .gm-style-iw-c {
+  background-color: var(--popover) !important;
+  border-radius: var(--radius-lg) !important;
+  box-shadow: var(--elevation-sm) !important;
+  padding: 0 !important;
+  border: 1px solid var(--border) !important;
+}
+
+.gm-style .gm-style-iw-d {
+  overflow: auto !important;
+  max-height: none !important;
+}
+
+/* Fix for Native POIs */
+.gm-style .gm-style-iw-c .gm-style-iw-ch {
+  padding-top: var(--spacing-3) !important;
+  padding-left: var(--spacing-4) !important;
+  padding-right: var(--spacing-8) !important;
+  padding-bottom: var(--spacing-2) !important;
+}
+
+.gm-style .gm-style-iw-c .gm-style-iw-d .poi-info-window,
+.gm-style .gm-style-iw-c .gm-style-iw-d .transit-container {
+  padding: var(--spacing-4) !important;
+  padding-top: 0 !important;
+}
+
+/* Close button - popover style */
+.gm-style .gm-ui-hover-effect {
+  opacity: 1 !important;
+  width: 32px !important;
+  height: 32px !important;
+  top: 8px !important;
+  right: 8px !important;
+  background-color: var(--muted) !important;
+  border-radius: var(--radius) !important;
+  transition: all 0.2s ease !important;
+}
+
+.gm-style .gm-ui-hover-effect:hover {
+  background-color: var(--accent) !important;
+}
+
+.gm-style .gm-ui-hover-effect > span {
+  background-color: var(--foreground) !important;
+  width: 14px !important;
+  height: 14px !important;
+  margin: 9px !important;
+}
+
+/* InfoWindow Tip - popover style */
+.gm-style .gm-style-iw-t::after {
+  background: var(--popover) !important;
+  box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1) !important;
+  border: 1px solid var(--border) !important;
+}
+
+/* Custom Content Class */
+.xertica-infowindow-content {
+  font-family: 'Roboto', sans-serif !important;
+  color: var(--popover-foreground) !important;
+}
+
+.xertica-infowindow-content * {
+  font-family: 'Roboto', sans-serif !important;
+}
+
+/* Standard content override */
+.gm-style .gm-style-iw-c * {
+  font-family: 'Roboto', sans-serif !important;
+}

package/styles/xertica/integrations/sonner.css

@@ -1,73 +1,73 @@
-/* ============================================
-   🧩 INTEGRATION: SONNER
-   ============================================ */
-
-/* Sonner Toast customization - styling Alert-like (borderless, flat, colored icons) */
-[data-sonner-toast] {
-  font-family: 'Roboto', sans-serif !important;
-  border-radius: var(--radius) !important;
-  background: var(--card) !important;
-  border: 0 !important;
-  border-left: 4px solid transparent !important;
-  box-shadow: var(--elevation-sm) !important;
-  color: var(--foreground) !important;
-  padding: 1rem !important;
-}
-
-[data-sonner-toast][data-type="success"] {
-  background: var(--toast-success-bg) !important;
-  border-left-color: var(--toast-success-border) !important;
-}
-
-[data-sonner-toast][data-type="success"] [data-icon] {
-  color: var(--toast-success-icon) !important;
-}
-
-[data-sonner-toast][data-type="warning"] {
-  background: var(--toast-warning-bg) !important;
-  border-left-color: var(--toast-warning-border) !important;
-}
-
-[data-sonner-toast][data-type="warning"] [data-icon] {
-  color: var(--toast-warning-icon) !important;
-}
-
-[data-sonner-toast][data-type="info"] {
-  background: var(--toast-info-bg) !important;
-  border-left-color: var(--toast-info-border) !important;
-}
-
-[data-sonner-toast][data-type="info"] [data-icon] {
-  color: var(--toast-info-icon) !important;
-}
-
-[data-sonner-toast][data-type="error"] {
-  background: var(--toast-error-bg) !important;
-  border-left-color: var(--toast-error-border) !important;
-}
-
-[data-sonner-toast][data-type="error"] [data-icon] {
-  color: var(--toast-error-icon) !important;
-}
-
-/* Toast description text */
-[data-sonner-toast] [data-description] {
-  color: var(--foreground) !important;
-  opacity: 0.9;
-}
-
-/* Toast buttons */
-[data-sonner-toast] [data-button] {
-  font-family: 'Roboto', sans-serif !important;
-  border-radius: var(--radius) !important;
-}
-
-[data-sonner-toast] [data-button][data-primary] {
-  background: var(--primary) !important;
-  color: var(--primary-foreground) !important;
-}
-
-[data-sonner-toast] [data-button][data-cancel] {
-  background: var(--muted) !important;
-  color: var(--muted-foreground) !important;
-}
+/* ============================================
+   🧩 INTEGRATION: SONNER
+   ============================================ */
+
+/* Sonner Toast customization - styling Alert-like (borderless, flat, colored icons) */
+[data-sonner-toast] {
+  font-family: 'Roboto', sans-serif !important;
+  border-radius: var(--radius) !important;
+  background: var(--card) !important;
+  border: 0 !important;
+  border-left: 4px solid transparent !important;
+  box-shadow: var(--elevation-sm) !important;
+  color: var(--foreground) !important;
+  padding: 1rem !important;
+}
+
+[data-sonner-toast][data-type="success"] {
+  background: var(--toast-success-bg) !important;
+  border-left-color: var(--toast-success-border) !important;
+}
+
+[data-sonner-toast][data-type="success"] [data-icon] {
+  color: var(--toast-success-icon) !important;
+}
+
+[data-sonner-toast][data-type="warning"] {
+  background: var(--toast-warning-bg) !important;
+  border-left-color: var(--toast-warning-border) !important;
+}
+
+[data-sonner-toast][data-type="warning"] [data-icon] {
+  color: var(--toast-warning-icon) !important;
+}
+
+[data-sonner-toast][data-type="info"] {
+  background: var(--toast-info-bg) !important;
+  border-left-color: var(--toast-info-border) !important;
+}
+
+[data-sonner-toast][data-type="info"] [data-icon] {
+  color: var(--toast-info-icon) !important;
+}
+
+[data-sonner-toast][data-type="error"] {
+  background: var(--toast-error-bg) !important;
+  border-left-color: var(--toast-error-border) !important;
+}
+
+[data-sonner-toast][data-type="error"] [data-icon] {
+  color: var(--toast-error-icon) !important;
+}
+
+/* Toast description text */
+[data-sonner-toast] [data-description] {
+  color: var(--foreground) !important;
+  opacity: 0.9;
+}
+
+/* Toast buttons */
+[data-sonner-toast] [data-button] {
+  font-family: 'Roboto', sans-serif !important;
+  border-radius: var(--radius) !important;
+}
+
+[data-sonner-toast] [data-button][data-primary] {
+  background: var(--primary) !important;
+  color: var(--primary-foreground) !important;
+}
+
+[data-sonner-toast] [data-button][data-cancel] {
+  background: var(--muted) !important;
+  color: var(--muted-foreground) !important;
+}

package/templates/CLAUDE.md

@@ -1,182 +1,182 @@
-# Xertica UI — Project Rules
-
-This project uses **xertica-ui**, an enterprise React design system built on Tailwind CSS v4, Radix UI, and Lucide Icons.
-
-> For the complete component reference, read `node_modules/xertica-ui/llms-full.txt`.
-> For a compact quick-reference, read `node_modules/xertica-ui/llms-compact.txt`.
-> For component selection guidance, read `node_modules/xertica-ui/docs/decision-tree.md`.
-
----
-
-## Import Rules
-
-Always use the most specific subpath — never import from a category you don't need:
-
-```tsx
-import { Button, Card, Input, Badge, Table, Dialog } from 'xertica-ui/ui';
-import { Sidebar, Header }                           from 'xertica-ui/layout';
-import { XerticaProvider, XerticaLogo, ThemeToggle } from 'xertica-ui/brand';
-import { XerticaAssistant, generateDemoResponse }    from 'xertica-ui/assistant';
-import { VideoPlayer, AudioPlayer }                  from 'xertica-ui/media';
-import { useLayout, useOptionalLayout, useTheme }    from 'xertica-ui/hooks';
-import 'xertica-ui/style.css'; // import once at root only
-```
-
-The root `from 'xertica-ui'` remains valid for backward compatibility, but scaffolded project code must prefer the subpaths above.
-
-Icons are **never** from xertica-ui — always use `lucide-react`:
-
-```tsx
-import { Home, Settings, Plus, Trash2, ChevronRight } from 'lucide-react';
-```
-
----
-
-## Non-Negotiable Rules
-
-### HTML — never use raw elements for UI
-| ❌ Never | ✅ Always |
-|---|---|
-| `<button>` | `<Button>` from `xertica-ui/ui` |
-| `<input>` | `<Input>` from `xertica-ui/ui` |
-| `<select>` | `<Select>` from `xertica-ui/ui` |
-| `<h1>` / `<h2>` for page headers | `<PageHeader><PageHeaderHeading>` |
-| `<div class="card ...">` | `<Card>` from `xertica-ui/ui` |
-| custom scrollbar div | `<ScrollArea>` from `xertica-ui/ui` |
-
-### Colors — context-dependent rules
-
-| ❌ Never (any context) | Reason |
-|---|---|
-| `#3b82f6`, `rgb(59,130,246)`, `hsl(...)` | Raw values — non-themeable |
-| `style={{ color: '#...' }}` for theming | Non-themeable inline style |
-
-| ❌ Wrong for semantic/status contexts | ✅ Required instead |
-|---|---|
-| `bg-red-500` for error states | `bg-destructive` |
-| `text-red-500` for error text | `text-destructive` |
-| `bg-green-500` for success states | `bg-success` |
-| `bg-yellow-500` for warnings | `bg-warning` |
-
-> For **layout, spacing, and general non-semantic UI** (custom components, decorative elements, Storybook stories where no semantic token applies), standard Tailwind color utilities like `bg-blue-500` or `text-gray-700` are acceptable.
-
-Semantic token reference:
-```
-bg-background / text-foreground       → page background and primary text
-bg-card / text-card-foreground        → card surfaces
-bg-muted / text-muted-foreground      → subdued areas and secondary text
-bg-primary / text-primary-foreground  → primary actions
-bg-destructive                        → danger / error states
-bg-success / bg-warning / bg-info     → semantic status states
-bg-accent                             → hover states
-border-border                         → standard borders
-border-input                          → form field borders
-```
-
-### Layout — always use context, never hardcode
-```tsx
-// ✅ Correct
-import { useLayout } from 'xertica-ui/hooks';
-const { sidebarExpanded, sidebarWidth } = useLayout();
-<div style={{ paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px' }}>
-
-// ✅ Correct for reusable components that may render without providers
-import { useOptionalLayout } from 'xertica-ui/hooks';
-const layout = useOptionalLayout();
-const fallbackSidebarWidth = layout?.sidebarWidth ?? 80;
-
-// ❌ Wrong — never hardcode sidebar width
-<div style={{ paddingLeft: '256px' }}>
-```
-
-### Destructive actions — always confirm
-```tsx
-// ✅ Correct — confirm before executing
-<AlertDialog>
-  <AlertDialogTrigger asChild>
-    <Button variant="destructive">Delete</Button>
-  </AlertDialogTrigger>
-  <AlertDialogContent>...</AlertDialogContent>
-</AlertDialog>
-
-// ❌ Wrong — never execute destructive action directly on click
-<Button variant="destructive" onClick={deleteRecord}>Delete</Button>
-```
-
----
-
-## Page Structure
-
-Every page must follow this structure:
-
-```tsx
-import { PageHeader, PageHeaderHeading, PageHeaderDescription } from 'xertica-ui/ui';
-
-export function MyPage() {
-  return (
-    <>
-      <PageHeader>
-        <PageHeaderHeading>Page Title</PageHeaderHeading>
-        <PageHeaderDescription>Optional subtitle</PageHeaderDescription>
-        <Button>Primary Action</Button>
-      </PageHeader>
-      <div className="p-6 space-y-6">
-        {/* Page content */}
-      </div>
-    </>
-  );
-}
-```
-
----
-
-## App Root Structure
-
-```tsx
-import { XerticaProvider } from 'xertica-ui/brand';
-import { BrowserRouter }   from 'react-router-dom';
-import 'xertica-ui/style.css';
-
-function Root() {
-  const geminiApiKey = import.meta.env.VITE_GEMINI_API_KEY;
-  const googleMapsApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
-
-  return (
-    <XerticaProvider
-      apiKey={geminiApiKey}
-      googleMapsApiKey={googleMapsApiKey}
-      disableDarkMode
-    >
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </XerticaProvider>
-  );
-}
-```
-
-`XerticaProvider` is the app-level convenience wrapper used by this template. It composes theme, brand colors, language, layout, assistant/API keys, Google Maps, tooltips, and toasts. Most individual `xertica-ui` components are designed to render independently; use `useOptionalLayout()` when building reusable components that should keep working outside this provider.
-
----
-
-## Toast Notifications
-
-```tsx
-import { toast } from 'sonner'; // sonner is re-exported, no extra install needed
-
-toast.success('Saved successfully');
-toast.error('Something went wrong');
-toast.info('Processing...');
-toast.warning('Check your input');
-```
-
-Never render `<Toaster>` manually — it is auto-injected by `<XerticaProvider>`.
-
----
-
-## Before Writing Any Component
-
-1. Check `node_modules/xertica-ui/llms-compact.txt` — the component may already exist.
-2. Check `node_modules/xertica-ui/docs/decision-tree.md` — you may be choosing the wrong component.
-3. Read the specific component doc at `node_modules/xertica-ui/docs/components/[name].md`.
-4. Never create custom primitives that duplicate library components.
+# Xertica UI — Project Rules
+
+This project uses **xertica-ui**, an enterprise React design system built on Tailwind CSS v4, Radix UI, and Lucide Icons.
+
+> For the complete component reference, read `node_modules/xertica-ui/llms-full.txt`.
+> For a compact quick-reference, read `node_modules/xertica-ui/llms-compact.txt`.
+> For component selection guidance, read `node_modules/xertica-ui/docs/decision-tree.md`.
+
+---
+
+## Import Rules
+
+Always use the most specific subpath — never import from a category you don't need:
+
+```tsx
+import { Button, Card, Input, Badge, Table, Dialog } from 'xertica-ui/ui';
+import { Sidebar, Header }                           from 'xertica-ui/layout';
+import { XerticaProvider, XerticaLogo, ThemeToggle } from 'xertica-ui/brand';
+import { XerticaAssistant, generateDemoResponse }    from 'xertica-ui/assistant';
+import { VideoPlayer, AudioPlayer }                  from 'xertica-ui/media';
+import { useLayout, useOptionalLayout, useTheme }    from 'xertica-ui/hooks';
+import 'xertica-ui/style.css'; // import once at root only
+```
+
+The root `from 'xertica-ui'` remains valid for backward compatibility, but scaffolded project code must prefer the subpaths above.
+
+Icons are **never** from xertica-ui — always use `lucide-react`:
+
+```tsx
+import { Home, Settings, Plus, Trash2, ChevronRight } from 'lucide-react';
+```
+
+---
+
+## Non-Negotiable Rules
+
+### HTML — never use raw elements for UI
+| ❌ Never | ✅ Always |
+|---|---|
+| `<button>` | `<Button>` from `xertica-ui/ui` |
+| `<input>` | `<Input>` from `xertica-ui/ui` |
+| `<select>` | `<Select>` from `xertica-ui/ui` |
+| `<h1>` / `<h2>` for page headers | `<PageHeader><PageHeaderHeading>` |
+| `<div class="card ...">` | `<Card>` from `xertica-ui/ui` |
+| custom scrollbar div | `<ScrollArea>` from `xertica-ui/ui` |
+
+### Colors — context-dependent rules
+
+| ❌ Never (any context) | Reason |
+|---|---|
+| `#3b82f6`, `rgb(59,130,246)`, `hsl(...)` | Raw values — non-themeable |
+| `style={{ color: '#...' }}` for theming | Non-themeable inline style |
+
+| ❌ Wrong for semantic/status contexts | ✅ Required instead |
+|---|---|
+| `bg-red-500` for error states | `bg-destructive` |
+| `text-red-500` for error text | `text-destructive` |
+| `bg-green-500` for success states | `bg-success` |
+| `bg-yellow-500` for warnings | `bg-warning` |
+
+> For **layout, spacing, and general non-semantic UI** (custom components, decorative elements, Storybook stories where no semantic token applies), standard Tailwind color utilities like `bg-blue-500` or `text-gray-700` are acceptable.
+
+Semantic token reference:
+```
+bg-background / text-foreground       → page background and primary text
+bg-card / text-card-foreground        → card surfaces
+bg-muted / text-muted-foreground      → subdued areas and secondary text
+bg-primary / text-primary-foreground  → primary actions
+bg-destructive                        → danger / error states
+bg-success / bg-warning / bg-info     → semantic status states
+bg-accent                             → hover states
+border-border                         → standard borders
+border-input                          → form field borders
+```
+
+### Layout — always use context, never hardcode
+```tsx
+// ✅ Correct
+import { useLayout } from 'xertica-ui/hooks';
+const { sidebarExpanded, sidebarWidth } = useLayout();
+<div style={{ paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px' }}>
+
+// ✅ Correct for reusable components that may render without providers
+import { useOptionalLayout } from 'xertica-ui/hooks';
+const layout = useOptionalLayout();
+const fallbackSidebarWidth = layout?.sidebarWidth ?? 80;
+
+// ❌ Wrong — never hardcode sidebar width
+<div style={{ paddingLeft: '256px' }}>
+```
+
+### Destructive actions — always confirm
+```tsx
+// ✅ Correct — confirm before executing
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Button variant="destructive">Delete</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>...</AlertDialogContent>
+</AlertDialog>
+
+// ❌ Wrong — never execute destructive action directly on click
+<Button variant="destructive" onClick={deleteRecord}>Delete</Button>
+```
+
+---
+
+## Page Structure
+
+Every page must follow this structure:
+
+```tsx
+import { PageHeader, PageHeaderHeading, PageHeaderDescription } from 'xertica-ui/ui';
+
+export function MyPage() {
+  return (
+    <>
+      <PageHeader>
+        <PageHeaderHeading>Page Title</PageHeaderHeading>
+        <PageHeaderDescription>Optional subtitle</PageHeaderDescription>
+        <Button>Primary Action</Button>
+      </PageHeader>
+      <div className="p-6 space-y-6">
+        {/* Page content */}
+      </div>
+    </>
+  );
+}
+```
+
+---
+
+## App Root Structure
+
+```tsx
+import { XerticaProvider } from 'xertica-ui/brand';
+import { BrowserRouter }   from 'react-router-dom';
+import 'xertica-ui/style.css';
+
+function Root() {
+  const geminiApiKey = import.meta.env.VITE_GEMINI_API_KEY;
+  const googleMapsApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
+
+  return (
+    <XerticaProvider
+      apiKey={geminiApiKey}
+      googleMapsApiKey={googleMapsApiKey}
+      disableDarkMode
+    >
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </XerticaProvider>
+  );
+}
+```
+
+`XerticaProvider` is the app-level convenience wrapper used by this template. It composes theme, brand colors, language, layout, assistant/API keys, Google Maps, tooltips, and toasts. Most individual `xertica-ui` components are designed to render independently; use `useOptionalLayout()` when building reusable components that should keep working outside this provider.
+
+---
+
+## Toast Notifications
+
+```tsx
+import { toast } from 'sonner'; // sonner is re-exported, no extra install needed
+
+toast.success('Saved successfully');
+toast.error('Something went wrong');
+toast.info('Processing...');
+toast.warning('Check your input');
+```
+
+Never render `<Toaster>` manually — it is auto-injected by `<XerticaProvider>`.
+
+---
+
+## Before Writing Any Component
+
+1. Check `node_modules/xertica-ui/llms-compact.txt` — the component may already exist.
+2. Check `node_modules/xertica-ui/docs/decision-tree.md` — you may be choosing the wrong component.
+3. Read the specific component doc at `node_modules/xertica-ui/docs/components/[name].md`.
+4. Never create custom primitives that duplicate library components.