beads-kanban-ui 0.1.0 → 0.1.1

package/src/components/tag-picker.tsx

@@ -1,252 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Plus, Check, X } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Input } from "@/components/ui/input";
-import { ColorPicker } from "@/components/color-picker";
-import { cn } from "@/lib/utils";
-import type { Tag } from "@/lib/db";
-import {
-  getTags,
-  createTag,
-  addTagToProject,
-  removeTagFromProject,
-} from "@/lib/db";
-
-interface TagPickerProps {
-  projectId: string;
-  projectTags: Tag[];
-  onTagsChange: (tags: Tag[]) => void;
-  className?: string;
-}
-
-export function TagPicker({
-  projectId,
-  projectTags,
-  onTagsChange,
-  className,
-}: TagPickerProps) {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [allTags, setAllTags] = React.useState<Tag[]>([]);
-  const [isCreating, setIsCreating] = React.useState(false);
-  const [newTagName, setNewTagName] = React.useState("");
-  const [newTagColor, setNewTagColor] = React.useState("#3b82f6");
-  const [isLoading, setIsLoading] = React.useState(false);
-
-  // Load all tags when popover opens
-  React.useEffect(() => {
-    if (isOpen) {
-      loadTags();
-    }
-  }, [isOpen]);
-
-  const loadTags = async () => {
-    try {
-      const tags = await getTags();
-      setAllTags(tags);
-    } catch (error) {
-      console.error("Failed to load tags:", error);
-    }
-  };
-
-  const isTagSelected = (tagId: string) => {
-    return projectTags.some((t) => t.id === tagId);
-  };
-
-  const handleToggleTag = async (tag: Tag) => {
-    setIsLoading(true);
-    try {
-      if (isTagSelected(tag.id)) {
-        await removeTagFromProject(projectId, tag.id);
-        onTagsChange(projectTags.filter((t) => t.id !== tag.id));
-      } else {
-        await addTagToProject(projectId, tag.id);
-        onTagsChange([...projectTags, tag]);
-      }
-    } catch (error) {
-      console.error("Failed to toggle tag:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCreateTag = async () => {
-    if (!newTagName.trim()) return;
-
-    setIsLoading(true);
-    try {
-      const newTag = await createTag({
-        name: newTagName.trim(),
-        color: newTagColor,
-      });
-      setAllTags([...allTags, newTag]);
-      // Auto-add to project
-      await addTagToProject(projectId, newTag.id);
-      onTagsChange([...projectTags, newTag]);
-      // Reset form
-      setNewTagName("");
-      setNewTagColor("#3b82f6");
-      setIsCreating(false);
-    } catch (error) {
-      console.error("Failed to create tag:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCancelCreate = () => {
-    setNewTagName("");
-    setNewTagColor("#3b82f6");
-    setIsCreating(false);
-  };
-
-  return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className={cn(
-            "h-6 w-6 p-0 rounded-full",
-            "hover:bg-zinc-100 dark:hover:bg-zinc-700",
-            className
-          )}
-          onClick={(e) => {
-            // Only stop propagation to prevent Link navigation
-            // Do NOT call e.preventDefault() - let Radix handle the click
-            e.stopPropagation();
-          }}
-        >
-          <Plus className="h-4 w-4 text-zinc-400" aria-hidden="true" />
-          <span className="sr-only">Add tag</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-64 p-2"
-        align="start"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="space-y-2">
-          {/* Existing tags list */}
-          {allTags.length > 0 && (
-            <div className="space-y-1">
-              {allTags.map((tag) => (
-                <button
-                  key={tag.id}
-                  className={cn(
-                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
-                    "hover:bg-zinc-100 dark:hover:bg-zinc-700",
-                    isLoading && "opacity-50 pointer-events-none"
-                  )}
-                  onClick={() => handleToggleTag(tag)}
-                  disabled={isLoading}
-                  type="button"
-                  aria-pressed={isTagSelected(tag.id)}
-                >
-                  <div
-                    className="h-3 w-3 rounded-full shrink-0"
-                    style={{ backgroundColor: tag.color }}
-                  />
-                  <span className="flex-1 truncate">{tag.name}</span>
-                  {isTagSelected(tag.id) && (
-                    <Check className="h-4 w-4 text-green-600 shrink-0" aria-hidden="true" />
-                  )}
-                </button>
-              ))}
-            </div>
-          )}
-
-          {/* Divider */}
-          {allTags.length > 0 && <div className="border-t border-zinc-200 dark:border-zinc-700" />}
-
-          {/* Create new tag section */}
-          {isCreating ? (
-            <div className="space-y-2 p-1">
-              <div className="flex items-center gap-2">
-                <ColorPicker
-                  value={newTagColor}
-                  onChange={setNewTagColor}
-                />
-                <Input
-                  value={newTagName}
-                  onChange={(e) => setNewTagName(e.target.value)}
-                  placeholder="Tag name"
-                  aria-label="Tag name"
-                  className="h-8 text-sm"
-                  autoFocus
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      e.preventDefault();
-                      handleCreateTag();
-                    } else if (e.key === "Escape") {
-                      handleCancelCreate();
-                    }
-                  }}
-                />
-              </div>
-              <div className="flex items-center gap-1">
-                <Button
-                  size="sm"
-                  className="h-7 flex-1"
-                  onClick={handleCreateTag}
-                  disabled={!newTagName.trim() || isLoading}
-                >
-                  Create
-                </Button>
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  className="h-7"
-                  onClick={handleCancelCreate}
-                  aria-label="Cancel"
-                >
-                  <X className="h-4 w-4" aria-hidden="true" />
-                </Button>
-              </div>
-            </div>
-          ) : (
-            <button
-              className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-zinc-600 dark:text-zinc-400 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-700"
-              onClick={() => setIsCreating(true)}
-              type="button"
-            >
-              <Plus className="h-4 w-4" aria-hidden="true" />
-              <span>Create new tag</span>
-            </button>
-          )}
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-interface TagBadgeListProps {
-  tags: Tag[];
-  className?: string;
-}
-
-export function TagBadgeList({ tags, className }: TagBadgeListProps) {
-  if (tags.length === 0) return null;
-
-  return (
-    <div className={cn("flex flex-wrap gap-1.5", className)}>
-      {tags.map((tag) => (
-        <Badge
-          key={tag.id}
-          variant="secondary"
-          className="text-xs"
-          style={{
-            backgroundColor: `${tag.color}20`,
-            color: tag.color,
-            borderColor: tag.color,
-          }}
-        >
-          {tag.name}
-        </Badge>
-      ))}
-    </div>
-  );
-}

package/src/components/ui/alert-dialog.tsx

@@ -1,141 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-800 bg-zinc-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-zinc-100", className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-zinc-400", className)}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

