@regardio/react 0.5.7 → 0.7.0

package/src/button/button.tsx

@@ -0,0 +1,118 @@
+import { Button as BaseUIButton } from '@base-ui/react/button';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const buttonVariants = {
+  destructive: [
+    'bg-red-600',
+    'text-white',
+    'border-red-600',
+    'hover:bg-red-700',
+    'hover:border-red-700',
+    'focus-visible:ring-2',
+    'focus-visible:ring-red-500',
+    'focus-visible:ring-offset-2',
+  ],
+  ghost: [
+    'bg-transparent',
+    'text-gray-900',
+    'border-transparent',
+    'hover:bg-gray-100',
+    'hover:border-transparent',
+    'focus-visible:ring-2',
+    'focus-visible:ring-gray-500',
+    'focus-visible:ring-offset-2',
+  ],
+  outline: [
+    'bg-transparent',
+    'text-gray-900',
+    'border-gray-300',
+    'hover:bg-gray-50',
+    'hover:border-gray-400',
+    'focus-visible:ring-2',
+    'focus-visible:ring-gray-500',
+    'focus-visible:ring-offset-2',
+  ],
+  primary: [
+    'bg-blue-600',
+    'text-white',
+    'border-blue-600',
+    'hover:bg-blue-700',
+    'hover:border-blue-700',
+    'focus-visible:ring-2',
+    'focus-visible:ring-blue-500',
+    'focus-visible:ring-offset-2',
+  ],
+  secondary: [
+    'bg-gray-100',
+    'text-gray-900',
+    'border-gray-300',
+    'hover:bg-gray-200',
+    'hover:border-gray-400',
+    'focus-visible:ring-2',
+    'focus-visible:ring-gray-500',
+    'focus-visible:ring-offset-2',
+  ],
+} as const;
+
+const buttonSizes = {
+  '2xl': ['px-10', 'py-5', 'text-2xl', 'font-medium', 'rounded-lg'],
+  lg: ['px-6', 'py-3', 'text-lg', 'font-medium', 'rounded-lg'],
+  md: ['px-4', 'py-2', 'text-base', 'font-medium', 'rounded-md'],
+  sm: ['px-3', 'py-1.5', 'text-sm', 'font-medium', 'rounded-md'],
+  xl: ['px-8', 'py-4', 'text-xl', 'font-medium', 'rounded-lg'],
+} as const;
+
+const button = tv({
+  base: [
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'border',
+    'transition-colors',
+    'duration-200',
+    'ease-in-out',
+    'disabled:opacity-50',
+    'disabled:cursor-not-allowed',
+    'disabled:pointer-events-none',
+  ],
+  defaultVariants: {
+    size: 'md',
+    variant: 'primary',
+  },
+  variants: {
+    size: buttonSizes,
+    variant: buttonVariants,
+  },
+});
+
+export type ButtonVariant = keyof typeof buttonVariants;
+export type ButtonSize = keyof typeof buttonSizes;
+
+export interface ButtonProps extends Omit<ComponentProps<typeof BaseUIButton>, 'className'> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+  type?: 'button' | 'submit' | 'reset';
+}
+
+export const Button = ({
+  children,
+  className,
+  variant,
+  size,
+  ...props
+}: ButtonProps): React.JSX.Element => {
+  return (
+    <BaseUIButton
+      className={button({
+        className,
+        size,
+        variant,
+      })}
+      {...props}
+    >
+      {children}
+    </BaseUIButton>
+  );
+};

package/src/button/index.ts

@@ -0,0 +1,2 @@
+export type { ButtonProps, ButtonSize, ButtonVariant } from './button';
+export { Button } from './button';

package/src/carousel/carousel-content.tsx

@@ -1,16 +1,19 @@
-'use client';
+import type { HTMLAttributes } from 'react';
 
-import { forwardRef, type HTMLAttributes } from 'react';
+export interface CarouselContentProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: React.Ref<HTMLDivElement>;
+}
 
-export const CarouselContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        className={className}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-CarouselContent.displayName = 'CarouselContent';
+export const CarouselContent = function CarouselContent({
+  className,
+  ref,
+  ...props
+}: CarouselContentProps): React.JSX.Element {
+  return (
+    <div
+      className={className}
+      ref={ref}
+      {...props}
+    />
+  );
+};

package/src/carousel/carousel-item.tsx

@@ -1,23 +1,23 @@
-'use client';
-
-import { forwardRef, type HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 export interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
   'aria-label'?: string;
+  ref?: React.Ref<HTMLDivElement>;
 }
 
-export const CarouselItem = forwardRef<HTMLDivElement, CarouselItemProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      // biome-ignore lint/a11y/useSemanticElements: False positive
-      <div
-        aria-roledescription="slide"
-        className={className}
-        ref={ref}
-        role="group"
-        {...props}
-      />
-    );
-  },
-);
-CarouselItem.displayName = 'CarouselItem';
+export const CarouselItem = function CarouselItem({
+  className,
+  ref,
+  ...props
+}: CarouselItemProps): React.JSX.Element {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: False positive
+    <div
+      aria-roledescription="slide"
+      className={className}
+      ref={ref}
+      role="group"
+      {...props}
+    />
+  );
+};

