@ngrok/mantle 0.32.3 → 0.40.1

package/dist/chunk-HSTG2BTX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/theme-provider/preload-fonts.tsx","../src/components/theme-provider/theme-provider.tsx"],"sourcesContent":["const cdnOrigin = \"https://assets.ngrok.com\";\nconst cdnBase = `${cdnOrigin}/fonts`;\n\nconst fonts = [\n\t\"/euclid-square/EuclidSquare-Regular-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-RegularItalic-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-Medium-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-Semibold-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-MediumItalic-WebS.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-Text.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-TextItalic.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-SemiBold.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff\",\n] as const;\n\ntype Font = (typeof fonts)[number];\n\nconst fontHref = <T extends Font = Font>(font: T) =>\n\t`${cdnBase}${font}` as const;\n\ntype Props = {\n\t/**\n\t * If set, will also preload and include the optional Nunito Sans font from Google Fonts.\n\t * @default false\n\t */\n\tincludeNunitoSans?: boolean;\n};\n\n/**\n * Preload custom fonts used in the theme.\n *\n * @see https://mantle.ngrok.com/components/theme-provider#api-preload-fonts\n *\n * @example\n * ```tsx\n * <PreloadFonts includeNunitoSans />\n * ```\n */\nconst PreloadFonts = ({ includeNunitoSans = false }: Props) => (\n\t<>\n\t\t<link rel=\"preconnect\" href={cdnOrigin} />\n\t\t{fonts.map((font) => (\n\t\t\t<link\n\t\t\t\tkey={font}\n\t\t\t\trel=\"preload\"\n\t\t\t\thref={fontHref(font)}\n\t\t\t\tas=\"font\"\n\t\t\t\ttype=\"font/woff\"\n\t\t\t\tcrossOrigin=\"anonymous\"\n\t\t\t/>\n\t\t))}\n\t\t{includeNunitoSans && <NunitoSans />}\n\t</>\n);\nPreloadFonts.displayName = \"PreloadFonts\";\n\nexport {\n\t//,\n\tPreloadFonts,\n};\n\nfunction NunitoSans() {\n\treturn (\n\t\t<>\n\t\t\t<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n\t\t\t<link\n\t\t\t\trel=\"preconnect\"\n\t\t\t\thref=\"https://fonts.gstatic.com\"\n\t\t\t\tcrossOrigin=\"anonymous\"\n\t\t\t/>\n\t\t\t<link\n\t\t\t\thref=\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap\"\n\t\t\t\trel=\"stylesheet\"\n\t\t\t/>\n\t\t</>\n\t);\n}\n","\"use client\";\n\nimport clsx from \"clsx\";\nimport type { ComponentProps, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { useMatchesMediaQuery } from \"../../hooks/use-matches-media-query.js\";\nimport { PreloadFonts } from \"./preload-fonts.js\";\n\n/**\n * prefersDarkModeMediaQuery is the media query used to detect if the user prefers dark mode.\n */\nconst prefersDarkModeMediaQuery = \"(prefers-color-scheme: dark)\";\n\n/**\n * prefersHighContrastMediaQuery is the media query used to detect if the user prefers high contrast mode.\n */\nconst prefersHighContrastMediaQuery = \"(prefers-contrast: more)\";\n\n/**\n * resolvedThemes is a tuple of valid themes that have been resolved from \"system\" to a specific theme.\n */\nconst resolvedThemes = [\n\t\"light\",\n\t\"dark\",\n\t\"light-high-contrast\",\n\t\"dark-high-contrast\",\n] as const;\n\n/**\n * ResolvedTheme is a type that represents a theme that has been resolved from \"system\" to a specific theme.\n */\ntype ResolvedTheme = (typeof resolvedThemes)[number];\n\n/**\n * themes is a tuple of valid themes.\n */\nconst themes = [\"system\", ...resolvedThemes] as const;\n\n/**\n * Theme is a string literal type that represents a valid theme.\n */\ntype Theme = (typeof themes)[number];\n\n/**\n * $theme is a helper which translates the Theme type into a string literal type.\n */\nconst $theme = <T extends Theme = Theme>(value: T) => value;\n\n/**\n * Type predicate that checks if a value is a valid theme.\n */\nfunction isTheme(value: unknown): value is Theme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn themes.includes(value as Theme);\n}\n\n/**\n * $resolvedTheme is a helper which translates the ResolvedTheme type into a string literal type.\n */\nconst $resolvedTheme = <T extends ResolvedTheme = ResolvedTheme>(value: T) =>\n\tvalue;\n\n/**\n * Type predicate that checks if a value is a valid resolved theme.\n */\nfunction isResolvedTheme(value: unknown): value is ResolvedTheme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn resolvedThemes.includes(value as ResolvedTheme);\n}\n\n/**\n * DEFAULT_STORAGE_KEY is the default key used to store the theme in localStorage.\n */\nconst DEFAULT_STORAGE_KEY = \"mantle-ui-theme\";\n\n/**\n * ThemeProviderState is the shape of the state returned by the ThemeProviderContext.\n */\ntype ThemeProviderState = [theme: Theme, setTheme: (theme: Theme) => void];\n\n/**\n * Initial state for the ThemeProviderContext.\n */\nconst initialState: ThemeProviderState = [\"system\", () => null];\n\n/**\n * ThemeProviderContext is a React Context that provides the current theme and a function to set the theme.\n */\nconst ThemeProviderContext = createContext<ThemeProviderState | null>(\n\tinitialState,\n);\n\n/**\n * isBrowser returns true if the code is running in a browser environment.\n */\nconst isBrowser = () => typeof window !== \"undefined\";\n\n/**\n * Gets the stored theme from localStorage or returns the default theme if no theme is stored.\n */\nfunction getStoredTheme(storageKey: string, defaultTheme: Theme = \"system\") {\n\tconst fallbackTheme = defaultTheme ?? \"system\";\n\tif (isBrowser()) {\n\t\tlet storedTheme: string | null = null;\n\t\ttry {\n\t\t\tstoredTheme =\n\t\t\t\t\"localStorage\" in window\n\t\t\t\t\t? window.localStorage.getItem(storageKey)\n\t\t\t\t\t: null;\n\t\t} catch (_) {}\n\t\treturn isTheme(storedTheme) ? storedTheme : fallbackTheme;\n\t}\n\treturn fallbackTheme;\n}\n\ntype ThemeProviderProps = PropsWithChildren & {\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n};\n\n/**\n * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.\n *\n * @see https://mantle.ngrok.com/components/theme-provider#api-theme-provider\n *\n * @example\n * ```tsx\n * <ThemeProvider defaultTheme=\"system\" storageKey=\"app-theme\">\n *   <App />\n * </ThemeProvider>\n * ```\n */\nfunction ThemeProvider({\n\tchildren,\n\tdefaultTheme = \"system\",\n\tstorageKey = DEFAULT_STORAGE_KEY,\n}: ThemeProviderProps) {\n\tconst [theme, setTheme] = useState<Theme>(() => {\n\t\tconst initialTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tapplyTheme(initialTheme);\n\t\treturn initialTheme;\n\t});\n\n\tuseEffect(() => {\n\t\tconst storedTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tsetTheme(storedTheme);\n\t\tapplyTheme(storedTheme);\n\t}, [defaultTheme, storageKey]);\n\n\tuseEffect(() => {\n\t\tconst prefersDarkMql = window.matchMedia(prefersDarkModeMediaQuery);\n\t\tconst prefersHighContrastMql = window.matchMedia(\n\t\t\tprefersHighContrastMediaQuery,\n\t\t);\n\n\t\tconst onChange = () => {\n\t\t\tconst storedTheme = getStoredTheme(storageKey, defaultTheme);\n\n\t\t\t// If the stored theme is not \"system\", then the user has explicitly set a theme and we should not\n\t\t\t// automatically change the theme when the user's system preferences change.\n\t\t\tif (storedTheme !== \"system\") {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tapplyTheme(\"system\");\n\t\t};\n\n\t\tprefersDarkMql.addEventListener(\"change\", onChange);\n\t\tprefersHighContrastMql.addEventListener(\"change\", onChange);\n\n\t\treturn () => {\n\t\t\tprefersDarkMql.removeEventListener(\"change\", onChange);\n\t\t\tprefersHighContrastMql.removeEventListener(\"change\", onChange);\n\t\t};\n\t}, [defaultTheme, storageKey]);\n\n\tconst value: ThemeProviderState = useMemo(\n\t\t() => [\n\t\t\ttheme,\n\t\t\t(theme: Theme) => {\n\t\t\t\ttry {\n\t\t\t\t\tif (\"localStorage\" in window) {\n\t\t\t\t\t\twindow.localStorage.setItem(storageKey, theme);\n\t\t\t\t\t}\n\t\t\t\t} catch (_) {}\n\t\t\t\tsetTheme(theme);\n\t\t\t\tapplyTheme(theme);\n\t\t\t},\n\t\t],\n\t\t[storageKey, theme],\n\t);\n\n\treturn (\n\t\t<ThemeProviderContext.Provider value={value}>\n\t\t\t{children}\n\t\t</ThemeProviderContext.Provider>\n\t);\n}\nThemeProvider.displayName = \"ThemeProvider\";\n\n/**\n * useTheme returns the current theme and a function to set the theme.\n *\n * @note This function will throw an error if used outside of a ThemeProvider context tree.\n */\nfunction useTheme() {\n\tconst context = useContext(ThemeProviderContext);\n\n\tinvariant(context, \"useTheme must be used within a ThemeProvider\");\n\n\treturn context;\n}\n\n/**\n * Applies the given theme to the `<html>` element.\n */\nfunction applyTheme(theme: Theme) {\n\tif (!isBrowser()) {\n\t\treturn;\n\t}\n\n\tconst htmlElement = window.document.documentElement;\n\thtmlElement.classList.remove(...themes);\n\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst prefersHighContrast = window.matchMedia(\n\t\tprefersHighContrastMediaQuery,\n\t).matches;\n\tconst newTheme = resolveTheme(theme, {\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t});\n\thtmlElement.classList.add(newTheme);\n\thtmlElement.dataset.appliedTheme = newTheme;\n\thtmlElement.dataset.theme = theme;\n}\n\n/**\n * Read the theme and applied theme from the `<html>` element.\n */\nfunction readThemeFromHtmlElement() {\n\tif (!isBrowser()) {\n\t\treturn {\n\t\t\tappliedTheme: undefined,\n\t\t\ttheme: undefined,\n\t\t};\n\t}\n\n\tconst htmlElement = window.document.documentElement;\n\tconst theme = isTheme(htmlElement.dataset.theme)\n\t\t? htmlElement.dataset.theme\n\t\t: undefined;\n\tconst appliedTheme = isResolvedTheme(htmlElement.dataset.appliedTheme)\n\t\t? htmlElement.dataset.appliedTheme\n\t\t: undefined;\n\n\treturn {\n\t\tappliedTheme,\n\t\ttheme,\n\t};\n}\n\n/**\n * If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n */\nfunction resolveTheme(\n\ttheme: Theme,\n\t{\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t}: { prefersDarkMode: boolean; prefersHighContrast: boolean },\n) {\n\tif (theme === \"system\") {\n\t\treturn determineThemeFromMediaQuery({\n\t\t\tprefersDarkMode,\n\t\t\tprefersHighContrast,\n\t\t});\n\t}\n\n\treturn theme;\n}\n\n/**\n * If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n */\nfunction useAppliedTheme() {\n\tconst themeContext = useContext(ThemeProviderContext);\n\tconst theme = themeContext != null ? themeContext[0] : \"system\";\n\n\tconst prefersDarkMode = useMatchesMediaQuery(prefersDarkModeMediaQuery);\n\tconst prefersHighContrast = useMatchesMediaQuery(\n\t\tprefersHighContrastMediaQuery,\n\t);\n\n\treturn resolveTheme(theme, { prefersDarkMode, prefersHighContrast });\n}\n\n/**\n * determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.\n * @private\n *\n * @example\n * ```tsx\n * const theme = determineThemeFromMediaQuery({\n *   prefersDarkMode: true,\n *   prefersHighContrast: false\n * });\n * // Returns: \"dark\"\n *\n * const themeWithContrast = determineThemeFromMediaQuery({\n *   prefersDarkMode: false,\n *   prefersHighContrast: true\n * });\n * // Returns: \"light-high-contrast\"\n * ```\n */\nexport function determineThemeFromMediaQuery({\n\tprefersDarkMode,\n\tprefersHighContrast,\n}: {\n\tprefersDarkMode: boolean;\n\tprefersHighContrast: boolean;\n}): ResolvedTheme {\n\tif (prefersHighContrast) {\n\t\treturn prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t}\n\n\treturn prefersDarkMode ? \"dark\" : \"light\";\n}\n\ntype PreventWrongThemeFlashScriptContentOptions = {\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n};\n\n/**\n * preventWrongThemeFlashScriptContent generates a script that prevents the wrong theme from flashing on initial page load.\n * It checks localStorage for a stored theme, and if none is found, it sets the default theme.\n * It also applies the correct theme to the `<html>` element based on the user's media query preferences.\n */\nfunction preventWrongThemeFlashScriptContent(\n\toptions?: PreventWrongThemeFlashScriptContentOptions,\n) {\n\tconst { defaultTheme = \"system\", storageKey = DEFAULT_STORAGE_KEY } =\n\t\toptions ?? {};\n\n\treturn `\n(function() {\n\tconst themes = ${JSON.stringify(themes)};\n\tconst isTheme = (value) => typeof value === \"string\" && themes.includes(value);\n\tconst fallbackTheme = \"${defaultTheme}\" ?? \"system\";\n\tlet maybeStoredTheme = null;\n\ttry {\n\t\tmaybeStoredTheme = \"localStorage\" in window ? window.localStorage.getItem(\"${storageKey}\") : null;\n\t} catch (_) {}\n\tconst hasStoredTheme = isTheme(maybeStoredTheme);\n\tif (!hasStoredTheme && \"localStorage\" in window) {\n\t\ttry {\n\t\t\twindow.localStorage.setItem(\"${storageKey}\", fallbackTheme);\n\t\t} catch (_) {}\n\t}\n\tconst themePreference = hasStoredTheme ? maybeStoredTheme : fallbackTheme;\n\tconst prefersDarkMode = window.matchMedia(\"${prefersDarkModeMediaQuery}\").matches;\n\tconst prefersHighContrast = window.matchMedia(\"${prefersHighContrastMediaQuery}\").matches;\n\tlet initialTheme = themePreference;\n\tif (initialTheme === \"system\") {\n\t\tif (prefersHighContrast) {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t\t} else {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark\" : \"light\";\n\t\t}\n\t}\n\tconst htmlElement = document.documentElement;\n\thtmlElement.classList.remove(...themes);\n\thtmlElement.classList.add(initialTheme);\n\thtmlElement.dataset.appliedTheme = initialTheme;\n\thtmlElement.dataset.theme = themePreference;\n})();\n`.trim();\n}\n\ntype MantleThemeHeadContentProps = {\n\t/**\n\t * The default theme to use if no theme is stored in localStorage.\n\t * @default \"system\"\n\t */\n\tdefaultTheme?: Theme;\n\t/**\n\t * An optional CSP nonce to allowlist this inline script. Using this can help\n\t * you to avoid using the CSP `unsafe-inline` directive, which disables\n\t * XSS protection and would allowlist all inline scripts or styles.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce\n\t */\n\tnonce?: string;\n\t/**\n\t * The key used to store the theme in localStorage.\n\t * @default \"mantle-ui-theme\"\n\t */\n\tstorageKey?: string;\n} & ComponentProps<typeof PreloadFonts>;\n\n/**\n * MantleThemeHeadContent is a React component that renders a script to prevent\n * Flash of Unstyled Content (FOUC), or the wrong theme from flashing on initial\n * page load.\n *\n * Render as high as possible in the <head> element.\n */\nconst MantleThemeHeadContent = ({\n\tdefaultTheme = \"system\",\n\tincludeNunitoSans = false,\n\tnonce,\n\tstorageKey = DEFAULT_STORAGE_KEY,\n}: MantleThemeHeadContentProps) => (\n\t<>\n\t\t<script\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t__html: preventWrongThemeFlashScriptContent({\n\t\t\t\t\tdefaultTheme,\n\t\t\t\t\tstorageKey,\n\t\t\t\t}),\n\t\t\t}}\n\t\t\tnonce={nonce}\n\t\t/>\n\t\t<PreloadFonts includeNunitoSans={includeNunitoSans} />\n\t</>\n);\nMantleThemeHeadContent.displayName = \"MantleThemeHeadContent\";\n\ntype InitialThemeProps = {\n\tclassName: string;\n\t\"data-applied-theme\": Omit<Theme, \"system\">;\n\t\"data-theme\": Theme;\n};\n\n/**\n * useInitialHtmlThemeProps returns the initial props that should be applied to the <html> element to prevent react hydration errors.\n */\nfunction useInitialHtmlThemeProps(props?: {\n\tclassName?: string;\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n}): InitialThemeProps {\n\tconst {\n\t\tclassName = \"\",\n\t\tdefaultTheme = \"system\",\n\t\tstorageKey = DEFAULT_STORAGE_KEY,\n\t} = props ?? {};\n\n\treturn useMemo(() => {\n\t\tif (!isBrowser()) {\n\t\t\treturn {\n\t\t\t\tclassName: clsx(className),\n\t\t\t\t\"data-applied-theme\": \"system\",\n\t\t\t\t\"data-theme\": \"system\",\n\t\t\t};\n\t\t}\n\n\t\tconst prefersDarkMode = window.matchMedia(\n\t\t\tprefersDarkModeMediaQuery,\n\t\t).matches;\n\t\tconst prefersHighContrast = window.matchMedia(\n\t\t\tprefersHighContrastMediaQuery,\n\t\t).matches;\n\t\tconst initialTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tconst reolvedTheme = resolveTheme(initialTheme, {\n\t\t\tprefersDarkMode,\n\t\t\tprefersHighContrast,\n\t\t});\n\n\t\treturn {\n\t\t\tclassName: clsx(className, reolvedTheme),\n\t\t\t\"data-applied-theme\": reolvedTheme,\n\t\t\t\"data-theme\": initialTheme,\n\t\t};\n\t}, [className, defaultTheme, storageKey]);\n}\n\nexport {\n\t//,\n\t$resolvedTheme,\n\t$theme,\n\tapplyTheme,\n\tisResolvedTheme,\n\tisTheme,\n\tMantleThemeHeadContent,\n\tpreventWrongThemeFlashScriptContent,\n\treadThemeFromHtmlElement,\n\tresolvedThemes,\n\tThemeProvider,\n\tthemes,\n\tuseAppliedTheme,\n\tuseInitialHtmlThemeProps,\n\tuseTheme,\n};\n\nexport type {\n\t//,\n\tResolvedTheme,\n\tTheme,\n\tThemeProviderProps,\n};\n"],"mappings":"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","names":["Fragment","jsx","jsxs","cdnOrigin","cdnBase","fonts","fontHref","font","PreloadFonts","includeNunitoSans","NunitoSans","NunitoSans","jsxs","Fragment","jsx","clsx","createContext","useContext","useEffect","useMemo","useState","invariant","Fragment","jsx","jsxs","prefersDarkModeMediaQuery","prefersHighContrastMediaQuery","resolvedThemes","themes","$theme","value","isTheme","$resolvedTheme","isResolvedTheme","DEFAULT_STORAGE_KEY","initialState","ThemeProviderContext","createContext","isBrowser","getStoredTheme","storageKey","defaultTheme","fallbackTheme","storedTheme","ThemeProvider","children","theme","setTheme","useState","initialTheme","applyTheme","useEffect","prefersDarkMql","prefersHighContrastMql","onChange","useMemo","useTheme","context","useContext","invariant","htmlElement","prefersDarkMode","prefersHighContrast","newTheme","resolveTheme","readThemeFromHtmlElement","determineThemeFromMediaQuery","useAppliedTheme","themeContext","useMatchesMediaQuery","preventWrongThemeFlashScriptContent","options","MantleThemeHeadContent","includeNunitoSans","nonce","PreloadFonts","useInitialHtmlThemeProps","props","className","clsx","reolvedTheme"]}

