@codefast/ui 0.0.8 → 0.0.9

package/src/breadcrumb.tsx

@@ -7,99 +7,101 @@ import { cn } from "./utils";
  * Component: Breadcrumb
  * -------------------------------------------------------------------------- */
 
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement> & {
-    separator?: React.ReactNode;
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+  separator?: React.ReactNode;
+}
+const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
+  ({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />,
+);
 Breadcrumb.displayName = "Breadcrumb";
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbList
  * -------------------------------------------------------------------------- */
 
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.OlHTMLAttributes<HTMLOListElement>
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
-      className,
-    )}
-    {...props}
-  />
-));
+type BreadcrumbListProps = React.OlHTMLAttributes<HTMLOListElement>;
+const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
 BreadcrumbList.displayName = "BreadcrumbList";
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbItem
  * -------------------------------------------------------------------------- */
 
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.LiHTMLAttributes<HTMLLIElement>
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-));
+type BreadcrumbItemProps = React.LiHTMLAttributes<HTMLLIElement>;
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
+  ({ className, ...props }, ref) => (
+    <li
+      ref={ref}
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  ),
+);
 BreadcrumbItem.displayName = "BreadcrumbItem";
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbLink
  * -------------------------------------------------------------------------- */
 
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    asChild?: boolean;
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a";
-
-  return (
-    <Comp
-      ref={ref}
-      className={cn("hover:text-foreground transition-colors", className)}
-      {...props}
-    />
-  );
-});
+interface BreadcrumbLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  asChild?: boolean;
+}
+const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+  ({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn("hover:text-foreground transition-colors", className)}
+        {...props}
+      />
+    );
+  },
+);
 BreadcrumbLink.displayName = "BreadcrumbLink";
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbPage
  * -------------------------------------------------------------------------- */
 
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.HTMLAttributes<HTMLSpanElement>
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("text-foreground font-normal", className)}
-    {...props}
-  />
-));
+type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  ),
+);
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbSeparator
  * -------------------------------------------------------------------------- */
 
+type BreadcrumbSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
 function BreadcrumbSeparator({
   children,
   className,
   ...props
-}: React.LiHTMLAttributes<HTMLLIElement>): React.JSX.Element {
+}: BreadcrumbSeparatorProps): React.JSX.Element {
   return (
     <li
       role="presentation"
@@ -116,10 +118,11 @@ function BreadcrumbSeparator({
  * Component: BreadcrumbEllipsis
  * -------------------------------------------------------------------------- */
 
+type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;
 function BreadcrumbEllipsis({
   className,
   ...props
-}: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element {
+}: BreadcrumbEllipsisProps): React.JSX.Element {
   return (
     <span
       role="presentation"
@@ -145,4 +148,11 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
+  type BreadcrumbProps,
+  type BreadcrumbListProps,
+  type BreadcrumbItemProps,
+  type BreadcrumbLinkProps,
+  type BreadcrumbPageProps,
+  type BreadcrumbSeparatorProps,
+  type BreadcrumbEllipsisProps,
 };

package/src/button.tsx

@@ -38,13 +38,15 @@ const buttonVariants = cva({
   },
 });
 
+type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
+
 /* -----------------------------------------------------------------------------
  * Component: Button
  * -------------------------------------------------------------------------- */
 
 interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+    ButtonVariantsProps {
   asChild?: boolean;
 }
 
@@ -68,4 +70,4 @@ Button.displayName = "Button";
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Button, buttonVariants, type ButtonProps };
+export { Button, buttonVariants, type ButtonProps, type ButtonVariantsProps };

package/src/calendar.tsx

@@ -29,12 +29,13 @@ function ChevronRight({
   return <ChevronRightIcon className="size-4" {...props} />;
 }
 
+type CalendarProps = DayPickerProps;
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
   ...props
-}: DayPickerProps): React.JSX.Element {
+}: CalendarProps): React.JSX.Element {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
@@ -91,4 +92,4 @@ function Calendar({
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Calendar, type DateRange };
+export { Calendar, type CalendarProps, type DateRange };

package/src/card.tsx

@@ -5,62 +5,63 @@ import { cn } from "./utils";
  * Component: Card
  * -------------------------------------------------------------------------- */
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "bg-card text-card-foreground rounded-lg border shadow-sm",
-      className,
-    )}
-    {...props}
-  />
-));
+type CardProps = React.HTMLAttributes<HTMLDivElement>;
+const Card = React.forwardRef<HTMLDivElement, 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
  * -------------------------------------------------------------------------- */
 
