@ngrok/mantle 0.59.0 → 0.60.0

package/dist/code-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/code-block/code-block.tsx","../src/components/code-block/escape-html.ts","../src/components/code-block/highlighter.ts","../src/components/code-block/indentation.ts","../src/components/code-block/normalize.ts","../src/components/code-block/supported-languages.ts","../src/components/code-block/fmt-code.ts","../src/components/code-block/parse-metastring.ts"],"sourcesContent":["\"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 { Slot } from \"@radix-ui/react-slot\";\nimport clsx from \"clsx\";\nimport type {\n\tComponentProps,\n\tComponentRef,\n\tDispatch,\n\tHTMLAttributes,\n\tReactNode,\n\tSetStateAction,\n} from \"react\";\nimport {\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseId,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\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 { escapeHtml } from \"./escape-html.js\";\nimport { Highlighter } from \"./highlighter.js\";\nimport { type Indentation, inferIndentation } from \"./indentation.js\";\nimport type { LineRange } from \"./line-numbers.js\";\nimport { normalizeIndentation } from \"./normalize.js\";\nimport type { Mode } from \"./parse-metastring.js\";\nimport type { SupportedLanguage } from \"./supported-languages.js\";\nimport {\n\tformatLanguageClassName,\n\tsupportedLanguages,\n} from \"./supported-languages.js\";\n\n/**\n * TODO(cody):\n * - fix line numbers, maybe try grid instead of :before and flex?\n * - fix line hightlighting\n * - fix line wrapping? horizontal scrolling has problems w/ line highlighting :(\n */\n\ntype CodeBlockContextType = {\n\tcodeId: string | undefined;\n\tcopyText: string;\n\thasCodeExpander: boolean;\n\tisCodeExpanded: boolean;\n\tregisterCodeId: (id: string) => void;\n\tsetCopyText: (newCopyText: string) => void;\n\tsetHasCodeExpander: (value: boolean) => void;\n\tsetIsCodeExpanded: Dispatch<SetStateAction<boolean>>;\n\tunregisterCodeId: (id: string) => void;\n};\n\nconst CodeBlockContext = createContext<CodeBlockContextType>({\n\tcodeId: undefined,\n\tcopyText: \"\",\n\thasCodeExpander: false,\n\tisCodeExpanded: false,\n\tregisterCodeId: () => {},\n\tsetCopyText: () => {},\n\tsetHasCodeExpander: () => {},\n\tsetIsCodeExpanded: () => {},\n\tunregisterCodeId: () => {},\n});\n\n/**\n * Code blocks render and apply syntax highlighting to blocks of code.\n * This is the root component for all code block components.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst [copyText, setCopyText] = useState(\"\");\n\tconst [hasCodeExpander, setHasCodeExpander] = useState(false);\n\tconst [isCodeExpanded, setIsCodeExpanded] = useState(false);\n\tconst [codeId, setCodeId] = useState<string | undefined>(undefined);\n\n\tconst context: CodeBlockContextType = useMemo(\n\t\t() =>\n\t\t\t({\n\t\t\t\tcodeId,\n\t\t\t\tcopyText,\n\t\t\t\thasCodeExpander,\n\t\t\t\tisCodeExpanded,\n\t\t\t\tregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(\n\t\t\t\t\t\t\told == null,\n\t\t\t\t\t\t\t\"You can only render a single CodeBlockCode within a CodeBlock.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn id;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tsetCopyText,\n\t\t\t\tsetHasCodeExpander,\n\t\t\t\tsetIsCodeExpanded,\n\t\t\t\tunregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(\n\t\t\t\t\t\t\told === id,\n\t\t\t\t\t\t\t\"You can only render a single CodeBlockCode within a CodeBlock.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn undefined;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t}) as const,\n\t\t[codeId, copyText, hasCodeExpander, isCodeExpanded],\n\t);\n\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<CodeBlockContext.Provider value={context}>\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 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</CodeBlockContext.Provider>\n\t);\n});\nRoot.displayName = \"CodeBlock\";\n\n/**\n * The body of the `CodeBlock`. This is where the `CodeBlock.Code` and optional\n * `CodeBlock.CopyButton` is rendered.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-body\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Body = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component className={cx(\"relative\", className)} ref={ref} {...props} />\n\t);\n});\nBody.displayName = \"CodeBlockBody\";\n\ntype CodeBlockCodeProps = Omit<ComponentProps<\"pre\">, \"children\"> & {\n\t/**\n\t * The code to display in the code block. Should be code formatted as a string. This code will be passed to our syntax highlighter.\n\t */\n\tvalue: string;\n\t/**\n\t * @todo not implemented yet\n\t */\n\thighlightLines?: (LineRange | number)[];\n\t/**\n\t * The type of indentation to use. Can be either \"tabs\" or \"spaces\".\n\t * @default inferred from the given language, fallback to `spaces`\n\t */\n\tindentation?: Indentation;\n\t/**\n\t * The language of the code block. This will be used to determine how to syntax highlight the code.\n\t * @default `\"text\"`.\n\t */\n\tlanguage?: SupportedLanguage;\n\t/**\n\t * @todo not implemented yet\n\t */\n\tshowLineNumbers?: boolean;\n};\n\n/**\n * The `CodeBlock` content. This is where the code is rendered and syntax highlighted.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-code\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code\n *       language=\"sh\"\n *       value={fmtCode`ffmpeg -i multichannel.mxf -map 0:v:0 -map 0:a:0 -map 0:a:0 -c:a:0 ac3 -b:a:0 640k -ac:a:1 2 -c:a:1 aac -b:2 128k out.mp4`}\n *     />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Code = forwardRef<ComponentRef<\"pre\">, CodeBlockCodeProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\thighlightLines: _unusedHighlightLines, // not implemented yet\n\t\t\tindentation: propIndentation,\n\t\t\tlanguage = \"text\",\n\t\t\tshowLineNumbers: _unusedShowLineNumbers, // not implemented yet\n\t\t\tstyle,\n\t\t\ttabIndex,\n\t\t\tvalue,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst id = useId();\n\t\tconst {\n\t\t\thasCodeExpander,\n\t\t\tisCodeExpanded,\n\t\t\tregisterCodeId,\n\t\t\tsetCopyText,\n\t\t\tunregisterCodeId,\n\t\t} = useContext(CodeBlockContext);\n\t\tconst indentation = inferIndentation(language, propIndentation);\n\n\t\t// trim any leading and trailing whitespace/empty lines, convert leading tabs to spaces\n\t\tconst normalizedAndTrimmedValue = useMemo(\n\t\t\t() => normalizeIndentation(value, { indentation }),\n\t\t\t[value, indentation],\n\t\t);\n\t\tconst [highlightedCodeInnerHtml, setHighlightedCodeInnerHtml] = useState(\n\t\t\t// initialize the <code> inner html with escaped HTML since we are using\n\t\t\t// dangerouslySetInnerHTML to set the inner html of the <code> element\n\t\t\t// and use Prism.js to \"highlight\" the code in a useEffect (client-side only)\n\t\t\tescapeHtml(normalizeIndentation(value, { indentation })),\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tconst grammar = Highlighter.languages[language];\n\t\t\tassert(\n\t\t\t\tgrammar,\n\t\t\t\t`CodeBlock does not support the language \"${language}\". The syntax highlighter does not have a grammar for this language. The supported languages are: ${supportedLanguages.join(\", \")}.`,\n\t\t\t);\n\t\t\tconst newHighlightedCodeInnerHtml = Highlighter.highlight(\n\t\t\t\tnormalizedAndTrimmedValue,\n\t\t\t\tgrammar,\n\t\t\t\tlanguage,\n\t\t\t);\n\t\t\tsetHighlightedCodeInnerHtml(newHighlightedCodeInnerHtml);\n\t\t}, [normalizedAndTrimmedValue, language]);\n\n\t\tuseEffect(() => {\n\t\t\tsetCopyText(normalizedAndTrimmedValue);\n\t\t}, [normalizedAndTrimmedValue, setCopyText]);\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 languageClassName = formatLanguageClassName(language);\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 p-4 pr-14\",\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\tlanguageClassName, // place it last because prism does weird stuff client side, causes hydration mismatches\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-lang={language}\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={{\n\t\t\t\t\t...style,\n\t\t\t\t\ttabSize: 2,\n\t\t\t\t\tMozTabSize: 2,\n\t\t\t\t}}\n\t\t\t\t// prism.js adds a tabindex of 0 to the pre element by default (unless it's set)\n\t\t\t\t// this is unnecessary, we do not want this automatic behavior!\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={clsx(\"text-size-inherit\", languageClassName)}\n\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t__html: highlightedCodeInnerHtml,\n\t\t\t\t\t}}\n\t\t\t\t\t// we need to suppress the hydration warning because we are setting the innerHTML of the code block\n\t\t\t\t\t// and using Prism.js to \"highlight\" the code in a useEffect (client-side only), which does different things on the client and server\n\t\t\t\t\tsuppressHydrationWarning\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 things like the\n * `CodeBlock.Icon` and `CodeBlock.Title` are rendered.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-header\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Header = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\n\t\t\t\t\"flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700\",\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});\nHeader.displayName = \"CodeBlockHeader\";\n\n/**\n * The (optional) title of the `CodeBlock`. Default renders as an h3 element,\n * use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-title\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\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\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<\n\tComponentProps<\"button\">,\n\t\"children\" | \"type\"\n> &\n\tWithAsChild & {\n\t\t/**\n\t\t * Callback fired when the copy button is clicked, passes the copied text as an argument.\n\t\t */\n\t\tonCopy?: (value: string) => void;\n\t\t/**\n\t\t * Callback fired when an error occurs during copying.\n\t\t */\n\t\tonCopyError?: (error: unknown) => void;\n\t};\n\n/**\n * The (optional) copy button of the `CodeBlock`. Render this as a child of the\n * `CodeBlock.Body` to allow users to copy the code block contents to their\n * clipboard.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-copy-button\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst CopyButton = forwardRef<ComponentRef<\"button\">, CodeBlockCopyButtonProps>(\n\t(\n\t\t{ asChild = false, className, onCopy, onCopyError, onClick, ...props },\n\t\tref,\n\t) => {\n\t\tconst { copyText } = useContext(CodeBlockContext);\n\t\tconst [, copyToClipboard] = useCopyToClipboard();\n\t\tconst [wasCopied, setWasCopied] = useState(false);\n\t\tconst timeoutHandle = useRef<number>(0);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-2.5 top-2.5 z-10 flex size-7 items-center justify-center rounded border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_var(--color-gray-50),1rem_0_0_-0.25rem_var(--color-gray-50)] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\twasCopied &&\n\t\t\t\t\t\t\"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\tonClick={async (event) => {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonClick?.(event);\n\t\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\t\t// Clear any existing timeout\n\t\t\t\t\t\t\twindow.clearTimeout(timeoutHandle.current);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tawait copyToClipboard(copyText);\n\t\t\t\t\t\tonCopy?.(copyText);\n\t\t\t\t\t\tsetWasCopied(true);\n\n\t\t\t\t\t\t// Clear any existing timeout\n\t\t\t\t\t\twindow.clearTimeout(timeoutHandle.current);\n\n\t\t\t\t\t\t// Reset the copied state after a short delay\n\t\t\t\t\t\ttimeoutHandle.current = window.setTimeout(() => {\n\t\t\t\t\t\t\tsetWasCopied(false);\n\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\tonCopyError?.(error);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<span className=\"sr-only\">Copy code</span>\n\t\t\t\t{wasCopied ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\tCopied\n\t\t\t\t\t\t<MantleIcon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<MantleIcon svg={<CopyIcon />} className=\"-ml-px\" />\n\t\t\t\t)}\n\t\t\t</Component>\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`. Render this as a child of the\n * `CodeBlock.Body` to allow users to expand/collapse the code block contents.\n *\n * @note If this component is preset, the `CodeBlock` will automatically know\n * that it should be collapsible. Don't use this component if you don't want\n * the code block to be collapsible.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-expander-button\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst ExpanderButton = forwardRef<\n\tComponentRef<\"button\">,\n\tCodeBlockExpanderButtonProps\n>(({ asChild = false, className, onClick, ...props }, ref) => {\n\tconst { codeId, isCodeExpanded, setIsCodeExpanded, setHasCodeExpander } =\n\t\tuseContext(CodeBlockContext);\n\n\tuseEffect(() => {\n\t\tsetHasCodeExpander(true);\n\n\t\treturn () => {\n\t\t\tsetHasCodeExpander(false);\n\t\t};\n\t}, [setHasCodeExpander]);\n\n\tconst Component = asChild ? Slot : \"button\";\n\n\treturn (\n\t\t<Component\n\t\t\t{...props}\n\t\t\taria-controls={codeId}\n\t\t\taria-expanded={isCodeExpanded}\n\t\t\tclassName={cx(\n\t\t\t\t\"flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\ttype=\"button\"\n\t\t\tonClick={(event) => {\n\t\t\t\tsetIsCodeExpanded((prev) => !prev);\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t>\n\t\t\t{isCodeExpanded ? \"Show less\" : \"Show more\"}{\" \"}\n\t\t\t<MantleIcon\n\t\t\t\tsvg={<CaretDownIcon weight=\"bold\" />}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"size-4\",\n\t\t\t\t\tisCodeExpanded && \"rotate-180\",\n\t\t\t\t\t\"transition-all duration-150\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t</Component>\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 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 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 that represents the type of code block being displayed,\n * rendered as an SVG next to the code block title in the code block header.\n *\n * You can pass in a custom SVG component or use one of the presets\n * (pass only one of `svg` or `preset`).\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-icon\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\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\n\treturn <MantleIcon className={className} svg={svg} {...props} />;\n}\nCodeBlockIconComponent.displayName = \"CodeBlockIcon\";\n\n/**\n * Code blocks render and apply syntax highlighting to blocks of code.\n *\n * @see https://mantle.ngrok.com/components/code-block\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst CodeBlock = {\n\t/**\n\t * Code blocks render and apply syntax highlighting to blocks of code.\n\t * This is the root component for all code block components.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-root\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>…</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\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`. This is where the `CodeBlock.Code` and optional\n\t * `CodeBlock.CopyButton` is rendered.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The `CodeBlock` content. This is where the code is rendered and syntax highlighted.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-code\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.Code\n\t *       language=\"sh\"\n\t *       value={fmtCode`ffmpeg -i multichannel.mxf -map 0:v:0 -map 0:a:0`}\n\t *     />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCode,\n\t/**\n\t * The (optional) copy button of the `CodeBlock`. Render this as a child of the\n\t * `CodeBlock.Body` to allow users to copy the code block contents to their\n\t * clipboard.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-copy-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCopyButton,\n\t/**\n\t * The (optional) expander button of the `CodeBlock`. Render this as a child of the\n\t * `CodeBlock.Body` to allow users to expand/collapse the code block contents.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-expander-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\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 of the `CodeBlock`. This is where things like the\n\t * `CodeBlock.Icon` and `CodeBlock.Title` are rendered.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-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>…</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A small icon that represents the type of code block being displayed,\n\t * rendered as an SVG next to the code block title in the code block header.\n\t *\n\t * You can pass in a custom SVG component or use one of the presets\n\t * (pass only one of `svg` or `preset`).\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-icon\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>…</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tIcon: CodeBlockIconComponent,\n\t/**\n\t * The (optional) title of the `CodeBlock`. Default renders as an h3 element,\n\t * use asChild to render something else.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-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.js</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCodeBlock,\n};\n","/**\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 escaped = \"\";\n\tfor (const character of value) {\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","import Prism from \"prismjs\";\nimport \"prismjs/components/prism-bash.js\";\nimport \"prismjs/components/prism-csharp.js\";\nimport \"prismjs/components/prism-css.js\";\nimport \"prismjs/components/prism-go.js\";\nimport \"prismjs/components/prism-java.js\";\nimport \"prismjs/components/prism-javascript.js\";\nimport \"prismjs/components/prism-json.js\";\nimport \"prismjs/components/prism-jsx.js\";\nimport \"prismjs/components/prism-markup.js\";\nimport \"prismjs/components/prism-python.js\";\nimport \"prismjs/components/prism-ruby.js\";\nimport \"prismjs/components/prism-rust.js\";\nimport \"prismjs/components/prism-tsx.js\";\nimport \"prismjs/components/prism-typescript.js\";\nimport \"prismjs/components/prism-yaml.js\";\n\nexport {\n\t//,\n\tPrism as Highlighter,\n};\n","import type { SupportedLanguage } from \"./supported-languages.js\";\n\nconst indentations = [\"tabs\", \"spaces\"] as const;\ntype Indentation = (typeof indentations)[number];\n\n/**\n * Type Predicate: checks if the given value is a valid indentation type.\n */\nfunction isIndentation(input: unknown): input is Indentation {\n\treturn indentations.includes(input as Indentation);\n}\n\n/**\n * Infers the indentation type based on the language and preferred indentation.\n *\n * @param language - The language to check.\n * @param preferredIndentation - The preferred indentation type (overrides what is detected).\n */\nfunction inferIndentation(\n\tlanguage: SupportedLanguage,\n\tpreferredIndentation: Indentation | undefined,\n) {\n\t// if the user has a preferred indentation, use that regardless of the language\n\tif (preferredIndentation) {\n\t\treturn preferredIndentation;\n\t}\n\n\tif (isTabIndentedLanguage(language)) {\n\t\treturn \"tabs\";\n\t}\n\n\tif (isSpaceIndentedLanguage(language)) {\n\t\treturn \"spaces\";\n\t}\n\n\treturn \"spaces\";\n}\n\nexport {\n\t//,\n\tindentations,\n\tinferIndentation,\n\tisIndentation,\n};\n\nexport type {\n\t//,\n\tIndentation,\n};\n\n/**\n * Languages that require or strongly prefer tabs\n */\nconst tabIndentedLanguages = [\n\t\"csharp\",\n\t\"css\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"jsx\",\n\t\"ts\",\n\t\"tsx\",\n\t\"typescript\",\n\t\"xml\",\n] as const satisfies SupportedLanguage[];\n\n/**\n * Languages that require or strongly prefer spaces\n */\nconst spaceIndentedLanguages = [\n\t\"python\",\n\t\"py\",\n\t\"yaml\",\n\t\"yml\",\n\t\"ruby\",\n\t\"rb\",\n] as const satisfies SupportedLanguage[];\n\ntype TabIndentedLanguage = (typeof tabIndentedLanguages)[number];\ntype SpaceIndentedLanguage = (typeof spaceIndentedLanguages)[number];\n\n/**\n * Type Predicate: checks if the given value is a required/preferred tab-indented language.\n */\nfunction isTabIndentedLanguage(\n\tvalue: SupportedLanguage,\n): value is TabIndentedLanguage {\n\treturn tabIndentedLanguages.includes(value as TabIndentedLanguage);\n}\n\n/**\n * Type Predicate: checks if the given value is a required/preferred space-indented language.\n */\nfunction isSpaceIndentedLanguage(\n\tvalue: SupportedLanguage,\n): value is SpaceIndentedLanguage {\n\treturn spaceIndentedLanguages.includes(value as SpaceIndentedLanguage);\n}\n","import type { Indentation } from \"./indentation.js\";\n\ntype Options = {\n\t/**\n\t * The indentation type to use. Can be either \"tabs\" or \"spaces\".\n\t * @default \"spaces\"\n\t */\n\tindentation?: Indentation;\n};\n\n/**\n * Trim any leading and trailing whitespace/empty lines, convert leading\n * indentation to the given options.indentation\n */\nfunction normalizeIndentation(value: string, options?: Options): string {\n\tconst { indentation = \"spaces\" } = options || {};\n\n\treturn value.trim().replace(/^[ \\t]*(?=\\S)/gm, (match) => {\n\t\t// 1 tab === 2 spaces\n\t\t// convert tabs to spaces and spaces to tabs\n\t\tif (indentation === \"spaces\") {\n\t\t\treturn match.replace(/\\t/g, \"  \");\n\t\t}\n\t\treturn match.replace(/ {2}/g, \"\\t\");\n\t});\n}\n\nexport {\n\t//,\n\tnormalizeIndentation,\n};\n","/**\n * List of supported languages for syntax highlighting.\n * @private\n */\nexport const supportedLanguages = [\n\t\"bash\",\n\t\"cs\",\n\t\"csharp\",\n\t\"css\",\n\t\"dotnet\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"json\",\n\t\"jsx\",\n\t\"markup\",\n\t\"plain\",\n\t\"plaintext\",\n\t\"py\",\n\t\"python\",\n\t\"rb\",\n\t\"ruby\",\n\t\"rust\",\n\t\"sh\",\n\t\"shell\",\n\t\"text\",\n\t\"ts\",\n\t\"tsx\",\n\t\"txt\",\n\t\"typescript\",\n\t\"xml\",\n\t\"yaml\",\n\t\"yml\",\n] as const;\n\n/**\n * Supported languages for syntax highlighting.\n */\ntype SupportedLanguage = (typeof supportedLanguages)[number];\n\n/**\n * Parses a markdown code block (```) language class into a SupportedLanguage.\n * Defaults to \"sh\" if no supported language is found.\n */\nfunction parseLanguage(\n\tvalue: `language-${string}` | `lang-${string}` | (string & {}) | undefined,\n): SupportedLanguage {\n\tif (!value) {\n\t\treturn \"sh\";\n\t}\n\n\t// remove leading \"language-\" and \"lang-\" prefixes\n\t// find first '-' and slice from there\n\tconst maybeLanguage = value.trim().slice(value.indexOf(\"-\") + 1);\n\n\treturn isSupportedLanguage(maybeLanguage) ? maybeLanguage : \"sh\";\n}\n\n/**\n * Type Predicate: checks if an arbitrary value is a supported syntax highlighting language.\n */\nconst isSupportedLanguage = (value: unknown): value is SupportedLanguage => {\n\treturn (\n\t\ttypeof value === \"string\" &&\n\t\tsupportedLanguages.includes(value as SupportedLanguage)\n\t);\n};\n\n/**\n * A class name for a language that Prism.js can understand.\n */\ntype LanguageClass = `language-${SupportedLanguage}`;\n\n/**\n * Formats a language name into a class name that Prism.js can understand.\n * @default \"language-sh\"\n */\nfunction formatLanguageClassName(\n\tlanguage: SupportedLanguage | undefined = \"sh\",\n) {\n\tconst lang = language ?? \"sh\";\n\tconst className: LanguageClass = `language-${lang}`;\n\treturn className;\n}\n\nexport { isSupportedLanguage, parseLanguage, formatLanguageClassName };\nexport type { SupportedLanguage };\n","type Primitive = string | number | boolean | undefined | null;\n\n/**\n * Tagged template literal to format code blocks and normalize leading indentation\n */\nfunction fmtCode(\n\tstrings: TemplateStringsArray,\n\t...values: Primitive[]\n): string {\n\tif (!isTemplateStringsArray(strings) || !Array.isArray(values)) {\n\t\tthrow new Error(\n\t\t\t\"It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\\n\\tExample: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')\",\n\t\t);\n\t}\n\n\tconst text = String.raw({ raw: strings }, ...values);\n\n\t// fine the minimum indentation of the code block\n\tconst minIndent = findMinIndent(text);\n\tconst lines = text.trim().split(\"\\n\");\n\n\treturn lines\n\t\t.map((line) => {\n\t\t\t// remove nothing if the line doesn't start with indentation\n\t\t\tif (/^\\S+/.test(line)) {\n\t\t\t\treturn line;\n\t\t\t}\n\t\t\treturn line.slice(minIndent);\n\t\t})\n\t\t.join(\"\\n\");\n}\n\nexport {\n\t//,\n\tfmtCode,\n};\n\n/**\n * Find the shortest indentation of a multiline string\n */\nfunction findMinIndent(value: string): number {\n\tconst match = value.match(/^[ \\t]*(?=\\S)/gm);\n\n\tif (!match) {\n\t\treturn 0;\n\t}\n\n\treturn match.reduce(\n\t\t(acc, curr) => Math.min(acc, curr.length),\n\t\tNumber.POSITIVE_INFINITY,\n\t);\n}\n\n/**\n * Type guard to check if a value is a `TemplateStringsArray`\n */\nfunction isTemplateStringsArray(\n\tstrings: unknown,\n): strings is TemplateStringsArray {\n\treturn (\n\t\tArray.isArray(strings) && \"raw\" in strings && Array.isArray(strings.raw)\n\t);\n}\n","import { parseBooleanish } from \"../../types/booleanish.js\";\nimport { type Indentation, isIndentation } from \"./indentation.js\";\n\nconst modes = [\n\t//,\n\t\"cli\",\n\t\"file\",\n\t\"traffic-policy\",\n] as const;\ntype Mode = (typeof modes)[number];\n\ntype MetaInput = {\n\tcollapsible?: boolean | undefined;\n\tdisableCopy?: boolean | undefined;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\ntype Meta = {\n\tcollapsible: boolean;\n\tdisableCopy: boolean;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\nconst defaultMeta = {\n\tcollapsible: false,\n\tdisableCopy: false,\n\tindentation: undefined,\n\tmode: undefined,\n\ttitle: undefined,\n} as const satisfies Meta;\n\ntype DefaultMeta = typeof defaultMeta;\n\n/**\n * Parses a markdown code block (```) metastring into a meta object.\n * Defaults to DefaultMeta if no metastring given or if metastring is invalid.\n * Useful for parsing the metastring from a markdown code block to pass into the\n * CodeBlock components as props.\n */\nfunction parseMetastring(input: string | undefined): Meta {\n\tconst metastring = input?.trim() ?? \"\";\n\tif (!metastring) {\n\t\treturn defaultMeta;\n\t}\n\n\tconst metaJson = tokenizeMetastring(metastring).reduce<\n\t\tRecord<string, unknown>\n\t>((acc, token) => {\n\t\tconst [key, value] = token.split(\"=\");\n\t\tif (!key) {\n\t\t\treturn acc;\n\t\t}\n\t\tconst normalizedValue = normalizeValue(value);\n\t\tacc[key] = normalizedValue ?? true;\n\t\treturn acc;\n\t}, {});\n\n\ttry {\n\t\tconst parsed = parseMetaJson(metaJson);\n\n\t\t// return the parsed meta object, with default values filled in\n\t\treturn {\n\t\t\t...defaultMeta,\n\t\t\t...parsed,\n\t\t};\n\t} catch (_) {\n\t\treturn defaultMeta;\n\t}\n}\n\nexport {\n\t//,\n\tdefaultMeta,\n\tparseMetastring,\n};\nexport type {\n\t//,\n\tMeta,\n\tMetaInput,\n\tMode,\n\tDefaultMeta,\n};\n\n/**\n * Remove leading and trailing `\"` quotes around value\n * @private\n *\n * @example\n * ```tsx\n * const normalized = normalizeValue('\"hello world\"');\n * // Returns: \"hello world\"\n *\n * const unchanged = normalizeValue('hello');\n * // Returns: \"hello\"\n * ```\n */\nexport function normalizeValue(value: string | undefined) {\n\treturn value?.trim().replace(/^\"(.*)\"$/, \"$1\");\n}\n\n/**\n * Splits a metastring into an array of tokens that can be parsed into a meta object.\n * Should allow for quotes and spaces in tokens\n * @private\n *\n * @example\n * ```tsx\n * const tokens = tokenizeMetastring('title=\"My File\" collapsible mode=cli');\n * // Returns: ['title=\"My File\"', 'collapsible', 'mode=cli']\n *\n * const simpleTokens = tokenizeMetastring('collapsible disableCopy');\n * // Returns: ['collapsible', 'disableCopy']\n * ```\n */\nexport function tokenizeMetastring(value: string | undefined): string[] {\n\tconst input = value?.trim() ?? \"\";\n\tconst result: string[] = [];\n\n\tlet currentString = \"\";\n\tlet inQuotes = false;\n\n\tfor (const char of input) {\n\t\tif (char === \" \" && !inQuotes) {\n\t\t\tif (currentString) {\n\t\t\t\tresult.push(currentString);\n\t\t\t\tcurrentString = \"\";\n\t\t\t}\n\t\t} else if (char === '\"') {\n\t\t\tinQuotes = !inQuotes;\n\t\t\tcurrentString += char;\n\t\t} else {\n\t\t\tcurrentString += char;\n\t\t}\n\t}\n\n\tif (currentString) {\n\t\tresult.push(currentString);\n\t}\n\n\treturn result;\n}\n\n/**\n * Type Predicate: checks if the given value is a valid mode.\n * @private\n */\nfunction isMode(input: unknown): input is Mode {\n\treturn modes.includes(input as Mode);\n}\n\n/**\n * Parses a meta JSON object into a Meta object.\n * @private\n */\nfunction parseMetaJson(input: Record<string, unknown>): Meta {\n\tconst {\n\t\tcollapsible = defaultMeta.collapsible,\n\t\tdisableCopy = defaultMeta.disableCopy,\n\t\tindentation = defaultMeta.indentation,\n\t\tmode = defaultMeta.mode,\n\t\ttitle = defaultMeta.title,\n\t} = input;\n\n\treturn {\n\t\tcollapsible:\n\t\t\ttypeof collapsible === \"string\" || typeof collapsible === \"boolean\"\n\t\t\t\t? parseBooleanish(collapsible)\n\t\t\t\t: defaultMeta.collapsible,\n\t\tdisableCopy:\n\t\t\ttypeof disableCopy === \"string\" || typeof disableCopy === \"boolean\"\n\t\t\t\t? parseBooleanish(disableCopy)\n\t\t\t\t: defaultMeta.disableCopy,\n\t\tindentation: isIndentation(indentation)\n\t\t\t? indentation\n\t\t\t: defaultMeta.indentation,\n\t\tmode: isMode(mode) ? mode : defaultMeta.mode,\n\t\ttitle: typeof title === \"string\" ? title.trim() : defaultMeta.title,\n\t};\n}\n"],"mappings":"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","names":["CaretDownIcon","CheckIcon","CopyIcon","FileTextIcon","TerminalIcon","Slot","clsx","createContext","forwardRef","useContext","useEffect","useId","useMemo","useRef","useState","assert","escapeHtml","value","escaped","character","Prism","indentations","isIndentation","input","inferIndentation","language","preferredIndentation","isTabIndentedLanguage","isSpaceIndentedLanguage","tabIndentedLanguages","spaceIndentedLanguages","isTabIndentedLanguage","value","isSpaceIndentedLanguage","normalizeIndentation","value","options","indentation","match","supportedLanguages","parseLanguage","value","maybeLanguage","isSupportedLanguage","formatLanguageClassName","language","Fragment","jsx","jsxs","CodeBlockContext","createContext","Root","forwardRef","asChild","className","props","ref","copyText","setCopyText","useState","hasCodeExpander","setHasCodeExpander","isCodeExpanded","setIsCodeExpanded","codeId","setCodeId","context","useMemo","id","old","assert","Component","Slot","cx","Body","Code","_unusedHighlightLines","propIndentation","language","_unusedShowLineNumbers","style","tabIndex","value","useId","registerCodeId","unregisterCodeId","useContext","indentation","inferIndentation","normalizedAndTrimmedValue","normalizeIndentation","highlightedCodeInnerHtml","setHighlightedCodeInnerHtml","escapeHtml","useEffect","grammar","Prism","supportedLanguages","newHighlightedCodeInnerHtml","languageClassName","formatLanguageClassName","clsx","Header","Title","CopyButton","onCopy","onCopyError","onClick","copyToClipboard","useCopyToClipboard","wasCopied","setWasCopied","timeoutHandle","useRef","event","error","Icon","CheckIcon","CopyIcon","ExpanderButton","prev","CaretDownIcon","CodeBlockIconComponent","preset","_svgProp","svg","FileTextIcon","TerminalIcon","TrafficPolicyFileIcon","CodeBlock","fmtCode","strings","values","isTemplateStringsArray","text","minIndent","findMinIndent","line","findMinIndent","value","match","acc","curr","isTemplateStringsArray","strings","modes","defaultMeta","parseMetastring","input","metastring","metaJson","tokenizeMetastring","acc","token","key","value","normalizedValue","normalizeValue","parsed","parseMetaJson","normalizeValue","value","tokenizeMetastring","input","result","currentString","inQuotes","char","isMode","modes","parseMetaJson","collapsible","defaultMeta","disableCopy","indentation","mode","title","parseBooleanish","isIndentation"]}
+{"version":3,"sources":["../src/components/code-block/code-block.tsx","../src/components/code-block/escape-html.ts","../src/components/code-block/highlighter.ts","../src/components/code-block/indentation.ts","../src/components/code-block/normalize.ts","../src/components/code-block/supported-languages.ts","../src/components/code-block/fmt-code.ts","../src/components/code-block/parse-metastring.ts"],"sourcesContent":["\"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 clsx from \"clsx\";\nimport type {\n\tComponentProps,\n\tComponentRef,\n\tDispatch,\n\tHTMLAttributes,\n\tReactNode,\n\tSetStateAction,\n} from \"react\";\nimport {\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseId,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\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 { Slot } from \"../slot/index.js\";\nimport { escapeHtml } from \"./escape-html.js\";\nimport { Highlighter } from \"./highlighter.js\";\nimport { type Indentation, inferIndentation } from \"./indentation.js\";\nimport type { LineRange } from \"./line-numbers.js\";\nimport { normalizeIndentation } from \"./normalize.js\";\nimport type { Mode } from \"./parse-metastring.js\";\nimport type { SupportedLanguage } from \"./supported-languages.js\";\nimport {\n\tformatLanguageClassName,\n\tsupportedLanguages,\n} from \"./supported-languages.js\";\n\n/**\n * TODO(cody):\n * - fix line numbers, maybe try grid instead of :before and flex?\n * - fix line hightlighting\n * - fix line wrapping? horizontal scrolling has problems w/ line highlighting :(\n */\n\ntype CodeBlockContextType = {\n\tcodeId: string | undefined;\n\tcopyText: string;\n\thasCodeExpander: boolean;\n\tisCodeExpanded: boolean;\n\tregisterCodeId: (id: string) => void;\n\tsetCopyText: (newCopyText: string) => void;\n\tsetHasCodeExpander: (value: boolean) => void;\n\tsetIsCodeExpanded: Dispatch<SetStateAction<boolean>>;\n\tunregisterCodeId: (id: string) => void;\n};\n\nconst CodeBlockContext = createContext<CodeBlockContextType>({\n\tcodeId: undefined,\n\tcopyText: \"\",\n\thasCodeExpander: false,\n\tisCodeExpanded: false,\n\tregisterCodeId: () => {},\n\tsetCopyText: () => {},\n\tsetHasCodeExpander: () => {},\n\tsetIsCodeExpanded: () => {},\n\tunregisterCodeId: () => {},\n});\n\n/**\n * Code blocks render and apply syntax highlighting to blocks of code.\n * This is the root component for all code block components.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst [copyText, setCopyText] = useState(\"\");\n\tconst [hasCodeExpander, setHasCodeExpander] = useState(false);\n\tconst [isCodeExpanded, setIsCodeExpanded] = useState(false);\n\tconst [codeId, setCodeId] = useState<string | undefined>(undefined);\n\n\tconst context: CodeBlockContextType = useMemo(\n\t\t() =>\n\t\t\t({\n\t\t\t\tcodeId,\n\t\t\t\tcopyText,\n\t\t\t\thasCodeExpander,\n\t\t\t\tisCodeExpanded,\n\t\t\t\tregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(\n\t\t\t\t\t\t\told == null,\n\t\t\t\t\t\t\t\"You can only render a single CodeBlockCode within a CodeBlock.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn id;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tsetCopyText,\n\t\t\t\tsetHasCodeExpander,\n\t\t\t\tsetIsCodeExpanded,\n\t\t\t\tunregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(\n\t\t\t\t\t\t\told === id,\n\t\t\t\t\t\t\t\"You can only render a single CodeBlockCode within a CodeBlock.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn undefined;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t}) as const,\n\t\t[codeId, copyText, hasCodeExpander, isCodeExpanded],\n\t);\n\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<CodeBlockContext.Provider value={context}>\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 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</CodeBlockContext.Provider>\n\t);\n});\nRoot.displayName = \"CodeBlock\";\n\n/**\n * The body of the `CodeBlock`. This is where the `CodeBlock.Code` and optional\n * `CodeBlock.CopyButton` is rendered.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-body\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Body = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component className={cx(\"relative\", className)} ref={ref} {...props} />\n\t);\n});\nBody.displayName = \"CodeBlockBody\";\n\ntype CodeBlockCodeProps = Omit<ComponentProps<\"pre\">, \"children\"> & {\n\t/**\n\t * The code to display in the code block. Should be code formatted as a string. This code will be passed to our syntax highlighter.\n\t */\n\tvalue: string;\n\t/**\n\t * @todo not implemented yet\n\t */\n\thighlightLines?: (LineRange | number)[];\n\t/**\n\t * The type of indentation to use. Can be either \"tabs\" or \"spaces\".\n\t * @default inferred from the given language, fallback to `spaces`\n\t */\n\tindentation?: Indentation;\n\t/**\n\t * The language of the code block. This will be used to determine how to syntax highlight the code.\n\t * @default `\"text\"`.\n\t */\n\tlanguage?: SupportedLanguage;\n\t/**\n\t * @todo not implemented yet\n\t */\n\tshowLineNumbers?: boolean;\n};\n\n/**\n * The `CodeBlock` content. This is where the code is rendered and syntax highlighted.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-code\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code\n *       language=\"sh\"\n *       value={fmtCode`ffmpeg -i multichannel.mxf -map 0:v:0 -map 0:a:0 -map 0:a:0 -c:a:0 ac3 -b:a:0 640k -ac:a:1 2 -c:a:1 aac -b:2 128k out.mp4`}\n *     />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Code = forwardRef<ComponentRef<\"pre\">, CodeBlockCodeProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\thighlightLines: _unusedHighlightLines, // not implemented yet\n\t\t\tindentation: propIndentation,\n\t\t\tlanguage = \"text\",\n\t\t\tshowLineNumbers: _unusedShowLineNumbers, // not implemented yet\n\t\t\tstyle,\n\t\t\ttabIndex,\n\t\t\tvalue,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst id = useId();\n\t\tconst {\n\t\t\thasCodeExpander,\n\t\t\tisCodeExpanded,\n\t\t\tregisterCodeId,\n\t\t\tsetCopyText,\n\t\t\tunregisterCodeId,\n\t\t} = useContext(CodeBlockContext);\n\t\tconst indentation = inferIndentation(language, propIndentation);\n\n\t\t// trim any leading and trailing whitespace/empty lines, convert leading tabs to spaces\n\t\tconst normalizedAndTrimmedValue = useMemo(\n\t\t\t() => normalizeIndentation(value, { indentation }),\n\t\t\t[value, indentation],\n\t\t);\n\t\tconst [highlightedCodeInnerHtml, setHighlightedCodeInnerHtml] = useState(\n\t\t\t// initialize the <code> inner html with escaped HTML since we are using\n\t\t\t// dangerouslySetInnerHTML to set the inner html of the <code> element\n\t\t\t// and use Prism.js to \"highlight\" the code in a useEffect (client-side only)\n\t\t\tescapeHtml(normalizeIndentation(value, { indentation })),\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tconst grammar = Highlighter.languages[language];\n\t\t\tassert(\n\t\t\t\tgrammar,\n\t\t\t\t`CodeBlock does not support the language \"${language}\". The syntax highlighter does not have a grammar for this language. The supported languages are: ${supportedLanguages.join(\", \")}.`,\n\t\t\t);\n\t\t\tconst newHighlightedCodeInnerHtml = Highlighter.highlight(\n\t\t\t\tnormalizedAndTrimmedValue,\n\t\t\t\tgrammar,\n\t\t\t\tlanguage,\n\t\t\t);\n\t\t\tsetHighlightedCodeInnerHtml(newHighlightedCodeInnerHtml);\n\t\t}, [normalizedAndTrimmedValue, language]);\n\n\t\tuseEffect(() => {\n\t\t\tsetCopyText(normalizedAndTrimmedValue);\n\t\t}, [normalizedAndTrimmedValue, setCopyText]);\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 languageClassName = formatLanguageClassName(language);\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 p-4 pr-14\",\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\tlanguageClassName, // place it last because prism does weird stuff client side, causes hydration mismatches\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-lang={language}\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={{\n\t\t\t\t\t...style,\n\t\t\t\t\ttabSize: 2,\n\t\t\t\t\tMozTabSize: 2,\n\t\t\t\t}}\n\t\t\t\t// prism.js adds a tabindex of 0 to the pre element by default (unless it's set)\n\t\t\t\t// this is unnecessary, we do not want this automatic behavior!\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={clsx(\"text-size-inherit\", languageClassName)}\n\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t__html: highlightedCodeInnerHtml,\n\t\t\t\t\t}}\n\t\t\t\t\t// we need to suppress the hydration warning because we are setting the innerHTML of the code block\n\t\t\t\t\t// and using Prism.js to \"highlight\" the code in a useEffect (client-side only), which does different things on the client and server\n\t\t\t\t\tsuppressHydrationWarning\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 things like the\n * `CodeBlock.Icon` and `CodeBlock.Title` are rendered.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-header\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Header = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\n\t\t\t\t\"flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700\",\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});\nHeader.displayName = \"CodeBlockHeader\";\n\n/**\n * The (optional) title of the `CodeBlock`. Default renders as an h3 element,\n * use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-title\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\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\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<\n\tComponentProps<\"button\">,\n\t\"children\" | \"type\"\n> &\n\tWithAsChild & {\n\t\t/**\n\t\t * Callback fired when the copy button is clicked, passes the copied text as an argument.\n\t\t */\n\t\tonCopy?: (value: string) => void;\n\t\t/**\n\t\t * Callback fired when an error occurs during copying.\n\t\t */\n\t\tonCopyError?: (error: unknown) => void;\n\t};\n\n/**\n * The (optional) copy button of the `CodeBlock`. Render this as a child of the\n * `CodeBlock.Body` to allow users to copy the code block contents to their\n * clipboard.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-copy-button\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst CopyButton = forwardRef<ComponentRef<\"button\">, CodeBlockCopyButtonProps>(\n\t(\n\t\t{ asChild = false, className, onCopy, onCopyError, onClick, ...props },\n\t\tref,\n\t) => {\n\t\tconst { copyText } = useContext(CodeBlockContext);\n\t\tconst [, copyToClipboard] = useCopyToClipboard();\n\t\tconst [wasCopied, setWasCopied] = useState(false);\n\t\tconst timeoutHandle = useRef<number>(0);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-2.5 top-2.5 z-10 flex size-7 items-center justify-center rounded border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_var(--color-gray-50),1rem_0_0_-0.25rem_var(--color-gray-50)] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\twasCopied &&\n\t\t\t\t\t\t\"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\tonClick={async (event) => {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonClick?.(event);\n\t\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\t\t// Clear any existing timeout\n\t\t\t\t\t\t\twindow.clearTimeout(timeoutHandle.current);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tawait copyToClipboard(copyText);\n\t\t\t\t\t\tonCopy?.(copyText);\n\t\t\t\t\t\tsetWasCopied(true);\n\n\t\t\t\t\t\t// Clear any existing timeout\n\t\t\t\t\t\twindow.clearTimeout(timeoutHandle.current);\n\n\t\t\t\t\t\t// Reset the copied state after a short delay\n\t\t\t\t\t\ttimeoutHandle.current = window.setTimeout(() => {\n\t\t\t\t\t\t\tsetWasCopied(false);\n\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\tonCopyError?.(error);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<span className=\"sr-only\">Copy code</span>\n\t\t\t\t{wasCopied ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\tCopied\n\t\t\t\t\t\t<MantleIcon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<MantleIcon svg={<CopyIcon />} className=\"-ml-px\" />\n\t\t\t\t)}\n\t\t\t</Component>\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`. Render this as a child of the\n * `CodeBlock.Body` to allow users to expand/collapse the code block contents.\n *\n * @note If this component is preset, the `CodeBlock` will automatically know\n * that it should be collapsible. Don't use this component if you don't want\n * the code block to be collapsible.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-expander-button\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst ExpanderButton = forwardRef<\n\tComponentRef<\"button\">,\n\tCodeBlockExpanderButtonProps\n>(({ asChild = false, className, onClick, ...props }, ref) => {\n\tconst { codeId, isCodeExpanded, setIsCodeExpanded, setHasCodeExpander } =\n\t\tuseContext(CodeBlockContext);\n\n\tuseEffect(() => {\n\t\tsetHasCodeExpander(true);\n\n\t\treturn () => {\n\t\t\tsetHasCodeExpander(false);\n\t\t};\n\t}, [setHasCodeExpander]);\n\n\tconst Component = asChild ? Slot : \"button\";\n\n\treturn (\n\t\t<Component\n\t\t\t{...props}\n\t\t\taria-controls={codeId}\n\t\t\taria-expanded={isCodeExpanded}\n\t\t\tclassName={cx(\n\t\t\t\t\"flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\ttype=\"button\"\n\t\t\tonClick={(event) => {\n\t\t\t\tsetIsCodeExpanded((prev) => !prev);\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t>\n\t\t\t{isCodeExpanded ? \"Show less\" : \"Show more\"}{\" \"}\n\t\t\t<MantleIcon\n\t\t\t\tsvg={<CaretDownIcon weight=\"bold\" />}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"size-4\",\n\t\t\t\t\tisCodeExpanded && \"rotate-180\",\n\t\t\t\t\t\"transition-all duration-150\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t</Component>\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 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 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 that represents the type of code block being displayed,\n * rendered as an SVG next to the code block title in the code block header.\n *\n * You can pass in a custom SVG component or use one of the presets\n * (pass only one of `svg` or `preset`).\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-icon\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\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\n\treturn <MantleIcon className={className} svg={svg} {...props} />;\n}\nCodeBlockIconComponent.displayName = \"CodeBlockIcon\";\n\n/**\n * Code blocks render and apply syntax highlighting to blocks of code.\n *\n * @see https://mantle.ngrok.com/components/code-block\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst CodeBlock = {\n\t/**\n\t * Code blocks render and apply syntax highlighting to blocks of code.\n\t * This is the root component for all code block components.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-root\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>…</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\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`. This is where the `CodeBlock.Code` and optional\n\t * `CodeBlock.CopyButton` is rendered.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The `CodeBlock` content. This is where the code is rendered and syntax highlighted.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-code\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.Code\n\t *       language=\"sh\"\n\t *       value={fmtCode`ffmpeg -i multichannel.mxf -map 0:v:0 -map 0:a:0`}\n\t *     />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCode,\n\t/**\n\t * The (optional) copy button of the `CodeBlock`. Render this as a child of the\n\t * `CodeBlock.Body` to allow users to copy the code block contents to their\n\t * clipboard.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-copy-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCopyButton,\n\t/**\n\t * The (optional) expander button of the `CodeBlock`. Render this as a child of the\n\t * `CodeBlock.Body` to allow users to expand/collapse the code block contents.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-expander-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\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 of the `CodeBlock`. This is where things like the\n\t * `CodeBlock.Icon` and `CodeBlock.Title` are rendered.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-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>…</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A small icon that represents the type of code block being displayed,\n\t * rendered as an SVG next to the code block title in the code block header.\n\t *\n\t * You can pass in a custom SVG component or use one of the presets\n\t * (pass only one of `svg` or `preset`).\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-icon\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>…</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tIcon: CodeBlockIconComponent,\n\t/**\n\t * The (optional) title of the `CodeBlock`. Default renders as an h3 element,\n\t * use asChild to render something else.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-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.js</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCodeBlock,\n};\n","/**\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 escaped = \"\";\n\tfor (const character of value) {\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","import Prism from \"prismjs\";\nimport \"prismjs/components/prism-bash.js\";\nimport \"prismjs/components/prism-csharp.js\";\nimport \"prismjs/components/prism-css.js\";\nimport \"prismjs/components/prism-go.js\";\nimport \"prismjs/components/prism-java.js\";\nimport \"prismjs/components/prism-javascript.js\";\nimport \"prismjs/components/prism-json.js\";\nimport \"prismjs/components/prism-jsx.js\";\nimport \"prismjs/components/prism-markup.js\";\nimport \"prismjs/components/prism-python.js\";\nimport \"prismjs/components/prism-ruby.js\";\nimport \"prismjs/components/prism-rust.js\";\nimport \"prismjs/components/prism-tsx.js\";\nimport \"prismjs/components/prism-typescript.js\";\nimport \"prismjs/components/prism-yaml.js\";\n\nexport {\n\t//,\n\tPrism as Highlighter,\n};\n","import type { SupportedLanguage } from \"./supported-languages.js\";\n\nconst indentations = [\"tabs\", \"spaces\"] as const;\ntype Indentation = (typeof indentations)[number];\n\n/**\n * Type Predicate: checks if the given value is a valid indentation type.\n */\nfunction isIndentation(input: unknown): input is Indentation {\n\treturn indentations.includes(input as Indentation);\n}\n\n/**\n * Infers the indentation type based on the language and preferred indentation.\n *\n * @param language - The language to check.\n * @param preferredIndentation - The preferred indentation type (overrides what is detected).\n */\nfunction inferIndentation(\n\tlanguage: SupportedLanguage,\n\tpreferredIndentation: Indentation | undefined,\n) {\n\t// if the user has a preferred indentation, use that regardless of the language\n\tif (preferredIndentation) {\n\t\treturn preferredIndentation;\n\t}\n\n\tif (isTabIndentedLanguage(language)) {\n\t\treturn \"tabs\";\n\t}\n\n\tif (isSpaceIndentedLanguage(language)) {\n\t\treturn \"spaces\";\n\t}\n\n\treturn \"spaces\";\n}\n\nexport {\n\t//,\n\tindentations,\n\tinferIndentation,\n\tisIndentation,\n};\n\nexport type {\n\t//,\n\tIndentation,\n};\n\n/**\n * Languages that require or strongly prefer tabs\n */\nconst tabIndentedLanguages = [\n\t\"csharp\",\n\t\"css\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"jsx\",\n\t\"ts\",\n\t\"tsx\",\n\t\"typescript\",\n\t\"xml\",\n] as const satisfies SupportedLanguage[];\n\n/**\n * Languages that require or strongly prefer spaces\n */\nconst spaceIndentedLanguages = [\n\t\"python\",\n\t\"py\",\n\t\"yaml\",\n\t\"yml\",\n\t\"ruby\",\n\t\"rb\",\n] as const satisfies SupportedLanguage[];\n\ntype TabIndentedLanguage = (typeof tabIndentedLanguages)[number];\ntype SpaceIndentedLanguage = (typeof spaceIndentedLanguages)[number];\n\n/**\n * Type Predicate: checks if the given value is a required/preferred tab-indented language.\n */\nfunction isTabIndentedLanguage(\n\tvalue: SupportedLanguage,\n): value is TabIndentedLanguage {\n\treturn tabIndentedLanguages.includes(value as TabIndentedLanguage);\n}\n\n/**\n * Type Predicate: checks if the given value is a required/preferred space-indented language.\n */\nfunction isSpaceIndentedLanguage(\n\tvalue: SupportedLanguage,\n): value is SpaceIndentedLanguage {\n\treturn spaceIndentedLanguages.includes(value as SpaceIndentedLanguage);\n}\n","import type { Indentation } from \"./indentation.js\";\n\ntype Options = {\n\t/**\n\t * The indentation type to use. Can be either \"tabs\" or \"spaces\".\n\t * @default \"spaces\"\n\t */\n\tindentation?: Indentation;\n};\n\n/**\n * Trim any leading and trailing whitespace/empty lines, convert leading\n * indentation to the given options.indentation\n */\nfunction normalizeIndentation(value: string, options?: Options): string {\n\tconst { indentation = \"spaces\" } = options || {};\n\n\treturn value.trim().replace(/^[ \\t]*(?=\\S)/gm, (match) => {\n\t\t// 1 tab === 2 spaces\n\t\t// convert tabs to spaces and spaces to tabs\n\t\tif (indentation === \"spaces\") {\n\t\t\treturn match.replace(/\\t/g, \"  \");\n\t\t}\n\t\treturn match.replace(/ {2}/g, \"\\t\");\n\t});\n}\n\nexport {\n\t//,\n\tnormalizeIndentation,\n};\n","/**\n * List of supported languages for syntax highlighting.\n * @private\n */\nexport const supportedLanguages = [\n\t\"bash\",\n\t\"cs\",\n\t\"csharp\",\n\t\"css\",\n\t\"dotnet\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"json\",\n\t\"jsx\",\n\t\"markup\",\n\t\"plain\",\n\t\"plaintext\",\n\t\"py\",\n\t\"python\",\n\t\"rb\",\n\t\"ruby\",\n\t\"rust\",\n\t\"sh\",\n\t\"shell\",\n\t\"text\",\n\t\"ts\",\n\t\"tsx\",\n\t\"txt\",\n\t\"typescript\",\n\t\"xml\",\n\t\"yaml\",\n\t\"yml\",\n] as const;\n\n/**\n * Supported languages for syntax highlighting.\n */\ntype SupportedLanguage = (typeof supportedLanguages)[number];\n\n/**\n * Parses a markdown code block (```) language class into a SupportedLanguage.\n * Defaults to \"sh\" if no supported language is found.\n */\nfunction parseLanguage(\n\tvalue: `language-${string}` | `lang-${string}` | (string & {}) | undefined,\n): SupportedLanguage {\n\tif (!value) {\n\t\treturn \"sh\";\n\t}\n\n\t// remove leading \"language-\" and \"lang-\" prefixes\n\t// find first '-' and slice from there\n\tconst maybeLanguage = value.trim().slice(value.indexOf(\"-\") + 1);\n\n\treturn isSupportedLanguage(maybeLanguage) ? maybeLanguage : \"sh\";\n}\n\n/**\n * Type Predicate: checks if an arbitrary value is a supported syntax highlighting language.\n */\nconst isSupportedLanguage = (value: unknown): value is SupportedLanguage => {\n\treturn (\n\t\ttypeof value === \"string\" &&\n\t\tsupportedLanguages.includes(value as SupportedLanguage)\n\t);\n};\n\n/**\n * A class name for a language that Prism.js can understand.\n */\ntype LanguageClass = `language-${SupportedLanguage}`;\n\n/**\n * Formats a language name into a class name that Prism.js can understand.\n * @default \"language-sh\"\n */\nfunction formatLanguageClassName(\n\tlanguage: SupportedLanguage | undefined = \"sh\",\n) {\n\tconst lang = language ?? \"sh\";\n\tconst className: LanguageClass = `language-${lang}`;\n\treturn className;\n}\n\nexport { isSupportedLanguage, parseLanguage, formatLanguageClassName };\nexport type { SupportedLanguage };\n","type Primitive = string | number | boolean | undefined | null;\n\n/**\n * Tagged template literal to format code blocks and normalize leading indentation\n */\nfunction fmtCode(\n\tstrings: TemplateStringsArray,\n\t...values: Primitive[]\n): string {\n\tif (!isTemplateStringsArray(strings) || !Array.isArray(values)) {\n\t\tthrow new Error(\n\t\t\t\"It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\\n\\tExample: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')\",\n\t\t);\n\t}\n\n\tconst text = String.raw({ raw: strings }, ...values);\n\n\t// fine the minimum indentation of the code block\n\tconst minIndent = findMinIndent(text);\n\tconst lines = text.trim().split(\"\\n\");\n\n\treturn lines\n\t\t.map((line) => {\n\t\t\t// remove nothing if the line doesn't start with indentation\n\t\t\tif (/^\\S+/.test(line)) {\n\t\t\t\treturn line;\n\t\t\t}\n\t\t\treturn line.slice(minIndent);\n\t\t})\n\t\t.join(\"\\n\");\n}\n\nexport {\n\t//,\n\tfmtCode,\n};\n\n/**\n * Find the shortest indentation of a multiline string\n */\nfunction findMinIndent(value: string): number {\n\tconst match = value.match(/^[ \\t]*(?=\\S)/gm);\n\n\tif (!match) {\n\t\treturn 0;\n\t}\n\n\treturn match.reduce(\n\t\t(acc, curr) => Math.min(acc, curr.length),\n\t\tNumber.POSITIVE_INFINITY,\n\t);\n}\n\n/**\n * Type guard to check if a value is a `TemplateStringsArray`\n */\nfunction isTemplateStringsArray(\n\tstrings: unknown,\n): strings is TemplateStringsArray {\n\treturn (\n\t\tArray.isArray(strings) && \"raw\" in strings && Array.isArray(strings.raw)\n\t);\n}\n","import { parseBooleanish } from \"../../types/booleanish.js\";\nimport { type Indentation, isIndentation } from \"./indentation.js\";\n\nconst modes = [\n\t//,\n\t\"cli\",\n\t\"file\",\n\t\"traffic-policy\",\n] as const;\ntype Mode = (typeof modes)[number];\n\ntype MetaInput = {\n\tcollapsible?: boolean | undefined;\n\tdisableCopy?: boolean | undefined;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\ntype Meta = {\n\tcollapsible: boolean;\n\tdisableCopy: boolean;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\nconst defaultMeta = {\n\tcollapsible: false,\n\tdisableCopy: false,\n\tindentation: undefined,\n\tmode: undefined,\n\ttitle: undefined,\n} as const satisfies Meta;\n\ntype DefaultMeta = typeof defaultMeta;\n\n/**\n * Parses a markdown code block (```) metastring into a meta object.\n * Defaults to DefaultMeta if no metastring given or if metastring is invalid.\n * Useful for parsing the metastring from a markdown code block to pass into the\n * CodeBlock components as props.\n */\nfunction parseMetastring(input: string | undefined): Meta {\n\tconst metastring = input?.trim() ?? \"\";\n\tif (!metastring) {\n\t\treturn defaultMeta;\n\t}\n\n\tconst metaJson = tokenizeMetastring(metastring).reduce<\n\t\tRecord<string, unknown>\n\t>((acc, token) => {\n\t\tconst [key, value] = token.split(\"=\");\n\t\tif (!key) {\n\t\t\treturn acc;\n\t\t}\n\t\tconst normalizedValue = normalizeValue(value);\n\t\tacc[key] = normalizedValue ?? true;\n\t\treturn acc;\n\t}, {});\n\n\ttry {\n\t\tconst parsed = parseMetaJson(metaJson);\n\n\t\t// return the parsed meta object, with default values filled in\n\t\treturn {\n\t\t\t...defaultMeta,\n\t\t\t...parsed,\n\t\t};\n\t} catch (_) {\n\t\treturn defaultMeta;\n\t}\n}\n\nexport {\n\t//,\n\tdefaultMeta,\n\tparseMetastring,\n};\nexport type {\n\t//,\n\tMeta,\n\tMetaInput,\n\tMode,\n\tDefaultMeta,\n};\n\n/**\n * Remove leading and trailing `\"` quotes around value\n * @private\n *\n * @example\n * ```tsx\n * const normalized = normalizeValue('\"hello world\"');\n * // Returns: \"hello world\"\n *\n * const unchanged = normalizeValue('hello');\n * // Returns: \"hello\"\n * ```\n */\nexport function normalizeValue(value: string | undefined) {\n\treturn value?.trim().replace(/^\"(.*)\"$/, \"$1\");\n}\n\n/**\n * Splits a metastring into an array of tokens that can be parsed into a meta object.\n * Should allow for quotes and spaces in tokens\n * @private\n *\n * @example\n * ```tsx\n * const tokens = tokenizeMetastring('title=\"My File\" collapsible mode=cli');\n * // Returns: ['title=\"My File\"', 'collapsible', 'mode=cli']\n *\n * const simpleTokens = tokenizeMetastring('collapsible disableCopy');\n * // Returns: ['collapsible', 'disableCopy']\n * ```\n */\nexport function tokenizeMetastring(value: string | undefined): string[] {\n\tconst input = value?.trim() ?? \"\";\n\tconst result: string[] = [];\n\n\tlet currentString = \"\";\n\tlet inQuotes = false;\n\n\tfor (const char of input) {\n\t\tif (char === \" \" && !inQuotes) {\n\t\t\tif (currentString) {\n\t\t\t\tresult.push(currentString);\n\t\t\t\tcurrentString = \"\";\n\t\t\t}\n\t\t} else if (char === '\"') {\n\t\t\tinQuotes = !inQuotes;\n\t\t\tcurrentString += char;\n\t\t} else {\n\t\t\tcurrentString += char;\n\t\t}\n\t}\n\n\tif (currentString) {\n\t\tresult.push(currentString);\n\t}\n\n\treturn result;\n}\n\n/**\n * Type Predicate: checks if the given value is a valid mode.\n * @private\n */\nfunction isMode(input: unknown): input is Mode {\n\treturn modes.includes(input as Mode);\n}\n\n/**\n * Parses a meta JSON object into a Meta object.\n * @private\n */\nfunction parseMetaJson(input: Record<string, unknown>): Meta {\n\tconst {\n\t\tcollapsible = defaultMeta.collapsible,\n\t\tdisableCopy = defaultMeta.disableCopy,\n\t\tindentation = defaultMeta.indentation,\n\t\tmode = defaultMeta.mode,\n\t\ttitle = defaultMeta.title,\n\t} = input;\n\n\treturn {\n\t\tcollapsible:\n\t\t\ttypeof collapsible === \"string\" || typeof collapsible === \"boolean\"\n\t\t\t\t? parseBooleanish(collapsible)\n\t\t\t\t: defaultMeta.collapsible,\n\t\tdisableCopy:\n\t\t\ttypeof disableCopy === \"string\" || typeof disableCopy === \"boolean\"\n\t\t\t\t? parseBooleanish(disableCopy)\n\t\t\t\t: defaultMeta.disableCopy,\n\t\tindentation: isIndentation(indentation)\n\t\t\t? indentation\n\t\t\t: defaultMeta.indentation,\n\t\tmode: isMode(mode) ? mode : defaultMeta.mode,\n\t\ttitle: typeof title === \"string\" ? title.trim() : defaultMeta.title,\n\t};\n}\n"],"mappings":"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","names":["CaretDownIcon","CheckIcon","CopyIcon","FileTextIcon","TerminalIcon","clsx","createContext","forwardRef","useContext","useEffect","useId","useMemo","useRef","useState","assert","escapeHtml","value","escaped","character","Prism","indentations","isIndentation","input","inferIndentation","language","preferredIndentation","isTabIndentedLanguage","isSpaceIndentedLanguage","tabIndentedLanguages","spaceIndentedLanguages","isTabIndentedLanguage","value","isSpaceIndentedLanguage","normalizeIndentation","value","options","indentation","match","supportedLanguages","parseLanguage","value","maybeLanguage","isSupportedLanguage","formatLanguageClassName","language","Fragment","jsx","jsxs","CodeBlockContext","createContext","Root","forwardRef","asChild","className","props","ref","copyText","setCopyText","useState","hasCodeExpander","setHasCodeExpander","isCodeExpanded","setIsCodeExpanded","codeId","setCodeId","context","useMemo","id","old","assert","Component","Slot","cx","Body","Code","_unusedHighlightLines","propIndentation","language","_unusedShowLineNumbers","style","tabIndex","value","useId","registerCodeId","unregisterCodeId","useContext","indentation","inferIndentation","normalizedAndTrimmedValue","normalizeIndentation","highlightedCodeInnerHtml","setHighlightedCodeInnerHtml","escapeHtml","useEffect","grammar","Prism","supportedLanguages","newHighlightedCodeInnerHtml","languageClassName","formatLanguageClassName","clsx","Header","Title","CopyButton","onCopy","onCopyError","onClick","copyToClipboard","useCopyToClipboard","wasCopied","setWasCopied","timeoutHandle","useRef","event","error","Icon","CheckIcon","CopyIcon","ExpanderButton","prev","CaretDownIcon","CodeBlockIconComponent","preset","_svgProp","svg","FileTextIcon","TerminalIcon","TrafficPolicyFileIcon","CodeBlock","fmtCode","strings","values","isTemplateStringsArray","text","minIndent","findMinIndent","line","findMinIndent","value","match","acc","curr","isTemplateStringsArray","strings","modes","defaultMeta","parseMetastring","input","metastring","metaJson","tokenizeMetastring","acc","token","key","value","normalizedValue","normalizeValue","parsed","parseMetaJson","normalizeValue","value","tokenizeMetastring","input","result","currentString","inQuotes","char","isMode","modes","parseMetaJson","collapsible","defaultMeta","disableCopy","indentation","mode","title","parseBooleanish","isIndentation"]}

