@codefast/ui 0.3.16-canary.2 → 0.3.16-canary.3

package/src/components/card.tsx

@@ -0,0 +1,175 @@
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Card
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CardProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Card({ className, ...props }: CardProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-6 overflow-auto py-6",
+        "rounded-xl border",
+        "bg-card text-card-foreground shadow-sm",
+        className,
+      )}
+      data-slot="card"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CardHeader
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CardHeaderProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CardHeader({ className, ...props }: CardHeaderProps): JSX.Element {
+  return (
+    <div
+      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,
+      )}
+      data-slot="card-header"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CardTitle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CardTitleProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CardTitle({ children, className, ...props }: CardTitleProps): JSX.Element {
+  return (
+    <div className={cn("leading-none font-semibold", className)} data-slot="card-title" {...props}>
+      {children}
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CardDescription
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CardDescriptionProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CardDescription({ className, ...props }: CardDescriptionProps): JSX.Element {
+  return (
+    <div
+      className={cn("text-sm text-muted-foreground", className)}
+      data-slot="card-description"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CardContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CardContentProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CardContent({ className, ...props }: CardContentProps): JSX.Element {
+  return <div className={cn("px-6", className)} data-slot="card-content" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CardFooter
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CardFooterProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CardFooter({ className, ...props }: CardFooterProps): JSX.Element {
+  return (
+    <div
+      className={cn("flex items-center", "px-6", "[.border-t]:pt-6", className)}
+      data-slot="card-footer"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CardAction
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CardActionProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CardAction({ className, ...props }: CardActionProps): JSX.Element {
+  return (
+    <div
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      data-slot="card-action"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export type {
+  CardActionProps,
+  CardContentProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardProps,
+  CardTitleProps,
+};

package/src/components/carousel.tsx

@@ -0,0 +1,367 @@
+"use client";
+
+import type { Scope } from "@radix-ui/react-context";
+import type { UseEmblaCarouselType } from "embla-carousel-react";
+import type { ComponentProps, JSX, KeyboardEvent } from "react";
+
+import { cn } from "#/lib/utils";
+import { createContextScope } from "@radix-ui/react-context";
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { Button } from "#/components/button";
+
+/* -----------------------------------------------------------------------------
+ * Context: Carousel
+ * -------------------------------------------------------------------------- */
+
+const CAROUSEL_NAME = "Carousel";
+
+type ScopedProps<P> = P & { __scopeCarousel?: Scope };
+
+const [createCarouselContext, createCarouselScope] = createContextScope(CAROUSEL_NAME);
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+interface BaseCarouselProps {
+  opts?: CarouselOptions;
+  orientation?: "horizontal" | "vertical";
+  plugins?: CarouselPlugin;
+  setApi?: (api: CarouselApi) => void;
+}
+
+type CarouselContextValue = BaseCarouselProps & {
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  canScrollNext: boolean;
+  canScrollPrev: boolean;
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  scrollNext: () => void;
+  scrollPrev: () => void;
+};
+
+const [CarouselContextProvider, useCarouselContext] =
+  createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);
+
+/* -----------------------------------------------------------------------------
+ * Component: Carousel
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface CarouselProps extends BaseCarouselProps, ComponentProps<"div"> {}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Carousel({
+  __scopeCarousel,
+  children,
+  className,
+  opts,
+  orientation,
+  plugins,
+  setApi,
+  ...props
+}: ScopedProps<CarouselProps>): JSX.Element {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "vertical" ? "y" : "x",
+    },
+    plugins,
+  );
+
+  const [canScrollPrevious, setCanScrollPrevious] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  const onSelect = useCallback((carouselApi: CarouselApi) => {
+    if (!carouselApi) {
+      return;
+    }
+
+    setCanScrollPrevious(carouselApi.canScrollPrev());
+    setCanScrollNext(carouselApi.canScrollNext());
+  }, []);
+
+  const scrollPrevious = useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+
+  const scrollNext = useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrevious();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrevious, scrollNext],
+  );
+
+  useEffect(() => {
+    if (!api || !setApi) {
+      return;
+    }
+
+    setApi(api);
+  }, [api, setApi]);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    // Defer onSelect to avoid synchronous setState in effect
+    queueMicrotask(() => {
+      onSelect(api);
+    });
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return (): void => {
+      api.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  return (
+    <CarouselContextProvider
+      api={api}
+      canScrollNext={canScrollNext}
+      canScrollPrev={canScrollPrevious}
+      carouselRef={carouselRef}
+      opts={opts}
+      orientation={orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal")}
+      scope={__scopeCarousel}
+      scrollNext={scrollNext}
+      scrollPrev={scrollPrevious}
+    >
+      <div
+        className={cn("relative", className)}
+        data-slot="carousel"
+        onKeyDownCapture={handleKeyDown}
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContextProvider>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CarouselContent
+ * -------------------------------------------------------------------------- */
+
+const CAROUSEL_CONTENT_NAME = "CarouselContent";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface CarouselContentProps extends ComponentProps<"div"> {
+  classNames?: {
+    content?: string;
+    wrapper?: string;
+  };
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CarouselContent({
+  __scopeCarousel,
+  className,
+  classNames,
+  ...props
+}: ScopedProps<CarouselContentProps>): JSX.Element {
+  const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
+
+  return (
+    <div
+      ref={carouselRef}
+      className={cn("overflow-hidden", classNames?.wrapper)}
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          classNames?.content,
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CarouselItem
+ * -------------------------------------------------------------------------- */
+
+const CAROUSEL_ITEM_NAME = "CarouselItem";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CarouselItemProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CarouselItem({
+  __scopeCarousel,
+  className,
+  ...props
+}: ScopedProps<CarouselItemProps>): JSX.Element {
+  const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
+
+  return (
+    <div
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className,
+      )}
+      data-slot="carousel-item"
+      role="group"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CarouselPrevious
+ * -------------------------------------------------------------------------- */
+
+const CAROUSEL_PREVIOUS_NAME = "CarouselPrevious";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CarouselPreviousProps = ComponentProps<typeof Button>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CarouselPrevious({
+  __scopeCarousel,
+  className,
+  size = "icon",
+  variant = "outline",
+  ...props
+}: ScopedProps<CarouselPreviousProps>): JSX.Element {
+  const { canScrollPrev, orientation, scrollPrev } = useCarouselContext(
+    CAROUSEL_PREVIOUS_NAME,
+    __scopeCarousel,
+  );
+
+  return (
+    <Button
+      aria-label="Previous slide"
+      className={cn(
+        "absolute",
+        "size-8",
+        "shadow-none",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      data-slot="carousel-previous"
+      disabled={!canScrollPrev}
+      size={size}
+      variant={variant}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeftIcon />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CarouselNext
+ * -------------------------------------------------------------------------- */
+
+const CAROUSEL_NEXT_NAME = "CarouselNext";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CarouselNextProps = ComponentProps<typeof Button>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CarouselNext({
+  __scopeCarousel,
+  className,
+  size = "icon",
+  variant = "outline",
+  ...props
+}: ScopedProps<CarouselNextProps>): JSX.Element {
+  const { canScrollNext, orientation, scrollNext } = useCarouselContext(
+    CAROUSEL_NEXT_NAME,
+    __scopeCarousel,
+  );
+
+  return (
+    <Button
+      aria-label="Next slide"
+      className={cn(
+        "absolute",
+        "size-8",
+        "shadow-none",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      data-slot="carousel-next"
+      disabled={!canScrollNext}
+      size={size}
+      variant={variant}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRightIcon />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export type {
+  CarouselApi,
+  CarouselContentProps,
+  CarouselItemProps,
+  CarouselNextProps,
+  CarouselPreviousProps,
+  CarouselProps,
+};
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  createCarouselScope,
+};