@ngrok/mantle 0.76.3 → 0.76.5

package/dist/code-block.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-block.js","names":["Root","RadixTabsRoot","MantleIcon","RadixTabsList","RadixTabsTrigger","RadixTabsContent"],"sources":["../src/components/code-block/escape-html.ts","../src/components/code-block/fold-runtime.ts","../src/components/code-block/code-block.tsx","../src/components/code-block/has-more-than-n-lines.ts"],"sourcesContent":["/**\n * Escapes special HTML characters in a string to their corresponding\n * HTML entities, preventing issues like unintended HTML rendering or\n * cross-site scripting (XSS) when injecting raw strings into the DOM\n * using `dangerouslySetInnerHTML`.\n *\n * Characters escaped:\n * - \\& => `&amp;`;\n * - \\< => `&lt;`;\n * - \\> => `&gt;`;\n * - \\\" => `&quot;`;\n * - \\' => `&#39;`;\n *\n * @param {string} value The raw string to be escaped.\n *\n * @example\n * escapeHtml('<div>Hello & \"world\"</div>');\n * // Returns: '&lt;div&gt;Hello &amp; &quot;world&quot;&lt;/div&gt;'\n */\nfunction escapeHtml(value: string): string {\n\tlet firstSpecialCharIndex = -1;\n\tfor (let i = 0; i < value.length; i++) {\n\t\tconst character = value[i];\n\t\tif (\n\t\t\tcharacter === \"&\" ||\n\t\t\tcharacter === \"<\" ||\n\t\t\tcharacter === \">\" ||\n\t\t\tcharacter === '\"' ||\n\t\t\tcharacter === \"'\"\n\t\t) {\n\t\t\tfirstSpecialCharIndex = i;\n\t\t\tbreak;\n\t\t}\n\t}\n\n\tif (firstSpecialCharIndex === -1) {\n\t\treturn value;\n\t}\n\n\tlet escaped = value.slice(0, firstSpecialCharIndex);\n\tfor (let i = firstSpecialCharIndex; i < value.length; i++) {\n\t\tconst character = value[i];\n\t\tswitch (character) {\n\t\t\tcase \"&\":\n\t\t\t\tescaped += \"&amp;\";\n\t\t\t\tbreak;\n\t\t\tcase \"<\":\n\t\t\t\tescaped += \"&lt;\";\n\t\t\t\tbreak;\n\t\t\tcase \">\":\n\t\t\t\tescaped += \"&gt;\";\n\t\t\t\tbreak;\n\t\t\tcase '\"':\n\t\t\t\tescaped += \"&quot;\";\n\t\t\t\tbreak;\n\t\t\tcase \"'\":\n\t\t\t\tescaped += \"&#39;\";\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tescaped += character;\n\t\t}\n\t}\n\treturn escaped;\n}\n\nexport {\n\t//,\n\tescapeHtml,\n};\n","/**\n * Runtime fold/unfold behavior for `CodeBlock.Code` lives in this module so it\n * can be unit-tested independently of React. The implementation deliberately\n * keeps all interaction state in the DOM and uses a single delegated event\n * handler per `<pre>` — no per-line listeners, no React re-renders on toggle.\n *\n * Why event delegation: GitHub's diff-line performance work showed that\n * attaching listeners per line scales poorly past ~1000 rows. A single\n * top-level listener with attribute-based dispatch keeps memory overhead\n * constant and avoids React reconciliation entirely.\n *\n * @see https://github.blog/engineering/architecture-optimization/the-uphill-climb-of-making-diff-lines-performant/\n */\n\n/**\n * Cached per-`<code>` fold geometry. Built lazily on first interaction and\n * invalidated by `clearRegionLinesCache` whenever the inner HTML is replaced.\n */\ntype FoldGeometry = {\n\t/** Map from fold-region ID → the line elements that belong to that region. */\n\tregionToLines: Map<string, HTMLElement[]>;\n\t/**\n\t * Per-line cache of parent fold-region IDs as a `Set`. Pre-parsed at\n\t * map-build time so toggles can avoid re-splitting `data-fold-regions`\n\t * on every affected line every click — meaningful when 1000+ lines belong\n\t * to the toggled region.\n\t */\n\tlineToRegions: WeakMap<HTMLElement, Set<string>>;\n};\n\nconst FOLD_GEOMETRY_CACHE = new WeakMap<Element, FoldGeometry>();\n\n/**\n * Splits a space-separated string into a `Set`, dropping empty entries. Used\n * to parse `data-fold-regions` and `data-folded-regions` attribute values.\n */\nfunction parseSpaceSeparated(value: string | null | undefined): Set<string> {\n\tconst set = new Set<string>();\n\tif (value == null || value === \"\") {\n\t\treturn set;\n\t}\n\tfor (const part of value.split(\" \")) {\n\t\tif (part !== \"\") {\n\t\t\tset.add(part);\n\t\t}\n\t}\n\treturn set;\n}\n\n/**\n * Builds (and memoizes per `<code>` element) the {@link FoldGeometry} index.\n * Lazy on first interaction so initial render cost stays at zero.\n *\n * If a cached geometry exists but its first cached line element is no longer\n * connected to the DOM, the cache is treated as stale (typically because\n * something replaced the `<code>`'s `innerHTML` without going through the\n * `clearRegionLinesCache` path) and rebuilt from the current children.\n */\nfunction getFoldGeometry(codeElement: Element): FoldGeometry {\n\tconst cached = FOLD_GEOMETRY_CACHE.get(codeElement);\n\tif (cached != null && isGeometryConnected(cached)) {\n\t\treturn cached;\n\t}\n\tconst regionToLines = new Map<string, HTMLElement[]>();\n\tconst lineToRegions = new WeakMap<HTMLElement, Set<string>>();\n\tconst lineElements = codeElement.querySelectorAll(\"[data-fold-regions]\");\n\tfor (let index = 0; index < lineElements.length; index += 1) {\n\t\tconst lineElement = lineElements[index];\n\t\tif (!(lineElement instanceof HTMLElement)) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst regions = parseSpaceSeparated(lineElement.dataset.foldRegions);\n\t\tif (regions.size === 0) {\n\t\t\tcontinue;\n\t\t}\n\t\tlineToRegions.set(lineElement, regions);\n\t\tfor (const region of regions) {\n\t\t\tlet lines = regionToLines.get(region);\n\t\t\tif (lines == null) {\n\t\t\t\tlines = [];\n\t\t\t\tregionToLines.set(region, lines);\n\t\t\t}\n\t\t\tlines.push(lineElement);\n\t\t}\n\t}\n\tconst geometry: FoldGeometry = { regionToLines, lineToRegions };\n\tFOLD_GEOMETRY_CACHE.set(codeElement, geometry);\n\treturn geometry;\n}\n\n/** Resets the per-element cache. Called when the code block re-renders new content. */\nfunction clearRegionLinesCache(codeElement: Element): void {\n\tFOLD_GEOMETRY_CACHE.delete(codeElement);\n}\n\n/** Clears per-code-element runtime state after the code element's HTML is replaced. */\nfunction resetFoldState(codeElement: Element): void {\n\tclearRegionLinesCache(codeElement);\n\tcodeElement.removeAttribute(\"data-folded-regions\");\n}\n\n/**\n * Cheap liveness probe: checks whether the first cached line is still\n * attached to the document. If `innerHTML` was replaced under us, the cached\n * line elements get detached and {@link Element.isConnected} flips to false.\n * Inspecting one entry is enough — they all detach together when the parent's\n * `innerHTML` is reset.\n */\nfunction isGeometryConnected(geometry: FoldGeometry): boolean {\n\tfor (const lines of geometry.regionToLines.values()) {\n\t\tif (lines.length === 0) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst sample = lines[0];\n\t\tif (sample == null) {\n\t\t\tcontinue;\n\t\t}\n\t\treturn sample.isConnected;\n\t}\n\t// Empty geometry — treat as still valid; rebuilding wouldn't add anything.\n\treturn true;\n}\n\n/**\n * Reconciles a single line's hidden state with the currently-folded region\n * set. A line is hidden if any of its parent regions are folded.\n */\nfunction syncLineHidden(\n\tline: HTMLElement,\n\tfoldedRegions: Set<string>,\n\tlineRegions: Set<string>,\n): void {\n\tlet isHidden = false;\n\tfor (const region of lineRegions) {\n\t\tif (foldedRegions.has(region)) {\n\t\t\tisHidden = true;\n\t\t\tbreak;\n\t\t}\n\t}\n\tif (isHidden) {\n\t\tline.dataset.foldHidden = \"true\";\n\t} else {\n\t\tdelete line.dataset.foldHidden;\n\t}\n}\n\n/**\n * Toggles the fold region addressed by `button` and synchronizes only the\n * affected lines. The set of folded regions is persisted on the `<code>`\n * element via `data-folded-regions`, keeping the source of truth in the DOM.\n *\n * Returns `true` if a toggle occurred (button was a valid fold toggle), so\n * callers can avoid follow-up work for unrelated clicks.\n */\nfunction toggleFoldFromButton(button: HTMLButtonElement): boolean {\n\tconst regionId = button.dataset.foldLine;\n\tif (regionId == null || regionId === \"\") {\n\t\treturn false;\n\t}\n\tconst codeElement = button.closest(\"[data-slot='code-block-code']\")?.querySelector(\"code\");\n\tif (codeElement == null) {\n\t\treturn false;\n\t}\n\n\tconst foldedRegions = parseSpaceSeparated(codeElement.getAttribute(\"data-folded-regions\"));\n\tconst isCollapsed = foldedRegions.has(regionId);\n\tconst willCollapse = !isCollapsed;\n\n\tif (willCollapse) {\n\t\tfoldedRegions.add(regionId);\n\t} else {\n\t\tfoldedRegions.delete(regionId);\n\t}\n\n\tif (foldedRegions.size === 0) {\n\t\tcodeElement.removeAttribute(\"data-folded-regions\");\n\t} else {\n\t\tcodeElement.setAttribute(\"data-folded-regions\", [...foldedRegions].join(\" \"));\n\t}\n\n\tbutton.setAttribute(\"aria-expanded\", willCollapse ? \"false\" : \"true\");\n\n\tconst { regionToLines, lineToRegions } = getFoldGeometry(codeElement);\n\tconst lines = regionToLines.get(regionId);\n\tif (lines != null) {\n\t\tfor (const line of lines) {\n\t\t\tconst lineRegions = lineToRegions.get(line);\n\t\t\tif (lineRegions != null) {\n\t\t\t\tsyncLineHidden(line, foldedRegions, lineRegions);\n\t\t\t}\n\t\t}\n\t}\n\n\treturn true;\n}\n\n/**\n * Attaches a single delegated `click` listener to the given `<pre>` element.\n * Returns a teardown function suitable for `useEffect` cleanup.\n *\n * The handler is a no-op when the click does not land on a fold toggle, so it\n * is safe to attach unconditionally (e.g. for non-foldable code blocks).\n */\nfunction attachFoldHandler(preElement: HTMLElement): () => void {\n\tconst handleClick = (event: Event) => {\n\t\tconst target = event.target;\n\t\tif (!(target instanceof Element)) {\n\t\t\treturn;\n\t\t}\n\t\tconst button = target.closest(\".mantle-code-fold-toggle\");\n\t\tif (!(button instanceof HTMLButtonElement)) {\n\t\t\treturn;\n\t\t}\n\t\ttoggleFoldFromButton(button);\n\t};\n\n\tpreElement.addEventListener(\"click\", handleClick);\n\treturn () => {\n\t\tpreElement.removeEventListener(\"click\", handleClick);\n\t};\n}\n\nexport {\n\tattachFoldHandler,\n\tclearRegionLinesCache,\n\tgetFoldGeometry,\n\tresetFoldState,\n\ttoggleFoldFromButton,\n};\n","\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport { CopyIcon } from \"@phosphor-icons/react/Copy\";\nimport { FileTextIcon } from \"@phosphor-icons/react/FileText\";\nimport { TerminalIcon } from \"@phosphor-icons/react/Terminal\";\nimport type {\n\tComponentProps,\n\tComponentRef,\n\tDispatch,\n\tHTMLAttributes,\n\tReactNode,\n\tSetStateAction,\n} from \"react\";\nimport {\n\tcreateContext,\n\tforwardRef,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseId,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport {\n\tContent as RadixTabsContent,\n\tList as RadixTabsList,\n\tRoot as RadixTabsRoot,\n\tTrigger as RadixTabsTrigger,\n} from \"@radix-ui/react-tabs\";\nimport assert from \"tiny-invariant\";\nimport { useCopyToClipboard } from \"../../hooks/use-copy-to-clipboard.js\";\nimport type { SelfClosingWithAsChild, WithAsChild } from \"../../types/as-child.js\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon as MantleIcon } from \"../icon/icon.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { TrafficPolicyFileIcon } from \"../icons/traffic-policy-file.js\";\nimport { IconButton } from \"../button/icon-button.js\";\nimport { Slot } from \"../slot/index.js\";\nimport { escapeHtml } from \"./escape-html.js\";\nimport { attachFoldHandler, resetFoldState } from \"./fold-runtime.js\";\nimport type { Mode } from \"./resolve-pre-rendered-props.js\";\nimport type { MantleCodeBlockValue } from \"./mantle-code.js\";\n\ntype CodeBlockContextType = {\n\tcodeId: string | undefined;\n\tcopyTextRef: { current: string };\n\thasCodeExpander: boolean;\n\tisCodeExpanded: boolean;\n\tregisterCodeId: (id: string) => void;\n\tsetHasCodeExpander: (value: boolean) => void;\n\tsetIsCodeExpanded: Dispatch<SetStateAction<boolean>>;\n\tunregisterCodeId: (id: string) => void;\n};\n\nconst CodeBlockContext = createContext<CodeBlockContextType | null>(null);\n\n/** Returns the nearest `CodeBlock` context, throwing if called outside a `CodeBlock.Root`. */\nfunction useCodeBlockContext(): CodeBlockContextType {\n\tconst context = useContext(CodeBlockContext);\n\tassert(context != null, \"CodeBlock subcomponents must be rendered within a <CodeBlock.Root>.\");\n\treturn context;\n}\n\ntype CodeBlockRootProps = Omit<ComponentProps<\"div\">, \"align\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The default active tab value (uncontrolled).\n\t\t * Only relevant when using `CodeBlock.TabList` / `CodeBlock.TabContent`.\n\t\t */\n\t\tdefaultTab?: string;\n\t\t/**\n\t\t * The controlled active tab value.\n\t\t * Only relevant when using `CodeBlock.TabList` / `CodeBlock.TabContent`.\n\t\t */\n\t\tactiveTab?: string;\n\t\t/**\n\t\t * Callback fired when the active tab changes.\n\t\t * Only relevant when using `CodeBlock.TabList` / `CodeBlock.TabContent`.\n\t\t */\n\t\tonActiveTabChange?: (value: string) => void;\n\t};\n\n/**\n * Shiki-powered code blocks with build-time syntax highlighting and zero browser bundle.\n * This is the root component for all CodeBlock components.\n *\n * For tabbed code blocks, pass `defaultTab` (uncontrolled) or `activeTab` / `onActiveTabChange`\n * (controlled) to enable tab switching with `CodeBlock.TabList` and `CodeBlock.TabContent`.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, CodeBlockRootProps>(\n\t({ asChild = false, className, defaultTab, activeTab, onActiveTabChange, ...props }, ref) => {\n\t\tconst copyTextRef = useRef(\"\");\n\t\tconst [hasCodeExpander, setHasCodeExpander] = useState(false);\n\t\tconst [isCodeExpanded, setIsCodeExpanded] = useState(false);\n\t\tconst [codeId, setCodeId] = useState<string | undefined>(undefined);\n\n\t\tconst registerCodeId = useCallback((id: string) => {\n\t\t\tsetCodeId((old) => {\n\t\t\t\tassert(old == null, \"You can only render a single CodeBlock.Code within a CodeBlock.\");\n\t\t\t\treturn id;\n\t\t\t});\n\t\t}, []);\n\n\t\tconst unregisterCodeId = useCallback((id: string) => {\n\t\t\tsetCodeId((old) => {\n\t\t\t\tassert(old === id, \"You can only render a single CodeBlock.Code within a CodeBlock.\");\n\t\t\t\treturn undefined;\n\t\t\t});\n\t\t}, []);\n\n\t\tconst context: CodeBlockContextType = useMemo(\n\t\t\t() =>\n\t\t\t\t({\n\t\t\t\t\tcodeId,\n\t\t\t\t\tcopyTextRef,\n\t\t\t\t\thasCodeExpander,\n\t\t\t\t\tisCodeExpanded,\n\t\t\t\t\tregisterCodeId,\n\t\t\t\t\tsetHasCodeExpander,\n\t\t\t\t\tsetIsCodeExpanded,\n\t\t\t\t\tunregisterCodeId,\n\t\t\t\t}) as const,\n\t\t\t[codeId, hasCodeExpander, isCodeExpanded, registerCodeId, unregisterCodeId],\n\t\t);\n\n\t\tconst hasTabs = defaultTab != null || activeTab != null;\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\tconst tree = (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"code-block\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-mono w-full overflow-hidden rounded-md border border-gray-300 bg-card font-mono\",\n\t\t\t\t\t\"[&_svg]:shrink-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\n\t\treturn (\n\t\t\t<CodeBlockContext.Provider value={context}>\n\t\t\t\t{hasTabs ? (\n\t\t\t\t\t<RadixTabsRoot\n\t\t\t\t\t\tasChild\n\t\t\t\t\t\tdefaultValue={defaultTab}\n\t\t\t\t\t\tvalue={activeTab}\n\t\t\t\t\t\tonValueChange={onActiveTabChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{tree}\n\t\t\t\t\t</RadixTabsRoot>\n\t\t\t\t) : (\n\t\t\t\t\ttree\n\t\t\t\t)}\n\t\t\t</CodeBlockContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"CodeBlock\";\n\n/**\n * The body of the `CodeBlock`. This is where `CodeBlock.Code` and\n * the optional `CodeBlock.CopyButton` are rendered.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"code-block-body\"\n\t\t\t\tclassName={cx(\"relative\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nBody.displayName = \"CodeBlockBody\";\n\n/**\n * Matches `SHIKI_VAL_<index>` placeholders injected by the Vite plugin for\n * interpolated template expressions. Hoisted to module scope to avoid\n * re-creating the regex on every substitution call.\n */\nconst LEGACY_SHIKI_VAL_PATTERN = /SHIKI_VAL_(\\d+)/g;\n\n/** Escapes special characters in a string for use in a `RegExp` constructor. */\nfunction escapeForRegExp(value: string): string {\n\treturn value.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\n\nconst maxPreValPatternCacheSize = 500;\nconst preValPatternCache = new Map<string, RegExp>();\n\n/**\n * Returns the cached `RegExp` for the given `preValToken`, falling back to the\n * legacy `SHIKI_VAL_<n>` pattern when no token is provided.\n */\nfunction getTemplateValPattern(preValToken: string | undefined): RegExp {\n\tif (preValToken == null || preValToken.length === 0) {\n\t\treturn LEGACY_SHIKI_VAL_PATTERN;\n\t}\n\n\tlet cached = preValPatternCache.get(preValToken);\n\tif (cached == null) {\n\t\tif (preValPatternCache.size >= maxPreValPatternCacheSize) {\n\t\t\tpreValPatternCache.clear();\n\t\t}\n\t\tcached = new RegExp(`${escapeForRegExp(preValToken)}(\\\\d+)__`, \"g\");\n\t\tpreValPatternCache.set(preValToken, cached);\n\t}\n\treturn cached;\n}\n\n/**\n * Replaces placeholder tokens in `input` with values from `vals`, applying\n * `mapValue` to each substituted value. Returns the input unchanged when\n * no placeholders are present.\n */\nfunction substituteTemplateVals(\n\tinput: string,\n\tvals: unknown[],\n\tpreValToken: string | undefined,\n\tmapValue: (value: unknown) => string,\n): string {\n\tif (preValToken == null) {\n\t\tif (!input.includes(\"SHIKI_VAL_\")) {\n\t\t\treturn input;\n\t\t}\n\t} else if (!input.includes(preValToken)) {\n\t\treturn input;\n\t}\n\n\treturn input.replaceAll(getTemplateValPattern(preValToken), (match, indexText: string) => {\n\t\tconst index = Number.parseInt(indexText, 10);\n\t\tif (Number.isNaN(index) || index < 0 || index >= vals.length) {\n\t\t\treturn match;\n\t\t}\n\t\treturn mapValue(vals[index]);\n\t});\n}\n\n/** Substitutes placeholder tokens in pre-rendered HTML, HTML-escaping each interpolated value. */\nfunction substitutePreVals(html: string, vals: unknown[], preValToken: string | undefined): string {\n\treturn substituteTemplateVals(html, vals, preValToken, (value) => escapeHtml(String(value)));\n}\n\n/** Substitutes placeholder tokens in plain text (for the copy button), without HTML escaping. */\nfunction substitutePreValsPlainText(\n\ttext: string,\n\tvals: unknown[],\n\tpreValToken: string | undefined,\n): string {\n\treturn substituteTemplateVals(text, vals, preValToken, (value) => String(value));\n}\n\ntype CodeBlockCodeProps = Omit<ComponentProps<\"pre\">, \"children\"> & {\n\t/**\n\t * The code value produced by `mantleCode(\"lang\")` tagged template.\n\t * Contains pre-rendered Shiki HTML (when the Vite plugin is active) and\n\t * the original code string for the copy button.\n\t */\n\tvalue: MantleCodeBlockValue;\n};\n\n/**\n * The `CodeBlock` content. Renders pre-highlighted code from `mantleCode()`.\n *\n * `value[\"~preHtml\"]` must be provided by Mantle's Vite plugin or server highlighter.\n * Runtime highlighting and runtime line decoration are intentionally unsupported.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Code = forwardRef<ComponentRef<\"pre\">, CodeBlockCodeProps>(\n\t({ className, style, value, ...props }, ref) => {\n\t\tconst id = useId();\n\t\tconst preRef = useRef<HTMLPreElement>(null);\n\t\tconst { copyTextRef, hasCodeExpander, isCodeExpanded, registerCodeId, unregisterCodeId } =\n\t\t\tuseCodeBlockContext();\n\t\tconst {\n\t\t\tlanguage,\n\t\t\tcode,\n\t\t\t\"~preValToken\": __preValToken,\n\t\t\t\"~preVals\": __preVals,\n\t\t\t\"~highlightLines\": __highlightLines,\n\t\t\t\"~lineNumberStart\": __lineNumberStart,\n\t\t\t\"~preHtml\": __preHtml,\n\t\t\t\"~showLineNumbers\": __showLineNumbers,\n\t\t} = value;\n\n\t\tconst effectiveHighlightLines = __highlightLines;\n\t\tconst effectiveLineNumberStart = __lineNumberStart ?? 1;\n\t\tconst effectiveShowLineNumbers = __showLineNumbers ?? false;\n\t\tconst copyText = useMemo(\n\t\t\t() =>\n\t\t\t\t__preVals != null && __preVals.length > 0\n\t\t\t\t\t? substitutePreValsPlainText(code, __preVals, __preValToken)\n\t\t\t\t\t: code,\n\t\t\t[__preValToken, __preVals, code],\n\t\t);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tcopyTextRef.current = copyText;\n\t\t}, [copyTextRef, copyText]);\n\n\t\tuseEffect(() => {\n\t\t\tregisterCodeId(id);\n\n\t\t\treturn () => {\n\t\t\t\tunregisterCodeId(id);\n\t\t\t};\n\t\t}, [id, registerCodeId, unregisterCodeId]);\n\n\t\tconst renderedHtml = useMemo(() => {\n\t\t\tif (__preHtml == null) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\treturn __preVals != null && __preVals.length > 0\n\t\t\t\t? substitutePreVals(__preHtml, __preVals, __preValToken)\n\t\t\t\t: __preHtml;\n\t\t}, [__preHtml, __preValToken, __preVals]);\n\n\t\t// Attach a single delegated click handler per <pre> so fold toggles do\n\t\t// not pay the cost of N React re-renders or N event handlers — see the\n\t\t// performance rationale in `fold-runtime.ts`. Re-attaches when the\n\t\t// rendered HTML changes since `<code>` gets a new dangerouslySetInnerHTML.\n\t\tuseEffect(() => {\n\t\t\tconst pre = preRef.current;\n\t\t\tif (pre == null) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\tconst codeElement = pre.querySelector(\"code\");\n\t\t\tif (codeElement != null) {\n\t\t\t\tresetFoldState(codeElement);\n\t\t\t}\n\t\t\treturn attachFoldHandler(pre);\n\t\t}, [renderedHtml]);\n\n\t\tconst isPreRendered = renderedHtml != null;\n\t\tconst displayHtml = renderedHtml ?? escapeHtml(copyText);\n\n\t\t// React diffs `dangerouslySetInnerHTML` by prop reference; a fresh\n\t\t// `{ __html }` literal each render re-applies `innerHTML`, wiping any\n\t\t// runtime-managed DOM state on the children (e.g. fold attributes).\n\t\tconst innerHtmlProp = useMemo(() => ({ __html: displayHtml }), [displayHtml]);\n\n\t\treturn (\n\t\t\t<pre\n\t\t\t\tdata-slot=\"code-block-code\"\n\t\t\t\taria-expanded={hasCodeExpander ? isCodeExpanded : undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"scrollbar overflow-x-auto overflow-y-hidden py-4\",\n\t\t\t\t\t!isPreRendered && \"pr-14\",\n\t\t\t\t\t\"data-[mantle-line-numbers~='false']:pl-4\",\n\t\t\t\t\t\"text-mono m-0 font-mono outline-hidden\",\n\t\t\t\t\t\"aria-collapsed:max-h-[13.6rem]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-highlighted={isPreRendered ? \"true\" : \"false\"}\n\t\t\t\tdata-lang={language}\n\t\t\t\tdata-mantle-highlight-lines={\n\t\t\t\t\tisPreRendered && effectiveHighlightLines != null && effectiveHighlightLines.length > 0\n\t\t\t\t\t\t? effectiveHighlightLines.join(\",\")\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-mantle-line-number-start={\n\t\t\t\t\tisPreRendered && effectiveShowLineNumbers ? String(effectiveLineNumberStart) : \"1\"\n\t\t\t\t}\n\t\t\t\tdata-mantle-line-numbers={isPreRendered && effectiveShowLineNumbers ? \"true\" : \"false\"}\n\t\t\t\tid={id}\n\t\t\t\tref={composeRefs(preRef, ref)}\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\t\"--mantle-line-number-start\": String(effectiveLineNumberStart),\n\t\t\t\t\t\ttabSize: 2,\n\t\t\t\t\t\tMozTabSize: 2,\n\t\t\t\t\t} as ComponentProps<\"pre\">[\"style\"]\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<code\n\t\t\t\t\tclassName=\"text-size-inherit block min-w-full w-max\"\n\t\t\t\t\tdangerouslySetInnerHTML={innerHtmlProp}\n\t\t\t\t/>\n\t\t\t</pre>\n\t\t);\n\t},\n);\nCode.displayName = \"CodeBlockCode\";\n\n/**\n * The (optional) header slot of the `CodeBlock`. This is where\n * `CodeBlock.Icon` and `CodeBlock.Title` are rendered.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"code-block-header\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex items-center gap-1 border-b border-gray-300 bg-base px-4 py-2 text-gray-700\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nHeader.displayName = \"CodeBlockHeader\";\n\n/**\n * The (optional) title of the `CodeBlock`. Renders as `h3` by default;\n * use `asChild` to render a different element.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Title = forwardRef<\n\tHTMLHeadingElement,\n\tHTMLAttributes<HTMLHeadingElement> & { asChild?: boolean }\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"h3\";\n\treturn (\n\t\t<Component\n\t\t\tdata-slot=\"code-block-title\"\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"text-mono m-0 font-mono font-normal\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nTitle.displayName = \"CodeBlockTitle\";\n\ntype CodeBlockCopyButtonProps = Omit<ComponentProps<\"button\">, \"children\" | \"type\"> &\n\tSelfClosingWithAsChild & {\n\t\t/**\n\t\t * The accessible label for the copy button. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t *\n\t\t * @default \"Copy code\"\n\t\t */\n\t\tlabel?: string;\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`. Copies the code content\n * to the clipboard when clicked.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst CopyButton = forwardRef<ComponentRef<\"button\">, CodeBlockCopyButtonProps>(\n\t({ className, label = \"Copy code\", onCopy, onCopyError, onClick, ...props }, ref) => {\n\t\tconst { copyTextRef } = useCodeBlockContext();\n\t\tconst copyToClipboard = useCopyToClipboard();\n\t\tconst [wasCopied, setWasCopied] = useState(false);\n\t\tconst timeoutHandle = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n\t\tuseEffect(() => {\n\t\t\treturn () => {\n\t\t\t\tif (timeoutHandle.current != null) {\n\t\t\t\t\tclearTimeout(timeoutHandle.current);\n\t\t\t\t}\n\t\t\t};\n\t\t}, []);\n\n\t\treturn (\n\t\t\t<span\n\t\t\t\tdata-slot=\"code-block-copy-button\"\n\t\t\t\tclassName=\"absolute right-3 top-3 z-10 inline-flex size-7 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] bg-card\"\n\t\t\t>\n\t\t\t\t<IconButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\tlabel={label}\n\t\t\t\t\ticon={wasCopied ? <CheckIcon /> : <CopyIcon />}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t\tonClick={async (event) => {\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\tonClick?.(event);\n\t\t\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\t\t\tif (timeoutHandle.current != null) {\n\t\t\t\t\t\t\t\t\tclearTimeout(timeoutHandle.current);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst text = copyTextRef.current;\n\t\t\t\t\t\t\tawait copyToClipboard(text);\n\t\t\t\t\t\t\tonCopy?.(text);\n\t\t\t\t\t\t\tsetWasCopied(true);\n\t\t\t\t\t\t\tif (timeoutHandle.current != null) {\n\t\t\t\t\t\t\t\tclearTimeout(timeoutHandle.current);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttimeoutHandle.current = setTimeout(() => {\n\t\t\t\t\t\t\t\tsetWasCopied(false);\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\t\tonCopyError?.(error);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</span>\n\t\t);\n\t},\n);\nCopyButton.displayName = \"CodeBlockCopyButton\";\n\ntype CodeBlockExpanderButtonProps = Omit<\n\tComponentProps<\"button\">,\n\t\"children\" | \"aria-controls\" | \"aria-expanded\"\n> &\n\tWithAsChild;\n\n/**\n * The (optional) expander button of the `CodeBlock`. Toggles the expanded\n * state of the code block. When present, the code block is collapsible.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst ExpanderButton = forwardRef<ComponentRef<\"button\">, CodeBlockExpanderButtonProps>(\n\t({ asChild = false, className, onClick, ...props }, ref) => {\n\t\tconst { codeId, isCodeExpanded, setIsCodeExpanded, setHasCodeExpander } = useCodeBlockContext();\n\n\t\tuseEffect(() => {\n\t\t\tsetHasCodeExpander(true);\n\t\t\treturn () => {\n\t\t\t\tsetHasCodeExpander(false);\n\t\t\t};\n\t\t}, [setHasCodeExpander]);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\t{...props}\n\t\t\t\tdata-slot=\"code-block-expander-button\"\n\t\t\t\taria-controls={codeId}\n\t\t\t\taria-expanded={isCodeExpanded}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-card px-4 py-2 font-sans text-gray-700 hover:bg-gray-100\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tsetIsCodeExpanded((prev) => !prev);\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{isCodeExpanded ? \"Show less\" : \"Show more\"}{\" \"}\n\t\t\t\t<MantleIcon\n\t\t\t\t\tsvg={<CaretDownIcon weight=\"bold\" />}\n\t\t\t\t\tclassName={cx(\"size-4\", isCodeExpanded && \"rotate-180\", \"transition-all duration-150\")}\n\t\t\t\t/>\n\t\t\t</Component>\n\t\t);\n\t},\n);\nExpanderButton.displayName = \"CodeBlockExpanderButton\";\n\ntype CodeBlockIconProps = Omit<SvgAttributes, \"children\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon SVG to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg: ReactNode;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset?: undefined | never;\n\t\t  }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon SVG to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg?: undefined | never;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset: Mode;\n\t\t  }\n\t);\n\n/**\n * A small icon for the `CodeBlock` header. Pass either a custom `svg`\n * or a `preset` value (not both).\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nfunction CodeBlockIconComponent({\n\tclassName,\n\tpreset,\n\tsvg: _svgProp,\n\t...props\n}: CodeBlockIconProps) {\n\tlet svg = _svgProp;\n\tif (preset != null) {\n\t\tswitch (preset) {\n\t\t\tcase \"file\":\n\t\t\t\tsvg = <FileTextIcon weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"cli\":\n\t\t\t\tsvg = <TerminalIcon weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"traffic-policy\":\n\t\t\t\tsvg = <TrafficPolicyFileIcon />;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\treturn <MantleIcon data-slot=\"code-block-icon\" className={className} svg={svg} {...props} />;\n}\nCodeBlockIconComponent.displayName = \"CodeBlockIcon\";\n\ntype CodeBlockTabListProps = Omit<ComponentProps<typeof RadixTabsList>, \"asChild\" | \"loop\">;\n\n/**\n * A tab list for the `CodeBlock` header. Renders pill-styled tab triggers\n * that switch which code is displayed. Built on Radix Tabs primitives.\n *\n * Place this inside `CodeBlock.Header` and pair with `CodeBlock.TabContent`\n * in `CodeBlock.Body` to conditionally render code based on the active tab.\n * Tab state is managed by `CodeBlock.Root` via `defaultTab` / `activeTab` / `onActiveTabChange`.\n *\n * @example\n * ```tsx\n * <CodeBlock.Root defaultTab=\"yml\">\n *   <CodeBlock.Header>\n *     <CodeBlock.TabList>\n *       <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n *       <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n *     </CodeBlock.TabList>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.TabContent value=\"yml\">\n *       <CodeBlock.Code value={ymlValue} />\n *     </CodeBlock.TabContent>\n *     <CodeBlock.TabContent value=\"json\">\n *       <CodeBlock.Code value={jsonValue} />\n *     </CodeBlock.TabContent>\n *   </CodeBlock.Body>\n * </CodeBlock.Root>\n * ```\n */\nconst TabList = forwardRef<ComponentRef<typeof RadixTabsList>, CodeBlockTabListProps>(\n\t({ className, ...props }, ref) => (\n\t\t<RadixTabsList\n\t\t\tdata-slot=\"code-block-tab-list\"\n\t\t\tclassName={cx(\"flex items-center gap-1\", className)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nTabList.displayName = \"CodeBlockTabList\";\n\ntype CodeBlockTabTriggerProps = Omit<ComponentProps<typeof RadixTabsTrigger>, \"asChild\">;\n\n/**\n * A pill-styled tab trigger for the `CodeBlock` header.\n * Must be rendered within a `CodeBlock.TabList`.\n *\n * @example\n * ```tsx\n * <CodeBlock.TabList>\n *   <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n *   <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n * </CodeBlock.TabList>\n * ```\n */\nconst TabTrigger = forwardRef<ComponentRef<typeof RadixTabsTrigger>, CodeBlockTabTriggerProps>(\n\t({ className, ...props }, ref) => (\n\t\t<RadixTabsTrigger\n\t\t\tdata-slot=\"code-block-tab-trigger\"\n\t\t\tclassName={cx(\n\t\t\t\t\"cursor-pointer rounded px-1.5 py-0.5 text-xs font-medium\",\n\t\t\t\t\"text-gray-600 outline-hidden\",\n\t\t\t\t\"hover:text-gray-900\",\n\t\t\t\t\"data-[state=active]:bg-neutral-500/15 data-[state=active]:text-strong\",\n\t\t\t\t\"focus-visible:ring-focus-accent focus-visible:ring-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nTabTrigger.displayName = \"CodeBlockTabTrigger\";\n\ntype CodeBlockTabContentProps = Omit<\n\tComponentProps<typeof RadixTabsContent>,\n\t\"asChild\" | \"forceMount\"\n>;\n\n/**\n * Conditionally renders its children when the associated tab is active.\n * Pair with `CodeBlock.TabList` and `CodeBlock.TabTrigger` in the header,\n * and set `defaultTab` / `activeTab` on `CodeBlock.Root`.\n *\n * @example\n * ```tsx\n * <CodeBlock.Body>\n *   <CodeBlock.CopyButton />\n *   <CodeBlock.TabContent value=\"yml\">\n *     <CodeBlock.Code value={ymlValue} />\n *   </CodeBlock.TabContent>\n *   <CodeBlock.TabContent value=\"json\">\n *     <CodeBlock.Code value={jsonValue} />\n *   </CodeBlock.TabContent>\n * </CodeBlock.Body>\n * ```\n */\nconst TabContent = forwardRef<ComponentRef<typeof RadixTabsContent>, CodeBlockTabContentProps>(\n\t(props, ref) => <RadixTabsContent data-slot=\"code-block-tab-content\" ref={ref} {...props} />,\n);\nTabContent.displayName = \"CodeBlockTabContent\";\n\n/**\n * Shiki-powered code blocks with build-time syntax highlighting and zero browser bundle.\n *\n * Use `mantleCodeBlockPlugins()` to enable pre-rendering at build time.\n *\n * @example\n * Composition:\n * ```\n * # Standard\n * CodeBlock.Root\n * ├── CodeBlock.Header\n * │   ├── CodeBlock.Icon\n * │   └── CodeBlock.Title\n * ├── CodeBlock.Body\n * │   ├── CodeBlock.CopyButton\n * │   └── CodeBlock.Code\n * └── CodeBlock.ExpanderButton\n *\n * # Tabbed\n * CodeBlock.Root\n * ├── CodeBlock.Header\n * │   └── CodeBlock.TabList\n * │       └── CodeBlock.TabTrigger\n * ├── CodeBlock.Body\n * │   ├── CodeBlock.CopyButton\n * │   └── CodeBlock.TabContent\n * │       └── CodeBlock.Code\n * └── CodeBlock.ExpanderButton\n * ```\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n *\n * // Server-highlighted HTML fetched via an action route + React Query mutation\n * const highlightMutation = useMutation({\n *   mutationFn: async () => {\n *     const response = await fetch(\"/api/shiki-highlight\", {\n *       method: \"POST\",\n *       headers: { \"Content-Type\": \"application/json\" },\n *       body: JSON.stringify({ code: source, language: \"typescript\" }),\n *     });\n *     return response.json();\n *   },\n * });\n *\n * const serverValue = createMantleCodeBlockValue({\n *   language: \"typescript\",\n *   code: source,\n *   preHtml: highlightMutation.data?.html,\n * });\n * ```\n */\nconst CodeBlock = {\n\t/**\n\t * The root component of the `CodeBlock`.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The body of the `CodeBlock`. Contains `Code` and optional `CopyButton`.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The code content. Renders pre-highlighted Shiki HTML when the Vite plugin is active.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCode,\n\t/**\n\t * The optional copy button.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCopyButton,\n\t/**\n\t * The optional expander button for collapsible code blocks.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tExpanderButton,\n\t/**\n\t * The optional header slot for icon and title.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A small icon for the code block header. Use `preset` or `svg`.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tIcon: CodeBlockIconComponent,\n\t/**\n\t * Conditionally renders children when the associated tab is active.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root defaultTab=\"yml\">\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.TabList>\n\t *       <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n\t *       <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n\t *     </CodeBlock.TabList>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.TabContent value=\"yml\">\n\t *       <CodeBlock.Code value={ymlValue} />\n\t *     </CodeBlock.TabContent>\n\t *     <CodeBlock.TabContent value=\"json\">\n\t *       <CodeBlock.Code value={jsonValue} />\n\t *     </CodeBlock.TabContent>\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTabContent,\n\t/**\n\t * A tab list for the code block header. Renders pill-styled tabs for switching code.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root defaultTab=\"yml\">\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.TabList>\n\t *       <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n\t *       <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n\t *     </CodeBlock.TabList>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.TabContent value=\"yml\">\n\t *       <CodeBlock.Code value={ymlValue} />\n\t *     </CodeBlock.TabContent>\n\t *     <CodeBlock.TabContent value=\"json\">\n\t *       <CodeBlock.Code value={jsonValue} />\n\t *     </CodeBlock.TabContent>\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTabList,\n\t/**\n\t * A pill-styled tab trigger for the code block header. Must be inside `TabList`.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root defaultTab=\"yml\">\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.TabList>\n\t *       <CodeBlock.TabTrigger value=\"yml\">policy.yml</CodeBlock.TabTrigger>\n\t *       <CodeBlock.TabTrigger value=\"json\">policy.json</CodeBlock.TabTrigger>\n\t *     </CodeBlock.TabList>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.TabContent value=\"yml\">\n\t *       <CodeBlock.Code value={ymlValue} />\n\t *     </CodeBlock.TabContent>\n\t *     <CodeBlock.TabContent value=\"json\">\n\t *       <CodeBlock.Code value={jsonValue} />\n\t *     </CodeBlock.TabContent>\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTabTrigger,\n\t/**\n\t * The optional title rendered in the header.\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.ts</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code value={mantleCode(\"typescript\")`const x = \"hello\";`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCodeBlock,\n};\n","/**\n * Returns `true` if `value` has more than `maxLines` newline-delimited lines.\n *\n * This is equivalent to `value.split(\"\\\\n\").length > maxLines`, but avoids\n * allocating an intermediate array and can early-return once the threshold is exceeded.\n */\nfunction hasMoreThanNLines(value: string, maxLines: number): boolean {\n\tlet lines = 1;\n\tif (lines > maxLines) {\n\t\treturn true;\n\t}\n\n\tfor (let i = 0; i < value.length; i++) {\n\t\tif (value[i] === \"\\n\") {\n\t\t\tlines += 1;\n\t\t\tif (lines > maxLines) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t}\n\treturn false;\n}\n\nexport {\n\t//,\n\thasMoreThanNLines,\n};\n"],"mappings":"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"}

package/dist/code.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"code.js","names":[],"sources":["../src/components/code/code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\n/**\n * Marks a short fragment of inline computer code — a function name, a\n * variable, a CLI flag, a key. Renders a native `<code>` element with\n * mantle's monospace styling.\n *\n * **When to use**\n * - Inline within prose to identify code, file paths, env vars, or keys.\n * - Wrap technical terms that should visually stand apart from running text.\n *\n * **When not to use**\n * - For multi-line or syntax-highlighted blocks. Use {@link https://mantle.ngrok.com/components/code-block CodeBlock} instead.\n * - For keyboard shortcuts. Use {@link https://mantle.ngrok.com/components/kbd Kbd}.\n * - For arbitrary monospace text that isn't code (use a plain monospace utility class).\n *\n * **Polymorphism.** Pass `asChild` to render `Code` styling on a different\n * element (e.g. a link wrapping a code-styled label).\n *\n * @see https://mantle.ngrok.com/components/code\n *\n * @example\n * ```tsx\n * import { Code } from \"@ngrok/mantle/code\";\n *\n * <p>\n *   Use the <Code>console.log()</Code> function to debug your code.\n * </p>\n *\n * // As a link, preserving Code styling.\n * <Code asChild>\n *   <a href=\"/api\">/api/components.json</a>\n * </Code>\n * ```\n */\nconst Code = forwardRef<ComponentRef<\"code\">, ComponentProps<\"code\"> & WithAsChild>(\n\t({ asChild, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"code\";\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"code\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-gray-500/15 rounded-md border bg-gray-500/5 px-1 font-mono text-[0.8em]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCode.displayName = \"Code\";\n\nexport {\n\t//,\n\tCode,\n};\n"],"mappings":"kJAuCA,MAAM,EAAO,GACX,CAAE,UAAS,YAAW,GAAG,GAAS,IAGjC,EAFY,EAAU,EAAO,OAE7B,CACM,MACL,YAAU,OACV,UAAW,EACV,iFACA,CACD,EACA,GAAI,CACJ,CAAA,CAGJ,EACA,EAAK,YAAc"}