package/dist/combobox.js

@@ -1,2 +1,2 @@
-import{b as f}from"./chunk-4DVFVPF2.js";import{a as s}from"./chunk-PFXFESEN.js";import*as i from"@ariakit/react";import{Slot as l}from"@radix-ui/react-slot";import{createContext as I,forwardRef as b}from"react";import{jsx as t}from"react/jsx-runtime";var c=({children:o,...e})=>t(i.ComboboxProvider,{...e,children:o});c.displayName="Combobox";var x=b(({"aria-invalid":o,autoComplete:e="list",autoSelect:a="always",className:n,validation:r,...m},d)=>{let p=o!=null&&o!=="false"?"error":typeof r=="function"?r():r;return t(i.Combobox,{"aria-invalid":o??p==="error",autoComplete:e,autoSelect:a,className:s("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","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-[var(--color-blue-50)] autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]",n),"data-validation":p||void 0,ref:d,...m})});x.displayName="ComboboxInput";var C=b(({asChild:o=!1,children:e,className:a,sameWidth:n=!0,unmountOnHide:r=!0,...m},d)=>t(i.ComboboxPopover,{className:s("border-popover bg-popover relative z-50 max-h-96 min-w-[8rem] scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 focus:outline-hidden",a),ref:d,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,sameWidth:n,unmountOnHide:r,...m,children:e}));C.displayName="ComboboxContent";var w=I(void 0),v=b(({asChild:o=!1,children:e,className:a,focusOnHover:n=!0,value:r,...m},d)=>t(w.Provider,{value:r,children:t(i.ComboboxItem,{className:s("cursor-pointer rounded px-2 py-1.5 text-sm flex min-w-0 gap-2 items-center","data-active-item:bg-popover-hover","aria-disabled:opacity-50",a),focusOnHover:n,ref:d,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,value:r,...m,children:e})}));v.displayName="ComboboxItem";var P=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroup,{className:s("",a),ref:r,render:o?({ref:m,...d})=>t(l,{ref:m,...d}):void 0,...n,children:e}));P.displayName="ComboboxGroup";var y=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroupLabel,{className:s("text-muted px-2 py-1 text-xs font-medium",a),ref:r,render:o?({ref:m,...d})=>t(l,{ref:m,...d}):void 0,...n,children:e}));y.displayName="ComboboxGroupLabel";var g=b(({asChild:o=!1,className:e,...a},n)=>t(i.ComboboxItemValue,{className:s("*:data-[user-value]:font-bold flex-1 shrink-0 text-strong font-normal",e),ref:n,render:o?({ref:r,...m})=>t(l,{ref:r,...m}):void 0,...a}));g.displayName="ComboboxItemValue";var h=b(({className:o,...e},a)=>t(f,{ref:a,className:s("-mx-1.25 my-1 w-auto",o),...e}));h.displayName="ComboboxSeparator";var G={Root:c,Content:C,Group:P,GroupLabel:y,Input:x,Item:v,ItemValue:g,Separator:h};export{G as Combobox};
+import{b as f}from"./chunk-YKYEISYH.js";import{a as l}from"./chunk-UNFO4DZV.js";import{a as s}from"./chunk-PFXFESEN.js";import*as i from"@ariakit/react";import{createContext as I,forwardRef as b}from"react";import{jsx as t}from"react/jsx-runtime";var c=({children:o,...e})=>t(i.ComboboxProvider,{...e,children:o});c.displayName="Combobox";var x=b(({"aria-invalid":o,autoComplete:e="list",autoSelect:a="always",className:n,validation:r,...m},d)=>{let p=o!=null&&o!=="false"?"error":typeof r=="function"?r():r;return t(i.Combobox,{"aria-invalid":o??p==="error",autoComplete:e,autoSelect:a,className:s("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","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-[var(--color-blue-50)] autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]",n),"data-validation":p||void 0,ref:d,...m})});x.displayName="ComboboxInput";var C=b(({asChild:o=!1,children:e,className:a,sameWidth:n=!0,unmountOnHide:r=!0,...m},d)=>t(i.ComboboxPopover,{className:s("border-popover bg-popover relative z-50 max-h-96 min-w-[8rem] scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 focus:outline-hidden",a),ref:d,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,sameWidth:n,unmountOnHide:r,...m,children:e}));C.displayName="ComboboxContent";var w=I(void 0),v=b(({asChild:o=!1,children:e,className:a,focusOnHover:n=!0,value:r,...m},d)=>t(w.Provider,{value:r,children:t(i.ComboboxItem,{className:s("cursor-pointer rounded px-2 py-1.5 text-sm flex min-w-0 gap-2 items-center","data-active-item:bg-popover-hover","aria-disabled:opacity-50",a),focusOnHover:n,ref:d,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,value:r,...m,children:e})}));v.displayName="ComboboxItem";var P=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroup,{className:s("",a),ref:r,render:o?({ref:m,...d})=>t(l,{ref:m,...d}):void 0,...n,children:e}));P.displayName="ComboboxGroup";var y=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroupLabel,{className:s("text-muted px-2 py-1 text-xs font-medium",a),ref:r,render:o?({ref:m,...d})=>t(l,{ref:m,...d}):void 0,...n,children:e}));y.displayName="ComboboxGroupLabel";var g=b(({asChild:o=!1,className:e,...a},n)=>t(i.ComboboxItemValue,{className:s("*:data-[user-value]:font-bold flex-1 shrink-0 text-strong font-normal",e),ref:n,render:o?({ref:r,...m})=>t(l,{ref:r,...m}):void 0,...a}));g.displayName="ComboboxItemValue";var h=b(({className:o,...e},a)=>t(f,{ref:a,className:s("-mx-1.25 my-1 w-auto",o),...e}));h.displayName="ComboboxSeparator";var G={Root:c,Content:C,Group:P,GroupLabel:y,Input:x,Item:v,ItemValue:g,Separator:h};export{G as Combobox};
 //# sourceMappingURL=combobox.js.map