package/dist/chunk-UUXOG7WW.js

@@ -0,0 +1,2 @@
+import{l as y}from"./chunk-HSTG2BTX.js";import{a as p}from"./chunk-I6T6YV2L.js";import{a as n}from"./chunk-AZ56JGNY.js";import{CheckCircleIcon as x}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as w}from"@phosphor-icons/react/Info";import{WarningIcon as A}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as I}from"@phosphor-icons/react/WarningDiamond";import{Slot as l}from"@radix-ui/react-slot";import{createContext as P,forwardRef as d,useContext as f}from"react";import*as c from"sonner";import{jsx as r,jsxs as k}from"react/jsx-runtime";var N=({className:t,containerAriaLabel:o,dir:e,duration_ms:s=4e3,position:i="top-center",style:a})=>{let m=y();return r(c.Toaster,{className:n("toaster overlay-prompt pointer-events-auto font-sans *:duration-200",t),containerAriaLabel:o,dir:e,duration:s,gap:12,position:i??"top-center",style:a,theme:m,toastOptions:{unstyled:!0}})};N.displayName="Toaster";var g=P("");function z(t,o){return c.toast.custom(e=>r(g.Provider,{value:e,children:t}),{duration:o?.duration_ms,...o?.id?{id:o.id}:{},unstyled:!0})}var T=P({priority:"info"}),v=d(({asChild:t,children:o,className:e,priority:s,...i},a)=>{let m=t?l:"div";return r(T.Provider,{value:{priority:s},children:k(m,{className:n("relative flex items-start gap-2 text-sm","p-3 pl-[0.9375rem]","bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg",e),ref:a,...i,children:[r(S,{priority:s}),o]})})});v.displayName="Toast";var h=d(({className:t,svg:o,...e},s)=>{let i=f(T);switch(i.priority){case"danger":return r(p,{className:n("text-danger-600",t),ref:s,svg:o??r(A,{weight:"fill"}),...e});case"warning":return r(p,{className:n("text-warning-600",t),ref:s,svg:o??r(I,{weight:"fill"}),...e});case"success":return r(p,{className:n("text-success-600",t),ref:s,svg:o??r(x,{weight:"fill"}),...e});case"info":return r(p,{className:n("text-accent-600",t),ref:s,svg:r(w,{weight:"fill"}),...e});default:throw new Error(`Unreachable Case: ${i.priority}`)}});h.displayName="ToastIcon";var C=d(({asChild:t,className:o,onClick:e,...s},i)=>{let a=f(g);return r(t?l:"button",{className:n("shrink-0","data-[icon-button]:-mr-0.5 data-[icon-button]:-mt-0.5 data-[icon-button]:rounded-sm",o),onClick:u=>{e?.(u),!u.defaultPrevented&&c.toast.dismiss(a)},ref:i,...s})});C.displayName="ToastAction";var b=d(({asChild:t,className:o,...e},s)=>r(t?l:"p",{className:n("text-strong flex-1 text-sm",o),ref:s,...e}));b.displayName="ToastMessage";var F={Root:v,Action:C,Icon:h,Message:b};function U(t){t.target instanceof Element&&t.target.closest(".overlay-prompt")&&t.preventDefault()}var R={info:"bg-accent-600",warning:"bg-warning-600",success:"bg-success-600",danger:"bg-danger-600"};function S({className:t,priority:o,...e}){return r("div",{"aria-hidden":!0,className:n("z-1 absolute -inset-px right-auto w-1.5 rounded-l",R[o],t),...e})}export{N as a,z as b,F as c,U as d};
+//# sourceMappingURL=chunk-UUXOG7WW.js.map

