@regardio/react 0.5.7 → 0.7.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): React.JSX.Element => {
+  // 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/if/if.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useMemo } from 'react';
 
 type Condition<Value = unknown> = Value | false | null | undefined | 0 | '';
@@ -10,7 +12,7 @@ export function If<Value = unknown>({
   condition: Condition<Value>;
   children: React.ReactNode | ((value: Value) => React.ReactNode);
   fallback?: React.ReactNode;
-}>) {
+}>): React.JSX.Element | null {
   return useMemo(() => {
     if (condition) {
       if (typeof children === 'function') {

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: Meta<typeof Input> = {
+  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): React.JSX.Element => {
+  return (
+    <BaseUIInput
+      className={input({
+        className,
+        size,
+        variant,
+      })}
+      {...props}
+    />
+  );
+};

package/src/link/link.tsx

@@ -14,7 +14,8 @@ export type PathResolver = (routeKey: string) => string;
 
 const PathResolverContext = createContext<PathResolver | null>(null);
 
-export const PathResolverProvider = PathResolverContext.Provider;
+export const PathResolverProvider: React.Provider<PathResolver | null> =
+  PathResolverContext.Provider;
 
 export function usePathResolver(): PathResolver | null {
   return useContext(PathResolverContext);
@@ -34,7 +35,7 @@ export const LinkBase = ({
   onClick,
   viewTransition = true,
   ...props
-}: LinkBaseProps) => {
+}: LinkBaseProps): React.JSX.Element => {
   const pathResolver = usePathResolver();
 
   let path: string;
@@ -179,7 +180,7 @@ export const Link = ({
   variant,
   viewTransition,
   ...props
-}: LinkProps) => {
+}: LinkProps): React.JSX.Element => {
   return (
     <LinkBase
       {...props}

package/src/list/list-item.tsx

@@ -1,12 +1,6 @@
 'use client';
 
-import {
-  type ComponentPropsWithoutRef,
-  type ElementType,
-  type ForwardedRef,
-  forwardRef,
-  type ReactNode,
-} from 'react';
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 import { useListRootContext } from './list-root-context';
 
 type ListItemElement = 'li' | 'dd' | 'dt' | 'div' | 'span';
@@ -24,15 +18,18 @@ export type ListItemProps<T extends ListItemElement = 'li'> = Omit<
    * The content of the list item.
    */
   children?: ReactNode;
+  /**
+   * Ref to the root element.
+   */
+  ref?: React.Ref<HTMLElement>;
 };
 
 function ListItemImpl<T extends ListItemElement = 'li'>(
   props: ListItemProps<T>,
-  ref: ForwardedRef<HTMLElement>,
-) {
+): React.JSX.Element {
   const context = useListRootContext();
 
-  const { render, children, className, ...elementProps } = props;
+  const { render, children, className, ref, ...elementProps } = props;
 
   const resolvedElement = render ?? context?.defaultItemElement ?? 'li';
   const resolvedClassName = context?.defaultItemClassName
@@ -54,9 +51,9 @@ function ListItemImpl<T extends ListItemElement = 'li'>(
   );
 }
 
-export const ListItem = forwardRef(ListItemImpl) as <T extends ListItemElement = 'li'>(
-  props: ListItemProps<T> & { ref?: ForwardedRef<HTMLElement> },
-) => ReturnType<typeof ListItemImpl>;
+export const ListItem = ListItemImpl as <T extends ListItemElement = 'li'>(
+  props: ListItemProps<T>,
+) => React.JSX.Element;
 
 export namespace ListItem {
   export type Props<T extends ListItemElement = 'li'> = ListItemProps<T>;

package/src/list/list-root-context.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { createContext, useContext } from 'react';
 
 export interface ListRootContextValue {
@@ -14,7 +12,9 @@ export interface ListRootContextValue {
   defaultItemClassName?: string;
 }
 
-export const ListRootContext = createContext<ListRootContextValue | undefined>(undefined);
+export const ListRootContext: React.Context<ListRootContextValue | undefined> = createContext<
+  ListRootContextValue | undefined
+>(undefined);
 
 export function useListRootContext(): ListRootContextValue | undefined {
   return useContext(ListRootContext);