package/dist/color.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"color.js","names":[],"sources":["../src/utils/color/colors.ts"],"sourcesContent":["/**\n * Color palette named colors\n */\nconst namedColors = [\n\t\"amber\",\n\t\"blue\",\n\t\"cyan\",\n\t\"emerald\",\n\t\"fuchsia\",\n\t\"gray\",\n\t\"green\",\n\t\"indigo\",\n\t\"lime\",\n\t\"orange\",\n\t\"pink\",\n\t\"purple\",\n\t\"red\",\n\t\"rose\",\n\t\"sky\",\n\t\"teal\",\n\t\"violet\",\n\t\"yellow\",\n] as const;\n\n/**\n * A named color from the color palette\n */\ntype NamedColor = (typeof namedColors)[number];\n\n/**\n * Check if a value is a color from the color palette\n */\nconst isNamedColor = (value: unknown): value is NamedColor =>\n\ttypeof value === \"string\" && namedColors.includes(value as NamedColor);\n\n/**\n * Functional named colors\n */\nconst functionalColors = [\n\t\"important\",\n\t\"info\",\n\t\"accent\",\n\t\"danger\",\n\t\"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\n\n/**\n * A functional color\n */\ntype FunctionalColor = (typeof functionalColors)[number];\n\n/**\n * Check if a value is a color from the functional colors\n */\nconst isFunctionalColor = (value: unknown): value is FunctionalColor =>\n\ttypeof value === \"string\" && functionalColors.includes(value as FunctionalColor);\n\n/**\n * All named mantle colors\n */\nconst colors = [...namedColors, ...functionalColors] as const;\n\n/**\n * A named mantle color\n */\ntype Color = (typeof colors)[number];\n\n/**\n * Check if a value is a named mantle color\n */\nconst isColor = (value: unknown): value is Color =>\n\ttypeof value === \"string\" && colors.includes(value as Color);\n\n// MARK: - Exports\n\nexport { colors, functionalColors, isColor, isFunctionalColor, isNamedColor, namedColors };\n\nexport type { Color, FunctionalColor, NamedColor };\n"],"mappings":"AAGA,MAAM,EAAc,CACnB,QACA,OACA,OACA,UACA,UACA,OACA,QACA,SACA,OACA,SACA,OACA,SACA,MACA,OACA,MACA,OACA,SACA,QACD,EAUM,EAAgB,GACrB,OAAO,GAAU,UAAY,EAAY,SAAS,CAAmB,EAKhE,EAAmB,CACxB,YACA,OACA,SACA,SACA,UACA,UACA,SACD,EAUM,EAAqB,GAC1B,OAAO,GAAU,UAAY,EAAiB,SAAS,CAAwB,EAK1E,EAAS,CAAC,GAAG,EAAa,GAAG,CAAgB,EAU7C,EAAW,GAChB,OAAO,GAAU,UAAY,EAAO,SAAS,CAAc"}

