@codefast/ui 0.0.38 → 0.0.40

package/src/react/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Card
+ * -------------------------------------------------------------------------- */
+
+type CardElement = HTMLDivElement;
+type CardProps = React.HTMLAttributes<HTMLDivElement>;
+
+const Card = React.forwardRef<CardElement, CardProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)} {...props} />
+));
+
+Card.displayName = "Card";
+
+/* -----------------------------------------------------------------------------
+ * Component: CardHeader
+ * -------------------------------------------------------------------------- */
+
+type CardHeaderElement = HTMLDivElement;
+type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+
+const CardHeader = React.forwardRef<CardHeaderElement, CardHeaderProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+));
+
+CardHeader.displayName = "CardHeader";
+
+/* -----------------------------------------------------------------------------
+ * Component: CardTitle
+ * -------------------------------------------------------------------------- */
+
+type CardTitleElement = HTMLParagraphElement;
+type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+
+const CardTitle = React.forwardRef<CardTitleElement, CardTitleProps>(({ children, className, ...props }, ref) => (
+  <h3 ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props}>
+    {children}
+  </h3>
+));
+
+CardTitle.displayName = "CardTitle";
+
+/* -----------------------------------------------------------------------------
+ * Component: CardDescription
+ * -------------------------------------------------------------------------- */
+
+type CardDescriptionElement = HTMLParagraphElement;
+type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+
+const CardDescription = React.forwardRef<CardDescriptionElement, CardDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+  ),
+);
+
+CardDescription.displayName = "CardDescription";
+
+/* -----------------------------------------------------------------------------
+ * Component: CardContent
+ * -------------------------------------------------------------------------- */
+
+type CardContentElement = HTMLDivElement;
+type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+
+const CardContent = React.forwardRef<CardContentElement, CardContentProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+
+CardContent.displayName = "CardContent";
+
+/* -----------------------------------------------------------------------------
+ * Component: CardFooter
+ * -------------------------------------------------------------------------- */
+
+type CardFooterElement = HTMLDivElement;
+type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
+
+const CardFooter = React.forwardRef<CardFooterElement, CardFooterProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+));
+
+CardFooter.displayName = "CardFooter";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  type CardProps,
+  type CardHeaderProps,
+  type CardFooterProps,
+  type CardTitleProps,
+  type CardDescriptionProps,
+  type CardContentProps,
+};

package/src/react/carousel.tsx

@@ -0,0 +1,299 @@
+"use client";
+
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+import { createContextScope, type Scope } from "@radix-ui/react-context";
+import { cn } from "../lib/utils";
+import { Button, type ButtonProps } from "./button";
+
+/* -----------------------------------------------------------------------------
+ * Context: Carousel
+ * -------------------------------------------------------------------------- */
+
+const CAROUSEL_NAME = "Carousel";
+
+type ScopedProps<P> = P & { __scopeCarousel?: Scope };
+
+const [createCarouselContext] = createContextScope(CAROUSEL_NAME);
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+interface BaseCarouselProps {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+}
+
+type CarouselContextValue = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & BaseCarouselProps;
+
+const [CarouselProvider, useCarouselContext] = createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);
+
+/* -----------------------------------------------------------------------------
+ * Component: Carousel
+ * -------------------------------------------------------------------------- */
+
+type CarouselElement = HTMLDivElement;
+type CarouselProps = React.HTMLAttributes<HTMLDivElement> & BaseCarouselProps;
+
+const Carousel = React.forwardRef<CarouselElement, CarouselProps>(
+  (
+    { __scopeCarousel, children, orientation, opts, setApi, plugins, className, ...props }: ScopedProps<CarouselProps>,
+    ref,
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "vertical" ? "y" : "x",
+      },
+      plugins,
+    );
+
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((carouselApi: CarouselApi) => {
+      if (!carouselApi) {
+        return;
+      }
+
+      setCanScrollPrev(carouselApi.canScrollPrev());
+      setCanScrollNext(carouselApi.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;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselProvider
+        scope={__scopeCarousel}
+        carouselRef={carouselRef}
+        api={api}
+        opts={opts}
+        orientation={orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal")}
+        scrollPrev={scrollPrev}
+        scrollNext={scrollNext}
+        canScrollPrev={canScrollPrev}
+        canScrollNext={canScrollNext}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselProvider>
+    );
+  },
+);
+
+Carousel.displayName = CAROUSEL_NAME;
+
+/* -----------------------------------------------------------------------------
+ * Component: CarouselContent
+ * -------------------------------------------------------------------------- */
+
+const CAROUSEL_CONTENT_NAME = "CarouselContent";
+
+type CarouselContentElement = HTMLDivElement;
+type CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;
+
+const CarouselContent = React.forwardRef<CarouselContentElement, CarouselContentProps>(
+  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselContentProps>, ref) => {
+    const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
+
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+
+CarouselContent.displayName = CAROUSEL_CONTENT_NAME;
+
+/* -----------------------------------------------------------------------------
+ * Component: CarouselItem
+ * -------------------------------------------------------------------------- */
+
+const CAROUSEL_ITEM_NAME = "CarouselItem";
+
+type CarouselItemElement = HTMLDivElement;
+type CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;
+
+const CarouselItem = React.forwardRef<CarouselItemElement, CarouselItemProps>(
+  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselItemProps>, ref) => {
+    const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
+        {...props}
+      />
+    );
+  },
+);
+
+CarouselItem.displayName = CAROUSEL_ITEM_NAME;
+
+/* -----------------------------------------------------------------------------
+ * Component: CarouselPrevious
+ * -------------------------------------------------------------------------- */
+
+const CAROUSEL_PREVIOUS_NAME = "CarouselPrevious";
+
+type CarouselPreviousElement = HTMLButtonElement;
+type CarouselPreviousProps = ButtonProps;
+
+const CarouselPrevious = React.forwardRef<CarouselPreviousElement, CarouselPreviousProps>(
+  (
+    { __scopeCarousel, className, variant = "outline", size = "icon", ...props }: ScopedProps<CarouselPreviousProps>,
+    ref,
+  ) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute size-8 rounded-full",
+          orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeftIcon className="size-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  },
+);
+
+CarouselPrevious.displayName = CAROUSEL_PREVIOUS_NAME;
+
+/* -----------------------------------------------------------------------------
+ * Component: CarouselNext
+ * -------------------------------------------------------------------------- */
+
+const CAROUSEL_NEXT_NAME = "CarouselNext";
+
+type CarouselNextElement = HTMLButtonElement;
+type CarouselNextProps = ButtonProps;
+
+const CarouselNext = React.forwardRef<CarouselNextElement, CarouselNextProps>(
+  (
+    { __scopeCarousel, className, variant = "outline", size = "icon", ...props }: ScopedProps<CarouselNextProps>,
+    ref,
+  ) => {
+    const { orientation, scrollNext, canScrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute size-8 rounded-full",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRightIcon className="size-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  },
+);
+
+CarouselNext.displayName = CAROUSEL_NEXT_NAME;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  type CarouselProps,
+  type CarouselContentProps,
+  type CarouselItemProps,
+  type CarouselPreviousProps,
+  type CarouselNextProps,
+};

