@regardio/react 0.5.7 → 0.6.0

package/src/checkbox/checkbox.tsx

@@ -0,0 +1,91 @@
+import { Checkbox as BaseUICheckbox } from '@base-ui/react/checkbox';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const checkboxRoot = tv({
+  base: [
+    'h-4',
+    'w-4',
+    'rounded',
+    '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 checkboxIndicator = tv({
+  base: ['flex', 'items-center', 'justify-center', 'text-white', 'data-[unchecked]:invisible'],
+});
+
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+
+export interface CheckboxRootProps
+  extends Omit<ComponentProps<typeof BaseUICheckbox.Root>, 'className'> {
+  className?: string;
+  size?: CheckboxSize;
+}
+
+export interface CheckboxIndicatorProps
+  extends Omit<ComponentProps<typeof BaseUICheckbox.Indicator>, 'className'> {
+  className?: string;
+}
+
+export const CheckboxRoot = ({ className, size = 'md', ...props }: CheckboxRootProps) => {
+  return (
+    <BaseUICheckbox.Root
+      className={checkboxRoot({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const CheckboxIndicator = ({ className, children, ...props }: CheckboxIndicatorProps) => {
+  return (
+    <BaseUICheckbox.Indicator
+      className={checkboxIndicator({ className })}
+      {...props}
+    >
+      {children || (
+        <svg
+          fill="none"
+          height="12"
+          stroke="currentColor"
+          strokeWidth="2"
+          viewBox="0 0 12 12"
+          width="12"
+        >
+          <polyline points="2,6 5,9 10,3" />
+        </svg>
+      )}
+    </BaseUICheckbox.Indicator>
+  );
+};
+
+export const Checkbox = {
+  Indicator: CheckboxIndicator,
+  Root: CheckboxRoot,
+};

package/src/checkbox/index.ts

@@ -0,0 +1,2 @@
+export type { CheckboxIndicatorProps, CheckboxRootProps, CheckboxSize } from './checkbox';
+export { Checkbox, CheckboxIndicator, CheckboxRoot } from './checkbox';

package/src/checkbox-group/checkbox-group.tsx

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

package/src/checkbox-group/index.ts

@@ -0,0 +1,2 @@
+export type { CheckboxGroupOrientation, CheckboxGroupProps } from './checkbox-group';
+export { CheckboxGroup } from './checkbox-group';

package/src/field/field.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Checkbox } from '../checkbox';
+import { Input } from '../input';
+import { Field } from './field';
+
+const meta = {
+  argTypes: {
+    variant: {
+      control: 'select',
+      description: 'Field variant',
+      options: ['default', 'required'],
+    },
+  },
+  component: Field.Root,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Field',
+} satisfies Meta<typeof Field.Root>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Field.Root>
+      <Field.Label>Email Address</Field.Label>
+      <Input placeholder="Enter your email" />
+      <Field.Description>We'll never share your email with anyone else.</Field.Description>
+    </Field.Root>
+  ),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <Field.Root>
+      <Field.Label variant="error">Email Address</Field.Label>
+      <Input
+        placeholder="Enter your email"
+        variant="error"
+      />
+      <Field.Error>This field is required</Field.Error>
+    </Field.Root>
+  ),
+};
+
+export const Required: Story = {
+  render: () => (
+    <Field.Root variant="required">
+      <Field.Label>Full Name</Field.Label>
+      <Input placeholder="Enter your full name" />
+      <Field.Description>Please enter your first and last name.</Field.Description>
+    </Field.Root>
+  ),
+};
+
+export const HorizontalLayout: Story = {
+  render: () => (
+    <Field.Root>
+      <Field.Item layout="horizontal">
+        <Checkbox.Root>
+          <Checkbox.Indicator />
+        </Checkbox.Root>
+        <Field.Label>Subscribe to newsletter</Field.Label>
+      </Field.Item>
+      <Field.Description>Receive updates about new features</Field.Description>
+    </Field.Root>
+  ),
+};
+
+export const MultipleFields: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <Field.Root>
+        <Field.Label>First Name</Field.Label>
+        <Input placeholder="Enter your first name" />
+      </Field.Root>
+      <Field.Root>
+        <Field.Label>Last Name</Field.Label>
+        <Input placeholder="Enter your last name" />
+      </Field.Root>
+      <Field.Root variant="required">
+        <Field.Label>Email</Field.Label>
+        <Input
+          placeholder="Enter your email"
+          type="email"
+        />
+        <Field.Description>We'll never share your email.</Field.Description>
+      </Field.Root>
+    </div>
+  ),
+};
+
+export const WithCustomClass: Story = {
+  render: () => (
+    <Field.Root className="bg-gray-50 p-4 rounded-lg">
+      <Field.Label className="text-blue-600">Custom Field</Field.Label>
+      <Input
+        className="bg-white border-blue-300"
+        placeholder="Custom styled input"
+      />
+    </Field.Root>
+  ),
+};