package/dist/combobox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as Primitive from \"@ariakit/react\";\nimport { type ComponentPropsWithoutRef, type ComponentRef, createContext, forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { parseValidation, useFieldValidation } from \"../field/validation.js\";\nimport type { WithValidation } from \"../field/validation.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 * Use Combobox for a list of options where the user types to filter — large static lists,\n * async/server-side data, or any single-select where search is helpful. For very small\n * finite lists with no filtering, prefer Select. For multi-selection, prefer MultiSelect.\n *\n * @see https://mantle.ngrok.com/components/combobox#comboboxroot\n *\n * @example\n * ```tsx\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 * ```\n */\nconst Root = ({ children, ...props }: ComboboxProps) => {\n\treturn <Primitive.ComboboxProvider {...props}>{children}</Primitive.ComboboxProvider>;\n};\nRoot.displayName = \"Combobox\";\n\ntype ComboboxInputProps = Omit<\n\tPrimitive.ComboboxProps,\n\t\"render\" // we don't support a render prop for the combobox input\n> &\n\tWithValidation;\n\n/**\n * Renders a combobox input element that can be used to filter a list of items.\n *\n * @see https://mantle.ngrok.com/components/combobox#comboboxinput\n *\n * @example\n * ```tsx\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 * ```\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 fieldValidation = useFieldValidation();\n\t\tconst { ariaInvalid, validation } = parseValidation({\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tvalidation: _validation ?? fieldValidation,\n\t\t});\n\n\t\treturn (\n\t\t\t<Primitive.Combobox\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tautoComplete={autoComplete}\n\t\t\t\tautoSelect={autoSelect}\n\t\t\t\tdata-slot=\"combobox-input\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"pointer-coarse:text-base h-9 text-sm\",\n\t\t\t\t\t\"bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong font-sans\",\n\t\t\t\t\t\"placeholder:text-placeholder\",\n\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\t\"autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]\", // Autofill styling on the input itself and any children with autofill styling\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"ComboboxInput\";\n\ntype ComboboxContentProps = Omit<Primitive.ComboboxPopoverProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n *\n * @see https://mantle.ngrok.com/components/combobox#comboboxcontent\n *\n * @example\n * ```tsx\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 * ```\n */\nconst Content = forwardRef<ComponentRef<typeof Primitive.ComboboxPopover>, ComboboxContentProps>(\n\t(\n\t\t{ asChild = false, children, className, sameWidth = true, unmountOnHide = true, ...props },\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxPopover\n\t\t\t\tdata-slot=\"combobox-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 space-y-px font-sans focus:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\tsameWidth={sameWidth}\n\t\t\t\tunmountOnHide={unmountOnHide}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxPopover>\n\t\t);\n\t},\n);\nContent.displayName = \"ComboboxContent\";\n\ntype ComboboxItemProps = Omit<Primitive.ComboboxItemProps, \"render\"> & WithAsChild;\n\nconst ComboboxItemValueContext = createContext<string | undefined>(undefined);\n\n/**\n * Renders a combobox item inside a Combobox.Content component.\n *\n * @see https://mantle.ngrok.com/components/combobox#comboboxitem\n *\n * @example\n * ```tsx\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 * ```\n */\nconst Item = forwardRef<ComponentRef<typeof Primitive.ComboboxItem>, ComboboxItemProps>(\n\t({ asChild = false, children, className, focusOnHover = true, value, ...props }, ref) => {\n\t\treturn (\n\t\t\t<ComboboxItemValueContext.Provider value={value}>\n\t\t\t\t<Primitive.ComboboxItem\n\t\t\t\t\tdata-slot=\"combobox-item\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm flex min-w-0 gap-2 items-center [&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\t\t\t\t\"data-active-item:bg-active-menu-item\",\n\t\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tfocusOnHover={focusOnHover}\n\t\t\t\t\tref={ref}\n\t\t\t\t\trender={\n\t\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</Primitive.ComboboxItem>\n\t\t\t</ComboboxItemValueContext.Provider>\n\t\t);\n\t},\n);\nItem.displayName = \"ComboboxItem\";\n\ntype ComboboxGroupProps = Omit<Primitive.ComboboxGroupProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a group for Combobox.Item elements.\n *\n * Optionally, a Combobox.GroupLabel can be rendered as a child to provide a label for the group.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @see https://mantle.ngrok.com/components/combobox#comboboxgroup\n *\n * @example\n * ```tsx\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 * ```\n */\nconst Group = forwardRef<ComponentRef<typeof Primitive.ComboboxGroup>, ComboboxGroupProps>(\n\t({ asChild = false, children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxGroup\n\t\t\t\tdata-slot=\"combobox-group\"\n\t\t\t\tclassName={cx(\"space-y-px\", className)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxGroup>\n\t\t);\n\t},\n);\nGroup.displayName = \"ComboboxGroup\";\n\ntype ComboboxGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, \"render\"> & WithAsChild;\n\n/**\n * Renders a label in a combobox group.\n *\n * This component should be wrapped with Combobox.Group so the aria-labelledby is correctly set on the group element.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @see https://mantle.ngrok.com/components/combobox#comboboxgrouplabel\n *\n * @example\n * ```tsx\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 * ```\n */\nconst GroupLabel = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxGroupLabel>,\n\tComboboxGroupLabelProps\n>(({ asChild = false, children, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxGroupLabel\n\t\t\tdata-slot=\"combobox-group-label\"\n\t\t\tclassName={cx(\"text-muted px-2 py-1 text-xs font-medium\", className)}\n\t\t\tref={ref}\n\t\t\trender={asChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Primitive.ComboboxGroupLabel>\n\t);\n});\nGroupLabel.displayName = \"ComboboxGroupLabel\";\n\ntype ComboboxItemValueProps = Omit<Primitive.ComboboxItemValueProps<\"span\">, \"render\"> &\n\tWithAsChild;\n\n/**\n * Highlights the match between the current Combobox.Input value (userValue) and parent Combobox.Item value.\n *\n * Renders a span element with the combobox item value as children.\n * The value is split into span elements.\n * Portions of the value matching the user input will have a data-user-value attribute, while the rest will have a data-autocomplete-value attribute.\n *\n * Should only be used as a child of Combobox.Item.\n * The item value is automatically set to the value of the closest Combobox.Item component's value prop.\n * The user input value is automatically set to the combobox store's value state.\n * Both values can be overridden by providing the value and userValue props, respectively.\n *\n * @see https://mantle.ngrok.com/components/combobox#comboboxitemvalue\n *\n * @example\n * ```tsx\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 * ```\n */\nconst ItemValue = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxItemValue>,\n\tComboboxItemValueProps\n>(({ asChild = false, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxItemValue\n\t\t\tdata-slot=\"combobox-item-value\"\n\t\t\tclassName={cx(\n\t\t\t\t\"*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\trender={asChild ? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} /> : undefined}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nItemValue.displayName = \"ComboboxItemValue\";\n\n/**\n * Renders a separator between Combobox.Items or Combobox.Groups.\n *\n * @see https://mantle.ngrok.com/components/combobox#comboboxseparator\n *\n * @example\n * ```tsx\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 * ```\n */\nconst ComboboxSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tdata-slot=\"combobox-separator\"\n\t\tclassName={cx(\"-mx-1.25 my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nComboboxSeparatorComponent.displayName = \"ComboboxSeparator\";\n\n/**\n * Fill in a React input field with autocomplete & autosuggest functionalities.\n * Choose from a list of suggested values with full keyboard support.\n * This component is based on the WAI-ARIA Combobox Pattern and is powered by the\n * ariakit Combobox.\n *\n * Use Combobox for a list of options where the user types to filter — large static lists,\n * async/server-side data, or any single-select where search is helpful. For very small\n * finite lists with no filtering, prefer Select. For multi-selection, prefer MultiSelect.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/\n * @see https://ariakit.org/components/combobox\n *\n * @see https://mantle.ngrok.com/components/combobox\n *\n * @example\n * Composition:\n * ```\n * Combobox.Root\n * ├── Combobox.Input\n * └── Combobox.Content\n *     ├── Combobox.Group\n *     │   ├── Combobox.GroupLabel\n *     │   └── Combobox.Item\n *     │       └── Combobox.ItemValue\n *     └── Combobox.Separator\n * ```\n *\n * @example\n * ```tsx\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 * ```\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 * Use Combobox for a list of options where the user types to filter — large static lists,\n\t * async/server-side data, or any single-select where search is helpful. For very small\n\t * finite lists with no filtering, prefer Select. For multi-selection, prefer MultiSelect.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Renders a group for Combobox.Item elements.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * Renders a label in a combobox group.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxgrouplabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroupLabel,\n\t/**\n\t * Renders a combobox input element that can be used to filter a list of items.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxinput\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tInput,\n\t/**\n\t * Renders a combobox item inside a Combobox.Content component.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\" />\n\t *     <Combobox.Item value=\"Banana\" />\n\t *     <Combobox.Item value=\"Orange\" />\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Highlights the match between the current Combobox.Input value and parent Combobox.Item value.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxitemvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Item value=\"Apple\">\n\t *       🍎\n\t *       <Combobox.ItemValue />\n\t *     </Combobox.Item>\n\t *     <Combobox.Item value=\"Banana\">\n\t *       🍌\n\t *       <Combobox.ItemValue />\n\t *     </Combobox.Item>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItemValue,\n\t/**\n\t * Renders a separator between Combobox.Items or Combobox.Groups.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#comboboxseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t *   <Combobox.Input />\n\t *   <Combobox.Content>\n\t *     <Combobox.Group>\n\t *       <Combobox.Item value=\"Apple\" />\n\t *       <Combobox.Item value=\"Banana\" />\n\t *     </Combobox.Group>\n\t *     <Combobox.Separator />\n\t *     <Combobox.Item>\n\t *       Click me!\n\t *     </Combobox.Item>\n\t *   </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tSeparator: ComboboxSeparatorComponent,\n} as const;\n\nexport {\n\t//,\n\tCombobox,\n};\n"],"mappings":"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"}