package/src/components/ui/avatar.tsx

@@ -1,67 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-import { cva, VariantProps } from 'class-variance-authority';
-import { Avatar as AvatarPrimitive } from 'radix-ui';
-
-const avatarStatusVariants = cva('flex items-center rounded-full size-2 border-2 border-background', {
-  variants: {
-    variant: {
-      online: 'bg-green-600',
-      offline: 'bg-zinc-400 dark:bg-zinc-500',
-      busy: 'bg-yellow-600',
-      away: 'bg-blue-600',
-    },
-  },
-  defaultVariants: {
-    variant: 'online',
-  },
-});
-
-function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root data-slot="avatar" className={cn('relative flex shrink-0 size-10', className)} {...props} />
-  );
-}
-
-function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <div className={cn('relative overflow-hidden rounded-full', className)}>
-      <AvatarPrimitive.Image data-slot="avatar-image" className={cn('aspect-square h-full w-full')} {...props} />
-    </div>
-  );
-}
-
-function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        'flex h-full w-full items-center justify-center rounded-full border border-border bg-accent text-accent-foreground text-xs',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AvatarIndicator({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      data-slot="avatar-indicator"
-      className={cn('absolute flex size-6 items-center justify-center', className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarStatus({
-  className,
-  variant,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof avatarStatusVariants>) {
-  return <div data-slot="avatar-status" className={cn(avatarStatusVariants({ variant }), className)} {...props} />;
-}
-
-export { Avatar, AvatarFallback, AvatarImage, AvatarIndicator, AvatarStatus, avatarStatusVariants };

package/src/components/ui/badge.tsx

@@ -1,230 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Slot as SlotPrimitive } from 'radix-ui';
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
-  asChild?: boolean;
-  dotClassName?: string;
-  disabled?: boolean;
-}
-
-export interface BadgeButtonProps
-  extends React.ButtonHTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeButtonVariants> {
-  asChild?: boolean;
-}
-
-export type BadgeDotProps = React.HTMLAttributes<HTMLSpanElement>;
-
-const badgeVariants = cva(
-  'inline-flex items-center whitespace-nowrap justify-center border border-transparent font-medium focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 [&_svg]:-ms-px [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        primary: 'bg-primary text-primary-foreground',
-        secondary: 'bg-secondary text-secondary-foreground',
-        success:
-          'bg-[var(--color-success-accent,var(--color-green-500))] text-[var(--color-success-foreground,var(--color-white))]',
-        warning:
-          'bg-[var(--color-warning-accent,var(--color-yellow-500))] text-[var(--color-warning-foreground,var(--color-white))]',
-        info: 'bg-[var(--color-info-accent,var(--color-violet-500))] text-[var(--color-info-foreground,var(--color-white))]',
-        outline: 'bg-transparent border border-border text-secondary-foreground',
-        destructive: 'bg-destructive text-destructive-foreground',
-      },
-      appearance: {
-        default: '',
-        light: '',
-        outline: '',
-        ghost: 'border-transparent bg-transparent',
-      },
-      disabled: {
-        true: 'opacity-50 pointer-events-none',
-      },
-      size: {
-        lg: 'rounded-md px-[0.5rem] h-7 min-w-7 gap-1.5 text-xs [&_svg]:size-3.5',
-        md: 'rounded-md px-[0.45rem] h-6 min-w-6 gap-1.5 text-xs [&_svg]:size-3.5 ',
-        sm: 'rounded-sm px-[0.325rem] h-5 min-w-5 gap-1 text-[0.6875rem] leading-[0.75rem] [&_svg]:size-3',
-        xs: 'rounded-sm px-[0.25rem] h-4 min-w-4 gap-1 text-[0.625rem] leading-[0.5rem] [&_svg]:size-3',
-      },
-      shape: {
-        default: '',
-        circle: 'rounded-full',
-      },
-    },
-    compoundVariants: [
-      /* Light */
-      {
-        variant: 'primary',
-        appearance: 'light',
-        className:
-          'text-[var(--color-primary-accent,var(--color-blue-700))] bg-[var(--color-primary-soft,var(--color-blue-50))] dark:bg-[var(--color-primary-soft,var(--color-blue-950))] dark:text-[var(--color-primary-soft,var(--color-blue-600))]',
-      },
-      {
-        variant: 'secondary',
-        appearance: 'light',
-        className: 'bg-secondary dark:bg-secondary/50 text-secondary-foreground',
-      },
-      {
-        variant: 'success',
-        appearance: 'light',
-        className:
-          'text-[var(--color-success-accent,var(--color-green-800))] bg-[var(--color-success-soft,var(--color-green-100))] dark:bg-[var(--color-success-soft,var(--color-green-950))] dark:text-[var(--color-success-soft,var(--color-green-600))]',
-      },
-      {
-        variant: 'warning',
-        appearance: 'light',
-        className:
-          'text-[var(--color-warning-accent,var(--color-yellow-700))] bg-[var(--color-warning-soft,var(--color-yellow-100))] dark:bg-[var(--color-warning-soft,var(--color-yellow-950))] dark:text-[var(--color-warning-soft,var(--color-yellow-600))]',
-      },
-      {
-        variant: 'info',
-        appearance: 'light',
-        className:
-          'text-[var(--color-info-accent,var(--color-violet-700))] bg-[var(--color-info-soft,var(--color-violet-100))] dark:bg-[var(--color-info-soft,var(--color-violet-950))] dark:text-[var(--color-info-soft,var(--color-violet-400))]',
-      },
-      {
-        variant: 'destructive',
-        appearance: 'light',
-        className:
-          'text-[var(--color-destructive-accent,var(--color-red-700))] bg-[var(--color-destructive-soft,var(--color-red-50))] dark:bg-[var(--color-destructive-soft,var(--color-red-950))] dark:text-[var(--color-destructive-soft,var(--color-red-600))]',
-      },
-      /* Outline */
-      {
-        variant: 'primary',
-        appearance: 'outline',
-        className:
-          'text-[var(--color-primary-accent,var(--color-blue-700))] border-[var(--color-primary-soft,var(--color-blue-100))] bg-[var(--color-primary-soft,var(--color-blue-50))] dark:bg-[var(--color-primary-soft,var(--color-blue-950))] dark:border-[var(--color-primary-soft,var(--color-blue-900))] dark:text-[var(--color-primary-soft,var(--color-blue-600))]',
-      },
-      {
-        variant: 'success',
-        appearance: 'outline',
-        className:
-          'text-[var(--color-success-accent,var(--color-green-700))] border-[var(--color-success-soft,var(--color-green-200))] bg-[var(--color-success-soft,var(--color-green-50))] dark:bg-[var(--color-success-soft,var(--color-green-950))] dark:border-[var(--color-success-soft,var(--color-green-900))] dark:text-[var(--color-success-soft,var(--color-green-600))]',
-      },
-      {
-        variant: 'warning',
-        appearance: 'outline',
-        className:
-          'text-[var(--color-warning-accent,var(--color-yellow-700))] border-[var(--color-warning-soft,var(--color-yellow-200))] bg-[var(--color-warning-soft,var(--color-yellow-50))] dark:bg-[var(--color-warning-soft,var(--color-yellow-950))] dark:border-[var(--color-warning-soft,var(--color-yellow-900))] dark:text-[var(--color-warning-soft,var(--color-yellow-600))]',
-      },
-      {
-        variant: 'info',
-        appearance: 'outline',
-        className:
-          'text-[var(--color-info-accent,var(--color-violet-700))] border-[var(--color-info-soft,var(--color-violet-100))] bg-[var(--color-info-soft,var(--color-violet-50))] dark:bg-[var(--color-info-soft,var(--color-violet-950))] dark:border-[var(--color-info-soft,var(--color-violet-900))] dark:text-[var(--color-info-soft,var(--color-violet-400))]',
-      },
-      {
-        variant: 'destructive',
-        appearance: 'outline',
-        className:
-          'text-[var(--color-destructive-accent,var(--color-red-700))] border-[var(--color-destructive-soft,var(--color-red-100))] bg-[var(--color-destructive-soft,var(--color-red-50))] dark:bg-[var(--color-destructive-soft,var(--color-red-950))] dark:border-[var(--color-destructive-soft,var(--color-red-900))] dark:text-[var(--color-destructive-soft,var(--color-red-600))]',
-      },
-      /* Ghost */
-      {
-        variant: 'primary',
-        appearance: 'ghost',
-        className: 'text-primary',
-      },
-      {
-        variant: 'secondary',
-        appearance: 'ghost',
-        className: 'text-secondary-foreground',
-      },
-      {
-        variant: 'success',
-        appearance: 'ghost',
-        className: 'text-[var(--color-success-accent,var(--color-green-500))]',
-      },
-      {
-        variant: 'warning',
-        appearance: 'ghost',
-        className: 'text-[var(--color-warning-accent,var(--color-yellow-500))]',
-      },
-      {
-        variant: 'info',
-        appearance: 'ghost',
-        className: 'text-[var(--color-info-accent,var(--color-violet-500))]',
-      },
-      {
-        variant: 'destructive',
-        appearance: 'ghost',
-        className: 'text-destructive',
-      },
-
-      { size: 'lg', appearance: 'ghost', className: 'px-0' },
-      { size: 'md', appearance: 'ghost', className: 'px-0' },
-      { size: 'sm', appearance: 'ghost', className: 'px-0' },
-      { size: 'xs', appearance: 'ghost', className: 'px-0' },
-    ],
-    defaultVariants: {
-      variant: 'primary',
-      appearance: 'default',
-      size: 'md',
-    },
-  },
-);
-
-const badgeButtonVariants = cva(
-  'cursor-pointer transition-all inline-flex items-center justify-center leading-none size-3.5 [&>svg]:opacity-100! [&>svg]:size-3.5! p-0 rounded-md -me-0.5 opacity-60 hover:opacity-100',
-  {
-    variants: {
-      variant: {
-        default: '',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-function Badge({
-  className,
-  variant,
-  size,
-  appearance,
-  shape,
-  asChild = false,
-  disabled,
-  ...props
-}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? SlotPrimitive.Slot : 'span';
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant, size, appearance, shape, disabled }), className)}
-      {...props}
-    />
-  );
-}
-
-function BadgeButton({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'button'> & VariantProps<typeof badgeButtonVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? SlotPrimitive.Slot : 'span';
-  return (
-    <Comp
-      data-slot="badge-button"
-      className={cn(badgeButtonVariants({ variant, className }))}
-      role="button"
-      {...props}
-    />
-  );
-}
-
-function BadgeDot({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="badge-dot"
-      className={cn('size-1.5 rounded-full bg-[currentColor] opacity-75', className)}
-      {...props}
-    />
-  );
-}
-
-export { Badge, BadgeButton, BadgeDot, badgeVariants };