@regardio/react 0.5.7 → 0.6.0

package/src/icon-button/icon-button.test.tsx

@@ -0,0 +1,152 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { IconButton } from './icon-button';
+
+const TestIcon = () => (
+  <svg
+    data-testid="test-icon"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+    />
+  </svg>
+);
+
+describe('IconButton', () => {
+  it('renders with icon', () => {
+    render(
+      <IconButton
+        icon={<TestIcon />}
+        title="Test"
+      />,
+    );
+    expect(screen.getByTestId('test-icon')).toBeInTheDocument();
+  });
+
+  it('applies size variants', () => {
+    render(
+      <IconButton
+        data-testid="size-button"
+        icon={<TestIcon />}
+        size="lg"
+        title="Test"
+      />,
+    );
+    const button = screen.getByTestId('size-button');
+    expect(button).toHaveClass('p-3');
+  });
+
+  it('applies variant styles from Button', () => {
+    render(
+      <IconButton
+        data-testid="variant-button"
+        icon={<TestIcon />}
+        title="Test"
+        variant="secondary"
+      />,
+    );
+    const button = screen.getByTestId('variant-button');
+    expect(button).toHaveClass('bg-gray-100');
+  });
+
+  it('uses title as aria-label when provided', () => {
+    render(
+      <IconButton
+        icon={<TestIcon />}
+        title="Add item"
+      />,
+    );
+    const button = screen.getByRole('button', { name: 'Add item' });
+    expect(button).toHaveAttribute('aria-label', 'Add item');
+  });
+
+  it('uses aria-label when provided', () => {
+    render(
+      <IconButton
+        aria-label="Custom label"
+        icon={<TestIcon />}
+      />,
+    );
+    const button = screen.getByRole('button', { name: 'Custom label' });
+    expect(button).toHaveAttribute('aria-label', 'Custom label');
+  });
+
+  it('prioritizes aria-label over title', () => {
+    render(
+      <IconButton
+        aria-label="Custom label"
+        data-testid="priority-button"
+        icon={<TestIcon />}
+        title="Add item"
+      />,
+    );
+    const button = screen.getByTestId('priority-button');
+    expect(button).toHaveAttribute('aria-label', 'Custom label');
+  });
+
+  it('handles disabled state', () => {
+    render(
+      <IconButton
+        data-testid="disabled-button"
+        disabled
+        icon={<TestIcon />}
+        title="Test"
+      />,
+    );
+    const button = screen.getByTestId('disabled-button');
+    expect(button).toBeDisabled();
+  });
+
+  it('passes through other props', () => {
+    render(
+      <IconButton
+        data-testid="custom-button"
+        icon={<TestIcon />}
+        title="Test"
+      />,
+    );
+    expect(screen.getByTestId('custom-button')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    render(
+      <IconButton
+        className="custom-class"
+        data-testid="custom-class-button"
+        icon={<TestIcon />}
+        title="Test"
+      />,
+    );
+    const button = screen.getByTestId('custom-class-button');
+    expect(button).toHaveClass('custom-class');
+  });
+
+  it('centers icon properly', () => {
+    render(
+      <IconButton
+        data-testid="center-button"
+        icon={<TestIcon />}
+        title="Test"
+      />,
+    );
+    const button = screen.getByTestId('center-button');
+    expect(button).toHaveClass('flex', 'items-center', 'justify-center');
+  });
+
+  it('sets title attribute', () => {
+    render(
+      <IconButton
+        data-testid="title-button"
+        icon={<TestIcon />}
+        title="Tooltip text"
+      />,
+    );
+    const button = screen.getByTestId('title-button');
+    expect(button).toHaveAttribute('title', 'Tooltip text');
+  });
+});

package/src/icon-button/icon-button.tsx

@@ -1,20 +1,54 @@
+import { tv } from '@regardio/tailwind/utils';
 import type { ComponentProps, ReactNode } from 'react';
+import { Button } from '../button';
 
-export interface IconButtonProps extends ComponentProps<'button'> {
+const iconButtonVariants = {
+  default: ['p-2'],
+  lg: ['p-3'],
+  md: ['p-2'],
+  sm: ['p-1'],
+} as const;
+
+const iconButton = tv({
+  base: ['flex', 'items-center', 'justify-center'],
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: iconButtonVariants,
+  },
+});
+
+export type IconButtonSize = keyof typeof iconButtonVariants;
+
+export interface IconButtonProps extends Omit<ComponentProps<typeof Button>, 'size'> {
   icon: ReactNode;
+  size?: IconButtonSize;
+  title?: string;
+  'aria-label'?: string;
+  children?: never; // Prevent children, only icon allowed
 }
 
-export const IconButton = (props: IconButtonProps) => {
-  const { className, icon } = props;
-
-  const defaultClassName = 'p-0';
+export const IconButton = ({
+  icon,
+  size = 'md',
+  title,
+  'aria-label': ariaLabel,
+  className,
+  ...props
+}: IconButtonProps) => {
+  // Use title for both title and aria-label if aria-label not provided
+  const finalAriaLabel = ariaLabel || title;
+  const finalTitle = title || ariaLabel;
 
   return (
-    <button
-      className={className ? className : defaultClassName}
-      type={'button'}
+    <Button
+      aria-label={finalAriaLabel}
+      className={iconButton({ className, size })}
+      title={finalTitle}
+      {...props}
     >
       {icon}
-    </button>
+    </Button>
   );
 };

package/src/input/index.ts

@@ -0,0 +1,2 @@
+export type { InputProps, InputSize, InputVariant } from './input';
+export { Input } from './input';

package/src/input/input.stories.tsx

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Input } from './input';
+
+const meta = {
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the input',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Input placeholder',
+    },
+    size: {
+      control: 'select',
+      description: 'Input size',
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: 'select',
+      description: 'Input variant',
+      options: ['default', 'error', 'success'],
+    },
+  },
+  component: Input,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Input',
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    placeholder: 'Error state',
+    variant: 'error',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    placeholder: 'Success state',
+    variant: 'success',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    placeholder: 'Small input',
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    placeholder: 'Large input',
+    size: 'lg',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: 'Disabled input',
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    defaultValue: 'Default value',
+  },
+};
+
+export const EmailInput: Story = {
+  args: {
+    placeholder: 'Enter your email',
+    type: 'email',
+  },
+};
+
+export const PasswordInput: Story = {
+  args: {
+    placeholder: 'Enter your password',
+    type: 'password',
+  },
+};
+
+export const NumberInput: Story = {
+  args: {
+    placeholder: 'Enter a number',
+    type: 'number',
+  },
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    className: 'shadow-lg border-blue-300',
+    placeholder: 'Custom styled input',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-4 w-64">
+      <Input placeholder="Default input" />
+      <Input
+        placeholder="Error input"
+        variant="error"
+      />
+      <Input
+        placeholder="Success input"
+        variant="success"
+      />
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="space-y-4 w-64">
+      <Input
+        placeholder="Small input"
+        size="sm"
+      />
+      <Input
+        placeholder="Medium input"
+        size="md"
+      />
+      <Input
+        placeholder="Large input"
+        size="lg"
+      />
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  args: {
+    onValueChange: (value: string) => console.log('Input changed:', value),
+    placeholder: 'Type something...',
+  },
+};

