@ngrok/mantle 0.69.2 → 0.70.1

package/dist/code-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.js","names":["Root","RadixTabsRoot","MantleIcon","RadixTabsList","RadixTabsTrigger","RadixTabsContent"],"sources":["../src/components/code-block/escape-html.ts","../src/components/code-block/code-block.tsx","../src/components/code-block/has-more-than-n-lines.ts"],"sourcesContent":["/**\n * Escapes special HTML characters in a string to their corresponding\n * HTML entities, preventing issues like unintended HTML rendering or\n * cross-site scripting (XSS) when injecting raw strings into the DOM\n * using `dangerouslySetInnerHTML`.\n *\n * Characters escaped:\n * - \\& => `&amp;`;\n * - \\< => `&lt;`;\n * - \\> => `&gt;`;\n * - \\\" => `&quot;`;\n * - \\' => `&#39;`;\n *\n * @param {string} value The raw string to be escaped.\n *\n * @example\n * escapeHtml('<div>Hello & \"world\"</div>');\n * // Returns: '&lt;div&gt;Hello &amp; &quot;world&quot;&lt;/div&gt;'\n */\nfunction escapeHtml(value: string): string {\n\tlet firstSpecialCharIndex = -1;\n\tfor (let i = 0; i < value.length; i++) {\n\t\tconst character = value[i];\n\t\tif (\n\t\t\tcharacter === \"&\" ||\n\t\t\tcharacter === \"<\" ||\n\t\t\tcharacter === \">\" ||\n\t\t\tcharacter === '\"' ||\n\t\t\tcharacter === \"'\"\n\t\t) {\n\t\t\tfirstSpecialCharIndex = i;\n\t\t\tbreak;\n\t\t}\n\t}\n\n\tif (firstSpecialCharIndex === -1) {\n\t\treturn value;\n\t}\n\n\tlet escaped = value.slice(0, firstSpecialCharIndex);\n\tfor (let i = firstSpecialCharIndex; i < value.length; i++) {\n\t\tconst character = value[i];\n\t\tswitch (character) {\n\t\t\tcase \"&\":\n\t\t\t\tescaped += \"&amp;\";\n\t\t\t\tbreak;\n\t\t\tcase \"<\":\n\t\t\t\tescaped += \"&lt;\";\n\t\t\t\tbreak;\n\t\t\tcase \">\":\n\t\t\t\tescaped += \"&gt;\";\n\t\t\t\tbreak;\n\t\t\tcase '\"':\n\t\t\t\tescaped += \"&quot;\";\n\t\t\t\tbreak;\n\t\t\tcase \"'\":\n\t\t\t\tescaped += \"&#39;\";\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tescaped += character;\n\t\t}\n\t}\n\treturn escaped;\n}\n\nexport {\n\t//,\n\tescapeHtml,\n};\n","\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport { CopyIcon } from \"@phosphor-icons/react/Copy\";\nimport { FileTextIcon } from \"@phosphor-icons/react/FileText\";\nimport { TerminalIcon } from \"@phosphor-icons/react/Terminal\";\nimport type {\n\tComponentProps,\n\tComponentRef,\n\tDispatch,\n\tHTMLAttributes,\n\tReactNode,\n\tSetStateAction,\n} from \"react\";\nimport {\n\tcreateContext,\n\tforwardRef,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseId,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport {\n\tContent as RadixTabsContent,\n\tList as RadixTabsList,\n\tRoot as RadixTabsRoot,\n\tTrigger as RadixTabsTrigger,\n} from \"@radix-ui/react-tabs\";\nimport assert from \"tiny-invariant\";\nimport { useCopyToClipboard } from \"../../hooks/use-copy-to-clipboard.js\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon as MantleIcon } from \"../icon/icon.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { TrafficPolicyFileIcon } from \"../icons/traffic-policy-file.js\";\nimport { IconButton } from \"../button/icon-button.js\";\nimport { Slot } from \"../slot/index.js\";\nimport { escapeHtml } from \"./escape-html.js\";\nimport type { Mode } from \"./resolve-pre-rendered-props.js\";\nimport type { MantleCodeBlockValue } from \"./mantle-code.js\";\n\ntype CodeBlockContextType = {\n\tcodeId: string | undefined;\n\tcopyTextRef: { current: string };\n\thasCodeExpander: boolean;\n\tisCodeExpanded: boolean;\n\tregisterCodeId: (id: string) => void;\n\tsetHasCodeExpander: (value: boolean) => void;\n\tsetIsCodeExpanded: Dispatch<SetStateAction<boolean>>;\n\tunregisterCodeId: (id: string) => void;\n};\n\nconst CodeBlockContext = createContext<CodeBlockContextType | null>(null);\n\n/** Returns the nearest `CodeBlock` context, throwing if called outside a `CodeBlock.Root`. */\nfunction useCodeBlockContext(): CodeBlockContextType {\n\tconst context = useContext(CodeBlockContext);\n\tassert(context != null, \"CodeBlock subcomponents must be rendered within a <CodeBlock.Root>.\");\n\treturn context;\n}\n\ntype CodeBlockRootProps = Omit<ComponentProps<\"div\">, \"align\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The default active tab value (uncontrolled).\n\t\t * Only relevant when using `CodeBlock.TabList` / `CodeBlock.TabContent`.\n\t\t */\n\t\tdefaultTab?: string;\n\t\t/**\n\t\t * The controlled active tab value.\n\t\t * Only relevant when using `CodeBlock.TabList` / `CodeBlock.TabContent`.\n\t\t */\n\t\tactiveTab?: string;\n\t\t/**\n\t\t * Callback fired when the active tab changes.\n\t\t * Only relevant when using `CodeBlock.TabList` / `CodeBlock.TabContent`.\n\t\t */\n\t\tonActiveTabChange?: (value: string) => void;\n\t};\n\n/**\n * Shiki-powered code blocks with build-time syntax highlighting and zero browser bundle.\n * This is the root component for all CodeBlock components.\n *\n * For tabbed code blocks, pass `defaultTab` (uncontrolled) or `activeTab` / `onActiveTabChange`\n * (controlled) to enable tab switching with `CodeBlock.TabList` and `CodeBlock.TabContent`.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, CodeBlockRootProps>(\n\t({ asChild = false, className, defaultTab, activeTab, onActiveTabChange, ...props }, ref) => {\n\t\tconst copyTextRef = useRef(\"\");\n\t\tconst [hasCodeExpander, setHasCodeExpander] = useState(false);\n\t\tconst [isCodeExpanded, setIsCodeExpanded] = useState(false);\n\t\tconst [codeId, setCodeId] = useState<string | undefined>(undefined);\n\n\t\tconst registerCodeId = useCallback((id: string) => {\n\t\t\tsetCodeId((old) => {\n\t\t\t\tassert(old == null, \"You can only render a single CodeBlock.Code within a CodeBlock.\");\n\t\t\t\treturn id;\n\t\t\t});\n\t\t}, []);\n\n\t\tconst unregisterCodeId = useCallback((id: string) => {\n\t\t\tsetCodeId((old) => {\n\t\t\t\tassert(old === id, \"You can only render a single CodeBlock.Code within a CodeBlock.\");\n\t\t\t\treturn undefined;\n\t\t\t});\n\t\t}, []);\n\n\t\tconst context: CodeBlockContextType = useMemo(\n\t\t\t() =>\n\t\t\t\t({\n\t\t\t\t\tcodeId,\n\t\t\t\t\tcopyTextRef,\n\t\t\t\t\thasCodeExpander,\n\t\t\t\t\tisCodeExpanded,\n\t\t\t\t\tregisterCodeId,\n\t\t\t\t\tsetHasCodeExpander,\n\t\t\t\t\tsetIsCodeExpanded,\n\t\t\t\t\tunregisterCodeId,\n\t\t\t\t}) as const,\n\t\t\t[codeId, hasCodeExpander, isCodeExpanded, registerCodeId, unregisterCodeId],\n\t\t);\n\n\t\tconst hasTabs = defaultTab !== undefined || activeTab !== undefined;\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\tconst tree = (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"code-block\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-mono w-full overflow-hidden rounded-md border border-gray-300 bg-card font-mono\",\n\t\t\t\t\t\"[&_svg]:shrink-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\n\t\treturn (\n\t\t\t<CodeBlockContext.Provider value={context}>\n\t\t\t\t{hasTabs ? (\n\t\t\t\t\t<RadixTabsRoot\n\t\t\t\t\t\tasChild\n\t\t\t\t\t\tdefaultValue={defaultTab}\n\t\t\t\t\t\tvalue={activeTab}\n\t\t\t\t\t\tonValueChange={onActiveTabChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{tree}\n\t\t\t\t\t</RadixTabsRoot>\n\t\t\t\t) : (\n\t\t\t\t\ttree\n\t\t\t\t)}\n\t\t\t</CodeBlockContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"CodeBlock\";\n\n/**\n * The body of the `CodeBlock`. This is where `CodeBlock.Code` and\n * the optional `CodeBlock.CopyButton` are rendered.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn <Component className={cx(\"relative\", className)} ref={ref} {...props} />;\n\t},\n);\nBody.displayName = \"CodeBlockBody\";\n\n/**\n * Matches `SHIKI_VAL_<index>` placeholders injected by the Vite plugin for\n * interpolated template expressions. Hoisted to module scope to avoid\n * re-creating the regex on every substitution call.\n */\nconst LEGACY_SHIKI_VAL_PATTERN = /SHIKI_VAL_(\\d+)/g;\n\n/** Escapes special characters in a string for use in a `RegExp` constructor. */\nfunction escapeForRegExp(value: string): string {\n\treturn value.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\n\nconst maxPreValPatternCacheSize = 500;\nconst preValPatternCache = new Map<string, RegExp>();\n\n/**\n * Returns the cached `RegExp` for the given `preValToken`, falling back to the\n * legacy `SHIKI_VAL_<n>` pattern when no token is provided.\n */\nfunction getTemplateValPattern(preValToken: string | undefined): RegExp {\n\tif (preValToken == null || preValToken.length === 0) {\n\t\treturn LEGACY_SHIKI_VAL_PATTERN;\n\t}\n\n\tlet cached = preValPatternCache.get(preValToken);\n\tif (cached == null) {\n\t\tif (preValPatternCache.size >= maxPreValPatternCacheSize) {\n\t\t\tpreValPatternCache.clear();\n\t\t}\n\t\tcached = new RegExp(`${escapeForRegExp(preValToken)}(\\\\d+)__`, \"g\");\n\t\tpreValPatternCache.set(preValToken, cached);\n\t}\n\treturn cached;\n}\n\n/**\n * Replaces placeholder tokens in `input` with values from `vals`, applying\n * `mapValue` to each substituted value. Returns the input unchanged when\n * no placeholders are present.\n */\nfunction substituteTemplateVals(\n\tinput: string,\n\tvals: unknown[],\n\tpreValToken: string | undefined,\n\tmapValue: (value: unknown) => string,\n): string {\n\tif (preValToken == null) {\n\t\tif (!input.includes(\"SHIKI_VAL_\")) {\n\t\t\treturn input;\n\t\t}\n\t} else if (!input.includes(preValToken)) {\n\t\treturn input;\n\t}\n\n\treturn input.replaceAll(getTemplateValPattern(preValToken), (match, indexText: string) => {\n\t\tconst index = Number.parseInt(indexText, 10);\n\t\tif (Number.isNaN(index) || index < 0 || index >= vals.length) {\n\t\t\treturn match;\n\t\t}\n\t\treturn mapValue(vals[index]);\n\t});\n}\n\n/** Substitutes placeholder tokens in pre-rendered HTML, HTML-escaping each interpolated value. */\nfunction substitutePreVals(html: string, vals: unknown[], preValToken: string | undefined): string {\n\treturn substituteTemplateVals(html, vals, preValToken, (value) => escapeHtml(String(value)));\n}\n\n/** Substitutes placeholder tokens in plain text (for the copy button), without HTML escaping. */\nfunction substitutePreValsPlainText(\n\ttext: string,\n\tvals: unknown[],\n\tpreValToken: string | undefined,\n): string {\n\treturn substituteTemplateVals(text, vals, preValToken, (value) => String(value));\n}\n\ntype CodeBlockCodeProps = Omit<ComponentProps<\"pre\">, \"children\"> & {\n\t/**\n\t * The code value produced by `mantleCode(\"lang\")` tagged template.\n\t * Contains pre-rendered Shiki HTML (when the Vite plugin is active) and\n\t * the original code string for the copy button.\n\t */\n\tvalue: MantleCodeBlockValue;\n};\n\n/**\n * The `CodeBlock` content. Renders pre-highlighted code from `mantleCode()`.\n *\n * `value[\"~preHtml\"]` must be provided by Mantle's Vite plugin or server highlighter.\n * Runtime highlighting and runtime line decoration are intentionally unsupported.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Code = forwardRef<ComponentRef<\"pre\">, CodeBlockCodeProps>(\n\t({ className, style, tabIndex, value, ...props }, ref) => {\n\t\tconst id = useId();\n\t\tconst { copyTextRef, hasCodeExpander, isCodeExpanded, registerCodeId, unregisterCodeId } =\n\t\t\tuseCodeBlockContext();\n\t\tconst {\n\t\t\tlanguage,\n\t\t\tcode,\n\t\t\t\"~preValToken\": __preValToken,\n\t\t\t\"~preVals\": __preVals,\n\t\t\t\"~highlightLines\": __highlightLines,\n\t\t\t\"~lineNumberStart\": __lineNumberStart,\n\t\t\t\"~preHtml\": __preHtml,\n\t\t\t\"~showLineNumbers\": __showLineNumbers,\n\t\t} = value;\n\n\t\tconst effectiveHighlightLines = __highlightLines;\n\t\tconst effectiveLineNumberStart = __lineNumberStart ?? 1;\n\t\tconst effectiveShowLineNumbers = __showLineNumbers ?? false;\n\t\tconst copyText = useMemo(\n\t\t\t() =>\n\t\t\t\t__preVals != null && __preVals.length > 0\n\t\t\t\t\t? substitutePreValsPlainText(code, __preVals, __preValToken)\n\t\t\t\t\t: code,\n\t\t\t[__preValToken, __preVals, code],\n\t\t);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tcopyTextRef.current = copyText;\n\t\t}, [copyTextRef, copyText]);\n\n\t\tuseEffect(() => {\n\t\t\tregisterCodeId(id);\n\n\t\t\treturn () => {\n\t\t\t\tunregisterCodeId(id);\n\t\t\t};\n\t\t}, [id, registerCodeId, unregisterCodeId]);\n\n\t\tconst renderedHtml = useMemo(() => {\n\t\t\tif (__preHtml == null) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\treturn __preVals != null && __preVals.length > 0\n\t\t\t\t? substitutePreVals(__preHtml, __preVals, __preValToken)\n\t\t\t\t: __preHtml;\n\t\t}, [__preHtml, __preValToken, __preVals]);\n\n\t\tconst isPreRendered = renderedHtml != null;\n\t\tconst displayHtml = renderedHtml ?? escapeHtml(copyText);\n\n\t\treturn (\n\t\t\t<pre\n\t\t\t\taria-expanded={hasCodeExpander ? isCodeExpanded : undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"scrollbar overflow-x-auto overflow-y-hidden py-4\",\n\t\t\t\t\t!isPreRendered && \"pr-14\",\n\t\t\t\t\t\"data-[mantle-line-numbers~='false']:pl-4\",\n\t\t\t\t\t\"text-mono m-0 font-mono\",\n\t\t\t\t\t\"aria-collapsed:max-h-[13.6rem]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-highlighted={isPreRendered ? \"true\" : \"false\"}\n\t\t\t\tdata-lang={language}\n\t\t\t\tdata-mantle-highlight-lines={\n\t\t\t\t\tisPreRendered && effectiveHighlightLines != null && effectiveHighlightLines.length > 0\n\t\t\t\t\t\t? effectiveHighlightLines.join(\",\")\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-mantle-line-number-start={\n\t\t\t\t\tisPreRendered && effectiveShowLineNumbers ? String(effectiveLineNumberStart) : \"1\"\n\t\t\t\t}\n\t\t\t\tdata-mantle-line-numbers={isPreRendered && effectiveShowLineNumbers ? \"true\" : \"false\"}\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\t\"--mantle-line-number-start\": String(effectiveLineNumberStart),\n\t\t\t\t\t\ttabSize: 2,\n\t\t\t\t\t\tMozTabSize: 2,\n\t\t\t\t\t} as ComponentProps<\"pre\">[\"style\"]\n\t\t\t\t}\n\t\t\t\ttabIndex={tabIndex ?? -1}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<code\n\t\t\t\t\tclassName=\"text-size-inherit block min-w-full w-max\"\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: displayHtml }}\n\t\t\t\t/>\n\t\t\t</pre>\n\t\t);\n\t},\n);\nCode.displayName = \"CodeBlockCode\";\n\n/**\n * The (optional) header slot of the `CodeBlock`. This is where\n * `CodeBlock.Icon` and `CodeBlock.Title` are rendered.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex items-center gap-1 border-b border-gray-300 bg-base px-4 py-2 text-gray-700\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nHeader.displayName = \"CodeBlockHeader\";\n\n/**\n * The (optional) title of the `CodeBlock`. Renders as `h3` by default;\n * use `asChild` to render a different element.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Title = forwardRef<\n\tHTMLHeadingElement,\n\tHTMLAttributes<HTMLHeadingElement> & { asChild?: boolean }\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"h3\";\n\treturn (\n\t\t<Component\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"text-mono m-0 font-mono font-normal\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nTitle.displayName = \"CodeBlockTitle\";\n\ntype CodeBlockCopyButtonProps = Omit<ComponentProps<\"button\">, \"children\" | \"type\"> & {\n\t/**\n\t * Callback fired when the copy button is clicked, passes the copied text as an argument.\n\t */\n\tonCopy?: (value: string) => void;\n\t/**\n\t * Callback fired when an error occurs during copying.\n\t */\n\tonCopyError?: (error: unknown) => void;\n};\n\n/**\n * The (optional) copy button of the `CodeBlock`. Copies the code content\n * to the clipboard when clicked.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst CopyButton = forwardRef<ComponentRef<\"button\">, CodeBlockCopyButtonProps>(\n\t({ className, onCopy, onCopyError, onClick, ...props }, ref) => {\n\t\tconst { copyTextRef } = useCodeBlockContext();\n\t\tconst [, copyToClipboard] = useCopyToClipboard();\n\t\tconst [wasCopied, setWasCopied] = useState(false);\n\t\tconst timeoutHandle = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n\t\tuseEffect(() => {\n\t\t\treturn () => {\n\t\t\t\tif (timeoutHandle.current != null) {\n\t\t\t\t\tclearTimeout(timeoutHandle.current);\n\t\t\t\t}\n\t\t\t};\n\t\t}, []);\n\n\t\treturn (\n\t\t\t<span className=\"absolute right-2.5 top-2.5 z-10 bg-card\">\n\t\t\t\t<IconButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\tlabel=\"Copy code\"\n\t\t\t\t\ticon={wasCopied ? <CheckIcon /> : <CopyIcon />}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t\tonClick={async (event) => {\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\tonClick?.(event);\n\t\t\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\t\t\tif (timeoutHandle.current != null) {\n\t\t\t\t\t\t\t\t\tclearTimeout(timeoutHandle.current);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst text = copyTextRef.current;\n\t\t\t\t\t\t\tawait copyToClipboard(text);\n\t\t\t\t\t\t\tonCopy?.(text);\n\t\t\t\t\t\t\tsetWasCopied(true);\n\t\t\t\t\t\t\tif (timeoutHandle.current != null) {\n\t\t\t\t\t\t\t\tclearTimeout(timeoutHandle.current);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttimeoutHandle.current = setTimeout(() => {\n\t\t\t\t\t\t\t\tsetWasCopied(false);\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\t\tonCopyError?.(error);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</span>\n\t\t);\n\t},\n);\nCopyButton.displayName = \"CodeBlockCopyButton\";\n\ntype CodeBlockExpanderButtonProps = Omit<\n\tComponentProps<\"button\">,\n\t\"children\" | \"aria-controls\" | \"aria-expanded\"\n> &\n\tWithAsChild;\n\n/**\n * The (optional) expander button of the `CodeBlock`. Toggles the expanded\n * state of the code block. When present, the code block is collapsible.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst ExpanderButton = forwardRef<ComponentRef<\"button\">, CodeBlockExpanderButtonProps>(\n\t({ asChild = false, className, onClick, ...props }, ref) => {\n\t\tconst { codeId, isCodeExpanded, setIsCodeExpanded, setHasCodeExpander } = useCodeBlockContext();\n\n\t\tuseEffect(() => {\n\t\t\tsetHasCodeExpander(true);\n\t\t\treturn () => {\n\t\t\t\tsetHasCodeExpander(false);\n\t\t\t};\n\t\t}, [setHasCodeExpander]);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\t{...props}\n\t\t\t\taria-controls={codeId}\n\t\t\t\taria-expanded={isCodeExpanded}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-card px-4 py-2 font-sans text-gray-700 hover:bg-gray-100\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tsetIsCodeExpanded((prev) => !prev);\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{isCodeExpanded ? \"Show less\" : \"Show more\"}{\" \"}\n\t\t\t\t<MantleIcon\n\t\t\t\t\tsvg={<CaretDownIcon weight=\"bold\" />}\n\t\t\t\t\tclassName={cx(\"size-4\", isCodeExpanded && \"rotate-180\", \"transition-all duration-150\")}\n\t\t\t\t/>\n\t\t\t</Component>\n\t\t);\n\t},\n);\nExpanderButton.displayName = \"CodeBlockExpanderButton\";\n\ntype CodeBlockIconProps = Omit<SvgAttributes, \"children\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon SVG to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg: ReactNode;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset?: undefined | never;\n\t\t  }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon SVG to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg?: undefined | never;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset: Mode;\n\t\t  }\n\t);\n\n/**\n * A small icon for the `CodeBlock` header. Pass either a custom `svg`\n * or a `preset` value (not both).\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nfunction CodeBlockIconComponent({\n\tclassName,\n\tpreset,\n\tsvg: _svgProp,\n\t...props\n}: CodeBlockIconProps) {\n\tlet svg = _svgProp;\n\tif (preset != null) {\n\t\tswitch (preset) {\n\t\t\tcase \"file\":\n\t\t\t\tsvg = <FileTextIcon weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"cli\":\n\t\t\t\tsvg = <TerminalIcon weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"traffic-policy\":\n\t\t\t\tsvg = <TrafficPolicyFileIcon />;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\treturn <MantleIcon className={className} svg={svg} {...props} />;\n}\nCodeBlockIconComponent.displayName = \"CodeBlockIcon\";\n\ntype CodeBlockTabListProps = Omit<ComponentProps<typeof RadixTabsList>, \"asChild\" | \"loop\">;\n\n/**\n * A tab list for the `CodeBlock` header. Renders pill-styled tab triggers\n * that switch which code is displayed. Built on Radix Tabs primitives.\n *\n * Place this inside `CodeBlock.Header` and pair with `CodeBlock.TabContent`\n * in `CodeBlock.Body` to conditionally render code based on the active tab.\n * Tab state is managed by `CodeBlock.Root` via `defaultTab` / `activeTab` / `onActiveTabChange`.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root defaultTab=\"yml\">\n *   <CodeBlock.Header>\n *     <CodeBlock.TabList>\n *       <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n *       <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n *     </CodeBlock.TabList>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.TabContent value=\"yml\">\n *       <CodeBlock.Code value={ymlValue} />\n *     </CodeBlock.TabContent>\n *     <CodeBlock.TabContent value=\"json\">\n *       <CodeBlock.Code value={jsonValue} />\n *     </CodeBlock.TabContent>\n *   </CodeBlock.Body>\n * </CodeBlock.Root>\n * ```\n */\nconst TabList = forwardRef<ComponentRef<typeof RadixTabsList>, CodeBlockTabListProps>(\n\t({ className, ...props }, ref) => (\n\t\t<RadixTabsList className={cx(\"flex items-center gap-1\", className)} ref={ref} {...props} />\n\t),\n);\nTabList.displayName = \"CodeBlockTabList\";\n\ntype CodeBlockTabTriggerProps = Omit<ComponentProps<typeof RadixTabsTrigger>, \"asChild\">;\n\n/**\n * A pill-styled tab trigger for the `CodeBlock` header.\n * Must be rendered within a `CodeBlock.TabList`.\n *\n * @example\n * ```tsx\n * <CodeBlock.TabList>\n *   <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n *   <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n * </CodeBlock.TabList>\n * ```\n */\nconst TabTrigger = forwardRef<ComponentRef<typeof RadixTabsTrigger>, CodeBlockTabTriggerProps>(\n\t({ className, ...props }, ref) => (\n\t\t<RadixTabsTrigger\n\t\t\tclassName={cx(\n\t\t\t\t\"cursor-pointer rounded px-1.5 py-0.5 text-xs font-medium\",\n\t\t\t\t\"text-gray-600 outline-hidden\",\n\t\t\t\t\"hover:text-gray-900\",\n\t\t\t\t\"data-[state=active]:bg-neutral-500/15 data-[state=active]:text-strong\",\n\t\t\t\t\"focus-visible:ring-focus-accent focus-visible:ring-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nTabTrigger.displayName = \"CodeBlockTabTrigger\";\n\ntype CodeBlockTabContentProps = Omit<\n\tComponentProps<typeof RadixTabsContent>,\n\t\"asChild\" | \"forceMount\"\n>;\n\n/**\n * Conditionally renders its children when the associated tab is active.\n * Pair with `CodeBlock.TabList` and `CodeBlock.TabTrigger` in the header,\n * and set `defaultTab` / `activeTab` on `CodeBlock.Root`.\n *\n * @example\n * ```tsx\n * <CodeBlock.Body>\n *   <CodeBlock.CopyButton />\n *   <CodeBlock.TabContent value=\"yml\">\n *     <CodeBlock.Code value={ymlValue} />\n *   </CodeBlock.TabContent>\n *   <CodeBlock.TabContent value=\"json\">\n *     <CodeBlock.Code value={jsonValue} />\n *   </CodeBlock.TabContent>\n * </CodeBlock.Body>\n * ```\n */\nconst TabContent = forwardRef<ComponentRef<typeof RadixTabsContent>, CodeBlockTabContentProps>(\n\t(props, ref) => <RadixTabsContent ref={ref} {...props} />,\n);\nTabContent.displayName = \"CodeBlockTabContent\";\n\n/**\n * Shiki-powered code blocks with build-time syntax highlighting and zero browser bundle.\n *\n * Use `mantleCodeBlockPlugins()` to enable pre-rendering at build time.\n *\n * @example\n * Composition:\n * ```\n * # Standard\n * CodeBlock.Root\n * ├── CodeBlock.Header\n * │   ├── CodeBlock.Icon\n * │   └── CodeBlock.Title\n * ├── CodeBlock.Body\n * │   ├── CodeBlock.CopyButton\n * │   └── CodeBlock.Code\n * └── CodeBlock.ExpanderButton\n *\n * # Tabbed\n * CodeBlock.Root\n * ├── CodeBlock.Header\n * │   └── CodeBlock.TabList\n * │       └── CodeBlock.TabTrigger\n * ├── CodeBlock.Body\n * │   ├── CodeBlock.CopyButton\n * │   └── CodeBlock.TabContent\n * │       └── CodeBlock.Code\n * └── CodeBlock.ExpanderButton\n * ```\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n *\n * // Server-highlighted HTML fetched via an action route + React Query mutation\n * const highlightMutation = useMutation({\n *   mutationFn: async () => {\n *     const response = await fetch(\"/api/shiki-highlight\", {\n *       method: \"POST\",\n *       headers: { \"Content-Type\": \"application/json\" },\n *       body: JSON.stringify({ code: source, language: \"typescript\" }),\n *     });\n *     return response.json();\n *   },\n * });\n *\n * const serverValue = createMantleCodeBlockValue({\n *   language: \"typescript\",\n *   code: source,\n *   preHtml: highlightMutation.data?.html,\n * });\n * ```\n */\nconst CodeBlock = {\n\t/**\n\t * The root component of the `CodeBlock`.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The body of the `CodeBlock`. Contains `Code` and optional `CopyButton`.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The code content. Renders pre-highlighted Shiki HTML when the Vite plugin is active.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCode,\n\t/**\n\t * The optional copy button.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCopyButton,\n\t/**\n\t * The optional expander button for collapsible code blocks.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tExpanderButton,\n\t/**\n\t * The optional header slot for icon and title.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A small icon for the code block header. Use `preset` or `svg`.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tIcon: CodeBlockIconComponent,\n\t/**\n\t * Conditionally renders children when the associated tab is active.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root defaultTab=\"yml\">\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.TabList>\n\t *       <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n\t *       <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n\t *     </CodeBlock.TabList>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.TabContent value=\"yml\">\n\t *       <CodeBlock.Code value={ymlValue} />\n\t *     </CodeBlock.TabContent>\n\t *     <CodeBlock.TabContent value=\"json\">\n\t *       <CodeBlock.Code value={jsonValue} />\n\t *     </CodeBlock.TabContent>\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTabContent,\n\t/**\n\t * A tab list for the code block header. Renders pill-styled tabs for switching code.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root defaultTab=\"yml\">\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.TabList>\n\t *       <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n\t *       <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n\t *     </CodeBlock.TabList>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.TabContent value=\"yml\">\n\t *       <CodeBlock.Code value={ymlValue} />\n\t *     </CodeBlock.TabContent>\n\t *     <CodeBlock.TabContent value=\"json\">\n\t *       <CodeBlock.Code value={jsonValue} />\n\t *     </CodeBlock.TabContent>\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTabList,\n\t/**\n\t * A pill-styled tab trigger for the code block header. Must be inside `TabList`.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root defaultTab=\"yml\">\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.TabList>\n\t *       <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n\t *       <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n\t *     </CodeBlock.TabList>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.TabContent value=\"yml\">\n\t *       <CodeBlock.Code value={ymlValue} />\n\t *     </CodeBlock.TabContent>\n\t *     <CodeBlock.TabContent value=\"json\">\n\t *       <CodeBlock.Code value={jsonValue} />\n\t *     </CodeBlock.TabContent>\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTabTrigger,\n\t/**\n\t * The optional title rendered in the header.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCodeBlock,\n};\n","/**\n * Returns `true` if `value` has more than `maxLines` newline-delimited lines.\n *\n * This is equivalent to `value.split(\"\\\\n\").length > maxLines`, but avoids\n * allocating an intermediate array and can early-return once the threshold is exceeded.\n */\nfunction hasMoreThanNLines(value: string, maxLines: number): boolean {\n\tlet lines = 1;\n\tif (lines > maxLines) {\n\t\treturn true;\n\t}\n\n\tfor (let i = 0; i < value.length; i++) {\n\t\tif (value[i] === \"\\n\") {\n\t\t\tlines += 1;\n\t\t\tif (lines > maxLines) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t}\n\treturn false;\n}\n\nexport {\n\t//,\n\thasMoreThanNLines,\n};\n"],"mappings":"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"}
+{"version":3,"file":"code-block.js","names":["Root","RadixTabsRoot","MantleIcon","RadixTabsList","RadixTabsTrigger","RadixTabsContent"],"sources":["../src/components/code-block/escape-html.ts","../src/components/code-block/code-block.tsx","../src/components/code-block/has-more-than-n-lines.ts"],"sourcesContent":["/**\n * Escapes special HTML characters in a string to their corresponding\n * HTML entities, preventing issues like unintended HTML rendering or\n * cross-site scripting (XSS) when injecting raw strings into the DOM\n * using `dangerouslySetInnerHTML`.\n *\n * Characters escaped:\n * - \\& => `&amp;`;\n * - \\< => `&lt;`;\n * - \\> => `&gt;`;\n * - \\\" => `&quot;`;\n * - \\' => `&#39;`;\n *\n * @param {string} value The raw string to be escaped.\n *\n * @example\n * escapeHtml('<div>Hello & \"world\"</div>');\n * // Returns: '&lt;div&gt;Hello &amp; &quot;world&quot;&lt;/div&gt;'\n */\nfunction escapeHtml(value: string): string {\n\tlet firstSpecialCharIndex = -1;\n\tfor (let i = 0; i < value.length; i++) {\n\t\tconst character = value[i];\n\t\tif (\n\t\t\tcharacter === \"&\" ||\n\t\t\tcharacter === \"<\" ||\n\t\t\tcharacter === \">\" ||\n\t\t\tcharacter === '\"' ||\n\t\t\tcharacter === \"'\"\n\t\t) {\n\t\t\tfirstSpecialCharIndex = i;\n\t\t\tbreak;\n\t\t}\n\t}\n\n\tif (firstSpecialCharIndex === -1) {\n\t\treturn value;\n\t}\n\n\tlet escaped = value.slice(0, firstSpecialCharIndex);\n\tfor (let i = firstSpecialCharIndex; i < value.length; i++) {\n\t\tconst character = value[i];\n\t\tswitch (character) {\n\t\t\tcase \"&\":\n\t\t\t\tescaped += \"&amp;\";\n\t\t\t\tbreak;\n\t\t\tcase \"<\":\n\t\t\t\tescaped += \"&lt;\";\n\t\t\t\tbreak;\n\t\t\tcase \">\":\n\t\t\t\tescaped += \"&gt;\";\n\t\t\t\tbreak;\n\t\t\tcase '\"':\n\t\t\t\tescaped += \"&quot;\";\n\t\t\t\tbreak;\n\t\t\tcase \"'\":\n\t\t\t\tescaped += \"&#39;\";\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tescaped += character;\n\t\t}\n\t}\n\treturn escaped;\n}\n\nexport {\n\t//,\n\tescapeHtml,\n};\n","\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport { CopyIcon } from \"@phosphor-icons/react/Copy\";\nimport { FileTextIcon } from \"@phosphor-icons/react/FileText\";\nimport { TerminalIcon } from \"@phosphor-icons/react/Terminal\";\nimport type {\n\tComponentProps,\n\tComponentRef,\n\tDispatch,\n\tHTMLAttributes,\n\tReactNode,\n\tSetStateAction,\n} from \"react\";\nimport {\n\tcreateContext,\n\tforwardRef,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseId,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport {\n\tContent as RadixTabsContent,\n\tList as RadixTabsList,\n\tRoot as RadixTabsRoot,\n\tTrigger as RadixTabsTrigger,\n} from \"@radix-ui/react-tabs\";\nimport assert from \"tiny-invariant\";\nimport { useCopyToClipboard } from \"../../hooks/use-copy-to-clipboard.js\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon as MantleIcon } from \"../icon/icon.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { TrafficPolicyFileIcon } from \"../icons/traffic-policy-file.js\";\nimport { IconButton } from \"../button/icon-button.js\";\nimport { Slot } from \"../slot/index.js\";\nimport { escapeHtml } from \"./escape-html.js\";\nimport type { Mode } from \"./resolve-pre-rendered-props.js\";\nimport type { MantleCodeBlockValue } from \"./mantle-code.js\";\n\ntype CodeBlockContextType = {\n\tcodeId: string | undefined;\n\tcopyTextRef: { current: string };\n\thasCodeExpander: boolean;\n\tisCodeExpanded: boolean;\n\tregisterCodeId: (id: string) => void;\n\tsetHasCodeExpander: (value: boolean) => void;\n\tsetIsCodeExpanded: Dispatch<SetStateAction<boolean>>;\n\tunregisterCodeId: (id: string) => void;\n};\n\nconst CodeBlockContext = createContext<CodeBlockContextType | null>(null);\n\n/** Returns the nearest `CodeBlock` context, throwing if called outside a `CodeBlock.Root`. */\nfunction useCodeBlockContext(): CodeBlockContextType {\n\tconst context = useContext(CodeBlockContext);\n\tassert(context != null, \"CodeBlock subcomponents must be rendered within a <CodeBlock.Root>.\");\n\treturn context;\n}\n\ntype CodeBlockRootProps = Omit<ComponentProps<\"div\">, \"align\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The default active tab value (uncontrolled).\n\t\t * Only relevant when using `CodeBlock.TabList` / `CodeBlock.TabContent`.\n\t\t */\n\t\tdefaultTab?: string;\n\t\t/**\n\t\t * The controlled active tab value.\n\t\t * Only relevant when using `CodeBlock.TabList` / `CodeBlock.TabContent`.\n\t\t */\n\t\tactiveTab?: string;\n\t\t/**\n\t\t * Callback fired when the active tab changes.\n\t\t * Only relevant when using `CodeBlock.TabList` / `CodeBlock.TabContent`.\n\t\t */\n\t\tonActiveTabChange?: (value: string) => void;\n\t};\n\n/**\n * Shiki-powered code blocks with build-time syntax highlighting and zero browser bundle.\n * This is the root component for all CodeBlock components.\n *\n * For tabbed code blocks, pass `defaultTab` (uncontrolled) or `activeTab` / `onActiveTabChange`\n * (controlled) to enable tab switching with `CodeBlock.TabList` and `CodeBlock.TabContent`.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, CodeBlockRootProps>(\n\t({ asChild = false, className, defaultTab, activeTab, onActiveTabChange, ...props }, ref) => {\n\t\tconst copyTextRef = useRef(\"\");\n\t\tconst [hasCodeExpander, setHasCodeExpander] = useState(false);\n\t\tconst [isCodeExpanded, setIsCodeExpanded] = useState(false);\n\t\tconst [codeId, setCodeId] = useState<string | undefined>(undefined);\n\n\t\tconst registerCodeId = useCallback((id: string) => {\n\t\t\tsetCodeId((old) => {\n\t\t\t\tassert(old == null, \"You can only render a single CodeBlock.Code within a CodeBlock.\");\n\t\t\t\treturn id;\n\t\t\t});\n\t\t}, []);\n\n\t\tconst unregisterCodeId = useCallback((id: string) => {\n\t\t\tsetCodeId((old) => {\n\t\t\t\tassert(old === id, \"You can only render a single CodeBlock.Code within a CodeBlock.\");\n\t\t\t\treturn undefined;\n\t\t\t});\n\t\t}, []);\n\n\t\tconst context: CodeBlockContextType = useMemo(\n\t\t\t() =>\n\t\t\t\t({\n\t\t\t\t\tcodeId,\n\t\t\t\t\tcopyTextRef,\n\t\t\t\t\thasCodeExpander,\n\t\t\t\t\tisCodeExpanded,\n\t\t\t\t\tregisterCodeId,\n\t\t\t\t\tsetHasCodeExpander,\n\t\t\t\t\tsetIsCodeExpanded,\n\t\t\t\t\tunregisterCodeId,\n\t\t\t\t}) as const,\n\t\t\t[codeId, hasCodeExpander, isCodeExpanded, registerCodeId, unregisterCodeId],\n\t\t);\n\n\t\tconst hasTabs = defaultTab != null || activeTab != null;\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\tconst tree = (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"code-block\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-mono w-full overflow-hidden rounded-md border border-gray-300 bg-card font-mono\",\n\t\t\t\t\t\"[&_svg]:shrink-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\n\t\treturn (\n\t\t\t<CodeBlockContext.Provider value={context}>\n\t\t\t\t{hasTabs ? (\n\t\t\t\t\t<RadixTabsRoot\n\t\t\t\t\t\tasChild\n\t\t\t\t\t\tdefaultValue={defaultTab}\n\t\t\t\t\t\tvalue={activeTab}\n\t\t\t\t\t\tonValueChange={onActiveTabChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{tree}\n\t\t\t\t\t</RadixTabsRoot>\n\t\t\t\t) : (\n\t\t\t\t\ttree\n\t\t\t\t)}\n\t\t\t</CodeBlockContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"CodeBlock\";\n\n/**\n * The body of the `CodeBlock`. This is where `CodeBlock.Code` and\n * the optional `CodeBlock.CopyButton` are rendered.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"code-block-body\"\n\t\t\t\tclassName={cx(\"relative\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nBody.displayName = \"CodeBlockBody\";\n\n/**\n * Matches `SHIKI_VAL_<index>` placeholders injected by the Vite plugin for\n * interpolated template expressions. Hoisted to module scope to avoid\n * re-creating the regex on every substitution call.\n */\nconst LEGACY_SHIKI_VAL_PATTERN = /SHIKI_VAL_(\\d+)/g;\n\n/** Escapes special characters in a string for use in a `RegExp` constructor. */\nfunction escapeForRegExp(value: string): string {\n\treturn value.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\n\nconst maxPreValPatternCacheSize = 500;\nconst preValPatternCache = new Map<string, RegExp>();\n\n/**\n * Returns the cached `RegExp` for the given `preValToken`, falling back to the\n * legacy `SHIKI_VAL_<n>` pattern when no token is provided.\n */\nfunction getTemplateValPattern(preValToken: string | undefined): RegExp {\n\tif (preValToken == null || preValToken.length === 0) {\n\t\treturn LEGACY_SHIKI_VAL_PATTERN;\n\t}\n\n\tlet cached = preValPatternCache.get(preValToken);\n\tif (cached == null) {\n\t\tif (preValPatternCache.size >= maxPreValPatternCacheSize) {\n\t\t\tpreValPatternCache.clear();\n\t\t}\n\t\tcached = new RegExp(`${escapeForRegExp(preValToken)}(\\\\d+)__`, \"g\");\n\t\tpreValPatternCache.set(preValToken, cached);\n\t}\n\treturn cached;\n}\n\n/**\n * Replaces placeholder tokens in `input` with values from `vals`, applying\n * `mapValue` to each substituted value. Returns the input unchanged when\n * no placeholders are present.\n */\nfunction substituteTemplateVals(\n\tinput: string,\n\tvals: unknown[],\n\tpreValToken: string | undefined,\n\tmapValue: (value: unknown) => string,\n): string {\n\tif (preValToken == null) {\n\t\tif (!input.includes(\"SHIKI_VAL_\")) {\n\t\t\treturn input;\n\t\t}\n\t} else if (!input.includes(preValToken)) {\n\t\treturn input;\n\t}\n\n\treturn input.replaceAll(getTemplateValPattern(preValToken), (match, indexText: string) => {\n\t\tconst index = Number.parseInt(indexText, 10);\n\t\tif (Number.isNaN(index) || index < 0 || index >= vals.length) {\n\t\t\treturn match;\n\t\t}\n\t\treturn mapValue(vals[index]);\n\t});\n}\n\n/** Substitutes placeholder tokens in pre-rendered HTML, HTML-escaping each interpolated value. */\nfunction substitutePreVals(html: string, vals: unknown[], preValToken: string | undefined): string {\n\treturn substituteTemplateVals(html, vals, preValToken, (value) => escapeHtml(String(value)));\n}\n\n/** Substitutes placeholder tokens in plain text (for the copy button), without HTML escaping. */\nfunction substitutePreValsPlainText(\n\ttext: string,\n\tvals: unknown[],\n\tpreValToken: string | undefined,\n): string {\n\treturn substituteTemplateVals(text, vals, preValToken, (value) => String(value));\n}\n\ntype CodeBlockCodeProps = Omit<ComponentProps<\"pre\">, \"children\"> & {\n\t/**\n\t * The code value produced by `mantleCode(\"lang\")` tagged template.\n\t * Contains pre-rendered Shiki HTML (when the Vite plugin is active) and\n\t * the original code string for the copy button.\n\t */\n\tvalue: MantleCodeBlockValue;\n};\n\n/**\n * The `CodeBlock` content. Renders pre-highlighted code from `mantleCode()`.\n *\n * `value[\"~preHtml\"]` must be provided by Mantle's Vite plugin or server highlighter.\n * Runtime highlighting and runtime line decoration are intentionally unsupported.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Code = forwardRef<ComponentRef<\"pre\">, CodeBlockCodeProps>(\n\t({ className, style, tabIndex, value, ...props }, ref) => {\n\t\tconst id = useId();\n\t\tconst { copyTextRef, hasCodeExpander, isCodeExpanded, registerCodeId, unregisterCodeId } =\n\t\t\tuseCodeBlockContext();\n\t\tconst {\n\t\t\tlanguage,\n\t\t\tcode,\n\t\t\t\"~preValToken\": __preValToken,\n\t\t\t\"~preVals\": __preVals,\n\t\t\t\"~highlightLines\": __highlightLines,\n\t\t\t\"~lineNumberStart\": __lineNumberStart,\n\t\t\t\"~preHtml\": __preHtml,\n\t\t\t\"~showLineNumbers\": __showLineNumbers,\n\t\t} = value;\n\n\t\tconst effectiveHighlightLines = __highlightLines;\n\t\tconst effectiveLineNumberStart = __lineNumberStart ?? 1;\n\t\tconst effectiveShowLineNumbers = __showLineNumbers ?? false;\n\t\tconst copyText = useMemo(\n\t\t\t() =>\n\t\t\t\t__preVals != null && __preVals.length > 0\n\t\t\t\t\t? substitutePreValsPlainText(code, __preVals, __preValToken)\n\t\t\t\t\t: code,\n\t\t\t[__preValToken, __preVals, code],\n\t\t);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tcopyTextRef.current = copyText;\n\t\t}, [copyTextRef, copyText]);\n\n\t\tuseEffect(() => {\n\t\t\tregisterCodeId(id);\n\n\t\t\treturn () => {\n\t\t\t\tunregisterCodeId(id);\n\t\t\t};\n\t\t}, [id, registerCodeId, unregisterCodeId]);\n\n\t\tconst renderedHtml = useMemo(() => {\n\t\t\tif (__preHtml == null) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\treturn __preVals != null && __preVals.length > 0\n\t\t\t\t? substitutePreVals(__preHtml, __preVals, __preValToken)\n\t\t\t\t: __preHtml;\n\t\t}, [__preHtml, __preValToken, __preVals]);\n\n\t\tconst isPreRendered = renderedHtml != null;\n\t\tconst displayHtml = renderedHtml ?? escapeHtml(copyText);\n\n\t\treturn (\n\t\t\t<pre\n\t\t\t\tdata-slot=\"code-block-code\"\n\t\t\t\taria-expanded={hasCodeExpander ? isCodeExpanded : undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"scrollbar overflow-x-auto overflow-y-hidden py-4\",\n\t\t\t\t\t!isPreRendered && \"pr-14\",\n\t\t\t\t\t\"data-[mantle-line-numbers~='false']:pl-4\",\n\t\t\t\t\t\"text-mono m-0 font-mono\",\n\t\t\t\t\t\"aria-collapsed:max-h-[13.6rem]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-highlighted={isPreRendered ? \"true\" : \"false\"}\n\t\t\t\tdata-lang={language}\n\t\t\t\tdata-mantle-highlight-lines={\n\t\t\t\t\tisPreRendered && effectiveHighlightLines != null && effectiveHighlightLines.length > 0\n\t\t\t\t\t\t? effectiveHighlightLines.join(\",\")\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-mantle-line-number-start={\n\t\t\t\t\tisPreRendered && effectiveShowLineNumbers ? String(effectiveLineNumberStart) : \"1\"\n\t\t\t\t}\n\t\t\t\tdata-mantle-line-numbers={isPreRendered && effectiveShowLineNumbers ? \"true\" : \"false\"}\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\t\"--mantle-line-number-start\": String(effectiveLineNumberStart),\n\t\t\t\t\t\ttabSize: 2,\n\t\t\t\t\t\tMozTabSize: 2,\n\t\t\t\t\t} as ComponentProps<\"pre\">[\"style\"]\n\t\t\t\t}\n\t\t\t\ttabIndex={tabIndex ?? -1}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<code\n\t\t\t\t\tclassName=\"text-size-inherit block min-w-full w-max\"\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: displayHtml }}\n\t\t\t\t/>\n\t\t\t</pre>\n\t\t);\n\t},\n);\nCode.displayName = \"CodeBlockCode\";\n\n/**\n * The (optional) header slot of the `CodeBlock`. This is where\n * `CodeBlock.Icon` and `CodeBlock.Title` are rendered.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"code-block-header\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex items-center gap-1 border-b border-gray-300 bg-base px-4 py-2 text-gray-700\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nHeader.displayName = \"CodeBlockHeader\";\n\n/**\n * The (optional) title of the `CodeBlock`. Renders as `h3` by default;\n * use `asChild` to render a different element.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Title = forwardRef<\n\tHTMLHeadingElement,\n\tHTMLAttributes<HTMLHeadingElement> & { asChild?: boolean }\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"h3\";\n\treturn (\n\t\t<Component\n\t\t\tdata-slot=\"code-block-title\"\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"text-mono m-0 font-mono font-normal\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nTitle.displayName = \"CodeBlockTitle\";\n\ntype CodeBlockCopyButtonProps = Omit<ComponentProps<\"button\">, \"children\" | \"type\"> & {\n\t/**\n\t * Callback fired when the copy button is clicked, passes the copied text as an argument.\n\t */\n\tonCopy?: (value: string) => void;\n\t/**\n\t * Callback fired when an error occurs during copying.\n\t */\n\tonCopyError?: (error: unknown) => void;\n};\n\n/**\n * The (optional) copy button of the `CodeBlock`. Copies the code content\n * to the clipboard when clicked.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst CopyButton = forwardRef<ComponentRef<\"button\">, CodeBlockCopyButtonProps>(\n\t({ className, onCopy, onCopyError, onClick, ...props }, ref) => {\n\t\tconst { copyTextRef } = useCodeBlockContext();\n\t\tconst [, copyToClipboard] = useCopyToClipboard();\n\t\tconst [wasCopied, setWasCopied] = useState(false);\n\t\tconst timeoutHandle = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n\t\tuseEffect(() => {\n\t\t\treturn () => {\n\t\t\t\tif (timeoutHandle.current != null) {\n\t\t\t\t\tclearTimeout(timeoutHandle.current);\n\t\t\t\t}\n\t\t\t};\n\t\t}, []);\n\n\t\treturn (\n\t\t\t<span data-slot=\"code-block-copy-button\" className=\"absolute right-2.5 top-2.5 z-10 bg-card\">\n\t\t\t\t<IconButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\tlabel=\"Copy code\"\n\t\t\t\t\ticon={wasCopied ? <CheckIcon /> : <CopyIcon />}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t\tonClick={async (event) => {\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\tonClick?.(event);\n\t\t\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\t\t\tif (timeoutHandle.current != null) {\n\t\t\t\t\t\t\t\t\tclearTimeout(timeoutHandle.current);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst text = copyTextRef.current;\n\t\t\t\t\t\t\tawait copyToClipboard(text);\n\t\t\t\t\t\t\tonCopy?.(text);\n\t\t\t\t\t\t\tsetWasCopied(true);\n\t\t\t\t\t\t\tif (timeoutHandle.current != null) {\n\t\t\t\t\t\t\t\tclearTimeout(timeoutHandle.current);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttimeoutHandle.current = setTimeout(() => {\n\t\t\t\t\t\t\t\tsetWasCopied(false);\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\t\tonCopyError?.(error);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</span>\n\t\t);\n\t},\n);\nCopyButton.displayName = \"CodeBlockCopyButton\";\n\ntype CodeBlockExpanderButtonProps = Omit<\n\tComponentProps<\"button\">,\n\t\"children\" | \"aria-controls\" | \"aria-expanded\"\n> &\n\tWithAsChild;\n\n/**\n * The (optional) expander button of the `CodeBlock`. Toggles the expanded\n * state of the code block. When present, the code block is collapsible.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst ExpanderButton = forwardRef<ComponentRef<\"button\">, CodeBlockExpanderButtonProps>(\n\t({ asChild = false, className, onClick, ...props }, ref) => {\n\t\tconst { codeId, isCodeExpanded, setIsCodeExpanded, setHasCodeExpander } = useCodeBlockContext();\n\n\t\tuseEffect(() => {\n\t\t\tsetHasCodeExpander(true);\n\t\t\treturn () => {\n\t\t\t\tsetHasCodeExpander(false);\n\t\t\t};\n\t\t}, [setHasCodeExpander]);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\t{...props}\n\t\t\t\tdata-slot=\"code-block-expander-button\"\n\t\t\t\taria-controls={codeId}\n\t\t\t\taria-expanded={isCodeExpanded}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-card px-4 py-2 font-sans text-gray-700 hover:bg-gray-100\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tsetIsCodeExpanded((prev) => !prev);\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{isCodeExpanded ? \"Show less\" : \"Show more\"}{\" \"}\n\t\t\t\t<MantleIcon\n\t\t\t\t\tsvg={<CaretDownIcon weight=\"bold\" />}\n\t\t\t\t\tclassName={cx(\"size-4\", isCodeExpanded && \"rotate-180\", \"transition-all duration-150\")}\n\t\t\t\t/>\n\t\t\t</Component>\n\t\t);\n\t},\n);\nExpanderButton.displayName = \"CodeBlockExpanderButton\";\n\ntype CodeBlockIconProps = Omit<SvgAttributes, \"children\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon SVG to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg: ReactNode;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset?: undefined | never;\n\t\t  }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon SVG to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg?: undefined | never;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset: Mode;\n\t\t  }\n\t);\n\n/**\n * A small icon for the `CodeBlock` header. Pass either a custom `svg`\n * or a `preset` value (not both).\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nfunction CodeBlockIconComponent({\n\tclassName,\n\tpreset,\n\tsvg: _svgProp,\n\t...props\n}: CodeBlockIconProps) {\n\tlet svg = _svgProp;\n\tif (preset != null) {\n\t\tswitch (preset) {\n\t\t\tcase \"file\":\n\t\t\t\tsvg = <FileTextIcon weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"cli\":\n\t\t\t\tsvg = <TerminalIcon weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"traffic-policy\":\n\t\t\t\tsvg = <TrafficPolicyFileIcon />;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\treturn <MantleIcon data-slot=\"code-block-icon\" className={className} svg={svg} {...props} />;\n}\nCodeBlockIconComponent.displayName = \"CodeBlockIcon\";\n\ntype CodeBlockTabListProps = Omit<ComponentProps<typeof RadixTabsList>, \"asChild\" | \"loop\">;\n\n/**\n * A tab list for the `CodeBlock` header. Renders pill-styled tab triggers\n * that switch which code is displayed. Built on Radix Tabs primitives.\n *\n * Place this inside `CodeBlock.Header` and pair with `CodeBlock.TabContent`\n * in `CodeBlock.Body` to conditionally render code based on the active tab.\n * Tab state is managed by `CodeBlock.Root` via `defaultTab` / `activeTab` / `onActiveTabChange`.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root defaultTab=\"yml\">\n *   <CodeBlock.Header>\n *     <CodeBlock.TabList>\n *       <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n *       <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n *     </CodeBlock.TabList>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.TabContent value=\"yml\">\n *       <CodeBlock.Code value={ymlValue} />\n *     </CodeBlock.TabContent>\n *     <CodeBlock.TabContent value=\"json\">\n *       <CodeBlock.Code value={jsonValue} />\n *     </CodeBlock.TabContent>\n *   </CodeBlock.Body>\n * </CodeBlock.Root>\n * ```\n */\nconst TabList = forwardRef<ComponentRef<typeof RadixTabsList>, CodeBlockTabListProps>(\n\t({ className, ...props }, ref) => (\n\t\t<RadixTabsList\n\t\t\tdata-slot=\"code-block-tab-list\"\n\t\t\tclassName={cx(\"flex items-center gap-1\", className)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nTabList.displayName = \"CodeBlockTabList\";\n\ntype CodeBlockTabTriggerProps = Omit<ComponentProps<typeof RadixTabsTrigger>, \"asChild\">;\n\n/**\n * A pill-styled tab trigger for the `CodeBlock` header.\n * Must be rendered within a `CodeBlock.TabList`.\n *\n * @example\n * ```tsx\n * <CodeBlock.TabList>\n *   <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n *   <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n * </CodeBlock.TabList>\n * ```\n */\nconst TabTrigger = forwardRef<ComponentRef<typeof RadixTabsTrigger>, CodeBlockTabTriggerProps>(\n\t({ className, ...props }, ref) => (\n\t\t<RadixTabsTrigger\n\t\t\tdata-slot=\"code-block-tab-trigger\"\n\t\t\tclassName={cx(\n\t\t\t\t\"cursor-pointer rounded px-1.5 py-0.5 text-xs font-medium\",\n\t\t\t\t\"text-gray-600 outline-hidden\",\n\t\t\t\t\"hover:text-gray-900\",\n\t\t\t\t\"data-[state=active]:bg-neutral-500/15 data-[state=active]:text-strong\",\n\t\t\t\t\"focus-visible:ring-focus-accent focus-visible:ring-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nTabTrigger.displayName = \"CodeBlockTabTrigger\";\n\ntype CodeBlockTabContentProps = Omit<\n\tComponentProps<typeof RadixTabsContent>,\n\t\"asChild\" | \"forceMount\"\n>;\n\n/**\n * Conditionally renders its children when the associated tab is active.\n * Pair with `CodeBlock.TabList` and `CodeBlock.TabTrigger` in the header,\n * and set `defaultTab` / `activeTab` on `CodeBlock.Root`.\n *\n * @example\n * ```tsx\n * <CodeBlock.Body>\n *   <CodeBlock.CopyButton />\n *   <CodeBlock.TabContent value=\"yml\">\n *     <CodeBlock.Code value={ymlValue} />\n *   </CodeBlock.TabContent>\n *   <CodeBlock.TabContent value=\"json\">\n *     <CodeBlock.Code value={jsonValue} />\n *   </CodeBlock.TabContent>\n * </CodeBlock.Body>\n * ```\n */\nconst TabContent = forwardRef<ComponentRef<typeof RadixTabsContent>, CodeBlockTabContentProps>(\n\t(props, ref) => <RadixTabsContent data-slot=\"code-block-tab-content\" ref={ref} {...props} />,\n);\nTabContent.displayName = \"CodeBlockTabContent\";\n\n/**\n * Shiki-powered code blocks with build-time syntax highlighting and zero browser bundle.\n *\n * Use `mantleCodeBlockPlugins()` to enable pre-rendering at build time.\n *\n * @example\n * Composition:\n * ```\n * # Standard\n * CodeBlock.Root\n * ├── CodeBlock.Header\n * │   ├── CodeBlock.Icon\n * │   └── CodeBlock.Title\n * ├── CodeBlock.Body\n * │   ├── CodeBlock.CopyButton\n * │   └── CodeBlock.Code\n * └── CodeBlock.ExpanderButton\n *\n * # Tabbed\n * CodeBlock.Root\n * ├── CodeBlock.Header\n * │   └── CodeBlock.TabList\n * │       └── CodeBlock.TabTrigger\n * ├── CodeBlock.Body\n * │   ├── CodeBlock.CopyButton\n * │   └── CodeBlock.TabContent\n * │       └── CodeBlock.Code\n * └── CodeBlock.ExpanderButton\n * ```\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n *\n * // Server-highlighted HTML fetched via an action route + React Query mutation\n * const highlightMutation = useMutation({\n *   mutationFn: async () => {\n *     const response = await fetch(\"/api/shiki-highlight\", {\n *       method: \"POST\",\n *       headers: { \"Content-Type\": \"application/json\" },\n *       body: JSON.stringify({ code: source, language: \"typescript\" }),\n *     });\n *     return response.json();\n *   },\n * });\n *\n * const serverValue = createMantleCodeBlockValue({\n *   language: \"typescript\",\n *   code: source,\n *   preHtml: highlightMutation.data?.html,\n * });\n * ```\n */\nconst CodeBlock = {\n\t/**\n\t * The root component of the `CodeBlock`.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The body of the `CodeBlock`. Contains `Code` and optional `CopyButton`.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The code content. Renders pre-highlighted Shiki HTML when the Vite plugin is active.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCode,\n\t/**\n\t * The optional copy button.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCopyButton,\n\t/**\n\t * The optional expander button for collapsible code blocks.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tExpanderButton,\n\t/**\n\t * The optional header slot for icon and title.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A small icon for the code block header. Use `preset` or `svg`.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tIcon: CodeBlockIconComponent,\n\t/**\n\t * Conditionally renders children when the associated tab is active.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root defaultTab=\"yml\">\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.TabList>\n\t *       <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n\t *       <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n\t *     </CodeBlock.TabList>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.TabContent value=\"yml\">\n\t *       <CodeBlock.Code value={ymlValue} />\n\t *     </CodeBlock.TabContent>\n\t *     <CodeBlock.TabContent value=\"json\">\n\t *       <CodeBlock.Code value={jsonValue} />\n\t *     </CodeBlock.TabContent>\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTabContent,\n\t/**\n\t * A tab list for the code block header. Renders pill-styled tabs for switching code.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root defaultTab=\"yml\">\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.TabList>\n\t *       <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n\t *       <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n\t *     </CodeBlock.TabList>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.TabContent value=\"yml\">\n\t *       <CodeBlock.Code value={ymlValue} />\n\t *     </CodeBlock.TabContent>\n\t *     <CodeBlock.TabContent value=\"json\">\n\t *       <CodeBlock.Code value={jsonValue} />\n\t *     </CodeBlock.TabContent>\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTabList,\n\t/**\n\t * A pill-styled tab trigger for the code block header. Must be inside `TabList`.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root defaultTab=\"yml\">\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.TabList>\n\t *       <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n\t *       <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n\t *     </CodeBlock.TabList>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.TabContent value=\"yml\">\n\t *       <CodeBlock.Code value={ymlValue} />\n\t *     </CodeBlock.TabContent>\n\t *     <CodeBlock.TabContent value=\"json\">\n\t *       <CodeBlock.Code value={jsonValue} />\n\t *     </CodeBlock.TabContent>\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTabTrigger,\n\t/**\n\t * The optional title rendered in the header.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCodeBlock,\n};\n","/**\n * Returns `true` if `value` has more than `maxLines` newline-delimited lines.\n *\n * This is equivalent to `value.split(\"\\\\n\").length > maxLines`, but avoids\n * allocating an intermediate array and can early-return once the threshold is exceeded.\n */\nfunction hasMoreThanNLines(value: string, maxLines: number): boolean {\n\tlet lines = 1;\n\tif (lines > maxLines) {\n\t\treturn true;\n\t}\n\n\tfor (let i = 0; i < value.length; i++) {\n\t\tif (value[i] === \"\\n\") {\n\t\t\tlines += 1;\n\t\t\tif (lines > maxLines) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t}\n\treturn false;\n}\n\nexport {\n\t//,\n\thasMoreThanNLines,\n};\n"],"mappings":"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"}

package/dist/code-block_highlight-utils.d.ts

@@ -1,2 +1,2 @@
-import { A as DecorateHighlightedHtmlInput, C as Indentation, D as isSupportedLanguage, E as SupportedLanguage, M as LineRange, O as parseLanguage, S as normalizeIndentation, T as isIndentation, b as defaultShowLineNumbers, g as parseCodeBlockShowLineNumbers, h as parseCodeBlockLineNumberStart, j as decorateHighlightedHtml, k as supportedLanguages, m as parseCodeBlockHighlightLines, p as tokenizeMetastring, u as normalizeValue, w as inferIndentation } from "./resolve-pre-rendered-props-dtM7g5R-.js";
+import { A as DecorateHighlightedHtmlInput, C as Indentation, D as isSupportedLanguage, E as SupportedLanguage, M as LineRange, O as parseLanguage, S as normalizeIndentation, T as isIndentation, b as defaultShowLineNumbers, g as parseCodeBlockShowLineNumbers, h as parseCodeBlockLineNumberStart, j as decorateHighlightedHtml, k as supportedLanguages, m as parseCodeBlockHighlightLines, p as tokenizeMetastring, u as normalizeValue, w as inferIndentation } from "./resolve-pre-rendered-props-kcQrtWPt.js";
 export { type DecorateHighlightedHtmlInput, type Indentation, type LineRange, type SupportedLanguage, decorateHighlightedHtml, defaultShowLineNumbers, inferIndentation, isIndentation, isSupportedLanguage, normalizeIndentation, normalizeValue, parseCodeBlockHighlightLines, parseCodeBlockLineNumberStart, parseCodeBlockShowLineNumbers, parseLanguage, supportedLanguages, tokenizeMetastring };

package/dist/code-block_highlight-utils.js

@@ -1 +1 @@
-import{_ as e,a as t,c as n,d as r,f as i,h as a,l as o,m as s,n as c,o as l,p as u,s as d,u as f}from"./resolve-pre-rendered-props-BWARzIcY.js";export{a as decorateHighlightedHtml,e as defaultShowLineNumbers,u as inferIndentation,s as isIndentation,o as isSupportedLanguage,i as normalizeIndentation,c as normalizeValue,l as parseCodeBlockHighlightLines,d as parseCodeBlockLineNumberStart,n as parseCodeBlockShowLineNumbers,f as parseLanguage,r as supportedLanguages,t as tokenizeMetastring};
+import{_ as e,a as t,c as n,d as r,f as i,h as a,l as o,m as s,n as c,o as l,p as u,s as d,u as f}from"./resolve-pre-rendered-props-BXv6e6fc.js";export{a as decorateHighlightedHtml,e as defaultShowLineNumbers,u as inferIndentation,s as isIndentation,o as isSupportedLanguage,i as normalizeIndentation,c as normalizeValue,l as parseCodeBlockHighlightLines,d as parseCodeBlockLineNumberStart,n as parseCodeBlockShowLineNumbers,f as parseLanguage,r as supportedLanguages,t as tokenizeMetastring};

package/dist/code.d.ts

@@ -1,5 +1,5 @@
+import { t as WithAsChild } from "./as-child-CJ2vTesV.js";
 import * as _$react from "react";
-import { HTMLAttributes } from "react";
 
 //#region src/components/code/code.d.ts
 /**
@@ -14,7 +14,7 @@ import { HTMLAttributes } from "react";
  * </p>
  * ```
  */
-declare const Code: _$react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & _$react.RefAttributes<HTMLSpanElement>>;
+declare const Code: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLElement> & _$react.HTMLAttributes<HTMLElement> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLElement>>;
 //#endregion
 export { Code };
 //# sourceMappingURL=code.d.ts.map

package/dist/code.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";const r=t(({className:t,...r},i)=>n(`code`,{ref:i,className:e(`border-gray-500/15 rounded-md border bg-gray-500/5 px-1 font-mono text-[0.8em]`,t),...r}));r.displayName=`Code`;export{r as Code};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n,className:i,...a},o)=>r(n?t:`code`,{ref:o,"data-slot":`code`,className:e(`border-gray-500/15 rounded-md border bg-gray-500/5 px-1 font-mono text-[0.8em]`,i),...a}));i.displayName=`Code`;export{i as Code};
 //# sourceMappingURL=code.js.map

package/dist/code.js.map

@@ -1 +1 @@
-{"version":3,"file":"code.js","names":[],"sources":["../src/components/code/code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * Marks text to signify a short fragment of inline computer code.\n *\n * @see https://mantle.ngrok.com/components/code\n *\n * @example\n * ```tsx\n * <p>\n *   Use the <Code>console.log()</Code> function to debug your code.\n * </p>\n * ```\n */\nconst Code = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n\t({ className, ...props }, ref) => (\n\t\t<code\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"border-gray-500/15 rounded-md border bg-gray-500/5 px-1 font-mono text-[0.8em]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCode.displayName = \"Code\";\n\nexport {\n\t//,\n\tCode,\n};\n"],"mappings":"gHAgBA,MAAM,EAAO,GACX,CAAE,YAAW,GAAG,GAAS,IACzB,EAAC,OAAD,CACM,MACL,UAAW,EACV,iFACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,CACD,EAAK,YAAc"}
+{"version":3,"file":"code.js","names":[],"sources":["../src/components/code/code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\n/**\n * Marks text to signify a short fragment of inline computer code.\n *\n * @see https://mantle.ngrok.com/components/code\n *\n * @example\n * ```tsx\n * <p>\n *   Use the <Code>console.log()</Code> function to debug your code.\n * </p>\n * ```\n */\nconst Code = forwardRef<ComponentRef<\"code\">, ComponentProps<\"code\"> & WithAsChild>(\n\t({ asChild, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"code\";\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"code\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-gray-500/15 rounded-md border bg-gray-500/5 px-1 font-mono text-[0.8em]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCode.displayName = \"Code\";\n\nexport {\n\t//,\n\tCode,\n};\n"],"mappings":"kJAkBA,MAAM,EAAO,GACX,CAAE,UAAS,YAAW,GAAG,GAAS,IAGjC,EAFY,EAAU,EAAO,OAE7B,CACM,MACL,YAAU,OACV,UAAW,EACV,iFACA,EACA,CACD,GAAI,EACH,CAAA,CAGJ,CACD,EAAK,YAAc"}

package/dist/color.d.ts

@@ -1,2 +1,2 @@
-import { a as functionalColors, c as isNamedColor, i as colors, l as namedColors, n as FunctionalColor, o as isColor, r as NamedColor, s as isFunctionalColor, t as Color } from "./index-C3IiAC5H.js";
+import { a as functionalColors, c as isNamedColor, i as colors, l as namedColors, n as FunctionalColor, o as isColor, r as NamedColor, s as isFunctionalColor, t as Color } from "./index-B6SPk_xb.js";
 export { Color, FunctionalColor, NamedColor, colors, functionalColors, isColor, isFunctionalColor, isNamedColor, namedColors };

package/dist/combobox.d.ts

@@ -1,5 +1,5 @@
-import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
-import { o as WithValidation } from "./types-Cq6RWU7Q.js";
+import { t as WithAsChild } from "./as-child-CJ2vTesV.js";
+import { o as WithValidation } from "./types-BeTbgoJd.js";
 import * as _$react from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as Primitive from "@ariakit/react";

package/dist/combobox.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{n}from"./separator-Xq_e06s8.js";import{createContext as r,forwardRef as i}from"react";import{jsx as a}from"react/jsx-runtime";import*as o from"@ariakit/react";const s=({children:e,...t})=>a(o.ComboboxProvider,{...t,children:e});s.displayName=`Combobox`;const c=i(({"aria-invalid":t,autoComplete:n=`list`,autoSelect:r=`always`,className:i,validation:s,...c},l)=>{let u=t!=null&&t!==`false`?`error`:typeof s==`function`?s():s,d=t??u===`error`;return a(o.Combobox,{"aria-invalid":d,autoComplete:n,autoSelect:r,className:e(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong font-sans`,`placeholder:text-placeholder`,`aria-disabled:opacity-50`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger`,`autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,i),"data-validation":u||void 0,ref:l,...c})});c.displayName=`ComboboxInput`;const l=i(({asChild:n=!1,children:r,className:i,sameWidth:s=!0,unmountOnHide:c=!0,...l},u)=>a(o.ComboboxPopover,{className:e(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 space-y-px font-sans focus:outline-hidden`,i),ref:u,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,sameWidth:s,unmountOnHide:c,...l,children:r}));l.displayName=`ComboboxContent`;const u=r(void 0),d=i(({asChild:n=!1,children:r,className:i,focusOnHover:s=!0,value:c,...l},d)=>a(u.Provider,{value:c,children:a(o.ComboboxItem,{className:e(`cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm flex min-w-0 gap-2 items-center [&>svg]:size-5 [&_svg]:shrink-0`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,i),focusOnHover:s,ref:d,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,value:c,...l,children:r})}));d.displayName=`ComboboxItem`;const f=i(({asChild:n=!1,children:r,className:i,...s},c)=>a(o.ComboboxGroup,{className:e(`space-y-px`,i),ref:c,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...s,children:r}));f.displayName=`ComboboxGroup`;const p=i(({asChild:n=!1,children:r,className:i,...s},c)=>a(o.ComboboxGroupLabel,{className:e(`text-muted px-2 py-1 text-xs font-medium`,i),ref:c,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...s,children:r}));p.displayName=`ComboboxGroupLabel`;const m=i(({asChild:n=!1,className:r,...i},s)=>a(o.ComboboxItemValue,{className:e(`*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal`,r),ref:s,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...i}));m.displayName=`ComboboxItemValue`;const h=i(({className:t,...r},i)=>a(n,{ref:i,className:e(`-mx-1.25 my-1 w-auto`,t),...r}));h.displayName=`ComboboxSeparator`;const g={Root:s,Content:l,Group:f,GroupLabel:p,Input:c,Item:d,ItemValue:m,Separator:h};export{g as Combobox};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{n}from"./separator-DyOGgFCs.js";import{createContext as r,forwardRef as i}from"react";import{jsx as a}from"react/jsx-runtime";import*as o from"@ariakit/react";const s=({children:e,...t})=>a(o.ComboboxProvider,{...t,children:e});s.displayName=`Combobox`;const c=i(({"aria-invalid":t,autoComplete:n=`list`,autoSelect:r=`always`,className:i,validation:s,...c},l)=>{let u=t!=null&&t!==`false`?`error`:typeof s==`function`?s():s,d=t??u===`error`;return a(o.Combobox,{"aria-invalid":d,autoComplete:n,autoSelect:r,"data-slot":`combobox-input`,className:e(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong font-sans`,`placeholder:text-placeholder`,`aria-disabled:opacity-50`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger`,`autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,i),"data-validation":u||void 0,ref:l,...c})});c.displayName=`ComboboxInput`;const l=i(({asChild:n=!1,children:r,className:i,sameWidth:s=!0,unmountOnHide:c=!0,...l},u)=>a(o.ComboboxPopover,{"data-slot":`combobox-content`,className:e(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 space-y-px font-sans focus:outline-hidden`,i),ref:u,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,sameWidth:s,unmountOnHide:c,...l,children:r}));l.displayName=`ComboboxContent`;const u=r(void 0),d=i(({asChild:n=!1,children:r,className:i,focusOnHover:s=!0,value:c,...l},d)=>a(u.Provider,{value:c,children:a(o.ComboboxItem,{"data-slot":`combobox-item`,className:e(`cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm flex min-w-0 gap-2 items-center [&>svg]:size-5 [&_svg]:shrink-0`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,i),focusOnHover:s,ref:d,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,value:c,...l,children:r})}));d.displayName=`ComboboxItem`;const f=i(({asChild:n=!1,children:r,className:i,...s},c)=>a(o.ComboboxGroup,{"data-slot":`combobox-group`,className:e(`space-y-px`,i),ref:c,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...s,children:r}));f.displayName=`ComboboxGroup`;const p=i(({asChild:n=!1,children:r,className:i,...s},c)=>a(o.ComboboxGroupLabel,{"data-slot":`combobox-group-label`,className:e(`text-muted px-2 py-1 text-xs font-medium`,i),ref:c,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...s,children:r}));p.displayName=`ComboboxGroupLabel`;const m=i(({asChild:n=!1,className:r,...i},s)=>a(o.ComboboxItemValue,{"data-slot":`combobox-item-value`,className:e(`*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal`,r),ref:s,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...i}));m.displayName=`ComboboxItemValue`;const h=i(({className:t,...r},i)=>a(n,{ref:i,"data-slot":`combobox-separator`,className:e(`-mx-1.25 my-1 w-auto`,t),...r}));h.displayName=`ComboboxSeparator`;const g={Root:s,Content:l,Group:f,GroupLabel:p,Input:c,Item:d,ItemValue:m,Separator:h};export{g as Combobox};
 //# sourceMappingURL=combobox.js.map

package/dist/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as Primitive from \"@ariakit/react\";\nimport { type ComponentPropsWithoutRef, type ComponentRef, createContext, forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype ComboboxProps = Primitive.ComboboxProviderProps;\n\n/**\n * Root component for a combobox. Provides a combobox store that controls the state of Combobox components.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Root = ({ children, ...props }: ComboboxProps) => {\n\treturn <Primitive.ComboboxProvider {...props}>{children}</Primitive.ComboboxProvider>;\n};\nRoot.displayName = \"Combobox\";\n\ntype ComboboxInputProps = Omit<\n\tPrimitive.ComboboxProps,\n\t\"render\" // we don't support a render prop for the combobox input\n> &\n\tWithValidation;\n\n/**\n * Renders a combobox input element that can be used to filter a list of items.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Input = forwardRef<ComponentRef<\"input\">, ComboboxInputProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tautoComplete = \"list\",\n\t\t\tautoSelect = \"always\",\n\t\t\tclassName,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\treturn (\n\t\t\t<Primitive.Combobox\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tautoComplete={autoComplete}\n\t\t\t\tautoSelect={autoSelect}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"pointer-coarse:text-base h-9 text-sm\",\n\t\t\t\t\t\"bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong font-sans\",\n\t\t\t\t\t\"placeholder:text-placeholder\",\n\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\t\"autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]\", // Autofill styling on the input itself and any children with autofill styling\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"ComboboxInput\";\n\ntype ComboboxContentProps = Omit<Primitive.ComboboxPopoverProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Content = forwardRef<ComponentRef<typeof Primitive.ComboboxPopover>, ComboboxContentProps>(\n\t(\n\t\t{ asChild = false, children, className, sameWidth = true, unmountOnHide = true, ...props },\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxPopover\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 space-y-px font-sans focus:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\tsameWidth={sameWidth}\n\t\t\t\tunmountOnHide={unmountOnHide}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxPopover>\n\t\t);\n\t},\n);\nContent.displayName = \"ComboboxContent\";\n\ntype ComboboxItemProps = Omit<Primitive.ComboboxItemProps, \"render\"> & WithAsChild;\n\nconst ComboboxItemValueContext = createContext<string | undefined>(undefined);\n\n/**\n * Renders a combobox item inside a Combobox.Content component.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *     <Combobox.Item value=\"Orange\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Item = forwardRef<ComponentRef<typeof Primitive.ComboboxItem>, ComboboxItemProps>(\n\t({ asChild = false, children, className, focusOnHover = true, value, ...props }, ref) => {\n\t\treturn (\n\t\t\t<ComboboxItemValueContext.Provider value={value}>\n\t\t\t\t<Primitive.ComboboxItem\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm flex min-w-0 gap-2 items-center [&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\t\t\t\t\"data-active-item:bg-active-menu-item\",\n\t\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tfocusOnHover={focusOnHover}\n\t\t\t\t\tref={ref}\n\t\t\t\t\trender={\n\t\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</Primitive.ComboboxItem>\n\t\t\t</ComboboxItemValueContext.Provider>\n\t\t);\n\t},\n);\nItem.displayName = \"ComboboxItem\";\n\ntype ComboboxGroupProps = Omit<Primitive.ComboboxGroupProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a group for Combobox.Item elements.\n *\n * Optionally, a Combobox.GroupLabel can be rendered as a child to provide a label for the group.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Group>\n *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n *       <Combobox.Item value=\"Apple\" />\n *       <Combobox.Item value=\"Banana\" />\n *     </Combobox.Group>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Group = forwardRef<ComponentRef<typeof Primitive.ComboboxGroup>, ComboboxGroupProps>(\n\t({ asChild = false, children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxGroup\n\t\t\t\tclassName={cx(\"space-y-px\", className)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxGroup>\n\t\t);\n\t},\n);\nGroup.displayName = \"ComboboxGroup\";\n\ntype ComboboxGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a label in a combobox group.\n *\n * This component should be wrapped with Combobox.Group so the aria-labelledby is correctly set on the group element.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Group>\n *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n *       <Combobox.Item value=\"Apple\" />\n *       <Combobox.Item value=\"Banana\" />\n *     </Combobox.Group>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst GroupLabel = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxGroupLabel>,\n\tComboboxGroupLabelProps\n>(({ asChild = false, children, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxGroupLabel\n\t\t\tclassName={cx(\"text-muted px-2 py-1 text-xs font-medium\", className)}\n\t\t\tref={ref}\n\t\t\trender={asChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Primitive.ComboboxGroupLabel>\n\t);\n});\nGroupLabel.displayName = \"ComboboxGroupLabel\";\n\ntype ComboboxItemValueProps = Omit<Primitive.ComboboxItemValueProps<\"span\">, \"render\"> &\n\tWithAsChild;\n\n/**\n * Highlights the match between the current Combobox.Input value (userValue) and parent Combobox.Item value.\n *\n * Renders a span element with the combobox item value as children.\n * The value is split into span elements.\n * Portions of the value matching the user input will have a data-user-value attribute, while the rest will have a data-autocomplete-value attribute.\n *\n * Should only be used as a child of Combobox.Item.\n * The item value is automatically set to the value of the closest Combobox.Item component's value prop.\n * The user input value is automatically set to the combobox store's value state.\n * Both values can be overridden by providing the value and userValue props, respectively.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\">\n *       🍎\n *       <Combobox.ItemValue />\n *     </Combobox.Item>\n *     <Combobox.Item value=\"Banana\">\n *       🍌\n *       <Combobox.ItemValue />\n *     </Combobox.Item>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst ItemValue = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxItemValue>,\n\tComboboxItemValueProps\n>(({ asChild = false, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxItemValue\n\t\t\tclassName={cx(\n\t\t\t\t\"*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\trender={asChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nItemValue.displayName = \"ComboboxItemValue\";\n\n/**\n * Renders a separator between Combobox.Items or Combobox.Groups.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Group>\n *       <Combobox.Item value=\"Apple\" />\n *       <Combobox.Item value=\"Banana\" />\n *     </Combobox.Group>\n *     <Combobox.Separator />\n *     <Combobox.Item>\n *       Click me!\n *     </Combobox.Item>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst ComboboxSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator ref={ref} className={cx(\"-mx-1.25 my-1 w-auto\", className)} {...props} />\n));\nComboboxSeparatorComponent.displayName = \"ComboboxSeparator\";\n\n/**\n * Fill in a React input field with autocomplete & autosuggest functionalities.\n * Choose from a list of suggested values with full keyboard support.\n * This component is based on the WAI-ARIA Combobox Pattern and is powered by the\n * ariakit Combobox.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/\n * @see https://ariakit.org/components/combobox\n *\n * @see https://mantle.ngrok.com/components/combobox\n *\n * @example\n * Composition:\n * ```\n * Combobox.Root\n * ├── Combobox.Input\n * └── Combobox.Content\n *     ├── Combobox.Group\n *     │   ├── Combobox.GroupLabel\n *     │   └── Combobox.Item\n *     │       └── Combobox.ItemValue\n *     └── Combobox.Separator\n * ```\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Combobox = {\n\t/**\n\t * Root component for a combobox. Provides a combobox store that controls the state of Combobox components.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Renders a group for Combobox.Item elements.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * Renders a label in a combobox group.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxgrouplabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroupLabel,\n\t/**\n\t * Renders a combobox input element that can be used to filter a list of items.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxinput\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tInput,\n\t/**\n\t * Renders a combobox item inside a Combobox.Content component.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *     <Combobox.Item value=\"Orange\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Highlights the match between the current Combobox.Input value and parent Combobox.Item value.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxitemvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\">\n\t *       🍎\n\t *       <Combobox.ItemValue />\n\t *     </Combobox.Item>\n\t *     <Combobox.Item value=\"Banana\">\n\t *       🍌\n\t *       <Combobox.ItemValue />\n\t *     </Combobox.Item>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItemValue,\n\t/**\n\t * Renders a separator between Combobox.Items or Combobox.Groups.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *     <Combobox.Separator />\n\t *     <Combobox.Item>\n\t *       Click me!\n\t *     </Combobox.Item>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tSeparator: ComboboxSeparatorComponent,\n} as const;\n\nexport {\n\t//,\n\tCombobox,\n};\n"],"mappings":"6OAwBA,MAAM,GAAQ,CAAE,WAAU,GAAG,KACrB,EAAC,EAAU,iBAAX,CAA4B,GAAI,EAAQ,WAAsC,CAAA,CAEtF,EAAK,YAAc,WAoBnB,MAAM,EAAQ,GAEZ,CACC,eAAgB,EAChB,eAAe,OACf,aAAa,SACb,YACA,WAAY,EACZ,GAAG,GAEJ,IACI,CAEJ,IAAM,EADY,GAAgB,MAAQ,IAAiB,QAExD,QACA,OAAO,GAAgB,WACtB,GAAa,CACb,EACE,EAAc,GAAgB,IAAe,QAEnD,OACC,EAAC,EAAU,SAAX,CACC,eAAc,EACA,eACF,aACZ,UAAW,EACV,uCACA,8FACA,+BACA,2BACA,2BACA,yDACA,kHACA,iQACA,iQACA,kPACA,oHACA,EACA,CACD,kBAAiB,GAAc,IAAA,GAC1B,MACL,GAAI,EACH,CAAA,EAGJ,CACD,EAAM,YAAc,gBAgBpB,MAAM,EAAU,GAEd,CAAE,UAAU,GAAO,WAAU,YAAW,YAAY,GAAM,gBAAgB,GAAM,GAAG,GACnF,IAGC,EAAC,EAAU,gBAAX,CACC,UAAW,EACV,yLACA,EACA,CACI,MACL,OACC,GAAW,CAAE,MAAK,GAAG,KAAiB,EAAC,EAAD,CAAW,MAAK,GAAI,EAAc,CAAA,CAAG,IAAA,GAEjE,YACI,gBACf,GAAI,EAEH,WAC0B,CAAA,CAG9B,CACD,EAAQ,YAAc,kBAItB,MAAM,EAA2B,EAAkC,IAAA,GAAU,CAevE,EAAO,GACX,CAAE,UAAU,GAAO,WAAU,YAAW,eAAe,GAAM,QAAO,GAAG,GAAS,IAE/E,EAAC,EAAyB,SAA1B,CAA0C,iBACzC,EAAC,EAAU,aAAX,CACC,UAAW,EACV,4HACA,uCACA,2BACA,EACA,CACa,eACT,MACL,OACC,GAAW,CAAE,MAAK,GAAG,KAAiB,EAAC,EAAD,CAAW,MAAK,GAAI,EAAc,CAAA,CAAG,IAAA,GAErE,QACP,GAAI,EAEH,WACuB,CAAA,CACU,CAAA,CAGtC,CACD,EAAK,YAAc,eAuBnB,MAAM,EAAQ,GACZ,CAAE,UAAU,GAAO,WAAU,YAAW,GAAG,GAAS,IAEnD,EAAC,EAAU,cAAX,CACC,UAAW,EAAG,aAAc,EAAU,CACjC,MACL,OACC,GAAW,CAAE,MAAK,GAAG,KAAiB,EAAC,EAAD,CAAW,MAAK,GAAI,EAAc,CAAA,CAAG,IAAA,GAE5E,GAAI,EAEH,WACwB,CAAA,CAG5B,CACD,EAAM,YAAc,gBAuBpB,MAAM,EAAa,GAGhB,CAAE,UAAU,GAAO,WAAU,YAAW,GAAG,GAAS,IAErD,EAAC,EAAU,mBAAX,CACC,UAAW,EAAG,2CAA4C,EAAU,CAC/D,MACL,OAAQ,GAAW,CAAE,MAAK,GAAG,KAAiB,EAAC,EAAD,CAAW,MAAK,GAAI,EAAc,CAAA,CAAG,IAAA,GACnF,GAAI,EAEH,WAC6B,CAAA,CAE/B,CACF,EAAW,YAAc,qBAgCzB,MAAM,EAAY,GAGf,CAAE,UAAU,GAAO,YAAW,GAAG,GAAS,IAE3C,EAAC,EAAU,kBAAX,CACC,UAAW,EACV,wEACA,EACA,CACI,MACL,OAAQ,GAAW,CAAE,MAAK,GAAG,KAAiB,EAAC,EAAD,CAAW,MAAK,GAAI,EAAc,CAAA,CAAG,IAAA,GACnF,GAAI,EACH,CAAA,CAEF,CACF,EAAU,YAAc,oBAoBxB,MAAM,EAA6B,GAGhC,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAD,CAAgB,MAAK,UAAW,EAAG,uBAAwB,EAAU,CAAE,GAAI,EAAS,CAAA,CACnF,CACF,EAA2B,YAAc,oBAmCzC,MAAM,EAAW,CAiBhB,OAiBA,UAoBA,QAoBA,aAiBA,QAkBA,OAuBA,YAuBA,UAAW,EACX"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as Primitive from \"@ariakit/react\";\nimport { type ComponentPropsWithoutRef, type ComponentRef, createContext, forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype ComboboxProps = Primitive.ComboboxProviderProps;\n\n/**\n * Root component for a combobox. Provides a combobox store that controls the state of Combobox components.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Root = ({ children, ...props }: ComboboxProps) => {\n\treturn <Primitive.ComboboxProvider {...props}>{children}</Primitive.ComboboxProvider>;\n};\nRoot.displayName = \"Combobox\";\n\ntype ComboboxInputProps = Omit<\n\tPrimitive.ComboboxProps,\n\t\"render\" // we don't support a render prop for the combobox input\n> &\n\tWithValidation;\n\n/**\n * Renders a combobox input element that can be used to filter a list of items.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Input = forwardRef<ComponentRef<\"input\">, ComboboxInputProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tautoComplete = \"list\",\n\t\t\tautoSelect = \"always\",\n\t\t\tclassName,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\treturn (\n\t\t\t<Primitive.Combobox\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tautoComplete={autoComplete}\n\t\t\t\tautoSelect={autoSelect}\n\t\t\t\tdata-slot=\"combobox-input\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"pointer-coarse:text-base h-9 text-sm\",\n\t\t\t\t\t\"bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong font-sans\",\n\t\t\t\t\t\"placeholder:text-placeholder\",\n\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\t\"autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]\", // Autofill styling on the input itself and any children with autofill styling\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"ComboboxInput\";\n\ntype ComboboxContentProps = Omit<Primitive.ComboboxPopoverProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Content = forwardRef<ComponentRef<typeof Primitive.ComboboxPopover>, ComboboxContentProps>(\n\t(\n\t\t{ asChild = false, children, className, sameWidth = true, unmountOnHide = true, ...props },\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxPopover\n\t\t\t\tdata-slot=\"combobox-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 space-y-px font-sans focus:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\tsameWidth={sameWidth}\n\t\t\t\tunmountOnHide={unmountOnHide}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxPopover>\n\t\t);\n\t},\n);\nContent.displayName = \"ComboboxContent\";\n\ntype ComboboxItemProps = Omit<Primitive.ComboboxItemProps, \"render\"> & WithAsChild;\n\nconst ComboboxItemValueContext = createContext<string | undefined>(undefined);\n\n/**\n * Renders a combobox item inside a Combobox.Content component.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *     <Combobox.Item value=\"Orange\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Item = forwardRef<ComponentRef<typeof Primitive.ComboboxItem>, ComboboxItemProps>(\n\t({ asChild = false, children, className, focusOnHover = true, value, ...props }, ref) => {\n\t\treturn (\n\t\t\t<ComboboxItemValueContext.Provider value={value}>\n\t\t\t\t<Primitive.ComboboxItem\n\t\t\t\t\tdata-slot=\"combobox-item\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm flex min-w-0 gap-2 items-center [&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\t\t\t\t\"data-active-item:bg-active-menu-item\",\n\t\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tfocusOnHover={focusOnHover}\n\t\t\t\t\tref={ref}\n\t\t\t\t\trender={\n\t\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</Primitive.ComboboxItem>\n\t\t\t</ComboboxItemValueContext.Provider>\n\t\t);\n\t},\n);\nItem.displayName = \"ComboboxItem\";\n\ntype ComboboxGroupProps = Omit<Primitive.ComboboxGroupProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a group for Combobox.Item elements.\n *\n * Optionally, a Combobox.GroupLabel can be rendered as a child to provide a label for the group.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Group>\n *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n *       <Combobox.Item value=\"Apple\" />\n *       <Combobox.Item value=\"Banana\" />\n *     </Combobox.Group>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Group = forwardRef<ComponentRef<typeof Primitive.ComboboxGroup>, ComboboxGroupProps>(\n\t({ asChild = false, children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxGroup\n\t\t\t\tdata-slot=\"combobox-group\"\n\t\t\t\tclassName={cx(\"space-y-px\", className)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxGroup>\n\t\t);\n\t},\n);\nGroup.displayName = \"ComboboxGroup\";\n\ntype ComboboxGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a label in a combobox group.\n *\n * This component should be wrapped with Combobox.Group so the aria-labelledby is correctly set on the group element.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Group>\n *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n *       <Combobox.Item value=\"Apple\" />\n *       <Combobox.Item value=\"Banana\" />\n *     </Combobox.Group>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst GroupLabel = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxGroupLabel>,\n\tComboboxGroupLabelProps\n>(({ asChild = false, children, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxGroupLabel\n\t\t\tdata-slot=\"combobox-group-label\"\n\t\t\tclassName={cx(\"text-muted px-2 py-1 text-xs font-medium\", className)}\n\t\t\tref={ref}\n\t\t\trender={asChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Primitive.ComboboxGroupLabel>\n\t);\n});\nGroupLabel.displayName = \"ComboboxGroupLabel\";\n\ntype ComboboxItemValueProps = Omit<Primitive.ComboboxItemValueProps<\"span\">, \"render\"> &\n\tWithAsChild;\n\n/**\n * Highlights the match between the current Combobox.Input value (userValue) and parent Combobox.Item value.\n *\n * Renders a span element with the combobox item value as children.\n * The value is split into span elements.\n * Portions of the value matching the user input will have a data-user-value attribute, while the rest will have a data-autocomplete-value attribute.\n *\n * Should only be used as a child of Combobox.Item.\n * The item value is automatically set to the value of the closest Combobox.Item component's value prop.\n * The user input value is automatically set to the combobox store's value state.\n * Both values can be overridden by providing the value and userValue props, respectively.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\">\n *       🍎\n *       <Combobox.ItemValue />\n *     </Combobox.Item>\n *     <Combobox.Item value=\"Banana\">\n *       🍌\n *       <Combobox.ItemValue />\n *     </Combobox.Item>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst ItemValue = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxItemValue>,\n\tComboboxItemValueProps\n>(({ asChild = false, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxItemValue\n\t\t\tdata-slot=\"combobox-item-value\"\n\t\t\tclassName={cx(\n\t\t\t\t\"*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\trender={asChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nItemValue.displayName = \"ComboboxItemValue\";\n\n/**\n * Renders a separator between Combobox.Items or Combobox.Groups.\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Group>\n *       <Combobox.Item value=\"Apple\" />\n *       <Combobox.Item value=\"Banana\" />\n *     </Combobox.Group>\n *     <Combobox.Separator />\n *     <Combobox.Item>\n *       Click me!\n *     </Combobox.Item>\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst ComboboxSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tdata-slot=\"combobox-separator\"\n\t\tclassName={cx(\"-mx-1.25 my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nComboboxSeparatorComponent.displayName = \"ComboboxSeparator\";\n\n/**\n * Fill in a React input field with autocomplete & autosuggest functionalities.\n * Choose from a list of suggested values with full keyboard support.\n * This component is based on the WAI-ARIA Combobox Pattern and is powered by the\n * ariakit Combobox.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/\n * @see https://ariakit.org/components/combobox\n *\n * @see https://mantle.ngrok.com/components/combobox\n *\n * @example\n * Composition:\n * ```\n * Combobox.Root\n * ├── Combobox.Input\n * └── Combobox.Content\n *     ├── Combobox.Group\n *     │   ├── Combobox.GroupLabel\n *     │   └── Combobox.Item\n *     │       └── Combobox.ItemValue\n *     └── Combobox.Separator\n * ```\n *\n * @example\n * <Combobox.Root>\n *   <Combobox.Input />\n *   <Combobox.Content>\n *     <Combobox.Item value=\"Apple\" />\n *     <Combobox.Item value=\"Banana\" />\n *   </Combobox.Content>\n * </Combobox.Root>\n */\nconst Combobox = {\n\t/**\n\t * Root component for a combobox. Provides a combobox store that controls the state of Combobox components.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Renders a group for Combobox.Item elements.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * Renders a label in a combobox group.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxgrouplabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroupLabel,\n\t/**\n\t * Renders a combobox input element that can be used to filter a list of items.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxinput\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tInput,\n\t/**\n\t * Renders a combobox item inside a Combobox.Content component.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *     <Combobox.Item value=\"Orange\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Highlights the match between the current Combobox.Input value and parent Combobox.Item value.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxitemvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\">\n\t *       🍎\n\t *       <Combobox.ItemValue />\n\t *     </Combobox.Item>\n\t *     <Combobox.Item value=\"Banana\">\n\t *       🍌\n\t *       <Combobox.ItemValue />\n\t *     </Combobox.Item>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItemValue,\n\t/**\n\t * Renders a separator between Combobox.Items or Combobox.Groups.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *     <Combobox.Separator />\n\t *     <Combobox.Item>\n\t *       Click me!\n\t *     </Combobox.Item>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tSeparator: ComboboxSeparatorComponent,\n} as const;\n\nexport {\n\t//,\n\tCombobox,\n};\n"],"mappings":"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"}

