@turtleclub/ui 0.3.0-beta.8 → 0.3.0

package/src/components/ui/heading.tsx

@@ -0,0 +1,49 @@
+import { cn } from "@/lib/utils";
+import React from "react";
+
+export type TypographyProps = { children: React.ReactNode; className?: string };
+
+export function HeadingH1({ children, className }: TypographyProps) {
+  return (
+    <h1 className={cn("scroll-m-20 text-4xl font-semibold tracking-tight text-balance", className)}>
+      {children}
+    </h1>
+  );
+}
+
+export function HeadingH2({ children, className }: TypographyProps) {
+  return (
+    <h2 className={cn("scroll-m-20 text-3xl font-normal tracking-tight first:mt-0", className)}>
+      {children}
+    </h2>
+  );
+}
+
+export function HeadingH3({ children, className }: TypographyProps) {
+  return (
+    <h3 className={cn("scroll-m-20 text-xl font-normal tracking-tight", className)}>{children}</h3>
+  );
+}
+
+export function HeadingH4({ children, className }: TypographyProps) {
+  return (
+    <h4 className={cn("scroll-m-20 text-lg font-light tracking-tight", className)}>{children}</h4>
+  );
+}
+
+export function HeadingH5({ children, className }: TypographyProps) {
+  return <h5 className={cn("scroll-m-20 font-light tracking-tight", className)}>{children}</h5>;
+}
+
+export function HeadingH6({ children, className }: TypographyProps) {
+  return (
+    <h6
+      className={cn(
+        "text-muted-foreground scroll-m-20 text-sm font-light tracking-tight",
+        className
+      )}
+    >
+      {children}
+    </h6>
+  );
+}

package/src/components/ui/hover-card.tsx

