xertica-ui 2.2.0 → 2.3.0

package/components/ui/tabs/tabs.stories.tsx

@@ -1,140 +1,140 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from 'storybook/test';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../card';
-import { Button } from '../button';
-import { Input } from '../input';
-import { Label } from '../label';
-import React from 'react';
-
-const meta: Meta<typeof Tabs> = {
-  title: 'UI/Tabs',
-  component: Tabs,
-  render: args => <Tabs {...args} />,
-  argTypes: {
-    defaultValue: {
-      control: 'text',
-      description: 'The value of the tab that should be active by default.',
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes for the tabs container.',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-export const Default: Story = {
-  args: {
-    defaultValue: 'account',
-    className: 'w-[400px]',
-  },
-  render: args => (
-    <Tabs {...args}>
-      <TabsList className="grid w-full grid-cols-2">
-        <TabsTrigger value="account">Account</TabsTrigger>
-        <TabsTrigger value="password">Password</TabsTrigger>
-      </TabsList>
-      <TabsContent value="account">
-        <Card>
-          <CardHeader>
-            <CardTitle>Account</CardTitle>
-            <CardDescription>
-              Make changes to your account here. Click save when you&apos;re done.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <div className="space-y-1">
-              <Label htmlFor="name">Name</Label>
-              <Input id="name" defaultValue="Pedro Duarte" />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="username">Username</Label>
-              <Input id="username" defaultValue="@peduarte" />
-            </div>
-          </CardContent>
-          <CardFooter>
-            <Button>Save changes</Button>
-          </CardFooter>
-        </Card>
-      </TabsContent>
-      <TabsContent value="password">
-        <Card>
-          <CardHeader>
-            <CardTitle>Password</CardTitle>
-            <CardDescription>
-              Change your password here. After saving, you&apos;ll be logged out.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <div className="space-y-1">
-              <Label htmlFor="current">Current password</Label>
-              <Input id="current" type="password" />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="new">New password</Label>
-              <Input id="new" type="password" />
-            </div>
-          </CardContent>
-          <CardFooter>
-            <Button>Save password</Button>
-          </CardFooter>
-        </Card>
-      </TabsContent>
-    </Tabs>
-  ),
-};
-
-export const Analytics: Story = {
-  render: () => (
-    <Tabs defaultValue="overview" className="w-full">
-      <TabsList>
-        <TabsTrigger value="overview">Overview</TabsTrigger>
-        <TabsTrigger value="analytics" disabled>
-          Analytics
-        </TabsTrigger>
-        <TabsTrigger value="reports">Reports</TabsTrigger>
-        <TabsTrigger value="notifications">Notifications</TabsTrigger>
-      </TabsList>
-      <TabsContent value="overview" className="mt-4 p-4 border rounded-lg bg-card">
-        Overview content goes here.
-      </TabsContent>
-      <TabsContent value="reports" className="mt-4 p-4 border rounded-lg bg-card">
-        Reports table content goes here.
-      </TabsContent>
-      <TabsContent value="notifications" className="mt-4 p-4 border rounded-lg bg-card">
-        Notifications configuration goes here.
-      </TabsContent>
-    </Tabs>
-  ),
-};
-
-export const SwitchTab: Story = {
-  args: { defaultValue: 'account', className: 'w-[400px]' },
-  render: args => (
-    <Tabs {...args}>
-      <TabsList className="grid w-full grid-cols-2">
-        <TabsTrigger value="account">Account</TabsTrigger>
-        <TabsTrigger value="password">Password</TabsTrigger>
-      </TabsList>
-      <TabsContent value="account">
-        <p className="p-4 text-sm">Account content</p>
-      </TabsContent>
-      <TabsContent value="password">
-        <p className="p-4 text-sm">Password content</p>
-      </TabsContent>
-    </Tabs>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const accountTab = canvas.getByRole('tab', { name: 'Account' });
-    const passwordTab = canvas.getByRole('tab', { name: 'Password' });
-    await expect(accountTab).toHaveAttribute('aria-selected', 'true');
-    await expect(passwordTab).toHaveAttribute('aria-selected', 'false');
-    await userEvent.click(passwordTab);
-    await expect(passwordTab).toHaveAttribute('aria-selected', 'true');
-    await expect(accountTab).toHaveAttribute('aria-selected', 'false');
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from 'storybook/test';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../card';
+import { Button } from '../button';
+import { Input } from '../input';
+import { Label } from '../label';
+import React from 'react';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'UI/Tabs',
+  component: Tabs,
+  render: args => <Tabs {...args} />,
+  argTypes: {
+    defaultValue: {
+      control: 'text',
+      description: 'The value of the tab that should be active by default.',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes for the tabs container.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'account',
+    className: 'w-[400px]',
+  },
+  render: args => (
+    <Tabs {...args}>
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <Card>
+          <CardHeader>
+            <CardTitle>Account</CardTitle>
+            <CardDescription>
+              Make changes to your account here. Click save when you&apos;re done.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" defaultValue="Pedro Duarte" />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="username">Username</Label>
+              <Input id="username" defaultValue="@peduarte" />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button>Save changes</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+      <TabsContent value="password">
+        <Card>
+          <CardHeader>
+            <CardTitle>Password</CardTitle>
+            <CardDescription>
+              Change your password here. After saving, you&apos;ll be logged out.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="current">Current password</Label>
+              <Input id="current" type="password" />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="new">New password</Label>
+              <Input id="new" type="password" />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button>Save password</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const Analytics: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" className="w-full">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics" disabled>
+          Analytics
+        </TabsTrigger>
+        <TabsTrigger value="reports">Reports</TabsTrigger>
+        <TabsTrigger value="notifications">Notifications</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview" className="mt-4 p-4 border rounded-lg bg-card">
+        Overview content goes here.
+      </TabsContent>
+      <TabsContent value="reports" className="mt-4 p-4 border rounded-lg bg-card">
+        Reports table content goes here.
+      </TabsContent>
+      <TabsContent value="notifications" className="mt-4 p-4 border rounded-lg bg-card">
+        Notifications configuration goes here.
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const SwitchTab: Story = {
+  args: { defaultValue: 'account', className: 'w-[400px]' },
+  render: args => (
+    <Tabs {...args}>
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <p className="p-4 text-sm">Account content</p>
+      </TabsContent>
+      <TabsContent value="password">
+        <p className="p-4 text-sm">Password content</p>
+      </TabsContent>
+    </Tabs>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const accountTab = canvas.getByRole('tab', { name: 'Account' });
+    const passwordTab = canvas.getByRole('tab', { name: 'Password' });
+    await expect(accountTab).toHaveAttribute('aria-selected', 'true');
+    await expect(passwordTab).toHaveAttribute('aria-selected', 'false');
+    await userEvent.click(passwordTab);
+    await expect(passwordTab).toHaveAttribute('aria-selected', 'true');
+    await expect(accountTab).toHaveAttribute('aria-selected', 'false');
+  },
+};

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.mdx

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