xertica-ui 2.2.1 → 2.4.0

package/components/blocks/card-patterns/index.ts

@@ -1,29 +1,29 @@
-export { ActivityCard } from './ActivityCard';
-export type { ActivityCardProps, ActivityItem } from './ActivityCard';
-export { ActivityCardSkeleton } from './ActivityCardSkeleton';
-export type { ActivityCardSkeletonProps } from './ActivityCardSkeleton';
-
-export { ProfileCard } from './ProfileCard';
-export type { ProfileCardProps } from './ProfileCard';
-export { ProfileCardSkeleton } from './ProfileCardSkeleton';
-export type { ProfileCardSkeletonProps } from './ProfileCardSkeleton';
-
-export { ProjectCard } from './ProjectCard';
-export type { ProjectCardProps, ProjectMember, ProjectStatus } from './ProjectCard';
-export { ProjectCardSkeleton } from './ProjectCardSkeleton';
-export type { ProjectCardSkeletonProps } from './ProjectCardSkeleton';
-
-export { QuickActionCard } from './QuickActionCard';
-export type { QuickActionCardProps } from './QuickActionCard';
-export { QuickActionCardSkeleton } from './QuickActionCardSkeleton';
-export type { QuickActionCardSkeletonProps } from './QuickActionCardSkeleton';
-
-export { NotificationCard } from './NotificationCard';
-export type { NotificationCardProps, NotificationItem, NotificationType } from './NotificationCard';
-export { NotificationCardSkeleton } from './NotificationCardSkeleton';
-export type { NotificationCardSkeletonProps } from './NotificationCardSkeleton';
-
-export { FeatureCard } from './FeatureCard';
-export type { FeatureCardProps, FeatureCardColor } from './FeatureCard';
-export { FeatureCardSkeleton } from './FeatureCardSkeleton';
-export type { FeatureCardSkeletonProps } from './FeatureCardSkeleton';
+export { ActivityCard } from './ActivityCard';
+export type { ActivityCardProps, ActivityItem } from './ActivityCard';
+export { ActivityCardSkeleton } from './ActivityCardSkeleton';
+export type { ActivityCardSkeletonProps } from './ActivityCardSkeleton';
+
+export { ProfileCard } from './ProfileCard';
+export type { ProfileCardProps } from './ProfileCard';
+export { ProfileCardSkeleton } from './ProfileCardSkeleton';
+export type { ProfileCardSkeletonProps } from './ProfileCardSkeleton';
+
+export { ProjectCard } from './ProjectCard';
+export type { ProjectCardProps, ProjectMember, ProjectStatus } from './ProjectCard';
+export { ProjectCardSkeleton } from './ProjectCardSkeleton';
+export type { ProjectCardSkeletonProps } from './ProjectCardSkeleton';
+
+export { QuickActionCard } from './QuickActionCard';
+export type { QuickActionCardProps } from './QuickActionCard';
+export { QuickActionCardSkeleton } from './QuickActionCardSkeleton';
+export type { QuickActionCardSkeletonProps } from './QuickActionCardSkeleton';
+
+export { NotificationCard } from './NotificationCard';
+export type { NotificationCardProps, NotificationItem, NotificationType } from './NotificationCard';
+export { NotificationCardSkeleton } from './NotificationCardSkeleton';
+export type { NotificationCardSkeletonProps } from './NotificationCardSkeleton';
+
+export { FeatureCard } from './FeatureCard';
+export type { FeatureCardProps, FeatureCardColor } from './FeatureCard';
+export { FeatureCardSkeleton } from './FeatureCardSkeleton';
+export type { FeatureCardSkeletonProps } from './FeatureCardSkeleton';

package/components/blocks/index.ts

@@ -1 +1 @@
-export * from './card-patterns';
+export * from './card-patterns';

package/components/brand/branding/branding.stories.tsx

