zudoku 0.25.3 → 0.26.0

package/lib/zudoku.plugin-api-catalog.js

@@ -1,10 +1,10 @@
-import { j as e } from "./jsx-runtime-Dx-03ztt.js";
+import { j as e } from "./jsx-runtime-Bdg6XQ1m.js";
 import { s as j } from "./index-LNp6rxyU.js";
-import { u as b } from "./ZudokuContext-hmLMUdf2.js";
-import { b as y } from "./chunk-D52XG6IA-Dl7HLe6j.js";
+import { u as b } from "./ZudokuContext-D3ayHjP-.js";
+import { b as y } from "./chunk-SYFQ2XB5-KWlHsT7t.js";
 import { Head as v, Link as N } from "./zudoku.components.js";
-import { u as w } from "./state-CFQsUZUP.js";
-import { M as C } from "./Markdown-CZDLNOFc.js";
+import { u as w } from "./state-mM7uaXTW.js";
+import { M as C } from "./Markdown-BrfrjEk_.js";
 import { c as h } from "./cn-qaFjX9_3.js";
 const f = (r, n) => j(`${r}-${n}`), k = ({
   items: r,

package/lib/zudoku.plugin-api-keys.js

@@ -1,14 +1,14 @@
-import { j as e } from "./jsx-runtime-Dx-03ztt.js";
+import { j as e } from "./jsx-runtime-Bdg6XQ1m.js";
 import { RotateCwIcon as g, TrashIcon as f, EyeOffIcon as j, EyeIcon as v, CheckIcon as w, CopyIcon as b, FileKey2Icon as K } from "lucide-react";
-import { D as k, S as m, R as N } from "./SlotletProvider-pfc9oejW.js";
+import { D as k, S as m, R as N } from "./SlotletProvider-DPbx9KdU.js";
 import { i as c } from "./invariant-Caa8-XvF.js";
-import { u as d, S as I, a as S, b as A, c as C, d as E, e as x } from "./Select-B_IxRUUC.js";
-import { a as P } from "./index.esm-BnnBRKJX.js";
-import { a as D, L as u, O as R } from "./chunk-D52XG6IA-Dl7HLe6j.js";
-import { a as y, e as q, u as O } from "./ZudokuContext-hmLMUdf2.js";
+import { u as d, S as I, a as S, b as A, c as C, d as E, e as x } from "./Select-DkOpAG0c.js";
+import { a as P } from "./index.esm-CrSoEshU.js";
+import { a as D, L as u, O as R } from "./chunk-SYFQ2XB5-KWlHsT7t.js";
+import { a as y, e as q, u as O } from "./ZudokuContext-D3ayHjP-.js";
 import { Button as l } from "./ui/Button.js";
 import { Input as z } from "./ui/Input.js";
-import { u as F } from "./hook-CHq7pFyz.js";
+import { u as F } from "./hook-DUyACbIK.js";
 import { useState as p } from "react";
 import { c as T } from "./cn-qaFjX9_3.js";
 const L = ({ service: t }) => {

package/lib/zudoku.plugin-custom-pages.js

@@ -1,8 +1,8 @@
-import { j as o } from "./jsx-runtime-Dx-03ztt.js";
+import { j as o } from "./jsx-runtime-Bdg6XQ1m.js";
 import a from "react";
-import { P as n } from "./Markdown-CZDLNOFc.js";
+import { P as n } from "./Markdown-BrfrjEk_.js";
 import { c } from "./cn-qaFjX9_3.js";
-import { u as p } from "./useExposedProps-DE9lR6MF.js";
+import { u as p } from "./useExposedProps-BBHR7aLM.js";
 const u = ({
   element: t,
   render: s,

package/lib/zudoku.plugin-markdown.js

@@ -1,7 +1,7 @@
 var d = Object.defineProperty;
 var m = (n, t, o) => t in n ? d(n, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : n[t] = o;
 var f = (n, t, o) => m(n, typeof t != "symbol" ? t + "" : t, o);
-import { j as P } from "./jsx-runtime-Dx-03ztt.js";
+import { j as P } from "./jsx-runtime-Bdg6XQ1m.js";
 import { f as u } from "./__vite-browser-external-BYRIRx8p.js";
 const x = "/pages/**/*.{md,mdx}", D = [".md", ".mdx"];
 class c {
@@ -74,7 +74,7 @@ const C = (n) => ({
         const h = {
           path: r,
           lazy: async () => {
-            const { MdxPage: l } = await import("./MdxPage-DKMbBROv.js"), { default: p, ...g } = await a();
+            const { MdxPage: l } = await import("./MdxPage-LNZLj_A5.js"), { default: p, ...g } = await a();
             return {
               element: /* @__PURE__ */ P.jsx(
                 l,

package/lib/zudoku.plugin-openapi.js

@@ -1,9 +1,9 @@
-import "./jsx-runtime-Dx-03ztt.js";
-import "./chunk-D52XG6IA-Dl7HLe6j.js";
-import { o as a } from "./index-sD8L1_Dl.js";
-import "./ZudokuContext-hmLMUdf2.js";
+import "./jsx-runtime-Bdg6XQ1m.js";
+import "./chunk-SYFQ2XB5-KWlHsT7t.js";
+import { o as a } from "./index-CaILD1AV.js";
+import "./ZudokuContext-D3ayHjP-.js";
 import "lucide-react";
-import "./hook-CHq7pFyz.js";
+import "./hook-DUyACbIK.js";
 import "./ui/Button.js";
 export {
   a as openApiPlugin

package/lib/zudoku.plugin-redirect.js

@@ -1,4 +1,4 @@
-import { r as o } from "./chunk-D52XG6IA-Dl7HLe6j.js";
+import { r as o } from "./chunk-SYFQ2XB5-KWlHsT7t.js";
 const a = (r) => ({
   getRoutes: () => r.redirects.map(({ from: e, to: t }) => ({
     path: e,

package/lib/zudoku.plugin-search-inkeep.js

@@ -1,5 +1,5 @@
-import { j as i } from "./jsx-runtime-Dx-03ztt.js";
-import { useRef as l, useState as f, useMemo as m, useEffect as u } from "react";
+import { j as i } from "./jsx-runtime-Bdg6XQ1m.js";
+import { useRef as d, useState as f, useMemo as m, useEffect as c } from "react";
 import { C as g } from "./ClientOnly-E7hGysn1.js";
 const h = {
   theme: {
@@ -25,7 +25,7 @@ const h = {
   onClose: n,
   settings: p
 }) => {
-  const o = l(null), c = l(null), [s, d] = f(
+  const o = d(null), u = d(null), [s, l] = f(
     typeof Inkeep < "u"
   ), a = m(
     () => ({
@@ -44,17 +44,17 @@ const h = {
     }),
     [e, n, r, p, o]
   );
-  return u(() => {
+  return c(() => {
     if (s) return;
     const t = setInterval(() => {
-      typeof Inkeep < "u" && (d(!0), clearInterval(t));
+      typeof Inkeep < "u" && (l(!0), clearInterval(t));
     }, 100);
     return () => clearInterval(t);
-  }, [s]), u(() => {
-    !s || c.current || (c.current = Inkeep().embed(a));
-  }, [a, s]), u(() => {
+  }, [s]), c(() => {
+    !s || u.current || (u.current = Inkeep().embed(a));
+  }, [a, s]), c(() => {
     var t;
-    (t = c.current) == null || t.render({ ...a, isOpen: e });
+    (t = u.current) == null || t.render({ ...a, isOpen: e });
   }, [a, e]), /* @__PURE__ */ i.jsx("div", { ref: o });
 }, x = (r) => ({
   getHead: () => /* @__PURE__ */ i.jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.25.3",
+  "version": "0.26.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -111,42 +111,42 @@
     }
   },
   "dependencies": {
-    "@envelop/core": "5.0.2",
+    "@envelop/core": "5.0.3",
     "@graphql-typed-document-node/core": "3.2.0",
-    "@hookform/resolvers": "3.9.1",
-    "@lekoarts/rehype-meta-as-attributes": "3.0.1",
+    "@hookform/resolvers": "3.10.0",
+    "@lekoarts/rehype-meta-as-attributes": "3.0.2",
     "@mdx-js/react": "3.1.0",
     "@mdx-js/rollup": "3.1.0",
     "@pothos/core": "3.41.0",
     "@radix-ui/react-accordion": "1.2.2",
     "@radix-ui/react-alert-dialog": "1.1.4",
     "@radix-ui/react-aspect-ratio": "1.1.1",
-    "@radix-ui/react-checkbox": "1.1.2",
-    "@radix-ui/react-collapsible": "1.1.1",
-    "@radix-ui/react-dialog": "1.1.2",
-    "@radix-ui/react-dropdown-menu": "2.1.2",
-    "@radix-ui/react-hover-card": "1.1.2",
-    "@radix-ui/react-label": "2.1.0",
-    "@radix-ui/react-popover": "1.1.2",
-    "@radix-ui/react-progress": "1.1.0",
-    "@radix-ui/react-radio-group": "1.2.1",
-    "@radix-ui/react-scroll-area": "1.2.1",
-    "@radix-ui/react-select": "2.1.2",
-    "@radix-ui/react-slider": "1.2.1",
-    "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-switch": "1.1.1",
-    "@radix-ui/react-tabs": "1.1.1",
-    "@radix-ui/react-toggle": "1.1.0",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.2",
+    "@radix-ui/react-scroll-area": "1.2.2",
+    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-slider": "1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.2",
+    "@radix-ui/react-toggle": "1.1.1",
     "@radix-ui/react-toggle-group": "1.1.1",
-    "@radix-ui/react-tooltip": "1.1.4",
-    "@radix-ui/react-visually-hidden": "1",
-    "@sentry/node": "8.42.0",
+    "@radix-ui/react-tooltip": "1.1.6",
+    "@radix-ui/react-visually-hidden": "1.1.1",
+    "@sentry/node": "8.50.0",
     "@sindresorhus/slugify": "2.2.1",
-    "@stefanprobst/rehype-extract-toc": "2.2.0",
+    "@stefanprobst/rehype-extract-toc": "2.2.1",
     "@tailwindcss/typography": "0.5.16",
-    "@tanstack/react-query": "5.62.3",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@tanstack/react-query": "5.64.2",
+    "@types/react": "19.0.7",
+    "@types/react-dom": "19.0.3",
     "@vitejs/plugin-react": "4.3.4",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.5",
@@ -157,13 +157,13 @@
     "cmdk": "1.0.4",
     "devlop": "^1.1.0",
     "dotenv": "16.4.7",
-    "embla-carousel-react": "8.5.1",
+    "embla-carousel-react": "8.5.2",
     "estree-util-value-to-estree": "3.2.1",
     "express": "4.21.2",
-    "glob": "11.0.0",
+    "glob": "11.0.1",
     "graphql": "16.10.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.10.4",
+    "graphql-yoga": "5.10.10",
     "gray-matter": "4.0.3",
     "hast-util-to-jsx-runtime": "^2.3.2",
     "hast-util-to-string": "3.0.1",
@@ -171,20 +171,20 @@
     "http-terminator": "3.2.0",
     "loglevel": "1.9.2",
     "lru-cache": "11.0.2",
-    "lucide-react": "0.468.0",
+    "lucide-react": "0.473.0",
     "next-themes": "0.4.4",
     "oauth4webapi": "2.17.0",
     "object-hash": "3.0.0",
     "openapi-types": "12.1.3",
     "picocolors": "1.1.1",
-    "postcss": "8.4.49",
-    "posthog-node": "4.3.1",
-    "prism-react-renderer": "2.4.0",
+    "postcss": "8.5.1",
+    "posthog-node": "4.4.1",
+    "prism-react-renderer": "2.4.1",
     "prismjs": "1.29.0",
-    "react-error-boundary": "4.1.2",
-    "react-hook-form": "7.54.0",
+    "react-error-boundary": "5.0.0",
+    "react-hook-form": "7.54.2",
     "react-is": "19.0.0",
-    "react-router": "7.0.2",
+    "react-router": "7.1.3",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
@@ -195,26 +195,26 @@
     "remark-mdx-frontmatter": "5.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
-    "rollup": "4.28.1",
+    "rollup": "4.31.0",
     "semver": "7.6.3",
     "sitemap": "8.0.0",
     "spin-delay": "2.0.1",
     "strip-ansi": "7.1.0",
     "tailwind-merge": "2.6.0",
-    "tailwindcss": "3.4.16",
+    "tailwindcss": "3.4.17",
     "tsx": "^4.19.2",
     "ulidx": "2.4.1",
     "unified": "^11.0.5",
     "unist-util-visit": "5.0.0",
     "urql": "4.2.1",
-    "vaul": "1.1.1",
+    "vaul": "1.1.2",
     "vfile": "6.0.3",
-    "vite": "6.0.3",
-    "yaml": "2.6.1",
+    "vite": "6.0.11",
+    "yaml": "2.7.0",
     "yargs": "17.7.2",
-    "zod": "3.23.8",
+    "zod": "3.24.1",
     "zod-validation-error": "3.4.0",
-    "zustand": "5.0.2"
+    "zustand": "5.0.3"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.3",
@@ -232,13 +232,13 @@
     "@types/semver": "7.5.8",
     "@types/unist": "^3.0.3",
     "@types/yargs": "17.0.33",
-    "@vitest/coverage-v8": "2.1.8",
+    "@vitest/coverage-v8": "3.0.2",
     "mdast-util-mdx": "3.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "rollup-plugin-visualizer": "5.14.0",
-    "typescript": "5.7.2",
-    "vitest": "2.1.8"
+    "typescript": "5.7.3",
+    "vitest": "3.0.2"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -249,7 +249,7 @@
     "@sentry/react": "^8.50.0"
   },
   "scripts": {
-    "build": "tsc --project tsconfig.json",
+    "build": "tsc --project tsconfig.app.json",
     "build:vite": "vite build",
     "generate:icon-types": "tsx ./scripts/generate-icon-types.ts",
     "build:standalone:vite": "vite build --mode standalone --config vite.standalone.config.ts",

package/src/lib/components/navigation/SidebarCategory.tsx

@@ -112,10 +112,10 @@ export const SidebarCategory = ({
         className={cn(
           // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
           hasInteracted && "CollapsibleContent",
-          "my-1",
+          "ms-6 my-1",
         )}
       >
-        <ul className={"relative"}>
+        <ul className="relative after:absolute after:-left-[--padding-nav-item] after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border">
           {category.items.map((item) => (
             <SidebarItem
               key={

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

@@ -13,6 +13,7 @@ import { useSelectedServerStore } from "../../authentication/state.js";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { Markdown, ProseClasses } from "../../components/Markdown.js";
+import { useApiIdentities } from "../../components/context/ZudokuContext.js";
 import { cn } from "../../util/cn.js";
 import { Endpoint } from "./Endpoint.js";
 import { OperationListItem } from "./OperationListItem.js";
@@ -118,6 +119,9 @@ export const OperationList = () => {
   const description = result.data.schema.description;
   const navigate = useNavigate();
 
+  // Prefetch for Playground
+  useApiIdentities();
+
   // The summary property is preferable here as it is a short description of
   // the API, whereas the description property is typically longer and supports
   // commonmark formatting, making it ill-suited for use in the meta description

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

@@ -47,17 +47,13 @@ export const ParameterListItem = ({
           )}
         </code>
         {paramSchema.type && (
-          <Badge variant="secondary">
+          <Badge variant="muted">
             {paramSchema.type === "array"
               ? `${paramSchema.items.type}[]`
               : paramSchema.type}
           </Badge>
         )}
         {parameter.required && <Badge variant="outline">required</Badge>}
-        {/* <span className="py-px px-1.5 font-medium bg-primary/75 text-primary-foreground rounded-lg">
-            required
-          </span>
-        )} */}
       </div>
       {parameter.description && (
         <Markdown

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

@@ -1,13 +1,19 @@
 import * as SidecarBox from "./SidecarBox.js";
 import { type Content, SidecarExamples } from "./SidecarExamples.js";
 
-export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
+export const RequestBodySidecarBox = ({
+  content,
+  onExampleChange,
+}: {
+  content: Content;
+  onExampleChange?: (example: unknown) => void;
+}) => {
   return (
     <SidecarBox.Root>
       <SidecarBox.Head className="text-xs flex justify-between items-center">
         <span className="font-mono">Request Body Example</span>
       </SidecarBox.Head>
-      <SidecarExamples content={content} />
+      <SidecarExamples content={content} onExampleChange={onExampleChange} />
     </SidecarBox.Root>
   );
 };

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

@@ -1,6 +1,6 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { HTTPSnippet } from "@zudoku/httpsnippet";
-import { Fragment, useMemo, useTransition } from "react";
+import { Fragment, useMemo, useState, useTransition } from "react";
 import { useSearchParams } from "react-router";
 import { useSelectedServerStore } from "../../authentication/state.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
@@ -107,6 +107,7 @@ export const Sidecar = ({
 
   const [searchParams, setSearchParams] = useSearchParams();
   const [, startTransition] = useTransition();
+  const [selectedExample, setSelectedExample] = useState<unknown>();
 
   const selectedLang = searchParams.get("lang") ?? "shell";
 
@@ -141,9 +142,11 @@ export const Sidecar = ({
   const { selectedServer } = useSelectedServerStore();
 
   const code = useMemo(() => {
-    const example = requestBodyContent?.[0]?.schema
-      ? generateSchemaExample(requestBodyContent[0].schema as SchemaObject)
-      : undefined;
+    const example =
+      selectedExample ??
+      (requestBodyContent?.[0]?.schema
+        ? generateSchemaExample(requestBodyContent[0].schema as SchemaObject)
+        : undefined);
 
     const snippet = new HTTPSnippet({
       method: operation.method.toLocaleUpperCase(),
@@ -166,6 +169,7 @@ export const Sidecar = ({
 
     return getConverted(snippet, selectedLang);
   }, [
+    selectedExample,
     requestBodyContent,
     operation.method,
     operation.path,
@@ -181,7 +185,7 @@ export const Sidecar = ({
       className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4"
     >
       <SidecarBox.Root>
-        <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-4 gap-2 text-xs">
+        <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-2.5 gap-2 text-xs">
           <span className="font-mono break-words">
             <span className={cn("font-semibold", methodTextColor)}>
               {operation.method.toLocaleUpperCase()}
@@ -209,7 +213,7 @@ export const Sidecar = ({
                 />
               </CollapsibleCode>
             </SidecarBox.Body>
-            <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-3">
+            <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-2.5">
               <span>Show example in</span>
               <SimpleSelect
                 className="self-start max-w-[150px]"
@@ -229,7 +233,10 @@ export const Sidecar = ({
         )}
       </SidecarBox.Root>
       {isOnScreen && requestBodyContent && (
-        <RequestBodySidecarBox content={requestBodyContent} />
+        <RequestBodySidecarBox
+          content={requestBodyContent}
+          onExampleChange={setSelectedExample}
+        />
       )}
       {isOnScreen && operation.responses.length > 0 && (
         <ResponsesSidecarBox

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

@@ -16,7 +16,7 @@ export const Root = ({ children, className }: BaseComponentProps) => (
 export const Head = ({ children, className }: BaseComponentProps) => (
   <div
     className={cn(
-      "border-b bg-muted dark:bg-transparent text-card-foreground p-3",
+      "border-b bg-muted dark:bg-transparent text-card-foreground p-3 py-2.5",
       className,
     )}
   >

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { type SchemaObject } from "../../oas/graphql/index.js";
 import { CollapsibleCode } from "./CollapsibleCode.js";
@@ -36,11 +36,13 @@ const getLanguage = (mediaType?: string): string => {
 export type SidecarExamplesProps = {
   content: Content;
   description?: string;
+  onExampleChange?: (example: unknown) => void;
 };
 
 export const SidecarExamples = ({
   content,
   description,
+  onExampleChange,
 }: SidecarExamplesProps) => {
   const [selectedContentTypeIndex, setSelectedContentTypeIndex] = useState(0);
   const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
@@ -67,6 +69,10 @@ export const SidecarExamples = ({
     );
   }
 
+  useEffect(() => {
+    onExampleChange?.(exampleValue);
+  }, [exampleValue, onExampleChange]);
+
   const formattedExample = formatForDisplay(exampleValue);
   const language = getLanguage(effectiveContent?.mediaType);
 
@@ -104,8 +110,13 @@ export const SidecarExamples = ({
         )}
       </SidecarBox.Body>
       {hasContent && (
-        <SidecarBox.Footer className="flex flex-col gap-2 text-xs py-1">
-          <div className="flex items-center gap-2 justify-between min-w-0">
+        <SidecarBox.Footer className="text-xs p-0">
+          {description && (
+            <div className="text-muted-foreground text-xs border-b px-3 py-2">
+              {description}
+            </div>
+          )}
+          <div className="flex items-center gap-2 justify-between min-w-0 px-3 py-2">
             <div className="flex items-center gap-2 min-w-0">
               {content.length > 1 ? (
                 <SimpleSelect
@@ -145,9 +156,6 @@ export const SidecarExamples = ({
               </div>
             )}
           </div>
-          {description && (
-            <div className="text-muted-foreground text-xs">{description}</div>
-          )}
         </SidecarBox.Footer>
       )}
     </>

package/src/lib/plugins/openapi/schema/SchemaComponents.tsx

@@ -86,7 +86,7 @@ export const SchemaPropertyItem = ({
       <div className="flex flex-col gap-1 justify-between text-sm">
         <div className="flex gap-2 items-center">
           <code>{name}</code>
-          <Badge variant="secondary">
+          <Badge variant="muted">
             {schema.type === "array" && schema.items.type ? (
               <span>{schema.items.type}[]</span>
             ) : Array.isArray(schema.type) ? (

package/src/lib/ui/Badge.tsx

@@ -12,6 +12,7 @@ const badgeVariants = cva(
           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        muted: "bg-muted text-muted-foreground ",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground",