@etus/bhono-app 0.1.1

package/templates/base/src/client/components/ui/__tests__/input.test.tsx

@@ -0,0 +1,98 @@
+import { describe, it, expect, vi } from "vitest"
+import { render, screen } from "../../../__tests__/test-utils"
+import userEvent from "@testing-library/user-event"
+import { createRef } from "react"
+import { Input } from "../input"
+
+describe("Input", () => {
+  it("renders with placeholder", () => {
+    render(<Input placeholder="Enter text" />)
+
+    expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument()
+  })
+
+  it("renders as textbox by default", () => {
+    render(<Input placeholder="text input" />)
+
+    const input = screen.getByPlaceholderText("text input")
+    // Input defaults to text type when no type is specified
+    expect(input).toBeInTheDocument()
+    expect(screen.getByRole("textbox")).toBeInTheDocument()
+  })
+
+  it("renders with specified type", () => {
+    render(<Input type="email" placeholder="email input" />)
+
+    const input = screen.getByPlaceholderText("email input")
+    expect(input).toHaveAttribute("type", "email")
+  })
+
+  it("handles value changes", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+
+    render(<Input onChange={onChange} placeholder="type here" />)
+
+    const input = screen.getByPlaceholderText("type here")
+    await user.type(input, "hello")
+
+    expect(onChange).toHaveBeenCalled()
+    expect(input).toHaveValue("hello")
+  })
+
+  it("shows disabled state", () => {
+    render(<Input disabled placeholder="disabled input" />)
+
+    const input = screen.getByPlaceholderText("disabled input")
+    expect(input).toBeDisabled()
+    expect(input).toHaveClass("disabled:cursor-not-allowed")
+    expect(input).toHaveClass("disabled:opacity-50")
+  })
+
+  it("forwards ref correctly", () => {
+    const ref = createRef<HTMLInputElement>()
+
+    render(<Input ref={ref} placeholder="ref test" />)
+
+    expect(ref.current).toBeInstanceOf(HTMLInputElement)
+    expect(ref.current?.placeholder).toBe("ref test")
+  })
+
+  it("applies custom className", () => {
+    render(<Input className="custom-class" placeholder="custom" />)
+
+    const input = screen.getByPlaceholderText("custom")
+    expect(input).toHaveClass("custom-class")
+  })
+
+  it("handles controlled value", () => {
+    const { rerender } = render(<Input value="initial" onChange={() => {}} placeholder="controlled" />)
+
+    const input = screen.getByPlaceholderText("controlled")
+    expect(input).toHaveValue("initial")
+
+    rerender(<Input value="updated" onChange={() => {}} placeholder="controlled" />)
+    expect(input).toHaveValue("updated")
+  })
+
+  it("renders password type input", () => {
+    render(<Input type="password" placeholder="password" />)
+
+    const input = screen.getByPlaceholderText("password")
+    expect(input).toHaveAttribute("type", "password")
+  })
+
+  it("supports aria attributes", () => {
+    render(
+      <Input
+        aria-label="Email address"
+        aria-describedby="email-hint"
+        placeholder="email"
+      />
+    )
+
+    const input = screen.getByPlaceholderText("email")
+    expect(input).toHaveAttribute("aria-label", "Email address")
+    expect(input).toHaveAttribute("aria-describedby", "email-hint")
+  })
+})

package/templates/base/src/client/components/ui/__tests__/loading-skeleton.test.tsx

