@multiplatform.one/components 5.0.27 → 6.0.1

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

@@ -1,38 +1,51 @@
-import { isWeb } from "multiplatform.one";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { Paragraph, styled } from "tamagui";
-const Code = styled(Paragraph, {
-    name: "Code",
-    borderRadius: "$4",
-    cursor: "inherit",
-    // @ts-ignore
-    fontFamily: isWeb ? "$mono" : void 0,
-    lineHeight: 18,
-    padding: "$1",
-    // @ts-ignore
-    size: "$3",
-    tag: "code",
-    whiteSpace: "pre",
-    variants: {
-      colored: {
-        true: {
-          backgroundColor: "$background",
-          color: "$color"
-        }
+import { componentColors } from "../../componentColors.mjs";
+import { jsx } from "react/jsx-runtime";
+const CodeFrame = styled(Paragraph, {
+  name: "Code",
+  render: "code",
+  fontFamily: "$mono",
+  size: "$3",
+  lineHeight: 18,
+  cursor: "inherit",
+  whiteSpace: "pre",
+  padding: "$1",
+  borderRadius: "$4",
+  variants: {
+    colored: {
+      true: {
+        color: "$color",
+        backgroundColor: "$background"
       }
     }
-  }),
-  CodeInline = styled(Paragraph, {
-    name: "CodeInline",
-    backgroundColor: "$background",
-    borderRadius: "$3",
-    color: "$colorHover",
-    cursor: "inherit",
-    // @ts-ignore
-    fontFamily: isWeb ? "$mono" : void 0,
-    // @ts-ignore
-    fontSize: "85%",
-    padding: "$1.5",
-    tag: "code"
+  }
+});
+const Code = CodeFrame.styleable((props, ref) => {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  return /* @__PURE__ */jsx(CodeFrame, {
+    ref,
+    ...knobProps.borderRadius,
+    ...knobProps.body,
+    ...props
   });
+});
+const CodeInline = styled(Paragraph, {
+  name: "CodeInline",
+  render: "code",
+  fontFamily: "$mono",
+  color: componentColors.code.foreground,
+  backgroundColor: componentColors.code.background,
+  cursor: "inherit",
+  borderRadius: "$3",
+  fontSize: "90%",
+  lineHeight: "70%",
+  paddingHorizontal: "0.6%",
+  paddingVertical: "0.45%",
+  marginHorizontal: "-0.1%",
+  whiteSpace: "pre"
+});
 export { Code, CodeInline };
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"names":["isWeb","Paragraph","styled","Code","name","borderRadius","cursor","fontFamily","lineHeight","padding","size","tag","whiteSpace","variants","colored","true","backgroundColor","color","CodeInline","fontSize"],"sources":["../../../../src/code/Code/index.ts"],"sourcesContent":[null],"mappings":"AAqBA,SAASA,KAAA,QAAa;AAEtB,SAASC,SAAA,EAAWC,MAAA,QAAc;AAE3B,MAAMC,IAAA,GAAOD,MAAA,CAAOD,SAAA,EAAW;IACpCG,IAAA,EAAM;IACNC,YAAA,EAAc;IACdC,MAAA,EAAQ;IAAA;IAERC,UAAA,EAAYP,KAAA,GAAQ,UAAU;IAC9BQ,UAAA,EAAY;IACZC,OAAA,EAAS;IAAA;IAETC,IAAA,EAAM;IACNC,GAAA,EAAK;IACLC,UAAA,EAAY;IACZC,QAAA,EAAU;MACRC,OAAA,EAAS;QACPC,IAAA,EAAM;UACJC,eAAA,EAAiB;UACjBC,KAAA,EAAO;QACT;MACF;IACF;EACF,CAAC;EAEYC,UAAA,GAAahB,MAAA,CAAOD,SAAA,EAAW;IAC1CG,IAAA,EAAM;IACNY,eAAA,EAAiB;IACjBX,YAAA,EAAc;IACdY,KAAA,EAAO;IACPX,MAAA,EAAQ;IAAA;IAERC,UAAA,EAAYP,KAAA,GAAQ,UAAU;IAAA;IAE9BmB,QAAA,EAAU;IACVV,OAAA,EAAS;IACTE,GAAA,EAAK;EACP,CAAC","ignoreList":[]}
+{"version":3,"names":["useResolvedKnobs","Paragraph","styled","componentColors","jsx","CodeFrame","name","render","fontFamily","size","lineHeight","cursor","whiteSpace","padding","borderRadius","variants","colored","true","color","backgroundColor","Code","styleable","props","ref","knobProps","body","CodeInline","code","foreground","background","fontSize","paddingHorizontal","paddingVertical","marginHorizontal"],"sources":["../../../../src/code/Code/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,gBAAA,QAAwB;AAGjC,SAASC,SAAA,EAAWC,MAAA,QAAc;AAClC,SAASC,eAAA,QAAuB;AAyBvB,SAAAC,GAAA;AAvBT,MAAMC,SAAA,GAAYH,MAAA,CAAOD,SAAA,EAAW;EAClCK,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,IAAA,EAAM;EACNC,UAAA,EAAY;EACZC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,OAAA,EAAS;EACTC,YAAA,EAAc;EAEdC,QAAA,EAAU;IACRC,OAAA,EAAS;MACPC,IAAA,EAAM;QACJC,KAAA,EAAO;QACPC,eAAA,EAAiB;MACnB;IACF;EACF;AACF,CAAC;AAEM,MAAMC,IAAA,GAAOf,SAAA,CAAUgB,SAAA,CAAU,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACtD,MAAM;IAAEC;EAAU,IAAIxB,gBAAA,CAAiB;EACvC,OAAO,eAAAI,GAAA,CAACC,SAAA;IAAUkB,GAAA;IAAW,GAAGC,SAAA,CAAUV,YAAA;IAAe,GAAGU,SAAA,CAAUC,IAAA;IAAO,GAAGH;EAAA,CAAO;AACzF,CAAC;AAEM,MAAMI,UAAA,GAAaxB,MAAA,CAAOD,SAAA,EAAW;EAC1CK,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZU,KAAA,EAAOf,eAAA,CAAgBwB,IAAA,CAAKC,UAAA;EAC5BT,eAAA,EAAiBhB,eAAA,CAAgBwB,IAAA,CAAKE,UAAA;EACtClB,MAAA,EAAQ;EACRG,YAAA,EAAc;EACdgB,QAAA,EAAU;EACVpB,UAAA,EAAY;EACZqB,iBAAA,EAAmB;EACnBC,eAAA,EAAiB;EACjBC,gBAAA,EAAkB;EAClBrB,UAAA,EAAY;AACd,CAAC","ignoreList":[]}

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

@@ -1,40 +1,51 @@
-import { isWeb } from "multiplatform.one";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { Paragraph, styled } from "tamagui";
-var Code = styled(Paragraph, {
+import { componentColors } from "../../componentColors.native.js";
+var CodeFrame = styled(Paragraph, {
   name: "Code",
-  borderRadius: "$4",
-  cursor: "inherit",
-  // @ts-ignore
-  fontFamily: isWeb ? "$mono" : void 0,
-  lineHeight: 18,
-  padding: "$1",
-  // @ts-ignore
+  render: "code",
+  fontFamily: "$mono",
   size: "$3",
-  tag: "code",
+  lineHeight: 18,
+  cursor: "inherit",
   whiteSpace: "pre",
+  padding: "$1",
+  borderRadius: "$4",
   variants: {
     colored: {
       true: {
-        backgroundColor: "$background",
-        color: "$color"
+        color: "$color",
+        backgroundColor: "$background"
       }
     }
   }
-}), CodeInline = styled(Paragraph, {
+});
+var Code = CodeFrame.styleable(function (props, ref) {
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  return /* @__PURE__ */_jsx(CodeFrame, {
+    ref,
+    ...knobProps.borderRadius,
+    ...knobProps.body,
+    ...props
+  });
+});
+var CodeInline = styled(Paragraph, {
   name: "CodeInline",
-  backgroundColor: "$background",
-  borderRadius: "$3",
-  color: "$colorHover",
+  render: "code",
+  fontFamily: "$mono",
+  color: componentColors.code.foreground,
+  backgroundColor: componentColors.code.background,
   cursor: "inherit",
-  // @ts-ignore
-  fontFamily: isWeb ? "$mono" : void 0,
-  // @ts-ignore
-  fontSize: "85%",
-  padding: "$1.5",
-  tag: "code"
+  borderRadius: "$3",
+  fontSize: "90%",
+  lineHeight: "70%",
+  paddingHorizontal: "0.6%",
+  paddingVertical: "0.45%",
+  marginHorizontal: "-0.1%",
+  whiteSpace: "pre"
 });
-export {
-  Code,
-  CodeInline
-};
-//# sourceMappingURL=index.js.map
+export { Code, CodeInline };
+//# sourceMappingURL=index.native.js.map

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

@@ -1,6 +1 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/code/Code/home/clayrisser/Projects/bitspur/multiplatform.one/multiplatform.one/packages/components/src/code/Code/index.ts"],
-  "mappings": "AAqBA,SAASA,aAAa;AAEtB,SAASC,WAAWC,cAAc;AAE3B,IAAMC,OAAOD,OAAOD,WAAW;EACpCG,MAAM;EACNC,cAAc;EACdC,QAAQ;;EAERC,YAAYP,QAAQ,UAAUQ;EAC9BC,YAAY;EACZC,SAAS;;EAETC,MAAM;EACNC,KAAK;EACLC,YAAY;EACZC,UAAU;IACRC,SAAS;MACPC,MAAM;QACJC,iBAAiB;QACjBC,OAAO;MACT;IACF;EACF;AACF,CAAA,GAEaC,aAAajB,OAAOD,WAAW;EAC1CG,MAAM;EACNa,iBAAiB;EACjBZ,cAAc;EACda,OAAO;EACPZ,QAAQ;;EAERC,YAAYP,QAAQ,UAAUQ;;EAE9BY,UAAU;EACVV,SAAS;EACTE,KAAK;AACP,CAAA;",
-  "names": ["isWeb", "Paragraph", "styled", "Code", "name", "borderRadius", "cursor", "fontFamily", "undefined", "lineHeight", "padding", "size", "tag", "whiteSpace", "variants", "colored", "true", "backgroundColor", "color", "CodeInline", "fontSize"]
-}
+{"version":3,"names":["jsx","_jsx","useResolvedKnobs","Paragraph","styled","componentColors","CodeFrame","name","render","fontFamily","size","lineHeight","cursor","whiteSpace","padding","borderRadius","variants","colored","true","color","backgroundColor","Code","styleable","props","ref","knobProps","body","CodeInline","code","foreground","background","fontSize"],"sources":["../../../../src/code/Code/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,2BAAwB;AAGjC,SAASC,gBAAW,kCAAc;AAClC,SAASC,SAAA,EAAAC,MAAA,QAAuB;AAyBvB,SAAAC,eAAA;AAvBT,IAAAC,SAAM,GAAAF,MAAY,CAAAD,SAAO;EACvBI,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,IAAA,EAAM;EACNC,UAAA,EAAY;EACZC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,OAAA,EAAS;EACTC,YAAA,EAAc;EAEdC,QAAA,EAAU;IACRC,OAAA,EAAS;MACPC,IAAA,EAAM;QACJC,KAAA,EAAO;QACPC,eAAA,EAAiB;MACnB;IACF;EACF;AACF,CAAC;AAEM,IAAAC,IAAM,GAAAf,SAAO,CAAAgB,SAAU,WAAWC,KAAO,EAAAC,GAAQ;EACtD;IAAMC;EAAE,IAAUvB,gBAAI;EACtB,OAAO,eAAAD,IAAC,CAAAK,SAAA;IACTkB,GAAA;IAEM,GAAMC,SAAA,CAAAV,YAAoB;IAC/B,GAAAU,SAAM,CAAAC,IAAA;IACN,GAAAH;EACA;AAAY,EACZ;AAA4B,IAC5BI,UAAA,GAAAvB,MAAiB,CAAAD,SAAA,EAAgB;EACjCI,IAAA,cAAQ;EACRC,MAAA,QAAc;EACdC,UAAU;EACVU,KAAA,EAAAd,eAAY,CAAAuB,IAAA,CAAAC,UAAA;EACZT,eAAA,EAAAf,eAAmB,CAAAuB,IAAA,CAAAE,UAAA;EACnBlB,MAAA,WAAiB;EACjBG,YAAA,MAAkB;EAClBgB,QAAA,OAAY;EACbpB,UAAA","ignoreList":[]}

package/dist/esm/code/CodeBlock/CodeBlock.spec.mjs

@@ -0,0 +1,74 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { Code } from "../Code/index.mjs";
+import { Pre } from "../Pre/index.mjs";
+import { jsx } from "react/jsx-runtime";
+describe("CodeBlock rendering", () => {
+  it("should render Pre + Code combination successfully", () => {
+    const {
+      container
+    } = renderWithProviders(/* @__PURE__ */jsx(Pre, {
+      children: /* @__PURE__ */jsx(Code, {
+        children: 'const test = "hello";'
+      })
+    }));
+    const preElement = container.querySelector("pre");
+    const codeElement = container.querySelector("code");
+    expect(preElement).toBeDefined();
+    expect(codeElement).toBeDefined();
+    expect(container.textContent).toContain('const test = "hello"');
+  });
+  it("should render with language-specific class", () => {
+    const {
+      container
+    } = renderWithProviders(/* @__PURE__ */jsx(Pre, {
+      children: /* @__PURE__ */jsx(Code, {
+        className: "language-typescript",
+        children: 'const greeting: string = "hello"'
+      })
+    }));
+    const codeElement = container.querySelector("code");
+    expect(codeElement).toBeDefined();
+    expect(container.textContent).toContain('const greeting: string = "hello"');
+  });
+  it("should update content when changed", () => {
+    const {
+      container,
+      rerender
+    } = renderWithProviders(/* @__PURE__ */jsx(Pre, {
+      children: /* @__PURE__ */jsx(Code, {
+        children: 'const initial = "hello";'
+      })
+    }));
+    rerender(/* @__PURE__ */jsx(Pre, {
+      children: /* @__PURE__ */jsx(Code, {
+        children: 'const updated = "world";'
+      })
+    }));
+    expect(container.textContent).toContain('const updated = "world";');
+  });
+  it("should handle empty content", () => {
+    const {
+      container
+    } = renderWithProviders(/* @__PURE__ */jsx(Pre, {
+      children: /* @__PURE__ */jsx(Code, {})
+    }));
+    const preElement = container.querySelector("pre");
+    expect(preElement).toBeDefined();
+  });
+  it("should handle whitespace and multiline code", () => {
+    const {
+      container
+    } = renderWithProviders(/* @__PURE__ */jsx(Pre, {
+      children: /* @__PURE__ */jsx(Code, {
+        children: `const test = true;
+function greet() {
+  return "hello";
+}`
+      })
+    }));
+    expect(container.textContent).toContain("const test = true");
+    expect(container.textContent).toContain("function greet()");
+  });
+});
+//# sourceMappingURL=CodeBlock.spec.mjs.map

package/dist/esm/code/CodeBlock/CodeBlock.spec.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["renderWithProviders","describe","expect","it","Code","Pre","jsx","container","children","preElement","querySelector","codeElement","toBeDefined","textContent","toContain","className","rerender"],"sources":["../../../../src/code/CodeBlock/CodeBlock.spec.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,mBAAA,QAA2B;AACpC,SAASC,QAAA,EAAUC,MAAA,EAAQC,EAAA,QAAU;AACrC,SAASC,IAAA,QAAY;AACrB,SAASC,GAAA,QAAW;AASZ,SAAAC,GAAA;AAJRL,QAAA,CAAS,uBAAuB,MAAM;EACpCE,EAAA,CAAG,qDAAqD,MAAM;IAC5D,MAAM;MAAEI;IAAU,IAAIP,mBAAA,CACpB,eAAAM,GAAA,CAACD,GAAA;MACCG,QAAA,iBAAAF,GAAA,CAACF,IAAA;QAAKI,QAAA;MAAA,CAAqB;IAAA,CAC7B,CACF;IACA,MAAMC,UAAA,GAAaF,SAAA,CAAUG,aAAA,CAAc,KAAK;IAChD,MAAMC,WAAA,GAAcJ,SAAA,CAAUG,aAAA,CAAc,MAAM;IAClDR,MAAA,CAAOO,UAAU,EAAEG,WAAA,CAAY;IAC/BV,MAAA,CAAOS,WAAW,EAAEC,WAAA,CAAY;IAChCV,MAAA,CAAOK,SAAA,CAAUM,WAAW,EAAEC,SAAA,CAAU,sBAAsB;EAChE,CAAC;EAEDX,EAAA,CAAG,8CAA8C,MAAM;IACrD,MAAM;MAAEI;IAAU,IAAIP,mBAAA,CACpB,eAAAM,GAAA,CAACD,GAAA;MACCG,QAAA,iBAAAF,GAAA,CAACF,IAAA;QAAKW,SAAA,EAAU;QAAsBP,QAAA;MAAA,CAAgC;IAAA,CACxE,CACF;IACA,MAAMG,WAAA,GAAcJ,SAAA,CAAUG,aAAA,CAAc,MAAM;IAClDR,MAAA,CAAOS,WAAW,EAAEC,WAAA,CAAY;IAChCV,MAAA,CAAOK,SAAA,CAAUM,WAAW,EAAEC,SAAA,CAAU,kCAAkC;EAC5E,CAAC;EAEDX,EAAA,CAAG,sCAAsC,MAAM;IAC7C,MAAM;MAAEI,SAAA;MAAWS;IAAS,IAAIhB,mBAAA,CAC9B,eAAAM,GAAA,CAACD,GAAA;MACCG,QAAA,iBAAAF,GAAA,CAACF,IAAA;QAAKI,QAAA;MAAA,CAAwB;IAAA,CAChC,CACF;IACAQ,QAAA,CACE,eAAAV,GAAA,CAACD,GAAA;MACCG,QAAA,iBAAAF,GAAA,CAACF,IAAA;QAAKI,QAAA;MAAA,CAAwB;IAAA,CAChC,CACF;IACAN,MAAA,CAAOK,SAAA,CAAUM,WAAW,EAAEC,SAAA,CAAU,0BAA0B;EACpE,CAAC;EAEDX,EAAA,CAAG,+BAA+B,MAAM;IACtC,MAAM;MAAEI;IAAU,IAAIP,mBAAA,CACpB,eAAAM,GAAA,CAACD,GAAA;MACCG,QAAA,iBAAAF,GAAA,CAACF,IAAA,IAAK;IAAA,CACR,CACF;IACA,MAAMK,UAAA,GAAaF,SAAA,CAAUG,aAAA,CAAc,KAAK;IAChDR,MAAA,CAAOO,UAAU,EAAEG,WAAA,CAAY;EACjC,CAAC;EAEDT,EAAA,CAAG,+CAA+C,MAAM;IACtD,MAAM;MAAEI;IAAU,IAAIP,mBAAA,CACpB,eAAAM,GAAA,CAACD,GAAA;MACCG,QAAA,iBAAAF,GAAA,CAACF,IAAA;QACEI,QAAA;AAAA;AAAA;AAAA;MAAA,CAIH;IAAA,CACF,CACF;IACAN,MAAA,CAAOK,SAAA,CAAUM,WAAW,EAAEC,SAAA,CAAU,mBAAmB;IAC3DZ,MAAA,CAAOK,SAAA,CAAUM,WAAW,EAAEC,SAAA,CAAU,kBAAkB;EAC5D,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { Code } from "../Code/index.native.js";
+import { Pre } from "../Pre/index.native.js";
+describe("CodeBlock rendering", function () {
+  it("should render Pre + Code combination successfully", function () {
+    var {
+      container
+    } = renderWithProviders(/* @__PURE__ */_jsx(Pre, {
+      children: /* @__PURE__ */_jsx(Code, {
+        children: 'const test = "hello";'
+      })
+    }));
+    var preElement = container.querySelector("pre");
+    var codeElement = container.querySelector("code");
+    expect(preElement).toBeDefined();
+    expect(codeElement).toBeDefined();
+    expect(container.textContent).toContain('const test = "hello"');
+  });
+  it("should render with language-specific class", function () {
+    var {
+      container
+    } = renderWithProviders(/* @__PURE__ */_jsx(Pre, {
+      children: /* @__PURE__ */_jsx(Code, {
+        className: "language-typescript",
+        children: 'const greeting: string = "hello"'
+      })
+    }));
+    var codeElement = container.querySelector("code");
+    expect(codeElement).toBeDefined();
+    expect(container.textContent).toContain('const greeting: string = "hello"');
+  });
+  it("should update content when changed", function () {
+    var {
+      container,
+      rerender
+    } = renderWithProviders(/* @__PURE__ */_jsx(Pre, {
+      children: /* @__PURE__ */_jsx(Code, {
+        children: 'const initial = "hello";'
+      })
+    }));
+    rerender(/* @__PURE__ */_jsx(Pre, {
+      children: /* @__PURE__ */_jsx(Code, {
+        children: 'const updated = "world";'
+      })
+    }));
+    expect(container.textContent).toContain('const updated = "world";');
+  });
+  it("should handle empty content", function () {
+    var {
+      container
+    } = renderWithProviders(/* @__PURE__ */_jsx(Pre, {
+      children: /* @__PURE__ */_jsx(Code, {})
+    }));
+    var preElement = container.querySelector("pre");
+    expect(preElement).toBeDefined();
+  });
+  it("should handle whitespace and multiline code", function () {
+    var {
+      container
+    } = renderWithProviders(/* @__PURE__ */_jsx(Pre, {
+      children: /* @__PURE__ */_jsx(Code, {
+        children: `const test = true;
+function greet() {
+  return "hello";
+}`
+      })
+    }));
+    expect(container.textContent).toContain("const test = true");
+    expect(container.textContent).toContain("function greet()");
+  });
+});
+//# sourceMappingURL=CodeBlock.spec.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","renderWithProviders","describe","expect","it","Code","Pre","container","children","preElement","querySelector","codeElement","toBeDefined","textContent","toContain","className","rerender"],"sources":["../../../../src/code/CodeBlock/CodeBlock.spec.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,2BAA2B;AACpC,SAASC,mBAAkB,uCAAU;AACrC,SAASC,QAAA,EAAAC,MAAY,EAAAC,EAAA;AACrB,SAASC,IAAA,QAAW;AASZ,SAAAC,GAAA;AAJRJ,QAAA,CAAS,uBAAuB,YAAM;EACpCE,EAAA,CAAG,qDAAqD,YAAM;IAC5D;MAAMG;IAAE,IAAUN,mBAAI,gBAAAD,IAAA,CAAAM,GAAA;MACpBE,QAAA,iBAACR,IACC,CAAAK,IAAA;QAEJG,QAAA;MACA;IACA;IACA,IAAAC,UAAO,GAAUF,SAAE,CAAAG,aAAY;IAC/B,IAAAC,WAAO,GAAWJ,SAAE,CAAAG,aAAY;IAChCP,MAAA,CAAOM,UAAU,EAAAG,WAAa;IAC/BT,MAAA,CAAAQ,WAAA,EAAAC,WAAA;IAEDT,MAAG,CAAAI,SAAA,CAAAM,WAAA,EAAAC,SAAA,uBAAoD;EACrD;EAAsBV,EAAA,6CAElB;IAEJ;MAAAG;IAAA,IAAAN,mBAAA,gBAAAD,IAAA,CAAAM,GAAA;MACAE,QAAM,iBAAcR,IAAU,CAAAK,IAAA;QAC9BU,SAAO,uBAAyB;QAChCP,QAAO;MACR;IAED,CAAG;IACD,IAAAG,WAAQ,GAAAJ,SAAW,CAASG,aAAI;IAAAP,MAC9B,CAAAQ,WAAA,EAAAC,WACE;IAEJT,MAAA,CAAAI,SAAA,CAAAM,WAAA,EAAAC,SAAA;EACA;EAAAV,EAAA,qCAEI;IAEJ;MAAAG,SAAA;MAAAS;IAAA,IAAAf,mBAAA,gBAAAD,IAAA,CAAAM,GAAA;MACAE,QAAO,iBAAqBR,IAAE,CAAAK,IAAA;QAC/BG,QAAA;MAEE;IACD;IAAsBQ,QACpB,gBAAChB,IACC,CAAAM,GAAA;MAEJE,QAAA,iBAAAR,IAAA,CAAAK,IAAA;QACAG,QAAM;MACN;IACD;IAEDL,MAAG,CAAAI,SAAA,CAAAM,WAAA,EAAAC,SAAA,2BAAqD;EACtD;EAAsBV,EAAA,8BAElB;IACG;MAAAG;IAAA,IAAAN,mBAAA,gBAAAD,IAAA,CAAAM,GAAA;MAAAE,QAAA,iBAAAR,IAAA,CAAAK,IAAA;IAIH,GACF;IACF,IAAAI,UAAA,GAAAF,SAAA,CAAAG,aAAA;IACAP,MAAA,CAAOM,UAAU,EAAAG,WAAa;EAC9B;EACFR,EAAC;IACF;MAAAG;IAAA,IAAAN,mBAAA,gBAAAD,IAAA,CAAAM,GAAA","ignoreList":[]}

package/dist/esm/code/CodeBlock/codeBlock.stories.mjs

@@ -0,0 +1,31 @@
+import { CodeBlock } from "./index.mjs";
+const meta = {
+  title: "Components/CodeBlock",
+  component: CodeBlock,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  }
+};
+const main = {
+  name: "Main",
+  args: {
+    backgroundColor: "$color2",
+    debug: false,
+    disableCopy: false,
+    isCollapsible: false,
+    isHighlightingLines: true,
+    showLineNumbers: false,
+    children: `
+const hello = 'world';
+
+function howdy() {
+  return 'texas';
+}
+`
+  }
+};
+var codeBlock_stories_default = meta;
+export { codeBlock_stories_default as default, main };
+//# sourceMappingURL=codeBlock.stories.mjs.map

package/dist/esm/code/CodeBlock/codeBlock.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["CodeBlock","meta","title","component","parameters","status","type","main","name","args","backgroundColor","debug","disableCopy","isCollapsible","isHighlightingLines","showLineNumbers","children","codeBlock_stories_default"],"sources":["../../../../src/code/CodeBlock/codeBlock.stories.ts"],"sourcesContent":[null],"mappings":"AACA,SAASA,SAAA,QAAiB;AAE1B,MAAMC,IAAA,GAAa;EACjBC,KAAA,EAAO;EACPC,SAAA,EAAWH,SAAA;EACXI,UAAA,EAAY;IACVC,MAAA,EAAQ;MAAEC,IAAA,EAAM;IAAO;EACzB;AACF;AAEO,MAAMC,IAAA,GAAmC;EAC9CC,IAAA,EAAM;EACNC,IAAA,EAAM;IACJC,eAAA,EAAiB;IACjBC,KAAA,EAAO;IACPC,WAAA,EAAa;IACbC,aAAA,EAAe;IACfC,mBAAA,EAAqB;IACrBC,eAAA,EAAiB;IACjBC,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOZ;AACF;AAEA,IAAOC,yBAAA,GAAQhB,IAAA","ignoreList":[]}

package/dist/esm/code/CodeBlock/codeBlock.stories.native.js

@@ -0,0 +1,31 @@
+import { CodeBlock } from "./index.native.js";
+var meta = {
+  title: "Components/CodeBlock",
+  component: CodeBlock,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  }
+};
+var main = {
+  name: "Main",
+  args: {
+    backgroundColor: "$color2",
+    debug: false,
+    disableCopy: false,
+    isCollapsible: false,
+    isHighlightingLines: true,
+    showLineNumbers: false,
+    children: `
+const hello = 'world';
+
+function howdy() {
+  return 'texas';
+}
+`
+  }
+};
+var codeBlock_stories_default = meta;
+export { codeBlock_stories_default as default, main };
+//# sourceMappingURL=codeBlock.stories.native.js.map

package/dist/esm/code/CodeBlock/codeBlock.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CodeBlock","meta","title","component","parameters","status","type","main","name","args","backgroundColor","debug","disableCopy","isCollapsible","isHighlightingLines","showLineNumbers","children"],"sources":["../../../../src/code/CodeBlock/codeBlock.stories.ts"],"sourcesContent":[null],"mappings":"AACA,SAASA,SAAA,QAAiB;AAE1B,IAAAC,IAAM;EACJC,KAAA,EAAO;EACPC,SAAA,EAAWH,SAAA;EACXI,UAAA,EAAY;IACVC,MAAA,EAAQ;MACVC,IAAA;IACF;EAEO;AAAyC;AACxC,IACNC,IAAM;EAAAC,IACJ;EAAiBC,IACjB;IACAC,eAAa;IACbC,KAAA;IACAC,WAAA;IACAC,aAAA,OAAiB;IACjBC,mBAAU;IAAAC,eAAA;IAAAC,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQd;EAEA","ignoreList":[]}

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

@@ -1,27 +1,112 @@
-import { useMemo } from "react";
-import { MDX } from "../../mdx/MDX";
-import { MDXCodeBlockContext } from "../../mdx/MDXCodeBlock/MDXCodeBlockContext.mjs";
-import { jsx } 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.mjs";
+import { Code } from "../Code/index.mjs";
+import { HighlightedCode } from "../HighlightedCode/index.mjs";
+import { useShikiTokens } from "../Highlighter/index.mjs";
+import { Pre } from "../Pre/index.mjs";
+import { useClipboard } from "../../hooks/useClipboard.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
 function CodeBlock({
-  children,
+  children = "",
   language = "tsx",
-  components,
-  debug,
-  ...props
+  theme,
+  showLineNumbers: propShowLineNumbers,
+  highlightLines = [],
+  disableCopy,
+  size
 }) {
-  const mdxString = useMemo(() => `\`\`\`${language}
-${children?.trim()}
-\`\`\``, [children, language]),
-    value = useMemo(() => ({
-      ...props,
-      debug
-    }), [props, debug]);
-  return /* @__PURE__ */jsx(MDXCodeBlockContext.Provider, {
-    value,
-    children: /* @__PURE__ */jsx(MDX, {
-      components,
-      debug,
-      children: mdxString
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const codeText = children.trim();
+  const tokens = useShikiTokens(codeText, language, theme);
+  const lines = tokens?.length ?? codeText.split("\n").length;
+  const showLineNumbers = propShowLineNumbers ?? lines > 10;
+  const isLong = lines > 22;
+  const [isCutoff, setIsCutoff] = useState(isLong);
+  const {
+    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: () => 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 ?? "$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"
+              }
+            })
+          })
+        })]
+      })
     })
   });
 }

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","MDX","MDXCodeBlockContext","jsx","CodeBlock","children","language","components","debug","props","mdxString","trim","value","Provider"],"sources":["../../../../src/code/CodeBlock/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,OAAA,QAAe;AAExB,SAASC,GAAA,QAAW;AAEpB,SAASC,mBAAA,QAA2B;AAyB9B,SAAAC,GAAA;AAhBC,SAASC,UAAU;EACxBC,QAAA;EACAC,QAAA,GAAW;EACXC,UAAA;EACAC,KAAA;EACA,GAAGC;AACL,GAAmB;EACjB,MAAMC,SAAA,GAAYV,OAAA,CAChB,MAAM,SAASM,QAAQ;AAAA,EACzBD,QAAA,EAAUM,IAAA,CAAK,CAAC;AAAA,SAEd,CAACN,QAAA,EAAUC,QAAQ,CACrB;IACMM,KAAA,GAAQZ,OAAA,CAAQ,OAAO;MAAE,GAAGS,KAAA;MAAOD;IAAM,IAAI,CAACC,KAAA,EAAOD,KAAK,CAAC;EACjE,OACE,eAAAL,GAAA,CAACD,mBAAA,CAAoBW,QAAA,EAApB;IAA6BD,KAAA;IAC5BP,QAAA,iBAAAF,GAAA,CAACF,GAAA;MAAIM,UAAA;MAAwBC,KAAA;MAC1BH,QAAA,EAAAK;IAAA,CACH;EAAA,CACF;AAEJ","ignoreList":[]}
+{"version":3,"names":["LinearGradient","CheckCircleIcon","ClipboardIcon","useResolvedKnobs","useState","ScrollView","Button","zIndex","Spacer","TooltipSimple","XStack","YStack","ErrorBoundary","Code","HighlightedCode","useShikiTokens","Pre","useClipboard","jsx","jsxs","CodeBlock","children","language","theme","showLineNumbers","propShowLineNumbers","highlightLines","disableCopy","size","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","$xs","display"],"sources":["../../../../src/code/CodeBlock/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}