zudoku 0.0.0-fed343e → 0.0.0-ff3751f

package/src/lib/plugins/openapi/graphql/graphql.ts

@@ -119,7 +119,7 @@ export type RequestBodyObject = {
 export type ResponseItem = {
   __typename?: "ResponseItem";
   content?: Maybe<Array<MediaTypeObject>>;
-  description: Scalars["String"]["output"];
+  description?: Maybe<Scalars["String"]["output"]>;
   headers?: Maybe<Scalars["JSON"]["output"]>;
   links?: Maybe<Scalars["JSON"]["output"]>;
   statusCode: Scalars["String"]["output"];
@@ -131,6 +131,7 @@ export type Schema = {
   openapi: Scalars["String"]["output"];
   operations: Array<OperationItem>;
   paths: Array<PathItem>;
+  servers: Array<Server>;
   tags: Array<SchemaTag>;
   title: Scalars["String"]["output"];
   url: Scalars["String"]["output"];
@@ -155,7 +156,13 @@ export type SchemaTag = {
   operations: Array<OperationItem>;
 };
 
-export type SchemaType = "file" | "url";
+export type SchemaType = "file" | "raw" | "url";
+
+export type Server = {
+  __typename?: "Server";
+  description?: Maybe<Scalars["String"]["output"]>;
+  url: Scalars["String"]["output"];
+};
 
 export type TagItem = {
   __typename?: "TagItem";
@@ -163,6 +170,20 @@ export type TagItem = {
   name: Scalars["String"]["output"];
 };
 
+export type ServersQueryQueryVariables = Exact<{
+  input: Scalars["JSON"]["input"];
+  type: SchemaType;
+}>;
+
+export type ServersQueryQuery = {
+  __typename?: "Query";
+  schema: {
+    __typename?: "Schema";
+    url: string;
+    servers: Array<{ __typename?: "Server"; url: string }>;
+  };
+};
+
 export type OperationsFragmentFragment = {
   __typename?: "OperationItem";
   slug: string;
@@ -204,7 +225,7 @@ export type OperationsFragmentFragment = {
     __typename?: "ResponseItem";
     statusCode: string;
     links?: any | null;
-    description: string;
+    description?: string | null;
     content?: Array<{
       __typename?: "MediaTypeObject";
       mediaType: string;
@@ -249,7 +270,11 @@ export type GetServerQueryQueryVariables = Exact<{
 
 export type GetServerQueryQuery = {
   __typename?: "Query";
-  schema: { __typename?: "Schema"; url: string };
+  schema: {
+    __typename?: "Schema";
+    url: string;
+    servers: Array<{ __typename?: "Server"; url: string }>;
+  };
 };
 
 export type GetCategoriesQueryVariables = Exact<{
@@ -423,6 +448,83 @@ export const OperationsFragmentFragmentDoc = {
     },
   ],
 } as unknown as DocumentNode<OperationsFragmentFragment, unknown>;
+export const ServersQueryDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "ServersQuery" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "input" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "JSON" } },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: { kind: "Variable", name: { kind: "Name", value: "type" } },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "SchemaType" },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "schema" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "input" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "input" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "type" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "type" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "url" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "servers" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "url" } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<ServersQueryQuery, ServersQueryQueryVariables>;
 export const AllOperationsDocument = {
   kind: "Document",
   definitions: [
@@ -727,6 +829,16 @@ export const GetServerQueryDocument = {
               kind: "SelectionSet",
               selections: [
                 { kind: "Field", name: { kind: "Name", value: "url" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "servers" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "url" } },
+                    ],
+                  },
+                },
               ],
             },
           },

package/src/lib/plugins/openapi/index.tsx

@@ -1,11 +1,7 @@
 import { matchPath, useRouteError, type RouteObject } from "react-router-dom";
+import { Client as UrqlClient, cacheExchange, fetchExchange } from "urql";
 import { type DevPortalPlugin } from "../../core/plugins.js";
 import { graphql } from "./graphql/index.js";
-import {
-  Client as UrqlClient,
-  cacheExchange,
-  fetchExchange,
-} from "./util/urql.js";
 
 import { useQuery } from "@tanstack/react-query";
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
@@ -174,7 +170,7 @@ export const openApiPlugin = (
             href: `#${operation.slug}`,
             badge: {
               label: operation.method,
-              color: MethodColorMap[operation.method.toLowerCase()],
+              color: MethodColorMap[operation.method.toLowerCase()]!,
             },
           })),
         }));

