xertica-ui 2.2.1 → 2.4.0

package/components/ui/input/index.ts

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

package/components/ui/input/input.stories.tsx

@@ -1,153 +1,153 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from 'storybook/test';
-import { Input } from './input';
-import { Search, Mail, Lock } from 'lucide-react';
-import React from 'react';
-import { Label } from '../label';
-
-const meta: Meta<typeof Input> = {
-  title: 'UI/Input',
-  component: Input,
-  render: args => <Input {...args} />,
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size variant — matches the form sizing scale.',
-    },
-    disabled: {
-      control: 'boolean',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Standard Input',
-  },
-};
-
-export const Email: Story = {
-  args: {
-    type: 'email',
-    placeholder: 'you@example.com',
-  },
-};
-
-export const Password: Story = {
-  args: {
-    type: 'password',
-    placeholder: '••••••••',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    placeholder: 'Disabled Input',
-    value: 'Content is fixed',
-  },
-};
-
-export const WithLabel: Story = {
-  render: args => (
-    <div className="grid w-full max-w-sm items-center gap-1.5">
-      <Label htmlFor="email" size={args.size}>
-        Email
-      </Label>
-      <Input {...args} id="email" type="email" placeholder="Email" />
-    </div>
-  ),
-};
-
-export const WithHelperText: Story = {
-  render: args => (
-    <div className="grid w-full max-w-sm gap-1.5">
-      <Label htmlFor="helper-input" size={args.size}>
-        Email
-      </Label>
-      <Input {...args} id="helper-input" type="email" placeholder="you@example.com" />
-      <p className="text-muted-foreground text-sm">We'll never share your email with anyone.</p>
-    </div>
-  ),
-};
-
-export const WithSearchIcon: Story = {
-  render: args => {
-    const iconSizeClasses = {
-      sm: 'left-2.5 top-2 size-3.5',
-      md: 'left-2.5 top-3 size-4',
-      lg: 'left-3 top-4 size-5',
-    };
-    const paddingClasses = {
-      sm: 'pl-8',
-      md: 'pl-9',
-      lg: 'pl-11',
-    };
-
-    return (
-      <div className="relative w-full max-w-sm">
-        <Search
-          className={`absolute text-muted-foreground ${iconSizeClasses[args.size || 'md']}`}
-        />
-        <Input
-          {...args}
-          className={paddingClasses[args.size || 'md']}
-          placeholder="Search components..."
-        />
-      </div>
-    );
-  },
-};
-
-/**
- * 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>
-        <Input size="sm" placeholder="Small input" />
-      </div>
-      <div className="grid gap-1.5">
-        <Label size="md">Medium (md — default)</Label>
-        <Input size="md" placeholder="Medium input" />
-      </div>
-      <div className="grid gap-1.5">
-        <Label size="lg">Large (lg)</Label>
-        <Input size="lg" placeholder="Large input" />
-      </div>
-    </div>
-  ),
-};
-
-export const Typing: Story = {
-  args: { placeholder: 'Type here...' },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByRole('textbox');
-    await userEvent.click(input);
-    await expect(input).toHaveFocus();
-    await userEvent.type(input, 'Hello Xertica');
-    await expect(input).toHaveValue('Hello Xertica');
-    await userEvent.clear(input);
-    await expect(input).toHaveValue('');
-  },
-};
-
-export const DisabledInteraction: Story = {
-  args: { disabled: true, placeholder: 'Cannot type here' },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByRole('textbox');
-    await expect(input).toBeDisabled();
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from 'storybook/test';
+import { Input } from './input';
+import { Search, Mail, Lock } from 'lucide-react';
+import React from 'react';
+import { Label } from '../label';
+
+const meta: Meta<typeof Input> = {
+  title: 'UI/Input',
+  component: Input,
+  render: args => <Input {...args} />,
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant — matches the form sizing scale.',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Standard Input',
+  },
+};
+
+export const Email: Story = {
+  args: {
+    type: 'email',
+    placeholder: 'you@example.com',
+  },
+};
+
+export const Password: Story = {
+  args: {
+    type: 'password',
+    placeholder: '••••••••',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: 'Disabled Input',
+    value: 'Content is fixed',
+  },
+};
+
+export const WithLabel: Story = {
+  render: args => (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="email" size={args.size}>
+        Email
+      </Label>
+      <Input {...args} id="email" type="email" placeholder="Email" />
+    </div>
+  ),
+};
+
+export const WithHelperText: Story = {
+  render: args => (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label htmlFor="helper-input" size={args.size}>
+        Email
+      </Label>
+      <Input {...args} id="helper-input" type="email" placeholder="you@example.com" />
+      <p className="text-muted-foreground text-sm">We'll never share your email with anyone.</p>
+    </div>
+  ),
+};
+
+export const WithSearchIcon: Story = {
+  render: args => {
+    const iconSizeClasses = {
+      sm: 'left-2.5 top-2 size-3.5',
+      md: 'left-2.5 top-3 size-4',
+      lg: 'left-3 top-4 size-5',
+    };
+    const paddingClasses = {
+      sm: 'pl-8',
+      md: 'pl-9',
+      lg: 'pl-11',
+    };
+
+    return (
+      <div className="relative w-full max-w-sm">
+        <Search
+          className={`absolute text-muted-foreground ${iconSizeClasses[args.size || 'md']}`}
+        />
+        <Input
+          {...args}
+          className={paddingClasses[args.size || 'md']}
+          placeholder="Search components..."
+        />
+      </div>
+    );
+  },
+};
+
+/**
+ * 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>
+        <Input size="sm" placeholder="Small input" />
+      </div>
+      <div className="grid gap-1.5">
+        <Label size="md">Medium (md — default)</Label>
+        <Input size="md" placeholder="Medium input" />
+      </div>
+      <div className="grid gap-1.5">
+        <Label size="lg">Large (lg)</Label>
+        <Input size="lg" placeholder="Large input" />
+      </div>
+    </div>
+  ),
+};
+
+export const Typing: Story = {
+  args: { placeholder: 'Type here...' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole('textbox');
+    await userEvent.click(input);
+    await expect(input).toHaveFocus();
+    await userEvent.type(input, 'Hello Xertica');
+    await expect(input).toHaveValue('Hello Xertica');
+    await userEvent.clear(input);
+    await expect(input).toHaveValue('');
+  },
+};
+
+export const DisabledInteraction: Story = {
+  args: { disabled: true, placeholder: 'Cannot type here' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole('textbox');
+    await expect(input).toBeDisabled();
+  },
+};

package/components/ui/input/input.test.tsx

@@ -1,47 +1,47 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { Input } from './input';
-import React from 'react';
-
-describe('Input', () => {
-  it('renders correctly with default props', () => {
-    render(<Input placeholder="Enter text" />);
-    const input = screen.getByPlaceholderText('Enter text');
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveClass('h-10'); // md size
-  });
-
-  it('renders correctly with different sizes', () => {
-    const { rerender } = render(<Input size="sm" placeholder="Small" />);
-    expect(screen.getByPlaceholderText('Small')).toHaveClass('h-8');
-
-    rerender(<Input size="lg" placeholder="Large" />);
-    expect(screen.getByPlaceholderText('Large')).toHaveClass('h-12');
-  });
-
-  it('handles value changes', () => {
-    const handleChange = vi.fn();
-    render(<Input onChange={handleChange} placeholder="Type here" />);
-    const input = screen.getByPlaceholderText('Type here');
-    fireEvent.change(input, { target: { value: 'Hello' } });
-    expect(handleChange).toHaveBeenCalledTimes(1);
-    expect((input as HTMLInputElement).value).toBe('Hello');
-  });
-
-  it('is disabled when disabled prop is true', () => {
-    render(<Input disabled placeholder="Disabled" />);
-    const input = screen.getByPlaceholderText('Disabled');
-    expect(input).toBeDisabled();
-    expect(input).toHaveClass('disabled:opacity-50');
-  });
-
-  it('renders with custom className', () => {
-    render(<Input className="custom-class" placeholder="Custom" />);
-    expect(screen.getByPlaceholderText('Custom')).toHaveClass('custom-class');
-  });
-
-  it('renders with correct type', () => {
-    render(<Input type="password" placeholder="Password" />);
-    expect(screen.getByPlaceholderText('Password')).toHaveAttribute('type', 'password');
-  });
-});
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Input } from './input';
+import React from 'react';
+
+describe('Input', () => {
+  it('renders correctly with default props', () => {
+    render(<Input placeholder="Enter text" />);
+    const input = screen.getByPlaceholderText('Enter text');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveClass('h-10'); // md size
+  });
+
+  it('renders correctly with different sizes', () => {
+    const { rerender } = render(<Input size="sm" placeholder="Small" />);
+    expect(screen.getByPlaceholderText('Small')).toHaveClass('h-8');
+
+    rerender(<Input size="lg" placeholder="Large" />);
+    expect(screen.getByPlaceholderText('Large')).toHaveClass('h-12');
+  });
+
+  it('handles value changes', () => {
+    const handleChange = vi.fn();
+    render(<Input onChange={handleChange} placeholder="Type here" />);
+    const input = screen.getByPlaceholderText('Type here');
+    fireEvent.change(input, { target: { value: 'Hello' } });
+    expect(handleChange).toHaveBeenCalledTimes(1);
+    expect((input as HTMLInputElement).value).toBe('Hello');
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<Input disabled placeholder="Disabled" />);
+    const input = screen.getByPlaceholderText('Disabled');
+    expect(input).toBeDisabled();
+    expect(input).toHaveClass('disabled:opacity-50');
+  });
+
+  it('renders with custom className', () => {
+    render(<Input className="custom-class" placeholder="Custom" />);
+    expect(screen.getByPlaceholderText('Custom')).toHaveClass('custom-class');
+  });
+
+  it('renders with correct type', () => {
+    render(<Input type="password" placeholder="Password" />);
+    expect(screen.getByPlaceholderText('Password')).toHaveAttribute('type', 'password');
+  });
+});

package/components/ui/input/input.tsx

@@ -1,57 +1,57 @@
-import * as React from 'react';
-
-import { cn } from '../../shared/utils';
-
-/**
- * Props para o componente Input.
- *
- * @interface InputProps
- */
-export interface InputProps extends Omit<React.ComponentProps<'input'>, 'size'> {
-  /** Define o tamanho vertical e padding do input. */
-  size?: 'sm' | 'md' | 'lg';
-}
-
-/**
- * Single-line text input field.
- *
- * @description
- * Used to capture short text, passwords, emails, and numbers. Should be
- * used inside a `<FormField>` in applications that manage form state.
- * Supports 3 sizes: `sm`, `md` (default), `lg`.
- *
- * @ai-rules
- * 1. NEVER use a native `<input>` element.
- * 2. For large multi-line text (description, biography), use `<Textarea>` — never `<Input>`.
- * 3. Inside React Hook Form, connect via `<FormControl>` wrapping `<Input {...field} />`.
- */
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, size = 'md', ...props }, ref) => {
-    const sizeClasses = {
-      sm: 'h-8 px-2 py-1 text-sm',
-      md: 'h-10 px-3 py-2 text-base',
-      lg: 'h-12 px-4 py-3 text-base',
-    };
-
-    return (
-      <input
-        type={type}
-        data-slot="input"
-        className={cn(
-          'flex w-full min-w-0 bg-background rounded-[var(--radius)] border border-border transition-colors outline-none text-foreground',
-          'placeholder:text-muted-foreground',
-          'focus:ring-2 focus:ring-primary focus:border-transparent',
-          'disabled:cursor-not-allowed disabled:opacity-50',
-          'file:border-0 file:bg-transparent file:text-sm file:font-medium',
-          sizeClasses[size],
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Input.displayName = 'Input';
-
-export { Input };
+import * as React from 'react';
+
+import { cn } from '../../shared/utils';
+
+/**
+ * Props para o componente Input.
+ *
+ * @interface InputProps
+ */
+export interface InputProps extends Omit<React.ComponentProps<'input'>, 'size'> {
+  /** Define o tamanho vertical e padding do input. */
+  size?: 'sm' | 'md' | 'lg';
+}
+
+/**
+ * Single-line text input field.
+ *
+ * @description
+ * Used to capture short text, passwords, emails, and numbers. Should be
+ * used inside a `<FormField>` in applications that manage form state.
+ * Supports 3 sizes: `sm`, `md` (default), `lg`.
+ *
+ * @ai-rules
+ * 1. NEVER use a native `<input>` element.
+ * 2. For large multi-line text (description, biography), use `<Textarea>` — never `<Input>`.
+ * 3. Inside React Hook Form, connect via `<FormControl>` wrapping `<Input {...field} />`.
+ */
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, size = 'md', ...props }, ref) => {
+    const sizeClasses = {
+      sm: 'h-8 px-2 py-1 text-sm',
+      md: 'h-10 px-3 py-2 text-base',
+      lg: 'h-12 px-4 py-3 text-base',
+    };
+
+    return (
+      <input
+        type={type}
+        data-slot="input"
+        className={cn(
+          'flex w-full min-w-0 bg-background rounded-[var(--radius)] border border-border transition-colors outline-none text-foreground',
+          'placeholder:text-muted-foreground',
+          'focus:ring-2 focus:ring-primary focus:border-transparent',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          'file:border-0 file:bg-transparent file:text-sm file:font-medium',
+          sizeClasses[size],
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };

package/components/ui/input-otp/index.ts

@@ -1 +1 @@
-export * from './input-otp';
+export * from './input-otp';