xertica-ui 2.2.1 → 2.4.0

package/components/ui/radio-group/radio-group.stories.tsx

@@ -1,114 +1,114 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { RadioGroup, RadioGroupItem } from './radio-group';
-import { Label } from '../label';
-import React from 'react';
-
-const meta: Meta<typeof RadioGroup> = {
-  title: 'UI/RadioGroup',
-  component: RadioGroup,
-  render: args => <RadioGroup {...args} />,
-  argTypes: {
-    defaultValue: {
-      control: 'text',
-      description: 'The value of the radio item that should be checked by default.',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the radio group is disabled.',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof RadioGroup>;
-
-export const Default: Story = {
-  render: args => (
-    <RadioGroup {...args}>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="default" id="r1" />
-        <Label htmlFor="r1">Default</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="comfortable" id="r2" />
-        <Label htmlFor="r2">Comfortable</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="compact" id="r3" />
-        <Label htmlFor="r3">Compact</Label>
-      </div>
-    </RadioGroup>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <RadioGroup defaultValue="option-one" disabled>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="option-one" id="option-one" />
-        <Label htmlFor="option-one">Option One</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="option-two" id="option-two" />
-        <Label htmlFor="option-two">Option Two</Label>
-      </div>
-    </RadioGroup>
-  ),
-};
-
-/**
- * Size comparison: sm, md (default), lg side-by-side.
- */
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex flex-col gap-6">
-      <div>
-        <p className="text-xs text-muted-foreground mb-2">Small (sm)</p>
-        <RadioGroup defaultValue="a">
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="a" id="sm-a" size="sm" />
-            <Label htmlFor="sm-a" size="sm">
-              Option A
-            </Label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="b" id="sm-b" size="sm" />
-            <Label htmlFor="sm-b" size="sm">
-              Option B
-            </Label>
-          </div>
-        </RadioGroup>
-      </div>
-      <div>
-        <p className="text-xs text-muted-foreground mb-2">Medium (md — default)</p>
-        <RadioGroup defaultValue="a">
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="a" id="md-a" />
-            <Label htmlFor="md-a">Option A</Label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="b" id="md-b" />
-            <Label htmlFor="md-b">Option B</Label>
-          </div>
-        </RadioGroup>
-      </div>
-      <div>
-        <p className="text-xs text-muted-foreground mb-2">Large (lg)</p>
-        <RadioGroup defaultValue="a">
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="a" id="lg-a" size="lg" />
-            <Label htmlFor="lg-a" size="lg">
-              Option A
-            </Label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="b" id="lg-b" size="lg" />
-            <Label htmlFor="lg-b" size="lg">
-              Option B
-            </Label>
-          </div>
-        </RadioGroup>
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { RadioGroup, RadioGroupItem } from './radio-group';
+import { Label } from '../label';
+import React from 'react';
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'UI/RadioGroup',
+  component: RadioGroup,
+  render: args => <RadioGroup {...args} />,
+  argTypes: {
+    defaultValue: {
+      control: 'text',
+      description: 'The value of the radio item that should be checked by default.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the radio group is disabled.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RadioGroup>;
+
+export const Default: Story = {
+  render: args => (
+    <RadioGroup {...args}>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="default" id="r1" />
+        <Label htmlFor="r1">Default</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="comfortable" id="r2" />
+        <Label htmlFor="r2">Comfortable</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="compact" id="r3" />
+        <Label htmlFor="r3">Compact</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-one" disabled>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-one" id="option-one" />
+        <Label htmlFor="option-one">Option One</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-two" id="option-two" />
+        <Label htmlFor="option-two">Option Two</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+/**
+ * Size comparison: sm, md (default), lg side-by-side.
+ */
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div>
+        <p className="text-xs text-muted-foreground mb-2">Small (sm)</p>
+        <RadioGroup defaultValue="a">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="a" id="sm-a" size="sm" />
+            <Label htmlFor="sm-a" size="sm">
+              Option A
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="b" id="sm-b" size="sm" />
+            <Label htmlFor="sm-b" size="sm">
+              Option B
+            </Label>
+          </div>
+        </RadioGroup>
+      </div>
+      <div>
+        <p className="text-xs text-muted-foreground mb-2">Medium (md — default)</p>
+        <RadioGroup defaultValue="a">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="a" id="md-a" />
+            <Label htmlFor="md-a">Option A</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="b" id="md-b" />
+            <Label htmlFor="md-b">Option B</Label>
+          </div>
+        </RadioGroup>
+      </div>
+      <div>
+        <p className="text-xs text-muted-foreground mb-2">Large (lg)</p>
+        <RadioGroup defaultValue="a">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="a" id="lg-a" size="lg" />
+            <Label htmlFor="lg-a" size="lg">
+              Option A
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="b" id="lg-b" size="lg" />
+            <Label htmlFor="lg-b" size="lg">
+              Option B
+            </Label>
+          </div>
+        </RadioGroup>
+      </div>
+    </div>
+  ),
+};

package/components/ui/radio-group/radio-group.test.tsx

@@ -1,78 +1,78 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { RadioGroup, RadioGroupItem } from './radio-group';
-import React from 'react';
-
-describe('RadioGroup', () => {
-  it('renders correctly', () => {
-    render(
-      <RadioGroup defaultValue="option-one">
-        <div className="flex items-center space-x-2">
-          <RadioGroupItem value="option-one" id="option-one" />
-          <label htmlFor="option-one">Option One</label>
-        </div>
-        <div className="flex items-center space-x-2">
-          <RadioGroupItem value="option-two" id="option-two" />
-          <label htmlFor="option-two">Option Two</label>
-        </div>
-      </RadioGroup>
-    );
-
-    expect(screen.getByLabelText('Option One')).toBeInTheDocument();
-    expect(screen.getByLabelText('Option Two')).toBeInTheDocument();
-  });
-
-  it('changes selection on click', () => {
-    const { container } = render(
-      <RadioGroup defaultValue="option-one">
-        <RadioGroupItem value="option-one" id="option-one" />
-        <RadioGroupItem value="option-two" id="option-two" />
-      </RadioGroup>
-    );
-
-    const radioOne = container.querySelector('[value="option-one"]') as HTMLElement;
-    const radioTwo = container.querySelector('[value="option-two"]') as HTMLElement;
-
-    expect(radioOne).toHaveAttribute('data-state', 'checked');
-    expect(radioTwo).toHaveAttribute('data-state', 'unchecked');
-
-    fireEvent.click(radioTwo);
-
-    expect(radioOne).toHaveAttribute('data-state', 'unchecked');
-    expect(radioTwo).toHaveAttribute('data-state', 'checked');
-  });
-
-  it('has correct data-slot attributes', () => {
-    const { container } = render(
-      <RadioGroup defaultValue="1">
-        <RadioGroupItem value="1" id="r1" />
-      </RadioGroup>
-    );
-    expect(container.querySelector('[data-slot="radio-group-item"]')).toBeInTheDocument();
-    // Indicator only renders for the checked item
-    expect(container.querySelector('[data-slot="radio-group-indicator"]')).toBeInTheDocument();
-  });
-
-  it('renders correctly with different sizes', () => {
-    const { rerender } = render(
-      <RadioGroup>
-        <RadioGroupItem value="1" size="sm" />
-      </RadioGroup>
-    );
-    expect(screen.getByRole('radio')).toHaveClass('size-4');
-
-    rerender(
-      <RadioGroup>
-        <RadioGroupItem value="1" size="md" />
-      </RadioGroup>
-    );
-    expect(screen.getByRole('radio')).toHaveClass('size-5');
-
-    rerender(
-      <RadioGroup>
-        <RadioGroupItem value="1" size="lg" />
-      </RadioGroup>
-    );
-    expect(screen.getByRole('radio')).toHaveClass('size-6');
-  });
-});
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { RadioGroup, RadioGroupItem } from './radio-group';
+import React from 'react';
+
+describe('RadioGroup', () => {
+  it('renders correctly', () => {
+    render(
+      <RadioGroup defaultValue="option-one">
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="option-one" id="option-one" />
+          <label htmlFor="option-one">Option One</label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="option-two" id="option-two" />
+          <label htmlFor="option-two">Option Two</label>
+        </div>
+      </RadioGroup>
+    );
+
+    expect(screen.getByLabelText('Option One')).toBeInTheDocument();
+    expect(screen.getByLabelText('Option Two')).toBeInTheDocument();
+  });
+
+  it('changes selection on click', () => {
+    const { container } = render(
+      <RadioGroup defaultValue="option-one">
+        <RadioGroupItem value="option-one" id="option-one" />
+        <RadioGroupItem value="option-two" id="option-two" />
+      </RadioGroup>
+    );
+
+    const radioOne = container.querySelector('[value="option-one"]') as HTMLElement;
+    const radioTwo = container.querySelector('[value="option-two"]') as HTMLElement;
+
+    expect(radioOne).toHaveAttribute('data-state', 'checked');
+    expect(radioTwo).toHaveAttribute('data-state', 'unchecked');
+
+    fireEvent.click(radioTwo);
+
+    expect(radioOne).toHaveAttribute('data-state', 'unchecked');
+    expect(radioTwo).toHaveAttribute('data-state', 'checked');
+  });
+
+  it('has correct data-slot attributes', () => {
+    const { container } = render(
+      <RadioGroup defaultValue="1">
+        <RadioGroupItem value="1" id="r1" />
+      </RadioGroup>
+    );
+    expect(container.querySelector('[data-slot="radio-group-item"]')).toBeInTheDocument();
+    // Indicator only renders for the checked item
+    expect(container.querySelector('[data-slot="radio-group-indicator"]')).toBeInTheDocument();
+  });
+
+  it('renders correctly with different sizes', () => {
+    const { rerender } = render(
+      <RadioGroup>
+        <RadioGroupItem value="1" size="sm" />
+      </RadioGroup>
+    );
+    expect(screen.getByRole('radio')).toHaveClass('size-4');
+
+    rerender(
+      <RadioGroup>
+        <RadioGroupItem value="1" size="md" />
+      </RadioGroup>
+    );
+    expect(screen.getByRole('radio')).toHaveClass('size-5');
+
+    rerender(
+      <RadioGroup>
+        <RadioGroupItem value="1" size="lg" />
+      </RadioGroup>
+    );
+    expect(screen.getByRole('radio')).toHaveClass('size-6');
+  });
+});

package/components/ui/radio-group/radio-group.tsx

@@ -1,93 +1,93 @@
-'use client';
-
-import * as React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-
-import { cn } from '../../shared/utils';
-
-/**
- * Mutually exclusive single-selection radio button group.
- *
- * @description
- * Used for 2–4 visible options where a dropdown would add unnecessary friction.
- * Built on Radix UI RadioGroup for full keyboard and accessibility support.
- * RadioGroupItem supports the standard size scale (`sm`, `md`, `lg`).
- *
- * @ai-rules
- * 1. Always pair `<RadioGroupItem>` with a sibling `<Label>` using matching `id`/`htmlFor`.
- * 2. NEVER use native `<input type="radio">`.
- * 3. For more than 5 options, use `<Select>` to save vertical space.
- * 4. Use the `size` prop to match surrounding form element sizing.
- */
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <RadioGroupPrimitive.Root className={cn('grid gap-4', className)} {...props} ref={ref} />
-));
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
-    /**
-     * Size variant — matches the form component sizing scale.
-     * - `sm`: 16px circle
-     * - `md`: 20px circle — **default**
-     * - `lg`: 24px circle
-     */
-    size?: 'sm' | 'md' | 'lg';
-  }
->(({ className, size = 'md', ...props }, ref) => {
-  const sizeClasses = {
-    sm: 'size-4',
-    md: 'size-5',
-    lg: 'size-6',
-  };
-  const dotSizeClasses = {
-    sm: 'size-2',
-    md: 'size-2.5',
-    lg: 'size-3',
-  };
-
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      data-slot="radio-group-item"
-      className={cn(
-        // Base styles - Material UI inspired
-        'relative aspect-square shrink-0 rounded-full border-2 transition-all duration-200 outline-none cursor-pointer',
-        // Default state - sempre com contorno usando variáveis CSS
-        'border-muted-foreground bg-background',
-        // Hover state - usa variável primary
-        'hover:border-primary hover:shadow-md',
-        // Focus state - usa variável primary
-        'focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
-        // Checked state - mantém contorno com primary
-        'data-[state=checked]:border-primary data-[state=checked]:bg-background',
-        // Disabled state
-        'disabled:cursor-not-allowed disabled:opacity-50 disabled:border-muted',
-        // Invalid state - usa variável destructive
-        'aria-invalid:border-destructive aria-invalid:ring-destructive/20',
-        sizeClasses[size],
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator
-        data-slot="radio-group-indicator"
-        className="flex items-center justify-center"
-      >
-        <div
-          className={cn(
-            'rounded-full bg-primary transition-all duration-200',
-            dotSizeClasses[size]
-          )}
-        />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export { RadioGroup, RadioGroupItem };
+'use client';
+
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+import { cn } from '../../shared/utils';
+
+/**
+ * Mutually exclusive single-selection radio button group.
+ *
+ * @description
+ * Used for 2–4 visible options where a dropdown would add unnecessary friction.
+ * Built on Radix UI RadioGroup for full keyboard and accessibility support.
+ * RadioGroupItem supports the standard size scale (`sm`, `md`, `lg`).
+ *
+ * @ai-rules
+ * 1. Always pair `<RadioGroupItem>` with a sibling `<Label>` using matching `id`/`htmlFor`.
+ * 2. NEVER use native `<input type="radio">`.
+ * 3. For more than 5 options, use `<Select>` to save vertical space.
+ * 4. Use the `size` prop to match surrounding form element sizing.
+ */
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Root className={cn('grid gap-4', className)} {...props} ref={ref} />
+));
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+    /**
+     * Size variant — matches the form component sizing scale.
+     * - `sm`: 16px circle
+     * - `md`: 20px circle — **default**
+     * - `lg`: 24px circle
+     */
+    size?: 'sm' | 'md' | 'lg';
+  }
+>(({ className, size = 'md', ...props }, ref) => {
+  const sizeClasses = {
+    sm: 'size-4',
+    md: 'size-5',
+    lg: 'size-6',
+  };
+  const dotSizeClasses = {
+    sm: 'size-2',
+    md: 'size-2.5',
+    lg: 'size-3',
+  };
+
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      data-slot="radio-group-item"
+      className={cn(
+        // Base styles - Material UI inspired
+        'relative aspect-square shrink-0 rounded-full border-2 transition-all duration-200 outline-none cursor-pointer',
+        // Default state - sempre com contorno usando variáveis CSS
+        'border-muted-foreground bg-background',
+        // Hover state - usa variável primary
+        'hover:border-primary hover:shadow-md',
+        // Focus state - usa variável primary
+        'focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+        // Checked state - mantém contorno com primary
+        'data-[state=checked]:border-primary data-[state=checked]:bg-background',
+        // Disabled state
+        'disabled:cursor-not-allowed disabled:opacity-50 disabled:border-muted',
+        // Invalid state - usa variável destructive
+        'aria-invalid:border-destructive aria-invalid:ring-destructive/20',
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex items-center justify-center"
+      >
+        <div
+          className={cn(
+            'rounded-full bg-primary transition-all duration-200',
+            dotSizeClasses[size]
+          )}
+        />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/components/ui/rating/index.ts

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