@@ -0,0 +1,139 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "../../../__tests__/test-utils"
+import {
+  DashboardSkeleton,
+  TeamSkeleton,
+  PageSkeleton,
+  SidebarSkeleton,
+} from "../loading-skeleton"
+
+describe("DashboardSkeleton", () => {
+  it("renders dashboard skeleton structure", () => {
+    const { container } = render(<DashboardSkeleton />)
+
+    // Should have skeleton elements
+    const skeletons = container.querySelectorAll(".animate-pulse")
+    expect(skeletons.length).toBeGreaterThan(0)
+  })
+
+  it("renders stats cards skeleton", () => {
+    const { container } = render(<DashboardSkeleton />)
+
+    // Should have 4 stats cards
+    const cards = container.querySelectorAll(".rounded-lg.border")
+    expect(cards.length).toBeGreaterThanOrEqual(4)
+  })
+
+  it("renders quick actions skeleton", () => {
+    const { container } = render(<DashboardSkeleton />)
+
+    // Should have grid layout for actions
+    const grids = container.querySelectorAll(".grid")
+    expect(grids.length).toBeGreaterThanOrEqual(2)
+  })
+})
+
+describe("TeamSkeleton", () => {
+  it("renders team skeleton structure", () => {
+    const { container } = render(<TeamSkeleton />)
+
+    // Should have skeleton elements
+    const skeletons = container.querySelectorAll(".animate-pulse")
+    expect(skeletons.length).toBeGreaterThan(0)
+  })
+
+  it("renders header with title and button placeholders", () => {
+    const { container } = render(<TeamSkeleton />)
+
+    // Header section with flex layout
+    const headerSection = container.querySelector(".flex.flex-col")
+    expect(headerSection).toBeInTheDocument()
+  })
+
+  it("renders search skeleton", () => {
+    const { container } = render(<TeamSkeleton />)
+
+    // Search input skeleton (h-10 w-full max-w-sm)
+    const searchSkeleton = container.querySelector(".h-10.max-w-sm")
+    expect(searchSkeleton).toBeInTheDocument()
+  })
+
+  it("renders team member list skeletons", () => {
+    const { container } = render(<TeamSkeleton />)
+
+    // Should have avatar placeholders (rounded-full)
+    const avatarSkeletons = container.querySelectorAll(".rounded-full")
+    expect(avatarSkeletons.length).toBeGreaterThanOrEqual(3)
+  })
+})
+
+describe("PageSkeleton", () => {
+  it("renders page skeleton structure", () => {
+    const { container } = render(<PageSkeleton />)
+
+    // Should have skeleton elements
+    const skeletons = container.querySelectorAll(".animate-pulse")
+    expect(skeletons.length).toBeGreaterThan(0)
+  })
+
+  it("renders header skeleton", () => {
+    const { container } = render(<PageSkeleton />)
+
+    // Title skeleton (h-8 w-48)
+    const titleSkeleton = container.querySelector(".h-8.w-48")
+    expect(titleSkeleton).toBeInTheDocument()
+  })
+
+  it("renders content card with lines", () => {
+    const { container } = render(<PageSkeleton />)
+
+    // Should have content lines (h-4 w-full)
+    const contentLines = container.querySelectorAll(".h-4.w-full")
+    expect(contentLines.length).toBeGreaterThanOrEqual(4)
+  })
+})
+
+describe("SidebarSkeleton", () => {
+  it("renders sidebar skeleton structure", () => {
+    const { container } = render(<SidebarSkeleton />)
+
+    // Should be an aside element
+    const sidebar = container.querySelector("aside")
+    expect(sidebar).toBeInTheDocument()
+  })
+
+  it("renders with correct width", () => {
+    const { container } = render(<SidebarSkeleton />)
+
+    const sidebar = container.querySelector("aside")
+    expect(sidebar).toHaveClass("w-64")
+  })
+
+  it("renders header with logo placeholder", () => {
+    const { container } = render(<SidebarSkeleton />)
+
+    // Logo skeleton (h-8 w-8 rounded-lg)
+    const logoSkeleton = container.querySelector(".h-8.w-8.rounded-lg")
+    expect(logoSkeleton).toBeInTheDocument()
+  })
+
+  it("renders navigation skeletons", () => {
+    const { container } = render(<SidebarSkeleton />)
+
+    // Nav element
+    const nav = container.querySelector("nav")
+    expect(nav).toBeInTheDocument()
+
+    // Navigation item skeletons (h-10 w-full rounded-lg)
+    const navItems = container.querySelectorAll(".h-10.w-full.rounded-lg")
+    expect(navItems.length).toBeGreaterThanOrEqual(5)
+  })
+
+  it("renders user profile skeleton at bottom", () => {
+    const { container } = render(<SidebarSkeleton />)
+
+    // User avatar skeleton (h-9 w-9 rounded-full)
+    const userAvatar = container.querySelector(".h-9.w-9.rounded-full")
+    expect(userAvatar).toBeInTheDocument()
+  })
+})

