@srcroot/ui 0.0.61 → 0.0.63

package/src/registry/ui/badge.tsx

@@ -1,52 +1,55 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-    "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-ring focus:ring-offset-2",
-    {
-        variants: {
-            variant: {
-                default:
-                    "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-                secondary:
-                    "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-                destructive:
-                    "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-                outline: "text-foreground",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-        },
-    }
-)
+  "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-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
 
 interface BadgeProps
-    extends React.HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof badgeVariants> { }
+  extends
+    React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
 
 /**
  * Badge component for status indicators
- * 
+ *
  * @example
  * // Default badge
  * <Badge>New</Badge>
- * 
+ *
  * // Destructive variant
  * <Badge variant="destructive">Error</Badge>
  */
 const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
-    ({ className, variant, ...props }, ref) => {
-        return (
-            <span
-                ref={ref}
-                className={cn(badgeVariants({ variant }), className)}
-                {...props}
-            />
-        )
-    }
-)
-Badge.displayName = "Badge"
+  ({ className, variant, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(badgeVariants({ variant }), className)}
+        {...props}
+      />
+    );
+  },
+);
+Badge.displayName = "Badge";
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

package/src/registry/ui/breadcrumb.tsx

@@ -1,10 +1,12 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { Slot } from "@/components/ui/slot"
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Slot } from "@/components/ui/slot";
 
 /**
  * Breadcrumb navigation component
- * 
+ *
  * @example
  * <Breadcrumb>
  *   <BreadcrumbList>
@@ -20,128 +22,126 @@ import { Slot } from "@/components/ui/slot"
  */
 
 const Breadcrumb = React.forwardRef<
-    HTMLElement,
-    React.HTMLAttributes<HTMLElement>
->(({ ...props }, ref) => (
-    <nav ref={ref} aria-label="breadcrumb" {...props} />
-))
-Breadcrumb.displayName = "Breadcrumb"
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement>
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
 
 const BreadcrumbList = React.forwardRef<