package/dist/chunk-UUXOG7WW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n} from \"react\";\nimport * as ToastPrimitive from \"sonner\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { WithStyleProps } from \"../../types/with-style-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon as IconComponent } from \"../icon/icon.js\";\nimport type { SvgOnlyProps } from \"../icon/svg-only.js\";\nimport { useAppliedTheme } from \"../theme-provider/theme-provider.js\";\n\ntype ToasterPrimitiveProps = ComponentProps<typeof ToastPrimitive.Toaster>;\ntype ToasterPrimitiveTheme = ToasterPrimitiveProps[\"theme\"];\n\ntype ToasterProps = WithStyleProps &\n\tPick<ToasterPrimitiveProps, \"containerAriaLabel\" | \"dir\" | \"position\"> & {\n\t\t/**\n\t\t * Time in milliseconds that should elapse before automatically dismissing toasts.\n\t\t * When set here, this will be the default duration for all toasts.\n\t\t * @default 4000\n\t\t */\n\t\tduration_ms?: number;\n\t};\n\n/**\n * A container for displaying all toasts.\n *\n * Only one `<Toaster />` should be rendered in an app a time, preferably at the\n * root level of the app.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toaster\n *\n * @example\n * ```tsx\n * <Toaster\n *   position=\"top-right\"\n *   duration_ms={5000}\n * />\n * ```\n */\nconst Toaster = ({\n\t//,\n\tclassName,\n\tcontainerAriaLabel,\n\tdir,\n\tduration_ms = 4000,\n\tposition = \"top-center\",\n\tstyle,\n}: ToasterProps) => {\n\tconst theme = useAppliedTheme();\n\n\treturn (\n\t\t<ToastPrimitive.Toaster\n\t\t\tclassName={cx(\n\t\t\t\t\"toaster overlay-prompt pointer-events-auto font-sans *:duration-200\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tcontainerAriaLabel={containerAriaLabel}\n\t\t\tdir={dir}\n\t\t\tduration={duration_ms}\n\t\t\tgap={12}\n\t\t\tposition={position ?? \"top-center\"}\n\t\t\tstyle={style}\n\t\t\ttheme={theme as ToasterPrimitiveTheme} // we have additional themes that are not in the sonner types, so we need to cast for now\n\t\t\ttoastOptions={{\n\t\t\t\tunstyled: true,\n\t\t\t}}\n\t\t/>\n\t);\n};\nToaster.displayName = \"Toaster\";\n\nconst ToastIdContext = createContext<string | number>(\"\");\n\ntype MakeToastOptions = {\n\t/**\n\t * Time in milliseconds that should elapse before automatically closing the toast.\n\t * Will default to the `<Toaster />`'s `duration_ms` if not provided.\n\t */\n\tduration_ms?: number;\n\t/**\n\t * An optional custom ID for this toast. If not given, a unique ID is provided for you.\n\t */\n\tid?: string;\n};\n\n/**\n * Create a toast. Provide a `<Toast.Root>` component as the `children` to be rendered\n * inside the `<Toaster />` section.\n *\n * @see https://mantle.ngrok.com/components/toast#api-make-toast\n *\n * @example\n * ```tsx\n * makeToast(\n *   <Toast.Root priority=\"success\">\n *     <Toast.Icon />\n *     <Toast.Message>Operation completed successfully!</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>\n * );\n * ```\n */\nfunction makeToast(children: ReactNode, options?: MakeToastOptions) {\n\treturn ToastPrimitive.toast.custom(\n\t\t(toastId) => (\n\t\t\t<ToastIdContext.Provider value={toastId}>\n\t\t\t\t{children}\n\t\t\t</ToastIdContext.Provider>\n\t\t),\n\t\t{\n\t\t\t//\n\t\t\tduration: options?.duration_ms,\n\t\t\t// If a custom ID is provided, use it, else use the toastId provided by the sonner library\n\t\t\t// don't set an ID to `undefined` as it breaks the sonner library\n\t\t\t...(options?.id ? { id: options.id } : {}),\n\t\t\tunstyled: true,\n\t\t},\n\t);\n}\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\ntype ToastState = {\n\tpriority: Priority;\n};\n\nconst ToastStateContext = createContext<ToastState>({\n\tpriority: \"info\",\n});\n\ntype ToastProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\tpriority: Priority;\n\t};\n\n/**\n * A succinct message with a priority that is displayed temporarily.\n * Toasts are used to provide feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n *   <Toast.Icon />\n *   <Toast.Message>Changes saved successfully!</Toast.Message>\n *   <Toast.Action>Undo</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ToastProps>(\n\t({ asChild, children, className, priority, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<ToastStateContext.Provider value={{ priority }}>\n\t\t\t\t<Component\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"relative flex items-start gap-2 text-sm\",\n\t\t\t\t\t\t\"p-3 pl-[0.9375rem]\",\n\t\t\t\t\t\t\"bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg\",\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Do not apply overflow-hidden because we want the priority bar accent\n\t\t\t\t\t\t * to overlap the toast border, else the border flows over the\n\t\t\t\t\t\t * priority bar.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<PriorityBarAccent priority={priority} />\n\t\t\t\t\t{children}\n\t\t\t\t</Component>\n\t\t\t</ToastStateContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Toast\";\n\ntype ToastIconProps = Partial<SvgOnlyProps>;\n\n/**\n * An icon that visually represents the priority of the toast.\n * If you do not provide an icon, the default icon and color for the priority is used.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast-icon\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"warning\">\n *   <Toast.Icon />\n *   <Toast.Message>Warning message</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, ToastIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastStateContext);\n\n\t\tswitch (ctx.priority) {\n\t\t\tcase \"danger\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tclassName={cx(\"text-danger-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"warning\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tclassName={cx(\"text-warning-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningDiamondIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"success\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tclassName={cx(\"text-success-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <CheckCircleIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"info\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\t//\n\t\t\t\t\t\tclassName={cx(\"text-accent-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={<InfoIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\tthrow new Error(`Unreachable Case: ${ctx.priority}`);\n\t\t}\n\t},\n);\nIcon.displayName = \"ToastIcon\";\n\ntype ToastActionProps = ComponentProps<\"button\"> & WithAsChild;\n\n/**\n * A button that dismisses the toast when clicked.\n * You can prevent the toast from being dismissed `onClick` by calling `event.preventDefault()`\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast-action\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"info\">\n *   <Toast.Icon />\n *   <Toast.Message>File uploaded successfully</Toast.Message>\n *   <Toast.Action>View File</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ToastActionProps>(\n\t({ asChild, className, onClick, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastIdContext);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t//,\n\t\t\t\t\t\"shrink-0\",\n\t\t\t\t\t// 👇 wiggle the bits so that icon buttons toast actions are aligned with the toast icon\n\t\t\t\t\t\"data-[icon-button]:-mr-0.5 data-[icon-button]:-mt-0.5 data-[icon-button]:rounded-sm\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tToastPrimitive.toast.dismiss(ctx);\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);\nAction.displayName = \"ToastAction\";\n\ntype ToastMessageProps = ComponentProps<\"p\"> & WithAsChild;\n\n/**\n * The message content of the toast.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast-message\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n *   <Toast.Icon />\n *   <Toast.Message>Your changes have been saved</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Message = forwardRef<ComponentRef<\"p\">, ToastMessageProps>(\n\t({ asChild, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"p\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\t//\n\t\t\t\tclassName={cx(\"text-strong flex-1 text-sm\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nMessage.displayName = \"ToastMessage\";\n\n/**\n * A succinct message that is displayed temporarily. Toasts are used to provide\n * feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast\n *\n * @example\n * ```tsx\n * makeToast(\n *   <Toast.Root priority=\"success\">\n *     <Toast.Icon />\n *     <Toast.Message>Operation completed successfully!</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>\n * );\n * ```\n */\nconst Toast = {\n\t/**\n\t * A succinct message with a priority that is displayed temporarily.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#api-toast-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Changes saved successfully!</Toast.Message>\n\t *   <Toast.Action>Undo</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A button that dismisses the toast when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#api-toast-action\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"info\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>File uploaded successfully</Toast.Message>\n\t *   <Toast.Action>View File</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * An icon that visually represents the priority of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#api-toast-icon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"warning\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Warning message</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The message content of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#api-toast-message\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Your changes have been saved</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tMessage,\n} as const;\n\nexport {\n\t//,\n\tmakeToast,\n\tToast,\n\tToaster,\n};\n\nexport type {\n\t//,\n\tPriority,\n};\n\n/**\n * @private\n *\n * Allows any mantle floating prompt (e.g. toasts and notifications) to be interacted with\n * even when a modaled view (e.g. dialog, sheet, etc) is open and a focus trap is active.\n *\n * Without this, interacting with the prompt would close the modaled view.\n *\n * @example\n * ```tsx\n * <Dialog.Root onInteractOutside={preventCloseOnPromptInteraction}>\n *   <Dialog.Content>\n *     <p>Dialog content</p>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nexport function preventCloseOnPromptInteraction(\n\tevent: CustomEvent | PointerEvent | MouseEvent | TouchEvent | FocusEvent,\n) {\n\tif (!(event.target instanceof Element)) {\n\t\treturn;\n\t}\n\n\tif (event.target.closest(\".overlay-prompt\")) {\n\t\tevent.preventDefault();\n\t}\n}\n\nconst priorityBackgroundColor = {\n\tinfo: \"bg-accent-600\",\n\twarning: \"bg-warning-600\",\n\tsuccess: \"bg-success-600\",\n\tdanger: \"bg-danger-600\",\n} as const satisfies Record<Priority, string>;\n\ntype PriorityBarAccentProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n\tpriority: Priority;\n};\n\n/**\n * @private\n *\n * A colored bar that visually represents the priority of the toast.\n */\nfunction PriorityBarAccent({\n\tclassName,\n\tpriority,\n\t...props\n}: PriorityBarAccentProps) {\n\treturn (\n\t\t<div\n\t\t\taria-hidden\n\t\t\tclassName={cx(\n\t\t\t\t//\n\t\t\t\t\"z-1 absolute -inset-px right-auto w-1.5 rounded-l\",\n\t\t\t\tpriorityBackgroundColor[priority],\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":"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","names":["CheckCircleIcon","InfoIcon","WarningIcon","WarningDiamondIcon","Slot","createContext","forwardRef","useContext","ToastPrimitive","jsx","jsxs","Toaster","className","containerAriaLabel","dir","duration_ms","position","style","theme","useAppliedTheme","cx","ToastIdContext","createContext","makeToast","children","options","toastId","ToastStateContext","createContext","Root","forwardRef","asChild","children","className","priority","props","ref","Component","Slot","jsx","jsxs","cx","PriorityBarAccent","Icon","svg","ctx","useContext","WarningIcon","WarningDiamondIcon","CheckCircleIcon","InfoIcon","Action","onClick","ToastIdContext","event","Message","Toast","preventCloseOnPromptInteraction","event","priorityBackgroundColor","PriorityBarAccent","className","priority","props","jsx","cx"]}

package/dist/code-block.d.ts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { HTMLAttributes, ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
 import { S as SvgAttributes } from './types-BuKAGhC-.js';
 
@@ -68,50 +68,6 @@ type DefaultMeta = typeof defaultMeta;
  */
 declare function parseMetastring(input: string | undefined): Meta;
 
-/**
- * Code blocks render and apply syntax highlighting to blocks of code.
- * This is the root component for all code block components.
- *
- * @see https://mantle.ngrok.com/components/code-block#api-code-block
- *
- * @example
- * ```tsx
- * <CodeBlock>
- *   <CodeBlockHeader>
- *     <CodeBlockIcon preset="file" />
- *     <CodeBlockTitle>…</CodeBlockTitle>
- *   </CodeBlockHeader>
- *   <CodeBlockBody>
- *     <CodeBlockCopyButton />
- *     <CodeBlockCode language="…" value={fmtCode\`…\`} />
- *   </CodeBlockBody>
- *   <CodeBlockExpanderButton />
- * </CodeBlock>
- * ```
- */
-declare const CodeBlock: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * The body of the `CodeBlock`. This is where the `CodeBlockCode` and optional
- * `CodeBlockCopyButton` is rendered.
- *
- * @see https://mantle.ngrok.com/components/code-block#api-code-block-body
- *
- * @example
- * ```tsx
- * <CodeBlock>
- *   <CodeBlockHeader>
- *     <CodeBlockIcon preset="file" />
- *     <CodeBlockTitle>…</CodeBlockTitle>
- *   </CodeBlockHeader>
- *   <CodeBlockBody>
- *     <CodeBlockCopyButton />
- *     <CodeBlockCode language="…" value={fmtCode\`…\`} />
- *   </CodeBlockBody>
- *   <CodeBlockExpanderButton />
- * </CodeBlock>
- * ```
- */
-declare const CodeBlockBody: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
 type CodeBlockCodeProps = Omit<ComponentProps<"pre">, "children"> & {
     /**
      * The code to display in the code block. Should be code formatted as a string. This code will be passed to our syntax highlighter.
@@ -136,76 +92,6 @@ type CodeBlockCodeProps = Omit<ComponentProps<"pre">, "children"> & {
      */
     showLineNumbers?: boolean;
 };
-/**
- * The `CodeBlock` content. This is where the code is rendered and syntax highlighted.
- *
- * @see https://mantle.ngrok.com/components/code-block#api-code-block-code
- *
- * @example
- * ```tsx
- * <CodeBlock>
- *   <CodeBlockHeader>
- *     <CodeBlockIcon preset="file" />
- *     <CodeBlockTitle>…</CodeBlockTitle>
- *   </CodeBlockHeader>
- *   <CodeBlockBody>
- *     <CodeBlockCopyButton />
- *     <CodeBlockCode
- *       language="sh"
- *       value={fmtCode`ffmpeg -i multichannel.mxf -map 0:v:0 -map 0:a:0 -map 0:a:0 -c:a:0 ac3 -b:a:0 640k -ac:a:1 2 -c:a:1 aac -b:2 128k out.mp4`}
- *     />
- *   </CodeBlockBody>
- *   <CodeBlockExpanderButton />
- * </CodeBlock>
- * ```
- */
-declare const CodeBlockCode: react.ForwardRefExoticComponent<Omit<CodeBlockCodeProps, "ref"> & react.RefAttributes<HTMLPreElement>>;
-/**
- * The (optional) header slot of the `CodeBlock`. This is where things like the
- * `CodeBlockIcon` and `CodeBlockTitle` are rendered.
- *
- * @see https://mantle.ngrok.com/components/code-block#api-code-block-header
- *
- * @example
- * ```tsx
- * <CodeBlock>
- *   <CodeBlockHeader>
- *     <CodeBlockIcon preset="file" />
- *     <CodeBlockTitle>…</CodeBlockTitle>
- *   </CodeBlockHeader>
- *   <CodeBlockBody>
- *     <CodeBlockCopyButton />
- *     <CodeBlockCode language="…" value={fmtCode\`…\`} />
- *   </CodeBlockBody>
- *   <CodeBlockExpanderButton />
- * </CodeBlock>
- * ```
- */
-declare const CodeBlockHeader: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * The (optional) title of the `CodeBlock`. Default renders as an h3 element,
- * use asChild to render something else.
- *
- * @see https://mantle.ngrok.com/components/code-block#api-code-block-title
- *
- * @example
- * ```tsx
- * <CodeBlock>
- *   <CodeBlockHeader>
- *     <CodeBlockIcon preset="file" />
- *     <CodeBlockTitle>…</CodeBlockTitle>
- *   </CodeBlockHeader>
- *   <CodeBlockBody>
- *     <CodeBlockCopyButton />
- *     <CodeBlockCode language="…" value={fmtCode\`…\`} />
- *   </CodeBlockBody>
- *   <CodeBlockExpanderButton />
- * </CodeBlock>
- * ```
- */
-declare const CodeBlockTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
-    asChild?: boolean;
-} & react.RefAttributes<HTMLHeadingElement>>;
 type CodeBlockCopyButtonProps = Omit<ComponentProps<"button">, "children" | "type"> & WithAsChild & {
     /**
      * Callback fired when the copy button is clicked, passes the copied text as an argument.
@@ -216,56 +102,7 @@ type CodeBlockCopyButtonProps = Omit<ComponentProps<"button">, "children" | "typ
      */
     onCopyError?: (error: unknown) => void;
 };
-/**
- * The (optional) copy button of the `CodeBlock`. Render this as a child of the
- * `CodeBlockBody` to allow users to copy the code block contents to their
- * clipboard.
- *
- * @see https://mantle.ngrok.com/components/code-block#api-code-block-copy-button
- *
- * @example
- * ```tsx
- * <CodeBlock>
- *   <CodeBlockHeader>
- *     <CodeBlockIcon preset="file" />
- *     <CodeBlockTitle>…</CodeBlockTitle>
- *   </CodeBlockHeader>
- *   <CodeBlockBody>
- *     <CodeBlockCopyButton />
- *     <CodeBlockCode language="…" value={fmtCode\`…\`} />
- *   </CodeBlockBody>
- *   <CodeBlockExpanderButton />
- * </CodeBlock>
- * ```
- */
-declare const CodeBlockCopyButton: react.ForwardRefExoticComponent<Omit<CodeBlockCopyButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 type CodeBlockExpanderButtonProps = Omit<ComponentProps<"button">, "children" | "aria-controls" | "aria-expanded"> & WithAsChild;
-/**
- * The (optional) expander button of the `CodeBlock`. Render this as a child of the
- * `CodeBlockBody` to allow users to expand/collapse the code block contents.
- *
- * @note If this component is preset, the `CodeBlock` will automatically know
- * that it should be collapsible. Don't use this component if you don't want
- * the code block to be collapsible.
- *
- * @see https://mantle.ngrok.com/components/code-block#api-code-block-expander-button
- *
- * @example
- * ```tsx
- * <CodeBlock>
- *   <CodeBlockHeader>
- *     <CodeBlockIcon preset="file" />
- *     <CodeBlockTitle>…</CodeBlockTitle>
- *   </CodeBlockHeader>
- *   <CodeBlockBody>
- *     <CodeBlockCopyButton />
- *     <CodeBlockCode language="…" value={fmtCode\`…\`} />
- *   </CodeBlockBody>
- *   <CodeBlockExpanderButton />
- * </CodeBlock>
- * ```
- */
-declare const CodeBlockExpanderButton: react.ForwardRefExoticComponent<Omit<CodeBlockExpanderButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 type CodeBlockIconProps = Omit<SvgAttributes, "children"> & ({
     /**
      * A custom icon to display in the code block header.
@@ -300,23 +137,196 @@ type CodeBlockIconProps = Omit<SvgAttributes, "children"> & ({
  *
  * @example
  * ```tsx
- * <CodeBlock>
- *   <CodeBlockHeader>
- *     <CodeBlockIcon preset="file" />
- *     <CodeBlockTitle>…</CodeBlockTitle>
- *   </CodeBlockHeader>
- *   <CodeBlockBody>
- *     <CodeBlockCopyButton />
- *     <CodeBlockCode language="…" value={fmtCode\`…\`} />
- *   </CodeBlockBody>
- *   <CodeBlockExpanderButton />
- * </CodeBlock>
+ * <CodeBlock.Root>
+ *   <CodeBlock.Header>
+ *     <CodeBlock.Icon preset="file" />
+ *     <CodeBlock.Title>…</CodeBlock.Title>
+ *   </CodeBlock.Header>
+ *   <CodeBlock.Body>
+ *     <CodeBlock.CopyButton />
+ *     <CodeBlock.Code language="…" value={fmtCode\`…\`} />
+ *   </CodeBlock.Body>
+ *   <CodeBlock.ExpanderButton />
+ * </CodeBlock.Root>
  * ```
  */
-declare function CodeBlockIcon({ className, preset, svg: _svgProp, ...props }: CodeBlockIconProps): react_jsx_runtime.JSX.Element;
-declare namespace CodeBlockIcon {
+declare function CodeBlockIconComponent({ className, preset, svg: _svgProp, ...props }: CodeBlockIconProps): react_jsx_runtime.JSX.Element;
+declare namespace CodeBlockIconComponent {
     var displayName: string;
 }
+/**
+ * Code blocks render and apply syntax highlighting to blocks of code.
+ *
+ * @see https://mantle.ngrok.com/components/code-block
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock.Root>
+ *   <CodeBlock.Header>
+ *     <CodeBlock.Icon preset="file" />
+ *     <CodeBlock.Title>…</CodeBlock.Title>
+ *   </CodeBlock.Header>
+ *   <CodeBlock.Body>
+ *     <CodeBlock.CopyButton />
+ *     <CodeBlock.Code language="…" value={fmtCode\`…\`} />
+ *   </CodeBlock.Body>
+ *   <CodeBlock.ExpanderButton />
+ * </CodeBlock.Root>
+ * ```
+ */
+declare const CodeBlock: {
+    /**
+     * Code blocks render and apply syntax highlighting to blocks of code.
+     * This is the root component for all code block components.
+     *
+     * @see https://mantle.ngrok.com/components/code-block#api-code-block-root
+     *
+     * @example
+     * ```tsx
+     * <CodeBlock.Root>
+     *   <CodeBlock.Header>
+     *     <CodeBlock.Icon preset="file" />
+     *     <CodeBlock.Title>…</CodeBlock.Title>
+     *   </CodeBlock.Header>
+     *   <CodeBlock.Body>
+     *     <CodeBlock.CopyButton />
+     *     <CodeBlock.Code language="…" value={fmtCode\`…\`} />
+     *   </CodeBlock.Body>
+     *   <CodeBlock.ExpanderButton />
+     * </CodeBlock.Root>
+     * ```
+     */
+    readonly Root: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The body of the `CodeBlock`. This is where the `CodeBlock.Code` and optional
+     * `CodeBlock.CopyButton` is rendered.
+     *
+     * @see https://mantle.ngrok.com/components/code-block#api-code-block-body
+     *
+     * @example
+     * ```tsx
+     * <CodeBlock.Root>
+     *   <CodeBlock.Body>
+     *     <CodeBlock.CopyButton />
+     *     <CodeBlock.Code language="…" value={fmtCode\`…\`} />
+     *   </CodeBlock.Body>
+     * </CodeBlock.Root>
+     * ```
+     */
+    readonly Body: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The `CodeBlock` content. This is where the code is rendered and syntax highlighted.
+     *
+     * @see https://mantle.ngrok.com/components/code-block#api-code-block-code
+     *
+     * @example
+     * ```tsx
+     * <CodeBlock.Root>
+     *   <CodeBlock.Body>
+     *     <CodeBlock.Code
+     *       language="sh"
+     *       value={fmtCode`ffmpeg -i multichannel.mxf -map 0:v:0 -map 0:a:0`}
+     *     />
+     *   </CodeBlock.Body>
+     * </CodeBlock.Root>
+     * ```
+     */
+    readonly Code: react.ForwardRefExoticComponent<Omit<CodeBlockCodeProps, "ref"> & react.RefAttributes<HTMLPreElement>>;
+    /**
+     * The (optional) copy button of the `CodeBlock`. Render this as a child of the
+     * `CodeBlock.Body` to allow users to copy the code block contents to their
+     * clipboard.
+     *
+     * @see https://mantle.ngrok.com/components/code-block#api-code-block-copy-button
+     *
+     * @example
+     * ```tsx
+     * <CodeBlock.Root>
+     *   <CodeBlock.Body>
+     *     <CodeBlock.CopyButton />
+     *     <CodeBlock.Code language="…" value={fmtCode\`…\`} />
+     *   </CodeBlock.Body>
+     * </CodeBlock.Root>
+     * ```
+     */
+    readonly CopyButton: react.ForwardRefExoticComponent<Omit<CodeBlockCopyButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * The (optional) expander button of the `CodeBlock`. Render this as a child of the
+     * `CodeBlock.Body` to allow users to expand/collapse the code block contents.
+     *
+     * @see https://mantle.ngrok.com/components/code-block#api-code-block-expander-button
+     *
+     * @example
+     * ```tsx
+     * <CodeBlock.Root>
+     *   <CodeBlock.Body>
+     *     <CodeBlock.Code language="…" value={fmtCode\`…\`} />
+     *   </CodeBlock.Body>
+     *   <CodeBlock.ExpanderButton />
+     * </CodeBlock.Root>
+     * ```
+     */
+    readonly ExpanderButton: react.ForwardRefExoticComponent<Omit<CodeBlockExpanderButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * The (optional) header slot of the `CodeBlock`. This is where things like the
+     * `CodeBlock.Icon` and `CodeBlock.Title` are rendered.
+     *
+     * @see https://mantle.ngrok.com/components/code-block#api-code-block-header
+     *
+     * @example
+     * ```tsx
+     * <CodeBlock.Root>
+     *   <CodeBlock.Header>
+     *     <CodeBlock.Icon preset="file" />
+     *     <CodeBlock.Title>…</CodeBlock.Title>
+     *   </CodeBlock.Header>
+     *   <CodeBlock.Body>
+     *     <CodeBlock.Code language="…" value={fmtCode\`…\`} />
+     *   </CodeBlock.Body>
+     * </CodeBlock.Root>
+     * ```
+     */
+    readonly Header: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * A small icon that represents the type of code block being displayed,
+     * rendered as an SVG next to the code block title in the code block header.
+     *
+     * You can pass in a custom SVG component or use one of the presets
+     * (pass only one of `svg` or `preset`).
+     *
+     * @see https://mantle.ngrok.com/components/code-block#api-code-block-icon
+     *
+     * @example
+     * ```tsx
+     * <CodeBlock.Root>
+     *   <CodeBlock.Header>
+     *     <CodeBlock.Icon preset="file" />
+     *     <CodeBlock.Title>…</CodeBlock.Title>
+     *   </CodeBlock.Header>
+     * </CodeBlock.Root>
+     * ```
+     */
+    readonly Icon: typeof CodeBlockIconComponent;
+    /**
+     * The (optional) title of the `CodeBlock`. Default renders as an h3 element,
+     * use asChild to render something else.
+     *
+     * @see https://mantle.ngrok.com/components/code-block#api-code-block-title
+     *
+     * @example
+     * ```tsx
+     * <CodeBlock.Root>
+     *   <CodeBlock.Header>
+     *     <CodeBlock.Icon preset="file" />
+     *     <CodeBlock.Title>example.js</CodeBlock.Title>
+     *   </CodeBlock.Header>
+     * </CodeBlock.Root>
+     * ```
+     */
+    readonly Title: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
+        asChild?: boolean;
+    } & react.RefAttributes<HTMLHeadingElement>>;
+};
 
 /**
  * Escapes special HTML characters in a string to their corresponding
@@ -358,4 +368,4 @@ type Options = {
  */
 declare function normalizeIndentation(value: string, options?: Options): string;
 
-export { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton, CodeBlockExpanderButton, CodeBlockHeader, CodeBlockIcon, CodeBlockTitle, type DefaultMeta, type Meta, type MetaInput, type Mode, type SupportedLanguage, defaultMeta, escapeHtml, fmtCode, formatLanguageClassName, isSupportedLanguage, normalizeIndentation, parseLanguage, parseMetastring, supportedLanguages };
+export { CodeBlock, type DefaultMeta, type Meta, type MetaInput, type Mode, type SupportedLanguage, defaultMeta, escapeHtml, fmtCode, formatLanguageClassName, isSupportedLanguage, normalizeIndentation, parseLanguage, parseMetastring, supportedLanguages };

package/dist/code-block.js

@@ -1,4 +1,4 @@
-import{a as _}from"./chunk-IWKI4XHM.js";import{a as O}from"./chunk-W2YQRWR5.js";import{a as M}from"./chunk-3C5O3AQA.js";import{a as I}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as m}from"./chunk-AZ56JGNY.js";import{CaretDownIcon as ie}from"@phosphor-icons/react/CaretDown";import{CheckIcon as de}from"@phosphor-icons/react/Check";import{CopyIcon as pe}from"@phosphor-icons/react/Copy";import{FileTextIcon as le}from"@phosphor-icons/react/FileText";import{TerminalIcon as ue}from"@phosphor-icons/react/Terminal";import{Slot as x}from"@radix-ui/react-slot";import ce from"clsx";import{createContext as me,forwardRef as y,useContext as A,useEffect as w,useId as ge,useMemo as F,useRef as fe,useState as b}from"react";import P from"tiny-invariant";function N(e){let t="";for(let n of e)switch(n){case"&":t+="&amp;";break;case"<":t+="&lt;";break;case">":t+="&gt;";break;case'"':t+="&quot;";break;case"'":t+="&#39;";break;default:t+=n}return t}import E from"prismjs";import"prismjs/components/prism-bash.js";import"prismjs/components/prism-csharp.js";import"prismjs/components/prism-css.js";import"prismjs/components/prism-go.js";import"prismjs/components/prism-java.js";import"prismjs/components/prism-javascript.js";import"prismjs/components/prism-json.js";import"prismjs/components/prism-jsx.js";import"prismjs/components/prism-markup.js";import"prismjs/components/prism-python.js";import"prismjs/components/prism-ruby.js";import"prismjs/components/prism-rust.js";import"prismjs/components/prism-tsx.js";import"prismjs/components/prism-typescript.js";import"prismjs/components/prism-yaml.js";var te=["tabs","spaces"];function W(e){return te.includes(e)}function $(e,t){return t||(re(e)?"tabs":(ae(e),"spaces"))}var oe=["csharp","css","go","html","java","javascript","js","jsx","ts","tsx","typescript","xml"],ne=["python","py","yaml","yml","ruby","rb"];function re(e){return oe.includes(e)}function ae(e){return ne.includes(e)}function L(e,t){let{indentation:n="spaces"}=t||{};return e.trim().replace(/^[ \t]*(?=\S)/gm,o=>n==="spaces"?o.replace(/\t/g,"  "):o.replace(/ {2}/g,"	"))}var B=["bash","cs","csharp","css","dotnet","go","html","java","javascript","js","json","jsx","markup","plain","plaintext","py","python","rb","ruby","rust","sh","shell","text","ts","tsx","txt","typescript","xml","yaml","yml"];function se(e){if(!e)return"sh";let t=e.trim().slice(e.indexOf("-")+1);return D(t)?t:"sh"}var D=e=>typeof e=="string"&&B.includes(e);function H(e="sh"){return`language-${e??"sh"}`}import{Fragment as Ce,jsx as s,jsxs as j}from"react/jsx-runtime";var S=me({codeId:void 0,copyText:"",hasCodeExpander:!1,isCodeExpanded:!1,registerCodeId:()=>{},setCopyText:()=>{},setHasCodeExpander:()=>{},setIsCodeExpanded:()=>{},unregisterCodeId:()=>{}}),V=y(({asChild:e=!1,className:t,...n},o)=>{let[r,a]=b(""),[d,p]=b(!1),[u,f]=b(!1),[l,c]=b(void 0),k=F(()=>({codeId:l,copyText:r,hasCodeExpander:d,isCodeExpanded:u,registerCodeId:g=>{c(h=>(P(h==null,"You can only render a single CodeBlockCode within a CodeBlock."),g))},setCopyText:a,setHasCodeExpander:p,setIsCodeExpanded:f,unregisterCodeId:g=>{c(h=>{P(h===g,"You can only render a single CodeBlockCode within a CodeBlock.")})}}),[l,r,d,u]),C=e?x:"div";return s(S.Provider,{value:k,children:s(C,{className:m("text-size-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono","[&_svg]:shrink-0",t),ref:o,...n})})});V.displayName="CodeBlock";var Y=y(({asChild:e=!1,className:t,...n},o)=>s(e?x:"div",{className:m("relative",t),ref:o,...n}));Y.displayName="CodeBlockBody";var J=y(({className:e,highlightLines:t,indentation:n,language:o="text",showLineNumbers:r,style:a,tabIndex:d,value:p,...u},f)=>{let l=ge(),{hasCodeExpander:c,isCodeExpanded:k,registerCodeId:C,setCopyText:g,unregisterCodeId:h}=A(S),T=$(o,n),v=F(()=>L(p,{indentation:T}),[p,T]),[X,Z]=b(N(L(p,{indentation:T})));w(()=>{let R=E.languages[o];P(R,`CodeBlock does not support the language "${o}". The syntax highlighter does not have a grammar for this language. The supported languages are: ${B.join(", ")}.`);let ee=E.highlight(v,R,o);Z(ee)},[v,o]),w(()=>{g(v)},[v,g]),w(()=>(C(l),()=>{h(l)}),[l,C,h]);let z=H(o);return s("pre",{"aria-expanded":c?k:void 0,className:m("scrollbar firefox:after:mr-[3.375rem] firefox:after:inline-block firefox:after:content-[''] overflow-x-auto overflow-y-hidden p-4 pr-14","text-size-inherit text-size-mono m-0 font-mono","aria-collapsed:max-h-[13.6rem]",z,e),"data-lang":o,id:l,ref:f,style:{...a,tabSize:2,MozTabSize:2},tabIndex:d??-1,...u,children:s("code",{className:ce("text-size-inherit",z),dangerouslySetInnerHTML:{__html:X},suppressHydrationWarning:!0})})});J.displayName="CodeBlockCode";var q=y(({asChild:e=!1,className:t,...n},o)=>s(e?x:"div",{className:m("flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700",t),ref:o,...n}));q.displayName="CodeBlockHeader";var Q=y(({asChild:e=!1,className:t,...n},o)=>s(e?x:"h3",{ref:o,className:m("text-size-mono m-0 font-mono font-normal",t),...n}));Q.displayName="CodeBlockTitle";var G=y(({asChild:e=!1,className:t,onCopy:n,onCopyError:o,onClick:r,...a},d)=>{let{copyText:p}=A(S),[,u]=_(),[f,l]=b(!1),c=fe(0);return j(e?x:"button",{type:"button",className:m("focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-2.5 top-2.5 z-10 flex size-7 items-center justify-center rounded border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_hsl(var(--gray-50)),1rem_0_0_-0.25rem_hsl(var(--gray-50))] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-4",f&&"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent",t),ref:d,onClick:async C=>{try{if(r?.(C),C.defaultPrevented){window.clearTimeout(c.current);return}await u(p),n?.(p),l(!0),window.clearTimeout(c.current),c.current=window.setTimeout(()=>{l(!1)},2e3)}catch(g){o?.(g)}},...a,children:[s("span",{className:"sr-only",children:"Copy code"}),f?j(Ce,{children:["Copied",s(I,{svg:s(de,{weight:"bold"}),className:"size-4"})]}):s(I,{svg:s(pe,{}),className:"-ml-px"})]})});G.displayName="CodeBlockCopyButton";var K=y(({asChild:e=!1,className:t,onClick:n,...o},r)=>{let{codeId:a,isCodeExpanded:d,setIsCodeExpanded:p,setHasCodeExpander:u}=A(S);return w(()=>(u(!0),()=>{u(!1)}),[u]),j(e?x:"button",{...o,"aria-controls":a,"aria-expanded":d,className:m("flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100",t),ref:r,type:"button",onClick:l=>{p(c=>!c),n?.(l)},children:[d?"Show less":"Show more"," ",s(I,{svg:s(ie,{weight:"bold"}),className:m("size-4",d&&"rotate-180","transition-all duration-150")})]})});K.displayName="CodeBlockExpanderButton";function U({className:e,preset:t,svg:n,...o}){let r=n;if(t!=null)switch(t){case"file":r=s(le,{weight:"fill"});break;case"cli":r=s(ue,{weight:"fill"});break;case"traffic-policy":r=s(O,{});break}return s(I,{className:e,svg:r,...o})}U.displayName="CodeBlockIcon";function ye(e,...t){if(!be(e)||!Array.isArray(t))throw new Error("It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\n	Example: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')");let n=String.raw({raw:e},...t),o=he(n);return n.trim().split(`
-`).map(a=>/^\S+/.test(a)?a:a.slice(o)).join(`
-`)}function he(e){let t=e.match(/^[ \t]*(?=\S)/gm);return t?t.reduce((n,o)=>Math.min(n,o.length),Number.POSITIVE_INFINITY):0}function be(e){return Array.isArray(e)&&"raw"in e&&Array.isArray(e.raw)}var xe=["cli","file","traffic-policy"],i={collapsible:!1,disableCopy:!1,indentation:void 0,mode:void 0,title:void 0};function Ie(e){let t=e?.trim()??"";if(!t)return i;let n=ve(t).reduce((o,r)=>{let[a,d]=r.split("=");if(!a)return o;let p=ke(d);return o[a]=p??!0,o},{});try{let o=Be(n);return{...i,...o}}catch{return i}}function ke(e){return e?.trim().replace(/^"(.*)"$/,"$1")}function ve(e){let t=e?.trim()??"",n=[],o="",r=!1;for(let a of t)a===" "&&!r?o&&(n.push(o),o=""):(a==='"'&&(r=!r),o+=a);return o&&n.push(o),n}function Le(e){return xe.includes(e)}function Be(e){let{collapsible:t=i.collapsible,disableCopy:n=i.disableCopy,indentation:o=i.indentation,mode:r=i.mode,title:a=i.title}=e;return{collapsible:typeof t=="string"||typeof t=="boolean"?M(t):i.collapsible,disableCopy:typeof n=="string"||typeof n=="boolean"?M(n):i.disableCopy,indentation:W(o)?o:i.indentation,mode:Le(r)?r:i.mode,title:typeof a=="string"?a.trim():i.title}}export{V as CodeBlock,Y as CodeBlockBody,J as CodeBlockCode,G as CodeBlockCopyButton,K as CodeBlockExpanderButton,q as CodeBlockHeader,U as CodeBlockIcon,Q as CodeBlockTitle,i as defaultMeta,N as escapeHtml,ye as fmtCode,H as formatLanguageClassName,D as isSupportedLanguage,L as normalizeIndentation,se as parseLanguage,Ie as parseMetastring,B as supportedLanguages};
+import{a as _}from"./chunk-IWKI4XHM.js";import{a as O}from"./chunk-W2YQRWR5.js";import{a as B}from"./chunk-3C5O3AQA.js";import{a as I}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as m}from"./chunk-AZ56JGNY.js";import{CaretDownIcon as ie}from"@phosphor-icons/react/CaretDown";import{CheckIcon as de}from"@phosphor-icons/react/Check";import{CopyIcon as pe}from"@phosphor-icons/react/Copy";import{FileTextIcon as le}from"@phosphor-icons/react/FileText";import{TerminalIcon as ue}from"@phosphor-icons/react/Terminal";import{Slot as x}from"@radix-ui/react-slot";import ce from"clsx";import{createContext as me,forwardRef as y,useContext as A,useEffect as S,useId as ge,useMemo as F,useRef as fe,useState as b}from"react";import P from"tiny-invariant";function N(e){let t="";for(let o of e)switch(o){case"&":t+="&amp;";break;case"<":t+="&lt;";break;case">":t+="&gt;";break;case'"':t+="&quot;";break;case"'":t+="&#39;";break;default:t+=o}return t}import E from"prismjs";import"prismjs/components/prism-bash.js";import"prismjs/components/prism-csharp.js";import"prismjs/components/prism-css.js";import"prismjs/components/prism-go.js";import"prismjs/components/prism-java.js";import"prismjs/components/prism-javascript.js";import"prismjs/components/prism-json.js";import"prismjs/components/prism-jsx.js";import"prismjs/components/prism-markup.js";import"prismjs/components/prism-python.js";import"prismjs/components/prism-ruby.js";import"prismjs/components/prism-rust.js";import"prismjs/components/prism-tsx.js";import"prismjs/components/prism-typescript.js";import"prismjs/components/prism-yaml.js";var te=["tabs","spaces"];function W(e){return te.includes(e)}function $(e,t){return t||(re(e)?"tabs":(se(e),"spaces"))}var ne=["csharp","css","go","html","java","javascript","js","jsx","ts","tsx","typescript","xml"],oe=["python","py","yaml","yml","ruby","rb"];function re(e){return ne.includes(e)}function se(e){return oe.includes(e)}function k(e,t){let{indentation:o="spaces"}=t||{};return e.trim().replace(/^[ \t]*(?=\S)/gm,n=>o==="spaces"?n.replace(/\t/g,"  "):n.replace(/ {2}/g,"	"))}var w=["bash","cs","csharp","css","dotnet","go","html","java","javascript","js","json","jsx","markup","plain","plaintext","py","python","rb","ruby","rust","sh","shell","text","ts","tsx","txt","typescript","xml","yaml","yml"];function ae(e){if(!e)return"sh";let t=e.trim().slice(e.indexOf("-")+1);return D(t)?t:"sh"}var D=e=>typeof e=="string"&&w.includes(e);function H(e="sh"){return`language-${e??"sh"}`}import{Fragment as ye,jsx as a,jsxs as j}from"react/jsx-runtime";var M=me({codeId:void 0,copyText:"",hasCodeExpander:!1,isCodeExpanded:!1,registerCodeId:()=>{},setCopyText:()=>{},setHasCodeExpander:()=>{},setIsCodeExpanded:()=>{},unregisterCodeId:()=>{}}),V=y(({asChild:e=!1,className:t,...o},n)=>{let[r,s]=b(""),[d,p]=b(!1),[u,f]=b(!1),[l,c]=b(void 0),v=F(()=>({codeId:l,copyText:r,hasCodeExpander:d,isCodeExpanded:u,registerCodeId:g=>{c(h=>(P(h==null,"You can only render a single CodeBlockCode within a CodeBlock."),g))},setCopyText:s,setHasCodeExpander:p,setIsCodeExpanded:f,unregisterCodeId:g=>{c(h=>{P(h===g,"You can only render a single CodeBlockCode within a CodeBlock.")})}}),[l,r,d,u]),C=e?x:"div";return a(M.Provider,{value:v,children:a(C,{className:m("text-size-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono","[&_svg]:shrink-0",t),ref:n,...o})})});V.displayName="CodeBlock";var Y=y(({asChild:e=!1,className:t,...o},n)=>a(e?x:"div",{className:m("relative",t),ref:n,...o}));Y.displayName="CodeBlockBody";var J=y(({className:e,highlightLines:t,indentation:o,language:n="text",showLineNumbers:r,style:s,tabIndex:d,value:p,...u},f)=>{let l=ge(),{hasCodeExpander:c,isCodeExpanded:v,registerCodeId:C,setCopyText:g,unregisterCodeId:h}=A(M),T=$(n,o),L=F(()=>k(p,{indentation:T}),[p,T]),[X,Z]=b(N(k(p,{indentation:T})));S(()=>{let R=E.languages[n];P(R,`CodeBlock does not support the language "${n}". The syntax highlighter does not have a grammar for this language. The supported languages are: ${w.join(", ")}.`);let ee=E.highlight(L,R,n);Z(ee)},[L,n]),S(()=>{g(L)},[L,g]),S(()=>(C(l),()=>{h(l)}),[l,C,h]);let z=H(n);return a("pre",{"aria-expanded":c?v:void 0,className:m("scrollbar firefox:after:mr-[3.375rem] firefox:after:inline-block firefox:after:content-[''] overflow-x-auto overflow-y-hidden p-4 pr-14","text-size-inherit text-size-mono m-0 font-mono","aria-collapsed:max-h-[13.6rem]",z,e),"data-lang":n,id:l,ref:f,style:{...s,tabSize:2,MozTabSize:2},tabIndex:d??-1,...u,children:a("code",{className:ce("text-size-inherit",z),dangerouslySetInnerHTML:{__html:X},suppressHydrationWarning:!0})})});J.displayName="CodeBlockCode";var q=y(({asChild:e=!1,className:t,...o},n)=>a(e?x:"div",{className:m("flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700",t),ref:n,...o}));q.displayName="CodeBlockHeader";var Q=y(({asChild:e=!1,className:t,...o},n)=>a(e?x:"h3",{ref:n,className:m("text-size-mono m-0 font-mono font-normal",t),...o}));Q.displayName="CodeBlockTitle";var G=y(({asChild:e=!1,className:t,onCopy:o,onCopyError:n,onClick:r,...s},d)=>{let{copyText:p}=A(M),[,u]=_(),[f,l]=b(!1),c=fe(0);return j(e?x:"button",{type:"button",className:m("focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-2.5 top-2.5 z-10 flex size-7 items-center justify-center rounded border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_hsl(var(--gray-50)),1rem_0_0_-0.25rem_hsl(var(--gray-50))] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-4",f&&"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent",t),ref:d,onClick:async C=>{try{if(r?.(C),C.defaultPrevented){window.clearTimeout(c.current);return}await u(p),o?.(p),l(!0),window.clearTimeout(c.current),c.current=window.setTimeout(()=>{l(!1)},2e3)}catch(g){n?.(g)}},...s,children:[a("span",{className:"sr-only",children:"Copy code"}),f?j(ye,{children:["Copied",a(I,{svg:a(de,{weight:"bold"}),className:"size-4"})]}):a(I,{svg:a(pe,{}),className:"-ml-px"})]})});G.displayName="CodeBlockCopyButton";var K=y(({asChild:e=!1,className:t,onClick:o,...n},r)=>{let{codeId:s,isCodeExpanded:d,setIsCodeExpanded:p,setHasCodeExpander:u}=A(M);return S(()=>(u(!0),()=>{u(!1)}),[u]),j(e?x:"button",{...n,"aria-controls":s,"aria-expanded":d,className:m("flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100",t),ref:r,type:"button",onClick:l=>{p(c=>!c),o?.(l)},children:[d?"Show less":"Show more"," ",a(I,{svg:a(ie,{weight:"bold"}),className:m("size-4",d&&"rotate-180","transition-all duration-150")})]})});K.displayName="CodeBlockExpanderButton";function U({className:e,preset:t,svg:o,...n}){let r=o;if(t!=null)switch(t){case"file":r=a(le,{weight:"fill"});break;case"cli":r=a(ue,{weight:"fill"});break;case"traffic-policy":r=a(O,{});break}return a(I,{className:e,svg:r,...n})}U.displayName="CodeBlockIcon";var Ce={Root:V,Body:Y,Code:J,CopyButton:G,ExpanderButton:K,Header:q,Icon:U,Title:Q};function he(e,...t){if(!xe(e)||!Array.isArray(t))throw new Error("It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\n	Example: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')");let o=String.raw({raw:e},...t),n=be(o);return o.trim().split(`
+`).map(s=>/^\S+/.test(s)?s:s.slice(n)).join(`
+`)}function be(e){let t=e.match(/^[ \t]*(?=\S)/gm);return t?t.reduce((o,n)=>Math.min(o,n.length),Number.POSITIVE_INFINITY):0}function xe(e){return Array.isArray(e)&&"raw"in e&&Array.isArray(e.raw)}var Ie=["cli","file","traffic-policy"],i={collapsible:!1,disableCopy:!1,indentation:void 0,mode:void 0,title:void 0};function ve(e){let t=e?.trim()??"";if(!t)return i;let o=ke(t).reduce((n,r)=>{let[s,d]=r.split("=");if(!s)return n;let p=Le(d);return n[s]=p??!0,n},{});try{let n=Se(o);return{...i,...n}}catch{return i}}function Le(e){return e?.trim().replace(/^"(.*)"$/,"$1")}function ke(e){let t=e?.trim()??"",o=[],n="",r=!1;for(let s of t)s===" "&&!r?n&&(o.push(n),n=""):(s==='"'&&(r=!r),n+=s);return n&&o.push(n),o}function we(e){return Ie.includes(e)}function Se(e){let{collapsible:t=i.collapsible,disableCopy:o=i.disableCopy,indentation:n=i.indentation,mode:r=i.mode,title:s=i.title}=e;return{collapsible:typeof t=="string"||typeof t=="boolean"?B(t):i.collapsible,disableCopy:typeof o=="string"||typeof o=="boolean"?B(o):i.disableCopy,indentation:W(n)?n:i.indentation,mode:we(r)?r:i.mode,title:typeof s=="string"?s.trim():i.title}}export{Ce as CodeBlock,i as defaultMeta,N as escapeHtml,he as fmtCode,H as formatLanguageClassName,D as isSupportedLanguage,k as normalizeIndentation,ae as parseLanguage,ve as parseMetastring,w as supportedLanguages};
 //# sourceMappingURL=code-block.js.map