@multiplatform.one/components 5.0.27 → 6.0.1

package/dist/esm/code/CodeBlock/index.native.js

@@ -1,34 +1,118 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { MDX } from "../../mdx/MDX";
-import { MDXCodeBlockContext } from "../../mdx/MDXCodeBlock/MDXCodeBlockContext";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LinearGradient } from "@tamagui/linear-gradient";
+import { CheckCircleIcon, ClipboardIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState } from "react";
+import { ScrollView } from "tamagui";
+import { Button, zIndex } from "@multiplatform.one/forms";
+import { Spacer, TooltipSimple, XStack, YStack } from "tamagui";
+import { ErrorBoundary } from "../../ErrorBoundary/index.native.js";
+import { Code } from "../Code/index.native.js";
+import { HighlightedCode } from "../HighlightedCode/index.native.js";
+import { useShikiTokens } from "../Highlighter/index.native.js";
+import { Pre } from "../Pre/index.native.js";
+import { useClipboard } from "../../hooks/useClipboard.native.js";
 function CodeBlock(param) {
-  var { children, language = "tsx", components, debug, ...props } = param, mdxString = useMemo(function() {
-    return `\`\`\`${language}
-${children?.trim()}
-\`\`\``;
-  }, [
-    children,
-    language
-  ]), value = useMemo(function() {
-    return {
-      ...props,
-      debug
-    };
-  }, [
-    props,
-    debug
-  ]);
-  return /* @__PURE__ */ _jsx(MDXCodeBlockContext.Provider, {
-    value,
-    children: /* @__PURE__ */ _jsx(MDX, {
-      components,
-      debug,
-      children: mdxString
+  var {
+    children = "",
+    language = "tsx",
+    theme,
+    showLineNumbers: propShowLineNumbers,
+    highlightLines = [],
+    disableCopy,
+    size
+  } = param;
+  var _ref;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var codeText = children.trim();
+  var tokens = useShikiTokens(codeText, language, theme);
+  var lines = (_ref = tokens === null || tokens === void 0 ? void 0 : tokens.length) !== null && _ref !== void 0 ? _ref : codeText.split("\n").length;
+  var showLineNumbers = propShowLineNumbers !== null && propShowLineNumbers !== void 0 ? propShowLineNumbers : lines > 10;
+  var isLong = lines > 22;
+  var [isCutoff, setIsCutoff] = useState(isLong);
+  var {
+    hasCopied,
+    onCopy
+  } = useClipboard(codeText);
+  return /* @__PURE__ */_jsx(YStack, {
+    position: "relative",
+    marginBottom: "$4",
+    children: /* @__PURE__ */_jsx(ErrorBoundary, {
+      children: /* @__PURE__ */_jsxs(YStack, {
+        position: "relative",
+        ...(isCutoff && {
+          maxHeight: 400,
+          overflow: "hidden",
+          ...knobProps.borderRadius
+        }),
+        children: [isCutoff && /* @__PURE__ */_jsxs(LinearGradient, {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: 200,
+          colors: ["$backgroundTransparent", "$background"],
+          zIndex: zIndex.localTop,
+          children: [/* @__PURE__ */_jsx(Spacer, {
+            flex: 1
+          }), /* @__PURE__ */_jsx(Button, {
+            onPress: function onPress() {
+              return setIsCutoff(!isCutoff);
+            },
+            alignSelf: "center",
+            children: "Show more"
+          }), /* @__PURE__ */_jsx(Spacer, {
+            size: "$4"
+          })]
+        }), /* @__PURE__ */_jsx(Pre, {
+          ...knobProps.borderRadius,
+          padding: 0,
+          marginBottom: 0,
+          children: /* @__PURE__ */_jsx(ScrollView, {
+            style: {
+              width: "100%"
+            },
+            contentContainerStyle: {
+              minWidth: "100%"
+            },
+            horizontal: true,
+            showsHorizontalScrollIndicator: false,
+            children: /* @__PURE__ */_jsx(Code, {
+              backgroundColor: "transparent",
+              flex: 1,
+              ...knobProps.panelPadding,
+              ...knobProps.body,
+              size: size !== null && size !== void 0 ? size : "$5",
+              children: /* @__PURE__ */_jsx(HighlightedCode, {
+                tokens,
+                highlightLines,
+                showLineNumbers,
+                children: codeText
+              })
+            })
+          })
+        }), !disableCopy && /* @__PURE__ */_jsx(XStack, {
+          position: "absolute",
+          top: "$3",
+          right: "$3",
+          children: /* @__PURE__ */_jsx(TooltipSimple, {
+            label: hasCopied ? "Copied" : "Copy to clipboard",
+            children: /* @__PURE__ */_jsx(Button, {
+              "aria-label": "Copy code to clipboard",
+              size: "$2",
+              icon: hasCopied ? CheckCircleIcon : ClipboardIcon,
+              onPress: onCopy,
+              $xs: {
+                display: "none"
+              }
+            })
+          })
+        })]
+      })
     })
   });
 }
-export {
-  CodeBlock
-};
-//# sourceMappingURL=index.js.map
+export { CodeBlock };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/code/CodeBlock/index.native.js.map

@@ -1,6 +1 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/code/CodeBlock/home/clayrisser/Projects/bitspur/multiplatform.one/multiplatform.one/packages/components/src/code/CodeBlock/index.tsx"],
-  "mappings": ";AAAA,SAASA,eAAe;AAExB,SAASC,WAAW;AAEpB,SAASC,2BAA2B;AAS7B,SAASC,UAAU,OAMT;MANS,EACxBC,UACAC,WAAW,OACXC,YACAC,OACA,GAAGC,MAAAA,IALqB,OAOlBC,YAAYT,QAChB,WAAA;WAAM,SAASK,QAAAA;EACjBD,UAAUM,KAAI,CAAA;;KAEZ;IAACN;IAAUC;GAAS,GAEhBM,QAAQX,QAAQ,WAAA;WAAO;MAAE,GAAGQ;MAAOD;IAAM;KAAI;IAACC;IAAOD;GAAM;AACjE,SACE,qBAACL,oBAAoBU,UAAQ;IAACD;cAC5B,qBAACV,KAAAA;MAAIK;MAAwBC;gBAC1BE;;;AAIT;",
-  "names": ["useMemo", "MDX", "MDXCodeBlockContext", "CodeBlock", "children", "language", "components", "debug", "props", "mdxString", "trim", "value", "Provider"]
-}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","LinearGradient","CheckCircleIcon","ClipboardIcon","useResolvedKnobs","useState","ScrollView","Button","zIndex","Spacer","TooltipSimple","XStack","YStack","ErrorBoundary","Code","HighlightedCode","useShikiTokens","Pre","useClipboard","CodeBlock","param","children","language","theme","showLineNumbers","propShowLineNumbers","highlightLines","disableCopy","size","_ref","knobProps","codeText","trim","tokens","lines","length","split","isLong","isCutoff","setIsCutoff","hasCopied","onCopy","position","marginBottom","maxHeight","overflow","borderRadius","bottom","left","right","height","colors","localTop","flex","onPress","alignSelf","padding","style","width","contentContainerStyle","minWidth","horizontal","showsHorizontalScrollIndicator","backgroundColor","panelPadding","body","top","label","icon"],"sources":["../../../../src/code/CodeBlock/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/code/HighlightedCode/HighlightedCode.stories.mjs

@@ -0,0 +1,94 @@
+import { YStack } from "tamagui";
+import { HighlightedCode } from "./index.mjs";
+import { jsx } from "react/jsx-runtime";
+const sampleTokens = [[{
+  content: "const ",
+  color: "#c678dd"
+}, {
+  content: "hello",
+  color: "#e06c75"
+}, {
+  content: " = ",
+  color: "#56b6c2"
+}, {
+  content: "'world'",
+  color: "#98c379"
+}, {
+  content: ";",
+  color: "#abb2bf"
+}], [{
+  content: "console",
+  color: "#e5c07b"
+}, {
+  content: ".",
+  color: "#abb2bf"
+}, {
+  content: "log",
+  color: "#61afef"
+}, {
+  content: "(",
+  color: "#abb2bf"
+}, {
+  content: "hello",
+  color: "#e06c75"
+}, {
+  content: ");",
+  color: "#abb2bf"
+}]];
+const meta = {
+  title: "Components/HighlightedCode",
+  component: HighlightedCode,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  }
+};
+var HighlightedCode_stories_default = meta;
+const Default = {
+  name: "Main",
+  render: () => /* @__PURE__ */jsx(YStack, {
+    padding: "$4",
+    backgroundColor: "$color2",
+    borderRadius: "$3",
+    children: /* @__PURE__ */jsx(HighlightedCode, {
+      tokens: sampleTokens
+    })
+  })
+};
+const WithLineNumbers = {
+  render: () => /* @__PURE__ */jsx(YStack, {
+    padding: "$4",
+    backgroundColor: "$color2",
+    borderRadius: "$3",
+    children: /* @__PURE__ */jsx(HighlightedCode, {
+      tokens: sampleTokens,
+      showLineNumbers: true
+    })
+  })
+};
+const WithHighlightedLines = {
+  render: () => /* @__PURE__ */jsx(YStack, {
+    padding: "$4",
+    backgroundColor: "$color2",
+    borderRadius: "$3",
+    children: /* @__PURE__ */jsx(HighlightedCode, {
+      tokens: sampleTokens,
+      highlightLines: [1],
+      showLineNumbers: true
+    })
+  })
+};
+const Loading = {
+  render: () => /* @__PURE__ */jsx(YStack, {
+    padding: "$4",
+    backgroundColor: "$color2",
+    borderRadius: "$3",
+    children: /* @__PURE__ */jsx(HighlightedCode, {
+      tokens: null,
+      children: "Loading code..."
+    })
+  })
+};
+export { Default, Loading, WithHighlightedLines, WithLineNumbers, HighlightedCode_stories_default as default };
+//# sourceMappingURL=HighlightedCode.stories.mjs.map

package/dist/esm/code/HighlightedCode/HighlightedCode.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["YStack","HighlightedCode","jsx","sampleTokens","content","color","meta","title","component","parameters","status","type","HighlightedCode_stories_default","Default","name","render","padding","backgroundColor","borderRadius","children","tokens","WithLineNumbers","showLineNumbers","WithHighlightedLines","highlightLines","Loading"],"sources":["../../../../src/code/HighlightedCode/HighlightedCode.stories.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,MAAA,QAAc;AACvB,SAASC,eAAA,QAAuB;AAoC1B,SAAAC,GAAA;AAjCN,MAAMC,YAAA,GAAgC,CACpC,CACE;EAAEC,OAAA,EAAS;EAAUC,KAAA,EAAO;AAAU,GACtC;EAAED,OAAA,EAAS;EAASC,KAAA,EAAO;AAAU,GACrC;EAAED,OAAA,EAAS;EAAOC,KAAA,EAAO;AAAU,GACnC;EAAED,OAAA,EAAS;EAAWC,KAAA,EAAO;AAAU,GACvC;EAAED,OAAA,EAAS;EAAKC,KAAA,EAAO;AAAU,EACnC,EACA,CACE;EAAED,OAAA,EAAS;EAAWC,KAAA,EAAO;AAAU,GACvC;EAAED,OAAA,EAAS;EAAKC,KAAA,EAAO;AAAU,GACjC;EAAED,OAAA,EAAS;EAAOC,KAAA,EAAO;AAAU,GACnC;EAAED,OAAA,EAAS;EAAKC,KAAA,EAAO;AAAU,GACjC;EAAED,OAAA,EAAS;EAASC,KAAA,EAAO;AAAU,GACrC;EAAED,OAAA,EAAS;EAAMC,KAAA,EAAO;AAAU,EACpC,CACF;AAEA,MAAMC,IAAA,GAAqC;EACzCC,KAAA,EAAO;EACPC,SAAA,EAAWP,eAAA;EACXQ,UAAA,EAAY;IACVC,MAAA,EAAQ;MAAEC,IAAA,EAAM;IAAO;EACzB;AACF;AAEA,IAAOC,+BAAA,GAAQN,IAAA;AAGR,MAAMO,OAAA,GAAiB;EAC5BC,IAAA,EAAM;EACNC,MAAA,EAAQA,CAAA,KACN,eAAAb,GAAA,CAACF,MAAA;IAAOgB,OAAA,EAAQ;IAAKC,eAAA,EAAgB;IAAUC,YAAA,EAAa;IAC1DC,QAAA,iBAAAjB,GAAA,CAACD,eAAA;MAAgBmB,MAAA,EAAQjB;IAAA,CAAc;EAAA,CACzC;AAEJ;AAEO,MAAMkB,eAAA,GAAyB;EACpCN,MAAA,EAAQA,CAAA,KACN,eAAAb,GAAA,CAACF,MAAA;IAAOgB,OAAA,EAAQ;IAAKC,eAAA,EAAgB;IAAUC,YAAA,EAAa;IAC1DC,QAAA,iBAAAjB,GAAA,CAACD,eAAA;MAAgBmB,MAAA,EAAQjB,YAAA;MAAcmB,eAAA,EAAe;IAAA,CAAC;EAAA,CACzD;AAEJ;AAEO,MAAMC,oBAAA,GAA8B;EACzCR,MAAA,EAAQA,CAAA,KACN,eAAAb,GAAA,CAACF,MAAA;IAAOgB,OAAA,EAAQ;IAAKC,eAAA,EAAgB;IAAUC,YAAA,EAAa;IAC1DC,QAAA,iBAAAjB,GAAA,CAACD,eAAA;MAAgBmB,MAAA,EAAQjB,YAAA;MAAcqB,cAAA,EAAgB,CAAC,CAAC;MAAGF,eAAA,EAAe;IAAA,CAAC;EAAA,CAC9E;AAEJ;AAEO,MAAMG,OAAA,GAAiB;EAC5BV,MAAA,EAAQA,CAAA,KACN,eAAAb,GAAA,CAACF,MAAA;IAAOgB,OAAA,EAAQ;IAAKC,eAAA,EAAgB;IAAUC,YAAA,EAAa;IAC1DC,QAAA,iBAAAjB,GAAA,CAACD,eAAA;MAAgBmB,MAAA,EAAQ;MAAMD,QAAA;IAAA,CAAe;EAAA,CAChD;AAEJ","ignoreList":[]}

package/dist/esm/code/HighlightedCode/HighlightedCode.stories.native.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { YStack } from "tamagui";
+import { HighlightedCode } from "./index.native.js";
+var sampleTokens = [[{
+  content: "const ",
+  color: "#c678dd"
+}, {
+  content: "hello",
+  color: "#e06c75"
+}, {
+  content: " = ",
+  color: "#56b6c2"
+}, {
+  content: "'world'",
+  color: "#98c379"
+}, {
+  content: ";",
+  color: "#abb2bf"
+}], [{
+  content: "console",
+  color: "#e5c07b"
+}, {
+  content: ".",
+  color: "#abb2bf"
+}, {
+  content: "log",
+  color: "#61afef"
+}, {
+  content: "(",
+  color: "#abb2bf"
+}, {
+  content: "hello",
+  color: "#e06c75"
+}, {
+  content: ");",
+  color: "#abb2bf"
+}]];
+var meta = {
+  title: "Components/HighlightedCode",
+  component: HighlightedCode,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  }
+};
+var HighlightedCode_stories_default = meta;
+var Default = {
+  name: "Main",
+  render: function render() {
+    return /* @__PURE__ */_jsx(YStack, {
+      padding: "$4",
+      backgroundColor: "$color2",
+      borderRadius: "$3",
+      children: /* @__PURE__ */_jsx(HighlightedCode, {
+        tokens: sampleTokens
+      })
+    });
+  }
+};
+var WithLineNumbers = {
+  render: function render2() {
+    return /* @__PURE__ */_jsx(YStack, {
+      padding: "$4",
+      backgroundColor: "$color2",
+      borderRadius: "$3",
+      children: /* @__PURE__ */_jsx(HighlightedCode, {
+        tokens: sampleTokens,
+        showLineNumbers: true
+      })
+    });
+  }
+};
+var WithHighlightedLines = {
+  render: function render3() {
+    return /* @__PURE__ */_jsx(YStack, {
+      padding: "$4",
+      backgroundColor: "$color2",
+      borderRadius: "$3",
+      children: /* @__PURE__ */_jsx(HighlightedCode, {
+        tokens: sampleTokens,
+        highlightLines: [1],
+        showLineNumbers: true
+      })
+    });
+  }
+};
+var Loading = {
+  render: function render4() {
+    return /* @__PURE__ */_jsx(YStack, {
+      padding: "$4",
+      backgroundColor: "$color2",
+      borderRadius: "$3",
+      children: /* @__PURE__ */_jsx(HighlightedCode, {
+        tokens: null,
+        children: "Loading code..."
+      })
+    });
+  }
+};
+export { Default, Loading, WithHighlightedLines, WithLineNumbers, HighlightedCode_stories_default as default };
+//# sourceMappingURL=HighlightedCode.stories.native.js.map

package/dist/esm/code/HighlightedCode/HighlightedCode.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","YStack","HighlightedCode","sampleTokens","content","color"],"sources":["../../../../src/code/HighlightedCode/HighlightedCode.stories.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAAC,IAAA,QAAc;AACvB,SAASC,MAAA,iBAAuB;AAoC1B,SAAAC,eAAA;AAjCN,IAAAC,YAAM,IACJ,CACE;EACEC,OAAA,EAAS;EACTC,KAAA;AACF,GACA;EACFD,OAAA;EACAC,KAAA;AACE,GACA;EACED,OAAA,EAAS;EACTC,KAAA;AACF,GACA;EACFD,OAAA;EACFC,KAAA;AAEA,GACE;EACAD,OAAW;EACXC,KAAA;AACE,EACF,EACF,CAEO;EAGMD,OAAA,WAAiB;EAC5BC,KAAM;AACN,GAKF;EAEaD,OAAA;EACXC,KAAQ;AAKV,GAEO;EACLD,OAAQ,OACN;EAIJC,KAAA;AAEO,GACL;EAKFD,OAAA","ignoreList":[]}

package/dist/esm/code/HighlightedCode/index.mjs

@@ -0,0 +1,56 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Text } from "tamagui";
+import { componentColors } from "../../componentColors.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function HighlightedCode({
+  tokens,
+  children,
+  highlightLines = [],
+  showLineNumbers = false,
+  fontSize
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  if (!tokens) {
+    return /* @__PURE__ */jsx(Fragment, {
+      children
+    });
+  }
+  return /* @__PURE__ */jsx(Fragment, {
+    children: tokens.map((line, lineIndex) => {
+      const lineNumber = lineIndex + 1;
+      const isHighlighted = highlightLines.includes(lineNumber);
+      return /* @__PURE__ */jsxs(Text, {
+        ...(isHighlighted && {
+          backgroundColor: componentColors.code.highlightLine
+        }),
+        fontSize,
+        ...knobProps.body,
+        children: [showLineNumbers && /* @__PURE__ */jsx(Text, {
+          color: componentColors.code.lineNumber,
+          opacity: 0.5,
+          fontSize,
+          width: 40,
+          display: "inline-flex",
+          textAlign: "right",
+          marginRight: "$2",
+          userSelect: "none",
+          children: lineNumber
+        }), line.map((token, tokenIndex) => /* @__PURE__ */jsx(Text, {
+          color: token.color,
+          ...(token.fontStyle && token.fontStyle & 1 ? {
+            fontStyle: "italic"
+          } : {}),
+          ...(token.fontStyle && token.fontStyle & 2 ? {
+            fontWeight: "bold"
+          } : {}),
+          fontSize,
+          children: token.content
+        }, tokenIndex)), "\n"]
+      }, lineIndex);
+    })
+  });
+}
+export { HighlightedCode };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/code/HighlightedCode/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useResolvedKnobs","Text","componentColors","Fragment","jsx","jsxs","HighlightedCode","tokens","children","highlightLines","showLineNumbers","fontSize","knobProps","map","line","lineIndex","lineNumber","isHighlighted","includes","backgroundColor","code","highlightLine","body","color","opacity","width","display","textAlign","marginRight","userSelect","token","tokenIndex","fontStyle","fontWeight","content"],"sources":["../../../../src/code/HighlightedCode/index.tsx"],"sourcesContent":[null],"mappings":"AASA,SAASA,gBAAA,QAAwB;AAEjC,SAASC,IAAA,QAAY;AAErB,SAASC,eAAA,QAAuB;AA0BrB,SAAAC,QAAA,EAAAC,GAAA,EAUDC,IAAA,QAVC;AAXJ,SAASC,gBAAgB;EAC9BC,MAAA;EACAC,QAAA;EACAC,cAAA,GAAiB,EAAC;EAClBC,eAAA,GAAkB;EAClBC;AACF,GAAyB;EACvB,MAAM;IAAEC;EAAU,IAAIZ,gBAAA,CAAiB;EAGvC,IAAI,CAACO,MAAA,EAAQ;IACX,OAAO,eAAAH,GAAA,CAAAD,QAAA;MAAGK;IAAA,CAAS;EACrB;EAEA,OACE,eAAAJ,GAAA,CAAAD,QAAA;IACGK,QAAA,EAAAD,MAAA,CAAOM,GAAA,CAAI,CAACC,IAAA,EAAMC,SAAA,KAAc;MAC/B,MAAMC,UAAA,GAAaD,SAAA,GAAY;MAC/B,MAAME,aAAA,GAAgBR,cAAA,CAAeS,QAAA,CAASF,UAAU;MAExD,OACE,eAAAX,IAAA,CAACJ,IAAA;QAEE,IAAIgB,aAAA,IAAiB;UACpBE,eAAA,EAAiBjB,eAAA,CAAgBkB,IAAA,CAAKC;QACxC;QACAV,QAAA;QACC,GAAGC,SAAA,CAAUU,IAAA;QAEbd,QAAA,GAAAE,eAAA,IACC,eAAAN,GAAA,CAACH,IAAA;UACCsB,KAAA,EAAOrB,eAAA,CAAgBkB,IAAA,CAAKJ,UAAA;UAC5BQ,OAAA,EAAS;UACTb,QAAA;UACAc,KAAA,EAAO;UACPC,OAAA,EAAQ;UACRC,SAAA,EAAU;UACVC,WAAA,EAAY;UACZC,UAAA,EAAW;UAEVrB,QAAA,EAAAQ;QAAA,CACH,GAEDF,IAAA,CAAKD,GAAA,CAAI,CAACiB,KAAA,EAAOC,UAAA,KAChB,eAAA3B,GAAA,CAACH,IAAA;UAECsB,KAAA,EAAOO,KAAA,CAAMP,KAAA;UACZ,IAAIO,KAAA,CAAME,SAAA,IAAaF,KAAA,CAAME,SAAA,GAAY,IAAI;YAAEA,SAAA,EAAW;UAAS,IAAI,CAAC;UACxE,IAAIF,KAAA,CAAME,SAAA,IAAaF,KAAA,CAAME,SAAA,GAAY,IAAI;YAAEC,UAAA,EAAY;UAAO,IAAI,CAAC;UACxEtB,QAAA;UAECH,QAAA,EAAAsB,KAAA,CAAMI;QAAA,GANFH,UAOP,CACD,GACA;MAAA,GAhCIhB,SAiCP;IAEJ,CAAC;EAAA,CACH;AAEJ","ignoreList":[]}

