@codefast/ui 0.0.9 → 0.0.11

package/src/breadcrumb.tsx

@@ -7,89 +7,90 @@ import { cn } from "./utils";
  * Component: Breadcrumb
  * -------------------------------------------------------------------------- */
 
+type BreadcrumbElement = HTMLElement;
+
 interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
   separator?: React.ReactNode;
 }
-const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
-  ({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />,
-);
+
+const Breadcrumb = React.forwardRef<BreadcrumbElement, BreadcrumbProps>(({ ...props }, ref) => (
+  <nav ref={ref} aria-label="breadcrumb" {...props} />
+));
+
 Breadcrumb.displayName = "Breadcrumb";
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbList
  * -------------------------------------------------------------------------- */
 
+type BreadcrumbListElement = HTMLOListElement;
 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}
-    />
-  ),
-);
+
+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",
+      className,
+    )}
+    {...props}
+  />
+));
+
 BreadcrumbList.displayName = "BreadcrumbList";
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbItem
  * -------------------------------------------------------------------------- */
 
+type BreadcrumbItemElement = HTMLLIElement;
 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}
-    />
-  ),
-);
+
+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
  * -------------------------------------------------------------------------- */
 
-interface BreadcrumbLinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+type BreadcrumbLinkElement = HTMLAnchorElement;
+
+interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   asChild?: boolean;
 }
-const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+
+const BreadcrumbLink = React.forwardRef<BreadcrumbLinkElement, BreadcrumbLinkProps>(
   ({ asChild, className, ...props }, ref) => {
-    const Comp = asChild ? Slot : "a";
-
-    return (
-      <Comp
-        ref={ref}
-        className={cn("hover:text-foreground transition-colors", className)}
-        {...props}
-      />
-    );
+    const Component = asChild ? Slot : "a";
+
+    return <Component ref={ref} className={cn("transition-colors", "hover:text-foreground", className)} {...props} />;
   },
 );
+
 BreadcrumbLink.displayName = "BreadcrumbLink";
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbPage
  * -------------------------------------------------------------------------- */
 
+type BreadcrumbPageElement = HTMLSpanElement;
 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}
-    />
-  ),
-);
+
+const BreadcrumbPage = React.forwardRef<BreadcrumbPageElement, 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";
 
 /* -----------------------------------------------------------------------------
@@ -97,18 +98,10 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
  * -------------------------------------------------------------------------- */
 
 type BreadcrumbSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: BreadcrumbSeparatorProps): React.JSX.Element {
+
+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>
   );
@@ -119,10 +112,8 @@ function BreadcrumbSeparator({
  * -------------------------------------------------------------------------- */
 
 type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}: BreadcrumbEllipsisProps): React.JSX.Element {
+
+function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): React.JSX.Element {
   return (
     <span
       role="presentation"

package/src/button.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps } from "cva";
+import { Fragment } from "react";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { Spinner } from "./spinner";
 import { cva } from "./utils";
 
 /* -----------------------------------------------------------------------------
@@ -8,18 +11,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,10 +35,14 @@ const buttonVariants = cva({
       "icon-sm": "size-9",
       "icon-lg": "size-11",
     },
+    loading: {
+      true: "relative",
+    },
   },
   defaultVariants: {
     size: "default",
     variant: "default",
+    loading: false,
   },
 });
 
@@ -44,26 +52,44 @@ type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
  * Component: Button
  * -------------------------------------------------------------------------- */
 
-interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    ButtonVariantsProps {
+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 Comp = asChild ? Slot : "button";
+const Button = React.forwardRef<ButtonElement, ButtonProps>(
+  ({ children, className, variant, size, loading = false, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot : "button";
+    const ComponentLoading = asChild ? "span" : Fragment;
+    const disabled = loading || props.disabled;
 
     return (
-      <Comp
+      <Component
         ref={ref}
         type={asChild ? undefined : "button"}
-        className={buttonVariants({ variant, size, className })}
+        className={buttonVariants({ variant, size, loading, className })}
         {...props}
-      />
+        disabled={disabled}
+      >
+        {loading ? (
+          <ComponentLoading>
+            <span aria-hidden className="invisible contents">
+              {children}
+            </span>
+            <VisuallyHidden>{children}</VisuallyHidden>
+            <span className="absolute inset-0 flex items-center justify-center">
+              <Spinner />
+            </span>
+          </ComponentLoading>
+        ) : (
+          children
+        )}
+      </Component>
     );
   },
 );
+
 Button.displayName = "Button";
 
 /* -----------------------------------------------------------------------------

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,27 +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} />;
 }
 
 type CalendarProps = DayPickerProps;
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps): React.JSX.Element {
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps): React.JSX.Element {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
@@ -74,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,
       }}

package/src/card.tsx

@@ -5,98 +5,82 @@ import { cn } from "./utils";
  * Component: Card
  * -------------------------------------------------------------------------- */
 
+type CardElement = HTMLDivElement;
 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}
-    />
-  ),
-);
+
+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<HTMLDivElement, CardHeaderProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("flex flex-col space-y-1.5 p-6", className)}
-      {...props}
-    />
-  ),
-);
+
+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<HTMLParagraphElement, CardTitleProps>(
-  ({ className, children, ...props }, ref) => (
-    <h3
-      ref={ref}
-      className={cn("font-semibold leading-none tracking-tight", className)}
-      {...props}
-    >
-      {children}
-    </h3>
-  ),
-);
+
+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
  * -------------------------------------------------------------------------- */
 
+type CardDescriptionElement = HTMLParagraphElement;
 type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  CardDescriptionProps
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
-));
+
+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<HTMLDivElement, CardContentProps>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-  ),
-);
+
+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<HTMLDivElement, CardFooterProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("flex items-center p-6 pt-0", className)}
-      {...props}
-    />
-  ),
-);
+
+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";
 
 /* -----------------------------------------------------------------------------