package/dist/command.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"command.js","names":["CommandPrimitive"],"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\ttype ReactNode,\n\tforwardRef,\n} from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Dialog } from \"../dialog/dialog.js\";\nimport { Separator } from \"../separator/separator.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/command#commandroot\n *\n * @example\n * ```tsx\n * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n *   <Command.DialogTrigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.DialogTrigger>\n *   <Command.DialogContent>\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.DialogContent>\n * </Command.DialogRoot>\n * ```\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(\"bg-popover flex h-full w-full flex-col overflow-hidden rounded-md\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCommandRoot.displayName = \"Command\";\n\n/**\n * The props for the CommandDialog.Content component.\n *\n * @see https://mantle.ngrok.com/components/command#commanddialogcontent\n */\ntype CommandDialogContentProps = {\n\t/**\n\t * The content of the command dialog (inputs, lists, etc.).\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * Class name(s) to apply to the command dialog content.\n\t */\n\tclassName?: string;\n\t/**\n\t * The accessible title of the command dialog. Visually hidden.\n\t *\n\t * @default \"Command Palette\"\n\t */\n\ttitle?: string;\n\t/**\n\t * The accessible description of the command dialog. Visually hidden.\n\t *\n\t * @default \"Search for a command to run...\"\n\t */\n\tdescription?: string;\n\t/**\n\t * Whether to show the close button.\n\t *\n\t * @default true\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 * The content of the CommandDialog. Renders the accessible title/description,\n * the command palette UI, and an optional close button.\n *\n * @see https://mantle.ngrok.com/components/command#commanddialogcontent\n *\n * @example\n * ```tsx\n * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n *   <Command.DialogTrigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.DialogTrigger>\n *   <Command.DialogContent>\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.DialogContent>\n * </Command.DialogRoot>\n * ```\n */\nconst CommandDialogContent = ({\n\tchildren,\n\tclassName,\n\tdescription = \"Search for a command to run...\",\n\tfilter,\n\tshouldFilter,\n\tshowCloseButton = true,\n\ttitle = \"Command Palette\",\n}: CommandDialogContentProps) => (\n\t<Dialog.Content className={cx(\"overflow-hidden p-0 relative\", className)}>\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<CommandRoot\n\t\t\tclassName=\"**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-input]]:h-12 **:data-[slot=command-group]:px-2 **:data-[slot=command-list]:pb-1\"\n\t\t\tfilter={filter}\n\t\t\tshouldFilter={shouldFilter}\n\t\t>\n\t\t\t{children}\n\t\t</CommandRoot>\n\t\t{showCloseButton && (\n\t\t\t<div className=\"absolute top-1.5 right-1.5\">\n\t\t\t\t<Dialog.CloseIconButton />\n\t\t\t</div>\n\t\t)}\n\t</Dialog.Content>\n);\nCommandDialogContent.displayName = \"CommandDialogContent\";\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/command#commandinput\n *\n * @example\n * ```tsx\n * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n *   <Command.DialogTrigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.DialogTrigger>\n *   <Command.DialogContent>\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.DialogContent>\n * </Command.DialogRoot>\n * ```\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-5 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/command#commandlist\n *\n * @example\n * ```tsx\n * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n *   <Command.DialogTrigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.DialogTrigger>\n *   <Command.DialogContent>\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.DialogContent>\n * </Command.DialogRoot>\n * ```\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(\"max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar\", className)}\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/command#commandempty\n *\n * @example\n * ```tsx\n * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n *   <Command.DialogTrigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.DialogTrigger>\n *   <Command.DialogContent>\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.DialogContent>\n * </Command.DialogRoot>\n * ```\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={cx(\"py-6 text-center text-sm\", className)}\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/command#commandgroup\n *\n * @example\n * ```tsx\n * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n *   <Command.DialogTrigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.DialogTrigger>\n *   <Command.DialogContent>\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.DialogContent>\n * </Command.DialogRoot>\n * ```\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/command#commandseparator\n *\n * @example\n * ```tsx\n * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n *   <Command.DialogTrigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.DialogTrigger>\n *   <Command.DialogContent>\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.DialogContent>\n * </Command.DialogRoot>\n * ```\n */\nconst CommandSeparator = forwardRef<\n\tComponentRef<typeof CommandPrimitive.Separator>,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Separator ref={ref} data-slot=\"command-separator\" asChild {...props}>\n\t\t<Separator className={cx(\"-mx-1 my-1 w-auto\", className)} />\n\t</CommandPrimitive.Separator>\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/command#commanditem\n *\n * @example\n * ```tsx\n * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n *   <Command.DialogTrigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.DialogTrigger>\n *   <Command.DialogContent>\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.DialogContent>\n * </Command.DialogRoot>\n * ```\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-active-menu-item [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5\",\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/command#commandshortcut\n *\n * @example\n * ```tsx\n * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n *   <Command.DialogTrigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.DialogTrigger>\n *   <Command.DialogContent>\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.DialogContent>\n * </Command.DialogRoot>\n * ```\n */\nconst CommandShortcut = forwardRef<ComponentRef<\"span\">, ComponentPropsWithoutRef<\"span\">>(\n\t({ className, ...props }, ref) => (\n\t\t<span\n\t\t\tref={ref}\n\t\t\tdata-slot=\"command-shortcut\"\n\t\t\tclassName={cx(\"text-muted ml-auto text-xs tracking-widest\", className)}\n\t\t\t{...props}\n\t\t/>\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/command\n *\n * @example\n * Composition:\n * ```\n * Command.DialogRoot\n * ├── Command.DialogTrigger\n * └── Command.DialogContent\n *     ├── Command.Input\n *     └── Command.List\n *         ├── Command.Empty\n *         ├── Command.Group\n *         │   └── Command.Item\n *         │       └── Command.Shortcut\n *         └── Command.Separator\n * ```\n *\n * @example\n * ```tsx\n * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n *   <Command.DialogTrigger asChild>\n *     <Button type=\"button\">Open Command Palette</Button>\n *   </Command.DialogTrigger>\n *   <Command.DialogContent>\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.DialogContent>\n * </Command.DialogRoot>\n * ```\n */\nconst Command = {\n\t/**\n\t * The root component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n\t *   <Command.DialogTrigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.DialogTrigger>\n\t *   <Command.DialogContent>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.DialogContent>\n\t * </Command.DialogRoot>\n\t * ```\n\t */\n\tRoot: CommandRoot,\n\t/**\n\t * The root stateful component for the Command dialog. Manages open/closed state.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanddialogroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n\t *   <Command.DialogTrigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.DialogTrigger>\n\t *   <Command.DialogContent>\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.DialogContent>\n\t * </Command.DialogRoot>\n\t * ```\n\t */\n\tDialogRoot: Dialog.Root,\n\t/**\n\t * A button that opens the Command dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanddialogtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.DialogTrigger asChild>\n\t *   <Button type=\"button\">Open Command Palette</Button>\n\t * </Command.DialogTrigger>\n\t * ```\n\t */\n\tDialogTrigger: Dialog.Trigger,\n\t/**\n\t * The visible content of the Command dialog. Renders inside the dialog portal.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanddialogcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.DialogContent>\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.DialogContent>\n\t * ```\n\t */\n\tDialogContent: CommandDialogContent,\n\t/**\n\t * The input component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandinput\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n\t *   <Command.DialogTrigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.DialogTrigger>\n\t *   <Command.DialogContent>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.DialogContent>\n\t * </Command.DialogRoot>\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/command#commandlist\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n\t *   <Command.DialogTrigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.DialogTrigger>\n\t *   <Command.DialogContent>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.DialogContent>\n\t * </Command.DialogRoot>\n\t * ```\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/command#commandempty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n\t *   <Command.DialogTrigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.DialogTrigger>\n\t *   <Command.DialogContent>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.DialogContent>\n\t * </Command.DialogRoot>\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/command#commandgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n\t *   <Command.DialogTrigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.DialogTrigger>\n\t *   <Command.DialogContent>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.DialogContent>\n\t * </Command.DialogRoot>\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/command#commanditem\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n\t *   <Command.DialogTrigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.DialogTrigger>\n\t *   <Command.DialogContent>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.DialogContent>\n\t * </Command.DialogRoot>\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/command#commandshortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n\t *   <Command.DialogTrigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.DialogTrigger>\n\t *   <Command.DialogContent>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.DialogContent>\n\t * </Command.DialogRoot>\n\t * ```\n\t */\n\tShortcut: CommandShortcut,\n\t/**\n\t * The separator component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.DialogRoot open={open} onOpenChange={setOpen}>\n\t *   <Command.DialogTrigger asChild>\n\t *     <Button type=\"button\">Open Command Palette</Button>\n\t *   </Command.DialogTrigger>\n\t *   <Command.DialogContent>\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.Group heading=\"Suggestions\">\n\t *         <Command.Item>\n\t *           <span>Calendar</span>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *       <Command.Separator />\n\t *       <Command.Group heading=\"Settings\">\n\t *         <Command.Item>\n\t *           <span>Profile</span>\n\t *           <Command.Shortcut>⌘,</Command.Shortcut>\n\t *         </Command.Item>\n\t *       </Command.Group>\n\t *     </Command.List>\n\t *   </Command.DialogContent>\n\t * </Command.DialogRoot>\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\tdata-slot=\"meta-key\"\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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"}

package/dist/compose-refs-Cjf2gfB8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"compose-refs-Cjf2gfB8.js","names":[],"sources":["../src/utils/compose-refs/compose-refs.tsx"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\nimport { useCallback, useRef } from \"react\";\n\ntype PossibleRef<T> = Ref<T> | undefined;\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n\treturn (node: T | null) => {\n\t\tfor (const ref of refs) {\n\t\t\tif (typeof ref === \"function\") {\n\t\t\t\tref(node);\n\t\t\t} else if (ref != null) {\n\t\t\t\t(ref as MutableRefObject<T | null>).current = node;\n\t\t\t}\n\t\t}\n\t};\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n\tconst latestRefs = useRef(refs);\n\tlatestRefs.current = refs;\n\treturn useCallback((node: T | null) => {\n\t\tfor (const ref of latestRefs.current) {\n\t\t\tif (typeof ref === \"function\") {\n\t\t\t\tref(node);\n\t\t\t} else if (ref != null) {\n\t\t\t\t(ref as MutableRefObject<T | null>).current = node;\n\t\t\t}\n\t\t}\n\t}, []);\n}\n\nexport { composeRefs, useComposedRefs };\n"],"mappings":"gDASA,SAAS,EAAe,GAAG,EAAwB,CAClD,MAAQ,IAAmB,CAC1B,IAAK,IAAM,KAAO,EACb,OAAO,GAAQ,WAClB,EAAI,CAAI,EACE,GAAO,OACjB,EAAoC,QAAU,EAGjD,CACD,CAMA,SAAS,EAAmB,GAAG,EAAwB,CACtD,IAAM,EAAa,EAAO,CAAI,EAE9B,MADA,GAAW,QAAU,EACd,EAAa,GAAmB,CACtC,IAAK,IAAM,KAAO,EAAW,QACxB,OAAO,GAAQ,WAClB,EAAI,CAAI,EACE,GAAO,OACjB,EAAoC,QAAU,EAGjD,EAAG,CAAC,CAAC,CACN"}

package/dist/copy-to-clipboard-Baw30q9O.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"copy-to-clipboard-Baw30q9O.js","names":[],"sources":["../src/utils/copy-to-clipboard.ts"],"sourcesContent":["import { canUseDOM } from \"../components/browser-only/browser-only.js\";\n\n/**\n * Copy the given string to the clipboard. Uses the Clipboard API when\n * available and falls back to an `execCommand(\"copy\")` polyfill for older\n * browsers.\n *\n * Throws when called outside a DOM environment, or when both the Clipboard\n * API and the polyfill fail — `await` the call to observe success.\n */\nasync function copyToClipboard(value: string) {\n\tif (!canUseDOM()) {\n\t\tthrow new Error(\"copyToClipboard requires a DOM environment\");\n\t}\n\ttry {\n\t\tif (typeof navigator.clipboard?.writeText === \"function\") {\n\t\t\tawait navigator.clipboard.writeText(value);\n\t\t} else {\n\t\t\tthrow new Error(\"writeText not supported\");\n\t\t}\n\t} catch (clipboardError) {\n\t\ttry {\n\t\t\tcopyToClipboardPolyfill(value);\n\t\t} catch {\n\t\t\tthrow clipboardError; // both approaches failed; propagate\n\t\t}\n\t}\n}\n\n/**\n * A fallback copy to clipboard function for older browsers that lack the\n * Clipboard API. Creates a temporary `<textarea>`, selects it, and invokes\n * the deprecated `document.execCommand(\"copy\")` API.\n *\n * Throws when `execCommand(\"copy\")` returns `false` (the call failed but\n * did not throw) so the caller can fall through to another strategy.\n */\nfunction copyToClipboardPolyfill(text: string) {\n\tconst tempTextArea = document.createElement(\"textarea\");\n\ttempTextArea.value = text;\n\tdocument.body.appendChild(tempTextArea);\n\ttry {\n\t\ttempTextArea.select();\n\t\tconst copied = document.execCommand(\"copy\");\n\t\tif (!copied) {\n\t\t\tthrow new Error('document.execCommand(\"copy\") failed');\n\t\t}\n\t} finally {\n\t\tdocument.body.removeChild(tempTextArea);\n\t}\n}\n\nexport { copyToClipboard };\n"],"mappings":"+CAUA,eAAe,EAAgB,EAAe,CAC7C,GAAI,CAAC,EAAU,EACd,MAAU,MAAM,4CAA4C,EAE7D,GAAI,CACH,GAAI,OAAO,UAAU,WAAW,WAAc,WAC7C,MAAM,UAAU,UAAU,UAAU,CAAK,OAEzC,MAAU,MAAM,yBAAyB,CAE3C,OAAS,EAAgB,CACxB,GAAI,CACH,EAAwB,CAAK,CAC9B,MAAQ,CACP,MAAM,CACP,CACD,CACD,CAUA,SAAS,EAAwB,EAAc,CAC9C,IAAM,EAAe,SAAS,cAAc,UAAU,EACtD,EAAa,MAAQ,EACrB,SAAS,KAAK,YAAY,CAAY,EACtC,GAAI,CAGH,GAFA,EAAa,OAAO,EAEhB,CADW,SAAS,YAAY,MAC1B,EACT,MAAU,MAAM,qCAAqC,CAEvD,QAAU,CACT,SAAS,KAAK,YAAY,CAAY,CACvC,CACD"}

package/dist/cx-CBSnSC36.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cx-CBSnSC36.js","names":[],"sources":["../src/utils/cx/cx.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\"text-mono\", \"text-size-inherit\"],\n\t\t},\n\t\ttheme: {\n\t\t\tspacing: [\"em\"],\n\t\t},\n\t},\n});\n\n/**\n * Conditionally add Tailwind (and other) CSS classes.\n *\n * Allows for tailwind overrides in LTR-specificity-like order of applied classes.\n */\nexport function cx(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n"],"mappings":"iFAGA,MAAM,EAAU,EAAoB,CACnC,OAAQ,CACP,YAAa,CACZ,YAAa,CAAC,YAAa,mBAAmB,CAC/C,EACA,MAAO,CACN,QAAS,CAAC,IAAI,CACf,CACD,CACD,CAAC,EAOD,SAAgB,EAAG,GAAG,EAAsB,CAC3C,OAAO,EAAQ,EAAK,CAAM,CAAC,CAC5B"}