package/src/input/input.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Input } from './input';
+
+describe('Input', () => {
+  it('renders input with default props', () => {
+    render(<Input placeholder="Test input" />);
+    expect(screen.getByPlaceholderText('Test input')).toBeInTheDocument();
+  });
+
+  it('applies variant styles', () => {
+    render(
+      <Input
+        placeholder="Error input"
+        variant="error"
+      />,
+    );
+    expect(screen.getByPlaceholderText('Error input')).toHaveClass('border-red-300');
+  });
+
+  it('applies size styles', () => {
+    render(
+      <Input
+        placeholder="Large input"
+        size="lg"
+      />,
+    );
+    expect(screen.getByPlaceholderText('Large input')).toHaveClass('px-4', 'py-3', 'text-lg');
+  });
+
+  it('applies custom className', () => {
+    render(
+      <Input
+        className="custom-input"
+        placeholder="Custom input"
+      />,
+    );
+    expect(screen.getByPlaceholderText('Custom input')).toHaveClass('custom-input');
+  });
+
+  it('passes through other props', () => {
+    render(
+      <Input
+        data-testid="test-input"
+        name="test"
+      />,
+    );
+    expect(screen.getByTestId('test-input')).toHaveAttribute('name', 'test');
+  });
+
+  it('handles disabled state', () => {
+    render(
+      <Input
+        disabled
+        placeholder="Disabled input"
+      />,
+    );
+    expect(screen.getByPlaceholderText('Disabled input')).toBeDisabled();
+  });
+
+  it('handles value changes', () => {
+    render(<Input defaultValue="test value" />);
+    expect(screen.getByDisplayValue('test value')).toBeInTheDocument();
+  });
+});

package/src/input/input.tsx