package/templates/base/src/client/components/ui/__tests__/skeleton.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "../../../__tests__/test-utils"
+import { createRef } from "react"
+import { Skeleton } from "../skeleton"
+
+describe("Skeleton", () => {
+  it("renders a skeleton element", () => {
+    render(<Skeleton data-testid="skeleton" />)
+
+    expect(screen.getByTestId("skeleton")).toBeInTheDocument()
+  })
+
+  it("applies default styles", () => {
+    render(<Skeleton data-testid="skeleton" />)
+
+    const skeleton = screen.getByTestId("skeleton")
+    expect(skeleton).toHaveClass("animate-pulse")
+    expect(skeleton).toHaveClass("rounded-md")
+    expect(skeleton).toHaveClass("bg-muted")
+  })
+
+  it("applies custom className", () => {
+    render(<Skeleton data-testid="skeleton" className="h-8 w-32" />)
+
+    const skeleton = screen.getByTestId("skeleton")
+    expect(skeleton).toHaveClass("h-8")
+    expect(skeleton).toHaveClass("w-32")
+    expect(skeleton).toHaveClass("animate-pulse") // Still has default
+  })
+
+  it("renders as div element", () => {
+    render(<Skeleton data-testid="skeleton" />)
+
+    const skeleton = screen.getByTestId("skeleton")
+    expect(skeleton.tagName).toBe("DIV")
+  })
+
+  it("passes through additional props", () => {
+    render(<Skeleton data-testid="skeleton" aria-label="Loading..." />)
+
+    const skeleton = screen.getByTestId("skeleton")
+    expect(skeleton).toHaveAttribute("aria-label", "Loading...")
+  })
+})

package/templates/base/src/client/components/ui/__tests__/sonner.test.tsx

@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "../../../__tests__/test-utils"
+import { Toaster } from "../sonner"
+
+describe("Toaster", () => {
+  it("renders toaster component", () => {
+    render(<Toaster data-testid="toaster" />)
+
+    // Sonner creates a container with role="region"
+    expect(screen.getByRole("region")).toBeInTheDocument()
+  })
+
+  it("uses theme from context", () => {
+    // The render function from test-utils wraps with ThemeProvider
+    // which defaults to system theme (light in jsdom)
+    render(<Toaster />)
+
+    // Toaster should be rendered (theme integration works)
+    expect(screen.getByRole("region")).toBeInTheDocument()
+  })
+
+  it("passes through additional props", () => {
+    render(<Toaster position="top-center" />)
+
+    // Toaster should render with custom position
+    expect(screen.getByRole("region")).toBeInTheDocument()
+  })
+})

package/templates/base/src/client/components/ui/__tests__/tabs.test.tsx