package/dist/data-table.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-table.js","names":["Table","Row"],"sources":["../src/components/data-table/helpers.ts","../src/components/data-table/data-table.tsx"],"sourcesContent":["import type { SortingMode } from \"../../utils/sorting/direction.js\";\nimport type { SortDirection } from \"./types.js\";\n\nconst alphanumericSortingOrder = [\"unsorted\", \"asc\", \"desc\"] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\"unsorted\", \"desc\", \"asc\"] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(currentSortDirection: SortDirection, sortingMode: SortingMode) {\n\tconst sortOrder = sortingMode === \"alphanumeric\" ? alphanumericSortingOrder : timeSortingOrder;\n\n\treturn getNextInCircularList(sortOrder, currentSortDirection) ?? \"unsorted\";\n}\n\n/**\n * Get the next item in a circular list.\n * If the current item is not found in the list (or it's empty), return the fallback value.\n */\nfunction getNextInCircularList<T>(list: T[], currentItem: T, fallback?: T | undefined) {\n\tif (list.length === 0) {\n\t\treturn fallback;\n\t}\n\n\tconst currentItemIndex = list.findIndex((item) => item === currentItem);\n\tif (currentItemIndex === -1) {\n\t\treturn fallback;\n\t}\n\n\tconst nextIndex = (currentItemIndex + 1) % list.length;\n\treturn list.at(nextIndex) ?? fallback;\n}\n\nexport {\n\t//,\n\tgetNextSortDirection,\n\tgetNextInCircularList,\n};\n","import {\n\ttype Column,\n\ttype HeaderContext,\n\ttype Table as TableInstance,\n\ttype Row as TableRow,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tFragment,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { $timeSortingDirection, type SortingMode } from \"../../utils/sorting/direction.js\";\nimport { Button } from \"../button/button.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { SortIcon } from \"../icons/sort.js\";\nimport { Table } from \"../table/table.js\";\nimport { getNextSortDirection } from \"./helpers.js\";\nimport type { SortDirection } from \"./types.js\";\n\ntype DataTableContextShape<TData = unknown> = {\n\ttable: TableInstance<TData>;\n};\n\n// oxlint-disable-next-line @typescript-eslint/no-explicit-any -- React context cannot preserve this generic across provider boundaries.\nconst DataTableContext = createContext<DataTableContextShape<any> | null>(null);\n\n/**\n * @private\n */\nfunction useDataTableContext<TData>() {\n\tconst context = useContext(DataTableContext);\n\n\tinvariant(context, \"useDataTableContext should only be used within a DataTable child component\");\n\n\treturn context as DataTableContextShape<TData>;\n}\n\ntype DataTableProps<TData> = ComponentProps<typeof Table.Root> & {\n\ttable: TableInstance<TData>;\n};\n\n/**\n * The root container for a data table. Wraps all other `DataTable`\n * sub-components and provides the table context to its descendants.\n *\n * REQUIRED: Construct a TanStack Table instance via `useReactTable` (from\n * `@tanstack/react-table`, also re-exported from `@ngrok/mantle/data-table`)\n * and pass it through the `table` prop. The instance owns columns, data, and\n * any sorting / filtering / pagination state — the wrapper components read\n * from it.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableroot\n *\n * @example\n * ```tsx\n * import {\n *   DataTable,\n *   createColumnHelper,\n *   getCoreRowModel,\n *   useReactTable,\n * } from \"@ngrok/mantle/data-table\";\n *\n * type Row = { id: string; name: string };\n * const columnHelper = createColumnHelper<Row>();\n * const columns = [\n *   columnHelper.accessor(\"name\", {\n *     id: \"name\",\n *     header: () => <DataTable.Header>Name</DataTable.Header>,\n *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n *   }),\n * ];\n *\n * function MyTable({ data }: { data: Row[] }) {\n *   const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n *   const rows = table.getRowModel().rows;\n *\n *   return (\n *     <DataTable.Root table={table}>\n *       <DataTable.Head />\n *       <DataTable.Body>\n *         {rows.length > 0\n *           ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *           : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *       </DataTable.Body>\n *     </DataTable.Root>\n *   );\n * }\n * ```\n */\nfunction Root<TData>({ children, table, ...props }: DataTableProps<TData>) {\n\tconst context: DataTableContextShape<TData> = useMemo(() => ({ table }), [table]);\n\n\treturn (\n\t\t<DataTableContext.Provider value={context}>\n\t\t\t<Table.Root data-slot=\"data-table\" {...props}>\n\t\t\t\t<Table.Element>{children}</Table.Element>\n\t\t\t</Table.Root>\n\t\t</DataTableContext.Provider>\n\t);\n}\n\ntype DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof Button>, \"icon\"> &\n\tPick<HeaderContext<TData, TValue>, \"column\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Disable sorting for this column.\n\t\t\t\t * It will prevent the sorting direction from being toggled and any icon\n\t\t\t\t * from being shown.\n\t\t\t\t */\n\t\t\t\tdisableSorting: true;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: undefined;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode?: undefined;\n\t\t  }\n\t\t| {\n\t\t\t\tdisableSorting?: false;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: (sortDirection: SortDirection) => ReactNode;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode: SortingMode;\n\t\t  }\n\t);\n\n/**\n * A sortable button toggle for a column header in a data table. Renders a sort\n * icon that reflects the current direction, handles ARIA announcements, and\n * cycles through sort states on click.\n *\n * Each click cycles through:\n * - For `\"alphanumeric\"` sorting: `unsorted → ascending → descending → unsorted`\n * - For `\"time\"` sorting: `unsorted → newest-first → oldest-first → unsorted`\n *\n * For right-aligned numeric columns, pass `className=\"justify-end\"` and\n * `iconPlacement=\"start\"` so the sort icon stays paired with the label.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n *\n * @example\n * ```tsx\n * columnHelper.accessor(\"email\", {\n *   id: \"email\",\n *   header: (props) => (\n *     <DataTable.Header>\n *       <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *         Email\n *       </DataTable.HeaderSortButton>\n *     </DataTable.Header>\n *   ),\n *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n * });\n * ```\n */\nfunction HeaderSortButton<TData, TValue>({\n\tchildren,\n\tclassName,\n\tcolumn,\n\tdisableSorting = false,\n\ticonPlacement = \"end\",\n\tsortingMode,\n\tsortIcon: propSortIcon,\n\tonClick,\n\t...props\n}: DataTableHeaderSortButtonProps<TData, TValue>) {\n\tconst rawSortDirection = column.getIsSorted();\n\tconst canSort = !disableSorting && column.getCanSort();\n\n\tconst sortDirection: SortDirection =\n\t\tcanSort && typeof rawSortDirection === \"string\" ? rawSortDirection : \"unsorted\";\n\n\tconst sortIcon = propSortIcon?.(sortDirection) ?? (\n\t\t<DefaultSortIcon mode={sortingMode} direction={sortDirection} />\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tappearance=\"ghost\"\n\t\t\tdata-slot=\"data-table-header-sort-button\"\n\t\t\tclassName={cx(\n\t\t\t\t\"flex justify-start w-full h-full rounded-none not-disabled:active:scale-none text-muted\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-sort-direction={sortDirection}\n\t\t\tdata-table-header-action\n\t\t\ticon={sortIcon}\n\t\t\ticonPlacement={iconPlacement}\n\t\t\tonClick={(event) => {\n\t\t\t\tonClick?.(event);\n\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!canSort || disableSorting || typeof sortingMode === \"undefined\") {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleNextSortingDirection(column, sortingMode);\n\t\t\t}}\n\t\t\tpriority=\"neutral\"\n\t\t\ttype=\"button\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{canSort && sortDirection !== \"unsorted\" && (\n\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\tColumn sorted in{\" \"}\n\t\t\t\t\t{sortingMode === \"alphanumeric\"\n\t\t\t\t\t\t? sortDirection === \"asc\"\n\t\t\t\t\t\t\t? \"ascending\"\n\t\t\t\t\t\t\t: \"descending\"\n\t\t\t\t\t\t: $timeSortingDirection(sortDirection)}{\" \"}\n\t\t\t\t\torder\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\n\ntype DataTableHeaderProps = ComponentProps<typeof Table.Header>;\n\n/**\n * A `<th>` optimized for header actions. Wrap each column's header content in\n * this; for sortable columns, nest a `DataTable.HeaderSortButton` inside.\n * Non-sortable columns can render plain text.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheader\n *\n * @example\n * ```tsx\n * columnHelper.accessor(\"name\", {\n *   id: \"name\",\n *   header: (props) => (\n *     <DataTable.Header>\n *       <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *         Name\n *       </DataTable.HeaderSortButton>\n *     </DataTable.Header>\n *   ),\n *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n * });\n * ```\n */\nfunction Header({ children, className, ...props }: DataTableHeaderProps) {\n\treturn (\n\t\t<Table.Header\n\t\t\tdata-slot=\"data-table-header\"\n\t\t\tclassName={cx(\"has-data-table-header-action:px-0\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Table.Header>\n\t);\n}\n\n/**\n * The `<tbody>` container for rows of data. Typically wraps a map of\n * `DataTable.Row`, with a `DataTable.EmptyRow` fallback when there is no data.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatablebody\n *\n * @example\n * ```tsx\n * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n * const rows = table.getRowModel().rows;\n *\n * <DataTable.Root table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     {rows.length > 0\n *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *   </DataTable.Body>\n * </DataTable.Root>\n * ```\n */\nconst Body = forwardRef<\n\tComponentRef<typeof Table.Body>,\n\tComponentPropsWithoutRef<typeof Table.Body>\n>((props, ref) => <Table.Body ref={ref} data-slot=\"data-table-body\" {...props} />);\nBody.displayName = \"DataTableBody\";\n\ntype DataTableHeadProps = Omit<ComponentProps<typeof Table.Head>, \"children\">;\n\n/**\n * The `<thead>` container that renders column headers automatically from\n * `table.getHeaderGroups()`. Does not accept children — headers come from each\n * column's `header` definition on the TanStack Table column config.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatablehead\n *\n * @example\n * ```tsx\n * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n * const rows = table.getRowModel().rows;\n *\n * <DataTable.Root table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     {rows.length > 0\n *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *   </DataTable.Body>\n * </DataTable.Root>\n * ```\n */\nfunction Head<TData>(props: DataTableHeadProps) {\n\tconst { table } = useDataTableContext<TData>();\n\n\treturn (\n\t\t<Table.Head data-slot=\"data-table-head\" {...props}>\n\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t<Table.Row key={headerGroup.id}>\n\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t<Fragment key={header.id}>\n\t\t\t\t\t\t\t{header.isPlaceholder ? (\n\t\t\t\t\t\t\t\t<Table.Header key={header.id} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tflexRender(header.column.columnDef.header, header.getContext())\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t))}\n\t\t\t\t</Table.Row>\n\t\t\t))}\n\t\t</Table.Head>\n\t);\n}\n\ntype DataTableRowProps<TData> = Omit<ComponentProps<typeof Table.Row>, \"children\"> & {\n\trow: TableRow<TData>;\n};\n\n/**\n * A single data table body row rendered from a TanStack Table row instance.\n * Does not accept children — cells come from each column's `cell` definition.\n *\n * When `onClick` is provided, the row automatically receives `cursor-pointer`.\n * Pass a different `cursor-*` class via `className` (e.g. `cursor-default`,\n * `cursor-wait`) to override. For keyboard and screen-reader access, also\n * render a `<Link>` inside the primary cell — a `<tr>` is not focusable.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatablerow\n *\n * @example\n * ```tsx\n * const navigate = useNavigate();\n *\n * {rows.map((row) => (\n *   <DataTable.Row\n *     key={row.id}\n *     row={row}\n *     onClick={() => navigate(href(\"/payments/:id\", { id: row.original.id }))}\n *   />\n * ))}\n * ```\n */\nfunction Row<TData>({ className, row, ...props }: DataTableRowProps<TData>) {\n\treturn (\n\t\t<Table.Row\n\t\t\tdata-slot=\"data-table-row\"\n\t\t\tclassName={cx(props.onClick && \"cursor-pointer\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t<Fragment key={cell.id}>\n\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</Table.Row>\n\t);\n}\n\ntype DataTableEmptyRowProps = ComponentProps<typeof Table.Row>;\n\n/**\n * An empty-state row that spans every column. Render this as the `else` branch\n * when `rows.length === 0` to keep the table's frame intact instead of\n * collapsing to an empty `<tbody>`. The cell `colSpan` is computed from the\n * TanStack Table instance via context, so no manual column count is needed.\n *\n * Host an `Empty` for a real empty state, and branch on whether a filter is\n * active so the user sees the right message (and a way out when filtered):\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * import { DataTable } from \"@ngrok/mantle/data-table\";\n * import { Empty } from \"@ngrok/mantle/empty\";\n * import { Button } from \"@ngrok/mantle/button\";\n * import { MagnifyingGlassIcon } from \"@phosphor-icons/react/MagnifyingGlass\";\n * import { TrayIcon } from \"@phosphor-icons/react/Tray\";\n *\n * // `table` is your useReactTable instance; derive everything else from it.\n * const rows = table.getRowModel().rows;\n * const isFiltered = (table.getState().globalFilter ?? \"\") !== \"\";\n *\n * // EmptyRow already spans every column and Empty.Root centers itself — drop a\n * // single Empty.Root in as the child; don't hand-roll a <td> or any centering.\n * <DataTable.Body>\n *   {rows.length > 0 ? (\n *     rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *   ) : isFiltered ? (\n *     <DataTable.EmptyRow>\n *       <Empty.Root>\n *         <Empty.Icon svg={<MagnifyingGlassIcon />} />\n *         <Empty.Title>No results match your filter</Empty.Title>\n *         <Empty.Actions>\n *           <Button\n *             type=\"button\"\n *             appearance=\"outlined\"\n *             priority=\"neutral\"\n *             onClick={() => table.setGlobalFilter(\"\")}\n *           >\n *             Clear filters\n *           </Button>\n *         </Empty.Actions>\n *       </Empty.Root>\n *     </DataTable.EmptyRow>\n *   ) : (\n *     <DataTable.EmptyRow>\n *       <Empty.Root>\n *         <Empty.Icon svg={<TrayIcon />} />\n *         <Empty.Title>No endpoints yet</Empty.Title>\n *       </Empty.Root>\n *     </DataTable.EmptyRow>\n *   )}\n * </DataTable.Body>\n * ```\n */\nfunction EmptyRow<TData>({ children, ...props }: DataTableEmptyRowProps) {\n\tconst { table } = useDataTableContext<TData>();\n\tconst numberOfColumns = table.getAllColumns().length;\n\n\treturn (\n\t\t<Table.Row data-slot=\"data-table-empty-row\" {...props}>\n\t\t\t<Table.Cell colSpan={numberOfColumns}>{children}</Table.Cell>\n\t\t</Table.Row>\n\t);\n}\n\n/**\n * Internal: renders the visual indicator on the left edge of the sticky action\n * column — a 1px divider plus a soft shadow gradient that reads as content\n * sliding under the pinned column. Positioned as a 6px strip sitting\n * immediately to the left of its sticky parent cell; `-inset-y-px` lets\n * adjacent rows' strips overlap at row dividers so the effect reads as one\n * continuous column instead of per-row blobs.\n *\n * Rendered as a child `<span>` because box-shadow on `<td>`/`<th>` is\n * unreliable across table layout modes.\n */\nfunction StickyColIndicator() {\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tclassName={cx(\n\t\t\t\t\"pointer-events-none absolute -inset-y-px -left-1.5 w-1.5\",\n\t\t\t\t\"opacity-0 transition-opacity group-data-sticky-active/table:opacity-100\",\n\t\t\t\t// 1px divider painted at the strip's right edge (= the pinned\n\t\t\t\t// cell's left edge).\n\t\t\t\t\"shadow-[1px_0_0_0_var(--border-color-card-muted)]\",\n\t\t\t\t// Soft shadow gradient fading leftward. Uses mantle's shadow\n\t\t\t\t// tokens so the alpha adapts to light/dark themes.\n\t\t\t\t\"bg-linear-to-l to-transparent\",\n\t\t\t\t\"from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]\",\n\t\t\t)}\n\t\t/>\n\t);\n}\n\ntype DataTableActionCellProps = ComponentProps<typeof Table.Cell>;\n\n/**\n * A sticky-right `<td>` for per-row action buttons (typically an `IconButton`\n * that opens a `DropdownMenu`). Pair with `DataTable.ActionHeader`.\n *\n * If the row has `onClick`, pass `onClick={(event) => event.stopPropagation()}`\n * on this cell so clicks on action controls don't bubble and fire the row\n * handler.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableactioncell\n *\n * @example\n * ```tsx\n * columnHelper.display({\n *   id: \"actions\",\n *   header: () => <DataTable.ActionHeader />,\n *   cell: () => (\n *     <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>\n *       <DropdownMenu.Root>...</DropdownMenu.Root>\n *     </DataTable.ActionCell>\n *   ),\n * });\n * ```\n */\nfunction ActionCell({ children, className, ...props }: DataTableActionCellProps) {\n\treturn (\n\t\t<Table.Cell\n\t\t\t// Marks this cell as a sticky right-edge column so Table.Root can suppress\n\t\t\t// its container-level right-side scroll fade (keeping this cell opaque).\n\t\t\tdata-mantle-table-sticky-right\n\t\t\tdata-slot=\"data-table-action-cell\"\n\t\t\tclassName={cx(\n\t\t\t\t// `bg-inherit` keeps the sticky cell opaque with the row's current bg\n\t\t\t\t// (including hover state) so scrolling cells don't show through.\n\t\t\t\t// Avoid `display: flex` here — it overrides `display: table-cell`,\n\t\t\t\t// preventing the cell from stretching to the full row height in\n\t\t\t\t// `border-separate` mode.\n\t\t\t\t\"sticky z-10 right-0 text-end align-middle bg-inherit p-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<StickyColIndicator />\n\t\t\t{children}\n\t\t</Table.Cell>\n\t);\n}\n\ntype DataTableActionHeaderProps = ComponentProps<typeof Table.Header>;\n\n/**\n * A sticky header cell that pairs with `DataTable.ActionCell`. Use this as the\n * header for the action column so the pinned column visually aligns across the\n * header and every body row when the table scrolls horizontally.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableactionheader\n *\n * @example\n * ```tsx\n * columnHelper.display({\n *   id: \"actions\",\n *   header: () => <DataTable.ActionHeader />,\n *   cell: () => <DataTable.ActionCell>{...}</DataTable.ActionCell>,\n * })\n * ```\n */\nfunction ActionHeader({ children, className, ...props }: DataTableActionHeaderProps) {\n\tconst { table } = useDataTableContext();\n\tconst hasRows = table.getRowModel().rows.length > 0;\n\n\treturn (\n\t\t<Table.Header\n\t\t\t// Only mark as sticky-right when body rows exist so the empty state\n\t\t\t// doesn't suppress the container's right-side scroll fade.\n\t\t\t{...(hasRows ? { \"data-mantle-table-sticky-right\": true } : {})}\n\t\t\tdata-slot=\"data-table-action-header\"\n\t\t\tclassName={cx(\n\t\t\t\t// `bg-inherit` keeps the sticky header opaque with the thead's current bg.\n\t\t\t\thasRows && \"sticky z-10 right-0 bg-inherit\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{hasRows && <StickyColIndicator />}\n\t\t\t{children}\n\t\t</Table.Header>\n\t);\n}\n\n// Set display names to preserve original component names for debugging\nRoot.displayName = \"DataTable\";\nActionCell.displayName = \"DataTableActionCell\";\nActionHeader.displayName = \"DataTableActionHeader\";\nBody.displayName = \"DataTableBody\";\nEmptyRow.displayName = \"DataTableEmptyRow\";\nHead.displayName = \"DataTableHead\";\nHeader.displayName = \"DataTableHeader\";\nHeaderSortButton.displayName = \"DataTableHeaderSortButton\";\nRow.displayName = \"DataTableRow\";\n\n/**\n * Use `DataTable` for INTERACTIVE tabular data — sorting, filtering, pagination,\n * row selection, and server-side or client-side data. Built on TanStack Table;\n * the consumer MUST construct a `useReactTable` instance from\n * `@tanstack/react-table` and pass it to `DataTable.Root` via the `table` prop.\n * Every TanStack utility (`createColumnHelper`, `getCoreRowModel`,\n * `getSortedRowModel`, `getPaginationRowModel`, `getFilteredRowModel`,\n * `useReactTable`, …) is re-exported from `@ngrok/mantle/data-table` so a single\n * import covers both the wrapper components and the TanStack helpers.\n *\n * For STATIC, layout-driven tables (read-only data dumps, simple key/value\n * displays, plain markup tables with no interactivity), use `Table` instead.\n *\n * @see https://mantle.ngrok.com/components/data-table\n *\n * @example\n * Composition:\n * ```\n * DataTable.Root\n * ├── DataTable.Head\n * │   └── DataTable.Row\n * │       ├── DataTable.Header\n * │       │   └── DataTable.HeaderSortButton\n * │       └── DataTable.ActionHeader\n * └── DataTable.Body\n *     ├── DataTable.Row\n *     │   ├── DataTable.Cell\n *     │   └── DataTable.ActionCell\n *     └── DataTable.EmptyRow\n * ```\n *\n * @example\n * Minimal — read-only table with a single sortable column:\n * ```tsx\n * import {\n *   DataTable,\n *   createColumnHelper,\n *   getCoreRowModel,\n *   useReactTable,\n * } from \"@ngrok/mantle/data-table\";\n *\n * type Row = { id: string; name: string };\n *\n * const columnHelper = createColumnHelper<Row>();\n * const columns = [\n *   columnHelper.accessor(\"name\", {\n *     id: \"name\",\n *     header: (props) => (\n *       <DataTable.Header>\n *         <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *           Name\n *         </DataTable.HeaderSortButton>\n *       </DataTable.Header>\n *     ),\n *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n *   }),\n * ];\n *\n * function MyTable({ data }: { data: Row[] }) {\n *   const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n *   const rows = table.getRowModel().rows;\n *\n *   return (\n *     <DataTable.Root table={table}>\n *       <DataTable.Head />\n *       <DataTable.Body>\n *         {rows.length > 0\n *           ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *           : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *       </DataTable.Body>\n *     </DataTable.Root>\n *   );\n * }\n * ```\n *\n * @example\n * Sortable, filterable, paginated, with both empty states — a global text\n * filter, the no-data vs. no-results-for-filter empty states (an `Empty`\n * dropped into `DataTable.EmptyRow`), and `CursorPagination` with a page-size\n * dropdown:\n * ```tsx\n * import {\n *   DataTable,\n *   createColumnHelper,\n *   getCoreRowModel,\n *   getFilteredRowModel,\n *   getPaginationRowModel,\n *   getSortedRowModel,\n *   useReactTable,\n * } from \"@ngrok/mantle/data-table\";\n * import { Button } from \"@ngrok/mantle/button\";\n * import { CursorPagination } from \"@ngrok/mantle/pagination\";\n * import { Empty } from \"@ngrok/mantle/empty\";\n * import { Input } from \"@ngrok/mantle/input\";\n * import { MagnifyingGlassIcon } from \"@phosphor-icons/react/MagnifyingGlass\";\n * import { TrayIcon } from \"@phosphor-icons/react/Tray\";\n * import { useState } from \"react\";\n *\n * type Payment = { id: string; amount: number; status: \"pending\" | \"succeeded\" | \"failed\"; email: string };\n *\n * // `defaultPageSize` seeds an UNCONTROLLED <Select>, so keep it stable — a\n * // module const (or the table's INITIAL page size), never the live page size.\n * const DEFAULT_PAGE_SIZE = 10;\n *\n * const columnHelper = createColumnHelper<Payment>();\n * const columns = [\n *   columnHelper.accessor(\"status\", {\n *     id: \"status\",\n *     header: (props) => (\n *       <DataTable.Header>\n *         <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *           Status\n *         </DataTable.HeaderSortButton>\n *       </DataTable.Header>\n *     ),\n *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n *   }),\n *   columnHelper.accessor(\"email\", {\n *     id: \"email\",\n *     header: (props) => (\n *       <DataTable.Header>\n *         <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *           Email\n *         </DataTable.HeaderSortButton>\n *       </DataTable.Header>\n *     ),\n *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n *   }),\n *   columnHelper.accessor(\"amount\", {\n *     id: \"amount\",\n *     header: (props) => (\n *       <DataTable.Header className=\"text-right\">\n *         <DataTable.HeaderSortButton\n *           column={props.column}\n *           sortingMode=\"alphanumeric\"\n *           className=\"justify-end\"\n *           iconPlacement=\"start\"\n *         >\n *           Amount\n *         </DataTable.HeaderSortButton>\n *       </DataTable.Header>\n *     ),\n *     cell: (props) => (\n *       <DataTable.Cell className=\"text-right tabular-nums\">\n *         {new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\" }).format(props.getValue())}\n *       </DataTable.Cell>\n *     ),\n *   }),\n * ];\n *\n * function PaymentsTable({ data }: { data: Payment[] }) {\n *   const [globalFilter, setGlobalFilter] = useState(\"\");\n *\n *   const table = useReactTable({\n *     data,\n *     columns,\n *     state: { globalFilter },\n *     onGlobalFilterChange: setGlobalFilter,\n *     getCoreRowModel: getCoreRowModel(),\n *     getSortedRowModel: getSortedRowModel(),\n *     getFilteredRowModel: getFilteredRowModel(),\n *     getPaginationRowModel: getPaginationRowModel(),\n *     initialState: { pagination: { pageSize: DEFAULT_PAGE_SIZE } },\n *   });\n *   const rows = table.getRowModel().rows;\n *   const isFiltered = globalFilter.trim() !== \"\";\n *\n *   return (\n *     <div className=\"space-y-4\">\n *       <Input\n *         placeholder=\"Filter payments…\"\n *         value={globalFilter}\n *         onChange={(event) => setGlobalFilter(event.target.value)}\n *       />\n *       <DataTable.Root table={table}>\n *         <DataTable.Head />\n *         <DataTable.Body>\n *           {rows.length > 0 ? (\n *             rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *           ) : isFiltered ? (\n *             // No results for the active filter — give the user a way out.\n *             <DataTable.EmptyRow>\n *               <Empty.Root>\n *                 <Empty.Icon svg={<MagnifyingGlassIcon />} />\n *                 <Empty.Title>No payments match your filter</Empty.Title>\n *                 <Empty.Description>\n *                   <p>Try a different search, or clear the filter to see everything.</p>\n *                 </Empty.Description>\n *                 <Empty.Actions>\n *                   <Button\n *                     type=\"button\"\n *                     appearance=\"outlined\"\n *                     priority=\"neutral\"\n *                     onClick={() => setGlobalFilter(\"\")}\n *                   >\n *                     Clear filters\n *                   </Button>\n *                 </Empty.Actions>\n *               </Empty.Root>\n *             </DataTable.EmptyRow>\n *           ) : (\n *             // No data yet — informational, optionally a primary \"create\" action.\n *             <DataTable.EmptyRow>\n *               <Empty.Root>\n *                 <Empty.Icon svg={<TrayIcon />} />\n *                 <Empty.Title>No payments yet</Empty.Title>\n *                 <Empty.Description>\n *                   <p>Payments you receive will appear here.</p>\n *                 </Empty.Description>\n *               </Empty.Root>\n *             </DataTable.EmptyRow>\n *           )}\n *         </DataTable.Body>\n *       </DataTable.Root>\n *       <CursorPagination.Root className=\"flex justify-end\" defaultPageSize={DEFAULT_PAGE_SIZE}>\n *         <CursorPagination.PageSizeSelect\n *           onChangePageSize={(size) => {\n *             table.setPageSize(size);\n *             table.setPageIndex(0); // reset to the first page when the size changes\n *           }}\n *         />\n *         <CursorPagination.Buttons\n *           hasPreviousPage={table.getCanPreviousPage()}\n *           hasNextPage={table.getCanNextPage()}\n *           onPreviousPage={() => table.previousPage()}\n *           onNextPage={() => table.nextPage()}\n *         />\n *       </CursorPagination.Root>\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * Row action column — a sticky right-edge cell with a dropdown menu of actions.\n * If the row also has `onClick`, stop propagation on the action cell so clicks\n * don't bubble up and fire the row handler:\n * ```tsx\n * import { DataTable, createColumnHelper } from \"@ngrok/mantle/data-table\";\n * import { DropdownMenu } from \"@ngrok/mantle/dropdown-menu\";\n * import { IconButton } from \"@ngrok/mantle/icon-button\";\n * import { DotsThreeVerticalIcon } from \"@phosphor-icons/react/DotsThreeVertical\";\n *\n * const columnHelper = createColumnHelper<Payment>();\n *\n * const columns = [\n *   // …other columns…\n *   columnHelper.display({\n *     id: \"actions\",\n *     header: () => <DataTable.ActionHeader />,\n *     cell: (props) => (\n *       <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>\n *         <DropdownMenu.Root>\n *           <DropdownMenu.Trigger asChild>\n *             <IconButton type=\"button\" label=\"Actions\" icon={<DotsThreeVerticalIcon />} />\n *           </DropdownMenu.Trigger>\n *           <DropdownMenu.Content align=\"end\">\n *             <DropdownMenu.Item onSelect={() => copy(props.row.original.id)}>\n *               Copy ID\n *             </DropdownMenu.Item>\n *             <DropdownMenu.Item onSelect={() => refund(props.row.original.id)}>\n *               Refund\n *             </DropdownMenu.Item>\n *           </DropdownMenu.Content>\n *         </DropdownMenu.Root>\n *       </DataTable.ActionCell>\n *     ),\n *   }),\n * ];\n * ```\n *\n * @example\n * Clickable row navigating to a detail page — also render a `<Link>` inside the\n * primary cell so the row is reachable by keyboard and screen readers (a `<tr>`\n * is not focusable):\n * ```tsx\n * import { DataTable } from \"@ngrok/mantle/data-table\";\n * import { Link, href, useNavigate } from \"react-router\";\n *\n * function PaymentsTable({ data }: { data: Payment[] }) {\n *   const navigate = useNavigate();\n *   const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n *   const rows = table.getRowModel().rows;\n *\n *   return (\n *     <DataTable.Root table={table}>\n *       <DataTable.Head />\n *       <DataTable.Body>\n *         {rows.map((row) => (\n *           <DataTable.Row\n *             key={row.id}\n *             row={row}\n *             onClick={() => navigate(href(\"/payments/:id\", { id: row.original.id }))}\n *           />\n *         ))}\n *       </DataTable.Body>\n *     </DataTable.Root>\n *   );\n * }\n *\n * // The primary column's cell renders a <Link> for keyboard / a11y reachability.\n * columnHelper.accessor(\"email\", {\n *   id: \"email\",\n *   header: (props) => <DataTable.Header>Email</DataTable.Header>,\n *   cell: (props) => (\n *     <DataTable.Cell>\n *       <Link to={href(\"/payments/:id\", { id: props.row.original.id })}>\n *         {props.getValue()}\n *       </Link>\n *     </DataTable.Cell>\n *   ),\n * });\n * ```\n */\nconst DataTable = {\n\t/**\n\t * The root container of the data table component. REQUIRED: pass a\n\t * `useReactTable` instance (from `@tanstack/react-table`, also re-exported\n\t * from `@ngrok/mantle/data-table`) via the `table` prop — every other\n\t * `DataTable.*` part reads from it through context.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableroot\n\t *\n\t * @example\n\t * ```tsx\n\t * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n\t * const rows = table.getRowModel().rows;\n\t *\n\t * <DataTable.Root table={table}>\n\t *   <DataTable.Head />\n\t *   <DataTable.Body>\n\t *     {rows.length > 0\n\t *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n\t *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n\t *   </DataTable.Body>\n\t * </DataTable.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A sticky action cell positioned at the end of each row, typically holding\n\t * an `IconButton` that opens a `DropdownMenu`. Pair with `DataTable.ActionHeader`.\n\t *\n\t * If the row has `onClick`, stop propagation on this cell so clicks on action\n\t * controls don't bubble up and fire the row handler.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableactioncell\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.display({\n\t *   id: \"actions\",\n\t *   header: () => <DataTable.ActionHeader />,\n\t *   cell: () => (\n\t *     <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>\n\t *       <DropdownMenu.Root>...</DropdownMenu.Root>\n\t *     </DataTable.ActionCell>\n\t *   ),\n\t * });\n\t * ```\n\t */\n\tActionCell,\n\t/**\n\t * A sticky header cell that pairs with `DataTable.ActionCell`, keeping the\n\t * action column aligned across the header and body when scrolling horizontally.\n\t * Use as the `header` for a `columnHelper.display` action column.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableactionheader\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.display({\n\t *   id: \"actions\",\n\t *   header: () => <DataTable.ActionHeader />,\n\t *   cell: () => (\n\t *     <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>\n\t *       <DropdownMenu.Root>...</DropdownMenu.Root>\n\t *     </DataTable.ActionCell>\n\t *   ),\n\t * });\n\t * ```\n\t */\n\tActionHeader,\n\t/**\n\t * A `<td>` for rendering an individual data cell. Re-exported from\n\t * `Table.Cell`. Every cell rendered by a column's `cell` function should\n\t * be wrapped in this — a raw `<td>` skips mantle typography and padding.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablecell\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.accessor(\"name\", {\n\t *   id: \"name\",\n\t *   header: (props) => <DataTable.Header>Name</DataTable.Header>,\n\t *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n\t * });\n\t * ```\n\t */\n\tCell: Table.Cell,\n\t/**\n\t * The `<tbody>` container for rows of data. Typically wraps a map of\n\t * `DataTable.Row`, with a `DataTable.EmptyRow` fallback when there is\n\t * no data.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablebody\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Body>\n\t *   {rows.length > 0\n\t *     ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n\t *     : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n\t * </DataTable.Body>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An empty-state row that spans every column. Render this as the `else`\n\t * branch when `rows.length === 0` to keep the table's frame intact instead\n\t * of collapsing to an empty `<tbody>`.\n\t *\n\t * Drop an `Empty` in as the child for a real empty state — `EmptyRow` spans\n\t * every column and `Empty.Root` centers itself, so no `<td>` or centering\n\t * markup is needed.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * import { DataTable } from \"@ngrok/mantle/data-table\";\n\t * import { Empty } from \"@ngrok/mantle/empty\";\n\t * import { TrayIcon } from \"@phosphor-icons/react/Tray\";\n\t *\n\t * <DataTable.EmptyRow>\n\t *   <Empty.Root>\n\t *     <Empty.Icon svg={<TrayIcon />} />\n\t *     <Empty.Title>No endpoints yet</Empty.Title>\n\t *   </Empty.Root>\n\t * </DataTable.EmptyRow>\n\t * ```\n\t */\n\tEmptyRow,\n\t/**\n\t * The `<thead>` container that renders column headers automatically from\n\t * `table.getHeaderGroups()`. Does not accept children — headers come from\n\t * each column's `header` definition.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablehead\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Root table={table}>\n\t *   <DataTable.Head />\n\t *   <DataTable.Body>...</DataTable.Body>\n\t * </DataTable.Root>\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A `<th>` optimized for header actions. Wrap each column's header content\n\t * in this; for sortable columns, nest a `DataTable.HeaderSortButton` inside.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.accessor(\"name\", {\n\t *   id: \"name\",\n\t *   header: (props) => (\n\t *     <DataTable.Header>\n\t *       <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n\t *         Name\n\t *       </DataTable.HeaderSortButton>\n\t *     </DataTable.Header>\n\t *   ),\n\t *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n\t * });\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A sortable button toggle for a column header. Clicks cycle through\n\t * sort directions: for `\"alphanumeric\"`, `unsorted → asc → desc → unsorted`;\n\t * for `\"time\"`, `unsorted → desc (newest-first) → asc → unsorted`.\n\t *\n\t * Pass `className=\"justify-end\"` and `iconPlacement=\"start\"` for\n\t * right-aligned numeric columns so the sort icon stays paired with the label.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.accessor(\"email\", {\n\t *   id: \"email\",\n\t *   header: (props) => (\n\t *     <DataTable.Header>\n\t *       <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n\t *         Email\n\t *       </DataTable.HeaderSortButton>\n\t *     </DataTable.Header>\n\t *   ),\n\t *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n\t * });\n\t * ```\n\t */\n\tHeaderSortButton,\n\t/**\n\t * A single data table body row rendered from a TanStack Table row instance.\n\t * Does not accept children — cells come from each column's `cell` definition.\n\t *\n\t * When `onClick` is provided, the row automatically receives `cursor-pointer`.\n\t * Pass a different `cursor-*` class via `className` to override. For keyboard\n\t * and screen-reader access, also render a `<Link>` inside the primary cell.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablerow\n\t *\n\t * @example\n\t * ```tsx\n\t * const navigate = useNavigate();\n\t *\n\t * {rows.map((row) => (\n\t *   <DataTable.Row\n\t *     key={row.id}\n\t *     row={row}\n\t *     onClick={() => navigate(href(\"/payments/:id\", { id: row.original.id }))}\n\t *   />\n\t * ))}\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tDataTable,\n};\n\ntype DefaultSortIconProps = SvgAttributes & {\n\tdirection: SortDirection | undefined;\n\tmode: SortingMode | undefined;\n};\n\nfunction DefaultSortIcon({ direction, mode, ...props }: DefaultSortIconProps) {\n\tif (direction === \"unsorted\" || !mode || !direction) {\n\t\treturn <svg aria-hidden {...props} />;\n\t}\n\n\treturn <SortIcon mode={mode} direction={direction} {...props} />;\n}\n\n/**\n * Toggle the sorting direction of a column.\n * This ordering is typically toggled by clicking the column header.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n *   unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n *   unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n *   this is equivalent to the inverse of alphanumeric sorting, or\n *   unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction toggleNextSortingDirection<TData, TValue>(\n\tcolumn: Column<TData, TValue>,\n\tsortingMode: SortingMode,\n) {\n\tif (!column.getCanSort()) {\n\t\treturn;\n\t}\n\n\tconst sortDirection = column.getIsSorted();\n\tconst currentSortDirection: SortDirection =\n\t\ttypeof sortDirection === \"string\" ? sortDirection : \"unsorted\";\n\n\tconst nextSortDirection = getNextSortDirection(currentSortDirection, sortingMode);\n\n\tswitch (nextSortDirection) {\n\t\tcase \"unsorted\":\n\t\t\tcolumn.clearSorting();\n\t\t\treturn;\n\t\tcase \"asc\":\n\t\t\tcolumn.toggleSorting(false);\n\t\t\treturn;\n\t\tcase \"desc\":\n\t\t\tcolumn.toggleSorting(true);\n\t\t\treturn;\n\t\tdefault:\n\t\t\treturn;\n\t}\n}\n"],"mappings":"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"}

