@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/src/components/card.tsx

@@ -0,0 +1,169 @@
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Card
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CardProps = ComponentProps<"div"> & {
+  size?: "default" | "sm";
+};
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Card({ className, size = "default", ...props }: CardProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className,
+      )}
+      data-size={size}
+      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(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        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({ className, ...props }: CardTitleProps): JSX.Element {
+  return (
+    <div
+      className={cn("font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm", className)}
+      data-slot="card-title"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * 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-(--card-spacing)", 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 rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)", 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,349 @@
+import type { UseEmblaCarouselType } from "embla-carousel-react";
+import useEmblaCarousel from "embla-carousel-react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { Context } from "radix-ui/internal";
+import type { ComponentProps, JSX, KeyboardEvent } from "react";
+import { useCallback, useEffect, useState } from "react";
+
+import { Button } from "#/components/button";
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Context: Carousel
+ * -------------------------------------------------------------------------- */
+
+const CAROUSEL_NAME = "Carousel";
+
+type ScopedProps<P> = P & { __scopeCarousel?: Context.Scope };
+
+const [createCarouselContext, createCarouselScope] = Context.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
+        aria-roledescription="carousel"
+        className={cn("relative", className)}
+        data-slot="carousel"
+        role="region"
+        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?: {
+    /** Class applied to the flex track that holds the slides. */
+    content?: string;
+    /** Class applied to the scroll viewport (the `overflow-hidden` element). */
+    wrapper?: string;
+  };
+}
+
+/**
+ * The scroll viewport requires `overflow-hidden` (Embla hides off-screen slides
+ * with it), so any ring/shadow on slide content that sits OUTSIDE the slide's
+ * border-box is clipped where the slide meets the viewport edge. This is
+ * inherent to every Embla-based carousel — the active slide is flush with both
+ * scroll-axis edges, so left/right rings (horizontal) cannot show without
+ * revealing the neighbouring slide.
+ *
+ * To give content shadows/rings breathing room on the CROSS axis (top/bottom
+ * for horizontal carousels), add a negative-margin + matching padding via
+ * `classNames.wrapper`, e.g. `classNames={{ wrapper: "-my-2 py-2" }}`. This
+ * shifts no layout but lets the clip happen `n`px further out.
+ *
+ * @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 h-full 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-sm",
+  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 touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]"
+          : "-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}
+    >
+      <ChevronLeftIcon className="rtl:rotate-180" />
+      <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-sm",
+  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 touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]"
+          : "-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}
+    >
+      <ChevronRightIcon className="rtl:rotate-180" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export type {
+  CarouselApi,
+  CarouselContentProps,
+  CarouselItemProps,
+  CarouselNextProps,
+  CarouselPreviousProps,
+  CarouselProps,
+};
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, createCarouselScope };