@codefast/ui 0.0.7 → 0.0.9

package/src/aspect-ratio.tsx

@@ -6,10 +6,11 @@ import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
  * Component: AspectRatio
  * -------------------------------------------------------------------------- */
 
+type AspectRatioProps = AspectRatioPrimitive.AspectRatioProps;
 const AspectRatio = AspectRatioPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { AspectRatio };
+export { AspectRatio, type AspectRatioProps };

package/src/avatar.tsx

@@ -8,6 +8,7 @@ import { cn } from "./utils";
  * Component: Avatar
  * -------------------------------------------------------------------------- */
 
+type AvatarProps = AvatarPrimitive.AvatarProps;
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   AvatarPrimitive.AvatarProps
@@ -27,9 +28,10 @@ Avatar.displayName = AvatarPrimitive.Root.displayName;
  * Component: AvatarImage
  * -------------------------------------------------------------------------- */
 
+type AvatarImageProps = AvatarPrimitive.AvatarImageProps;
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
-  AvatarPrimitive.AvatarImageProps
+  AvatarImageProps
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
@@ -43,9 +45,10 @@ AvatarImage.displayName = AvatarPrimitive.Image.displayName;
  * Component: AvatarFallback
  * -------------------------------------------------------------------------- */
 
+type AvatarFallbackProps = AvatarPrimitive.AvatarFallbackProps;
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  AvatarPrimitive.AvatarFallbackProps
+  AvatarFallbackProps
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
@@ -62,4 +65,11 @@ AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Avatar, AvatarImage, AvatarFallback };
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  type AvatarProps,
+  type AvatarImageProps,
+  type AvatarFallbackProps,
+};

package/src/badge.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { type VariantProps } from "cva";
 import { cva } from "./utils";
 
@@ -6,15 +7,13 @@ import { cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const badgeVariants = cva({
-  base: "focus:ring-ring focus:ring-offset-background inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  base: "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors",
   variants: {
     variant: {
-      default:
-        "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow",
-      secondary:
-        "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+      default: "bg-primary text-primary-foreground border-transparent shadow",
+      secondary: "bg-secondary text-secondary-foreground border-transparent",
       destructive:
-        "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
+        "bg-destructive text-destructive-foreground border-transparent shadow",
       outline: "text-foreground",
     },
   },
@@ -23,16 +22,18 @@ const badgeVariants = cva({
   },
 });
 
+type BadgeVariantsProps = VariantProps<typeof badgeVariants>;
+
 /* -----------------------------------------------------------------------------
  * Component: Badge
  * -------------------------------------------------------------------------- */
 
+type BadgeProps = React.HTMLAttributes<HTMLDivElement> & BadgeVariantsProps;
 function Badge({
   className,
   variant,
   ...props
-}: React.HTMLAttributes<HTMLDivElement> &
-  VariantProps<typeof badgeVariants>): React.JSX.Element {
+}: BadgeProps): React.JSX.Element {
   return <div className={badgeVariants({ variant, className })} {...props} />;
 }
 
@@ -40,4 +41,4 @@ function Badge({
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Badge };
+export { Badge, type BadgeProps };

package/src/blockquote.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Blockquote
+ * -------------------------------------------------------------------------- */
+
+interface BlockquoteProps
+  extends React.BlockquoteHTMLAttributes<HTMLQuoteElement> {
+  asChild?: boolean;
+}
+const Blockquote = React.forwardRef<HTMLQuoteElement, BlockquoteProps>(
+  ({ asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "blockquote";
+
+    return <Comp ref={ref} {...props} />;
+  },
+);
+Blockquote.displayName = "Blockquote";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Blockquote, type BlockquoteProps };

package/src/box.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Box
+ * -------------------------------------------------------------------------- */
+
+interface BoxDivProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: "div";
+}
+
+interface BoxSpanProps extends React.HTMLAttributes<HTMLSpanElement> {
+  as: "span";
+}
+
+type BoxProps = (BoxDivProps | BoxSpanProps) & {
+  asChild?: boolean;
+};
+
+const Box = React.forwardRef<HTMLDivElement, BoxProps>(
+  ({ as: Tag = "div", asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : Tag;
+
+    return <Comp ref={ref} {...props} />;
+  },
+);
+Box.displayName = "Box";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Box, type BoxProps };

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,
 };