package/src/carousel/carousel-next.tsx

@@ -1,22 +1,27 @@
 'use client';
 
-import { forwardRef, type HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
+import { Button } from '../button';
 import { useCarousel } from './carousel-root';
 
-export const CarouselNext = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
-  ({ className, ...props }, ref) => {
-    const { canScrollNext, scrollNext } = useCarousel();
+export interface CarouselNextProps extends HTMLAttributes<HTMLButtonElement> {
+  ref?: React.Ref<HTMLButtonElement>;
+}
 
-    return (
-      <button
-        className={className}
-        disabled={!canScrollNext}
-        onClick={scrollNext}
-        ref={ref}
-        type="button"
-        {...props}
-      />
-    );
-  },
-);
-CarouselNext.displayName = 'CarouselNext';
+export const CarouselNext = function CarouselNext({
+  className,
+  ref,
+  ...props
+}: CarouselNextProps): React.JSX.Element {
+  const { canScrollNext, scrollNext } = useCarousel();
+
+  return (
+    <Button
+      className={className}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      ref={ref}
+      {...props}
+    />
+  );
+};

package/src/carousel/carousel-previous.tsx

@@ -1,22 +1,27 @@
 'use client';
 
-import { forwardRef, type HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
+import { Button } from '../button';
 import { useCarousel } from './carousel-root';
 
-export const CarouselPrevious = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
-  ({ className, ...props }, ref) => {
-    const { canScrollPrev, scrollPrev } = useCarousel();
+export interface CarouselPreviousProps extends HTMLAttributes<HTMLButtonElement> {
+  ref?: React.Ref<HTMLButtonElement>;
+}
 
-    return (
-      <button
-        className={className}
-        disabled={!canScrollPrev}
-        onClick={scrollPrev}
-        ref={ref}
-        type="button"
-        {...props}
-      />
-    );
-  },
-);
-CarouselPrevious.displayName = 'CarouselPrevious';
+export const CarouselPrevious = function CarouselPrevious({
+  className,
+  ref,
+  ...props
+}: CarouselPreviousProps): React.JSX.Element {
+  const { canScrollPrev, scrollPrev } = useCarousel();
+
+  return (
+    <Button
+      className={className}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      ref={ref}
+      {...props}
+    />
+  );
+};

package/src/carousel/carousel-root.tsx

