@codefast/ui 0.0.8 → 0.0.10

package/src/breadcrumb.tsx

@@ -7,79 +7,80 @@ 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} />);
+type BreadcrumbElement = HTMLElement;
+
+interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+  separator?: React.ReactNode;
+}
+
+const Breadcrumb = React.forwardRef<BreadcrumbElement, 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) => (
+type BreadcrumbListElement = HTMLOListElement;
+type BreadcrumbListProps = React.OlHTMLAttributes<HTMLOListElement>;
+
+const BreadcrumbList = React.forwardRef<BreadcrumbListElement, 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",
+      "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 BreadcrumbItemElement = HTMLLIElement;
+type BreadcrumbItemProps = React.LiHTMLAttributes<HTMLLIElement>;
+
+const BreadcrumbItem = React.forwardRef<BreadcrumbItemElement, 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";
+type BreadcrumbLinkElement = HTMLAnchorElement;
+
+interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  asChild?: boolean;
+}
+
+const BreadcrumbLink = React.forwardRef<BreadcrumbLinkElement, BreadcrumbLinkProps>(
+  ({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+
+    return <Comp ref={ref} className={cn("transition-colors", "hover:text-foreground", className)} {...props} />;
+  },
+);
 
-  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) => (
+type BreadcrumbPageElement = HTMLSpanElement;
+type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;
+
+const BreadcrumbPage = React.forwardRef<BreadcrumbPageElement, BreadcrumbPageProps>(({ className, ...props }, ref) => (
   <span
     ref={ref}
     role="link"
@@ -89,24 +90,18 @@ const BreadcrumbPage = React.forwardRef<
     {...props}
   />
 ));
+
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbSeparator
  * -------------------------------------------------------------------------- */
 
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: React.LiHTMLAttributes<HTMLLIElement>): React.JSX.Element {
+type BreadcrumbSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
+
+function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): React.JSX.Element {
   return (
-    <li
-      role="presentation"
-      aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
-      {...props}
-    >
+    <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
       {children ?? <ChevronRightIcon />}
     </li>
   );
@@ -116,10 +111,9 @@ function BreadcrumbSeparator({
  * Component: BreadcrumbEllipsis
  * -------------------------------------------------------------------------- */
 
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element {
+type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;
+
+function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): React.JSX.Element {
   return (
     <span
       role="presentation"
@@ -145,4 +139,11 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
+  type BreadcrumbProps,
+  type BreadcrumbListProps,
+  type BreadcrumbItemProps,
+  type BreadcrumbLinkProps,
+  type BreadcrumbPageProps,
+  type BreadcrumbSeparatorProps,
+  type BreadcrumbEllipsisProps,
 };

package/src/button.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps } from "cva";
+import { Spinner } from "./spinner";
 import { cva } from "./utils";
 
 /* -----------------------------------------------------------------------------
@@ -8,18 +9,19 @@ import { cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const buttonVariants = cva({
-  base: "focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  base: [
+    "inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  ],
   variants: {
     variant: {
       default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow",
-      destructive:
-        "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
+      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
       ghost: "hover:bg-accent hover:text-accent-foreground",
       link: "text-primary underline-offset-4 hover:underline",
-      outline:
-        "border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm",
-      secondary:
-        "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm",
+      outline: "border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm",
     },
     size: {
       default: "h-10 px-4",
@@ -31,41 +33,68 @@ const buttonVariants = cva({
       "icon-sm": "size-9",
       "icon-lg": "size-11",
     },
+    loading: {
+      true: "relative",
+    },
   },
   defaultVariants: {
     size: "default",
     variant: "default",
+    loading: false,
   },
 });
 
+type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
+
 /* -----------------------------------------------------------------------------
  * Component: Button
  * -------------------------------------------------------------------------- */
 
-interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+type ButtonElement = HTMLButtonElement;
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariantsProps {
   asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+const Button = React.forwardRef<ButtonElement, ButtonProps>(
+  ({ children, className, variant, size, loading = false, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
+    const disabled = loading || props.disabled;
 
     return (
       <Comp
         ref={ref}
         type={asChild ? undefined : "button"}
-        className={buttonVariants({ variant, size, className })}
+        className={buttonVariants({ variant, size, loading, className })}
         {...props}
-      />
+        disabled={disabled}
+      >
+        {loading ? (
+          <>
+            <span
+              aria-hidden
+              className="invisible contents"
+              // Workaround to use `inert` until https://github.com/facebook/react/pull/24730 is merged.
+              {...{ inert: "" }}
+            >
+              {children}
+            </span>
+            <span className="absolute inset-0 flex items-center justify-center">
+              <Spinner />
+            </span>
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
     );
   },
 );
+
 Button.displayName = "Button";
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Button, buttonVariants, type ButtonProps };
+export { Button, buttonVariants, type ButtonProps, type ButtonVariantsProps };

package/src/calendar.tsx

@@ -1,12 +1,7 @@
 "use client";
 
 import * as React from "react";
-import {
-  type DateRange,
-  DayPicker,
-  type DayPickerProps,
-  type StyledComponent,
-} from "react-day-picker";
+import { type DateRange, DayPicker, type DayPickerProps, type StyledComponent } from "react-day-picker";
 import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 import { buttonVariants } from "./button";
 import { cn } from "./utils";
@@ -15,26 +10,17 @@ import { cn } from "./utils";
  * Component: Calendar
  * -------------------------------------------------------------------------- */
 
-function ChevronLeft({
-  children: _,
-  ...props
-}: StyledComponent): React.JSX.Element {
+function ChevronLeft({ children: _, ...props }: StyledComponent): React.JSX.Element {
   return <ChevronLeftIcon className="size-4" {...props} />;
 }
 
-function ChevronRight({
-  children: _,
-  ...props
-}: StyledComponent): React.JSX.Element {
+function ChevronRight({ children: _, ...props }: StyledComponent): React.JSX.Element {
   return <ChevronRightIcon className="size-4" {...props} />;
 }
 
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: DayPickerProps): React.JSX.Element {
+type CalendarProps = DayPickerProps;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps): React.JSX.Element {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
@@ -73,8 +59,7 @@ function Calendar({
         day_outside:
           "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
         day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
         day_hidden: "invisible",
         ...classNames,
       }}
@@ -91,4 +76,4 @@ function Calendar({
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Calendar, type DateRange };
+export { Calendar, type CalendarProps, type DateRange };

package/src/card.tsx

@@ -5,97 +5,82 @@ 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 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
  * -------------------------------------------------------------------------- */
 
-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 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
  * -------------------------------------------------------------------------- */
 
-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}
-  >
+type CardTitleElement = HTMLParagraphElement;
+type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+
+const CardTitle = React.forwardRef<CardTitleElement, 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
  * -------------------------------------------------------------------------- */
 
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
-));
+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
  * -------------------------------------------------------------------------- */
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+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
  * -------------------------------------------------------------------------- */
 
-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 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";
 
 /* -----------------------------------------------------------------------------
@@ -109,4 +94,10 @@ export {
   CardTitle,
   CardDescription,
   CardContent,
+  type CardProps,
+  type CardHeaderProps,
+  type CardFooterProps,
+  type CardTitleProps,
+  type CardDescriptionProps,
+  type CardContentProps,
 };