@@ -9,33 +9,33 @@ const hoverCardContentVariants = cva(
   {
     variants: {
       variant: {
-        container: "relative bg-background drop-shadow-lg",
+        container: "bg-background relative drop-shadow-lg",
         simple: "bg-muted",
         item: "bg-muted drop-shadow-lg",
       },
       gradientBorder: {
         none: "",
         white:
-          "relative before:content-[''] before:absolute before:inset-0 before:p-px before:rounded-[inherit] before:bg-gradient-to-br before:from-white/40 before:via-transparent before:to-white/10 before:pointer-events-none before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] before:[mask-composite:exclude]",
+          "relative before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-gradient-to-br before:from-white/40 before:via-transparent before:to-white/10 before:[mask-composite:exclude] before:p-px before:content-[''] before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]",
         green:
-          "relative before:content-[''] before:absolute before:inset-0 before:p-px before:rounded-[inherit] before:bg-gradient-to-br before:from-[#73F36C]/60 before:via-transparent before:to-[#73F36C]/20 before:pointer-events-none before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] before:[mask-composite:exclude]",
-        auto: "relative before:content-[''] before:absolute before:inset-0 before:p-px before:rounded-[inherit] before:bg-gradient-to-br before:from-white/40 before:via-transparent before:to-white/10 before:pointer-events-none before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] before:[mask-composite:exclude] dark:before:from-white/40 dark:before:to-white/10 light:before:from-black/20 light:before:to-black/5",
+          "relative before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-gradient-to-br before:from-[#73F36C]/60 before:via-transparent before:to-[#73F36C]/20 before:[mask-composite:exclude] before:p-px before:content-[''] before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]",
+        auto: "light:before:from-black/20 light:before:to-black/5 relative before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-gradient-to-br before:from-white/40 before:via-transparent before:to-white/10 before:[mask-composite:exclude] before:p-px before:content-[''] before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] dark:before:from-white/40 dark:before:to-white/10",
       },
       padding: {
         none: "p-0",
-        sm: "py-3.5 px-3.5",
-        default: "py-4.5 px-4.5",
-        md: "py-6.5 px-6",
-        lg: "py-8.5 px-8",
+        sm: "px-3.5 py-3.5",
+        default: "px-4.5 py-4.5",
+        md: "px-6 py-6.5",
+        lg: "px-8 py-8.5",
       },
       rounded: {
-        default: "rounded-turtle",
+        default: "rounded-lg",
         infoCard: "rounded-info-card",
         none: "rounded-none",
         sm: "rounded-sm",
         md: "rounded-md",
         lg: "rounded-lg",
-        xl: "rounded-xl",
+        xl: "rounded-lg",
         full: "rounded-full",
       },
     },

package/src/components/ui/icon-list.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useMemo } from "react";
+
+interface IconListItem {
+  icon: string;
+  name: string;
+  id?: string; // Optional unique identifier
+}
+
+interface IconListProps extends React.ComponentProps<"div"> {
+  items: IconListItem[] | string[];
+  label?: string;
+  size?: "xs" | "sm" | "md" | "lg";
+  maxVisible?: number;
+  showTooltip?: boolean;
+}
+
+const sizeClasses = {
+  xs: "w-3 h-3 text-[8px]",
+  sm: "w-4 h-4 text-[10px]",
+  md: "w-5 h-5 text-xs",
+  lg: "w-6 h-6 text-sm",
+};
+
+const IconList = React.forwardRef<HTMLDivElement, IconListProps>(
+  (
+    { className, items, label, size = "sm", maxVisible = 6, showTooltip = false, ...props },
+    ref
+  ) => {
+    const [loadedImages, setLoadedImages] = React.useState<Set<string>>(new Set());
+
+    if (!items || items.length === 0) return null;
+
+    const uniqueItems = useMemo(() => {
+      const normalized: IconListItem[] = items.map((item: IconListItem | string, index: number) =>
+        typeof item === "string"
+          ? { icon: item, name: "", id: `item-${index}` }
+          : { ...item, id: item.id || `item-${index}` }
+      );
+
+      const unique = normalized.filter(
+        (item, index, self) => index === self.findIndex((t) => t.icon === item.icon)
+      );
+
+      return unique;
+    }, [items]);
+
+    const visibleItems = uniqueItems.slice(0, maxVisible);
+    const remainingCount = uniqueItems.length - maxVisible;
+    const hiddenItems = uniqueItems.slice(maxVisible);
+
+    const handleImageLoad = (icon: string) => {
+      setLoadedImages((prev) => new Set(prev).add(icon));
+    };
+
+    const renderAvatar = (item: IconListItem, index: number) => (
+      <Avatar
+        key={item.id || index}
+        className={cn(
+          sizeClasses[size],
+          "border border-background transition-all hover:z-10 hover:scale-110",
+          !loadedImages.has(item.icon) && "animate-pulse"
+        )}
+      >
+        <AvatarImage
+          src={item.icon}
+          alt={item.name || "Icon"}
+          onLoad={() => handleImageLoad(item.icon)}
+        />
+        <AvatarFallback className={cn("font-medium", sizeClasses[size].split(" ").pop())}>
+          {item.name ? item.name.slice(0, 2).toUpperCase() : "?"}
+        </AvatarFallback>
+      </Avatar>
+    );
+
+    const renderWithTooltip = (content: React.ReactNode, tooltipText: string) => {
+      if (!showTooltip || !tooltipText) return content;
+
+      return (
+        <Tooltip>
+          <TooltipTrigger asChild>{content}</TooltipTrigger>
+          <TooltipContent side="top" className="text-xs">
+            {tooltipText}
+          </TooltipContent>
+        </Tooltip>
+      );
+    };
+
+    return (
+      <TooltipProvider>
+        <div
+          ref={ref}
+          className={cn("flex items-center gap-1", className)}
+          role="list"
+          aria-label={label || "Icon list"}
+          {...props}
+        >
+          {label && <span className="text-xs text-muted-foreground mr-1">{label}:</span>}
+          <div className="flex -space-x-1">
+            {visibleItems.map((item, index) => (
+              <div key={item.id || index} role="listitem">
+                {renderWithTooltip(renderAvatar(item, index), item.name)}
+              </div>
+            ))}
+            {remainingCount > 0 && (
+              <div role="listitem">
+                {renderWithTooltip(
+                  <Avatar
+                    className={cn(
+                      sizeClasses[size],
+                      "border border-background bg-muted hover:bg-muted/80 transition-all"
+                    )}
+                    aria-label={`${remainingCount} more items`}
+                  >
+                    <AvatarFallback
+                      className={cn("font-semibold", sizeClasses[size].split(" ").pop())}
+                    >
+                      +{remainingCount}
+                    </AvatarFallback>
+                  </Avatar>,
+                  hiddenItems
+                    .map((item) => item.name)
+                    .filter(Boolean)
+                    .join(", ") || `${remainingCount} more items`
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </TooltipProvider>
+    );
+  }
+);
+
+IconList.displayName = "IconList";
+
+export { IconList };
+export type { IconListProps, IconListItem };

package/src/components/ui/index.ts

@@ -1,15 +1,7 @@
-export * from "./input";
-export * from "./label";
-export * from "./scroll-area";
-export * from "./select";
-export * from "./separator";
 export * from "./sonner";
 export * from "./switch";
 export * from "./toggle-group";
 export * from "./toggle";
-export * from "./tooltip";
-export * from "./button";
-export * from "./card";
 export * from "./chip";
 export * from "./icon-animation";
 export * from "./label-with-icon";
@@ -18,7 +10,35 @@ export * from "./info-card";
 export * from "./opportunity-details-v1";
 export * from "./table";
 export * from "./hover-card";
+export * from "./icon-list";
+export * from "./animated-background";
+// What Mati created / touched / reviewed goes below this line.
+export * from "./separator";
+export * from "./select";
+export * from "./button";
+export * from "./card";
 export * from "./dialog";
 export * from "./avatar";
 export * from "./badge";
-// export * from "./table-shad";
+export * from "./table-shadcn";
+export * from "./checkbox";
+export * from "./dropdown";
+export * from "./segment-control";
+export * from "./input";
+export * from "./input-group";
+export * from "./tooltip";
+export * from "./navigation-menu";
+export * from "./slider";
+export * from "./alert-dialog";
+export * from "./heading";
+export * from "./textarea";
+export * from "./field";
+export * from "./label";
+export * from "./popover";
+export * from "./command";
+export * from "./multi-select";
+export * from "./combobox";
+export * from "./scroll-area";
+export * from "./sidebar";
+export * from "./collapsible";
+export * from "./banner";

package/src/components/ui/info-card.tsx

@@ -76,7 +76,7 @@ const InfoCard = React.forwardRef<HTMLDivElement, InfoCardProps>(
     return (
       <Card
         ref={ref}
-        variant="item"
+        variant="shadow"
         rounded="infoCard"
         className={cn(infoCardVariants({ align }), className)}
         {...props}

package/src/components/ui/input-group.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+});
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "default",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};

package/src/components/ui/input.tsx

@@ -1,36 +1,30 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-
 import { cn } from "@/lib/utils";
 
 const inputVariants = cva(
-  "flex w-full bg-transparent text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground transition-colors outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+  [
+    "placeholder:text-muted-foreground flex w-full px-4 py-2.5 text-base md:text-sm",
+    "data-invalid:ring-destructive/80 data-invalid:border-destructive",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "caret-primary shadow transition-[color,box-shadow]",
+  ],
   {
     variants: {
       variant: {
         // Turtle Design System - transparent input with no borders
-        default: "border-none focus:ring-0 focus:border-none caret-primary",
+        default:
+          "bg-neutral-alpha-2 focus-visible:border-ring focus-visible:ring-ring/50 rounded-lg border border-none outline-none focus-visible:ring-2",
         // Optional bordered version for other use cases
-        bordered: "border border-border rounded-md focus:border-primary focus:ring-2 focus:ring-primary/20 caret-primary",
+        bordered:
+          "bg-neutral-alpha-2 border-border focus:border-primary focus:ring-primary/20 caret-primary rounded-lg border focus:ring-2",
         // No focus variant - cursor color only, no focus styles
-        nofocus: "border-none focus:ring-0 focus:border-none focus:outline-none caret-primary",
-      },
-      size: {
-        default: "h-10 px-3 py-2 text-sm",
-        sm: "h-8 px-2 py-1 text-xs",
-        lg: "h-12 px-4 py-3 text-base",
-      },
-      cursor: {
-        primary: "caret-primary",
-        foreground: "caret-foreground", 
-        white: "caret-white",
-        green: "caret-green-500",
+        nofocus:
+          "rounded-none border-none bg-transparent focus:border-none focus:ring-0 focus:outline-none",
       },
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
-      cursor: "primary",
     },
   }
 );
@@ -43,17 +37,15 @@ export interface InputProps
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, variant, size, cursor, type, prompt, ...props }, ref) => {
+  ({ className, variant, type, prompt, ...props }, ref) => {
     if (prompt) {
       return (
         <div className="flex items-center gap-2">
-          <span className="text-primary text-sm font-medium shrink-0">
-            {prompt}
-          </span>
+          <span className="text-primary shrink-0 text-sm font-medium">{prompt}</span>
           <input
             type={type}
             data-slot="input"
-            className={cn(inputVariants({ variant, size, cursor, className }))}
+            className={cn(inputVariants({ variant, className }))}
             ref={ref}
             {...props}
           />
@@ -64,8 +56,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         type={type}
-        data-slot="input"
-        className={cn(inputVariants({ variant, size, cursor, className }))}
+        data-slot="control"
+        className={cn(inputVariants({ variant, className }))}
         ref={ref}
         {...props}
       />

package/src/components/ui/label-with-icon.tsx

@@ -3,34 +3,37 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
-const labelWithIconVariants = cva("inline-flex items-center gap-2 font-medium", {
-  variants: {
-    variant: {
-      default: "text-foreground",
-      muted: "text-muted-foreground",
-      primary: "text-primary",
-      secondary: "text-secondary-foreground",
+const labelWithIconVariants = cva(
+  "inline-flex items-center gap-2 font-medium",
+  {
+    variants: {
+      variant: {
+        default: "text-foreground",
+        muted: "text-muted-foreground",
+        primary: "text-primary",
+        secondary: "text-secondary-foreground",
+      },
+      textSize: {
+        xs: "text-xs",
+        sm: "text-sm",
+        base: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl",
+        "5xl": "text-5xl",
+        "6xl": "text-6xl",
+        "7xl": "text-7xl",
+        "8xl": "text-8xl",
+      },
     },
-    textSize: {
-      xs: "text-xs",
-      sm: "text-sm",
-      base: "text-base",
-      lg: "text-lg",
-      xl: "text-xl",
-      "2xl": "text-2xl",
-      "3xl": "text-3xl",
-      "4xl": "text-4xl",
-      "5xl": "text-5xl",
-      "6xl": "text-6xl",
-      "7xl": "text-7xl",
-      "8xl": "text-8xl",
+    defaultVariants: {
+      variant: "default",
+      textSize: "sm",
     },
   },
-  defaultVariants: {
-    variant: "default",
-    textSize: "sm",
-  },
-});
+);
 
 const iconSizeClasses = {
   xs: "w-3 h-3",
@@ -63,7 +66,7 @@ const LabelWithIcon = React.forwardRef<HTMLDivElement, LabelWithIconProps>(
       iconClassName,
       ...props
     },
-    ref
+    ref,
   ) => {
     const renderIcon = () => {
       // If icon is a string (URL), render as img
@@ -72,7 +75,11 @@ const LabelWithIcon = React.forwardRef<HTMLDivElement, LabelWithIconProps>(
           <img
             src={icon}
             alt=""
-            className={cn(iconSizeClasses[iconSize], "object-contain", iconClassName)}
+            className={cn(
+              iconSizeClasses[iconSize],
+              "rounded-full object-contain",
+              iconClassName,
+            )}
           />
         );
       }
@@ -83,7 +90,10 @@ const LabelWithIcon = React.forwardRef<HTMLDivElement, LabelWithIconProps>(
         <span className={cn("shrink-0", iconClassName)}>
           {React.isValidElement(icon)
             ? React.cloneElement(icon as React.ReactElement<any>, {
-                className: cn(iconSizeClasses[iconSize], (icon as any).props?.className),
+                className: cn(
+                  iconSizeClasses[iconSize],
+                  (icon as any).props?.className,
+                ),
               })
             : icon}
         </span>
@@ -96,7 +106,7 @@ const LabelWithIcon = React.forwardRef<HTMLDivElement, LabelWithIconProps>(
         className={cn(
           labelWithIconVariants({ variant, textSize }),
           iconPosition === "right" && "flex-row-reverse",
-          className
+          className,
         )}
         {...props}
       >
@@ -104,7 +114,7 @@ const LabelWithIcon = React.forwardRef<HTMLDivElement, LabelWithIconProps>(
         <span>{children}</span>
       </div>
     );
-  }
+  },
 );
 
 LabelWithIcon.displayName = "LabelWithIcon";

package/src/components/ui/label.tsx

@@ -1,12 +1,11 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+"use client";
 
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
 
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+import { cn } from "@/lib/utils";
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
   return (
     <LabelPrimitive.Root
       data-slot="label"
@@ -16,7 +15,7 @@ function Label({
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Label }
+export { Label };