package/dist/command.d.ts

@@ -1,4 +1,4 @@
-import { t as Root } from "./primitive-BqLYh79k.js";
+import { t as Root } from "./primitive-DXo0gUqw.js";
 import * as _$react from "react";
 import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -248,7 +248,7 @@ declare const Command: {
      * </Command.Dialog.Root>
      * ```
      */
-    readonly Trigger: _$react.ForwardRefExoticComponent<_$_radix_ui_react_dialog0.DialogTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
+    readonly Trigger: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_dialog0.DialogTriggerProps & _$react.RefAttributes<HTMLButtonElement>, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
     /**
      * The visible content of the CommandDialog. Renders inside the dialog portal.
      *
@@ -330,7 +330,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "onChange" | "value"> & {
+  }, "key" | "asChild" | keyof _$react.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & _$react.RefAttributes<HTMLInputElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
@@ -452,7 +452,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;

package/dist/command.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{n as t}from"./separator-Xq_e06s8.js";import{t as n}from"./dialog-DxkpMIzB.js";import{t as r}from"./kbd-wgm9K9D5.js";import{forwardRef as i,useEffect as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{MagnifyingGlassIcon as l}from"@phosphor-icons/react/MagnifyingGlass";import{Command as u,useCommandState as d}from"cmdk";const f=i(({className:t,...n},r)=>s(u,{ref:r,"data-slot":`command`,className:e(`bg-popover flex h-full w-full flex-col overflow-hidden rounded-md`,t),...n}));f.displayName=`Command`;const p=({children:t,className:r,description:i=`Search for a command to run...`,filter:a,shouldFilter:o,showCloseButton:l=!0,title:u=`Command Palette`})=>c(n.Content,{className:e(`overflow-hidden p-0 relative`,r),children:[c(n.Header,{className:`sr-only absolute`,children:[s(n.Title,{children:u}),s(n.Description,{children:i})]}),s(f,{className:`**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-input]]:h-12 **:data-[slot=command-group]:px-2 **:data-[slot=command-list]:pb-1`,filter:a,shouldFilter:o,children:t}),l&&s(`div`,{className:`absolute top-1.5 right-1.5`,children:s(n.CloseIconButton,{})})]});p.displayName=`CommandDialogContent`;const m={Root:n.Root,Trigger:n.Trigger,Content:p},h=i(({className:t,...n},r)=>c(`div`,{ref:r,"data-slot":`command-input-wrapper`,className:`flex h-9 items-center gap-2 border-b border-popover px-3`,children:[s(l,{className:`size-5 shrink-0 opacity-50`}),s(u.Input,{"data-slot":`command-input`,className:e(`placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50`,t),...n})]}));h.displayName=`CommandInput`;const g=i(({className:t,...n},r)=>s(u.List,{ref:r,"data-slot":`command-list`,className:e(`max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar`,t),...n}));g.displayName=`CommandList`;const _=i(({className:t,...n},r)=>s(u.Empty,{ref:r,"data-slot":`command-empty`,className:e(`py-6 text-center text-sm`,t),...n}));_.displayName=`CommandEmpty`;const v=i(({className:t,...n},r)=>s(u.Group,{ref:r,"data-slot":`command-group`,className:e(`**:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium`,t),...n}));v.displayName=`CommandGroup`;const y=i(({className:n,...r},i)=>s(u.Separator,{ref:i,"data-slot":`command-separator`,asChild:!0,...r,children:s(t,{className:e(`-mx-1 my-1 w-auto`,n)})}));y.displayName=`CommandSeparator`;const b=i(({className:t,...n},r)=>s(u.Item,{ref:r,"data-slot":`command-item`,className:e(`data-[selected=true]:bg-active-menu-item [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5`,t),...n}));b.displayName=`CommandItem`;const x=i(({className:t,...n},r)=>s(`span`,{ref:r,"data-slot":`command-shortcut`,className:e(`text-muted ml-auto text-xs tracking-widest`,t),...n}));x.displayName=`CommandShortcut`;const S={Root:f,Dialog:m,Input:h,List:g,Empty:_,Group:v,Item:b,Shortcut:x,Separator:y};function C({className:t,...n}){let[i,l]=o(`⌃`);a(()=>{l(T())},[]);let u=i===`⌘`?`Command`:`Control`;return c(r,{...n,suppressHydrationWarning:!0,className:e(i===`⌃`&&`font-medium`,t),children:[s(`span`,{className:`sr-only`,children:u}),i]})}function w(e){return`userAgentData`in e}function T(){if(typeof navigator>`u`)return`⌃`;let e=``;return w(navigator)&&(e=navigator.userAgentData.platform??``),e||=navigator.platform||navigator.userAgent||``,/mac|iphone|ipad|ipod/i.test(e)?`⌘`:`⌃`}export{S as Command,C as MetaKey,d as useCommandState};
+import{t as e}from"./cx-D1HYnpvA.js";import{n as t}from"./separator-DyOGgFCs.js";import{t as n}from"./dialog-MiS_Q-ge.js";import{t as r}from"./kbd-B0wWeV_0.js";import{forwardRef as i,useEffect as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{MagnifyingGlassIcon as l}from"@phosphor-icons/react/MagnifyingGlass";import{Command as u,useCommandState as d}from"cmdk";const f=i(({className:t,...n},r)=>s(u,{ref:r,"data-slot":`command`,className:e(`bg-popover flex h-full w-full flex-col overflow-hidden rounded-md`,t),...n}));f.displayName=`Command`;const p=({children:t,className:r,description:i=`Search for a command to run...`,filter:a,shouldFilter:o,showCloseButton:l=!0,title:u=`Command Palette`})=>c(n.Content,{className:e(`overflow-hidden p-0 relative`,r),children:[c(n.Header,{className:`sr-only absolute`,children:[s(n.Title,{children:u}),s(n.Description,{children:i})]}),s(f,{className:`**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-input]]:h-12 **:data-[slot=command-group]:px-2 **:data-[slot=command-list]:pb-1`,filter:a,shouldFilter:o,children:t}),l&&s(`div`,{className:`absolute top-1.5 right-1.5`,children:s(n.CloseIconButton,{})})]});p.displayName=`CommandDialogContent`;const m={Root:n.Root,Trigger:n.Trigger,Content:p},h=i(({className:t,...n},r)=>c(`div`,{ref:r,"data-slot":`command-input-wrapper`,className:`flex h-9 items-center gap-2 border-b border-popover px-3`,children:[s(l,{className:`size-5 shrink-0 opacity-50`}),s(u.Input,{"data-slot":`command-input`,className:e(`placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50`,t),...n})]}));h.displayName=`CommandInput`;const g=i(({className:t,...n},r)=>s(u.List,{ref:r,"data-slot":`command-list`,className:e(`max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar`,t),...n}));g.displayName=`CommandList`;const _=i(({className:t,...n},r)=>s(u.Empty,{ref:r,"data-slot":`command-empty`,className:e(`py-6 text-center text-sm`,t),...n}));_.displayName=`CommandEmpty`;const v=i(({className:t,...n},r)=>s(u.Group,{ref:r,"data-slot":`command-group`,className:e(`**:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium`,t),...n}));v.displayName=`CommandGroup`;const y=i(({className:n,...r},i)=>s(u.Separator,{ref:i,"data-slot":`command-separator`,asChild:!0,...r,children:s(t,{className:e(`-mx-1 my-1 w-auto`,n)})}));y.displayName=`CommandSeparator`;const b=i(({className:t,...n},r)=>s(u.Item,{ref:r,"data-slot":`command-item`,className:e(`data-[selected=true]:bg-active-menu-item [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5`,t),...n}));b.displayName=`CommandItem`;const x=i(({className:t,...n},r)=>s(`span`,{ref:r,"data-slot":`command-shortcut`,className:e(`text-muted ml-auto text-xs tracking-widest`,t),...n}));x.displayName=`CommandShortcut`;const S={Root:f,Dialog:m,Input:h,List:g,Empty:_,Group:v,Item:b,Shortcut:x,Separator:y};function C({className:t,...n}){let[i,l]=o(`⌃`);a(()=>{l(T())},[]);let u=i===`⌘`?`Command`:`Control`;return c(r,{...n,suppressHydrationWarning:!0,"data-slot":`meta-key`,className:e(i===`⌃`&&`font-medium`,t),children:[s(`span`,{className:`sr-only`,children:u}),i]})}function w(e){return`userAgentData`in e}function T(){if(typeof navigator>`u`)return`⌃`;let e=``;return w(navigator)&&(e=navigator.userAgentData.platform??``),e||=navigator.platform||navigator.userAgent||``,/mac|iphone|ipad|ipod/i.test(e)?`⌘`:`⌃`}export{S as Command,C as MetaKey,d as useCommandState};
 //# sourceMappingURL=command.js.map