package/src/field/field.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Field } from './field';
+
+describe('Field', () => {
+  it('renders FieldRoot with children', () => {
+    render(
+      <Field.Root>
+        <Field.Label>Test Label</Field.Label>
+        <Field.Control />
+      </Field.Root>,
+    );
+    expect(screen.getByText('Test Label')).toBeInTheDocument();
+  });
+
+  it('renders FieldDescription', () => {
+    render(
+      <Field.Root>
+        <Field.Description>Test Description</Field.Description>
+      </Field.Root>,
+    );
+    expect(screen.getByText('Test Description')).toBeInTheDocument();
+  });
+
+  it('renders FieldError', () => {
+    render(
+      <Field.Root invalid>
+        <Field.Error match={true}>Test Error</Field.Error>
+      </Field.Root>,
+    );
+    expect(screen.getByText('Test Error')).toBeInTheDocument();
+  });
+
+  it('renders FieldItem with layout', () => {
+    render(
+      <Field.Item layout="horizontal">
+        <span>Test Content</span>
+      </Field.Item>,
+    );
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+  });
+
+  it('applies custom className to FieldRoot', () => {
+    render(
+      <Field.Root className="custom-field">
+        <Field.Label>Test</Field.Label>
+      </Field.Root>,
+    );
+    const fieldRoot = screen.getByText('Test').parentElement;
+    expect(fieldRoot).toHaveClass('custom-field');
+  });
+
+  it('applies variant styles to FieldLabel', () => {
+    render(
+      <Field.Root>
+        <Field.Label variant="error">Error Label</Field.Label>
+      </Field.Root>,
+    );
+    expect(screen.getByText('Error Label')).toHaveClass('text-red-600');
+  });
+});

package/src/field/field.tsx