package/src/react/checkbox-cards.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import * as React from "react";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { cn } from "../lib/utils";
+import * as CheckboxGroupPrimitive from "./checkbox-group.primitive";
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxCards
+ * -------------------------------------------------------------------------- */
+
+type CheckboxCardsElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
+type CheckboxCardsProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Root>;
+
+const CheckboxCards = React.forwardRef<CheckboxCardsElement, CheckboxCardsProps>(({ className, ...props }, ref) => {
+  return <CheckboxGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
+});
+
+CheckboxCards.displayName = CheckboxGroupPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxCardsItem
+ * -------------------------------------------------------------------------- */
+
+type CheckboxCardsItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
+
+interface CheckboxCardsItemProps extends React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Item> {
+  checkboxClassName?: string;
+}
+
+const CheckboxCardsItem = React.forwardRef<CheckboxCardsItemElement, CheckboxCardsItemProps>(
+  ({ children, className, checkboxClassName, ...props }, ref) => {
+    return (
+      <label className={cn("flex items-center justify-center gap-4 rounded-md border p-4", className)}>
+        {children}
+        <CheckboxGroupPrimitive.Item
+          ref={ref}
+          className={cn(
+            "border-compound/70 aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 cursor-default rounded-sm border shadow focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            checkboxClassName,
+          )}
+          {...props}
+        >
+          <CheckboxGroupPrimitive.CheckboxGroupIndicator className="flex size-full items-center justify-center text-current">
+            <CheckIcon className="size-3.5" />
+          </CheckboxGroupPrimitive.CheckboxGroupIndicator>
+        </CheckboxGroupPrimitive.Item>
+      </label>
+    );
+  },
+);
+
+CheckboxCardsItem.displayName = CheckboxGroupPrimitive.Item.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { CheckboxCards, CheckboxCardsItem, type CheckboxCardsProps, type CheckboxCardsItemProps };

package/src/react/checkbox-group.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { cn } from "../lib/utils";
+import * as CheckboxGroupPrimitive from "./checkbox-group.primitive";
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxGroup
+ * -------------------------------------------------------------------------- */
+
+type CheckboxGroupElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
+type CheckboxGroupProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Root>;
+
+const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(({ className, ...props }, ref) => {
+  return <CheckboxGroupPrimitive.Root ref={ref} className={cn("grid gap-2", className)} {...props} />;
+});
+
+CheckboxGroup.displayName = "CheckboxGroup";
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxGroupItem
+ * -------------------------------------------------------------------------- */
+
+type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
+type CheckboxGroupItemProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Item>;
+
+const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <CheckboxGroupPrimitive.Item
+        ref={ref}
+        className={cn(
+          "border-compound/70 hover:border-compound aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        <CheckboxGroupPrimitive.CheckboxGroupIndicator className="flex size-full items-center justify-center text-current">
+          <CheckIcon className="size-3.5" />
+        </CheckboxGroupPrimitive.CheckboxGroupIndicator>
+      </CheckboxGroupPrimitive.Item>
+    );
+  },
+);
+
+CheckboxGroupItem.displayName = "CheckboxGroupItem";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { CheckboxGroup, CheckboxGroupItem, type CheckboxGroupProps, type CheckboxGroupItemProps };

package/src/react/checkbox.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Checkbox
+ * -------------------------------------------------------------------------- */
+
+type CheckboxElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
+type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
+
+const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "border-compound/70 hover:border-compound aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="flex size-full items-center justify-center text-current">
+      <CheckIcon className="size-3.5" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Checkbox, type CheckboxProps };

package/src/react/collapsible.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import * as React from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Collapsible
+ * -------------------------------------------------------------------------- */
+
+type CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;
+const Collapsible = CollapsiblePrimitive.Root;
+
+/* -----------------------------------------------------------------------------
+ * Component: CollapsibleTrigger
+ * -------------------------------------------------------------------------- */
+
+type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger>;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+/* -----------------------------------------------------------------------------
+ * Component: CollapsibleContent
+ * -------------------------------------------------------------------------- */
+
+type CollapsibleContentElement = React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>;
+type CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>;
+
+const CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(
+  ({ className, ...props }, ref) => (
+    <CollapsiblePrimitive.CollapsibleContent
+      ref={ref}
+      className={cn(
+        "data-[state=open]:animate-collapsible-open data-[state=closed]:animate-collapsible-closed overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+
+CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  type CollapsibleProps,
+  type CollapsibleTriggerProps,
+  type CollapsibleContentProps,
+};