package/dist/deep-non-nullable-BxRoySYR.d.ts

@@ -1,8 +0,0 @@
-//#region src/types/deep-non-nullable.d.ts
-/**
- * Makes all properties in an object non-nullable, recursively.
- */
-type DeepNonNullable<Type> = { [Property in keyof Type]-?: Type[Property] & {} };
-//#endregion
-export { DeepNonNullable as t };
-//# sourceMappingURL=deep-non-nullable-BxRoySYR.d.ts.map

package/dist/description-list.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"description-list.js","names":[],"sources":["../src/components/description-list/description-list.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype DescriptionListProps = ComponentProps<\"dl\"> & WithAsChild;\n\n/**\n * A semantically correct description list built on the HTML `<dl>` element.\n * Renders a list of label/value pairs with alternating row backgrounds,\n * commonly used in detail views to display metadata about a resource.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistroot\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\n *\n * @example\n * ```tsx\n * <DescriptionList.Root>\n *   <DescriptionList.Item>\n *     <DescriptionList.Label>Name</DescriptionList.Label>\n *     <DescriptionList.Value>my-api-key</DescriptionList.Value>\n *   </DescriptionList.Item>\n * </DescriptionList.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"dl\">, DescriptionListProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dl\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"description-list\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-neutral-500/5 p-1\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"DescriptionList\";\n\ntype DescriptionListItemProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A wrapper that groups a `DescriptionList.Label` and `DescriptionList.Value`\n * pair. Renders as a `<div>` inside the `<dl>` with a subgrid layout that\n * inherits column tracks from the root.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistitem\n *\n * @example\n * ```tsx\n * <DescriptionList.Item>\n *   <DescriptionList.Label>ID</DescriptionList.Label>\n *   <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>\n * </DescriptionList.Item>\n * ```\n */\nconst Item = forwardRef<ComponentRef<\"div\">, DescriptionListItemProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"description-list-item\"\n\t\t\t\tclassName={cx(\"rounded-sm col-span-full grid grid-cols-subgrid items-center\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nItem.displayName = \"DescriptionListItem\";\n\ntype DescriptionListLabelProps = ComponentProps<\"dt\"> & WithAsChild;\n\n/**\n * The label for a description list item. Renders as a `<dt>` element.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistlabel\n *\n * @example\n * ```tsx\n * <DescriptionList.Label>Name</DescriptionList.Label>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"dt\">, DescriptionListLabelProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dt\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"description-list-label\"\n\t\t\t\tclassName={cx(\"text-muted text-sm font-sans font-medium min-w-36 p-2\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nLabel.displayName = \"DescriptionListLabel\";\n\ntype DescriptionListValueProps = ComponentProps<\"dd\"> & WithAsChild;\n\n/**\n * The value for a description list item. Renders as a `<dd>` element.\n * Compose any content inside — the component is intentionally \"dumb\" and\n * imposes no layout on its children.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistvalue\n *\n * @example\n * ```tsx\n * <DescriptionList.Value>\n *   aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n * </DescriptionList.Value>\n * ```\n */\nconst Value = forwardRef<ComponentRef<\"dd\">, DescriptionListValueProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dd\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"description-list-value\"\n\t\t\t\tclassName={cx(\"text-body font-mono text-mono py-2 px-3\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nValue.displayName = \"DescriptionListValue\";\n\n/**\n * A semantically correct description list built on the HTML `<dl>` element.\n * Renders a list of label/value pairs with alternating row backgrounds,\n * commonly used in detail views to display metadata about a resource\n * (e.g., API keys, secrets, domains).\n *\n * Compose with `DescriptionList.Item`, `DescriptionList.Label`, and\n * `DescriptionList.Value` as direct children.\n *\n * @see https://mantle.ngrok.com/components/description-list\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\n *\n * @example\n * Composition:\n * ```\n * DescriptionList.Root\n * └── DescriptionList.Item\n *     ├── DescriptionList.Label\n *     └── DescriptionList.Value\n * ```\n *\n * @example\n * ```tsx\n * <DescriptionList.Root>\n *   <DescriptionList.Item>\n *     <DescriptionList.Label>Name</DescriptionList.Label>\n *     <DescriptionList.Value>my-api-key</DescriptionList.Value>\n *   </DescriptionList.Item>\n *   <DescriptionList.Item>\n *     <DescriptionList.Label>ID</DescriptionList.Label>\n *     <DescriptionList.Value>\n *       aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n *     </DescriptionList.Value>\n *   </DescriptionList.Item>\n * </DescriptionList.Root>\n * ```\n */\nconst DescriptionList = {\n\t/**\n\t * The root container for a description list. Renders a `<dl>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Root>\n\t *   <DescriptionList.Item>\n\t *     <DescriptionList.Label>Name</DescriptionList.Label>\n\t *     <DescriptionList.Value>my-api-key</DescriptionList.Value>\n\t *   </DescriptionList.Item>\n\t * </DescriptionList.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A wrapper that groups a label/value pair. Renders a `<div>` with a default\n\t * subgrid layout.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Item>\n\t *   <DescriptionList.Label>ID</DescriptionList.Label>\n\t *   <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>\n\t * </DescriptionList.Item>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * The label for a description list item. Renders a `<dt>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistlabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Label>Name</DescriptionList.Label>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * The value for a description list item. Renders a `<dd>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Value>\n\t *   aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n\t * </DescriptionList.Value>\n\t * ```\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tDescriptionList,\n};\n\nexport type {\n\t//,\n\tDescriptionListProps,\n};\n"],"mappings":"kJA0BA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,KAGlC,CACM,MACL,YAAU,mBACV,UAAW,EACV,iKACA,CACD,EACA,GAAI,EAEH,UACS,CAAA,CAGd,EACA,EAAK,YAAc,kBAmBnB,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,wBACV,UAAW,EAAG,+DAAgE,CAAS,EACvF,GAAI,EAEH,UACS,CAAA,CAGd,EACA,EAAK,YAAc,sBAcnB,MAAM,EAAQ,GACZ,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,KAGlC,CACM,MACL,YAAU,yBACV,UAAW,EAAG,wDAAyD,CAAS,EAChF,GAAI,EAEH,UACS,CAAA,CAGd,EACA,EAAM,YAAc,uBAkBpB,MAAM,EAAQ,GACZ,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,KAGlC,CACM,MACL,YAAU,yBACV,UAAW,EAAG,0CAA2C,CAAS,EAClE,GAAI,EAEH,UACS,CAAA,CAGd,EACA,EAAM,YAAc,uBAuCpB,MAAM,EAAkB,CAgBvB,OAeA,OAWA,QAaA,OACD"}