@ngrok/mantle 0.6.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/mantle.css +9 -9
- package/dist/badge.js +1 -1
- package/dist/badge.js.map +1 -1
- package/dist/code-block.d.ts +4 -3
- package/dist/code-block.js +3 -3
- package/dist/code-block.js.map +1 -1
- package/dist/theme-provider.js +2 -2
- package/dist/theme-provider.js.map +1 -1
- package/package.json +8 -8
package/assets/mantle.css
CHANGED
|
@@ -3,35 +3,35 @@
|
|
|
3
3
|
font-family: EuclidSquare;
|
|
4
4
|
font-style: normal;
|
|
5
5
|
font-weight: normal;
|
|
6
|
-
src: url("https://
|
|
6
|
+
src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-Regular-WebS.woff") format("woff");
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
@font-face {
|
|
10
10
|
font-family: EuclidSquare;
|
|
11
11
|
font-style: italic;
|
|
12
12
|
font-weight: normal;
|
|
13
|
-
src: url("https://
|
|
13
|
+
src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-RegularItalic-WebS.woff") format("woff");
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
@font-face {
|
|
17
17
|
font-family: EuclidSquare;
|
|
18
18
|
font-style: normal;
|
|
19
19
|
font-weight: 500;
|
|
20
|
-
src: url("https://
|
|
20
|
+
src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-Medium-WebS.woff") format("woff");
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
@font-face {
|
|
24
24
|
font-family: EuclidSquare;
|
|
25
25
|
font-style: normal;
|
|
26
26
|
font-weight: 600;
|
|
27
|
-
src: url("https://
|
|
27
|
+
src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-Semibold-WebS.woff") format("woff");
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
@font-face {
|
|
31
31
|
font-family: EuclidSquare;
|
|
32
32
|
font-style: italic;
|
|
33
33
|
font-weight: 500;
|
|
34
|
-
src: url("https://
|
|
34
|
+
src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-MediumItalic-WebS.woff") format("woff");
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
/* IBM Plex Mono */
|
|
@@ -40,14 +40,14 @@
|
|
|
40
40
|
font-family: IBMPlexMono;
|
|
41
41
|
font-style: normal;
|
|
42
42
|
font-weight: normal;
|
|
43
|
-
src: url("https://
|
|
43
|
+
src: url("https://assets.ngrok.com/fonts/ibm-plex-mono/IBMPlexMono-Text.woff") format("woff");
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
@font-face {
|
|
47
47
|
font-family: IBMPlexMono;
|
|
48
48
|
font-style: italic;
|
|
49
49
|
font-weight: normal;
|
|
50
|
-
src: url("https://
|
|
50
|
+
src: url("https://assets.ngrok.com/fonts/ibm-plex-mono/IBMPlexMono-TextItalic.woff") format("woff");
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
/* semibold is actually 600, but mapping it to 500 works better across AntD */
|
|
@@ -55,14 +55,14 @@
|
|
|
55
55
|
font-family: IBMPlexMono;
|
|
56
56
|
font-style: normal;
|
|
57
57
|
font-weight: 500;
|
|
58
|
-
src: url("https://
|
|
58
|
+
src: url("https://assets.ngrok.com/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff") format("woff");
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
@font-face {
|
|
62
62
|
font-family: IBMPlexMono;
|
|
63
63
|
font-style: italic;
|
|
64
64
|
font-weight: 500;
|
|
65
|
-
src: url("https://
|
|
65
|
+
src: url("https://assets.ngrok.com/fonts/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff") format("woff");
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
@tailwind base;
|
package/dist/badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as n}from"./chunk-ZOQ33WW5.js";import{a as o}from"./chunk-EW5CFGXT.js";import s from"tiny-invariant";import{jsx as x,jsxs as f}from"react/jsx-runtime";var p=({appearance:t,children:e,className:g,color:a="neutral",icon:r,...l})=>{let i=d(a,t),c=b(a,t);return f("span",{className:o("inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 text-sm font-medium sm:text-xs",r&&"ps-1",i,c,g),...l,children:[r&&x(n,{className:"size-5 sm:size-4",svg:r}),e]})};var u={amber:"bg-amber-
|
|
1
|
+
import{a as n}from"./chunk-ZOQ33WW5.js";import{a as o}from"./chunk-EW5CFGXT.js";import s from"tiny-invariant";import{jsx as x,jsxs as f}from"react/jsx-runtime";var p=({appearance:t,children:e,className:g,color:a="neutral",icon:r,...l})=>{let i=d(a,t),c=b(a,t);return f("span",{className:o("inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 text-sm font-medium sm:text-xs",r&&"ps-1",i,c,g),...l,children:[r&&x(n,{className:"size-5 sm:size-4",svg:r}),e]})};var u={amber:"bg-amber-500/20",blue:"bg-blue-500/20",cyan:"bg-cyan-500/20",emerald:"bg-emerald-500/20",fuchsia:"bg-fuchsia-500/20",gray:"bg-gray-500/20",green:"bg-green-500/20",indigo:"bg-indigo-500/20",lime:"bg-lime-500/20",orange:"bg-orange-500/20",pink:"bg-pink-500/20",purple:"bg-purple-500/20",red:"bg-red-500/20",rose:"bg-rose-500/20",sky:"bg-sky-500/20",teal:"bg-teal-500/20",violet:"bg-violet-500/20",yellow:"bg-yellow-500/20",accent:"bg-accent-500/20",danger:"bg-danger-500/20",neutral:"bg-neutral-500/20",success:"bg-success-500/20",warning:"bg-warning-500/20"};function d(t,e){switch(e){case"muted":return u[t];default:s(!1,`Invalid appearance: ${String(e)}`)}}var m={amber:"text-amber-700",blue:"text-blue-700",cyan:"text-cyan-700",emerald:"text-emerald-700",fuchsia:"text-fuchsia-700",gray:"text-gray-700",green:"text-green-700",indigo:"text-indigo-700",lime:"text-lime-700",orange:"text-orange-700",pink:"text-pink-700",purple:"text-purple-700",red:"text-red-700",rose:"text-rose-700",sky:"text-sky-700",teal:"text-teal-700",violet:"text-violet-700",yellow:"text-yellow-700",accent:"text-accent-700",danger:"text-danger-700",neutral:"text-neutral-700",success:"text-success-700",warning:"text-warning-700"};function b(t,e){switch(e){case"muted":return m[t];default:s(!1,`Invalid appearance: ${String(e)}`)}}export{p as Badge};
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
package/dist/badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { Color } from \"../../utils/color/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconBase } from \"../icon/_icon-base.js\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = HTMLAttributes<HTMLSpanElement> & {\n\t/**\n\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t */\n\tcolor?: Color;\n\t/**\n\t * The icon to render inside the badge.\n\t */\n\ticon?: ReactNode;\n\t/**\n\t * The visual style of the badge.\n\t */\n\tappearance: Appearance;\n};\n\n/**\n * A Badge is a non-interactive component used to highlight important information or to visually indicate the status of an item.\n */\nconst Badge = ({ appearance, children, className, color = \"neutral\", icon, ...props }: BadgeProps) => {\n\tconst bgColor = computeBgColor(color, appearance);\n\tconst textColor = computeTextColor(color, appearance);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={cx(\n\t\t\t\t\"inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 text-sm font-medium sm:text-xs\",\n\t\t\t\ticon && \"ps-1\",\n\t\t\t\tbgColor,\n\t\t\t\ttextColor,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{icon && <IconBase className=\"size-5 sm:size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\n\n// MARK: - Exports\n\nexport { Badge };\n\nexport type { BadgeProps };\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-
|
|
1
|
+
{"version":3,"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { Color } from \"../../utils/color/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconBase } from \"../icon/_icon-base.js\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = HTMLAttributes<HTMLSpanElement> & {\n\t/**\n\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t */\n\tcolor?: Color;\n\t/**\n\t * The icon to render inside the badge.\n\t */\n\ticon?: ReactNode;\n\t/**\n\t * The visual style of the badge.\n\t */\n\tappearance: Appearance;\n};\n\n/**\n * A Badge is a non-interactive component used to highlight important information or to visually indicate the status of an item.\n */\nconst Badge = ({ appearance, children, className, color = \"neutral\", icon, ...props }: BadgeProps) => {\n\tconst bgColor = computeBgColor(color, appearance);\n\tconst textColor = computeTextColor(color, appearance);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={cx(\n\t\t\t\t\"inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 text-sm font-medium sm:text-xs\",\n\t\t\t\ticon && \"ps-1\",\n\t\t\t\tbgColor,\n\t\t\t\ttextColor,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{icon && <IconBase className=\"size-5 sm:size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\n\n// MARK: - Exports\n\nexport { Badge };\n\nexport type { BadgeProps };\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-500/20\",\n\tblue: \"bg-blue-500/20\",\n\tcyan: \"bg-cyan-500/20\",\n\temerald: \"bg-emerald-500/20\",\n\tfuchsia: \"bg-fuchsia-500/20\",\n\tgray: \"bg-gray-500/20\",\n\tgreen: \"bg-green-500/20\",\n\tindigo: \"bg-indigo-500/20\",\n\tlime: \"bg-lime-500/20\",\n\torange: \"bg-orange-500/20\",\n\tpink: \"bg-pink-500/20\",\n\tpurple: \"bg-purple-500/20\",\n\tred: \"bg-red-500/20\",\n\trose: \"bg-rose-500/20\",\n\tsky: \"bg-sky-500/20\",\n\tteal: \"bg-teal-500/20\",\n\tviolet: \"bg-violet-500/20\",\n\tyellow: \"bg-yellow-500/20\",\n\taccent: \"bg-accent-500/20\",\n\tdanger: \"bg-danger-500/20\",\n\tneutral: \"bg-neutral-500/20\",\n\tsuccess: \"bg-success-500/20\",\n\twarning: \"bg-warning-500/20\",\n} satisfies Record<Color, string>;\n\nfunction computeBgColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn mutedBgColorLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n\nconst textColorMutedLookup = {\n\tamber: \"text-amber-700\",\n\tblue: \"text-blue-700\",\n\tcyan: \"text-cyan-700\",\n\temerald: \"text-emerald-700\",\n\tfuchsia: \"text-fuchsia-700\",\n\tgray: \"text-gray-700\",\n\tgreen: \"text-green-700\",\n\tindigo: \"text-indigo-700\",\n\tlime: \"text-lime-700\",\n\torange: \"text-orange-700\",\n\tpink: \"text-pink-700\",\n\tpurple: \"text-purple-700\",\n\tred: \"text-red-700\",\n\trose: \"text-rose-700\",\n\tsky: \"text-sky-700\",\n\tteal: \"text-teal-700\",\n\tviolet: \"text-violet-700\",\n\tyellow: \"text-yellow-700\",\n\taccent: \"text-accent-700\",\n\tdanger: \"text-danger-700\",\n\tneutral: \"text-neutral-700\",\n\tsuccess: \"text-success-700\",\n\twarning: \"text-warning-700\",\n} satisfies Record<Color, string>;\n\nfunction computeTextColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn textColorMutedLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n"],"mappings":"gFACA,OAAOA,MAAe,iBA+BpB,OAUU,OAAAC,EAVV,QAAAC,MAAA,oBALF,IAAMC,EAAQ,CAAC,CAAE,WAAAC,EAAY,SAAAC,EAAU,UAAAC,EAAW,MAAAC,EAAQ,UAAW,KAAAC,EAAM,GAAGC,CAAM,IAAkB,CACrG,IAAMC,EAAUC,EAAeJ,EAAOH,CAAU,EAC1CQ,EAAYC,EAAiBN,EAAOH,CAAU,EAEpD,OACCU,EAAC,QACA,UAAWC,EACV,oHACAP,GAAQ,OACRE,EACAE,EACAN,CACD,EACC,GAAGG,EAEH,UAAAD,GAAQQ,EAACC,EAAA,CAAS,UAAU,mBAAmB,IAAKT,EAAM,EAC1DH,GACF,CAEF,EAUA,IAAMa,EAAqB,CAC1B,MAAO,kBACP,KAAM,iBACN,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACN,MAAO,kBACP,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,IAAK,gBACL,KAAM,iBACN,IAAK,gBACL,KAAM,iBACN,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,QAAS,oBACT,QAAS,oBACT,QAAS,mBACV,EAEA,SAASC,EAAeC,EAAcC,EAAwB,CAC7D,OAAQA,EAAY,CACnB,IAAK,QACJ,OAAOH,EAAmBE,CAAK,EAChC,QACCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAC9D,CACD,CAEA,IAAME,EAAuB,CAC5B,MAAO,iBACP,KAAM,gBACN,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,KAAM,gBACN,MAAO,iBACP,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,IAAK,eACL,KAAM,gBACN,IAAK,eACL,KAAM,gBACN,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,QAAS,mBACT,QAAS,mBACT,QAAS,kBACV,EAEA,SAASC,EAAiBJ,EAAcC,EAAwB,CAC/D,OAAQA,EAAY,CACnB,IAAK,QACJ,OAAOE,EAAqBH,CAAK,EAClC,QACCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAC9D,CACD","names":["invariant","jsx","jsxs","Badge","appearance","children","className","color","icon","props","bgColor","computeBgColor","textColor","computeTextColor","jsxs","cx","jsx","IconBase","mutedBgColorLookup","computeBgColor","color","appearance","invariant","textColorMutedLookup","computeTextColor"]}
|
package/dist/code-block.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { HTMLAttributes } from 'react';
|
|
2
|
+
import { HTMLAttributes, ComponentProps } from 'react';
|
|
3
3
|
import { W as WithStyleProps } from './with-style-props-VnLWm0Yd.js';
|
|
4
4
|
import { z } from 'zod';
|
|
5
5
|
|
|
@@ -34,7 +34,7 @@ declare function formatLanguageClassName(language?: SupportedLanguage | undefine
|
|
|
34
34
|
|
|
35
35
|
declare const CodeBlock: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
|
|
36
36
|
declare const CodeBlockBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
|
|
37
|
-
|
|
37
|
+
type CodeBlockCodeProps = Omit<ComponentProps<"pre">, "children"> & {
|
|
38
38
|
/**
|
|
39
39
|
* The code to display in the code block. Should be code formatted as a string. This code will be passed to our syntax highlighter.
|
|
40
40
|
*/
|
|
@@ -51,7 +51,8 @@ declare const CodeBlockCode: react.ForwardRefExoticComponent<WithStyleProps & {
|
|
|
51
51
|
* @todo not implemented yet
|
|
52
52
|
*/
|
|
53
53
|
showLineNumbers?: boolean;
|
|
54
|
-
}
|
|
54
|
+
};
|
|
55
|
+
declare const CodeBlockCode: react.ForwardRefExoticComponent<Omit<CodeBlockCodeProps, "ref"> & react.RefAttributes<HTMLPreElement>>;
|
|
55
56
|
declare const CodeBlockHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
|
|
56
57
|
declare const CodeBlockTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
|
|
57
58
|
asChild?: boolean;
|
package/dist/code-block.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as
|
|
2
|
-
`).map(n=>/^\S+/.test(n)?n:n.slice(
|
|
3
|
-
`)}function
|
|
1
|
+
import{a as H}from"./chunk-IWKI4XHM.js";import{a as l}from"./chunk-EW5CFGXT.js";import{CaretDown as Y}from"@phosphor-icons/react/CaretDown";import{Check as J}from"@phosphor-icons/react/Check";import{Copy as Q}from"@phosphor-icons/react/Copy";import{Slot as V}from"@radix-ui/react-slot";import N 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";import{createContext as q,forwardRef as c,useContext as w,useEffect as y,useId as G,useMemo as K,useState as f}from"react";import T from"tiny-invariant";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 F(e){if(!e)return"sh";let t=e.trim().slice(e.indexOf("-")+1);return I(t)?t:"sh"}var I=e=>typeof e=="string"&&b.includes(e);function M(e="sh"){return`language-${e??"sh"}`}import{Fragment as U,jsx as d,jsxs as v}from"react/jsx-runtime";var L=q({codeId:void 0,copyText:"",hasCodeExpander:!1,isCodeExpanded:!1,registerCodeId:()=>{},setCopyText:()=>{},setHasCodeExpander:()=>{},setIsCodeExpanded:()=>{},unregisterCodeId:()=>{}}),A=c(({className:e,...t},r)=>{let[o,a]=f(""),[n,p]=f(!1),[s,u]=f(!1),[i,x]=f(void 0),k=K(()=>({codeId:i,copyText:o,hasCodeExpander:n,isCodeExpanded:s,registerCodeId:m=>{x(g=>(T(g==null,"You can only render a single CodeBlockCode within a CodeBlock."),m))},setCopyText:a,setHasCodeExpander:p,setIsCodeExpanded:u,unregisterCodeId:m=>{x(g=>{T(g===m,"You can only render a single CodeBlockCode within a CodeBlock.")})}}),[i,o,n,s]);return d(L.Provider,{value:k,children:d("div",{className:l("overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono text-[0.8125rem]",e),ref:r,...t})})});A.displayName="CodeBlock";var P=c(({className:e,...t},r)=>d("div",{className:l("relative",e),ref:r,...t}));P.displayName="CodeBlockBody";var j=c(({className:e,language:t="text",style:r,value:o,highlightLines:a,showLineNumbers:n,tabIndex:p,...s},u)=>{let i=G(),{hasCodeExpander:x,isCodeExpanded:k,registerCodeId:m,setCopyText:g,unregisterCodeId:E}=w(L),C=o?.trim()??"",[R,O]=f(C);return y(()=>{let S=N.languages[t];T(S,`CodeBlock does not support the language "${t}". The syntax highlighter does not have a grammar for this language. The supported languages are: ${b.join(", ")}.`);let W=N.highlight(C,S,t);O(W)},[C,t]),y(()=>{g(C)},[C,g]),y(()=>(m(i),()=>{E(i)}),[i,m,E]),d("pre",{"aria-expanded":x?k:void 0,className:l("scrollbar firefox:after:mr-[3.375rem] firefox:after:inline-block firefox:after:content-[''] overflow-x-auto overflow-y-hidden p-4 pr-[3.375rem]","aria-collapsed:max-h-[13.6rem]",M(t),e),"data-lang":t,id:i,ref:u,style:{...r,tabSize:2,MozTabSize:2},tabIndex:p??-1,...s,children:d("code",{suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:R}})})});j.displayName="CodeBlockCode";var _=c(({className:e,...t},r)=>d("div",{className:l("flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700",e),ref:r,...t}));_.displayName="CodeBlockHeader";var D=c(({asChild:e=!1,className:t,...r},o)=>d(e?V:"h3",{ref:o,className:l("font-mono text-[0.8125rem] font-normal",t),...r}));D.displayName="CodeBlockTitle";var z=c(({className:e,onCopy:t,onCopyError:r,style:o},a)=>{let{copyText:n}=w(L),[,p]=H(),[s,u]=f(!1);return y(()=>{if(s){let i=window.setTimeout(()=>{u(!1)},2e3);return()=>{clearTimeout(i)}}},[s]),v("button",{type:"button",className:l("focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-3 top-3 z-10 flex h-7 w-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",s&&"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",e),ref:a,style:o,onClick:async()=>{try{await p(n),t?.(n),u(!0)}catch(i){r?.(i)}},children:[d("span",{className:"sr-only",children:"Copy code"}),s?v(U,{children:["Copied",d(J,{className:"h-4 w-4",weight:"bold"})]}):d(Q,{className:"-ml-px h-5 w-5"})]})});z.displayName="CodeBlockCopyButton";var $=c(({className:e,onClick:t,...r},o)=>{let{codeId:a,isCodeExpanded:n,setIsCodeExpanded:p,setHasCodeExpander:s}=w(L);return y(()=>(s(!0),()=>{s(!1)}),[s]),v("button",{...r,"aria-controls":a,"aria-expanded":n,className:l("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",e),ref:o,type:"button",onClick:u=>{p(i=>!i),t?.(u)},children:[n?"Show less":"Show more"," ",d(Y,{className:l("h-4 w-4",n&&"rotate-180","transition-all duration-150"),weight:"bold"})]})});$.displayName="CodeBlockExpanderButton";function X(e,...t){if(!ee(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 r=String.raw({raw:e},...t),o=Z(r);return r.trim().split(`
|
|
2
|
+
`).map(n=>/^\S+/.test(n)?n:n.slice(o)).join(`
|
|
3
|
+
`)}function Z(e){let t=e.match(/^[ \t]*(?=\S)/gm);return t?t.reduce((r,o)=>Math.min(r,o.length),1/0):0}function ee(e){return Array.isArray(e)&&"raw"in e&&Array.isArray(e.raw)}import{z as h}from"zod";var te=["file","cli"],oe=h.object({collapsible:h.boolean().default(!1),disableCopy:h.boolean().default(!1),mode:h.enum(te).optional(),title:h.string().trim().optional()}),B={collapsible:!1,disableCopy:!1,mode:void 0,title:void 0};function re(e){let t=e?.trim()??"";if(!t)return B;let r=se(t).reduce((o,a)=>{let[n,p]=a.split("=");if(!n)return o;let s=ne(p);return o[n]=s??!0,o},{});try{let o=oe.parse(r);return{...B,...o}}catch{return B}}function ne(e){return e?.trim().replace(/^"(.*)"$/,"$1")}function se(e){let t=e?.trim()??"",r=[],o="",a=!1;for(let n of t)n===" "&&!a?o&&(r.push(o),o=""):(n==='"'&&(a=!a),o+=n);return o&&r.push(o),r}export{A as CodeBlock,P as CodeBlockBody,j as CodeBlockCode,z as CodeBlockCopyButton,$ as CodeBlockExpanderButton,_ as CodeBlockHeader,D as CodeBlockTitle,B as defaultMeta,X as fmtCode,M as formatLanguageClassName,I as isSupportedLanguage,F as parseLanguage,re as parseMetastring,b as supportedLanguages};
|
|
4
4
|
//# sourceMappingURL=code-block.js.map
|
package/dist/code-block.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/code-block/code-block.tsx","../src/components/code-block/supported-languages.ts","../src/components/code-block/fmt-code.ts","../src/components/code-block/parse-metastring.ts"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport Prism from \"prismjs\";\nimport { createContext, forwardRef, useContext, useEffect, useId, useMemo, useState } from \"react\";\nimport type { Dispatch, HTMLAttributes, SetStateAction } from \"react\";\nimport \"prismjs/components/prism-bash.js\";\nimport \"prismjs/components/prism-bash.js\";\nimport \"prismjs/components/prism-csharp.js\";\nimport \"prismjs/components/prism-css.js\";\nimport \"prismjs/components/prism-go.js\";\nimport \"prismjs/components/prism-java.js\";\nimport \"prismjs/components/prism-javascript.js\";\nimport \"prismjs/components/prism-json.js\";\nimport \"prismjs/components/prism-jsx.js\";\nimport \"prismjs/components/prism-markup.js\";\nimport \"prismjs/components/prism-python.js\";\nimport \"prismjs/components/prism-ruby.js\";\nimport \"prismjs/components/prism-rust.js\";\nimport \"prismjs/components/prism-tsx.js\";\nimport \"prismjs/components/prism-typescript.js\";\nimport \"prismjs/components/prism-yaml.js\";\nimport { CaretDown } from \"@phosphor-icons/react/CaretDown\";\nimport { Check } from \"@phosphor-icons/react/Check\";\nimport { Copy } from \"@phosphor-icons/react/Copy\";\nimport assert from \"tiny-invariant\";\nimport { useCopyToClipboard } from \"../../hooks/use-copy-to-clipboard.js\";\nimport type { WithStyleProps } from \"../../types/with-style-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { LineRange } from \"./line-numbers.js\";\nimport { formatLanguageClassName, supportedLanguages } from \"./supported-languages.js\";\nimport type { SupportedLanguage } from \"./supported-languages.js\";\n\n/**\n * TODO(cody):\n * - fix line numbers, maybe try grid instead of :before and flex?\n * - fix line hightlighting\n * - fix line wrapping? horizontal scrolling has problems w/ line highlighting :(\n */\n\ntype CodeBlockContextType = {\n\tcodeId: string | undefined;\n\tcopyText: string;\n\thasCodeExpander: boolean;\n\tisCodeExpanded: boolean;\n\tregisterCodeId: (id: string) => void;\n\tsetCopyText: (newCopyText: string) => void;\n\tsetHasCodeExpander: (value: boolean) => void;\n\tsetIsCodeExpanded: Dispatch<SetStateAction<boolean>>;\n\tunregisterCodeId: (id: string) => void;\n};\n\nconst CodeBlockContext = createContext<CodeBlockContextType>({\n\tcodeId: undefined,\n\tcopyText: \"\",\n\thasCodeExpander: false,\n\tisCodeExpanded: false,\n\tregisterCodeId: () => {},\n\tsetCopyText: () => {},\n\tsetHasCodeExpander: () => {},\n\tsetIsCodeExpanded: () => {},\n\tunregisterCodeId: () => {},\n});\n\nconst CodeBlock = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {\n\tconst [copyText, setCopyText] = useState(\"\");\n\tconst [hasCodeExpander, setHasCodeExpander] = useState(false);\n\tconst [isCodeExpanded, setIsCodeExpanded] = useState(false);\n\tconst [codeId, setCodeId] = useState<string | undefined>(undefined);\n\n\tconst context: CodeBlockContextType = useMemo(\n\t\t() =>\n\t\t\t({\n\t\t\t\tcodeId,\n\t\t\t\tcopyText,\n\t\t\t\thasCodeExpander,\n\t\t\t\tisCodeExpanded,\n\t\t\t\tregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(old == null, \"You can only render a single CodeBlockCode within a CodeBlock.\");\n\t\t\t\t\t\treturn id;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tsetCopyText,\n\t\t\t\tsetHasCodeExpander,\n\t\t\t\tsetIsCodeExpanded,\n\t\t\t\tunregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(old === id, \"You can only render a single CodeBlockCode within a CodeBlock.\");\n\t\t\t\t\t\treturn undefined;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t}) as const,\n\t\t[codeId, copyText, hasCodeExpander, isCodeExpanded],\n\t);\n\n\treturn (\n\t\t<CodeBlockContext.Provider value={context}>\n\t\t\t<div\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono text-[0.8125rem]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</CodeBlockContext.Provider>\n\t);\n});\nCodeBlock.displayName = \"CodeBlock\";\n\nconst CodeBlockBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (\n\t<div className={cx(\"relative\", className)} ref={ref} {...props} />\n));\nCodeBlockBody.displayName = \"CodeBlockBody\";\n\ntype CodeBlockCodeProps = WithStyleProps & {\n\t/**\n\t * The code to display in the code block. Should be code formatted as a string. This code will be passed to our syntax highlighter.\n\t */\n\tvalue: string;\n\t/**\n\t * @todo not implemented yet\n\t */\n\thighlightLines?: (LineRange | number)[];\n\t/**\n\t * The language of the code block. This will be used to determine how to syntax highlight the code. @default `\"text\"`.\n\t */\n\tlanguage?: SupportedLanguage;\n\t/**\n\t * @todo not implemented yet\n\t */\n\tshowLineNumbers?: boolean;\n};\n\nconst CodeBlockCode = forwardRef<HTMLPreElement, CodeBlockCodeProps>((props, ref) => {\n\tconst { className, language = \"text\", style, value } = props;\n\tconst id = useId();\n\tconst { hasCodeExpander, isCodeExpanded, registerCodeId, setCopyText, unregisterCodeId } =\n\t\tuseContext(CodeBlockContext);\n\n\t// trim any leading and trailing whitespace/empty lines\n\tconst trimmedCode = value?.trim() ?? \"\";\n\tconst [highlightedCodeInnerHtml, setHighlightedCodeInnerHtml] = useState(trimmedCode);\n\n\tuseEffect(() => {\n\t\tconst grammar = Prism.languages[language];\n\t\tassert(\n\t\t\tgrammar,\n\t\t\t`CodeBlock does not support the language \"${language}\". The syntax highlighter does not have a grammar for this language. The supported languages are: ${supportedLanguages.join(\", \")}.`,\n\t\t);\n\t\tconst newHighlightedCodeInnerHtml = Prism.highlight(trimmedCode, grammar, language);\n\t\tsetHighlightedCodeInnerHtml(newHighlightedCodeInnerHtml);\n\t}, [trimmedCode, language]);\n\n\tuseEffect(() => {\n\t\tsetCopyText(trimmedCode);\n\t}, [trimmedCode, setCopyText]);\n\n\tuseEffect(() => {\n\t\tregisterCodeId(id);\n\n\t\treturn () => {\n\t\t\tunregisterCodeId(id);\n\t\t};\n\t}, [id, registerCodeId, unregisterCodeId]);\n\n\treturn (\n\t\t<pre\n\t\t\taria-expanded={hasCodeExpander ? isCodeExpanded : undefined}\n\t\t\tclassName={cx(\n\t\t\t\tformatLanguageClassName(language),\n\t\t\t\t\"scrollbar firefox:after:mr-[3.375rem] firefox:after:inline-block firefox:after:content-[''] overflow-x-auto overflow-y-hidden p-4 pr-[3.375rem]\",\n\t\t\t\t\"aria-collapsed:max-h-[13.6rem]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-lang={language}\n\t\t\tid={id}\n\t\t\tref={ref}\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\ttabSize: 2,\n\t\t\t\tMozTabSize: 2,\n\t\t\t}}\n\t\t>\n\t\t\t<code dangerouslySetInnerHTML={{ __html: highlightedCodeInnerHtml }} />\n\t\t</pre>\n\t);\n});\nCodeBlockCode.displayName = \"CodeBlockCode\";\n\nconst CodeBlockHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (\n\t<div\n\t\tclassName={cx(\"flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700\", className)}\n\t\tref={ref}\n\t\t{...props}\n\t/>\n));\nCodeBlockHeader.displayName = \"CodeBlockHeader\";\n\nconst CodeBlockTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement> & { asChild?: boolean }>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"h3\";\n\t\treturn <Comp ref={ref} className={cx(\"font-mono text-[0.8125rem] font-normal\", className)} {...props} />;\n\t},\n);\nCodeBlockTitle.displayName = \"CodeBlockTitle\";\n\ntype CodeBlockCopyButtonProps = WithStyleProps & {\n\t/**\n\t * Callback fired when the copy button is clicked, passes the copied text as an argument.\n\t */\n\tonCopy?: (value: string) => void;\n\t/**\n\t * Callback fired when an error occurs during copying.\n\t */\n\tonCopyError?: (error: unknown) => void;\n};\n\nconst CodeBlockCopyButton = forwardRef<HTMLButtonElement, CodeBlockCopyButtonProps>(\n\t({ className, onCopy, onCopyError, style }, ref) => {\n\t\tconst { copyText } = useContext(CodeBlockContext);\n\t\tconst [, copyToClipboard] = useCopyToClipboard();\n\t\tconst [copied, setCopied] = useState(false);\n\n\t\tuseEffect(() => {\n\t\t\tif (copied) {\n\t\t\t\tconst timeoutId = window.setTimeout(() => {\n\t\t\t\t\tsetCopied(false);\n\t\t\t\t}, 2000);\n\n\t\t\t\treturn () => {\n\t\t\t\t\tclearTimeout(timeoutId);\n\t\t\t\t};\n\t\t\t}\n\t\t}, [copied]);\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-3 top-3 z-10 flex h-7 w-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\",\n\t\t\t\t\tcopied &&\n\t\t\t\t\t\t\"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={style}\n\t\t\t\tonClick={async () => {\n\t\t\t\t\ttry {\n\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/await-thenable\n\t\t\t\t\t\tawait copyToClipboard(copyText);\n\t\t\t\t\t\tonCopy?.(copyText);\n\t\t\t\t\t\tsetCopied(true);\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\tonCopyError?.(error);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<span className=\"sr-only\">Copy code</span>\n\t\t\t\t{copied ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\tCopied\n\t\t\t\t\t\t<Check className=\"h-4 w-4\" weight=\"bold\" />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<Copy className=\"-ml-px h-5 w-5\" />\n\t\t\t\t)}\n\t\t\t</button>\n\t\t);\n\t},\n);\nCodeBlockCopyButton.displayName = \"CodeBlockCopyButton\";\n\ntype CodeBlockExpanderButtonProps = Omit<\n\tHTMLAttributes<HTMLButtonElement>,\n\t\"children\" | \"aria-controls\" | \"aria-expanded\"\n>;\n\nconst CodeBlockExpanderButton = forwardRef<HTMLButtonElement, CodeBlockExpanderButtonProps>(\n\t({ className, onClick, ...props }, ref) => {\n\t\tconst { codeId, isCodeExpanded, setIsCodeExpanded, setHasCodeExpander } = useContext(CodeBlockContext);\n\n\t\tuseEffect(() => {\n\t\t\tsetHasCodeExpander(true);\n\n\t\t\treturn () => {\n\t\t\t\tsetHasCodeExpander(false);\n\t\t\t};\n\t\t}, [setHasCodeExpander]);\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\t{...props}\n\t\t\t\taria-controls={codeId}\n\t\t\t\taria-expanded={isCodeExpanded}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 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<CaretDown\n\t\t\t\t\tclassName={cx(\"h-4 w-4\", isCodeExpanded && \"rotate-180\", \"transition-all duration-150\")}\n\t\t\t\t\tweight=\"bold\"\n\t\t\t\t/>\n\t\t\t</button>\n\t\t);\n\t},\n);\nCodeBlockExpanderButton.displayName = \"CodeBlockExpanderButton\";\n\nexport {\n\tCodeBlock,\n\tCodeBlockBody,\n\tCodeBlockCode,\n\tCodeBlockCopyButton,\n\tCodeBlockExpanderButton,\n\tCodeBlockHeader,\n\tCodeBlockTitle,\n};\n","/**\n * List of supported languages for syntax highlighting.\n * @private\n */\nexport const supportedLanguages = [\n\t\"bash\",\n\t\"cs\",\n\t\"csharp\",\n\t\"css\",\n\t\"dotnet\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"json\",\n\t\"jsx\",\n\t\"markup\",\n\t\"plain\",\n\t\"plaintext\",\n\t\"py\",\n\t\"python\",\n\t\"rb\",\n\t\"ruby\",\n\t\"rust\",\n\t\"sh\",\n\t\"shell\",\n\t\"text\",\n\t\"ts\",\n\t\"tsx\",\n\t\"txt\",\n\t\"typescript\",\n\t\"xml\",\n\t\"yaml\",\n\t\"yml\",\n] as const;\n\n/**\n * Supported languages for syntax highlighting.\n */\ntype SupportedLanguage = (typeof supportedLanguages)[number];\n\n/**\n * Parses a markdown code block (```) language class into a SupportedLanguage.\n * Defaults to \"sh\" if no supported language is found.\n */\nfunction parseLanguage(value: `language-${string}` | `lang-${string}` | (string & {}) | undefined): SupportedLanguage {\n\tif (!value) {\n\t\treturn \"sh\";\n\t}\n\n\t// remove leading \"language-\" and \"lang-\" prefixes\n\t// find first '-' and slice from there\n\tconst maybeLanguage = value.trim().slice(value.indexOf(\"-\") + 1);\n\n\treturn isSupportedLanguage(maybeLanguage) ? maybeLanguage : \"sh\";\n}\n\n/**\n * Type Predicate: checks if an arbitrary value is a supported syntax highlighting language.\n */\nconst isSupportedLanguage = (value: unknown): value is SupportedLanguage => {\n\treturn typeof value === \"string\" && supportedLanguages.includes(value as SupportedLanguage);\n};\n\n/**\n * A class name for a language that Prism.js can understand.\n */\ntype LanguageClass = `language-${SupportedLanguage}`;\n\n/**\n * Formats a language name into a class name that Prism.js can understand.\n * @default \"language-sh\"\n */\nfunction formatLanguageClassName(language: SupportedLanguage | undefined = \"sh\") {\n\tconst lang = language ?? \"sh\";\n\tconst className: LanguageClass = `language-${lang}`;\n\treturn className;\n}\n\nexport { isSupportedLanguage, parseLanguage, formatLanguageClassName };\nexport type { SupportedLanguage };\n","type Primitive = string | number | boolean | undefined | null;\n\n/**\n * Tagged template literal to format code blocks and normalize leading indentation\n */\nexport function fmtCode(strings: TemplateStringsArray, ...values: Primitive[]): string {\n\tif (!isTemplateStringsArray(strings) || !Array.isArray(values)) {\n\t\tthrow new Error(\n\t\t\t\"It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\\n\\tExample: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')\",\n\t\t);\n\t}\n\n\tconst text = String.raw({ raw: strings }, ...values);\n\n\t// fine the minimum indentation of the code block\n\tconst minIndent = findMinIndent(text);\n\tconst lines = text.trim().split(\"\\n\");\n\n\treturn lines\n\t\t.map((line) => {\n\t\t\t// remove nothing if the line doesn't start with indentation\n\t\t\tif (/^\\S+/.test(line)) {\n\t\t\t\treturn line;\n\t\t\t}\n\t\t\treturn line.slice(minIndent);\n\t\t})\n\t\t.join(\"\\n\");\n\t// replace all tabs with 2 spaces\n\t// .replace(/\\t/g, \" \")\n}\n\n/**\n * Find the shortest indentation of a multiline string\n */\nfunction findMinIndent(value: string): number {\n\tconst match = value.match(/^[ \\t]*(?=\\S)/gm);\n\n\tif (!match) {\n\t\treturn 0;\n\t}\n\n\treturn match.reduce((acc, curr) => Math.min(acc, curr.length), Infinity);\n}\n\n/**\n * Type guard to check if a value is a `TemplateStringsArray`\n */\nfunction isTemplateStringsArray(strings: unknown): strings is TemplateStringsArray {\n\treturn Array.isArray(strings) && \"raw\" in strings && Array.isArray(strings.raw);\n}\n","import { z } from \"zod\";\n\nconst modes = [\"file\", \"cli\"] as const;\ntype Mode = (typeof modes)[number];\n\nconst metaSchema = z.object({\n\tcollapsible: z.boolean().default(false),\n\tdisableCopy: z.boolean().default(false),\n\tmode: z.enum(modes).optional(),\n\ttitle: z.string().trim().optional(),\n});\n\ntype MetaInput = z.input<typeof metaSchema>;\n\ntype Meta = z.infer<typeof metaSchema>;\n\nconst defaultMeta = {\n\tcollapsible: false,\n\tdisableCopy: false,\n\tmode: undefined,\n\ttitle: undefined,\n} as const satisfies Meta;\n\ntype DefaultMeta = typeof defaultMeta;\n\n/**\n * Parses a markdown code block (```) metastring into a meta object.\n * Defaults to DefaultMeta if no metastring given or if metastring is invalid.\n * Useful for parsing the metastring from a markdown code block to pass into the\n * CodeBlock components as props.\n */\nfunction parseMetastring(value: string | undefined): Meta {\n\tconst metastring = value?.trim() ?? \"\";\n\tif (!metastring) {\n\t\treturn defaultMeta;\n\t}\n\n\tconst metaJson = tokenizeMetastring(metastring).reduce<Record<string, unknown>>((acc, token) => {\n\t\tconst [key, _value] = token.split(\"=\");\n\t\tif (!key) {\n\t\t\treturn acc;\n\t\t}\n\t\tconst value = normalizeValue(_value);\n\t\tacc[key] = value ?? true;\n\t\treturn acc;\n\t}, {});\n\n\ttry {\n\t\tconst parsed = metaSchema.parse(metaJson);\n\n\t\t// return the parsed meta object, with default values filled in\n\t\treturn {\n\t\t\t...defaultMeta,\n\t\t\t...parsed,\n\t\t};\n\t} catch (_) {\n\t\treturn defaultMeta;\n\t}\n}\n\nexport { defaultMeta, parseMetastring };\nexport type { Meta, MetaInput, Mode, DefaultMeta };\n\n/**\n * Remove leading and trailing `\"` quotes around value\n * @private\n */\nexport function normalizeValue(value: string | undefined) {\n\treturn value?.trim().replace(/^\"(.*)\"$/, \"$1\");\n}\n\n/**\n * Splits a metastring into an array of tokens that can be parsed into a meta object.\n * Should allow for quotes and spaces in tokens\n * @private\n */\nexport function tokenizeMetastring(value: string | undefined): string[] {\n\tconst input = value?.trim() ?? \"\";\n\tconst result: string[] = [];\n\n\tlet currentString = \"\";\n\tlet inQuotes = false;\n\n\tfor (const char of input) {\n\t\tif (char === \" \" && !inQuotes) {\n\t\t\tif (currentString) {\n\t\t\t\tresult.push(currentString);\n\t\t\t\tcurrentString = \"\";\n\t\t\t}\n\t\t} else if (char === '\"') {\n\t\t\tinQuotes = !inQuotes;\n\t\t\tcurrentString += char;\n\t\t} else {\n\t\t\tcurrentString += char;\n\t\t}\n\t}\n\n\tif (currentString) {\n\t\tresult.push(currentString);\n\t}\n\n\treturn result;\n}\n"],"mappings":"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","names":["Slot","Prism","createContext","forwardRef","useContext","useEffect","useId","useMemo","useState","CaretDown","Check","Copy","assert","supportedLanguages","parseLanguage","value","maybeLanguage","isSupportedLanguage","formatLanguageClassName","language","Fragment","jsx","jsxs","CodeBlockContext","createContext","CodeBlock","forwardRef","className","props","ref","copyText","setCopyText","useState","hasCodeExpander","setHasCodeExpander","isCodeExpanded","setIsCodeExpanded","codeId","setCodeId","context","useMemo","id","old","assert","cx","CodeBlockBody","CodeBlockCode","language","style","value","useId","registerCodeId","unregisterCodeId","useContext","trimmedCode","highlightedCodeInnerHtml","setHighlightedCodeInnerHtml","useEffect","grammar","Prism","supportedLanguages","newHighlightedCodeInnerHtml","formatLanguageClassName","CodeBlockHeader","CodeBlockTitle","asChild","Slot","CodeBlockCopyButton","onCopy","onCopyError","copyToClipboard","useCopyToClipboard","copied","setCopied","timeoutId","error","Check","Copy","CodeBlockExpanderButton","onClick","event","prev","CaretDown","fmtCode","strings","values","isTemplateStringsArray","text","minIndent","findMinIndent","line","value","match","acc","curr","z","modes","metaSchema","defaultMeta","parseMetastring","value","metastring","metaJson","tokenizeMetastring","acc","token","key","_value","normalizeValue","parsed","normalizeValue","value","tokenizeMetastring","input","result","currentString","inQuotes","char"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/code-block/code-block.tsx","../src/components/code-block/supported-languages.ts","../src/components/code-block/fmt-code.ts","../src/components/code-block/parse-metastring.ts"],"sourcesContent":["import { CaretDown } from \"@phosphor-icons/react/CaretDown\";\nimport { Check } from \"@phosphor-icons/react/Check\";\nimport { Copy } from \"@phosphor-icons/react/Copy\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport Prism from \"prismjs\";\nimport \"prismjs/components/prism-bash.js\";\nimport \"prismjs/components/prism-csharp.js\";\nimport \"prismjs/components/prism-css.js\";\nimport \"prismjs/components/prism-go.js\";\nimport \"prismjs/components/prism-java.js\";\nimport \"prismjs/components/prism-javascript.js\";\nimport \"prismjs/components/prism-json.js\";\nimport \"prismjs/components/prism-jsx.js\";\nimport \"prismjs/components/prism-markup.js\";\nimport \"prismjs/components/prism-python.js\";\nimport \"prismjs/components/prism-ruby.js\";\nimport \"prismjs/components/prism-rust.js\";\nimport \"prismjs/components/prism-tsx.js\";\nimport \"prismjs/components/prism-typescript.js\";\nimport \"prismjs/components/prism-yaml.js\";\nimport type { ComponentProps, Dispatch, HTMLAttributes, SetStateAction } from \"react\";\nimport { createContext, forwardRef, useContext, useEffect, useId, useMemo, useState } from \"react\";\nimport assert from \"tiny-invariant\";\nimport { useCopyToClipboard } from \"../../hooks/use-copy-to-clipboard.js\";\nimport type { WithStyleProps } from \"../../types/with-style-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { LineRange } from \"./line-numbers.js\";\nimport type { SupportedLanguage } from \"./supported-languages.js\";\nimport { formatLanguageClassName, supportedLanguages } from \"./supported-languages.js\";\n\n/**\n * TODO(cody):\n * - fix line numbers, maybe try grid instead of :before and flex?\n * - fix line hightlighting\n * - fix line wrapping? horizontal scrolling has problems w/ line highlighting :(\n */\n\ntype CodeBlockContextType = {\n\tcodeId: string | undefined;\n\tcopyText: string;\n\thasCodeExpander: boolean;\n\tisCodeExpanded: boolean;\n\tregisterCodeId: (id: string) => void;\n\tsetCopyText: (newCopyText: string) => void;\n\tsetHasCodeExpander: (value: boolean) => void;\n\tsetIsCodeExpanded: Dispatch<SetStateAction<boolean>>;\n\tunregisterCodeId: (id: string) => void;\n};\n\nconst CodeBlockContext = createContext<CodeBlockContextType>({\n\tcodeId: undefined,\n\tcopyText: \"\",\n\thasCodeExpander: false,\n\tisCodeExpanded: false,\n\tregisterCodeId: () => {},\n\tsetCopyText: () => {},\n\tsetHasCodeExpander: () => {},\n\tsetIsCodeExpanded: () => {},\n\tunregisterCodeId: () => {},\n});\n\nconst CodeBlock = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {\n\tconst [copyText, setCopyText] = useState(\"\");\n\tconst [hasCodeExpander, setHasCodeExpander] = useState(false);\n\tconst [isCodeExpanded, setIsCodeExpanded] = useState(false);\n\tconst [codeId, setCodeId] = useState<string | undefined>(undefined);\n\n\tconst context: CodeBlockContextType = useMemo(\n\t\t() =>\n\t\t\t({\n\t\t\t\tcodeId,\n\t\t\t\tcopyText,\n\t\t\t\thasCodeExpander,\n\t\t\t\tisCodeExpanded,\n\t\t\t\tregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(old == null, \"You can only render a single CodeBlockCode within a CodeBlock.\");\n\t\t\t\t\t\treturn id;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tsetCopyText,\n\t\t\t\tsetHasCodeExpander,\n\t\t\t\tsetIsCodeExpanded,\n\t\t\t\tunregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(old === id, \"You can only render a single CodeBlockCode within a CodeBlock.\");\n\t\t\t\t\t\treturn undefined;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t}) as const,\n\t\t[codeId, copyText, hasCodeExpander, isCodeExpanded],\n\t);\n\n\treturn (\n\t\t<CodeBlockContext.Provider value={context}>\n\t\t\t<div\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono text-[0.8125rem]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</CodeBlockContext.Provider>\n\t);\n});\nCodeBlock.displayName = \"CodeBlock\";\n\nconst CodeBlockBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (\n\t<div className={cx(\"relative\", className)} ref={ref} {...props} />\n));\nCodeBlockBody.displayName = \"CodeBlockBody\";\n\ntype CodeBlockCodeProps = Omit<ComponentProps<\"pre\">, \"children\"> & {\n\t/**\n\t * The code to display in the code block. Should be code formatted as a string. This code will be passed to our syntax highlighter.\n\t */\n\tvalue: string;\n\t/**\n\t * @todo not implemented yet\n\t */\n\thighlightLines?: (LineRange | number)[];\n\t/**\n\t * The language of the code block. This will be used to determine how to syntax highlight the code. @default `\"text\"`.\n\t */\n\tlanguage?: SupportedLanguage;\n\t/**\n\t * @todo not implemented yet\n\t */\n\tshowLineNumbers?: boolean;\n};\n\nconst CodeBlockCode = forwardRef<HTMLPreElement, CodeBlockCodeProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tlanguage = \"text\",\n\t\t\tstyle,\n\t\t\tvalue,\n\t\t\thighlightLines: _unusedHighlightLines, // not implemented yet\n\t\t\tshowLineNumbers: _unusedShowLineNumbers, // not implemented yet\n\t\t\ttabIndex,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst id = useId();\n\t\tconst { hasCodeExpander, isCodeExpanded, registerCodeId, setCopyText, unregisterCodeId } =\n\t\t\tuseContext(CodeBlockContext);\n\n\t\t// trim any leading and trailing whitespace/empty lines\n\t\tconst trimmedCode = value?.trim() ?? \"\";\n\t\tconst [highlightedCodeInnerHtml, setHighlightedCodeInnerHtml] = useState(trimmedCode);\n\n\t\tuseEffect(() => {\n\t\t\tconst grammar = Prism.languages[language];\n\t\t\tassert(\n\t\t\t\tgrammar,\n\t\t\t\t`CodeBlock does not support the language \"${language}\". The syntax highlighter does not have a grammar for this language. The supported languages are: ${supportedLanguages.join(\", \")}.`,\n\t\t\t);\n\t\t\tconst newHighlightedCodeInnerHtml = Prism.highlight(trimmedCode, grammar, language);\n\t\t\tsetHighlightedCodeInnerHtml(newHighlightedCodeInnerHtml);\n\t\t}, [trimmedCode, language]);\n\n\t\tuseEffect(() => {\n\t\t\tsetCopyText(trimmedCode);\n\t\t}, [trimmedCode, setCopyText]);\n\n\t\tuseEffect(() => {\n\t\t\tregisterCodeId(id);\n\n\t\t\treturn () => {\n\t\t\t\tunregisterCodeId(id);\n\t\t\t};\n\t\t}, [id, registerCodeId, unregisterCodeId]);\n\n\t\treturn (\n\t\t\t<pre\n\t\t\t\taria-expanded={hasCodeExpander ? isCodeExpanded : undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"scrollbar firefox:after:mr-[3.375rem] firefox:after:inline-block firefox:after:content-[''] overflow-x-auto overflow-y-hidden p-4 pr-[3.375rem]\",\n\t\t\t\t\t\"aria-collapsed:max-h-[13.6rem]\",\n\t\t\t\t\tformatLanguageClassName(language), // place it last because prism does weird stuff client side, causes hydration mismatches\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-lang={language}\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={{\n\t\t\t\t\t...style,\n\t\t\t\t\ttabSize: 2,\n\t\t\t\t\tMozTabSize: 2,\n\t\t\t\t}}\n\t\t\t\t// prism.js adds a tabindex of 0 to the pre element by default (unless it's set)\n\t\t\t\t// this is unnecessary, we do not want this automatic behavior!\n\t\t\t\ttabIndex={tabIndex ?? -1}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<code\n\t\t\t\t\t// we need to suppress the hydration warning because we are setting the innerHTML of the code block\n\t\t\t\t\t// and using Prism.js to \"highlight\" the code in a useEffect (client-side only), which does different things on the client and server\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: highlightedCodeInnerHtml }}\n\t\t\t\t/>\n\t\t\t</pre>\n\t\t);\n\t},\n);\nCodeBlockCode.displayName = \"CodeBlockCode\";\n\nconst CodeBlockHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (\n\t<div\n\t\tclassName={cx(\"flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700\", className)}\n\t\tref={ref}\n\t\t{...props}\n\t/>\n));\nCodeBlockHeader.displayName = \"CodeBlockHeader\";\n\nconst CodeBlockTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement> & { asChild?: boolean }>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"h3\";\n\t\treturn <Comp ref={ref} className={cx(\"font-mono text-[0.8125rem] font-normal\", className)} {...props} />;\n\t},\n);\nCodeBlockTitle.displayName = \"CodeBlockTitle\";\n\ntype CodeBlockCopyButtonProps = WithStyleProps & {\n\t/**\n\t * Callback fired when the copy button is clicked, passes the copied text as an argument.\n\t */\n\tonCopy?: (value: string) => void;\n\t/**\n\t * Callback fired when an error occurs during copying.\n\t */\n\tonCopyError?: (error: unknown) => void;\n};\n\nconst CodeBlockCopyButton = forwardRef<HTMLButtonElement, CodeBlockCopyButtonProps>(\n\t({ className, onCopy, onCopyError, style }, ref) => {\n\t\tconst { copyText } = useContext(CodeBlockContext);\n\t\tconst [, copyToClipboard] = useCopyToClipboard();\n\t\tconst [copied, setCopied] = useState(false);\n\n\t\tuseEffect(() => {\n\t\t\tif (copied) {\n\t\t\t\tconst timeoutId = window.setTimeout(() => {\n\t\t\t\t\tsetCopied(false);\n\t\t\t\t}, 2000);\n\n\t\t\t\treturn () => {\n\t\t\t\t\tclearTimeout(timeoutId);\n\t\t\t\t};\n\t\t\t}\n\t\t}, [copied]);\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-3 top-3 z-10 flex h-7 w-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\",\n\t\t\t\t\tcopied &&\n\t\t\t\t\t\t\"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={style}\n\t\t\t\tonClick={async () => {\n\t\t\t\t\ttry {\n\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/await-thenable\n\t\t\t\t\t\tawait copyToClipboard(copyText);\n\t\t\t\t\t\tonCopy?.(copyText);\n\t\t\t\t\t\tsetCopied(true);\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\tonCopyError?.(error);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<span className=\"sr-only\">Copy code</span>\n\t\t\t\t{copied ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\tCopied\n\t\t\t\t\t\t<Check className=\"h-4 w-4\" weight=\"bold\" />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<Copy className=\"-ml-px h-5 w-5\" />\n\t\t\t\t)}\n\t\t\t</button>\n\t\t);\n\t},\n);\nCodeBlockCopyButton.displayName = \"CodeBlockCopyButton\";\n\ntype CodeBlockExpanderButtonProps = Omit<\n\tHTMLAttributes<HTMLButtonElement>,\n\t\"children\" | \"aria-controls\" | \"aria-expanded\"\n>;\n\nconst CodeBlockExpanderButton = forwardRef<HTMLButtonElement, CodeBlockExpanderButtonProps>(\n\t({ className, onClick, ...props }, ref) => {\n\t\tconst { codeId, isCodeExpanded, setIsCodeExpanded, setHasCodeExpander } = useContext(CodeBlockContext);\n\n\t\tuseEffect(() => {\n\t\t\tsetHasCodeExpander(true);\n\n\t\t\treturn () => {\n\t\t\t\tsetHasCodeExpander(false);\n\t\t\t};\n\t\t}, [setHasCodeExpander]);\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\t{...props}\n\t\t\t\taria-controls={codeId}\n\t\t\t\taria-expanded={isCodeExpanded}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 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<CaretDown\n\t\t\t\t\tclassName={cx(\"h-4 w-4\", isCodeExpanded && \"rotate-180\", \"transition-all duration-150\")}\n\t\t\t\t\tweight=\"bold\"\n\t\t\t\t/>\n\t\t\t</button>\n\t\t);\n\t},\n);\nCodeBlockExpanderButton.displayName = \"CodeBlockExpanderButton\";\n\nexport {\n\tCodeBlock,\n\tCodeBlockBody,\n\tCodeBlockCode,\n\tCodeBlockCopyButton,\n\tCodeBlockExpanderButton,\n\tCodeBlockHeader,\n\tCodeBlockTitle,\n};\n","/**\n * List of supported languages for syntax highlighting.\n * @private\n */\nexport const supportedLanguages = [\n\t\"bash\",\n\t\"cs\",\n\t\"csharp\",\n\t\"css\",\n\t\"dotnet\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"json\",\n\t\"jsx\",\n\t\"markup\",\n\t\"plain\",\n\t\"plaintext\",\n\t\"py\",\n\t\"python\",\n\t\"rb\",\n\t\"ruby\",\n\t\"rust\",\n\t\"sh\",\n\t\"shell\",\n\t\"text\",\n\t\"ts\",\n\t\"tsx\",\n\t\"txt\",\n\t\"typescript\",\n\t\"xml\",\n\t\"yaml\",\n\t\"yml\",\n] as const;\n\n/**\n * Supported languages for syntax highlighting.\n */\ntype SupportedLanguage = (typeof supportedLanguages)[number];\n\n/**\n * Parses a markdown code block (```) language class into a SupportedLanguage.\n * Defaults to \"sh\" if no supported language is found.\n */\nfunction parseLanguage(value: `language-${string}` | `lang-${string}` | (string & {}) | undefined): SupportedLanguage {\n\tif (!value) {\n\t\treturn \"sh\";\n\t}\n\n\t// remove leading \"language-\" and \"lang-\" prefixes\n\t// find first '-' and slice from there\n\tconst maybeLanguage = value.trim().slice(value.indexOf(\"-\") + 1);\n\n\treturn isSupportedLanguage(maybeLanguage) ? maybeLanguage : \"sh\";\n}\n\n/**\n * Type Predicate: checks if an arbitrary value is a supported syntax highlighting language.\n */\nconst isSupportedLanguage = (value: unknown): value is SupportedLanguage => {\n\treturn typeof value === \"string\" && supportedLanguages.includes(value as SupportedLanguage);\n};\n\n/**\n * A class name for a language that Prism.js can understand.\n */\ntype LanguageClass = `language-${SupportedLanguage}`;\n\n/**\n * Formats a language name into a class name that Prism.js can understand.\n * @default \"language-sh\"\n */\nfunction formatLanguageClassName(language: SupportedLanguage | undefined = \"sh\") {\n\tconst lang = language ?? \"sh\";\n\tconst className: LanguageClass = `language-${lang}`;\n\treturn className;\n}\n\nexport { isSupportedLanguage, parseLanguage, formatLanguageClassName };\nexport type { SupportedLanguage };\n","type Primitive = string | number | boolean | undefined | null;\n\n/**\n * Tagged template literal to format code blocks and normalize leading indentation\n */\nexport function fmtCode(strings: TemplateStringsArray, ...values: Primitive[]): string {\n\tif (!isTemplateStringsArray(strings) || !Array.isArray(values)) {\n\t\tthrow new Error(\n\t\t\t\"It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\\n\\tExample: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')\",\n\t\t);\n\t}\n\n\tconst text = String.raw({ raw: strings }, ...values);\n\n\t// fine the minimum indentation of the code block\n\tconst minIndent = findMinIndent(text);\n\tconst lines = text.trim().split(\"\\n\");\n\n\treturn lines\n\t\t.map((line) => {\n\t\t\t// remove nothing if the line doesn't start with indentation\n\t\t\tif (/^\\S+/.test(line)) {\n\t\t\t\treturn line;\n\t\t\t}\n\t\t\treturn line.slice(minIndent);\n\t\t})\n\t\t.join(\"\\n\");\n\t// replace all tabs with 2 spaces\n\t// .replace(/\\t/g, \" \")\n}\n\n/**\n * Find the shortest indentation of a multiline string\n */\nfunction findMinIndent(value: string): number {\n\tconst match = value.match(/^[ \\t]*(?=\\S)/gm);\n\n\tif (!match) {\n\t\treturn 0;\n\t}\n\n\treturn match.reduce((acc, curr) => Math.min(acc, curr.length), Infinity);\n}\n\n/**\n * Type guard to check if a value is a `TemplateStringsArray`\n */\nfunction isTemplateStringsArray(strings: unknown): strings is TemplateStringsArray {\n\treturn Array.isArray(strings) && \"raw\" in strings && Array.isArray(strings.raw);\n}\n","import { z } from \"zod\";\n\nconst modes = [\"file\", \"cli\"] as const;\ntype Mode = (typeof modes)[number];\n\nconst metaSchema = z.object({\n\tcollapsible: z.boolean().default(false),\n\tdisableCopy: z.boolean().default(false),\n\tmode: z.enum(modes).optional(),\n\ttitle: z.string().trim().optional(),\n});\n\ntype MetaInput = z.input<typeof metaSchema>;\n\ntype Meta = z.infer<typeof metaSchema>;\n\nconst defaultMeta = {\n\tcollapsible: false,\n\tdisableCopy: false,\n\tmode: undefined,\n\ttitle: undefined,\n} as const satisfies Meta;\n\ntype DefaultMeta = typeof defaultMeta;\n\n/**\n * Parses a markdown code block (```) metastring into a meta object.\n * Defaults to DefaultMeta if no metastring given or if metastring is invalid.\n * Useful for parsing the metastring from a markdown code block to pass into the\n * CodeBlock components as props.\n */\nfunction parseMetastring(value: string | undefined): Meta {\n\tconst metastring = value?.trim() ?? \"\";\n\tif (!metastring) {\n\t\treturn defaultMeta;\n\t}\n\n\tconst metaJson = tokenizeMetastring(metastring).reduce<Record<string, unknown>>((acc, token) => {\n\t\tconst [key, _value] = token.split(\"=\");\n\t\tif (!key) {\n\t\t\treturn acc;\n\t\t}\n\t\tconst value = normalizeValue(_value);\n\t\tacc[key] = value ?? true;\n\t\treturn acc;\n\t}, {});\n\n\ttry {\n\t\tconst parsed = metaSchema.parse(metaJson);\n\n\t\t// return the parsed meta object, with default values filled in\n\t\treturn {\n\t\t\t...defaultMeta,\n\t\t\t...parsed,\n\t\t};\n\t} catch (_) {\n\t\treturn defaultMeta;\n\t}\n}\n\nexport { defaultMeta, parseMetastring };\nexport type { Meta, MetaInput, Mode, DefaultMeta };\n\n/**\n * Remove leading and trailing `\"` quotes around value\n * @private\n */\nexport function normalizeValue(value: string | undefined) {\n\treturn value?.trim().replace(/^\"(.*)\"$/, \"$1\");\n}\n\n/**\n * Splits a metastring into an array of tokens that can be parsed into a meta object.\n * Should allow for quotes and spaces in tokens\n * @private\n */\nexport function tokenizeMetastring(value: string | undefined): string[] {\n\tconst input = value?.trim() ?? \"\";\n\tconst result: string[] = [];\n\n\tlet currentString = \"\";\n\tlet inQuotes = false;\n\n\tfor (const char of input) {\n\t\tif (char === \" \" && !inQuotes) {\n\t\t\tif (currentString) {\n\t\t\t\tresult.push(currentString);\n\t\t\t\tcurrentString = \"\";\n\t\t\t}\n\t\t} else if (char === '\"') {\n\t\t\tinQuotes = !inQuotes;\n\t\t\tcurrentString += char;\n\t\t} else {\n\t\t\tcurrentString += char;\n\t\t}\n\t}\n\n\tif (currentString) {\n\t\tresult.push(currentString);\n\t}\n\n\treturn result;\n}\n"],"mappings":"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","names":["CaretDown","Check","Copy","Slot","Prism","createContext","forwardRef","useContext","useEffect","useId","useMemo","useState","assert","supportedLanguages","parseLanguage","value","maybeLanguage","isSupportedLanguage","formatLanguageClassName","language","Fragment","jsx","jsxs","CodeBlockContext","createContext","CodeBlock","forwardRef","className","props","ref","copyText","setCopyText","useState","hasCodeExpander","setHasCodeExpander","isCodeExpanded","setIsCodeExpanded","codeId","setCodeId","context","useMemo","id","old","assert","cx","CodeBlockBody","CodeBlockCode","language","style","value","_unusedHighlightLines","_unusedShowLineNumbers","tabIndex","useId","registerCodeId","unregisterCodeId","useContext","trimmedCode","highlightedCodeInnerHtml","setHighlightedCodeInnerHtml","useEffect","grammar","Prism","supportedLanguages","newHighlightedCodeInnerHtml","formatLanguageClassName","CodeBlockHeader","CodeBlockTitle","asChild","Slot","CodeBlockCopyButton","onCopy","onCopyError","copyToClipboard","useCopyToClipboard","copied","setCopied","timeoutId","error","Check","Copy","CodeBlockExpanderButton","onClick","event","prev","CaretDown","fmtCode","strings","values","isTemplateStringsArray","text","minIndent","findMinIndent","line","value","match","acc","curr","z","modes","metaSchema","defaultMeta","parseMetastring","value","metastring","metaJson","tokenizeMetastring","acc","token","key","_value","normalizeValue","parsed","normalizeValue","value","tokenizeMetastring","input","result","currentString","inQuotes","char"]}
|
package/dist/theme-provider.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as g}from"./chunk-D3XF6J5A.js";import E from"clsx";import{createContext as N,useContext as W,useEffect as x,useMemo as C,useState as B}from"react";import _ from"tiny-invariant";import{Fragment as k,jsx as
|
|
1
|
+
import{a as g}from"./chunk-D3XF6J5A.js";import E from"clsx";import{createContext as N,useContext as W,useEffect as x,useMemo as C,useState as B}from"react";import _ from"tiny-invariant";import{Fragment as k,jsx as a,jsxs as b}from"react/jsx-runtime";var M="https://assets.ngrok.com",q=`${M}/fonts`,R=["/euclid-square/EuclidSquare-Regular-WebS.woff","/euclid-square/EuclidSquare-RegularItalic-WebS.woff","/euclid-square/EuclidSquare-Medium-WebS.woff","/euclid-square/EuclidSquare-Semibold-WebS.woff","/euclid-square/EuclidSquare-MediumItalic-WebS.woff","/ibm-plex-mono/IBMPlexMono-Text.woff","/ibm-plex-mono/IBMPlexMono-TextItalic.woff","/ibm-plex-mono/IBMPlexMono-SemiBold.woff","/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff"],D=e=>`${q}${e}`,y=({includeNunitoSans:e=!1})=>b(k,{children:[a("link",{rel:"preconnect",href:M}),R.map(t=>a("link",{rel:"preload",href:D(t),as:"font",type:"font/woff",crossOrigin:"anonymous"},t)),e&&a(L,{})]});function L(){return b(k,{children:[a("link",{rel:"preconnect",href:"https://fonts.googleapis.com"}),a("link",{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:"anonymous"}),a("link",{href:"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap",rel:"stylesheet"})]})}import{Fragment as X,jsx as w,jsxs as Z}from"react/jsx-runtime";var h="(prefers-color-scheme: dark)",l="(prefers-contrast: more)",v=["light","dark","light-high-contrast","dark-high-contrast"],p=["system",...v],O=e=>e;function S(e){return typeof e!="string"?!1:p.includes(e)}var A=e=>e;function H(e){return typeof e!="string"?!1:v.includes(e)}var f="mantle-ui-theme",Q=["system",()=>null],I=N(Q),u=()=>typeof window<"u";function c(e,t="system"){let o=t??"system";if(u()){let s=null;try{s="localStorage"in window?window.localStorage.getItem(e):null}catch{}return S(s)?s:o}return o}function z({children:e,defaultTheme:t="system",storageKey:o=f}){let[s,r]=B(()=>{let n=c(o,t);return i(n),n});x(()=>{let n=c(o,t);r(n),i(n)},[t,o]),x(()=>{let n=window.matchMedia(h),m=window.matchMedia(l),d=()=>{c(o,t)==="system"&&i("system")};return n.addEventListener("change",d),m.addEventListener("change",d),()=>{n.removeEventListener("change",d),m.removeEventListener("change",d)}},[t,o]);let T=C(()=>[s,n=>{try{"localStorage"in window&&window.localStorage.setItem(o,n)}catch{}r(n),i(n)}],[o,s]);return w(I.Provider,{value:T,children:e})}function F(){let e=W(I);return _(e,"useTheme must be used within a ThemeProvider"),e}function i(e){if(!u())return;let t=window.document.documentElement;t.classList.remove(...p);let o=window.matchMedia(h).matches,s=window.matchMedia(l).matches,r=P(e,{prefersDarkMode:o,prefersHighContrast:s});t.classList.add(r),t.dataset.appliedTheme=r,t.dataset.theme=e}function G(){if(!u())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,t=S(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:H(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:t}}function P(e,{prefersDarkMode:t,prefersHighContrast:o}){return e==="system"?U({prefersDarkMode:t,prefersHighContrast:o}):e}function J(){let[e]=F(),t=g(h),o=g(l);return P(e,{prefersDarkMode:t,prefersHighContrast:o})}function U({prefersDarkMode:e,prefersHighContrast:t}){return t?e?"dark-high-contrast":"light-high-contrast":e?"dark":"light"}function $({defaultTheme:e="system",storageKey:t=f}){return`
|
|
2
2
|
(function() {
|
|
3
3
|
const themes = ${JSON.stringify(p)};
|
|
4
4
|
const isTheme = (value) => typeof value === "string" && themes.includes(value);
|
|
@@ -30,5 +30,5 @@ import{a as g}from"./chunk-D3XF6J5A.js";import E from"clsx";import{createContext
|
|
|
30
30
|
htmlElement.dataset.appliedTheme = initialTheme;
|
|
31
31
|
htmlElement.dataset.theme = themePreference;
|
|
32
32
|
})();
|
|
33
|
-
`.trim()}var Y=({defaultTheme:e="system",storageKey:t=f,includeNunitoSans:o=!1})=>Z(X,{children:[w("script",{dangerouslySetInnerHTML:{__html:$({defaultTheme:e,storageKey:t})}}),w(y,{includeNunitoSans:o})]});function V(e){let{className:t="",defaultTheme:o="system",storageKey:s=f}=e??{};return C(()=>{if(!u())return{className:E(t),"data-applied-theme":"system","data-theme":"system"};let r=window.matchMedia(h).matches,T=window.matchMedia(l).matches,n=c(s,o),m=P(n,{prefersDarkMode:r,prefersHighContrast:T});return{className:E(t,m),"data-applied-theme":m,"data-theme":n}},[t,o,s])}export{A as $resolvedTheme,O as $theme,Y as MantleThemeHeadContent,y as PreloadFonts,z as ThemeProvider,
|
|
33
|
+
`.trim()}var Y=({defaultTheme:e="system",storageKey:t=f,includeNunitoSans:o=!1})=>Z(X,{children:[w("script",{dangerouslySetInnerHTML:{__html:$({defaultTheme:e,storageKey:t})}}),w(y,{includeNunitoSans:o})]});function V(e){let{className:t="",defaultTheme:o="system",storageKey:s=f}=e??{};return C(()=>{if(!u())return{className:E(t),"data-applied-theme":"system","data-theme":"system"};let r=window.matchMedia(h).matches,T=window.matchMedia(l).matches,n=c(s,o),m=P(n,{prefersDarkMode:r,prefersHighContrast:T});return{className:E(t,m),"data-applied-theme":m,"data-theme":n}},[t,o,s])}export{A as $resolvedTheme,O as $theme,Y as MantleThemeHeadContent,y as PreloadFonts,z as ThemeProvider,i as applyTheme,H as isResolvedTheme,S as isTheme,$ as preventWrongThemeFlashScriptContent,G as readThemeFromHtmlElement,v as resolvedThemes,p as themes,J as useAppliedTheme,V as useInitialHtmlThemeProps,F as useTheme};
|
|
34
34
|
//# sourceMappingURL=theme-provider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/theme-provider/theme-provider.tsx","../src/components/theme-provider/preload-fonts.tsx"],"sourcesContent":["import 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 = [\"light\", \"dark\", \"light-high-contrast\", \"dark-high-contrast\"] 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) => value;\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>(initialState);\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 = \"localStorage\" in window ? window.localStorage.getItem(storageKey) : 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 */\nfunction ThemeProvider({ children, defaultTheme = \"system\", storageKey = DEFAULT_STORAGE_KEY }: 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(prefersHighContrastMediaQuery);\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 <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>;\n}\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(prefersHighContrastMediaQuery).matches;\n\tconst newTheme = resolveTheme(theme, { prefersDarkMode, prefersHighContrast });\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) ? htmlElement.dataset.theme : undefined;\n\tconst appliedTheme = isResolvedTheme(htmlElement.dataset.appliedTheme) ? htmlElement.dataset.appliedTheme : 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{ prefersDarkMode, prefersHighContrast }: { prefersDarkMode: boolean; prefersHighContrast: boolean },\n) {\n\tif (theme === \"system\") {\n\t\treturn determineThemeFromMediaQuery({ prefersDarkMode, prefersHighContrast });\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 [theme] = useTheme();\n\n\tconst prefersDarkMode = useMatchesMediaQuery(prefersDarkModeMediaQuery);\n\tconst prefersHighContrast = useMatchesMediaQuery(prefersHighContrastMediaQuery);\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 */\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\nfunction preventWrongThemeFlashScriptContent({\n\tdefaultTheme = \"system\",\n\tstorageKey = DEFAULT_STORAGE_KEY,\n}: {\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\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\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n} & ComponentProps<typeof PreloadFonts>;\n\n/**\n * MantleThemeHeadContent is a React component that prevents the wrong theme from flashing on initial page load.\n * Render as high as possible in the <head> element.\n */\nconst MantleThemeHeadContent = ({\n\tdefaultTheme = \"system\",\n\tstorageKey = DEFAULT_STORAGE_KEY,\n\tincludeNunitoSans = false,\n}: MantleThemeHeadContentProps) => (\n\t<>\n\t\t<script\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t__html: preventWrongThemeFlashScriptContent({ defaultTheme, storageKey }),\n\t\t\t}}\n\t\t/>\n\t\t<PreloadFonts includeNunitoSans={includeNunitoSans} />\n\t</>\n);\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 { className = \"\", defaultTheme = \"system\", storageKey = DEFAULT_STORAGE_KEY } = 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(prefersDarkModeMediaQuery).matches;\n\t\tconst prefersHighContrast = window.matchMedia(prefersHighContrastMediaQuery).matches;\n\t\tconst initialTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tconst reolvedTheme = resolveTheme(initialTheme, { prefersDarkMode, prefersHighContrast });\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","const cdnOrigin = \"https://cdn.ngrok.com\";\nconst cdnBase = `${cdnOrigin}/static/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) => `${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. This should be added to the head of the document in your application, preferably as high as possible.\n * Normally you won't use this directly, but instead use the `MantleThemeHeadContent` component which includes this.\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 key={font} rel=\"preload\" href={fontHref(font)} as=\"font\" type=\"font/woff\" crossOrigin=\"anonymous\" />\n\t\t))}\n\t\t{includeNunitoSans && <NunitoSans />}\n\t</>\n);\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 rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"anonymous\" />\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"],"mappings":"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","names":["clsx","createContext","useContext","useEffect","useMemo","useState","invariant","Fragment","jsx","jsxs","cdnOrigin","cdnBase","fonts","fontHref","font","PreloadFonts","includeNunitoSans","NunitoSans","NunitoSans","jsxs","Fragment","jsx","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","useMatchesMediaQuery","preventWrongThemeFlashScriptContent","MantleThemeHeadContent","includeNunitoSans","PreloadFonts","useInitialHtmlThemeProps","props","className","clsx","reolvedTheme"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/theme-provider/theme-provider.tsx","../src/components/theme-provider/preload-fonts.tsx"],"sourcesContent":["import 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 = [\"light\", \"dark\", \"light-high-contrast\", \"dark-high-contrast\"] 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) => value;\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>(initialState);\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 = \"localStorage\" in window ? window.localStorage.getItem(storageKey) : 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 */\nfunction ThemeProvider({ children, defaultTheme = \"system\", storageKey = DEFAULT_STORAGE_KEY }: 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(prefersHighContrastMediaQuery);\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 <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>;\n}\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(prefersHighContrastMediaQuery).matches;\n\tconst newTheme = resolveTheme(theme, { prefersDarkMode, prefersHighContrast });\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) ? htmlElement.dataset.theme : undefined;\n\tconst appliedTheme = isResolvedTheme(htmlElement.dataset.appliedTheme) ? htmlElement.dataset.appliedTheme : 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{ prefersDarkMode, prefersHighContrast }: { prefersDarkMode: boolean; prefersHighContrast: boolean },\n) {\n\tif (theme === \"system\") {\n\t\treturn determineThemeFromMediaQuery({ prefersDarkMode, prefersHighContrast });\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 [theme] = useTheme();\n\n\tconst prefersDarkMode = useMatchesMediaQuery(prefersDarkModeMediaQuery);\n\tconst prefersHighContrast = useMatchesMediaQuery(prefersHighContrastMediaQuery);\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 */\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\nfunction preventWrongThemeFlashScriptContent({\n\tdefaultTheme = \"system\",\n\tstorageKey = DEFAULT_STORAGE_KEY,\n}: {\n\tdefaultTheme?: Theme;\n\tstorageKey?: string;\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\tdefaultTheme?: Theme;\n\tstorageKey?: string;\n} & ComponentProps<typeof PreloadFonts>;\n\n/**\n * MantleThemeHeadContent is a React component that prevents the wrong theme from flashing on initial page load.\n * Render as high as possible in the <head> element.\n */\nconst MantleThemeHeadContent = ({\n\tdefaultTheme = \"system\",\n\tstorageKey = DEFAULT_STORAGE_KEY,\n\tincludeNunitoSans = false,\n}: MantleThemeHeadContentProps) => (\n\t<>\n\t\t<script\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t__html: preventWrongThemeFlashScriptContent({ defaultTheme, storageKey }),\n\t\t\t}}\n\t\t/>\n\t\t<PreloadFonts includeNunitoSans={includeNunitoSans} />\n\t</>\n);\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 { className = \"\", defaultTheme = \"system\", storageKey = DEFAULT_STORAGE_KEY } = 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(prefersDarkModeMediaQuery).matches;\n\t\tconst prefersHighContrast = window.matchMedia(prefersHighContrastMediaQuery).matches;\n\t\tconst initialTheme = getStoredTheme(storageKey, defaultTheme);\n\t\tconst reolvedTheme = resolveTheme(initialTheme, { prefersDarkMode, prefersHighContrast });\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","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) => `${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. This should be added to the head of the document in your application, preferably as high as possible.\n * Normally you won't use this directly, but instead use the `MantleThemeHeadContent` component which includes this.\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 key={font} rel=\"preload\" href={fontHref(font)} as=\"font\" type=\"font/woff\" crossOrigin=\"anonymous\" />\n\t\t))}\n\t\t{includeNunitoSans && <NunitoSans />}\n\t</>\n);\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 rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"anonymous\" />\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"],"mappings":"wCAAA,OAAOA,MAAU,OAEjB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,aAAAC,EAAW,WAAAC,EAAS,YAAAC,MAAgB,QACxE,OAAOC,MAAe,iBC6BrB,mBAAAC,EACC,OAAAC,EADD,QAAAC,MAAA,oBAhCD,IAAMC,EAAY,2BACZC,EAAU,GAAGD,CAAS,SAEtBE,EAAQ,CACb,gDACA,sDACA,+CACA,iDACA,qDACA,uCACA,6CACA,2CACA,gDACD,EAIMC,EAAmCC,GAAY,GAAGH,CAAO,GAAGG,CAAI,GAchEC,EAAe,CAAC,CAAE,kBAAAC,EAAoB,EAAM,IACjDP,EAAAF,EAAA,CACC,UAAAC,EAAC,QAAK,IAAI,aAAa,KAAME,EAAW,EACvCE,EAAM,IAAKE,GACXN,EAAC,QAAgB,IAAI,UAAU,KAAMK,EAASC,CAAI,EAAG,GAAG,OAAO,KAAK,YAAY,YAAY,aAAjFA,CAA6F,CACxG,EACAE,GAAqBR,EAACS,EAAA,EAAW,GACnC,EAQD,SAASC,GAAa,CACrB,OACCC,EAAAC,EAAA,CACC,UAAAC,EAAC,QAAK,IAAI,aAAa,KAAK,+BAA+B,EAC3DA,EAAC,QAAK,IAAI,aAAa,KAAK,4BAA4B,YAAY,YAAY,EAChFA,EAAC,QACA,KAAK,uHACL,IAAI,aACL,GACD,CAEF,CDkHQ,OA6JP,YAAAC,EA7JO,OAAAC,EA6JP,QAAAC,MA7JO,oBAjKR,IAAMC,EAA4B,+BAK5BC,EAAgC,2BAKhCC,EAAiB,CAAC,QAAS,OAAQ,sBAAuB,oBAAoB,EAU9EC,EAAS,CAAC,SAAU,GAAGD,CAAc,EAUrCE,EAAmCC,GAAaA,EAKtD,SAASC,EAAQD,EAAgC,CAChD,OAAI,OAAOA,GAAU,SACb,GAGDF,EAAO,SAASE,CAAc,CACtC,CAKA,IAAME,EAA2DF,GAAaA,EAK9E,SAASG,EAAgBH,EAAwC,CAChE,OAAI,OAAOA,GAAU,SACb,GAGDH,EAAe,SAASG,CAAsB,CACtD,CAKA,IAAMI,EAAsB,kBAUtBC,EAAmC,CAAC,SAAU,IAAM,IAAI,EAKxDC,EAAuBC,EAAkCF,CAAY,EAKrEG,EAAY,IAAM,OAAO,OAAW,IAK1C,SAASC,EAAeC,EAAoBC,EAAsB,SAAU,CAC3E,IAAMC,EAAgBD,GAAgB,SACtC,GAAIH,EAAU,EAAG,CAChB,IAAIK,EAA6B,KACjC,GAAI,CACHA,EAAc,iBAAkB,OAAS,OAAO,aAAa,QAAQH,CAAU,EAAI,IACpF,MAAY,CAAC,CACb,OAAOT,EAAQY,CAAW,EAAIA,EAAcD,CAC7C,CACA,OAAOA,CACR,CAUA,SAASE,EAAc,CAAE,SAAAC,EAAU,aAAAJ,EAAe,SAAU,WAAAD,EAAaN,CAAoB,EAAuB,CACnH,GAAM,CAACY,EAAOC,CAAQ,EAAIC,EAAgB,IAAM,CAC/C,IAAMC,EAAeV,EAAeC,EAAYC,CAAY,EAC5D,OAAAS,EAAWD,CAAY,EAChBA,CACR,CAAC,EAEDE,EAAU,IAAM,CACf,IAAMR,EAAcJ,EAAeC,EAAYC,CAAY,EAC3DM,EAASJ,CAAW,EACpBO,EAAWP,CAAW,CACvB,EAAG,CAACF,EAAcD,CAAU,CAAC,EAE7BW,EAAU,IAAM,CACf,IAAMC,EAAiB,OAAO,WAAW3B,CAAyB,EAC5D4B,EAAyB,OAAO,WAAW3B,CAA6B,EAExE4B,EAAW,IAAM,CACFf,EAAeC,EAAYC,CAAY,IAIvC,UAIpBS,EAAW,QAAQ,CACpB,EAEA,OAAAE,EAAe,iBAAiB,SAAUE,CAAQ,EAClDD,EAAuB,iBAAiB,SAAUC,CAAQ,EAEnD,IAAM,CACZF,EAAe,oBAAoB,SAAUE,CAAQ,EACrDD,EAAuB,oBAAoB,SAAUC,CAAQ,CAC9D,CACD,EAAG,CAACb,EAAcD,CAAU,CAAC,EAE7B,IAAMV,EAA4ByB,EACjC,IAAM,CACLT,EACCA,GAAiB,CACjB,GAAI,CACC,iBAAkB,QACrB,OAAO,aAAa,QAAQN,EAAYM,CAAK,CAE/C,MAAY,CAAC,CACbC,EAASD,CAAK,EACdI,EAAWJ,CAAK,CACjB,CACD,EACA,CAACN,EAAYM,CAAK,CACnB,EAEA,OAAOvB,EAACa,EAAqB,SAArB,CAA8B,MAAON,EAAQ,SAAAe,EAAS,CAC/D,CAOA,SAASW,GAAW,CACnB,IAAMC,EAAUC,EAAWtB,CAAoB,EAE/C,OAAAuB,EAAUF,EAAS,8CAA8C,EAE1DA,CACR,CAKA,SAASP,EAAWJ,EAAc,CACjC,GAAI,CAACR,EAAU,EACd,OAGD,IAAMsB,EAAc,OAAO,SAAS,gBACpCA,EAAY,UAAU,OAAO,GAAGhC,CAAM,EACtC,IAAMiC,EAAkB,OAAO,WAAWpC,CAAyB,EAAE,QAC/DqC,EAAsB,OAAO,WAAWpC,CAA6B,EAAE,QACvEqC,EAAWC,EAAalB,EAAO,CAAE,gBAAAe,EAAiB,oBAAAC,CAAoB,CAAC,EAC7EF,EAAY,UAAU,IAAIG,CAAQ,EAClCH,EAAY,QAAQ,aAAeG,EACnCH,EAAY,QAAQ,MAAQd,CAC7B,CAKA,SAASmB,GAA2B,CACnC,GAAI,CAAC3B,EAAU,EACd,MAAO,CACN,aAAc,OACd,MAAO,MACR,EAGD,IAAMsB,EAAc,OAAO,SAAS,gBAC9Bd,EAAQf,EAAQ6B,EAAY,QAAQ,KAAK,EAAIA,EAAY,QAAQ,MAAQ,OAG/E,MAAO,CACN,aAHoB3B,EAAgB2B,EAAY,QAAQ,YAAY,EAAIA,EAAY,QAAQ,aAAe,OAI3G,MAAAd,CACD,CACD,CAMA,SAASkB,EACRlB,EACA,CAAE,gBAAAe,EAAiB,oBAAAC,CAAoB,EACtC,CACD,OAAIhB,IAAU,SACNoB,EAA6B,CAAE,gBAAAL,EAAiB,oBAAAC,CAAoB,CAAC,EAGtEhB,CACR,CAMA,SAASqB,GAAkB,CAC1B,GAAM,CAACrB,CAAK,EAAIU,EAAS,EAEnBK,EAAkBO,EAAqB3C,CAAyB,EAChEqC,EAAsBM,EAAqB1C,CAA6B,EAE9E,OAAOsC,EAAalB,EAAO,CAAE,gBAAAe,EAAiB,oBAAAC,CAAoB,CAAC,CACpE,CAMO,SAASI,EAA6B,CAC5C,gBAAAL,EACA,oBAAAC,CACD,EAGkB,CACjB,OAAIA,EACID,EAAkB,qBAAuB,sBAG1CA,EAAkB,OAAS,OACnC,CAEA,SAASQ,EAAoC,CAC5C,aAAA5B,EAAe,SACf,WAAAD,EAAaN,CACd,EAGG,CACF,MAAO;AAAA;AAAA,kBAEU,KAAK,UAAUN,CAAM,CAAC;AAAA;AAAA,0BAEda,CAAY;AAAA;AAAA;AAAA,+EAGyCD,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA,kCAKvDA,CAAU;AAAA;AAAA;AAAA;AAAA,8CAIEf,CAAyB;AAAA,kDACrBC,CAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAe7E,KAAK,CACP,CAWA,IAAM4C,EAAyB,CAAC,CAC/B,aAAA7B,EAAe,SACf,WAAAD,EAAaN,EACb,kBAAAqC,EAAoB,EACrB,IACC/C,EAAAF,EAAA,CACC,UAAAC,EAAC,UACA,wBAAyB,CACxB,OAAQ8C,EAAoC,CAAE,aAAA5B,EAAc,WAAAD,CAAW,CAAC,CACzE,EACD,EACAjB,EAACiD,EAAA,CAAa,kBAAmBD,EAAmB,GACrD,EAYD,SAASE,EAAyBC,EAIZ,CACrB,GAAM,CAAE,UAAAC,EAAY,GAAI,aAAAlC,EAAe,SAAU,WAAAD,EAAaN,CAAoB,EAAIwC,GAAS,CAAC,EAEhG,OAAOnB,EAAQ,IAAM,CACpB,GAAI,CAACjB,EAAU,EACd,MAAO,CACN,UAAWsC,EAAKD,CAAS,EACzB,qBAAsB,SACtB,aAAc,QACf,EAGD,IAAMd,EAAkB,OAAO,WAAWpC,CAAyB,EAAE,QAC/DqC,EAAsB,OAAO,WAAWpC,CAA6B,EAAE,QACvEuB,EAAeV,EAAeC,EAAYC,CAAY,EACtDoC,EAAeb,EAAaf,EAAc,CAAE,gBAAAY,EAAiB,oBAAAC,CAAoB,CAAC,EAExF,MAAO,CACN,UAAWc,EAAKD,EAAWE,CAAY,EACvC,qBAAsBA,EACtB,aAAc5B,CACf,CACD,EAAG,CAAC0B,EAAWlC,EAAcD,CAAU,CAAC,CACzC","names":["clsx","createContext","useContext","useEffect","useMemo","useState","invariant","Fragment","jsx","jsxs","cdnOrigin","cdnBase","fonts","fontHref","font","PreloadFonts","includeNunitoSans","NunitoSans","NunitoSans","jsxs","Fragment","jsx","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","useMatchesMediaQuery","preventWrongThemeFlashScriptContent","MantleThemeHeadContent","includeNunitoSans","PreloadFonts","useInitialHtmlThemeProps","props","className","clsx","reolvedTheme"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "mantle is ngrok's UI library and design system.",
|
|
4
4
|
"author": "ngrok",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "0.8.0",
|
|
7
7
|
"homepage": "https://mantle.ngrok.com",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -47,17 +47,17 @@
|
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@phosphor-icons/react": "2.1.7",
|
|
49
49
|
"@testing-library/dom": "10.4.0",
|
|
50
|
-
"@testing-library/jest-dom": "6.
|
|
50
|
+
"@testing-library/jest-dom": "6.6.2",
|
|
51
51
|
"@testing-library/react": "16.0.1",
|
|
52
52
|
"@testing-library/user-event": "14.5.2",
|
|
53
|
-
"@types/node": "20.
|
|
54
|
-
"@types/prismjs": "1.26.
|
|
55
|
-
"@types/react": "18.3.
|
|
53
|
+
"@types/node": "20.17.0",
|
|
54
|
+
"@types/prismjs": "1.26.5",
|
|
55
|
+
"@types/react": "18.3.12",
|
|
56
56
|
"@types/react-dom": "18.3.1",
|
|
57
|
-
"@vitejs/plugin-react": "4.3.
|
|
57
|
+
"@vitejs/plugin-react": "4.3.3",
|
|
58
58
|
"@vitest/ui": "2.1.3",
|
|
59
59
|
"autoprefixer": "10.4.20",
|
|
60
|
-
"browserslist": "4.24.
|
|
60
|
+
"browserslist": "4.24.2",
|
|
61
61
|
"date-fns": "3.6.0",
|
|
62
62
|
"jsdom": "25.0.1",
|
|
63
63
|
"postcss": "8.4.47",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"tailwindcss": "3.4.14",
|
|
68
68
|
"tsup": "8.3.0",
|
|
69
69
|
"typescript": "5.6.3",
|
|
70
|
-
"vite": "5.4.
|
|
70
|
+
"vite": "5.4.10",
|
|
71
71
|
"vitest": "2.1.3",
|
|
72
72
|
"zod": "3.23.8",
|
|
73
73
|
"@cfg/tsconfig": "1.0.0"
|