@@ -0,0 +1,233 @@
+import { describe, it, expect, vi } from "vitest"
+import { render, screen } from "../../../__tests__/test-utils"
+import userEvent from "@testing-library/user-event"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../tabs"
+
+describe("Tabs", () => {
+  it("renders with defaultValue", () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>
+    )
+
+    // Both tabs should be visible
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toBeInTheDocument()
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toBeInTheDocument()
+
+    // Only tab1 content should be rendered
+    expect(screen.getByText("Content 1")).toBeInTheDocument()
+    expect(screen.queryByText("Content 2")).not.toBeInTheDocument()
+  })
+
+  it("shows active state on TabsTrigger via aria-selected", () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>
+    )
+
+    const tab1 = screen.getByRole("tab", { name: "Tab 1" })
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" })
+
+    expect(tab1).toHaveAttribute("aria-selected", "true")
+    expect(tab1).toHaveAttribute("data-state", "active")
+
+    expect(tab2).toHaveAttribute("aria-selected", "false")
+    expect(tab2).toHaveAttribute("data-state", "inactive")
+  })
+
+  it("changes active tab when TabsTrigger is clicked", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>
+    )
+
+    // Initially tab1 is selected
+    expect(screen.getByText("Content 1")).toBeInTheDocument()
+    expect(screen.queryByText("Content 2")).not.toBeInTheDocument()
+
+    // Click tab2
+    await user.click(screen.getByRole("tab", { name: "Tab 2" }))
+
+    // Now tab2 should be selected
+    const tab1 = screen.getByRole("tab", { name: "Tab 1" })
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" })
+
+    expect(tab1).toHaveAttribute("aria-selected", "false")
+    expect(tab2).toHaveAttribute("aria-selected", "true")
+
+    expect(screen.queryByText("Content 1")).not.toBeInTheDocument()
+    expect(screen.getByText("Content 2")).toBeInTheDocument()
+  })
+
+  it("renders TabsContent only when its tab is selected", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Tabs defaultValue="first">
+        <TabsList>
+          <TabsTrigger value="first">First</TabsTrigger>
+          <TabsTrigger value="second">Second</TabsTrigger>
+          <TabsTrigger value="third">Third</TabsTrigger>
+        </TabsList>
+        <TabsContent value="first">First Content</TabsContent>
+        <TabsContent value="second">Second Content</TabsContent>
+        <TabsContent value="third">Third Content</TabsContent>
+      </Tabs>
+    )
+
+    // Initially only first content is visible
+    expect(screen.getByText("First Content")).toBeInTheDocument()
+    expect(screen.queryByText("Second Content")).not.toBeInTheDocument()
+    expect(screen.queryByText("Third Content")).not.toBeInTheDocument()
+
+    // Switch to second tab
+    await user.click(screen.getByRole("tab", { name: "Second" }))
+    expect(screen.queryByText("First Content")).not.toBeInTheDocument()
+    expect(screen.getByText("Second Content")).toBeInTheDocument()
+    expect(screen.queryByText("Third Content")).not.toBeInTheDocument()
+
+    // Switch to third tab
+    await user.click(screen.getByRole("tab", { name: "Third" }))
+    expect(screen.queryByText("First Content")).not.toBeInTheDocument()
+    expect(screen.queryByText("Second Content")).not.toBeInTheDocument()
+    expect(screen.getByText("Third Content")).toBeInTheDocument()
+  })
+
+  it("supports controlled mode with value and onValueChange", async () => {
+    const user = userEvent.setup()
+    const onValueChange = vi.fn()
+
+    render(
+      <Tabs value="tab1" onValueChange={onValueChange}>
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>
+    )
+
+    // Tab 1 is selected
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "true")
+    expect(screen.getByText("Content 1")).toBeInTheDocument()
+
+    // Click tab 2
+    await user.click(screen.getByRole("tab", { name: "Tab 2" }))
+
+    // onValueChange should be called with the new value
+    expect(onValueChange).toHaveBeenCalledWith("tab2")
+
+    // In controlled mode, content doesn't change unless parent updates value
+    // Since we passed value="tab1", it should still show tab1 content
+    expect(screen.getByText("Content 1")).toBeInTheDocument()
+  })
+
+  it("updates display when controlled value changes", () => {
+    const { rerender } = render(
+      <Tabs value="tab1" onValueChange={() => {}}>
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>
+    )
+
+    expect(screen.getByText("Content 1")).toBeInTheDocument()
+    expect(screen.queryByText("Content 2")).not.toBeInTheDocument()
+
+    // Re-render with new value
+    rerender(
+      <Tabs value="tab2" onValueChange={() => {}}>
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>
+    )
+
+    expect(screen.queryByText("Content 1")).not.toBeInTheDocument()
+    expect(screen.getByText("Content 2")).toBeInTheDocument()
+  })
+})
+
+describe("TabsTrigger", () => {
+  it("throws error when used outside Tabs provider", () => {
+    // Suppress console.error for this test since we expect an error
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+
+    expect(() => {
+      render(<TabsTrigger value="test">Test Tab</TabsTrigger>)
+    }).toThrow("Tabs components must be used within a Tabs provider")
+
+    consoleSpy.mockRestore()
+  })
+})
+
+describe("TabsContent", () => {
+  it("throws error when used outside Tabs provider", () => {
+    // Suppress console.error for this test since we expect an error
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+
+    expect(() => {
+      render(<TabsContent value="test">Test Content</TabsContent>)
+    }).toThrow("Tabs components must be used within a Tabs provider")
+
+    consoleSpy.mockRestore()
+  })
+
+  it("has tabpanel role when rendered", () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+      </Tabs>
+    )
+
+    expect(screen.getByRole("tabpanel")).toBeInTheDocument()
+  })
+})
+
+describe("TabsList", () => {
+  it("renders children correctly", () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <TabsList data-testid="tabs-list">
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+      </Tabs>
+    )
+
+    const tabsList = screen.getByTestId("tabs-list")
+    expect(tabsList).toBeInTheDocument()
+    expect(tabsList).toHaveClass("inline-flex")
+  })
+})