package/dist/combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as Primitive from \"@ariakit/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\ttype ElementRef,\n\tcreateContext,\n\tforwardRef,\n} 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\";\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 (\n\t\t<Primitive.ComboboxProvider {...props}>\n\t\t\t{children}\n\t\t</Primitive.ComboboxProvider>\n\t);\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\",\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-[var(--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\"> &\n\tWithAsChild;\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<\n\tComponentRef<typeof Primitive.ComboboxPopover>,\n\tComboboxContentProps\n>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tsameWidth = true,\n\t\t\tunmountOnHide = true,\n\t\t\t...props\n\t\t},\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-[8rem] scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 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\n\t\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t\t: 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\"> &\n\tWithAsChild;\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<\n\tComponentRef<typeof Primitive.ComboboxItem>,\n\tComboboxItemProps\n>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tfocusOnHover = true,\n\t\t\tvalue,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\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 px-2 py-1.5 text-sm flex min-w-0 gap-2 items-center\",\n\t\t\t\t\t\t\"data-active-item:bg-popover-hover\",\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\n\t\t\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t\t\t: 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\"> &\n\tWithAsChild;\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<\n\tComponentRef<typeof Primitive.ComboboxGroup>,\n\tComboboxGroupProps\n>(({ asChild = false, children, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxGroup\n\t\t\tclassName={cx(\"\", className)}\n\t\t\tref={ref}\n\t\t\trender={\n\t\t\t\tasChild\n\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Primitive.ComboboxGroup>\n\t);\n});\nGroup.displayName = \"ComboboxGroup\";\n\ntype ComboboxGroupLabelProps = Omit<\n\tPrimitive.ComboboxGroupLabelProps,\n\t\"render\"\n> &\n\tWithAsChild;\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={\n\t\t\t\tasChild\n\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t: undefined\n\t\t\t}\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<\n\tPrimitive.ComboboxItemValueProps<\"span\">,\n\t\"render\"\n> &\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-bold 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={\n\t\t\t\tasChild\n\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t: undefined\n\t\t\t}\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\tElementRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\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 * <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#api-combobox-root\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#api-combobox-content\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#api-combobox-group\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#api-combobox-group-label\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#api-combobox-input\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#api-combobox-item\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#api-combobox-item-value\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#api-combobox-separator\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":"gFAEA,UAAYA,MAAe,iBAC3B,OAAS,QAAAC,MAAY,uBACrB,OAIC,iBAAAC,EACA,cAAAC,MACM,QAsBL,cAAAC,MAAA,oBAFF,IAAMC,EAAO,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAM,IAEjCH,EAAW,mBAAV,CAA4B,GAAGG,EAC9B,SAAAD,EACF,EAGFD,EAAK,YAAc,WAoBnB,IAAMG,EAAQC,EACb,CACC,CACC,eAAgBC,EAChB,aAAAC,EAAe,OACf,WAAAC,EAAa,SACb,UAAAC,EACA,WAAYC,EACZ,GAAGP,CACJ,EACAQ,IACI,CAEJ,IAAMC,EADYN,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOI,GAAgB,WACtBA,EAAY,EACZA,EAGJ,OACCV,EAAW,WAAV,CACA,eAJkBM,GAAgBM,IAAe,QAKjD,aAAcL,EACd,WAAYC,EACZ,UAAWK,EACV,uCACA,oFACA,+BACA,2BACA,2BACA,yDACA,kHACA,iQACA,iQACA,kPACA,yHACAJ,CACD,EACA,kBAAiBG,GAAc,OAC/B,IAAKD,EACJ,GAAGR,EACL,CAEF,CACD,EACAC,EAAM,YAAc,gBAiBpB,IAAMU,EAAUT,EAIf,CACC,CACC,QAAAU,EAAU,GACV,SAAAb,EACA,UAAAO,EACA,UAAAO,EAAY,GACZ,cAAAC,EAAgB,GAChB,GAAGd,CACJ,EACAQ,IAGCX,EAAW,kBAAV,CACA,UAAWa,EACV,wKACAJ,CACD,EACA,IAAKE,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEJ,UAAWF,EACX,cAAeC,EACd,GAAGd,EAEH,SAAAD,EACF,CAGH,EACAY,EAAQ,YAAc,kBAKtB,IAAMM,EAA2BC,EAAkC,MAAS,EAetEC,EAAOjB,EAIZ,CACC,CACC,QAAAU,EAAU,GACV,SAAAb,EACA,UAAAO,EACA,aAAAc,EAAe,GACf,MAAAC,EACA,GAAGrB,CACJ,EACAQ,IAGCX,EAACoB,EAAyB,SAAzB,CAAkC,MAAOI,EACzC,SAAAxB,EAAW,eAAV,CACA,UAAWa,EACV,6EACA,oCACA,2BACAJ,CACD,EACA,aAAcc,EACd,IAAKZ,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEJ,MAAOM,EACN,GAAGrB,EAEH,SAAAD,EACF,EACD,CAGH,EACAoB,EAAK,YAAc,eAwBnB,IAAMG,EAAQpB,EAGZ,CAAC,CAAE,QAAAU,EAAU,GAAO,SAAAb,EAAU,UAAAO,EAAW,GAAGN,CAAM,EAAGQ,IAErDX,EAAW,gBAAV,CACA,UAAWa,EAAG,GAAIJ,CAAS,EAC3B,IAAKE,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEH,GAAGf,EAEH,SAAAD,EACF,CAED,EACDuB,EAAM,YAAc,gBA2BpB,IAAMC,EAAarB,EAGjB,CAAC,CAAE,QAAAU,EAAU,GAAO,SAAAb,EAAU,UAAAO,EAAW,GAAGN,CAAM,EAAGQ,IAErDX,EAAW,qBAAV,CACA,UAAWa,EAAG,2CAA4CJ,CAAS,EACnE,IAAKE,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEH,GAAGf,EAEH,SAAAD,EACF,CAED,EACDwB,EAAW,YAAc,qBAmCzB,IAAMC,EAAYtB,EAGhB,CAAC,CAAE,QAAAU,EAAU,GAAO,UAAAN,EAAW,GAAGN,CAAM,EAAGQ,IAE3CX,EAAW,oBAAV,CACA,UAAWa,EACV,wEACAJ,CACD,EACA,IAAKE,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEH,GAAGf,EACL,CAED,EACDwB,EAAU,YAAc,oBAoBxB,IAAMC,EAA6BvB,EAGjC,CAAC,CAAE,UAAAI,EAAW,GAAGN,CAAM,EAAGQ,IAC3BX,EAAC6B,EAAA,CACA,IAAKlB,EACL,UAAWE,EAAG,uBAAwBJ,CAAS,EAC9C,GAAGN,EACL,CACA,EACDyB,EAA2B,YAAc,oBAsBzC,IAAME,EAAW,CAiBhB,KAAA7B,EAiBA,QAAAa,EAoBA,MAAAW,EAoBA,WAAAC,EAiBA,MAAAtB,EAkBA,KAAAkB,EAuBA,UAAAK,EAuBA,UAAWC,CACZ","names":["Primitive","Slot","createContext","forwardRef","jsx","Root","children","props","Input","forwardRef","_ariaInvalid","autoComplete","autoSelect","className","_validation","ref","validation","cx","Content","asChild","sameWidth","unmountOnHide","childProps","Slot","ComboboxItemValueContext","createContext","Item","focusOnHover","value","Group","GroupLabel","ItemValue","ComboboxSeparatorComponent","Separator","Combobox"]}
+{"version":3,"sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as Primitive from \"@ariakit/react\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\ttype ElementRef,\n\tcreateContext,\n\tforwardRef,\n} 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 (\n\t\t<Primitive.ComboboxProvider {...props}>\n\t\t\t{children}\n\t\t</Primitive.ComboboxProvider>\n\t);\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\",\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-[var(--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\"> &\n\tWithAsChild;\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<\n\tComponentRef<typeof Primitive.ComboboxPopover>,\n\tComboboxContentProps\n>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tsameWidth = true,\n\t\t\tunmountOnHide = true,\n\t\t\t...props\n\t\t},\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-[8rem] scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 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\n\t\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t\t: 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\"> &\n\tWithAsChild;\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<\n\tComponentRef<typeof Primitive.ComboboxItem>,\n\tComboboxItemProps\n>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tfocusOnHover = true,\n\t\t\tvalue,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\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 px-2 py-1.5 text-sm flex min-w-0 gap-2 items-center\",\n\t\t\t\t\t\t\"data-active-item:bg-popover-hover\",\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\n\t\t\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t\t\t: 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\"> &\n\tWithAsChild;\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<\n\tComponentRef<typeof Primitive.ComboboxGroup>,\n\tComboboxGroupProps\n>(({ asChild = false, children, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxGroup\n\t\t\tclassName={cx(\"\", className)}\n\t\t\tref={ref}\n\t\t\trender={\n\t\t\t\tasChild\n\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Primitive.ComboboxGroup>\n\t);\n});\nGroup.displayName = \"ComboboxGroup\";\n\ntype ComboboxGroupLabelProps = Omit<\n\tPrimitive.ComboboxGroupLabelProps,\n\t\"render\"\n> &\n\tWithAsChild;\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={\n\t\t\t\tasChild\n\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t: undefined\n\t\t\t}\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<\n\tPrimitive.ComboboxItemValueProps<\"span\">,\n\t\"render\"\n> &\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-bold 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={\n\t\t\t\tasChild\n\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t: undefined\n\t\t\t}\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\tElementRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\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 * <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#api-combobox-root\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#api-combobox-content\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#api-combobox-group\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#api-combobox-group-label\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#api-combobox-input\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#api-combobox-item\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#api-combobox-item-value\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#api-combobox-separator\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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","names":["Primitive","createContext","forwardRef","jsx","Root","children","props","Input","forwardRef","_ariaInvalid","autoComplete","autoSelect","className","_validation","ref","validation","cx","Content","asChild","sameWidth","unmountOnHide","childProps","Slot","ComboboxItemValueContext","createContext","Item","focusOnHover","value","Group","GroupLabel","ItemValue","ComboboxSeparatorComponent","Separator","Combobox"]}

