torch-glare-mcp 1.6.0 → 1.6.2

package/README.md

@@ -0,0 +1,81 @@
+# torch-glare-mcp
+
+An [MCP](https://modelcontextprotocol.io) server that gives AI assistants full access to the
+**TORCH Glare** component library — component docs, API references, code examples, design-system
+info, **install commands + dependency graphs**, and the **actual source** the CLI copies.
+
+TORCH Glare is a _copy-in_ library (like shadcn/ui): the `torch-glare` CLI copies component source
+directly into your project. This server lets an assistant go from "which component?" all the way to
+"here's how to install it and here's the code."
+
+## Install into an AI client
+
+```bash
+npx torch-glare mcp
+```
+
+This interactively adds the server to Claude Code (`.mcp.json`), Claude Desktop, and/or Cursor.
+Or add it manually:
+
+```json
+{
+  "mcpServers": {
+    "torch-glare-docs": { "command": "npx", "args": ["-y", "torch-glare-mcp"] }
+  }
+}
+```
+
+## Tools
+
+| Tool                     | Purpose                                                                                                                                                                                                               |
+| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `list-components`        | List all components, optionally filtered by category (`buttons`, `forms`, `layout`, `dataDisplay`, `overlays`, `dateTime`, `feedback`, `labels`, `navigation`, `advanced`).                                           |
+| `search-components`      | Scored search by name, description, or tags.                                                                                                                                                                          |
+| `get-component-docs`     | Full markdown docs for one component.                                                                                                                                                                                 |
+| `get-component-api`      | Just the props table + TypeScript types.                                                                                                                                                                              |
+| `get-usage-examples`     | Code examples, optionally filtered by keyword.                                                                                                                                                                        |
+| `get-design-system-info` | Theming, typography, colors, plugins, hooks, providers, utilities, installation.                                                                                                                                      |
+| `get-install-info`       | The `torch-glare` install command, import statement (from the file's real exports), npm deps, and the full transitive set of internal deps the CLI copies.                                                            |
+| `get-component-source`   | The exact `.tsx`/`.ts` source the CLI copies into a project.                                                                                                                                                          |
+| `get-guide`              | A tutorial or how-to guide by name (call with no name to list them).                                                                                                                                                  |
+| `create-form`            | Turn a list of fields into a form: the right `FormBuilder.*` per field, install commands, and a complete `FormRenderer`-based starting point (optionally a stepper, a drawer, and a live `FormSummary` totals panel). |
+| `get-related-components` | What an item copies in and what other items compose it.                                                                                                                                                               |
+
+`list-components` / `search-components` also cover installable hooks, utils, layouts, and providers.
+`get-component-docs` returns a compact overview + table of contents by default — pass `section`
+(e.g. `"examples"`, `"api"`) or `section:"full"` to drill in. Search is token- and synonym-aware
+(e.g. `"modal"` → `Dialog`).
+
+## Resources
+
+- `torch-glare://component-index` — categorized component index
+- `torch-glare://getting-started` — installation + first-component tutorial
+- `torch-glare://design-system` — theming, typography, colors, plugins
+- `torch-glare://component/{name}` — full docs for one component (templated)
+
+The library's hard rule — never emit `system` color tokens or the `SystemStyle` variant, always use
+the `presentation` equivalents — is sent once via the server's **`instructions`** (at connect), with
+a short reminder on the code-emitting tools.
+
+> When iterating on docs or component source in this repo, run `pnpm run build` (or
+> `pnpm run mcp:build` from the repo root) so the server picks up your changes — it reads the bundled
+> copies produced by `sync-docs`.
+
+## Development
+
+```bash
+pnpm install
+pnpm run build      # runs sync-docs (prebuild) then tsc
+pnpm run dev        # tsc --watch
+pnpm test           # unit tests
+```
+
+In the monorepo the server reads docs and source directly from `../docs` and `../apps/lib`. On
+`build`, `scripts/sync-docs.mjs` bundles `docs/`, `registry.json`, and the `apps/lib` source into
+the package so the published server is self-contained.
+
+Inspect it interactively:
+
+```bash
+npx @modelcontextprotocol/inspector node dist/index.js
+```

package/apps/lib/components/ActionButton.tsx

@@ -0,0 +1,60 @@
+import React, { ButtonHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Button } from "./Button";
+import { cn } from "../utils/cn";
+import { ButtonVariant, Themes } from "../utils/types";
+
+const buttonVariants = cva("!rounded-[4px]", {
+  variants: {
+    size: {
+      XS: "h-[18px] w-[18px] text-[12px]",
+      S: "h-[22px] w-[22px] text-[12px]",
+      M: "h-[32px] w-[32px] text-[18px]",
+    },
+  },
+  defaultVariants: {
+    size: "M",
+  },
+});
+
+interface Props
+  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  is_loading?: boolean;
+  disabled?: boolean;
+  asChild?: boolean;
+  as?: React.ElementType;
+  theme?: Themes;
+  variant?: ButtonVariant;
+}
+export const ActionButton = function ({
+  size,
+  asChild,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
+  as: Tag = "button",
+  className,
+  variant,
+  type = "button",
+  children,
+  theme,
+  ...props
+}: Props) {
+  return (
+    <Button
+      theme={theme}
+      asChild={asChild}
+      buttonType="icon"
+      type={type}
+      size={size == "XS" ? "S" : size == "S" ? "M" : size == "M" ? "L" : "S"}
+      variant={variant}
+      className={cn(
+        buttonVariants({
+          size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+};

package/apps/lib/components/ActionsGroup.tsx

@@ -0,0 +1,27 @@
+import React, { HTMLAttributes } from "react";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+import { Divider } from "./Divider";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  withDivider?: boolean; // to display the divider line if you pass it see on figma design file
+  theme?: Themes;
+}
+
+const ActionsGroup: React.FC<Props> = ({ withDivider, className, children, theme, ...props }) => {
+  return (
+    <section
+      {...props}
+      data-theme={theme}
+      className={cn("flex items-center gap-2 w-full", className)}
+    >
+      {withDivider && <Divider />}
+      {children}
+      {withDivider && <Divider />}
+    </section>
+  );
+};
+
+//          <div className="flex border-t border-solid border-border-presentation-global-primary flex-1 px-2" />
+
+export default ActionsGroup;

package/apps/lib/components/AlertDialog.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "../utils/cn";
+import { Button, buttonVariants } from "./Button";
+import { ButtonVariant } from "../utils/types";
+import { cva } from "class-variance-authority";
+
+const StatusTextStyle = cva("", {
+  variants: {
+    variant: {
+      default:
+        "[&_strong]:text-content-presentation-global-primary  [&_[data-description]]:text-content-presentation-global-primary",
+      info: "[&_strong]:text-content-presentation-state-information  [&_[data-description]]:text-content-presentation-state-information",
+      success:
+        "[&_strong]:text-content-presentation-state-success [&_[data-description]]:text-content-presentation-state-success",
+      warning:
+        "[&_strong]:text-content-presentation-state-warning  [&_[data-description]]:text-content-presentation-state-warning",
+      error:
+        "[&_strong]:text-content-presentation-state-negative  [&_[data-description]]:text-content-presentation-state-negative",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+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> & {
+    variant?: "info" | "success" | "warning" | "error" | "default";
+  }
+>(({ className, variant = "default", ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        StatusTextStyle({ variant }),
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[800px] translate-x-[-50%] translate-y-[-50%]",
+        "gap-2 rounded-[16px] border-2 border-border-presentation-global-primary",
+        "bg-background-presentation-body-overlay-primary p-[12px]",
+        "text-content-presentation-global-primary",
+        "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%]",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex justify-between space-x-2 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("typography-display-medium-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogLabel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & {
+    title: string;
+  }
+>(({ className, title, ...props }, ref) => {
+  const words = title.split(" ");
+  const firstWord = words[0];
+  const restOfTitle = words.slice(1).join(" ");
+
+  return (
+    <AlertDialogPrimitive.Title
+      ref={ref}
+      className={cn("typography-display-medium-semibold", className)}
+      {...props}
+    >
+      <p className="first-letter:uppercase typography-display-medium-semibold">
+        <strong className="typography-display-medium-semibold">{firstWord}</strong>
+        {restOfTitle.length > 0 && " " + restOfTitle}
+      </p>
+    </AlertDialogPrimitive.Title>
+  );
+});
+AlertDialogLabel.displayName = "AlertDialogLabel";
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    data-description=""
+    ref={ref}
+    className={cn(
+      "typography-body-large-medium",
+      "bg-background-presentation-form-base",
+      "border border-border-presentation-global-primary",
+      "rounded-[8px] p-[24px_48px_48px_48px]",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
+    size?: "M" | "S" | "L" | "XL";
+    variant?: ButtonVariant;
+    buttonType?: "button" | "icon";
+  }
+>(({ className, size = "M", variant = "BorderStyle", buttonType = "button", ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: variant, size: size, buttonType: buttonType }),
+      className,
+    )}
+    asChild
+  >
+    <Button size={size} variant={variant} buttonType={buttonType} {...props} />
+  </AlertDialogPrimitive.Action>
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {
+    size?: "M" | "S" | "L" | "XL";
+    variant?: ButtonVariant;
+    buttonType?: "button" | "icon";
+  }
+>(({ className, size = "M", variant = "RedSecStyle", buttonType = "icon", ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: variant, size: size, buttonType: buttonType }),
+      "",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogLabel,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/apps/lib/components/Avatar.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../utils/cn";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full object-cover", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-background-presentation-action-disabled text-content-presentation-global-primary",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/apps/lib/components/Badge.tsx

@@ -0,0 +1,247 @@
+import { ReactNode, HTMLAttributes } from "react";
+import { cva, VariantProps } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+
+const SOLID_TEXT =
+  "text-content-presentation-global-primary-light [&_i]:text-content-presentation-global-primary-light";
+
+const solidCompoundVariants = [
+  {
+    badgeStyle: "solid" as const,
+    color: "gray" as const,
+    className: `bg-background-presentation-badge-gray-solid ${SOLID_TEXT}`,
+  },
+  {
+    badgeStyle: "solid" as const,
+    color: "slate" as const,
+    className: `bg-background-presentation-badge-slate-solid ${SOLID_TEXT}`,
+  },
+  {
+    badgeStyle: "solid" as const,
+    color: "red" as const,
+    className: `bg-background-presentation-badge-red-solid ${SOLID_TEXT}`,
+  },
+  {
+    badgeStyle: "solid" as const,
+    color: "orange" as const,
+    className: `bg-background-presentation-badge-orange-solid ${SOLID_TEXT}`,
+  },
+  {
+    badgeStyle: "solid" as const,
+    color: "yellow" as const,
+    className: `bg-background-presentation-badge-yellow-solid ${SOLID_TEXT}`,
+  },
+  {
+    badgeStyle: "solid" as const,
+    color: "green" as const,
+    className: `bg-background-presentation-badge-green-solid ${SOLID_TEXT}`,
+  },
+  {
+    badgeStyle: "solid" as const,
+    color: "ocean" as const,
+    className: `bg-background-presentation-badge-ocean-solid ${SOLID_TEXT}`,
+  },
+  {
+    badgeStyle: "solid" as const,
+    color: "blue" as const,
+    className: `bg-background-presentation-badge-blue-solid ${SOLID_TEXT}`,
+  },
+  {
+    badgeStyle: "solid" as const,
+    color: "purple" as const,
+    className: `bg-background-presentation-badge-purple-solid ${SOLID_TEXT}`,
+  },
+  {
+    badgeStyle: "solid" as const,
+    color: "rose" as const,
+    className: `bg-background-presentation-badge-rose-solid ${SOLID_TEXT}`,
+  },
+];
+
+const SUBTLE_TEXT =
+  "text-content-presentation-global-subtle [&>div]:mix-blend-luminosity [&_i]:text-content-presentation-global-subtle [&_i]:mix-blend-luminosity [&>button]:mix-blend-luminosity";
+
+const subtleCompoundVariants = [
+  {
+    badgeStyle: "subtle" as const,
+    color: "gray" as const,
+    className: `bg-background-presentation-badge-gray-subtle ${SUBTLE_TEXT}`,
+  },
+  {
+    badgeStyle: "subtle" as const,
+    color: "slate" as const,
+    className: `bg-background-presentation-badge-slate-subtle ${SUBTLE_TEXT}`,
+  },
+  {
+    badgeStyle: "subtle" as const,
+    color: "red" as const,
+    className: `bg-background-presentation-badge-red-subtle ${SUBTLE_TEXT}`,
+  },
+  {
+    badgeStyle: "subtle" as const,
+    color: "orange" as const,
+    className: `bg-background-presentation-badge-orange-subtle ${SUBTLE_TEXT}`,
+  },
+  {
+    badgeStyle: "subtle" as const,
+    color: "yellow" as const,
+    className: `bg-background-presentation-badge-yellow-subtle ${SUBTLE_TEXT}`,
+  },
+  {
+    badgeStyle: "subtle" as const,
+    color: "green" as const,
+    className: `bg-background-presentation-badge-green-subtle ${SUBTLE_TEXT}`,
+  },
+  {
+    badgeStyle: "subtle" as const,
+    color: "ocean" as const,
+    className: `bg-background-presentation-badge-ocean-subtle ${SUBTLE_TEXT}`,
+  },
+  {
+    badgeStyle: "subtle" as const,
+    color: "blue" as const,
+    className: `bg-background-presentation-badge-blue-subtle ${SUBTLE_TEXT}`,
+  },
+  {
+    badgeStyle: "subtle" as const,
+    color: "purple" as const,
+    className: `bg-background-presentation-badge-purple-subtle ${SUBTLE_TEXT}`,
+  },
+  {
+    badgeStyle: "subtle" as const,
+    color: "rose" as const,
+    className: `bg-background-presentation-badge-rose-subtle ${SUBTLE_TEXT}`,
+  },
+];
+
+export const badgeStyles = cva(
+  [
+    "inline-flex items-center justify-center w-fit",
+    "rounded-[6px]",
+    "transition-all duration-200 ease-in-out",
+    "whitespace-nowrap",
+    "[&_i]:!leading-none",
+    // The subtle variants blend their label/icon with `mix-blend-luminosity`.
+    // `isolate` opens a new stacking context so that blend only composites
+    // against the badge's own background — not against arbitrary page layers
+    // behind it (semi-transparent rows, gradients, masks), which otherwise
+    // ghosts/double-strokes the text in "random" places.
+    "isolate",
+  ],
+  {
+    variants: {
+      badgeStyle: {
+        solid: "",
+        subtle: "",
+      },
+      color: {
+        gray: "",
+        slate: "",
+        red: "",
+        orange: "",
+        yellow: "",
+        green: "",
+        ocean: "",
+        blue: "",
+        purple: "",
+        rose: "",
+      },
+      size: {
+        XS: "h-[18px] px-[6px] py-0 [&_i]:text-[12px] [&>div]:typography-body-small-medium",
+        S: "h-[22px] px-[6px] py-[2px] [&_i]:text-[12px] [&>div]:typography-body-small-medium",
+        M: "h-[26px] px-[8px] py-[2px] [&_i]:text-[16px] [&>div]:typography-body-medium-medium",
+      },
+    },
+    compoundVariants: [...solidCompoundVariants, ...subtleCompoundVariants],
+    defaultVariants: {
+      badgeStyle: "subtle",
+      color: "gray",
+      size: "S",
+    },
+  },
+);
+
+interface BadgeProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof badgeStyles> {
+  label?: string;
+  badgeIcon?: ReactNode;
+  showIcon?: boolean;
+  isClosable?: boolean;
+  onClose?: () => void;
+  theme?: Themes;
+  className?: string;
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  label,
+  badgeIcon,
+  showIcon = true,
+  isClosable,
+  onClose,
+  theme,
+  badgeStyle,
+  color,
+  size,
+  className,
+  ...props
+}) => {
+  return (
+    <span
+      {...props}
+      data-theme={theme}
+      className={cn(
+        badgeStyles({ badgeStyle, color, size }),
+        { "cursor-default": isClosable },
+        className,
+      )}
+    >
+      {showIcon && (
+        <div className="flex items-center justify-center">
+          {badgeIcon ?? <i className="ri-circle-fill !text-[8px]" />}
+        </div>
+      )}
+
+      {label && <div className="px-[3px]">{label}</div>}
+
+      {isClosable && (
+        <button
+          type="button"
+          onClick={onClose}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onClose?.();
+            }
+          }}
+          className={cn(
+            "rounded-[4px]",
+            "flex items-center justify-center cursor-pointer",
+            "hover:bg-background-presentation-action-secondary",
+            "transition-colors duration-150",
+            size === "M"
+              ? "w-[16px] h-[16px]"
+              : size === "S"
+                ? "w-[14px] h-[14px]"
+                : "w-[12px] h-[12px]",
+          )}
+          aria-label="Remove badge"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="100%"
+            height="100%"
+            viewBox="0 0 12 12"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="M6.00002 5.33336L8.33334 3L9 3.66667L6.66668 6.00002L9 8.33334L8.33334 9L6.00002 6.66668L3.66667 9L3 8.33334L5.33336 6.00002L3 3.66667L3.66667 3L6.00002 5.33336Z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      )}
+    </span>
+  );
+};