@@ -4,7 +4,6 @@ import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
 import useEmblaCarousel from 'embla-carousel-react';
 import {
   createContext,
-  forwardRef,
   type HTMLAttributes,
   type KeyboardEvent,
   useCallback,
@@ -25,7 +24,7 @@ interface CarouselContextValue {
 
 const CarouselContext = createContext<CarouselContextValue | null>(null);
 
-export function useCarousel() {
+export function useCarousel(): CarouselContextValue {
   const context = useContext(CarouselContext);
   if (!context) {
     throw new Error('useCarousel must be used within a <Carousel.Root />');
@@ -37,91 +36,97 @@ export interface CarouselRootProps extends HTMLAttributes<HTMLDivElement> {
   opts?: EmblaOptionsType;
   setApi?: (api: CarouselApi) => void;
   orientation?: 'horizontal' | 'vertical';
+  ref?: React.Ref<HTMLDivElement>;
 }
 
-export const CarouselRoot = forwardRef<HTMLDivElement, CarouselRootProps>(
-  ({ children, className, opts, orientation = 'horizontal', setApi, ...props }, ref) => {
-    const [emblaRef, emblaApi] = useEmblaCarousel({
-      ...opts,
-      axis: orientation === 'horizontal' ? 'x' : 'y',
-    });
-    const [canScrollPrev, setCanScrollPrev] = useState(false);
-    const [canScrollNext, setCanScrollNext] = useState(false);
-
-    const onSelect = useCallback((api: CarouselApi) => {
-      if (!api) {
-        return;
+export const CarouselRoot = function CarouselRoot({
+  children,
+  className,
+  opts,
+  orientation = 'horizontal',
+  setApi,
+  ref,
+  ...props
+}: CarouselRootProps): React.JSX.Element {
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    ...opts,
+    axis: orientation === 'horizontal' ? 'x' : 'y',
+  });
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  const onSelect = useCallback((api: CarouselApi) => {
+    if (!api) {
+      return;
+    }
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+
+  const scrollPrev = useCallback(() => {
+    emblaApi?.scrollPrev();
+  }, [emblaApi]);
+
+  const scrollNext = useCallback(() => {
+    emblaApi?.scrollNext();
+  }, [emblaApi]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        scrollNext();
       }
-      setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext());
-    }, []);
-
-    const scrollPrev = useCallback(() => {
-      emblaApi?.scrollPrev();
-    }, [emblaApi]);
-
-    const scrollNext = useCallback(() => {
-      emblaApi?.scrollNext();
-    }, [emblaApi]);
-
-    const handleKeyDown = useCallback(
-      (event: KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === 'ArrowLeft') {
-          event.preventDefault();
-          scrollPrev();
-        } else if (event.key === 'ArrowRight') {
-          event.preventDefault();
-          scrollNext();
-        }
-      },
-      [scrollPrev, scrollNext],
-    );
-
-    useEffect(() => {
-      if (!emblaApi || !setApi) {
-        return;
-      }
-      setApi(emblaApi);
-    }, [emblaApi, setApi]);
-
-    useEffect(() => {
-      if (!emblaApi) {
-        return;
-      }
-
-      onSelect(emblaApi);
-      emblaApi.on('reInit', onSelect);
-      emblaApi.on('select', onSelect);
-
-      return () => {
-        emblaApi?.off('select', onSelect);
-      };
-    }, [emblaApi, onSelect]);
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          api: emblaApi,
-          canScrollNext,
-          canScrollPrev,
-          scrollNext,
-          scrollPrev,
-        }}
+    },
+    [scrollPrev, scrollNext],
+  );
+
+  useEffect(() => {
+    if (!emblaApi || !setApi) {
+      return;
+    }
+    setApi(emblaApi);
+  }, [emblaApi, setApi]);
+
+  useEffect(() => {
+    if (!emblaApi) {
+      return;
+    }
+
+    onSelect(emblaApi);
+    emblaApi.on('reInit', onSelect);
+    emblaApi.on('select', onSelect);
+
+    return () => {
+      emblaApi?.off('select', onSelect);
+    };
+  }, [emblaApi, onSelect]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        api: emblaApi,
+        canScrollNext,
+        canScrollPrev,
+        scrollNext,
+        scrollPrev,
+      }}
+    >
+      <section
+        aria-label="Carousel"
+        aria-roledescription="carousel"
+        className={className}
+        onKeyDownCapture={handleKeyDown}
+        ref={ref}
+        {...props}
       >
-        <section
-          aria-label="Carousel"
-          aria-roledescription="carousel"
-          className={className}
-          onKeyDownCapture={handleKeyDown}
-          ref={ref}
-          {...props}
-        >
-          <div ref={emblaRef}>
-            <div>{children}</div>
-          </div>
-        </section>
-      </CarouselContext.Provider>
-    );
-  },
-);
-CarouselRoot.displayName = 'CarouselRoot';
+        <div ref={emblaRef}>
+          <div>{children}</div>
+        </div>
+      </section>
+    </CarouselContext.Provider>
+  );
+};

package/src/checkbox/checkbox.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Field } from '../field';
+import { Checkbox } from './checkbox';
+
+const meta: Meta<typeof Checkbox.Root> = {
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the checkbox',
+    },
+    size: {
+      control: 'select',
+      description: 'Checkbox size',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+  component: Checkbox.Root,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Checkbox',
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Checkbox.Root>
+      <Checkbox.Indicator />
+    </Checkbox.Root>
+  ),
+};
+
+export const Checked: Story = {
+  render: () => (
+    <Checkbox.Root defaultChecked>
+      <Checkbox.Indicator />
+    </Checkbox.Root>
+  ),
+};
+
+export const Small: Story = {
+  render: () => (
+    <Checkbox.Root size="sm">
+      <Checkbox.Indicator />
+    </Checkbox.Root>
+  ),
+};
+
+export const Large: Story = {
+  render: () => (
+    <Checkbox.Root size="lg">
+      <Checkbox.Indicator />
+    </Checkbox.Root>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Checkbox.Root disabled>
+      <Checkbox.Indicator />
+    </Checkbox.Root>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <Field.Root>
+      <Field.Label>
+        <Checkbox.Root>
+          <Checkbox.Indicator />
+        </Checkbox.Root>
+        Accept terms and conditions
+      </Field.Label>
+    </Field.Root>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <div className="space-y-4">
+        <Field.Root>
+          <Field.Label>
+            <Checkbox.Root
+              checked={checked}
+              onCheckedChange={setChecked}
+            >
+              <Checkbox.Indicator />
+            </Checkbox.Root>
+            Subscribe to newsletter
+          </Field.Label>
+        </Field.Root>
+        <p className="text-sm text-gray-600">Status: {checked ? 'Subscribed' : 'Not subscribed'}</p>
+      </div>
+    );
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Checkbox.Root size="sm">
+        <Checkbox.Indicator />
+      </Checkbox.Root>
+      <Checkbox.Root size="md">
+        <Checkbox.Indicator />
+      </Checkbox.Root>
+      <Checkbox.Root size="lg">
+        <Checkbox.Indicator />
+      </Checkbox.Root>
+    </div>
+  ),
+};