@codefast/ui 0.0.3 → 0.0.4

package/src/avatar.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Avatar
+ * -------------------------------------------------------------------------- */
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  AvatarPrimitive.AvatarProps
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AvatarImage
+ * -------------------------------------------------------------------------- */
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  AvatarPrimitive.AvatarImageProps
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AvatarFallback
+ * -------------------------------------------------------------------------- */
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  AvatarPrimitive.AvatarFallbackProps
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "bg-muted flex h-full w-full items-center justify-center rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/badge.tsx

@@ -0,0 +1,43 @@
+import { type VariantProps } from "cva";
+import { cva } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Badge
+ * -------------------------------------------------------------------------- */
+
+const badgeVariants = cva({
+  base: "focus:ring-ring 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",
+  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",
+      destructive:
+        "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
+      outline: "text-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+/* -----------------------------------------------------------------------------
+ * Component: Badge
+ * -------------------------------------------------------------------------- */
+
+function Badge({
+  className,
+  variant,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof badgeVariants>): React.JSX.Element {
+  return <div className={badgeVariants({ variant, className })} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Badge };

package/src/breadcrumb.tsx

@@ -0,0 +1,148 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+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} />);
+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}
+  />
+));
+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}
+  />
+));
+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}
+    />
+  );
+});
+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}
+  />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbSeparator
+ * -------------------------------------------------------------------------- */
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.LiHTMLAttributes<HTMLLIElement>): React.JSX.Element {
+  return (
+    <li
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon />}
+    </li>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbEllipsis
+ * -------------------------------------------------------------------------- */
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element {
+  return (
+    <span
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <DotsHorizontalIcon className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/src/button.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps } from "cva";
-import { cva } from "./cva";
+import { cva } from "./utils";
 
 /* -----------------------------------------------------------------------------
  * Variant: Button
@@ -25,6 +25,7 @@ const buttonVariants = cva({
       default: "h-9 px-4",
       lg: "h-10 px-8",
       sm: "h-8 px-3 text-xs",
+      icon: "h-9 w-9",
     },
   },
   defaultVariants: {
@@ -57,11 +58,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     );
   },
 );
-
 Button.displayName = "Button";
 
 /* -----------------------------------------------------------------------------
- * Export
+ * Exports
  * -------------------------------------------------------------------------- */
 
 export { Button, buttonVariants, type ButtonProps };

package/src/calendar.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import * as React from "react";
+import {
+  DayPicker,
+  type DayPickerProps,
+  type StyledComponent,
+  type DateRange,
+} from "react-day-picker";
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { buttonVariants } from "./button";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Calendar
+ * -------------------------------------------------------------------------- */
+
+function ChevronLeft({
+  children: _,
+  ...props
+}: StyledComponent): React.JSX.Element {
+  return <ChevronLeftIcon className="size-4" {...props} />;
+}
+
+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 {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: buttonVariants({
+          variant: "outline",
+          className: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        }),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md",
+        ),
+        day: buttonVariants({
+          variant: "ghost",
+          className: "h-8 w-8 p-0 font-normal aria-selected:opacity-100",
+        }),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        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_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ChevronLeft,
+        IconRight: ChevronRight,
+      }}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Calendar, type DateRange };

package/src/card.tsx

@@ -1,25 +1,112 @@
-export function Card({
-  className,
-  title,
-  children,
-  href,
-}: {
-  className?: string;
-  title: string;
-  children: React.ReactNode;
-  href: string;
-}): React.JSX.Element {
-  return (
-    <a
-      className={className}
-      href={`${href}?utm_source=create-turbo&utm_medium=basic&utm_campaign=create-turbo"`}
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <h2>
-        {title} <span>-&gt;</span>
-      </h2>
-      <p>{children}</p>
-    </a>
-  );
-}
+import * as React from "react";
+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-xl border shadow",
+      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}
+  />
+));
+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>
+));
+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}
+  />
+));
+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} />
+));
+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}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};