xertica-ui 2.2.0 → 2.3.0

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

@@ -1,91 +1,91 @@
-import * as React from 'react';
-import { cn } from '../../shared/utils';
-
-type NotificationBadgeVariant =
-  | 'default'
-  | 'secondary'
-  | 'destructive'
-  | 'outline'
-  | 'success'
-  | 'info'
-  | 'warning';
-
-interface NotificationBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-  count?: number;
-  max?: number;
-  showZero?: boolean;
-  dot?: boolean;
-  variant?: NotificationBadgeVariant;
-}
-
-const variantStyles: Record<NotificationBadgeVariant, string> = {
-  default: 'bg-primary text-primary-foreground',
-  secondary: 'bg-secondary text-secondary-foreground',
-  destructive: 'bg-destructive text-destructive-foreground',
-  outline: 'border-2 border-primary bg-background text-primary',
-  success: 'bg-success text-success-foreground',
-  info: 'bg-info text-info-foreground',
-  warning: 'bg-warning text-warning-foreground',
-};
-
-/**
- * Floating notification count or dot indicator overlay.
- *
- * @description
- * Renders a small floating badge in the top-right corner of its child element
- * to indicate unread counts or alert dots. Supports number display with overflow
- * capping (e.g., `99+`) or a simple dot via `dot={true}`.
- *
- * @ai-rules
- * 1. Use `count` for numeric badges or `dot={true}` for a simple presence indicator.
- * 2. Wrap the target element as a child — the badge positions relative to it automatically.
- * 3. For standalone status labels (not overlays), use `<Badge>` instead.
- * 4. Available variants: `default`, `secondary`, `destructive`, `outline`, `success`, `info`, `warning`.
- */
-const NotificationBadge = React.forwardRef<HTMLDivElement, NotificationBadgeProps>(
-  (
-    {
-      className,
-      count = 0,
-      max = 99,
-      showZero = false,
-      dot = false,
-      variant = 'destructive',
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const displayCount = count > max ? `${max}+` : count;
-    const shouldShow = count > 0 || showZero;
-
-    if (!shouldShow && !dot) {
-      return (
-        <div ref={ref} className={className} {...props}>
-          {children}
-        </div>
-      );
-    }
-
-    return (
-      <div ref={ref} className={cn('relative inline-block', className)} {...props}>
-        {children}
-        <span
-          className={cn(
-            'absolute -right-1 -top-1 flex items-center justify-center rounded-full',
-            variantStyles[variant],
-            dot ? 'h-2 w-2' : 'min-w-[1.25rem] h-5 px-1.5'
-          )}
-        >
-          {!dot && shouldShow && (
-            <span className="text-[10px] font-medium leading-none">{displayCount}</span>
-          )}
-        </span>
-      </div>
-    );
-  }
-);
-NotificationBadge.displayName = 'NotificationBadge';
-
-export { NotificationBadge };
-export type { NotificationBadgeProps, NotificationBadgeVariant };
+import * as React from 'react';
+import { cn } from '../../shared/utils';
+
+type NotificationBadgeVariant =
+  | 'default'
+  | 'secondary'
+  | 'destructive'
+  | 'outline'
+  | 'success'
+  | 'info'
+  | 'warning';
+
+interface NotificationBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  count?: number;
+  max?: number;
+  showZero?: boolean;
+  dot?: boolean;
+  variant?: NotificationBadgeVariant;
+}
+
+const variantStyles: Record<NotificationBadgeVariant, string> = {
+  default: 'bg-primary text-primary-foreground',
+  secondary: 'bg-secondary text-secondary-foreground',
+  destructive: 'bg-destructive text-destructive-foreground',
+  outline: 'border-2 border-primary bg-background text-primary',
+  success: 'bg-success text-success-foreground',
+  info: 'bg-info text-info-foreground',
+  warning: 'bg-warning text-warning-foreground',
+};
+
+/**
+ * Floating notification count or dot indicator overlay.
+ *
+ * @description
+ * Renders a small floating badge in the top-right corner of its child element
+ * to indicate unread counts or alert dots. Supports number display with overflow
+ * capping (e.g., `99+`) or a simple dot via `dot={true}`.
+ *
+ * @ai-rules
+ * 1. Use `count` for numeric badges or `dot={true}` for a simple presence indicator.
+ * 2. Wrap the target element as a child — the badge positions relative to it automatically.
+ * 3. For standalone status labels (not overlays), use `<Badge>` instead.
+ * 4. Available variants: `default`, `secondary`, `destructive`, `outline`, `success`, `info`, `warning`.
+ */
+const NotificationBadge = React.forwardRef<HTMLDivElement, NotificationBadgeProps>(
+  (
+    {
+      className,
+      count = 0,
+      max = 99,
+      showZero = false,
+      dot = false,
+      variant = 'destructive',
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const displayCount = count > max ? `${max}+` : count;
+    const shouldShow = count > 0 || showZero;
+
+    if (!shouldShow && !dot) {
+      return (
+        <div ref={ref} className={className} {...props}>
+          {children}
+        </div>
+      );
+    }
+
+    return (
+      <div ref={ref} className={cn('relative inline-block', className)} {...props}>
+        {children}
+        <span
+          className={cn(
+            'absolute -right-1 -top-1 flex items-center justify-center rounded-full',
+            variantStyles[variant],
+            dot ? 'h-2 w-2' : 'min-w-[1.25rem] h-5 px-1.5'
+          )}
+        >
+          {!dot && shouldShow && (
+            <span className="text-[10px] font-medium leading-none">{displayCount}</span>
+          )}
+        </span>
+      </div>
+    );
+  }
+);
+NotificationBadge.displayName = 'NotificationBadge';
+
+export { NotificationBadge };
+export type { NotificationBadgeProps, NotificationBadgeVariant };

package/components/ui/page-header/index.ts

@@ -1 +1 @@
-export * from './page-header';
+export * from './page-header';

package/components/ui/page-header/page-header.stories.tsx

@@ -1,69 +1,69 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { PageHeader, PageHeaderHeading, PageHeaderDescription } from './page-header';
-import { Plus, Download, Mail } from 'lucide-react';
-import { Button } from '../button';
-import React from 'react';
-
-const meta: Meta<typeof PageHeader> = {
-  title: 'UI/PageHeader',
-  component: PageHeader,
-  render: args => <PageHeader {...args} />,
-  parameters: {
-    layout: 'padded',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof PageHeader>;
-
-export const Default: Story = {
-  args: {
-    title: 'User Management',
-    subtitle: 'View and manage team member permissions.',
-  },
-};
-
-export const WithBackButton: Story = {
-  args: {
-    title: 'Edit Profile',
-    subtitle: 'Update your personal information and preferences.',
-    backHref: '/users',
-  },
-};
-
-export const WithActions: Story = {
-  args: {
-    title: 'Sales Report',
-    subtitle: 'Detailed analysis of commercial performance for the last quarter.',
-    actions: (
-      <>
-        <Button variant="outline" size="sm" className="gap-2">
-          <Download className="h-4 w-4" /> Export
-        </Button>
-        <Button size="sm" className="gap-2">
-          <Plus className="h-4 w-4" /> New Record
-        </Button>
-      </>
-    ),
-  },
-};
-
-export const Compact: Story = {
-  args: {
-    title: 'Settings',
-    onBack: () => alert('Going back...'),
-    actions: <Button size="sm">Save Changes</Button>,
-  },
-};
-
-export const Typography: Story = {
-  render: () => (
-    <div className="space-y-4 max-w-2xl">
-      <PageHeaderHeading>Demo Page</PageHeaderHeading>
-      <PageHeaderDescription>
-        This is an example description using the PageHeaderDescription component, maintaining
-        typographic consistency across the entire system.
-      </PageHeaderDescription>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { PageHeader, PageHeaderHeading, PageHeaderDescription } from './page-header';
+import { Plus, Download, Mail } from 'lucide-react';
+import { Button } from '../button';
+import React from 'react';
+
+const meta: Meta<typeof PageHeader> = {
+  title: 'UI/PageHeader',
+  component: PageHeader,
+  render: args => <PageHeader {...args} />,
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PageHeader>;
+
+export const Default: Story = {
+  args: {
+    title: 'User Management',
+    subtitle: 'View and manage team member permissions.',
+  },
+};
+
+export const WithBackButton: Story = {
+  args: {
+    title: 'Edit Profile',
+    subtitle: 'Update your personal information and preferences.',
+    backHref: '/users',
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    title: 'Sales Report',
+    subtitle: 'Detailed analysis of commercial performance for the last quarter.',
+    actions: (
+      <>
+        <Button variant="outline" size="sm" className="gap-2">
+          <Download className="h-4 w-4" /> Export
+        </Button>
+        <Button size="sm" className="gap-2">
+          <Plus className="h-4 w-4" /> New Record
+        </Button>
+      </>
+    ),
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    title: 'Settings',
+    onBack: () => alert('Going back...'),
+    actions: <Button size="sm">Save Changes</Button>,
+  },
+};
+
+export const Typography: Story = {
+  render: () => (
+    <div className="space-y-4 max-w-2xl">
+      <PageHeaderHeading>Demo Page</PageHeaderHeading>
+      <PageHeaderDescription>
+        This is an example description using the PageHeaderDescription component, maintaining
+        typographic consistency across the entire system.
+      </PageHeaderDescription>
+    </div>
+  ),
+};

package/components/ui/page-header/page-header.test.tsx

@@ -1,37 +1,37 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { PageHeader } from './page-header';
-import React from 'react';
-
-describe('PageHeader', () => {
-  it('renders correctly with title and subtitle', () => {
-    render(<PageHeader title="Main Title" subtitle="Description" />);
-
-    expect(screen.getByText('Main Title')).toBeInTheDocument();
-    expect(screen.getByText('Description')).toBeInTheDocument();
-  });
-
-  it('renders back button when onBack is provided', () => {
-    const onBack = vi.fn();
-    render(<PageHeader title="Title" onBack={onBack} />);
-
-    const backButton = screen.getByLabelText('Back');
-    expect(backButton).toBeInTheDocument();
-
-    fireEvent.click(backButton);
-    expect(onBack).toHaveBeenCalled();
-  });
-
-  it('renders back link when backHref is provided', () => {
-    render(<PageHeader title="Title" backHref="/home" />);
-
-    const backLink = screen.getByRole('link');
-    expect(backLink).toHaveAttribute('href', '/home');
-  });
-
-  it('renders actions correctly', () => {
-    render(<PageHeader title="Title" actions={<button>Create</button>} />);
-
-    expect(screen.getByRole('button', { name: /create/i })).toBeInTheDocument();
-  });
-});
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { PageHeader } from './page-header';
+import React from 'react';
+
+describe('PageHeader', () => {
+  it('renders correctly with title and subtitle', () => {
+    render(<PageHeader title="Main Title" subtitle="Description" />);
+
+    expect(screen.getByText('Main Title')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+  });
+
+  it('renders back button when onBack is provided', () => {
+    const onBack = vi.fn();
+    render(<PageHeader title="Title" onBack={onBack} />);
+
+    const backButton = screen.getByLabelText('Back');
+    expect(backButton).toBeInTheDocument();
+
+    fireEvent.click(backButton);
+    expect(onBack).toHaveBeenCalled();
+  });
+
+  it('renders back link when backHref is provided', () => {
+    render(<PageHeader title="Title" backHref="/home" />);
+
+    const backLink = screen.getByRole('link');
+    expect(backLink).toHaveAttribute('href', '/home');
+  });
+
+  it('renders actions correctly', () => {
+    render(<PageHeader title="Title" actions={<button>Create</button>} />);
+
+    expect(screen.getByRole('button', { name: /create/i })).toBeInTheDocument();
+  });
+});

package/components/ui/page-header/page-header.tsx

@@ -1,124 +1,124 @@
-import * as React from 'react';
-import { ChevronLeft } from 'lucide-react';
-import { cn } from '../../shared/utils';
-import { Button } from '../button';
-
-/**
- * Props for the PageHeader component.
- */
-export interface PageHeaderProps {
-  /** Main title of the page */
-  title: string;
-  /** Optional subtitle or description */
-  subtitle?: string;
-  /** Optional URL for the back button (renders a native `<a>`). */
-  backHref?: string;
-  /** Optional click handler for the back button. */
-  onBack?: () => void;
-  /**
-   * Custom back link renderer — use this for SPA router links (React Router, Next.js, etc.)
-   * so the navigation does not trigger a full page reload.
-   *
-   * @example
-   * // React Router
-   * renderBackLink={(icon) => <Link to="/previous">{icon}</Link>}
-   * // Next.js
-   * renderBackLink={(icon) => <NextLink href="/previous">{icon}</NextLink>}
-   */
-  renderBackLink?: (icon: React.ReactNode) => React.ReactElement;
-  /** Action buttons or elements to display on the right */
-  actions?: React.ReactNode;
-  /** Additional CSS classes */
-  className?: string;
-  /** Accessible label for the back button. @default "Back" */
-  backLabel?: string;
-}
-
-/**
- * Standard Header for individual pages or sections.
- *
- * @description
- * Use this component at the top of your page content to provide a consistent
- * title, optional subtitle, navigation (back button), and primary actions.
- *
- * @ai-rules
- * 1. Use `title` for the primary H1-level descriptor of the page.
- * 2. Prefer `renderBackLink` over `backHref` in SPA projects (React Router, Next.js) to avoid full reloads.
- * 3. Use `actions` for buttons like "Save", "Create", or secondary dropdowns.
- */
-export function PageHeader({
-  title,
-  subtitle,
-  backHref,
-  onBack,
-  renderBackLink,
-  actions,
-  className,
-  backLabel = 'Back',
-}: PageHeaderProps) {
-  const showBack = !!(backHref || onBack || renderBackLink);
-  const icon = <ChevronLeft className="h-5 w-5" />;
-
-  return (
-    <div
-      className={cn(
-        'flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-8',
-        className
-      )}
-    >
-      <div className="flex items-start gap-4">
-        {showBack && (
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-10 w-10 shrink-0"
-            onClick={onBack}
-            asChild={!!renderBackLink || !!backHref}
-            aria-label={backLabel}
-          >
-            {renderBackLink ? (
-              renderBackLink(icon)
-            ) : backHref ? (
-              <a href={backHref}>{icon}</a>
-            ) : (
-              icon
-            )}
-          </Button>
-        )}
-        <div className="flex flex-col space-y-1">
-          <h1 className="text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
-          {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
-        </div>
-      </div>
-      {actions && <div className="flex items-center gap-2">{actions}</div>}
-    </div>
-  );
-}
-
-/**
- * Styled Heading for custom page headers.
- */
-export function PageHeaderHeading({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLHeadingElement>) {
-  return (
-    <h1
-      className={cn(
-        'text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-/**
- * Styled Description for custom page headers.
- */
-export function PageHeaderDescription({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cn('text-lg text-muted-foreground sm:text-xl', className)} {...props} />;
-}
+import * as React from 'react';
+import { ChevronLeft } from 'lucide-react';
+import { cn } from '../../shared/utils';
+import { Button } from '../button';
+
+/**
+ * Props for the PageHeader component.
+ */
+export interface PageHeaderProps {
+  /** Main title of the page */
+  title: string;
+  /** Optional subtitle or description */
+  subtitle?: string;
+  /** Optional URL for the back button (renders a native `<a>`). */
+  backHref?: string;
+  /** Optional click handler for the back button. */
+  onBack?: () => void;
+  /**
+   * Custom back link renderer — use this for SPA router links (React Router, Next.js, etc.)
+   * so the navigation does not trigger a full page reload.
+   *
+   * @example
+   * // React Router
+   * renderBackLink={(icon) => <Link to="/previous">{icon}</Link>}
+   * // Next.js
+   * renderBackLink={(icon) => <NextLink href="/previous">{icon}</NextLink>}
+   */
+  renderBackLink?: (icon: React.ReactNode) => React.ReactElement;
+  /** Action buttons or elements to display on the right */
+  actions?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+  /** Accessible label for the back button. @default "Back" */
+  backLabel?: string;
+}
+
+/**
+ * Standard Header for individual pages or sections.
+ *
+ * @description
+ * Use this component at the top of your page content to provide a consistent
+ * title, optional subtitle, navigation (back button), and primary actions.
+ *
+ * @ai-rules
+ * 1. Use `title` for the primary H1-level descriptor of the page.
+ * 2. Prefer `renderBackLink` over `backHref` in SPA projects (React Router, Next.js) to avoid full reloads.
+ * 3. Use `actions` for buttons like "Save", "Create", or secondary dropdowns.
+ */
+export function PageHeader({
+  title,
+  subtitle,
+  backHref,
+  onBack,
+  renderBackLink,
+  actions,
+  className,
+  backLabel = 'Back',
+}: PageHeaderProps) {
+  const showBack = !!(backHref || onBack || renderBackLink);
+  const icon = <ChevronLeft className="h-5 w-5" />;
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-8',
+        className
+      )}
+    >
+      <div className="flex items-start gap-4">
+        {showBack && (
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-10 w-10 shrink-0"
+            onClick={onBack}
+            asChild={!!renderBackLink || !!backHref}
+            aria-label={backLabel}
+          >
+            {renderBackLink ? (
+              renderBackLink(icon)
+            ) : backHref ? (
+              <a href={backHref}>{icon}</a>
+            ) : (
+              icon
+            )}
+          </Button>
+        )}
+        <div className="flex flex-col space-y-1">
+          <h1 className="text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
+          {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
+        </div>
+      </div>
+      {actions && <div className="flex items-center gap-2">{actions}</div>}
+    </div>
+  );
+}
+
+/**
+ * Styled Heading for custom page headers.
+ */
+export function PageHeaderHeading({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h1
+      className={cn(
+        'text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Styled Description for custom page headers.
+ */
+export function PageHeaderDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn('text-lg text-muted-foreground sm:text-xl', className)} {...props} />;
+}

package/components/ui/pagination/index.ts

@@ -1,3 +1,3 @@
-export * from './pagination';
-export { usePagination } from './use-pagination';
-export type { PaginationPageItem, UsePaginationProps, UsePaginationReturn } from './use-pagination';
+export * from './pagination';
+export { usePagination } from './use-pagination';
+export type { PaginationPageItem, UsePaginationProps, UsePaginationReturn } from './use-pagination';