package/src/lib/plugins/openapi/interfaces.ts

@@ -1,4 +1,7 @@
-type OasSource = { type: "url"; input: string } | { type: "file"; input: any };
+type OasSource =
+  | { type: "url"; input: string }
+  | { type: "file"; input: any }
+  | { type: "raw"; input: string };
 
 export type OasPluginConfig = {
   server?: string;

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -1,14 +1,15 @@
 import { useMutation } from "@tanstack/react-query";
-import { Fragment, useEffect, useRef } from "react";
+import { Fragment, useEffect, useRef, useTransition } from "react";
 import { FormProvider, useForm } from "react-hook-form";
-import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../../../components/Select.js";
+} from "zudoku/ui/Select.js";
+import { useSelectedServerStore } from "../../../authentication/state.js";
+import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
 import { Spinner } from "../../../components/Spinner.js";
 import { Button } from "../../../ui/Button.js";
 import { Callout } from "../../../ui/Callout.js";
@@ -62,6 +63,7 @@ export type PlaygroundForm = {
 
 export type PlaygroundContentProps = {
   server: string;
+  servers?: string[];
   url: string;
   method: string;
   headers?: Header[];
@@ -72,6 +74,7 @@ export type PlaygroundContentProps = {
 
 export const Playground = ({
   server,
+  servers,
   url,
   method,
   headers = [],
@@ -79,6 +82,8 @@ export const Playground = ({
   pathParams = [],
   defaultBody = "",
 }: PlaygroundContentProps) => {
+  const { selectedServer, setSelectedServer } = useSelectedServerStore();
+  const [, startTransition] = useTransition();
   const { register, control, handleSubmit, watch, setValue, ...form } =
     useForm<PlaygroundForm>({
       defaultValues: {
@@ -114,7 +119,7 @@ export const Playground = ({
 
   const queryMutation = useMutation({
     mutationFn: async (data: PlaygroundForm) => {
-      const requestUrl = createUrl(server, url, data);
+      const requestUrl = createUrl(selectedServer ?? server, url, data);
       const start = performance.now();
 
       const request = new Request(requestUrl, {
@@ -124,6 +129,7 @@ export const Playground = ({
             .filter((h) => h.name)
             .map((header) => [header.name, header.value]),
         ),
+        body: data.body ? data.body : undefined,
       });
 
       if (data.identity !== NO_IDENTITY) {
@@ -200,19 +206,48 @@ export const Playground = ({
       </Fragment>
     ));
 
+  const serverSelect = (
+    <div className="inline-block opacity-50 hover:opacity-100 transition">
+      {servers && servers.length > 1 ? (
+        <Select
+          onValueChange={(value) => {
+            startTransition(() => {
+              setSelectedServer(value);
+            });
+          }}
+          value={selectedServer}
+        >
+          <SelectTrigger className="p-0 border-none flex-row-reverse bg-transparent text-xs gap-0.5 h-auto">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {servers.map((s) => (
+              <SelectItem key={s} value={s}>
+                {s.replace(/^https?:\/\//, "")}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      ) : (
+        <span>{server.replace(/^https?:\/\//, "")}</span>
+      )}
+    </div>
+  );
+
   return (
     <FormProvider
       {...{ register, control, handleSubmit, watch, setValue, ...form }}
     >
       <form onSubmit={handleSubmit((data) => queryMutation.mutateAsync(data))}>
-        <div className="grid grid-cols-2 text-sm h-full">
+        <div className="grid grid-cols-[8fr_7fr] text-sm h-full">
           <div className="flex flex-col gap-4 p-8 bg-muted/50 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:left-auto">
             <div className="flex gap-2 items-stretch">
               <div className="flex flex-1 items-center w-full border rounded-md">
                 <div className="border-r p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono">
                   {method.toUpperCase()}
                 </div>
-                <div className="p-2 font-mono text-xs">
+                <div className="flex items-center flex-wrap p-2 font-mono text-xs">
+                  {serverSelect}
                   {path}
                   {urlQueryParams.length > 0 ? "?" : ""}
                   {urlQueryParams}
@@ -296,7 +331,7 @@ export const Playground = ({
               </TabsContent>
             </Tabs>
           </div>
-          <div className="p-8 bg-muted/70">
+          <div className="min-w-0 p-8 bg-muted/70">
             {queryMutation.error ? (
               <div className="flex flex-col gap-2">
                 {formState.pathParams.some((p) => p.value === "") && (

package/src/lib/plugins/openapi/playground/PlaygroundDialog.tsx

@@ -5,7 +5,7 @@ import {
   DialogContent,
   DialogTitle,
   DialogTrigger,
-} from "../../../components/Dialog.js";
+} from "zudoku/ui/Dialog.js";
 import { Playground, type PlaygroundContentProps } from "./Playground.js";
 
 export type PlaygroundDialogProps = PropsWithChildren<PlaygroundContentProps>;

package/src/lib/plugins/openapi/playground/ResponseTab.tsx

@@ -54,7 +54,6 @@ export const ResponseTab = ({
             view === "raw" ? (jsonContent ? "plain" : detectedLanguage) : "json"
           }
           noBackground
-          showLanguageIndicator
           // playground dialog has h-5/6 ≈ 83.333vh
           className="overflow-x-auto p-4 text-xs max-h-[calc(83.333vh-180px)]"
           code={view === "raw" ? body : beautifiedBody}

package/src/lib/plugins/openapi/playground/createUrl.ts

@@ -8,7 +8,12 @@ export const createUrl = (host: string, path: string, data: PlaygroundForm) => {
     return value ?? match;
   });
 
-  const url = new URL(filledPath, host);
+  // Ensure host ends with a slash and path doesn't start with one,
+  // so they form a correct URL, without overriding the host's path.
+  const url = new URL(
+    filledPath.replace(/^\//, ""),
+    host.endsWith("/") ? host : `${host}/`,
+  );
 
   data.queryParams
     .filter((param) => param.active)

package/src/lib/plugins/redirect/index.tsx

@@ -1,19 +1,15 @@
 import { redirect } from "react-router-dom";
+import { ZudokuRedirect } from "../../../config/validators/validate.js";
 import type { DevPortalPlugin } from "../../core/plugins.js";
 
-export type Redirect = {
-  from: string;
-  to: string;
-};
-
 export const redirectPlugin = (options: {
-  redirects: Redirect[];
+  redirects: ZudokuRedirect[];
 }): DevPortalPlugin => {
   return {
     getRoutes: () =>
       options.redirects.map(({ from, to }) => ({
         path: from,
-        loader: () => redirect(to),
+        loader: () => redirect(to, 301),
       })),
   };
 };

package/src/lib/ui/Accordion.tsx

@@ -0,0 +1,56 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../util/cn.js";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/lib/ui/{Note.tsx → Alert.tsx}

@@ -1,8 +1,9 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
+
 import { cn } from "../util/cn.js";
 
-const noteVariants = cva(
+const alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     variants: {
@@ -18,20 +19,20 @@ const noteVariants = cva(
   },
 );
 
-const Note = React.forwardRef<
+const Alert = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof noteVariants>
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
   <div
     ref={ref}
     role="alert"
-    className={cn(noteVariants({ variant }), className)}
+    className={cn(alertVariants({ variant }), className)}
     {...props}
   />
 ));
-Note.displayName = "Alert";
+Alert.displayName = "Alert";
 
-const NoteTitle = React.forwardRef<
+const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
@@ -41,9 +42,9 @@ const NoteTitle = React.forwardRef<
     {...props}
   />
 ));
-NoteTitle.displayName = "AlertTitle";
+AlertTitle.displayName = "AlertTitle";
 
-const NoteDescription = React.forwardRef<
+const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
@@ -53,6 +54,6 @@ const NoteDescription = React.forwardRef<
     {...props}
   />
 ));
-NoteDescription.displayName = "AlertDescription";
+AlertDescription.displayName = "AlertDescription";
 
-export { Note, NoteDescription, NoteTitle };
+export { Alert, AlertDescription, AlertTitle };

package/src/lib/ui/AlertDialog.tsx

@@ -0,0 +1,139 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+
+import { cn } from "../util/cn.js";
+import { buttonVariants } from "./Button.js";
+
+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 bg-background 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", 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-muted-foreground", 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,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/lib/ui/AspectRatio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

package/src/lib/ui/Badge.tsx

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../util/cn.js";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    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 };