@chat-js/cli 0.6.1 → 0.6.2

package/templates/chat-app/components/ui/breadcrumb.tsx

@@ -5,111 +5,111 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode;
-  }
+	HTMLElement,
+	React.ComponentPropsWithoutRef<"nav"> & {
+		separator?: React.ReactNode;
+	}
 >(({ ...props }, ref) => <nav aria-label="breadcrumb" ref={ref} {...props} />);
 Breadcrumb.displayName = "Breadcrumb";
 
 const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
+	HTMLOListElement,
+	React.ComponentPropsWithoutRef<"ol">
 >(({ className, ...props }, ref) => (
-  <ol
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
-      className
-    )}
-    ref={ref}
-    {...props}
-  />
+	<ol
+		className={cn(
+			"flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
+			className,
+		)}
+		ref={ref}
+		{...props}
+	/>
 ));
 BreadcrumbList.displayName = "BreadcrumbList";
 
 const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
+	HTMLLIElement,
+	React.ComponentPropsWithoutRef<"li">
 >(({ className, ...props }, ref) => (
-  <li
-    className={cn("inline-flex items-center gap-1.5", className)}
-    ref={ref}
-    {...props}
-  />
+	<li
+		className={cn("inline-flex items-center gap-1.5", className)}
+		ref={ref}
+		{...props}
+	/>
 ));
 BreadcrumbItem.displayName = "BreadcrumbItem";
 
 const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean;
-  }
+	HTMLAnchorElement,
+	React.ComponentPropsWithoutRef<"a"> & {
+		asChild?: boolean;
+	}
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a";
+	const Comp = asChild ? Slot : "a";
 
-  return (
-    <Comp
-      className={cn("transition-colors hover:text-foreground", className)}
-      ref={ref}
-      {...props}
-    />
-  );
+	return (
+		<Comp
+			className={cn("transition-colors hover:text-foreground", className)}
+			ref={ref}
+			{...props}
+		/>
+	);
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
 
 const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
+	HTMLSpanElement,
+	React.ComponentPropsWithoutRef<"span">
 >(({ className, ...props }, ref) => (
-  <span
-    aria-current="page"
-    aria-disabled="true"
-    className={cn("font-normal text-foreground", className)}
-    ref={ref}
-    role="link"
-    {...props}
-  />
+	<span
+		aria-current="page"
+		aria-disabled="true"
+		className={cn("font-normal text-foreground", className)}
+		ref={ref}
+		role="link"
+		{...props}
+	/>
 ));
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
+	children,
+	className,
+	...props
 }: React.ComponentProps<"li">) => (
-  <li
-    aria-hidden="true"
-    className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
-    role="presentation"
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </li>
+	<li
+		aria-hidden="true"
+		className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
+		role="presentation"
+		{...props}
+	>
+		{children ?? <ChevronRight />}
+	</li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
 const BreadcrumbEllipsis = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<"span">) => (
-  <span
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    role="presentation"
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
+	<span
+		aria-hidden="true"
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		role="presentation"
+		{...props}
+	>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More</span>
+	</span>
 );
 BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 
 export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
+	Breadcrumb,
+	BreadcrumbEllipsis,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
 };

package/templates/chat-app/components/ui/button-group.tsx