package/dist/esm/code/HighlightedCode/index.native.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Text } from "tamagui";
+import { componentColors } from "../../componentColors.native.js";
+function HighlightedCode(param) {
+  var {
+    tokens,
+    children,
+    highlightLines = [],
+    showLineNumbers = false,
+    fontSize
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  if (!tokens) {
+    return /* @__PURE__ */_jsx(_Fragment, {
+      children
+    });
+  }
+  return /* @__PURE__ */_jsx(_Fragment, {
+    children: tokens.map(function (line, lineIndex) {
+      var lineNumber = lineIndex + 1;
+      var isHighlighted = highlightLines.includes(lineNumber);
+      return /* @__PURE__ */_jsxs(Text, {
+        ...(isHighlighted && {
+          backgroundColor: componentColors.code.highlightLine
+        }),
+        fontSize,
+        ...knobProps.body,
+        children: [showLineNumbers && /* @__PURE__ */_jsx(Text, {
+          color: componentColors.code.lineNumber,
+          opacity: 0.5,
+          fontSize,
+          width: 40,
+          display: "inline-flex",
+          textAlign: "right",
+          marginRight: "$2",
+          userSelect: "none",
+          children: lineNumber
+        }), line.map(function (token, tokenIndex) {
+          return /* @__PURE__ */_jsx(Text, {
+            color: token.color,
+            ...(token.fontStyle && token.fontStyle & 1 ? {
+              fontStyle: "italic"
+            } : {}),
+            ...(token.fontStyle && token.fontStyle & 2 ? {
+              fontWeight: "bold"
+            } : {}),
+            fontSize,
+            children: token.content
+          }, tokenIndex);
+        }), "\n"]
+      }, lineIndex);
+    })
+  });
+}
+export { HighlightedCode };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/code/HighlightedCode/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useResolvedKnobs","Text","componentColors","HighlightedCode","param","tokens","children","highlightLines","showLineNumbers","fontSize","knobProps","map","line","lineIndex","lineNumber","isHighlighted","includes","backgroundColor","code","highlightLine","body","color","opacity","width","display","textAlign","marginRight","userSelect","token","tokenIndex","fontStyle","fontWeight","content"],"sources":["../../../../src/code/HighlightedCode/index.tsx"],"sourcesContent":[null],"mappings":"AASA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAwB,EAAAC,QAAA,IAAAC,SAAA;AAEjC,SAASC,gBAAY;AAErB,SAASC,IAAA;AA0BE,SAAAC,eAUD,yCAVC;AAXJ,SAASC,gBAAgBC,KAAA;EAC9B;IAAAC,MAAA;IAAAC,QAAA;IAAAC,cAAA;IAAAC,eAAA;IAAAC;EAAA,IAAAL,KAAA;EACA;IAAAM;EAAA,IAAAV,gBAAA;EACA,KAAAK,MAAA;IACA,sBAAkBV,IAAA,CAAAI,SAAA;MAClBO;IACuB;EACvB;EAGA,OAAK,eAAQX,IAAA,CAAAI,SAAA;IACXO,QAAO,EAAAD,MAAA,CAAAM,GAAA,WAAAC,IAAA,EAAAC,SAAG;MACZ,IAAAC,UAAA,GAAAD,SAAA;MAEA,IACEE,aAAA,GAAAR,cAAA,CACGS,QAAA,CAAAF,UAAO;MACN,OAAM,eAAajB,KAAA,CAAYI,IAAA;QAC/B,IAAMc,aAAA,IAAgB;UAEtBE,eACE,EAAAf,eAAA,CAAAgB,IAAA,CAAAC;QAAC;QAAAV,QAAA;QAEE,GAAIC,SAAA,CAAAU,IAAA;QAAiBd,QACpB,GACFE,eAAA,mBAAAb,IAAA,CAAAM,IAAA;UACAoB,KAAA,EAAAnB,eAAA,CAAAgB,IAAA,CAAAJ,UAAA;UACIQ,OAAA,EAAU;UAEbb,QAAA;UAAAc,KAAA;UACEC,OAAA;UAAAC,SAAA;UAAAC,WACQ;UAAqBC,UAC5B,EAAS;UAAArB,QACT,EAAAQ;QAAA,IACOF,IACP,CAAAD,GAAA,WAAQiB,KAAA,EAAAC,UAAA;UAAA,OACR,eAAUlC,IAAA,CAAAM,IAAA;YACVoB,KAAA,EAAAO,KAAA,CAAYP,KAAA;YACZ,IAAAO,KAAA,CAAAE,SAAW,IAAAF,KAAA,CAAAE,SAAA;cAEVA,SAAA;YAAA;YACH,IAAAF,KAAA,CAAAE,SAAA,IAAAF,KAAA,CAAAE,SAAA;cAEIC,UAAK,EAAO;YACf;YAAAtB,QAAA;YAECH,QAAO,EAAAsB,KAAM,CAAAI;UAAA,GACZH,UAAU;QAA8D,IACD,IACxE;MAEO,GAAAhB,SAAA;IAAA;EANF;AAQR;AACA,SAAAV,eAAA","ignoreList":[]}

package/dist/esm/code/Highlighter/index.mjs

@@ -0,0 +1,48 @@
+import { createContext, useContext, useEffect, useState } from "react";
+const ShikiContext = createContext({
+  theme: "github-dark"
+});
+function useShikiTokens(code, language, theme) {
+  const ctx = useContext(ShikiContext);
+  const resolvedTheme = theme || ctx.theme || "github-dark";
+  const [tokens, setTokens] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    highlightCode(code, language, resolvedTheme).then(result => {
+      if (!cancelled) setTokens(result);
+    }).catch(() => {
+      if (!cancelled) {
+        setTokens(code.split("\n").map(line => [{
+          content: line
+        }]));
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language, resolvedTheme]);
+  return tokens;
+}
+function plainTextTokens(code) {
+  return code.split("\n").map(line => [{
+    content: line
+  }]);
+}
+async function highlightCode(code, language, theme = "github-dark") {
+  try {
+    const shiki = await Promise.race([import("shiki"), new Promise((_, reject) => setTimeout(() => reject(new Error("shiki import timeout")), 5e3))]);
+    const result = await shiki.codeToTokens(code, {
+      lang: language,
+      theme
+    });
+    return result.tokens.map(line => line.map(token => ({
+      content: token.content,
+      color: token.color,
+      fontStyle: token.fontStyle
+    })));
+  } catch {
+    return plainTextTokens(code);
+  }
+}
+export { ShikiContext, highlightCode, useShikiTokens };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/code/Highlighter/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","useEffect","useState","ShikiContext","theme","useShikiTokens","code","language","ctx","resolvedTheme","tokens","setTokens","cancelled","highlightCode","then","result","catch","split","map","line","content","plainTextTokens","shiki","Promise","race","_","reject","setTimeout","Error","codeToTokens","lang","token","color","fontStyle"],"sources":["../../../../src/code/Highlighter/index.ts"],"sourcesContent":[null],"mappings":"AAQA,SAASA,aAAA,EAAeC,UAAA,EAAYC,SAAA,EAAWC,QAAA,QAAgB;AAiBxD,MAAMC,YAAA,GAAeJ,aAAA,CAAiC;EAAEK,KAAA,EAAO;AAAc,CAAC;AAO9E,SAASC,eACdC,IAAA,EACAC,QAAA,EACAH,KAAA,EACwB;EACxB,MAAMI,GAAA,GAAMR,UAAA,CAAWG,YAAY;EACnC,MAAMM,aAAA,GAAgBL,KAAA,IAASI,GAAA,CAAIJ,KAAA,IAAS;EAC5C,MAAM,CAACM,MAAA,EAAQC,SAAS,IAAIT,QAAA,CAAiC,IAAI;EAEjED,SAAA,CAAU,MAAM;IACd,IAAIW,SAAA,GAAY;IAEhBC,aAAA,CAAcP,IAAA,EAAMC,QAAA,EAAUE,aAAa,EACxCK,IAAA,CAAMC,MAAA,IAAW;MAChB,IAAI,CAACH,SAAA,EAAWD,SAAA,CAAUI,MAAM;IAClC,CAAC,EACAC,KAAA,CAAM,MAAM;MAGX,IAAI,CAACJ,SAAA,EAAW;QACdD,SAAA,CAAUL,IAAA,CAAKW,KAAA,CAAM,IAAI,EAAEC,GAAA,CAAKC,IAAA,IAAS,CAAC;UAAEC,OAAA,EAASD;QAAK,CAAC,CAAC,CAAC;MAC/D;IACF,CAAC;IAEH,OAAO,MAAM;MACXP,SAAA,GAAY;IACd;EACF,GAAG,CAACN,IAAA,EAAMC,QAAA,EAAUE,aAAa,CAAC;EAElC,OAAOC,MAAA;AACT;AAOA,SAASW,gBAAgBf,IAAA,EAA+B;EACtD,OAAOA,IAAA,CAAKW,KAAA,CAAM,IAAI,EAAEC,GAAA,CAAKC,IAAA,IAAS,CAAC;IAAEC,OAAA,EAASD;EAAK,CAAC,CAAC;AAC3D;AAOA,eAAsBN,cACpBP,IAAA,EACAC,QAAA,EACAH,KAAA,GAAQ,eACkB;EAC1B,IAAI;IACF,MAAMkB,KAAA,GAAQ,MAAMC,OAAA,CAAQC,IAAA,CAAK,CAC/B,OAAO,OAAO,GACd,IAAID,OAAA,CAAe,CAACE,CAAA,EAAGC,MAAA,KACrBC,UAAA,CAAW,MAAMD,MAAA,CAAO,IAAIE,KAAA,CAAM,sBAAsB,CAAC,GAAG,GAAI,CAClE,EACD;IACD,MAAMb,MAAA,GAAS,MAAMO,KAAA,CAAMO,YAAA,CAAavB,IAAA,EAAM;MAC5CwB,IAAA,EAAMvB,QAAA;MACNH;IACF,CAAC;IACD,OAAOW,MAAA,CAAOL,MAAA,CAAOQ,GAAA,CAAKC,IAAA,IACxBA,IAAA,CAAKD,GAAA,CAAKa,KAAA,KAAW;MACnBX,OAAA,EAASW,KAAA,CAAMX,OAAA;MACfY,KAAA,EAAOD,KAAA,CAAMC,KAAA;MACbC,SAAA,EAAWF,KAAA,CAAME;IACnB,EAAE,CACJ;EACF,QAAQ;IAEN,OAAOZ,eAAA,CAAgBf,IAAI;EAC7B;AACF","ignoreList":[]}

package/dist/esm/code/Highlighter/index.native.js

@@ -0,0 +1,61 @@
+import { createContext, useContext, useEffect, useState } from "react";
+var ShikiContext = createContext({
+  theme: "github-dark"
+});
+function useShikiTokens(code, language, theme) {
+  var ctx = useContext(ShikiContext);
+  var resolvedTheme = theme || ctx.theme || "github-dark";
+  var [tokens, setTokens] = useState(null);
+  useEffect(function () {
+    var cancelled = false;
+    highlightCode(code, language, resolvedTheme).then(function (result) {
+      if (!cancelled) setTokens(result);
+    }).catch(function () {
+      if (!cancelled) {
+        setTokens(code.split("\n").map(function (line) {
+          return [{
+            content: line
+          }];
+        }));
+      }
+    });
+    return function () {
+      cancelled = true;
+    };
+  }, [code, language, resolvedTheme]);
+  return tokens;
+}
+function plainTextTokens(code) {
+  return code.split("\n").map(function (line) {
+    return [{
+      content: line
+    }];
+  });
+}
+async function highlightCode(code, language) {
+  var theme = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "github-dark";
+  try {
+    var shiki = await Promise.race([import("shiki"), new Promise(function (_, reject) {
+      return setTimeout(function () {
+        return reject(new Error("shiki import timeout"));
+      }, 5e3);
+    })]);
+    var result = await shiki.codeToTokens(code, {
+      lang: language,
+      theme
+    });
+    return result.tokens.map(function (line) {
+      return line.map(function (token) {
+        return {
+          content: token.content,
+          color: token.color,
+          fontStyle: token.fontStyle
+        };
+      });
+    });
+  } catch (unused) {
+    return plainTextTokens(code);
+  }
+}
+export { ShikiContext, highlightCode, useShikiTokens };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/code/Highlighter/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","useEffect","useState","ShikiContext","theme","useShikiTokens","code","language","ctx","resolvedTheme","tokens","setTokens","cancelled","highlightCode","then","result","catch","split","map","line","content","plainTextTokens","arguments","length","shiki","Promise","race"],"sources":["../../../../src/code/Highlighter/index.ts"],"sourcesContent":[null],"mappings":"AAQA,SAASA,aAAA,EAAeC,UAAA,EAAYC,SAAA,EAAWC,QAAA,QAAgB;AAiBxD,IAAAC,YAAM,GAAAJ,aAAe;EAOrBK,KAAA,EAAS;AAKd;AACA,SAAMC,eAAgBC,IAAA,EAAAC,QAAa,EAAAH,KAAA,EAAS;EAC5C,IAAAI,GAAO,GAAAR,UAAQ,CAAAG,YAAa;EAE5B,IAAAM,aAAgB,GAAAL,KAAA,IAAAI,GAAA,CAAAJ,KAAA;EACd,KAAAM,MAAI,EAAAC,SAAY,IAAAT,QAAA;EAEhBD,SAAA,aAAc;IAEV,IAAAW,SAAK,QAAW;IAClBC,aACO,CAAAP,IAAM,EAAAC,QAAA,EAAAE,aAAA,EAAAK,IAAA,WAAAC,MAAA;MAGX,IAAI,CAACH,SAAA,EAAWD,SAAA,CAAAI,MAAA;IACd,GAAAC,KAAA,aAAe;MACjB,KAAAJ,SAAA;QACDD,SAAA,CAAAL,IAAA,CAAAW,KAAA,OAAAC,GAAA,WAAAC,IAAA;UAEH,OAAa,CACX;YACFC,OAAA,EAAAD;UACQ,EAEH;QACT;MAOA;IACE;IACF;MAOAP,SAAsB;IAKpB;EACE,IAAiCN,IAC/B,EAAcC,QACV,EAAAE,aAAmB,CAC2C;EAClE,OACDC,MAAA;AACD;AAA8C,SAC5CW,eAAMA,CAAAf,IAAA;EAAA,OACNA,IAAA,CAAAW,KAAA,OAAAC,GAAA,WAAAC,IAAA;IACF,OAAC,CACD;MAA0BC,OAAA,EACxBD;IAAqB,EACJ;EACF;AACI;AACjB,eACJN,cAAAP,IAAA,EAAAC,QAAA;EACF,IAAAH,KAAQ,GAAAkB,SAAA,CAAAC,MAAA,QAAAD,SAAA,iBAAAA,SAAA;EAEN;IACF,IAAAE,KAAA,SAAAC,OAAA,CAAAC,IAAA,EACF,iB","ignoreList":[]}