@@ -0,0 +1,165 @@
+import { Field as BaseUIField } from '@base-ui/react/field';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps, ReactNode } from 'react';
+
+const fieldRootVariants = {
+  default: [],
+  required: ['after:content-["*"]', 'after:ml-1', 'after:text-red-500'],
+} as const;
+
+const fieldRoot = tv({
+  base: ['space-y-1'],
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: fieldRootVariants,
+  },
+});
+
+const fieldLabel = tv({
+  base: ['block', 'text-sm', 'font-medium', 'text-gray-700', 'mb-1'],
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: {
+      default: [],
+      error: ['text-red-600'],
+    },
+  },
+});
+
+const fieldDescription = tv({
+  base: ['text-sm', 'text-gray-500', 'mt-1'],
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: {
+      default: [],
+      error: ['text-red-600'],
+    },
+  },
+});
+
+const fieldError = tv({
+  base: ['text-sm', 'text-red-600', 'mt-1'],
+});
+
+const fieldItem = tv({
+  base: ['flex', 'flex-col'],
+  defaultVariants: {
+    layout: 'default',
+  },
+  variants: {
+    layout: {
+      default: [],
+      horizontal: ['flex-row', 'items-center', 'gap-2'],
+    },
+  },
+});
+
+export type FieldRootVariant = keyof typeof fieldRootVariants;
+export type FieldLabelVariant = 'default' | 'error';
+export type FieldDescriptionVariant = 'default' | 'error';
+export type FieldItemLayout = 'default' | 'horizontal';
+
+export interface FieldRootProps extends Omit<ComponentProps<typeof BaseUIField.Root>, 'className'> {
+  className?: string;
+  variant?: FieldRootVariant;
+}
+
+export interface FieldLabelProps
+  extends Omit<ComponentProps<typeof BaseUIField.Label>, 'className'> {
+  className?: string;
+  variant?: FieldLabelVariant;
+}
+
+export interface FieldDescriptionProps
+  extends Omit<ComponentProps<typeof BaseUIField.Description>, 'className'> {
+  className?: string;
+  variant?: FieldDescriptionVariant;
+}
+
+export interface FieldErrorProps
+  extends Omit<ComponentProps<typeof BaseUIField.Error>, 'className'> {
+  className?: string;
+}
+
+export interface FieldItemProps extends ComponentProps<'div'> {
+  className?: string;
+  layout?: FieldItemLayout;
+  children: ReactNode;
+}
+
+export const FieldRoot = ({ className, variant, ...props }: FieldRootProps) => {
+  return (
+    <BaseUIField.Root
+      className={fieldRoot({
+        className,
+        variant,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const FieldLabel = ({ className, variant, ...props }: FieldLabelProps) => {
+  return (
+    <BaseUIField.Label
+      className={fieldLabel({
+        className,
+        variant,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const FieldDescription = ({ className, variant, ...props }: FieldDescriptionProps) => {
+  return (
+    <BaseUIField.Description
+      className={fieldDescription({
+        className,
+        variant,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const FieldError = ({ className, ...props }: FieldErrorProps) => {
+  return (
+    <BaseUIField.Error
+      className={fieldError({
+        className,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const FieldItem = ({ className, layout, children, ...props }: FieldItemProps) => {
+  return (
+    <div
+      className={fieldItem({
+        className,
+        layout,
+      })}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const Field = {
+  Control: BaseUIField.Control,
+  Description: FieldDescription,
+  Error: FieldError,
+  Item: FieldItem,
+  Label: FieldLabel,
+  Root: FieldRoot,
+  Validity: BaseUIField.Validity,
+};

package/src/field/index.ts

@@ -0,0 +1,12 @@
+export type {
+  FieldDescriptionProps,
+  FieldDescriptionVariant,
+  FieldErrorProps,
+  FieldItemLayout,
+  FieldItemProps,
+  FieldLabelProps,
+  FieldLabelVariant,
+  FieldRootProps,
+  FieldRootVariant,
+} from './field';
+export { Field } from './field';

package/src/fieldset/fieldset.stories.tsx

@@ -0,0 +1,204 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button';
+import { Fieldset } from './fieldset';
+
+const meta = {
+  argTypes: {
+    variant: {
+      control: 'select',
+      description: 'Fieldset variant',
+      options: ['default', 'compact'],
+    },
+  },
+  component: Fieldset.Root,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Fieldset',
+} satisfies Meta<typeof Fieldset.Root>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Fieldset.Root>
+      <Fieldset.Legend>Personal Information</Fieldset.Legend>
+      <div className="space-y-4">
+        <label className="block text-sm font-medium text-gray-700">
+          First Name
+          <input
+            className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+            placeholder="Enter first name"
+            type="text"
+          />
+        </label>
+        <label className="block text-sm font-medium text-gray-700">
+          Last Name
+          <input
+            className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+            placeholder="Enter last name"
+            type="text"
+          />
+        </label>
+      </div>
+    </Fieldset.Root>
+  ),
+};
+
+export const Compact: Story = {
+  render: () => (
+    <Fieldset.Root variant="compact">
+      <Fieldset.Legend>Contact Details</Fieldset.Legend>
+      <div className="space-y-2">
+        <label className="block text-sm font-medium text-gray-700">
+          Email
+          <input
+            className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+            placeholder="Enter email"
+            type="email"
+          />
+        </label>
+        <label className="block text-sm font-medium text-gray-700">
+          Phone
+          <input
+            className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+            placeholder="Enter phone number"
+            type="tel"
+          />
+        </label>
+      </div>
+    </Fieldset.Root>
+  ),
+};
+
+export const SmallLegend: Story = {
+  render: () => (
+    <Fieldset.Root>
+      <Fieldset.Legend size="small">Settings</Fieldset.Legend>
+      <div className="space-y-4">
+        <label className="flex items-center">
+          <input
+            className="mr-2"
+            type="checkbox"
+          />
+          <span className="text-sm">Enable notifications</span>
+        </label>
+        <label className="flex items-center">
+          <input
+            className="mr-2"
+            type="checkbox"
+          />
+          <span className="text-sm">Allow marketing emails</span>
+        </label>
+      </div>
+    </Fieldset.Root>
+  ),
+};
+
+export const WithCustomClass: Story = {
+  render: () => (
+    <Fieldset.Root className="bg-blue-50 border-blue-200">
+      <Fieldset.Legend className="text-blue-900">Blue Theme</Fieldset.Legend>
+      <div className="space-y-4">
+        <input
+          className="w-full px-3 py-2 border border-blue-300 rounded-md bg-white"
+          placeholder="Custom styled input"
+          type="text"
+        />
+        <input
+          className="w-full px-3 py-2 border border-blue-300 rounded-md bg-white"
+          placeholder="Another input"
+          type="text"
+        />
+      </div>
+    </Fieldset.Root>
+  ),
+};
+
+export const NestedFieldsets: Story = {
+  render: () => (
+    <Fieldset.Root>
+      <Fieldset.Legend>Account Settings</Fieldset.Legend>
+      <div className="space-y-6">
+        <Fieldset.Root className="border-gray-300">
+          <Fieldset.Legend size="small">Profile Information</Fieldset.Legend>
+          <div className="space-y-3">
+            <input
+              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              placeholder="Username"
+              type="text"
+            />
+            <input
+              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              placeholder="Email"
+              type="email"
+            />
+          </div>
+        </Fieldset.Root>
+        <Fieldset.Root className="border-gray-300">
+          <Fieldset.Legend size="small">Privacy Settings</Fieldset.Legend>
+          <div className="space-y-2">
+            <label className="flex items-center">
+              <input
+                className="mr-2"
+                type="checkbox"
+              />
+              <span className="text-sm">Public profile</span>
+            </label>
+            <label className="flex items-center">
+              <input
+                className="mr-2"
+                type="checkbox"
+              />
+              <span className="text-sm">Show email</span>
+            </label>
+          </div>
+        </Fieldset.Root>
+      </div>
+    </Fieldset.Root>
+  ),
+};
+
+export const FormExample: Story = {
+  render: () => (
+    <form className="space-y-6">
+      <Fieldset.Root>
+        <Fieldset.Legend>User Registration</Fieldset.Legend>
+        <div className="space-y-4">
+          <label className="block text-sm font-medium text-gray-700">
+            Full Name
+            <input
+              className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+              placeholder="Enter your full name"
+              type="text"
+            />
+          </label>
+          <label className="block text-sm font-medium text-gray-700">
+            Email Address
+            <input
+              className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+              placeholder="Enter your email"
+              type="email"
+            />
+          </label>
+          <label className="block text-sm font-medium text-gray-700">
+            Password
+            <input
+              className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+              placeholder="Enter password"
+              type="password"
+            />
+          </label>
+        </div>
+      </Fieldset.Root>
+      <Button
+        className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+        type="submit"
+      >
+        Register
+      </Button>
+    </form>
+  ),
+};