@srcroot/ui 0.0.61 → 0.0.62

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

package/src/registry/ui/container.tsx

@@ -1,44 +1,47 @@
-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 containerVariants = cva("mx-auto w-full px-4", {
-    variants: {
-        size: {
-            sm: "max-w-screen-sm",
-            md: "max-w-screen-md",
-            lg: "max-w-screen-lg",
-            xl: "max-w-screen-xl",
-            "2xl": "max-w-screen-2xl",
-            full: "max-w-full",
-        },
-    },
-    defaultVariants: {
-        size: "xl",
+  variants: {
+    size: {
+      sm: "max-w-screen-sm",
+      md: "max-w-screen-md",
+      lg: "max-w-screen-lg",
+      xl: "max-w-screen-xl",
+      "2xl": "max-w-screen-2xl",
+      full: "max-w-full",
     },
-})
+  },
+  defaultVariants: {
+    size: "xl",
+  },
+});
 
 interface ContainerProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof containerVariants> { }
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof containerVariants> {}
 
 /**
  * Container for max-width layouts
- * 
+ *
  * @example
  * <Container size="lg">Content</Container>
  */
 const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
-    ({ className, size, ...props }, ref) => {
-        return (
-            <div
-                ref={ref}
-                className={cn(containerVariants({ size }), className)}
-                {...props}
-            />
-        )
-    }
-)
-Container.displayName = "Container"
+  ({ className, size, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(containerVariants({ size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+Container.displayName = "Container";
 
-export { Container, containerVariants }
+export { Container, containerVariants };

package/src/registry/ui/empty-state.tsx

@@ -1,38 +1,40 @@
-import { cn } from "@/lib/utils"
+"use client";
+
+import { cn } from "@/lib/utils";
 
 interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
-    icon?: React.ElementType
-    title: string
-    description: string
-    action?: React.ReactNode
+  icon?: React.ElementType;
+  title: string;
+  description: string;
+  action?: React.ReactNode;
 }
 
 export function EmptyState({
-    icon: Icon,
-    title,
-    description,
-    action,
-    className,
-    ...props
+  icon: Icon,
+  title,
+  description,
+  action,
+  className,
+  ...props
 }: EmptyStateProps) {
-    return (
-        <div
-            className={cn(
-                "flex flex-col items-center justify-center py-12 text-center border-2 border-dashed rounded-lg bg-muted/5",
-                className
-            )}
-            {...props}
-        >
-            {Icon && (
-                <div className="flex h-20 w-20 items-center justify-center rounded-full bg-muted/50 mb-4">
-                    <Icon className="h-10 w-10 text-muted-foreground" />
-                </div>
-            )}
-            <h3 className="text-lg font-semibold tracking-tight">{title}</h3>
-            <p className="text-muted-foreground text-sm max-w-sm mt-2 mb-6">
-                {description}
-            </p>
-            {action && <div>{action}</div>}
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center py-12 text-center border-2 border-dashed rounded-lg bg-muted/5",
+        className,
+      )}
+      {...props}
+    >
+      {Icon && (
+        <div className="flex h-20 w-20 items-center justify-center rounded-full bg-muted/50 mb-4">
+          <Icon className="h-10 w-10 text-muted-foreground" />
         </div>
-    )
+      )}
+      <h3 className="text-lg font-semibold tracking-tight">{title}</h3>
+      <p className="text-muted-foreground text-sm max-w-sm mt-2 mb-6">
+        {description}
+      </p>
+      {action && <div>{action}</div>}
+    </div>
+  );
 }