@@ -4,79 +4,79 @@ import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-        vertical:
-          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
-  }
+	"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+	{
+		variants: {
+			orientation: {
+				horizontal:
+					"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+				vertical:
+					"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+			},
+		},
+		defaultVariants: {
+			orientation: "horizontal",
+		},
+	},
 );
 
 function ButtonGroup({
-  className,
-  orientation,
-  ...props
+	className,
+	orientation,
+	...props
 }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
-  return (
-    <div
-      className={cn(buttonGroupVariants({ orientation }), className)}
-      data-orientation={orientation}
-      data-slot="button-group"
-      role="group"
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn(buttonGroupVariants({ orientation }), className)}
+			data-orientation={orientation}
+			data-slot="button-group"
+			role="group"
+			{...props}
+		/>
+	);
 }
 
 function ButtonGroupText({
-  className,
-  asChild = false,
-  ...props
+	className,
+	asChild = false,
+	...props
 }: React.ComponentProps<"div"> & {
-  asChild?: boolean;
+	asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot : "div";
+	const Comp = asChild ? Slot : "div";
 
-  return (
-    <Comp
-      className={cn(
-        "flex items-center gap-2 rounded-md border bg-muted px-4 font-medium text-sm shadow-xs [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-        className
-      )}
-      {...props}
-    />
-  );
+	return (
+		<Comp
+			className={cn(
+				"flex items-center gap-2 rounded-md border bg-muted px-4 font-medium text-sm shadow-xs [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function ButtonGroupSeparator({
-  className,
-  orientation = "vertical",
-  ...props
+	className,
+	orientation = "vertical",
+	...props
 }: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      className={cn(
-        "!m-0 relative self-stretch bg-input data-[orientation=vertical]:h-auto",
-        className
-      )}
-      data-slot="button-group-separator"
-      orientation={orientation}
-      {...props}
-    />
-  );
+	return (
+		<Separator
+			className={cn(
+				"!m-0 relative self-stretch bg-input data-[orientation=vertical]:h-auto",
+				className,
+			)}
+			data-slot="button-group-separator"
+			orientation={orientation}
+			{...props}
+		/>
+	);
 }
 
 export {
-  ButtonGroup,
-  ButtonGroupSeparator,
-  ButtonGroupText,
-  buttonGroupVariants,
+	ButtonGroup,
+	ButtonGroupSeparator,
+	ButtonGroupText,
+	buttonGroupVariants,
 };

package/templates/chat-app/components/ui/button.tsx

@@ -5,56 +5,56 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
+	"inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost:
+					"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
 );
 
 function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
 }: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot : "button";
 
-  return (
-    <Comp
-      className={cn(buttonVariants({ variant, size, className }))}
-      data-slot="button"
-      {...props}
-    />
-  );
+	return (
+		<Comp
+			className={cn(buttonVariants({ variant, size, className }))}
+			data-slot="button"
+			{...props}
+		/>
+	);
 }
 
 export { Button, buttonVariants };

package/templates/chat-app/components/ui/card.tsx

@@ -3,90 +3,90 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
-        className
-      )}
-      data-slot="card"
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn(
+				"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+				className,
+			)}
+			data-slot="card"
+			{...props}
+		/>
+	);
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      data-slot="card-header"
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn(
+				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+				className,
+			)}
+			data-slot="card-header"
+			{...props}
+		/>
+	);
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn("font-semibold leading-none", className)}
-      data-slot="card-title"
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn("font-semibold leading-none", className)}
+			data-slot="card-title"
+			{...props}
+		/>
+	);
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn("text-muted-foreground text-sm", className)}
-      data-slot="card-description"
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn("text-muted-foreground text-sm", className)}
+			data-slot="card-description"
+			{...props}
+		/>
+	);
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      data-slot="card-action"
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn(
+				"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+				className,
+			)}
+			data-slot="card-action"
+			{...props}
+		/>
+	);
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn("px-6", className)}
-      data-slot="card-content"
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn("px-6", className)}
+			data-slot="card-content"
+			{...props}
+		/>
+	);
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      data-slot="card-footer"
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+			data-slot="card-footer"
+			{...props}
+		/>
+	);
 }
 
 export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
+	Card,
+	CardAction,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
 };

package/templates/chat-app/components/ui/checkbox.tsx

@@ -7,23 +7,23 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+	React.ElementRef<typeof CheckboxPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    )}
-    ref={ref}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
+	<CheckboxPrimitive.Root
+		className={cn(
+			"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+			className,
+		)}
+		ref={ref}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator
+			className={cn("flex items-center justify-center text-current")}
+		>
+			<Check className="h-4 w-4" />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 

package/templates/chat-app/components/ui/collapsible.tsx

@@ -8,4 +8,4 @@ const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };