@regardio/react 0.5.7 → 0.6.0

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';

package/src/slider/slider.tsx

@@ -0,0 +1,179 @@
+import { Slider as BaseUISlider } from '@base-ui/react/slider';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const sliderRoot = tv({
+  base: ['relative', 'flex', 'items-center', 'w-full'],
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      lg: ['h-8'],
+      md: ['h-6'],
+      sm: ['h-4'],
+    },
+  },
+});
+
+const sliderControl = tv({
+  base: ['relative', 'flex', 'items-center', 'w-full', 'touch-none'],
+});
+
+const sliderTrack = tv({
+  base: ['relative', 'w-full', 'rounded-full', 'bg-gray-200', 'overflow-hidden'],
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      lg: ['h-3'],
+      md: ['h-2'],
+      sm: ['h-1'],
+    },
+  },
+});
+
+const sliderIndicator = tv({
+  base: ['absolute', 'h-full', 'bg-blue-600', 'rounded-full'],
+});
+
+const sliderThumb = tv({
+  base: [
+    'block',
+    'rounded-full',
+    'bg-white',
+    'border-2',
+    'border-blue-600',
+    'shadow-lg',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-blue-500',
+    'focus:ring-offset-2',
+    'disabled:cursor-not-allowed',
+    'disabled:opacity-50',
+    'cursor-grab',
+    'active:cursor-grabbing',
+  ],
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      lg: ['h-6', 'w-6'],
+      md: ['h-5', 'w-5'],
+      sm: ['h-3', 'w-3'],
+    },
+  },
+});
+
+const sliderValue = tv({
+  base: ['text-sm', 'font-medium', 'text-gray-700', 'mb-2'],
+});
+
+export type SliderSize = 'sm' | 'md' | 'lg';
+
+export interface SliderRootProps
+  extends Omit<ComponentProps<typeof BaseUISlider.Root>, 'className'> {
+  className?: string;
+  size?: SliderSize;
+}
+
+export interface SliderControlProps
+  extends Omit<ComponentProps<typeof BaseUISlider.Control>, 'className'> {
+  className?: string;
+}
+
+export interface SliderTrackProps
+  extends Omit<ComponentProps<typeof BaseUISlider.Track>, 'className'> {
+  className?: string;
+  size?: SliderSize;
+}
+
+export interface SliderIndicatorProps
+  extends Omit<ComponentProps<typeof BaseUISlider.Indicator>, 'className'> {
+  className?: string;
+}
+
+export interface SliderThumbProps
+  extends Omit<ComponentProps<typeof BaseUISlider.Thumb>, 'className'> {
+  className?: string;
+  size?: SliderSize;
+}
+
+export interface SliderValueProps
+  extends Omit<ComponentProps<typeof BaseUISlider.Value>, 'className'> {
+  className?: string;
+}
+
+export const SliderRoot = ({ className, size = 'md', ...props }: SliderRootProps) => {
+  return (
+    <BaseUISlider.Root
+      className={sliderRoot({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const SliderControl = ({ className, ...props }: SliderControlProps) => {
+  return (
+    <BaseUISlider.Control
+      className={sliderControl({ className })}
+      {...props}
+    />
+  );
+};
+
+export const SliderTrack = ({ className, size = 'md', ...props }: SliderTrackProps) => {
+  return (
+    <BaseUISlider.Track
+      className={sliderTrack({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const SliderIndicator = ({ className, ...props }: SliderIndicatorProps) => {
+  return (
+    <BaseUISlider.Indicator
+      className={sliderIndicator({ className })}
+      {...props}
+    />
+  );
+};
+
+export const SliderThumb = ({ className, size = 'md', ...props }: SliderThumbProps) => {
+  return (
+    <BaseUISlider.Thumb
+      className={sliderThumb({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const SliderValue = ({ className, ...props }: SliderValueProps) => {
+  return (
+    <BaseUISlider.Value
+      className={sliderValue({ className })}
+      {...props}
+    />
+  );
+};
+
+export const Slider = {
+  Control: SliderControl,
+  Indicator: SliderIndicator,
+  Root: SliderRoot,
+  Thumb: SliderThumb,
+  Track: SliderTrack,
+  Value: SliderValue,
+};

package/src/switch/index.ts

@@ -0,0 +1,2 @@
+export type { SwitchRootProps, SwitchSize, SwitchThumbProps } from './switch';
+export { Switch, SwitchRoot, SwitchThumb } from './switch';

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,101 @@
+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) => {
+  return (
+    <BaseUISwitch.Root
+      className={switchRoot({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const SwitchThumb = ({ className, size = 'md', ...props }: SwitchThumbProps) => {
+  return (
+    <BaseUISwitch.Thumb
+      className={switchThumb({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const Switch = {
+  Root: SwitchRoot,
+  Thumb: SwitchThumb,
+};

package/src/toggle/index.ts

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