-    HTMLOListElement,
-    React.OlHTMLAttributes<HTMLOListElement>
+  HTMLOListElement,
+  React.OlHTMLAttributes<HTMLOListElement>
 >(({ className, ...props }, ref) => (
-    <ol
-        ref={ref}
-        className={cn(
-            "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-            className
-        )}
-        {...props}
-    />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className,
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = "BreadcrumbList";
 
 const BreadcrumbItem = React.forwardRef<
-    HTMLLIElement,
-    React.LiHTMLAttributes<HTMLLIElement>
+  HTMLLIElement,
+  React.LiHTMLAttributes<HTMLLIElement>
 >(({ className, ...props }, ref) => (
-    <li
-        ref={ref}
-        className={cn("inline-flex items-center gap-1.5", className)}
-        {...props}
-    />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
 
 interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    asChild?: boolean
+  asChild?: boolean;
 }
 
 const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
-    ({ asChild, className, children, ...props }, ref) => {
-        const Comp = asChild ? Slot : "a"
+  ({ asChild, className, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
 
-        return (
-            <Comp
-                ref={ref}
-                className={cn("transition-colors hover:text-foreground", className)}
-                {...props}
-            >
-                {children}
-            </Comp>
-        )
-    }
-)
-BreadcrumbLink.displayName = "BreadcrumbLink"
+    return (
+      <Comp
+        ref={ref}
+        className={cn("transition-colors hover:text-foreground", className)}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
 
 const BreadcrumbPage = React.forwardRef<
-    HTMLSpanElement,
-    React.HTMLAttributes<HTMLSpanElement>
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
 >(({ className, ...props }, ref) => (
-    <span
-        ref={ref}
-        role="link"
-        aria-disabled="true"
-        aria-current="page"
-        className={cn("font-normal text-foreground", className)}
-        {...props}
-    />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({
-    children,
-    className,
-    ...props
+  children,
+  className,
+  ...props
 }: React.LiHTMLAttributes<HTMLLIElement>) => (
-    <li
-        role="presentation"
-        aria-hidden="true"
-        className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
-        {...props}
-    >
-        {children || (
-            <svg
-                className="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={2}
-            >
-                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-            </svg>
-        )}
-    </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
+    {...props}
+  >
+    {children || (
+      <svg
+        className="h-4 w-4"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+      </svg>
+    )}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
 const BreadcrumbEllipsis = ({
-    className,
-    ...props
+  className,
+  ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => (
-    <span
-        role="presentation"
-        aria-hidden="true"
-        className={cn("flex h-9 w-9 items-center justify-center", className)}
-        {...props}
-    >
-        <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
-            <circle cx="12" cy="12" r="1" />
-            <circle cx="19" cy="12" r="1" />
-            <circle cx="5" cy="12" r="1" />
-        </svg>
-        <span className="sr-only">More</span>
-    </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" />
+    </svg>
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 
 export {
-    Breadcrumb,
-    BreadcrumbList,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-    BreadcrumbEllipsis,
-}
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/src/registry/ui/button-group.tsx

@@ -1,45 +1,48 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
 const buttonGroupVariants = cva("inline-flex", {
-    variants: {
-        orientation: {
-            horizontal: "flex-row",
-            vertical: "flex-col",
-        },
-        attached: {
-            true: "",
-            false: "gap-2",
-        },
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col",
+    },
+    attached: {
+      true: "",
+      false: "gap-2",
+    },
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      attached: true,
+      className:
+        "[&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child)]:-ml-px",
     },
-    compoundVariants: [
-        {
-            orientation: "horizontal",
-            attached: true,
-            className:
-                "[&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child)]:-ml-px",
-        },
-        {
-            orientation: "vertical",
-            attached: true,
-            className:
-                "[&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child)]:-mt-px",
-        },
-    ],
-    defaultVariants: {
-        orientation: "horizontal",
-        attached: true,
+    {
+      orientation: "vertical",
+      attached: true,
+      className:
+        "[&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child)]:-mt-px",
     },
-})
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    attached: true,
+  },
+});
 
 interface ButtonGroupProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof buttonGroupVariants> { }
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof buttonGroupVariants> {}
 
 /**
  * ButtonGroup to group buttons together
- * 
+ *
  * @example
  * <ButtonGroup>
  *   <Button>Left</Button>
@@ -48,17 +51,20 @@ interface ButtonGroupProps
  * </ButtonGroup>
  */
 const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
-    ({ className, orientation, attached, ...props }, ref) => {
-        return (
-            <div
-                ref={ref}
-                role="group"
-                className={cn(buttonGroupVariants({ orientation, attached }), className)}
-                {...props}
-            />
-        )
-    }
-)
-ButtonGroup.displayName = "ButtonGroup"
+  ({ className, orientation, attached, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="group"
+        className={cn(
+          buttonGroupVariants({ orientation, attached }),
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+ButtonGroup.displayName = "ButtonGroup";
 
-export { ButtonGroup, buttonGroupVariants }
+export { ButtonGroup, buttonGroupVariants };

package/src/registry/ui/card.tsx

@@ -1,9 +1,11 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 /**
  * Card component - Container with header, content, and footer
- * 
+ *
  * @example
  * <Card>
  *   <CardHeader>
@@ -15,74 +17,82 @@ import { cn } from "@/lib/utils"
  * </Card>
  */
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => (
-        <div
-            ref={ref}
-            className={cn(
-                "rounded-xl border bg-card text-card-foreground shadow",
-                className
-            )}
-            {...props}
-        />
-    )
-)
-Card.displayName = "Card"
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
+  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"
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
-    HTMLHeadingElement,
-    React.HTMLAttributes<HTMLHeadingElement>
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-    <h3
-        ref={ref}
-        className={cn("font-semibold leading-none tracking-tight", className)}
-        {...props}
-    />
-))
-CardTitle.displayName = "CardTitle"
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-    <p
-        ref={ref}
-        className={cn("text-sm text-muted-foreground", className)}
-        {...props}
-    />
-))
-CardDescription.displayName = "CardDescription"
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-    <div
-        ref={ref}
-        className={cn("flex items-center p-6 pt-0", className)}
-        {...props}
-    />
-))
-CardFooter.displayName = "CardFooter"
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};