@@ -0,0 +1,113 @@
+import { Input as BaseUIInput } from '@base-ui/react/input';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const inputVariants = {
+  default: [
+    'w-full',
+    'px-3',
+    'py-2',
+    'border',
+    'border-gray-300',
+    'rounded-md',
+    'bg-white',
+    'text-gray-900',
+    'placeholder-gray-500',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-blue-500',
+    'focus:border-blue-500',
+    'transition-colors',
+    'duration-200',
+  ],
+  error: [
+    'border-red-300',
+    'text-red-900',
+    'placeholder-red-500',
+    'focus:ring-red-500',
+    'focus:border-red-500',
+  ],
+  success: [
+    'border-green-300',
+    'text-green-900',
+    'placeholder-green-500',
+    'focus:ring-green-500',
+    'focus:border-green-500',
+  ],
+} as const;
+
+const inputSizes = {
+  lg: ['px-4', 'py-3', 'text-lg'],
+  md: ['px-3', 'py-2', 'text-base'],
+  sm: ['px-2', 'py-1', 'text-sm'],
+} as const;
+
+const input = tv({
+  base: [
+    'w-full',
+    'px-3',
+    'py-2',
+    'border',
+    'border-gray-300',
+    'rounded-md',
+    'bg-white',
+    'text-gray-900',
+    'placeholder-gray-500',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-blue-500',
+    'focus:border-blue-500',
+    'transition-colors',
+    'duration-200',
+  ],
+  defaultVariants: {
+    size: 'md',
+    variant: 'default',
+  },
+  variants: {
+    size: {
+      lg: ['px-4', 'py-3', 'text-lg'],
+      md: [],
+      sm: ['px-2', 'py-1', 'text-sm'],
+    },
+    variant: {
+      default: [],
+      error: [
+        'border-red-300',
+        'text-red-900',
+        'placeholder-red-500',
+        'focus:ring-red-500',
+        'focus:border-red-500',
+      ],
+      success: [
+        'border-green-300',
+        'text-green-900',
+        'placeholder-green-500',
+        'focus:ring-green-500',
+        'focus:border-green-500',
+      ],
+    },
+  },
+});
+
+export type InputVariant = keyof typeof inputVariants;
+export type InputSize = keyof typeof inputSizes;
+
+export interface InputProps extends Omit<ComponentProps<typeof BaseUIInput>, 'className' | 'size'> {
+  className?: string;
+  variant?: InputVariant;
+  size?: InputSize;
+}
+
+export const Input = ({ className, variant, size, ...props }: InputProps) => {
+  return (
+    <BaseUIInput
+      className={input({
+        className,
+        size,
+        variant,
+      })}
+      {...props}
+    />
+  );
+};

package/src/password-input/index.ts

@@ -1,2 +1,2 @@
-export type { InputProps, PasswordInputProps } from './password-input';
+export type { PasswordInputProps } from './password-input';
 export { PasswordInput } from './password-input';

package/src/password-input/password-input.tsx

@@ -1,17 +1,66 @@
 'use client';
 
-import { Button } from '@base-ui/react/button';
-import { Input } from '@base-ui/react/input';
-import { cn } from '@regardio/tailwind/utils';
+import { tv } from '@regardio/tailwind/utils';
 import { useState } from 'react';
+import { Button } from '../button';
+import { Input } from '../input';
 
-export interface InputProps extends React.ComponentPropsWithoutRef<typeof Input> {}
+const passwordInputVariants = {
+  default: [],
+  withToggle: [],
+} as const;
 
-export interface PasswordInputProps extends InputProps {
+const passwordInput = tv({
+  base: ['relative'],
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: passwordInputVariants,
+  },
+});
+
+const toggleButton = tv({
+  base: [
+    'absolute',
+    'right-3',
+    'top-1/2',
+    '-translate-y-1/2',
+    'flex',
+    'h-5',
+    'w-5',
+    'cursor-pointer',
+    'items-center',
+    'justify-center',
+    'text-gray-500',
+    'hover:text-gray-700',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-blue-500',
+    'focus:ring-offset-2',
+    'rounded',
+    'transition-colors',
+    'duration-200',
+  ],
+});
+
+export type PasswordInputVariant = keyof typeof passwordInputVariants;
+
+export interface PasswordInputProps
+  extends Omit<React.ComponentProps<typeof Input>, 'type' | 'variant'> {
   className?: string;
+  variant?: PasswordInputVariant;
+  inputVariant?: 'default' | 'error' | 'success';
+  showToggle?: boolean;
 }
 
-export const PasswordInput = ({ className, ...props }: PasswordInputProps) => {
+export const PasswordInput = ({
+  className,
+  variant = 'default',
+  inputVariant = 'default',
+  showToggle = true,
+  ...props
+}: PasswordInputProps) => {
   const [showPassword, setShowPassword] = useState(false);
 
   const togglePasswordVisibility = () => {
@@ -19,31 +68,59 @@ export const PasswordInput = ({ className, ...props }: PasswordInputProps) => {
   };
 
   return (
-    <div className={'relative'}>
+    <div className={passwordInput({ className, variant })}>
       <Input
-        autoComplete={'off'}
-        className={cn(className)}
+        autoComplete="off"
+        className={showToggle ? 'pr-10' : ''}
         type={showPassword ? 'text' : 'password'}
+        variant={inputVariant}
         {...props}
       />
-      <Button
-        className={cn(
-          'absolute',
-          'right-[14px]',
-          'top-[35px]',
-          'flex',
-          'h-6',
-          'w-[20px]',
-          'cursor-pointer',
-          'flex-col',
-          'items-end',
-          'justify-center',
-          'text-gray-500',
-        )}
-        onClick={togglePasswordVisibility}
-      >
-        {showPassword ? 'Off' : 'On'}
-      </Button>
+      {showToggle && (
+        <Button
+          aria-label={showPassword ? 'Hide password' : 'Show password'}
+          className={toggleButton()}
+          onClick={togglePasswordVisibility}
+          size="sm"
+          variant="ghost"
+        >
+          {showPassword ? (
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+            </svg>
+          ) : (
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+              <path
+                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+            </svg>
+          )}
+        </Button>
+      )}
     </div>
   );
 };