@@ -1,57 +1,57 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { XerticaLogo } from '../../brand/xertica-logo';
-import { XerticaXLogo } from '../../brand/xertica-xlogo';
-import React from 'react';
-
-const meta: Meta = {
-  title: 'Brand/Branding',
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-export const Logos: StoryObj = {
-  render: () => (
-    <div className="space-y-12 p-10">
-      <section className="space-y-4">
-        <h3 className="text-lg font-semibold text-muted-foreground border-b pb-2">Full Logo</h3>
-        <div className="flex flex-wrap gap-8 items-center bg-muted/20 p-8 rounded-xl">
-          <div className="space-y-2 text-center">
-            <XerticaLogo variant="default" className="h-10 w-auto" />
-            <span className="text-xs text-muted-foreground">Default</span>
-          </div>
-          <div className="space-y-2 text-center">
-            <XerticaLogo variant="theme" className="h-10 w-auto" />
-            <span className="text-xs text-muted-foreground">Theme</span>
-          </div>
-          <div className="space-y-2 text-center bg-slate-900 p-4 rounded-lg">
-            <XerticaLogo variant="white" className="h-10 w-auto" />
-            <span className="text-xs text-[#94a3b8]">White</span>
-          </div>
-          <div className="space-y-2 text-center">
-            <XerticaLogo variant="theme" className="h-10 w-auto" />
-            <span className="text-xs text-muted-foreground">Theme-Aware</span>
-          </div>
-        </div>
-      </section>
-
-      <section className="space-y-4">
-        <h3 className="text-lg font-semibold text-muted-foreground border-b pb-2">
-          Icon Only (X-Logo)
-        </h3>
-        <div className="flex flex-wrap gap-8 items-center bg-muted/20 p-8 rounded-xl">
-          <div className="space-y-2 text-center">
-            <XerticaXLogo className="h-12 w-12 text-primary" />
-            <span className="text-xs text-muted-foreground">Primary</span>
-          </div>
-          <div className="space-y-2 text-center bg-slate-900 p-4 rounded-lg">
-            <XerticaXLogo variant="white" className="h-12 w-12" />
-            <span className="text-xs text-[#94a3b8]">White</span>
-          </div>
-        </div>
-      </section>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { XerticaLogo } from '../../brand/xertica-logo';
+import { XerticaXLogo } from '../../brand/xertica-xlogo';
+import React from 'react';
+
+const meta: Meta = {
+  title: 'Brand/Branding',
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+export const Logos: StoryObj = {
+  render: () => (
+    <div className="space-y-12 p-10">
+      <section className="space-y-4">
+        <h3 className="text-lg font-semibold text-muted-foreground border-b pb-2">Full Logo</h3>
+        <div className="flex flex-wrap gap-8 items-center bg-muted/20 p-8 rounded-xl">
+          <div className="space-y-2 text-center">
+            <XerticaLogo variant="default" className="h-10 w-auto" />
+            <span className="text-xs text-muted-foreground">Default</span>
+          </div>
+          <div className="space-y-2 text-center">
+            <XerticaLogo variant="theme" className="h-10 w-auto" />
+            <span className="text-xs text-muted-foreground">Theme</span>
+          </div>
+          <div className="space-y-2 text-center bg-slate-900 p-4 rounded-lg">
+            <XerticaLogo variant="white" className="h-10 w-auto" />
+            <span className="text-xs text-[#94a3b8]">White</span>
+          </div>
+          <div className="space-y-2 text-center">
+            <XerticaLogo variant="theme" className="h-10 w-auto" />
+            <span className="text-xs text-muted-foreground">Theme-Aware</span>
+          </div>
+        </div>
+      </section>
+
+      <section className="space-y-4">
+        <h3 className="text-lg font-semibold text-muted-foreground border-b pb-2">
+          Icon Only (X-Logo)
+        </h3>
+        <div className="flex flex-wrap gap-8 items-center bg-muted/20 p-8 rounded-xl">
+          <div className="space-y-2 text-center">
+            <XerticaXLogo className="h-12 w-12 text-primary" />
+            <span className="text-xs text-muted-foreground">Primary</span>
+          </div>
+          <div className="space-y-2 text-center bg-slate-900 p-4 rounded-lg">
+            <XerticaXLogo variant="white" className="h-12 w-12" />
+            <span className="text-xs text-[#94a3b8]">White</span>
+          </div>
+        </div>
+      </section>
+    </div>
+  ),
+};

package/components/brand/index.ts

@@ -1,6 +1,6 @@
-export * from './xertica-provider';
-export * from './xertica-logo';
-export * from './xertica-xlogo';
-export * from './xertica-orbe';
-export * from './theme-toggle';
-export * from './language-selector';
+export * from './xertica-provider';
+export * from './xertica-logo';
+export * from './xertica-xlogo';
+export * from './xertica-orbe';
+export * from './theme-toggle';
+export * from './language-selector';

package/components/brand/language-selector/index.ts

@@ -1 +1 @@
-export * from './LanguageSelector';
+export * from './LanguageSelector';

package/components/brand/language-selector/language-selector.mdx

@@ -1,126 +1,126 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as LanguageSelectorStories from './language-selector.stories';
-
-<Meta of={LanguageSelectorStories} />
-
-<Title />
-<Subtitle>A self-contained dropdown for switching the application language, wired to LanguageContext and i18next.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Usage
-
-```tsx
-import { LanguageSelector } from 'xertica-ui/brand';
-
-<LanguageSelector />
-```
-
-The component reads the current language from `LanguageContext` and changes it via `setLanguage()` — which persists to `localStorage`, calls `i18n.changeLanguage()`, and invalidates the React Query cache so that mock/API responses also refresh in the new language.
-
-### Minimal variant (short label only)
-
-```tsx
-<LanguageSelector variant="minimal" showIcon={false} />
-```
-
-### Force-visible in a monolingual app
-
-By default, the selector renders `null` when only one language is configured. Pass `showWhenMonolingual` to render anyway:
-
-```tsx
-<LanguageSelector showWhenMonolingual />
-```
-
----
-
-## Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `variant` | `'default' \| 'minimal'` | `'default'` | `minimal` uses the short label (e.g. `PT`, `EN`) instead of the full name |
-| `showIcon` | `boolean` | `true` | Show the globe icon next to the label |
-| `showLabel` | `boolean` | `false` | Reserved for future use — currently no visual effect |
-| `className` | `string` | `''` | Additional CSS classes applied to the trigger button |
-| `showWhenMonolingual` | `boolean` | `false` | Render the selector even when only one language is configured (would otherwise auto-hide) |
-
-> The component does **not** accept `initialLanguage` or `onLanguageChange`. Language state lives in `LanguageContext` — read or change it via `useLanguage()`.
-
----
-
-## Supported Languages
-
-By default, the selector exposes the three languages that ship with the library:
-
-| Code | Full label | Short label |
-|---|---|---|
-| `pt-BR` | Português (BR) | PT |
-| `en` | English | EN |
-| `es` | Español | ES |
-
-**The list is fully runtime-configurable.** Pass `availableLanguages` on `<XerticaProvider>` (or `<LanguageProvider>`) to add, remove, or restrict the languages shown.
-
-### Add a new language
-
-```tsx
-import { XerticaProvider, DEFAULT_LANGUAGES } from 'xertica-ui';
-import fr from './locales/fr.json';
-
-<XerticaProvider
-  availableLanguages={[
-    ...DEFAULT_LANGUAGES,
-    { code: 'fr', label: 'Français', shortLabel: 'FR', resources: fr },
-  ]}
->
-  <LanguageSelector />
-  {/* French now appears in the dropdown; its strings are auto-registered with i18next */}
-</XerticaProvider>
-```
-
-### Monolingual app (no selector visible)
-
-```tsx
-<XerticaProvider availableLanguages={[{ code: 'en', label: 'English' }]}>
-  <LanguageSelector />
-  {/* Renders nothing — there is nothing to switch to */}
-</XerticaProvider>
-```
-
-### Programmatic access
-
-```tsx
-import { useLanguage } from 'xertica-ui';
-
-function MyComponent() {
-  const { language, setLanguage, availableLanguages, isMonolingual } = useLanguage();
-  // ...
-}
-```
-
----
-
-## Behavior
-
-- **Reads** `language`, `availableLanguages`, and `isMonolingual` from `useLanguage()`
-- **Persists** the selected language to `localStorage` under the key `xertica_language`
-- **Notifies** `i18next` via `i18n.changeLanguage()` — all components using `useTranslation()` re-render immediately
-- **Invalidates** the React Query cache so mock/API responses translated via `i18n.t()` are refetched in the new language
-- **Auto-hides** when `isMonolingual === true` (single-language apps)
-- **Labels**: known codes (`pt-BR`, `en`, `es`) use translated labels from `assistant.languageSelector.*`. Custom codes fall back to the `label` passed in the `LanguageDefinition`.
-- **Short labels**: when `variant="minimal"`, uses the `shortLabel` from the `LanguageDefinition`, or `code.slice(0, 2).toUpperCase()` as fallback
-
----
-
-## AI Rules
-
-> [!IMPORTANT]
-> - **Placement**: Typically inside `Header` actions (`showLanguageSelector` prop) or the `Sidebar` footer.
-> - **`<LanguageProvider>` is required**: `LanguageSelector` calls `useLanguage()` and throws when rendered outside a `LanguageProvider`. `<XerticaProvider>` provides it automatically.
-> - **Do NOT pass `initialLanguage` or `onLanguageChange`** — these props were removed. Use `useLanguage()` to read or change the language programmatically.
-> - **Do NOT conditionally render this component** for monolingual apps — it self-hides via `isMonolingual`. Use `showWhenMonolingual` only if you explicitly need it visible.
-> - **One instance per layout shell** — multiple selectors create UX confusion. Place a single instance in `Header` or `Sidebar`.
-> - **To support a new language**, pass it via `availableLanguages` on `<XerticaProvider>` — do not modify `LanguageSelector.tsx` or `LanguageContext.tsx`.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as LanguageSelectorStories from './language-selector.stories';
+
+<Meta of={LanguageSelectorStories} />
+
+<Title />
+<Subtitle>A self-contained dropdown for switching the application language, wired to LanguageContext and i18next.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Usage
+
+```tsx
+import { LanguageSelector } from 'xertica-ui/brand';
+
+<LanguageSelector />
+```
+
+The component reads the current language from `LanguageContext` and changes it via `setLanguage()` — which persists to `localStorage`, calls `i18n.changeLanguage()`, and invalidates the React Query cache so that mock/API responses also refresh in the new language.
+
+### Minimal variant (short label only)
+
+```tsx
+<LanguageSelector variant="minimal" showIcon={false} />
+```
+
+### Force-visible in a monolingual app
+
+By default, the selector renders `null` when only one language is configured. Pass `showWhenMonolingual` to render anyway:
+
+```tsx
+<LanguageSelector showWhenMonolingual />
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'default' \| 'minimal'` | `'default'` | `minimal` uses the short label (e.g. `PT`, `EN`) instead of the full name |
+| `showIcon` | `boolean` | `true` | Show the globe icon next to the label |
+| `showLabel` | `boolean` | `false` | Reserved for future use — currently no visual effect |
+| `className` | `string` | `''` | Additional CSS classes applied to the trigger button |
+| `showWhenMonolingual` | `boolean` | `false` | Render the selector even when only one language is configured (would otherwise auto-hide) |
+
+> The component does **not** accept `initialLanguage` or `onLanguageChange`. Language state lives in `LanguageContext` — read or change it via `useLanguage()`.
+
+---
+
+## Supported Languages
+
+By default, the selector exposes the three languages that ship with the library:
+
+| Code | Full label | Short label |
+|---|---|---|
+| `pt-BR` | Português (BR) | PT |
+| `en` | English | EN |
+| `es` | Español | ES |
+
+**The list is fully runtime-configurable.** Pass `availableLanguages` on `<XerticaProvider>` (or `<LanguageProvider>`) to add, remove, or restrict the languages shown.
+
+### Add a new language
+
+```tsx
+import { XerticaProvider, DEFAULT_LANGUAGES } from 'xertica-ui';
+import fr from './locales/fr.json';
+
+<XerticaProvider
+  availableLanguages={[
+    ...DEFAULT_LANGUAGES,
+    { code: 'fr', label: 'Français', shortLabel: 'FR', resources: fr },
+  ]}
+>
+  <LanguageSelector />
+  {/* French now appears in the dropdown; its strings are auto-registered with i18next */}
+</XerticaProvider>
+```
+
+### Monolingual app (no selector visible)
+
+```tsx
+<XerticaProvider availableLanguages={[{ code: 'en', label: 'English' }]}>
+  <LanguageSelector />
+  {/* Renders nothing — there is nothing to switch to */}
+</XerticaProvider>
+```
+
+### Programmatic access
+
+```tsx
+import { useLanguage } from 'xertica-ui';
+
+function MyComponent() {
+  const { language, setLanguage, availableLanguages, isMonolingual } = useLanguage();
+  // ...
+}
+```
+
+---
+
+## Behavior
+
+- **Reads** `language`, `availableLanguages`, and `isMonolingual` from `useLanguage()`
+- **Persists** the selected language to `localStorage` under the key `xertica_language`
+- **Notifies** `i18next` via `i18n.changeLanguage()` — all components using `useTranslation()` re-render immediately
+- **Invalidates** the React Query cache so mock/API responses translated via `i18n.t()` are refetched in the new language
+- **Auto-hides** when `isMonolingual === true` (single-language apps)
+- **Labels**: known codes (`pt-BR`, `en`, `es`) use translated labels from `assistant.languageSelector.*`. Custom codes fall back to the `label` passed in the `LanguageDefinition`.
+- **Short labels**: when `variant="minimal"`, uses the `shortLabel` from the `LanguageDefinition`, or `code.slice(0, 2).toUpperCase()` as fallback
+
+---
+
+## AI Rules
+
+> [!IMPORTANT]
+> - **Placement**: Typically inside `Header` actions (`showLanguageSelector` prop) or the `Sidebar` footer.
+> - **`<LanguageProvider>` is required**: `LanguageSelector` calls `useLanguage()` and throws when rendered outside a `LanguageProvider`. `<XerticaProvider>` provides it automatically.
+> - **Do NOT pass `initialLanguage` or `onLanguageChange`** — these props were removed. Use `useLanguage()` to read or change the language programmatically.
+> - **Do NOT conditionally render this component** for monolingual apps — it self-hides via `isMonolingual`. Use `showWhenMonolingual` only if you explicitly need it visible.
+> - **One instance per layout shell** — multiple selectors create UX confusion. Place a single instance in `Header` or `Sidebar`.
+> - **To support a new language**, pass it via `availableLanguages` on `<XerticaProvider>` — do not modify `LanguageSelector.tsx` or `LanguageContext.tsx`.

package/components/brand/language-selector/language-selector.stories.tsx

@@ -75,10 +75,7 @@ export const Minimal: Story = {
 export const ExtendedWithFrench: Story = {
   name: 'Extended (with custom language)',
   decorators: [
-    withLanguages([
-      ...DEFAULT_LANGUAGES,
-      { code: 'fr', label: 'Français', shortLabel: 'FR' },
-    ]),
+    withLanguages([...DEFAULT_LANGUAGES, { code: 'fr', label: 'Français', shortLabel: 'FR' }]),
   ],
   parameters: {
     docs: {

package/components/brand/theme-toggle/ThemeToggle.tsx

@@ -1,70 +1,74 @@
-import React from 'react';
-import { Sun, Moon } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '../../ui/button';
-import { useTheme } from '../../../contexts/ThemeContext';
-
-interface ThemeToggleProps {
-  size?: 'sm' | 'md' | 'lg';
-  variant?: 'default' | 'outline' | 'ghost';
-  className?: string;
-  showLabel?: boolean;
-}
-
-export function ThemeToggle({
-  size = 'md',
-  variant = 'ghost',
-  className = '',
-  showLabel = false,
-}: ThemeToggleProps) {
-  const { isDark, toggleTheme } = useTheme();
-  const { t } = useTranslation();
-
-  const getSizeClasses = () => {
-    switch (size) {
-      case 'sm':
-        return 'h-8 w-8 p-0';
-      case 'lg':
-        return 'h-12 w-12 p-0';
-      default:
-        return 'h-9 w-9 p-0';
-    }
-  };
-
-  const getIconSize = () => {
-    switch (size) {
-      case 'sm':
-        return 'h-3 w-3';
-      case 'lg':
-        return 'h-6 w-6';
-      default:
-        return 'h-4 w-4';
-    }
-  };
-
-  const buttonClasses = showLabel ? 'flex items-center gap-2 px-3 py-2' : getSizeClasses();
-
-  return (
-    <Button
-      variant={variant}
-      onClick={toggleTheme}
-      className={`group ${buttonClasses} transition-all duration-200 hover:scale-105 ${className}`}
-      title={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
-      aria-label={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
-    >
-      {isDark ? (
-        <>
-          <Sun
-            className={`${getIconSize()} text-primary dark:text-amber-400 group-hover:opacity-80`}
-          />
-          {showLabel && <span>{t('themeToggle.lightMode')}</span>}
-        </>
-      ) : (
-        <>
-          <Moon className={`${getIconSize()} text-muted-foreground group-hover:text-foreground`} />
-          {showLabel && <span>{t('themeToggle.darkMode')}</span>}
-        </>
-      )}
-    </Button>
-  );
-}
+import React from 'react';
+import { Sun, Moon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../ui/button';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+interface ThemeToggleProps {
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outline' | 'ghost';
+  className?: string;
+  showLabel?: boolean;
+}
+
+export function ThemeToggle({
+  size = 'md',
+  variant = 'ghost',
+  className = '',
+  showLabel = false,
+}: ThemeToggleProps) {
+  const { isDark, toggleTheme, disableDarkMode } = useTheme();
+  const { t } = useTranslation();
+
+  if (disableDarkMode) {
+    return null;
+  }
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm':
+        return 'h-8 w-8 p-0';
+      case 'lg':
+        return 'h-12 w-12 p-0';
+      default:
+        return 'h-9 w-9 p-0';
+    }
+  };
+
+  const getIconSize = () => {
+    switch (size) {
+      case 'sm':
+        return 'h-3 w-3';
+      case 'lg':
+        return 'h-6 w-6';
+      default:
+        return 'h-4 w-4';
+    }
+  };
+
+  const buttonClasses = showLabel ? 'flex items-center gap-2 px-3 py-2' : getSizeClasses();
+
+  return (
+    <Button
+      variant={variant}
+      onClick={toggleTheme}
+      className={`group ${buttonClasses} transition-all duration-200 hover:scale-105 ${className}`}
+      title={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
+      aria-label={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
+    >
+      {isDark ? (
+        <>
+          <Sun
+            className={`${getIconSize()} text-primary dark:text-amber-400 group-hover:opacity-80`}
+          />
+          {showLabel && <span>{t('themeToggle.lightMode')}</span>}
+        </>
+      ) : (
+        <>
+          <Moon className={`${getIconSize()} text-muted-foreground group-hover:text-foreground`} />
+          {showLabel && <span>{t('themeToggle.darkMode')}</span>}
+        </>
+      )}
+    </Button>
+  );
+}

package/components/brand/theme-toggle/index.ts

@@ -1 +1 @@
-export * from './ThemeToggle';
+export * from './ThemeToggle';