package/templates/base/src/client/components/ui/avatar.tsx

@@ -0,0 +1,101 @@
+import { createContext, use, useState } from "react"
+import type { HTMLAttributes, ImgHTMLAttributes, Ref } from "react"
+
+import { cn } from "@/lib/utils"
+
+interface AvatarContextValue {
+  imageLoaded: boolean
+  setImageLoaded: (loaded: boolean) => void
+}
+
+const AvatarContext = createContext<AvatarContextValue | undefined>(undefined)
+
+function Avatar({
+  className,
+  ref,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> }) {
+  const [imageLoaded, setImageLoaded] = useState(false)
+
+  return (
+    <AvatarContext value={{ imageLoaded, setImageLoaded }}>
+      <div
+        ref={ref}
+        className={cn(
+          "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+          className
+        )}
+        {...props}
+      />
+    </AvatarContext>
+  )
+}
+
+function AvatarImage({
+  className,
+  src,
+  onLoad,
+  onError,
+  ref,
+  ...props
+}: ImgHTMLAttributes<HTMLImageElement> & { ref?: Ref<HTMLImageElement> }) {
+  const context = use(AvatarContext)
+  // Track previous src to detect changes
+  const [prevSrc, setPrevSrc] = useState(src)
+  const [hasError, setHasError] = useState(false)
+
+  // Reset error state when src changes (using derived state pattern)
+  if (src !== prevSrc) {
+    setPrevSrc(src)
+    setHasError(false)
+    context?.setImageLoaded(false)
+  }
+
+  if (!src || hasError) {
+    return null
+  }
+
+  return (
+    <img
+      ref={ref}
+      src={src}
+      className={cn("aspect-square h-full w-full object-cover", className)}
+      onLoad={(e) => {
+        context?.setImageLoaded(true)
+        onLoad?.(e)
+      }}
+      onError={(e) => {
+        setHasError(true)
+        context?.setImageLoaded(false)
+        onError?.(e)
+      }}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ref,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> }) {
+  const context = use(AvatarContext)
+
+  // Always show fallback if no context (standalone usage) or image not loaded
+  if (context?.imageLoaded) {
+    return null
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-full bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarFallback, AvatarImage }

package/templates/base/src/client/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import type { VariantProps } from "class-variance-authority"
+
+import { cva } 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-fast focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow-xs hover:bg-green-500",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-gray-200 dark:hover:bg-gray-700",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow-xs hover:bg-red-600",
+        outline: "text-foreground border-border",
+        // Status variants using Seven Design System
+        success:
+          "border-transparent bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
+        warning:
+          "border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
+        error:
+          "border-transparent bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
+        info:
+          "border-transparent bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }