@regardio/react 0.5.5 → 0.6.0

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

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