xertica-ui 2.2.1 → 2.4.0

package/components/ui/tabs/tabs.test.tsx

@@ -1,50 +1,50 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi } from 'vitest';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
-import React from 'react';
-
-describe('Tabs', () => {
-  it('renders correctly', () => {
-    render(
-      <Tabs defaultValue="tab1">
-        <TabsList>
-          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-        </TabsList>
-        <TabsContent value="tab1">Content 1</TabsContent>
-        <TabsContent value="tab2">Content 2</TabsContent>
-      </Tabs>
-    );
-
-    expect(screen.getByText('Tab 1')).toBeInTheDocument();
-    expect(screen.getByText('Content 1')).toBeInTheDocument();
-    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
-  });
-
-  it('switches content when trigger is clicked', async () => {
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-    render(
-      <Tabs defaultValue="tab1" onValueChange={onValueChange}>
-        <TabsList>
-          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-        </TabsList>
-        <TabsContent value="tab1">Content 1</TabsContent>
-        <TabsContent value="tab2">Content 2</TabsContent>
-      </Tabs>
-    );
-
-    const trigger2 = screen.getByRole('tab', { name: 'Tab 2' });
-    await user.click(trigger2);
-
-    await waitFor(() => {
-      expect(onValueChange).toHaveBeenCalledWith('tab2');
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText('Content 2')).toBeInTheDocument();
-    });
-  });
-});
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
+import React from 'react';
+
+describe('Tabs', () => {
+  it('renders correctly', () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>
+    );
+
+    expect(screen.getByText('Tab 1')).toBeInTheDocument();
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+  });
+
+  it('switches content when trigger is clicked', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Tabs defaultValue="tab1" onValueChange={onValueChange}>
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>
+    );
+
+    const trigger2 = screen.getByRole('tab', { name: 'Tab 2' });
+    await user.click(trigger2);
+
+    await waitFor(() => {
+      expect(onValueChange).toHaveBeenCalledWith('tab2');
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Content 2')).toBeInTheDocument();
+    });
+  });
+});

package/components/ui/tabs/tabs.tsx

@@ -1,66 +1,66 @@
-'use client';
-
-import * as React from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-
-import { cn } from '../../shared/utils';
-
-/**
- * Intra-page navigation tabs (section switcher).
- *
- * @description
- * Segments large content areas into mutually exclusive clickable categories,
- * rendering each panel in-place without a URL reload.
- *
- * @ai-rules
- * 1. Compose strictly: `Tabs > TabsList > TabsTrigger` with panels in matching `TabsContent`.
- * 2. In long forms split by tabs, ensure inactive inputs retain values by correctly registering them with React Hook Form.
- * 3. NEVER simulate tabs with raw buttons + `useState` — use this Radix base for proper keyboard navigation (left/right arrows).
- */
-function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn('flex flex-col gap-2', className)}
-      {...props}
-    />
-  );
-}
-
-function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      className={cn(
-        'relative inline-flex h-12 w-fit items-end justify-start border-b border-border bg-transparent',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "relative inline-flex h-12 items-center justify-center gap-1.5 bg-transparent px-4 py-3 text-sm font-medium whitespace-nowrap transition-all duration-200 ease-in-out border-b-2 border-transparent text-muted-foreground hover:text-foreground hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary data-[state=active]:border-primary data-[state=active]:bg-transparent [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn('flex-1 outline-none', className)}
-      {...props}
-    />
-  );
-}
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../../shared/utils';
+
+/**
+ * Intra-page navigation tabs (section switcher).
+ *
+ * @description
+ * Segments large content areas into mutually exclusive clickable categories,
+ * rendering each panel in-place without a URL reload.
+ *
+ * @ai-rules
+ * 1. Compose strictly: `Tabs > TabsList > TabsTrigger` with panels in matching `TabsContent`.
+ * 2. In long forms split by tabs, ensure inactive inputs retain values by correctly registering them with React Hook Form.
+ * 3. NEVER simulate tabs with raw buttons + `useState` — use this Radix base for proper keyboard navigation (left/right arrows).
+ */
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'relative inline-flex h-12 w-fit items-end justify-start border-b border-border bg-transparent',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-12 items-center justify-center gap-1.5 bg-transparent px-4 py-3 text-sm font-medium whitespace-nowrap transition-all duration-200 ease-in-out border-b-2 border-transparent text-muted-foreground hover:text-foreground hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary data-[state=active]:border-primary data-[state=active]:bg-transparent [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/components/ui/textarea/index.ts

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

package/components/ui/textarea/textarea.stories.tsx

@@ -1,69 +1,69 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Textarea } from './textarea';
-import { Label } from '../label';
-import React from 'react';
-
-const meta: Meta<typeof Textarea> = {
-  title: 'UI/Textarea',
-  component: Textarea,
-  render: args => <Textarea {...args} />,
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size variant — controls padding and font size.',
-    },
-    disabled: {
-      control: 'boolean',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Textarea>;
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Type your message here.',
-  },
-};
-
-export const WithLabel: Story = {
-  render: args => (
-    <div className="grid w-full gap-1.5">
-      <Label htmlFor="message" size={args.size}>
-        Your message
-      </Label>
-      <Textarea {...args} placeholder="Type your message here." id="message" />
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    placeholder: 'Textarea is disabled.',
-  },
-};
-
-/**
- * Size comparison: sm, md (default), lg.
- */
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex flex-col gap-4 max-w-sm">
-      <div className="grid gap-1.5">
-        <Label size="sm">Small (sm)</Label>
-        <Textarea size="sm" placeholder="Small textarea" />
-      </div>
-      <div className="grid gap-1.5">
-        <Label size="md">Medium (md — default)</Label>
-        <Textarea size="md" placeholder="Medium textarea" />
-      </div>
-      <div className="grid gap-1.5">
-        <Label size="lg">Large (lg)</Label>
-        <Textarea size="lg" placeholder="Large textarea" />
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Textarea } from './textarea';
+import { Label } from '../label';
+import React from 'react';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'UI/Textarea',
+  component: Textarea,
+  render: args => <Textarea {...args} />,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant — controls padding and font size.',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Type your message here.',
+  },
+};
+
+export const WithLabel: Story = {
+  render: args => (
+    <div className="grid w-full gap-1.5">
+      <Label htmlFor="message" size={args.size}>
+        Your message
+      </Label>
+      <Textarea {...args} placeholder="Type your message here." id="message" />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: 'Textarea is disabled.',
+  },
+};
+
+/**
+ * Size comparison: sm, md (default), lg.
+ */
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 max-w-sm">
+      <div className="grid gap-1.5">
+        <Label size="sm">Small (sm)</Label>
+        <Textarea size="sm" placeholder="Small textarea" />
+      </div>
+      <div className="grid gap-1.5">
+        <Label size="md">Medium (md — default)</Label>
+        <Textarea size="md" placeholder="Medium textarea" />
+      </div>
+      <div className="grid gap-1.5">
+        <Label size="lg">Large (lg)</Label>
+        <Textarea size="lg" placeholder="Large textarea" />
+      </div>
+    </div>
+  ),
+};

package/components/ui/textarea/textarea.test.tsx

@@ -1,41 +1,41 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { Textarea } from './textarea';
-import React from 'react';
-
-describe('Textarea', () => {
-  it('renders correctly with default props', () => {
-    render(<Textarea placeholder="Enter description" />);
-    const textarea = screen.getByPlaceholderText('Enter description');
-    expect(textarea).toBeInTheDocument();
-    expect(textarea).toHaveClass('text-base'); // md size
-  });
-
-  it('renders correctly with different sizes', () => {
-    const { rerender } = render(<Textarea size="sm" placeholder="Small" />);
-    expect(screen.getByPlaceholderText('Small')).toHaveClass('text-sm');
-
-    rerender(<Textarea size="md" placeholder="Medium" />);
-    expect(screen.getByPlaceholderText('Medium')).toHaveClass('text-base');
-
-    rerender(<Textarea size="lg" placeholder="Large" />);
-    expect(screen.getByPlaceholderText('Large')).toHaveClass('text-base');
-  });
-
-  it('updates value on change', () => {
-    const onChange = vi.fn();
-    render(<Textarea onChange={onChange} />);
-    const textarea = screen.getByRole('textbox');
-
-    fireEvent.change(textarea, { target: { value: 'New text' } });
-
-    expect(textarea).toHaveValue('New text');
-    expect(onChange).toHaveBeenCalled();
-  });
-
-  it('is disabled when disabled prop is true', () => {
-    render(<Textarea disabled placeholder="Disabled" />);
-    const textarea = screen.getByPlaceholderText('Disabled');
-    expect(textarea).toBeDisabled();
-  });
-});
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Textarea } from './textarea';
+import React from 'react';
+
+describe('Textarea', () => {
+  it('renders correctly with default props', () => {
+    render(<Textarea placeholder="Enter description" />);
+    const textarea = screen.getByPlaceholderText('Enter description');
+    expect(textarea).toBeInTheDocument();
+    expect(textarea).toHaveClass('text-base'); // md size
+  });
+
+  it('renders correctly with different sizes', () => {
+    const { rerender } = render(<Textarea size="sm" placeholder="Small" />);
+    expect(screen.getByPlaceholderText('Small')).toHaveClass('text-sm');
+
+    rerender(<Textarea size="md" placeholder="Medium" />);
+    expect(screen.getByPlaceholderText('Medium')).toHaveClass('text-base');
+
+    rerender(<Textarea size="lg" placeholder="Large" />);
+    expect(screen.getByPlaceholderText('Large')).toHaveClass('text-base');
+  });
+
+  it('updates value on change', () => {
+    const onChange = vi.fn();
+    render(<Textarea onChange={onChange} />);
+    const textarea = screen.getByRole('textbox');
+
+    fireEvent.change(textarea, { target: { value: 'New text' } });
+
+    expect(textarea).toHaveValue('New text');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<Textarea disabled placeholder="Disabled" />);
+    const textarea = screen.getByPlaceholderText('Disabled');
+    expect(textarea).toBeDisabled();
+  });
+});

package/components/ui/textarea/textarea.tsx

@@ -1,61 +1,61 @@
-import * as React from 'react';
-
-import { cn } from '../../shared/utils';
-
-/**
- * Props para o componente Textarea.
- *
- * @interface TextareaProps
- */
-export interface TextareaProps extends React.ComponentProps<'textarea'> {
-  /**
-   * Size variant — matches the Input component sizing scale.
-   * Controls padding and font size (height is determined by `rows` prop or content).
-   * - `sm`: px-2 py-1, text-sm
-   * - `md`: px-3 py-2, text-base — **default**, aligned with Input default
-   * - `lg`: px-4 py-3, text-base
-   */
-  size?: 'sm' | 'md' | 'lg';
-}
-
-/**
- * Multi-line text input for extended content.
- *
- * @description
- * Styled replacement for the native HTML `<textarea>` element.
- * Supports the same size scale as Input (`sm`, `md`, `lg`) for consistent form alignment.
- *
- * @ai-rules
- * 1. Use when capturing large text blocks: descriptions, bios, notes, comments.
- * 2. Inside React Hook Form, wrap in `<FormControl>` and pass `{...field}`.
- * 3. Do NOT use `<Input>` for multi-line text — always use `<Textarea>`.
- * 4. The `size` prop controls padding and font — not height. Use `rows` to control height.
- */
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, size = 'md', ...props }, ref) => {
-    const sizeClasses = {
-      sm: 'px-2 py-1 text-sm',
-      md: 'px-3 py-2 text-base',
-      lg: 'px-4 py-3 text-base',
-    };
-
-    return (
-      <textarea
-        data-slot="textarea"
-        className={cn(
-          'flex min-h-16 w-full bg-background rounded-[var(--radius)] border border-border transition-colors outline-none resize-none text-foreground',
-          'placeholder:text-muted-foreground',
-          'focus:ring-2 focus:ring-primary focus:border-transparent',
-          'disabled:cursor-not-allowed disabled:opacity-50',
-          sizeClasses[size],
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Textarea.displayName = 'Textarea';
-
-export { Textarea };
+import * as React from 'react';
+
+import { cn } from '../../shared/utils';
+
+/**
+ * Props para o componente Textarea.
+ *
+ * @interface TextareaProps
+ */
+export interface TextareaProps extends React.ComponentProps<'textarea'> {
+  /**
+   * Size variant — matches the Input component sizing scale.
+   * Controls padding and font size (height is determined by `rows` prop or content).
+   * - `sm`: px-2 py-1, text-sm
+   * - `md`: px-3 py-2, text-base — **default**, aligned with Input default
+   * - `lg`: px-4 py-3, text-base
+   */
+  size?: 'sm' | 'md' | 'lg';
+}
+
+/**
+ * Multi-line text input for extended content.
+ *
+ * @description
+ * Styled replacement for the native HTML `<textarea>` element.
+ * Supports the same size scale as Input (`sm`, `md`, `lg`) for consistent form alignment.
+ *
+ * @ai-rules
+ * 1. Use when capturing large text blocks: descriptions, bios, notes, comments.
+ * 2. Inside React Hook Form, wrap in `<FormControl>` and pass `{...field}`.
+ * 3. Do NOT use `<Input>` for multi-line text — always use `<Textarea>`.
+ * 4. The `size` prop controls padding and font — not height. Use `rows` to control height.
+ */
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, size = 'md', ...props }, ref) => {
+    const sizeClasses = {
+      sm: 'px-2 py-1 text-sm',
+      md: 'px-3 py-2 text-base',
+      lg: 'px-4 py-3 text-base',
+    };
+
+    return (
+      <textarea
+        data-slot="textarea"
+        className={cn(
+          'flex min-h-16 w-full bg-background rounded-[var(--radius)] border border-border transition-colors outline-none resize-none text-foreground',
+          'placeholder:text-muted-foreground',
+          'focus:ring-2 focus:ring-primary focus:border-transparent',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          sizeClasses[size],
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/components/ui/timeline/index.ts

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