@arolariu/components 0.2.0 → 0.3.0

package/src/components/ui/card.tsx

@@ -4,80 +4,61 @@ import * as React from "react";
 
 import {cn} from "@/lib/utilities";
 
-function Card({className, ...props}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot='card'
-      className={cn(
-        "flex flex-col gap-6 rounded-xl border border-neutral-200 bg-white py-6 text-neutral-950 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
 
-function CardHeader({className, ...props}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot='card-header'
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
 
-function CardTitle({className, ...props}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot='card-title'
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
+  <div
+    ref={ref}
+    className={cn("leading-none font-semibold tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
 
-function CardDescription({className, ...props}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot='card-description'
-      className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
-      {...props}
-    />
-  );
-}
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
 
-function CardAction({className, ...props}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot='card-action'
-      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
-      {...props}
-    />
-  );
-}
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
+  <div
+    ref={ref}
+    className={cn("p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardContent.displayName = "CardContent";
 
-function CardContent({className, ...props}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot='card-content'
-      className={cn("px-6", className)}
-      {...props}
-    />
-  );
-}
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
 
-function CardFooter({className, ...props}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot='card-footer'
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  );
-}
-
-export {Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle};
+export {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle};

package/src/components/ui/carousel.tsx

@@ -40,165 +40,177 @@ function useCarousel() {
   return context;
 }
 
-function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & CarouselProps) {
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    },
-    plugins,
-  );
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-  const [canScrollNext, setCanScrollNext] = React.useState(false);
-
-  const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return;
-    setCanScrollPrev(api.canScrollPrev());
-    setCanScrollNext(api.canScrollNext());
-  }, []);
-
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
-
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        scrollPrev();
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        scrollNext();
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  ({orientation = "horizontal", opts, setApi, plugins, className, children, ...props}, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
       }
-    },
-    [scrollPrev, scrollNext],
-  );
-
-  React.useEffect(() => {
-    if (!api || !setApi) return;
-    setApi(api);
-  }, [api, setApi]);
 
-  React.useEffect(() => {
-    if (!api) return;
-    onSelect(api);
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
 
-    return () => {
-      api?.off("select", onSelect);
-    };
-  }, [api, onSelect]);
+      setApi(api);
+    }, [api, setApi]);
 
-  return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api,
-        opts,
-        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}>
-      <div
-        onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
-        role='region'
-        aria-roledescription='carousel'
-        data-slot='carousel'
-        {...props}>
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  );
-}
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
 
-function CarouselContent({className, ...props}: React.ComponentProps<"div">) {
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}>
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role='region'
+          aria-roledescription='carousel'
+          {...props}>
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => {
   const {carouselRef, orientation} = useCarousel();
 
   return (
     <div
       ref={carouselRef}
-      className='overflow-hidden'
-      data-slot='carousel-content'>
+      className='overflow-hidden'>
       <div
+        ref={ref}
         className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
         {...props}
       />
     </div>
   );
-}
+});
+CarouselContent.displayName = "CarouselContent";
 
-function CarouselItem({className, ...props}: React.ComponentProps<"div">) {
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => {
   const {orientation} = useCarousel();
 
   return (
     <div
+      ref={ref}
       role='group'
       aria-roledescription='slide'
-      data-slot='carousel-item'
       className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
       {...props}
     />
   );
-}
-
-function CarouselPrevious({className, variant = "outline", size = "icon", ...props}: React.ComponentProps<typeof Button>) {
-  const {orientation, scrollPrev, canScrollPrev} = useCarousel();
-
-  return (
-    <Button
-      data-slot='carousel-previous'
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}>
-      <ArrowLeft />
-      <span className='sr-only'>Previous slide</span>
-    </Button>
-  );
-}
-
-function CarouselNext({className, variant = "outline", size = "icon", ...props}: React.ComponentProps<typeof Button>) {
-  const {orientation, scrollNext, canScrollNext} = useCarousel();
-
-  return (
-    <Button
-      data-slot='carousel-next'
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}>
-      <ArrowRight />
-      <span className='sr-only'>Next slide</span>
-    </Button>
-  );
-}
+});
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({className, variant = "outline", size = "icon", ...props}, ref) => {
+    const {orientation, scrollPrev, canScrollPrev} = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}>
+        <ArrowLeft className='h-4 w-4' />
+        <span className='sr-only'>Previous slide</span>
+      </Button>
+    );
+  },
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({className, variant = "outline", size = "icon", ...props}, ref) => {
+    const {orientation, scrollNext, canScrollNext} = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}>
+        <ArrowRight className='h-4 w-4' />
+        <span className='sr-only'>Next slide</span>
+      </Button>
+    );
+  },
+);
+CarouselNext.displayName = "CarouselNext";
 
 export {Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi};