@regardio/react 0.5.7 → 0.7.0

package/src/switch/switch.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Field } from '../field';
+import { Switch } from './switch';
+
+const meta: Meta<typeof Switch.Root> = {
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the switch',
+    },
+    size: {
+      control: 'select',
+      description: 'Switch size',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+  component: Switch.Root,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Switch',
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Switch.Root>
+      <Switch.Thumb />
+    </Switch.Root>
+  ),
+};
+
+export const Checked: Story = {
+  render: () => (
+    <Switch.Root defaultChecked>
+      <Switch.Thumb />
+    </Switch.Root>
+  ),
+};
+
+export const Small: Story = {
+  render: () => (
+    <Switch.Root size="sm">
+      <Switch.Thumb size="sm" />
+    </Switch.Root>
+  ),
+};
+
+export const Large: Story = {
+  render: () => (
+    <Switch.Root size="lg">
+      <Switch.Thumb size="lg" />
+    </Switch.Root>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Switch.Root disabled>
+      <Switch.Thumb />
+    </Switch.Root>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <Field.Root>
+      <Field.Label>
+        <Switch.Root>
+          <Switch.Thumb />
+        </Switch.Root>
+        Enable notifications
+      </Field.Label>
+    </Field.Root>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <div className="space-y-4">
+        <Field.Root>
+          <Field.Label>
+            <Switch.Root
+              checked={checked}
+              onCheckedChange={setChecked}
+            >
+              <Switch.Thumb />
+            </Switch.Root>
+            Dark mode
+          </Field.Label>
+        </Field.Root>
+        <p className="text-sm text-gray-600">Mode: {checked ? 'Dark' : 'Light'}</p>
+      </div>
+    );
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Switch.Root size="sm">
+        <Switch.Thumb size="sm" />
+      </Switch.Root>
+      <Switch.Root size="md">
+        <Switch.Thumb size="md" />
+      </Switch.Root>
+      <Switch.Root size="lg">
+        <Switch.Thumb size="lg" />
+      </Switch.Root>
+    </div>
+  ),
+};

package/src/switch/switch.tsx

