xertica-ui 2.2.1 → 2.3.0

package/components/ui/navigation-menu/navigation-menu.tsx

@@ -1,165 +1,165 @@
-import * as React from 'react';
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import { cva } from 'class-variance-authority';
-import { ChevronDownIcon } from 'lucide-react';
-
-import { cn } from '../../shared/utils';
-
-/**
- * Rich navigation menu for application headers.
- *
- * @description
- * Supports rich submenus with smooth transitions via the Radix UI Navigation Menu.
- * Ideal for top-level application navigation with grouped link sections.
- *
- * @ai-rules
- * 1. Use `<NavigationMenuTrigger>` for items with dropdown submenus and `<NavigationMenuLink>` for direct links.
- * 2. Wrap dropdown content in `<NavigationMenuContent>`.
- * 3. For mobile or tight layouts, use `<Sidebar>` instead — NavigationMenu is for horizontal desktop headers.
- */
-function NavigationMenu({
-  className,
-  children,
-  viewport = true,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean;
-}) {
-  return (
-    <NavigationMenuPrimitive.Root
-      data-slot="navigation-menu"
-      className={cn('relative z-10 flex w-full flex-1 items-center justify-center', className)}
-      {...props}
-    >
-      {children}
-      {viewport && <NavigationMenuViewport />}
-    </NavigationMenuPrimitive.Root>
-  );
-}
-
-function NavigationMenuList({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
-  return (
-    <NavigationMenuPrimitive.List
-      data-slot="navigation-menu-list"
-      className={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
-  return (
-    <NavigationMenuPrimitive.Item
-      data-slot="navigation-menu-item"
-      className={cn('relative', className)}
-      {...props}
-    />
-  );
-}
-
-const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-[var(--radius)] bg-background px-4 py-2 text-[var(--text-p)] font-[var(--font-weight-medium)] hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 outline-none focus-visible:ring-2 focus-visible:ring-ring'
-);
-
-function NavigationMenuTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
-  return (
-    <NavigationMenuPrimitive.Trigger
-      data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), 'group', className)}
-      {...props}
-    >
-      {children}{' '}
-      <ChevronDownIcon
-        className="relative top-[1px] ml-1 size-3 group-data-[state=open]:rotate-180"
-        aria-hidden="true"
-      />
-    </NavigationMenuPrimitive.Trigger>
-  );
-}
-
-function NavigationMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
-  return (
-    <NavigationMenuPrimitive.Content
-      data-slot="navigation-menu-content"
-      className={cn('left-0 top-0 w-full md:w-auto', className)}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuViewport({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
-  return (
-    <div className={cn('absolute left-0 top-full flex justify-center w-full')}>
-      <NavigationMenuPrimitive.Viewport
-        data-slot="navigation-menu-viewport"
-        className={cn(
-          'origin-top-center relative mt-1.5 overflow-hidden rounded-[var(--radius)] border border-border bg-popover text-popover-foreground shadow-lg',
-          className
-        )}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function NavigationMenuLink({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
-  return (
-    <NavigationMenuPrimitive.Link
-      data-slot="navigation-menu-link"
-      className={cn(
-        'block select-none space-y-1 rounded-[var(--radius)] p-3 leading-none no-underline outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuIndicator({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
-  return (
-    <NavigationMenuPrimitive.Indicator
-      data-slot="navigation-menu-indicator"
-      className={cn(
-        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
-        className
-      )}
-      {...props}
-    >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
-    </NavigationMenuPrimitive.Indicator>
-  );
-}
-
-export {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-  navigationMenuTriggerStyle,
-};
+import * as React from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '../../shared/utils';
+
+/**
+ * Rich navigation menu for application headers.
+ *
+ * @description
+ * Supports rich submenus with smooth transitions via the Radix UI Navigation Menu.
+ * Ideal for top-level application navigation with grouped link sections.
+ *
+ * @ai-rules
+ * 1. Use `<NavigationMenuTrigger>` for items with dropdown submenus and `<NavigationMenuLink>` for direct links.
+ * 2. Wrap dropdown content in `<NavigationMenuContent>`.
+ * 3. For mobile or tight layouts, use `<Sidebar>` instead — NavigationMenu is for horizontal desktop headers.
+ */
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean;
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      className={cn('relative z-10 flex w-full flex-1 items-center justify-center', className)}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn('relative', className)}
+      {...props}
+    />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-10 w-max items-center justify-center rounded-[var(--radius)] bg-background px-4 py-2 text-[var(--text-p)] font-[var(--font-weight-medium)] hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 outline-none focus-visible:ring-2 focus-visible:ring-ring'
+);
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...props}
+    >
+      {children}{' '}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn('left-0 top-0 w-full md:w-auto', className)}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div className={cn('absolute left-0 top-full flex justify-center w-full')}>
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          'origin-top-center relative mt-1.5 overflow-hidden rounded-[var(--radius)] border border-border bg-popover text-popover-foreground shadow-lg',
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        'block select-none space-y-1 rounded-[var(--radius)] p-3 leading-none no-underline outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+};

package/components/ui/notification-badge/index.ts

@@ -1 +1 @@
-export * from './notification-badge';
+export * from './notification-badge';

package/components/ui/notification-badge/notification-badge.mdx

@@ -10,14 +10,14 @@ import * as NotificationBadgeStories from './notification-badge.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/notification-badge/notification-badge.stories.tsx

@@ -1,66 +1,66 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { NotificationBadge } from './notification-badge';
-import { Button } from '../button';
-import { Bell, Mail, MessageSquare } from 'lucide-react';
-import React from 'react';
-
-const meta: Meta<typeof NotificationBadge> = {
-  title: 'UI/NotificationBadge',
-  component: NotificationBadge,
-  render: args => <NotificationBadge {...args} />,
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'secondary', 'destructive', 'outline', 'success', 'info', 'warning'],
-    },
-    count: { control: 'number' },
-    max: { control: 'number' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof NotificationBadge>;
-
-export const Default: Story = {
-  args: {
-    count: 5,
-    variant: 'destructive',
-  },
-  render: args => (
-    <div className="relative inline-flex">
-      <Button variant="outline" size="icon" aria-label="Notificações">
-        <Bell className="h-4 w-4" />
-      </Button>
-      <NotificationBadge {...args} className="absolute -top-1 -right-1" />
-    </div>
-  ),
-};
-
-export const Dot: Story = {
-  args: {
-    variant: 'destructive',
-  },
-  render: args => (
-    <div className="relative inline-flex">
-      <Button variant="outline" size="icon" aria-label="E-mails">
-        <Mail className="h-4 w-4" />
-      </Button>
-      <NotificationBadge {...args} className="absolute top-0 right-0" />
-    </div>
-  ),
-};
-
-export const Maxed: Story = {
-  args: {
-    count: 150,
-    max: 99,
-  },
-  render: args => (
-    <div className="relative inline-flex">
-      <Button variant="outline" size="icon" aria-label="Mensagens">
-        <MessageSquare className="h-4 w-4" />
-      </Button>
-      <NotificationBadge {...args} className="absolute -top-1 -right-1" />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { NotificationBadge } from './notification-badge';
+import { Button } from '../button';
+import { Bell, Mail, MessageSquare } from 'lucide-react';
+import React from 'react';
+
+const meta: Meta<typeof NotificationBadge> = {
+  title: 'UI/NotificationBadge',
+  component: NotificationBadge,
+  render: args => <NotificationBadge {...args} />,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'secondary', 'destructive', 'outline', 'success', 'info', 'warning'],
+    },
+    count: { control: 'number' },
+    max: { control: 'number' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof NotificationBadge>;
+
+export const Default: Story = {
+  args: {
+    count: 5,
+    variant: 'destructive',
+  },
+  render: args => (
+    <div className="relative inline-flex">
+      <Button variant="outline" size="icon" aria-label="Notificações">
+        <Bell className="h-4 w-4" />
+      </Button>
+      <NotificationBadge {...args} className="absolute -top-1 -right-1" />
+    </div>
+  ),
+};
+
+export const Dot: Story = {
+  args: {
+    variant: 'destructive',
+  },
+  render: args => (
+    <div className="relative inline-flex">
+      <Button variant="outline" size="icon" aria-label="E-mails">
+        <Mail className="h-4 w-4" />
+      </Button>
+      <NotificationBadge {...args} className="absolute top-0 right-0" />
+    </div>
+  ),
+};
+
+export const Maxed: Story = {
+  args: {
+    count: 150,
+    max: 99,
+  },
+  render: args => (
+    <div className="relative inline-flex">
+      <Button variant="outline" size="icon" aria-label="Mensagens">
+        <MessageSquare className="h-4 w-4" />
+      </Button>
+      <NotificationBadge {...args} className="absolute -top-1 -right-1" />
+    </div>
+  ),
+};

package/components/ui/notification-badge/notification-badge.test.tsx

@@ -1,61 +1,61 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { NotificationBadge } from './notification-badge';
-import React from 'react';
-
-describe('NotificationBadge', () => {
-  it('renders correctly with count', () => {
-    render(
-      <NotificationBadge count={5}>
-        <div data-testid="target">Target</div>
-      </NotificationBadge>
-    );
-
-    expect(screen.getByText('Target')).toBeInTheDocument();
-    expect(screen.getByText('5')).toBeInTheDocument();
-  });
-
-  it('handles max count overflow', () => {
-    render(
-      <NotificationBadge count={100} max={99}>
-        <div>Target</div>
-      </NotificationBadge>
-    );
-
-    expect(screen.getByText('99+')).toBeInTheDocument();
-  });
-
-  it('renders dot variant correctly', () => {
-    const { container } = render(
-      <NotificationBadge dot>
-        <div>Target</div>
-      </NotificationBadge>
-    );
-
-    const badge = container.querySelector('span.h-2.w-2');
-    expect(badge).toBeInTheDocument();
-    expect(screen.queryByText('0')).not.toBeInTheDocument();
-  });
-
-  it('does not render when count is 0 and showZero is false', () => {
-    render(
-      <NotificationBadge count={0} showZero={false}>
-        <div>Target</div>
-      </NotificationBadge>
-    );
-
-    const badge = screen.queryByRole('status'); // Not a real role but testing query
-    // Actually we check if the span exists
-    expect(screen.queryByText('0')).not.toBeInTheDocument();
-  });
-
-  it('renders when count is 0 and showZero is true', () => {
-    render(
-      <NotificationBadge count={0} showZero={true}>
-        <div>Target</div>
-      </NotificationBadge>
-    );
-
-    expect(screen.getByText('0')).toBeInTheDocument();
-  });
-});
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { NotificationBadge } from './notification-badge';
+import React from 'react';
+
+describe('NotificationBadge', () => {
+  it('renders correctly with count', () => {
+    render(
+      <NotificationBadge count={5}>
+        <div data-testid="target">Target</div>
+      </NotificationBadge>
+    );
+
+    expect(screen.getByText('Target')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('handles max count overflow', () => {
+    render(
+      <NotificationBadge count={100} max={99}>
+        <div>Target</div>
+      </NotificationBadge>
+    );
+
+    expect(screen.getByText('99+')).toBeInTheDocument();
+  });
+
+  it('renders dot variant correctly', () => {
+    const { container } = render(
+      <NotificationBadge dot>
+        <div>Target</div>
+      </NotificationBadge>
+    );
+
+    const badge = container.querySelector('span.h-2.w-2');
+    expect(badge).toBeInTheDocument();
+    expect(screen.queryByText('0')).not.toBeInTheDocument();
+  });
+
+  it('does not render when count is 0 and showZero is false', () => {
+    render(
+      <NotificationBadge count={0} showZero={false}>
+        <div>Target</div>
+      </NotificationBadge>
+    );
+
+    const badge = screen.queryByRole('status'); // Not a real role but testing query
+    // Actually we check if the span exists
+    expect(screen.queryByText('0')).not.toBeInTheDocument();
+  });
+
+  it('renders when count is 0 and showZero is true', () => {
+    render(
+      <NotificationBadge count={0} showZero={true}>
+        <div>Target</div>
+      </NotificationBadge>
+    );
+
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+});