@regardio/react 0.5.5 → 0.6.0

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/link/link.test.tsx

@@ -0,0 +1,169 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { Link, LinkBase, MarkdownLink, PathResolverProvider } from './link';
+
+afterEach(() => {
+  cleanup();
+});
+
+const renderWithRouter = (ui: React.ReactNode) => {
+  return render(<MemoryRouter>{ui}</MemoryRouter>);
+};
+
+describe('LinkBase', () => {
+  it('renders internal link with NavLink', () => {
+    renderWithRouter(<LinkBase to="/about">About</LinkBase>);
+    expect(screen.getByText('About')).toBeDefined();
+  });
+
+  it('renders external http link as anchor', () => {
+    renderWithRouter(<LinkBase to="https://example.com">External</LinkBase>);
+    const link = screen.getByText('External');
+    expect(link.tagName).toBe('A');
+    expect(link.getAttribute('href')).toBe('https://example.com');
+  });
+
+  it('renders mailto link as anchor', () => {
+    renderWithRouter(<LinkBase to="mailto:test@example.com">Email</LinkBase>);
+    const link = screen.getByText('Email');
+    expect(link.tagName).toBe('A');
+    expect(link.getAttribute('href')).toBe('mailto:test@example.com');
+  });
+
+  it('renders tel link as anchor', () => {
+    renderWithRouter(<LinkBase to="tel:+1234567890">Call</LinkBase>);
+    const link = screen.getByText('Call');
+    expect(link.tagName).toBe('A');
+    expect(link.getAttribute('href')).toBe('tel:+1234567890');
+  });
+
+  it('uses pathResolver when routeKey is provided', () => {
+    const resolver = vi.fn().mockReturnValue('/resolved-path');
+    renderWithRouter(
+      <PathResolverProvider value={resolver}>
+        <LinkBase routeKey="home">Home</LinkBase>
+      </PathResolverProvider>,
+    );
+    expect(resolver).toHaveBeenCalledWith('home');
+    expect(screen.getByText('Home')).toBeDefined();
+  });
+
+  it('handles object to prop with pathname, search, and hash', () => {
+    renderWithRouter(
+      <LinkBase to={{ hash: '#section', pathname: '/page', search: '?q=test' }}>Complex</LinkBase>,
+    );
+    expect(screen.getByText('Complex')).toBeDefined();
+  });
+
+  it('renders children only when path is empty', () => {
+    renderWithRouter(<LinkBase>No Link</LinkBase>);
+    expect(screen.getByText('No Link')).toBeDefined();
+  });
+
+  it('calls onClick handler', () => {
+    const handleClick = vi.fn();
+    renderWithRouter(
+      <LinkBase
+        onClick={handleClick}
+        to="/test"
+      >
+        Click Me
+      </LinkBase>,
+    );
+    fireEvent.click(screen.getByText('Click Me'));
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  it('opens external http link in new window', () => {
+    const windowOpen = vi.spyOn(window, 'open').mockImplementation(() => null);
+    renderWithRouter(<LinkBase to="https://example.com">External</LinkBase>);
+    fireEvent.click(screen.getByText('External'));
+    expect(windowOpen).toHaveBeenCalledWith('https://example.com', '_blank', 'noopener,noreferrer');
+    windowOpen.mockRestore();
+  });
+
+  it('scrolls to element for hash links', () => {
+    const scrollIntoView = vi.fn();
+    const element = document.createElement('div');
+    element.id = 'section';
+    element.scrollIntoView = scrollIntoView;
+    document.body.appendChild(element);
+
+    renderWithRouter(<LinkBase to="#section">Jump</LinkBase>);
+    fireEvent.click(screen.getByText('Jump'));
+    expect(scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth' });
+
+    document.body.removeChild(element);
+  });
+
+  it('handles hash link when element not found', () => {
+    renderWithRouter(<LinkBase to="#nonexistent">Jump</LinkBase>);
+    fireEvent.click(screen.getByText('Jump'));
+  });
+
+  it('does not prevent default for tel links', () => {
+    renderWithRouter(<LinkBase to="tel:+1234567890">Call</LinkBase>);
+    const link = screen.getByText('Call');
+    const event = fireEvent.click(link);
+    expect(event).toBe(true);
+  });
+
+  it('respects defaultPrevented in onClick', () => {
+    const handleClick = vi.fn((e: React.MouseEvent) => e.preventDefault());
+    const windowOpen = vi.spyOn(window, 'open').mockImplementation(() => null);
+
+    renderWithRouter(
+      <LinkBase
+        onClick={handleClick}
+        to="https://example.com"
+      >
+        External
+      </LinkBase>,
+    );
+    fireEvent.click(screen.getByText('External'));
+    expect(handleClick).toHaveBeenCalled();
+    expect(windowOpen).not.toHaveBeenCalled();
+
+    windowOpen.mockRestore();
+  });
+});
+
+describe('Link', () => {
+  it('renders with variant', () => {
+    renderWithRouter(
+      <Link
+        to="/test"
+        variant="button"
+      >
+        Button Link
+      </Link>,
+    );
+    expect(screen.getByText('Button Link')).toBeDefined();
+  });
+
+  it('renders with arrow', () => {
+    renderWithRouter(
+      <Link
+        arrow="rarr"
+        to="/test"
+      >
+        Arrow Link
+      </Link>,
+    );
+    expect(screen.getByText('Arrow Link')).toBeDefined();
+  });
+});
+
+describe('MarkdownLink', () => {
+  it('renders Link when href is provided', () => {
+    renderWithRouter(<MarkdownLink href="/page">Markdown</MarkdownLink>);
+    expect(screen.getByText('Markdown')).toBeDefined();
+  });
+
+  it('returns null when href is not provided', () => {
+    const { container } = renderWithRouter(<MarkdownLink>No Link</MarkdownLink>);
+    expect(container.innerHTML).toBe('');
+  });
+});

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>
   );
 };

package/src/radio/index.ts

@@ -0,0 +1,2 @@
+export type { RadioIndicatorProps, RadioRootProps, RadioSize } from './radio';
+export { Radio, RadioIndicator, RadioRoot } from './radio';

package/src/radio/radio.tsx

@@ -0,0 +1,92 @@
+import { Radio as BaseUIRadio } from '@base-ui/react/radio';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const radioRoot = tv({
+  base: [
+    'h-4',
+    'w-4',
+    'rounded-full',
+    'border',
+    'border-gray-300',
+    'bg-white',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-blue-500',
+    'focus:ring-offset-2',
+    'disabled:cursor-not-allowed',
+    'disabled:opacity-50',
+    'data-[checked]:bg-blue-600',
+    'data-[checked]:border-blue-600',
+    'transition-colors',
+    'duration-200',
+    'cursor-pointer',
+  ],
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      lg: ['h-5', 'w-5'],
+      md: ['h-4', 'w-4'],
+      sm: ['h-3', 'w-3'],
+    },
+  },
+});
+
+const radioIndicator = tv({
+  base: ['flex', 'items-center', 'justify-center', 'text-white', 'data-[unchecked]:invisible'],
+});
+
+export type RadioSize = 'sm' | 'md' | 'lg';
+
+export interface RadioRootProps extends Omit<ComponentProps<typeof BaseUIRadio.Root>, 'className'> {
+  className?: string;
+  size?: RadioSize;
+}
+
+export interface RadioIndicatorProps
+  extends Omit<ComponentProps<typeof BaseUIRadio.Indicator>, 'className'> {
+  className?: string;
+}
+
+export const RadioRoot = ({ className, size = 'md', ...props }: RadioRootProps) => {
+  return (
+    <BaseUIRadio.Root
+      className={radioRoot({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const RadioIndicator = ({ className, children, ...props }: RadioIndicatorProps) => {
+  return (
+    <BaseUIRadio.Indicator
+      className={radioIndicator({ className })}
+      {...props}
+    >
+      {children || (
+        <svg
+          fill="currentColor"
+          height="8"
+          viewBox="0 0 8 8"
+          width="8"
+        >
+          <circle
+            cx="4"
+            cy="4"
+            r="3"
+          />
+        </svg>
+      )}
+    </BaseUIRadio.Indicator>
+  );
+};
+
+export const Radio = {
+  Indicator: RadioIndicator,
+  Root: RadioRoot,
+};

package/src/radio-group/index.ts

@@ -0,0 +1,2 @@
+export type { RadioGroupOrientation, RadioGroupProps } from './radio-group';
+export { RadioGroup } from './radio-group';

package/src/radio-group/radio-group.tsx

@@ -0,0 +1,36 @@
+import { RadioGroup as BaseUIRadioGroup } from '@base-ui/react/radio-group';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const radioGroup = tv({
+  base: ['flex', 'flex-col', 'gap-2'],
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+  variants: {
+    orientation: {
+      horizontal: ['flex-row', 'gap-4'],
+      vertical: ['flex-col', 'gap-2'],
+    },
+  },
+});
+
+export type RadioGroupOrientation = 'horizontal' | 'vertical';
+
+export interface RadioGroupProps
+  extends Omit<ComponentProps<typeof BaseUIRadioGroup>, 'className'> {
+  className?: string;
+  orientation?: RadioGroupOrientation;
+}
+
+export const RadioGroup = ({ className, orientation = 'vertical', ...props }: RadioGroupProps) => {
+  return (
+    <BaseUIRadioGroup
+      className={radioGroup({
+        className,
+        orientation,
+      })}
+      {...props}
+    />
+  );
+};

package/src/slider/index.ts

@@ -0,0 +1,18 @@
+export type {
+  SliderControlProps,
+  SliderIndicatorProps,
+  SliderRootProps,
+  SliderSize,
+  SliderThumbProps,
+  SliderTrackProps,
+  SliderValueProps,
+} from './slider';
+export {
+  Slider,
+  SliderControl,
+  SliderIndicator,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  SliderValue,
+} from './slider';