-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}
-  />
-));
+type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+const CardHeader = React.forwardRef<HTMLDivElement, 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
  * -------------------------------------------------------------------------- */
 
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, children, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  >
-    {children}
-  </h3>
-));
+type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+const CardTitle = React.forwardRef<HTMLParagraphElement, CardTitleProps>(
+  ({ className, children, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    >
+      {children}
+    </h3>
+  ),
+);
 CardTitle.displayName = "CardTitle";
 
 /* -----------------------------------------------------------------------------
  * Component: CardDescription
  * -------------------------------------------------------------------------- */
 
+type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  CardDescriptionProps
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
@@ -74,28 +75,28 @@ CardDescription.displayName = "CardDescription";
  * Component: CardContent
  * -------------------------------------------------------------------------- */
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-));
+type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  ),
+);
 CardContent.displayName = "CardContent";
 
 /* -----------------------------------------------------------------------------
  * Component: CardFooter
  * -------------------------------------------------------------------------- */
 
-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}
-  />
-));
+type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
+const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  ),
+);
 CardFooter.displayName = "CardFooter";
 
 /* -----------------------------------------------------------------------------
@@ -109,4 +110,10 @@ export {
   CardTitle,
   CardDescription,
   CardContent,
+  type CardProps,
+  type CardHeaderProps,
+  type CardFooterProps,
+  type CardTitleProps,
+  type CardDescriptionProps,
+  type CardContentProps,
 };

package/src/carousel.tsx

@@ -6,7 +6,7 @@ import useEmblaCarousel, {
 } from "embla-carousel-react";
 import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
 import { cn } from "./utils";
-import { Button } from "./button";
+import { Button, type ButtonProps } from "./button";
 
 /* -----------------------------------------------------------------------------
  * Context: Carousel
@@ -17,7 +17,7 @@ type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
 type CarouselPlugin = UseCarouselParameters[1];
 
-interface CarouselProps {
+interface BaseCarouselProps {
   opts?: CarouselOptions;
   plugins?: CarouselPlugin;
   orientation?: "horizontal" | "vertical";
@@ -31,7 +31,7 @@ type CarouselContextProps = {
   scrollNext: () => void;
   canScrollPrev: boolean;
   canScrollNext: boolean;
-} & CarouselProps;
+} & BaseCarouselProps;
 
 const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
@@ -49,10 +49,8 @@ function useCarousel(): CarouselContextProps {
  * Component: Carousel
  * -------------------------------------------------------------------------- */
 
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
+type CarouselProps = React.HTMLAttributes<HTMLDivElement> & BaseCarouselProps;
+const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
   (
     { orientation, opts, setApi, plugins, className, children, ...props },
     ref,
@@ -153,61 +151,62 @@ Carousel.displayName = "Carousel";
  * Component: CarouselContent
  * -------------------------------------------------------------------------- */
 
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
+type CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;
+const CarouselContent = React.forwardRef<HTMLDivElement, CarouselContentProps>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
 
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-});
+    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 = "CarouselContent";
 
 /* -----------------------------------------------------------------------------
  * Component: CarouselItem
  * -------------------------------------------------------------------------- */
 
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
+type CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;
+const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
 
-  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}
-    />
-  );
-});
+    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 = "CarouselItem";
 
 /* -----------------------------------------------------------------------------
  * Component: CarouselPrevious
  * -------------------------------------------------------------------------- */
 
+type CarouselPreviousProps = ButtonProps;
 const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<typeof Button>
+  CarouselPreviousProps
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
@@ -238,33 +237,33 @@ CarouselPrevious.displayName = "CarouselPrevious";
  * Component: CarouselNext
  * -------------------------------------------------------------------------- */
 
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
+type CarouselNextProps = ButtonProps;
+const CarouselNext = React.forwardRef<HTMLButtonElement, CarouselNextProps>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
 
-  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>
-  );
-});
+    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 = "CarouselNext";
 
 /* -----------------------------------------------------------------------------
@@ -278,4 +277,9 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
+  type CarouselProps,
+  type CarouselContentProps,
+  type CarouselItemProps,
+  type CarouselPreviousProps,
+  type CarouselNextProps,
 };

package/src/checkbox.tsx

@@ -9,9 +9,10 @@ import { cn } from "./utils";
  * Component: Checkbox
  * -------------------------------------------------------------------------- */
 
+type CheckboxProps = CheckboxPrimitive.CheckboxProps;
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxPrimitive.CheckboxProps
+  CheckboxProps
 >(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
@@ -32,4 +33,4 @@ Checkbox.displayName = CheckboxPrimitive.Root.displayName;
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Checkbox };
+export { Checkbox, type CheckboxProps };

package/src/code.tsx

@@ -5,18 +5,20 @@ import { Slot } from "@radix-ui/react-slot";
  * Component: Code
  * -------------------------------------------------------------------------- */
 
-const Code = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement> & { asChild?: boolean }
->(({ asChild, ...props }, ref) => {
-  const Comp = asChild ? Slot : "code";
+interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+  asChild?: boolean;
+}
+const Code = React.forwardRef<HTMLElement, CodeProps>(
+  ({ asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "code";
 
-  return <Comp ref={ref} {...props} />;
-});
+    return <Comp ref={ref} {...props} />;
+  },
+);
 Code.displayName = "Code";
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Code };
+export { Code, type CodeProps };