@@ -0,0 +1,112 @@
+import { Switch as BaseUISwitch } from '@base-ui/react/switch';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const switchRoot = tv({
+  base: [
+    'relative',
+    'inline-flex',
+    'items-center',
+    'rounded-full',
+    'transition-colors',
+    'duration-200',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-blue-500',
+    'focus:ring-offset-2',
+    'disabled:cursor-not-allowed',
+    'disabled:opacity-50',
+    'cursor-pointer',
+    'bg-gray-300',
+    'data-[checked]:bg-blue-600',
+  ],
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      lg: ['h-8', 'w-14'],
+      md: ['h-6', 'w-11'],
+      sm: ['h-4', 'w-7'],
+    },
+  },
+});
+
+const switchThumb = tv({
+  base: [
+    'pointer-events-none',
+    'inline-block',
+    'rounded-full',
+    'bg-white',
+    'shadow-lg',
+    'ring-0',
+    'transition-transform',
+    'duration-200',
+    'translate-x-0',
+    'data-[checked]:translate-x-full',
+  ],
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      lg: ['h-6', 'w-6', 'data-[checked]:translate-x-6'],
+      md: ['h-5', 'w-5', 'data-[checked]:translate-x-5'],
+      sm: ['h-3', 'w-3', 'data-[checked]:translate-x-3'],
+    },
+  },
+});
+
+export type SwitchSize = 'sm' | 'md' | 'lg';
+
+export interface SwitchRootProps
+  extends Omit<ComponentProps<typeof BaseUISwitch.Root>, 'className'> {
+  className?: string;
+  size?: SwitchSize;
+}
+
+export interface SwitchThumbProps
+  extends Omit<ComponentProps<typeof BaseUISwitch.Thumb>, 'className'> {
+  className?: string;
+  size?: SwitchSize;
+}
+
+export const SwitchRoot = ({
+  className,
+  size = 'md',
+  ...props
+}: SwitchRootProps): React.JSX.Element => {
+  return (
+    <BaseUISwitch.Root
+      className={switchRoot({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const SwitchThumb = ({
+  className,
+  size = 'md',
+  ...props
+}: SwitchThumbProps): React.JSX.Element => {
+  return (
+    <BaseUISwitch.Thumb
+      className={switchThumb({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const Switch: {
+  Root: typeof SwitchRoot;
+  Thumb: typeof SwitchThumb;
+} = {
+  Root: SwitchRoot,
+  Thumb: SwitchThumb,
+};

package/src/text/text.tsx

@@ -31,7 +31,12 @@ export interface TextProps extends ComponentProps<'p'> {
   variant?: TextVariant;
 }
 
-export const Text = ({ children, className, variant, themeColor }: TextProps) => {
+export const Text = ({
+  children,
+  className,
+  variant,
+  themeColor,
+}: TextProps): React.JSX.Element => {
   return (
     <div
       className={text({

package/src/toggle/index.ts

@@ -0,0 +1,2 @@
+export type { ToggleProps, ToggleSize, ToggleVariant } from './toggle';
+export { Toggle } from './toggle';

package/src/toggle/toggle.stories.tsx

@@ -0,0 +1,232 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type React from 'react';
+import { useState } from 'react';
+import { Button } from '../button';
+import { Toggle } from './toggle';
+
+const meta: Meta<typeof Toggle> = {
+  argTypes: {
+    defaultPressed: {
+      control: 'boolean',
+      description: 'Initial pressed state (uncontrolled)',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the toggle',
+    },
+    pressed: {
+      control: 'boolean',
+      description: 'Pressed state (controlled)',
+    },
+    size: {
+      control: 'select',
+      description: 'Toggle size',
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: 'select',
+      description: 'Toggle variant',
+      options: ['default', 'outline', 'ghost'],
+    },
+  },
+  component: Toggle,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Toggle',
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const HeartIcon = ({ filled = false }) => (
+  <svg
+    fill={filled ? 'currentColor' : 'none'}
+    height="16"
+    stroke="currentColor"
+    strokeWidth="2"
+    viewBox="0 0 16 16"
+    width="16"
+  >
+    <path d="M7.99961 13.8667C7.88761 13.8667 7.77561 13.8315 7.68121 13.7611C7.43321 13.5766 1.59961 9.1963 1.59961 5.8667C1.59961 3.80856 3.27481 2.13336 5.33294 2.13336C6.59054 2.13336 7.49934 2.81176 7.99961 3.3131C8.49988 2.81176 9.40868 2.13336 10.6663 2.13336C12.7244 2.13336 14.3996 3.80803 14.3996 5.8667C14.3996 9.1963 8.56601 13.5766 8.31801 13.7616C8.22361 13.8315 8.11161 13.8667 7.99961 13.8667Z" />
+  </svg>
+);
+
+const StarIcon = ({ filled = false }) => (
+  <svg
+    fill={filled ? 'currentColor' : 'none'}
+    height="16"
+    stroke="currentColor"
+    strokeWidth="2"
+    viewBox="0 0 16 16"
+    width="16"
+  >
+    <path d="m8 1.62 1.94 3.93 4.34.63-3.14 3.06.74 4.32L8 12.22l-3.88 2.34.74-4.32-3.14-3.06 4.34-.63L8 1.62Z" />
+  </svg>
+);
+
+const SettingsIcon = () => (
+  <svg
+    fill="none"
+    height="16"
+    stroke="currentColor"
+    strokeWidth="2"
+    viewBox="0 0 16 16"
+    width="16"
+  >
+    <circle
+      cx="8"
+      cy="8"
+      r="2"
+    />
+    <path d="m8 1v3m0 6v3m2.83-9.83 2.12 2.12M1.17 5.17l2.12 2.12m9.42 0 2.12 2.12M1.17 10.83l2.12-2.12" />
+  </svg>
+);
+
+export const Default: Story = {
+  args: {
+    children: <HeartIcon />,
+    title: 'Favorite',
+  },
+};
+
+export const Pressed: Story = {
+  args: {
+    children: <HeartIcon filled />,
+    defaultPressed: true,
+    title: 'Favorite',
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [pressed, setPressed] = useState(false);
+    return (
+      <Toggle
+        onPressedChange={setPressed}
+        pressed={pressed}
+        title="Favorite"
+      >
+        <HeartIcon filled={pressed} />
+      </Toggle>
+    );
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: <StarIcon />,
+    title: 'Star',
+    variant: 'ghost',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    children: <SettingsIcon />,
+    size: 'sm',
+    title: 'Settings',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: <SettingsIcon />,
+    size: 'lg',
+    title: 'Settings',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: <HeartIcon />,
+    disabled: true,
+    title: 'Favorite',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Toggle title="Default">
+        <HeartIcon />
+      </Toggle>
+      <Toggle
+        title="Outline"
+        variant="outline"
+      >
+        <StarIcon />
+      </Toggle>
+      <Toggle
+        title="Ghost"
+        variant="ghost"
+      >
+        <SettingsIcon />
+      </Toggle>
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Toggle
+        size="sm"
+        title="Small"
+      >
+        <HeartIcon />
+      </Toggle>
+      <Toggle
+        size="md"
+        title="Medium"
+      >
+        <HeartIcon />
+      </Toggle>
+      <Toggle
+        size="lg"
+        title="Large"
+      >
+        <HeartIcon />
+      </Toggle>
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [pressed, setPressed] = useState(false);
+    return (
+      <div className="space-y-4">
+        <Toggle
+          onPressedChange={setPressed}
+          pressed={pressed}
+          title="Toggle favorite"
+        >
+          <HeartIcon filled={pressed} />
+        </Toggle>
+        <p className="text-sm text-gray-600">State: {pressed ? 'pressed' : 'not pressed'}</p>
+      </div>
+    );
+  },
+};
+
+export const CustomRender: Story = {
+  args: {
+    render: (props: React.ComponentProps<'button'>) => (
+      <Button
+        {...props}
+        className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+      >
+        <svg
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path d="m6.5 3.5 3 3-3 3" />
+        </svg>
+      </Button>
+    ),
+  },
+};

package/src/toggle/toggle.test.tsx

@@ -0,0 +1,149 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Toggle } from './toggle';
+
+const TestIcon = () => (
+  <svg
+    data-testid="test-icon"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+  >
+    <circle
+      cx="8"
+      cy="8"
+      r="6"
+    />
+  </svg>
+);
+
+describe('Toggle', () => {
+  it('renders with children', () => {
+    render(
+      <Toggle>
+        <TestIcon />
+      </Toggle>,
+    );
+    expect(screen.getByTestId('test-icon')).toBeInTheDocument();
+  });
+
+  it('applies variant styles', () => {
+    render(
+      <Toggle
+        data-testid="variant-toggle"
+        variant="ghost"
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByTestId('variant-toggle');
+    expect(toggle).toHaveClass('bg-transparent', 'text-gray-700');
+  });
+
+  it('applies size styles', () => {
+    render(
+      <Toggle
+        data-testid="size-toggle"
+        size="lg"
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByTestId('size-toggle');
+    expect(toggle).toHaveClass('h-12', 'w-12', 'p-3');
+  });
+
+  it('handles pressed state', () => {
+    render(
+      <Toggle
+        data-testid="pressed-toggle"
+        defaultPressed
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByTestId('pressed-toggle');
+    expect(toggle).toHaveAttribute('data-pressed');
+  });
+
+  it('handles controlled pressed state', () => {
+    render(
+      <Toggle
+        data-testid="controlled-toggle"
+        pressed
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByTestId('controlled-toggle');
+    expect(toggle).toHaveAttribute('data-pressed');
+  });
+
+  it('handles disabled state', () => {
+    render(
+      <Toggle
+        data-testid="disabled-toggle"
+        disabled
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByTestId('disabled-toggle');
+    expect(toggle).toBeDisabled();
+    expect(toggle).toHaveClass('disabled:opacity-50');
+  });
+
+  it('applies custom className', () => {
+    render(
+      <Toggle
+        aria-label="Custom toggle"
+        className="custom-toggle"
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByRole('button', { name: 'Custom toggle' });
+    expect(toggle).toHaveClass('custom-toggle');
+  });
+
+  it('sets title attribute', () => {
+    render(
+      <Toggle
+        aria-label="Toggle"
+        title="Toggle setting"
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByRole('button', { name: 'Toggle' });
+    expect(toggle).toHaveAttribute('title', 'Toggle setting');
+  });
+
+  it('passes through other props', () => {
+    render(
+      <Toggle
+        aria-label="Custom toggle"
+        data-testid="custom-toggle"
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByTestId('custom-toggle');
+    expect(toggle).toHaveAttribute('aria-label', 'Custom toggle');
+  });
+
+  it('calls onPressedChange when clicked', () => {
+    const onPressedChange = vi.fn();
+    render(
+      <Toggle
+        aria-label="Test toggle"
+        onPressedChange={onPressedChange}
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByRole('button', { name: 'Test toggle' });
+    toggle.click();
+    expect(onPressedChange).toHaveBeenCalledWith(true, expect.any(Object));
+  });
+});

package/src/toggle/toggle.tsx

@@ -0,0 +1,88 @@
+import { Toggle as BaseUIToggle } from '@base-ui/react/toggle';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps, ReactNode } from 'react';
+
+const toggle: ReturnType<typeof tv> = tv({
+  base: [
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded-md',
+    'text-sm',
+    'font-medium',
+    'transition-colors',
+    'duration-200',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-blue-500',
+    'focus:ring-offset-2',
+    'disabled:pointer-events-none',
+    'disabled:opacity-50',
+  ],
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+  variants: {
+    size: {
+      lg: ['h-12', 'w-12', 'p-3'],
+      md: ['h-10', 'w-10', 'p-2'],
+      sm: ['h-8', 'w-8', 'p-1'],
+    },
+    variant: {
+      default: [],
+      ghost: [
+        'bg-transparent',
+        'text-gray-700',
+        'hover:bg-gray-100',
+        'hover:text-gray-900',
+        'data-[pressed]:bg-gray-200',
+        'data-[pressed]:text-gray-900',
+      ],
+      outline: [
+        'border',
+        'border-gray-300',
+        'bg-white',
+        'text-gray-700',
+        'hover:bg-gray-50',
+        'hover:text-gray-900',
+        'data-[pressed]:bg-gray-100',
+        'data-[pressed]:text-gray-900',
+      ],
+    },
+  },
+} as const);
+
+export type ToggleVariant = keyof typeof toggle.variants.variant;
+export type ToggleSize = keyof typeof toggle.variants.size;
+
+export interface ToggleProps extends Omit<ComponentProps<typeof BaseUIToggle>, 'className'> {
+  className?: string;
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+  children?: ReactNode;
+  title?: string;
+}
+
+export const Toggle = ({
+  className,
+  variant = 'outline',
+  size = 'md',
+  title,
+  children,
+  ...props
+}: ToggleProps): React.JSX.Element => {
+  return (
+    <BaseUIToggle
+      className={toggle({
+        className,
+        size,
+        variant,
+      })}
+      title={title}
+      {...props}
+    >
+      {children}
+    </BaseUIToggle>
+  );
+};