package/dist/command.js

@@ -1,2 +1,2 @@
-import{a as r}from"./chunk-GPMVEDRP.js";import{a as c}from"./chunk-JQ5D5YZR.js";import"./chunk-VIKPHWPP.js";import"./chunk-WY3TZBNK.js";import"./chunk-VBNDWNIJ.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-QXNUFNG4.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import"./chunk-NZ6DRFAL.js";import{a as m}from"./chunk-PFXFESEN.js";import{MagnifyingGlassIcon as k}from"@phosphor-icons/react/MagnifyingGlass";import{Command as i,useCommandState as b}from"cmdk";import{forwardRef as n}from"react";import{jsx as a,jsxs as p}from"react/jsx-runtime";var l=n(({className:o,...e},t)=>a(i,{ref:t,"data-slot":"command",className:m("bg-popover flex h-full w-full flex-col overflow-hidden rounded-md",o),...e}));l.displayName="Command";var u=({children:o,className:e,description:t="Search for a command to run...",filter:s,shouldFilter:d,showCloseButton:R=!0,title:N="Command Palette",...P})=>p(r.Root,{...P,children:[p(r.Header,{className:"sr-only absolute",children:[a(r.Title,{children:N}),a(r.Description,{children:t})]}),p(r.Content,{className:m("overflow-hidden p-0 relative",e),children:[a(l,{className:"**:[[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",filter:s,shouldFilter:d,children:o}),R&&a("div",{className:"absolute top-1.5 right-1.5",children:a(r.CloseIconButton,{})})]})]});u.displayName="CommandDialog";var f=n(({className:o,...e},t)=>p("div",{ref:t,"data-slot":"command-input-wrapper",className:"flex h-9 items-center gap-2 border-b border-popover px-3",children:[a(k,{className:"size-4 shrink-0 opacity-50"}),a(i.Input,{"data-slot":"command-input",className:m("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",o),...e})]}));f.displayName="CommandInput";var g=n(({className:o,...e},t)=>a(i.List,{ref:t,"data-slot":"command-list",className:m("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar",o),...e}));g.displayName="CommandList";var C=n(({className:o,...e},t)=>a(i.Empty,{ref:t,"data-slot":"command-empty",className:"py-6 text-center text-sm",...e}));C.displayName="CommandEmpty";var h=n(({className:o,...e},t)=>a(i.Group,{ref:t,"data-slot":"command-group",className:m("**:[[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",o),...e}));h.displayName="CommandGroup";var y=n(({className:o,...e},t)=>a(i.Separator,{ref:t,"data-slot":"command-separator",className:m("dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20 -mx-1 h-px",o),...e}));y.displayName="CommandSeparator";var v=n(({className:o,...e},t)=>a(i.Item,{ref:t,"data-slot":"command-item",className:m("data-[selected=true]:bg-popover-hover [&_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-4",o),...e}));v.displayName="CommandItem";var x=n(({className:o,...e},t)=>a("span",{ref:t,"data-slot":"command-shortcut",className:m("text-muted ml-auto text-xs tracking-widest",o),...e}));x.displayName="CommandShortcut";var D={Root:l,Dialog:u,Input:f,List:g,Empty:C,Group:h,Item:v,Shortcut:x,Separator:y};import{useEffect as w,useState as _}from"react";import{jsx as A,jsxs as G}from"react/jsx-runtime";function I({className:o,...e}){let[t,s]=_("\u2303");w(()=>{s(W())},[]);let d=t==="\u2318"?"Command":"Control";return G(c,{...e,suppressHydrationWarning:!0,className:m(t==="\u2303"&&"font-medium",o),children:[A("span",{className:"sr-only",children:d}),t]})}function S(o){return"userAgentData"in o}function W(){if(typeof navigator>"u")return"\u2303";let o="";return S(navigator)&&(o=navigator.userAgentData.platform??""),o||(o=navigator.platform||navigator.userAgent||""),/mac|iphone|ipad|ipod/i.test(o)?"\u2318":"\u2303"}export{D as Command,I as MetaKey,b as useCommandState};
+import{a as r}from"./chunk-4IX2UWKO.js";import{a as c}from"./chunk-JQ5D5YZR.js";import"./chunk-OE4YWO7O.js";import"./chunk-UKS7NFNC.js";import"./chunk-VBNDWNIJ.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-BRV6XRNS.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import"./chunk-UNFO4DZV.js";import"./chunk-NZ6DRFAL.js";import{a as m}from"./chunk-PFXFESEN.js";import{MagnifyingGlassIcon as k}from"@phosphor-icons/react/MagnifyingGlass";import{Command as i,useCommandState as b}from"cmdk";import{forwardRef as n}from"react";import{jsx as a,jsxs as p}from"react/jsx-runtime";var l=n(({className:o,...e},t)=>a(i,{ref:t,"data-slot":"command",className:m("bg-popover flex h-full w-full flex-col overflow-hidden rounded-md",o),...e}));l.displayName="Command";var u=({children:o,className:e,description:t="Search for a command to run...",filter:s,shouldFilter:d,showCloseButton:R=!0,title:N="Command Palette",...P})=>p(r.Root,{...P,children:[p(r.Header,{className:"sr-only absolute",children:[a(r.Title,{children:N}),a(r.Description,{children:t})]}),p(r.Content,{className:m("overflow-hidden p-0 relative",e),children:[a(l,{className:"**:[[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",filter:s,shouldFilter:d,children:o}),R&&a("div",{className:"absolute top-1.5 right-1.5",children:a(r.CloseIconButton,{})})]})]});u.displayName="CommandDialog";var f=n(({className:o,...e},t)=>p("div",{ref:t,"data-slot":"command-input-wrapper",className:"flex h-9 items-center gap-2 border-b border-popover px-3",children:[a(k,{className:"size-4 shrink-0 opacity-50"}),a(i.Input,{"data-slot":"command-input",className:m("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",o),...e})]}));f.displayName="CommandInput";var g=n(({className:o,...e},t)=>a(i.List,{ref:t,"data-slot":"command-list",className:m("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar",o),...e}));g.displayName="CommandList";var C=n(({className:o,...e},t)=>a(i.Empty,{ref:t,"data-slot":"command-empty",className:"py-6 text-center text-sm",...e}));C.displayName="CommandEmpty";var h=n(({className:o,...e},t)=>a(i.Group,{ref:t,"data-slot":"command-group",className:m("**:[[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",o),...e}));h.displayName="CommandGroup";var y=n(({className:o,...e},t)=>a(i.Separator,{ref:t,"data-slot":"command-separator",className:m("dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20 -mx-1 h-px",o),...e}));y.displayName="CommandSeparator";var v=n(({className:o,...e},t)=>a(i.Item,{ref:t,"data-slot":"command-item",className:m("data-[selected=true]:bg-popover-hover [&_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-4",o),...e}));v.displayName="CommandItem";var x=n(({className:o,...e},t)=>a("span",{ref:t,"data-slot":"command-shortcut",className:m("text-muted ml-auto text-xs tracking-widest",o),...e}));x.displayName="CommandShortcut";var D={Root:l,Dialog:u,Input:f,List:g,Empty:C,Group:h,Item:v,Shortcut:x,Separator:y};import{useEffect as w,useState as _}from"react";import{jsx as A,jsxs as G}from"react/jsx-runtime";function I({className:o,...e}){let[t,s]=_("\u2303");w(()=>{s(W())},[]);let d=t==="\u2318"?"Command":"Control";return G(c,{...e,suppressHydrationWarning:!0,className:m(t==="\u2303"&&"font-medium",o),children:[A("span",{className:"sr-only",children:d}),t]})}function S(o){return"userAgentData"in o}function W(){if(typeof navigator>"u")return"\u2303";let o="";return S(navigator)&&(o=navigator.userAgentData.platform??""),o||(o=navigator.platform||navigator.userAgent||""),/mac|iphone|ipad|ipod/i.test(o)?"\u2318":"\u2303"}export{D as Command,I as MetaKey,b as useCommandState};
 //# sourceMappingURL=command.js.map

package/dist/command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/command/command.tsx","../src/components/command/meta-key.tsx"],"sourcesContent":["\"use client\";\n\nimport { MagnifyingGlassIcon } from \"@phosphor-icons/react/MagnifyingGlass\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\n\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Dialog } from \"../dialog/dialog.js\";\n\ntype CommandRootProps = ComponentPropsWithoutRef<typeof CommandPrimitive>;\n\n/**\n * The root component for the Command. It provides the context for all other command sub-components.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-root\n *\n * @example\n * ```tsx\n * <Command.Root>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Root>\n */\nconst CommandRoot = forwardRef<ComponentRef<\"div\">, CommandRootProps>(\n\t({ className, ...props }, ref) => (\n\t\t<CommandPrimitive\n\t\t\tref={ref}\n\t\t\tdata-slot=\"command\"\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-popover flex h-full w-full flex-col overflow-hidden rounded-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCommandRoot.displayName = \"Command\";\n\n/**\n * The props for the CommandDialog component.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-dialog\n */\ntype CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog.Root> & {\n\t/**\n\t * The title of the command dialog.\n\t */\n\ttitle?: string;\n\t/**\n\t * The description of the command dialog.\n\t */\n\tdescription?: string;\n\t/**\n\t * Class name(s) to apply to the command dialog content.\n\t */\n\tclassName?: string;\n\t/**\n\t * Whether to show the close button.\n\t */\n\tshowCloseButton?: boolean;\n\t/**\n\t * Custom filter function for the command list.\n\t *\n\t * @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering\n\t */\n\tfilter?: CommandRootProps[\"filter\"];\n\t/**\n\t * Whether to enable filtering of command items. When false, disables built-in filtering.\n\t *\n\t * @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering\n\t */\n\tshouldFilter?: CommandRootProps[\"shouldFilter\"];\n};\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the CommandDialog.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-dialog\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandDialog = ({\n\tchildren,\n\tclassName,\n\tdescription = \"Search for a command to run...\",\n\tfilter,\n\tshouldFilter,\n\tshowCloseButton = true,\n\ttitle = \"Command Palette\",\n\t...props\n}: CommandDialogProps) => (\n\t<Dialog.Root {...props}>\n\t\t<Dialog.Header className=\"sr-only absolute\">\n\t\t\t<Dialog.Title>{title}</Dialog.Title>\n\t\t\t<Dialog.Description>{description}</Dialog.Description>\n\t\t</Dialog.Header>\n\t\t<Dialog.Content className={cx(\"overflow-hidden p-0 relative\", className)}>\n\t\t\t<CommandRoot\n\t\t\t\tclassName=\"**:[[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\"\n\t\t\t\tfilter={filter}\n\t\t\t\tshouldFilter={shouldFilter}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</CommandRoot>\n\t\t\t{showCloseButton && (\n\t\t\t\t<div className=\"absolute top-1.5 right-1.5\">\n\t\t\t\t\t<Dialog.CloseIconButton />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Dialog.Content>\n\t</Dialog.Root>\n);\nCommandDialog.displayName = \"CommandDialog\";\n\n/**\n * The input component for the Command. It provides the input for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-input\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandInput = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tdata-slot=\"command-input-wrapper\"\n\t\tclassName=\"flex h-9 items-center gap-2 border-b border-popover px-3\"\n\t>\n\t\t<MagnifyingGlassIcon className=\"size-4 shrink-0 opacity-50\" />\n\t\t<CommandPrimitive.Input\n\t\t\tdata-slot=\"command-input\"\n\t\t\tclassName={cx(\n\t\t\t\t\"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\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = \"CommandInput\";\n\n/**\n * The list component for the Command. It provides the list for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-list\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandList = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tdata-slot=\"command-list\"\n\t\tclassName={cx(\n\t\t\t\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandList.displayName = \"CommandList\";\n\n/**\n * The empty component for the Command. It provides the empty state for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-empty\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandEmpty = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Empty\n\t\tref={ref}\n\t\tdata-slot=\"command-empty\"\n\t\tclassName=\"py-6 text-center text-sm\"\n\t\t{...props}\n\t/>\n));\nCommandEmpty.displayName = \"CommandEmpty\";\n\n/**\n * The group component for the Command. It provides the group for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-group\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandGroup = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tdata-slot=\"command-group\"\n\t\tclassName={cx(\n\t\t\t\"**:[[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\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = \"CommandGroup\";\n\n/**\n * The separator component for the Command. It provides the separator for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-separator\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandSeparator = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Separator\n\t\tref={ref}\n\t\tdata-slot=\"command-separator\"\n\t\tclassName={cx(\n\t\t\t\"dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20 -mx-1 h-px\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = \"CommandSeparator\";\n\n/**\n * The item component for the Command. It provides the item for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-item\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandItem = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tdata-slot=\"command-item\"\n\t\tclassName={cx(\n\t\t\t\"data-[selected=true]:bg-popover-hover [&_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-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = \"CommandItem\";\n\n/**\n * The shortcut component for the Command. It provides the shortcut for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-shortcut\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *         <Command.Shortcut>⌘,</Command.Shortcut>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandShortcut = forwardRef<\n\tComponentRef<\"span\">,\n\tComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n\t<span\n\t\tref={ref}\n\t\tdata-slot=\"command-shortcut\"\n\t\tclassName={cx(\"text-muted ml-auto text-xs tracking-widest\", className)}\n\t\t{...props}\n\t/>\n));\nCommandShortcut.displayName = \"CommandShortcut\";\n\n/**\n * The command component for the Command. It provides the command for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst Command = {\n\t/**\n\t * The root component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Root>\n\t *   <Command.Input placeholder=\"Type a command or search...\" />\n\t *   <Command.List>\n\t *     <Command.Empty>No results found.</Command.Empty>\n\t *   </Command.List>\n\t * </Command.Root>\n\t * ```\n\t */\n\tRoot: CommandRoot,\n\t/**\n\t * The dialog component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-dialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog>\n\t *   <Command.Input placeholder=\"Type a command or search...\" />\n\t *   <Command.List>\n\t *     <Command.Empty>No results found.</Command.Empty>\n\t *   </Command.List>\n\t * </Command.Dialog>\n\t * ```\n\t */\n\tDialog: CommandDialog,\n\t/**\n\t * The input component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Input placeholder=\"Type a command or search...\" />\n\t * ```\n\t */\n\tInput: CommandInput,\n\t/**\n\t * The list component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-list\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.List>\n\t *   <Command.Empty>No results found.</Command.Empty>\n\t * </Command.List>\n\t */\n\tList: CommandList,\n\t/**\n\t * The empty component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Empty>No results found.</Command.Empty>\n\t * ```\n\t */\n\tEmpty: CommandEmpty,\n\t/**\n\t * The group component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Group heading=\"Suggestions\">\n\t *   <Command.Item>\n\t *     Calendar\n\t *   </Command.Item>\n\t * </Command.Group>\n\t * ```\n\t */\n\tGroup: CommandGroup,\n\t/**\n\t * The item component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Item>\n\t *   Calendar\n\t * </Command.Item>\n\t * ```\n\t */\n\tItem: CommandItem,\n\t/**\n\t * The shortcut component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-shortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Shortcut>⌘,</Command.Shortcut>\n\t * ```\n\t */\n\tShortcut: CommandShortcut,\n\t/**\n\t * The seprator component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-separator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Separator />\n\t * ```\n\t */\n\tSeparator: CommandSeparator,\n} as const;\n\nexport {\n\t//,\n\tCommand,\n\tuseCommandState,\n};\n","import { type ComponentProps, useEffect, useState } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Kbd } from \"../kbd/kbd.js\";\n\ntype Props = Omit<ComponentProps<\"kbd\">, \"children\">;\n\ntype Mod = \"⌘\" | \"⌃\";\n\n/**\n * Renders the platform-appropriate meta key kbd (⌘ or ⌃).\n *\n * - Initializes to `\"⌃\"` to avoid SSR mismatch.\n * - Updates on mount using `detectMetaKey()`.\n */\nfunction MetaKey({ className, ...props }: Props) {\n\tconst [glyph, setGlyph] = useState<Mod>(\"⌃\");\n\n\tuseEffect(() => {\n\t\tsetGlyph(detectMetaKey());\n\t}, []);\n\n\tconst label = glyph === \"⌘\" ? \"Command\" : \"Control\";\n\n\treturn (\n\t\t<Kbd\n\t\t\t{...props}\n\t\t\tsuppressHydrationWarning\n\t\t\tclassName={cx(glyph === \"⌃\" && \"font-medium\", className)}\n\t\t>\n\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t{glyph}\n\t\t</Kbd>\n\t);\n}\n\nexport {\n\t//,\n\tMetaKey,\n};\n\n/**\n * Type guard for `navigator.userAgentData` existence.\n * Useful for newer UA hints where `platform` may be available.\n *\n * @param navigator The global `navigator`\n * @returns `true` if UA Data hints exist; narrows `navigator` accordingly.\n */\nfunction hasUAData(\n\tnavigator: Navigator,\n): navigator is Navigator & { userAgentData: { platform?: string } } {\n\treturn \"userAgentData\" in navigator;\n}\n\n/**\n * Detects the appropriate meta key label for the current platform.\n *\n * SSR-safe: returns `\"⌃\"` when `navigator` is not available.\n *\n * @returns `\"⌘\"` for Apple platforms; otherwise `\"⌃\"`.\n */\nfunction detectMetaKey(): Mod {\n\tif (typeof navigator === \"undefined\") {\n\t\treturn \"⌃\"; // SSR default\n\t}\n\n\tlet platform = \"\";\n\n\tif (hasUAData(navigator)) {\n\t\tplatform = navigator.userAgentData.platform ?? \"\";\n\t}\n\n\tif (!platform) {\n\t\tplatform = navigator.platform || navigator.userAgent || \"\";\n\t}\n\n\tconst isApple = /mac|iphone|ipad|ipod/i.test(platform);\n\n\tif (isApple) {\n\t\treturn \"⌘\";\n\t}\n\n\treturn \"⌃\";\n}\n"],"mappings":"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","names":["MagnifyingGlassIcon","CommandPrimitive","useCommandState","forwardRef","jsx","jsxs","CommandRoot","forwardRef","className","props","ref","CommandPrimitive","cx","CommandDialog","children","description","filter","shouldFilter","showCloseButton","title","Dialog","CommandInput","MagnifyingGlassIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut","Command","useEffect","useState","jsx","jsxs","MetaKey","className","props","glyph","setGlyph","useState","useEffect","detectMetaKey","label","Kbd","cx","hasUAData","navigator","detectMetaKey","platform"]}
+{"version":3,"sources":["../src/components/command/command.tsx","../src/components/command/meta-key.tsx"],"sourcesContent":["\"use client\";\n\nimport { MagnifyingGlassIcon } from \"@phosphor-icons/react/MagnifyingGlass\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\n\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Dialog } from \"../dialog/dialog.js\";\n\ntype CommandRootProps = ComponentPropsWithoutRef<typeof CommandPrimitive>;\n\n/**\n * The root component for the Command. It provides the context for all other command sub-components.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-root\n *\n * @example\n * ```tsx\n * <Command.Root>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Root>\n */\nconst CommandRoot = forwardRef<ComponentRef<\"div\">, CommandRootProps>(\n\t({ className, ...props }, ref) => (\n\t\t<CommandPrimitive\n\t\t\tref={ref}\n\t\t\tdata-slot=\"command\"\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-popover flex h-full w-full flex-col overflow-hidden rounded-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCommandRoot.displayName = \"Command\";\n\n/**\n * The props for the CommandDialog component.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-dialog\n */\ntype CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog.Root> & {\n\t/**\n\t * The title of the command dialog.\n\t */\n\ttitle?: string;\n\t/**\n\t * The description of the command dialog.\n\t */\n\tdescription?: string;\n\t/**\n\t * Class name(s) to apply to the command dialog content.\n\t */\n\tclassName?: string;\n\t/**\n\t * Whether to show the close button.\n\t */\n\tshowCloseButton?: boolean;\n\t/**\n\t * Custom filter function for the command list.\n\t *\n\t * @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering\n\t */\n\tfilter?: CommandRootProps[\"filter\"];\n\t/**\n\t * Whether to enable filtering of command items. When false, disables built-in filtering.\n\t *\n\t * @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering\n\t */\n\tshouldFilter?: CommandRootProps[\"shouldFilter\"];\n};\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the CommandDialog.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-dialog\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandDialog = ({\n\tchildren,\n\tclassName,\n\tdescription = \"Search for a command to run...\",\n\tfilter,\n\tshouldFilter,\n\tshowCloseButton = true,\n\ttitle = \"Command Palette\",\n\t...props\n}: CommandDialogProps) => (\n\t<Dialog.Root {...props}>\n\t\t<Dialog.Header className=\"sr-only absolute\">\n\t\t\t<Dialog.Title>{title}</Dialog.Title>\n\t\t\t<Dialog.Description>{description}</Dialog.Description>\n\t\t</Dialog.Header>\n\t\t<Dialog.Content className={cx(\"overflow-hidden p-0 relative\", className)}>\n\t\t\t<CommandRoot\n\t\t\t\tclassName=\"**:[[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\"\n\t\t\t\tfilter={filter}\n\t\t\t\tshouldFilter={shouldFilter}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</CommandRoot>\n\t\t\t{showCloseButton && (\n\t\t\t\t<div className=\"absolute top-1.5 right-1.5\">\n\t\t\t\t\t<Dialog.CloseIconButton />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Dialog.Content>\n\t</Dialog.Root>\n);\nCommandDialog.displayName = \"CommandDialog\";\n\n/**\n * The input component for the Command. It provides the input for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-input\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandInput = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tdata-slot=\"command-input-wrapper\"\n\t\tclassName=\"flex h-9 items-center gap-2 border-b border-popover px-3\"\n\t>\n\t\t<MagnifyingGlassIcon className=\"size-4 shrink-0 opacity-50\" />\n\t\t<CommandPrimitive.Input\n\t\t\tdata-slot=\"command-input\"\n\t\t\tclassName={cx(\n\t\t\t\t\"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\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = \"CommandInput\";\n\n/**\n * The list component for the Command. It provides the list for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-list\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandList = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tdata-slot=\"command-list\"\n\t\tclassName={cx(\n\t\t\t\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandList.displayName = \"CommandList\";\n\n/**\n * The empty component for the Command. It provides the empty state for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-empty\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandEmpty = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Empty\n\t\tref={ref}\n\t\tdata-slot=\"command-empty\"\n\t\tclassName=\"py-6 text-center text-sm\"\n\t\t{...props}\n\t/>\n));\nCommandEmpty.displayName = \"CommandEmpty\";\n\n/**\n * The group component for the Command. It provides the group for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-group\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandGroup = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tdata-slot=\"command-group\"\n\t\tclassName={cx(\n\t\t\t\"**:[[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\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = \"CommandGroup\";\n\n/**\n * The separator component for the Command. It provides the separator for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-separator\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandSeparator = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Separator\n\t\tref={ref}\n\t\tdata-slot=\"command-separator\"\n\t\tclassName={cx(\n\t\t\t\"dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20 -mx-1 h-px\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = \"CommandSeparator\";\n\n/**\n * The item component for the Command. It provides the item for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-item\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandItem = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tdata-slot=\"command-item\"\n\t\tclassName={cx(\n\t\t\t\"data-[selected=true]:bg-popover-hover [&_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-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = \"CommandItem\";\n\n/**\n * The shortcut component for the Command. It provides the shortcut for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command-shortcut\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *         <Command.Shortcut>⌘,</Command.Shortcut>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandShortcut = forwardRef<\n\tComponentRef<\"span\">,\n\tComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n\t<span\n\t\tref={ref}\n\t\tdata-slot=\"command-shortcut\"\n\t\tclassName={cx(\"text-muted ml-auto text-xs tracking-widest\", className)}\n\t\t{...props}\n\t/>\n));\nCommandShortcut.displayName = \"CommandShortcut\";\n\n/**\n * The command component for the Command. It provides the command for the command palette.\n *\n * @see https://mantle.ngrok.com/components/preview/command#api-command\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst Command = {\n\t/**\n\t * The root component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Root>\n\t *   <Command.Input placeholder=\"Type a command or search...\" />\n\t *   <Command.List>\n\t *     <Command.Empty>No results found.</Command.Empty>\n\t *   </Command.List>\n\t * </Command.Root>\n\t * ```\n\t */\n\tRoot: CommandRoot,\n\t/**\n\t * The dialog component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-dialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog>\n\t *   <Command.Input placeholder=\"Type a command or search...\" />\n\t *   <Command.List>\n\t *     <Command.Empty>No results found.</Command.Empty>\n\t *   </Command.List>\n\t * </Command.Dialog>\n\t * ```\n\t */\n\tDialog: CommandDialog,\n\t/**\n\t * The input component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Input placeholder=\"Type a command or search...\" />\n\t * ```\n\t */\n\tInput: CommandInput,\n\t/**\n\t * The list component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-list\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.List>\n\t *   <Command.Empty>No results found.</Command.Empty>\n\t * </Command.List>\n\t */\n\tList: CommandList,\n\t/**\n\t * The empty component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Empty>No results found.</Command.Empty>\n\t * ```\n\t */\n\tEmpty: CommandEmpty,\n\t/**\n\t * The group component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Group heading=\"Suggestions\">\n\t *   <Command.Item>\n\t *     Calendar\n\t *   </Command.Item>\n\t * </Command.Group>\n\t * ```\n\t */\n\tGroup: CommandGroup,\n\t/**\n\t * The item component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Item>\n\t *   Calendar\n\t * </Command.Item>\n\t * ```\n\t */\n\tItem: CommandItem,\n\t/**\n\t * The shortcut component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-shortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Shortcut>⌘,</Command.Shortcut>\n\t * ```\n\t */\n\tShortcut: CommandShortcut,\n\t/**\n\t * The seprator component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/preview/command#api-command-separator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Separator />\n\t * ```\n\t */\n\tSeparator: CommandSeparator,\n} as const;\n\nexport {\n\t//,\n\tCommand,\n\tuseCommandState,\n};\n","import { type ComponentProps, useEffect, useState } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Kbd } from \"../kbd/kbd.js\";\n\ntype Props = Omit<ComponentProps<\"kbd\">, \"children\">;\n\ntype Mod = \"⌘\" | \"⌃\";\n\n/**\n * Renders the platform-appropriate meta key kbd (⌘ or ⌃).\n *\n * - Initializes to `\"⌃\"` to avoid SSR mismatch.\n * - Updates on mount using `detectMetaKey()`.\n */\nfunction MetaKey({ className, ...props }: Props) {\n\tconst [glyph, setGlyph] = useState<Mod>(\"⌃\");\n\n\tuseEffect(() => {\n\t\tsetGlyph(detectMetaKey());\n\t}, []);\n\n\tconst label = glyph === \"⌘\" ? \"Command\" : \"Control\";\n\n\treturn (\n\t\t<Kbd\n\t\t\t{...props}\n\t\t\tsuppressHydrationWarning\n\t\t\tclassName={cx(glyph === \"⌃\" && \"font-medium\", className)}\n\t\t>\n\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t{glyph}\n\t\t</Kbd>\n\t);\n}\n\nexport {\n\t//,\n\tMetaKey,\n};\n\n/**\n * Type guard for `navigator.userAgentData` existence.\n * Useful for newer UA hints where `platform` may be available.\n *\n * @param navigator The global `navigator`\n * @returns `true` if UA Data hints exist; narrows `navigator` accordingly.\n */\nfunction hasUAData(\n\tnavigator: Navigator,\n): navigator is Navigator & { userAgentData: { platform?: string } } {\n\treturn \"userAgentData\" in navigator;\n}\n\n/**\n * Detects the appropriate meta key label for the current platform.\n *\n * SSR-safe: returns `\"⌃\"` when `navigator` is not available.\n *\n * @returns `\"⌘\"` for Apple platforms; otherwise `\"⌃\"`.\n */\nfunction detectMetaKey(): Mod {\n\tif (typeof navigator === \"undefined\") {\n\t\treturn \"⌃\"; // SSR default\n\t}\n\n\tlet platform = \"\";\n\n\tif (hasUAData(navigator)) {\n\t\tplatform = navigator.userAgentData.platform ?? \"\";\n\t}\n\n\tif (!platform) {\n\t\tplatform = navigator.platform || navigator.userAgent || \"\";\n\t}\n\n\tconst isApple = /mac|iphone|ipad|ipod/i.test(platform);\n\n\tif (isApple) {\n\t\treturn \"⌘\";\n\t}\n\n\treturn \"⌃\";\n}\n"],"mappings":"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","names":["MagnifyingGlassIcon","CommandPrimitive","useCommandState","forwardRef","jsx","jsxs","CommandRoot","forwardRef","className","props","ref","CommandPrimitive","cx","CommandDialog","children","description","filter","shouldFilter","showCloseButton","title","Dialog","CommandInput","MagnifyingGlassIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut","Command","useEffect","useState","jsx","jsxs","MetaKey","className","props","glyph","setGlyph","useState","useEffect","detectMetaKey","label","Kbd","cx","hasUAData","navigator","detectMetaKey","platform"]}